[WIP] Build single-page marketing site for Fixins

[Copilot]

• Create index.html — full single-page marketing site for Fixins
  • Navbar (fixed/frosted, logo, mobile hamburger overlay)
  • Hero (blobs, floating emoji, phone mockup CSS, stats row)
  • Features section (3×2 card grid)
  • How It Works (3 steps + connector line)
  • Pull Quote strip (dark bg, radial glows)
  • Download CTA with smart store routing JS
  • About section (2-col, 3 cards)
  • Contact section (form with validation + success state)
  • Footer (4-column, dark bg)
  • All animations (blobs, fade-up, phone float, pulsing dot)
  • Responsive breakpoints (1024 / 768 / 480px)
  • Grain overlay (SVG turbulence, position:fixed pseudo)
• Create .github/workflows/deploy.yml for GitHub Pages deployment

Original prompt

Fixins — Single-Page Marketing Site

Build a single-page HTML/CSS/JS marketing website for Fixins, a free meal planning app. No frameworks. One file. Production quality.

---

Brand Tokens

:root {
  --paper:        #F2EBD9;   /* page bg */
  --paper-dark:   #E8DFC8;   /* section alt bg */
  --paper-deep:   #DDD0B4;   /* deep bg */
  --paper-edge:   #C8BA98;   /* borders */
  --ink:          #2A2318;   /* primary text */
  --ink-mid:      #4A3D2C;   /* secondary text */
  --ink-faded:    rgba(42,35,24,0.45);
  --ink-ghost:    rgba(42,35,24,0.18);
  --tomato:       #C13B2A;   /* primary CTA, Fixins red */
  --tomato-dim:   rgba(193,59,42,0.12);
  --olive:        #5C6B2E;   /* Android/secondary CTA */
  --olive-pale:   rgba(92,107,46,0.12);
  --mustard:      #B8860B;   /* eyebrow accents */
  --mustard-pale: rgba(184,134,11,0.12);
  --terra:        #B8685A;   /* warm detail */
  --sage:         #5A6B52;
  --rule:         rgba(42,35,24,0.12);
  --rule-dark:    rgba(42,35,24,0.22);
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Lato', system-ui, sans-serif;
}

Fonts: Google Fonts — Playfair Display (400/600/700 + italic) + Lato (300/400/600/700)

Mood: warm botanical paper — NOT dark, NOT navy. Cream/parchment background with tomato red as the hero accent. Like a handwritten recipe journal gone digital.

---

Page Structure (top → bottom)

1. Navbar
2. Hero
3. Features (6-card grid)
4. How It Works (3 steps)
5. Pull Quote strip
6. Download CTA ← smart store routing lives here
7. About
8. Contact (form + social links)
9. Footer

---

1. Navbar

• Fixed top, transparent → frosted on scroll (bg rgba(242,235,217,0.88) + backdrop-filter blur(16px) + border-bottom)
• Logo: rounded-sq #C13B2A bg, white serif "F", gold 2px strip underneath as accent
• Logo name: serif italic Fixins (the "ins" in tomato)
• Nav links: Features · Download · About · Contact
• Right CTAs: ghost "Get the App" + tomato "Download Free"
• Mobile: hide links+CTAs, show hamburger → fullscreen overlay menu with same links + both CTAs stacked

---

2. Hero

Full-viewport section, --paper bg.

Background layers (all position:absolute; pointer-events:none):

• 3 animated blobs (large radial gradients, slow float keyframe 0%→50%→100% translateY + rotate)
  • blob-1: top-right, mustard tint, 14s
  • blob-2: bottom-center-right, tomato tint, 11s delay -4s
  • blob-3: mid-left, olive tint, 16s delay -8s
• 7 floating food emoji icons (🍅 🥕 🧄 🫙 🌿 🫒 🍋) scattered right-side, each with unique float animation, opacity:0.14, filter:saturate(0.4)
• Horizontal paper grain lines (repeating-linear-gradient)

Content (left-aligned, z-index 2, max-width 640px):

• Badge pill: tomato-dim bg, pulsing dot, "NOW AVAILABLE — FREE TO DOWNLOAD"
• H1 serif 52–88px responsive:

  Dinner's
  figured out.    ← italic tomato
  Finally.        ← olive color
  

• Subtext: var(--ink-faded), max-w 500px
• CTA row: tomato "Download Free" lg + ghost "See How It Works" lg
• Smart store hint (hidden by default, shown when mobile device detected): "Detected: iPhone — we'll take you right there."
• Stats row (border-top): 4.8★ App Store · 10k+ Families · Free Always

Right side (absolute, hidden mobile): CSS phone mockup

• Dark shell with border-radius 40px, shadow
• Screen shows: paper bg + floral radial gradients + phone notch + bottom card (logo, "Meal Planning" tomato btn, "Shopping List" ghost btn) + tab bar (4 icons)
• Slow float animation

---

3. Features

Section bg: --paper-dark, border-top + border-bottom.

Section header (centered): mustard eyebrow, serif h2 "Everything the kitchen needs. Nothing it doesn't." (italic tomato)

3×2 grid of feature cards (responsive → 2-col → 1-col):
Each card:

• padding: 40px 36px · border-right: 1px solid var(--rule) (last col no right border) · hover: bg lightens
• Top accent bar (2.5px, hidden → visible on hover, color matches card type)
• Icon box 48×48, tinted bg, emoji
• Serif title + body text

Six cards:

Emoji	Title	Accent
📅	Weekly Meal Planner	tomato
🛒	Auto Grocery Lists	olive
🥗	Nutrition Tracking	mustard
🧑‍🍳	Cook Mode with Timers	terra
🌱	Pantry-Based Recipes	sage
👨‍👩‍👧	Shared Family Plans	tomato

---

4. How It Works

Section bg: --paper. Centered.

3-column step layout with horizontal connector line behind step numbers.

Steps:

1. Plan Your Week — step circle active (tomato fill, white number, glow shadow)
2. Shop with Confidence — plain circle
3. Cook Without Guessing — plain circle

Each step: number circle (52px) · serif title · body text (centered)

---

5. Pull Quote Strip

Full-width, bg var(--ink). Ambient tomato + olive radial glows behind text.

Centered quote block (max-w 780px):

• Large tomato " mark (serif 80px)
• Serif italic quote text 22–34px responsive, --paper color
• Attribution line (small caps, fa...

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.