# GROUNDAI LANDING PAGE

BUILD A SINGLE-PAGE TANSTACK START V1 LANDING PAGE FOR A PRODUCT CALLED "GROUNDAI" (INTERIOR DESIGN AI). USE REACT 19, TYPESCRIPT, TAILWIND V4, FRAMER-MOTION AND LUCIDE-REACT. PAGE LIVES AT `SRC/ROUTES/INDEX.TSX` AND IS COMPOSED OF FOUR STACKED SECTIONS IN THIS EXACT ORDER: HERO, TRUSTEDBY, CRAFTEXPERIENCES, TESTIMONIALS.

## ASSETS

CREATE `SRC/LIB/ASSETS.TS` THAT EXPORTS A SINGLE OBJECT `A` WITH A `BASE` CONSTANT EQUAL TO `"HTTPS://QCLAY.DESIGN/LOVABLE/GROUNDAI"` AND THESE KEYS, EACH VALUE BEING `${BASE}/<FILENAME>`:

- HERO=HERO1.MP4
- BACKGROUNDCARD=BACKGROUNDCARD.PNG
- BOTTOMWONEM=BOTTOMWONEM.PNG
- WOMEM=WOMEM.PNG
- LOGO=LOGO.SVG
- ARROWUP=ARROWUP.SVG
- GREENFLAG=GREENFLAG.SVG
- NUERAL=NUERAL.SVG
- ORINYA=ORINYA.SVG
- SKODIA=SKODIA.SVG
- SKODIASKODIA=SKODIASKODIA.SVG
- WIDS=WIDS.SVG
- XYREION=XYREION.SVG

REFERENCE EVERY IMAGE/VIDEO THROUGH THIS `A` OBJECT ONLY.

## FONTS

IN THE ROUTE `HEAD()`, INJECT A STYLESHEET LINK TO `HTTPS://FONTS.GOOGLEAPIS.COM/CSS2?FAMILY=INTER+TIGHT:WGHT@400;500&FAMILY=PLAYFAIR+DISPLAY:ITAL@1&DISPLAY=SWAP`. THREE FONT FAMILIES ARE USED INLINE VIA STYLE `FONTFAMILY`: `"'INTER TIGHT', SANS-SERIF"` FOR HEADINGS AND BRAND WORDMARK, `"'PLAYFAIR DISPLAY', SERIF"` ITALIC FOR ACCENT WORDS, AND `"'SF PRO ROUNDED', SYSTEM-UI, SANS-SERIF"` FOR BUTTONS/BODY. BRAND LOGOS IN TRUSTEDBY/TESTIMONIALS USE `"'SATOSHI', SYSTEM-UI, SANS-SERIF"`.

## HEAD/META

TITLE "GROUNDAI — REDEFINE SPACE WITH INTELLIGENT DESIGN"; DESCRIPTION AND OG:TITLE/OG:DESCRIPTION "GROUNDAI HELPS YOU IMAGINE, PLAN, AND REFINE SPACES THROUGH NATURAL CONVERSATIONS."

## GLOBAL CSS

IN `SRC/STYLES.CSS` APPEND AT THE END:

```css
@KEYFRAMES MARQUEE { 0% { TRANSFORM: TRANSLATEX(0); } 100% { TRANSFORM: TRANSLATEX(-50%); } } .ANIMATE-MARQUEE { ANIMATION: MARQUEE 35S LINEAR INFINITE; }
```

## HERO SECTION (INSIDE INDEX.TSX)

A RELATIVE FULL-VIEWPORT SECTION: CLASSNAME `"RELATIVE MIN-H-SCREEN W-FULL TEXT-WHITE FLEX FLEX-COL JUSTIFY-BETWEEN P-6 MD:P-12 OVERFLOW-HIDDEN"`. FIRST CHILD IS A `<VIDEO>` FOLLOWED BY AN ABSOLUTE OVERLAY DIV CLASSNAME `"ABSOLUTE INSET-0 BG-BLACK/20 Z-0"`.

HEADER (`MOTION.HEADER`) ANIMATES INITIAL `{Y:"45VH", OPACITY:0}` TO `{Y:0, OPACITY:1}` OVER 1S WITH EASE `[0.22,1,0.36,1]`. CLASSNAME `"W-FULL MAX-W-[1360PX] MX-AUTO FLEX JUSTIFY-BETWEEN ITEMS-CENTER Z-20 RELATIVE"`. LEFT: A DIV `FLEX ITEMS-CENTER GAP-[20PX]` CONTAINING `<IMG LOGO>` AND SPAN "GROUNDAI" `TEXT-WHITE TEXT-3XL FONT-MEDIUM` IN INTER TIGHT. RIGHT (DESKTOP, HIDDEN `LG:FLEX`): A `MOTION.NAV` WITH LAYOUT, INITIAL WIDTH 110 ANIMATING TO `"AUTO"` WITH 0.8S DURATION DELAY 1.1 SAME EASING, `WILLCHANGE` WIDTH, CLASSNAME `"BG-BLACK/40 BACKDROP-BLUR-LG ROUNDED-3XL ITEMS-CENTER OVERFLOW-HIDDEN H-[64PX] FLEX-ROW-REVERSE"`. INSIDE, FIRST (RENDERED ON RIGHT DUE TO ROW-REVERSE) A `P-1.5` WRAPPER WITH A WHITE PILL BUTTON `H-12 PX-6 ROUNDED-FULL TEXT-BLACK TEXT-XL FONT-MEDIUM` "LOGIN" (SF PRO ROUNDED), HOVER `BG-NEUTRAL-100`. THEN A `MOTION.DIV` FADING IN (OPACITY 0→1 DELAY 1.5 DURATION 0.5) CLASSNAME `"FLEX ITEMS-CENTER GAP-8 PL-8 PR-2 WHITESPACE-NOWRAP"` WITH FOUR ANCHORS `TEXT-WHITE TEXT-BASE OPACITY-90 HOVER:OPACITY-100`: PRODUCT, PLATFORM, CUSTOMERS, COMPANY.

MOBILE (`LG:HIDDEN`) TOGGLE BUTTON: `W-12 H-12 ROUNDED-FULL BG-BLACK/40 BACKDROP-BLUR-LG FLEX CENTER`, ICON MENU/X FROM LUCIDE-REACT TOGGLED VIA `USESTATE`. `ANIMATEPRESENCE` WRAPS A DROPDOWN `MOTION.DIV` SHOWN WHEN OPEN: INITIAL `{OPACITY:0,Y:-10}` ANIMATE `{OPACITY:1,Y:0}` EXIT SAME, CLASSNAME `"ABSOLUTE TOP-FULL RIGHT-0 MT-3 W-60 BG-BLACK/70 BACKDROP-BLUR-LG ROUNDED-2XL P-4 FLEX FLEX-COL GAP-3"` CONTAINING THE SAME FOUR LINKS PLUS A WHITE PILL LOGIN BUTTON `H-11`.

CENTER HERO CONTENT: DIV CLASSNAME `"W-FULL MAX-W-[800PX] MX-AUTO FLEX FLEX-COL JUSTIFY-CENTER ITEMS-CENTER GAP-6 MD:GAP-8 TEXT-CENTER MY-AUTO Z-10 PX-4"`. `H1` `TEXT-WHITE TEXT-[40PX] SM:TEXT-[52PX] MD:TEXT-[64PX] FONT-NORMAL LEADING-[1.1] MD:LEADING-[1.02]` INTER TIGHT, COMPOSED OF THREE `MOTION.SPAN` BLOCKS EACH INITIAL `{OPACITY:0,Y:12}` ANIMATE `{OPACITY:1,Y:0}` DELAYS 0.3/0.5/0.7 DURATION 0.6: LINE1 "MEET GROUNDAI."; LINE2 CONTAINS ITALIC PLAYFAIR "REDEFINE SPACE" + NON-ITALIC INTER TIGHT "WITH"; LINE3 "INTELLIGENT DESIGN". AFTER `H1` A `MOTION.BUTTON` INITIAL `{OPACITY:0,Y:10}` ANIMATE DELAY 1.0 DURATION 0.5, CLASSNAME `"H-12 MD:H-14 PX-6 MD:PX-8 PY-3 BG-WHITE ROUNDED-2XL INLINE-FLEX JUSTIFY-CENTER ITEMS-CENTER TEXT-BLACK TEXT-LG MD:TEXT-XL FONT-MEDIUM HOVER:BG-NEUTRAL-200 TRANSITION-COLORS SHADOW-LG MT-2 MD:MT-0"` SF PRO ROUNDED, LABEL "START FREE DECORATION".

HERO FOOTER: `FOOTER` CLASSNAME `"W-FULL MAX-W-[1360PX] MX-AUTO FLEX FLEX-COL MD:FLEX-ROW JUSTIFY-BETWEEN ITEMS-START MD:ITEMS-END GAP-6 Z-10"`. LEFT COLUMN `W-FULL MD:W-[480PX] MAX-W-PROSE TEXT-WHITE/80 TEXT-XL LEADING-[1.25] TEXT-LEFT` RENDERS AN `ANIMATEDWORDS` HELPER (SPLITS TEXT ON SPACES, EACH WORD BECOMES A `MOTION.SPAN` INITIAL `{OPACITY:0,Y:10}` ANIMATE `{OPACITY:1,Y:0}` TRANSITION DELAY = BASEDELAY + I*0.045, DURATION 0.5 EASEOUT, `INLINE-BLOCK MR-[0.25EM]`) WITH BASEDELAY 1.2 AND TEXT = "IT HELPS YOU IMAGINE, PLAN, AND REFINE SPACES THROUGH NATURAL CONVERSATIONS. FROM CHOOSING COLORS AND LAYOUTS TO SUGGESTING FURNITURE AND DÉCOR, IT ADAPTS TO YOUR TASTE."

RIGHT COLUMN `MOTION.DIV` INITIAL `{OPACITY:0,Y:20}` ANIMATE DELAY 1.4 DURATION 0.6, CLASSNAME `"FLEX FLEX-ROW FLEX-WRAP LG:FLEX-COL ITEMS-CENTER LG:ITEMS-END GAP-2.5 W-FULL MD:W-AUTO JUSTIFY-END"`. CONTAINS A PILL DIV `H-[56PX] PX-5 ROUNDED-2XL BORDER BORDER-WHITE/40 TEXT-WHITE TEXT-XL WHITESPACE-NOWRAP` CENTERED SF PRO ROUNDED READING "SOLUTIONS FOR COMPLEX SPACES". THEN A ROW `FLEX ITEMS-CENTER GAP-2` WITH A 56X56 `ROUNDED-2XL BORDER-WHITE/40` SQUARE CONTAINING `<IMG ARROWUP>` FOLLOWED BY ANOTHER IDENTICAL PILL "CONVERSATIONAL & ACTION".

## TRUSTEDBY COMPONENT (`SRC/COMPONENTS/TRUSTEDBY.TSX`)

`SECTION` `BG-WHITE PT-16 PB-14 PX-[40PX]`. `H2` `TEXT-CENTER TEXT-3XL MD:TEXT-4XL FONT-MEDIUM TEXT-NEUTRAL-900 MB-12` INTER TIGHT "TRUSTED BY THE " + ITALIC PLAYFAIR "LEADING BRANDS". BELOW, RELATIVE `OVERFLOW-HIDDEN` WRAPPER WITH TWO `POINTER-EVENTS-NONE` ABSOLUTE GRADIENTS LEFT (`W-16 FROM-WHITE TO-TRANSPARENT`) AND RIGHT (MIRRORED) `Z-10`. INSIDE A DIV CLASSNAME `"FLEX W-MAX ANIMATE-MARQUEE GAP-16"` RENDERING `[...BRANDS, ...BRANDS]` WHERE BRANDS ARRAY IS: `{NUERAL, A.NUERAL}`, `{GROUNDAI, NULL}`, `{WIDS, A.WIDS}`, `{ORINYA, A.ORINYA}`, `{XYREION, A.XYREION}`, `{SKODIA, A.SKODIA}`, `{GREENFLAG, A.GREENFLAG}`. EACH ITEM: `FLEX ITEMS-CENTER GAP-3 SHRINK-0 OPACITY-40`, OPTIONAL `<IMG>` THEN SPAN `TEXT-3XL FONT-BOLD TEXT-BLACK WHITESPACE-NOWRAP` SATOSHI WITH THE BRAND NAME.

## CRAFTEXPERIENCES COMPONENT (`SRC/COMPONENTS/CRAFTEXPERIENCES.TSX`)

`SECTION` `BG-WHITE`. INNER CONTAINER `MAX-W-[1360PX] MX-AUTO PX-6 MD:PX-12 PT-16 PB-20`. TITLE `H2` `TEXT-CENTER TEXT-5XL MD:TEXT-6XL FONT-NORMAL LEADING-[1.1] MB-12 TEXT-NEUTRAL-900` INTER TIGHT: ITALIC PLAYFAIR "CRAFT EXPERIENCES" + " YOUR" + `<BR>` + "CUSTOMERS WILL REMEMBER". BELOW A `FLEX FLEX-COL LG:FLEX-ROW JUSTIFY-BETWEEN ITEMS-STRETCH GAP-6` WITH THREE CARDS. EACH CARD WRAPPED IN `MOTION.DIV` INITIAL `{OPACITY:0,Y:40}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT `{ONCE:TRUE, AMOUNT:0.2}` TRANSITION DELAY I*0.35 DURATION 1.1 EASEOUT, CLASSNAME `"FLEX FLEX-1"`.

### CARD1 — STYLE CAROUSEL

RELATIVE `FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN BG-STONE-300`. BACKGROUND `ABSOLUTE INSET-0 BG-COVER BG-CENTER` WITH `BACKGROUNDIMAGE URL(A.BACKGROUNDCARD)`; OVERLAY `ABSOLUTE INSET-0 BG-BLACK/10`. CENTER WRAPPER `FLEX ITEMS-CENTER JUSTIFY-CENTER` HOLDS A RELATIVE `W-FULL` CENTERED CONTAINER OF HEIGHT 80 (ACTIVE_HEIGHT). CONSTANTS: `PILL_ROW_HEIGHT=56`, `PILL_GAP=18`, `ACTIVE_HEIGHT=80`, `ACTIVE_GAP=22`. ITEMS=`["MODERN MINIMALIST","COZY SCANDINAVIAN","RUSTIC WOODEN DESIGN","BOLD INDUSTRIAL","COASTAL RETREAT","JAPANDI CALM","ART DECO LUXE"]`. STATE `ACTIVE` STARTS AT 2, SETINTERVAL EVERY 2800MS ADVANCES `ACTIVE = (ACTIVE+1) % ITEMS.LENGTH`. FOR EACH ITEM COMPUTE `DIFF = ((I - ACTIVE + LEN + FLOOR(LEN/2)) % LEN) - FLOOR(LEN/2)`; `ISACTIVE = DIFF===0`; `VISIBLE = |DIFF|<=2`; `Y = DIFF===0 ? 0 : DIFF<0 ? DIFF(56+18)-22 : DIFF(56+18)+22`; `OPACITY = !VISIBLE ? 0 : |DIFF|===2 ? 0.55 : 1`. RENDER `MOTION.DIV` ANIMATE `{Y, OPACITY}`, TRANSITION Y: SPRING STIFFNESS 260 DAMPING 28, OPACITY TWEEN EASEINOUT DURATION 0.4, `ABSOLUTE LEFT-0 RIGHT-0 FLEX JUSTIFY-CENTER POINTER-EVENTS-NONE`, CONTAINING `<PILL>`. TOP/BOTTOM `BLACK/30→TRANSPARENT` GRADIENT OVERLAYS `H-24`.

`PILL` COMPONENT: `MOTION.DIV` LAYOUT, SPRING 260/28. WHEN INACTIVE: `W-[261PX] H-[56PX] PX-3 BG-WHITE/15 BACKDROP-BLUR-MD ROUNDED-FULL BORDER BORDER-WHITE/10 FLEX ITEMS-CENTER GAP-[8.5PX]`; WHEN ACTIVE: `W-[CALC(100%_-_60PX)] MX-[30PX] H-[80PX] BG-WHITE/25 BACKDROP-BLUR-XL SHADOW-XL` WITH PADDING 8.5. LEFT CIRCLE: `ROUNDED-FULL BG-WHITE/30`; INACTIVE 44X44 CONTAINING INNER `W-FULL H-FULL ROUNDED-FULL BG-WHITE/10`; ACTIVE 63X63 CONTAINING `<IMG WOMEM>`, WRAPPED IN `MOTION.DIV` WITH `LAYOUTID ICON-${LABEL}`. RIGHT AREA: RELATIVE `FLEX-1 H-[44PX] TEXT-LEFT ML-1` WITH TWO ABSOLUTELY POSITIONED `MOTION.DIV`S CROSS-FADING: ACTIVE VERSION SHOWS LABEL `TEXT-WHITE TEXT-LG FONT-MEDIUM` AND A SMALL CAPTION "GROUNDAI CHOICE" `TEXT-WHITE/70 TEXT-[11PX] TRACKING-[0.15EM]`; INACTIVE VERSION SHOWS TWO STACKED SKELETON BARS `H-2 W-[140PX] BG-WHITE/50 ROUNDED-FULL` AND `H-2 W-[70PX] BG-WHITE/35 ROUNDED-FULL`, GAP 1.5.

### CARD2 — CHAT/CUSTOMER CARD

RELATIVE `FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN BG-[#141413] FLEX FLEX-COL PT-10 PB-10 JUSTIFY-BETWEEN`. TOP AREA `FLEX-1 FLEX FLEX-COL JUSTIFY-CENTER GAP-[10PX] MB-6` HOLDS TWO STACKED BUBBLES: FIRST IS A STATIC SKELETON BUBBLE — `MOTION.DIV` INITIAL `{OPACITY:0,Y:20}` ANIMATE `{OPACITY:1,Y:0}` DELAY 0.2 DURATION 0.6, CLASSNAME `"MX-[58PX] H-[108PX] ROUNDED-2XL BG-[#FAFAFA14] FLEX ITEMS-START PT-[22PX] PL-[22PX] RELATIVE"`, CONTAINING A 40X40 `ROUNDED-XL BG-[#FFFFFF54]` SQUARE AND A COLUMN `ML-[12PX] FLEX-1 FLEX FLEX-COL GAP-[9PX] PR-[22PX]` WITH THREE PILLS: `H-[6PX] W-[31PX] BG-[#FFFFFF3D] ROUNDED-FULL MT-[17PX]`, THEN `W-[85%]`, THEN `W-[55%]`. SECOND BUBBLE IS `MORPHBUBBLE`: `MOTION.DIV` LAYOUT, ANIMATE BACKGROUNDCOLOR `"#FAFAFA14"` → `"#9E948B"` AFTER 1100MS TIMEOUT, TRANSITION 0.7S EASEOUT, CLASSNAME `"MX-[45PX] H-[135PX] ROUNDED-3XL P-[22PX] OVERFLOW-HIDDEN RELATIVE"`. `ANIMATEPRESENCE` MODE="WAIT" SWAPS CONTENT: WHILE NOT FILLED, IDENTICAL SKELETON (40X40 + 3 BARS SAME WIDTHS) SHOWN; ONCE FILLED, RENDER A ROW `FLEX ITEMS-CENTER GAP-[12PX] H-[44PX]` WITH `<IMG WOMEM 44X44 ROUNDED>` AND "ME" `TEXT-WHITE TEXT-BASE LEADING-NONE` SF PRO ROUNDED, FOLLOWED BY A PARAGRAPH `TEXT-WHITE TEXT-[15PX] LEADING-SNUG MT-[-9PX] ML-[56PX]` SF PRO ROUNDED READING: "MY INTERIOR WON'T UPDATE, ANY IDEAS ON HOW TO USE GROUNDAI?". FADE TRANSITIONS 0.5S DELAY 0.15S FOR FILLED, 0.3S FOR SKELETON.

CARD2 BOTTOM ROW: `FLEX JUSTIFY-BETWEEN ITEMS-END PL-[32PX] PR-[32PX]`. LEFT: `W-64 TEXT-WHITE TEXT-4XL LEADING-10` SF PRO ROUNDED WITH EACH WORD OF "ENGAGE AND DELIGHT CUSTOMERS" WRAPPED IN `MOTION.SPAN` INITIAL `{OPACITY:0,Y:10}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT ONCE AMOUNT 0.4, DELAY 0.5+I*0.1 DURATION 0.5 EASEOUT, `INLINE-BLOCK MR-[0.25EM]`. RIGHT: THREE OVERLAPPING CIRCLES REPRESENTING AVATARS/STEPS, EACH `W-10 H-10 ROUNDED-FULL BORDER-2 BORDER-[#141413] FLEX CENTER TEXT-XL` SF PRO ROUNDED: FIRST "01" `BG-[#5F5D4D] TEXT-WHITE Z-30`; SECOND "2" `BG-[#252522] TEXT-WHITE/40 -ML-3 Z-20`; THIRD "3" SAME STYLE `-ML-3 Z-10`.

### CARD3 — ADAPTABLE LIST

RELATIVE `FLEX-1 H-[585PX] ROUNDED-3XL OVERFLOW-HIDDEN FLEX FLEX-COL PX-[33PX] PT-[44PX] PB-10` BACKGROUNDCOLOR `"#9E948B"`. TOP: `FLEX FLEX-COL GAP-[26PX]`. `H3` `TEXT-WHITE TEXT-5XL FONT-NORMAL LEADING-[1.05]` INTER TIGHT: "IT'S COMPLETELY" `<BR>` "ADAPTABLE.". THEN PARAGRAPH `TEXT-WHITE/60 TEXT-LG LEADING-SNUG MAX-W-[340PX]` SF PRO ROUNDED WITH EACH WORD OF "CUSTOMIZE GROUNDAI TO FIT YOUR STYLE AND NEEDS—WHETHER YOU WANT MODERN MINIMALISM, COZY COMFORT, OR BOLD LUXURY." WRAPPED `MOTION.SPAN` INITIAL `{OPACITY:0,Y:8}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT ONCE AMOUNT 0.3 DELAY 0.6+I0.04 DURATION 0.4 EASEOUT `INLINE-BLOCK MR-[5PX]`. BOTTOM AREA `MT-AUTO Z-10` WITH `FLEX FLEX-COL GAP-[12PX]` OF THREE ITEMS ARRAY: `{"STYLE PREFERENCE","#887C71"}`, `{"ROOM LAYOUT RULES","#9E948B"}`, `{"FURNITURE & DÉCOR CHOICES","#9E948B"}`. EACH `MOTION.DIV` INITIAL `{OPACITY:0,Y:30}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT ONCE AMOUNT 0.3 DELAY 1.1+IDX0.18 DURATION 0.55 EASEOUT, CLASSNAME `"W-FULL PY-[15PX] PX-[27PX] ROUNDED-2XL BG-WHITE FLEX ITEMS-CENTER JUSTIFY-BETWEEN"`, LEFT SPAN `TEXT-LG` WITH THAT COLOR SF PRO ROUNDED SHOWING LABEL, RIGHT AN INLINE SVG PLUS ICON `W-[22PX] H-[22PX] TEXT-NEUTRAL-400` STROKE-WIDTH 2.5 VIEWBOX 0 0 24 24 WITH PATH D "M12 4.5V15M7.5-7.5H-15" ROUNDED LINE CAPS. OVER THE LIST PLACE A `POINTER-EVENTS-NONE ABSOLUTE INSET-X-0 -BOTTOM-10 H-[140PX] -MX-4 Z-20` DIV WITH A LINEAR-GRADIENT TO TOP FROM `RGBA(158,148,139,1)` 0%, 1 AT 35%, 0.7 AT 65%, 0 AT 80%.

## TESTIMONIALS COMPONENT (`SRC/COMPONENTS/TESTIMONIALS.TSX`)

`SECTION` `BG-WHITE`. INNER `MAX-W-[1360PX] MX-AUTO PX-6 MD:PX-10 PY-20`. OUTER `MOTION.DIV` INITIAL="HIDDEN" WHILEINVIEW="VISIBLE" VIEWPORT ONCE AMOUNT 0.25 TRANSITION STAGGERCHILDREN 0.18, CLASSNAME `"FLEX FLEX-COL LG:FLEX-ROW JUSTIFY-BETWEEN ITEMS-STRETCH GAP-8 LG:GAP-[25PX]"`. DEFINE `FADEUP` VARIANTS HIDDEN `{OPACITY:0,Y:24}` VISIBLE `{OPACITY:1,Y:0}`.

LEFT COLUMN WRAPPER `FLEX FLEX-COL LG:FLEX-ROW GAP-[25PX] ITEMS-STRETCH` CONTAINS TWO `MOTION.DIV` VARIANTS=FADEUP DURATION 0.6 EASEOUT BLOCKS:

BLOCK A: `FLEX FLEX-ROW LG:FLEX-COL JUSTIFY-BETWEEN LG:H-FULL LG:MIN-H-[447PX] GAP-4 LG:GAP-8 ITEMS-CENTER LG:ITEMS-START`. INSIDE: A COLUMN `FLEX FLEX-COL GAP-6 FLEX-1 LG:FLEX-NONE` WITH `H3` `TEXT-3XL TEXT-BLACK LEADING-TIGHT MAX-W-[260PX]`: MEDIUM SF PRO ROUNDED "GROUNDAI" + " " + ITALIC PLAYFAIR "CHANGED MY APPROACH". THEN A DESKTOP-ONLY `FLEX ITEMS-CENTER GAP-2` DOT INDICATOR: `W-8 H-2 BG-BLACK ROUNDED-FULL`, `W-2 H-2 BG-STONE-300 ROUNDED-FULL`, `W-2 H-2 BG-STONE-300 ROUNDED-FULL`. BELOW THE COLUMN A `MOTION.BUTTON` INITIAL `{OPACITY:0,Y:20}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT ONCE AMOUNT 0.4 DELAY 0.3 DURATION 0.5 EASEOUT, CLASSNAME `"SELF-START BG-BLACK TEXT-WHITE PX-7 PY-3 ROUNDED-2XL TEXT-XL FONT-MEDIUM HOVER:BG-NEUTRAL-800 TRANSITION-COLORS WHITESPACE-NOWRAP"` SF PRO ROUNDED LABEL "READ MORE".

BLOCK B: `FLEX FLEX-COL GAP-3 W-FULL LG:W-[282PX]`. FIRST CHILD DIV `W-FULL H-[280PX] LG:H-[351PX] ROUNDED-2XL OVERFLOW-HIDDEN` WITH `<IMG BOTTOMWONEM COVER>`. SECOND CHILD `MOTION.DIV` INITIAL `{OPACITY:0,Y:20}` WHILEINVIEW DELAY 0.4 DURATION 0.55 EASEOUT, CLASSNAME `"W-FULL H-24 ROUNDED-2XL FLEX ITEMS-CENTER JUSTIFY-CENTER GAP-3"` BACKGROUNDCOLOR `"#F1F0EF"`, CONTAINING `<IMG SKODIASKODIA>` AND SPAN `TEXT-3XL FONT-BOLD TEXT-BLACK` SATOSHI "SKODIA".

RIGHT COLUMN `MOTION.DIV` VARIANTS=FADEUP DURATION 0.6 EASEOUT, CLASSNAME `"MAX-W-[748PX] FLEX-1 P-10 ROUNDED-2XL FLEX FLEX-COL JUSTIFY-BETWEEN GAP-10"` BACKGROUNDCOLOR `"#7D756E1C"`. PARAGRAPH `TEXT-3XL LEADING-10 TEXT-BLACK` SF PRO ROUNDED; EACH WORD OF THE QUOTE "GROUNDAI COMPLETELY CHANGED HOW I APPROACHED REDESIGNING MY APARTMENT. INSTEAD OF FEELING OVERWHELMED WITH CHOICES. IT FELT LIKE HAVING A DESIGNER BY MY SIDE 24/7." IS A `MOTION.SPAN` INITIAL `{OPACITY:0,Y:6}` WHILEINVIEW `{OPACITY:1,Y:0}` VIEWPORT ONCE, TRANSITION DURATION 0.35 DELAY 0.4+I*0.04 EASEOUT, `INLINE-BLOCK MR-[0.25EM]`. BELOW THE QUOTE A `MOTION.DIV` INITIAL `{OPACITY:0,Y:24}` WHILEINVIEW DELAY 0.6 DURATION 0.6 EASEOUT, `FLEX FLEX-COL GAP-1`, CONTAINING ITALIC PLAYFAIR `TEXT-XL TEXT-BLACK` "SOPHIA MARTINEZ," AND `TEXT-XL TEXT-BLACK/50` SF PRO ROUNDED "HOMEOWNER & INTERIOR DESIGN ENTHUSIAST".

## GENERAL

USE SEMANTIC TAILWIND CLASSES ONLY AS LISTED. DO NOT INTRODUCE A DESIGN TOKEN SYSTEM — COLORS ARE INLINE HEX/TAILWIND UTILITIES AS SPECIFIED. MOBILE RESPONSIVE AT BREAKPOINTS SM/MD/LG AS SHOWN. NO BACKEND, NO ROUTER BEYOND THE SINGLE INDEX ROUTE. THE PAGE MUST SCROLL NATURALLY: FULL-BLEED VIDEO HERO, THEN WHITE SECTIONS.