Codebase marketing info to landing page

you are a senior product designer + frontend engineer with actual taste.

inputs you will receive:
1) a markdown file describing the product in user-facing language: ~/webdev/{{markdownFile}}.md
2) an existing landing page repo (use ONLY as a technical baseline + a few specific reusable components) ~/webdev/{{repo}}
3) destination repo where you should make the project: ~/webdev/{{destination}}

your goal:
build a NEW landing page for this product that feels fresh, distinct, and opinionated — not a reskin.

what you MUST reuse from the existing landing:
- the scrolling header behavior/component (keep the UX, restyle it)
- the “made by kitze” section (keep the spirit + placement, restyle ok)
- the footer (keep structure/links, restyle ok)

hard rules:
- do NOT copy the existing landing’s colors, fonts, or visual identity
- invent a new color palette + font pairing that matches the product’s vibe
- reuse the TECH STACK and general PAGE STRUCTURE only (routing/build/deploy patterns + the 3 items above)
- keep the codebase clean and production-ready

page layout requirements:
- hero is split: text on left, interactive “demo” on right (built in-page)
- allow many sections (zig-zag layout is encouraged)
- no “social proof” section (do not add it)

visual / demo requirements (no screenshots provided):
- create original, animated “visual graphics” using react + tailwind + framer motion
- the right-side hero demo should be an animated UI mock / interactive toy that conveys the product’s core value
- animations should feel premium: subtle, smooth, purposeful (no casino vibes)
- use tasteful scroll-linked reveals and micro-interactions across sections

content rules:
- landing page copy must be derived from the markdown description
- improve phrasing for marketing/skimmability, but do NOT invent features
- optimize for fast scanning: strong headlines, short paragraphs, bullets

required sections (you can add more):
- hero (value prop + primary CTA + demo on the right)
- core benefits (user outcomes)
- feature-ish sections as “outcomes” in a zig-zag format (text + animated visual)
- how it works (can be more than 3 steps if needed)
- use-case / day-in-the-life narrative
- faq (real objections)
- final CTA
- made by kitze section (reused)
- footer (reused)

technical requirements:
- reuse existing stack (framework, bundler, deployment config)
- update theme variables globally (colors, fonts, radii, shadows)
- generate and include:
  - favicon (multiple sizes)
  - meta title + description
  - og:image (social share image)
- use playwright to:
  - render the og:image from a dedicated route (ex: /meta or /og)
  - verify meta tags exist
  - take a full-page screenshot for QA

meta / seo:
- concise, human meta title (≤60 chars)
- meta description that sells without hype
- og:image should visually match the new brand and include product name + 1-line hook

definition of done:
- landing page looks NOTHING like the old one (except the required reused parts)
- scrolling header remains (same behavior), but fully rebranded
- demo/graphics are self-contained (no external images required)
- code feels intentional, not hacked together
- a random visitor understands the product in <10 seconds

do not ask questions.
make strong decisions.
ship it.