@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

package/.agents/skills/farmville-saas-ux/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: farmville-saas-ux
+description: >-
+  A portable design system for building or restyling any website / SaaS / landing page / app UI
+  into the warm, sunny, storybook-meets-clean-SaaS aesthetic exemplified by Fillout.com — illustrated
+  painterly hero, floating frosted-glass pill nav, heavy rounded display type, a honey-gold "joy"
+  accent over a neutral base, pill buttons, soft 2xl–3xl rounded cards, diffuse low-opacity shadows,
+  and a warm-dark charcoal footer. Use this skill whenever the user wants a UI to feel friendly,
+  wholesome, optimistic, "cozy", "cute but professional", "Fillout-style", "Notion/Linear-but-warmer",
+  playful, rounded, or wants to re-theme / reskin an existing site or component into this style — even
+  if they don't name it. Also triggers on requests for warm SaaS landing pages, cheerful marketing
+  sites, friendly dashboards, or a cohesive design-token set (colors, fonts, radii, shadows, spacing).
+  Do NOT use it for dark technical/cyberpunk, brutalist, luxury-minimal, or corporate-enterprise looks.
+---
+
+# Farmville SaaS UX
+
+A design system that makes software feel like a **sunny afternoon** — warm, wholesome, optimistic,
+and hand-illustrated — while staying crisp, trustworthy, and conversion-ready like a top SaaS.
+
+"Farmville" is the *soul*: storybook warmth, golden light, rounded friendliness, a little delight.
+"SaaS" is the *discipline*: a strict neutral base, tight type, generous whitespace, and soft rigor.
+Every screen should read as **cozy + credible at the same time.**
+
+Distilled from Fillout.com. This skill is portable: apply it to a brand-new build **or** reskin any
+existing website/component. When re-theming, keep the target's structure and copy — swap only the
+design language described here.
+
+---
+
+## The soul in one paragraph
+
+Imagine a Ghibli sky over a clean form builder. Big, rounded, confident headlines float in warm light.
+The navigation is a little frosted-glass pill that hovers just below the top edge. Buttons are fully
+rounded pills — charcoal on light, honey-gold when you want to spark joy. Content lives on soft white
+cards with barely-there borders and shadows so diffuse they feel like sunlight, not drop-shadows.
+Nothing is sharp. Nothing is loud. One golden accent does all the celebrating; everything else is a
+calm neutral gray. It feels *handmade and safe* — a product you'd trust with your data and also want
+to hug.
+
+---
+
+## The 8 signature moves (this is what makes it recognizable)
+
+Copy these and the style reads instantly. Skip them and it's just another gray SaaS page.
+
+1. **Illustrated painterly hero.** A warm, sunny, *hand-illustrated* full-bleed scene behind the hero
+   — blue sky, golden-hour cumulus clouds, lush green foliage, a soft city. Not a photo, not a flat
+   gradient, not an abstract mesh. This optimistic illustration is the #1 tell. (Fallbacks for when
+   you can't commission art are in `references/components.md` → Hero.)
+2. **Floating frosted-glass pill nav.** The nav bar is a *detached* rounded pill with translucent
+   white fill, `backdrop-blur`, a hairline border, and a soft shadow — sitting with margin from the
+   top, not glued edge-to-edge.
+3. **Heavy, rounded, two-tone display type.** Headlines are big and bold (700–800) in a warm rounded
+   grotesque, tracking pulled tight. On the illustrated hero, split the headline into a **translucent
+   line + a solid line** (e.g. `Forms that` at ~55% white over `do it all` at 100% white).
+4. **Honey-gold as the only "joy" accent.** `#ffc738`. Use it *sparingly* for delight — the primary
+   CTA in the footer, star ratings, badges, the logo, small highlights. On light backgrounds the
+   workhorse button is charcoal `#171717`; gold is the special one.
+5. **Soft card system.** White cards, `1rem–1.5rem` (2xl–3xl) radius, a `#ededed` hairline border, a
+   diffuse shadow, and generous inner padding. On hover they lift ~2px and the shadow deepens. The
+   border is a *uniform* hairline on all four sides — never a thicker or colored side border (no
+   `border-left` status stripes / edge accents). Signal status or category with a pill or dot *inside*
+   the card instead.
+6. **Pill badges with a mini glyph.** Small rounded-full chips like `🔥 Features` or `📋 Forms by Zite`
+   — a tiny icon/emoji + a word, used to label section intros.
+7. **Colored icon tiles & node chips.** Rounded-square tiles with a *pastel-tint* background and a
+   colored glyph (violet AI, green branch, gold publish). Product mockups show connected "node" cards.
+8. **Warm-dark charcoal footer.** Near-black `#171717` footer with the logo in **amber gold**, muted
+   gray link columns, and pill-shaped trust badges ("SOC II", "256-bit AES").
+
+---
+
+## Non-negotiable feel checks
+
+Before you ship a screen, it should pass all of these — they're the difference between "warm SaaS" and
+"generic template":
+
+- **Curves everywhere.** No sharp 90° corners on interactive elements. CTAs & nav = full pills.
+  Cards = 16–24px. Inputs & small chips = 6–12px. If a corner looks sharp, round it.
+- **One accent, calm base.** Exactly one celebratory hue (honey-gold). Everything else is the neutral
+  gray scale + charcoal ink. Resist adding a second bright brand color to compete with the gold.
+- **Sunlight, not drop-shadows.** Shadows are large-radius, low-opacity (`#0000001a` ≈ 10% black),
+  never dark or tight. They suggest soft ambient light.
+- **No side borders on cards.** Card borders are the same `1px` hairline on all four sides. No
+  colored `border-left`/`border-right` accent stripes — status lives in a pill or dot inside the card.
+- **Air.** Sections breathe with `~6rem` vertical padding; content maxes at `~72rem` and stays centered;
+  section intros are centered (badge → big headline → one-line subhead → CTA).
+- **Warm, human copy voice.** Short, plain, optimistic ("Forms that do it all", "It all starts with a
+  form"). If you write microcopy, keep it friendly and confident, never jargon-heavy.
+
+---
+
+## Workflow
+
+**Building fresh:**
+1. Read `references/tokens.md` and paste the `:root` token block into the project's global CSS. This is
+   the whole design system as CSS variables — do not hand-pick ad-hoc values.
+2. Load the fonts (Hanken Grotesk + Inter, see tokens.md).
+3. Build sections top-to-bottom using the recipes in `references/components.md` (nav → hero → logo cloud
+   → feature cards → integrations → CTA → footer). Lean on the 8 signature moves.
+4. Open `assets/starter.html` as a working reference — it implements the entire system in one file. Copy
+   from it liberally.
+
+**Reskinning an existing site/component:** follow `references/porting-guide.md`. The short version: keep
+their DOM & copy; swap fonts → round corners → neutralize palette to gray + one gold accent → soften
+shadows → float the nav into a glass pill → warm the hero → generous re-padding → warm-dark the footer →
+sprinkle delight (stars, emoji badges, arrow-nudge CTAs).
+
+**Always verify visually.** This is a look-and-feel skill — render the page in a browser (or the
+`/run` skill) and eyeball it against the signature moves and feel checks above. Tokens alone don't
+guarantee the vibe; the illustrated hero, the pill nav, and the gold restraint carry it.
+
+---
+
+## Quick token reference (full set in `references/tokens.md`)
+
+**Fonts** — Display: `Hanken Grotesk` (free, closest to Fillout's proprietary *blMelody*; alternates:
+Figtree, Gantari, Onest). Body/UI: `Inter`. Weights: display 700–800, body 400/500, semibold 600.
+Tracking: headings `-0.02em` to `-0.03em`; body normal. Leading: display 1.0–1.05, body 1.5–1.6.
+
+**Core colors:**
+| Role | Hex |
+|---|---|
+| Honey-gold accent | `#ffc738` (soft `#f6c744`, deep `#fcb900`, tints `#ffe9cc` `#fff5e4`) |
+| Ink / dark surface | `#171717` (deepest `#0a0a0a`) |
+| Body text | `#404040` heading, `#737373` secondary, `#a3a3a3` muted |
+| Borders | `#ededed` hairline, `#d4d4d4` strong |
+| Surfaces | `#ffffff` card, `#fbfbfb` page, `#f5f5f5` section tint |
+| Support pastels | sky `#3f9fe0`/tint `#e2effd`, violet `#9f5bde`/tint `#e4ddfd`, green `#22c55e`, coral `#f97316`/tint `#ffe9cc` |
+
+**Radius:** md `6px` (inputs), xl `12px` (buttons, icon tiles), 2xl `16px` (cards), 3xl `24px` (big cards,
+image frames), `full` (nav, pill buttons, badges).
+
+**Shadows** (low-opacity, diffuse): `sm 0 1px 3px #0000001a`, `md 0 4px 6px -1px #0000001a`,
+`lg 0 10px 15px -3px #0000001a`, `xl 0 20px 25px -5px #0000001a`. Gold focus ring
+`0 0 0 3px #f6c744, 0 0 14px rgba(246,199,68,.4)`.
+
+**Spacing:** 4px base unit. Section padding `~96px` vertical. Container max `~1152–1280px`, centered,
+generous gutters.
+
+**Motion:** ease-out, 150–250ms. Hover = lift 1–2px + shadow deepen; CTA arrows nudge right ~3px.
+
+---
+
+## Reference files
+
+- `references/tokens.md` — the complete copy-paste token system (CSS `:root` variables): fonts, full
+  color scale, type scale, radii, shadows, spacing, motion, glass/blur. **Start here.**
+- `references/components.md` — detailed HTML+CSS recipes for every signature component: glass pill nav,
+  illustrated hero (+ 3 tiers of fallback backgrounds), pill buttons, soft cards, badges, icon tiles,
+  workflow nodes, logo cloud, review cards, integration grid, warm-dark footer.
+- `references/porting-guide.md` — step-by-step method to convert any existing website/component into
+  this style, with a before/after checklist.
+- `assets/starter.html` — a single self-contained page implementing the full system. Open it, copy from
+  it, or use it as the skeleton for a new build.

package/.agents/skills/farmville-saas-ux/assets/starter.html

@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Farmville SaaS — Starter</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
+  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
+  /* honey gold — the one joy accent */
+  --gold-500:#ffc738;--gold-600:#f6c744;--gold-700:#fcb900;--gold-tint:#fff5e4;--gold-tint2:#ffe9cc;
+  /* ink + neutral scale */
+  --ink:#171717;--n-800:#262626;--n-700:#404040;--n-600:#525252;--n-500:#737373;--n-400:#a3a3a3;
+  --n-300:#d4d4d4;--n-200:#ededed;--n-100:#f5f5f5;--n-50:#fbfbfb;--white:#fff;
+  /* support pastels */
+  --sky:#3f9fe0;--sky-tint:#e2effd;--violet:#9f5bde;--violet-tint:#e4ddfd;--green:#22c55e;--green-tint:#dcfce7;--coral:#f97316;--coral-tint:#ffe9cc;
+  /* semantic */
+  --bg:var(--n-50);--bg-section:var(--n-100);--surface:var(--white);--border:var(--n-200);--border-strong:var(--n-300);
+  --text:var(--n-700);--text-muted:var(--n-500);--text-faint:var(--n-400);
+  /* radius */
+  --r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-3xl:24px;--r-full:9999px;
+  /* shadow */
+  --shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
+  --shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
+  --shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
+  --shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;--shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
+  --ring-gold:0 0 0 3px var(--gold-600),0 0 14px rgba(246,199,68,.4);
+  /* type */
+  --text-sm:.875rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-4xl:2.25rem;--text-5xl:3rem;
+  --display:clamp(3rem,7vw,6rem);
+  /* space + motion */
+  --section-y:clamp(4rem,9vw,7rem);--container:75rem;--gutter:clamp(1rem,4vw,2rem);
+  --glass-blur:16px;--ease:cubic-bezier(.22,1,.36,1);--dur:220ms;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{font-size:16px}
+body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
+a{text-decoration:none;color:inherit}
+h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
+.container{width:min(var(--container),100%);margin:0 auto;padding:0 var(--gutter)}
+
+/* nav */
+.nav-wrap{position:sticky;top:0;z-index:50;padding:16px var(--gutter);display:flex;justify-content:center}
+.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);box-shadow:var(--shadow-nav)}
+.nav{width:min(var(--container),100%);display:flex;align-items:center;gap:24px;padding:10px 12px 10px 24px;border-radius:var(--r-full)}
+.brand{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em}
+.nav-links{display:flex;gap:2px;margin:0 auto;list-style:none}
+.nav-links a{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-lg);font-size:15px;font-weight:500;color:var(--n-700);transition:background var(--dur) var(--ease)}
+.nav-links a:hover{background:#0000000a}
+.caret{font-size:11px;color:var(--n-400)}
+.nav-cta{display:flex;align-items:center;gap:8px}
+.link-quiet{padding:8px 12px;font-size:15px;font-weight:500;color:var(--n-700)}
+@media(max-width:820px){.nav-links{display:none}}
+
+/* buttons */
+.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-full);font-family:var(--font-body);font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
+.btn .arrow{transition:transform var(--dur) var(--ease)}
+.btn:hover .arrow{transform:translateX(3px)}
+.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
+.btn-ink:hover{background:#000;box-shadow:var(--shadow-md);transform:translateY(-1px)}
+.btn-gold{background:var(--gold-500);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
+.btn-gold:hover{background:var(--gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
+.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border);box-shadow:var(--shadow-xs)}
+.btn-ghost:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
+.btn-lg{padding:15px 26px;font-size:16px}
+
+/* badges */
+.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-xs);font-size:14px;font-weight:500;color:var(--n-700)}
+
+/* hero (Tier-2 pure-CSS sunny sky, no image asset needed) */
+.hero{position:relative;overflow:hidden;text-align:center;padding:120px var(--gutter) 110px}
+.hero-art{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
+.hero-art::after{content:"";position:absolute;right:9%;bottom:16%;width:340px;height:130px;
+  background:radial-gradient(ellipse 60% 60% at 30% 60%,#fff,transparent 70%),radial-gradient(ellipse 50% 70% at 66% 50%,#fff,transparent 70%);filter:blur(2px);opacity:.95}
+.hero-art::before{content:"";position:absolute;left:6%;top:30%;width:220px;height:90px;
+  background:radial-gradient(ellipse 60% 60% at 40% 60%,#fff,transparent 72%);filter:blur(3px);opacity:.8}
+.hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto;display:grid;gap:22px;justify-items:center}
+.hero h1{font-size:var(--display);line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.12)}
+.hero h1 .soft{color:rgba(255,255,255,.55)}
+.hero-sub{font-size:var(--text-xl);line-height:1.5;color:rgba(255,255,255,.94)}
+.hero .badge{background:rgba(255,255,255,.9)}
+
+/* floating screenshot */
+.hero-shot{position:relative;z-index:2;width:min(64rem,100%);margin:-70px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-3xl);box-shadow:var(--shadow-xl);padding:20px}
+.shot-row{display:flex;gap:16px;flex-wrap:wrap}
+.shot-pane{flex:1;min-width:220px;background:linear-gradient(180deg,#fafaff,#f4f2fb);border-radius:var(--r-2xl);padding:22px;min-height:180px}
+
+/* sections */
+.section{padding:var(--section-y) 0}
+.section-tint{background:var(--bg-section)}
+.center-intro{text-align:center;display:grid;gap:16px;justify-items:center;margin-bottom:48px}
+.section-title{font-size:var(--text-5xl);letter-spacing:-.025em}
+.section-sub{font-size:var(--text-xl);color:var(--text-muted)}
+
+/* cards */
+.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
+@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3xl);padding:32px;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
+.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
+.card h3{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
+.card p{color:var(--text-muted);font-size:var(--text-lg)}
+.card-media{margin-top:24px;background:var(--n-50);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px;display:flex;gap:12px;flex-wrap:wrap}
+
+/* icon tiles + nodes */
+.tile{width:40px;height:40px;border-radius:var(--r-xl);display:grid;place-items:center;font-size:18px;flex:none}
+.tile-violet{background:var(--violet-tint);color:var(--violet)}.tile-green{background:var(--green-tint);color:var(--green)}
+.tile-gold{background:var(--gold-tint2);color:var(--gold-700)}.tile-sky{background:var(--sky-tint);color:var(--sky)}.tile-coral{background:var(--coral-tint);color:var(--coral)}
+.node{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:12px 16px;box-shadow:var(--shadow-sm)}
+.node-title{font-weight:600;font-size:15px;color:var(--ink)}.node-sub{font-size:13px;color:var(--text-muted)}
+
+/* logo cloud */
+.logo-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px;margin-bottom:8px}
+.logo{opacity:.5;filter:grayscale(1);font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-800);transition:opacity var(--dur) var(--ease)}
+.logo:hover{opacity:.8}
+
+/* stat cards */
+.trust-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
+@media(max-width:820px){.trust-wrap{grid-template-columns:1fr}}
+.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.stat-card{display:grid;gap:12px}
+.stat-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
+.stat-num{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
+.stars{color:var(--gold-500);font-size:20px;letter-spacing:2px}
+
+/* integration grid */
+.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:40px}
+.int-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px;box-shadow:var(--shadow-card);text-align:center}
+.int-icons{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
+.int-icon{width:52px;height:52px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);display:grid;place-items:center;box-shadow:var(--shadow-xs);font-size:22px}
+.int-label{font-weight:600;color:var(--ink);font-size:15px}
+
+/* footer */
+.footer{background:var(--ink);color:var(--n-400);padding:80px var(--gutter) 40px}
+.footer-inner{width:min(var(--container),100%);margin:0 auto}
+.footer-top{display:grid;grid-template-columns:1.4fr 3fr;gap:40px;margin-bottom:40px}
+@media(max-width:820px){.footer-top{grid-template-columns:1fr}}
+.footer-brand{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--gold-500)}
+.footer-tagline{color:var(--n-500);margin-top:8px}
+.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
+@media(max-width:560px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
+.footer-col h4{color:var(--n-400);font-size:14px;font-weight:600;margin-bottom:14px;font-family:var(--font-body)}
+.footer-col a{display:block;color:var(--n-300);font-size:15px;padding:6px 0;transition:color var(--dur) var(--ease)}
+.footer-col a:hover{color:#fff}
+.trust-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;padding-top:32px;border-top:1px solid #ffffff1a}
+.trust-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);background:#ffffff0d;color:var(--n-400);font-size:14px}
+
+:where(a,button,input,textarea):focus-visible{outline:none;box-shadow:var(--ring-gold)}
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<header class="nav-wrap">
+  <nav class="nav glass">
+    <a class="brand" href="#">Fillout</a>
+    <ul class="nav-links">
+      <li><a href="#">Products <span class="caret">⌄</span></a></li>
+      <li><a href="#">Templates <span class="caret">⌄</span></a></li>
+      <li><a href="#">Integrations <span class="caret">⌄</span></a></li>
+      <li><a href="#">Pricing</a></li>
+    </ul>
+    <div class="nav-cta">
+      <a class="link-quiet" href="#">Log in</a>
+      <a class="btn btn-ink" href="#">Get started <span class="arrow">→</span></a>
+    </div>
+  </nav>
+</header>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-art"></div>
+  <div class="hero-inner">
+    <span class="badge">📋 Forms by Zite</span>
+    <h1><span class="soft">Forms that</span><br>do it all</h1>
+    <p class="hero-sub">Make any form with Fillout,<br>the all-in-one form solution.</p>
+    <a class="btn btn-ink btn-lg" href="#">Get Started <span class="arrow">→</span></a>
+  </div>
+</section>
+<div class="hero-shot">
+  <div class="shot-row">
+    <div class="shot-pane" style="flex:.9">
+      <div class="node"><span class="tile tile-sky">📄</span><div><div class="node-title">Form submitted</div><div class="node-sub">Submission trigger</div></div></div>
+    </div>
+    <div class="shot-pane">
+      <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div></div>
+    </div>
+  </div>
+</div>
+
+<!-- LOGO CLOUD + TRUST -->
+<section class="section">
+  <div class="container">
+    <div class="logo-cloud">
+      <span class="logo">TrueCar</span><span class="logo">BOMBAS</span><span class="logo">wayfair</span>
+      <span class="logo">The Athletic</span><span class="logo">HACK CLUB</span><span class="logo">HARVARD</span>
+    </div>
+  </div>
+  <div class="container" style="margin-top:56px">
+    <div class="trust-wrap">
+      <div>
+        <h2 style="font-size:var(--text-4xl)">100,000+ organizations trust Fillout for secure data intake</h2>
+        <p style="margin-top:16px;color:var(--text-muted);font-size:var(--text-lg)"><strong style="color:var(--ink)">Average rating of 4.8 out of 5</strong> from hundreds of reviews across G2 Business Reviews and Product Hunt.</p>
+      </div>
+      <div class="stat-row">
+        <div class="card stat-card"><div class="stat-head"><span class="tile tile-coral">G</span> Business reviews</div><div class="stat-num">5/5</div><div class="stars">★★★★★</div></div>
+        <div class="card stat-card"><div class="stat-head"><span class="tile tile-coral">P</span> Product Hunt</div><div class="stat-num">4.7/5</div><div class="stars">★★★★★</div></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section class="section section-tint">
+  <div class="container center-intro">
+    <span class="badge">🔥 Features</span>
+    <h2 class="section-title">It all starts with a form</h2>
+    <p class="section-sub">Build the exact form you need, in minutes.</p>
+  </div>
+  <div class="container grid-2">
+    <div class="card">
+      <h3>Create with drag-and-drop</h3>
+      <p>Choose from pre-built themes or create your own, with your fonts, logo, colors, custom CSS &amp; more.</p>
+      <div class="card-media">
+        <span class="tile tile-gold">Aa</span><span class="tile tile-sky">✉</span><span class="tile tile-violet">▦</span>
+      </div>
+    </div>
+    <div class="card">
+      <h3>Automate with smart forms</h3>
+      <p>Reduce manual work with intelligent routing.</p>
+      <div class="card-media" style="flex-direction:column;align-items:flex-start;gap:10px">
+        <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div></div>
+        <div class="node"><span class="tile tile-green">⋔</span><div><div class="node-title">Branch</div><div class="node-sub">Based on priority</div></div></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- INTEGRATIONS -->
+<section class="section">
+  <div class="container center-intro">
+    <h2 class="section-title">Integrate with all your apps</h2>
+    <p class="section-sub">Get more done with the tools you already use.</p>
+  </div>
+  <div class="container">
+    <div class="int-grid">
+      <div class="int-card"><div class="int-icons"><span class="int-icon">🟠</span><span class="int-icon">☁️</span><span class="int-icon">🅿️</span></div><div class="int-label">Capture and manage leads</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">💬</span><span class="int-icon">📨</span><span class="int-icon">🎮</span></div><div class="int-label">Get notified instantly</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">🔷</span><span class="int-icon">📊</span><span class="int-icon">🟦</span></div><div class="int-label">Track lead conversions</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">📁</span><span class="int-icon">📓</span><span class="int-icon">🟩</span></div><div class="int-label">Create or update records</div></div>
+      <div class="int-card"><div class="int-icons"><span class="int-icon">📅</span><span class="int-icon">📞</span><span class="int-icon">🗓️</span></div><div class="int-label">Book more meetings</div></div>
+    </div>
+    <div style="text-align:center;margin-top:40px"><a class="btn btn-ghost" href="#">View all integrations <span class="arrow">→</span></a></div>
+  </div>
+</section>
+
+<!-- CTA -->
+<section class="section section-tint">
+  <div class="container center-intro" style="margin:0">
+    <h2 class="section-title">Make your first form in minutes</h2>
+    <a class="btn btn-gold btn-lg" href="#" style="margin-top:8px">Get started <span class="arrow">→</span></a>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer class="footer">
+  <div class="footer-inner">
+    <div class="footer-top">
+      <div>
+        <div class="footer-brand">Fillout</div>
+        <div class="footer-tagline">The all-in-one form solution</div>
+      </div>
+      <div class="footer-cols">
+        <div class="footer-col"><h4>General</h4><a href="#">Home</a><a href="#">Pricing</a><a href="#">Careers</a><a href="#">Blog</a></div>
+        <div class="footer-col"><h4>Product</h4><a href="#">Forms</a><a href="#">Scheduling</a><a href="#">Payments</a><a href="#">Workflows</a></div>
+        <div class="footer-col"><h4>AI tools</h4><a href="#">AI Form Builder</a><a href="#">AI Quiz Maker</a><a href="#">AI Survey Maker</a><a href="#">PDF to Form</a></div>
+        <div class="footer-col"><h4>Resources</h4><a href="#">Help Center</a><a href="#">Status</a><a href="#">About</a><a href="#">Compare</a></div>
+      </div>
+    </div>
+    <div class="trust-row">
+      <span class="trust-pill">🛡️ SOC II Type 2 Compliant</span>
+      <span class="trust-pill">🔒 256-bit AES Data encryption</span>
+      <span class="trust-pill">🎧 24/5 Support. Here if you need us</span>
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>