Minimal Layout - Zero Distractions, Maximum Impact

Quick Start

Minimal layout is perfect for landing pages, success pages, and focused announcements. No distractions, just content and a clear CTA.

1. Create Your Landing Page

---
// src/pages/launch.astro
import Layout from '@theme/layouts/Layout.astro';
import Hero from '@theme/components/sections/Hero.astro';
import CTABlock from '@theme/components/sections/CTABlock.astro';

const title = 'New Feature Launch - Your Product';
const description = 'Announcing our latest feature...';
---

<Layout title={title} description={description}>
  <Hero
    variant="centered"
    heading="We Built Something Amazing"
    description="The feature you've been asking for is finally here."
    buttonText="Try It Now"
    buttonHref="/signup"
  />

  <section class="py-16 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4 max-w-2xl">
      <div class="prose prose-lg dark:prose-invert mx-auto text-center">
        <p class="text-xl text-gray-600 dark:text-gray-300">
          Simple, focused content that drives action.
        </p>
      </div>
    </div>
  </section>

  <CTABlock
    heading="Ready to Get Started?"
    description="Join thousands of happy customers"
    buttonText="Sign Up Free"
    buttonHref="/signup"
    variant="primary"
  />
</Layout>

2. Success Page Example

---
// src/pages/success.astro
import Layout from '@theme/layouts/Layout.astro';

const title = 'Thank You!';
const description = 'Your message has been received.';
---

<Layout title={title} description={description}>
  <section class="py-32 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4 max-w-2xl text-center">
      <div class="mb-8">
        <span class="text-6xl">✅</span>
      </div>
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
        Thank You!
      </h1>
      <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
        We'll get back to you within 24 hours.
      </p>
      <a
        href="/"
        class="inline-block bg-[--color-primary] text-white dark:text-gray-900 px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
      >
        Back to Home
      </a>
    </div>
  </section>
</Layout>

3. Key Principles

• Center everything - create visual focus
• Use max-w-2xl or max-w-3xl - narrow content width
• Single clear CTA - don't split attention
• Remove navigation links (optional) - prevent exits
• Large text sizes - make content scannable