ראית אתר שאהבת.ראיתאתרשאהבת.תבנה גרסה משלך.תבנהגרסהמשלך.

Scaffold a new Next.js 16 app (App Router, TypeScript, Tailwind v4).
Add GSAP with the useGSAP hook (@gsap/react), Lenis for smooth scroll, and
Framer Motion. Create a clean folder structure and a single globals.css with
CSS-variable design tokens (color, type scale, spacing, radii) left empty for
me to fill in the next step. Wire a global prefers-reduced-motion guard so
animations can opt out.

Using the Chrome connection, open https://agntix-next.vercel.app/design-studio.
Inspect the COMPUTED styles across the page at 1440px, 768px and 390px.
Extract the design SYSTEM only:
- exact color tokens with their roles (background, surface, text, muted, accent, border)
- the type scale (font families, sizes, line-heights, weights) — note the oversized display sizes
- the spacing scale, border-radius scale, shadow tokens, and container widths.
Write it to DESIGN.md as DTCG-style CSS variables plus a 3-line note on the
overall "feel". Rules: do NOT copy any text, images, icons or the exact layout —
only the system. Do NOT reuse their licensed display fonts; flag a free
near-equivalent I can license instead.

Open https://agntix-next.vercel.app/design-studio with the Chrome connection.
Detect the animation library (check window.gsap + ScrollTrigger, ScrollSmoother
/ Lenis, SplitText, framer-motion attributes, Lottie). For each notable
animation — the pinned hero, the bidirectional scroll-marquee, the portfolio
cards that pin and scale down, the line-by-line text reveal, and the magnetic
cursor — describe: trigger, properties animated, duration or scrub, easing,
stagger, and the scroll relationship. Write it to MOTION.md. Do NOT copy their
code — describe the behavior precisely so we can rebuild it ourselves.

Honest note: there is no reliable one-click "suck the animations out of a site".
The dependable path is inspect -> spec -> rebuild in your own stack.

Build my homepage using ONLY the tokens in DESIGN.md and these sections + copy:
<PASTE YOUR OWN SECTIONS AND COPY>.
Use my brand assets and my words — never the reference site's text or images.
Match the system's rhythm, scale and hierarchy (the oversized display type, the
dark canvas, the generous spacing), not its specific content or layout.

From MOTION.md, implement the scroll reveal and the bidirectional marquee as
reusable React components using GSAP + useGSAP (Framer Motion where simpler).
Match the scrub feel and the scroll triggers in the spec. Two hard rules:
respect prefers-reduced-motion (no motion when the user opted out), and NEGATE
the x-axis for RTL so entrances come from the correct side.

Run a divergence pass on the current design so it becomes mine, not a copy:
1. Shift the primary palette anchor ~20 degrees in hue, and replace the
   reference accent with MY brand accent.
2. Swap the display type to a free font I can license (options: <FONT OPTIONS>).
3. Restructure the hero layout so it is not a 1:1 of the reference.
4. Replace every placeholder asset with mine, and use my own copy throughout.
Goal: a stranger should not be able to tell this was based on the reference.
Keep the SYSTEM (rhythm, scale, motion feel) — change the specifics.

Set the environment variables on Vercel, connect the git repo, and deploy.
Give me the exact terminal commands.