Efecto Web Design

Efecto — Design Web Pages with AI

Efecto is a real-time web design tool that AI agents control programmatically. You create a session, the user opens a URL in their browser, and you push design commands that render instantly. Every node maps to a real HTML element styled with Tailwind CSS — web-native, semantic, and pixel-accurate.

Setup

This skill requires the Efecto MCP server. Check if it's available by looking for tools like create_session, add_section, or get_document in your tool list.

If Efecto tools are NOT available, install the MCP server:

Claude Code

claude mcp add efecto -- npx -y @efectoapp/mcp

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Windsurf / VS Code / Other MCP Clients

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Once installed, you'll have access to 68 MCP tools, including image search and native animation authoring. The MCP server connects your agent to the Efecto design canvas at efecto.app.

How Sessions Work

Agent ──POST /execute──> Server ──SSE──> Browser (renders live)
Agent <──poll/response── Server <──POST── Browser (returns results)

1. You create a session via the MCP server or REST API
2. The user opens the returned Efecto URL in their browser
3. You push tool calls — each one executes in the browser and returns a result
4. The user sees every change live as you build the design

Sessions expire after 2 hours of inactivity. The browser must be connected before tool calls can execute. If you restart or lose the MCP process, call attach_session with the user's current Efecto URL instead of creating a duplicate session.

Quick Start — Build a Page in 7 Steps

Step 1: Create a Session

create_session
  label: "Landing page design"

Returns { sessionId, documentId, designUrl }. Tell the user to open the URL. The session ID is stored automatically — all subsequent tools use it.

If the user already has an Efecto URL with ?session=..., resume it:

attach_session
  designUrl: "https://efecto.app/design/<file-id>/untitled?session=<session-id>"

Do not call create_session again to "reconnect". Use attach_session for an existing URL. A second create_session call refuses to overwrite a paired session unless you pass force: true.

Step 2: Wait for Browser Connection

wait_for_connection

Blocks until the browser opens the URL and pairs (default 120s). Returns immediately if already paired.

To inspect routing state at any time:

session_status                # legacy single-session shape (sessionId, paired, browserConnected, knownSessions)
session_status { all: true }  # list shape — all sessions in this MCP process with isActive / paired flags

Step 3: Create an Artboard

create_artboard
  name: "Homepage"
  width: 1440
  height: 900
  backgroundColor: "#ffffff"
  className: "flex flex-col"

Returns the artboard ID. Always set className to "flex flex-col" so children stack vertically.

Step 4: Add Sections with JSX

add_section
  parentId: "<artboard-id>"
  jsx: '<nav name="Primary Navigation" className="flex items-center justify-between px-16 py-5 bg-white w-full">
    <h2 name="Brand Name" className="text-xl font-bold text-gray-900">Acme</h2>
    <div name="Navigation Links" className="flex items-center gap-8">
      <a name="Features Link" className="text-sm text-gray-600" href="#">Features</a>
      <a name="Pricing Link" className="text-sm text-gray-600" href="#">Pricing</a>
      <button name="Get Started Button" className="px-4 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg">Get Started</button>
    </div>
  </nav>'

This is the most efficient way to build complex layouts — one JSX string per section.

Step 5: Read Current State

get_document

Returns JSX-like markup with data-id attributes on every node. Use these IDs for updates.

Step 6: Fine-Tune with Updates

batch_update
  updates: [
    { nodeId: "abc", className: "text-2xl font-extrabold text-gray-900" },
    { nodeId: "def", textContent: "Updated heading text" }
  ]

Step 7: Iterate

Repeat Steps 4-6 to add more sections, adjust styling, and refine the design. The user sees every change in real time.

The Design Tools

Reading State

Creating Content

Modifying Content

Animation

Organizing Structure

Display & Selection

Alignment & Distribution

History

Viewport & Document

Canvas & Reading

Fill & Export

Theme

Design Validation

Image Search

Native Animation — Animate Existing Designs

Efecto has a native layer animation system. Do not use Tailwind animate-*, transition-*, or duration-* classes as the animation authoring path.

Workflow for "animate this":

1. Inspect the target with get_selection, get_document, get_node_tree, or list_artboards.
2. Call list_animation_presets to see supported preset IDs and settings.
3. Pick the meaningful layers: hero image, headline, supporting copy, CTA, cards, icons, or product visuals. Avoid animating every nested child.
4. Call apply_animation_plan with timed entries. Use mode: "replace" for a new motion system or mode: "append" to add exit/outro animations.
5. Set timelineDuration with update_artboard when the artboard needs a deliberate playback end.
6. Use select_nodes to highlight the changed layers.

Timing defaults:

• Small UI elements: 0.18-0.35s.
• Hero/slide elements: 0.35-0.6s.
• Sibling stagger: 0.04-0.12s.
• Entrances: ease-out.
• Exits: ease-in.

Preset guidance:

• fade-in: subtle supporting content.
• slide-in: directional reveals, usually 16-48px.
• scale-in: cards, product shots, badges, modals.
• blur-in: cinematic/editorial reveals.
• tilt-in, spin-in, bounce-in, pop-spark: playful or promotional moments.
• mask-in, fade-mask-in, slide-mask-in, scale-mask-in: high-impact hero, frame, or title reveals. Use maskStyle: "linear" for clean wipes, "diagonal" for editorial energy, and "iris" for spotlit reveals. Use maskDirection for edge movement and maskOrigin for iris origin.
• mask-reveal, iris-reveal: legacy combo aliases that still work, but prefer the explicit mask presets above.
• Exit presets (fade-out, slide-out, scale-out, etc.) should leave enough reading time before they begin.

Text nodes can use appearBy: "word" or "line" for headline reveals. Use "char" only for kinetic title moments; non-text nodes must use "block".

Example:

apply_animation_plan
  mode: "replace"
  animations: [
    { nodeId: "<headline-id>", presetId: "fade-in", offset: 0, settings: { duration: 0.55, easing: "ease-out", appearBy: "word" } },
    { nodeId: "<hero-image-id>", presetId: "scale-in", offset: 0.08, settings: { duration: 0.5, easing: "ease-out", scaleFrom: 0.96 } },
    { nodeId: "<cta-id>", presetId: "slide-in", offset: 0.28, settings: { duration: 0.35, easing: "ease-out", direction: "up", distance: 20 } }
  ]

Images — Search and Use Real Photos

Efecto includes a built-in image search powered by Lummi — a library of free, high-quality stock photos, illustrations, and 3D renders. Use this instead of placeholder images to make designs look polished and real.

The search_images Tool

This tool works without a session — call it anytime, even before creating a session.

search_images
  query: "mountain landscape"
  orientation: "horizontal"
  limit: 4

Returns a list of images with url, thumbnail, alt, width, height, photographer, and orientation.

Filters

Workflow: Search → Apply

Step 1: Search for images

search_images
  query: "modern office workspace"
  orientation: "horizontal"
  luminance: "bright"
  limit: 3

Step 2a: Add as an image node

add_node
  parentId: "<section-id>"
  type: "image"
  src: "<url-from-search>"
  alt: "Modern office workspace"
  className: "w-full h-[400px] rounded-2xl object-cover"

Step 2b: Set as background fill

set_fill
  targetId: "<section-id>"
  fill: { type: "image", url: "<url-from-search>", size: "cover", position: "center" }

Step 2c: Use in JSX (add_section)

add_section
  parentId: "<artboard-id>"
  jsx: '<section className="flex items-center gap-16 px-16 py-24 w-full">
    <div className="flex flex-col gap-6 grow">
      <h1 className="text-5xl font-bold text-gray-900">Our Story</h1>
      <p className="text-lg text-gray-500">Building the future of design.</p>
    </div>
    <img src="<url-from-search>" alt="Team at work" className="w-[560px] h-[380px] rounded-2xl object-cover" />
  </section>'

Tips

• Search before designing. Find images first, then build the layout around them. This produces better compositions than adding images as afterthoughts.
• Match orientation to layout. Horizontal images for hero sections, vertical for sidebar/mobile, square for grid cards.
• Use luminance filter. For dark-themed designs, search luminance: "dark" to get images that blend naturally with dark backgrounds.
• Set object-cover on image nodes so they fill their container without distortion.
• Prefer real images over placeholders. Instead of <div className="w-full h-[400px] bg-gray-100 rounded-2xl" />, search for a relevant image and use it.

Shader Nodes & Visual Effects

Shader nodes are a powerful node type that combines generative visuals, image/video processing, and visual effects (ASCII, dither, halftone, glitch, art filters). They render via WebGL and can be placed anywhere in the design like any other node.

Creating a Shader Node

Use add_node with type: "shader":

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-[400px] rounded-2xl"

Input Sources

Generative Shader Types (11)

Visual Effects (28)

Apply effects on top of any input source. Set effectId and effectEnabled: true:

add_node
  parentId: "<section-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<image-url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-[500px] rounded-2xl"

Post-Process Stack

Layer additional effects with postProcesses: scanlines, vignette, bloom, grain, noise, pixelate, wave, rgb-glitch, brightness-contrast, color-tint, sepia, grid, dot-screen, light-beams, warp, motion-blur, chromatic-aberration, curvature.

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
]

Common Recipes

ASCII art hero from an image:

search_images  query: "city skyline"  orientation: "horizontal"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-[500px]"

Generative gradient background:

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-[600px]"

Halftone effect on a photo:

add_node
  parentId: "<section-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-[400px] h-[400px] rounded-2xl"

Node Types & HTML Tags

Every node maps 1:1 to an HTML element. The type determines behavior; the tag determines which HTML element renders.

Tag Determines Type in JSX

When writing JSX for add_section, the HTML tag determines the node type:

<div>       -> frame       <img>        -> image
<section>   -> frame       <button>     -> button
<nav>       -> frame       <a>          -> link
<header>    -> frame       <input>      -> input
<footer>    -> frame       <video>      -> video
<h1>-<h6>   -> text        <svg>        -> icon
<p>         -> text        <i>          -> icon
<span>      -> text        <Icon>       -> icon
                           <HeartIcon>  -> icon (name resolved from tag)

The add_section JSX Format

This is the primary way to build layouts. Write standard JSX with HTML tags and Tailwind className attributes.

Format Rules

1. Use HTML tags — div, section, nav, h1, p, img, button, a, etc.
2. Style with className — Tailwind CSS classes only
3. Text goes between tags — <h1 className="...">Hello</h1>
4. Images are self-closing — <img src="https://..." alt="..." className="..." />
5. Use data-id only when referencing existing nodes (from get_document)
6. No React-specific syntax — no onClick, useState, fragments, or components
7. Icons use <svg> with the icon attribute — <svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

Example: Complete Section

<section className="flex flex-col items-center gap-12 px-16 py-24 bg-white w-full">
  <div className="flex flex-col items-center gap-4 max-w-2xl">
    <span className="text-sm font-semibold text-blue-600 uppercase tracking-widest">Why Choose Us</span>
    <h2 className="text-4xl font-bold text-gray-900 text-center">Everything you need to scale</h2>
    <p className="text-lg text-gray-500 text-center">Built for modern teams that move fast and ship faster.</p>
  </div>
  <div className="flex gap-8 w-full max-w-5xl">
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="lightning" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">Lightning Fast</h3>
      <p className="text-sm text-gray-500">Deploy in seconds, not hours. Our edge network ensures sub-50ms latency worldwide.</p>
    </div>
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="shield-check" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">Enterprise Security</h3>
      <p className="text-sm text-gray-500">SOC 2 certified with end-to-end encryption. Your data stays yours.</p>
    </div>
    <div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
      <svg icon="headset" className="w-8 h-8 text-blue-600" />
      <h3 className="text-lg font-semibold text-gray-900">24/7 Support</h3>
      <p className="text-sm text-gray-500">Our team is always on. Get answers in minutes, not days.</p>
    </div>
  </div>
</section>

Icons

Efecto supports 4 icon libraries with ~9,400 icons total. Icons render as SVG and inherit color from currentColor.

How to Write Icons in JSX

The canonical format:

<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

• icon — Icon name in kebab-case (e.g. arrow-right, magnifying-glass, google-logo)
• className — Size via w-* / h-*, color via text-* classes
• iconLibrary — Optional: phosphor (default), lucide, heroicons, radix
• iconWeight — Optional: thin, light, regular (default), bold, fill, duotone (Phosphor only)

Common Icon Names (Phosphor — default library)

Icon Sizing Guide

w-3 h-3     /* 12px — tiny, inline indicators */
w-4 h-4     /* 16px — inline with small text */
w-5 h-5     /* 20px — standard UI icon */
w-6 h-6     /* 24px — default, comfortable */
w-8 h-8     /* 32px — feature icons, cards */
w-10 h-10   /* 40px — hero feature icons */
w-12 h-12   /* 48px — large decorative */
w-16 h-16   /* 64px — hero section centerpiece */

Icon Patterns in Sections

Feature card with icon:

<div className="flex flex-col gap-3 p-8 bg-gray-50 rounded-2xl grow">
  <svg icon="lightning" className="w-8 h-8 text-blue-600" />
  <h3 className="text-lg font-semibold text-gray-900">Lightning Fast</h3>
  <p className="text-sm text-gray-500">Deploy in seconds, not hours.</p>
</div>

Button with icon (icons are siblings, not children):

<div className="flex items-center gap-2 bg-gray-900 text-white px-5 py-2.5 rounded-lg">
  <span className="text-sm font-medium">Get Started</span>
  <svg icon="arrow-right" className="w-4 h-4" />
</div>

Social icons row:

<div className="flex items-center gap-4">
  <svg icon="x-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="github-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="linkedin-logo" className="w-5 h-5 text-gray-400" />
  <svg icon="discord-logo" className="w-5 h-5 text-gray-400" />
</div>

Input with icon:

<div className="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-white">
  <svg icon="magnifying-glass" className="w-4 h-4 text-gray-400" />
  <input placeholder="Search..." className="text-sm text-gray-900 grow" />
</div>

Using a different library (Lucide):

<svg icon="check" iconLibrary="lucide" className="w-5 h-5 text-green-600" />

Using a weight variant (Phosphor bold):

<svg icon="star" iconWeight="fill" className="w-5 h-5 text-yellow-500" />

Tailwind CSS Patterns That Work

Layout

flex                    /* Horizontal flex row */
flex flex-col           /* Vertical flex column */
items-center            /* Center cross-axis */
items-start             /* Align to start */
justify-between         /* Space between children */
justify-center          /* Center main-axis */
gap-2 gap-4 gap-8      /* Gap between flex children */
grow                    /* Fill remaining space (DO NOT use flex-1) */

Spacing

p-4 p-6 p-8 p-12       /* Padding all sides */
px-6 py-4               /* Horizontal / vertical padding */
pt-8 pb-16              /* Top / bottom padding */
mx-auto                 /* Center horizontally */

Sizing

w-full                  /* Full width of parent */
w-auto                  /* Width from content */
w-fit                   /* Shrink-wrap width */
w-[600px]               /* Fixed pixel width */
max-w-2xl max-w-5xl     /* Maximum width constraints */
min-h-screen            /* Minimum full viewport height */
h-[400px]               /* Fixed pixel height */

Typography

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl
font-light font-normal font-medium font-semibold font-bold font-extrabold font-black
leading-tight leading-snug leading-normal leading-relaxed
tracking-tight tracking-normal tracking-wide tracking-widest
text-left text-center text-right
uppercase lowercase capitalize

Theme-Aware Colors (Preferred)

Efecto supports a semantic token system. When a theme is active, these classes auto-adapt to light/dark/custom modes:

/* Backgrounds */
bg-background              /* Page/artboard background */
bg-card                    /* Card surfaces */
bg-popover                 /* Popover/dropdown surfaces */
bg-primary                 /* Primary action backgrounds */
bg-secondary               /* Secondary surfaces */
bg-muted                   /* Muted/subtle backgrounds */
bg-accent                  /* Accent highlights */
bg-destructive             /* Destructive/error backgrounds */
bg-input                   /* Input field backgrounds */

/* Text */
text-foreground            /* Primary text */
text-primary-foreground    /* Text on primary backgrounds */
text-secondary-foreground  /* Text on secondary surfaces */
text-muted-foreground      /* Muted/secondary text */
text-accent-foreground     /* Text on accent backgrounds */
text-card-foreground       /* Text on cards */
text-popover-foreground    /* Text on popovers */
text-destructive-foreground /* Text on destructive backgrounds */

/* Borders */
border-border              /* Default border color */
ring-ring                  /* Focus ring color */

When to use semantic vs hardcoded colors:

• Semantic (bg-primary, text-foreground): UI components, buttons, cards, text — anything that should adapt with theme/mode changes
• Hardcoded (bg-blue-500, text-white): Decorative elements, brand-specific colors, illustrations, gradients

These classes map to CSS custom properties (--background, --primary, etc.) and automatically update when the theme or mode changes. shadcn is the default token system, but these are standard CSS variables — any design system that provides them will work.

Colors (NAMED ONLY)

Use named Tailwind colors. Never use arbitrary hex like bg-[#f9f9f9] — it silently fails at runtime.

/* Backgrounds */
bg-white bg-black bg-gray-50 bg-gray-100 bg-gray-900 bg-neutral-950
bg-blue-50 bg-blue-500 bg-blue-600 bg-indigo-500 bg-purple-500
bg-green-50 bg-green-500 bg-red-50 bg-red-500 bg-amber-50 bg-yellow-400

/* Text */
text-white text-black text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-900
text-blue-600 text-blue-500 text-indigo-600 text-green-600 text-red-600

/* Borders */
border-gray-100 border-gray-200 border-gray-300 border-blue-500

/* If you MUST use a specific hex color, use inline style instead: */
style: { "background-color": "#f9f9f9" }

Borders & Radius

border border-2                      /* Border width */
border-gray-200 border-gray-300      /* Border color */
rounded rounded-lg rounded-xl rounded-2xl rounded-full  /* Border radius */

Effects

shadow-sm shadow shadow-md shadow-lg shadow-xl
opacity-50 opacity-75
ring-1 ring-2 ring-blue-500          /* Ring / outline */

Gradients

bg-gradient-to-r from-blue-500 to-purple-500
bg-gradient-to-b from-white to-gray-50
bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500

Fills (Preferred: set_fill tool)

For solid colors, gradients, and image backgrounds, prefer the set_fill tool over manually setting className/style. It handles the dual-write pattern automatically.

# Solid color
set_fill  targetId: "<id>"  fill: { type: "solid", color: "blue-500" }

# Linear gradient
set_fill  targetId: "<id>"  fill: { type: "gradient", gradient: { type: "linear", angle: 90, stops: [{ color: "#3b82f6", position: 0 }, { color: "#8b5cf6", position: 1 }] } }

# Radial gradient
set_fill  targetId: "<id>"  fill: { type: "gradient", gradient: { type: "radial", stops: [{ color: "#3b82f6", position: 0 }, { color: "#1e1b4b", position: 1 }] } }

# Image fill
set_fill  targetId: "<id>"  fill: { type: "image", url: "https://...", size: "cover", position: "center" }

# Clear fill
set_fill  targetId: "<id>"

Works on both nodes and artboards. For artboards, solid fills update backgroundColor for backward compatibility.

Links & Anchors

Any node can be made clickable with the link property on add_node, update_node, or batch_update. Use elementId to make a node an anchor target.

# Make a button link to an external URL
update_node  nodeId: "<btn-id>"  link: { type: "url", url: "https://example.com", target: "_blank" }

# Mark a section as an anchor target
update_node  nodeId: "<section-id>"  elementId: "pricing"

# Link a nav item to that anchor
update_node  nodeId: "<nav-link-id>"  link: { type: "section", sectionId: "pricing" }

# Link to another artboard (page navigation)
update_node  nodeId: "<link-id>"  link: { type: "page", pageId: "<artboard-id>" }

# Remove a link
update_node  nodeId: "<id>"  link: null

Works on any node type — frames, text, images, buttons. For published sites, page and section links become real navigation.

Artboard Best Practices

Standard Sizes

Always Start With

create_artboard:
  name: "Homepage"
  width: 1440
  height: 900
  backgroundColor: "#ffffff"
  className: "flex flex-col"

• className: "flex flex-col" is essential — without it, children overlap at (0,0)
• backgroundColor is an inline style property, NOT a Tailwind class
• Height grows automatically when content overflows, but set an initial height

Common Section Patterns

Navigation Bar

<nav className="flex items-center justify-between px-16 py-5 bg-white w-full border-b border-gray-100">
  <h2 className="text-xl font-bold text-gray-900">Acme</h2>
  <div className="flex items-center gap-8">
    <a className="text-sm font-medium text-gray-600" href="#">Features</a>
    <a className="text-sm font-medium text-gray-600" href="#">Pricing</a>
    <a className="text-sm font-medium text-gray-600" href="#">About</a>
    <button className="px-5 py-2.5 text-sm font-medium text-white bg-gray-900 rounded-lg">Get Started</button>
  </div>
</nav>

Hero Section (Centered)

<section className="flex flex-col items-center justify-center gap-8 px-16 py-32 bg-white w-full">
  <div className="flex flex-col items-center gap-6 max-w-3xl">
    <span className="px-4 py-1.5 text-xs font-semibold text-blue-700 bg-blue-50 rounded-full uppercase tracking-wider">Now in Beta</span>
    <h1 className="text-6xl font-bold text-gray-900 text-center leading-tight">Build beautiful websites at the speed of thought</h1>
    <p className="text-xl text-gray-500 text-center">The AI-powered design tool that turns ideas into production-ready pages. No code required.</p>
  </div>
  <div className="flex items-center gap-4">
    <button className="px-8 py-3.5 text-base font-semibold text-white bg-blue-600 rounded-xl">Start Free Trial</button>
    <button className="px-8 py-3.5 text-base font-semibold text-gray-700 bg-white border-2 border-gray-200 rounded-xl">Watch Demo</button>
  </div>
</section>

Hero Section (Split — Text Left, Image Right)

<section className="flex items-center gap-16 px-16 py-24 bg-white w-full">
  <div className="flex flex-col gap-6 grow">
    <h1 className="text-5xl font-bold text-gray-900 leading-tight">Ship your next product in record time</h1>
    <p className="text-lg text-gray-500">From prototype to production in minutes. Our platform handles the complexity so you can focus on what matters.</p>
    <div className="flex items-center gap-4">
      <button className="px-6 py-3 text-base font-semibold text-white bg-gray-900 rounded-lg">Get Started</button>
      <a className="text-base font-medium text-gray-600" href="#">Learn more</a>
    </div>
  </div>
  <img src="https://placehold.co/600x400" alt="Product screenshot" className="w-[560px] h-[380px] rounded-2xl object-cover bg-gray-100" />
</section>

Feature Grid (3 columns)

<section className="flex flex-col items-center gap-16 px-16 py-24 bg-gray-50 w-full">
  <div className="flex flex-col items-center gap-4 max-w-2xl">
    <h2 className="text-4xl font-bold text-gray-900 text-center">Powerful features for modern teams</h2>
    <p className="text-lg text-gray-500 text-center">Everything you need to design, build, and ship — all in one place.</p>
  </div>
  <div className="flex gap-8 w-full max-w-6xl">
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-xl">
        <span className="text-blue-600 text-lg font-bold">1</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">Real-Time Collaboration</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Work together with your team in real time. See cursors, selections, and changes as they happen.</p>
    </div>
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-green-100 rounded-xl">
        <span className="text-green-600 text-lg font-bold">2</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">One-Click Deploy</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Push to production with a single click. Built-in CI/CD, preview deployments, and rollbacks.</p>
    </div>
    <div className="flex flex-col gap-4 p-8 bg-white rounded-2xl shadow-sm grow">
      <div className="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-xl">
        <span className="text-purple-600 text-lg font-bold">3</span>
      </div>
      <h3 className="text-xl font-semibold text-gray-900">AI Assistant</h3>
      <p className="text-sm text-gray-500 leading-relaxed">Built-in AI that understands your codebase. Generate components, fix bugs, and refactor with natural language.</p>
    </div>
  </div>
</section>

Testimonial / Social Proof

<section className="flex flex-col items-center gap-12 px-16 py-24 bg-white w-full">
  <div className="flex flex-col items-center gap-6 max-w-2xl">
    <p className="text-2xl text-gray-700 text-center leading-relaxed italic">"This tool completely transformed our workflow. We shipped our redesign in two weeks instead of two months."</p>
    <div className="flex items-center gap-4">
      <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
      <div className="flex flex-col">
        <span className="text-sm font-semibold text-gray-900">Sarah Chen</span>
        <span className="text-sm text-gray-500">VP of Design, Stripe</span>
      </div>
    </div>
  </div>
  <div className="flex items-center gap-12">
    <span className="text-sm font-medium text-gray-400">Trusted by</span>
    <span className="text-lg font-bold text-gray-300">Stripe</span>
    <span className="text-lg font-bold text-gray-300">Vercel</span>
    <span className="text-lg font-bold text-gray-300">Linear</span>
    <span className="text-lg font-bold text-gray-300">Notion</span>
    <span className="text-lg font-bold text-gray-30

…(truncated)