22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T1e92,Create a React + Tailwind CSS v4 + Motion (framer-motion successor) stats section component. Use Vite as the bundler. The section should be fully mobile responsive. ### Fonts Import from Google Fonts in your global CSS: ``` @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap'); ``` Define two Tailwind v4 theme fonts: - `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;` (used as the primary UI font via `font-sans`) - `--font-dm-serif: "Instrument Serif", serif;` (used as the accent/poetic font via `font-dm-serif`) The page wrapper uses `bg-black font-sans text-white`. ### Dependencies - `react` v19 - `motion` (npm package "motion", imported as `motion/react` -- provides `motion`, `useInView`, `animate`) - `tailwindcss` v4 with `@tailwindcss/vite` plugin - Vite v6+ ### Section Layout The section is a `

` with: - `id="stats"` - Classes: `bg-black text-white py-8 md:py-24 px-6 md:px-12 lg:px-[120px] w-full border-t border-white/10 overflow-hidden` - Inner wrapper: `w-full max-w-[1440px] mx-auto` - Content is a two-column flexbox: `flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch` ### Left Column (flex-1, flex flex-col justify-start) The entire left column is wrapped in a `motion.div` with staggered reveal animation: - `initial="hidden"`, `whileInView="visible"`, `viewport={{ once: true, margin: "-100px" }}` - Variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06 } }` **Heading (h2):** - Classes: `text-[clamp(1.5rem,4vw,3.5rem)] font-medium tracking-tight mb-6 leading-[1.1] w-[590px] max-w-full` - Content uses a custom `` component (described below): - `` followed by `
` - `` then a `` wrapping `` - The phrase "Maximize Your Yield" renders in Instrument Serif italic as the accent font. **Subtitle (p):** - Classes: `text-base md:text-lg text-white/40 leading-relaxed font-light max-w-lg whitespace-normal mb-16` - Content: `` **Stats Grid:** - Wrapped in `motion.div` with stagger variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.1 } }` - Classes: `grid grid-cols-2 md:grid-cols-[max-content_max-content] gap-8 md:gap-x-16 lg:gap-x-24` - 5 stat items, each wrapped in `motion.div` with variants: hidden = `{ opacity: 0, y: 20 }`, visible = `{ opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }` - Each stat item (`flex flex-col`): - **Number:** `text-4xl md:text-5xl lg:text-[56px] font-dm-serif tracking-tight mb-3` (uses Instrument Serif) - **Label:** `text-[10px] md:text-xs font-semibold text-white/40 uppercase tracking-wider` The 5 stats with their AnimatedCounter props: 1. `value={500} suffix="K+"` / Label: "Acres Harvested Annually" 2. `value={99.8} decimals={1} suffix="%"` / Label: "Crop Recovery Rate" 3. `value={50} suffix="+"` / Label: "Modern Combines Deployed" 4. `value={15} suffix="+"` / Label: "Crop Varieties Supported" 5. `value={24} suffix="/7"` / Label: "Uptime During Season" ### AnimatedCounter Component A helper component that animates from 0 to a target value on scroll into view: - Props: `value: number`, `suffix?: string` (default ""), `prefix?: string` (default ""), `decimals?: number` (default 0) - Uses `useRef`, `useInView(ref, { once: true, margin: "-50px" })` from `motion/react` - On `inView`, calls `animate(0, value, { duration: 1.5, ease: "easeOut", onUpdate(val) { ref.current.textContent = prefix + val.toFixed(decimals) + suffix } })` - Returns `{prefix}0{suffix}` as initial render ### Typewriter Component A reusable character-by-character reveal animation triggered on scroll: - Props: `text: string`, `delay?: number` (default 0), `speed?: number` (default 0.015), `className?: string` (default "") - Uses `useRef`, `useInView(ref, { once: true, margin: "-10px" })` from `motion/react` - Renders a `motion.span` with `initial="hidden"` and `animate={inView ? "visible" : "hidden"}` - Parent variants: hidden = `{ opacity: 1 }`, visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }` - Splits text into individual characters, each wrapped in `motion.span` with variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1 }` ### Right Column: Logo-Masked Video - Wrapper: `flex justify-center lg:justify-end items-center shrink-0 lg:w-1/2` - Inner `motion.div`: - `initial={{ opacity: 0, scale: 0.9 }}` - `whileInView={{ opacity: 1, scale: 1.2 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.8, delay: 0, ease: "easeOut" }}` - Classes: `w-full max-w-[500px] lg:max-w-none lg:w-[120%] aspect-square origin-center` - Uses CSS `mask-image` (both `-webkit-mask-image` and `mask-image`) with an inline SVG data URI of a triangular/mountain-like logo shape. The exact SVG path data: ``` m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z ``` - SVG viewBox: `0 0 100 100` - Mask properties: `maskSize: 'contain'`, `maskRepeat: 'no-repeat'`, `maskPosition: 'center'` - Full inline style object: ```js { WebkitMaskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`, WebkitMaskSize: 'contain', WebkitMaskRepeat: 'no-repeat', WebkitMaskPosition: 'center', maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m53.54,45.42c2.19-3.79,7.67-3.79,9.86,0l4.54,7.87c1.17,2.02,1.17,4.51,0,6.54l-8.15,13.81c-1.68,2.91.42,6.55,3.78,6.55h17.81c3.45,0,5.61-3.74,3.89-6.73l-28.76-49.81c-2.95-5.12-10.34-5.12-13.29,0l-28.46,49.3c-1.86,3.22.46,7.24,4.18,7.24h10.23c2.55,0,4.91-1.36,6.19-3.57l18.18-31.19Z'/%3E%3C/svg%3E")`, maskSize: 'contain', maskRepeat: 'no-repeat', maskPosition: 'center', } ``` - Inside the masked div, a `

); } ``` ---33:T1fe5,Create a React + Tailwind CSS v4 + Motion ("motion/react") customer feedback / testimonial carousel section. Use Vite as the bundler. Fully mobile responsive. ### Fonts Import from Google Fonts in your global CSS: ``` @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap'); ``` Define two Tailwind v4 theme fonts: - `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;` (primary UI font via `font-sans`) - `--font-dm-serif: "Instrument Serif", serif;` (accent font -- not used in this section but defined globally) The page wrapper uses `bg-black font-sans text-white`. This section overrides to `bg-white text-black`. ### Dependencies - `react` v19 (uses `useState`) - `motion` (npm package "motion", import `motion`, `AnimatePresence` from `motion/react`) - `lucide-react` (import `ArrowLeft`, `ArrowRight`) - `tailwindcss` v4 with `@tailwindcss/vite` plugin - Vite v6+ ### Also requires a Typewriter component A reusable character-by-character reveal animation triggered on scroll: - Props: `text: string`, `delay?: number` (default 0), `speed?: number` (default 0.015), `className?: string` (default "") - Uses `useRef`, `useInView(ref, { once: true, margin: "-10px" })` from `motion/react` - Renders a `motion.span` with `initial="hidden"` and `animate={inView ? "visible" : "hidden"}` - Parent variants: hidden = `{ opacity: 1 }`, visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }` - Splits text into individual characters, each wrapped in `motion.span` with variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1 }` --- ### Data: Feedback Array A static array of 3 feedback objects, each with `quote`, `author`, `title`, `avatar`: ```js const feedbacks = [ { quote: "\u00abWorking with the Acreage Ag team gave us a competitive edge in bringing our crops to market. Their technical expertise, machinery, and customer service are outstanding. We consider them a key partner for all our harvesting needs\u00bb", author: "Maranda Walsh", title: "Operations Manager, GreenAcres Farms", avatar: "https://picsum.photos/seed/maranda/100/100" }, { quote: "\u00abThe team's dedication and innovative approach transformed our farm operations. They delivered a high-quality harvest on time and within budget. We highly recommend their services.\u00bb", author: "John Doe", title: "Owner, Valley Wheat Producers", avatar: "https://picsum.photos/seed/john/100/100" }, { quote: "\u00abExceptional service and outstanding yields. The operators were highly skilled and integrated seamlessly with our in-house farm hands. A truly remarkable partnership.\u00bb", author: "Sarah Smith", title: "Chief Agronomist, HarvestYield Co.", avatar: "https://picsum.photos/seed/sarah/100/100" } ]; ``` Note: Quotes use guillemet characters (the `<<` and `>>` style quotation marks). --- ### State Management Two pieces of React state: - `currentIndex` (number, default 0) -- tracks which feedback is visible - `direction` (number, default 1) -- tracks slide direction for animation (+1 = forward, -1 = backward) Two handler functions: - `nextSlide`: sets direction to `1`, increments `currentIndex` wrapping with modulo - `prevSlide`: sets direction to `-1`, decrements `currentIndex` wrapping with modulo --- ### Slide Animation Variants Custom directional variants for the `AnimatePresence` carousel: ```js const variants = { enter: (direction) => ({ x: direction > 0 ? 100 : -100, opacity: 0 }), center: { zIndex: 1, x: 0, opacity: 1 }, exit: (direction) => ({ zIndex: 0, x: direction < 0 ? 100 : -100, opacity: 0 }) }; ``` Transition for the slide: `{ x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }` --- ### Section Container `
` with: - `id="feedback"` - Classes: `w-full bg-white text-black py-8 md:py-24 px-6 md:px-12 lg:px-[120px] flex flex-col justify-center overflow-hidden` ### Staggered Reveal Wrapper The entire section content is wrapped in a `motion.div`: - `initial="hidden"`, `whileInView="visible"`, `viewport={{ once: true, margin: "-100px" }}` - Variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.05 } }` - Classes: `w-full` --- ### Element 1: Section Title (h2) - Wrapped in `motion.h2` with variants: hidden = `{ opacity: 0, y: 20 }`, visible = `{ opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }` - Classes: `text-sm md:text-base mb-6 font-medium tracking-wide` - Content: `` ### Element 2: Top Divider Line - `motion.div` with variants: hidden = `{ scaleX: 0 }`, visible = `{ scaleX: 1, transition: { duration: 0.8, ease: "easeOut" } }` - Classes: `w-full h-[1px] bg-[#D9D9D9] mb-12 md:mb-20 origin-left` - Animates by scaling from left to right. ### Element 3: Quote Carousel Area - Wrapper `motion.div`: - Variants: hidden = `{ opacity: 0, y: 20 }`, visible = `{ opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }` - Classes: `relative overflow-hidden min-h-[300px] md:min-h-[250px] flex items-center` - Inside: `` - `motion.div` keyed by `currentIndex`, using the directional slide variants described above - Classes: `w-full` - Contains the quote `
`: - Classes: `text-2xl md:text-4xl lg:text-[44px] font-light leading-snug md:leading-tight text-right tracking-tight` - Content: `` ### Element 4: Bottom Divider Line - Same animation as top divider: `motion.div` with scaleX variants - Classes: `w-full h-[1px] bg-[#D9D9D9] mt-12 md:mt-20 mb-8 origin-left` ### Element 5: Author Info + Navigation Arrows - Wrapper `motion.div`: - Variants: hidden = `{ opacity: 0, y: 20 }`, visible = `{ opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }` - Classes: `flex flex-col sm:flex-row justify-between items-center gap-6` **Left side: Author info (animated on slide change)** - `` wrapping a `motion.div` keyed by `currentIndex`: - `initial={{ opacity: 0, y: 10 }}`, `animate={{ opacity: 1, y: 0 }}`, `exit={{ opacity: 0, y: -10 }}` - `transition={{ duration: 0.2 }}` - Classes: `flex items-center gap-4 w-full sm:w-auto` - Avatar ``: - `src={feedbacks[currentIndex].avatar}` - Classes: `w-14 h-14 rounded-full object-cover` - `referrerPolicy="no-referrer"` - Author name `
`: classes `font-medium text-lg`, content `` - Author title `
`: classes `text-gray-500 text-sm`, content `` **Right side: Navigation arrows** - Wrapper: `flex gap-2 w-full sm:w-auto justify-end` - Two circular buttons, each: - Classes: `w-14 h-14 bg-[#D9D9D9] hover:bg-[#c9c9c9] transition-colors flex items-center justify-center rounded-full` - Left button: `onClick={prevSlide}`, contains ``, `aria-label="Previous feedback"` - Right button: `onClick={nextSlide}`, contains ``, `aria-label="Next feedback"` --- ### Mobile Responsiveness Summary - Section padding: `py-8 px-6` on mobile, `md:py-24 md:px-12`, `lg:px-[120px]` - Title: `text-sm` on mobile, `md:text-base` - Divider margins: `mb-12` / `mt-12` on mobile, `md:mb-20` / `md:mt-20` on desktop - Quote text: `text-2xl` on mobile, `md:text-4xl`, `lg:text-[44px]` - Quote container min-height: `min-h-[300px]` on mobile, `md:min-h-[250px]` on desktop - Author + arrows row: stacks vertically on mobile (`flex-col`), horizontal at `sm:` (`sm:flex-row`) - Arrow buttons and author section go full width on mobile (`w-full`), auto-width at `sm:` (`sm:w-auto`) - Arrows align right on mobile via `justify-end` ---34:T21e0,Build a "Projects / Case Studies" section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). White background, black text. Here is the exact specification: --- **Section Container:** - `
` with `relative bg-white text-black`, inline style `fontFamily: "'DM Sans', sans-serif"` - All animations use easing `[0.22, 1, 0.36, 1]` - Inject a `

` - Text: "Meet USD Halo." - Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-8` - Inline style: `{ letterSpacing: '-0.03em' }` 2. CTA pill button (black capsule, text-left icon-right pattern): - Element: `

Meet USD Halo.

Product

vize

Use modes

Commerce

Arceage Stats

Max Reed Portfolio

Halo Benefits

Stark Minimal Footer

3D Studio Pricing

Vize Footer

Portfolio About

Scroll Marquee

Capabilities Overview

Kova Testimonial

Zenith Footer

Beauty Categories

Social Media Posts

Beauty Products

Orbis CTA

Halo Use Case

Arceage Testimonial

Pixel Grid Hover

Benefits Features

Lumina