Landing Page

Four blocks assembled into a complete marketing landing page. Copy each block independently or use all four together. The assembly order is Hero → Intro → Features → CTA.

Each block's CSS uses only Farn semantic tokens. Block class names (.hero, .intro, etc.) are starters — rename them to avoid conflicts with your own styles.

Hero

Full-page intro section with eyebrow text, a large display headline, body copy, and primary and secondary CTAs. Use as the first section of any marketing or product page.

Your tagline here

A headline that captures attention.

One or two sentences describing your product or service. Keep it focused and honest about the value you deliver.

Primary action Secondary action
HTML 
<section class="hero">
  <div class="container">
    <div class="hero-inner">
      <p class="section-eyebrow">Your tagline here</p>
      <h1 class="hero-title">A headline that <em>captures attention.</em></h1>
      <p class="hero-desc">One or two sentences describing your product or service.
Keep it focused and honest about the value you deliver.</p>
      <div class="hero-actions">
        <a href="#" class="btn btn-p btn-lg">Primary action</a>
        <a href="#" class="btn btn-g btn-lg">Secondary action</a>
      </div>
    </div>
  </div>
</section>
CSS 
.hero {
  padding: var(--space-4xl) 0;
  background: var(--color-bg);
}

.hero-inner {
  max-width: 640px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 800;
  font-variation-settings: 'opsz' 72;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero-desc {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Add min-height: 100vh to .hero for a full-viewport hero */

Intro

Two-column section with text on the left and a visual on the right. Use it to introduce your product, explain what you do, or build trust. Collapses to a single column on mobile.

About

A brief, compelling description of your product.

Expand on your value proposition. What problem do you solve? Who is it for? Keep it direct and honest.

A second paragraph if you need more context. This is where you earn trust.

HTML 
<section class="intro" data-surface="featured">
  <div class="container">
    <div class="intro-grid">
      <div class="intro-text">
        <p class="section-eyebrow">About</p>
        <h2 class="section-title">A brief, compelling description of your product.</h2>
        <p>Expand on your value proposition. What problem do you solve? Who is it for?</p>
        <p>A second paragraph if you need more context. This is where you earn trust.</p>
        <div class="intro-actions">
          <a href="#" class="btn btn-g">Learn more</a>
        </div>
      </div>
      <div class="intro-visual">
        <!-- Place your image, illustration, or other visual here -->
        <img src="your-image.png" alt="Description of your visual" />
      </div>
    </div>
  </div>
</section>
CSS 
.intro {
  padding: var(--space-3xl) 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.intro-text p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.intro-text p:last-of-type {
  margin-bottom: 0;
}

.intro-actions {
  margin-top: var(--space-lg);
}

.intro-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
}

Features

A responsive card grid for showcasing product features, benefits, or capabilities. Each card holds an icon, a heading, and a short description. Add or remove cards as needed — the grid reflows automatically.

Features

What you get.

Feature one

A short description of this feature. What does it do and why does it matter?

Feature two

Keep each description to two or three sentences. Focus on the benefit, not the mechanism.

Feature three

A third feature. Three cards is a natural minimum — add more as needed.

HTML 
<section class="features">
  <div class="container">
    <p class="section-eyebrow">Features</p>
    <h2 class="section-title">What you get.</h2>
    <div class="features-grid">
      <div class="card">
        <div class="card-body">
          <i class="ti ti-bolt features-icon"></i>
          <h3>Feature one</h3>
          <p>A short description of this feature. What does it do and why does it matter?</p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <i class="ti ti-lock features-icon"></i>
          <h3>Feature two</h3>
          <p>Keep each description concise. Focus on the benefit, not the mechanism.</p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <i class="ti ti-puzzle features-icon"></i>
          <h3>Feature three</h3>
          <p>Three cards is a natural minimum — add more as needed.</p>
        </div>
      </div>
    </div>
  </div>
</section>
CSS 
.features {
  padding: var(--space-3xl) 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.features-icon {
  font-size: 24px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  display: block;
}

.features .card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  font-variation-settings: 'opsz' 16;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.features .card p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

CTA

Closing call-to-action section using the featured surface for maximum contrast. Use it as the last section before the footer to give readers a clear next step.

Ready to start

Start building with your product.

One clear sentence. What do you want the reader to do next?

Get started Learn more
HTML 
<section class="cta" data-surface="featured">
  <div class="container">
    <div class="cta-inner">
      <p class="section-eyebrow">Ready to start</p>
      <h2 class="cta-title">Start building with <em>your product.</em></h2>
      <p class="cta-desc">One clear sentence. What do you want the reader to do next?</p>
      <div class="cta-actions">
        <a href="#" class="btn btn-p btn-lg">Get started</a>
        <a href="#" class="btn btn-g btn-lg">Learn more</a>
      </div>
    </div>
  </div>
</section>
CSS 
.cta {
  padding: var(--space-3xl) 0;
}

.cta-inner {
  max-width: var(--width-prose);
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
  font-variation-settings: 'opsz' 48;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.cta-title em {
  font-style: italic;
  color: var(--color-accent);
}

.cta-desc {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-xl);
}

.cta-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}