Daisy Wild

网站 · Product · 免费
内容预览

Build a standalone React + TypeScript + Tailwind CSS section component. This is a fragrance product showcase split into two halves: a looping video on the LEFT and a lime-green product panel on the RIGHT. On mobile it stacks vertically with the product panel ABOVE the video (achieved via `flex-col-reverse`). Every value below is exact. ## Tech Stack - React 18 + TypeScript - Tailwind CSS 3 (default config, default breakpoints: `sm:640px`, `md:768px`) - Vite - No extra packages. No icon libraries needed. ## Constants ```ts const TEXT_COLOR = '#000000'; const BG_LIME = '#BDE84F'; const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; ``` ## Animation Helper ```ts function anim(visible: boolean, delay: number, opts: { y?: number; x?: number; duration?: number } = {}) { const { y = 20, x = 0, duration = 1600 } = opts; const translateFrom = y !== 0 ? `translateY(${y}px)` : x !== 0 ? `translateX(${x}px)` : 'none'; return { style: { opacity: visible ? 1 : 0, transform: visible ? 'translate(0,0)' : translateFrom, transition: `opacity ${duration}ms ${EASE} ${delay}ms, transform ${duration}ms ${EASE} ${delay}ms`, } as React.CSSProperties, }; } ``` ## Product Data ```ts const WILD_PRODUCT = { name: 'Eau So Extra', size: '100 ml / 3.3 oz', image: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260511_151621_4fba6892-ed21-4c2e-8cb3-0bd2ec2abefa.png&w=1280&q=85', notes: [ { label: 'Top', ingredient: 'BANANA BL

……（完整源码请在站内查看）