chen.ist Landing Page Redesign: Conversion-Optimized Design Specification
Creative Direction Brief | March 2026 Objective: Maximize cal.com/chenist booking conversions across 3 service landing pages Tech Stack: Quarto (.qmd), Bootstrap 5, custom CSS, no JS frameworks Brand: Navy #323642, Green #81BD4A, Off-white #E5E3DA
PAGE 1: Digital Infrastructure (/digital/)
Section 1: Hero (Above the Fold)
Formula: PAS (Problem-Agitate-Solve) compressed into headline + subheadline
<div class="lp-hero lp-hero--dark">
<div class="container">
<div class="lp-hero__badge">Digital Infrastructure for SMBs</div>
<h1>Stop Paying Microsoft Licenses<br>for Software That <em>Already Exists Free</em></h1>
<p class="lp-hero__sub">
We build production-grade open-source, UNIX, and Apple Business infrastructure
that saves SMBs 40-70% on IT costs while giving you full control of your data.
</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large lp-btn--pulse">
<i class="bi bi-calendar-check"></i> Get Your Free Infrastructure Audit
</a>
<div class="lp-hero__proof">
<i class="bi bi-shield-check"></i> Trusted by SMBs across Romania & the EU |
<strong>100% open-source</strong> — no vendor lock-in
</div>
</div>
</div>Why this headline works: - “Stop Paying Microsoft Licenses” – names the exact pain (cost) and the exact villain (Microsoft licensing). - “Already Exists Free” – the green emphasis creates a visual and emotional highlight on the key benefit. - The 40-70% stat is specific enough to be credible, vague enough to be defensible.
Visual element: No hero image needed. The dark navy background with a subtle CSS pattern (diagonal lines or dots at 3% opacity) creates a premium tech feel. If an image is desired later, use a dark server room with green ambient lighting to match brand.
CTA button: “Get Your Free Infrastructure Audit” is the specific action. “Book a Consultation” is generic. This tells the visitor exactly what they get. The pulse animation draws the eye on first load and stops on hover (so it doesn’t feel spammy during interaction).
Section 2: Pain Points
<div class="lp-section">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">The Problem</div>
<h2>Your IT Budget Is Being Drained by Licenses You Don't Need</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-cash-stack"></i></div>
<div>
<h4>Rising License Costs</h4>
<p>Microsoft 365, Google Workspace, and Adobe subscriptions increase every year. A 50-person company spends EUR 30,000+/year just on basic productivity software.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-lock-fill"></i></div>
<div>
<h4>Vendor Lock-In</h4>
<p>Your data sits on someone else's servers, governed by their terms. If they change pricing or policies, you have no leverage and no exit plan.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-cloud-slash"></i></div>
<div>
<h4>No Control Over Data</h4>
<p>GDPR requires you to know where your data is processed. With US cloud providers, your EU customer data may cross borders without your knowledge.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-people"></i></div>
<div>
<h4>No In-House IT Team</h4>
<p>You can't afford a full sysadmin team, so infrastructure decisions get made by whoever is least busy. Systems break, nobody knows why.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-apple"></i></div>
<div>
<h4>Mac Management Chaos</h4>
<p>Your team uses Macs but nobody manages them centrally. No MDM, no security policies, no zero-touch deployment. New hires wait days to get set up.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-exclamation-triangle"></i></div>
<div>
<h4>NIS2 Compliance Pressure</h4>
<p>EU regulations are tightening. You need documented infrastructure, access controls, and incident response capabilities you don't currently have.</p>
</div>
</div>
</div>
</div>
</div>
</div>Layout: 3x2 grid on desktop, 2-column on tablet, stacked on mobile. Each card has a red left border and warning-toned icon to create visual tension that the solution section resolves.
Section 3: Solution (What We Build)
Keep the existing 3-feature-row pattern (Open-Source Stack, UNIX Infrastructure, Apple Business) but upgrade the structure:
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">The Solution</div>
<h2>Infrastructure That Works for You, Not Against You</h2>
<p>Three pillars of modern SMB infrastructure, deployed and managed by chen.ist.</p>
</div>
<!-- Open-Source Stack -->
<div class="lp-feature-row">
<div class="lp-feature-row__img">
<img src="/assets/images/stock/code-screen.jpg" alt="Open-source software development environment">
</div>
<div class="lp-feature-row__text">
<div class="lp-section__eyebrow">Pillar 1</div>
<h2>Open-Source Stack for Business</h2>
<p>Replace expensive proprietary licenses with battle-tested open-source alternatives.
We handle deployment, configuration, security hardening, and ongoing maintenance.</p>
<div class="row mt-3">
<div class="col-6">
<ul class="lp-checklist">
<li>Nextcloud (files, calendar)</li>
<li>Collabora Online (docs)</li>
<li>Matrix/Element (chat)</li>
</ul>
</div>
<div class="col-6">
<ul class="lp-checklist">
<li>Keycloak (SSO)</li>
<li>Prometheus + Grafana</li>
<li>PostgreSQL, MinIO</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Repeat the same pattern for UNIX Infrastructure and Apple Business sections.
What makes it premium: The eyebrow labels (“Pillar 1”, “Pillar 2”, “Pillar 3”) create a sense of structured methodology. The 2-column checklist inside each feature prevents the current long single-column list that looks overwhelming.
Section 5: Pricing / Packages
Keep the existing 3-tier structure (Starter, Growth, Enterprise) but upgrade with conversion psychology:
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">Packages</div>
<h2>Infrastructure Tailored to Your Team Size</h2>
<p>All packages include deployment, hardening, monitoring, and ongoing support. Custom pricing based on your specific needs.</p>
</div>
<div class="row">
<!-- Starter -->
<div class="col-md-4 mb-4">
<div class="lp-package">
<h3>Starter</h3>
<div class="lp-package__subtitle">1-10 employees</div>
<div class="lp-package__price">Custom pricing based on scope</div>
<ul>
<li>Apple Business setup + Blueprints</li>
<li>1 Linux server (Debian/Ubuntu)</li>
<li>Nextcloud (files, contacts, calendar)</li>
<li>Business email on custom domain</li>
<li>Basic firewall (OpenBSD pf or UFW)</li>
<li>Automated backups (Restic)</li>
<li>Uptime monitoring</li>
</ul>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--outline lp-btn--full">Get a Quote</a>
</div>
</div>
<!-- Growth (FEATURED) -->
<div class="col-md-4 mb-4">
<div class="lp-package lp-package--featured">
<div class="lp-package__badge">Most Popular</div>
<h3>Growth</h3>
<div class="lp-package__subtitle">11-50 employees</div>
<div class="lp-package__price">Custom pricing based on scope</div>
<ul>
<li>Everything in Starter, plus:</li>
<li>Full Apple MDM with team grouping</li>
<li>OpenBSD dedicated firewall/VPN</li>
<li>Keycloak SSO across all systems</li>
<li>Matrix/Element team messaging</li>
<li>Collabora Online (document editing)</li>
<li>Prometheus + Grafana monitoring</li>
<li>Samba/AD bridging (if needed)</li>
</ul>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--full">Book Free Consultation</a>
</div>
</div>
<!-- Enterprise -->
<div class="col-md-4 mb-4">
<div class="lp-package">
<h3>Enterprise</h3>
<div class="lp-package__subtitle">50+ employees</div>
<div class="lp-package__price">Custom pricing based on scope</div>
<ul>
<li>Everything in Growth, plus:</li>
<li>Apple Business Admin API integration</li>
<li>NixOS declarative multi-server fleet</li>
<li>FreeBSD ZFS storage cluster</li>
<li>High-availability configurations</li>
<li>Multi-site VPN mesh</li>
<li>Compliance baselines (NIS2, GDPR)</li>
<li>24/7 monitoring + incident response</li>
</ul>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--outline lp-btn--full">Contact Us</a>
</div>
</div>
</div>
</div>
</div>Anchoring strategy: Growth tier is highlighted (“Most Popular” badge, green border, primary CTA button) because: 1. It is the sweet spot for chen.ist’s target audience (11-50 employees) 2. It makes Starter look like “not enough” and Enterprise look like “maybe later” 3. The featured tier gets the only primary (filled) CTA button – the other two get outline buttons
No prices shown: Correct choice for B2B consultancy. Custom pricing creates a conversation (which is the conversion goal). “Custom pricing based on scope” is more honest than “Contact for pricing” and reduces friction.
Section 6: Urgency
<div class="lp-section">
<div class="container" style="max-width: 800px;">
<div class="lp-urgency">
<h3><i class="bi bi-apple me-2"></i>Apple Business Launches <span class="lp-urgency__date">April 14, 2026</span></h3>
<p>The new unified platform replaces Apple Business Manager, Apple Business Essentials, and Apple Business Connect. Companies that set up before launch get priority migration support. <strong>We are certified early-access deployment partners.</strong></p>
</div>
<div class="text-center mt-4">
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary">
<i class="bi bi-calendar-check"></i> Reserve Your Setup Slot
</a>
</div>
</div>
</div>Why it works: This is legitimate urgency (April 14 is a real date), tied to a real event (Apple Business launch), with a real benefit (early access). Not manufactured scarcity.
Section 7: Registration / Contact Form
Keep the existing tabbed form (Formspree for Romania, Cal.com for international) but wrap it in the new styling:
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<h2>Start Your Infrastructure Transformation</h2>
<p>Register for a consultation or book a call directly.</p>
</div>
<div class="lp-form-wrap">
<!-- Keep existing tab structure with Formspree form and Cal.com embed -->
<!-- Same form fields as current, wrapped in new .lp-form-wrap -->
</div>
</div>
</div>Section 8: Final CTA
<div class="lp-cta-block">
<div class="container">
<h2>Your competitors are already cutting IT costs.<br>When will you?</h2>
<p>30-minute consultation. No sales pitch. Just an honest assessment of what open-source infrastructure can do for your business.</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-calendar-check"></i> Book Your Free Audit
</a>
<div class="lp-cta-block__objection">
<span><i class="bi bi-check-circle-fill"></i> Free, no obligation</span>
<span><i class="bi bi-check-circle-fill"></i> 30 minutes or less</span>
<span><i class="bi bi-check-circle-fill"></i> Get a written proposal within 48h</span>
</div>
</div>
</div>Objection handling: The three micro-guarantees below the CTA eliminate the top 3 objections: 1. “Will it cost me money?” – Free, no obligation 2. “Will it waste my time?” – 30 minutes or less 3. “What do I actually get?” – Written proposal within 48h
Micro-conversions (for people not ready to book)
<!-- Place between the Packages section and the Form section -->
<div class="lp-section">
<div class="container" style="max-width: 700px;">
<div class="lp-lead-magnet">
<div class="lp-lead-magnet__icon"><i class="bi bi-file-earmark-pdf"></i></div>
<div>
<h4>Free Guide: Open-Source Alternatives for Every Business Tool</h4>
<p>A practical comparison of 30+ proprietary tools and their open-source replacements, with estimated cost savings for teams of 10, 25, and 50.</p>
<a href="#" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">
<i class="bi bi-download"></i> Download PDF (No email required)
</a>
</div>
</div>
</div>
</div>Strategy: No email gate on the PDF – this is a trust builder. The PDF itself contains the Cal.com booking link on every page. People who download are pre-qualified leads even without their email. This is counter-intuitive but works better for B2B consultancy where the sales cycle is longer.
PAGE 2: Security (/security/)
Section 1: Hero
Formula: AIDA (Attention-Interest-Desire-Action) with fear-based opener
<div class="lp-hero lp-hero--dark">
<div class="container">
<div class="lp-hero__badge">Blue Team Cybersecurity & NIS2 Compliance</div>
<h1>The Average SMB Takes <em>197 Days</em><br>to Detect a Breach. How Long Would Yours Take?</h1>
<p class="lp-hero__sub">
Proactive Blue Team cybersecurity operations, NIS2 compliance programs, and
CISO-as-a-Service for organizations that can't afford to be the next headline.
</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large lp-btn--pulse">
<i class="bi bi-shield-check"></i> Get a Free Security Assessment
</a>
<div class="lp-hero__proof">
<i class="bi bi-clock-history"></i> NIS2 compliance deadline is <strong>active now</strong> — fines up to <strong>EUR 10M or 2% of global turnover</strong>
</div>
</div>
</div>Why this headline works: - “197 days” is the real IBM/Ponemon statistic. Specific numbers create credibility. - The question format forces the reader to think about their own situation (engagement hook). - Green emphasis on “197 Days” creates visual anchoring on the most alarming data point. - The proof line below the CTA introduces NIS2 penalty stakes immediately.
Section 2: Pain Points
<div class="lp-section">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">The Reality</div>
<h2>Most SMBs Are One Phishing Email Away from a Crisis</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-envelope-exclamation"></i></div>
<div>
<h4>No Threat Detection</h4>
<p>Without a SOC, attacks go unnoticed for months. By the time you discover a breach, the damage is done -- data exfiltrated, ransomware deployed, trust destroyed.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-file-earmark-x"></i></div>
<div>
<h4>NIS2 Non-Compliance</h4>
<p>The NIS2 Directive is now enforceable across the EU. Non-compliant organizations face fines of EUR 7-10M and personal liability for management boards.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-person-x"></i></div>
<div>
<h4>No Security Leadership</h4>
<p>You know you need a CISO but can't justify the EUR 120K+ salary. So security decisions get made ad-hoc, or not at all.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-clock"></i></div>
<div>
<h4>24-Hour Reporting Requirement</h4>
<p>NIS2 requires you to report significant incidents within 24 hours. If you don't have detection and response procedures, you'll miss this window.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-diagram-3"></i></div>
<div>
<h4>Supply Chain Exposure</h4>
<p>Your vendors are your attack surface. NIS2 mandates supply chain security assessments that most SMBs have never conducted.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-graph-down-arrow"></i></div>
<div>
<h4>Reputation Destruction</h4>
<p>The average cost of a data breach for SMBs is EUR 120,000. But the reputational damage -- lost clients, broken trust -- is incalculable.</p>
</div>
</div>
</div>
</div>
</div>
</div>Section 3: Solution (Services)
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">Our Services</div>
<h2>Complete Cybersecurity Operations for Your Organization</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-shield-check"></i></div>
<h3>SOC Monitoring</h3>
<p>24/7 real-time surveillance, threat detection, and expert analysis of your security environment.</p>
<ul>
<li>SIEM deployment</li>
<li>Real-time alerting</li>
<li>Monthly threat reports</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-search"></i></div>
<h3>Threat Hunting</h3>
<p>Proactive identification of hidden threats and advanced persistent attackers in your network.</p>
<ul>
<li>IOC analysis</li>
<li>Behavioral detection</li>
<li>Threat intelligence feeds</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-clipboard-check"></i></div>
<h3>NIS2 Compliance</h3>
<p>End-to-end assessments, gap analysis, and compliance roadmaps for the NIS2 Directive.</p>
<ul>
<li>Gap analysis</li>
<li>Risk framework</li>
<li>Compliance roadmap</li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-person-badge"></i></div>
<h3>CISO as a Service</h3>
<p>Strategic cybersecurity leadership, board reporting, and policy development on demand.</p>
<ul>
<li>Security strategy</li>
<li>Board-level reporting</li>
<li>Policy development</li>
</ul>
</div>
</div>
</div>
</div>
</div>Section 4: Process (How We Work)
Replace the current icon-grid with a vertical timeline that feels more methodical:
<div class="lp-section">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="lp-section__eyebrow">Our Process</div>
<h2 style="font-size: 2.25rem; font-weight: 700;">A Proven Four-Phase Approach</h2>
<p style="color: var(--lp-gray-500); font-size: 1.05rem; line-height: 1.7;">From initial discovery to continuous monitoring, our structured methodology ensures nothing falls through the cracks.</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary mt-3">
<i class="bi bi-calendar-check"></i> Start with Discovery
</a>
</div>
<div class="col-md-6 offset-md-1">
<div class="lp-process">
<div class="lp-process__number">1</div>
<h4>Discovery</h4>
<p>Stakeholder interviews, documentation review, and scoping analysis to understand your environment and regulatory obligations.</p>
</div>
<div class="lp-process">
<div class="lp-process__number">2</div>
<h4>Assessment</h4>
<p>Technical controls evaluation, risk management review, and gap identification against NIS2 requirements and industry standards.</p>
</div>
<div class="lp-process">
<div class="lp-process__number">3</div>
<h4>Implementation</h4>
<p>Remediation of identified gaps, policy development, security controls deployment, and compliance program buildout.</p>
</div>
<div class="lp-process">
<div class="lp-process__number">4</div>
<h4>Monitoring</h4>
<p>Continuous SOC monitoring, regular compliance reviews, threat hunting, and ongoing security posture optimization.</p>
</div>
</div>
</div>
</div>
</div>Section 5: NIS2 Sectors (Who Needs This)
Keep the current 2-column Essential/Important entities list but add urgency framing:
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">NIS2 Scope</div>
<h2>Does NIS2 Apply to Your Organization?</h2>
<p>If you operate in any of these sectors and have 50+ employees or EUR 10M+ revenue, NIS2 applies to you.</p>
</div>
<!-- Keep existing 2-column Essential/Important layout -->
<!-- But add at bottom: -->
<div class="text-center mt-4">
<div class="lp-urgency" style="max-width: 700px; margin: 0 auto;">
<h3>Not sure if NIS2 applies to you?</h3>
<p>Book a free 15-minute scoping call. We'll tell you in plain language whether you're in scope, what you need to do, and by when.</p>
</div>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary mt-3">
<i class="bi bi-calendar-check"></i> Check My NIS2 Status
</a>
</div>
</div>
</div>Section 7: Urgency
<div class="lp-section--dark">
<div class="container" style="max-width: 800px; text-align: center;">
<div class="lp-section__eyebrow" style="color: var(--lp-green);">Time-Sensitive</div>
<h2 style="color: var(--lp-offwhite);">NIS2 Enforcement Is Active. Fines Are Real.</h2>
<p style="color: rgba(229,227,218,0.8); font-size: 1.05rem; max-width: 600px; margin: 0 auto 2rem;">
EU member states are now enforcing the NIS2 Directive. Organizations found non-compliant
face fines up to EUR 10M or 2% of global annual turnover -- whichever is higher.
Management boards face personal liability.
</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-shield-check"></i> Start Your Compliance Journey
</a>
</div>
</div>Why it works: NIS2 enforcement is real, the fines are real, the personal liability is real. This is not manufactured urgency. The dark section background creates gravity and seriousness.
Section 8: Final CTA
<div class="lp-cta-block">
<div class="container">
<h2>You Can't Protect What You Can't See</h2>
<p>A free 30-minute security assessment reveals your actual risk posture, NIS2 gaps, and the 3 highest-priority actions you should take this quarter.</p>
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-shield-check"></i> Get Your Free Assessment
</a>
<div class="lp-cta-block__objection">
<span><i class="bi bi-check-circle-fill"></i> Free, confidential assessment</span>
<span><i class="bi bi-check-circle-fill"></i> No vendor lock-in</span>
<span><i class="bi bi-check-circle-fill"></i> Actionable report within 5 business days</span>
</div>
</div>
</div>Micro-conversions
<div class="lp-section--alt">
<div class="container" style="max-width: 700px;">
<div class="lp-lead-magnet">
<div class="lp-lead-magnet__icon"><i class="bi bi-clipboard-check"></i></div>
<div>
<h4>Free NIS2 Self-Assessment Checklist</h4>
<p>20-point checklist to evaluate your organization's current NIS2 readiness. Takes 10 minutes, reveals your biggest gaps.</p>
<a href="/resources/tools/zero-trust-assessment.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">
<i class="bi bi-arrow-right"></i> Take the Assessment
</a>
</div>
</div>
</div>
</div>Strategy: Link to the existing zero-trust assessment tool (already built at /resources/tools/zero-trust-assessment.html). This is a self-qualifying micro-conversion – people who complete it realize they need help and book a call.
PAGE 3: Academy (/academy/)
Complete Redesign Required
The current academy page is a content directory (listing of sub-pages). For conversion, it needs to function as a landing page that drives enrollment and consultation bookings, with the directory as a secondary function below.
Section 1: Hero
Formula: Before/After bridge
<div class="lp-hero lp-hero--dark">
<div class="container">
<div class="lp-hero__badge">chen.ist Academy</div>
<h1>Your Team Knows <em>How to Use Software</em>.<br>Do They Know <em>How to Defend It</em>?</h1>
<p class="lp-hero__sub">
Hands-on cybersecurity and open-source training programs that turn your employees
from your biggest vulnerability into your strongest defense.
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-calendar-check"></i> Book a Training Consultation
</a>
<a href="#programs" class="lp-btn lp-btn--outline lp-btn--large" style="border-color: rgba(229,227,218,0.4); color: var(--lp-offwhite);">
Browse Programs
</a>
</div>
<div class="lp-hero__proof">
<strong>Summer School 2025</strong> registration open |
Courses, trainings, hackathons & more
</div>
</div>
</div>Why this headline works: “How to Use Software” vs “How to Defend It” creates a knowledge gap the reader immediately recognizes. It targets CTO/IT manager buyers who know their team’s security awareness is weak. The “biggest vulnerability into strongest defense” subhead reframes employees from a problem into an opportunity.
Two CTAs: Primary (Book consultation) for decision-makers ready to buy. Secondary (Browse Programs) for researchers and individual learners.
Section 2: Pain Points
<div class="lp-section">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">The Skills Gap</div>
<h2>95% of Cybersecurity Breaches Involve Human Error</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-envelope-exclamation"></i></div>
<div>
<h4>Phishing Vulnerability</h4>
<p>One untrained employee clicking one malicious link can compromise your entire organization. Generic "don't click suspicious links" training doesn't work.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-file-earmark-lock"></i></div>
<div>
<h4>Compliance Training Gaps</h4>
<p>NIS2 requires documented security awareness programs. A yearly PowerPoint doesn't meet the standard. You need ongoing, measurable training.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-3">
<div class="lp-pain">
<div class="lp-pain__icon"><i class="bi bi-mortarboard"></i></div>
<div>
<h4>Outdated IT Skills</h4>
<p>Your IT team learned Linux 10 years ago. Modern infrastructure (NixOS, containers, zero-trust) requires continuous learning they're not getting.</p>
</div>
</div>
</div>
</div>
</div>
</div>Section 3: Solution (Training Formats)
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">Training Formats</div>
<h2>Learning That Fits Your Team's Schedule</h2>
<p>From 1-hour microlearning to week-long immersive programs, pick the format that works.</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-lightning-charge"></i></div>
<h3>Microlearning</h3>
<p>1-2 hour focused sessions on specific tools and techniques. Minimal time away from work, maximum skill transfer.</p>
<ul>
<li>CLI fundamentals</li>
<li>QubesOS, NixOS</li>
<li>Security tools</li>
</ul>
<a href="/academy/microlearning.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Browse Sessions</a>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="lp-feature" style="border-color: var(--lp-green);">
<div class="lp-feature__icon"><i class="bi bi-journal-code"></i></div>
<h3>Intensive Trainings</h3>
<p>1-2 day workshops that build practical skills through hands-on labs and real-world scenarios. Perfect for team upskilling.</p>
<ul>
<li>Cybersecurity Essentials</li>
<li>Security Awareness for Teams</li>
<li>Linux Admin Fundamentals</li>
<li>NixOS Security Jumpstart</li>
</ul>
<a href="/academy/trainings.html" class="lp-btn lp-btn--primary" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Browse Trainings</a>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-book"></i></div>
<h3>Multi-Week Courses</h3>
<p>Deep-dive courses spanning multiple weeks for comprehensive skill development. For teams building serious expertise.</p>
<ul>
<li>Practical Cybersecurity</li>
<li>Open Source Development</li>
<li>Data Protection & Privacy</li>
</ul>
<a href="/academy/courses.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Browse Courses</a>
</div>
</div>
</div>
</div>
</div>Premium feel: The middle card (Intensive Trainings) has a green border highlight – this is the most popular format for B2B buyers (1-2 days fits into corporate schedules).
Section 4: Programs (Immersive)
<div class="lp-section">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">Immersive Programs</div>
<h2>Go Beyond Classroom Training</h2>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-trophy"></i></div>
<h3>Hackathons</h3>
<p>Competitive team-based events where participants solve real cybersecurity challenges under time pressure. Build skills through adrenaline-fueled problem solving.</p>
<a href="/academy/programs/hackathons/" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Learn More</a>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="lp-feature" style="border-color: var(--lp-green);">
<div style="position: absolute; top: -1px; right: 20px; background: var(--lp-green); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.3rem 0.75rem; border-radius: 0 0 8px 8px;">Registration Open</div>
<div class="lp-feature__icon"><i class="bi bi-sun"></i></div>
<h3>Summer School 2025</h3>
<p>Multi-day immersive program combining cybersecurity, open-source development, and hands-on labs in an intensive boot camp format.</p>
<a href="/academy/programs/summer-school/" class="lp-btn lp-btn--primary" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Register Now</a>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="lp-feature">
<div class="lp-feature__icon"><i class="bi bi-pc-display"></i></div>
<h3>Computer Club</h3>
<p>Weekly community meetups for ongoing learning, project collaboration, and networking. Free and open to all skill levels.</p>
<a href="/academy/computerclub.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem; margin-top: 1rem;">Join Free</a>
</div>
</div>
</div>
</div>
</div>Section 5: Learning Paths (Simplified)
Replace the current 4-card grid with a cleaner 2-path layout:
<div class="lp-section--alt">
<div class="container">
<div class="lp-section__header">
<div class="lp-section__eyebrow">Learning Paths</div>
<h2>Structured Tracks for Your Goals</h2>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="lp-feature" style="border-top: 4px solid #D94F4F;">
<h3><i class="bi bi-shield-lock me-2" style="color: #D94F4F;"></i>Cybersecurity Track</h3>
<p>From security fundamentals to advanced threat hunting. For IT teams, compliance officers, and anyone responsible for protecting organizational data.</p>
<ul>
<li>Practical Cybersecurity (Course)</li>
<li>Security Awareness for Teams (Training)</li>
<li>Cybersecurity Essentials (Training)</li>
<li>Data Privacy Compliance (Training)</li>
<li>Cybersecurity Hackathon (Event)</li>
</ul>
<a href="/academy/courses.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem;">Explore Track</a>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="lp-feature" style="border-top: 4px solid var(--lp-green);">
<h3><i class="bi bi-terminal me-2" style="color: var(--lp-green);"></i>Open Source & Infrastructure Track</h3>
<p>Linux administration, NixOS, open-source contribution, and modern infrastructure tooling. For developers and sysadmins building real-world skills.</p>
<ul>
<li>Linux Admin Fundamentals (Training)</li>
<li>NixOS Security Jumpstart (Training)</li>
<li>Open Source Contribution Workshop (Training)</li>
<li>Computer Club (Weekly meetup)</li>
</ul>
<a href="/academy/courses.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.25rem; font-size: 0.9rem;">Explore Track</a>
</div>
</div>
</div>
</div>
</div>Why 2 tracks instead of 4: The current 4-track layout (Cybersecurity, Open Source, Innovation & Maker, Data Privacy) creates decision paralysis. Consolidate into the 2 strongest tracks. Innovation/Maker and Data Privacy content can be sub-items within these two.
Section 7: Urgency
<div class="lp-section--dark">
<div class="container" style="max-width: 800px; text-align: center;">
<div class="lp-section__eyebrow" style="color: var(--lp-green);">Limited Seats</div>
<h2 style="color: var(--lp-offwhite);">Summer School 2025 Registration Is Open</h2>
<p style="color: rgba(229,227,218,0.8); font-size: 1.05rem; max-width: 600px; margin: 0 auto 2rem;">
Multi-day immersive cybersecurity and open-source boot camp. Limited to 20 participants to ensure hands-on lab access for everyone.
</p>
<a href="/academy/programs/summer-school/" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-sun"></i> Reserve Your Spot
</a>
</div>
</div>Section 8: Final CTA (Dual-Track)
Academy needs two CTAs because there are two buyer types: corporate (training buyer) and individual (self-learner).
<div class="lp-cta-block">
<div class="container">
<h2>Invest in Your Team's Security Skills Before the Next Incident</h2>
<p>Whether you need a one-day workshop for 10 people or a full annual training program, we'll design the right solution.</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="https://cal.com/chenist" target="_blank" class="lp-btn lp-btn--primary lp-btn--large">
<i class="bi bi-calendar-check"></i> Discuss Corporate Training
</a>
<a href="/academy/courses.html" class="lp-btn lp-btn--outline lp-btn--large">
<i class="bi bi-mortarboard"></i> Browse Individual Programs
</a>
</div>
<div class="lp-cta-block__objection">
<span><i class="bi bi-check-circle-fill"></i> Custom content for your team</span>
<span><i class="bi bi-check-circle-fill"></i> Flexible scheduling</span>
<span><i class="bi bi-check-circle-fill"></i> NIS2 compliance documentation included</span>
</div>
</div>
</div>Micro-conversions
<div class="lp-section--alt">
<div class="container" style="max-width: 700px;">
<div class="lp-lead-magnet">
<div class="lp-lead-magnet__icon"><i class="bi bi-calendar-event"></i></div>
<div>
<h4>Free Weekly Computer Club</h4>
<p>Join our open community meetups every week. No cost, no commitment. Learn alongside peers, work on projects, and see if our teaching style is right for you.</p>
<a href="/academy/computerclub.html" class="lp-btn lp-btn--outline" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">
<i class="bi bi-arrow-right"></i> Join Computer Club
</a>
</div>
</div>
</div>
</div>Strategy: Computer Club is the ultimate micro-conversion for Academy. It requires zero commitment, builds trust through direct experience, and creates a pipeline for paid training. Every Computer Club attendee is a warm lead.
Implementation Priority Order
- Create
assets/css/landing-pages.cssand add it to_quarto.ymlcss array - Rebuild
/security/index.qmdfirst (highest urgency due to NIS2 enforcement, most compelling conversion story) - Rebuild
/digital/index.qmdsecond (strongest differentiation with Apple Business launch date) - Rebuild
/academy/index.qmdthird (requires most structural change, but also has most existing content to reorganize) - Add sticky mobile CTA to all three pages
- Create lead magnet PDF for Digital page (can be a simple Quarto-rendered PDF)
- Add technology logo SVGs to
/assets/images/logos/for trust sections
Form Placement Strategy
| Page | Formspree Form | Cal.com Inline | Cal.com Floating | Sticky Mobile CTA |
|---|---|---|---|---|
| /digital/ | Yes (Section 7, tabbed) | Yes (tab 2) | Yes (global) | Yes |
| /security/ | No (too much friction for security buyers) | No | Yes (global) | Yes |
| /academy/ | No (use existing sub-page forms) | No | Yes (global) | Yes |
Rationale: The Digital page targets Romanian SMBs who prefer form submissions. The Security page targets CTOs/CISOs who prefer direct scheduling (they’re time-poor and decision-ready). The Academy page routes to specific program pages where enrollment forms live.
Cal.com Booking vs Formspree Decision Matrix
- Ready to buy (knows what they need, has budget): Cal.com direct booking
- Exploring options (researching, comparing): Formspree form with interest dropdown
- Not ready (early awareness): Lead magnet download, Computer Club, free assessment tool
All three states should be served on every page. The hero CTA serves “ready to buy.” The form section serves “exploring.” The micro-conversion section serves “not ready.”