{"object":"list","service":"prompts","count":122,"data":[{"id":"bold-studio","object":"prompt","title":"Bold Studio","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(10).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a fullscreen hero landing page for a creative agency called \"VANGUARD\" using React, Tailwind CSS, and Vite. The page should be a single viewport-height section with a looping background video and all content overlaid on top.\n\n**Background video:**\nUse this exact CloudFront URL as a fullscreen `<video>` element with `autoPlay`, `muted`, `loop`, and `playsInline` attributes, set to `object-cover` to fill the entire viewport:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_154941_df1a96e1-a06f-450c-bd02-d863414cc1a0.mp4\n```\n\n**Fonts (loaded in index.html):**\n1. \"FSP DEMO - PODIUM Sharp 4.11\" from `https://db.onlinewebfonts.com/c/8b75d9dcff6a48c35a46656192adf019?family=FSP+DEMO+-+PODIUM+Sharp+4.11` -- used for the brand name and main heading. Create a `.font-podium` utility class for it and register it in tailwind.config.js as `fontFamily.podium`.\n2. \"Inter\" from Google Fonts (weights 400, 500, 600, 700) -- used for body text, nav links, stats, and CTAs. Register it in tailwind.config.js as `fontFamily.inter`.\n\n**Icons:** Use `lucide-react` for all icons: `ArrowUpRight`, `Award`, `Crown`, and `X`.\n\n**Navbar:**\n- Horizontal bar at the top with responsive padding (`px-6 sm:px-10 lg:px-16`, `py-5 lg:py-7`).\n- Left: brand name \"VANGUARD\" in `font-podium`, white, bold, uppercase, `text-2xl sm:text-3xl`, `tracking-wider`.\n- Center (hidden below `md`): four nav links -- \"Projects\", \"Studio\", \"Offerings\", \"Inquire\" -- in `font-inter`, `text-sm`, `text-white/80`, `tracking-widest`, uppercase, with `hover:text-white` transition.\n- Right (hidden below `md`): a \"GET IN TOUCH\" link with an `ArrowUpRight` icon, styled as a bordered button (`border border-white/30 hover:border-white/60`, `px-6 py-3`, `text-xs`, `tracking-widest`, uppercase, `hover:bg-white/10`).\n- Right (visible below `md`): a hamburger button made of three white `div` bars (`w-6 h-0.5`, `w-6 h-0.5`, `w-4 h-0.5` with `space-y-1.5`).\n\n**Mobile Menu Overlay (below `md` only):**\n- Fixed fullscreen overlay (`fixed inset-0 z-50`) with `bg-black/95 backdrop-blur-sm`.\n- Toggles visibility via React `useState` -- when open: `opacity-100 visible`, when closed: `opacity-0 invisible`, with `transition-all duration-500`.\n- Header row matches the navbar: brand name on left, `X` close icon on right.\n- Centered vertically: each of the 4 nav links rendered in `font-podium`, `text-4xl sm:text-5xl`, white, uppercase, with staggered entrance animations using inline `style` -- each item gets `transitionDelay: i * 80 + 100ms`, `opacity` and `translateY(20px)` transitions based on the open state.\n- Below the links: a \"GET IN TOUCH\" bordered button with the same staggered animation pattern.\n- All links call `setMenuOpen(false)` on click.\n\n**Hero Content (vertically centered, left-aligned):**\nAll hero elements use staggered `animate-fade-up` animations (defined in CSS as `@keyframes fade-up` translating from `translateY(30px), opacity:0` to `translateY(0), opacity:1` over `0.8s ease-out`). Each successive element has an additional `0.2s` delay. Elements start with `opacity: 0` and use `animation-fill-mode: forwards`.\n\n1. **Tagline:** A `Crown` icon (lucide, `w-4 h-4`, `text-white/70`) followed by \"World-Class Digital Collective\" in `text-white/70`, `text-xs sm:text-sm`, `font-inter`, `tracking-[0.3em]`, uppercase. Uses `animate-fade-up` (no delay). Has `mb-6 lg:mb-8`.\n\n2. **Main Heading:** Three lines in `font-podium`, white, uppercase, `leading-[0.92]`, `tracking-tight`, each using `text-[clamp(2.8rem,8vw,7rem)]`:\n   - \"Design.\"\n   - \"Disrupt.\"\n   - \"Conquer.\"\n   Uses `animate-fade-up-delay-1` (0.2s delay).\n\n3. **Subtext:** \"We build fierce brand identities\" (line break) \"that don't just turn heads --\" then bold white \"they lead.\" in `text-white/70`, `text-sm sm:text-base`, `font-inter`, `leading-relaxed`, `max-w-md`. Uses `animate-fade-up-delay-2` (0.4s delay). `mt-6 lg:mt-8`.\n\n4. **CTA Row:** Uses `animate-fade-up-delay-3` (0.6s delay), `mt-8 lg:mt-10`, `flex flex-wrap items-center gap-4 sm:gap-6`.\n   - Black button \"SEE OUR WORK\" with `ArrowUpRight` icon. `bg-black hover:bg-neutral-900`, `px-5 sm:px-7 py-3 sm:py-4`, `text-[11px] sm:text-xs`, `tracking-widest`, uppercase. Arrow has `group-hover:translate-x-0.5 group-hover:-translate-y-0.5` transition.\n   - Beside it (hidden on mobile, `hidden sm:flex`): an `Award` icon (`w-8 h-8`, `text-white/50`) with two lines of text: \"Top-Rated\" / \"Brand Studio\" in `text-white/60`, `text-xs`, `tracking-wider`, uppercase.\n\n5. **Stats Row:** Uses `animate-fade-up-delay-4` (0.8s delay), `mt-8 sm:mt-10 lg:mt-14`, `flex flex-wrap gap-6 sm:gap-12 lg:gap-16`. Three stats:\n   - \"250+\" / \"Brands Transformed\"\n   - \"95%\" / \"Client Retention\"\n   - \"10+\" / \"Years in the Game\"\n   Values in `font-inter`, white, `text-2xl sm:text-4xl lg:text-5xl`, bold, `tracking-tight`. Labels in `text-white/50`, `text-[9px] sm:text-xs`, `tracking-widest`, uppercase, `mt-1`.\n\n**CSS Animations (defined in index.css under `@layer utilities`):**\n```css\n@keyframes fade-up {\n  from { opacity: 0; transform: translateY(30px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes scale-in {\n  from { opacity: 0; transform: scale(0.9); }\n  to { opacity: 1; transform: scale(1); }\n}\n```\nWith classes: `.animate-fade-up` (0s delay), `.animate-fade-up-delay-1` through `.animate-fade-up-delay-4` (0.2s increments, starting `opacity: 0`), `.animate-fade-in`, `.animate-fade-in-delay`.\n\n**Responsive behavior:**\n- Full layout is mobile-first with breakpoints at `sm` (640px), `md` (768px), and `lg` (1024px).\n- Nav links and \"GET IN TOUCH\" button show at `md`+; hamburger shows below `md`.\n- Award badge hides on mobile (`hidden sm:flex`).\n- All text sizes, paddings, gaps, and margins scale up through `sm:` and `lg:` prefixes.\n- Stats and CTA row use `flex-wrap` to prevent overflow on small screens.\n\nMake everything fully mobile responsive. Use a single `App.tsx` component with `useState` for the menu toggle. No routing needed.","url":"/prompts/bold-studio"}},{"id":"prisma-landing","object":"prompt","title":"Prisma Creative Studio","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_020417_f0fb8494-c926-46a7-afd9-51f2d3f567a1.png&w=1280&q=85","video_url":"https://motionsites.ai/assets/hero-prisma-preview-D4QeI0Bn.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called \"Prisma\". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, moody, and cinematic with a warm cream color palette.\n\nFONTS\n\nLoad two Google Fonts in index.html:\n\nAlmarai (weights: 300, 400, 700, 800) -- used as the global default font\nInstrument Serif (italic only) -- used for italic accent text in the About section\nIn index.css, set the global font family:\n\n\n* { font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; }\nIn tailwind.config.js, extend:\n\ncolors.primary: #DEDBC8 (warm cream, used for all primary text and accents)\nfontFamily.serif: ['\"Instrument Serif\"', 'serif']\nCOLOR SYSTEM\n\nBackground: black (#000000) globally, #101010 for the About card, #212121 for Features cards\nPrimary text color: #E1E0CC (applied via inline style, slightly different from Tailwind primary)\nTailwind primary: #DEDBC8 (used for utility classes like text-primary, text-primary/70)\nGray text: text-gray-400, text-gray-500\nNavbar link color: rgba(225, 224, 204, 0.8) with hover: #E1E0CC\nCUSTOM CSS UTILITIES (index.css)\n\nTwo SVG noise texture utilities:\n\n.noise-overlay: fractal noise (baseFrequency: 0.85, numOctaves: 3) used as overlay on hero video\n.bg-noise: fractal noise (baseFrequency: 0.9, numOctaves: 4) used as subtle background in Features section\nBoth use inline SVG data URIs with feTurbulence filter.\n\nSECTION 1: HERO\n\nFull viewport height (h-screen). The entire section has p-4 md:p-6 padding creating an inset effect. Inside is a container with rounded-2xl md:rounded-[2rem] and overflow-hidden.\n\nBackground video:\n\nURL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_170732_8a9ccda6-5cff-4628-b164-059c500a2b41.mp4\nautoPlay loop muted playsInline, object-cover, fills entire container\nNoise overlay on top: .noise-overlay with opacity-[0.7] mix-blend-overlay pointer-events-none\nGradient overlay: bg-gradient-to-b from-black/30 via-transparent to-black/60\nNavbar:\n\nAbsolutely positioned at top center\nBlack background pill that hangs from top edge: bg-black rounded-b-2xl md:rounded-b-3xl px-4 py-2 md:px-8\n5 nav items: \"Our story\", \"Collective\", \"Workshops\", \"Programs\", \"Inquiries\"\nText size: text-[10px] sm:text-xs md:text-sm\nGap between items: gap-3 sm:gap-6 md:gap-12 lg:gap-14\nLink color: rgba(225, 224, 204, 0.8), hover: #E1E0CC (inline styles)\nHero Content (bottom-aligned):\n\nAbsolutely positioned at bottom: absolute bottom-0 left-0 right-0\n12-column grid: left 8 columns for heading, right 4 columns for text + button\nGiant heading \"Prisma\" using WordsPullUp component:\nResponsive sizes: text-[26vw] sm:text-[24vw] md:text-[22vw] lg:text-[20vw] xl:text-[19vw] 2xl:text-[20vw]\nfont-medium leading-[0.85] tracking-[-0.07em]\nColor: #E1E0CC\nHas a superscript asterisk (*) on the final \"a\" of \"Prisma\": positioned with absolute top-[0.65em] -right-[0.3em] text-[0.31em]\nPull-up animation: each word slides up from y:20 with staggered delay of 0.08s, triggered by useInView\nDescription paragraph (right column):\n\"Prisma is a worldwide network of visual artists, filmmakers and storytellers bound not by place, status or labels but by passion and hunger to unlock potential through our unique perspectives.\"\ntext-primary/70 text-xs sm:text-sm md:text-base, line-height: 1.2\nFramer motion: fade up from y:20, delay 0.5s, custom ease [0.16, 1, 0.3, 1]\nCTA Button \"Join the lab\":\nPill shape: bg-primary rounded-full\nBlack text, font-medium, text-sm sm:text-base\nRight side has a black circle (bg-black rounded-full w-9 h-9 sm:w-10 sm:h-10) containing a white/cream ArrowRight icon\nHover: gap increases (hover:gap-3), circle scales up (group-hover:scale-110)\nFramer motion: fade up from y:20, delay 0.7s, same custom ease\nSECTION 2: ABOUT\n\nbg-black, padded section with centered content\nInner card: bg-[#101010], centered text, max-w-6xl\nTop: small label \"Visual arts\" in text-primary, text-[10px] sm:text-xs\nMain heading uses WordsPullUpMultiStyle component with 3 segments:\n\"I am Marcus Chen,\" -- font-normal (Almarai)\n\"a self-taught director.\" -- italic font-serif (Instrument Serif italic)\n\"I have skills in color grading, visual effects, and narrative design.\" -- font-normal\nContainer: text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl max-w-3xl mx-auto leading-[0.95] sm:leading-[0.9]\nEach word animates in with pull-up effect (y:20 to y:0), staggered at 0.08s delay\nBody paragraph below with scroll-linked character opacity animation:\nText: \"Over the last seven years, I have worked with Parallax, a Berlin-based production house that crafts cinema, series, and Noir Studio in Paris. Together, we have created work that has earned international acclaim at several major festivals.\"\ntext-[#DEDBC8], text-xs sm:text-sm md:text-base\nEach character is individually wrapped in an AnimatedLetter component\nUses useScroll with target offset ['start 0.8', 'end 0.2']\nEach character's opacity transitions from 0.2 to 1 based on scroll position, creating a progressive text reveal effect\nCharacter staggering: charProgress = index / totalChars, range [charProgress - 0.1, charProgress + 0.05]\nSECTION 3: FEATURES\n\nmin-h-screen bg-black, with subtle .bg-noise overlay at opacity-[0.15]\nHeader text uses WordsPullUpMultiStyle:\nLine 1: \"Studio-grade workflows for visionary creators.\" in cream\nLine 2: \"Built for pure vision. Powered by art.\" in text-gray-500\nBoth: text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal\n4-column card grid (lg:h-[480px], gap-3 sm:gap-2 md:gap-1):\n\nEach card has staggered entrance animation: scale from 0.95 + fade in, triggered by useInView (once, margin \"-100px\"), staggered at 0.15s intervals with ease [0.22, 1, 0.36, 1].\n\nCard 1 - Video card: Full video background (URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_133058_0504132a-0cf3-4450-a370-8ea3b05c95d4.mp4), autoPlay loop muted playsInline, object-cover. Bottom text: \"Your creative canvas.\" in #E1E0CC.\n\nCard 2 - \"Project Storyboard.\" (01): bg-[#212121], small image icon at top (https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171918_4a5edc79-d78f-4637-ac8b-53c43c220606.png&w=1280&q=85, 10x10 sm:12x12 rounded), title with number, 4 checklist items with green Check icons, \"Learn more\" link with rotated arrow (-45deg).\n\nCard 3 - \"Smart Critiques.\" (02): Same layout as Card 2. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171741_ed9845ab-f5b2-4018-8ce7-07cc01823522.png&w=1280&q=85. 3 checklist items about AI analysis, creative notes, tool integrations.\n\nCard 4 - \"Immersion Capsule.\" (03): Same layout. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171809_f56666dc-c099-4778-ad82-9ad4f209567b.png&w=1280&q=85. 3 checklist items about notification silencing, ambient soundscapes, schedule syncing.\n\nAll feature card checklist items use Check icon from lucide-react in text-primary color, with text-gray-400 description text. \"Learn more\" buttons use ArrowRight rotated -45deg.\n\nSHARED ANIMATION COMPONENTS\n\nWordsPullUp: Splits text by spaces, each word is a motion.span that slides up (y:20 to 0) with staggered delay. Uses useInView (once: true). Supports showAsterisk prop that adds a superscript * after the last character \"a\" of the final word.\n\nWordsPullUpMultiStyle: Takes an array of {text, className} segments, splits all into individual words preserving per-word className. Same pull-up animation. Words are wrapped in inline-flex flex-wrap justify-center.\n\nRESPONSIVE BREAKPOINTS\n\nThe page is fully responsive across mobile, tablet, and desktop. Cards in Features switch from 1-col (mobile) to 2-col (md) to 4-col (lg). Hero text scales from 26vw down to 19vw. Navbar items compress with smaller gaps on mobile. All padding, font sizes, and spacing use Tailwind responsive prefixes (sm/md/lg/xl/2xl).\n\nTECH STACK\n\nVite + React 18 + TypeScript\nTailwind CSS 3\nframer-motion (for all animations: pull-up text, fade-in, scroll-linked opacity, card entrances)\nlucide-react (ArrowRight, Check icons)","url":"/prompts/prisma-landing"}},{"id":"interactive-discovery","object":"prompt","title":"Interactive Discovery","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260721_114031_72704ebf-b8c6-4568-99e5-240183a9dcce.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(7).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen, dark-themed hero section for a geology brand called **Lithos**, using **React 18 + TypeScript + Vite + Tailwind CSS** and **lucide-react** for icons. The signature feature is a **cursor-following spotlight that reveals a second image** through a soft circular mask on top of a base image. Match every detail below exactly.\n\n### Fonts\nAdd this to the top of `src/index.css`, then `@tailwind base/components/utilities`:\n```css\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500;1,600&display=swap');\n* { font-family: 'Inter', sans-serif; }\n.font-playfair { font-family: 'Playfair Display', serif; }\n```\n- Body/UI font: **Inter**.\n- Display/wordmark accent: **Playfair Display, italic**.\n\n### Asset URLs (use these exactly)\n- Base image (`BG_IMAGE_1`):\n  `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_195923_b0ba8ace-1d1d-4f2c-9a28-1ab84b330680.png&w=1280&q=85`\n- Reveal image (`BG_IMAGE_2`):\n  `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260609_201152_bba90a12-bf12-459f-91f0-51f237dbaf3b.png&w=1280&q=85`\n\n### Layout & structure\nRoot wrapper: `min-h-screen bg-white tracking-[-0.02em]`, inline `fontFamily: \"'Inter', sans-serif\"`.\n\n**Section** (`<section>`): `relative w-full overflow-hidden h-screen bg-black`, inline `style={{ height: '100dvh' }}`. Layers, by z-index:\n1. **Base image** (`z-10`): `absolute inset-0 bg-center bg-cover bg-no-repeat`, background = `BG_IMAGE_1`.\n2. **Reveal layer** (`z-30`): a `RevealLayer` component (see below) showing `BG_IMAGE_2`.\n3. **Heading** (`z-50`): `absolute top-[14%] left-0 right-0 flex flex-col items-center text-center px-5 pointer-events-none`. An `<h1>` with `text-white leading-[0.95]` containing two block spans:\n   - Line 1: `block font-playfair italic font-normal text-5xl sm:text-7xl md:text-8xl`, inline `letterSpacing: '-0.05em'`, text **\"Layers hold\"**.\n   - Line 2: `block font-normal text-5xl sm:text-7xl md:text-8xl -mt-1`, inline `letterSpacing: '-0.08em'`, text **\"tales of time\"**.\n4. **Bottom-left paragraph** (`z-50`): `hidden sm:block absolute bottom-14 left-10 md:left-14 max-w-[260px]`. `<p className=\"text-sm text-white/80 leading-relaxed\">` — \"Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us.\"\n5. **Bottom-right block** (`z-50`): `absolute bottom-10 sm:bottom-24 left-5 right-5 sm:left-auto sm:right-10 md:right-14 max-w-full sm:max-w-[260px] flex flex-col items-start gap-4 sm:gap-5`. Contains a `<p className=\"text-xs sm:text-sm text-white/80 leading-relaxed\">` — \"Our interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet.\" — and a **Start Digging** button: `bg-[#e8702a] hover:bg-[#d2611f] text-white text-sm font-medium px-7 py-3 rounded-full transition-all hover:scale-[1.03] active:scale-95 hover:shadow-lg hover:shadow-[#e8702a]/30`.\n\n### The cursor spotlight reveal (core mechanic)\nIn the parent, define `const SPOTLIGHT_R = 260;` and track the mouse with smoothing:\n- Refs: `mouse` (raw), `smooth` (eased), `rafRef`; state `cursorPos` (init `{x:-999,y:-999}`).\n- `mousemove` listener stores raw `e.clientX/clientY`.\n- A `requestAnimationFrame` loop lerps: `smooth.x += (mouse.x - smooth.x) * 0.1` (same for y), then `setCursorPos`. Clean up listener + cancel RAF on unmount.\n\n`RevealLayer({ image, cursorX, cursorY })`:\n- Holds a hidden `<canvas>` (`absolute inset-0 pointer-events-none`, `style={{display:'none'}}`) sized to `window.innerWidth/Height` on mount + resize.\n- A reveal `<div>` (`absolute inset-0 bg-center bg-cover bg-no-repeat z-30 pointer-events-none`) with the reveal image as background.\n- On every render: clear canvas, build a **radial gradient** at `(cursorX, cursorY)` from radius 0 → `SPOTLIGHT_R` with stops:\n  `0 → rgba(255,255,255,1)`, `0.4 → 1`, `0.6 → 0.75`, `0.75 → 0.4`, `0.88 → 0.12`, `1 → 0`.\n  Fill an arc of radius `SPOTLIGHT_R` with it. Then `canvas.toDataURL()` and apply it as `maskImage`/`webkitMaskImage` on the reveal div with `maskSize: '100% 100%'`. This makes the second image visible only inside the soft glowing circle that trails the cursor.\n\n### Navigation (fixed, over hero)\n`<nav className=\"fixed top-0 left-0 right-0 z-[100] flex items-center justify-between p-4 sm:p-5\">`:\n- **Left**: an inline SVG logo (26×26, viewBox `0 0 256 256`, `fill=\"#ffffff\"`, path `M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z`) + wordmark `<span className=\"text-white text-2xl font-playfair italic\">Lithos</span>`.\n- **Center pill** (`hidden md:flex absolute left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md border border-white/30 rounded-full px-2 py-2 items-center gap-1`): buttons **Course** (active: full white text), then **Field Guides, Geology, Plans, Live Tour** (`text-white/80 ... hover:bg-white/20 hover:text-white transition-colors`, `px-4 py-1.5 rounded-full text-sm font-medium`).\n- **Right (desktop)**: `hidden md:block bg-white text-gray-900 text-sm font-semibold px-6 py-2.5 rounded-full hover:bg-gray-100` — **Sign Up**.\n\n### Animations (premium, on load)\nAdd to `index.css`:\n```css\n@keyframes heroReveal { 0%{opacity:0;transform:translateY(28px);filter:blur(12px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} }\n@keyframes heroFadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} }\n@keyframes heroZoom { 0%{transform:scale(1.12)} 100%{transform:scale(1)} }\n.hero-anim { opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.16,1,0.3,1); }\n.hero-reveal { animation-name:heroReveal; animation-duration:1.1s; }\n.hero-fade { animation-name:heroFadeUp; animation-duration:1s; }\n.hero-zoom { animation:heroZoom 1.8s cubic-bezier(0.16,1,0.3,1) forwards; }\n@media (prefers-reduced-motion: reduce){ .hero-anim,.hero-zoom{ animation:none; opacity:1; } }\n```\nApply:\n- Base image div → add `hero-zoom` (slow Ken Burns zoom-out).\n- Heading line 1 → `hero-anim hero-reveal`, inline `animationDelay: '0.25s'`; line 2 → same with `'0.42s'` (blur-rise, staggered).\n- Bottom-left paragraph wrapper → `hero-anim hero-fade`, `animationDelay: '0.7s'`.\n- Bottom-right wrapper → `hero-anim hero-fade`, `animationDelay: '0.85s'`.\n\n### Responsiveness\n- Heading scales `text-5xl` → `sm:text-7xl` → `md:text-8xl`.\n- Center nav pill and desktop Sign Up are `hidden` below `md`; the mobile hamburger is `md:hidden`.\n- Bottom-left paragraph is `hidden sm:block`; bottom-right block is full-width on mobile (`left-5 right-5`) and right-anchored from `sm`.\n- Use `100dvh` so mobile browser chrome doesn't clip the section.","url":"/prompts/interactive-discovery"}},{"id":"3d-jack-portfolio-hero","object":"prompt","title":"3D Jack Portfolio","summary":"A preview-led portfolio prompt for generating a polished AI-built interface.","category":"Portfolio","subcategory":"Portfolios & agencies","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_020402_14047c8b-e116-4ac5-bc7d-1ab18d18a358.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/uploaded/jackportofplio.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a 3D Creator portfolio landing page for \"Jack\" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title is \"Jack -- 3D Creator\".\n\nGLOBAL STYLES\nBackground: #0C0C0C on html, body, #root, and the main wrapper\nFont family: 'Kanit', sans-serif\nGlobal reset: box-sizing border-box, margin 0, padding 0\nCSS class .hero-heading: gradient text using background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%) with -webkit-background-clip: text and -webkit-text-fill-color: transparent\nMain wrapper has overflowX: 'clip'\nSECTION ORDER\nHeroSection\nMarqueeSection\nAboutSection\nServicesSection\nProjectsSection\n1. HERO SECTION\nFull viewport height (h-screen), flex column layout with overflowX: clip.\n\nNavbar: Horizontal nav bar with 4 links -- \"About\", \"Price\", \"Projects\", \"Contact\" -- evenly spaced with justify-between. Text color #D7E2EA, font-medium, uppercase, tracking-wider. Sizes: text-sm md:text-lg lg:text-[1.4rem]. Padding: px-6 md:px-10 pt-6 md:pt-8. Hover: opacity 70% with 200ms transition.\n\nHero Heading: Massive h1 with text \"Hi, i'm jack\" (lowercase \"i\", curly apostrophe via &apos;). Uses the .hero-heading gradient text class. Font-black, uppercase, tracking-tight, leading-none, whitespace-nowrap, w-full. Font sizes: text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw]. Margin top: mt-6 sm:mt-4 md:-mt-5. Wrapped in overflow-hidden container.\n\nBottom bar: Flexbox justify-between items-end with pb-7 sm:pb-8 md:pb-10:\n\nLeft: paragraph text \"a 3d creator driven by crafting striking and unforgettable projects\", color #D7E2EA, font-light, uppercase, tracking-wide, leading-snug. Font size: clamp(0.75rem, 1.4vw, 1.5rem). Max-width: max-w-[160px] sm:max-w-[220px] md:max-w-[260px].\nRight: ContactButton component (see below)\nHero Portrait: Centered absolutely. Uses a Magnet component (mouse-following magnetic effect) wrapping an image. Image URL: https://shrug-person-78902957.figma.site/_components/v2/d24c01ad3a56fc65e942a1f501eb73db42d7cf9a/Rectangle_40443.81459862.png. Magnet settings: padding 150, strength 3, activeTransition \"transform 0.3s ease-out\", inactiveTransition \"transform 0.6s ease-in-out\". Positioning: absolute left-1/2 -translate-x-1/2 z-10. Width: w-[280px] sm:w-[360px] md:w-[440px] lg:w-[520px]. On mobile: top-1/2 -translate-y-1/2. On sm+: sm:top-auto sm:translate-y-0 sm:bottom-0.\n\nFadeIn animations: Navbar fades in with delay 0, y -20. Heading: delay 0.15, y 40. Left text: delay 0.35, y 20. Contact button: delay 0.5, y 20. Portrait: delay 0.6, y 30.\n\n2. MARQUEE SECTION\nTwo rows of images that scroll horizontally based on page scroll position. Background #0C0C0C. Padding: pt-24 sm:pt-32 md:pt-40 pb-10.\n\n21 GIF images from motionsites.ai (exact URLs):\n\n\nhttps://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif\nhttps://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif\nhttps://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif\nhttps://motionsites.ai/assets/hero-stellar-ai-v2-preview-DjvxjG3C.gif\nhttps://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif\nhttps://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif\nhttps://motionsites.ai/assets/hero-vitara-preview-Cjz2QYyU.gif\nhttps://motionsites.ai/assets/hero-terra-preview-BFjrCr7T.gif\nhttps://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif\nhttps://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif\nhttps://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif\nhttps://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif\nhttps://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif\nhttps://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif\nhttps://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif\nhttps://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif\nhttps://motionsites.ai/assets/hero-planet-orbit-preview-DWAP8Z1P.gif\nhttps://motionsites.ai/assets/hero-new-era-preview-CocuDUm9.gif\nhttps://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif\nhttps://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif\nhttps://motionsites.ai/assets/hero-celestia-preview-0yO3jXO8.gif\nRow 1: first 11 images, tripled for seamless scrolling. Moves RIGHT on scroll (translateX(offset - 200)).\nRow 2: remaining 10 images, tripled. Moves LEFT on scroll (translateX(-(offset - 200))).\nScroll offset calculated as: (window.scrollY - sectionTop + window.innerHeight) * 0.3\nEach image tile: 420px x 270px, rounded-2xl, object-cover, lazy loaded.\nGap between tiles: gap-3. Gap between rows: gap-3.\nUses willChange: 'transform' for performance. Scroll listener is passive.\n3. ABOUT SECTION\nFull-height centered section with min-h-screen, padding px-5 sm:px-8 md:px-10 py-20.\n\nFour decorative 3D images positioned absolutely in corners:\n\nTop-left: Moon icon -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png -- w-[120px] sm:w-[160px] md:w-[210px], positioned top-[4%] left-[1%] sm:left-[2%] md:left-[4%]. FadeIn: delay 0.1, x -80, y 0, duration 0.9.\nBottom-left: 3D object -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png -- w-[100px] sm:w-[140px] md:w-[180px], positioned bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]. FadeIn: delay 0.25, x -80, y 0, duration 0.9.\nTop-right: Lego icon -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png -- w-[120px] sm:w-[160px] md:w-[210px], positioned top-[4%] right-[1%] sm:right-[2%] md:right-[4%]. FadeIn: delay 0.15, x 80, y 0, duration 0.9.\nBottom-right: 3D group -- https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png -- w-[130px] sm:w-[170px] md:w-[220px], positioned bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]. FadeIn: delay 0.3, x 80, y 0, duration 0.9.\nHeading: \"About me\" using .hero-heading gradient text, font-black, uppercase, leading-none, tracking-tight, centered. Font size: clamp(3rem, 12vw, 160px). FadeIn: delay 0, y 40.\n\nAnimated paragraph: Uses a character-by-character scroll-driven opacity animation. Text: \"With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!\" -- color #D7E2EA, font-medium, centered, leading-relaxed, max-w-[560px], font size clamp(1rem, 2vw, 1.35rem). Each character animates from opacity 0.2 to 1 based on scroll progress, with scroll offset ['start 0.8', 'end 0.2'].\n\nContact button below the text block. Gap between heading/text: gap-10 sm:gap-14 md:gap-16. Gap between text block and button: gap-16 sm:gap-20 md:gap-24.\n\n4. SERVICES SECTION\nWhite background (#FFFFFF), with rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px] top corners. Padding: px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32.\n\nHeading: \"Services\" in #0C0C0C, font-black, uppercase, centered, font size clamp(3rem, 12vw, 160px). Margin bottom: mb-16 sm:mb-20 md:mb-28.\n\n5 service items in a vertical list, max-w-5xl, centered:\n\n01 - 3D Modeling: \"Creation of detailed objects, characters, or environments tailored to specific client needs, ideal for games, products, and visualizations.\"\n02 - Rendering: \"High-quality, photorealistic renders that showcase designs with custom lighting, textures, and materials to bring concepts to life.\"\n03 - Motion Design: \"Dynamic animations and motion graphics that add energy and storytelling to brands, products, and digital experiences.\"\n04 - Branding: \"Crafting cohesive visual identities -- from logos to full brand systems -- that communicate a clear and memorable presence.\"\n05 - Web Design: \"Designing clean, modern, and conversion-focused websites with attention to layout, typography, and user experience.\"\nEach item: horizontal layout with number (font-black, font size clamp(3rem, 10vw, 140px), color #0C0C0C) on the left and name + description stacked vertically on the right. Name: font-medium, uppercase, font size clamp(1rem, 2.2vw, 2.1rem). Description: font-light, leading-relaxed, max-w-2xl, font size clamp(0.85rem, 1.6vw, 1.25rem), opacity 0.6. Items separated by 1px borders (rgba(12, 12, 12, 0.15)). Padding: py-8 sm:py-10 md:py-12. Staggered FadeIn: each item delays by i * 0.1.\n\n5. PROJECTS SECTION\nDark background (#0C0C0C), rounded top corners rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px], pulled up with -mt-10 sm:-mt-12 md:-mt-14, z-10.\n\nHeading: \"Project\" (singular) using .hero-heading gradient, same styling as other headings.\n\n3 sticky-stacking project cards that scale down as you scroll past them (card stacking effect using Framer Motion useScroll and useTransform). Each card is sticky top-24 md:top-32 inside an h-[85vh] container.\n\nScale calculation: targetScale = 1 - (totalCards - 1 - index) * 0.03. Each card offset by top: ${index * 28}px.\n\nEach card has: rounded-[40px] sm:rounded-[50px] md:rounded-[60px], border-2 border-[#D7E2EA], background #0C0C0C, padding p-4 sm:p-6 md:p-8.\n\nCard layout:\n\nTop row: Number (huge, same style as services), category label, project name, and a \"Live Project\" ghost button (rounded-full, border-2 #D7E2EA, uppercase, tracking-widest).\nBottom row: Two-column image grid -- left column (40% width) has 2 stacked images, right column (60%) has 1 tall image. All images have heavy border radius rounded-[40px] sm:rounded-[50px] md:rounded-[60px]. Left top image height: clamp(130px, 16vw, 230px). Left bottom image height: clamp(160px, 22vw, 340px).\nProject data with CloudFront image URLs:\n\nProject 01 - \"Nextlevel Studio\" (Client):\n\nCol1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85\nCol1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85\nCol2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85\nProject 02 - \"Aura Brand Identity\" (Personal):\n\nCol1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85\nCol1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85\nCol2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85\nProject 03 - \"Solaris Digital\" (Client):\n\nCol1 image 1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85\nCol1 image 2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85\nCol2 image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85\nREUSABLE COMPONENTS\nContactButton: Rounded-full pill button with gradient background linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%), inner box-shadow 0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset, white 2px outline with -3px offset. Text: white, font-medium, uppercase, tracking-widest. Sizes: px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4, text text-xs sm:text-sm md:text-base. Label: \"Contact Me\".\n\nLiveProjectButton: Ghost/outline pill button. Rounded-full, border-2 border-[#D7E2EA], text color #D7E2EA, font-medium, uppercase, tracking-widest. Sizes: px-8 py-3 sm:px-10 sm:py-3.5, text text-sm sm:text-base. Hover: bg-[#D7E2EA]/10. Label: \"Live Project\".\n\nFadeIn: Framer Motion wrapper using whileInView with viewport={{ once: true, margin: \"50px\", amount: 0 }}. Accepts delay, duration (default 0.7), x (default 0), y (default 30). Easing: [0.25, 0.1, 0.25, 1]. Uses motion.create() for dynamic element types.\n\nMagnet: Mouse-following magnetic hover effect. Tracks mouse position relative to element center, applies translate3d transform divided by strength factor. Activates when cursor is within padding distance of element edge. Smooth transition in (0.3s ease-out) and out (0.6s ease-in-out). Uses willChange: 'transform'.\n\nAnimatedText: Character-by-character scroll-reveal text animation. Each character goes from opacity 0.2 to 1 based on its position in the text relative to scroll progress. Uses Framer Motion useScroll targeting the paragraph element with offset ['start 0.8', 'end 0.2']. Each character uses invisible placeholder + absolute positioned animated span.\n\nKEY DEPENDENCIES\nreact, react-dom (^18.3.1)\nframer-motion (^12.38.0)\nlucide-react (^0.344.0)\ntailwindcss (^3.4.1)\nvite, typescript\nRESPONSIVE BREAKPOINTS\nAll sections use Tailwind's default breakpoints (sm: 640px, md: 768px, lg: 1024px) with mobile-first approach. Heavy use of clamp() for fluid typography. The entire design scales gracefully from mobile to ultra-wide screens.","url":"/prompts/3d-jack-portfolio-hero"}},{"id":"velorah-hero","object":"prompt","title":"Velorah","summary":"A preview-led agency prompt for generating a polished AI-built interface.","category":"Agency","subcategory":"Portfolios & agencies","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-velorah-poster-mLkXfzr9.png","video_url":"https://motionsites.ai/assets/hero-velorah-preview-CJNTtbpd.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single-page hero section with a fullscreen looping background video, glassmorphic navigation, and cinematic typography. Use React + Vite + Tailwind CSS + TypeScript with shadcn/ui.\n\nVideo Background:\n\nFullscreen <video> element with autoPlay, loop, muted, playsInline\nSource URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4\nPositioned absolute inset-0 w-full h-full object-cover z-0\n\nFonts:\n\nImport from Google Fonts: Instrumental Serif (display) and Inter weights 400/500 (body)\nCSS variables: --font-display: 'Instrument Serif', serif and --font-body: 'Inter', sans-serif\nBody uses var(--font-body), headings use inline fontFamily: \"'Instrument Serif', serif\"\n\nColor Theme (dark, HSL values for CSS variables):\n\n--background: 201 100% 13% (deep navy blue)\n--foreground: 0 0% 100% (white)\n--muted-foreground: 240 4% 66% (muted gray)\n--primary: 0 0% 100%, --primary-foreground: 0 0% 4%\n--secondary: 0 0% 10%, --muted: 0 0% 10%, --accent: 0 0% 10%\n--border: 0 0% 18%, --input: 0 0% 18%\n\nNavigation Bar:\n\nrelative z-10, flex row, justify-between, px-8 py-6, max-w-7xl mx-auto\nLogo: \"Velorah®\" (® as <sup className=\"text-xs\">), text-3xl tracking-tight, Instrument Serif font, text-foreground\nNav links (hidden on mobile, md:flex): Home (active, text-foreground), Studio, About, Journal, Reach Us — all text-sm text-muted-foreground with hover:text-foreground transition-colors\nCTA button: \"Begin Journey\", liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground, hover:scale-[1.03]\n\nHero Section:\n\nrelative z-10, flex column, centered, text-center, px-6 pt-32 pb-40 py-[90px]\nH1: \"Where dreams rise through the silence.\" — text-5xl sm:text-7xl md:text-8xl, leading-[0.95], tracking-[-2.46px], max-w-7xl, font-normal, Instrument Serif. The words \"dreams\" and \"through the silence.\" wrapped in <em className=\"not-italic text-muted-foreground\"> for color contrast\nSubtext: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed — \"We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work.\"\nCTA button: \"Begin Journey\", liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12, hover:scale-[1.03] cursor-pointer\n\nLiquid Glass Effect (CSS class .liquid-glass):\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\nAnimations (CSS keyframes + classes):\n\n@keyframes fade-rise {\n  from { opacity: 0; transform: translateY(24px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }\n.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }\n.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }\n\nH1 gets animate-fade-rise\nSubtext gets animate-fade-rise-delay\nHero CTA button gets animate-fade-rise-delay-2\n\nLayout: No decorative blobs, radial gradients, or overlays. Minimalist, cinematic, vertically centered hero. The video provides all visual depth.","url":"/prompts/velorah-hero"}},{"id":"aetheris-voyage-hero","object":"prompt","title":"Aetheris Voyage","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_020834_841011fb-d336-4dcd-bbe6-493a895e4eb4.png&w=1280&q=85","video_url":"https://motionsites.ai/assets/hero-aetheris-voyage-preview-BGJn1z4t.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build Prompt: Cinematic Space-Travel Landing Page\nBuild a single-page landing site with two full-height sections (Hero + Capabilities), both using looping background videos with custom JS crossfade, a shared liquid-glass design system, and Framer Motion entrance animations.\n\nTech stack (pinned, CDN-only)\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script src=\"https://unpkg.com/react@18.3.1/umd/react.development.js\" integrity=\"sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L\" crossorigin=\"anonymous\"></script>\n<script src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js\" integrity=\"sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm\" crossorigin=\"anonymous\"></script>\n<script src=\"https://unpkg.com/@babel/standalone@7.29.0/babel.min.js\" integrity=\"sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y\" crossorigin=\"anonymous\"></script>\n<script src=\"https://unpkg.com/framer-motion@11.11.17/dist/framer-motion.js\"></script>\n<script>window.Motion = window.FramerMotion;</script>\nBody is bg: #000. Page is a React app mounted on #root, all components are <script type=\"text/babel\"> files exporting via window.X = X.\n\nFonts\nGoogle Fonts:\n\nfamily=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600\nTailwind config adds:\n\nfont-heading → 'Instrument Serif', serif (always italic in use)\nfont-body → 'Barlow', sans-serif\nDefault border radius override: DEFAULT: \"9999px\" (so bare rounded → pill).\n\nLiquid-glass utilities (exact CSS, in a <style> block)\nTwo variants — .liquid-glass (subtle, for nav/chips/cards) and .liquid-glass-strong (heavier blur, for primary CTA):\n\n.liquid-glass {\nbackground: rgba(255,255,255,0.01);\nbackground-blend-mode: luminosity;\nbackdrop-filter: blur(4px);\n-webkit-backdrop-filter: blur(4px);\nborder: none;\nbox-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\nposition: relative;\noverflow: hidden;\n}\n.liquid-glass::before {\ncontent: \"\";\nposition: absolute; inset: 0;\nborder-radius: inherit;\npadding: 1.4px;\nbackground: linear-gradient(180deg,\nrgba(255,255,255,0.45) 0%,\nrgba(255,255,255,0.15) 20%,\nrgba(255,255,255,0) 40%,\nrgba(255,255,255,0) 60%,\nrgba(255,255,255,0.15) 80%,\nrgba(255,255,255,0.45) 100%);\n-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n-webkit-mask-composite: xor;\nmask-composite: exclude;\npointer-events: none;\n}\n.liquid-glass-strong { /* same but: */\nbackdrop-filter: blur(50px);\nbox-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);\n}\n.liquid-glass-strong::before { /* same but 0.5 / 0.2 / 0 / 0 / 0.2 / 0.5 stops */ }\nFadingVideo component (custom JS crossfade, no CSS transitions)\nWraps a <video autoPlay muted playsInline preload=\"auto\"> starting at opacity: 0. Behavior:\n\nFADE_MS = 500, FADE_OUT_LEAD = 0.55 seconds.\nfadeTo(target, duration) uses requestAnimationFrame; reads current opacity from http://video.style.opacity so each new fade resumes from wherever the last one left off. Each call calls cancelAnimationFrame on the previous rAF id before starting.\nOn loadeddata: set opacity 0, play(), fadeTo(1).\nOn timeupdate: if fadingOutRef not set and duration - currentTime <= 0.55 and > 0, flip the ref and fadeTo(0).\nOn ended: set opacity 0; after setTimeout(100ms) reset currentTime = 0, play(), clear fadingOutRef, fadeTo(1).\nloop attribute is OFF (we implement looping manually via ended).\nCleanup on unmount: cancel rAF, remove listeners.\nSection 1 — Hero (full viewport, black bg)\nBackground video (120% width/height, top-aligned, centered horizontally — focal point is the top of frame):\n\nsrc: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4\nclass: absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0\nstyle: { width: \"120%\", height: \"120%\" }\nNo overlay. z-10 layer holds: Navbar → Hero content (flex-1, centered) → Partners.\n\nNavbar (fixed top-4, px-8 / lg:px-16, z-50)\nLeft: 48×48 liquid-glass circle with italic serif lowercase \"a\" (Instrument Serif).\nCenter (desktop only): liquid-glass pill, px-1.5 py-1.5, holding 5 text links — Home, Voyages, Worlds, Innovation, Plan Launch — each px-3 py-2 text-sm font-medium text-white/90 font-body. Followed by a white pill button Claim a Spot + ArrowUpRight icon (bg-white text-black, whitespace-nowrap).\nRight: 48×48 invisible spacer to balance logo.\nHero content (centered, pt-24 px-4)\nAll animated with Framer Motion, initial: {filter: blur(10px), opacity: 0, y: 20}, easeOut.\n\nBadge (delay 0.4s): liquid-glass rounded-full pill. Contains white pill chip \"New\" (bg-white text-black px-3 py-1 text-xs font-semibold) + text \"Maiden Crewed Voyage to Mars Arrives 2026\" (text-sm text-white/90, pr-3).\nHeadline — BlurText component (word-by-word animation, see below). Text: \"Venture Past Our Sky Across the Universe\". Classes: text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] max-w-2xl justify-center tracking-[-4px].\nSubheading (delay 0.8s, mt-4 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight): \"Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary.\"\nCTAs (delay 1.1s, flex items-center gap-6 mt-6):\nPrimary: liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-white with \"Start Your Voyage\" + ArrowUpRight (h-5 w-5).\nSecondary: bare text link, \"View Liftoff\" + Play icon (h-4 w-4, filled).\nStats row (delay 1.3s, flex items-stretch gap-4 mt-8): two liquid-glass cards, p-5 w-[220px] rounded-[1.25rem], each:\nTop: white 28×28 outline SVG icon (clock for card 1, globe for card 2).\nBottom: large number in Instrument Serif italic white (text-4xl tracking-[-1px] leading-none): \"34.5 Min\" / \"2.8B+\". Label below (text-xs text-white font-body font-light mt-2): \"Average Videos Watch Time\" / \"Users Across the Globe\".\nPartners (bottom of hero, delay 1.4s)\nflex flex-col items-center gap-4 pb-8:\n\nliquid-glass rounded-full chip (px-3.5 py-1 text-xs font-medium text-white): \"Collaborating with top aerospace pioneers globally\".\nRow of 5 names in Instrument Serif italic white, text-2xl md:text-3xl tracking-tight, gap-12/md:gap-16: Aeon · Vela · Apex · Orbit · Zeno.\nBlurText component (word-by-word blur-in)\nIntersectionObserver triggers on 10% visibility. Splits text by spaces. Each word is a motion.span with:\n\ninitial: {filter: 'blur(10px)', opacity: 0, y: 50}\n3-step keyframes to {filter: 'blur(5px)', opacity: 0.5, y: -5} → {filter: 'blur(0px)', opacity: 1, y: 0}\nduration: 0.7 (stepDuration 0.35 × 2), times: [0, 0.5, 1], ease: easeOut\nStagger: delay = (i * 100) / 1000 seconds\ndisplay: inline-block, marginRight: 0.28em (not non-breaking-space — letter-spacing -4px eats nbsp).\nParent <p> is display: flex; flexWrap: wrap; justifyContent: center; rowGap: 0.1em.\nSection 2 — Capabilities (min-h-screen, black bg)\nBackground video (full-bleed, no 120% scale):\n\nsrc: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4\nclass: absolute inset-0 w-full h-full object-cover z-0\nSame FadingVideo treatment. No overlay.\n\nContent (relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen):\n\nHeader (mb-auto):\n\nKicker: text-sm font-body text-white/80 mb-6 → // Capabilities\nHeading: font-heading italic text-white text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]:\nProduction\nevolved\n(two lines, <br/> between).\nThree cards (grid grid-cols-1 md:grid-cols-3 gap-6 mt-16): each is liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col.\n\nTop row of each card (flex items-start justify-between gap-4):\n\nLeft: 44×44 nested liquid-glass square (rounded-[0.75rem]) with a white Material Icons SVG (fill currentColor, h-6 w-6 text-white). Use random Material icons — these three used:\nAI Scenery: image icon — path M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21H5Zm1-4h12l-3.75-5-3 4L9 13l-3 4Z\nBatch Production: movie icon — path M4 6.47 5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.89-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4Z\nSmart Lighting: lightbulb icon — path M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Z\nRight: flex flex-wrap justify-end gap-1.5 max-w-[70%] — 4 small liquid-glass pill tags (rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap):\nCard 1: Natural Context · Photo Realism · Infinite Settings · Eco-Vibe\nCard 2: Scale Fast · Visual Consistency · Time Saver · Ready to Post\nCard 3: Ray Tracing · Physical Shadows · Studio Quality · Sunlight Sync\nMiddle: flex-1 spacer.\n\nBottom of each card (mt-6):\n\nTitle h3: font-heading italic text-white text-3xl md:text-4xl tracking-[-1px] leading-none — \"AI Scenery\" / \"Batch Production\" / \"Smart Lighting\"\nBody p (mt-3 text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]):\n\"AI analyzes your product to create indistinguishable natural environments — from Icelandic cliffs to misty forests.\"\n\"Style your entire product line in minutes. Create a unified visual identity for catalogues and social media without weeks of retouching.\"\n\"Automatic lighting and material adjustment. Achieve flawless integration with realistic shadows and sunlight.\"\nIcons (inline lucide-style SVGs, currentColor stroke)\nArrowUpRight: 24×24, M7 17L17 7 + M7 7h10v10, strokeWidth 2, round caps.\nPlay: 24×24 filled polygon 6 4 20 12 6 20 6 4.\nNotes\nAll text white; no green, no gradient backgrounds.\nNo CSS transitions on the videos — fades must be rAF-driven per the FadingVideo spec.\nVideos are full-bleed with no dark overlay; contrast comes from the liquid-glass chrome.\nFramer Motion dev warnings about list keys can be suppressed with a console.error filter wrapper — they're benign.\nThe detailed prompt above captures every element, style, animation, video URL, and font to recreate the landing page exactly.","url":"/prompts/aetheris-voyage-hero"}},{"id":"vex-ventures-hero","object":"prompt","title":"VEX Ventures","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-vex-ventures-poster-WLKoWe6y.png","video_url":"https://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Recreate this hero section exactly. Here are the complete specifications:\n\nVideo Background:\n\nFull-screen background video, absolutely positioned, covering the entire viewport (object-cover)\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4\nAutoplay, loop, muted, playsInline\nNO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever.\nTypography (CRITICAL - must be applied globally):\n\nImport the Google Font Inter via a <link> tag in index.html:\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\nSet the body font-family in CSS to: 'Inter', sans-serif\nApply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body\nAlso extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically\nNavbar:\n\nWrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding\nThe navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between\nLeft: Logo text \"VEX\" - text-2xl font-semibold tracking-tight\nCenter (hidden on mobile, visible md+): Links \"Story\", \"Investing\", \"Building\", \"Advisory\" - text-sm, gap-8, hover transitions to gray-300\nRight: \"Start a Chat\" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100\nHero Content (Bottom of viewport):\n\nContainer: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16\nOn large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end)\nLeft Column - Main content:\n\nHeading: \"Shaping tomorrow\\nwith vision and action.\" (literal line break between \"tomorrow\" and \"with\")\n\nResponsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl\nfont-normal, mb-4\nInline style: letterSpacing: '-0.04em'\nCharacter-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms.\nSpaces render as \\u00A0 (non-breaking space)\nSubheading: \"We back visionaries and craft ventures that define what comes next.\"\n\ntext-base md:text-lg text-gray-300 mb-5\nFade-in animation: starts at 800ms delay, 1000ms duration\nButtons row: flex-wrap with gap-4\n\n\"Start a Chat\" - bg-white text-black px-8 py-3 rounded-lg font-medium\n\"Explore Now\" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text\nFade-in animation: starts at 1200ms delay, 1000ms duration\nRight Column - Tag:\n\nAligned to bottom-right on large screens (flex items-end justify-start lg:justify-end)\nGlass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl\nText: \"Investing. Building. Advisory.\" - text-lg md:text-xl lg:text-2xl font-light\nFade-in animation: starts at 1400ms delay, 1000ms duration\nLiquid Glass CSS (place in global CSS):\n\n\n.liquid-glass {\n  background: rgba(0, 0, 0, 0.4);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\nFadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class.\n\nAnimatedHeading component: Splits text by \\n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay.\n\nColor scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo.\n\nStack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).","url":"/prompts/vex-ventures-hero"}},{"id":"skyelite-hero","object":"prompt","title":"SkyElite Private Jets","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-skyelite-poster-GHD3VPq4.png","video_url":"https://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a premium private jet landing page hero section with the following specifications:\n\nVideo Background:\nUse this exact CloudFront video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4\nVideo should autoplay, be muted, loop continuously, and include playsInline attribute\nVideo covers entire viewport (100vh) using object-cover\n\nNavigation Bar:\nBrand name \"SkyElite\" on the left (text-2xl, font-semibold, text-gray-900)\nDesktop menu items (hidden on mobile, visible md:flex): Start, Story, Rates, Benefits, FAQ\nNavigation links in gray-900 with hover:text-gray-700 transition\nMobile hamburger menu button using Lucide React icons (Menu/X)\nMobile menu appears as dropdown with white/95 opacity background, backdrop blur, rounded corners, shadow\nMax width 7xl, centered with px-8 py-6\n\nHero Content (centered, -mt-80 to pull up):\nSmall uppercase label: \"PRIVATE JETS\" (text-sm, font-semibold, gray-600, tracking-wider, mb-4)\nLarge two-line heading with overlapping effect:\nLine 1: \"Premium.\" (text-6xl md:text-7xl lg:text-8xl, font-normal, text-gray-500, leading-none, tracking-tighter)\nLine 2: \"Accessible.\" (same size, color: #202A36, negative margin-top: -12px for overlap)\nSubtitle: \"Your dedication deserves recognition.\" (text-lg md:text-xl, gray-600, mb-6, max-w-2xl)\nTwo call-to-action buttons (gap-4, centered):\n\"Discover\" button: px-4 py-2, rounded-full, bg-gray-300, text-gray-800, font-medium, hover:bg-gray-400\n\"Book Now\" button: px-4 py-2, rounded-full, white text, bg-color #202A36, hover color #1a2229 with smooth transitions\n\nTypography:\nUse Inter font (import from Google Fonts: 400, 500, 600, 700 weights)\nApply to entire body via CSS\n\nTechnical Setup:\nReact with TypeScript\nTailwind CSS for styling\nLucide React for icons\nuseState hook for mobile menu toggle\nFull screen height container (h-screen)\nResponsive breakpoints: mobile-first, md, lg\nAll transitions use transition-colors class\n\nLayout Structure:\nOuter container: min-h-screen, bg-gray-50\nHero section: relative, h-screen, overflow-hidden\nContent wrapper: relative, h-full, flex flex-col\nMain content area: flex-1, flex items-center justify-center\n\nMake it clean, modern, and premium-looking with smooth interactions.","url":"/prompts/skyelite-hero"}},{"id":"modern-agency","object":"prompt","title":"Modern Agency","summary":"A preview-led agency prompt for generating a polished AI-built interface.","category":"Agency","subcategory":"Portfolios & agencies","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(27).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a React + Vite + Tailwind CSS landing page for \"Axion Studio\" - a design agency site. Use the `shaders` package (npm: `shaders`) for the hero background, `lucide-react` for icons. The page has 3 sections. Match every detail exactly:\n\n---\n\n## SECTION 1: HERO (Full viewport height)\n\n**Background:** Light gray `#EFEFEF` with a full-screen animated shader overlay (positioned absolute, inset-0, z-10, pointer-events-none). The shader stack uses components from `shaders/react`:\n- `Swirl` - colorA: `#ffffff`, colorB: `#f0f0f0`, detail: 1.7\n- `ChromaFlow` - baseColor: `#ffffff`, downColor/leftColor/rightColor/upColor: `#ff5f03`, momentum: 13, radius: 3.5\n- `FlutedGlass` - aberration: 0.61, angle: 31, frequency: 8, highlight: 0.12, highlightSoftness: 0, lightAngle: -90, refraction: 4, shape: \"rounded\", softness: 1, speed: 0.15\n- `FilmGrain` - strength: 0.05\n\n**Navigation (z-20, relative):** A pill-shaped white navbar (`bg-white rounded-full`) with 5px padding, inside a max-w-[1440px] container with p-2 sm:p-3.\n\n- LEFT: Dark circle logo (w-9 h-9 sm:w-10 sm:h-10, bg-gray-900, rounded-full) with white text \"AX\" (10px/11px, font-bold, tracking-tight). Next to it (hidden on mobile, shown md+): nav links \"Projects\", \"Studio\", \"Journal\", \"Connect\" - 14px, text-gray-900, hover:text-gray-500, transition-colors duration-300, gap-6.\n\n- RIGHT (hidden on mobile, shown md+): \n  - Text \"Taking on projects for Q1 2026\" (13px, text-gray-600, hidden below lg)\n  - Clock icon (lucide, size 14) + live London time \"{HH:MM} in London\" (13px, text-gray-600)\n  - CTA button: bg-gray-900, text-white, 13px font-medium, rounded-full, pl-5 pr-2 py-2. Text \"Book a strategy call\" with a HOVER TEXT ROLL animation: the text is duplicated inside a flex-col container with overflow-hidden h-[20px], on group-hover it translates -50% vertically (duration-500, ease cubic-bezier(0.25,0.1,0.25,1)). Arrow icon in a white circle (w-6 h-6) that rotates -45deg on hover (same easing).\n\n- MOBILE: A \"Menu\"/\"Close\" toggle button (md:hidden), bg-gray-900, rounded-full, with Menu/X icons from lucide-react.\n\n**Mobile Menu Overlay:** Fixed inset-0, z-50. Black/60 backdrop. A white bottom sheet (rounded-2xl, mx-3 mb-3) that slides up (translate-y-full to translate-y-0, duration-500, ease cubic-bezier(0.32,0.72,0,1)). Contains: time badge, nav links (28px/32px font-medium), and a \"Start a project\" button with arrow.\n\n**Hero Content (z-20):** Positioned at the bottom of the viewport using flexbox (flex-1 spacer above). Max-w-[1440px], px-5 sm:px-8 lg:px-12, pb-14 sm:pb-16 lg:pb-20.\n\n- Small label: \"Axion Studio\" (13px/14px, text-gray-900, tracking-wide, mb-5 sm:mb-8)\n- Headline h1: \"We craft digital experiences / for brands ready to dominate / their category online.\" - clamp(1.75rem,7vw,4.2rem) on mobile, clamp(2.5rem,5vw,4.2rem) on sm+. font-medium, leading-[1.08], tracking-[-0.03em], text-gray-900. Line breaks hidden on mobile (uses `<br className=\"hidden sm:block\" />` with `<span className=\"sm:hidden\"> </span>` fallback spaces).\n- CTA row (mt-8 sm:mt-12, flex-col sm:flex-row, gap-4 sm:gap-5):\n  - Orange button: bg-[#F26522], hover:bg-[#e05a1a], text-white, 13px/14px, rounded-full, pl-5 sm:pl-6 pr-2 py-2. Same text-roll hover animation for \"Start a project\". White circle (w-7 h-7 sm:w-8 sm:h-8) with orange ArrowRight that rotates -45deg on hover.\n  - Partner badge: White pill with subtle shadow (0_2px_8px_rgba(0,0,0,0.08)), hover shadow (0_4px_16px_rgba(0,0,0,0.12)), rounded-[4px]. Contains an inline SVG icon (the starburst/compass shape below, w-5 h-5 sm:w-6 sm:h-6, fill-current text-[#E8704E]), text \"Certified Partner\" (13px/14px font-medium), and a dark badge \"Featured\" (10px/11px, bg-gray-900, text-white, px-1.5 sm:px-2 py-0.5, rounded).\n\n**SVG Icon for partner badge:**\n```svg\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path d=\"m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z\"/></svg>\n```\n\n---\n\n## SECTION 2: ABOUT (White background)\n\n`bg-white`, pt-16 sm:pt-20 lg:pt-32, pb-12 sm:pb-16 lg:pb-24, overflow-hidden. Max-w-[1440px] container.\n\n**Badge row:** px-5 sm:px-8 lg:px-12, flex items-center gap-3, mb-6 sm:mb-8.\n- Numbered circle: w-6 h-6 sm:w-7 sm:h-7, rounded-full, bg-gray-900, text-white, 11px/12px font-semibold. Shows \"1\".\n- Pill label: \"Introducing Axion\" - 12px/13px, font-medium, border border-gray-200, rounded-full, px-3 sm:px-4 py-1 sm:py-1.5.\n\n**Heading h2:** \"Strategy-led creatives, delivering / results in digital and beyond.\" - clamp(1.5rem,4vw,3.2rem), font-medium, leading-[1.12], tracking-[-0.02em], text-gray-900, mb-12 sm:mb-16 lg:mb-28.\n\n**Content area (responsive):**\n\n- MOBILE/TABLET (lg:hidden): Stacked - paragraph + button, then images.\n  - Paragraph: \"Through research, creative thinking and iteration we help growing brands realize their digital full potential.\" - 15px/17px, leading-[1.6], font-medium, text-gray-900.\n  - Button: \"About our studio\" - orange (#F26522), same text-roll animation, white arrow circle rotates -45deg.\n  - Two images: flex-col sm:flex-row, gap-4 sm:gap-5. First: sm:w-[45%] aspect-[438/346]. Second: sm:w-[55%] aspect-[900/600]. Both rounded-xl sm:rounded-2xl, object-cover.\n\n- DESKTOP (hidden lg:grid): `grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8`.\n  - Left column (self-end): Small image, aspect-[438/346], rounded-2xl.\n  - Center column (self-start, flex justify-end): Paragraph (16px/18px, leading-[1.65], whitespace-nowrap, with `<br/>` between lines) + orange button.\n  - Right column (self-end): Large image, aspect-[3/2], rounded-2xl.\n\n**Image URLs:**\n- Small image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`\n- Large image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`\n\n---\n\n## SECTION 3: CASE STUDIES (Light gray background)\n\n`bg-[#F5F5F5]`, pt-16 sm:pt-20 lg:pt-28, pb-16 sm:pb-20 lg:pb-28. Max-w-[1440px] container.\n\n**Badge row:** Same pattern as Section 2, but number is \"2\", label is \"Featured client work\", border-gray-300.\n\n**Heading h2:** \"Our projects\" - same clamp sizing as hero headline (clamp(1.75rem,7vw,4.2rem) / clamp(2.5rem,5vw,4.2rem)), font-medium, leading-[1.08], tracking-[-0.03em], mb-10 sm:mb-14 lg:mb-16.\n\n**Cards Grid:** `grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7`, px-5 sm:px-8 lg:px-12.\n\n**Card 1 (Narrativ):**\n- Video container: aspect-[329/246], rounded-2xl, overflow-hidden, bg-[#1a1d2e], group, cursor-pointer.\n- Video: `src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4\"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover.\n- Hover button (absolute bottom-4 left-4): A white circle (h-9 w-9) that expands to w-[148px] on group-hover (transition-all duration-300 ease-in-out). Contains \"Learn more\" text (13px, font-medium, opacity-0 to opacity-100 on hover with delay-100) and a link/chain SVG icon (14x14, -rotate-45 to rotate-0 on hover). The SVG is the lucide \"link\" icon drawn manually with two arc paths.\n- Description: \"Winner of Site of the Month 2025 - an interactive 3D showcase driving record engagement\" - 13px/14px, text-gray-600, mt-4, leading-relaxed.\n- Title: \"Narrativ\" - 14px/15px, font-semibold, text-gray-900, mt-1.\n\n**Card 2 (Luminar):**\n- Video container: aspect-square, rounded-2xl, overflow-hidden, bg-[#6b6b6b], group, cursor-pointer.\n- Video: `src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4\"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover.\n- Hover button (absolute bottom-4 left-4): A DARK circle (bg-gray-900, h-9 w-9) that expands to w-[168px] on group-hover. Contains \"View case study\" text (13px, font-medium, text-white) and a white ArrowRight icon (size 14) that transitions from -rotate-45 to rotate-0 on hover.\n- Description: \"Transforming a dated platform into a conversion-focused brand experience\" - 13px/14px, text-gray-600, mt-4, leading-relaxed.\n- Title: \"Luminar\" - 14px/15px, font-semibold, text-gray-900, mt-1.\n\n---\n\n## GLOBAL STYLES (index.css):\n\nStandard Tailwind directives plus two utility classes (not actively used in current layout but defined):\n- `.liquid-glass`: rgba(255,255,255,0.01) bg, backdrop-filter blur(4px), inset box-shadow, pseudo-element gradient border using mask-composite.\n- `.liquid-glass-strong`: Same but blur(50px), no pseudo-element.\n\n---\n\n## TECHNICAL DETAILS:\n- **Framework:** React 18 + TypeScript + Vite\n- **Styling:** Tailwind CSS 3.4 (default config, no custom theme extensions)\n- **Packages:** `shaders` (for Shader, ChromaFlow, FilmGrain, FlutedGlass, Swirl from `shaders/react`), `lucide-react` (ArrowRight, Clock, Menu, X)\n- **Font:** System default (no custom font loaded)\n- **All animations use:** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]` unless noted otherwise\n- **Max content width:** 1440px, centered with mx-auto\n- **Responsive breakpoints:** Default Tailwind (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)\n- **Live clock:** Updates every second, shows London timezone in HH:MM format","url":"/prompts/modern-agency"}},{"id":"aethera-hero","object":"prompt","title":"Aethera Studio","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-aethera-poster-DB6AdF0M.png","video_url":"https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Prompt: Cinematic Hero Section with Looping Video Background\n\nCreate a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript with the following specifications:\n\nFonts:\nDisplay text (headings, logo): Instrument Serif\nBody text (navigation, descriptions): Inter\nImport both fonts in /src/styles/fonts.css\n\nVideo Background:\nURL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4\nPosition: top: '300px' with inset: 'auto 0 0 0'\nImplement custom fade-in/fade-out loop logic using React useEffect and useRef:\nUse requestAnimationFrame to continuously monitor currentTime and duration\nFade in over 0.5s at the start (opacity 0 to 1)\nFade out over 0.5s before the end (opacity 1 to 0)\nOn ended event: set opacity to 0, wait 100ms, reset currentTime = 0, then play() again\nThis creates a seamless manual loop with smooth fade transitions\nAdd gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background positioned over the video\n\nNavigation Bar:\nLogo: \"Aethera®\" (with registered trademark symbol as superscript)\nLogo styling: text-3xl, tracking-tight, Instrument Serif, color #000000\nMenu items: Home (color #000000), Studio, About, Journal, Reach Us (all others #6F6F6F)\nMenu items: text-sm with transition-colors\nCTA button: \"Begin Journey\", rounded-full, px-6 py-2.5, text-sm, black background (#000000), white text, hover scale 1.03\nLayout: flex justify-between, px-8 py-6, max-w-7xl mx-auto\n\nHero Section:\nPositioning: paddingTop: 'calc(8rem - 75px)', pb-40\nLayout: centered (flex flex-col items-center justify-center text-center), px-6\nHeadline:\nText: \"Beyond silence, we build the eternal.\"\nStyling: text-5xl sm:text-7xl md:text-8xl, max-w-7xl, font-normal\nFont: Instrument Serif\nLine height: 0.95\nLetter spacing: -2.46px\nColor: #000000 for main text, #6F6F6F for italic emphasized words (\"silence,\" and \"the eternal.\")\nAnimation: animate-fade-rise\n\nDescription:\nText: \"Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows.\"\nStyling: text-base sm:text-lg, max-w-2xl, mt-8, leading-relaxed\nColor: #6F6F6F\nAnimation: animate-fade-rise-delay\n\nHero CTA Button:\nText: \"Begin Journey\"\nStyling: rounded-full, px-14 py-5, text-base, mt-12\nColors: black background (#000000), white text (#FFFFFF)\nHover: scale 1.03\nAnimation: animate-fade-rise-delay-2\n\nColors:\nBackground: white (#FFFFFF)\nHeadlines/logos/buttons: black (#000000)\nDescriptions/menu items: gray (#6F6F6F)\nButton text: white (#FFFFFF)\n\nAnimations (in /src/styles/theme.css):\nfade-rise: opacity 0 to 1, translateY 20px to 0, duration 0.8s, ease-out\nfade-rise-delay: same as fade-rise but with 0.2s delay\nfade-rise-delay-2: same as fade-rise but with 0.4s delay\n\nLayout Structure:\nContainer: relative min-h-screen w-full overflow-hidden\nBackground video layer (z-0)\nGradient overlay on video\nNavigation bar (z-10)\nHero section (z-10)\nAll elements should be responsive and maintain the glassmorphic aesthetic with the specified padding, positioning, and smooth animations.","url":"/prompts/aethera-hero"}},{"id":"asme-hero","object":"prompt","title":"Asme","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_020600_5ede1c43-1f5f-4d94-9292-4f1725bec0fc.png&w=1280&q=85","video_url":"https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page hero section with a full-screen looping background video, liquid glass UI elements, and a dark cinematic aesthetic. Use React, TypeScript, Tailwind CSS, and Lucide React icons. Here are the exact specifications:\n\nBackground Video:\n\nFull-screen muted autoplaying video covering the entire viewport, positioned absolutely with object-cover\nVideo source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4\nThe video is shifted down by 17% (translate-y-[17%]) so the top portion of the video is cropped -- the interesting content is in the lower portion of the frame\nThe video loops seamlessly with a custom JavaScript fade system (no CSS transitions): 500ms requestAnimationFrame-based fade-in on load/loop start, 500ms fade-out when 0.55 seconds remain before the video ends. A fadingOutRef boolean prevents re-triggering the fade-out from repeated timeUpdate events. On ended, opacity is set to 0, then after 100ms the video resets to currentTime = 0, plays, and fades back in. Each new fade cancels any running animation frame to prevent competing animations. Fades resume from the current opacity rather than snapping.\nThe outer container is min-h-screen bg-black with overflow-hidden\n\nFont:\n\nImport Google Font \"Instrument Serif\" (both regular and italic) via CSS @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')\nThe heading uses fontFamily: \"'Instrument Serif', serif\" applied via inline style\n\nLiquid Glass CSS (.liquid-glass class):\n\nbackground: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity\nbackdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px)\nborder: none\nbox-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)\nposition: relative; overflow: hidden\nA ::before pseudo-element creates the glass border effect:\nposition: absolute; inset: 0; border-radius: inherit; padding: 1.4px\nbackground: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)\nMask trick for border-only rendering: -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude\npointer-events: none\n\nLayout (all inside one full-screen flex column):\n\nNavigation bar (relative z-20, padding pl-6 pr-6 py-6):\nInner container: rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto\nLeft side: Logo area with a Globe icon (size 24) and text \"Asme\" in white, font-semibold text-lg, with gap-2\nNext to the logo (with gap-8): three nav links (\"Features\", \"Pricing\", \"About\") -- hidden on mobile, shown on md: -- styled text-white/80 hover:text-white transition-colors text-sm font-medium\nRight side (gap-4): \"Sign Up\" as plain white text button, \"Login\" as a liquid-glass rounded-full px-6 py-2 button\n\nHero content area (relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]):\nHeading: \"Built for the curious\" -- text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap with Instrument Serif font\nBelow the heading, a max-w-xl w-full space-y-4 container:\nEmail input bar: liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3. Inside: a transparent email input (placeholder: \"Enter your email\", text-white placeholder:text-white/40 text-base) and a white circular submit button (bg-white rounded-full p-3 text-black) containing an ArrowRight icon (size 20)\nSubtitle text: text-white text-sm leading-relaxed px-4 -- \"Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.\"\nManifesto button: centered, liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors\n\nSocial icons footer (relative z-10 flex justify-center gap-4 pb-12):\nThree circular icon buttons, each liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all\nIcons: Instagram, Twitter, Globe (all size 20) from lucide-react\nEach has an aria-label\n\nTech stack: Vite + React 18 + TypeScript, Tailwind CSS 3, lucide-react for all icons. Default Tailwind config with no extensions. No other UI libraries.","url":"/prompts/asme-hero"}},{"id":"innovation-landing","object":"prompt","title":"Innovation","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-innovation-poster-B0t6ym_m.png","video_url":"https://motionsites.ai/assets/hero-innovation-preview-BerBJHh1.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"RECREATION PROMPT\n\nBuild a single-page landing site using React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react. The entire page has a bg-black background. The font loaded via Google Fonts is Instrument Serif (italic and regular). Import it in index.css:\n\n\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');\nLIQUID GLASS CSS (in index.css, inside @layer components)\nCreate a reusable .liquid-glass class used on every glass element:\n\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0.45) 0%,\n    rgba(255, 255, 255, 0.15) 20%,\n    rgba(255, 255, 255, 0) 40%,\n    rgba(255, 255, 255, 0) 60%,\n    rgba(255, 255, 255, 0.15) 80%,\n    rgba(255, 255, 255, 0.45) 100%\n  );\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\nSECTION 1 -- HERO (full-viewport, in Index.tsx)\nFull-screen (min-h-screen) container with overflow-hidden relative flex flex-col.\n\nBackground video: absolute, covers the entire viewport (absolute inset-0 w-full h-full object-cover object-bottom). URL:\n\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a.mp4\nAttributes: muted, autoPlay, playsInline, preload=\"auto\". Starts at opacity: 0.\n\nVideo fade logic (vanilla JS via refs, no CSS transitions):\n\nOn canplay: play the video, then animate opacity from 0 to 1 over 500ms using requestAnimationFrame.\nOn timeupdate: when remaining time <= 0.55s, animate opacity from current to 0 over 500ms.\nOn ended: set opacity to 0, wait 100ms, reset currentTime to 0, play again, fade back to 1 over 500ms.\nThis creates a seamless loop with smooth crossfade to black between plays.\nNavbar (relative z-20, px-6 py-6):\n\nA liquid-glass rounded-full pill, max-w-5xl mx-auto, px-6 py-3, flex between left/right.\nLeft: Globe icon (24px, white) + \"Asme\" text (white, font-semibold, text-lg). Hidden on mobile: nav links \"Features\", \"Pricing\", \"About\" (text-white/80 hover:text-white text-sm font-medium, gap-8 ml-8).\nRight: \"Sign Up\" text button (white, text-sm, font-medium) + \"Login\" button (liquid-glass rounded-full px-6 py-2, white text-sm font-medium).\nHero content (relative z-10, flex-1 flex flex-col items-center justify-center, px-6 py-12 text-center, -translate-y-[20%]):\n\nHeading: text-7xl md:text-8xl lg:text-9xl, white, tracking-tight whitespace-nowrap, font-family 'Instrument Serif', serif. Text: Know it then <em className=\"italic\">all</em>.\nEmail input: max-w-xl w-full. A liquid-glass rounded-full pill with pl-6 pr-2 py-2 flex items-center gap-3. Inside: transparent <input> with placeholder \"Enter your email\" (text-white placeholder:text-white/40). A white circular submit button (bg-white rounded-full p-3 text-black) containing ArrowRight icon (20px).\nSubtitle: text-white text-sm leading-relaxed px-4. Text: \"Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.\"\nManifesto button: liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors.\nSocial icons footer (relative z-10, flex justify-center gap-4 pb-12):\n\nThree liquid-glass rounded-full p-4 buttons for Instagram, Twitter, Globe icons (20px). text-white/80 hover:text-white hover:bg-white/5 transition-all.\nSECTION 2 -- ABOUT SECTION (separate component AboutSection.tsx)\nUses framer-motion useInView (ref, { once: true, margin: \"-100px\" }).\nbg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden.\nSubtle radial gradient overlay: bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)].\nLabel: \"About Us\" -- text-white/40 text-sm tracking-widest uppercase. Animates: opacity: 0, y: 20 -> opacity: 1, y: 0, duration 0.6.\nHeading: text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight. Animates: opacity: 0, y: 40 -> opacity: 1, y: 0, duration 0.8, delay 0.1. Text structure:\nPioneering then ideas (Instrument Serif italic, text-white/60) for\nLine break (hidden on mobile)\nminds that then create, build, and inspire. (all Instrument Serif italic, text-white/60)\nSECTION 3 -- FEATURED VIDEO (separate component FeaturedVideoSection.tsx)\nbg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden. Max-w-6xl.\nA rounded-3xl overflow-hidden aspect-video container that animates opacity: 0, y: 60 -> opacity: 1, y: 0, duration 0.9.\nVideo: w-full h-full object-cover, muted, autoPlay, loop, playsInline, preload=\"auto\". URL:\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8.mp4\nGradient overlay on video: bg-gradient-to-t from-black/60 via-transparent to-transparent.\nBottom overlay content (absolute bottom-0 left-0 right-0 p-6 md:p-10):\nFlex row on desktop, column on mobile.\nLeft: a liquid-glass rounded-2xl p-6 md:p-8 max-w-md card. Label \"Our Approach\" (text-white/50 text-xs tracking-widest uppercase mb-3). Body text (text-white text-sm md:text-base leading-relaxed): \"We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation.\"\nRight: \"Explore more\" button (liquid-glass rounded-full px-8 py-3, white text-sm font-medium) with whileHover={{ scale: 1.05 }} and whileTap={{ scale: 0.95 }}.\nSECTION 4 -- PHILOSOPHY / INNOVATION x VISION (separate component PhilosophySection.tsx)\nbg-black py-28 md:py-40 px-6 overflow-hidden. Max-w-6xl.\nHeading: text-5xl md:text-7xl lg:text-8xl text-white tracking-tight mb-16 md:mb-24. Animates opacity: 0, y: 40 -> opacity: 1, y: 0, duration 0.8. Text: Innovation then x in Instrument Serif italic text-white/40, then Vision.\nTwo-column grid (grid-cols-1 md:grid-cols-2 gap-8 md:gap-12):\nLeft: Video in rounded-3xl overflow-hidden aspect-[4/3]. Animates from opacity: 0, x: -40. URL:\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4\nmuted, autoPlay, loop, playsInline, preload=\"auto\".\nRight: Animates from opacity: 0, x: 40. Two text blocks separated by a w-full h-px bg-white/10 divider.\nBlock 1: Label \"Choose your space\" (text-white/40 text-xs tracking-widest uppercase mb-4). Body (text-white/70 text-base md:text-lg leading-relaxed): \"Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries.\"\nBlock 2: Label \"Shape the future\". Body: \"We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression.\"\nSECTION 5 -- SERVICES / WHAT WE DO (separate component ServicesSection.tsx)\nbg-black py-28 md:py-40 px-6 overflow-hidden. Max-w-6xl.\nSubtle radial gradient: bg-[radial-gradient(ellipse_at_center,_rgba(255,255,255,0.02)_0%,_transparent_60%)].\nHeader row: flex between \"What we do\" (text-3xl md:text-5xl text-white tracking-tight) and \"Our services\" label (text-white/40 text-sm, hidden on mobile). Animates opacity: 0, y: 30 -> visible, duration 0.7.\nTwo-card grid (grid-cols-1 md:grid-cols-2 gap-6 md:gap-8):\nEach card: liquid-glass rounded-3xl overflow-hidden with group class. Animates opacity: 0, y: 50 -> visible, duration 0.8, staggered by 0.15s.\nCard video area: aspect-video, object-cover, transition-transform duration-700 group-hover:scale-105. Gradient overlay: bg-gradient-to-t from-black/40 to-transparent.\nCard body (p-6 md:p-8): tag label (uppercase, tracking-widest, text-white/40 text-xs), ArrowUpRight icon in a liquid-glass rounded-full p-2 circle, title (text-white text-xl md:text-2xl mb-3 tracking-tight), description (text-white/50 text-sm leading-relaxed).\nCard 1: Video URL:\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4\nTag: \"Strategy\". Title: \"Research & Insight\". Description: \"We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change.\"\nCard 2: Video URL:\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4\nTag: \"Craft\". Title: \"Design & Execution\". Description: \"From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary.\"","url":"/prompts/innovation-landing"}},{"id":"orbis-nft-landing","object":"prompt","title":"Orbis NFT","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-orbis-nft-poster-Bfg-lWHl.png","video_url":"https://motionsites.ai/assets/hero-orbis-nft-preview-C3wvh77a.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create an NFT landing page called \"Orbis.Nft\" with 4 sections, using a dark space theme. The page uses video backgrounds served from CloudFront, a liquid glass UI effect, and a specific color/font system. Recreate it exactly as described below.\n\nFONTS (Google Fonts)\n\nAnton - Used for all headings and navigation text (aliased as font-grotesk in Tailwind)\n\nCondiment - A cursive script used for accent/overlay text (aliased as font-condiment in Tailwind)\n\nSystem monospace font (font-mono) - Used for body/description paragraphs\n\nLoad via Google Fonts in index.html:\n\nhttps://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap\n\n\nCOLOR SYSTEM (Tailwind config)\n\nBackground: #010828 (deep dark navy blue)\n\ncream: #EFF4FF (off-white, used for all text)\n\nneon: #6FFF00 (bright green, used for accent cursive text and underline bars)\n\nLIQUID GLASS CSS EFFECT\n\nApplied via a .liquid-glass class. This is used on the navbar, social icon buttons, NFT cards, and card overlays:\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n\nTEXTURE OVERLAY\n\nA full-screen fixed texture overlay sits on top of everything (z-50, pointer-events-none). It uses a /texture.png image with mix-blend-mode: lighten at opacity: 0.6, covering the entire viewport with background-size: cover.\n\nSECTION 1: HERO (Full viewport)\n\nBackground: Full-bleed looping muted autoplaying video covering the entire section with object-cover\n\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4\n\nContainer: max-w-[1831px] centered with responsive horizontal padding\n\nSection has rounded-b-[32px] bottom corners, clipping the video\n\nHeader:\n\nLeft: \"Orbis.Nft\" logo text in Anton, 16px, uppercase\n\nCenter: Navigation bar with liquid-glass effect, rounded-[28px], px-[52px] py-[24px]. Contains 5 links: Homepage, Gallery, Buy NFT, FAQ, Contact. Each link is Anton 13px uppercase. Links have hover:text-neon transition. Nav is hidden on mobile (hidden lg:block).\n\nHero Content:\n\nLarge heading in Anton font, responsive sizing: 40px mobile / 60px sm / 75px md / 90px lg. Uppercase. leading-[1.05] mobile, leading-[1] tablet+. Max width 780px on desktop, offset with lg:ml-32.\n\nText reads:\n\nBeyond earth\nand ( its ) familiar boundaries\n\n\nOverlaid cursive accent text \"Nft collection\" in Condiment font (24px-48px responsive), positioned absolute to the right side of the heading, slightly rotated (-rotate-1), in neon green (text-neon), with mix-blend-exclusion and opacity-90.\n\nSocial Icons (Desktop):\n\n3 square buttons (56x56px) stacked vertically in top-right corner, each with liquid-glass and rounded-[1rem]. Icons: Mail, Twitter, Github from lucide-react (20x20px). hover:bg-white/10 transition.\n\nSocial Icons (Mobile):\n\nSame 3 buttons but centered horizontally below the heading, shown only below lg breakpoint.\n\nSECTION 2: ABOUT / INTRO (Full viewport)\n\nBackground: Full-bleed looping muted autoplaying video with object-cover\n\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4\n\nContainer: Same max-w-[1831px] centered, with generous vertical padding (64px-96px responsive)\n\nTop Row (flex row on desktop, column on mobile):\n\nLeft: Heading in Anton, responsive 32px-60px, uppercase:\n\nHello!\nI'm orbis\n\n\nWith an overlaid \"Orbis\" in Condiment cursive, neon green, mix-blend-exclusion, 36px-68px responsive, positioned absolute at bottom-right of heading, slightly rotated.\n\nRight: Short paragraph in monospace 14px-16px, uppercase, cream color, max-width 266px: \"A digital object fixed beyond time and place. An exploration of distance, form, and silence in space\"\n\nBottom Row (flex row, space-between):\n\nTwo columns (left and right), each containing 2 identical paragraphs. Same monospace text as above but at opacity-10 (nearly invisible, decorative). Right column hidden below lg. On mobile, text uses text-[#010828] (dark) so it's effectively invisible against the video.\n\nSECTION 3: NFT COLLECTION GRID\n\nBackground: Solid #010828 (no video)\n\nContainer: Same max-w-[1831px] centered\n\nHeader Row:\n\nLeft: Heading in Anton, 32px-60px responsive, uppercase:\n\nCollection of\n  [indented] Space objects\n\n\nWhere \"Space\" is in Condiment cursive neon green, and \"objects\" is in Anton. The second line is indented with ml-12 / ml-24 / ml-32 responsive.\n\nRight: A \"SEE ALL CREATORS\" button. \"SEE\" is large (32px-60px), \"ALL\" and \"CREATORS\" are stacked smaller (20px-36px) next to it. Below the text is a neon green bar (bg-neon, height 6px-10px responsive, full width of button).\n\nNFT Card Grid:\n\n3-column grid on desktop (lg:grid-cols-3), 2 on tablet, 1 on mobile. Gap 24px.\n\nEach card: liquid-glass container with rounded-[32px], padding 18px, hover:bg-white/10 transition.\n\nInside each card: a square video container (pb-[100%] aspect ratio trick) with rounded-[24px] overflow hidden.\n\nVideo URLs:\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 (Score: 8.7/10)\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 (Score: 9/10)\n\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 (Score: 8.2/10)\n\nEach card has an overlay bar at the bottom: a liquid-glass bar with rounded-[20px], px-5 py-4, showing \"RARITY SCORE:\" label (11px, cream/70% opacity) and score value (16px). On the right side of the bar is a circular purple gradient button (48x48px, bg-gradient-to-br from-[#b724ff] to-[#7c3aed]) with a right-arrow chevron SVG inside, with shadow-lg shadow-purple-500/50 and hover:scale-110 transition.\n\nSECTION 4: CTA / FINAL SECTION\n\nBackground: Full-width video (NOT object-cover, instead w-full h-auto block so it displays at native aspect ratio)\n\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4\n\nText Content (positioned absolute over the video):\n\nRight-aligned block, offset with lg:pr-[20%] lg:pl-[15%]\n\nSmall \"Go beyond\" text in Condiment cursive, neon green, mix-blend-exclusion, positioned absolute at top-left of the heading block. Sizes: 17px-68px responsive.\n\nHeading in Anton, responsive 16px-60px, uppercase:\n\nJOIN US.\nREVEAL WHAT'S HIDDEN.\nDEFINE WHAT'S NEXT.\nFOLLOW THE SIGNAL.\n\n\n\"JOIN US.\" has extra bottom margin (mb-4 to mb-12 responsive) before the remaining lines.\n\nSocial Icons (Bottom-left, absolute positioned):\n\nPositioned at left-[8%], bottom-[12%] to bottom-[20%] with responsive breakpoints.\n\nA vertical liquid-glass container with rounded-[0.5rem] to rounded-[1.25rem] responsive, containing 3 stacked icon buttons (Mail, Twitter, Github).\n\nButtons have responsive widths using viewport units and rem values (e.g., w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]) and similar responsive heights.\n\nButtons are separated by border-b border-white/10 dividers (except the last one).\n\nKEY TECHNICAL DETAILS\n\nFramework: React + TypeScript + Vite + Tailwind CSS\n\nIcons: lucide-react (Mail, Twitter, Github)\n\nNo additional packages needed beyond what Vite + React + Tailwind provides\n\nAll videos: autoPlay loop muted playsInline attributes\n\nResponsive: Mobile-first with sm:, md:, lg: breakpoints throughout\n\nMax content width: 1831px across all sections\n\nAll text is uppercase except the Condiment cursive accents which are normal-case","url":"/prompts/orbis-nft-landing"}},{"id":"portfolio-cosmic-hero","object":"prompt","title":"Portfolio Cosmic","summary":"A preview-led portfolio prompt for generating a polished AI-built interface.","category":"Portfolio","subcategory":"Portfolios & agencies","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-portfolio-cosmic-poster-vGZ7GZt-.png","video_url":"https://motionsites.ai/assets/hero-portfolio-cosmic-preview-BpvWJ3Nc.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Prompt to recreate this landing page:\n\nBuild a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js.\n\n---\n\n## Global Design System\n\n### Fonts\nGoogle Fonts import: Inter (300–700) and Instrument Serif (italic, 400).\n- --font-body: 'Inter', sans-serif → Tailwind font-body\n- --font-display: 'Instrument Serif', serif → Tailwind font-display\n\n### CSS Custom Properties (HSL, no hsl() wrapper — Tailwind adds it)\n--bg: 0 0% 4%;\n--surface: 0 0% 8%;\n--text: 0 0% 96%;\n--muted: 0 0% 53%;\n--stroke: 0 0% 12%;\n--accent: 0 0% 96%;\n\n### Tailwind Custom Colors\nbg: \"hsl(var(--bg))\",\nsurface: \"hsl(var(--surface))\",\n\"text-primary\": \"hsl(var(--text))\",\nmuted: \"hsl(var(--muted))\",\nstroke: \"hsl(var(--stroke))\",\n\n### Accent Gradient\nlinear-gradient(90deg, #89AACC 0%, #4E85BF 100%) — used on logo ring, hover borders, progress bars. CSS utility class .accent-gradient.\n\n### Custom Animations (in index.css)\n- @keyframes scroll-down — translateY(-100%) → translateY(200%), 1.5s ease-in-out infinite\n- @keyframes role-fade-in — opacity 0 + translateY(8px) → opacity 1 + translateY(0), 0.4s ease-out\n- @keyframes gradient-shift — background-position 0% 50% → 100% 50% → 0% 50%, 6s ease infinite (for animated gradient borders)\n\n### Forced dark theme — no light mode toggle. body gets bg-bg text-text-primary.\n\n---\n\n## Page Structure (Index.tsx)\n\n{isLoading && <LoadingScreen onComplete={() => setIsLoading(false)} />}\n\n---\n\n## Section 1: Loading Screen\n\nFull-screen overlay (fixed inset-0 z-[9999] bg-bg). Uses requestAnimationFrame counter from 000→100 over 2700ms.\n\n- Top-left: \"Portfolio\" label — text-xs text-muted uppercase tracking-[0.3em]. Animates y:-20→0, opacity 0→1.\n- Center: Rotating words [\"Design\", \"Create\", \"Inspire\"] cycling every 900ms. AnimatePresence mode=\"wait\" with y:20→0→-20 transitions. text-4xl md:text-6xl lg:text-7xl font-display italic text-text-primary/80.\n- Bottom-right: Counter display — text-6xl md:text-8xl lg:text-9xl font-display text-text-primary tabular-nums. Shows String(count).padStart(3, \"0\").\n- Bottom progress bar: h-[3px] bg-stroke/50, inner div with .accent-gradient, scaleX(count/100) transform, box-shadow: 0 0 8px rgba(137, 170, 204, 0.35).\n- On complete (count reaches 100): 400ms delay then calls onComplete.\n\n---\n\n## Section 2: Hero\n\nFull-viewport section with background HLS video and centered content.\n\n### Background Video\n- HLS source: https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8\n- Uses hls.js — if Hls.isSupported(), create HLS instance; else if native HLS support, set video.src directly.\n- Video: autoPlay muted loop playsInline, absolutely positioned and centered with min-w-full min-h-full object-cover -translate-x-1/2 -translate-y-1/2.\n- Dark overlay: bg-black/20\n- Bottom fade: h-48 bg-gradient-to-t from-bg to-transparent\n\n### Navbar (fixed, floats at top center)\nfixed top-0 left-0 right-0 z-50 flex justify-center pt-4 md:pt-6 px-4.\n\nInner pill: inline-flex items-center rounded-full backdrop-blur-md border border-white/10 bg-surface px-2 py-2. Gets shadow-md shadow-black/10 when scrollY > 100.\n\nContents (left to right):\n1. Logo: 9×9 circle with accent gradient border (reverses direction on hover). Inner bg-bg circle with \"JA\" in font-display italic text-[13px]. Scales 110% on hover.\n2. Divider: w-px h-5 bg-stroke mx-1 (hidden on mobile)\n3. Nav links: [\"Home\", \"Work\", \"Resume\"] — text-xs sm:text-sm rounded-full px-3 sm:px-4 py-1.5 sm:py-2. Active: text-text-primary bg-stroke/50. Inactive: text-muted hover:text-text-primary hover:bg-stroke/50.\n4. Divider\n5. \"Say hi\" button: Same size as nav links. On hover, shows accent gradient border behind (using absolute span with inset: -2px). Inner content wrapped in bg-surface rounded-full backdrop-blur-md. Includes \"↗\" arrow.\n\n### Hero Content (centered, z-10)\n- Eyebrow: text-xs text-muted uppercase tracking-[0.3em] mb-8 — \"COLLECTION '26\". Class blur-in.\n- Name: text-6xl md:text-8xl lg:text-9xl font-display italic leading-[0.9] tracking-tight text-text-primary mb-6 — \"Michael Smith\". Class name-reveal.\n- Role line: \"A {role} lives in Chicago.\" — roles cycle every 2s through [\"Creative\", \"Fullstack\", \"Founder\", \"Scholar\"]. Role word uses font-display italic text-text-primary animate-role-fade-in inline-block with key={roleIndex} for re-triggering animation.\n- Description: text-sm md:text-base text-muted max-w-md mb-12 — \"Designing seamless digital interactions by focusing on the unique nuances which bring systems to life.\"\n- CTA Buttons (inline-flex gap-4):\n  - \"See Works\": Solid button. Default: bg-text-primary text-bg. Hover: bg-bg text-text-primary with accent gradient border ring.\n  - \"Reach out...\": Outlined button. Default: border-2 border-stroke bg-bg text-text-primary. Hover: border-transparent with accent gradient border ring.\n  - Both: rounded-full text-sm px-7 py-3.5 hover:scale-105.\n\n### GSAP Entrance\nTimeline with ease: \"power3.out\":\n- .name-reveal: opacity 0→1, y 50→0, duration 1.2s, delay 0.1s\n- .blur-in: opacity 0→1, filter blur(10px)→blur(0px), y 20→0, duration 1s, stagger 0.1, delay 0.3s\n\n### Scroll Indicator\nBottom-center, text-xs text-muted uppercase tracking-[0.2em] \"SCROLL\" label above a w-px h-10 bg-stroke line with animated highlight using .animate-scroll-down.\n\n---\n\n## Section 3: Selected Works\n\nbg-bg py-12 md:py-16. Inner: max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16.\n\n### Header\nFramer Motion whileInView — opacity 0→1, y 30→0, duration 1s, ease [0.25,0.1,0.25,1], viewport once margin \"-100px\".\n- Eyebrow: w-8 h-px bg-stroke + \"Selected Work\" text-xs text-muted uppercase tracking-[0.3em]\n- Heading: \"Featured *projects*\" — italic word in font-display italic\n- Subtext: \"A selection of projects I've worked on, from concept to launch.\"\n- \"View all work\" button (desktop only, hidden md:inline-flex) — rounded-full with gradient hover border ring + right arrow\n\n### Bento Grid\ngrid grid-cols-1 md:grid-cols-12 gap-5 md:gap-6. Column spans alternate: 7/5/5/7.\n\n4 project cards with titles: Automotive Motion, Urban Architecture, Human Perspective, Brand Identity.\n\nEach card: bg-surface border border-stroke rounded-3xl with aspect ratios. Contains:\n- Background image with object-cover group-hover:scale-105\n- Halftone overlay: radial-gradient(circle, #000 1px, transparent 1px) at 4×4px, opacity-20 mix-blend-multiply\n- Hover: bg-bg/70 opacity-0→1 + backdrop-blur-lg\n- Hover label: pill with animated gradient border, white bg, \"View — *Title*\" (title in font-display italic)\n\n---\n\n## Section 4: Journal\n\nbg-bg py-16 md:py-24. Same header pattern (eyebrow + \"Recent *thoughts*\" + subtext + \"View all\" button).\n\n4 journal entries displayed as horizontal pills (rounded-[40px] sm:rounded-full) with titles, images, read times, and dates.\n\nEach entry: flex items-center gap-6 p-4 bg-surface/30 hover:bg-surface border border-stroke.\n\n---\n\n## Section 5: Explorations (Parallax Gallery)\n\nmin-h-[300vh] section for scroll-driven parallax.\n\n### Layer 1: Pinned Center (z-10)\nh-screen div pinned with GSAP ScrollTrigger.create({ pin: contentRef, pinSpacing: false }).\n- Eyebrow: \"Explorations\"\n- Heading: \"Visual *playground*\"\n- Subtext + Dribbble button\n\n### Layer 2: Parallax Columns (z-20, absolute)\ngrid grid-cols-2 gap-12 md:gap-40 inside max-w-[1400px].\n\n6 items split into 2 columns with GSAP scroll-driven parallax movement.\nCards: aspect-square max-w-[320px], with rotation and lightbox on click.\n\n---\n\n## Section 6: Stats\n\nbg-bg py-16 md:py-24. 3-column grid with stats: 20+ Years Experience, 95+ Projects Done, 200% Satisfied Clients.\n\n---\n\n## Section 7: Contact / Footer\n\nbg-bg pt-16 md:pt-20 pb-8 md:pb-12 overflow-hidden.\n\n### Background Video\nSame HLS source as hero, but flipped vertically (scale-y-[-1]). Heavier overlay: bg-black/60.\n\n### GSAP Marquee\n\"BUILDING THE FUTURE • \" repeated 10×. GSAP xPercent: -50, duration 40, ease \"none\", repeat -1.\n\n### CTA\nEmail button: mailto:hello@michaelsmith.com with gradient hover border ring.\n\n### Footer Bar\nSocial links [Twitter, LinkedIn, Dribbble, GitHub] + Green pulsing dot + \"Available for projects\"\n\n---\n\n## Dependencies\ngsap, framer-motion, hls.js, react-router-dom, tailwindcss-animate\n\nAdd smooth scroll nav and page transitions.","url":"/prompts/portfolio-cosmic-hero"}},{"id":"securify-hero","object":"prompt","title":"Securify Data Security","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-securify-poster-CrUPOWDv.png","video_url":"https://motionsites.ai/assets/hero-securify-preview-DQSYrftH.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen hero section for a data-security SaaS landing page called \"securify\" using React + TypeScript + Tailwind CSS, with a looping fullscreen background video, a floating pill-shaped navbar, and large staggered typography.\n\nFonts & Global Styles\n\nLoad Google font \"Readex Pro\" weights 300, 400, 500, 600, 700.\nSet body font-family: 'Readex Pro', system-ui, -apple-system, sans-serif;, background #000, color #fff, antialiased.\nMake html, body, #root height 100%.\nAdd a .hero-title class with letter-spacing: -0.04em; line-height: 0.95;.\nSection container\n\nA <section> with classes: relative h-screen w-full overflow-hidden bg-black.\nBackground video\n\n<video> with className=\"absolute inset-0 w-full h-full object-cover\", autoPlay loop muted playsInline, and src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_063509_7d167302-4fd4-480b-8260-18ab572333d4.mp4\".\nNavbar (absolute, z-20, px-6 md:px-10 pt-6, top-0 left-0 right-0)\n\nA <nav> with flex items-center justify-between gap-4.\nLeft pill: flex items-center gap-2 bg-neutral-900/90 backdrop-blur rounded-full pl-4 pr-6 py-3 containing:\nA custom white SVG logo (viewBox 0 0 256 256, class h-5 w-5) with path: M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z filled #ffffff.\nBrand text \"securify\" (text-white text-sm font-normal tracking-tight).\nCenter pill (hidden on mobile): hidden md:flex items-center gap-1 bg-neutral-900/90 backdrop-blur rounded-full px-3 py-2 with four anchor links: \"platform\", \"solutions\", \"company\", \"support\" — each text-neutral-300 hover:text-white transition-colors text-sm px-5 py-2 rounded-full.\nRight button: \"get started\" — bg-white text-black text-sm font-normal rounded-full px-6 py-3 hover:bg-neutral-200 transition-colors.\nForeground content wrapper: relative h-full w-full (rendered after Navbar, above the video).\n\nThree giant staggered headline words (each an <h1> with class hero-title absolute text-white font-medium text-[14vw] md:text-[13vw]):\n\n\"protect\" — left-4 md:left-10 top-[18%]\n\"your\" — right-4 md:right-10 top-[38%]\n\"data\" — left-[18%] md:left-[28%] top-[58%]\nAll lowercase.\n\nDescription paragraph (absolute, left-6 md:left-10 top-[46%], max-w-[240px] text-[15px] leading-snug text-white/90):\n\n\"we can guarding your data with utmost care, empowering you with privacy everywhere\"\n\nStat block — top-right (absolute right-6 md:right-24 top-[14%]):\n\nRow: flex items-center gap-3 justify-end — a diagonal divider (hidden md:block h-px w-24 bg-white/40 rotate-[20deg]) then number \"+65k\" (text-4xl md:text-5xl font-medium tracking-tight).\nSublabel: \"startups use\" (text-xs md:text-sm text-white/70 mt-1 text-right).\nBottom gradient overlay: pointer-events-none absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-black.\n\nStat block — bottom-left (absolute left-6 md:left-20 bottom-20 md:bottom-24):\n\nRow: number \"+1.5b\" then divider hidden md:block h-px w-24 bg-white/40 rotate-[-20deg].\nSublabel: \"gb data was protected\" (text-xs md:text-sm text-white/70 mt-1).\nStat block — bottom-right (absolute right-6 md:right-20 bottom-16 md:bottom-20):\n\nRow: diagonal divider rotate-[-20deg] then \"+300k\".\nSublabel: \"downloads\" (right-aligned, text-white/70).\nNotes\n\nAll text is lowercase.\nNavbar pills use bg-neutral-900/90 backdrop-blur.\nOnly transitions: hover:text-white on nav links, hover:bg-neutral-200 on the button.\nNo purple/indigo anywhere; palette is pure black, white, neutral-900, and white opacity variants (white/40, white/70, white/90).\nResponsive: mobile hides nav links and diagonal dividers; typography scales via vw units.","url":"/prompts/securify-hero"}},{"id":"portal-hero","object":"prompt","title":"Portal","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-portal-poster-CNSIA4kq.png","video_url":"https://motionsites.ai/assets/hero-portal-preview-DEscBr2T.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"PROMPT:\n\nBuild a full-viewport cinematic movie/streaming hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font from Google Fonts. The entire page is a single full-height hero -- no scrolling, no additional sections.\n\nBACKGROUND VIDEO:\n\nA full-screen background video plays on loop, muted, autoplaying, covering the entire viewport with object-cover. The video is fixed-positioned behind everything at z-index 0.\n\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4\n\nBOTTOM BLUR OVERLAY (no gradient darkening):\n\nOver the video, there is a single fixed, full-screen overlay div that applies a strong backdrop-blur-xl. This div uses a CSS mask so the blur only appears at the bottom and fades to transparent toward the middle of the screen. There is NO dark gradient overlay -- only blur.\n\nThe mask: mask-image: linear-gradient(to top, black 0%, transparent 45%) (with the -webkit- prefix too).\n\nThis overlay is pointer-events-none and sits at z-index 1.\n\nFONT:\n\nImport Inter from Google Fonts (weights 300-700). Set font-family: 'Inter', sans-serif on the body.\n\nLIQUID GLASS EFFECT (used on multiple buttons):\n\nCreate a reusable .liquid-glass CSS class with these exact properties:\n\nbackground: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity\nbackdrop-filter: blur(4px) (with -webkit- prefix)\nborder: none\nbox-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)\nposition: relative; overflow: hidden\nA ::before pseudo-element that creates a thin glowing border effect:\nposition: absolute; inset: 0; border-radius: inherit; padding: 1.4px\nbackground: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)\nUses -webkit-mask with linear-gradient(#fff 0 0) content-box and linear-gradient(#fff 0 0) combined with -webkit-mask-composite: xor and mask-composite: exclude to create a border-only gradient stroke\npointer-events: none\nBLUR-FADE-UP ANIMATION (used on every element with staggered delays):\n\nCreate a @keyframes blurFadeUp animation:\n\nFrom: opacity: 0; filter: blur(20px); transform: translateY(40px)\nTo: opacity: 1; filter: blur(0); transform: translateY(0)\nThe .animate-blur-fade-up class applies this as animation: blurFadeUp 1s ease-out forwards with initial opacity: 0. Each element on the page gets a staggered animationDelay via inline style.\n\nNAVBAR (z-index 50, relative positioned):\n\nA horizontal navbar with justify-between, padding px-4 sm:px-6 md:px-12 py-4 md:py-6.\n\nLeft: A text logo (e.g. your brand name like \"CINEMATIC\" or similar) styled as h-8 md:h-10, with blur-fade-up animation at delay 0ms.\n\nCenter (desktop only, hidden below lg): Navigation links -- \"Movies\", \"TV Series\", \"Editor's Pick\", \"Interviews\", \"User Reviews\" -- each as an anchor with text-sm, hover:text-gray-300 transition-colors, and staggered blur-fade-up delays from 100ms to 300ms (50ms increments).\n\nRight: Two buttons visible on sm and up:\n\nA \"Search\" button -- rounded-full liquid-glass pill with the text \"Search\" and a Lucide Search icon (size 18), padding px-4 md:px-6 py-2, blur-fade-up at 350ms.\nA user/profile circle button -- w-10 h-10 rounded-full liquid-glass with a Lucide User icon (size 18), blur-fade-up at 400ms.\nA hamburger menu button visible only below lg -- w-10 h-10 rounded-full liquid-glass with animated icon transition between Lucide Menu and X icons. The transition uses rotate-180, opacity, and scale-50 with duration-500 ease-out. Blur-fade-up at 350ms.\nMOBILE MENU (below lg breakpoint):\n\nAn absolutely positioned dropdown below the navbar (top-[72px]), z-index 40. It slides in with translate-y-0 opacity-100 when open, -translate-y-4 opacity-0 pointer-events-none when closed, duration-500 ease-out.\n\nBackground: bg-gray-900/95 backdrop-blur-lg with border-t border-b border-gray-800 shadow-2xl.\nContains the same 5 nav links, each in a column with py-3 px-3 rounded-lg, hover:bg-gray-800/50, and staggered slide-in animations (translate-x based, 50ms delay increments).\nBelow sm, also shows Search and Profile buttons in a bordered section at the bottom.\nHERO CONTENT (bottom of viewport):\n\nA flex container that grows to fill remaining space and aligns content to the bottom (flex-1 flex flex-col justify-end), with padding px-4 sm:px-6 md:px-12 pb-8 md:pb-16, z-index 10.\n\nInside, a flex-col md:flex-row items-end gap-8 layout:\n\nLeft side (flex-1):\n\nMetadata row -- a horizontal flex-wrap row with gap-3 sm:gap-6 mb-6 md:mb-8 text-xs sm:text-sm, blur-fade-up at 300ms:\n\nStar icon (size 16, fill-white, responsive to sm:w-5 sm:h-5) + \"8.7/10 IMDB\" (font-medium)\nClock icon (size 16) + \"132 min\"\nCalendar icon (size 16) + \"April, 2025\"\nTitle -- text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-normal, letter-spacing -0.04em, mb-4 md:mb-6, blur-fade-up at 400ms. Text: \"Step Through. Work Smarter.\"\n\nDescription -- text-base sm:text-lg md:text-xl text-gray-400 mb-6 md:mb-12 max-w-2xl, blur-fade-up at 500ms. Text: \"A voyage through forgotten realms, where past and future intertwine.\"\n\nCTA buttons -- flex-wrap row with gap-3 sm:gap-4:\n\n\"Watch Now\" -- bg-white text-black rounded-full font-medium, px-6 sm:px-8 py-2.5 sm:py-3, with a Lucide Play icon (size 18, fill-black), hover:bg-gray-200, blur-fade-up at 600ms.\n\"Learn More\" -- rounded-full font-medium liquid-glass, same padding, blur-fade-up at 700ms.\nRight side (navigation arrows):\n\nA row of two pill buttons (md:w-auto, aligned right on desktop, left on mobile):\n\n\"Previous\" button -- rounded-full liquid-glass, px-4 sm:px-6 py-2.5 sm:py-3, with Lucide ChevronLeft icon, blur-fade-up at 800ms.\n\"Next\" button -- same styling with Lucide ChevronRight icon, blur-fade-up at 900ms.\nCOLOR PALETTE:\n\nBackground: pure black (bg-black)\nText: white, with text-gray-400 for the subtitle\nAll interactive glass elements use the .liquid-glass class (nearly transparent white with blur)\nThe only solid-colored element is the \"Watch Now\" button (white background, black text)\nSTAGGER TIMING SUMMARY:\n\nLogo: 0ms\nNav links: 100ms, 150ms, 200ms, 250ms, 300ms\nSearch button: 350ms\nUser button: 400ms\nMetadata row: 300ms\nTitle: 400ms\nDescription: 500ms\nWatch Now: 600ms\nLearn More: 700ms\nPrevious: 800ms\nNext: 900ms\nRESPONSIVE BREAKPOINTS:\n\nBelow sm (< 640px): Smaller text, tighter padding, Search/User buttons hidden (available in mobile menu)\nBelow lg (< 1024px): Nav links hidden, hamburger menu shown\nmd and up: Side-by-side layout for hero content and navigation arrows\nlg and up: Full desktop navbar with all links visible","url":"/prompts/portal-hero"}},{"id":"max-reed-portfolio","object":"prompt","title":"Max Reed Portfolio","summary":"A preview-led features prompt for generating a polished AI-built interface.","category":"Features","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(6).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-viewport dark personal portfolio Features section using React + TypeScript + Tailwind CSS + lucide-react.\n\n**Layout & Structure:**\n- Full screen dark background `#0a0a0a`, white text, Inter font with antialiased smoothing\n- Top header row: left side has a heading \"Hi, I'm Max Reed!\" (size `text-[28px] sm:text-3xl md:text-4xl lg:text-[44px]`, leading `1.15`, font-normal, tracking-tight) followed by a paragraph \"A London-based independent creator shaping sharp visual systems, web-ready products, and story-first campaigns. With a decade of craft behind me, I help ideas move with focus and intention.\" (text-sm md:text-[15px], leading-[1.6], text-white/60, max-w-3xl). Header container has `max-w-3xl`.\n- Right side of header: a liquid-glass rounded-full button \"Let's Team Up Today\" (px-5 sm:px-6, py-2.5 sm:py-3)\n- Overall section padding: `px-4 sm:px-6 md:px-10 lg:px-14 py-6 sm:py-8 md:py-10`, full screen `lg:h-screen`\n\n**Grid (3 columns on lg, 2 on md, 1 on mobile, gap-4 md:gap-5):**\n\n**Column 1 - Background card (rounded-2xl, bg-black):**\n- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_150203_44a5bd32-516a-47ce-a077-8acbf9aa8991.mp4` (autoPlay loop muted playsInline, absolute inset-0 object-cover)\n- Top: centered \"BACKGROUND\" section label (uppercase, tracking-[0.22em], text-[11px], text-white/70) with Sparkle icons on each side (h-3 w-3, strokeWidth 1.5)\n- Bottom: career timeline as a 4-col grid `[auto_auto_1fr_auto]`:\n  - 2023-Now · Freelance Creative · Solo Studio\n  - 2020-2023 · Head of Brand Design · Rove Studio\n  - 2017-2020 · Visual Stylist · Ember Works\n  - Separator between year and role is a Sparkle icon (h-3 w-3, text-white/60)\n\n**Column 2 (stacked rows, md:grid-rows-[auto_1fr]):**\n\nTop - Client Voice card (rounded-2xl, bg-[#324444], p-5 md:p-6, with noise-overlay):\n- Left-aligned \"CLIENT VOICE\" label with Sparkle icons (justify-start)\n- Quote: \"Max reshaped our image with a degree of finesse and vision that surpassed what we'd hoped for. The process felt graceful, and the outcomes speak for themselves.\" (text-[13px] sm:text-[13.5px], leading-[1.6], text-white/85)\n- Attribution: **Elena Brooks**, Creative Director — Halcyon\n\nBottom - 10M+ card (rounded-2xl, bg-black):\n- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_154543_d5b83fc1-9cea-44f3-b5e8-8f325935211a.mp4`\n- Centered huge text \"10M+\" (text-5xl sm:text-6xl md:text-7xl lg:text-[88px], font-light, tracking-tight, drop-shadow)\n- Bottom caption \"Raised for startups\" (centered, text-white/85)\n\n**Column 3 (stacked):**\n\nTop - Daily Software card (rounded-2xl, bg-black):\n- Background video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_153148_d7a3e1dd-e5d0-4ce6-8306-00d7522ecc44.mp4`\n- Top: \"DAILY SOFTWARE\" section label\n- Bottom: two scrolling marquee rows of liquid-glass icon tiles (h-14 w-14 md:h-16 md:w-16, rounded-xl). Row 1 scrolls left with icons [Figma, Framer, Palette, PenTool, Layers, Type, Aperture, Chrome]. Row 2 scrolls right with icons [Camera, Brush, Box, Wand2, Figma, Framer, Type, Layers]. Each row duplicated for seamless loop. Mask fade on both edges with `[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]`.\n\nBottom - Reach Me card (rounded-2xl, bg-[#324444], p-5 md:p-6, noise-overlay):\n- \"REACH ME\" section label\n- Email: hi@maxreed.com\n- Phone: +44 207 81 63\n- Top-right ArrowUpRight icon button (h-9 w-9 rounded-full)\n\n**Custom CSS in index.css:**\n\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }\n.animate-marquee-left { animation: marquee-left 22s linear infinite; }\n.animate-marquee-right { animation: marquee-right 26s linear infinite; }\n\n.noise-overlay::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0.55;\n  mix-blend-mode: soft-light;\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\");\n  background-size: 240px 240px;\n}\n```\n\nFont: Inter (system fallback). Icons from lucide-react: ArrowUpRight, Sparkle, Figma, Framer, Palette, PenTool, Layers, Type, Aperture, Chrome, Camera, Brush, Box, Wand2. All icons use strokeWidth 1.5.","url":"/prompts/max-reed-portfolio"}},{"id":"mindloop-landing","object":"prompt","title":"Mindloop Landing","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-mindloop-landing-poster-BbPiPxcA.png","video_url":"https://motionsites.ai/assets/hero-mindloop-landing-preview-Bqnstohr.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words). The entire theme is pure black (#000) background with white foreground — no colors or gradients beyond monochrome. Install hls.js and framer-motion.\n\nDesign System (index.css)\nAll CSS variables in HSL (no hsl() wrapper in the variable, just the values):\n\n--background: 0 0% 0%\n--foreground: 0 0% 100%\n--card: 0 0% 5%\n--card-foreground: 0 0% 100%\n--primary: 0 0% 100%\n--primary-foreground: 0 0% 0%\n--secondary: 0 0% 12%\n--secondary-foreground: 0 0% 85%\n--muted: 0 0% 15%\n--muted-foreground: 0 0% 65%\n--accent: 170 15% 45%\n--accent-foreground: 0 0% 100%\n--border: 0 0% 20%\n--input: 0 0% 18%\n--ring: 0 0% 40%\n--hero-subtitle: 210 17% 95%\nLiquid Glass Effect (global CSS class .liquid-glass)\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\nAnimation Pattern\nAll sections use a reusable fadeUp helper with staggered delays:\n\nconst fadeUp = (delay: number) => ({\n  initial: { opacity: 0, y: 20 },\n  whileInView: { opacity: 1, y: 0 },\n  viewport: { once: true, margin: \"-100px\" },\n  transition: { duration: 0.6, delay, ease: \"easeOut\" },\n});\n\nPage Structure (top to bottom)\n1. Navbar (fixed, transparent)\nLeft: Logo (concentric circles icon — outer w-7 h-7 with border-2 border-foreground/60, inner w-3 h-3 with border border-foreground/60) + \"Mindloop\" bold text.\nCenter-left: Nav links [\"Home\", \"How It Works\", \"Philosophy\", \"Use Cases\"] separated by • dots. Links are text-muted-foreground hover:text-foreground.\nRight: 3 social icons (Instagram, Linkedin, Twitter from lucide-react) in liquid-glass circular buttons (w-10 h-10 rounded-full).\nNo background — fully transparent, fixed top-0 z-50, padding px-8 md:px-28 py-4.\n\n2. Hero Section (full viewport height)\nBackground: autoplaying looping muted MP4 video covering the entire section.\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f.mp4\nBottom gradient: h-64 bg-gradient-to-t from-background to-transparent for smooth fade to black.\nContent (centered, z-10, pt-28 md:pt-32):\nAvatar row: 3 overlapping circular avatars (-space-x-2, w-8 h-8 rounded-full border-2 border-background) + \"7,000+ people already subscribed\" in text-muted-foreground text-sm.\nHeading: text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] — \"Get Inspired with Us\" where \"Inspired\" is font-serif italic font-normal.\nSubtitle: text-lg in hsl(var(--hero-subtitle)) color — \"Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction.\"\nEmail form: liquid-glass rounded-full p-2 max-w-lg container with email input and a white bg-foreground text-background rounded-full px-8 py-3 \"SUBSCRIBE\" button with whileHover scale 1.03 and whileTap scale 0.98.\n\n3. \"Search has changed\" Section\nTop padding pt-52 md:pt-64, bottom padding pb-6 md:pb-9.\nHeading: text-5xl md:text-7xl lg:text-8xl — \"Search has changed. Have you?\" with \"changed.\" in serif italic.\nSubtitle: text-muted-foreground text-lg max-w-2xl mx-auto mb-24.\n3 platform cards (grid md:grid-cols-3 gap-12 md:gap-8 mb-20): Each card has a 200x200 icon image centered, platform name (font-semibold text-base), and description (text-muted-foreground text-sm).\nChatGPT icon: local asset icon-chatgpt.png\nPerplexity icon: local asset icon-perplexity.png\nGoogle AI icon: local asset icon-google.png\nBottom tagline: \"If you don't answer the questions, someone else will.\" in text-muted-foreground text-sm text-center.\n\n4. Mission Section\nPadding pt-0 pb-32 md:pb-44.\nVideo: Large 800x800 looping autoplaying muted video centered.\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b.mp4\nScroll-driven word-by-word reveal using useScroll and useTransform from framer-motion:\nParagraph 1 (text-2xl md:text-4xl lg:text-5xl font-medium tracking-[-1px]): \"We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having.\" Words \"curiosity\", \"meets\", \"clarity\" are highlighted in --foreground, rest in --hero-subtitle.\nParagraph 2 (text-xl md:text-2xl lg:text-3xl font-medium mt-10): \"A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved.\"\nEach word transitions opacity from 0.15 to 1 based on scroll progress.\n\n5. Solution Section\nPadding py-32 md:py-44, border-t border-border/30.\nLabel: \"SOLUTION\" in text-xs tracking-[3px] uppercase text-muted-foreground.\nHeading: text-4xl md:text-6xl — \"The platform for meaningful content\" (serif italic on \"meaningful\").\nVideo: Rounded rounded-2xl, aspect-[3/1] object-cover.\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_125119_8e5ae31c-0021-4396-bc08-f7aebeb877a2.mp4\n4-column feature grid (md:grid-cols-4 gap-8): Curated Feed, Writer Tools, Community, Distribution — each with title (font-semibold text-base) and description (text-muted-foreground text-sm).\n\n6. CTA Section\nPadding py-32 md:py-44, border-t border-border/30, overflow-hidden.\nBackground video (HLS via hls.js): absolute inset-0 object-cover z-0.\nHLS URL: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8\nUses Hls.isSupported() check with fallback to native HLS for Safari.\nOverlay: absolute inset-0 bg-background/45 z-[1].\nContent (z-10, centered):\nConcentric circles logo icon (w-10 h-10 outer, w-5 h-5 inner).\nHeading: \"Start Your Journey\" (serif italic).\nSubtitle in text-muted-foreground.\nTwo buttons: \"Subscribe Now\" (bg-foreground text-background rounded-lg px-8 py-3.5) and \"Start Writing\" (liquid-glass rounded-lg).\n\n7. Footer\nSimple py-12 px-8 md:px-28 footer.\nLeft: \"© 2026 Mindloop. All rights reserved.\" in text-muted-foreground text-sm.\nRight: Privacy, Terms, Contact links in text-muted-foreground text-sm hover:text-foreground.\n\nKey Dependencies\nframer-motion for all animations\nhls.js for the CTA background video streaming\n@fontsource/inter (400, 500, 600, 700)\n@fontsource/instrument-serif (400, 400-italic)\nlucide-react for icons\ntailwindcss-animate plugin\n\nAssets Needed\n3 avatar images (avatar-1.png, avatar-2.png, avatar-3.png)\n3 platform icons (icon-chatgpt.png, icon-perplexity.png, icon-google.png)","url":"/prompts/mindloop-landing"}},{"id":"rivr-hero","object":"prompt","title":"RIVR","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-rivr-poster-XRJOK5Jz.png","video_url":"https://motionsites.ai/assets/hero-rivr-preview-DcS3pjx4.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a Hero section for a DeFi dashboard named RIVR showcasing a sleek, glassmorphism aesthetic. Please mimic these exact specifications to ensure a premium UI.\n\nDependencies: \n- Use `lucide-react` for icons.\n- Use `motion` (imported from `'motion/react'`) for animations.\n\n1. Global Styles (`src/index.css`)\nImport the custom 'Helvetica Regular' font, set the Tailwind theme properly, and reset the body. Exact CSS to include:\n@import \"tailwindcss\";\n\n@font-face {\n    font-family: \"Helvetica Regular\";\n    src: url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot\");\n    src: url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n}\n\n@theme {\n  --font-helvetica: \"Helvetica Regular\", ui-sans-serif, system-ui, sans-serif;\n}\n\n:root {\n  font-family: var(--font-helvetica);\n}\n\nbody {\n  margin: 0;\n  overflow-x: hidden;\n  background-color: #f0f0f0;\n}\n\n2. App Structure (`src/App.tsx`)\nCreate a single `<main className=\"min-h-screen bg-[#f0f0f0]\">` instance that returns the `<Hero />` component.\n\n3. Hero Component (`src/components/Hero.tsx`)\nOuter wrapper: `<div className=\"w-full h-screen flex items-center justify-center p-3 md:p-5 bg-[#f0f0f0]\">`.\nInner container: `<section className=\"relative w-full max-w-[1536px] h-full rounded-[1.5rem] md:rounded-[3rem] overflow-hidden shadow-none flex flex-col items-center bg-white/10 group\">`\nInside the `<section>`:\n- The Video Background: \n  A `<video>` element with `autoPlay muted loop playsInline`. \n  Classes: `absolute inset-0 w-full h-full object-cover object-[65%] lg:object-center z-0`. \n  Source URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260428_193507_4286c423-2fd9-4efd-92bd-91a939453fc1.mp4` (Must use exactly this URL).\n- The Content Layer:\n  A `<div className=\"relative z-10 w-full h-full flex flex-col items-center\">`.\n  Inside it, place: `<Navbar />`, the text container, `<BottomLeftCard />`, and `<BottomRightCorner />`.\n- Text Container:\n  `<div className=\"w-full flex flex-col items-center pt-8 px-6 text-center max-w-4xl\">`. Inside it:\n  - `<HeroBadge />`\n  - A `<motion.h1>` with class: `text-4xl sm:text-5xl md:text-6xl lg:text-[80px] font-normal text-[#5E6470] mb-2 tracking-tight leading-[1.05]`. Text: \"Fluid Asset Streams\". Animation: initial={{ opacity: 0, scale: 0.98 }}, animate={{ opacity: 1, scale: 1 }}, transition={{ duration: 0.8, delay: 0.2 }}.\n  - A `<motion.p>` with class: `text-sm sm:text-base md:text-lg text-[#5E6470] opacity-80 leading-relaxed max-w-xl font-normal`. Text: \"Access Smart Vaults, stake RIVR, NFTs, transform rigid holdings into liquid cash instantly.\". Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.4 }}.\n\n4. Navbar Component (`src/components/Navbar.tsx`)\nWrapper: `<nav className=\"flex items-center justify-between py-6 px-6 md:px-10 w-full relative z-10\">`.\n- Left Side (hidden spacer for centering): `<div className=\"flex-1 hidden md:block\" />`\n- Center Menu: `<ul className=\"hidden md:flex items-center gap-8 text-[rgb(45,45,45)] font-normal text-sm\">`. Include items: Ecosystem, Economics (hasDropdown), Developers, Governance (hasDropdown). List items need: `cursor-pointer hover:opacity-70 transition-opacity flex items-center gap-1 group`. Append a `ChevronRight` icon (classes: `w-4 h-4 transition-transform group-hover:translate-x-0.5`) if hasDropdown is true.\n- Mobile Logo: `<div className=\"md:hidden\"><span className=\"font-regular tracking-tighter text-xl text-[rgba(30,50,90,0.9)]\">RIVR</span></div>`\n- Right Button: `<div className=\"flex-1 flex justify-end\">` wrapping a `<motion.button>` (whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}). \n  Button classes: `flex items-center bg-[rgba(30,50,90,0.8)] text-white rounded-full pl-2 pr-4 md:pr-6 py-1.5 md:py-2 gap-2 md:gap-3 hover:bg-[rgba(30,50,90,1)] transition-colors group`. Inside button: Add an icon wrapper `<div className=\"bg-white/20 p-1 md:p-1.5 rounded-full flex items-center justify-center\">` containing `ArrowUpRight` (w-4 h-4 md:w-5 md:h-5 text-white), and a text node \"Book Demo\" (`text-xs md:text-sm font-normal`).\n\n5. HeroBadge Component (`src/components/HeroBadge.tsx`)\nReturns a `<motion.div>` (initial opacity 0, y 20; animate opacity 1, y 0; transition duration 0.6, ease \"easeOut\").\nClasses: `flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-md border border-white/20 mx-auto mb-3 w-fit`.\nContents: `<Sparkles className=\"w-4 h-4 text-[rgba(30,50,90,0.8)]\" />` and text `<span className=\"text-[14px] font-normal text-[rgba(30,50,90,0.9)]\">Fluid Staking</span>`.\n\n6. BottomLeftCard Component (`src/components/BottomLeftCard.tsx`)\nReturns a `<motion.div>` (initial x: -20, opacity: 0; animate x: 0, opacity: 1; transition: duration 0.8, delay 0.2).\nPosition/Styling: `absolute bottom-28 right-4 left-auto md:left-6 md:right-auto md:bottom-6 lg:bottom-10 lg:left-10 p-3 md:p-4 lg:p-5 rounded-[1.2rem] md:rounded-[1.5rem] lg:rounded-[2.2rem] bg-white/30 backdrop-blur-xl flex flex-col gap-2 lg:gap-3 min-w-[140px] md:min-w-[150px] lg:min-w-[180px] w-fit`.\n- Top text block: column with \"5.2K\" (classes: `text-2xl md:text-3xl font-normal text-[rgba(30,50,90,0.9)] tracking-tight`) and \"Active Yielders\" (classes: `text-[10px] md:text-[12px] font-normal text-[rgba(30,50,90,0.6)] uppercase tracking-wider`).\n- Join Discord `<motion.button>` (hover/tap scale 1.02/0.98). Classes: `flex items-center bg-white rounded-full pl-1.5 pr-5 py-1.5 gap-2 hover:bg-white/90 transition-colors self-start group`. Inside: wrap `ArrowUpRight` in `<div className=\"bg-[rgba(30,50,90,0.1)] p-1 rounded-full ...\">` (using `text-[rgba(30,50,90,0.9)]` for icon) and append \"Join Discord\" text (`text-[14px] font-normal text-[rgba(30,50,90,0.9)]`).\n\n7. BottomRightCorner Component (`src/components/BottomRightCorner.tsx`)\nThis requires a complex faux-cutout layout. Use a `<motion.div>` (initial y: 20, opacity: 0; animate y: 0, opacity: 1; duration: 0.8, delay: 0.4).\nClasses: `absolute bottom-0 right-0 p-3 pt-5 pl-8 sm:p-4 sm:pt-6 sm:pl-10 md:p-6 md:pt-8 md:pl-14 bg-[#f0f0f0] rounded-tl-[1.5rem] sm:rounded-tl-[2rem] md:rounded-tl-[3.5rem] flex items-center gap-3 sm:gap-4 md:gap-6`.\nCRITICAL corner masks to include inside this container:\n- Top intersection mask: `<div className=\"absolute -top-[1.5rem] sm:-top-[2rem] md:-top-[3.5rem] right-0 w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none\"><svg width=\"100%\" height=\"100%\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M56 56V0C56 30.9279 30.9279 56 0 56H56Z\" fill=\"#f0f0f0\"/></svg></div>`\n- Left intersection mask: `<div className=\"absolute bottom-0 -left-[1.5rem] sm:-left-[2rem] md:-left-[3.5rem] w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none\"><svg width=\"100%\" height=\"100%\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M56 56H0C30.9279 56 56 30.9279 56 0V56Z\" fill=\"#f0f0f0\"/></svg></div>`\nContent: \n- Circle Icon: A div with `bg-[rgba(30,50,90,0.05)] w-10 h-10 md:w-14 md:h-14 rounded-full flex items-center justify-center border border-[rgba(30,50,90,0.1)]` using `ArrowUpRight` (`text-[rgba(30,50,90,0.8)]`).\n- Info column containing title \"Documentation\" (`text-[16px] md:text-[20px] font-normal text-[rgba(30,50,90,0.95)]`). Below it, a line containing text \"Library\" and a `ChevronRight` icon wrapped in `<div className=\"flex items-center gap-1 text-[rgba(30,50,90,0.6)] cursor-pointer hover:text-[rgba(30,50,90,0.8)] transition-colors\"><span className=\"text-[12px] md:text-[15px] font-normal\">...`","url":"/prompts/rivr-hero"}},{"id":"vortex-studio-hero","object":"prompt","title":"AI Designer Portfolio","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-vortex-studio-poster-lf3IYvUr.png","video_url":"https://motionsites.ai/assets/hero-vortex-studio-preview-BQyvwopD.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single-page landing page for a creative design studio called \"Viktor Oddy\" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. The page has a white background throughout and uses two custom fonts: \"PP Neue Montreal\" (body text, loaded from Webflow CDN) and \"PP Mondwest\" (serif accent font, loaded from a local /PPMondwest-Regular.woff2 file). The body default font is PP Neue Montreal with system fallbacks.\n\nThe page consists of these sections in order:\n\n1. HERO SECTION (centered, narrow column max-w-[440px], px-6, pt-12 md:pt-16)\n\nLogo text: \"Viktor Oddy\" in PP Mondwest serif font, text-[32px] md:text-[40px] lg:text-[44px], font-semibold, color #051A24, tracking-tight, mb-4. Fades in with staggered animation (delay 0.1s).\nTagline: \"The creative studio of Viktor Oddy\" in monospace font (font-mono), text-xs md:text-sm, color #051A24, mb-2. Animation delay 0.2s.\nMain Heading: Two lines: \"Build the next wave,\" and \"the bold way.\" where \"next wave\" and \"bold way.\" are in PP Mondwest serif. Text is text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight, whitespace-nowrap. Animation delay 0.3s.\nDescription: Three paragraphs in a flex-col gap-6 container, text-sm md:text-base, color #051A24, leading-relaxed, mt-5 md:mt-6. Animation delay 0.4s.\nParagraph 1: \"I spent seven years at Apple crafting products used by over a billion people. I founded Vortex Studio to bring that same level of thinking to innovators shaping what comes next.\"\nParagraph 2: \"The studio is deliberately small. I guide the creative vision on every project, backed by a veteran design crew that moves fast without cutting corners.\"\nParagraph 3: \"Projects start at $5,000 per month.\"\nTwo buttons in flex-col sm:flex-row, gap-3 md:gap-4, mt-5 md:mt-6. Animation delay 0.5s:\n\"Start a chat\" (primary: bg-[#051A24], text white, rounded-full, px-7 py-3, with a complex multi-layered box-shadow including an inset highlight)\n\"View projects\" (secondary: bg-white, text #051A24, no border, with subtle shadow)\n2. INFINITE MARQUEE (full width, mt-16 md:mt-20, mb-16)\n\nHorizontally scrolling image strip. Uses 8 GIF images duplicated (total 16) in a flex row with animate-marquee CSS animation (translateX(0) to translateX(-50%), 30s linear infinite on desktop, 10s on mobile). Images are h-[280px] md:h-[500px], object-cover, mx-3, rounded-2xl, shadow-lg.\n\nImage URLs (all from motionsites.ai):\n\nhttps://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif\nhttps://motionsites.ai/assets/hero-portfolio-cosmic-preview-BpvWJ3Nc.gif\nhttps://motionsites.ai/assets/hero-velorah-preview-CJNTtbpd.gif\nhttps://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif\nhttps://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif\nhttps://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif\nhttps://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif\nhttps://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif\n3. TESTIMONIAL QUOTE SECTION (py-12, px-6, max-w-2xl, centered)\n\nA quote icon (lucide-react Quote, w-6 h-6, text-slate-900). Animation delay 0.1s.\nLarge quote text: 'I left Apple to build the studio I always wanted to work with' where \"Apple\" is in PP Mondwest serif. Text sizing: text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight. Animation delay 0.2s.\nAuthor: \"Viktor Oddy\" in italic, text-sm, color #273C46. Animation delay 0.3s.\nThree company logo names displayed as text: \"Apple\" (80px wide, 24px font), \"IDEO\" (83px wide, 24px font), \"Polygon\" (110px wide, 24px font). Font-medium, text-slate-900. Animation delay 0.4s.\nBelow logos: A parallax image (scrolls with a parallax effect based on viewport position, max offset 200px). The image URL is: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143.png&w=1280&q=85. Alt text \"Chris Halaska\". w-full max-w-xs rounded-2xl shadow-lg. Animation delay 0.5s. The parallax uses IntersectionObserver + scroll listener with requestAnimationFrame.\n4. PRICING SECTION (full width, py-12, px-6)\n\nTwo cards in a grid (grid-cols-1 md:grid-cols-2, gap-8), aligned right on desktop (md:justify-end, md:max-w-4xl). Each card has rounded-[40px], pl-10 pr-10 md:pr-24 pt-3 pb-10.\n\nCard 1 (Dark): bg-[#051A24], inset shadow. Text color #F6FCFF / #E0EBF0. Animation delay 0.1s.\n\nTitle: \"Monthly Partnership\" (text-[22px], font-medium)\nDescription: \"A dedicated creative design team. / You work directly with Viktor.\"\nPrice: \"$5,000\" (text-2xl, color #F6FCFF), \"Monthly\" below\nTwo buttons: \"Start a chat\" (primary) + \"How it works\" (secondary), both linking to https://halaskastudio.com/./book\nCard 2 (Light): bg-white, shadow-[0_4px_16px_rgba(0,0,0,0.08)]. Animation delay 0.2s.\n\nTitle: \"Custom Project\" (text-[22px], font-medium)\nDescription: \"Fixed scope, fixed timeline. / Same team, same standards.\"\nPrice: \"$5,000\" (text-2xl, color #0D212C), \"Minimum\" below\nOne button: \"Start a chat\" (tertiary variant: white bg with combined shadow)\n5. TESTIMONIAL CAROUSEL (full width, py-20)\n\nHeader row (md:max-w-4xl, md:ml-auto): Title \"What builders say\" (where \"builders\" is in PP Mondwest serif, same large heading size) on left. On the right: 5 filled black star icons (lucide-react Star, w-5 h-5, fill-black) + \"Clutch 5/5\" text.\nAuto-scrolling carousel (3s interval, pauses on hover) with prev/next circular buttons (w-12 h-12 rounded-full, border border-[#0D212C]/20, lucide ChevronLeft/ChevronRight).\nCards are 427.5px wide on desktop (full width minus 48px on mobile), gap-6, with exit animation (opacity fade + scale down). Each card: bg-white, rounded-[32px] md:rounded-[40px], shadow-[0_4px_16px_rgba(0,0,0,0.08)], px-6 md:pl-10 md:pr-24 py-8.\nCard content: SVG quote mark icon (custom path), quote text (text-base, color #0D212C, leading-relaxed), author row with circular avatar (w-12 h-12), name (font-semibold, text-sm), role/company with arrow prefix.\nTestimonials array uses Pexels avatar images. The testimonials are tripled for infinite scroll effect. Transform uses cubic-bezier(0.4, 0, 0.2, 1) with 0.8s transition.\n5 testimonials:\n\nMarcus Anderson, CEO, Data.storage - \"With very little guidance team delivered designs that were consistently spot on...\"\nalexwu, Founder, Nexgate - \"Viktor led the creation of our best fundraising deck to date!...\"\nJames Mitchell, VP Product, LaunchPad - \"Working with Viktor transformed our product vision...\"\nRachel Foster, Co-founder, Nexus Labs - \"The design quality exceeded our expectations...\"\nDavid Zhang, Head of Design, Paradigm Labs - \"Incredible work from start to finish...\"\n6. PROJECTS SECTION (max-w-[1200px], px-6, py-12)\n\nVertical stack of 3 project items (gap-16 md:gap-20). Each has:\n\nText block offset left (ml-20 md:ml-28): Project name in PP Mondwest serif (text-2xl md:text-3xl, font-semibold, color #051A24) + description (text-sm md:text-base, color #051A24/70)\nFull-width image below (rounded-2xl, shadow-lg, object-cover)\nEach item independently triggers fade-in animation via IntersectionObserver.\nProjects:\n\n\"evr\" - \"From idea to millions raised for a web3 AI product\" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif\n\"Automation Machines\" - \"Streamlining industrial automation processes\" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif\n\"xPortfolio\" - \"Modern portfolio management platform\" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif\n7. PARTNER SECTION (full width, py-12, px-6)\n\nLarge white container (max-w-7xl, py-48, rounded-[40px], subtle shadow). On mouse hover, GIF thumbnails (from the marquee images array) spawn at cursor position with random rotation (-10 to +10 deg), fade out over 1000ms with scale-down, spawning every 80ms minimum. Uses requestAnimationFrame-style cleanup.\n\nCentered heading: \"Partner with us\" in PP Mondwest serif, text-[48px] md:text-[64px] lg:text-[80px], color #0D212C, mb-12.\nCTA button: Dark pill with circular avatar image (Pexels photo 415829, w-10 h-10 rounded-full) + \"Start chat with Viktor\". Same primary button shadow style.\n8. FOOTER (full width, py-12, px-6, max-w-[1200px])\n\nFlex row (md:flex-row). Left side: \"Start a chat\" primary button. Right side: ArrowUpRight icon (lucide-react), then two columns of links:\n\nColumn 1: Services, Work, About (anchor links)\nColumn 2: x.com, LinkedIn (external links, target _blank)\nAll links: text-base, color #051A24, hover:opacity-70 transition.\n\n9. COPYRIGHT BAR (max-w-[1200px], px-6, py-4)\n\nFlex row justify-between: \"Vortex Studio Limited\" on left, \"Austin, USA\" on right. Text-sm, color #051A24.\n\n10. FIXED BOTTOM NAV (z-50, centered)\n\nFloating pill fixed to bottom (bottom-6, centered via left-1/2 -translate-x-1/2). White bg, rounded-full, px-8 py-2, complex layered shadow. Contains: \"V\" letter in PP Mondwest serif (text-2xl, font-semibold, color #051A24) + \"Start a chat\" primary button.\n\nANIMATIONS:\n\nAll sections use a custom useInViewAnimation hook (IntersectionObserver with threshold 0.1, triggers once). Elements get class animate-fade-in-up when in view (otherwise opacity-0). The animation is defined in CSS:\n\n\n@keyframes fadeInUp {\n  0% { opacity: 0; transform: translateY(30px); }\n  100% { opacity: 1; transform: translateY(0); }\n}\n.animate-fade-in-up {\n  animation: fadeInUp 0.8s ease-out forwards;\n  opacity: 0;\n}\nEach element within a section has staggered animationDelay values (0.1s, 0.2s, 0.3s, etc.).\n\nCOLOR PALETTE:\n\nPrimary dark: #051A24\nSecondary dark: #0D212C\nLight text on dark: #F6FCFF, #E0EBF0\nBody text: #051A24\nMuted text: #273C46\nBackground: white throughout\nBUTTON SHADOWS (critical for the design feel):\n\nPrimary: 0_1px_2px_0_rgba(5,26,36,0.1), 0_4px_4px_0_rgba(5,26,36,0.09), 0_9px_6px_0_rgba(5,26,36,0.05), 0_17px_7px_0_rgba(5,26,36,0.01), 0_26px_7px_0_rgba(5,26,36,0), inset_0_2px_8px_0_rgba(255,255,255,0.5)\nSecondary: 0_0_0_0.5px_rgba(0,0,0,0.05), 0_4px_30px_rgba(0,0,0,0.08)\nFONTS (CSS):\n\n\n@font-face {\n  font-family: 'PP Neue Montreal';\n  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');\n  font-weight: 400;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'PP Neue Montreal';\n  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');\n  font-weight: 500;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'PP Mondwest';\n  src: url('/PPMondwest-Regular.woff2') format('woff2');\n  font-weight: 400;\n  font-display: swap;\n}\nFILE STRUCTURE:\n\nsrc/App.tsx - Main layout with hero, marquee, and section composition\nsrc/components/Button.tsx - Reusable button (primary/secondary/tertiary variants)\nsrc/components/TestimonialSection.tsx - Quote with parallax image\nsrc/components/PricingSection.tsx - Two pricing cards\nsrc/components/TestimonialCarousel.tsx - Auto-scrolling testimonial cards\nsrc/components/ProjectsSection.tsx - Project showcase items\nsrc/components/PartnerSection.tsx - Interactive mouse-trail CTA section\nsrc/components/Footer.tsx - Footer with links\nsrc/components/CopyrightBar.tsx - Copyright line\nsrc/components/BottomNav.tsx - Fixed floating bottom nav\nsrc/hooks/useInViewAnimation.ts - IntersectionObserver scroll-trigger hook\nsrc/index.css - Font faces, marquee animation, fade-in-up animation","url":"/prompts/vortex-studio-hero"}},{"id":"codenest-hero","object":"prompt","title":"CodeNest Coding Platform","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-codenest-poster-Cq1PVGCy.png","video_url":"https://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:\n\n1. Background & Layout:\n\nBackground: Implement a full-screen background video using the HLS stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js and set enableWorker: false to ensure stability in sandboxed environments.\n\nOverlays: Set the video to 60% opacity. Add a dark linear gradient from the left (#070b0a to transparent) and a bottom-up gradient for readability.\n\nGrid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).\n\nCentral Glow: Place a large horizontal SVG ellipse glow in the center-top area with a cyan/dark green hue, using a 25px Gaussian blur filter.\n\n2. The Liquid Glass Card:\n\nComponent: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].\n\nCSS Styling (Liquid Glass):\n\nbackground: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.\n\nbackdrop-filter: blur(4px).\n\nbox-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).\n\nBorder Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.\n\nContent: '[ 2025 ]' tag (14px), 'Taught by Industry Professionals' headline (18px, using Instrument Serif italic for 'Industry'), and a small description (11px).\n\n3. Hero Content & Typography:\n\nEyebrow: 'Career-Ready Curriculum' in Plus Jakarta Sans, bold, 11px, color #5ed29c.\n\nMain Headline: 'LAUNCH YOUR CODING CAREER.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be green (#5ed29c).\n\nDescription: 'Master in-demand coding skills...' in Inter, 14px, 70% white opacity, max-width 512px.\n\nPrimary CTA: 'Get Started' button with an ArrowRight icon. Rounded-full, background #5ed29c, text #070b0a, uppercase, bold.\n\n4. Global Navigation:\n\nHeader: Sticky/Absolute header with a white minimalist logo.\n\nDesktop Menu: Links for 'PROJECTS', 'BLOG', 'ABOUT', 'RESUME' in Inter, 16px. Hover state: #5ed29c.\n\nMobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.\n\n5. Required Imports:\n\nFonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).\n\nIcons: lucide-react (ArrowRight, Menu, X).\n\nLibrary: hls.js for video streaming.","url":"/prompts/codenest-hero"}},{"id":"power-ai-hero","object":"prompt","title":"Power AI","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-power-ai-poster-B5SetZ6G.png","video_url":"https://motionsites.ai/assets/hero-power-ai-preview-BqpSbx41.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen dark hero section with a looping background video, navbar, headline, subtitle, CTA button, and a logo marquee at the bottom. Here are the exact specifications:\n\nTheme & Colors (index.css CSS variables):\nBackground: 260 87% 3% (deep dark blue-purple)\nForeground: 40 6% 95% (off-white)\nHero sub text: 40 6% 82%\nBody font: Geist Sans (via @fontsource/geist-sans)\nHeadline font: General Sans (loaded from Fontshare: https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap)\n\nBackground Video (Index page wrapper):\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4\nPositioned absolute inset-0 w-full h-full object-cover behind all content\nStarts with opacity: 0\nCustom JS-controlled fade loop: 0.5s fade-in at start, 0.5s fade-out at end, using requestAnimationFrame. On ended, opacity resets to 0, waits 100ms, then replays from 0\nNo gradient overlays on the video\nThe wrapper div has overflow-hidden, the hero content sits in a relative z-10 div above\n\nBlurred overlay shape (centered behind content):\nw-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px]\nAbsolutely positioned at top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\npointer-events-none\nThe hero section has overflow-visible so the blur is not clipped\n\nNavbar:\nFull width, py-5 px-8, flex row with justify-between\nLeft: logo image (src/assets/logo.png, height 32px)\nCenter: nav items — \"Features\" (with ChevronDown), \"Solutions\", \"Plans\", \"Learning\" (with ChevronDown). Each is a button with text-foreground/90 and hover transition\nRight: \"Sign Up\" button using heroSecondary variant, rounded-full px-4 py-2\nBelow navbar: a 1px divider line with gradient from-transparent via-foreground/20 to-transparent, offset mt-[3px]\n\nHero content (vertically centered in remaining space via flex-1):\nHeadline: \"Power AI\" at text-[220px], font-normal, leading-[1.02], tracking-[-0.024em], font-family General Sans\n\"Power \" is plain text-foreground\n\"AI\" uses bg-clip-text text-transparent with backgroundImage: linear-gradient(to left, #6366f1, #a855f7, #fcd34d) (indigo → purple → amber)\nSubtitle: \"The most powerful AI ever deployed / in talent acquisition\" — text-hero-sub, text-lg, leading-8, max-w-md, mt-[9px], opacity-80\nCTA: \"Schedule a Consult\" button, heroSecondary variant, px-[29px] py-[24px], mt-[25px]\n\nLogo marquee (pinned to bottom of hero, pb-10):\nContainer: max-w-5xl mx-auto\nLeft side: static text \"Relied on by brands / across the globe\" in text-foreground/50 text-sm\nRight side: infinite scrolling marquee with logos: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn (duplicated for seamless loop)\nEach logo: a liquid-glass 24x24 rounded-lg icon showing the first letter, plus the name in text-base font-semibold text-foreground\nMarquee animation: translateX(0%) → translateX(-50%), 20s linear infinite\ngap-16 between logos, gap-12 between text and marquee\n\nLiquid glass utility class (in index.css):\n.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }\n.liquid-glass::before { content: \"\"; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }\n\nSection structure: min-h-screen flex flex-col — navbar at top, content centered via flex-1 flex items-center justify-center, marquee at bottom.","url":"/prompts/power-ai-hero"}},{"id":"bloom-ai-hero","object":"prompt","title":"Bloom AI","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-bloom-ai-poster-Bol1Pj7x.png","video_url":"https://motionsites.ai/assets/hero-bloom-ai-preview-g6RcYLTl.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen hero landing page for \"Bloom\" — an AI-powered plant/floral design platform. The design uses a liquid glass morphism aesthetic over a looping video background.\n\nBackground\nFull-screen autoplaying, looping, muted video background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4\nVideo covers entire viewport with object-cover, sits at z-0. All content floats above at z-10.\n\nFonts\nDisplay/Body: Poppins (Google Fonts) — used for headings and body text\nSerif accent: Source Serif 4 (Google Fonts) — used only for italic/emphasis text inside headings (e.g., <em>, <i>, .italic inside h1-h3)\nHeadings use font-weight: 500\n\nColor Palette\nStrict grayscale only — all CSS variables are 0 0% X% HSL values\nText is text-white, text-white/80, text-white/60, text-white/50 for hierarchy\nNo colored accents whatsoever\n\nLiquid Glass CSS (two tiers)\nDefine under @layer components:\n\n.liquid-glass (light)\nbackground: rgba(255,255,255,0.01);\nbackground-blend-mode: luminosity;\nbackdrop-filter: blur(4px);\nborder: none;\nbox-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\nposition: relative; overflow: hidden;\n::before pseudo-element: gradient border using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with padding: 1.4px, masked via -webkit-mask-composite: xor; mask-composite: exclude;\n\n.liquid-glass-strong (heavy, for CTA/panels)\nSame structure but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and ::before uses 0.5/0.2 alpha instead of 0.45/0.15.\n\nLayout — Two-Panel Split\nFlex row, min-h-screen. Left panel w-[52%], right panel w-[48%] (hidden on mobile lg:flex).\n\nLeft Panel\nHas a liquid-glass-strong overlay (absolute inset-4 lg:inset-6 rounded-3xl)\nNav: Logo image (/logo.png, 32×32) + \"bloom\" text (semibold, 2xl, tracking-tighter, white) on left. \"Menu\" button with Menu icon on right, liquid-glass pill.\nHero center (flex-1, centered):\nLogo image again (80×80)\nh1: \"Innovating the / spirit of bloom AI\" — text-6xl lg:text-7xl, tracking-[-0.05em], white. The italic part uses font-serif text-white/80\nCTA button: \"Explore Now\" with Download icon in a w-7 h-7 rounded-full bg-white/15 circle. Button is liquid-glass-strong, rounded-full, hover:scale-105 active:scale-95\nThree pills: \"Artistic Gallery\", \"AI Generation\", \"3D Structures\" — liquid-glass, rounded-full, text-xs text-white/80\nBottom quote:\n\"VISIONARY DESIGN\" label (text-xs tracking-widest uppercase text-white/50)\nQuote: \"We imagined a realm with no ending.\" — mixed font-display/font-serif italic spans\nAuthor: \"MARCUS AURELIO\" with horizontal lines on each side\n\nRight Panel (desktop only)\nTop bar: Social icons (Twitter, LinkedIn, Instagram) in a liquid-glass pill with ArrowRight. Account button with Sparkles icon button, both liquid-glass.\nCommunity card: Small liquid-glass card (w-56), \"Enter our ecosystem\" title + description\nBottom feature section (mt-auto): Outer liquid-glass container with rounded-[2.5rem]\nTwo side-by-side cards: \"Processing\" (Wand2 icon) and \"Growth Archive\" (BookOpen icon), each liquid-glass rounded-3xl\nBottom card: flower image thumbnail (from @/assets/hero-flowers.png, 96×64), \"Advanced Plant Sculpting\" title + description, and a \"+\" button. All liquid-glass.\n\nIcons\nAll from lucide-react: Sparkles, Download, Wand2, BookOpen, ArrowRight, Twitter, Linkedin, Instagram, Menu\n\nKey Details\nAll interactive elements: hover:scale-105 transition-transform\nSocial icon links: text-white hover:text-white/80 transition-colors\nIcon containers: w-8 h-8 rounded-full bg-white/10 flex items-center justify-center\nNo border classes anywhere — glass effect handles all borders via ::before\nborder-radius token: --radius: 1rem","url":"/prompts/bloom-ai-hero"}},{"id":"luminex-hero","object":"prompt","title":"Luminex","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-luminex-poster-9lhDX6Fl.png","video_url":"https://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a modern React landing page with a full-screen HLS video background, glassmorphic navigation header, and hero content positioned in the bottom-left corner.","url":"/prompts/luminex-hero"}},{"id":"sentinel-ai-hero","object":"prompt","title":"Sentinel AI","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-sentinel-ai-poster-B7n15kua.png","video_url":"https://motionsites.ai/assets/hero-sentinel-ai-preview-BXas7Q1_.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen dark hero landing page for a security company called \"SENTINEL AI\" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and an embedded Spline 3D scene as the background. The tech stack uses @splinetool/react-spline and @splinetool/runtime for the 3D embed. Here is every detail:\n\nFONT:\nGoogle Fonts \"Sora\" with weights 300, 400, 500, 600, 700. Load it in index.html:\n\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\nSet font-sora as the body font via Tailwind config: fontFamily: { sora: [\"Sora\", \"sans-serif\"] } and apply font-sora antialiased on body.\n\nCOLOR THEME (all HSL CSS custom properties, dark only, no light mode):\n\n--background: 0 0% 10% (dark charcoal)\n--foreground: 0 0% 96% (near-white)\n--primary: 119 99% 46% (vivid green)\n--primary-foreground: 0 0% 4% (near-black)\n--secondary: 0 0% 18%\n--secondary-foreground: 0 0% 96%\n--muted: 0 0% 16%\n--muted-foreground: 0 0% 60%\n--accent: 119 99% 46% (same vivid green as primary)\n--accent-foreground: 0 0% 4%\n--destructive: 0 84% 60%\n--border: 0 0% 20%\n--input: 0 0% 20%\n--ring: 119 99% 46%\n--radius: 0.5rem\n--nav-button: 0 0% 18%\n--hero-bg: 0 0% 8% (the darkest background, nearly black)\nMap these in Tailwind config using hsl(var(--variable)) pattern. Add custom color tokens: nav-button and hero-bg.\n\nCUSTOM ANIMATIONS (Tailwind config keyframes + animation):\n\nfade-up keyframe:\n\n0%: opacity: 0, transform: translateY(20px), filter: blur(4px)\n100%: opacity: 1, transform: translateY(0), filter: blur(0)\nAnimation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards\nfade-in keyframe:\n\n0%: opacity: 0\n100%: opacity: 1\nAnimation: fade-in 0.5s ease-out forwards\nNAVBAR (fixed, transparent, floating over the Spline scene):\n\nfixed top-0 left-0 right-0 z-50, horizontal flex, justify-between, padding px-8 lg:px-16 py-5\nLeft: Logo text \"SENTINEL\" -- text-foreground text-xl font-semibold tracking-tight\nCenter: Nav links array: [\"Services\", \"About Us\", \"Projects\", \"Team\", \"Contacts\"] -- each is text-sm text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest. Links use href={#section-name}. Hidden on mobile (hidden md:flex), with gap-8.\nRight: \"Get Quote\" button using shadcn Button with a custom navCta variant: text-foreground bg-nav-button hover:bg-nav-button/80 active:scale-[0.97] transition-all. Size lg, with classes hidden md:inline-flex rounded-lg uppercase text-xs tracking-widest px-6.\nHERO SECTION (full-screen, content at bottom-left):\n\nStructure:\n\nOuter <section>: relative min-h-screen flex items-end bg-hero-bg overflow-hidden\nSpline 3D Background (absolute, full-size): Lazy-loaded via React.lazy(() => import(\"@splinetool/react-spline\")) wrapped in <Suspense> with a fallback <div className=\"absolute inset-0 bg-hero-bg\" />. The Spline component uses scene=\"https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode\" and className=\"w-full h-full\". Placed inside <div className=\"absolute inset-0\">.\nDark overlay: <div className=\"absolute inset-0 bg-black/30 z-[1] pointer-events-none\" />\nContent container: relative z-10 pointer-events-none w-full max-w-[90%] sm:max-w-md lg:max-w-2xl px-6 md:px-10 pb-10 md:pb-10 pt-32\nContent elements (all with staggered animate-fade-up, starting opacity-0):\n\nHeading (delay 0.2s): <h1> with text \"SENTINEL\" in white + \" AI\" in primary green. Classes: text-[clamp(3rem,8vw,6rem)] font-bold leading-[1.05] tracking-[-0.05em] text-foreground mb-2 md:mb-4 uppercase. The \"AI\" part is wrapped in <span className=\"text-primary\">.\n\nSubheading (delay 0.4s): <p> -- \"We implement security correctly.\" -- text-foreground/80 text-[clamp(1.125rem,2.5vw,1.875rem)] font-light mb-3 md:mb-6\n\nDescription (delay 0.55s): <p> -- \"Enterprise security systems built in days. AI-powered surveillance deployed with zero-trust architecture. Smart access control set up for your entire facility. All of it done right, not just fast.\" -- text-muted-foreground text-[clamp(0.875rem,1.5vw,1.25rem)] font-light mb-4 md:mb-8\n\nTwo CTA buttons (delay 0.7s): Wrapped in flex flex-wrap gap-3 font-bold. Both are plain <button> elements (not shadcn Button) with pointer-events-auto (to re-enable clicks since parent is pointer-events-none):\n\n\"Book a Call\": bg-primary text-primary-foreground px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-110 transition-all active:scale-[0.97]\n\"Our Work\": bg-white text-background px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-90 transition-all active:scale-[0.97]\nTrust line (delay 0.85s): <p> -- \"Trusted security partner. Columbus, OH. 12 systems deployed.\" -- text-muted-foreground/60 text-xs font-light mt-4 md:mt-6\n\nAll animated elements use style={{ animationDelay: \"Xs\" }} for the stagger, combined with the opacity-0 animate-fade-up classes.\n\nPAGE WRAPPER (Index.tsx):\nSimple wrapper: <div className=\"bg-hero-bg min-h-screen\"> containing <Navbar /> and <HeroSection />.\n\nKEY DEPENDENCIES:\n\n@splinetool/react-spline and @splinetool/runtime for the 3D Spline embed\ntailwindcss-animate plugin\nshadcn/ui Button component with custom variants (navCta, hero, heroOutline)\nclass-variance-authority for button variants\nIMPORTANT NOTES:\n\nThe Spline scene URL is https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode -- this is the exact 3D scene used\nThe entire content area has pointer-events-none so clicks pass through to the Spline scene, but buttons re-enable with pointer-events-auto\nResponsive fluid typography uses clamp() for the heading, subheading, and description\nThe content is anchored to the bottom-left of the viewport (flex items-end on the section + padding-bottom on the content)\nNo hamburger menu on mobile -- the nav links and CTA simply hide (hidden md:flex / hidden md:inline-flex)","url":"/prompts/sentinel-ai-hero"}},{"id":"designpro-hero","object":"prompt","title":"DesignPro Academy","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-designpro-poster-DwA5o1A7.png","video_url":"https://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen hero section for a product design education platform called \"DesignPro\" with the following exact specifications:\n\nBackground:\n\nFull-screen looping video background using this exact CloudFront URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4\n\nVideo should autoplay, loop, be muted, and play inline\n\nBackground color: black (#000000)\n\nNavigation Bar:\n\nLogo: Circular design with a white border (2px), containing a smaller filled white circle inside, followed by \"DesignPro\" text\n\nNavigation links in a rounded pill container with gray-700 border: Home, About Us, Courses, Instructors, Testimonials, Blog, Contact us (with arrow icon)\n\nAll nav links: white/80 opacity, hover to full white\n\nFont size: text-sm\n\nMobile: Show hamburger menu icon on screens smaller than lg\n\nMax width: 7xl container with proper padding\n\nContent Layout:\n\nTop Section (below nav):\n\nTwo-column layout on large screens, stacked on mobile\n\nLeft column: \"We deliver transformative programs that empower emerging product designers with cutting-edge expertise and vision to thrive globally.\"\n\nRight column (right-aligned on lg+): \"8000+ Talented Designers Launched !\"\n\nBoth paragraphs: white/80 opacity, text-sm on mobile, text-base on desktop\n\nHero Section (center):\n\nSmall uppercase text above heading: \"Seats for Next Program Opening Soon\" (white/80 opacity, text-xs on mobile, text-sm on desktop, tight tracking)\n\nMain heading with these exact specifications:\n\nLine 1: \"Become\" in white, font-medium\n\nLine 2: \"Product Leader.\" with animated shiny gradient effect\n\nFont sizes: text-5xl (mobile) scaling up to text-9xl (xl screens)\n\nLine height: 0.85\n\nLetter spacing: tracking-tighter\n\nShinyText Component:\n\nUse framer-motion for animation\n\nBase color: #64CEFB (light blue)\n\nShine color: #ffffff (white)\n\nAnimation speed: 3 seconds\n\nGradient spread: 100 degrees\n\nGradient should sweep across text continuously from left to right\n\nUse CSS gradient with backgroundClip: text and transparent text fill\n\nCTA Button:\n\nText: \"Apply for Next Enrollment\" with arrow icon (from lucide-react)\n\nBlack background, hover: gray-900\n\nRounded-full shape\n\nPadding: px-6 md:px-8, py-3 md:py-4\n\nArrow should translate right on hover\n\nGroup hover animation on arrow icon\n\nTypography:\n\nFont family: Inter (sans-serif)\n\nAll text colors: white/80 opacity for body text, full white for headings and hover states\n\nTechnical Stack:\n\nReact + TypeScript\n\nVite\n\nTailwind CSS\n\nFramer Motion for animations\n\nLucide React for icons\n\nResponsive Breakpoints:\n\nMobile-first design\n\nsm: 640px\n\nmd: 768px\n\nlg: 1024px\n\nxl: 1280px\n\nKey CSS Details:\n\nContainer max-width: max-w-7xl with centered margins\n\nSection height: h-screen\n\nVideo: absolute positioning, inset-0, object-cover\n\nContent: relative z-10 positioning to appear above video\n\nSmooth transitions on all interactive elements\n\nCreate the complete implementation including the ShinyText component with proper framer-motion animation logic.","url":"/prompts/designpro-hero"}},{"id":"nexora-hero","object":"prompt","title":"Nexora Automation","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-nexora-poster-CLY3ybj2.png","video_url":"https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a SaaS landing page hero section with the following exact specifications:\n\nPage Layout\n\nThe entire page is h-screen flex flex-col bg-background overflow-hidden — the Navbar + Hero fill exactly 100vh with no scroll.\nThe page uses two Google Fonts imported via CSS: Instrument Serif (display/headings, including italic) and Inter (body text).\nFonts & Design Tokens (index.css)\n\nImport fonts:\n\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap');\nCSS variables (:root):\n\n--background: 0 0% 100% (white)\n--foreground: 210 14% 17% (dark charcoal)\n--primary: 210 14% 17% / --primary-foreground: 0 0% 100%\n--secondary: 0 0% 96% / --secondary-foreground: 0 0% 9%\n--muted: 0 0% 96% / --muted-foreground: 184 5% 55%\n--accent: 239 84% 67% (indigo/blue) / --accent-foreground: 0 0% 100%\n--border: 0 0% 90%\n--ring: 239 84% 67%\n--radius: 0.5rem\n--font-display: 'Instrument Serif', serif\n--font-body: 'Inter', sans-serif\n--shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06)\nTailwind config extends fontFamily with display and body mapped to the CSS vars. All colors use hsl(var(--token)) pattern.\n\nNavbar\n\nflex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body\nLeft: Logo text ✦ Nexora — text-xl font-semibold tracking-tight text-foreground\nRight (hidden on mobile): Nav links \"Home\", \"Pricing\", \"About\", \"Contact\" — text-sm text-muted-foreground hover:text-foreground with gap-8\nCTA button: rounded-full px-5 text-sm font-medium using primary styling\nHero Section\n\n\n\n\nBackground Video: Fullscreen muted autoplay loop video, absolute inset-0 w-full h-full object-cover z-0\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4\nAll content wrapped in relative z-10 flex flex-col items-center w-full\n1. Badge (top)\n\nFramer Motion: fade up from y:10, duration 0.5s\ninline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body\nText: \"Now with GPT-5 support ✨\"\nmb-6\n2. Headline\n\nFramer Motion: fade up from y:16, duration 0.6s, delay 0.1s\ntext-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl\nContent: The Future of Smarter Automation — the word \"Smarter\" renders in Instrument Serif italic\n3. Subheadline\n\nFramer Motion: fade up from y:16, duration 0.6s, delay 0.2s\nmt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body\nText: \"Automate your busywork with intelligent agents that learn, adapt, and execute—so your team can focus on what matters most.\"\n4. CTA Buttons\n\nFramer Motion: fade up from y:16, duration 0.6s, delay 0.3s\nmt-5 flex items-center gap-3\nPrimary button: rounded-full px-6 py-5 text-sm font-medium font-body — text \"Book a demo\"\nPlay button: ghost variant, h-11 w-11 rounded-full border-0 bg-background shadow-[0_2px_12px_rgba(0,0,0,0.08)] hover:bg-background/80 with a Play icon (lucide) h-4 w-4 fill-foreground\n5. Dashboard Preview (custom coded, NOT an image)\n\nFramer Motion: fade up from y:30, duration 0.8s, delay 0.5s\nContainer: mt-8 w-full max-w-5xl\nFrosted glass wrapper: rounded-2xl overflow-hidden p-3 md:p-4 with inline styles:\nbackground: rgba(255, 255, 255, 0.4)\nborder: 1px solid rgba(255, 255, 255, 0.5)\nboxShadow: var(--shadow-dashboard)\nDashboard internals (all coded in React, text-[11px], select-none pointer-events-none):\n\nTop bar: Logo \"N\" in rounded box + \"Nexora\" + chevron | Search bar with ⌘K shortcut | \"Move Money\" + bell + avatar \"JB\"\nSidebar (w-40): Items — Home (active), Tasks (badge \"10\"), Transactions, Payments (chevron), Cards, Capital, Accounts (chevron). Section \"Workflows\": Trake rutes, Payments, Notifications, Settings\nMain content (bg-secondary/30):\nGreeting: \"Welcome, Jane\" — text-sm font-semibold\nAction buttons row: Send (primary/accent), Request, Transfer, Deposit, Pay Bill, Create Invoice — rounded-full pill buttons text-[10px], + \"Customize\" text\nTwo equal-width cards (flex-1 basis-0) side by side:\nBalance card: \"Mercury Balance\" with checkmark, amount $8,450,190.32 (cents in text-xs text-muted-foreground), stats (Last 30 Days, +$1.8M green, -$900K red), SVG area chart (h-20) with smooth cubic Bézier curve, linear gradient fill from accent at 15% opacity to transparent, stroke in accent color strokeWidth=\"1.5\"\nAccounts card: Header \"Accounts\" with + and ⋮ icons. Three rows (py-3, no dividers, text-xs, justify-between): Credit $98,125.50, Treasury $6,750,200.00, Operations $1,592,864.82\nTransactions table: \"Recent Transactions\" heading, table with columns Date/Description/Amount/Status. 4 rows: AWS -$5,200 Pending (amber), Client Payment +$125,000 Completed (green), Payroll -$85,450 Completed, Office Supplies -$1,200 Completed\nDependencies\n\nframer-motion for all animations\nlucide-react for all icons\nshadcn/ui Button component\nTailwind CSS with tailwindcss-animate plugin\nKey Design Decisions\n\nThe dashboard overflows toward the bottom of the viewport and is clipped by overflow-hidden on the parent\nNo dark mode — light only\nAll colors use semantic Tailwind tokens, never raw color values in components\nThe SVG chart uses a hand-crafted cubic Bézier path, not a charting library","url":"/prompts/nexora-hero"}},{"id":"transform-data-hero","object":"prompt","title":"Transform Data","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-transform-data-poster-DfsHSPMo.png","video_url":"https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"HERO SECTION CREATION PROMPT\n\nCreate a modern hero section with a looping video background and the following specifications:\n\nVideo Background:\n\nURL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4\n\nSize: 115% width and height\n\nPosition: Centered horizontally, anchored to top with object-top focal point\n\nCustom JavaScript fade system (NO CSS transitions):\n\n250ms requestAnimationFrame-based fade-in on load/loop start\n\n250ms fade-out when 0.55 seconds remain before video end\n\nfadingOutRef boolean prevents re-triggering fade-out from repeated timeUpdate events\n\nOn ended: opacity set to 0, 100ms delay, reset to currentTime = 0, play, fade back in\n\nEach new fade cancels running animation frames to prevent competing animations\n\nFades resume from current opacity (no snapping)\n\nFonts Required:\n\nSchibsted Grotesk (weights: 400, 500, 600, 700)\n\nInter (weights: 400, 500, 600, 700)\n\nNoto Sans (weights: 400, 500, 600, 700)\n\nFustat (weights: 400, 500, 600, 700)\n\nNavigation Bar:\n\nLogo: \"Logoipsum\" (Schibsted Grotesk SemiBold, 24px, -1.44px tracking)\n\nMenu items (Schibsted Grotesk Medium, 16px, -0.2px tracking):\n\nPlatform\n\nFeatures (with dropdown chevron icon)\n\nProjects\n\nCommunity\n\nContact\n\nRight side buttons:\n\n\"Sign Up\" (transparent background, 82px width)\n\n\"Log In\" (black background, white text, 101px width)\n\nPadding: 120px horizontal, 16px vertical\n\nHero Content (moved up 50px with -mt-[50px]):\n\nBadge Component:\n\nDark badge with star icon + \"New\" text\n\nLight background with text: \"Discover what's possible\"\n\nFont: Inter Regular, 14px\n\nRounded corners with subtle shadow\n\nMain Headline:\n\nText: \"Transform Data Quickly\"\n\nFont: Fustat Bold, 80px, -4.8px tracking, line-height: none\n\nColor: Black, center-aligned\n\nSubtitle:\n\nText: \"Upload your information and get powerful insights right away. Work smarter and achieve goals effortlessly.\"\n\nFont: Fustat Medium, 20px, -0.4px tracking\n\nColor: #505050\n\nMax-width: 736px, width: 542px\n\nSearch Input Box:\n\nBackdrop blur with dark transparent background (rgba(0,0,0,0.24))\n\nDimensions: 728px max-width, 200px height, rounded 18px\n\nTop row: Credit info\n\nLeft: \"60/450 credits\" with green \"Upgrade\" button\n\nRight: AI icon + \"Powered by GPT-4o\"\n\nFont: Schibsted Grotesk Medium, 12px, white text\n\nMain input area:\n\nWhite background, rounded 12px, shadow\n\nPlaceholder: \"Type question...\" (16px, rgba(0,0,0,0.6))\n\nBlack circular submit button with up arrow icon (36px size)\n\nBottom row:\n\nLeft: Three action buttons (gray backgrounds, rounded 6px):\n\n\"Attach\" with paperclip icon\n\n\"Voice\" with microphone icon\n\n\"Prompts\" with search icon\n\nRight: Character counter \"0/3,000\" (12px, gray)\n\nIcons (SVG paths from imported file):\n\nChevron down arrow\n\nUp arrow\n\nStar icon\n\nAI sparkle icon\n\nAttach/paperclip icon\n\nVoice/microphone icon\n\nSearch icon\n\nSpacing:\n\nGap between navigation and hero: 60px\n\nGap between header and search box: 44px\n\nGap within header elements: 34px (badge to title, title to subtitle)\n\nHero content moved up: 50px negative margin\n\nHorizontal padding: 120px\n\nColor Scheme:\n\nBlack text: #000000\n\nGray text: #505050\n\nLight gray backgrounds: #f8f8f8\n\nGreen upgrade button: rgba(90,225,76,0.89)\n\nDark badge: #0e1311\n\nWhite: #ffffff\n\nTransparent overlay: rgba(0,0,0,0.24)\n\nComponent Structure:\n\nVideoBackground component with custom fade logic\n\nNavigation bar (fixed spacing, horizontal layout)\n\nHero content container (centered, max-width constraints)\n\nNested components for badge, header, and search input\n\nAll elements positioned over full-screen video background","url":"/prompts/transform-data-hero"}},{"id":"glow-features","object":"prompt","title":"Glow Features","summary":"A preview-led features section prompt for generating a polished AI-built interface.","category":"Features Section","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/features-glow-poster-CmUBaPAq.png","video_url":"https://motionsites.ai/assets/features-glow-poster-CmUBaPAq.png"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a React web application using Vite and Tailwind CSS v4 that perfectly replicates a dark-themed glowing feature card section.\n\n**Libraries Required:**\n- React 19, Vite, Tailwind CSS v4\n- `lucide-react` for icons\n- `motion/react` (Framer Motion) for animations\n\n**Global Page Layout:**\n- Set the main wrapper to `min-h-screen bg-[#0A0A0B] flex flex-col items-center justify-center p-6 md:p-12 font-sans`.\n- Create a CSS grid to hold the cards: `grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-3 lg:gap-3 w-full max-w-[936px]`.\n\n**The Feature Card Component Requirements:**\n- Build a reusable `<FeatureCard />` component taking `title`, `description`, `icon`, `gradient`, and `delay` props.\n- Wrap the entire card in a `<motion.div>`.\n- Card size restrictions wrapper: `relative flex flex-col justify-start items-start w-full max-w-[260px] md:max-w-[300px] group mx-auto`.\n- **Glow Background (Crucial):** Create an absolute positioned `div` behind the card content with `w-full h-[260px] md:h-[300px] opacity-60 rounded-[40px] pointer-events-none`. Apply inline styles: `background: gradient` and `filter: \"blur(45px)\"`.\n- **Foreground Card with Gradient Border (Crucial):** On top of the glow, create a relative container with `self-stretch h-[260px] md:h-[300px] rounded-[40px] z-10 overflow-hidden`.\n- Apply an 8px solid transparent border to this foreground card.\n- Use the background-clip technique strictly for the border gradient via inline styles:\n  `background: linear-gradient(#1A1A1C, #1A1A1C) padding-box, ${gradient} border-box;`\n- Content Inner Layout: Inside the foreground, use `w-full h-full p-7 flex flex-col justify-between`.\n- Icons should have `size={32}` and `strokeWidth={2.5}`, wrapped in a `text-white/90` div.\n- Titles: `text-white font-medium text-xl mb-3 tracking-tight`.\n- Descriptions: `text-gray-400 text-[14px] leading-[1.6] font-normal selection:bg-white/20`.\n\n**Animations (Framer Motion):**\n- The main `<motion.div>` wrapper should animate as follows:\n  - Initial state: `{ opacity: 0, y: 30 }`\n  - Animate state: `{ opacity: 1, y: 0 }`\n  - Transition: `{ duration: 0.8, ease: \"easeOut\", delay }`\n\n**Data for the 3 Cards:**\nInstantiate three of these cards inside the main grid with the following exact data:\n\n1. **Card 1 (\"Hardware\"):** \n   - Icon: `<Monitor />` from lucide-react. \n   - Delay: `0.1`\n   - Description: \"My entire desktop setup is built for power. It is silent, durable, and holds my focus.\"\n   - Gradient: `linear-gradient(137deg, #FF3D77 0%, #FFB1CE 45%, #FF9D3C 100%)`\n\n2. **Card 2 (\"Studio\"):** \n   - Icon: `<Palette />` from lucide-react. \n   - Delay: `0.2`\n   - Description: \"Studio is where I define every single pixel. It is the hub for each canvas I deliver.\"\n   - Gradient: `linear-gradient(137deg, #FFFFFF 0%, #7DD3FC 45%, #06B6D4 100%)`\n\n3. **Card 3 (\"Motion\"):** \n   - Icon: `<Zap />` from lucide-react. \n   - Delay: `0.3`\n   - Description: \"I use Motion to build lively prototypes, bridging the gap between views and code.\"\n   - Gradient: `linear-gradient(137deg, #4361EE 0%, #E0AEFF 45%, #F72585 100%)`","url":"/prompts/glow-features"}},{"id":"lumina-footer","object":"prompt","title":"Lumina","summary":"A preview-led footer section prompt for generating a polished AI-built interface.","category":"Footer Section","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/footer-lumina-poster-B8XFMFMo.png","video_url":"https://motionsites.ai/assets/footer-lumina-preview-CYkr-ACN.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a React frontend using Tailwind CSS v4, the `motion/react` library for animations, and `lucide-react` for icons. I want to build a page with an immersive video background and a highly stylized \"liquid glass\" footer.\n\nPlease follow these exact specifications:\n\n1. Global CSS & Fonts (`index.css`):\nAdd the following exact `@font-face` to the CSS file and set it as the root Tailwind `--font-sans`:\n@font-face {\n    font-family: \"Helvetica Regular\";\n    src: url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot\");\n    src: url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n    url(\"https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n}\n\n2. The \"Liquid Glass\" CSS:\nAdd this exact custom CSS for the liquid glass effect bordering:\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n3. Main App Structure (`App.tsx`):\n- Wrap the page in a `<main>` with `relative w-full min-h-[115vh] overflow-x-hidden flex flex-col items-center font-sans selection:bg-white/20 selection:text-white`.\n- Add a `<video>` element fixed to the background (`fixed inset-0 w-full h-full object-cover z-[0]`) that auto-plays, loops, and is muted.\n- The `src` for the video must be exactly this CloudFront URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_114316_1c7889ad-2885-410e-b493-98119fee0ddb.mp4`\n\n4. Content Wrapper:\nOn top of the video (`z-10`), add a `max-w-7xl` container that holds an upper CTA (you can use a placeholder for the CTA) and pushes the footer to the bottom.\n\n5. The Footer (`motion.footer`):\n- Start it with these exact Framer Motion props: `initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.4, ease: \"easeOut\" }}`\n- Give it the classes: `liquid-glass w-full rounded-3xl p-6 md:p-10 text-white/70 mt-32 md:mt-64`.\n\n6. Footer Layout - Top Grid:\n- A 12-column grid (`grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 mb-10`).\n- First column (md:col-span-5): \n  - An SVG Logo `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M 4.688 136 C 68.373 136 120 187.627 120 251.312 C 120 252.883 119.967 254.445 119.905 256 L 0 256 L 0 136.096 C 1.555 136.034 3.117 136 4.688 136 Z M 251.312 136 C 252.883 136 254.445 136.034 256 136.096 L 256 256 L 136.095 256 C 136.032 254.438 136.001 252.875 136 251.312 C 136 187.627 187.627 136 251.312 136 Z M 119.905 0 C 119.967 1.555 120 3.117 120 4.688 C 120 68.373 68.373 120 4.687 120 C 3.117 120 1.555 119.967 0 119.905 L 0 0 Z M 256 119.905 C 254.445 119.967 252.883 120 251.312 120 C 187.627 120 136 68.373 136 4.687 C 136 3.117 136.033 1.555 136.095 0 L 256 0 Z\" /></svg>` along with the text \"LUMINA\" (text-xl font-medium).\n  - A description below it: \"Lumina provides premium clarity on global events and cosmic wonders - shared with all for free.\" (`text-sm leading-relaxed max-w-sm`).\n\n7. Footer Layout - Links Section (md:col-span-7):\nMake a 3-column grid containing these lists:\n- Discover: Labs & Workshops, Deep Dive Series, Global Circle, Resource Vault, Future Roadmap\n- The Mission: Origin Story, The Collective, Newsroom Hub, Join the Team\n- Concierge: Get in Touch, Legal Privacy, User Agreement, Report Concern\n(Headers should be `text-sm uppercase tracking-wider text-white font-medium mb-4` and links `text-xs space-y-2 hover:text-white transition-colors`).\n\n8. Footer Layout - Bottom Bar:\n- Create a bottom border (`pt-6 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4`).\n- Left side: `<p className=\"text-[10px] uppercase tracking-widest opacity-50\">Curated by @GotInGeorgiG</p>`\n- Right side: A label `<span className=\"text-[10px] uppercase tracking-widest opacity-50\">Join the Journey:</span>` alongside a horizontal flex row of `lucide-react` icons (sizes 16): Music2, Facebook, Twitter, Youtube, and Instagram. Wrap each in an `<a>` with `opacity-70 hover:opacity-100 transition-colors hover:text-white`.","url":"/prompts/lumina-footer"}},{"id":"halo-usd-landing","object":"prompt","title":"USD Halo","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/halo-usd-hero-CtMXOklk.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a premium, fintech-style landing page for a stablecoin product called \"Halo / USD Halo\" using React + TypeScript + Vite + Tailwind CSS, with lucide-react for icons. No other UI libraries. Background color of the page is #F5F5F5.\n\nGlobal Setup\nUse TT Norms Pro as the primary font, loaded via @font-face from /fonts/tt-norms-pro-regular.woff2 (weight 400) and /fonts/tt-norms-pro-semibold.woff2 (weight 600), with font-display: swap. Apply it to html, body, and inherit on *.\nTailwind base + components + utilities at the top of src/index.css.\nPage wrapper: flex flex-col bg-[#F5F5F5]. The first section (Navbar + Hero) is wrapped in a h-screen flex flex-col overflow-hidden container.\nInner content max width across sections: max-w-[88rem] mx-auto.\nCustom Logo Icon\nCreate an SVG component LogoIcon using currentColor, viewBox 0 0 256 256, with this path (a stylized \"halo\" mark made of two interlocking rounded squares):\n\n\nM 128.005 191.173 C 128.448 156.208 156.93 128 192 128 L 192 64 L 128 64 C 128 99.346 99.346 128 64 128 L 64 192 L 128 192 Z M 192 256 L 64 256 C 28.654 256 0 227.346 0 192 L 0 64 L 64 64 L 64 0 L 192 0 C 227.346 0 256 28.654 256 64 L 256 192 L 192 192 Z\n1. Navbar (absolute, transparent over hero)\nnav is absolute top-0 left-0 right-0 z-20 px-6 py-5.\nInner row: flex items-center justify-between.\nLeft: LogoIcon (w-7 h-7, black) + word \"Halo\" (text-2xl font-medium tracking-tight text-black).\nCenter (hidden below md): links Network · Ecosystem · Rewards · Help · News, gap-8, text-base text-gray-700 hover:text-black font-medium transition-colors duration-200.\nRight: black pill button \"Open Wallet\" — bg-black text-white text-base font-medium px-7 py-2.5 rounded-full hover:bg-gray-800 transition-colors duration-200.\n2. Hero Section\nOuter: flex-1 px-6 pt-20 pb-6 flex items-end.\nInner card: relative w-full rounded-2xl overflow-hidden, inline style height: calc(100vh - 96px).\nBackground video (autoplay, muted, loop, playsInline, object-cover absolute inset-0 w-full h-full): \nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_161253_c72b1869-400f-45ed-ac0c-52f68c2ed5bd.mp4\n\nContent overlay: relative z-10 flex flex-col items-start justify-start h-full p-12 pt-36.\nh1: \"Your Wealth\\nWorks\" (with <br/>) — text-black text-5xl md:text-6xl font-medium leading-tight max-w-xl mb-4, inline letterSpacing: '-0.04em'.\np: \"An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi.\" — text-black/70 text-base md:text-lg max-w-md mb-8 leading-relaxed, inline fontFamily: \"'Inter', ui-sans-serif, system-ui, sans-serif\".\nPill button \"Join us\" with arrow circle: inline-flex items-center gap-3 bg-black text-white text-base md:text-lg font-medium pl-8 pr-2 py-2 rounded-full hover:bg-gray-800. Trailing arrow inside bg-white rounded-full p-2, using ArrowRight w-5 h-5 text-black from lucide-react.\nFollowed by the Brand Marquee below.\nBrand Marquee (inside hero, below button)\nContainer: mt-24 w-full max-w-md overflow-hidden.\nInject scoped <style> with keyframes marquee translating 0 → -50%, applied to .marquee-track { display:flex; width:max-content; animation: marquee 22s linear infinite; }.\nRender the brand list twice (so it loops seamlessly).\nEach item: mx-7 shrink-0 text-black/60 whitespace-nowrap with these inline styles:\nStripe — Georgia serif, weight 700, letterSpacing -0.02em, fontSize 15px\nCoinbase — Arial sans, weight 900, letterSpacing 0.08em, fontSize 13px, uppercase\nUniswap — Trebuchet MS, weight 600, letterSpacing 0.01em, fontSize 15px, italic\nAave — Courier New monospace, weight 700, letterSpacing 0.12em, fontSize 13px, uppercase\nCompound — Palatino, Book Antiqua, weight 400, letterSpacing -0.01em, fontSize 16px\nMakerDAO — Impact, Arial Narrow, weight 400, letterSpacing 0.04em, fontSize 14px\nChainlink — Verdana, weight 700, letterSpacing -0.03em, fontSize 13px\n3. Info Section (\"Meet USD Halo.\")\nsection bg-[#F5F5F5] px-6 py-24.\nRow 1: 2-col grid (grid-cols-1 md:grid-cols-2 gap-12 mb-16 items-start).\nLeft: h2 \"Meet USD Halo.\" — text-black text-4xl md:text-5xl font-medium leading-tight mb-8, letterSpacing -0.03em. Below it, black pill \"Discover it\" button with white arrow circle (same pattern as \"Join us\" but text-base).\nRight: paragraph \"USD Halo is a reward-earning dollar coin that lets your savings grow while remaining tied to the U.S. dollar.\" — text-black/70 text-2xl md:text-3xl leading-relaxed.\nRow 2 — 4-col card grid (grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4):\nCard 1 (spans 2 cols on lg): rounded-2xl with background image: \nhttps://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260423_164207_f243351d-ed59-48ec-83a0-a5e996bdbe3c.png&w=1280&q=85\n\n backgroundSize: cover; backgroundPosition: center. Inside: p-7 min-h-80 flex flex-col justify-between. Title (top): \"Savings that bloom\" — text-black text-2xl font-medium leading-snug letterSpacing -0.02em. Body (bottom): \"Gain steady returns as your dollar tokens are routed into top-performing DeFi strategies.\" — text-black/70 text-base max-w-xs.\nCard 2: solid #2B2644, rounded-2xl, p-7, min-h-80, flex-col-justify-between. White heading \"Always fluid,\\nalways pegged.\" text-2xl font-medium, body \"Keep fully dollar-anchored with on-demand access to funds — no lockups or waits.\" text-white/60 text-base.\nCard 3: same #2B2644 styling. Heading \"Fully\\nautomated\". Body \"Skip the task of tuning positions yourself. USD Halo runs in the background for you.\"\n4. Backed By Section (marquee row)\nsection bg-[#F5F5F5] px-6 with inner max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 items-center.\nLeft col (1/4): text-black/70 text-base leading-relaxed — \"Funded by premier partners\\nand forward-thinking leaders.\"\nRight col (3/4): infinite marquee (same pattern as hero marquee but 30s linear infinite, class .backers-track, keyframes backers-marquee). Items use mx-10 shrink-0 text-black/50 whitespace-nowrap with these inline styles:\nFundamental Labs — Times New Roman serif, 400, ls 0.02em, 14px\nKUCOIN — Arial Black, 900, ls 0.08em, 16px\nNGC — Impact, 700, ls 0.05em, 18px\nNxGen — Georgia, 600, ls -0.02em, 17px\nMatter Labs — Helvetica, 700, ls -0.01em, 15px\nDEXTools — Verdana, 700, ls 0.06em, 14px, uppercase\nNGRAVE — Courier New, 700, ls 0.18em, 14px\nPolychain — Palatino, 500, ls 0.03em, 15px\nRender brands twice for the loop.\n5. Use Cases Section\nsection bg-[#F5F5F5] px-6 py-24. Inner: 2-col grid grid-cols-1 md:grid-cols-2 gap-8 items-start.\nLeft column (md:pr-12 md:pt-2):\nEyebrow: \"USD Halo in Practice\" — text-black/60 text-sm mb-2.\nh2 \"Use modes\" — text-5xl md:text-6xl font-medium leading-none mb-6, ls -0.04em.\nParagraph: \"USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more\" — text-black/60 text-base leading-relaxed max-w-sm.\nRight column: large relative rounded-3xl overflow-hidden min-h-[720px] with background video (autoplay/muted/loop/playsInline, object-cover absolute inset-0): \nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4\n\nOverlay content relative z-10 p-10 md:p-12:\nh3 \"Commerce\" — text-4xl md:text-5xl font-medium leading-tight mb-5, ls -0.03em.\nParagraph: \"Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform.\" — text-black/70 text-base max-w-md mb-8.\nInline-flex link \"Know more\" with leading circular icon: w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors containing ArrowRight w-4 h-4 text-black.\nAnimations & Interactions\nTwo CSS keyframe marquees (22s for hero brands, 30s for backers), both translating 0 → -50% on a duplicated track for seamless looping.\nAll buttons use transition-colors duration-200 with hover state hover:bg-gray-800 (or hover:bg-white for the white circle).\nNav links transition on hover from text-gray-700 to text-black.\nVideos autoplay muted with playsInline for mobile compatibility.\nComposition\nApp renders, in order:\n\nh-screen overflow-hidden wrapper containing Navbar (absolute) + HeroSection.\nInfoSection\nBackedBySection\nUseCasesSection\nAll section backgrounds are #F5F5F5. All headings use negative letter-spacing for the tight, modern fintech feel. Use font-medium (600) as the heaviest weight throughout.","url":"/prompts/halo-usd-landing"}},{"id":"taskly-hero","object":"prompt","title":"Taskly","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-taskly-poster-B5eMEGQS.png","video_url":"https://motionsites.ai/assets/hero-taskly-preview-Dq2MKaI0.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"System Prompt: High-Fidelity \"Liquid Glass\" Hero Section\n\nCore Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered gradient glow in the top-left (using blurred ellipses in light blue #60B1FF and #319AFF). The design must be fully responsive, transitioning from a single-column mobile view to a dual-column desktop layout.\n\nTypography:\n\nHeadlines & Brand: Use Fustat (Bold).\nBody & UI: Use Inter (Normal/Medium).\nHero Headline: \"Work smarter, achieve faster\" (75px, 1.05 line-height, -2px tracking).\n\nThe \"Strong Liquid Glass\" Navbar:\n\nPosition: Sticky at top-[30px], centered, w-fit.\nVisuals: backdrop-blur-[50px], background rgba(255,255,255,0.3), rounded-[16px].\nFidelity Details:\nOuter Stroke: 1px solid rgba(0,0,0,0.1).\nInner Highlight Shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.25).\nItems: Logo \"Taskly\" (Fustat), Nav links (Home, Features, Company, Pricing), and a glassy \"SignUp\" button with an arrow icon.\n\nThe Glassy Orb (Hero Right):\n\nSource URL: https://future.co/images/homepage/glassy-orb/orb-purple.webm\nBlending Mode: Must use mix-blend-screen to filter the black background.\nScaling: scale-125 to make it massive and bleed slightly off-center.\nExact Color Grade (CSS Filter): hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1). This transforms the purple asset into a vibrant, high-end \"Electric Brand Blue\" that matches the primary CTA.\n\nHero Content (Hero Left):\n\nSocial Proof: A \"Rated 4.9/5 by 2700+ customers\" badge with five orange #FF801E stars.\nSubheadline: \"Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool.\" (18px, Inter, -1px tracking).\nPrimary CTA: \"Get Started Now\" button.\nColor: rgba(0,132,255,0.8) with backdrop-blur-[2px].\nDetails: rounded-[16px], white text, inner highlight shadow inset 0px 4px 4px 0px rgba(255,255,255,0.35), and a white circular arrow icon.\nAnimation: Scale 1.02 on hover with a smooth transition.\n\nFooter Logos: Include a \"Trusted by Top-tier product companies\" section at the bottom with 5 grayscale SVG logos (e.g., placeholder logos for tech companies) spaced at gap-[100px].\n\nKey Technical Specs for the Developer:\n\nVideo Tag: autoPlay loop muted playsInline.\nContainer: Use a relative wrapper for the background glow and a z-10 main container for the content.\nSmoothing: Apply -webkit-font-smoothing: antialiased for the sharpest typography.","url":"/prompts/taskly-hero"}},{"id":"stellar-ai-hero","object":"prompt","title":"Stellar AI","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-stellar-ai-poster-BQJztWy-.png","video_url":"https://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a \"Stellar.ai\" landing page hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font (imported from Google Fonts). The page has a white background (bg-white), max-width max-w-7xl, and is centered with mx-auto.\n\nFont: Import Inter (weights 400, 500, 600, 700) from Google Fonts. Set font-family: 'Inter', sans-serif on the body.\n\nCustom CSS animations (in index.css):\n\n@keyframes fadeInUp -- from opacity: 0; transform: translateY(30px) to opacity: 1; transform: translateY(0). Class .animate-fade-in-up uses this with 0.6s ease-out forwards.\n@keyframes fadeInOverlay -- from opacity: 0 to opacity: 1. Class .animate-fade-in-overlay uses this with 0.4s ease-out forwards.\n@keyframes fadeInDialog -- from opacity: 0 to opacity: 1. Class .animate-slide-up-overlay uses this with 0.5s ease-out forwards and has transform: translate(-50%, -50%).\nEvery major section uses .animate-fade-in-up with staggered animationDelay inline styles (starting at 0.1s and incrementing by 0.1s). Each element starts with opacity: 0 inline so the animation fills it to visible.\n\nTailwind config: Default config with no custom theme extensions. Uses standard content paths.\n\nNAVIGATION (animationDelay: 0.1s):\npx-6 py-4 flex items-center justify-between max-w-7xl mx-auto\nLeft: Lucide Star icon (w-5 h-5, fill-black) + \"Stellar.ai\" text (text-lg font-semibold)\nCenter (hidden on mobile, hidden md:flex items-center gap-8): \"Solutions\" with ChevronDown, \"For Teams\" with ChevronDown, \"About Us\", \"Learn Hub\" -- all text-sm text-gray-700 hover:text-black\nRight: \"Login\" link (text-sm text-gray-700) + \"Get started free\" button (bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors)\n\nHERO SECTION (px-6 pt-24 pb-32 max-w-7xl mx-auto text-center):\nReviews Badge (delay: 0.2s): inline-flex items-center gap-2 mb-8. Contains a bordered square (w-6 h-6 border border-gray-300 rounded) with a filled Star icon inside, plus \"4.9 rating from 18.3K+ users\" (text-sm font-medium text-black).\n\nMain Heading (delay: 0.3s): text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5. First line: \"Work Smarter. Move Faster.\" Second line: \"AI Powers You Up.\" with gradient text (bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent).\n\nSubheading (delay: 0.4s): text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto. Text: \"Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time.\"\n\nCTA Button (delay: 0.5s): bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12. Text: \"Begin Free Trial\".\n\nTab Bar (delay: 0.6s): Centered bg-gray-100 rounded-lg p-1 container.\nMobile (md:hidden): 2x2 grid with 4 buttons: Analyse (BarChart3), Train (BookOpen), Testing (Users), Deploy (Rocket). Active: bg-white text-black shadow-sm. Inactive: text-gray-600.\nDesktop (hidden md:flex): Same 4 buttons in row with vertical dividers (w-px h-5 bg-gray-300).\nTabs auto-cycle every 4s using setInterval. State: useState('analyse').\n\nVideo + Overlay Section (delay: 0.7s):\nContainer: relative rounded-3xl overflow-hidden h-[400px] md:h-[500px]\nVideo: src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4\", autoPlay, loop, muted, playsInline, w-full h-full object-cover.\n\n4 Conditional Overlays per tab with animate-fade-in-overlay outer and animate-slide-up-overlay inner card:\na. Analyse: \"Set Up Your AI Workspace\" wizard with purple progress bar at 25%, 4 steps\nb. Train: \"AI Model Training\" with orange progress at 67%, 4 metrics\nc. Testing: \"Test Suite Results\" with green success, 127/127 tests\nd. Deploy: \"Deploy to Production\" with 4 checklist items, Deploy Now button\n\nCompany Logos (delay: 0.8s): mt-24 flex with INTERSCOPE, SPOTIFY, Nexera (dot grid), M3 (serif italic), LAURA COLE (LC circle), vertex (dots)","url":"/prompts/stellar-ai-hero"}},{"id":"datacore-booking-hero","object":"prompt","title":"Datacore Booking","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-datacore-booking-poster-C4umG3DT.png","video_url":"https://motionsites.ai/assets/hero-datacore-booking-preview-B3t9SRK6.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a responsive, full-screen hero section for a web application using React and Tailwind CSS.\n\nDesign System & Assets:\n\nFonts: Load and use 'Manrope' (for UI/Nav), 'Cabin' (for buttons/tags), 'Instrument Serif' (for headlines), and 'Inter' (for body text).\n\nPrimary Color: Purple #7b39fc\nSecondary/Dark Color: Dark Purple #2b2344\nBackground: Use a full-screen, absolute-positioned HTML5 video background. The video should autoplay, loop, mute, and play inline. Ensure it covers the viewport (min-h-screen, object-cover) without an overlay (keep it opaque).\n\nVideo URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4\n\n1. Navbar Component (Top Overlay)\n\nLayout: Full width, transparent background, z-20 relative positioning.\nPadding: px-6 (mobile) to px-[120px] (desktop), py-[16px].\n\nLogo (Left): Use this specific SVG path filled with white:\nPath: M1.04356 6.35771L13.6437 0.666504... (Future logo shape).\n\nNavigation Links (Center-Left, Desktop Only):\nItems: \"Home\", \"Services\" (with a ChevronDown icon), \"Reviews\", \"Contact us\".\nStyle: Manrope font, Medium weight, 14px size, White.\nHover effect: opacity-80.\n\nAction Buttons (Right, Desktop Only):\nSign In: White background, thin gray border (#d4d4d4), rounded 8px, Black text (#171717), Manrope Semibold 14px.\nGet Started: Primary Purple background (#7b39fc), rounded 8px, White text (#fafafa), Manrope Semibold 14px, subtle shadow.\n\nMobile: Hide links/buttons and show a White Menu icon (hamburger) that toggles a full-screen black overlay menu.\n\n2. Hero Content (Centered)\n\nContainer: Centered vertically and horizontally (flex-col items-center text-center), z-10 relative, top margin mt-32.\n\nTagline Pill:\nStyle: Glassmorphism effect (bg-[rgba(85,80,110,0.4)], backdrop-blur, border rgba(164,132,215,0.5)).\nShape: Rounded 10px, Height 38px.\nContent: A small inner badge (#7b39fc bg, rounded 6px) saying \"New\" followed by text \"Say Hello to Datacore v3.2\".\nFont: Cabin, Medium, 14px, White.\n\nHeadline:\nText: \"Book your perfect stay instantly and hassle-free\".\nTypography: Instrument Serif font, White.\nSize: 5xl (mobile) to 96px (desktop).\nStyling: Line-height 1.1. The word \"and\" should be italicized with specific spacing.\n\nSubtext:\nText: \"Discover handpicked hotels, resorts, and stays across your favorite destinations. Enjoy exclusive deals, fast booking, and 24/7 support.\"\nTypography: Inter font, Normal weight, 18px.\nColor: White with 70% opacity (text-white/70).\nWidth: Max width 662px.\n\nCall to Action Buttons (Row):\nButton 1: \"Book a Free Demo\" — Primary Purple (#7b39fc), rounded 10px, Cabin Medium 16px, White.\nButton 2: \"Get Started Now\" — Dark Purple (#2b2344), rounded 10px, Cabin Medium 16px, Off-white (#f6f7f9).\nHover effects: Slightly lighten backgrounds on hover.","url":"/prompts/datacore-booking-hero"}},{"id":"convix-software-hero","object":"prompt","title":"SAAS Software","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/convix-software-hero-CKWsUESj.png","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/convix-software-hero-B6-tdnN6.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a fully responsive, full-viewport hero section for a PR-agency SaaS called \"Convix Software\" with these exact specs:\n\nPage Frame\nOuter wrapper: min-h-screen w-full bg-[#ededed] p-3 sm:p-4, font-family Inter\nHero container (clips everything inside): relative w-full h-[calc(100vh-24px)] sm:h-[calc(100vh-32px)] overflow-hidden bg-[#d9d9d9] rounded-2xl sm:rounded-3xl\nBackground Video\nURL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260424_064411_9e9d7f84-9277-41f4-ab10-59172d89e6be.mp4\nAbsolutely positioned, inset-0 w-full h-full object-cover pointer-events-none\nAttributes: autoPlay, loop, muted, playsInline, preload=\"auto\", disableRemotePlayback, webkit-playsinline=\"true\", x5-playsinline=\"true\"\nPoster fallback: https://images.unsplash.com/photo-1557683316-973673baf926?w=1600&q=60\nAbove the video: absolute inset-0 bg-white/10 overlay\nForeground content wrapper: relative z-10\nFonts (/src/styles/fonts.css)\nImport from Google Fonts:\n\nInter weights 400, 500, 600, 700\nInstrument Serif regular + italic\nNavbar (floating pill, responsive with hamburger)\nWrapper: flex justify-center pt-4 sm:pt-6 px-3 sm:px-4\nPill: bg-white rounded-full shadow-sm border border-neutral-200 pl-2 pr-2 py-2 w-full max-w-[760px] relative\nLogo (left, shrink-0): orange #ef4d23 8-petal flower SVG — 8 circles at radius 10 around center (16,16) plus center circle, all r=3.5, viewBox 32×32, rendered w-7 h-7 sm:w-8 sm:h-8\nDesktop links (hidden md:flex, gap-6, 14px): \"Home\" (with 1.5px black dot), \"Features\", \"About\", \"Pages\" (#ef4d23 + ChevronDown 3.5)\nRight cluster (ml-auto): ShoppingCart icon (hidden on mobile), then orange #ef4d23 rounded-full button \"Get early access\" (desktop) / \"Early access\" (mobile) with white/20 inner circle holding ChevronRight\nMobile-only Menu (lucide) hamburger button (md:hidden)\nWhen open: dropdown panel absolute top-full left-2 right-2 mt-2 bg-white rounded-2xl shadow-lg border border-neutral-200 p-3 z-20 listing the same nav items vertically\nuseState open toggles the menu\nHero Content (centered)\nflex flex-col items-center px-4 pt-10 sm:pt-16 pb-8 sm:pb-12 text-center\nBadge: inline-flex items-center gap-2 bg-white rounded-full px-4 py-1.5 shadow-sm, 13px — orange dot + \"Convix Software\"\nHeadline <h1> with inline style fontSize: clamp(36px, 8vw, 72px); lineHeight: 1.05; fontWeight: 500; letterSpacing: -0.02em, mt-5 sm:mt-6 max-w-4xl:\n\"Shaping \" + <span style={{fontFamily:\"'Instrument Serif', serif\", fontStyle:\"italic\", fontWeight:400}}>Agencies</span> + <br> + \"of tomorrow\"\nSubtitle <p> mt-4 sm:mt-6 text-neutral-700 px-2, fontSize: clamp(13px, 3.5vw, 16px): \"The All-In-One Software Powering the Future of PR Agencies\"\nCTA button mt-6 sm:mt-8 inline-flex items-center gap-3 bg-[#0b0f1a] text-white rounded-full pl-6 sm:pl-7 pr-2 py-2 sm:py-2.5, 14px: \"Get Started\" + w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-white/15 containing ChevronRight (4×4)\nDashboard Preview\nWrapper: bg-[#f5f2ee] rounded-3xl p-4 sm:p-6 w-full max-w-[880px] mx-auto\nGrid: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4\nOuter container around it: px-3 sm:px-4\nCard 1 — Clicks (white, rounded-2xl, p-5)\nHeader: orange \"Clicks\" + neutral \"This Month\" (13px)\nBig number \"6,896\" (28px, weight 600) + red pill bg-red-50 text-red-600 rounded-full px-2 py-0.5 with TrendingDown icon \"-3,382 (33%)\" (11px)\nSmall caption \"Compared to yesterday\"\nCentered \"Month Target achieved\" label\nGauge at 92% in #ef4d23, with end labels \"389K\" / \"425K\"\nToggle pill bottom: bg-neutral-100 rounded-full p-1 flex — \"Impressions\" active (white card + shadow) / \"Clicks\" inactive\nCard 2 — Form (white, rounded-2xl, p-5, flex flex-col gap-3)\nTwo label+dropdown groups (label 12px neutral-700, button bordered rounded-lg px-3 py-2 with ChevronDown):\n\"Show figures for\" → \"This month\"\n\"Compare period by\" → \"Month-to-date (MTD)\"\nTwo label+input groups with # prefix:\n\"Ste targets (This month)\" → 10\n\"Ste targets (This year)\" → 100\nFooter: orange #ef4d23 \"Save\" button (rounded-lg px-5 py-2), underlined \"Cancel\", X icon pushed to right (ml-auto)\nCard 3 — Video Starts (white, rounded-2xl, p-5)\nHeader: orange \"Video Starts\" + \"today\"\nBig \"0\" + neutral pill with TrendingUp + \"0\"\n\"Compared to yesterday\"\nGauge at 68% in #9ca3af (no end labels)\nToggle pill: \"Video Clicks\" active / \"Video Starts\"\nGauge Component (reusable)\nProps: value, color=\"#ef4d23\", showLabels, min, max\nSVG viewBox 0 0 200 120, max-width 260px\n40 tick marks spanning a 180° arc (start at angle π, sweep to 2π); active count = round(value/100 * 40)\nEach tick: <line> from radius (r-10) to r=80 around center (100,100), strokeWidth=2.5, strokeLinecap=\"round\", active uses color, inactive #d4d4d8\nCenter text: <text x=100 y=105 textAnchor=\"middle\">{value}%</text>, fontSize 22, fontWeight 600\nIf showLabels: small flex row below SVG, 11px neutral-500, justify-between, showing min and max\nColors\nPrimary orange: #ef4d23\nDark CTA: #0b0f1a\nPage bg: #ededed; hero bg: #d9d9d9; dashboard tray: #f5f2ee\nIcons (lucide-react)\nChevronDown, ChevronRight, ShoppingCart, Menu, TrendingDown, TrendingUp, X\n\nFile Structure\nsrc/app/App.tsx\nsrc/app/components/Navbar.tsx\nsrc/app/components/DashboardPreview.tsx\nsrc/app/components/Gauge.tsx\nsrc/styles/fonts.css\nBehavior\nNo custom animations; only the native looping muted background video\nEntire hero (video + content + dashboard) is clipped together by the rounded container, so the dashboard cards bleed off the bottom edge\nFully responsive: navbar collapses to hamburger under md, headline/CTA scale via clamp(), dashboard grid steps from 1 → 2 → 3 columns","url":"/prompts/convix-software-hero"}},{"id":"neuralyn-hero","object":"prompt","title":"Neuralyn","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-neuralyn-poster-BrDgI9_4.png","video_url":"https://motionsites.ai/assets/hero-neuralyn-preview-Br4FRDQA.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a dark landing page for \"Neuralyn\" — an analytics dashboard SaaS. Use React + Vite + Tailwind CSS + TypeScript + Framer Motion + shadcn/ui.\n\nFonts\nInter (400, 500, 600, 700) for body/UI via @fontsource/inter\nInstrument Serif (400, 400-italic) for the italic accent word via @fontsource/instrument-serif\n\nColor Theme (all HSL, dark mode by default in :root)\nBackground: 0 0% 0% (pure black)\nForeground: 0 0% 100% (pure white)\nMuted foreground: 0 0% 65%\nCard: 0 0% 5%\nBorder: 0 0% 20%\nHero subtitle: 210 17% 95%\n\nPage Structure\nSection 1: Hero (full viewport height, overflow-hidden)\n\nNavbar — horizontal, padded px-8 md:px-28 py-4:\n\nLeft: Logo image + \"Neuralyn\" text (text-xl font-bold tracking-tight) + nav links (Home, Services with ChevronDown icon, Reviews, Contact us) — links hidden on mobile, gap-1 between links, gap-12 md:gap-20 between logo and links\nRight: \"Sign In\" button — solid white background (bg-foreground), black text (text-background), rounded-lg text-sm font-semibold, hover opacity transition\n\nHero Content — centered column, mt-16 md:mt-20 px-4:\n\nTag pill: A \"liquid glass\" styled pill (liquid-glass class) with inner \"New\" badge (white bg, black text, rounded-md text-sm font-medium px-2 py-0.5) + \"Say Hello to Corewave v3.2\" in text-sm font-medium text-muted-foreground. Pill has px-3 py-2 rounded-lg mb-6.\nTitle: text-5xl md:text-7xl, tracking-[-2px], font-medium, leading-tight md:leading-[1.15] mb-3. Text: \"Your Insights.\" / \"One Clear Overview.\" — the word \"Overview\" is in Instrument Serif italic (font-serif italic font-normal)\nSubtitle: text-lg font-normal leading-6 opacity-90 mb-8, color uses CSS variable --hero-subtitle. Text: \"Neuralyn helps teams track metrics, goals, and progress with precision.\" with a <br/> after \"goals,\"\nCTA Button: \"Get Started for Free\" — solid white (bg-foreground text-background), rounded-full px-8 py-3.5 text-base font-medium, whileHover: scale 1.03, whileTap: scale 0.98\n\nDashboard + Video Area — full viewport width using w-screen with marginLeft: calc(-50vw + 50%) trick, aspect-ratio: 16/9, positioned relative:\n\nBackground video: <video>, absolutely positioned inset-0 w-full h-full object-cover. URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4\nDashboard image: Absolutely positioned, centered, max-w-5xl w-[90%] rounded-2xl, mixBlendMode: \"luminosity\". Has parallax scroll (y: 0→-250).\nBottom gradient fade: Absolutely positioned at bottom of section, h-40, gradient from background to transparent, z-30, pointer-events-none.\n\nParallax Scroll Effects (Framer Motion useScroll({ target: sectionRef, offset: [\"start start\", \"end start\"] }) + useTransform):\n\nHero text content group: y: [0, -200] and opacity: [1, 0] (fades over first 50% of scroll)\nDashboard image: y: [0, -250]\n\nEntrance Animations: Staggered initial={{ opacity: 0, y }} / animate={{ opacity: 1, y: 0 }}:\n\nTag pill: y: 10, duration 0.5s, delay 0\nTitle: y: 20, duration 0.6s, delay 0.1\nSubtitle: y: 20, duration 0.6s, delay 0.2\nCTA: y: 20, duration 0.6s, delay 0.3\nDashboard area: y: 40, duration 0.8s, delay 0.4\n\nLiquid Glass CSS\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\nSection 2: Testimonial (min-h-screen, centered, py-24 md:py-32 px-8 md:px-28)\n\nQuote symbol image (w-14 h-10 object-contain)\nTestimonial text (text-4xl md:text-5xl font-medium leading-[1.2], wrapped in flex flex-wrap): \"Neuralyn revolutionized how we handle financial insights using smart analytics. We are now driving better outcomes quicker than we ever imagined! Neuralyn revolutionized how we handle financial insights using smart analytics.\"\nScroll-driven word reveal: Each word is a <motion.span> with mr-[0.3em]. Uses useScroll({ target: containerRef, offset: [\"start end\", \"end center\"] }). Each word maps to a sequential range [i/total, (i+1)/total] → opacity: [0.2, 1] and color: [\"hsl(0 0% 35%)\", \"hsl(0 0% 100%)\"].\nClosing \" quotation mark in text-muted-foreground ml-2\nAuthor row (flex items-center gap-4): Avatar image (w-14 h-14 rounded-full border-[3px] border-foreground object-cover) + name \"Brooklyn Simmons\" (text-base font-semibold leading-7 text-foreground) + role \"Product Manager\" (text-sm font-normal leading-5 text-muted-foreground)\nLayout: max-w-3xl mx-auto, content left-aligned (items-start), gap-10 between elements\n\nAssets needed:\nlogo.png — small logo icon\nhero-dashboard.png — dashboard screenshot\nquote-symbol.png — decorative quote mark\ntestimonial-avatar.png — circular headshot","url":"/prompts/neuralyn-hero"}},{"id":"digitwist-hero","object":"prompt","title":"Digitwist AI Builder","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-digitwist-poster-DbmglO1A.png","video_url":"https://motionsites.ai/assets/hero-digitwist-preview-s2pJetjQ.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a dark mode hero section for an AI website builder with the following exact specifications:\n\n## Technical Setup\n\n### Required Packages\nInstall these packages:\n- `motion` (version 12.23.24 or later) - for animations\n- `hls.js` (version 1.6.15 or later) - for video streaming\n- `lucide-react` (version 0.487.0 or later) - for icons\n\n### Fonts\nImport these Google Fonts:\n```css\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');\n```\n\n## Layout Structure\n\n### Navbar Component\nCreate a fixed, transparent navbar with:\n\n**Position & Styling:**\n- Fixed to top, full width, z-index 50\n- Background: fully transparent (bg-transparent)\n- Padding: px-6 py-4\n- Flexbox layout: items-center justify-between\n\n**Left Section:**\n- Sunburst icon (24x24px SVG) in white color\n\n**Center Section** (hidden on mobile, visible md:flex):\n- Navigation links: \"Products\" (with ChevronDown icon), \"Customer Stories\", \"Resources\", \"Pricing\"\n- Font: Instrument Sans, text-sm, font-medium\n- Color: text-white/80, hover:text-white\n- Gap: gap-8\n\n**Right Section:**\n- \"Book A Demo\" link (hidden on small screens, sm:block)\n- \"Get Started\" button: white background, black text, rounded-full, px-5 py-2.5, font-semibold\n\n### Hero Section Component\n\n**Container:**\n- Relative positioning, full width, min-h-screen\n- Background color: #000000 (pure black)\n- Text color: white\n- Overflow hidden\n\n**Background Video Layer:**\n- Video URL: https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8\n- Video implementation using HLS.js with Safari fallback\n- Video properties: muted, loop, playsInline\n- Object-fit: cover, opacity: 60%\n- Poster image fallback: https://images.unsplash.com/photo-1647356191320-d7a1f80ca777?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdCUyMGRhcmslMjB0ZWNobm9sb2d5JTIwbmV1cmFsJTIwbmV0d29ya3xlbnwxfHx8fDE3Njg5NzIyNTV8MA&ixlib=rb-4.1.0&q=80&w=1080\n\n**Video Overlay:**\n- Black overlay: bg-black/60 with backdrop-blur-[2px]\n\n**Decorative Gradients:**\n- Top-left gradient: position top-[-20%] left-[20%], size 600x600px, bg-blue-900/20, blur-[120px], mix-blend-screen\n- Bottom-right gradient: position bottom-[-10%] right-[20%], size 500x500px, bg-indigo-900/20, blur-[120px], mix-blend-screen\n\n**Content Container:**\n- Max-width: 5xl (max-w-5xl)\n- Center aligned (mx-auto, items-center, text-center)\n- Z-index: 10, top margin: mt-20\n- Vertical spacing: space-y-12\n\n**Pre-headline:**\n- Text: \"Design at the speed of thought\"\n- Font: Instrument Serif\n- Size: text-3xl (mobile), sm:text-5xl, lg:text-[48px]\n- Line height: leading-[1.1]\n- Color: white\n- Animation: Motion fade up (opacity 0→1, y 20→0, duration 0.6s)\n\n**Main Headline:**\n- Text: \"Build Faster\"\n- Font: Instrument Sans, font-semibold\n- Size: text-6xl (mobile), sm:text-8xl, lg:text-[136px]\n- Line height: leading-[0.9], letter spacing: tracking-tighter\n- Gradient: bg-gradient-to-b from-white via-white to-[#b4c0ff]\n- Text effect: bg-clip-text text-transparent\n- Animation: Motion scale (opacity 0→1, scale 0.9→1, delay 0.2s, duration 0.6s)\n\n**Subheadline:**\n- Text: \"Create fully functional, SEO-optimized websites in seconds with our advanced AI engine.\"\n- Font: Instrument Sans\n- Size: text-lg (mobile), sm:text-[20px]\n- Line height: leading-[1.65]\n- Color: white, opacity-70\n- Max width: max-w-xl\n- Animation: Motion fade (opacity 0→0.7, delay 0.4s, duration 0.6s)\n\n**CTA Buttons:**\n\nPrimary Button:\n- Style: White pill-shaped with blue arrow\n- Layout: pl-6 pr-2 py-2, rounded-full\n- Background: white\n- Text: \"Start Building Free\" (font-medium, text-lg, Instrument Sans, color #0a0400)\n- Arrow container: 40x40px circle, bg-[#3054ff], hover:bg-[#2040e0]\n- Icon: ArrowRight (lucide-react), white, 20x20px\n- Hover effect: shadow-[0_0_20px_rgba(255,255,255,0.3)], scale-105\n\nSecondary Button:\n- Text: \"See Examples\"\n- Style: text link with arrow\n- Color: text-white/70, hover:text-white\n- Background: backdrop-blur-sm, hover:bg-white/5\n- Padding: px-4 py-2, rounded-lg\n- Icon: ArrowRight with group-hover:translate-x-1 transition\n\nButton Container:\n- Layout: flex-col (mobile), sm:flex-row\n- Gap: gap-6, items centered\n- Animation: Motion fade up (opacity 0→1, y 20→0, delay 0.6s, duration 0.5s)\n\n## HLS.js Video Implementation\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport Hls from \"hls.js\";\n\nconst videoRef = useRef<HTMLVideoElement>(null);\nconst videoSrc = \"https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8\";\n\nuseEffect(() => {\n  const video = videoRef.current;\n  if (!video) return;\n\n  if (Hls.isSupported()) {\n    const hls = new Hls();\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n    hls.on(Hls.Events.MANIFEST_PARSED, () => {\n      video.play().catch((e) => console.log(\"Auto-play prevented:\", e));\n    });\n    return () => {\n      hls.destroy();\n    };\n  } else if (video.canPlayType(\"application/vnd.apple.mpegurl\")) {\n    video.src = videoSrc;\n    video.addEventListener(\"loadedmetadata\", () => {\n      video.play().catch((e) => console.log(\"Auto-play prevented:\", e));\n    });\n  }\n}, []);\n```\n\n## Motion Animations\nImport: `import { motion } from \"motion/react\"`\n\n- Pre-headline: initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}\n- Main headline: initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 0.6 }}\n- Subheadline: initial={{ opacity: 0 }} animate={{ opacity: 0.7 }} transition={{ delay: 0.4, duration: 0.6 }}\n- Buttons: initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.5 }}\n\n## Color Palette\n- Background: #000000\n- Primary text: white\n- Secondary text: white/80, white/70\n- Primary button background: white\n- Primary button text: #0a0400\n- Primary button accent: #3054ff, hover #2040e0\n- Gradient end color: #b4c0ff\n- Decorative gradients: blue-900/20, indigo-900/20","url":"/prompts/digitwist-hero"}},{"id":"dot-hero","object":"prompt","title":"Dot","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/dot-hero-B-QWkNdy.png","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/dot-hero-Csf49OgS.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a React landing page exactly as specified below. Use React 19, Tailwind CSS v4, and motion/react for animations.\n1. Fonts & Global CSS Setup:\nIn index.html, import these Google Fonts:\nInstrument Serif (weights 400, italic 400)\nInter (weights 100 to 900)\nIn src/index.css, import this custom font for the Nokia text:\n@import url('https://db.onlinewebfonts.com/c/440b53b1a1c65037f944ff19259d8014?family=Nokia+Cellphone+FC+Small');\nConfigure the Tailwind theme variables in index.css:\n--font-instrument: \"Instrument Serif\", serif;\n--font-serif: \"Instrument Serif\", serif;\n--font-sans: \"Inter\", sans-serif;\n--font-nokia: \"Nokia Cellphone FC Small\", monospace;\nCreate a @utility font-instrument { font-family: \"Instrument Serif\", serif; }\nSet the root font-family to var(--font-sans) and apply anti-aliasing.\n2. Component Structure:\nCreate one main App.tsx file containing 4 components: TypingMessages, Navbar, Hero, and App.\n3. Navbar Component:\nContainer: Fixed to the top top-6, centered horizontally left-1/2 -translate-x-1/2, width 95% w-[95%] max-w-5xl. z-50, pointer-events-none.\nNav Tag: pointer-events-auto, backdrop blur, rounded full pill shape, transparent background with border border-black/10. Flex between items.\nLogo: Text \"dot.\" using font-instrument text-[28px] tracking-tight text-[#1a1a1a].\nLinks: \"Philosophy\", \"Trust\", \"Access\", \"Tribe\". Hidden on mobile, flex on desktop (gap-10). font-sans text-[14px] text-[#1a1a1a] with hover opacity fading.\nCTA Button (\"Link up\"):\nBackground #0871E7, rounded full, white text font-sans text-[14px].\nShadow: shadow-[inset_0_-4px_4px_rgba(255,255,255,0.39)] outline-1 outline-[#0871E7] -outline-offset-1.\nAdd a subtle top glint effect using an absolutely positioned rectangle inside the button: w-[80%] h-4 left-[10%] top-[1px] bg-gradient-to-b from-[#DEF0FC] to-transparent rounded-[12px]. Make it scale wider on group hover (group-hover:scale-x-105).\n4. Hero Component:\nContainer: min-h-screen bg-[#F3F4ED] pt-24 md:pt-32 flex column centered.\nVideo Background: Absolute positioning inset-0 z-0. Use an HTML5 <video> set to autoplay, loop, muted, playsInline, scaling with object-cover.\nVideo Source: EXACTLY https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_054418_a6d194f0-ac86-4df9-abe5-ded73e596d7c.mp4. Add an overlaid empty div with bg-white/5 for a slight tint.\nHero Text Container: Relative z-20, pointer-events-none, text-centered layout.\nMain Headline: \"Short notes. <br /> Daily calm.\"\nAnimate using motion.div (from opacity: 0, scale: 0.95 to opacity: 1, scale: 1 over 1.5s with ease [0.16, 1, 0.3, 1]).\nStyle: font-instrument text-[38px] md:text-[56px] lg:text-[72px] leading-[0.85] tracking-tight text-[#1a1a1a] mb-6.\nSub-headline: \"Linked with a single anonymous peer. One message every day. A quiet rhythm in the digital noise.\"\nAnimate using motion.div (from opacity: 0, y: 20 to opacity: 1, y: 0 over 1.2s, delay: 0.3, ease [0.16, 1, 0.3, 1]).\nStyle: font-sans text-[16px] md:text-[18px] text-[#1a1a1a]/70 leading-relaxed font-normal max-w-xl mx-auto.\nInclude the TypingMessages component inside the hero to overlap on the phone screen in the video.\n5. TypingMessages Component:\nLogic: Cycle through an array of messages: [\"Are you here?\", \"Yes, I am.\", \"Speak soon.\"].\nTyping speed: 100ms. Deleting speed: 50ms. Pause before deleting: 2000ms.\nPositioning: Absolute position it to sit perfectly on the phone screen inside the video:\nabsolute left-[48.5%] md:left-[47.5%] lg:left-[48.5%] -translate-x-1/2 bottom-[32%] z-30 w-[110px] sm:w-[130px] flex justify-start text-left.\nText Style: font-nokia text-[#2A3616] text-[10px] sm:text-[14px] leading-tight break-words min-h-[1.5em].\nCursor: Add a blinking Framer Motion cursor motion.span (w-1.5 h-3 bg-[#2A3616] ml-1 align-middle) animating opacity from 0 to 1 to 0 over 0.8s, repeating infinitely, linearly.","url":"/prompts/dot-hero"}},{"id":"design-rocket-email-hero","object":"prompt","title":"Email Marketing","summary":"A preview-led email marketing prompt for generating a polished AI-built interface.","category":"Email Marketing","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-design-rocket-email-poster-CansTVuy.png","video_url":"https://motionsites.ai/assets/hero-design-rocket-email-preview-DBed7Yfk.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Prompt: Recreate \"Design Rocket Certificates\" Email-Style Landing Page\nBuild a single-page React + TypeScript + Vite + Tailwind CSS project that renders an email-style marketing page for a \"Design Rocket Certificates\" AI leadership course, built in collaboration with Microsoft. Use lucide-react for icons. No other UI libraries.\n\nGlobal setup\nindex.html\n\nTitle: Newsletter Design Build Out\nPreconnect to fonts.googleapis.com and fonts.gstatic.com\nLoad Google Fonts: Instrument Serif (ital 0,1) and Inter (weights 400, 500, 600, 700)\nsrc/index.css\n\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n  --font-display: 'Instrument Serif', serif;\n  --font-body: 'Inter', sans-serif;\n}\n\nbody {\n  font-family: var(--font-body);\n  font-weight: 400;\n  -webkit-font-smoothing: antialiased;\n}\nHeadings use inline style={{ fontFamily: \"'Instrument Serif', serif\" }}. Body copy uses Inter (default).\n\nPage shell\nOuter page: min-h-screen bg-[#050505] py-10 px-4 font-sans\nEmail container: max-w-[640px] mx-auto shadow-2xl overflow-hidden ring-1 ring-white/5\nContent card: bg-[#111111] text-[#F2F2F2]\nShared components\nStep — numbered row\n\nWrapper: flex items-start gap-5 mb-6 last:mb-0\nNumber badge: flex-shrink-0 w-7 h-7 rounded-md bg-[#DCFF00] flex items-center justify-center text-[#0A0A0A] font-bold text-xs mt-1 showing {number}.\nText: text-[17px] leading-[1.55] text-[#E8E8E8]\nDivider\n\npy-8 flex justify-center containing h-px w-24 bg-white/20\nPrimaryButton (lime CTA, with arrow)\n\ninline-flex items-center gap-3 bg-[#DCFF00] text-[#0A0A0A] font-bold rounded-lg px-6 py-3 hover:bg-[#c9ea00] hover:-translate-y-0.5 transition-all duration-200\nContains the label and a lucide-react ArrowRight icon w-5 h-5 strokeWidth={2.5}\nSolidButton (white pill)\n\ninline-block bg-white text-[#0A0A0A] font-bold rounded-lg px-8 py-3 hover:bg-[#E8E8E8] hover:-translate-y-0.5 transition-all duration-200\nSection 1 — Hero (video background)\nWrapper: relative w-full overflow-hidden with inline style={{ aspectRatio: '640 / 820' }}\nBackground video (absolutely filling container, object-cover, autoplay muted loop playsInline): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260419_064822_f120e48a-d545-45dd-a02d-facb07829888.mp4\nOverlay gradient (absolute inset-0): linear-gradient(to bottom, rgba(17,17,17,0) 45%, rgba(17,17,17,0.45) 68%, rgba(17,17,17,0.9) 88%, rgba(17,17,17,1) 100%)\nForeground stack: relative z-10 h-full flex flex-col items-center text-center px-6 pt-12 pb-10\nTop brand block (white):\n\"Design Rocket\" — Instrument Serif, text-[28px] leading-[0.95] tracking-tight\n\"CERTIFICATES\" — text-[13px] tracking-[0.22em] font-medium mt-1\nSpacer mt-40, then \"NOW AVAILABLE\" — text-white text-[13px] tracking-[0.28em] font-semibold\nflex-1 spacer pushing headline to bottom\nHeadline (Instrument Serif): text-white text-[58px] leading-[1.02] tracking-tight max-w-[560px]\nText: Learn to lead AI\nand unlock new value\nCTA pill (note: uses #D8F90A not the card lime):\nmt-10 inline-flex items-center gap-3 bg-[#D8F90A] text-[#1E1E1E] font-semibold rounded-full px-8 py-4 hover:bg-[#c9ea00] hover:-translate-y-0.5 transition-all duration-200\nLabel \"Enroll Now\" + ArrowRight w-5 h-5 strokeWidth={2.5}\nSection 2 — Intro copy + CTA\nContainer px-[78px] pb-8 pt-4, centered paragraph text-[18px] leading-[1.55]:\nBuilt in collaboration with Microsoft, this certificate course gives you the toolkit to lead AI transformation across your organization. Learn to spot opportunities, launch AI pilots, and scale adoption grounded in responsible practices and proven frameworks.\n\nflex justify-center pb-14 with <PrimaryButton label=\"Get Started\" />\n<Divider />\nSection 3 — \"Transform how you lead with AI\"\nHeading container px-9 pb-8, Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight: Transform how you lead with AI\nVideo card px-[42px] pb-10:\nAnchor: block overflow-hidden rounded-[14px] group\nVideo: autoplay/muted/loop/playsInline, w-full h-[370px] object-cover rounded-[14px] transition-transform duration-700 group-hover:scale-[1.03]\nSrc: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260419_065931_e3ca7b53-d32e-4ad5-81de-dc9d6fcfda6d.mp4\nSteps list container px-[76px] pb-10, inner max-w-[489px] mx-auto, rendering four <Step>s:\nLearn how to spot AI opportunities that boost productivity across roles and deliver visible results.\nBuild structures that support your team so AI efficiencies multiply across the organization.\nGain the skills to drive culture change like securing buy-in and reducing resistance.\nGet frameworks to deliver AI pilots that prove impact fast and build credibility with measurable results.\nflex justify-center pb-14 with <SolidButton label=\"Enroll Now\" />\n<Divider />\nSection 4 — \"Build your AI transformation roadmap\"\nHeading container pb-7 px-9, Instrument Serif text-center text-[46px] leading-[1.05] tracking-tight:\nBuild your AI\ntransformation roadmap\nVideo card px-[42px] pb-10 (same classes as Section 3) with src:\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260417_110451_9f82b157-dc92-4a9f-a341-c25594ec20e1.mp4\nParagraph container px-[78px] pb-8, centered text-[18px] leading-[1.55]:\nYou'll finish this hands-on course with a personal AI Transformation Plan: your playbook for pilot proposals, data strategy and governance. Use it to help secure buy-in, guide rollout, and scale adoption responsibly.\n\nflex justify-center pb-14 with <SolidButton label=\"Learn More\" />\nSection 5 — Lime CTA card\nOuter px-14 pb-12\nCard: bg-[#D8F90A] rounded-[10px] px-8 py-12 text-center\nHeading (Instrument Serif): text-[#1E1E1E] text-[52px] leading-[1.02] tracking-tight mb-3\nReady to lead AI\nat work?\nSubtext: text-[#1E1E1E] text-[18px] leading-[1.5] mb-8 px-4 — Enroll now and be the leader your team has been waiting for.\nCentered <PrimaryButton label=\"Enroll Now\" />\nFooter\nbg-[#080808] text-white pt-12 px-10 text-center border-t border-white/5\nWordmark link text-[30px] font-bold tracking-tight text-white hover:text-[#DCFF00] transition-colors → \"Design Rocket\" (wrapped in pb-8 flex justify-center)\nDisclaimer paragraph text-[12px] text-[#83837D] leading-[1.5] pb-8:\nMicrosoft is a collaborator on this specific course. Microsoft does not endorse\nDesign Rocket generally or other Design Rocket products.\n\nDivider: flex justify-center pb-8 with inner h-px w-24 bg-white/20\nSocial icon row flex justify-center gap-5 pb-5 — six circular buttons mapping [Facebook, Twitter, Instagram, Youtube, Linkedin, Music2] from lucide-react. Each:\nw-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white hover:text-[#1E1E1E] hover:border-white transition-colors, icon w-[18px] h-[18px]\nUnsubscribe note text-[10px] text-[#83837D] pb-4 leading-[1.6]:\nIf you no longer want to receive updates on Design Rocket Certificates,\nyou can unsubscribe at any time by clicking \"unsubscribe\" below.\n\nLink row text-[12px] pb-3 space-x-2: Support | Privacy | Terms | Unsubscribe (pipes text-[#8F8E88], links hover:underline)\nCopyright anchor text-[12px] text-white/80 hover:text-white inline-block:\n©2026 Design Rocket, 660 4th Street #443, San Francisco, CA 94107 USA\nTrailing pb-10 spacer\nAnimation / interaction summary\nAll buttons: hover:-translate-y-0.5 transition-all duration-200 plus background-color change on hover.\nVideo cards: wrapper overflow-hidden rounded-[14px] group; video scales on hover via transition-transform duration-700 group-hover:scale-[1.03].\nFooter wordmark and social icons: smooth color transitions via transition-colors.\nVideos auto-play muted, loop, and playsInline for mobile autoplay.\nColor palette\nPage bg #050505, card bg #111111, footer bg #080808\nText #F2F2F2, secondary #E8E8E8, muted #83837D, divider #8F8E88\nLime primary #DCFF00, lime variant #D8F90A, lime hover #c9ea00\nDark text on lime #0A0A0A / #1E1E1E\nFonts\nDisplay: Instrument Serif (all large headings, wordmark in hero)\nBody / UI: Inter","url":"/prompts/design-rocket-email-hero"}},{"id":"duolingo-styleguide-hero","object":"prompt","title":"Duolingo Styleguide","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-duolingo-styleguide-poster-CPG13g3T.png","video_url":"https://motionsites.ai/assets/hero-duolingo-styleguide-preview-1HTxQ6Tj.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Fonts\nPrimary font: 'Nunito' from Google Fonts (weights: 400, 500, 600, 700, 800, 900)\nDisplay/heading font: 'Feather Bold' from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold\nFont stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif\nColor Variables (CSS custom properties)\n\n--green: rgb(88, 204, 2)\n--green-hover: rgb(75, 178, 0)\n--green-shadow: #61B800\n--dark-blue: rgb(16, 15, 62)\n--blue: rgb(28, 176, 246)\n--gray-text: rgb(75, 75, 75)\n--gray-light: rgb(119, 119, 119)\n--border-color: rgb(229, 229, 229)\n--nav-text: rgb(175, 175, 175)\n--footer-green: #4EC604\n--red: #FF4B4B\n--orange: #FF9600\n--golden: #FFC800\nStructure & Layout\nFixed Navbar (64px height, white background, bottom border)\nLeft side: Duolingo logo image (https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg, 140x33px), followed by a 1px vertical divider (24px tall), then \"STYLE GUIDE\" label (11px, uppercase, letter-spacing 1.5px, gray)\nRight side: Horizontal nav links - \"Colors\", \"Type\", \"Buttons\", \"Cards\", \"Components\" (13px, bold, uppercase, 0.5px letter-spacing, gray, with green hover/active states and subtle green background on hover)\nMax-width: 1440px, centered\nHero Section (centered, green-to-white gradient background)\nHeadline: \"duolingo design\" in Feather Bold font, 52px, green color (#58CC02), lowercase\nDescription: \"A comprehensive visual reference for the Duolingo design system covering colors, typography, button variants, cards, and UI components.\" -- 17px, gray-light color, max-width 520px, 1.5 line-height\nTwo buttons below: Primary \"GET STARTED\" button (green, white text, 12px border-radius, 4px green box-shadow for 3D effect, uppercase bold) and Secondary \"I ALREADY HAVE AN ACCOUNT\" button (transparent with 2px gray border, blue text, 4px gray box-shadow for 3D effect)\nBoth buttons: 48px height, 24px horizontal padding, 15px font-size, 700 weight, uppercase\nButtons have active state: box-shadow removed, translateY(4px)\nPadding: 56px top, 40px sides, 40px bottom\nMain Grid (2-column grid, no gap, max-width 1440px)\nEach panel has 36px vertical and 40px horizontal padding, bottom border and right border (border-color). Even panels have no right border.\n\nEach panel has a section label: 11px, 800 weight, uppercase, 2px letter-spacing, gray (nav-text), with a 1px line extending to the right via ::after pseudo-element.\n\nPanels in order (left-to-right, top-to-bottom):\n\nPanel 1: Color Palette (light)\nGrid of 12 color swatches, grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)), 12px gap. Each swatch:\n\nSquare (aspect-ratio: 1), 12px border-radius, 1px border rgba(0,0,0,0.06)\nHover: scale(1.05) with box-shadow 0 8px 24px rgba(0,0,0,0.12)\nBelow swatch: name (12px, bold, gray-text) and hex value (10px, gray-light, semi-bold)\nColors in order:\n\nGreen -- rgb(88, 204, 2) -- #58CC02\nGreen Hover -- rgb(75, 178, 0) -- #4BB200\nBlue -- rgb(28, 176, 246) -- #1CB0F6\nDark Blue -- rgb(16, 15, 62) -- #100F3E\nRed -- #FF4B4B\nOrange -- #FF9600\nGolden -- #FFC800\nFooter Green -- #4EC604\nGray Text -- rgb(75, 75, 75) -- #4B4B4B\nGray Light -- rgb(119, 119, 119) -- #777777\nNav Text -- rgb(175, 175, 175) -- #AFAFAF\nBorder -- rgb(229, 229, 229) -- #E5E5E5\nPanel 2: Typography (light)\nVertical stack with 20px gap. Each row is a flex row (baseline-aligned, 20px gap) with a meta column (80px wide, right-aligned) showing size in blue (11px bold) and weight label below (10px, nav-text color), then the sample text.\n\nRows:\n\n48px / Feather Bold -- \"Display\" -- green color, Feather Bold font\n32px / Bold 700 -- \"Heading One\" -- gray-text color\n28px / Feather Bold -- \"heading two\" (lowercase) -- green color, Feather Bold font\n18px / Medium 500 -- \"Body text for paragraphs and descriptions with comfortable reading line-height.\" -- gray-light color, 1.6 line-height\n14px / Bold 700 -- \"CAPTION LABEL\" -- uppercase, nav-text color, 0.5px letter-spacing\n12px / Semi 600 -- \"Small utility text for metadata and hints\" -- gray-light color\nPanel 3: Button Variants (light)\nVertical stack with 16px gap. Each row has an 80px label (10px, bold, uppercase, 1px letter-spacing, nav-text) then buttons with 12px gap, flex-wrap.\n\nRows:\n\n\"Primary\" -- 3 buttons: \"GET STARTED\" (green bg, white text, 4px green shadow), \"SMALL\" (same but 36px height, 13px font, 16px padding, 10px radius, 3px shadow), \"DISABLED\" (same as primary but opacity 0.45, pointer-events none)\n\"Secondary\" -- 3 buttons: \"LEARN MORE\" (transparent, 2px #CFCFCF border, blue text, 4px #CFCFCF shadow), \"SMALL\" (same sizing as small primary), \"DISABLED\" (opacity 0.45)\n\"Danger\" -- 2 buttons: \"DELETE\" (#FF4B4B bg, white text, 4px #CC3C3C shadow), \"REMOVE\" (small variant)\n\"Ghost\" -- 1 button: \"VIEW ALL\" (no bg/border/shadow, green text, green bg on hover at 0.08 opacity)\nPanel 4: Dark Theme Buttons (dark-blue background)\nSection label and ::after line use white at 35% and 10% opacity respectively.\n\nTwo rows:\n\n\"GET STARTED\" primary + \"TRY 1 WEEK FREE\" (white bg, dark-blue text, 4px #88879F shadow, hover bg #c8f040)\nSmall variants of both\nPanel 5: Cards (light)\n2-column grid, 16px gap. Each card: white bg, 2px border (border-color), 16px border-radius. Hover: translateY(-4px), box-shadow 0 12px 32px rgba(0,0,0,0.08).\n\nCard 1:\n\nImage: https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop (120px height, cover)\nTag: \"NEW\" (green text, green bg at 10% opacity, 11px, 800 weight, uppercase, 6px radius, 3px/8px padding)\nTitle: \"Spanish for Beginners\" (16px, bold, gray-text)\nDescription: \"Start your language journey with interactive lessons designed to build fluency.\" (13px, gray-light, 1.5 line-height)\nFooter (12px top border, 12px/16px padding): left \"12 UNITS\" (12px bold uppercase nav-text), right \"START\" (12px bold uppercase blue, hover opacity 0.7)\nCard 2:\n\nImage: https://images.pexels.com/photos/267669/pexels-photo-267669.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&fit=crop\nTag: \"POPULAR\" (blue text, blue bg at 10% opacity)\nTitle: \"French Conversations\"\nDescription: \"Practice real-world dialogue and improve pronunciation with native speakers.\"\nFooter: \"8 UNITS\" / \"CONTINUE\"\nPanel 6: Dark Theme Cards (dark-blue background)\n2-column grid, same structure but no images. Cards have bg rgba(255,255,255,0.06), border rgba(255,255,255,0.08). Titles are white, descriptions are white at 50% opacity, footer border is white at 8% opacity, footer text is white at 30% opacity.\n\nCard 1:\n\nTag: \"SUPER\" (golden #FFC800 text, golden bg at 15% opacity)\nTitle: \"Unlimited Hearts\"\nDesc: \"Keep learning without interruption with Super Duolingo benefits.\"\nFooter: \"PREMIUM\" / \"UPGRADE\"\nCard 2:\n\nTag: \"PRO\" (orange #FF9600 text, orange bg at 15% opacity)\nTitle: \"Mastery Quizzes\"\nDesc: \"Challenge yourself with advanced assessments to test your skill level.\"\nFooter: \"ADVANCED\" / \"TRY NOW\"\nPanel 7: Components (light)\nVertical stack with 20px gap. Each group has a label (10px bold uppercase, 1px letter-spacing, nav-text).\n\nBadges: Flex row, 8px gap. Pill-shaped badges (4px/10px padding, 20px radius, 12px bold uppercase):\n\n\"COMPLETED\" (green text, green bg 12%)\n\"IN PROGRESS\" (blue text, blue bg 12%)\n\"FAILED\" (red text, red bg 12%)\n\"STREAK\" (orange text, orange bg 12%)\n\"PREMIUM\" (golden-brown #b8920f text, golden bg 15%)\nInput + Button: Flex row, 12px gap. Input (flex:1, 48px height, 16px padding, 2px border border-color, 12px radius, 15px font, 600 weight, focus border turns blue, placeholder is nav-text color 500 weight) + Primary \"SUBSCRIBE\" button.\n\nToggle: Flex row with two toggle switches. Each toggle is 48x28px. Track is border-color bg, 14px radius. Thumb is 22x22px white circle, 3px from edges, with 1px 3px rgba(0,0,0,0.15) shadow. Checked state: track turns green, thumb translates 20px right. Labels \"Sound effects\" and \"Animations\" (14px, 600 weight). First toggle is checked by default.\n\nProgress: 3 progress bars in a column, 10px gap. Each row: flex, 12px gap, bar (flex:1, 12px height, border-color bg, 6px radius, overflow hidden), fill (6px radius, 0.6s ease width transition), value (12px bold, 32px wide, right-aligned).\n\n85% green fill\n60% blue fill\n35% orange fill\nTooltips & Streak: Flex row, 16px gap, center-aligned.\n\nTooltip trigger: \"Hover me\" (13px, bold, green text, green bg 8%, 8px/16px padding, 8px radius). On hover shows tooltip bubble above (dark-blue bg, white 12px 600-weight text, 6px/12px padding, 8px radius, 5px triangle arrow pointing down via ::after border trick).\nStreak counter: Inline-flex, 6px gap, 6px/14px padding, orange bg 10%, 20px radius. Fire emoji (18px) + \"42\" (16px, 800 weight, orange).\nPanel 8: Dark Theme Components (dark-blue background)\nLabels use white at 30% opacity.\n\nLanguage Pills: Flex row, 8px gap. Each pill: inline-flex, 6px gap, 6px/12px padding, 2px border, 12px radius, cursor pointer, hover turns border green with subtle green bg.\n\n\"Spanish\" (ACTIVE -- green border, green bg 8%, white text) with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/59a90a2cedd48b751a8fd22014768fd7.svg\n\"French\" (inactive -- white border 12%, white text 70%) with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/482fda142ee4abd728ebf4ccce5d3307.svg\n\"German\" with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/c71db846ffab7e0a74bc6971e34ad82e.svg\n\"Japanese\" with flag https://d35aaqx5ub95lt.cloudfront.net/vendor/edea4fa18ff3e7d8c0282de3f102aaed.svg\nFlag images: 24x18px, object-fit contain. Pill text: 13px, bold.\nAvatar Group: Flex row with overlapping circular avatars (36px, 50% radius, 2px white border, -8px margin-left except first). Images:\n\nhttps://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop\nhttps://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop\nhttps://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=80&h=80&fit=crop\nCount badge \"+5\" (same 36px circle, #f0f0f0 bg, 11px 800 weight, gray-light)\nText next to group: \"8 learners active\" (13px, 600 weight, white 50% opacity)\nProgress (Dark): 2 bars, track bg is white 8%, values are white 60%:\n\n72% golden fill\n45% green fill\nBadges (Dark):\n\n\"MASTERED\" (green bg 15%, #7ADB2E text)\n\"REVIEW\" (blue bg 15%, #4DC4F8 text)\n\"CROWN\" (golden bg 15%, #FFC800 text)\nResponsive Breakpoints\n900px and below:\n\nGrid becomes single column, no right borders\nHero h1: 36px\nNav links hidden\nCards grid becomes single column\nHero buttons stack vertically, max-width 280px\n600px and below:\n\nHero padding: 40px 20px 32px\nHero h1: 28px\nPanel padding: 28px 20px\nColor grid: 3 columns\nType meta column: hidden\nDisplay type: 32px\nButton labels: hidden\nInput row: column direction","url":"/prompts/duolingo-styleguide-hero"}},{"id":"price-calculator","object":"prompt","title":"Price Calculator","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-price-calculator-poster-DzoAr1AR.png","video_url":"https://motionsites.ai/assets/hero-price-calculator-preview-Dak8DDgY.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Recreate Project Estimation Calculator Section\n\nCreate a full-width dark calculator section with id calculator-section. Background: bg-background, padding py-16 md:py-28 px-4 md:px-16, max-width max-w-7xl centered.\n\nHeader: Centered. Small mono uppercase tracking-widest label \"Try project estimation calculator\" in text-muted-foreground. Below it, an h2: \"Get premium website within your budget\" — text-3xl md:text-4xl lg:text-5xl font-normal.\n\nLayout: 2-column grid (grid-cols-1 lg:grid-cols-2), rounded-2xl overflow-hidden, no gap.\n\nLEFT COLUMN (Calculator Form): Background #0D0D0D, padding p-8 lg:p-12, sections divided by divide-y divide-[#1E1E1E].\n\n4 sections separated by horizontal dividers:\n\nService Type (radio buttons): h3 \"What kind of service do you need?\" — 3 options: \"Only Design\" (design), \"Only Development\" (development), \"Design + Development\" (both, default). Custom radio circles: w-5 h-5 rounded-full border-2, active = border-[#FF5656] with inner w-2 h-2 rounded-full bg-[#FF5656].\n\nNumber of Pages (slider): h3 with current value in #FF5656. Shadcn <Slider> min=1, max=30, step=1, default=5. Labels \"1\" and \"30\" below.\n\nAdd-ons (checkboxes): Two checkboxes with price labels on the right in #FF5656:\n\n\"I will need help with content\" → +$50/pages\n\n\"I want to optimize my website for SEO\" → +$50/pages Custom checkboxes: w-5 h-5 border-2 rounded, checked = border-[#FF5656] bg-[#FF5656] with white SVG checkmark.\n\nTimeline (radio buttons): h3 \"How fast do you need this?\" — 3 options with prices:\n\n\"Within 7 Days\" → +$100/pages\n\n\"Within 14 Days\" → +$25/pages\n\n\"Regular Speed (Based on discussion)\" → no extra cost (default)\n\nRIGHT COLUMN (Cost Estimation): Padding p-8 lg:p-12, border border-white/10 rounded-r-2xl, min-height 717.98px.\n\nh3 \"Estimated Cost\" + description paragraph.\n\n3 stacked cards (rounded-2xl p-6 space-y-3):\n\nAgency card: bg-muted/50. Title \"Typical Agency charges minimum\". Large price text-4xl font-bold. Subtitle: \"+ Too much extra time & additional cost\".\n\nFreelancer card: bg-muted/50. Title \"Regular Freelancer charges minimum\". Large price text-4xl font-bold. Subtitle: \"+ Too much headache & back-and-forth\".\n\nYour price card: bg-gradient-to-r from-pink-500 to-orange-500 text-white. Title \"With Webfluin Studio\". Price text-5xl font-bold. Subtitle: \"Save your money, time & headache\".\n\nPRICING LOGIC:\n\ncalculatePrice():\n  Base prices by service:\n    design: base=399, perPage=100\n    development: base=199, perPage=100\n    both: base=499, perPage=200\n  \n  total = max(base, base + (pages - 1) * perPage)\n  if needContent: total += pages * 50\n  if needSEO: total += pages * 50\n  if rush: total += pages * 100\n  if fast: total += pages * 25\n\ncalculateAgencyCost():\n  perPage = (both ? 1000 : 400)\n  return 8000 + (pages - 1) * perPage\n\ncalculateFreelancerCost():\n  perPage = (both ? 500 : 200)\n  return 3000 + (pages - 1) * perPage\n\nAll prices displayed with .toLocaleString() and $ prefix.\n\nState: serviceType (design|development|both, default both), pages (number, default 5), needContent (bool), needSEO (bool), timeline (regular|fast|rush, default regular).\n\nDependencies: Shadcn Slider component, useToast hook.","url":"/prompts/price-calculator"}},{"id":"digital-epoch-hero","object":"prompt","title":"Digital Epoch","summary":"A preview-led hero section prompt for generating a polished AI-built interface.","category":"Hero Section","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/hero-digital-epoch-poster-Cnyom0By.png","video_url":"https://motionsites.ai/assets/hero-digital-epoch-preview-B85ezqXO.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a modern, high-performance landing page section using React, TypeScript, Tailwind CSS v4, and Motion. The application should match the following exact specifications:\n1. Dependencies & Setup\nLibraries: Install lucide-react, motion, clsx, and tailwind-merge.\nFonts & CSS: In index.css, import the Inter and Outfit fonts from Google Fonts: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');\nConfigure the Tailwind theme in your CSS to use Inter as --font-sans and Outfit as --font-display.\nThe global body background should be #f9fafb.\n2. Main Hero Container & Video Background\nCreate a hero section container with these exact classes: relative w-full max-w-[1400px] mx-auto rounded-[48px] bg-white border border-slate-200/50 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.03)] overflow-hidden h-[600px] flex flex-col.\nInside, add an absolutely positioned underlying layer (absolute inset-0 pointer-events-none z-0 overflow-hidden select-none) for the background video.\nThe video tag must point to exactly this URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260505_101331_74f9b798-3f00-4e86-8a01-377aa16ffeaa.mp4. It must include autoPlay, loop, muted, and playsInline attributes, with the classes: w-full h-full object-cover scale-105 transition-transform duration-1000. No overlays.\n3. Hero Text Content\nCreate a content wrapper positioned relative (z-20 flex-1 px-8 md:px-16 pt-12 md:pt-16 flex flex-col items-start).\nUse motion.div from motion/react to animate the text layer in (fade in, slide up slightly).\nHeadline: \"Foundation of the<br />new digital epoch\". Should use the font-display font, sizes text-[42px] md:text-[56px], medium weight, tight tracking, color #0a1b33.\nSubheadline: \"Designing products, powering ecosystems and laying the foundation of a decentralized web for enterprises, builders and communities alike.\" Should use font-sans, sizes text-[14px] md:text-[15px], color #64748b.\nContact Button: Text \"Contact Us\", using a dark background (bg-[#0a152d]), white text, rounded-full, with hover scale animations via motion.button.\n4. Floating Bottom Navbar\nCreate an absolutely positioned navbar wrapper at the bottom center of the hero: absolute bottom-10 left-1/2 -translate-x-1/2 z-30.\nThe nav element should use motion.nav to fade in and slide up (delayed after the text). It must have the classes: flex items-center bg-white/90 backdrop-blur-2xl px-1.5 py-1.5 rounded-full shadow-[0_12px_40px_rgba(0,0,0,0.08)] border border-slate-200/40.\nNav Elements:\nA small circular logo placeholder on the left (w-9 h-9 bg-white border-slate-100 shadow-sm) containing the star character \"✦\".\nTwo standard text buttons: \"Products\" and \"Docs\" (text-[12px] font-semibold text-slate-500 hover:text-[#0a1b33]).\nA \"Get in touch\" button on the right containing the text and a small ChevronRight (from lucide-react). Styled identically to the marquee cards: bg-white px-5 py-2 rounded-full text-[12px] font-semibold text-[#0a1b33] border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all.\n5. Seamless Marquee Logo Scroller Component\nBelow the hero container (mt-10), add a custom highly-performant Marquee Scroller component.\nThe scroller must use a pure CSS @keyframes animation (transform: translateX(0) to translateX(-50%)) for infinite scrolling, pausing on hover. It needs a left/right masking gradient (maskImage linear-gradient fading to transparent on the edges). No title or description text above the scroller.\nThe Logos List: Supply an array of 8 objects with src URLs from svgl.app, alt names, and hex gradient objects:\nProcure (procure.svg, blue gradient)\nShopify (shopify.svg, yellow gradient)\nBlender (blender.svg, blue gradient)\nFigma (figma.svg, purple gradient)\nSpotify (spotify.svg, pink/red gradient)\nLottielab (lottielab.svg, yellow/green)\nGoogle Cloud (google-cloud.svg, light blue)\nBing (bing.svg, cyan/teal)\nRender the list twice inline to ensure a seamless loop.\nCard Design: Make each logo's container card exactly match the \"Get in touch\" navbar button's styling. The container classes must be exactly: group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden.\nInside the card, add an absolute div using the specific gradient colors, scaled at 1.5 and 0 opacity, which drops to scale 1 and opacity 100 on group-hover.\nThe image tag should invert/turn black on hover (group-hover:brightness-0 group-hover:invert).","url":"/prompts/digital-epoch-hero"}},{"id":"kresna-footer","object":"prompt","title":"Kresna Footer","summary":"A preview-led footer section prompt for generating a polished AI-built interface.","category":"Footer Section","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/footer-kresna-poster-DZ1M1SnM.png","video_url":"https://motionsites.ai/assets/footer-kresna-preview-BrIYYd2q.gif"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-file HTML footer component called Kresna — a sales-automation SaaS brand. The deliverable is one self-contained .html file with inline <style> and inline <script>. Render it inside a <section class=\"footer-section\"> on a white page (body { background: #ffffff; padding: 48px 24px; }).\nFonts\nLoad from Google Fonts in the <head>:\n\nDM Sans — weights 400, 500, 600, 700 (body, nav links, buttons, headings, watermark)\nCaveat — weights 500, 600, 700 (handwritten accents: \"Stay in touch!\", \"Feeling lucky?\", column titles \"Navigation\"/\"Company\")\n\nDefault body font: 'DM Sans', sans-serif. Body color #2d3148.\nUse *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }.\nLayout structure\nA .footer-wrapper with max-width: 1150px, centered, CSS grid grid-template-columns: 350px 1fr, gap: 16px, align-items: stretch. Two cards side by side:\nLeft card — .footer-left (video background)\n\nPosition relative, min-height: 340px, border-radius: 28px, padding: 32px, overflow: hidden\nBox shadow: 0 12px 40px rgba(21, 76, 189, 0.25)\nFallback background: #1e4fc0\nFlex column, justify-content: space-between\nContains, in order:\n\nA <video class=\"footer-left-video\" autoplay muted loop playsinline preload=\"auto\"> with <source src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_104800_bc43ae09-f494-43e3-97d7-2f8c1692cfd7.mp4\" type=\"video/mp4\" />. Style: position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none;. No overlays, no tints, no noise texture.\n.footer-logo — flex row, gap: 10px, position: relative; z-index: 1. Contains:\n\n.footer-logo-mark — a 32×32 rounded square (border-radius: 8px), background: rgba(255,255,255,0.15), border: 1.5px solid rgba(255,255,255,0.85), centered bold \"K\" letter inside (DM Sans, 16px, weight 700, white, letter-spacing: -0.02em)\n<span class=\"footer-logo-name\">Kresna</span> — DM Sans, 22px, weight 700, white, letter-spacing: -0.02em\n\n\n.footer-tagline-container — margin-top: auto; margin-bottom: 28px, z-index: 1. Contains .footer-tagline (19px, weight 400, white, line-height: 1.45) with text:\n\n\n\n     Smarter sales automation,<br>\n     <span>powered by AI.</span>\n The inner `<span>` uses `color: rgba(255, 255, 255, 0.65)`.\n4. .footer-social-row — flex row, justify-content: space-between, align-items: center, gap: 12px, z-index: 1. Contains:\n- .footer-social-label — Caveat, 17px, weight 600, color rgba(255,255,255,0.9), letter-spacing: 0.3px, text: \"Stay in touch!\"\n- .footer-social-icons — flex row, gap: 7px. Four .social-icon divs, each 36×36, border-radius: 9px, background: #0e1014, centered 15×15 white SVG, box shadow 0 6px 18px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2). Hover: background: #000, transform: translateY(-2px), deeper shadow, transition: background 0.2s, transform 0.15s, box-shadow 0.2s. Icons in order: Discord, X (Twitter), LinkedIn, GitHub — use the official brand path d= strings for each in a <svg viewBox=\"0 0 24 24\">.\nRight card — .footer-right (light gray)\n\nbackground: #f0f1f5, border-radius: 28px, padding: 40px, overflow: visible, box-shadow: 0 4px 20px rgba(0,0,0,0.04)\nFlex column, justify-content: space-between, position relative\nContains:\n\nFloating \"Feeling lucky?\" badge — .footer-lucky-graphic\nAbsolutely positioned, top: -36px; right: 40px, z-index: 10, flex column, align-items: flex-start, gap: 6px. Overflows above the top edge of the card.\n\n.lucky-cube — 96×96, border-radius: 22px, transform: rotate(-10deg), gradient linear-gradient(135deg, #5b9ffb 0%, #1e5dd7 55%, #1448be 100%), layered shadows:\n\n  inset 3px 3px 8px rgba(255,255,255,0.35),\n  inset -3px -3px 12px rgba(0,0,0,0.18),\n  8px 14px 28px rgba(20,72,200,0.35)\nInside, a <span class=\"lucky-cube-mark\">K</span>: DM Sans, 42px, weight 700, white, letter-spacing: -0.04em, transform: rotate(10deg) (counter-rotates the cube), text-shadow: 0 3px 6px rgba(0,0,0,0.25), line-height: 1.\n\n.lucky-text-row — flex row, gap: 6px, align-items: center, transform: rotate(-4deg), margin-top: 4px. Contains:\n\n.lucky-arrow — 22×22 inline SVG, color: #9ca3af. SVG content: a curved hand-drawn arrow:\n\n\n\nhtml    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3 20 C 6 14, 10 9, 18 5\" />\n      <path d=\"M18 5 L 12 5\" />\n      <path d=\"M18 5 L 18 11\" />\n    </svg>\nSVG paths: `stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round`.\n\n.lucky-text — Caveat, 20px, weight 600, color #9ca3af, white-space: nowrap, text: \"Feeling lucky?\"\n\nTop — .footer-right-top with .footer-nav-cols\nFlex row, gap: 72px, padding-top: 8px. Two .footer-col columns:\n\nColumn titles (.footer-col-title): Caveat, 24px, weight 600, italic, color #9ca3af, margin-bottom: 18px\nLinks (.footer-col a): block, DM Sans, 14px, weight 600, color #111827, margin-bottom: 14px, no underline, hover color #1f65d6, transition: color 0.2s\n\nColumn 1 — title \"Navigation\", links: How it works, Features, Pricing, Testimonials, FAQ\nColumn 2 — title \"Company\", links: Blog, About, Terms and Condition, Privacy Policy\nBottom — .footer-bottom\nFlex row, align-items: flex-end, justify-content: space-between, margin-top: 48px. Contains:\n\n.footer-copyright — DM Sans, 12.5px, weight 500, color #9ca3af, text: \"© 2025 Kresna. All rights reserved.\"\n.footer-cta-mini — flex column, gap: 14px, contains:\n\n<h4> — 15px, weight 400, color #6b7280, line-height: 1.45, with text:\n\n\n\n    AI moves fast.<br><strong>Stay ahead with Kresna.</strong>\nThe `<strong>` is block-level, 19px, weight 700, color `#111827`.\n\n.footer-subscribe-row — flex row, width: 310px, background: #fff, border: 1px solid #e5e7eb, border-radius: 12px, padding: 5px, box-shadow: 0 2px 10px rgba(0,0,0,0.04). Contains:\n\n<input type=\"email\" placeholder=\"Enter email address\"> — flex 1, padding: 11px 14px, transparent, no border, DM Sans 13.5px, color #111827, placeholder #9ca3af\n<button type=\"button\">Subscribe</button> — padding: 11px 22px, background: #111214, white text, DM Sans 13.5px weight 600, border-radius: 8px, shadow 0 6px 20px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.15). Hover: background: #000, deeper shadow, transform: translateY(-1px), transition: background 0.2s, box-shadow 0.2s, transform 0.15s.\n\n\n\nWatermark — .footer-watermark (sits outside .footer-wrapper but inside the section)\nA massive faded \"Kresna\" wordmark that scales fluidly to the full footer wrapper width with the visible glyph edges flush against the container edges.\nCSS:\ncss.footer-watermark {\n  max-width: 1150px;\n  margin: -60px auto 0;\n  pointer-events: none;\n  user-select: none;\n  position: relative;\n  z-index: 0;\n  line-height: 0;\n}\n.footer-watermark svg {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: visible;\n}\n.footer-watermark text {\n  font-family: 'DM Sans', sans-serif;\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  fill: rgba(0, 0, 0, 0.04);\n}\nHTML:\nhtml<div class=\"footer-watermark\" aria-hidden=\"true\">\n  <svg id=\"watermarkSvg\" viewBox=\"62 95 876 175\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\">\n    <text id=\"watermarkText\" x=\"500\" y=\"240\" text-anchor=\"middle\" font-size=\"320\">Kresna</text>\n  </svg>\n</div>\nInline JS at the end of the section measures the rendered text bounding box with getBBox() and updates the SVG viewBox so the visible glyph edges sit flush against the container — runs after document.fonts.ready and on resize:\nhtml<script>\n  function fitWatermark() {\n    const svg = document.getElementById('watermarkSvg');\n    const text = document.getElementById('watermarkText');\n    if (!svg || !text) return;\n    try {\n      const bbox = text.getBBox();\n      svg.setAttribute('viewBox',\n        `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);\n    } catch (e) {}\n  }\n  if (document.fonts && document.fonts.ready) {\n    document.fonts.ready.then(fitWatermark);\n  } else {\n    window.addEventListener('load', fitWatermark);\n  }\n  window.addEventListener('resize', fitWatermark);\n</script>\nResponsive breakpoints\n@media (max-width: 860px):\n\n.footer-wrapper becomes grid-template-columns: 1fr\n.footer-left min-height: auto, gap: 40px\n\n@media (max-width: 560px):\n\n.footer-right padding: 24px\n.footer-nav-cols gap: 40px\n.footer-bottom flex-direction: column, align-items: flex-start, gap: 24px\n.footer-subscribe-row width: 100%\n.footer-lucky-graphic right: 12px, top: -28px\n.lucky-cube width: 72px, height: 72px\n.lucky-cube-mark scaled proportionally if needed\n\nAnimations / transitions\nNo keyframe animations. All motion is hover-driven via CSS transition:\n\nSocial icons: background, transform, box-shadow on hover\nSubscribe button: background, box-shadow, lift on hover\nNav links: color shift on hover\n\nThe video on the left card autoplays, loops, muted, plays inline (no controls).\nFinal markup order inside <section class=\"footer-section\">\n<section class=\"footer-section\">\n  <div class=\"footer-wrapper\">\n    <div class=\"footer-left\"> [video, logo, tagline, social row] </div>\n    <div class=\"footer-right\"> [floating lucky badge, nav cols, bottom row] </div>\n  </div>\n  <div class=\"footer-watermark\"> [SVG] </div>\n  <script> [fitWatermark] </script>\n</section>","url":"/prompts/kresna-footer"}},{"id":"vize-footer","object":"prompt","title":"Vize Footer","summary":"A preview-led footer section prompt for generating a polished AI-built interface.","category":"Footer Section","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/footer-vize-poster-BRRRDP-A.png","video_url":"https://motionsites.ai/assets/footer-vize-poster-BRRRDP-A.png"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a highly polished, responsive Footer component for a React application using Vite, Tailwind CSS, `lucide-react` for icons, and `motion/react` for animations. \n\nThe design relies on a premium \"layered card\" aesthetic, precise typography, and a massive background-blended text element utilizing advanced, handcrafted SVG filters.\n\n### 1. Dependencies\nEnsure the project has:\n`npm install lucide-react motion`\n\n### 2. Global CSS (`src/index.css`)\nUse the exact following CSS to define the Inter font, the Tailwind layer, and advanced `glass-card` and `liquid-glass` utilities:\n```css\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n@import \"tailwindcss\";\n\n@theme {\n  --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n}\n\n@layer utilities {\n  .glass-card {\n    background: rgba(255, 255, 255, 0.4);\n    backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);\n  }\n\n  .text-glass {\n    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    -webkit-background-clip: text;\n    background-clip: text;\n    color: transparent;\n  }\n\n  .liquid-glass {\n    background: rgba(255, 255, 255, 0.01);\n    background-blend-mode: luminosity;\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n    border: none;\n    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n    position: relative;\n    overflow: hidden;\n  }\n\n  .liquid-glass::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    padding: 1.4px;\n    background: linear-gradient(180deg,\n      rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n      rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n      rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n}\n\nbody {\n  @apply bg-[#F9F9FB] text-[#141414] font-sans antialiased;\n}\n3. Application Layout (src/App.tsx)\nRender the layout wrapper mimicking a full-screen application view exactly like this:\ncode\nTsx\nimport Footer from './components/Footer';\n\nexport default function App() {\n  return (\n    <div className=\"min-h-screen md:h-screen bg-[#F0F1F3] flex flex-col items-center justify-start md:justify-center overflow-y-auto md:overflow-hidden pt-8 md:pt-0 p-4\">\n      <Footer />\n    </div>\n  );\n}\n4. The Footer Component (src/components/Footer.tsx)\nCreate this file and structure it strictly with the following inner components and specific Tailwind dimensions/hex codes:\nComponent 1: LogoIcon\nRender a square icon box.\nClasses: w-8 h-8 bg-[#31A8FF] rounded-[8px] flex items-center justify-center\nSVG Code: <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M4 20C4 20 4 14 10 10C16 6 20 4 20 4C20 4 18 8 14 14C10 20 4 20 4 20Z\" fill=\"white\" /> <path d=\"M4 20L10 14\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" /> </svg>\nComponent 2: FooterCard\nA massive layered card layout holding the footer directories.\nWrappers:\nMain Container: w-full max-w-6xl mx-auto\nOuter Gray Body: bg-[#E9EBEE] rounded-[48px] border border-slate-200 shadow-sm overflow-hidden\nInner White Box: bg-white rounded-[40px] m-2 shadow-sm\nContent Grid Space (Inside White Box): p-8 md:p-10 lg:p-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12\nGrid Columns Layout:\nBrand Info (lg:col-span-2 space-y-8):\nA row (flex items-center gap-2.5) with <LogoIcon /> and <span className=\"text-[26px] font-bold tracking-tight text-[#0F172A]\">vize</span>\nDescription: <p className=\"text-[#64748B] leading-relaxed text-[16px] font-normal max-w-[320px]\">Premium strategic solutions designed to elevate your brand presence through advanced marketing.</p>\nSocials Group: Map an array of Linkedin, Twitter, Instagram (imported from lucide-react). Make them buttons with classes: w-[44px] h-[44px] flex items-center justify-center rounded-xl border border-slate-100 bg-white shadow-[0_1px_2px_rgba(0,0,0,0.05)] hover:bg-slate-50 transition-all active:scale-95 group. Inside each put the Icon component with className=\"w-5 h-5 text-slate-800\".\nProduct Column (space-y-6): Header <h4 className=\"text-[14px] font-medium text-[#94A3B8]\">Product</h4>. Links (href=\"#\" target): Features, Solutions, Pricing, Updates. Styling for links: text-[15px] font-medium text-[#1E293B] hover:text-[#31A8FF] transition-colors. Keep in a <ul> with space-y-4.\nScience Column (space-y-6): Header Science. Links: Approach, Identity, Research, Metrics. Same link styling.\nCompany Column (space-y-6): Header Company. Links: About Us, Partners, Careers. Same link styling.\nBottom Legal Bar (Inside Gray Outer Wrap, OUTSIDE of White Box):\nContainer: px-6 sm:px-12 md:px-16 lg:px-20 py-5 flex flex-col md:flex-row justify-between items-center gap-6 text-[15px]\nLeft side: <p className=\"text-[#64748B] font-medium\">© 2025 Vize. All rights reserved.</p>\nRight side: Flex row (gap-8 text-[#64748B] font-medium items-center) featuring:\n<a href=\"#\" className=\"hover:text-[#1E293B] transition-colors\">Legal Center</a>\nVertical Separator: <div className=\"w-[1px] h-4 bg-slate-300\" />\n<a href=\"#\" className=\"hover:text-[#1E293B] transition-colors\">User Agreement</a>\nComponent 3: GlassText\nThis must be perfectly implemented to work. It uses an absolute hidden SVG defining a filter, paired with Framer Motion.\nContainer: relative w-full flex items-center justify-center select-none pt-0.\nInvisible SVG: <svg className=\"absolute w-0 h-0\" aria-hidden=\"true\" focusable=\"false\">\nFilter setup within SVG:\ncode\nXml\n<defs>\n  <filter id=\"glass-effect\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n    <feDropShadow dx=\"0\" dy=\"4\" stdDeviation=\"6\" floodColor=\"#000000\" floodOpacity=\"0.25\" result=\"outer-shadow\"/>\n    <feComponentTransfer in=\"SourceAlpha\" result=\"alpha\"><feFuncA type=\"linear\" slope=\"1\" /></feComponentTransfer>\n    <feOffset in=\"alpha\" dx=\"0\" dy=\"4\" result=\"offset-white\" />\n    <feGaussianBlur in=\"offset-white\" stdDeviation=\"4\" result=\"blur-white\" />\n    <feComposite in=\"alpha\" in2=\"blur-white\" operator=\"out\" result=\"inner-white-mask\" />\n    <feFlood floodColor=\"#ffffff\" floodOpacity=\"0.25\" result=\"white-fill\" />\n    <feComposite in=\"white-fill\" in2=\"inner-white-mask\" operator=\"in\" result=\"inner-white-final\" />\n    <feGaussianBlur in=\"alpha\" stdDeviation=\"6\" result=\"blur-black\" />\n    <feComposite in=\"alpha\" in2=\"blur-black\" operator=\"out\" result=\"inner-black-mask\" />\n    <feFlood floodColor=\"#000000\" floodOpacity=\"0.25\" result=\"black-fill\" />\n    <feComposite in=\"black-fill\" in2=\"inner-black-mask\" operator=\"in\" result=\"inner-black-final\" />\n    <feMerge>\n      <feMergeNode in=\"outer-shadow\" />\n      <feMergeNode in=\"SourceGraphic\" />\n      <feMergeNode in=\"inner-white-final\" />\n      <feMergeNode in=\"inner-black-final\" />\n    </feMerge>\n  </filter>\n</defs>\nMotion Element placed underneath the SVG code:\n<motion.div initial={{ opacity: 0, scale: 0.98 }} whileInView={{ opacity: 1, scale: 1 }} transition={{ duration: 1.8, ease: [0.16, 1, 0.3, 1] }} className=\"relative\">\nText Element logic: <h1 className=\"text-[min(25vw,400px)] font-bold tracking-normal leading-none select-none text-white px-4\" style={{ filter: 'url(#glass-effect)' }}>vize</h1>\nFinal Default Export for Footer.tsx\ncode\nTsx\nexport default function Footer() {\n  return (\n    <footer className=\"w-full flex flex-col items-center gap-0\">\n      <FooterCard />\n      <GlassText />\n    </footer>\n  );\n}","url":"/prompts/vize-footer"}},{"id":"haul-footer","object":"prompt","title":"HAUL!","summary":"A preview-led footer section prompt for generating a polished AI-built interface.","category":"Footer Section","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://motionsites.ai/assets/footer-haul-poster-Do5X7frB.png","video_url":"https://motionsites.ai/assets/footer-haul-poster-Do5X7frB.png"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a React functional component using Tailwind CSS, `motion/react` for animations, and `lucide-react` for icons.\n\n**1. Typography & Setup:**\n- Import the \"Inter\" font from Google Fonts (weights 400, 500, 600, 700) and set it as the default sans-serif font in the Tailwind config/CSS.\n- The overall background of the page should be `#f8f9fa`.\n\n**2. Top Spacer Section (View Below):**\n- Create a section at the top of the page. Height should be `50vh` (on mobile/lg) and `30vh` (on md screens).\n- Background color: `#FDFDFD`.\n- Center a text element that says \"View Below\". The text should be `text-gray-300`, small font, bold, uppercase, with wide `tracking-[0.5em]`.\n- Animate this text with Framer Motion to fade in from `opacity: 0` to `opacity: 1`.\n\n**3. Main Parallax Container:**\n- Below the spacer, create a main full-viewport-height (`h-screen`) section.\n- Set its background image to: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260430_115327_3f256636-9e63-4885-8d0b-09317dc2b0a5.png&w=1280&q=85`\n- Make sure the background covers the container (`bg-cover bg-center`) and set `overflow-hidden` with `relative` positioning.\n- Set up a Framer Motion `useScroll` target on this container. Map the `scrollYProgress` from `[0, 1]` to `[-50, 150]` using `useTransform`. Apply this transformed y-value to the foreground truck image layer (described below).\n\n**4. The Top-Aligned Footer Card:**\n- Position a container `absolute top-0 w-full` inside the main parallax section. Give it top padding (`pt-12` mobile/lg, `pt-24` tablet).\n- Inside, create a card constrained to `max-w-7xl mx-auto`.\n- Card Styling: `bg-white/95`, `backdrop-blur-sm`, `shadow-xl`, rounded corners (`rounded-2xl` mobile, `rounded-3xl` desktop), `overflow-hidden`.\n- Animation: The card should slide down and fade in (`initial={{ opacity: 0, y: -20 }}`, `animate={{ opacity: 1, y: 0 }}`, duration 0.8s easeOut).\n- **Footer Content (Top Half):**\n  - Use a flex row layout (flex-col on mobile, flex-row on md+) with spread space.\n  - **Logo Area**: Include an orange square (`bg-orange-500`, 40x40px mobile, 48x48px desktop, rounded-lg, shadow-inner, p-2). Inside the square, place an SVG with viewBox \"0 0 256 256\" and this exact white path: `d=\"M 228 0 C 172.772 0 128 44.772 128 100 L 128 0 L 0 0 L 0 28 C 0 83.228 44.772 128 100 128 L 0 128 L 0 256 L 28 256 C 83.228 256 128 211.228 128 156 L 128 256 L 256 256 L 256 228 C 256 172.772 211.228 128 156 128 L 256 128 L 256 0 Z\"`. Next to the logo block, add the text \"HAUL!\" (`text-gray-900`, 2xl/3xl, font-bold, tracking-tighter).\n  - **Links Area**: Display 3 columns of links using flex. Layout: `Company` (Founding, Platform, Testify), `Mobile` (Get Apple App, Get Google App), `Contracts` (Private Data, User Consent). Section headers should be uppercase, tracking-widest, text-sm, bold. Link items should be gray-500, font-medium, and hover to `orange-600` with transition.\n- **Footer Content (Bottom Bar):**\n  - Add a top border (`border-gray-100`) and use a solid white background (`bg-white`).\n  - Layout: flex, space between, aligning text to the left and social icons to the right. \n  - Text: \"© 2026 HAUL! All Rights Reserved\" (text-sm, gray-500, medium).\n  - **Social Icons**: Map through an array of icons imported from `lucide-react`: Facebook, Twitter, Instagram, Linkedin (w-5 h-5). Wrap them in `a` tags shaped as 40x40px circles with `border-gray-100`. On hover, they should turn `bg-orange-500` with white text and an `orange-500` border (transition all duration-300).\n\n**5. Background Truck Parallax Layer:**\n- Add a `motion.div` placed absolutely at the bottom of the container (`absolute inset-x-0 bottom-0 h-full`).\n- Add standard pointer-events-none and z-20.\n- Ensure the `y` axis style is tied to the `useTransform` created in step 3 so it scrolls at a different speed than the background.\n- Inside, place an image with `src=\"https://roof-wish-40038865.figma.site/_components/v2/f31fd17907ce60745d45e83a61d44fd3810d5f25/truck_1.8c4bff83.png\"`.\n- Image styling: `w-full h-full object-contain object-bottom origin-bottom`. Add scale responsive classes (`scale-[1.5]` mobile, `scale-110` sm, `scale-[2.0]` md, `scale-105` lg) to ensure the truck fits properly on various screen widths.","url":"/prompts/haul-footer"}},{"id":"axion-about","object":"prompt","title":"Axion About","summary":"A preview-led about prompt for generating a polished AI-built interface.","category":"About","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(29).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single React component for an \"About\" section using Tailwind CSS. Use `lucide-react` for the ArrowRight icon. System font stack only (no custom fonts). Match every detail exactly:\n\n---\n\n### Outer wrapper\n\n`<section>` with `bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden`. Inner container: `max-w-[1440px] mx-auto`.\n\n---\n\n### Badge row\n\n`px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8`.\n\n- **Numbered circle:** `w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] sm:text-[12px] font-semibold`. Displays \"1\".\n- **Pill label:** Text \"Introducing Axion\". `text-[12px] sm:text-[13px] font-medium rounded-full px-3 sm:px-4 py-1 sm:py-1.5`. No border, no background.\n\n---\n\n### Heading\n\n`<h2>` with `px-5 sm:px-8 lg:px-12 text-[clamp(1.5rem,4vw,3.2rem)] font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28`.\n\nText: \"Strategy-led creatives, delivering / results in digital and beyond.\" - the `/` represents a line break that is `<br className=\"hidden sm:block\" />` with a `<span className=\"sm:hidden\"> </span>` fallback space before it (so on mobile it reads as one flowing line, on sm+ it breaks into two lines).\n\n---\n\n### Content area - MOBILE / TABLET layout (lg:hidden)\n\nWrapper: `lg:hidden px-5 sm:px-8`.\n\n1. **Paragraph:** \"Through research, creative thinking and iteration we help growing brands realize their digital full potential.\" - `text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 mb-6`.\n\n2. **CTA button** (inside a `mb-8` wrapper): Orange button (`bg-[#F26522] hover:bg-[#e05a1a]`) with text \"About our studio\", `text-white text-[13px] sm:text-[14px] font-medium rounded-full pl-5 sm:pl-6 pr-2 py-2 flex items-center gap-3`. Contains:\n   - **Text-roll hover animation:** The button text is inside `overflow-hidden h-[20px]` > `flex flex-col` container. The text is duplicated (two identical `h-[20px] flex items-center` spans). On `group-hover`, the flex-col translates `-translate-y-1/2` with `transition-transform duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`.\n   - **Arrow circle:** White circle `bg-white w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center`. Contains `ArrowRight` from lucide-react (size 14), `text-[#F26522]`, starts at `-rotate-45`, on `group-hover` rotates to `rotate-0` (same duration-500 easing). The entire button has `className=\"group\"`.\n\n3. **Images:** `flex flex-col sm:flex-row gap-4 sm:gap-5`.\n   - First: `sm:w-[45%]`, `<img>` with `w-full aspect-[438/346] rounded-xl sm:rounded-2xl object-cover`.\n   - Second: `sm:w-[55%]`, `<img>` with `w-full aspect-[900/600] rounded-xl sm:rounded-2xl object-cover`.\n\n---\n\n### Content area - DESKTOP layout (hidden lg:grid)\n\nWrapper: `hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-5 sm:px-8 lg:px-12`.\n\n- **Left column** (`self-end`): Small image, `w-full aspect-[438/346] rounded-2xl object-cover`.\n- **Center column** (`self-start flex flex-col justify-end`):\n  - Paragraph: `text-[16px] xl:text-[18px] leading-[1.65] font-medium text-gray-900 whitespace-nowrap mb-6`. Text with explicit `<br/>` tags: \"Through research, creative thinking`<br/>`and iteration we help growing brands`<br/>`realize their digital full potential.\"\n  - Same orange CTA button as mobile (identical text-roll animation).\n- **Right column** (`self-end`): Large image, `w-full aspect-[3/2] rounded-2xl object-cover`.\n\n---\n\n### Image URLs\n\n- **Small image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`\n- **Large image:** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`\n\n---\n\n### Technical details\n\n- **Framework:** React 18 + TypeScript + Tailwind CSS 3.4 (default config, no custom theme extensions)\n- **Icons:** `ArrowRight` from `lucide-react`\n- **Font:** System default (no custom font loaded)\n- **All hover animations:** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`\n- **Max content width:** 1440px, centered with `mx-auto`\n- **Responsive breakpoints:** Default Tailwind (sm: 640px, md: 768px, lg: 1024px, xl: 1280px)\n\n---","url":"/prompts/axion-about"}},{"id":"build-with-us","object":"prompt","title":"Build With Us","summary":"A preview-led contact us prompt for generating a polished AI-built interface.","category":"Contact us","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(45).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page React + TypeScript + Vite + Tailwind site that is a full-screen video-background landing page with a contact form. Use `lucide-react` for icons.\n\n**Layout & Sizing**\n- Root: `min-h-screen` white background with padding `p-3 sm:p-4 md:p-6`.\n- Inside the root, one large rounded card with `rounded-2xl sm:rounded-3xl`, `overflow-hidden`. Heights: `min-h-[calc(100vh-24px)] sm:min-h-[calc(100vh-32px)] md:min-h-[calc(100vh-48px)] lg:h-[calc(100vh-48px)]`. On desktop it locks to viewport; on tablet/mobile it expands to content.\n- Background video fills the card (`absolute inset-0 w-full h-full object-cover`). The video element has `autoPlay muted loop playsInline`. Use this exact URL:\n  ```\n  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260602_150901_c45b90ec-18d7-42ff-90e2-b95d7109e330.mp4\n  ```\n- Content layer: `relative z-10 flex flex-col` with the same min-height ladder as the card and `lg:h-full`, padding `p-4 sm:p-6 md:p-8`, `gap-6`.\n\n**Fonts**\n- Import from Google Fonts in `index.css`: `Inter` (weights 300–700) and `Instrument Serif` (italic + regular).\n- Set `* { font-family: 'Inter', sans-serif; }` globally.\n- Use `Instrument Serif` italic for one accent word inline (see headline below).\n\n**Navbar (top)**\n- Pill bar with `bg-white/60 backdrop-blur-md rounded-2xl shadow-sm`, padding `pl-3 sm:pl-4 pr-2 py-2`, `w-full sm:w-auto`, `flex items-center gap-3 sm:gap-6`.\n- Logo: 32x32 inline SVG (`viewBox=\"0 0 256 256\"`) with two black filled paths forming a stylized \"M\":\n  `M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z`.\n- Links (hidden on mobile, shown `sm:flex`): `Our story`, `Expertise`, `Our work`, `Journal` — class `text-gray-800 text-sm font-medium hover:opacity-60 transition-opacity whitespace-nowrap`.\n- CTA button on the right: black pill `bg-black text-white text-sm font-medium px-4 sm:px-5 py-2 rounded-xl hover:bg-gray-800` with label `Start a project`. On mobile it floats right with `ml-auto`.\n\n**Spacer**\n- A `<div className=\"flex-1 min-h-[2rem]\" />` between nav and the bottom row.\n\n**Bottom row (headline + form)**\n- Container: `flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6`.\n\n**Headline (left)**\n- `<p>` with white text, `text-3xl sm:text-4xl xl:text-5xl font-medium leading-tight drop-shadow-lg lg:max-w-lg xl:max-w-2xl shrink-0`.\n- Content (with `<br />`):\n  `We craft bold ideas` / `and ship them as *products*`\n- The word `products` is wrapped in a `<span>` with inline style: `fontFamily: \"'Instrument Serif', serif\"`, `fontStyle: 'italic'`, `fontWeight: 400`.\n\n**Contact form card (right)**\n- Outer: `w-full lg:w-[min(480px,45%)] shrink-0`.\n- Card: `bg-white rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden`, inner padding `p-4 sm:p-6`, `flex flex-col gap-4`.\n\n1. **Heading:** `Say hello! 👋` — `text-xl sm:text-2xl font-semibold text-black tracking-tight`.\n\n2. **Email + socials row** (always horizontal): `flex flex-row items-center justify-between gap-3 bg-gray-50 rounded-2xl px-4 py-2.5`.\n   - Left: small grey label `Drop us a line`, then mailto link `hello@forma.co` in `text-blue-600 font-semibold hover:underline truncate`.\n   - Right: four 32x32 rounded-xl buttons (`w-8 h-8 rounded-xl flex items-center justify-center hover:opacity-80 transition-opacity`) using lucide icons size 13:\n     - Twitter — `bg-gray-100 text-gray-800`\n     - Circle — `bg-pink-100 text-pink-500`\n     - Instagram — `bg-orange-100 text-orange-400`\n     - Linkedin — `bg-blue-100 text-blue-600`\n   - Extract this into a small `SocialBtn` helper component.\n\n3. **OR divider:** horizontal lines on either side of the word `OR` (`text-gray-400 font-medium text-sm`, lines `flex-1 h-px bg-gray-200`).\n\n4. **Form** (`flex flex-col gap-4`):\n   - Label `Tell us about your vision` (`text-sm font-medium text-black`).\n   - Name + Email inputs side by side on `sm:` (`flex flex-col sm:flex-row gap-2`), placeholders `Full name` and `Email`. Input style: `flex-1 min-w-0 text-sm px-3 py-2.5 rounded-xl border border-gray-200 bg-transparent placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition`.\n   - Textarea, 4 rows, placeholder `What are you looking to build or improve...`, same input style plus `resize-none`.\n   - Service tags section: label `I need help with...`. Tags wrap (`flex flex-wrap gap-1.5`). Each tag is a button `text-xs font-medium px-3 py-2 rounded-lg border transition-all`. Inactive: `bg-white text-gray-700 border-gray-200 hover:border-gray-400`. Active (selected): `bg-gray-100 text-black border-black`. Multi-select toggle via state.\n     - Services list (exact order): `Website`, `Mobile App`, `Web App`, `E-Commerce`, `Visual Identity`, `3D & Motion`, `Digital Marketing`, `Growth & Consulting`, `Other`.\n   - Submit button: `w-full bg-black text-white text-sm font-semibold py-3 rounded-2xl hover:bg-gray-800 transition-colors disabled:opacity-60`. Label: `Send my message` (or `Sending...` while submitting).\n\n5. **Submit behavior:** On submit, set `sending=true`, await a 1-second fake delay (`new Promise(r => setTimeout(r, 1000))`), then show a success state in place of the form: centered column with `py-6 gap-3`, a 48x48 green check pill (`w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-xl` containing `✓`), heading `You're all set!` (`text-base font-semibold text-gray-900`), and subtext `Expect a reply within 24 hours.` (`text-sm text-gray-500`).\n\n**State (useState)**\n- `selected: string[]` (toggled service chips)\n- `name`, `email`, `message`: strings\n- `sending`, `sent`: booleans\n\n**Transitions/animations**\n- All interactive elements use Tailwind `transition-*` utilities (opacity, colors, all).\n- No external animation library; rely on Tailwind hover/focus transitions and `backdrop-blur-md` on the navbar.\n\n**Constants at the top of the file**\n- `VIDEO_URL` (the CloudFront URL above) and `SERVICES` array.\n\n**Files**\n- `src/App.tsx` — entire component plus `SocialBtn` helper.\n- `src/index.css` — Google Fonts import + Tailwind directives + global `* { font-family: 'Inter', sans-serif; }`.\n- Standard Vite + Tailwind config (`tailwind.config.js` scanning `./index.html` and `./src/**/*.{ts,tsx}`).","url":"/prompts/build-with-us"}},{"id":"cybersecurity-hero","object":"prompt","title":"Cybersecurity Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(60).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a **single-page React + TypeScript (Vite)** landing hero for a product called **\"Xero\"** that recreates the following section exactly. Use the **Inter** Google Font (weights 300, 400, 500, 600, 700, 800). Do not use Tailwind utility classes for the hero — write plain CSS in a global stylesheet. No purple/indigo branding outside the specified pink-magenta gradient arc.\n\n## Layout & Structure\n\nRender three top-level blocks centered on a black page (`#0a0a0f`), each constrained to `max-width: 1600px`, in this vertical order:\n\n1. **`<nav>`** — sticky-style top bar (not actually sticky, just at top)\n2. **`<section class=\"hero-card\">`** — the rounded dark hero card with the animated icon pipeline\n3. **`<div class=\"brands\">`** — a row of 5 monochrome brand logos\n\nThe body uses `display: flex; flex-direction: column; align-items: center; padding: 14px;` and `font-family: 'Inter', sans-serif;`.\n\n### CSS Variables (on `:root`)\n```\n--bg: #0a0a0f;\n--surface: #111118;\n--text: #f0f0f5;\n--text-muted: #8888a8;\n--accent: #c8a0e0;\n--accent-pink: #b04090;\n--border: rgba(255, 255, 255, 0.08);\n```\n\n## NAVBAR\n\n- Grid layout: `grid-template-columns: 1fr auto 1fr; padding: 12px 24px; margin-bottom: 14px;`\n- **Left**: `<span class=\"nav-logo\">Xero</span>` — `font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;`\n- **Center**: `<ul class=\"nav-links\">` with three `<a>` items: **Method**, **Pricing**, **Docs**. Color `--text-muted`, `font-size: 0.85rem`, gap 32px, hover transitions to `--text` over 0.2s.\n- **Right**: `<div class=\"nav-actions\">` containing two pill buttons:\n  - `.btn-login` — `rgba(255,255,255,0.06)` bg, 1px border `--border`, white text, padding `7px 18px`, `border-radius: 999px`, `font-size: 0.82rem`, `font-weight: 500`. Hover: bg `rgba(255,255,255,0.12)`.\n  - `.btn-signup` — solid white bg, black `#0a0a0f` text, same dimensions, `font-weight: 600`. Hover: `opacity: 0.88`.\n- The `.nav-menu` wrapper uses `display: contents` on desktop so the `ul` and actions become direct grid children.\n\n### Mobile (≤ 768px)\n- Nav becomes flex with space-between.\n- A `.menu-toggle` hamburger appears: 24×14 button with two 2px-tall white spans. When `.active`, span 1 rotates `translateY(6px) rotate(45deg)` and span 2 rotates `translateY(-6px) rotate(-45deg)` to form an X.\n- `.nav-menu.active` slides in from `right: -100%` to `right: 0` over 0.4s `cubic-bezier(0.4, 0, 0.2, 1)` as a full-screen `var(--bg)` overlay with column-stacked links and full-width buttons.\n- Toggling sets `document.body.style.overflow = 'hidden'`.\n\n## HERO CARD\n\nOuter `.hero-card` styles:\n- `width: 100%; max-width: 1600px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; position: relative; background: #0d0b12; padding: 80px 40px 70px; min-height: 640px;`\n- `display: flex; flex-direction: column; align-items: center; text-align: center;`\n\n### `::before` Gradient Arc (the signature visual)\nA radial gradient positioned at `50% -70%` with **many manually-tuned stops** producing a smooth dark→pink→white arc near the top:\n```\nbackground:\n  radial-gradient(circle at 50% -70%,\n    transparent 60%,\n    rgba(176,48,136,0.03) 63%,\n    rgba(176,48,136,0.08) 65%,\n    rgba(176,48,136,0.16) 67%,\n    rgba(176,48,136,0.28) 69%,\n    rgba(176,48,136,0.40) 71%,\n    rgba(176,48,136,0.52) 73%,\n    rgba(176,48,136,0.64) 75%,\n    rgba(176,48,136,0.74) 77%,\n    rgba(176,48,136,0.82) 79%,\n    rgba(210,70,175,0.92) 85%,\n    rgba(240,110,210,0.88) 87%,\n    rgba(255,205,250,0.92) 91%,\n    rgba(255,240,255,0.98) 93%,\n    #ffffff 95%),\n  radial-gradient(circle at 50% 35%, rgba(120,40,180,0.08) 0%, transparent 50%);\nz-index: 0; pointer-events: none;\n```\n\n### `.hero-grid` Overlay\nA separate absolutely-positioned div with crosshatch grid:\n```\nbackground-image:\n  linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),\n  linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);\nbackground-size: 40px 40px;\nmask-image: radial-gradient(circle at 50% -70%, transparent 60%, black 78%);\n```\nThis makes the grid only visible inside the arc area.\n\n## ICON PIPELINE (the animated centerpiece)\n\nContainer `.icon-pipeline`: `position: relative; display: flex; align-items: center; justify-content: center; max-width: 700px; margin-bottom: 52px; z-index: 1;`\n\nChildren in this exact order:\n\n1. **`<svg class=\"beam-svg\">`** — absolutely-positioned over the whole pipeline (`overflow: visible`), containing:\n   - A `<filter id=\"glow\">` with `feGaussianBlur stdDeviation=\"2\"` then `feComposite ... operator=\"over\"`.\n   - A `<linearGradient id=\"beam-gradient\" gradientUnits=\"userSpaceOnUse\">` with stops:\n     - `0%` `#b04090` opacity 0\n     - `20%` `#b04090` opacity 0.8\n     - `50%` `#fff` opacity 1\n     - `80%` `#c8a0e0` opacity 0.8\n     - `100%` `#c8a0e0` opacity 0\n   - Two `<path>` elements both stroked with `url(#beam-gradient)`:\n     - Glow path: `stroke-width=\"2\"`, `filter=\"url(#glow)\"`, `opacity: 0.6`.\n     - Core path: `stroke-width=\"0.8\"`.\n\n2. **Left node** `.icon-node.node-light-right` (id `node-stack`) — Lucide-style **layers** SVG (3 stacked diamonds): `<polygon points=\"12 2 2 7 12 12 22 7 12 2\"/><polyline points=\"2 17 12 22 22 17\"/><polyline points=\"2 12 12 17 22 12\"/>`.\n\n3. **`.pipeline-line`** — `width: 160px; height: 1px;` linear gradient `90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07)`.\n\n4. **Center wrapper** with `position: relative;` containing:\n   - **`.splash`** — 100×100 absolutely centered, `border-radius: 50%`, `background: radial-gradient(circle, rgba(255,77,200,0.6) 0%, transparent 70%)`, initial `opacity: 0; transform: scale(0.4); z-index: 2;`\n   - **`.icon-node-center`** (id `node-x`) — 64×64 round, `background: #1e1e2c`, neumorphic shadow (see below), containing the **Xero \"X\" logoipsum** SVG (`viewBox=\"0 0 40 40\"`) — the multi-cut path provided in the source.\n\n5. **`.pipeline-line.right`** — same 160×1 line, gradient reversed.\n\n6. **Right node** `.icon-node.node-light-left` (id `node-shield`) — Lucide-style **shield-check** SVG: `<path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/><polyline points=\"9 12 11 14 15 10\"/>`.\n\n### Side Node Styling\n`.icon-node`: 46×46 round, `background: #1a1a24`, `cursor: pointer`, `z-index: 3`, with **neumorphic** shadow stack:\n```\nbox-shadow:\n  6px 6px 12px rgba(0,0,0,0.4),\n  -4px -4px 10px rgba(255,255,255,0.03),\n  inset 1px 1px 1px rgba(255,255,255,0.05),\n  inset 4px 4px 8px rgba(0,0,0,0.4);\n```\nPlus an `::after` dotted outer ring at `inset: -7px` (`border: 1px dotted #1a1a24`).\nHover: `translateY(-1px)` and stronger shadows. Active: inset-only shadows.\nInner SVG: 20×20, stroke `rgba(255,255,255,0.7)`, `stroke-width: 1.5`, fill none, round caps.\n\n### Center Node Styling\n`.icon-node-center`: 64×64, `background: #1e1e2c`, similar but stronger neumorphic shadow:\n```\n8px 8px 16px rgba(0,0,0,0.5),\n-6px -6px 14px rgba(255,255,255,0.04),\ninset 1px 1px 2px rgba(255,255,255,0.06),\ninset 6px 6px 12px rgba(0,0,0,0.5);\n```\nInner Xero SVG: 28×28, `fill: white`.\n\n### Side-Light Glows\n- `.node-light-right::before` — half-circle radial glow on the right side: `radial-gradient(circle at right, rgba(200,200,200,0.45) 0%, transparent 70%)`, `opacity: 0` default, `opacity: 1` when `.active` (300ms transition).\n- `.node-light-left::before` — same but on left, color `rgba(200,100,255,0.5)`.\n\n### Splash Keyframe\n```\n@keyframes splash-anim {\n  0%   { transform: scale(0.4); opacity: 0.8; }\n  40%  { opacity: 0.6; }\n  100% { transform: scale(1.4); opacity: 0; }\n}\n```\nTriggered by adding `.animate` (0.8s ease-out forwards).\n\n## BEAM ANIMATION (JavaScript / requestAnimationFrame)\n\nImplement a state machine with four phases. On mount and on every window `resize`, recompute the SVG path:\n\n```\nconst pRect = pipeline.getBoundingClientRect();\nconst sRect = nodeStack.getBoundingClientRect();\nconst xRect = nodeX.getBoundingClientRect();\nconst shRect = nodeShield.getBoundingClientRect();\nconst startX = sRect.left + sRect.width/2 - pRect.left;\nconst startY = sRect.top  + sRect.height/2 - pRect.top;\n// midX/midY from nodeX, endX/endY from nodeShield\nconst d = `M ${startX},${startY} L ${midX},${midY} L ${endX},${endY}`;\n```\nSet this `d` on **both** beam paths.\n\nThe gradient is animated by mutating `x1` / `x2` of `#beam-gradient` (in `userSpaceOnUse`) so the bright window slides along. Use `halfWidth = 5` (percentage units), `center = percentage * 100`:\n```\ngradient.x1 = (center - 5) + '%'\ngradient.x2 = (center + 5) + '%'\ny1 = y2 = '0%'\n```\n\nState machine in a `requestAnimationFrame` loop, tracking `lastStateChange` timestamp:\n\n| State | Duration | Behavior |\n|---|---|---|\n| **`p1`** | 800 ms | `percentage` interpolates `0 → 0.5`. While `p < 0.4`, add `.active` to `node-stack`; remove after. At end: switch to `splash`, hide both beam paths (`opacity: 0`), add `.animate` to splash. |\n| **`splash`** | 800 ms | Wait. After elapsed: switch to `p2`, remove `.animate`, restore `opacity: 1` on both beam paths. |\n| **`p2`** | 800 ms | `percentage` interpolates `0.5 → 1.0`. While `p > 0.6`, add `.active` to `node-shield`. At end: remove `.active`, switch to `idle`. |\n| **`idle`** | 1000 ms | Wait, then loop back to `p1`. |\n\nTotal cycle ≈ 3.4 seconds, infinite.\n\n## HERO TEXT\n\n`.hero-content` `max-width: 620px; z-index: 1;`\n\n```html\n<h1 class=\"hero-heading\">\n  The simple way\n  <strong>encryption your data</strong>\n</h1>\n<p class=\"hero-sub\">\n  Fully managed data encrypting service and annotation<br>\n  platform for teams of all industries.\n</p>\n<a href=\"#\" class=\"btn-cta\">Get Started</a>\n```\n\n- `.hero-heading`: `font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;`\n- `.hero-heading strong`: `display: block; font-weight: 400; margin-top: 4px;` with `background: linear-gradient(to right, #ffffff, #a98597); -webkit-background-clip: text; -webkit-text-fill-color: transparent;`\n- `.hero-sub`: 0.9rem, `rgba(255,255,255,0.4)`, `max-width: 440px`, `margin: 0 auto 36px`.\n- `.btn-cta`: white pill, black text, `padding: 12px 32px; border-radius: 999px; font-weight: 600;`. Hover: `opacity: 0.9; translateY(-1px)`.\n\n## BRANDS ROW\n\n`.brands`: flex row, `gap: 64px; padding: 32px 24px 10px; flex-wrap: wrap; justify-content: center;`\n\nFive `.brand-item` blocks (each: flex, gap 10, color `rgba(255,255,255,0.35)`, font-size 1.1rem, font-weight 500, white-space nowrap, with a 22×22 SVG):\n\n1. **Expedia** — `<circle cx=12 cy=12 r=10 fill=current /><path fill=\"var(--bg)\" d=\"M8 9h8v2H8zm0 4h6v2H8z\"/>` then text `Expedia`.\n2. **asana** — three filled circles: `(12,7,r=4)`, `(5,16,r=3.5)`, `(19,16,r=3.5)`, text `asana`.\n3. **zenefits** — three stroked horizontal polylines (lengths 16/8/16) at y=8/12/16, text `zenefits`.\n4. **HubSpot** — small filled circle `(15.5,8.5,r=2.5)`, stroked circle `(8.5,8.5,r=2)`, paths connecting them; text `HubSp<span class=\"hubspot-dot\"></span>t` where `.hubspot-dot` is a 6×6 round superscript dot.\n5. **loom** — circle `(12,12,r=9)` plus vertical/horizontal/diagonal stroke lines forming a globe-with-X, text `loom`.\n\n## Responsive Breakpoints\n\n- `≤ 860px`: pipeline `gap: 0; margin-bottom: 40px;` `.pipeline-line { width: 80px }`.\n- `≤ 768px`: enable mobile hamburger menu, `.icon-node` shrinks to 38×38, `.icon-node-center` to 52×52, `.hero-card { padding: 60px 20px 60px; min-height: auto }`, `.brands { gap: 32px }`.\n- `≤ 480px`: `.hero-card { border-radius: 16px }`, `.brands { gap: 24px }`.\n\n## Z-Index Stack (critical for splash/beam layering)\n\n- `0` — gradient arc + grid overlay\n- `1` — pipeline container, hero text\n- `2` — beam SVG, splash\n- `3` — all icon nodes\n- `4` — node side-light glows\n- `1000-1001` — mobile nav overlay and toggle\n\nImplement all of the above exactly. Use `useRef` for the pipeline, the three nodes, both beam paths, the gradient, and the splash. Use one `useEffect` to set up the resize listener and the `requestAnimationFrame` loop, and clean both up on unmount.","url":"/prompts/cybersecurity-hero"}},{"id":"wellness-device","object":"prompt","title":"Wellness Devicex","summary":"A preview-led health prompt for generating a polished AI-built interface.","category":"Health","subcategory":"Health & wellness","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_015320_22766799-c95d-4a0a-8762-cec99a1a1571.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/Wellness%20Device%20.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page hero section for a product called \"Measured\" — a health/wellness wearable device landing page. The page is fullscreen (100vh), dark/moody aesthetic with layered imagery, a cursor-following spotlight reveal effect, and a frosted-glass navigation. Use React + Vite + Tailwind CSS + TypeScript.\n\n---\n\n## Fonts\n\n1. **Google Fonts — Inter** (weights 300-700): Used as the global default font on all elements (`* { font-family: 'Inter', sans-serif; }`)\n2. **Google Fonts — Instrument Serif** (regular + italic): Used for the hero heading \"Measured\". Load via `<link>` in index.html: `https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap`\n3. **Helvetica Neue Roman** (self-hosted woff2/woff in `/public/fonts/`): Applied via a `.font-helvetica-neue` class on the hero section wrapper. Declare with `@font-face`.\n\n---\n\n## Asset URLs (exact)\n\n- **Background Image (BG_IMAGE_1):** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260713_140344_79e1296a-86d7-43fd-9b5f-63ffe560f291.png&w=1280&q=85`\n- **Front Video (FRONT_VIDEO):** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_162101_0d7498c5-29bb-47bf-a99f-2773c0a880a9.mp4`\n- **Overlay Image (OVERLAY_IMAGE):** `https://soft-zoom-63098134.figma.site/_assets/v11/3f10f1876e118f72a396e05a6c2d099569478272.png`\n\n---\n\n## Page Structure & Layers (z-index order)\n\n### Navigation (z-50, fixed)\n- **Logo (top-left):** Custom SVG geometric logo (white, 28x28), resembling angular interlocking shapes. The exact SVG path: `M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z` (viewBox 0 0 256 256, fill white)\n- **Desktop center pill nav (hidden on mobile):** Fixed horizontally centered, contains buttons: \"Device\", \"Real Stories\", \"Science\", \"Plans\", \"Reach Us\". Uses `.liquid-glass` styling (frosted glass). Buttons are `text-white/70`, `text-sm`, `font-medium`, rounded-full, hover to white.\n- **Desktop CTA (top-right, hidden on mobile):** `.liquid-glass` pill button with a small green dot (w-2 h-2 rounded-full bg-green-400) and text \"Reserve Yours\", white text-sm font-medium.\n- **Mobile hamburger (top-right, hidden md+):** `.liquid-glass` rounded-full pill, contains two white lines (w-5 h-[1.5px] and w-3.5 h-[1.5px]).\n\n### Mobile Fullscreen Menu (z-55)\n- Background: `#0a0a0a` solid\n- Close button: top-right, `.liquid-glass` rounded-full with X made of two rotated white lines (+45deg, -45deg)\n- Nav items stacked vertically, centered, `text-3xl sm:text-4xl`, white/90, font-medium\n- \"Reserve Yours\" CTA at bottom with green dot, `.liquid-glass` pill\n- Staggered entry animations: each item slides up from 24px with opacity 0->1, delays incremented by 60ms starting at 100ms. Uses `cubic-bezier(0.77, 0, 0.18, 1)` easing. Close button rotates in from -90deg with scale 0.8.\n\n### Hero Section (100vh, overflow hidden)\n\n**Layer 1 — Grid Background (z-0, opacity 0.1):**\n- SVG with a repeating pattern of 48px cells. Pattern draws an L-shaped path (`M 48 0 L 0 0 0 48`), stroke `#64748b`, strokeWidth 0.6, no fill.\n- The grid subtly parallax-shifts based on cursor position (offset calculated as cursor position relative to section center * 16, eased at 0.06 factor).\n\n**Layer 2 — Background Image (z-10):**\n- `BG_IMAGE_1` displayed as `background-image`, `bg-center bg-cover bg-no-repeat`, absolutely positioned inset-0.\n\n**Layer 3 — Hero Text (z-20):**\n- The word \"Measured\" in huge uppercase text\n- Font: `'Instrument Serif', serif`\n- Sizes: `text-[4.5rem]` default, `xs:text-[5.5rem]`, `sm:text-[10rem]`, `md:text-[13rem]`, `lg:text-[16rem]`\n- `leading-[0.9]`, white, centered, positioned `top-20 sm:top-28 md:top-32`\n\n**Layer 4 — Overlay Image (z-25):**\n- `OVERLAY_IMAGE` as an `<img>` tag, absolutely positioned inset-0, `w-full h-full object-cover`, pointer-events-none. This is a semi-transparent PNG that sits on top of the background to add depth/atmosphere.\n\n**Layer 5 — Spotlight Reveal (z-30):**\n- A cursor-following radial reveal mask that shows a video underneath only where the cursor hovers.\n- **Radius:** 260px\n- **Mask gradient stops:** center full white (0-40%), then feathers out: 60% at 0.75 alpha, 75% at 0.4, 88% at 0.12, 100% at 0 (fully transparent).\n- **Implementation:** A hidden `<canvas>` draws the radial gradient at the smoothed cursor position. The canvas is exported as a dataURL and applied as a CSS mask (`-webkit-mask-image` / `mask-image`) on a div that contains the video.\n- **Cursor smoothing:** Uses `requestAnimationFrame` loop with lerp factor 0.1 (`smooth += (target - smooth) * 0.1`).\n- **Video placement:** The video (`FRONT_VIDEO`) is clipped to the bottom 60% of the viewport using `clipPath: 'inset(40% 0 0 0)'`. It autoplays, loops, is muted, and uses playsInline.\n\n---\n\n## Liquid Glass CSS Effect (`.liquid-glass`)\n\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\nThis creates a near-invisible frosted glass background with a subtle gradient border using the mask-composite trick (border-only gradient).\n\n---\n\n## Key Behaviors\n\n1. **Body overflow locks** when mobile menu is open\n2. **No scrolling** — single viewport hero only\n3. **Background is white** on the root container (`bg-white`), but the hero section fills the entire viewport with dark imagery\n4. **The reveal effect only shows video in the bottom 60%** of the screen (the top 40% is masked out via clipPath), so hovering over the top portion shows nothing extra — just the base layers\n\n---\n\n## Summary of the Visual Effect\n\nThe user sees a dark, atmospheric product shot (wearable device on a wrist) with \"Measured\" in giant serif text overlaid. A semi-transparent overlay adds haze/depth. As the user moves their cursor, a soft spotlight circle reveals an underlying looping video (showing the product in motion) — but only in the lower portion of the screen. The grid background subtly shifts with parallax. Navigation uses an elegant frosted-glass pill aesthetic.","url":"/prompts/wellness-device"}},{"id":"cross-border","object":"prompt","title":"Cross-Border","summary":"A preview-led transportation prompt for generating a polished AI-built interface.","category":"Transportation","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/mobile%20apps/freeautomobile.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a mobile-first logistics company landing page for \"CARGOX GROUP\" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library (motion/react) for animations. Use Vite as the build tool.\n\n## Structure\n\nThe page is wrapped in a realistic iPhone 15 Pro mockup (aspect ratio 393:852) with:\n- Dark frame (#1a1a1a) with 54px border-radius, 8px border (#2a2a2a), inset highlight (#3a3a3a)\n- Dynamic Island (126x36px, centered at top, black, 20px border-radius, z-200)\n- Home indicator at bottom (134x5px, white 30% opacity)\n- Scrollable content area inside with hidden scrollbar and `container-type: size`\n\nThe body background is #111111. The scrollable container uses `container-type: size; container-name: phone;` for container queries.\n\n## Fonts\n\n- Import **Barlow Condensed 800** from Google Fonts\n- Body font: Helvetica, Arial, sans-serif\n\n## SECTION 1: Hero (full viewport height of the container using `100cqb`)\n\n**Background:** Autoplaying, muted, looping video:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260620_185230_f7f71ef4-6655-469f-b9c6-efbdc1f7684a.mp4\n```\n\n**Navbar (absolute, top):**\n- Left: \"CARGOX\" (white) / \"GROUP\" (yellow #ffda00) in Barlow Condensed 800, uppercase, clamp(22px, 6vw, 32px)\n- Right: Hamburger menu icon (lucide-react Menu/X, 28px, white)\n- Both slide in from left/right with 0.6s expo-out ease\n\n**Mobile menu overlay:** Fixed, z-99, background #6682c2, centered nav items (Services, Industries, Company) in white 24px. AnimatePresence with scale + opacity transitions. Items stagger in from bottom.\n\n**Hero content (bottom of section, z-10, padding 0 20px 24px):**\n- Large headline in Barlow Condensed 800, uppercase, clamp(48px, 14vw, 72px), line-height 0.82:\n  - \"BEYOND\" (white) - slides from x:-400\n  - \"BORDERS\" (yellow #ffda00, text-align right) - slides from x:+400\n  - \"AND LIMITS\" (white) - slides from x:-400\n  - Staggered delays: 0s, 0.13s, 0.26s. Duration 0.85s, expo-out [0.16, 1, 0.3, 1]\n- CTA Button: Custom SVG pill shape (fill #ffda00) with a circular end section containing a rotating arrow (white stroke, rotates from -135deg to -90deg on hover). Text \"Get in touch\" centered in the non-circle area. Font: Helvetica 20px, color #002a35. Hover: scale 1.08, y:-2. Tap: scale 0.97.\n\n**Show hero content only after video `onCanPlay` fires** (fade in with AnimatePresence).\n\n## SECTION 2: Info Card\n\n**Background:** `linear-gradient(180deg, #C8C7B3 0%, #F0B172 50%, #EA7C58 100%)`\n**Padding:** clamp(60px, 12vh, 120px) 20px\n\n**Tagline** (scroll-triggered, slides from left):\n- \"LOGISTICS\" in Barlow Condensed 800, white, clamp(44px, 13vw, 64px)\n- \"shaped by scale\" / \"powered by precision\" in Helvetica, clamp(18px, 5vw, 26px), color #1a1a1a\n\n**World Map:**\n- Background map image: `https://polo-pecan-73837341.figma.site/_assets/v11/b6d561167283e799453232309bd13dd78b2d1afa.png`\n- Aspect ratio 435/340, extends 20px beyond container edges\n- SVG overlay (viewBox 0 0 299.037 142.509) at left:10%, top:18%, width:80% with 4 curved route paths in yellow (#FFDA00, 2.5 stroke):\n  ```\n  M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737\n  M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998\n  M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985\n  M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107\n  ```\n- Route lines animate with `pathLength` from 0 to 1, staggered\n- Animated yellow arrow polygons (points=\"0,-4 8,0 0,4\") using SVG `<animateMotion>` along each path, rotating automatically\n- 5 stop dots at coordinates: [9.519,15.519], [289.519,59.518], [220.519,9.519], [125.518,78.519], [19.519,104.519] - each is a yellow circle r=9.519 with dark center r=3.389 (#002A35). They pop in with scale animation.\n- 3 floating transport icons (white circle bg, 16% width, rounded-full, box-shadow):\n  - Ship: `https://image-bottom-92901062.figma.site/_components/v2/142c6a6f3074dd8aee013fa440ff4ff369649d48/08d6a37375d428e07c59e24a8529de89bfee157e.08d6a373.png` at left:26%, top:28.9%\n  - Car: `https://image-bottom-92901062.figma.site/_components/v2/142c6a6f3074dd8aee013fa440ff4ff369649d48/7d6f50a87e1427d9b4d1a9c9f1c064ff04b2b3f9.7d6f50a8.png` at left:70.8%, top:15.6%, rotate(9.73deg)\n  - Plane: `https://image-bottom-92901062.figma.site/_components/v2/142c6a6f3074dd8aee013fa440ff4ff369649d48/0e0282ab1c70db03d437b0d01875ce45557d49f6.0e0282ab.png` at left:55.2%, top:52.1%, rotate(180deg) scaleY(-1)\n  - Icons pop in (scale 0.5 -> 1), then continuously float up/down with infinite y animation\n\n**Stats** (scroll-triggered, slide in from opposite sides):\n- \"3M+\" white Barlow Condensed 800, clamp(50px, 14vw, 72px) + \"tons of cargo / delivered / without delays\" in #1a1a1a, clamp(14px, 3.8vw, 18px)\n- \"13+\" same styling, indented left clamp(40px, 12vw, 90px) + \"years of trusted / and reliable / operations\"\n\n## SECTION 3: Contact Us\n\n**Background:** #0a1f2b\n**Padding:** clamp(48px, 10vh, 96px) 20px clamp(32px, 6vh, 64px)\n\n**Heading** (scroll-triggered fade+slide from bottom):\n- \"CONTACT \" (white) + \"US\" (yellow #ffda00), Barlow Condensed 800, clamp(44px, 13vw, 64px)\n- Subtitle: \"Complete the form and our team will contact you soon.\" in #b0b8bc, clamp(14px, 3.8vw, 18px)\n\n**Form fields** (scroll-triggered, stagger from bottom):\n- 3 inputs (First Name, Last Name, E-mail): pill-shaped (40px radius), bg rgba(255,255,255,0.08), white text, clamp(14px, 3.5vw, 16px). On focus: bg brightens to 0.14, slight scale 1.01.\n- \"Send\" button: pill, bg #FFDA00, color #0a1f2b, font-weight 700, clamp(16px, 4vw, 20px). Hover: scale 1.03, y:-2, bg #ffe84d. Tap: scale 0.97.\n\n**Footer info:**\n- Email: info@cargox-group.com\n- Phone: +380 44 234-7890\n- Color #b0b8bc, hover slides right 4px and turns white\n\n**Social icons** (3 white circles 44x44, hover: scale 1.15, y:-3):\n- Instagram, LinkedIn, Facebook (inline SVG icons, fill #0a1f2b)\n\n**Scroll-to-top button** (right side): white 44x44 circle with up-arrow SVG, same hover animation.\n\n**Copyright:** \"(c) 2025. All rights reserved.\" in #6b7a80, clamp(12px, 3.2vw, 14px)\n\n## Animation System\n\n- Use `motion/react` (NOT framer-motion)\n- Easing curves: EXPO_OUT = [0.16, 1, 0.3, 1], EASE_OUT = [0.25, 0.46, 0.45, 0.94]\n- Scroll-triggered reveals using `useInView` from motion/react with `once: true` and margin: '0px 0px -40px 0px' or '0px 0px -60px 0px'\n- All scroll animations fire only once\n- Transport icons have infinite floating y-axis animation with varying durations (2.5-3.3s)\n- Mobile menu uses AnimatePresence for enter/exit\n\n## Dependencies\n\n```json\n{\n  \"motion\": \"^12.40.0\",\n  \"lucide-react\": \"^0.344.0\",\n  \"react\": \"^18.3.1\",\n  \"react-dom\": \"^18.3.1\"\n}\n```","url":"/prompts/cross-border"}},{"id":"subscription-agency","object":"prompt","title":"Subscription Agency","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/prompts%20(i've%20added%20them%20to%20the%20motionsites)/agencygradientArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Create a single-page landing hero section for a creative agency called \"Alwayzz\" with a React + Vite + Tailwind CSS setup. Use custom CSS (not Tailwind utilities) for all styling. The design should be minimal, clean, black-and-white, with tight negative letter-spacing throughout.**\n\n---\n\n### Fonts (loaded via Google Fonts in index.html)\n\n```\nInter: weights 400, 500, 600, 700\nSource Serif 4: weights 400, 600 (both normal and italic)\n```\n\nPreconnect to `fonts.googleapis.com` and `fonts.gstatic.com`.\n\n---\n\n### CSS Variables\n\n```css\n--bg: #ffffff;\n--text: #0a0a0a;\n--muted: #6b6b6b;\n--button-bg: #0a0a0a;\n--button-text: #ffffff;\n--border-soft: rgba(0, 0, 0, 0.08);\n--green: #17c964;\n```\n\n---\n\n### Components\n\n**1. Navbar (fixed top, z-index 100)**\n- Padding: `19px 36px`, max-width `1200px` centered.\n- Left: Logo text \"Alwayzz\" in `Source Serif 4`, 30px, weight 600, **italic**, letter-spacing `-0.08em`, with a registered trademark symbol in Inter 14px weight 600.\n- Right: \"Menu\" pill button (black bg, white text, rounded-full, 14px weight 500, Inter) with a `ChevronUp` icon (16px) from lucide-react.\n- Full-screen drawer overlay on click: white bg, fade transition 0.4s. Nav links centered vertically at 48px weight 500, letter-spacing `-0.04em`. Links: Projects, Plans, Team, FAQs, Get in Touch. Footer with copyright.\n\n**2. Hero Section**\n- Min-height: `850px`, padding: `160px 36px`, centered flex column.\n- **Background image** (via `::before` pseudo-element, covers full section):\n  ```\n  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260626_041422_4a459e05-abce-4150-9fb7-4ededc423cd1.png&w=1280&q=85\n  ```\n  Background-size: cover, background-position: center.\n\n- **Curved line animations** (decorative):\n  - 20 lines on left side, 20 on right side, absolutely positioned.\n  - Each line is a tall rectangle with one-sided border-radius (80%) and `2.5px solid #FCFAF8` border.\n  - Left lines: no left border, radius on right. Right lines: no right border, radius on left.\n  - Staggered `animationDelay: i * 0.25s`, widths from 60px increasing by 10px per line.\n  - Animation: `line-pulse` 5s ease-in-out infinite (fade in to 0.9 opacity, then back to 0 with slight scale).\n  - On mobile (<810px): hide side lines, show top horizontal lines instead (same animation, horizontal orientation with bottom border-radius).\n\n- **Ticker row** (max-width 500px, height 36px):\n  - Horizontal marquee scrolling left over 30s, linear, infinite.\n  - Items: \"Brand Identity\", \"App Development\", \"Visual Design\", \"Creative Video\", \"Iconography\"\n  - Each item: 13px, weight 500, color `var(--muted)`, padding `6px 14px`, rounded-full, background `rgb(251, 251, 251)`.\n  - Marquee has edge fade mask: `linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%)`.\n  - 4x duplicated rows for seamless loop.\n\n- **Title**:\n  ```\n  Premium creative <span class=\"serif italic\">alwayzz</span><sup style registered mark> on demand.\n  ```\n  - Max-width: 550px, font-size: 82px, line-height: 1.03, letter-spacing: `-0.07em`, weight 600, centered.\n  - The word \"alwayzz\" uses `Source Serif 4`, italic, weight 600, letter-spacing `-0.08em`.\n  - The registered mark: Inter, 24px, weight 600, vertical-align super.\n\n- **Subtitle**:\n  ```\n  A flexible design partnership for founders, brands, and agencies who want top craft delivered on their timeline.\n  ```\n  - Max-width: 476px, 17px, line-height 1.45, weight 400, color `var(--muted)`, centered.\n\n- **CTA row** (flex, gap 16px, centered):\n  - **Primary button** \"View Plans\": height 56px, padding `18px 30px`, rounded-full, black bg, white text, 15px weight 600 Inter. Hover: translateY(-1px) + box-shadow `0 4px 20px rgba(0,0,0,0.12)`.\n  - **Book button** \"Chat for 15 minutes\": white bg, `4px solid rgb(248,248,248)` border, rounded-full, padding `8px 24px 8px 8px`. Contains:\n    - Avatar image (40px circle): `https://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png`\n    - Text stack: primary \"Chat for 15 minutes\" (14px, weight 600, black) and secondary \"Pick a slot\" (12px, weight 500, `rgb(152,152,152)`) with a green dot (`rgb(29, 204, 93)`, 8px circle).\n\n- **Progressive blur** at bottom: absolute, full width, height 178px, gradient from transparent to `rgba(255,255,255,0.4)` at 40% to solid white.\n\n**3. TrustedBy Section**\n- Padding: 36px, max-width 1200px centered.\n- Left: label \"Partnered with top-tier companies globally\" (max-width 163px, 14px, weight 500, muted color).\n- Right: horizontal marquee (30s) of company names styled as text logos (16px, weight 600, black, each with distinct font-family):\n  - Airbnb (Cedarville Cursive, 700), Shopify (system-ui, 800), Notion (Georgia, 500), Linear (Inter, 600), Webflow (Inter, 700), Figma (system-ui, 600), Slack (Georgia, 700), Stripe (system-ui, 800), Vercel (Inter, 600), Framer (Source Serif 4, 600).\n- Same edge-fade marquee mask as ticker.\n\n---\n\n### Responsive Breakpoints\n\n- **< 1200px**: Hero padding `140px 32px`, title clamp(60px, 8vw, 72px), navbar padding 32px, drawer links 40px.\n- **< 810px**: Hero min-height 760px, padding `120px 24px 96px`. Background image rotated 90deg to fill portrait viewport. Side curved lines hidden, top horizontal lines shown. Title clamp(44px, 13vw, 52px). CTA buttons stack vertically full-width (max 320px). Trusted section stacks vertically. Drawer links 32px. Navbar padding 20px.\n\n---\n\n### Key Animation Keyframes\n\n```css\n@keyframes marquee-left {\n  from { transform: translateX(0); }\n  to { transform: translateX(-50%); }\n}\n\n@keyframes line-pulse {\n  0% { opacity: 0; transform: scale(1); }\n  15% { opacity: 0.9; }\n  70% { opacity: 0.4; }\n  100% { opacity: 0; transform: scale(0.85); }\n}\n```\n\n---\n\n### CloudFront Video/Image URL\n\nThe hero background image URL (exact):\n```\nhttps://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260626_041422_4a459e05-abce-4150-9fb7-4ededc423cd1.png&w=1280&q=85\n```\n\nThe book button avatar URL (exact):\n```\nhttps://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png\n```\n]","url":"/prompts/subscription-agency"}},{"id":"wellbeing-os","object":"prompt","title":"Wellbeing OS","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/prompts%20(i've%20added%20them%20to%20the%20motionsites)/Wellbeing%20OS.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a fullscreen hero section for a SaaS product called \"flowpath\" using React, Tailwind CSS, and Lucide React icons. The section should be a single `<section>` filling the viewport (`h-screen w-full overflow-hidden`).\n\n**Background:**\n- A looping, muted, autoplaying `<video>` element covering the full section with `object-cover`. Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_053131_1ec3dd1c-d627-44fb-ab20-6e1fce41b0d5.mp4`\n- A subtle dark overlay on top of the video: `bg-black/10`\n\n**Font:**\n- Use \"Helvetica Now Text\" as the primary font, loaded from: `https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text`\n- Fallback stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`\n- Applied globally via `* { font-family: ... }` in CSS\n\n**Navigation (top, not fixed/sticky):**\n- Full-width with responsive horizontal padding (`px-5 sm:px-6 md:px-12 lg:px-16`) and vertical padding (`py-4 sm:py-5`)\n- Logo: An inline SVG diamond shape (28x28) with two overlapping diamond paths at 0.9 and 0.5 opacity, followed by the text \"flowpath\" in white, `text-lg sm:text-xl font-medium tracking-tight`\n- Desktop nav (hidden on mobile): horizontal flex with items \"Product\" (dropdown: Connections, Workflows, Insights), \"Solutions\" (dropdown: Guides, Use cases, API reference), \"About\" (dropdown: Our story, Open roles, Reach us), \"Plans\" (no dropdown)\n- Nav buttons: `text-white/90 hover:text-white text-sm font-medium`, with a `ChevronDown` icon (3.5x3.5) that rotates 180 degrees when dropdown is open\n- Dropdowns open on hover (onMouseEnter/onMouseLeave), positioned `absolute top-full left-0`, using a custom `.liquid-glass` class, `rounded-xl py-3 px-2 min-w-[160px] shadow-xl`. Dropdown items: `text-white/80 hover:text-white text-sm rounded-lg hover:bg-white/5`\n- Desktop CTA: \"Log in\" link (`text-white/90 hover:text-white text-sm font-medium`) and \"Try it free\" button using `.liquid-glass rounded-full px-5 py-2 text-white text-sm font-medium`\n- Mobile menu button: animated toggle between `Menu` and `X` icons with rotation/scale/opacity transitions (duration-300)\n- Mobile menu: absolutely positioned below nav, slides in with `cubic-bezier(0.16,1,0.3,1)` easing over 400ms. Background: `bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6`. Shows all nav items with sub-items indented, plus a bordered footer with Log in and Try it free\n\n**Hero Content (below nav, top-aligned, not vertically centered):**\n- Container: `flex-1 flex items-start justify-center` with `pt-16 sm:pt-20 md:pt-24` for spacing from the nav\n- Text wrapper: `text-center max-w-3xl`\n- Heading `<h1>`: `text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em]`\n  - Content (with line breaks):\n    ```\n    Bridge the\n    gaps. <span class=\"text-white/60\">Ditch the</span>\n    <span class=\"text-white/60\">grindwork.</span>\n    ```\n- Subheading `<p>`: `text-white/80 text-sm sm:text-base md:text-lg leading-relaxed max-w-md mx-auto mt-6 sm:mt-8`\n  - Text: \"Flowpath unifies your complete wellness tools, so your crew spends less energy plugging gaps and more on real progress.\"\n- Two CTA buttons side by side (`flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8`):\n  1. \"Begin your journey\" - solid white button: `px-5 sm:px-6 py-2.5 sm:py-3 bg-white text-gray-900 text-sm font-semibold rounded-full hover:bg-white/90`\n  2. \"See it live\" - glass button: `px-5 sm:px-6 py-2.5 sm:py-3 liquid-glass rounded-full text-white text-sm font-semibold hover:bg-white/10`\n\n**Custom CSS (`.liquid-glass` class):**\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n**Additional CSS utilities:**\n```css\n@keyframes dropdown-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.96); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n.animate-dropdown { animation: dropdown-in 0.2s ease-out; }\n.duration-400 { transition-duration: 400ms; }\n```\n\n**Important notes:**\n- Dropdown elements need `!absolute` (Tailwind important modifier) to override the `position: relative` from `.liquid-glass`\n- The entire section is fully responsive with breakpoints at sm, md, lg, xl\n- No external UI libraries beyond Lucide React for icons\n- Tailwind config is default with no extensions","url":"/prompts/wellbeing-os"}},{"id":"adhd-planner","object":"prompt","title":"ADHD Planner","summary":"A preview-led app prompt for generating a polished AI-built interface.","category":"App","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_015343_03370d9a-1518-49af-94a7-19897462cb64.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/the%20frisArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page landing site for \"Drift\" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries.\n\n### Fonts\n\nImport via Google Fonts in `index.css`:\n- **Inter** (weights 400, 500, 600) -- used as base body font\n- **Instrument Serif** (italic only) -- used for the italic word \"the stress\" in the hero heading\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Inter:wght@400;500;600&display=swap');\n```\n\nBody: `font-family: 'Inter', sans-serif;` with antialiased rendering. `overflow-x: clip` on body.\n\n### Color Palette\n\n- Hero overlay: `bg-black/20`\n- About section background: `#F6E4CF`\n- Dark text / icons in About: `#321C04`\n- Light cream (button backgrounds in About): `#FFF9F2`\n- Muted accent (divider, secondary button bg): `#D9C4AA`\n- Secondary button hover: `#CEBA9E`\n- Dark button hover: `#1F1003`\n\n### Tailwind Config\n\nAdd a custom keyframe `fade-in-down` (0%: opacity 0, translateY -8px; 100%: opacity 1, translateY 0) with 0.2s ease-out animation.\n\n---\n\n### SECTION 1: HERO (full viewport height)\n\n- Full-screen section (`h-screen`, `overflow-hidden`, `mb-[-25px]` negative bottom margin so the next section overlaps it slightly)\n- **Background video** (autoPlay, muted, loop, playsInline, object-cover, absolute inset-0):\n  ```\n  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260711_090308_1dd0cea7-f9ba-4db4-8147-c7d746061c9e.mp4\n  ```\n- **Semi-transparent overlay**: `absolute inset-0 bg-black/20`\n\n#### Navbar (centered floating pill)\n- Positioned `absolute top-6 left-1/2 -translate-x-1/2 z-50`\n- White rounded-full pill with shadow-lg containing:\n  - Brand text \"Drift.\" (text-lg, font-bold, tracking-tight, text-black)\n  - Animated hamburger icon (two lines that animate to an X on click using rotate-45/-rotate-45 with cubic-bezier(0.77,0,0.175,1) easing, 300ms)\n- Dropdown (below the pill): white rounded-2xl container with links \"Features\", \"Drift AI\", \"FAQ\". Animated with opacity/scale/translate transitions. Hidden by default, pointer-events-none when closed.\n\n#### Hero Content (bottom-aligned)\n- Flex column, `justify-end`, padding bottom 12 (md:16)\n- **Heading** (centered):\n  - Line 1: \"Own your time\" -- text-5xl / sm:text-7xl / md:text-8xl / lg:text-[96px], font-normal, text-white, leading-[1.1], tracking-tight\n  - Line 2: \"without *the stress*\" -- same sizing. The words \"the stress\" are rendered in Instrument Serif italic via inline style `fontFamily: \"'Instrument Serif', serif\", fontStyle: 'italic'` inside an `<em>` tag with className `not-italic`\n- **Subtitle**: \"Drift is a calm, ADHD-friendly planner that turns scattered ideas into a clear path\" -- text-white/80, text-sm md:text-base, font-medium, max-w-[420px], centered\n- **CTA Bar** (centered below heading with gap):\n  - Container: `bg-black/25 backdrop-blur-md rounded-xl`, flex row, items-center, pl-6 pr-1 py-1\n  - Desktop text: \"No noise. No complicated systems. Just your day, gently sorted.\" (text-white, text-sm, font-medium, hidden on mobile)\n  - Mobile text (sm:hidden): \"No noise. Just your day, gently sorted.\"\n  - Button: \"Start for free\" -- bg-white, text-black, text-sm, font-medium, px-5, py-2.5, rounded-xl, hover:bg-white/90\n\n---\n\n### SECTION 2: ABOUT SECTION\n\n- Background: `bg-[#F6E4CF]`\n- **Rounded top corners**: `rounded-t-[25px]` with `relative z-10` (overlaps hero by 25px)\n- Padding: py-20 md:py-32, px-6\n\n#### Top Area (centered, max-w-3xl)\n- Paragraph: \"We craft tools that move with your rhythm, not over it. Designed for ease, presence, and flow.\" -- text-[#321C04], text-base md:text-lg, text-center, leading-relaxed, max-w-lg\n- Two buttons (flex-wrap, centered, gap-4):\n  1. **\"Say hello\"** -- dark pill button (`bg-[#321C04]`, `text-[#FFF9F2]`, rounded-full). Has a white circle on the left containing a Mail icon (lucide-react, size 16). Text is uppercase, tracking-wide, font-medium.\n  2. **\"Stay informed\"** -- muted pill button (`bg-[#D9C4AA]`, `text-[#321C04]`, rounded-full). Has a white circle on the left containing a Plus icon. Same text styling.\n\n#### Decorative Divider\n- Full-width flex row with: small circle (w-2 h-2 rounded-full bg-[#D9C4AA]) + 2px gap + horizontal line (flex-1 h-[2px] bg-[#D9C4AA]) + 2px gap + small circle\n\n#### Bottom Area (max-w-6xl, flex-col md:flex-row)\n- Left: Custom SVG logo (40x40, viewBox 0 0 256 256, abstract geometric shape with rounded quadrants, fill #321C04) + label \"Calm / Amplified\" (text-xs, uppercase, tracking-widest, font-semibold, line break between words)\n- Right: Large paragraph: \"We make AI tools and assistants. But, most importantly, we help you remember what gentle productivity looks like when software moves with you, not over you. We create systems that carry the cognitive weight, so you can attend to what truly counts.\" -- text-2xl / sm:text-3xl / md:text-4xl / lg:text-[42px], leading-[1.3], font-normal, text-[#321C04]\n\n---\n\n### SECTION 3: FEATURES SECTION (scroll-driven cards)\n\n- **Fixed background image** (behind content, -z-10):\n  ```\n  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260709_082449_46df5cc4-ad98-4541-9236-a2659c1478a4.png&w=1920&q=85\n  ```\n- Padding: px-5 md:px-10 lg:px-16, py-20 md:py-40 lg:py-48\n\n#### Layout: CSS Grid on lg+ (400px / xl:460px left column, 1fr right column, gap-24 / xl:gap-48)\n\n#### Left Column (sticky on desktop)\n- `lg:sticky lg:top-0 lg:h-screen lg:flex lg:flex-col lg:justify-between lg:py-32`\n- Heading: \"Software that flows with your mind, not over it\" -- text-white, text-2xl / sm:text-3xl / lg:text-[46px], leading-[1.2], font-normal\n- Feature nav buttons (hidden below lg): list of feature titles as buttons. Active state: `bg-black/20 text-white`. Inactive: `bg-black/20 text-white/40`. Clicking scrolls to card (smooth, block: center).\n- Bottom CTA (hidden below lg): \"No noise. No complicated systems. Just your day, gently sorted.\" + \"Start for free\" button (same style as hero)\n\n#### Right Column (scrolling cards)\n- 3 feature cards with IntersectionObserver:\n  - **Active detection** (threshold 0.6): highlights corresponding nav button\n  - **Reveal animation** (threshold 0.15): cards slide in from right (translate-x-16 to translate-x-0, opacity 0 to 1, duration-700, ease-out). Once revealed, stays visible.\n\nEach card (`bg-black/20 backdrop-blur-sm rounded-3xl p-6 md:p-10`):\n- Same SVG logo (40x40, fill rgba(255,255,255,0.8))\n- Title (text-white, text-xl md:text-2xl, font-medium)\n- Video (aspect-video, rounded-2xl, overflow-hidden, bg-black/30, autoPlay/muted/loop/playsInline)\n- Description (text-white/60, font-medium, text-sm md:text-base, leading-relaxed)\n\n**Feature data:**\n\n1. Title: \"Built for ease, not urgency\"\n   Description: \"Drift strips away the noise that makes organizing feel draining. Every surface is made to be soft, quiet, and intuitive so you can move forward, not get stuck decoding.\"\n   Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_102608_5fa1187d-9ac6-44fb-82ab-54376200abc0.mp4`\n\n2. Title: \"The gentlest way to start\"\n   Description: \"Beginning your day should feel natural, not daunting. Drift eases you into motion with subtle cues and a quiet view of what deserves your energy right now.\"\n   Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260625_174131_395bc785-bb21-4e65-abf6-27c56f0764b6.mp4`\n\n3. Title: \"Deep, undivided focus\"\n   Description: \"No interruptions, no clutter. Drift holds you in the present task with a stripped-back layout that softens all else until you are truly ready to shift.\"\n   Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260525_052706_d2e390fd-1846-4fe7-a4d8-8d2f1c875358.mp4`\n\n---\n\n### SVG Logo (used in About + Feature cards)\n\n```svg\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 256 256\" fill=\"none\">\n  <path d=\"M 256 256 L 178 256 C 150.386 256 128 233.614 128 206 L 128 256 L 0 256 L 0 192 C 0 156.654 28.654 128 64 128 C 99.346 128 128 156.654 128 192 L 128 128 L 256 128 Z M 78 0 C 105.614 0 128 22.386 128 50 L 128 0 L 256 0 L 256 64 C 256 99.346 227.346 128 192 128 C 156.654 128 128 99.346 128 64 L 128 128 L 0 128 L 0 0 Z\" fill=\"#321C04\" />\n</svg>\n```\n\n---\n\n### File Structure\n\n```\nsrc/\n  App.tsx          -- Hero section + renders AboutSection + FeaturesSection\n  main.tsx         -- ReactDOM render\n  index.css        -- Font imports + Tailwind directives + body styles\n  components/\n    Navbar.tsx     -- Floating pill navbar with animated hamburger\n    AboutSection.tsx -- Cream-colored about section\n    FeaturesSection.tsx -- Dark features with sticky left + scrolling cards\n```","url":"/prompts/adhd-planner"}},{"id":"404-planet","object":"prompt","title":"404 Planet","summary":"A preview-led 404 prompt for generating a polished AI-built interface.","category":"404","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(7).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-page 404 error page for a hosting company called \"NEXOVA\". The entire page is a single viewport-height layout with a looping background video, a navigation bar, a centered hero/404 section, and a multi-column footer. Use React + Tailwind CSS + Lucide React icons. No other UI libraries.\n\n---\n\n**FONT**\n\nLoad \"Helvetica Now Var\" via this stylesheet in `index.html`:\n```\n<link href=\"https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var\" rel=\"stylesheet\">\n```\nApply it globally on the root container via inline style:\n```\nfontFamily: '\"Helvetica Now Var\", Helvetica, Arial, sans-serif'\n```\n\n---\n\n**BACKGROUND VIDEO**\n\nA `<video>` element with `autoPlay muted loop playsInline`, positioned `absolute inset-0 w-full h-full object-cover` behind all content. The video source URL is:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4\n```\nThis is a cinematic dark-blue Earth-from-space shot.\n\n---\n\n**LAYOUT STRUCTURE**\n\nThe root is `relative min-h-screen flex flex-col`. Inside it:\n1. The background `<video>` (absolute, behind everything)\n2. A content wrapper `relative z-10 flex flex-col min-h-screen` containing nav, hero, and footer\n\n---\n\n**NAVIGATION BAR**\n\n- Flex row, `items-center justify-between`, padding `px-6 md:px-12 lg:px-16 py-5`\n- **Logo (left):** A custom SVG icon (4 quarter-circle leaf shapes forming a circle, white fill, `w-8 h-8`) next to the text \"NEXOVA\" in `text-white text-xl font-bold tracking-wider`. The exact SVG path is:\n  ```\n  M480 240a240 240 0 0 0-240 240 240 240 0 0 0 240-240Z\n  M240 0A240 240 0 0 0 0 240 240 240 0 0 0 240 0Z\n  M480 240A240 240 0 0 0 240 0a240 240 0 0 0 240 240Z\n  M240 480A240 240 0 0 0 0 240a240 240 0 0 0 240 240Z\n  ```\n  viewBox `0 0 480 480`\n- **Desktop nav links (center):** Hidden below `lg`. Links: Domain, Servers, Cloud, Managed, Email, Privacy. Styled `text-white/80 hover:text-white text-sm tracking-wide` with 200ms color transition, `gap-8`.\n- **Login button (right):** Hidden below `lg`. Gradient button `bg-gradient-to-r from-emerald-400 to-cyan-500`, white text, `text-sm font-semibold px-6 py-2.5 rounded-full`. Text \"LOG IN\" with a Lucide `ArrowRight` icon (w-4 h-4) beside it.\n- **Mobile hamburger:** Visible below `lg` breakpoint. A button with `z-[60]` showing Lucide `Menu` / `X` icons that cross-fade with rotation: the active icon is `opacity-100 rotate-0 scale-100`, the inactive is `opacity-0 rotate-90 scale-75` (or `-rotate-90`), all with `transition-all duration-300`.\n\n---\n\n**MOBILE MENU**\n\nUses two state variables: `mobileMenuOpen` (controls mount) and `menuVisible` (controls animation). When opening, `mobileMenuOpen` is set true, then `menuVisible` becomes true via `useEffect`. When closing, `menuVisible` is set false first, then after a 500ms timeout `mobileMenuOpen` is set false.\n\n- **Backdrop:** Fixed overlay `inset-0 z-40 bg-black/40 backdrop-blur-md`, fades in/out with 400ms opacity transition. Clicking it closes the menu.\n- **Menu panel:** Absolutely positioned `left-0 right-0 top-[68px] z-50`. Contains a backdrop-only blur layer (`backdrop-blur-xl`, no background color, `rounded-b-2xl`) and content on top (`relative z-10`).\n- **Menu items:** Each nav link is centered, `text-lg sm:text-xl font-light tracking-[0.08em]`, `text-white/80 hover:text-white`. They stagger-animate in: each link has a `transitionDelay` of `350 + (index * 50)ms` when appearing (0ms when disappearing), transitioning opacity 0->1 and translateY 12px->0 over 400ms with `ease-out`.\n- **Login button:** Same gradient style as desktop, appears last in the stagger sequence with delay `350 + (linkCount * 50)ms`.\n\n---\n\n**HERO / 404 SECTION**\n\nCentered vertically and horizontally in the remaining space: `flex-1 flex flex-col items-center justify-center text-center px-4 sm:px-6 py-12 sm:py-16 md:py-0`.\n\n1. **Subtitle lines (two h1 tags):**\n   - \"This page seems to have\" and \"slipped beyond our reach :/\"\n   - Both: `text-white/80 text-lg xs:text-2xl sm:text-3xl md:text-5xl font-light leading-snug tracking-tight`\n   - First line: `mb-1 sm:mb-2`, second line: `mb-8 sm:mb-12`\n\n2. **Giant \"404\" text:**\n   - Wrapped in a `relative mb-8 sm:mb-12 w-full flex justify-center overflow-visible` div\n   - The `<span>`: `text-[80px] xs:text-[100px] sm:text-[140px] md:text-[200px] lg:text-[260px] font-black text-white leading-none tracking-tighter select-none`\n   - Has class `four-oh-four` which applies this CSS glow:\n     ```css\n     .four-oh-four {\n       text-shadow: 0 0 80px rgba(255,255,255,0.3), 0 0 160px rgba(255,255,255,0.1);\n     }\n     ```\n\n3. **\"Return to Main Page\" button:**\n   - An `<a>` tag with class `liquid-glass` (glassmorphism effect) + `text-white text-[10px] xs:text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.2em] font-medium px-6 sm:px-8 py-3 sm:py-3.5 rounded-full uppercase`\n   - The `liquid-glass` CSS class:\n     ```css\n     .liquid-glass {\n       background: rgba(255, 255, 255, 0.01);\n       background-blend-mode: luminosity;\n       backdrop-filter: blur(4px);\n       -webkit-backdrop-filter: blur(4px);\n       border: none;\n       box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n       position: relative;\n       overflow: hidden;\n     }\n     .liquid-glass::before {\n       content: '';\n       position: absolute;\n       inset: 0;\n       border-radius: inherit;\n       padding: 1.4px;\n       background: linear-gradient(180deg,\n         rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n         rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n         rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n       -webkit-mask-composite: xor;\n       mask-composite: exclude;\n       pointer-events: none;\n     }\n     ```\n\n---\n\n**FOOTER**\n\nPositioned at the bottom: `relative z-10 px-4 sm:px-6 md:px-12 lg:px-16 pb-8 sm:pb-10 pt-10 sm:pt-16`.\n\nGrid: `grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 sm:gap-8 lg:gap-6`.\n\n**4 link columns** (iterated from data):\n- SERVERS: Web Servers, VPS Servers, Cloud Servers, Managed Instances, Bare Metal\n- DOMAINS: Find Domain, Move Domains, DNS Manager, Domain Costs\n- HELP US: Open a Ticket, FAQs, Docs, Tutorials, Forum\n- ABOUT: Our Story, Leadership Team, Press Room, We Hire, Alliance, Blog\n\nEach column title: `text-white text-[10px] sm:text-xs font-bold tracking-[0.15em] mb-3 sm:mb-4`. Links: `text-white/50 hover:text-white/80 text-[10px] sm:text-xs` with 200ms transition, in a `space-y-2 sm:space-y-2.5` list.\n\n**Newsletter + Social column** (`col-span-2 lg:col-span-2`):\n- Heading \"JOIN FOR EXCLUSIVE DEALS\" (same title style)\n- Email input + \"SEND IT\" button side by side in a flex row, `max-w-sm`. Input: white bg, `rounded-l-md`, placeholder \"Type your email to sign up\". Button: same emerald-to-cyan gradient, `rounded-r-md`, `font-bold tracking-wider`.\n- Heading \"CONNECT\" with `mt-5 sm:mt-6 mb-3`\n- 6 social icons (Lucide: Facebook, Twitter, Dribbble, Youtube, Linkedin, Instagram), each `w-4 h-4`, `text-white/50 hover:text-white`, `gap-3`.\n\n---\n\n**RESPONSIVE BREAKPOINTS**\n- `xs` is not a default Tailwind breakpoint -- if used, it needs to be added, or replaced with `sm`. The design uses mobile-first sizing that scales up at `sm` (640px), `md` (768px), and `lg` (1024px).\n- Mobile: 2-col footer grid, hamburger menu, smaller text sizes\n- Tablet (md): 4-col footer grid so newsletter sits beside the last link column\n- Desktop (lg): 6-col footer grid, full horizontal nav, login button visible","url":"/prompts/404-planet"}},{"id":"wellness-balance","object":"prompt","title":"Wellness Balance","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(11).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single-page hero landing for a wellness/supplements brand called \"TerraElix\" using React + Tailwind CSS + Lucide React icons. The page is a full-viewport hero with a background image, navbar, headline with word-by-word reveal animations, CTA section, and a 3-panel footer strip. It must be fully responsive (mobile, tablet, desktop).\n\n---\n\n## Fonts\n\nImport from Google Fonts:\n- **DM Sans** (weights 400, 500) -- used for brand name, nav links, headline, panel 1 text\n- **Inter** (weights 400, 500) -- used for buttons, body text, panel 2/3 text\n\n---\n\n## Background\n\nFull-screen background image covering the entire viewport:\n```\nurl: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_110248_b62f758d-f68c-4045-a7b4-91771d6d0a0f.png&w=1280&q=85\nbackground-size: cover; background-position: center; background-repeat: no-repeat;\n```\n\n---\n\n## Layout Structure\n\n```\n<div> (min-h-screen, flex flex-col, relative, overflow-hidden)\n  <nav> -- navbar\n  <section> -- hero content (flex-1, flex col, justify-center)\n  <div> -- mobile/tablet product image (visible below lg)\n  <div> -- 3-panel grid footer\n  <img> -- desktop floating product image (absolute, hidden below lg)\n</div>\n```\n\n---\n\n## Navbar\n\n- **Left:** Brand name \"TerraElix\" -- white, DM Sans 500, 30px, letter-spacing -0.05em\n- **Center (desktop only, hidden on mobile):** Nav links \"About\", \"Products\", \"Promotions\", \"Contact\" -- DM Sans 500, 18px, text-white/90, gap 10 (lg)\n- **Right:** Row of icon buttons + avatar + mobile menu toggle\n  - Search icon (Lucide `Search`, size 20, strokeWidth 1.5)\n  - Shopping bag icon (Lucide `ShoppingBag`, size 20, strokeWidth 1.5)\n  - Return icon (Lucide `CornerUpLeft`, size 20, strokeWidth 1.5)\n  - Round avatar image (w-8 h-8, lg:w-10 lg:h-10, rounded-full, object-cover):\n    ```\n    https://polo-pecan-73837341.figma.site/_assets/v11/ca8093996e970200cbcf8bde8744175e52da5a79.png\n    ```\n  - Hamburger menu button (md:hidden, Lucide `Menu` / `X` toggle)\n\n- **Mobile overlay menu:** fixed inset-0 bg-black/90 z-30 with centered nav links (text-2xl, white)\n\nPadding: px-5 sm:px-8 lg:px-10, py-4 lg:py-5\n\n---\n\n## Hero Headline\n\nFont: DM Sans, weight 400, letter-spacing -0.05em\n\nResponsive sizes:\n- Base: 48px/50px line-height\n- sm: 80px/72px\n- md: 110px/95px\n- lg: 130px/110px\n- xl: 155px/125px\n\nText layout (3 lines):\n```\nLine 1: \"The\" (white) \"Power\" (white) \"of\" (white/45 -- dimmed)\nLine 2: \"Nature\" (dimmed) \"in\" (dimmed) \"Every\" (white)\nLine 3: \"Capsule\" (white) + inline image\n```\n\nEach word is wrapped in a container with overflow-hidden, and the inner span animates with `wordReveal` (translateY 100% + blur to visible). Staggered delays: 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s.\n\n**Inline image** after \"Capsule\" (hidden on mobile, sm:inline-block, align-middle, ml-2 lg:ml-4):\n```\nhttps://polo-pecan-73837341.figma.site/_assets/v11/6a7de4fbe9c9e2315040607320a9ff5e93117bf4.png\nheight: clamp(60px, 10vw, 160px); width: auto;\n```\n\n---\n\n## CTA Section\n\nBelow the headline, mt-8 sm:mt-12 lg:mt-[75px]. Flex row on sm+, column on mobile. Gap: 5 (mobile), 8 (sm), 50px (lg).\n\n- **Button:** \"Explore Now\" + ArrowUpRight icon. bg-black text-white rounded-md. Sizes: w-full sm:w-[240px] md:w-[280px] lg:w-[310px], h-14 sm:h-16 lg:h-[72px]. Font: Inter 500, responsive text (base to 2xl), letter-spacing -0.03em.\n- **Paragraph:** \"Discover our new plant-based supplements for daily balance and clean energy.\" -- white, max-w-[310px], Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.45, letter-spacing -0.03em.\n\n---\n\n## Mobile/Tablet Product Image (lg:hidden)\n\nVisible below lg breakpoint. Oversized, bleeding off edges:\n```\nhttps://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png\nw-[180%] sm:w-[151%] max-w-[1296px], object-contain, mx-auto, drop-shadow-2xl\nmargin-bottom: -180px sm:-220px (overlaps panels below)\n```\n\n---\n\n## Bottom 3-Panel Grid\n\n`grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr]`, relative z-10.\n\n### Panel 1 (bg-[#ECEDEC])\n- Text: \"Start your personalized path to natural balance\" -- DM Sans 400, text-2xl sm:text-[28px] lg:text-[35px], leading-[1.1], letter-spacing -0.05em, max-w-[350px]\n- Link: \"Personal Assessment\" -- underline, Inter 400, text-base lg:text-lg, letter-spacing -0.03em\n- Decorative image (absolute right-0 bottom-0, h-full, mix-blend-multiply):\n  ```\n  https://polo-pecan-73837341.figma.site/_assets/v11/6736cbe6e26afa2cd7c04a91892a79f7640785b5.png\n  ```\n\n### Panel 2 (bg-[#FEFDF9]) -- Auto-rotating card carousel\n4 cards cycling every 3500ms with fade/slide transition:\n1. FlaskConical icon, bg-black circle: \"Experience our newly enhanced natural formula\"\n2. Leaf icon, bg-emerald-800 circle: \"Pure organic ingredients sourced sustainably\"\n3. Droplets icon, bg-cyan-800 circle: \"Advanced bioavailability for maximum absorption\"\n4. Sun icon, bg-amber-700 circle: \"Clinically tested for daily energy & vitality\"\n\nEach card: icon in a 40px (sm:48px) round colored circle + text (Inter 400, text-sm sm:text-base lg:text-lg, text-black/80, line-height 1.2, letter-spacing -0.03em).\n\nActive card: opacity-100 translate-y-0. Inactive: opacity-0 translate-y-4 absolute.\n\nBottom dots: 4 thin bars (h-0.5, flex-1, rounded-full). Active: bg-black. Inactive: bg-black/20.\n\n### Panel 3 (bg-black)\n- Left: Product image (w-[120px] h-[82px] sm:w-[160px] h-[110px] lg:w-[208px] h-[142px]):\n  ```\n  https://polo-pecan-73837341.figma.site/_assets/v11/30e8f38d1f993c357a3be2721557fc899d5640fc.png\n  ```\n- Right: \"+14K\" (white, Inter 400, text-2xl sm:text-3xl lg:text-[35px], letter-spacing -0.05em) + \"People have already optimized their wellness\" (text-white/60, Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.2)\n\n---\n\n## Desktop Floating Product (lg+ only)\n\nSame image as mobile product, but absolutely positioned for desktop:\n```\nhttps://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png\nposition: absolute; z-0; hidden lg:block;\nwidth: clamp(600px, 80vw, 1412px); height: auto;\nbottom: -10%; right: clamp(-400px, -20vw, -100px);\n```\n\n---\n\n## Animations (CSS keyframes)\n\n```css\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(30px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes slideInLeft {\n  from { opacity: 0; transform: translateX(-40px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n@keyframes slideInRight {\n  from { opacity: 0; transform: translateX(40px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n@keyframes scaleIn {\n  from { opacity: 0; transform: scale(0.9); }\n  to { opacity: 1; transform: scale(1); }\n}\n@keyframes wordReveal {\n  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }\n  to { opacity: 1; transform: translateY(0); filter: blur(0px); }\n}\n```\n\nAll use `cubic-bezier(0.16, 1, 0.3, 1)` easing with `both` fill mode.\n\n**Classes and their animations:**\n- `.animate-fade-up` -- fadeUp 0.8s\n- `.animate-fade-in` -- fadeIn 0.7s\n- `.animate-slide-left` -- slideInLeft 0.8s\n- `.animate-slide-right` -- slideInRight 0.8s\n- `.animate-scale-in` -- scaleIn 1s\n- `.animate-word-reveal > span` -- wordReveal 0.7s\n\n**Delay classes:** .delay-200 through .delay-1100 (increments of 0.1s)\n\n**Animation assignments:**\n- Navbar container: animate-fade-in\n- Brand name: animate-slide-left delay-200\n- Nav links: animate-fade-in delay-400\n- Right icons: animate-slide-right delay-300\n- CTA row: animate-fade-up delay-600\n- Desktop product image: animate-scale-in delay-700\n- Mobile product image: animate-scale-in delay-800\n- Panel 1: animate-fade-up delay-900\n- Panel 2: animate-fade-up delay-1000\n- Panel 3: animate-fade-up delay-1100\n- Inline capsule image: animate-scale-in delay-1000","url":"/prompts/wellness-balance"}},{"id":"prosthetics-hero","object":"prompt","title":"Prosthetics Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(49).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a React + TypeScript + Tailwind CSS single-page hero section using Vite. The entire page lives in `src/App.tsx`. No extra libraries beyond `react`, `react-dom`, `lucide-react`, and Tailwind.\n\n**Background:**\n- A fullscreen autoplaying, muted, looping, `playsInline` background `<video>` element absolutely positioned `inset-0 w-full h-full object-cover`.\n- Video URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4`\n- Root wrapper: `relative min-h-screen overflow-hidden bg-[#f0f0ee]`.\n- Foreground content wrapper: `relative z-10 flex flex-col min-h-screen`.\n\n**Logo (inline SVG component):**\n- `width=\"18\" height=\"18\"`, `viewBox=\"0 0 256 256\"`, `fill=\"none\"`.\n- Single path with `fill=\"rgb(84, 84, 84)\"` and `d=\"M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z\"`.\n\n**Navbar (centered, pill-style, two separate pills):**\n- `<nav>` classes: `flex items-center justify-center pt-4 sm:pt-6 px-4 sm:px-8 gap-2 sm:gap-3`.\n- Left circular logo container: `flex items-center justify-center rounded-full w-10 h-10 sm:w-11 sm:h-11 shrink-0`, inline style `backgroundColor: '#EDEDED'`, contains the Logo.\n- Right pill container: `flex items-center gap-4 sm:gap-10 rounded-xl px-4 sm:px-8 py-2.5 sm:py-3`, inline style `backgroundColor: '#EDEDED'`.\n- Nav links array: `['Story', 'Products', 'Help', 'Support']`. Each anchor: `text-[12px] sm:text-[14px] font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200`.\n\n**Hero content (bottom-left aligned):**\n- Outer: `flex-1 flex items-end pb-10 sm:pb-16 lg:pb-20 px-6 sm:px-12 md:px-20 lg:px-28`.\n- Inner: `max-w-xs`. Four stacked elements, each with `mb-3`:\n\n1. Badge link: `inline-flex items-center gap-1.5 text-[11.5px] font-medium text-blue-500 hover:text-blue-600 transition-colors mb-3 group`. Text: `Seen on Shark Tank in India` followed by an arrow `→` in a span with `inline-block transition-transform duration-200 group-hover:translate-x-0.5`.\n\n2. Headline `<h1>`: `text-[1.5rem] sm:text-[1.75rem] leading-[1.15] font-medium text-gray-900 tracking-tight mb-3`. Text: `Simple, smart prosthetics made for people who keep fighting.`\n\n3. Subtext `<p>`: `text-[13px] text-gray-400 font-normal mb-3`. Text: `Reclaim your movement now.`\n\n4. CTA anchor: `inline-flex items-center gap-2 text-[13px] font-medium text-blue-500 border border-blue-400 rounded-full px-5 py-2.5 hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200 group`. Text: `Try a free fitting` plus arrow `→` in span with `transition-transform duration-200 group-hover:translate-x-0.5`.\n\n**Animations / micro-interactions:**\n- Arrow spans translate right by `0.5` on group hover (`group-hover:translate-x-0.5`).\n- CTA fills blue on hover (bg + text + border transitions, 200ms).\n- Nav links shift from gray-700 to gray-900 on hover.\n\n**Fonts:** Default Tailwind sans-serif system font stack (no custom font). All sizes are exact pixel/rem values above (`11.5px`, `12px`, `13px`, `14px`, `1.5rem`, `1.75rem`).\n\n**Colors:** Page background `#f0f0ee`; pill backgrounds `#EDEDED`; accent `blue-500/600/400`; text `gray-900/700/400`.\n\nDo not add any other sections, no Supabase wiring, no routing. Only the single hero page as described.","url":"/prompts/prosthetics-hero"}},{"id":"nexacore-control","object":"prompt","title":"NexaCore Control","summary":"A preview-led features prompt for generating a polished AI-built interface.","category":"Features","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(33).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single React + TypeScript + Tailwind CSS v3 component called `FreedomSection`. It uses `hls.js` for HLS video streaming and `useEffect` / `useRef` from React. No external icon libraries — all icons are inline SVG or `<img>` tags. Fully mobile-responsive. No hover states.\n\n---\n\n## Global font\n\nRegister **\"Mazzard H\"** in `index.css` and apply it globally:\n\n```css\n@font-face {\n  font-family: 'Mazzard H';\n  font-weight: 400;\n  font-style: normal;\n  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');\n}\n@font-face {\n  font-family: 'Mazzard H';\n  font-weight: 500;\n  font-style: normal;\n  src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype');\n}\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  html, body, * { font-family: 'Mazzard H', sans-serif; }\n}\n```\n\n---\n\n## Dependencies\n\n`hls.js` must be installed: `npm install hls.js`. It is imported as `import Hls from 'hls.js'`.\n\n---\n\n## File: `src/components/FreedomSection.tsx`\n\n### Constants (top of file)\n\n```ts\nconst HLS_SRC = 'https://stream.mux.com/bnYL6x5cAX6WiJv2pOKpITehZd3NVdXpj3ylJFpX5Lk.m3u8';\n\nconst CROSS_ICON = 'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc0f520a992816d8b15dc_bullet-list-cross.svg';\nconst CHECK_ICON = 'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/686cc068490683bbb3377d04_bullet-list.svg';\n\nconst negatives = [\n  'Reactive firefighting when foundational issues surface too late',\n  'Bloated coordination overhead drains bandwidth from core teams',\n  \"Constant re-verification because source data can't be trusted\",\n  'Fragmented vendor relations produce mismatched deliverables',\n  'Scattered specs and decisions buried across siloed systems',\n];\n\nconst positives = [\n  'Layered dependency maps eliminate costly surprises at every phase',\n  'Streamlined team handoffs deliver production-ready outcomes fast',\n  'Live validation loops keep requirements locked across all stages',\n  'Unified vendor management through a single accountable contact',\n  'Centralized context and clear records accelerate every decision',\n];\n```\n\n---\n\n### `HlsVideo` sub-component (defined above `FreedomSection`, not exported)\n\n```ts\nfunction HlsVideo() {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n\n    if (Hls.isSupported()) {\n      const hls = new Hls({\n        startLevel: -1,\n        capLevelToPlayerSize: false,\n        maxMaxBufferLength: 60,\n        enableWorker: true,\n      });\n      hls.loadSource(HLS_SRC);\n      hls.attachMedia(video);\n      hls.on(Hls.Events.MANIFEST_PARSED, () => {\n        hls.currentLevel = hls.levels.length - 1;\n        video.play().catch(() => {});\n      });\n      return () => hls.destroy();\n    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      video.src = HLS_SRC;\n      video.play().catch(() => {});\n    }\n  }, []);\n\n  return (\n    <video\n      ref={videoRef}\n      autoPlay\n      loop\n      muted\n      playsInline\n      style={{\n        width: '160%',\n        height: '160%',\n        objectFit: 'cover',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n      }}\n    />\n  );\n}\n```\n\nThe video is zoomed to `160% x 160%` and centered with `translate(-50%, -50%)` inside a circular clipping container, so it fills the circle with no letterboxing.\n\n---\n\n### `FreedomSection` component\n\n**`<section>`** — Tailwind: `w-full flex flex-col items-center`\n\nInline:\n```\nbackground-color: #ffffff\npadding: clamp(48px, 6vw, 80px) clamp(16px, 3vw, 40px)\ngap: 36px\n```\n\n---\n\n#### Block 1 — Header\n\nTailwind: `flex flex-col items-center gap-9 text-center`\n\n**Badge pill:**\n\nTailwind: `flex items-center gap-2 text-lg font-medium rounded-full`\n\nInline: `background-color: rgb(249, 249, 249)`, `padding: 0.9vw 1.25vw`, `color: rgb(26, 11, 84)`\n\nContains this inline SVG (`width: 19px`, `height: 18px`, `flex-shrink: 0`, `viewBox=\"0 0 17 16\"`, `fill=\"none\"`, `xmlns=\"http://www.w3.org/2000/svg\"`):\n\n```xml\n<g clipPath=\"url(#freedom-clip)\">\n  <path\n    fillRule=\"evenodd\"\n    clipRule=\"evenodd\"\n    d=\"M8.50037 3.66955C7.53221 2.82462 6.41758 2.275 5.333 2.07887C4.11096 1.85888 2.84987 2.0826 1.96658 2.95885C1.10056 3.81944 0.866218 5.04172 1.06751 6.23193C1.24778 7.29835 1.7803 8.39907 2.60501 9.35959C2.41536 10.1071 2.46371 10.8946 2.7434 11.6137C3.02308 12.3327 3.52035 12.9481 4.16678 13.375C4.81321 13.802 5.57702 14.0195 6.35308 13.9976C7.12915 13.9758 7.87933 13.7157 8.50037 13.2531C9.12146 13.7161 9.87183 13.9765 10.6482 13.9985C11.4245 14.0205 12.1886 13.8029 12.8352 13.3758C13.4819 12.9487 13.9792 12.3331 14.2588 11.6137C14.5384 10.8943 14.5865 10.1065 14.3965 9.35884C15.2204 8.39832 15.753 7.29835 15.9325 6.23119C16.1338 5.04098 15.8994 3.81944 15.0334 2.9596C14.1501 2.0826 12.889 1.85888 11.667 2.07962C10.5824 2.275 9.46854 2.82537 8.50037 3.66955Z\"\n    fill=\"rgb(200, 111, 255)\"\n  />\n</g>\n<defs>\n  <clipPath id=\"freedom-clip\">\n    <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.5)\" />\n  </clipPath>\n</defs>\n```\n\nAfter the SVG: plain text **\"Control\"**\n\n**`<h2>`** — Tailwind: `font-medium`\n\nInline: `font-size: clamp(32px, 4vw, 56px)`, `color: rgb(26, 11, 84)`, `line-height: 1.15`, `margin: 0`\n\nStructure:\n```\nStop absorbing the chaos.<br />\n<span gradient>Run with confidence.</span>\n```\n\nGradient `<span>` inline styles:\n```\nbackground-image: linear-gradient(90deg, rgb(43,167,255), rgb(202,69,255) 50%, rgb(254,136,27))\n-webkit-background-clip: text\nbackground-clip: text\n-webkit-text-fill-color: transparent\ncolor: transparent\npadding-bottom: 0.3vw\ndisplay: inline-block\n```\n\n---\n\n#### Block 2 — Three-column grid\n\nTailwind: `w-full flex flex-col lg:grid`\n\nInline:\n```\ngrid-template-columns: 26vw 1fr 26vw\ncolumn-gap: 36px\nrow-gap: 24px\nalign-items: start\npadding: 0 clamp(0px, 2.92vw, 40px)\ngap: 24px\n```\n\nOn mobile (`flex flex-col`): stacks vertically. On `lg:` and above: renders as 3-column grid with `gridTemplateColumns: '26vw 1fr 26vw'`.\n\n---\n\n##### Left column — Negatives\n\nTailwind: `flex flex-col`\n\nInline: `gap: 12px`, `font-size: clamp(13px, 1.15vw, 17px)`, `color: rgb(131, 121, 158)`\n\nMap over `negatives`. Each card `<div>` — Tailwind: `flex flex-col`\n\nInline:\n```\ngap: 12px\npadding: clamp(12px, 0.97vw, 16px) clamp(14px, 1.25vw, 20px)\nborder-radius: 18px\nbackground-color: rgb(255, 255, 255)\nbox-shadow: 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a\n```\n\nContents:\n1. `<img src={CROSS_ICON} alt=\"\" aria-hidden style={{ width: 'clamp(16px, 1.25vw, 20px)', flexShrink: 0 }} />`\n2. `<div>{text}</div>` — inherits parent `color: rgb(131, 121, 158)`\n\n---\n\n##### Center column — Video circle\n\nTailwind: `flex items-center justify-center order-first lg:order-none`\n\nInline: `align-self: center`\n\nOn mobile, `order-first` places the video above both card columns. On `lg:`, `lg:order-none` restores it to the middle.\n\nInside, a circular container:\n```\nposition: relative\nborder-radius: 50%\noverflow: hidden\nwidth: clamp(200px, 22vw, 400px)\nheight: clamp(200px, 22vw, 400px)\nflex-shrink: 0\n```\n\nInside the circle: `<HlsVideo />` (described above — the `<video>` is absolutely positioned at 160% size, centered with translate -50% -50%).\n\n---\n\n##### Right column — Positives\n\nTailwind: `flex flex-col`\n\nInline: `gap: 12px`, `font-size: clamp(13px, 1.15vw, 17px)`\n\nMap over `positives`. Each card `<div>` — Tailwind: `flex flex-col`\n\nInline: (same shadow/padding/border-radius as negatives)\n```\ngap: 12px\npadding: clamp(12px, 0.97vw, 16px) clamp(14px, 1.25vw, 20px)\nborder-radius: 18px\nbackground-color: rgb(255, 255, 255)\nbox-shadow: 0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a\n```\n\nContents:\n1. `<img src={CHECK_ICON} alt=\"\" aria-hidden style={{ width: 'clamp(16px, 1.25vw, 20px)', flexShrink: 0 }} />`\n2. `<div style={{ color: 'rgb(26, 11, 84)' }}>{text}</div>`\n\n---\n\n## Layout summary\n\n- **Mobile**: flex-col — video first (order-first), then left negatives, then right positives stacked vertically\n- **Desktop (lg+)**: CSS grid — left negatives | center video circle | right positives\n- Section background is pure white `#ffffff`\n- No animations, no hover states, no scroll effects","url":"/prompts/nexacore-control"}},{"id":"retro-futurist","object":"prompt","title":"Retro-Futurist","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(46).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen hero landing page for a creative agency called \"Mainframe\" using React, TypeScript, Vite, and Tailwind CSS. Here is every detail:\n\n---\n\nFONTS\n\nLoad two fonts in `index.html` via these stylesheet links:\n- Heading: `https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium`\n- Body: `https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg`\n\nIn `index.css`, define CSS variables:\n```css\n:root {\n  --font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;\n  --font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;\n}\nbody {\n  font-family: var(--font-body);\n}\n```\n\nThe entire page uses `var(--font-body)` except the logo text which uses `var(--font-heading)`.\n\n---\n\nBACKGROUND VIDEO (mouse-scrub controlled)\n\n- A full-screen `` element is `position: fixed; inset: 0; z-index: 0; object-fit: cover; object-position: 70% center;`.\n- Video source URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4`\n- The video is `muted`, `playsInline`, `preload=\"auto\"`. It does NOT autoplay.\n- The video scrubs forward/backward based on horizontal mouse movement. Use a `mousemove` event listener on `window`. Track `prevX`, compute `delta = currentX - prevX`, convert to a time offset: `(delta / window.innerWidth)  SENSITIVITY  video.duration` where `SENSITIVITY = 0.8`. Clamp `targetTime` between 0 and `video.duration`. Use `video.currentTime` to seek, and an `onSeeked` handler to queue the next seek if `targetTime` has moved, preventing seek-flooding.\n\n---\n\n**NAVBAR (fixed, z-index: 10)**\n\n- Fixed to top, full width. Padding: `px-5 sm:px-8 py-4 sm:py-5`. Flex row, `justify-between`, `items-center`.\n- **Logo (left):** Flex row with `gap-3`. Text \"Mainframe(R)\" (use the registered trademark symbol) at `text-[21px] sm:text-[26px]`, `tracking-tight`, black, using `var(--font-heading)`. Beside it, a decorative asterisk character `✳︎` at `text-[25px] sm:text-[30px]`, black, `select-none`, `letter-spacing: -0.02em`.\n- **Desktop nav links (center, hidden below md):** Flex row, `text-[23px]`, black. Links: \"Labs\", \"Studio\", \"Openings\", \"Shop\" separated by commas rendered as `, `. Each link has `hover:opacity-60 transition-opacity`.\n- **Desktop CTA (right, hidden below md):** An anchor \"Get in touch\" at `text-[23px]`, black, `underline underline-offset-2`, `hover:opacity-60 transition-opacity`.\n- **Mobile hamburger (visible below md):** A button with 3 horizontal bars (each `w-6 h-[2px] bg-black`), spaced with `gap-[5px]`. On toggle, the top bar rotates 45deg and translates down 7px, middle bar fades to opacity 0, bottom bar rotates -45deg and translates up 7px. All transitions are `duration-300`.\n- **Mobile overlay (z-index: 9):** `fixed inset-0 bg-white/95 backdrop-blur-sm`, flex column, vertically centered, left-aligned with `px-8 gap-8`. Same links at `text-[32px] font-medium`, plus \"Get in touch\" underlined. Fades in/out with `opacity` and `pointerEvents` toggled. Hidden on md+.\n\n---\n\n**HERO SECTION (z-index: 1)**\n\n- Full `h-screen`, flex column. On mobile: `justify-end pb-12`. On `md:`: `justify-center pb-0`. Horizontal padding: `px-5 sm:px-8 md:px-10`. `overflow-hidden`.\n- Content container: `max-w-xl`, `relative z-10`.\n\n**1. Blurred intro label:**\n- `pointer-events-none`, `select-none`, `mb-5 sm:mb-6`.\n- Font size: `clamp(18px, 4vw, 26px)`, `line-height: 1.3`, `font-weight: 400`, `color: #000`, `filter: blur(4px)`.\n- Two lines of text:\n  - Line 1: \"Hey there, meet A.R.I.A,\"\n  - Line 2: \"Mainframe's Adaptive Response Interface Agent\"\n- Separated by a `\n`.\n\n**2. Typewriter text:**\n- Text: `\"Glad you stopped in. Good taste tends to find us. Now, what are we building?\"`\n- Custom `useTypewriter` hook: takes `text`, `speed` (default 38ms per character), `startDelay` (default 600ms). After the delay, an interval reveals one character at a time. Returns `{ displayed, done }`.\n- Rendered in a `\n\n` tag, black, `mb-5 sm:mb-6`, font size `clamp(18px, 4vw, 26px)`, `line-height: 1.35`, `font-weight: 400`, `min-height: 54px`.\n- While typing, show a blinking cursor: `inline-block w-[2px] h-[1.1em] bg-black align-middle ml-[2px]` with CSS animation `blink 1s step-end infinite` (`opacity: 1 at 0%/100%, 0 at 50%`). Cursor disappears when `done` is true.\n\n**3. Action pill buttons:**\n- Appear with a fade-in + slide-up animation (`opacity 0->1`, `translateY(8px)->0`, `transition: opacity 0.4s ease, transform 0.4s ease`). They become visible 400ms after page load, independent of the typewriter animation (do NOT wait for typing to finish).\n- Container: `flex flex-wrap gap-y-1`.\n- **4 white pill buttons:** Labels: \"Pitch us an idea\", \"Come work here\", \"Send a brief hello\", \"See how we operate\". Each is `inline-flex items-center justify-center bg-white text-black border border-black/10 rounded-full text-[13px] sm:text-[15px] px-4 sm:px-5 py-[0.3em] mx-[0.2em] mb-[0.4em] white-space: nowrap`. Hover: `bg-black text-white`, `transition-colors duration-200`.\n- **1 outline pill button:** Text \"Reach us: hello@mainframe.co\" (email is underlined with `underline-offset-1`), followed by a small 12x12 copy icon (inline SVG of two overlapping rectangles). Styled: `text-white bg-transparent border border-white rounded-full`, same sizing as above, with `gap-2 sm:gap-3` between text and icon. Hover: `bg-white text-black`. On click, copies \"hello@mainframe.co\" to clipboard via `navigator.clipboard.writeText()`.\n\n---\n\nDEPENDENCIES\n\nOnly React, ReactDOM, Tailwind CSS, and Vite. No other UI libraries. Lucide-react is available but not used in this component.","url":"/prompts/retro-futurist"}},{"id":"contact-cybernetic","object":"prompt","title":"Contact Cybernetic","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(42).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a modern, interactive hero section using React, Tailwind CSS, and Framer Motion (motion/react). Ensure you follow these precise architecture and styling instructions:\n1. Fonts & Global Animations\nImport the Inter font from Google Fonts.\nIn your CSS setup, configure Tailwind to use it by default (--font-sans: 'Inter', ...).\nCreate a keyframe animation in CSS named blink for the typewriter cursor:\ncode\nCSS\n@keyframes blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n.animate-blink { animation: blink 1s step-end infinite; }\n2. General Page Structure\nWrap the entire application in a container div with the following classes: relative bg-white text-neutral-900 font-sans selection:bg-[#EAECE9] selection:text-[#1C2E1E] antialiased overflow-x-hidden flex flex-col lg:block lg:min-h-screen.\n3. Background Video Component (with Native Scrubbing)\nContainer element: Add a div containing the background video with classes: order-last lg:order-none relative lg:absolute lg:inset-0 lg:z-0 overflow-hidden pointer-events-none w-full aspect-square md:aspect-video lg:aspect-auto lg:h-full bg-neutral-50 lg:bg-transparent.\nVideo element: Use <video> with muted, playsInline, preload=\"auto\".\nVideo Source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260601_110537_3a579fa0-7bbc-4d94-9d25-0e816c7840f5.mp4\nClasses: w-full h-full object-cover object-right lg:object-right-bottom.\nScrubbing/Playback Logic via useEffect hooks:\nDesktop Mouse Scrubbing Hook: Listen to the window mousemove event. If window.innerWidth < 1024, ignore (disable scrubbing). Store the mouse 'previous X' coordinate to calculate the delta against 'current X'. Update the target scrub time based on (delta / window.innerWidth) * 0.8 * video.duration. Clamp the time between 0 and duration. Set video.currentTime = targetTime. Bind a seeked event listener to ensure smooth tracking frame to frame.\nMobile Autoplay Hook: Because scrubbing is disabled on mobile frames, trigger normal playback for screens < 1024 width: video.autoplay = true and video.play().\n4. Interactive Navbar\nHeader wrapper: Wrap the Navbar in <header className=\"fixed top-0 inset-x-0 z-10 px-5 sm:px-8 py-4 sm:py-5 flex flex-row justify-between items-center bg-transparent\">\nLogo (Left side): Flex row with gap-3.\nText: Mainframe&reg; (using the ® symbol). Classes: text-[21px] sm:text-[26px] tracking-tight text-black font-medium select-none.\nIcon block right beside it: An asterisk &#10033;. Classes: text-[25px] sm:text-[30px] text-black select-none tracking-[-0.02em] font-medium leading-none mb-1.\nDesktop Nav Links (Center): Flex row, hidden md:flex, text-[23px] text-black. Links are \"Labs\", \"Studio\", \"Openings\", \"Shop\" separated by <span className=\"opacity-40\">,&nbsp;</span> dividers. Hover states should use hover:opacity-60 transition-opacity.\nDesktop CTA (Right): Hidden on mobile. A link reading \"Get in touch\" mapped with text-[23px] text-black underline underline-offset-2 hover:opacity-60 transition-opacity.\nMobile Menu Logic:\nHamburger <button> visible below md. Has three w-6 h-[2px] bg-black spans.\nHook it to a local state isMobileMenuOpen. When open, animate the burger into an 'X' (top bar rotate-45 translate-y-[7px], middle bar opacity-0, bottom bar -rotate-45 -translate-y-[7px]). All spans need transition-all duration-300.\nCreate a full screen Mobile Navigation Overlay div hidden on Desktop. Fixed inset-0 z-[9] with bg-white/95 backdrop-blur-sm. Apply opacity-100 pointer-events-auto when isMobileMenuOpen is true; otherwise, opacity-0 pointer-events-none.\n5. Content Layout Container\nBelow the background video and relative to it, add a content grouping layer: <div className=\"relative z-10 flex flex-col order-first lg:order-none w-full bg-white lg:bg-transparent pb-8 lg:pb-0 lg:min-h-screen\">\nInside that, the overarching layout engine: <main id=\"spade-hero\" className=\"w-full max-w-7xl mx-auto px-6 py-12 flex-1 flex flex-col justify-center\">\n6. Typewriter Hook and Headline\nImplement a custom useTypewriter(text, speed = 38, startDelay = 600) React hook. It uses setTimeout and setInterval to iteratively build a string slice by slice. It must return an object: { displayed: string, done: boolean }.\nRun the hook with the string \"we'd love to\\nhear from you!\".\nWrap the headline securely in a motion.div configured to drop-in (initial: opacity: 0, y: 20, animate: opacity: 1, y: 0, transition duration 0.6).\nRender your hook text inside <h1 className=\"text-5xl md:text-6xl lg:text-[76px] font-normal tracking-tight text-black leading-[1.08] mb-8 select-none w-full whitespace-pre-wrap\">.\nWhile typing (!done), output a <span className=\"inline-block w-[2px] h-[1.1em] bg-black align-middle ml-[2px] animate-blink\" /> cursor at the end of the displayed text string.\n7. Secondary Description Text\nAnother motion.div (delay 0.1s from the headline).\nContent: <p> tag that reads: Whether you have questions, feedback, <br /> drop us a message and we'll get back to you as soon as possible.\nClasses: text-lg md:text-xl text-[#5A635A] leading-relaxed font-normal mb-14 max-w-2xl.\n8. Interactive Multi-Select Service Pills\nUsing setServices track an array [\"Brand\", \"Digital\", \"Campaign\", \"Other\"].\nThe prompt Title: \"What sort of service?\" (text-2xl font-medium tracking-tight mb-2). Subtitle: \"Select all that apply\" (opacity-85 text-[#738273] mb-8).\nIterate over the options natively outputting motion.button wrapper tags allowing multiple selections inside a flex wrap container.\nPill active traits classes: bg-[#1C2E1E] text-white shadow-md shadow-emerald-950/5 transform. Show a check icon (lucide-react) dropping in using type: \"spring\", stiffness: 300, damping: 20.\nPill inactive traits classes: bg-white text-[#1C2E1E] border border-[#F1F3F1] hover:bg-[#F1F3F1]/55.\nContingent Feedback Status Banner: Underneath your service pills, write an <AnimatePresence mode=\"wait\"> that tracks user state array length:\nEmpty: Show a generic placeholder indicating \"Please click to select services above.\" at fifty percent opacity (opacity: 0.5, italic, text-xs).\nActive Selection: Swap cleanly into a container <motion.div> that springs height gracefully (height: \"auto\"). Inside, display an acknowledgment banner reading \"Ready to inquire about: [array.join(\", \")]\" combined with an arrow call-to-action button \"Let's Go\" (text-[#4D6D47] uppercase text-xs). Style the banner with bg-[#FAFBF9] border rounded-2xl.","url":"/prompts/contact-cybernetic"}},{"id":"health-portal","object":"prompt","title":"Health Portal","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(12).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single-page dental clinic landing page using **React + Vite + TypeScript + Tailwind CSS**. No external UI libraries, no icon libraries. Everything lives in one `App.tsx` file. The page has 3 full-screen sections, a splash screen, and a fixed navbar.\n\n---\n\n### SETUP\n\n**Font:** \"Open Sauce One\" loaded via these exact links in `index.html` `<head>`:\n```html\n<link href=\"https://db.onlinewebfonts.com/c/1cd1e7d71e048159076fd90b39846902?family=Open+Sauce+One\" rel=\"stylesheet\">\n<link href=\"https://db.onlinewebfonts.com/c/42acf9aa4a6dc2f2886a3f682e337ead?family=Open+Sauce+One+Bold\" rel=\"stylesheet\">\n```\n\n**Title:** \"Dental Health - Quality Healthcare\"\n\n**Global CSS (index.css):**\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  html, body, #root {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n}\n```\n\n**Tailwind config:** Default, no extensions. Content: `['./index.html', './src/**/*.{js,ts,jsx,tsx}']`.\n\n---\n\n### IMAGE URLS (use these EXACT URLs)\n\n```ts\nconst HERO_IMAGE = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_113640_ccf3cf97-d447-425b-a134-d7b09fc743fc.png&w=1280&q=85';\n\nconst SECTION2_IMAGE = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114219_414dfe80-f15c-4e25-bf52-b13721f4bd88.png&w=1280&q=85';\n\nconst SECTION3_IMG1 = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115253_c19ab167-8dd5-48b4-967d-b9f0d9d6e8fb.png&w=1280&q=85';\n\nconst SECTION3_IMG2 = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115237_fc519057-6e87-4abf-999a-9610b8b085b4.png&w=1280&q=85';\n\nconst SECTION3_BG = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114355_752ba9e6-0942-4abb-9047-5d9bb16632e9.png&w=1280&q=85';\n```\n\n---\n\n### DATA CONSTANTS\n\n```ts\nconst featureBars = ['Advanced Dentistry', 'High Quality Equipment', 'Friendly Staff'];\n\nconst services = [\n  { name: 'Dental\\nVeneers', num: '01', active: true },\n  { name: 'Dental\\nCrowns', num: '02', active: false },\n  { name: 'Teeth\\nWhitening', num: '03', active: false },\n  { name: 'Dental\\nImplants', num: null, active: false },\n];\n```\n\n---\n\n### CORE TECHNICAL CONCEPT: \"MASKED CARDS\"\n\nSections 1 and 2 use a single large background image shared across multiple cards. Each card shows a different \"window\" into the same image, creating a cohesive mosaic effect. Implementation:\n\n**`useMaskPositions` hook:**\n- Takes a ref to the section container and a ref to an array of card elements.\n- Uses `ResizeObserver` on the section container.\n- For each card, computes `{ x, y, sw, sh }` where x/y is the card's top-left offset relative to the section, sw/sh is the section's width/height.\n\n**`useImageWidth` hook:**\n- Loads the image in a `new Image()` object.\n- Calculates: `renderWidth = img.naturalWidth * (sectionHeight / img.naturalHeight)`.\n- Returns how wide the image would be if scaled to fill the section height.\n\n**`MaskedCard` component:**\n- Props: `bgImage`, `position` (from useMaskPositions), `imageWidth` (from useImageWidth), `focalX` (0-1 float), `className`, `children`, `cardRef`, `style`.\n- Calculates `overflow = imageWidth > position.sw ? imageWidth - position.sw : 0`, then `focalOffset = overflow * focalX`.\n- Applies inline style:\n  ```\n  backgroundImage: url(bgImage)\n  backgroundSize: auto [position.sh]px\n  backgroundPosition: -[position.x + focalOffset]px -[position.y]px\n  backgroundRepeat: no-repeat\n  ```\n- `focalX` values: Section 1 mobile=0.7, desktop=0.8. Section 2 mobile=0.65, desktop=0.8.\n\n**`useIsMobile` hook:**\n- Listens to `window.matchMedia('(max-width: 767px)')` change events.\n- Returns boolean.\n\n---\n\n### ANIMATION: `useStaggeredReveal` hook\n\n- Takes `count` (number of elements) and `threshold` (IntersectionObserver threshold, default 0.15).\n- Returns `{ containerRef, getAnimStyle }`.\n- `containerRef` is attached to the section; when it crosses the threshold, `visible` becomes true (fires once).\n- `getAnimStyle(index)` returns:\n  ```css\n  opacity: visible ? 1 : 0\n  transform: visible ? 'translateY(0)' : 'translateY(24px)'\n  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms,\n              transform 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms\n  ```\n\n---\n\n### SPLASH SCREEN\n\n- Fixed overlay covering viewport, `z-[100]`, white background.\n- Number counter displayed at **bottom-left** (`items-end justify-start`).\n- Counter style: `text-7xl md:text-9xl font-bold tabular-nums p-6 md:p-10 leading-none`, black text.\n- Counts from 0 to 100 over exactly 2000ms (20ms per step, 100 steps).\n- After reaching 100: wait 200ms, then set `exiting=true` which triggers `opacity-0` with `transition-opacity duration-700`.\n- After 900ms total from reaching 100, call `onComplete()` which removes splash from DOM.\n\n---\n\n### NAVBAR\n\n**Container:** `fixed top-0 left-0 right-0 z-50`, `flex items-center justify-between`, `px-4 md:px-6 py-2 md:py-3`, `bg-white/80 backdrop-blur-md`.\n\n**Logo (left side):**\n- Two lines stacked: \"Dental\" and \"Health\"\n- Wrapper: `flex flex-col`\n- Text: `text-xl md:text-2xl font-extrabold uppercase tracking-tight leading-none`\n- Second line has `-mt-1.5 md:-mt-2` for tight spacing\n- Below logo text: \"quality healthcare\" in `text-[8px] md:text-[9px] font-medium leading-none mt-1.5 md:mt-2`\n\n**Desktop nav (hidden on mobile with `hidden md:block`):**\n- \"Menu\" button: `px-6 py-3 bg-white rounded-full border border-black text-sm font-semibold`, hover: `hover:bg-black hover:text-white transition-colors duration-200`\n- \"Dental Emergency\" text: `text-sm font-semibold text-black`\n\n**Mobile hamburger (visible only on mobile with `md:hidden`):**\n- Container: `w-10 h-10 flex items-center justify-center`, `relative`\n- 3 spans, each: `absolute h-0.5 w-6 bg-black rounded-full`\n- Transition: `transition-all duration-300 ease-[cubic-bezier(0.76,0,0.24,1)]`\n- Closed state: top span `-translate-y-2`, middle `opacity-100 scale-x-100`, bottom `translate-y-2`\n- Open state: top `rotate-45 translate-y-0`, middle `opacity-0 scale-x-0`, bottom `-rotate-45 translate-y-0`\n\n**Mobile menu overlay (`md:hidden`):**\n- Outer: `fixed inset-0 z-40`, pointer-events toggled based on open state\n- Backdrop: `absolute inset-0 bg-black/20 backdrop-blur-sm`, fades opacity. Clicking closes menu.\n- Panel: `absolute top-0 right-0 h-full w-[85%] max-w-sm bg-white shadow-2xl`, slides with `translate-x-0` (open) / `translate-x-full` (closed), `duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`\n- Content: `flex flex-col justify-center h-full px-8 gap-1`\n- Nav links: ['Home', 'Services', 'About', 'Gallery', 'Contact']\n  - Each: `text-4xl font-bold text-black hover:text-neutral-500`\n  - Staggered entrance: `opacity-0 translate-x-8` -> `opacity-100 translate-x-0`, `transitionDelay: ${100 + i * 60}ms` when open\n  - `transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`\n- Bottom section: `mt-8 pt-8 border-t border-neutral-200`, delayed 450ms\n  - \"Dental Emergency\" text: `text-sm font-semibold text-black mb-4`\n  - Button: `w-full px-6 py-4 bg-black rounded-full text-white text-sm font-semibold hover:bg-neutral-800 transition-colors duration-200`, text \"Book Appointment\"\n- When open: `document.body.style.overflow = 'hidden'`. Cleanup on unmount.\n\n---\n\n### SECTION 1 - HERO\n\n**Container:** `<section>`, `h-screen w-full overflow-hidden flex flex-col`, `pt-24 md:pt-24 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`\n\nAttach both `section1Ref` and `s1Reveal.containerRef` to this element.\n\nUses `HERO_IMAGE` as shared background via MaskedCard technique.\n\n**3 Feature Bars** (mapped from `featureBars` array):\n- Each is a `MaskedCard` with: `w-full h-14 md:h-20 shrink-0 rounded-xl md:rounded-2xl overflow-hidden relative`\n- Animated with `s1Reveal.getAnimStyle(i)` for i=0,1,2\n- Content: `<span>` centered vertically and horizontally (`flex items-center justify-center h-full`), `text-black text-lg md:text-3xl font-bold text-center`, `relative z-10`\n\n**Main Hero Card** (4th card, index 3):\n- `MaskedCard`: `w-full flex-1 min-h-0 rounded-xl md:rounded-2xl overflow-hidden relative`\n- Animated with `s1Reveal.getAnimStyle(3)`\n- **Top-left text:** `absolute top-4 left-4 md:top-7 md:left-7`, `text-black text-xs md:text-sm font-semibold leading-4 md:leading-5 max-w-[200px] md:max-w-[300px] z-10`\n  - Content: \"We wish to provide professional dental services\" `<br/>` \"that match the current technologies\"\n- **Bottom-left block:** `absolute bottom-5 left-3 md:bottom-8 md:left-4 z-10`\n  - Label: `block text-black text-xs md:text-sm font-semibold mb-1 md:mb-2`, text \"Trusted Dentist in West New York\"\n  - Heading: `<h1>` with `text-black text-[clamp(3rem,11vw,11rem)] font-bold leading-[0.79] tracking-tight`, content: \"Dental\" `<br/>` \"Care\"\n- **Bottom-right text:** `absolute bottom-6 right-4 md:bottom-10 md:right-8`, `text-white text-xs md:text-sm font-semibold z-10`, content: \"Free Consultation\"\n\n---\n\n### SECTION 2 - SMILE GALLERY\n\n**Container:** `<section>`, `min-h-screen md:h-screen w-full overflow-hidden flex flex-col`, `pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`\n\nAttach both `section2Ref` and `s2Reveal.containerRef` to this element.\n\nUses `SECTION2_IMAGE` as shared background via MaskedCard technique.\n\n**Grid container:** `flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 grid-rows-[auto_auto_auto_auto] md:grid-rows-[1fr_1fr_0.8fr] gap-1.5 md:gap-2`\n\n**Card 0 - Top Left (\"Smile Gallery\"):**\n- `MaskedCard`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0`\n- Animated: `s2Reveal.getAnimStyle(0)`\n- Heading: `absolute top-4 left-5 md:top-6 md:left-7`, `text-white md:text-black text-2xl md:text-3xl font-bold z-10`, text \"Smile Gallery\"\n- Subtitle: `absolute bottom-4 left-5 md:bottom-6 md:left-7`, `text-white md:text-black text-xs md:text-sm font-semibold z-10`, text \"Our cosmetic dental work\"\n\n**Card 1 - Top Right (spans 2 rows on desktop):**\n- `MaskedCard`: `md:row-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0`\n- Animated: `s2Reveal.getAnimStyle(1)`\n- Text: `absolute bottom-16 left-5 md:bottom-20 md:left-7`, `text-white text-xs md:text-sm font-semibold leading-4 md:leading-5 z-10`, content: \"If you want a gorgeous smile,\" `<br/>` \"call us to ask about a smile makeover.\"\n- Button: `absolute bottom-4 right-4 md:bottom-6 md:right-6`, `px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold z-10 hover:scale-105 transition-transform`, text \"Call Us\"\n\n**Card 2 - Bottom Left (\"Smile makeover\"):**\n- `MaskedCard`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0`\n- Animated: `s2Reveal.getAnimStyle(2)`\n- Heading: `absolute top-4 left-5 md:top-6 md:left-7`, `text-white md:text-black text-[clamp(3rem,7vw,6rem)] font-bold leading-[0.9] z-10`, content: \"Smile\" `<br/>` \"makeover\"\n\n**Card 3 - Bottom Full Width (Services):**\n- `MaskedCard`: `col-span-1 md:col-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0`\n- Animated: `s2Reveal.getAnimStyle(3)`\n- Inner container: `absolute inset-0 z-10 flex flex-wrap md:flex-nowrap gap-1.5 md:gap-2 p-2 md:p-3`\n- 4 service sub-cards mapped from `services` array:\n  - Container: `flex-1 min-w-[calc(50%-4px)] md:min-w-0 rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between`\n  - Active: `bg-white/90 backdrop-blur-md`\n  - Inactive: `bg-white/20 backdrop-blur-xl`\n  - Service name: `<h3>` with `text-xl md:text-4xl font-bold leading-[1.05] whitespace-pre-line`, color: active=`text-black`, inactive=`text-white`\n  - Number badge (if `svc.num` exists): `self-end w-8 h-8 md:w-12 md:h-12 rounded-full border flex items-center justify-center text-xs md:text-sm font-semibold`\n    - Active: `border-black text-black`\n    - Inactive: `border-white text-white`\n\n---\n\n### SECTION 3 - IMPLANT DENTISTRY\n\n**Container:** `<section>`, `min-h-screen md:h-screen w-full overflow-hidden flex flex-col`, `pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`\n\nAttach `s3Reveal.containerRef` to this element.\n\nDoes NOT use MaskedCard technique. Uses regular `<img>` tags and solid backgrounds.\n\n**Grid:** `flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 gap-1.5 md:gap-2`\n\n#### LEFT COLUMN: `flex flex-col gap-1.5 md:gap-2`\n\n**1. Heading Card:**\n- `<div>`: `rounded-xl md:rounded-2xl bg-stone-50 p-5 md:p-7 flex flex-col justify-between flex-[1.2] min-h-[180px] md:min-h-0`\n- Animated: `s3Reveal.getAnimStyle(0)`\n- Heading: `<h2>` with `text-[clamp(3rem,7vw,6.5rem)] font-bold leading-[0.95] text-black`, content: \"Implant\" `<br/>` \"Dentistry\"\n- Subtitle: `<p>` with `text-xs md:text-sm font-semibold text-black`, text \"Restore Missing Teeth\"\n\n**2. Two Image Cards (side by side):**\n- Wrapper: `<div>` with `flex gap-1.5 md:gap-2 flex-1 min-h-[140px] md:min-h-0`\n- Animated: `s3Reveal.getAnimStyle(1)`\n- Left image: `<div className=\"flex-1 rounded-xl md:rounded-2xl overflow-hidden\"><img src={SECTION3_IMG1} alt=\"Dental implant procedure\" className=\"w-full h-full object-cover\" /></div>`\n- Right image: `<div className=\"flex-1 rounded-xl md:rounded-2xl overflow-hidden\"><img src={SECTION3_IMG2} alt=\"Dental restoration\" className=\"w-full h-full object-cover\" /></div>`\n\n**3. Consultation Card:**\n- `<div>`: `rounded-xl md:rounded-2xl bg-zinc-200 p-5 md:p-7 flex items-end justify-between flex-[0.8] min-h-[160px] md:min-h-0`\n- Animated: `s3Reveal.getAnimStyle(2)`\n- Left content block:\n  - Label: `<p>` with `text-xs md:text-sm font-semibold text-black mb-2 md:mb-3`, text \"Consultation\"\n  - Heading: `<h3>` with `text-xl md:text-3xl font-bold text-black leading-6 md:leading-8`, content: \"Dental\" `<br/>` \"Restoration\" `<br/>` \"Services\"\n- Button: `px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold hover:scale-105 transition-transform`, text \"Book Online\"\n\n#### RIGHT COLUMN: Single tall image card\n\n- `<div>`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[350px] md:min-h-0`\n- Animated: `s3Reveal.getAnimStyle(3)`\n- Background image: `<img src={SECTION3_BG} alt=\"Smiling patient\" className=\"w-full h-full object-cover\" />`\n- **Overlay container:** `absolute bottom-3 left-3 right-3 md:bottom-5 md:left-5 md:right-5 flex gap-1.5 md:gap-2`\n\n**Overlay Card 1 (white, left):**\n- `flex-1 bg-white rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52`\n- Heading: `<h4>` with `text-lg md:text-2xl font-bold text-black leading-5 md:leading-7`, content: \"The Process\" `<br/>` \"of Installing\" `<br/>` \"Implants\"\n- Arrow icon: `self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-black flex items-center justify-center`\n  - SVG: `width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"`, class `rotate-[-45deg]`\n  - Path: `d=\"M1 7h12m0 0L8 2m5 5L8 12\"` with `stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"`\n\n**Overlay Card 2 (glass, right):**\n- `flex-1 bg-white/20 backdrop-blur-xl rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52`\n- Heading: `<h4>` with `text-lg md:text-2xl font-bold text-white leading-5 md:leading-7`, content: \"Caring\" `<br/>` \"for Dental\" `<br/>` \"Implants\"\n- Arrow icon: `self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-white flex items-center justify-center`\n  - Same SVG as above but with added class `text-white`\n\n---\n\n### OUTER WRAPPER\n\nThe entire app is wrapped in `<div className=\"bg-white\">` containing:\n1. `{showSplash && <SplashScreen />}` (conditionally rendered)\n2. `<Navbar />`\n3. Section 1\n4. Section 2\n5. Section 3\n\n---\n\n### KEY DESIGN RULES\n\n- **Spacing between sections:** Only `pb-1.5 md:pb-2` on each section and `pt-1.5 md:pt-2` on sections 2 and 3 -- virtually seamless.\n- **Border radius:** All cards use `rounded-xl md:rounded-2xl` with `overflow-hidden`.\n- **Color palette:** Strictly black, white, and translucent white (`bg-white/20`, `bg-white/90`) with `backdrop-blur-md` or `backdrop-blur-xl`.\n- **Background fills:** `bg-stone-50` and `bg-zinc-200` for Section 3 solid cards.\n- **Typography:** Heavy bold/extrabold, `clamp()` for responsive headings, extremely tight leading (0.79, 0.9, 0.95, 1.05).\n- **Interactions:** `hover:scale-105 transition-transform` on CTA buttons.\n- **Responsive:** Single `md:` (768px) breakpoint. Stacked on mobile, grid on desktop.\n- **No external packages** beyond React and Tailwind.","url":"/prompts/health-portal"}},{"id":"impact-ventures","object":"prompt","title":"Impact Ventures","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(67).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a fullscreen hero landing page section for a design agency called \"Atelier\" using React, Tailwind CSS, and Lucide React icons. The section must be fully mobile responsive with an animated hamburger mobile menu. Here are the exact specifications:\n\n**Fonts (Google Fonts):**\n- \"Instrument Serif\" (regular + italic) for headings and mobile menu links\n- \"Inter\" (weights 300, 400, 500, 600) as the sans-serif body font\n\nLoad them in index.html:\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" />\n```\n\n**Tailwind Config** - extend fontFamily:\n```js\nfontFamily: {\n  'instrument-serif': ['\"Instrument Serif\"', 'serif'],\n  sans: ['Inter', 'system-ui', 'sans-serif'],\n}\n```\n\n**Background:**\nA fullscreen looping autoplay muted video covering the entire viewport with `object-cover`. Video URL:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204103_f607742e-09da-4cf5-bb06-4e67b0a531de.mp4\n```\n\n**Layout:** The entire section is `w-full h-screen overflow-hidden` with the video absolutely positioned behind a `relative z-10` content layer that is `flex flex-col h-full`.\n\n**Navbar:**\n- Horizontal flex bar with padding `px-6 md:px-12 lg:px-16 py-5 md:py-6`\n- Left side: Logo text \"Atelier\" (white, font-semibold, text-lg, tracking-tight, font-sans) followed by desktop nav links (hidden on mobile, shown md+): \"Projects\", \"Expertise\", \"Studio\", \"Insights\" - styled as `text-white/80 hover:text-white text-sm font-light transition-colors duration-200`\n- Right side: \"Reach Out\" text link (hidden mobile) + \"Let's Talk\" button (white bg, black text, rounded-full, px-5 py-2, hidden mobile) + hamburger button (shown only on mobile, md:hidden)\n- Hamburger: 3 lines (2px height, white, rounded-full) with the middle line shorter (w-4 vs w-6). On open, top/bottom lines rotate 45/-45 degrees and translate, middle fades out. Uses `cubic-bezier(0.76,0,0.24,1)` easing with 500ms duration.\n\n**Mobile Menu Overlay (fixed inset-0 z-50, md:hidden):**\n- Backdrop: `bg-black/90 backdrop-blur-xl` fading in with 700ms transition\n- Content fades in with same 700ms cubic-bezier easing\n- Header: matches navbar layout with logo + close button (X formed by rotated lines)\n- Nav links: Stacked vertically, centered, `text-4xl sm:text-5xl font-instrument-serif`, white text, each with `border-b border-white/10`, `py-4`. On open they animate in with staggered delays (150ms + index*80ms), translating from `translate-y-8` to `translate-y-0`. Hover shifts text right with `hover:pl-4`\n- Items: \"Projects\", \"Expertise\", \"Studio\", \"Insights\", \"Reach Out\"\n- Footer: Full-width \"Let's Talk\" button (white bg, black text, rounded-full, py-4) with 550ms delay fade-in\n\n**Hero Content (centered below navbar):**\n- Container: `flex-1 flex flex-col items-center justify-start pt-4 sm:pt-6 md:pt-8 lg:pt-10 px-6 text-center`\n- Heading (h1): `font-instrument-serif text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] max-w-5xl`\n  - Text content (with line breaks):\n    ```\n    UX <italic>and</italic> APP\n    DESIGN <italic>for</italic> BOLD\n    VENTURES\n    ```\n  - The italic words \"and\" and \"for\" use `italic font-instrument-serif` spans\n- Subtext (p): `mt-4 md:mt-5 text-white/70 text-sm md:text-base font-light max-w-md leading-relaxed`\n  - \"We shape digital products that define brands\" + line break (hidden sm:block) + \"and unlock exponential growth.\"\n- Buttons row: `mt-5 md:mt-6 flex flex-col sm:flex-row items-center gap-4`\n  - Primary: \"See Cases\" with ArrowRight icon (lucide-react), white bg, black text, rounded-full, px-7 py-3, text-sm font-medium. On hover the arrow translates 0.5 right.\n  - Secondary: \"Watch Reel\" with Play icon (lucide-react), transparent with `border border-white/40`, white text, rounded-full, px-7 py-3. On hover: `bg-white/10 border-white/60`\n\n**Global CSS (index.css):**\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml, body, #root {\n  height: 100%;\n  width: 100%;\n  overflow-x: hidden;\n}\n```\n\n**Dependencies:** React, lucide-react (for ArrowRight and Play icons), Tailwind CSS. No other UI libraries.","url":"/prompts/impact-ventures"}},{"id":"halo-use-case","object":"prompt","title":"Halo Use Case","summary":"A preview-led use case prompt for generating a polished AI-built interface.","category":"Use Case","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(18).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Prompt:**\n\nBuild a \"Use Cases\" section for a fintech stablecoin landing page using **React + TypeScript + Tailwind CSS** with **lucide-react** for icons (use `ArrowRight`). Make it fully mobile responsive.\n\n---\n\n### Font Setup\n\nThe page uses **\"TT Norms Pro\"** loaded via a stylesheet link in `index.html`:\n\n```html\n<link href=\"https://db.onlinewebfonts.com/c/49bf5d043a27b890a040cf393277e2b2?family=TT+Norms+Pro+Regular\" rel=\"stylesheet\">\n```\n\nAdd this `<link>` inside the `<head>` of your `index.html`.\n\nThen in `index.css`, apply it globally:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  html {\n    font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;\n  }\n  body {\n    font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif;\n  }\n  * {\n    font-family: inherit;\n  }\n}\n```\n\nNo local font files are needed. The font is served from the external stylesheet URL above.\n\n---\n\n### Section Component: `UseCasesSection`\n\n**Outer wrapper:** `<section>` with classes `bg-[#F5F5F5] px-6 py-24`.\n\n**Inner container:** `<div>` with classes `max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start`.\n\n---\n\n#### LEFT COLUMN (text-only intro)\n\nWrapper `<div>` with classes `md:pr-12 md:pt-2`.\n\nContains three elements stacked vertically:\n\n1. **Eyebrow label:**\n   - Element: `<p>`\n   - Text: **\"USD Halo in Practice\"**\n   - Classes: `text-black/60 text-sm font-normal mb-2`\n\n2. **Section heading:**\n   - Element: `<h2>`\n   - Text: **\"Use modes\"**\n   - Classes: `text-black text-5xl md:text-6xl font-medium leading-none mb-6`\n   - Inline style: `{ letterSpacing: '-0.04em' }`\n\n3. **Description paragraph:**\n   - Element: `<p>`\n   - Text: **\"USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more\"**\n   - Classes: `text-black/60 text-base leading-relaxed max-w-sm`\n\n---\n\n#### RIGHT COLUMN (large video background card)\n\nWrapper `<div>` with classes `relative rounded-3xl overflow-hidden min-h-[720px]`.\n\n**Background video** (fills entire card as ambient background):\n- Element: `<video>`\n- Classes: `absolute inset-0 w-full h-full object-cover`\n- Attributes: `autoPlay`, `muted`, `loop`, `playsInline`\n- `src` URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4`\n\n**Content overlay** (sits above video):\n- Wrapper `<div>` with classes `relative z-10 p-10 md:p-12`\n\nContains three elements:\n\n1. **Card heading:**\n   - Element: `<h3>`\n   - Text: **\"Commerce\"**\n   - Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-5`\n   - Inline style: `{ letterSpacing: '-0.03em' }`\n\n2. **Card description:**\n   - Element: `<p>`\n   - Text: **\"Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform.\"**\n   - Classes: `text-black/70 text-base leading-relaxed max-w-md mb-8`\n\n3. **\"Know more\" button:**\n   - Element: `<button>`\n   - Classes: `inline-flex items-center gap-3 text-black text-base font-medium group`\n   - Contains (in this exact order):\n     - **Icon circle first:** `<span>` with classes `w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors`, containing `<ArrowRight className=\"w-4 h-4 text-black\" />` from lucide-react.\n     - **Text label second:** the plain text **\"Know more\"** (placed after the span, so icon is on the left).\n\n---\n\n### Key Design Specifications\n\n- **Page background:** `#F5F5F5` (light warm gray).\n- **Video card:** Video fills the entire rounded card via `object-cover` and loops silently. There is **no gradient overlay, no dark scrim, no blur layer** -- text sits directly on the video.\n- **Card corner radius:** `rounded-3xl` (24px).\n- **Card minimum height:** `min-h-[720px]`.\n- **Typography system:**\n  - All text uses inherited \"TT Norms Pro Regular\" from the web font link.\n  - Headings: `font-medium` with tight negative letter-spacing (`-0.04em` for section title, `-0.03em` for card title).\n  - Body text: default weight (400), `text-base` size.\n  - Color hierarchy: `text-black` for headings, `text-black/70` for card body text, `text-black/60` for muted/secondary text.\n- **\"Know more\" button:** Frosted-glass circle icon (`bg-white/80 backdrop-blur`) transitions to solid white on hover via Tailwind `group`/`group-hover`. Icon circle comes before text label.\n- **Layout:** Two-column grid on `md:` breakpoint. Stacks to single column on mobile. Left column has `md:pr-12` and `md:pt-2` for breathing room.\n- **Spacing:** `gap-8` between columns. Section padding `py-24` vertical, `px-6` horizontal.\n\n---\n\n### Complete JSX Reference\n\n```tsx\nimport { ArrowRight } from 'lucide-react';\n\nfunction UseCasesSection() {\n  return (\n    <section className=\"bg-[#F5F5F5] px-6 py-24\">\n      <div className=\"max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start\">\n        {/* Left column */}\n        <div className=\"md:pr-12 md:pt-2\">\n          <p className=\"text-black/60 text-sm font-normal mb-2\">USD Halo in Practice</p>\n          <h2 className=\"text-black text-5xl md:text-6xl font-medium leading-none mb-6\" style={{ letterSpacing: '-0.04em' }}>\n            Use modes\n          </h2>\n          <p className=\"text-black/60 text-base leading-relaxed max-w-sm\">\n            USD Halo powers a wide range of modes for builders, companies and treasuries wanting safe and rewarding stablecoin integrations plus more\n          </p>\n        </div>\n\n        {/* Right column -- big card with bg video */}\n        <div className=\"relative rounded-3xl overflow-hidden min-h-[720px]\">\n          <video\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_183428_ab5e672a-f608-4dcb-b319-f3e040f02e2d.mp4\"\n            autoPlay\n            muted\n            loop\n            playsInline\n          />\n          <div className=\"relative z-10 p-10 md:p-12\">\n            <h3 className=\"text-black text-4xl md:text-5xl font-medium leading-tight mb-5\" style={{ letterSpacing: '-0.03em' }}>\n              Commerce\n            </h3>\n            <p className=\"text-black/70 text-base leading-relaxed max-w-md mb-8\">\n              Lift customer retention by offering USD Halo, a trusted dollar-backed stablecoin with strong yields, letting your patrons earn with zero effort on your platform.\n            </p>\n            <button className=\"inline-flex items-center gap-3 text-black text-base font-medium group\">\n              <span className=\"w-9 h-9 rounded-full bg-white/80 backdrop-blur flex items-center justify-center group-hover:bg-white transition-colors\">\n                <ArrowRight className=\"w-4 h-4 text-black\" />\n              </span>\n              Know more\n            </button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n```\n\n---","url":"/prompts/halo-use-case"}},{"id":"wanderful-hero","object":"prompt","title":"Wanderful Hero","summary":"A preview-led travel prompt for generating a polished AI-built interface.","category":"Travel","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(78).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-viewport cinematic hero section for a travel brand called \"Wanderful\" using React + TypeScript + Vite + Tailwind CSS. Use GSAP for animation and `lucide-react` for icons.\n\n**Fonts (load via Google Fonts in `src/index.css`):**\n```css\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');\n```\nAlso load a custom display font:\n```css\n@font-face {\n  font-family: 'Dirtyline';\n  src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff');\n  font-weight: normal; font-style: normal; font-display: swap;\n}\n```\nBody font: `Barlow`. Hero headings: `Inter`. Body background: `#000`.\n\n**Video background (fixed, full screen, z-0):**\n- Use this exact CloudFront URL as the `<video>` src:\n  `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260510_060007_60275ce7-030c-4668-a160-8f364ec537d3.mp4`\n- Attributes: `autoPlay muted loop playsInline`, `object-cover`, wrapper scaled `scale-[1.08]` with `origin-center`.\n- On `onLoadedMetadata`, set `playbackRate = 1.25`.\n- Add GSAP-driven mouse parallax: listen to `mousemove`, compute `targetX/Y = ((clientX - cx)/cx) * 20`, lerp `currentX/Y += (target - current) * 0.06` inside `requestAnimationFrame`, and apply via `gsap.set(videoBg, { x, y })`.\n\n**Liquid-glass utility (add to `index.css`):**\n```css\n.liquid-glass {\n  background: rgba(255,255,255,0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: \"\";\n  position: absolute; inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%,\n    rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%,\n    rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%,\n    rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n**Header (fixed top, z-50, `px-10 py-8`, flex justify-between items-center):**\n- Left: wordmark `Wanderful` followed by `<sup>TM</sup>`, `text-[17px] font-semibold tracking-tight`.\n- Center: `<nav>` using `.liquid-glass rounded-full px-2 py-2 flex items-center gap-1`. Links: `JOURNEY`, `BENEFITS`, `JOURNAL`, `GUIDEBOOK`. Each link: `text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white px-4 py-1.5 rounded-full transition-colors duration-200`.\n- Right: \"GET ROAMING\" anchor with same `.liquid-glass rounded-full px-5 py-2.5 text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white`.\n\n**Hero headline (fixed, `top: 120px`, centered, z-20):**\nTwo lines, both centered, `Inter` 400, `font-size: clamp(40px, 5.4vw, 72px)`, `line-height: 1.1`, `letter-spacing: -0.02em`:\n- Line 1 (white): `Venture without edges.`\n- Line 2 (`rgba(255,255,255,0.55)`): `Uncover with keen instinct.`\n\nFade-in on mount: `opacity 0 → 100` and `translate-y-6 → 0` with `transition-all duration-1000`.\n\n**Bottom block (fixed `bottom-14`, z-20, flex-col items-center gap-6), fade-in with `delay-300`:**\n1. Paragraph, `max-w-[620px] text-[15px] leading-relaxed` centered:\n   - White: \"Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure.\"\n   - `text-white/55`: \" Each getaway is tailored, seamless, and wholly yours.\"\n2. Button: white bg, black text, `text-[15px] font-medium rounded-full px-8 py-3.5`, hover `scale-[1.03]` + `shadow-[0_0_32px_4px_rgba(255,255,255,0.2)]`, active `scale-[0.97]`. Label: `Plan my escape today`.\n3. Row: `Lock` icon from lucide-react (`size={13} strokeWidth={1.5}`) + `text-[11px] font-medium tracking-[0.14em] text-white/70`, text: `SECURE BY DESIGN. ZERO DATA LEAKS.`\n\n**Root container:** `min-h-screen bg-black text-white overflow-x-hidden` with inline `fontFamily: \"'Inter', sans-serif\"`.\n\nDependencies: `gsap`, `lucide-react`, `react`, `react-dom`, tailwind configured with content globs `./index.html` and `./src/**/*.{js,ts,jsx,tsx}`.","url":"/prompts/wanderful-hero"}},{"id":"wellness-companion","object":"prompt","title":"Wellness Companion","summary":"A preview-led wellness prompt for generating a polished AI-built interface.","category":"Wellness","subcategory":"Health & wellness","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/mobileArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons.\n\n**Phone Frame:**\n- Dimensions: 375px wide x 780px tall\n- Border radius: 52px\n- Background color: `#8a9aaa`\n- Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`\n- A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50\n\n**Background:**\n- Full-bleed background image using this exact URL: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`\n- Apply `blur(12px)` and `scale(1.1)` to the background image\n- Semi-transparent overlay: `#8a9aaa` at 30% opacity on top\n\n**Font:**\n- Load \"Helvetica Now Var\" from: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`\n- Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif\n- Apply globally to all elements\n\n**Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):**\n\n1. **Header Badge** (top, with 40px margin-bottom):\n   - Liquid glass pill with Timer icon (12px, white/80) + text \"Vitaforge Daily\" (12px, white/90, medium weight)\n   - Padding: 10px vertical, 12px horizontal\n\n2. **Title Section** (32px margin-bottom):\n   - Subtitle: \"Choose all that apply\" - white/60, 14px\n   - Heading: \"What aspects of your wellness would you like to boost?\" - white, 28px, normal weight, tight leading and tracking\n\n3. **Selection Grid** (2 columns, 12px gap, pushes to fill available space):\n   - 4 cards: \"Sleep quality\", \"Stress\", \"Weight\", \"Skin\"\n   - Each card: rounded-[32px], 100px height, padding 16px\n   - Shows a number label (01, 02, etc.) in white/50, 11px, medium weight\n   - Option text in white, 16px, medium weight\n   - \"Stress\" (id:2) and \"Skin\" (id:4) are pre-selected\n   - Cards are toggleable on click\n\n4. **Voice Button** (centered, 24px vertical margin):\n   - Yellow/gold radial glow behind: `radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`\n   - 64px circular liquid glass button with a waveform SVG icon (white strokes, strokeWidth 2, strokeLinecap round) showing 5 vertical bars of varying heights\n   - \"voice\" label below in white/70, 12px\n\n5. **Slide-to-Confirm Button** (bottom, inside 24px horizontal padding):\n   - Full-width rounded-full track, 56px tall, liquid glass style\n   - White circular thumb (44px) on the left with ArrowRight icon (gray-800)\n   - \"Done\" text centered in white/60, 14px, medium weight\n   - 3 ChevronRight icons on the right (14px) at white/40, white/50, white/60 opacity\n   - Draggable thumb with pointer events: snaps back if not dragged past 85%, snaps to end if past 85%\n\n**Liquid Glass Effect (CSS classes):**\n\n`.liquid-glass`:\n- Background: `rgba(255,255,255,0.01)` with luminosity blend mode\n- Backdrop filter: `blur(4px)`\n- Box shadow: `inset 0 1px 1px rgba(255,255,255,0.1)`\n- `::before` pseudo-element for gradient border: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)` with 1.4px padding and mask-composite exclude technique\n\n`.liquid-glass-selected`:\n- Same as above but background: `rgba(255,255,255,0.12)`, blur 8px, stronger box shadow (`inset 0 1px 2px rgba(255,255,255,0.2)`), and brighter gradient border (0.6 alpha at edges, 0.25 at 20%/80%)\n\n**Animations:**\n- Staggered fade-up animation on all elements\n- Keyframes: from `opacity:0, translateY(16px)` to `opacity:1, translateY(0)`\n- Duration: 0.5s, easing: `cubic-bezier(0.22, 1, 0.36, 1)`, fill: forwards\n- Delays: header 0.1s, title 0.25s, grid cards 0.4s/0.48s/0.56s/0.64s, voice 0.7s, slider 0.85s\n\n**Dependencies:**\n- React 18, Tailwind CSS 3, Lucide React, Vite, TypeScript","url":"/prompts/wellness-companion"}},{"id":"nike-hover","object":"prompt","title":"Nike Hover","summary":"A preview-led features prompt for generating a polished AI-built interface.","category":"Features","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(41).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single full-viewport (`h-[100dvh]`) Nike-branded section in React + Tailwind CSS + GSAP. It must be **fully mobile responsive**. The app requires `react-player` and `gsap` installed via npm.\n\n---\n\n### 1. Dependencies to Install\nInstall `react-player` and `gsap`.\n\n### 2. Globals & Configuration (`src/index.css`)\nReplace `index.css` with this exact Tailwind v4 and Google Fonts configuration:\n```css\n@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');\n@import \"tailwindcss\";\n\n@theme {\n  --font-sans: \"Manrope\", sans-serif;\n  --font-serif: \"Instrument Serif\", serif;\n}\n```\n\n### 3. SpotlightReveal Component (`src/components/SpotlightReveal.tsx`)\n\nAn interactive cursor-following SVG spotlight mask. The user's mouse reveals a hidden video layer underneath a static image overlay. On mobile/touch devices, falls back to touch tracking.\n\n```tsx\nimport { useEffect, useRef } from 'react';\n\ninterface SpotlightRevealProps {\n  imageSrc: string;\n  videoSrc: string;\n  isPlaying?: boolean;\n  baseRadius?: number;\n}\n\nexport default function SpotlightReveal({\n  imageSrc,\n  videoSrc,\n  isPlaying = true,\n  baseRadius = 420,\n}: SpotlightRevealProps) {\n  const NUM_TRAILS = 6;\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointsRef = useRef(\n    Array.from({ length: NUM_TRAILS }, () => ({ x: -1000, y: -1000 }))\n  );\n\n  useEffect(() => {\n    if (videoRef.current) {\n      if (isPlaying) {\n        videoRef.current.play().catch(() => {});\n      } else {\n        videoRef.current.pause();\n      }\n    }\n  }, [isPlaying]);\n\n  useEffect(() => {\n    let targetX = window.innerWidth / 2,\n      targetY = window.innerHeight / 2;\n    const handleMouseMove = (e: MouseEvent) => {\n      targetX = e.clientX;\n      targetY = e.clientY;\n    };\n    window.addEventListener('mousemove', handleMouseMove);\n\n    let animationFrameId: number;\n    const animate = () => {\n      const points = pointsRef.current;\n      points[0].x += (targetX - points[0].x) * 0.2;\n      points[0].y += (targetY - points[0].y) * 0.2;\n      for (let i = 1; i < points.length; i++) {\n        points[i].x += (points[i - 1].x - points[i].x) * 0.35;\n        points[i].y += (points[i - 1].y - points[i].y) * 0.35;\n      }\n      for (let i = 0; i < points.length; i++) {\n        const circle = document.getElementById(`trail-${i}`);\n        if (circle) {\n          circle.setAttribute('cx', points[i].x.toString());\n          circle.setAttribute('cy', points[i].y.toString());\n        }\n      }\n      animationFrameId = requestAnimationFrame(animate);\n    };\n    animate();\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, []);\n\n  return (\n    <div className=\"absolute inset-0 w-full h-full z-0 bg-black pointer-events-none overflow-hidden flex items-center justify-center\">\n      <div className=\"absolute inset-0 w-full h-full flex items-center justify-center overflow-hidden pointer-events-none\">\n        <video\n          ref={videoRef}\n          src={videoSrc}\n          className=\"absolute inset-0 w-full h-full object-cover\"\n          muted\n          loop\n          playsInline\n        />\n      </div>\n      <svg\n        className=\"absolute inset-0 w-full h-full\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <defs>\n          <radialGradient id=\"holeGradient\">\n            <stop offset=\"0%\" stopColor=\"black\" stopOpacity=\"1\" />\n            <stop offset=\"60%\" stopColor=\"black\" stopOpacity=\"0.8\" />\n            <stop offset=\"100%\" stopColor=\"black\" stopOpacity=\"0\" />\n          </radialGradient>\n          <mask\n            id=\"spotlight-mask\"\n            maskContentUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            {Array.from({ length: NUM_TRAILS })\n              .reverse()\n              .map((_, reversedIndex) => {\n                const i = NUM_TRAILS - 1 - reversedIndex;\n                return (\n                  <circle\n                    key={`trail-${i}`}\n                    id={`trail-${i}`}\n                    cx=\"-1000\"\n                    cy=\"-1000\"\n                    r={baseRadius - i * 35}\n                    fill=\"url(#holeGradient)\"\n                    opacity={1 - i * 0.15}\n                  />\n                );\n              })}\n          </mask>\n        </defs>\n        <image\n          href={imageSrc}\n          width=\"100%\"\n          height=\"100%\"\n          preserveAspectRatio=\"xMidYMid slice\"\n          mask=\"url(#spotlight-mask)\"\n        />\n      </svg>\n    </div>\n  );\n}\n```\n\n**How it works:**\n- A `<video>` plays fullscreen behind everything.\n- An SVG `<image>` is overlaid on top, masked by a radial gradient mask.\n- 6 trail circles follow the cursor with easing (leader at 0.2 lerp, followers at 0.35 lerp). Where the circles are, the mask cuts a hole revealing the video underneath.\n- `baseRadius` controls the spotlight size (default 420 for section 1, 520 for this section 2).\n- `isPlaying` toggles video play/pause via hover zones defined in the parent.\n\n---\n\n### 4. Section 2 Layout (`src/App.tsx`)\n\n**Exact assets:**\n- **Image overlay (static):** `https://github.com/dsMagnatov/Acreage-landing-assets/blob/main/02604201313.png?raw=true`\n- **Video (revealed on hover):** `https://pikaso.cdnpk.net/private/production/4024859125/d070ae9c-55df-47aa-acbe-4ee66337855c-0.mp4?token=exp=1777075200~hmac=4202c1d0ec90137eb6dffa8e0db93ed7569a68b2016165d8b1b567f888869ff5`\n- **SpotlightReveal baseRadius:** `520`\n\n**Section container:**\n```tsx\n<section\n  className=\"relative z-10 w-full h-[100dvh] overflow-hidden bg-black text-white\"\n  style={{ boxShadow: '0 -20px 50px rgba(0,0,0,0.5)' }}\n>\n```\n- Full viewport height, black background, white text, top inset shadow for depth when scrolling.\n\n**Element 1 -- SpotlightReveal background:**\n```tsx\n<SpotlightReveal\n  imageSrc=\"https://github.com/dsMagnatov/Acreage-landing-assets/blob/main/02604201313.png?raw=true\"\n  videoSrc=\"https://pikaso.cdnpk.net/private/production/4024859125/d070ae9c-55df-47aa-acbe-4ee66337855c-0.mp4?token=exp=1777075200~hmac=4202c1d0ec90137eb6dffa8e0db93ed7569a68b2016165d8b1b567f888869ff5\"\n  isPlaying={isSecondVideoPlaying}\n  baseRadius={520}\n/>\n```\n\n**Element 2 -- Two invisible hover trigger zones (toggle video play/pause):**\n```tsx\n{/* Right-side hover zone */}\n<div\n  className=\"absolute right-[calc(8%+100px)] bottom-[12%] w-[calc(50%-50px)] h-[calc(50%+230px)] z-30\"\n  onMouseEnter={() => setIsSecondVideoPlaying(true)}\n  onMouseLeave={() => setIsSecondVideoPlaying(false)}\n/>\n{/* Left-side hover zone */}\n<div\n  className=\"absolute left-[calc(8%+200px)] top-[calc(20%+190px)] w-[calc(15%+250px)] h-[calc(22.5%+130px)] -translate-y-full z-30\"\n  onMouseEnter={() => setIsSecondVideoPlaying(true)}\n  onMouseLeave={() => setIsSecondVideoPlaying(false)}\n/>\n```\nThese are transparent interactive areas that trigger the video. Make them responsive: on mobile, simplify to a single full-width touch zone or auto-play the video.\n\n**Element 3 -- Stats card (top-left area):**\nPositioned `absolute left-[calc(8%+200px)] top-[20%] z-20`. Width `320px`. Glassmorphism card with:\n- `background: rgba(0, 0, 0, 0.16)`, `backdrop-filter: blur(80px)`, `border: 1px solid rgba(255,255,255,0.1)`, `border-radius: 2px (rounded-sm)`.\n- Padding: `px-8 py-6`.\n\nCard contents:\n1. **Big stat:** `78%` in `font-serif italic`, color `#DA3A16`, size `72px`, `leading-[80px]`, `tracking-tight`.\n2. **Inline SVG chart** next to the stat (inside a `w-[11px]` wrapper, but the SVG itself is `width: 160px, height: 80px`). The chart is a wavy line in `#DA3A16` with a drop shadow filter in the same orange-red color. Exact SVG path:\n```svg\n<svg style=\"width:160px;height:80px\" viewBox=\"0 0 289 138\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g filter=\"url(#filter0_d_878_28499)\">\n    <path d=\"M22.5 48.7306C39.7833 48.7306 49.34 54.94 63.1667 69.2965C76.9933 83.653 86.55 110.5 103.833 110.5C121.117 110.5 130.673 84.2876 144.5 59.2856C158.327 34.2837 167.883 19.5573 185.167 19.5573C202.45 19.5573 208.55 57.6673 225.833 57.6673C243.117 57.6673 249.217 19.5 266.5 19.5\" stroke=\"#DA3A16\" stroke-width=\"2\"/>\n  </g>\n  <defs>\n    <filter id=\"filter0_d_878_28499\" x=\"0\" y=\"0\" width=\"289\" height=\"138\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n      <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n      <feOffset dy=\"4\"/>\n      <feGaussianBlur stdDeviation=\"11.25\"/>\n      <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n      <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.854902 0 0 0 0 0.227451 0 0 0 0 0.0862745 0 0 0 1 0\"/>\n      <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_878_28499\"/>\n      <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_878_28499\" result=\"shape\"/>\n    </filter>\n  </defs>\n</svg>\n```\n3. **Title:** `\"NEXT-GEN CUSHIONING ARCHITECTURE\"` -- `font-serif`, white, `text-[15px]`, `tracking-[0.02em]`, uppercase, `mb-2`, `leading-tight`.\n4. **Subtitle:** `\"Impact Absorption & Energy Return Dynamics\"` -- `font-serif`, `text-white/60`, `text-[13px]`.\n\nOn mobile: reposition this card to `left-4 top-[15%]` or `top-auto bottom-[55%]`, reduce width to `w-[280px]`, scale the stat to `text-[48px]`.\n\n**Element 4 -- Hero headline (bottom-left):**\nPositioned `absolute left-[8%] bottom-[12%] z-20`, `max-w-[500px]`.\n\n```html\n<h2 class=\"text-[44px] leading-[1.05] tracking-tight flex flex-col\">\n  <span class=\"font-sans font-medium\">Bringing Aerospace-</span>\n  <span class=\"font-sans font-medium\">Grade Infrastructure</span>\n  <span class=\"font-serif font-normal pt-1\">\n    <span class=\"not-italic\">Directly To Your </span>\n    <span class=\"italic\">Everyday</span>\n  </span>\n  <span class=\"font-serif italic font-normal\">Urban Exploration</span>\n</h2>\n```\n\n- Lines 1-2 use `font-sans` (Manrope) `font-medium`.\n- Lines 3-4 use `font-serif` (Instrument Serif). Line 3 mixes non-italic \"Directly To Your\" with italic \"Everyday\". Line 4 is fully italic.\n- On mobile: reduce to `text-[24px] sm:text-[32px] md:text-[44px]`, position `left-4 bottom-[8%]`, `max-w-[90%]`.\n\n**Element 5 -- Nike branded CTA block (bottom-right):**\nPositioned `absolute right-[calc(8%+100px)] bottom-[12%] z-20`, stacked vertically with `flex flex-col items-center`.\n\nTwo stacked boxes, each `w-[180px]`:\n1. **Top box (white):** `bg-white`, `py-[6px]`, centered text: `\"THE SCIENCE OF IMPACT CONTROL\"` in `text-black font-serif text-[10px] uppercase font-bold tracking-[0.08em] leading-[16px]`.\n2. **Bottom box (Nike red):** `bg-[#DA3A16]`, `h-[100px]`, centered Nike swoosh SVG in white, `width=\"86\"`. Exact swoosh path:\n```svg\n<svg width=\"86\" viewBox=\"135.5 361.38 420.32 149.8\" fill=\"white\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"m181.86 511.11c-12.524-0.49755-22.77-3.9244-30.782-10.289-1.529-1.2159-5.1725-4.8616-6.3949-6.3992-3.2489-4.0853-5.4578-8.0611-6.931-12.472-4.5334-13.579-2.2002-31.397 6.6737-50.953 7.5979-16.742 19.322-33.347 39.776-56.344 3.013-3.384 11.986-13.281 12.043-13.281 0.0216 0-0.46749 0.84706-1.083 1.8786-5.3183 8.9082-9.8689 19.401-12.348 28.485-3.9823 14.576-3.502 27.085 1.4068 36.784 3.3862 6.6822 9.1913 12.47 15.719 15.67 11.428 5.5993 28.159 6.0625 48.592 1.3554 1.4068-0.32599 71.116-18.831 154.91-41.123 83.794-22.294 152.36-40.52 152.37-40.505 0.0237 0.0193-194.68 83.333-295.75 126.56-16.007 6.8431-20.287 8.5715-27.812 11.214-19.236 6.7551-36.467 9.9783-50.396 9.4251z\"/>\n</svg>\n```\n\nOn mobile: reposition to `right-4 bottom-[8%]`, reduce width to `w-[140px]`, reduce box height to `h-[80px]`.\n\n---\n\n### 5. Color Palette\n| Token | Value | Usage |\n|---|---|---|\n| Background | `#000000` | Section bg |\n| Nike Red/Orange | `#DA3A16` | Stat text, chart stroke, chart glow shadow, Nike logo box |\n| Text primary | `#FFFFFF` | Headlines, card title |\n| Text muted | `rgba(255,255,255,0.6)` | Card subtitle (`text-white/60`) |\n| Card bg | `rgba(0,0,0,0.16)` | Glassmorphism card |\n| Card border | `rgba(255,255,255,0.1)` | Card border |\n| CTA top box | `#FFFFFF` bg / `#000000` text | Label box |\n\n### 6. Typography Rules\n| Element | Font | Weight | Size | Style |\n|---|---|---|---|---|\n| Headline lines 1-2 | Manrope (`font-sans`) | 500 (medium) | 44px | Normal |\n| Headline lines 3-4 | Instrument Serif (`font-serif`) | 400 (normal) | 44px | Italic (mixed on line 3) |\n| Stat number | Instrument Serif | 400 | 72px | Italic |\n| Card title | Instrument Serif | 400 | 15px | Normal, uppercase |\n| Card subtitle | Instrument Serif | 400 | 13px | Normal |\n| CTA label | Instrument Serif | 700 (bold) | 10px | Normal, uppercase |\n\n### 7. Mobile Responsive Requirements\n\nImplement these breakpoints:\n- **< 640px (mobile):** Stack elements vertically. Stats card moves to top-center with reduced dimensions. Headline drops to `text-[24px]` at `left-4 bottom-[30%]`. Nike CTA block moves to center-bottom. Hover zones become a single full-area touch zone. Consider auto-playing the video on mobile since there's no hover. Reduce `baseRadius` to `280` on mobile.\n- **640px-1024px (tablet):** Stats card shifts to `left-[5%] top-[18%]`, headline to `text-[32px]`. CTA block to `right-[5%]`.\n- **> 1024px (desktop):** Use the exact desktop positions described above unchanged.\n\n### 8. State Management\n```tsx\nconst [isSecondVideoPlaying, setIsSecondVideoPlaying] = useState(false);\n```\nControlled by the invisible hover zones. On mobile, default to `true` (auto-play) or use `onTouchStart`/`onTouchEnd`.\n\n---","url":"/prompts/nike-hover"}},{"id":"orbis-hello","object":"prompt","title":"Orbis Hello","summary":"A preview-led about prompt for generating a polished AI-built interface.","category":"About","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(53).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"---\n\n> **Setup requirements before building the section:**\n>\n> **Google Fonts** -- Load these in `index.html` `<head>`:\n> ```html\n> <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n> <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n> <link href=\"https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap\" rel=\"stylesheet\" />\n> ```\n>\n> **Tailwind config** -- Extend `theme` with these exact custom values:\n> ```js\n> fontFamily: {\n>   grotesk: ['Anton', 'sans-serif'],\n>   condiment: ['Condiment', 'cursive'],\n> },\n> colors: {\n>   cream: '#EFF4FF',\n>   neon: '#6FFF00',\n> }\n> ```\n> `font-grotesk` maps to **Anton** (a tall, condensed display font). `font-condiment` maps to **Condiment** (a flowing cursive/script font).\n>\n> **No additional CSS classes or animations are used in this section.** No keyframes, no transitions, no hover states. It is a static layout.\n>\n> ---\n>\n> **Build the following section as a React component using Tailwind CSS:**\n>\n> A `<section>` tag with classes `relative overflow-hidden min-h-screen`. No background color -- the background is a fullscreen video.\n>\n> **Background video:** An absolutely positioned `<video>` element covering the entire section. Classes: `absolute inset-0 w-full h-full object-cover`. Attributes: `autoPlay`, `loop`, `muted`, `playsInline`. The `<source>` element points to:\n> ```\n> https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4\n> ```\n> with `type=\"video/mp4\"`.\n>\n> **Content wrapper:** A `<div>` sitting on top of the video with classes: `relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`.\n>\n> Inside the content wrapper are **two rows**:\n>\n> ---\n>\n> **ROW 1 (top):** A `<div>` with classes `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20`. Contains two children:\n>\n> **Child A -- The heading:** An `<h2>` with classes `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative`. The text content is:\n> ```\n> Hello!<br />\n> I'm orbis\n> ```\n> (Literally \"Hello!\" on line 1, \"I'm orbis\" on line 2, separated by a `<br />`. All rendered uppercase by Tailwind so it displays as \"HELLO!\" and \"I'M ORBIS\".)\n>\n> **Inside the `<h2>`**, after the text, there is an absolutely positioned `<span>` with the word **\"Orbis\"**. This span has classes: `font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`.\n>\n> Key details of this span:\n> - `normal-case` overrides the parent's uppercase, so it renders as \"Orbis\" (capital O, lowercase rbis) in the Condiment cursive font.\n> - `text-neon` = `#6FFF00` (bright green).\n> - `mix-blend-exclusion` makes the green text interact with the video background.\n> - `absolute right-[-8px] bottom-[-20px]` (responsive: `sm:bottom-[-30px] md:bottom-[-40px]`) positions it hanging below and slightly right of the parent heading, overlapping the word \"orbis\" above it.\n> - `-rotate-1` gives it a slight counter-clockwise tilt (-1 degree).\n> - `leading-[0.79]` is a very tight line-height. `tracking-[0.03em]` adds subtle letter spacing.\n> - `opacity-90` makes it 90% opaque.\n>\n> **Child B -- The paragraph:** A `<p>` with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed`. The text is:\n> > \"A digital object fixed beyond time and place. An exploration of distance, form, and silence in space\"\n>\n> (`font-mono` uses the browser's default monospace font. `leading-relaxed` = 1.625 line-height.)\n>\n> ---\n>\n> **ROW 2 (bottom):** A `<div>` with classes `flex justify-between items-start`. Contains two children:\n>\n> **Child A -- Left text column** (always visible): A `<div>` with classes `flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags**, each with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`. Both contain the same text:\n> > \"A digital object fixed beyond time and place. An exploration of distance, form, and silence in space\"\n>\n> Key detail: The color is `text-[#010828]` (near-invisible dark navy matching the page background) by default, switching to `lg:text-cream` (`#EFF4FF`) on large screens. Combined with `opacity-10`, this text is extremely faint/ghostly -- almost invisible, serving as a subtle texture element rather than readable content.\n>\n> **Child B -- Right text column** (desktop only): A `<div>` with classes `hidden lg:flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags** with the exact same classes and text as Child A. This column is hidden on mobile/tablet and only appears on `lg:` (1024px+) screens.\n>\n> ---\n>\n> **There are no animations, transitions, hover effects, scroll effects, or JavaScript interactions in this section.** It is purely a static layout with a looping background video. The only \"motion\" comes from the autoplaying video itself.\n\n---","url":"/prompts/orbis-hello"}},{"id":"organic-odyssey","object":"prompt","title":"Organic Odyssey","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(51).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen cinematic hero section using React, Tailwind CSS, and Framer Motion. Use Vite with TypeScript. The dependencies required are: `react`, `react-dom`, `framer-motion`, `lucide-react`, and `tailwindcss`.\n\n**VIDEO BACKGROUND:**\n- Full-screen looping background video, absolutely positioned to fill the viewport\n- Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4`\n- Properties: autoPlay, muted, loop, playsInline, object-cover, object-center\n- Page background: `#010101`, full viewport height, overflow hidden\n\n**FONTS (load via index.html link tags):**\n- Garamond from: `https://db.onlinewebfonts.com/c/2bf40ab72ea4897a3fd9b6e48b233a19?family=Garamond`\n- Geist from Google Fonts: weights 300, 400, 500\n- Body font: `'Geist', -apple-system, BlinkMacSystemFont, sans-serif`\n- Heading font class `.font-garamond`: `'Garamond', 'Times New Roman', serif`\n\n**NAVIGATION:**\n- Relative positioned, z-20, flexbox centered on desktop, space-between on mobile\n- Brand name \"Organic Visions\" -- white, uppercase, letter-spacing 0.25em (mobile) / 0.3em (desktop), font-light\n- Desktop nav links: \"Wander\", \"Archive\", \"Story\", \"Connect\" -- white/80, uppercase, 0.2em tracking, hover to white, 300ms transition\n- Mobile: hamburger toggle using lucide-react `Menu` and `X` icons (size 22)\n\n**MOBILE MENU (hamburger dropdown):**\n- Fixed position, top-16, left-4, right-4, z-50, hidden on md+\n- Uses `AnimatePresence` from framer-motion for mount/unmount animation\n- Animation: fade in from y:-10 to y:0, duration 0.3s, ease 'easeOut'; reverse on exit\n- Each link staggers in with opacity 0 to 1, y:-8 to 0, delay 0.05 + index*0.06\n- Links: white/90, 0.25em tracking, uppercase, font-light, hover to white\n- Custom glass class `.mobile-menu-glass`:\n  ```css\n  background: rgba(10, 10, 10, 0.7);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n  ```\n- Rounded-2xl, py-8, gap-5, flex-col centered\n\n**HERO CONTENT:**\n- Relative z-10, flex-col centered, text-center\n- Padding: px-5 (sm:px-8), pt-12 (sm:pt-16, md:pt-24)\n- Heading: Two lines -- \"WITNESS THE\" and \"HIDDEN REALM\"\n- Font: Garamond, sizes 4xl/6xl/8xl/9xl responsive, font-normal, white, line-height 1.08, tracking-tight, mb-6 (sm:mb-8)\n- Each line uses a `StaggeredFade` component that splits text into individual characters and animates each with 0.07s stagger delay (opacity 0 to 1), triggered once when in view\n\n**STAGGERED FADE COMPONENT:**\n- Accepts `text` string prop\n- Splits into individual `<motion.span>` characters\n- Uses `useInView` hook (once: true) to trigger animation\n- Variants: hidden = opacity 0; show = opacity 1, y:0, with delay `i * 0.07` per character\n\n**SUBTITLE:**\n- Framer Motion animated paragraph, initial opacity:0 y:20, animate opacity:1 y:0, duration 0.8s, delay 1.6s\n- Text: \"An odyssey through delicate living forms,\" (line break hidden on mobile, visible sm+) \"revealed by lens and curiosity.\"\n- White/70, font-light, leading-relaxed, max-w-xs (sm:max-w-md), mb-8 (sm:mb-10)\n- Responsive sizes: text-sm / text-base / text-lg\n\n**CTA BUTTON:**\n- Framer Motion animated, initial opacity:0 y:20, animate opacity:1 y:0, duration 0.8s, delay 2.0s\n- Text: \"Begin the Experience\"\n- Uses `.liquid-glass` class, rounded-full, responsive padding px-7/px-10 py-3.5/py-4\n- White/90, uppercase, tracking 0.18em/0.2em responsive\n\n**LIQUID GLASS CSS (.liquid-glass):**\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n.liquid-glass:hover {\n  background: rgba(255, 255, 255, 0.04);\n  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);\n}\n\n.liquid-glass:active {\n  transform: scale(0.98);\n}\n```\n\n**GLOBAL CSS:**\n- Reset: margin 0, padding 0, box-sizing border-box on all elements\n- Body: antialiased font smoothing, white text, #010101 background\n- Uses Tailwind directives: @tailwind base/components/utilities\n\n**PAGE TITLE:** \"Synthetic Nature\"","url":"/prompts/organic-odyssey"}},{"id":"nexacore-results","object":"prompt","title":"NexaCore Results","summary":"A preview-led features prompt for generating a polished AI-built interface.","category":"Features","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(40).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single React + TypeScript + Tailwind CSS v3 component called `PrecisionSection`. No external icon libraries — all icons are inline SVG or `<img>` tags. No `useState`, no animations, no hover states. Two separate layouts: a desktop staircase (absolutely-positioned pillars) and a mobile alternating-flow layout. The `sm:` breakpoint controls visibility between them.\n\n---\n\n## Global font\n\nRegister **\"Mazzard H\"** in `index.css` and apply it globally:\n\n```css\n@font-face {\n  font-family: 'Mazzard H';\n  font-weight: 400;\n  font-style: normal;\n  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');\n}\n@font-face {\n  font-family: 'Mazzard H';\n  font-weight: 500;\n  font-style: normal;\n  src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'),\n       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'),\n       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype');\n}\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  html, body, * { font-family: 'Mazzard H', sans-serif; }\n}\n```\n\n---\n\n## File: `src/components/PrecisionSection.tsx`\n\n### Constants (top of file, before the component)\n\n```ts\nconst LOGO_ICON =\n  'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870f623cf3df417ce45df05_icon%20logo%20eternacloud.png';\n\nconst LINE_GRADIENT =\n  'linear-gradient(rgb(28, 78, 255), rgb(254, 136, 27) 0%, rgb(172, 36, 255) 25%, rgb(247, 159, 255) 50%, rgb(255, 214, 0) 66%, rgb(254, 136, 27) 84%, rgba(254, 136, 27, 0) 102%)';\n\nconst PILLARS = [\n  { label: 'Scopes',     items: ['conditions', 'capacity', 'specs', 'timelines'],     leftVw: 2.8,  bottomVw: 7     },\n  { label: 'Integrates', items: ['civil', 'mechanical', 'electrical', 'controls'],     leftVw: 22.4, bottomVw: 9.08  },\n  { label: 'Certifies',  items: ['redundancy', 'testing', 'compliance', 'sign-offs'], leftVw: 41.2, bottomVw: 11.16 },\n  { label: 'Activates',  items: ['cutover', 'runbooks', 'handoff', 'SLAs'],           leftVw: 61.1, bottomVw: 13.24 },\n];\n```\n\n---\n\n### Section element\n\nInline styles only (no Tailwind on the `<section>` itself):\n\n```\nbackground-image: url(\"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_125638_553b96dc-a1fd-4b2b-81a9-ed7daa80006e.png&w=1280&q=85\")\nbackground-size: cover\nbackground-position: center\nbackground-repeat: no-repeat\nwidth: 100%\ndisplay: flex\nflex-direction: column\nalign-items: center\ntext-align: center\npadding: clamp(48px, 8vw, 120px) clamp(16px, 4vw, 60px) clamp(48px, 5.56vw, 80px)\ngap: clamp(32px, 4vw, 56px)\n```\n\n---\n\n### Block 1 — Header\n\nWrapper `<div>` — inline: `display: flex`, `flex-direction: column`, `align-items: center`, `gap: 36px`\n\n#### Badge pill `<div>`\n\nInline:\n```\nbackground-color: rgb(249, 249, 249)\ndisplay: flex\nalign-items: center\ngap: 8px\nfont-size: clamp(14px, 1.1vw, 18px)\nfont-weight: 500\nborder-radius: 36px\npadding: clamp(8px, 0.9vw, 14px) clamp(12px, 1.25vw, 20px)\ncolor: rgb(26, 11, 84)\nwhite-space: nowrap\n```\n\nContains this inline SVG (`width: 19`, `height: 18`, `flex-shrink: 0`, `viewBox=\"0 0 17 16\"`, `fill=\"none\"`):\n\n```xml\n<g clipPath=\"url(#prec-clip)\">\n  <circle cx=\"8.5\" cy=\"8\" r=\"7\" stroke=\"#c86fff\" fill=\"none\" />\n  <path d=\"M9.5 11.5V10.5H7.5V11.5H9.5ZM7.5 14.5C7.5 15.0523 7.94772 15.5 8.5 15.5C9.05228 15.5 9.5 15.0523 9.5 14.5H7.5ZM8.5 11.5H7.5V14.5H8.5H9.5V11.5H8.5Z\" fill=\"rgb(200, 111, 255)\" />\n  <path d=\"M12 7H11V9H12V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM12 8V9H15V8V7L12 7V8Z\" fill=\"rgb(200, 111, 255)\" />\n  <path d=\"M5 9H6V7H5V9ZM2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9V7ZM5 8V7H2V8V9H5V8Z\" fill=\"rgb(200, 111, 255)\" />\n  <path d=\"M7.5 4.5V5.5H9.5V4.5H7.5ZM9.5 1.5C9.5 0.947715 9.05228 0.5 8.5 0.5C7.94772 0.5 7.5 0.947715 7.5 1.5H9.5ZM8.5 4.5H9.5V1.5H8.5H7.5V4.5H8.5Z\" fill=\"rgb(200, 111, 255)\" />\n</g>\n<defs>\n  <clipPath id=\"prec-clip\">\n    <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.5)\" />\n  </clipPath>\n</defs>\n```\n\nAfter the SVG: plain text **\"Structured Delivery\"**\n\n#### Heading + subtext `<div>`\n\nInline: `display: flex`, `flex-direction: column`, `align-items: center`, `max-width: clamp(700px, 60vw, 900px)`, `gap: 22px`\n\n`<h2>` — inline: `font-size: clamp(28px, 4vw, 56px)`, `font-weight: 500`, `color: rgb(26, 11, 84)`, `line-height: 1.15`, `margin: 0`\n\nInside the `<h2>`, two `<span>` elements:\n\n**Span 1** — Tailwind class `sm:whitespace-nowrap`, inline `display: block`:\n> **One integrated, end-to-end system.**\n\n**Span 2** — inline only:\n```\nbackground-image: linear-gradient(90deg, rgb(43, 167, 255), rgb(202, 69, 255) 50%, rgb(254, 136, 27))\n-webkit-background-clip: text\nbackground-clip: text\n-webkit-text-fill-color: transparent\ncolor: transparent\npadding-bottom: 0.3vw\ndisplay: block\n```\n> **Compounding operational value.**\n\n`<p>` below heading — inline: `font-size: clamp(15px, 1.2vw, 20px)`, `color: rgb(169, 151, 206)`, `margin: 0`\n> **\"NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track.\"**\n\n---\n\n### Block 2 — Pillars container `<div>`\n\nInline: `width: 100%`, `max-width: 82.292vw`, `margin: 0 auto`\n\nContains two children:\n\n---\n\n#### Desktop pillars — `hidden sm:block` (Tailwind)\n\nInline:\n```\nposition: relative\nwidth: 82.292vw\nheight: 31.94vw\ncolor: rgb(26, 11, 84)\n```\n\nMap over `PILLARS`. Each pillar wrapper `<div>`:\n```\nposition: absolute\nbottom: `${pillar.bottomVw}vw`\nleft: `${pillar.leftVw}vw`\ndisplay: flex\nflex-direction: column\nalign-items: center\njustify-content: flex-start\n```\n\n**Chip `<div>`:**\n```\ndisplay: flex\nalign-items: center\njustify-content: center\nbackground-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))\nfont-size: 18px\nfont-weight: 500\nborder-radius: 20px\npadding-top: 0.972vw\npadding-bottom: 0.972vw\npadding-left: 1.736vw\npadding-right: 1.736vw\nwhite-space: nowrap\ngap: 8px\n```\n\nChip contents:\n1. `<img src={LOGO_ICON} alt=\"\" style={{ width: '1.111vw', height: 'auto', display: 'inline-block' }} />`\n2. `{pillar.label}`\n\n**Line + items wrapper `<div>`** (directly below chip):\n```\nposition: relative\ndisplay: flex\nflex-direction: column\nalign-items: center\njustify-content: flex-end\n```\n\n**Items container** (absolutely positioned, overlays the line):\n```\nposition: absolute\ntop: 0.56vw\nleft: 1.94vw\ndisplay: flex\nflex-direction: column\ngap: 4px\nfont-size: 16px\nalign-items: flex-start\njustify-content: space-between\n```\n\nEach item `<div>`:\n```\npadding-top: 0.69vw\npadding-bottom: 0.69vw\npadding-left: 1.04vw\npadding-right: 1.04vw\ndisplay: flex\nalign-items: flex-start\n```\nText: the item string.\n\n**Vertical gradient line `<div>`** (sibling of items container, rendered after it):\n```\nbackground-image: LINE_GRADIENT  (see constant above)\nwidth: 1px\nheight: 14.24vw\n```\n\n---\n\n#### Mobile pillars — Tailwind: `flex flex-col sm:hidden w-full`\n\nInline: `color: rgb(26, 11, 84)`, `gap: 0`\n\nMap over `PILLARS` with index. `isRight = index % 2 !== 0` (index 1 and 3 are right-aligned).\n\n**Pillar wrapper `<div>`:**\n```\ndisplay: flex\nflex-direction: column\nalign-items: isRight ? 'flex-end' : 'flex-start'\nwidth: 100%\npadding-bottom: 8px\n```\n\n**Chip `<div>`:**\n```\ndisplay: inline-flex\nalign-items: center\nbackground-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))\nfont-size: 15px\nfont-weight: 500\nborder-radius: 20px\npadding: 10px 18px\nwhite-space: nowrap\ngap: 7px\n```\n\nChip contents:\n1. `<img src={LOGO_ICON} alt=\"\" style={{ width: 16, height: 'auto' }} />`\n2. `{pillar.label}`\n\n**Line + items row `<div>`:**\n```\ndisplay: flex\nflex-direction: isRight ? 'row-reverse' : 'row'\nalign-items: stretch\nwidth: 100%\n```\n\n**Vertical line `<div>`:**\n```\nwidth: 1px\nflex-shrink: 0\nbackground-image: LINE_GRADIENT\nmargin-left: isRight ? 0 : 22px\nmargin-right: isRight ? 22px : 0\nmin-height: 120px\n```\n\n**Items `<div>`:**\n```\ndisplay: flex\nflex-direction: column\ngap: 0\npadding-left: isRight ? 0 : 20px\npadding-right: isRight ? 20px : 0\npadding-top: 8px\npadding-bottom: 8px\nalign-items: isRight ? 'flex-end' : 'flex-start'\n```\n\nEach item `<div>`:\n```\nfont-size: 14px\ncolor: rgb(100, 80, 160)\npadding: 8px 0\n```\nText: the item string.\n\n---\n\n## Pillar data reference\n\n| Label | Items | Desktop left | Desktop bottom |\n|---|---|---|---|\n| Scopes | conditions, capacity, specs, timelines | 2.8vw | 7vw |\n| Integrates | civil, mechanical, electrical, controls | 22.4vw | 9.08vw |\n| Certifies | redundancy, testing, compliance, sign-offs | 41.2vw | 11.16vw |\n| Activates | cutover, runbooks, handoff, SLAs | 61.1vw | 13.24vw |\n\n---\n\n**No animations. No hover states. No scroll effects. No JavaScript logic. Static render only. Desktop: 4 pillars arranged in a rising staircase via `position: absolute` with `bottom` and `left` in `vw` units. Mobile: single column, even-indexed pillars align left, odd-indexed align right, each with a vertical gradient line beside its items list.**","url":"/prompts/nexacore-results"}},{"id":"network-hero","object":"prompt","title":"Network Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(19).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a single-page React + Vite landing page for \"Marketeam\" -- a marketing talent platform. Use Inter (400, 500, 600, 700) and Urbanist (600, 700) from Google Fonts. The page is a full-viewport hero with a header, left content area, right animated circles visualization, and a bottom logo ticker strip.\n\n---\n\n### Background\n\nFull-page background image covering the entire viewport:\n```\nhttps://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_111401_56af5012-2263-45d3-849a-8688084d7c2a.png&w=1280&q=85\n```\nApplied as `background: url(...) center center / cover no-repeat` on the root `.app` container.\n\n---\n\n### Header\n\n- Flexbox row, `justify-content: space-between`, padding `24px 64px`, max-width `1920px`, centered.\n- **Left side**: Logo image + nav links\n  - Logo: `<img>` with height 32px from: `https://polo-pecan-73837341.figma.site/_assets/v11/17ae538989a509947a8de3892c644664895e69b1.png`\n  - Nav links: \"Your Team\", \"Solutions\", \"Blog\", \"Pricing\" -- color `#000000`, 15px, font-weight 400, with underline animation on hover (scaleX from 0 to 1, transform-origin left, 0.3s ease).\n- **Right side**: \"Log In\" link + \"Join Now\" button\n  - Log In: color `#ffffff`, 15px, weight 500, same underline hover as nav but white.\n  - Join Now: pill button (border-radius 50px), black bg (`#000000`), white text, padding `12px 26px`, 15px, weight 500. On hover a `#A068FF` fill slides in from left using `::after` with `translateX(-100%)` to `translateX(0)`, cubic-bezier(0.22, 1, 0.36, 1), 0.4s. Button uses `overflow: hidden`.\n  - The button is wrapped in a `.btn-border-wrap` div that has a rotating conic-gradient border using `::before` with `inset: -3px`, `padding: 3px`, mask technique for border-only effect. The gradient is: `conic-gradient(from var(--border-angle), #A068FF, #070319, #A068FF, #070319, #A068FF)`. It rotates via CSS `@property --border-angle` from `0deg` to `360deg` in 3s linear infinite.\n\n---\n\n### Hero Left\n\n- `flex: 0 1 600px`, `padding-top: 40px`\n- **Heading**: Typewriter effect, font Urbanist, 64px, weight 600, line-height 64px, letter-spacing -1.5px. Text: \"Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!\". The first 67 characters are colored `#000000`, the rest `#ffffff`. A blinking purple cursor (`#A068FF`) appears during typing. Typing speed: 35ms per character, starts after 400ms delay.\n- **\"Start Project\" button**: Same pill style as Join Now but slightly larger (padding `14px 28px`, 16px), bg `#060218`. Has a right-arrow chevron SVG icon (18x18). Hover fill slides from right (`translateX(100%)` to `translateX(0)`). Also wrapped in `.btn-border-wrap` with the same rotating gradient border. Appears after typing finishes (animation-delay 3.2s).\n- **Cursor element**: A purple cursor icon (SVG: pointer arrow filled `#A068FF`) + \"David\" label (pill badge, bg `#A068FF`, white text, 16px, weight 500, padding `8px 16px`, border-radius 20px). Positioned `margin-left: 290px`, `margin-top: 40px`. Appears with animation-delay 3.6s.\n\n---\n\n### Hero Right -- Circles Visualization\n\n- Container: `720x720px`, centered.\n- 4 concentric circles (orbits), each rotating slowly:\n  - Orbit 1 (innermost): 353px diameter, spins left (counterclockwise) 30s\n  - Orbit 2: 501px diameter, spins right 40s\n  - Orbit 3: 649px diameter, spins right 50s\n  - Orbit 4 (outermost): 797px diameter, spins left 60s\n- Each circle has a 1px gradient border: `linear-gradient(180deg, rgba(217, 161, 255, 0) 0%, rgba(217, 161, 255, 1) 43%, rgba(217, 161, 255, 0) 100%)` applied via the mask technique.\n- **Center circle (orbit-1)**: Displays an animated count-up number \"20k+\" (Urbanist 64px, weight 500) and \"Specialists\" label (Urbanist 16px, weight 600). Counter-rotates to stay upright.\n- **Avatars** placed on orbits using `transform: translate(-50%, -50%) rotate(Xdeg) translate(radius) rotate(-Xdeg)`:\n  - Avatar images (58px default, some 78px/88px) from these URLs:\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/aa51718fb3af3637e6d666b6543fc27a175fada6.png` (orbit 1, at 270deg, 177px radius, square with border-radius 20px, purple glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/ca755f7f93c1126fb8bdbf99ab364a33aa9ab272.png` (orbit 2, at 60deg, 251px, round, yellow glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/dc01064c7093dcc32674876ee3cf5e41c4a485c6.png` (orbit 2, at 180deg, 251px, 78px, pink glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/d5470a58b02388336141575048720f19a50de832.png` (orbit 2, at 300deg, 251px, square border-radius 20px, blue glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/018736aa5d0275c4ce56cfebaf2ae3007d81ca1e.png` (orbit 3, at 130deg, 325px, 88px, pink glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/c76d8a0b99676de31c014344bfaf75bad090758d.png` (orbit 4, at 30deg, 399px, purple glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/7b1b5f039de7b54cc9913e96c1923c3b15a157fa.png` (orbit 4, at 95deg, 399px, 88px, square border-radius 24px, orange glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/9ae171d8895199349755c43fbff00e122221a027.png` (orbit 4, at 220deg, 399px, 88px, square border-radius 24px, pink glow)\n    - `https://polo-pecan-73837341.figma.site/_assets/v11/926c9eb7b4bc1df846fa0e39f0b0dc3fefd80671.png` (orbit 4, at 320deg, 399px, purple glow)\n  - Each avatar has a staggered fly-in animation (scale 0.3 + rotate -180deg + blur -> normal), delays from 0.6s to 2.3s.\n\n---\n\n### Logo Ticker (Bottom)\n\n- Horizontal infinitely scrolling strip of partner logos, `gap: 64px`, 20s animation.\n- Fade masks on left/right edges (linear-gradient mask).\n- 5 unique SVG logos repeated 4x for seamless loop:\n  - `https://polo-pecan-73837341.figma.site/_assets/v11/1e7b0e6fcc016cd28aec5c68990118b8c54c35a5.svg`\n  - `https://polo-pecan-73837341.figma.site/_assets/v11/3eac03c183db2ae080d910159211c14843398b61.svg`\n  - `https://polo-pecan-73837341.figma.site/_assets/v11/17705a4c0023a0e5a99154dfb10582adbbf4260b.svg`\n  - `https://polo-pecan-73837341.figma.site/_assets/v11/0e5f442b09dc5c248e3e60d40a65505fb1887228.svg`\n  - `https://polo-pecan-73837341.figma.site/_assets/v11/63f99030ceb459e3c9ab9e429cfa2353491d3816.svg`\n- Each logo: `width: 137px`, `height: 40px`, `object-fit: contain`.\n\n---\n\n### Entrance Animations\n\n- Header: fade-down (translateY -20px to 0, 0.8s)\n- Hero left: fade-up (translateY 40px to 0, 1s)\n- Hero right circles: scale-in (scale 0.85 to 1 + opacity, 1.2s, delay 0.3s)\n- Logos section: fade-up, delay 0.6s\n- All using `cubic-bezier(0.22, 1, 0.36, 1)` easing.\n\n---\n\n### Responsive Breakpoints\n\n- **1280px**: circles scale 0.85\n- **1024px**: stack layout (flex-direction column), heading 48px, circles scale 0.7, nav gap shrinks\n- **768px**: hide nav, heading 36px, circles scale 0.5\n- **480px**: heading 28px, circles scale 0.4, smaller buttons/logos\n\n---\n\n### Key Colors\n\n- Primary accent: `#A068FF`\n- Background dark: `#060218` / `#070319`\n- Text dark: `#000000`\n- Text light: `#ffffff`\n- Body bg fallback: `#0a0a0a`\n\n---\n\n### Technical Details\n\n- React (useState, useEffect, useRef), Vite build\n- Custom `useCountUp` hook: animates 0 to 20 over 2s with easeOutCubic, starts after 1.2s delay\n- `TypewriterHeading` component: types char by char at configurable speed\n- CSS `@property --border-angle` for the animated border gradient\n- No external animation libraries -- pure CSS animations + JS for typewriter/counter","url":"/prompts/network-hero"}},{"id":"portal","object":"prompt","title":"Portal","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(68).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a password manager landing page hero section using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Here is every specification:\n\n---\n\n### Fonts\n\n- **Heading font:** \"Helvetica Now Display Bold\" -- load via this stylesheet in `index.html`:\n  ```\n  <link href=\"https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold\" rel=\"stylesheet\">\n  ```\n- **Body font:** \"Inter\" (weights 300-900) -- load via Google Fonts in `index.css`:\n  ```\n  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\n  ```\n\n### CSS Variables (defined in `:root` in `index.css`)\n\n```\n--font-heading: 'Helvetica Now Display Bold', sans-serif;\n--font-body: 'Inter', sans-serif;\n--color-text: #192837;\n--color-accent: #7342E2;\n--color-login-bg: #F2F2EE;\n```\n\nGlobal reset: `* { box-sizing: border-box; }`, body uses `var(--font-body)`, `var(--color-text)`, margin/padding 0.\n\n---\n\n### Background\n\nFull-viewport looping background video, absolutely positioned, covering the entire page with `object-cover`. URL:\n\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_131516_eca35265-ea66-4fbd-8d52-22aae6e1a503.mp4\n```\n\nAttributes: `autoPlay`, `muted`, `loop`, `playsInline`. Classes: `absolute inset-0 z-0 w-full h-full object-cover`.\n\n---\n\n### Logo (inline SVG component)\n\nA custom geometric SVG logo, 32x32, viewBox `0 0 256 256`, fill `#192837`:\n\n```\nM 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z\n```\n\n---\n\n### Navbar\n\n- Max-width `1280px`, centered with `margin: 0 auto`.\n- Padding: `px-5 sm:px-8 py-4 sm:py-5`.\n- `relative z-10`, flexbox with `justify-between`, `items-center`.\n- **Left:** Logo component.\n- **Center (desktop, hidden on mobile `md:flex`):** 5 nav links -- \"Vault\", \"Plans\", \"Install\", \"News\", \"Help\". Each is `text-sm font-medium`, color `var(--color-text)`, `transition-opacity hover:opacity-70`, gap-8.\n- **Right (desktop, hidden on mobile `md:flex`):** Two pill buttons with `gap-3`:\n  - \"Start For Free\": background `#7342E2`, white text, `text-sm font-semibold px-5 py-2.5 rounded-full`, hover shadow, active scale-95.\n  - \"Sign In\": background `#F2F2EE`, text `var(--color-text)`, same sizing/rounding.\n- **Mobile (`md:hidden`):** Hamburger button using Lucide `Menu` icon (24px). Toggles to `X` icon when open.\n\n---\n\n### Mobile Menu (slide-in sheet)\n\nUses Framer Motion `AnimatePresence`. Two layers:\n\n1. **Backdrop:** Fixed overlay, `rgba(25,40,55,0.35)` background, `backdrop-blur(4px)`. Fades in/out over 0.3s. Clicking dismisses the menu.\n\n2. **Sheet:** Fixed, right-aligned, `width: min(88vw, 360px)`, `height: 100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`. Slides in from right with custom cubic bezier `[0.22, 1, 0.36, 1]` over 0.45s; exits with `[0.55, 0, 1, 0.45]` over 0.35s.\n\n   Contents:\n   - **Header:** Logo + circular close button (40x40, background `rgba(25,40,55,0.1)`, X icon 20px), with `whileTap={{ scale: 0.9 }}`.\n   - **Divider:** 1px line, `rgba(25,40,55,0.12)`, margin `0 24px`.\n   - **Nav links:** Each link staggers in from right (x: 24 to 0, delay `0.18 + i * 0.07`, duration 0.4s). Font size `1.1rem`, rounded-xl, hover `bg-black/10`.\n   - **CTA buttons:** Same \"Start For Free\" (`#7342E2`) and \"Sign In\" (`#F2F2EE`) as desktop, full-width, `py-3.5 rounded-full`, font size `0.95rem`.\n\n---\n\n### Hero Content\n\n- Centered container, max-width `1280px`, `relative z-10`.\n- Padding top: `clamp(40px, 8vw, 72px)`, bottom `48px`.\n- Inner content wrapper: max-width `660px`, centered.\n\n**Heading (`<h1>`):**\n- Font: `var(--font-heading)`.\n- Size: `clamp(1.65rem, 5vw, 3rem)`.\n- Line-height: `1.05`, letter-spacing: `-0.01em`.\n- Color: `var(--color-text)`.\n- Text-align: center.\n- Two lines:\n  - Line 1 (nowrap): `Lock` [Zap icon 24px] `Down Your` [LockKeyhole icon 24px] `Passwords`\n  - Line 2: `with Ironclad Security` [Fingerprint icon 24px]\n- All inline icons: color `#192837`, `display: inline`, `verticalAlign: middle`, `position: relative`, `top: -2px`, margin `0 4px` (Fingerprint has `marginLeft: 6px` only).\n- Animates: fade-up from `y: 28`, `opacity: 0`, duration 0.6s, ease `[0.22, 1, 0.36, 1]`, delay `0 * 0.15`.\n\n**Subtext (`<p>`):**\n- Font: `var(--font-body)`.\n- Size: `clamp(0.9rem, 2.5vw, 1.1rem)`.\n- Color: `var(--color-text)` at `opacity: 0.8`.\n- Max-width: `560px`, line-height `1.65`, text-align center.\n- Copy: \"Zero stress, total control. Unbreakable storage, one-tap access, and pro-grade tools for your non-stop world.\"\n- Animates: same fade-up, delay `1 * 0.15`.\n\n**CTA Button:**\n- Pill button (`borderRadius: 50px`), background `#7342E2`, white text.\n- Size: `clamp(0.9rem, 2vw, 1rem)`, padding `17px 24px`, min-width `210px`.\n- Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`.\n- Flexbox with `justify-between`, gap `32px`.\n- Label: \"Get It Free\" with `ArrowRightCircle` icon (20px) on right.\n- Hover: `scale: 1.04, brightness(1.1)`. Tap: `scale: 0.96`.\n- Animates: same fade-up, delay `2 * 0.15`.\n\n---\n\n### Animation System (Framer Motion variants)\n\nAll hero elements use a shared `fadeUp` variant:\n```\nhidden: { opacity: 0, y: 28 }\nvisible: (i) => ({ opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } })\n```\n\n---\n\n### Dependencies\n\n- `react`, `react-dom` (v18)\n- `framer-motion`\n- `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X)\n- Tailwind CSS 3 with default config, no custom theme extensions\n- Vite + TypeScript","url":"/prompts/portal"}},{"id":"place-saver","object":"prompt","title":"Place Saver","summary":"A preview-led travel prompt for generating a polished AI-built interface.","category":"Travel","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/perplxmobile.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Build a single-page HTML showcase displaying two iOS device frames (370x790px each) side by side on a neutral `#F4F4F4` stage. The stage auto-scales to fit the viewport using JS. Both phones have a Dynamic Island, status bar (time \"11:11\", signal/wifi/battery icons in white SVG), and a home indicator bar. Animations are gated behind video `loadeddata` events + font loading, with a 5s safety timeout.**\n\n---\n\n### Fonts\n\n1. **ITC Garamond Std Narrow** (self-hosted from Cloudinary):\n   - Light (300): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-LtNarrow_i2zcip.woff2` / `.woff` variant `ITCGaramondStd-LtNarrow_soc5vc.woff`\n   - Book (400): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrow_xjfoc0.woff2` / `.woff` variant `ITCGaramondStd-BkNarrow_wfoxm1.woff`\n   - Book Italic (400 italic): `https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrowIta_hiy9ld.woff2` / `.woff` variant `ITCGaramondStd-BkNarrowIta_rlarxo.woff`\n\n2. **Google Fonts**: `Playfair Display` (400, 500, 600 + italic) and `Inter` (400, 500, 600, 700)\n\n---\n\n### Screen 1 -- \"The place for all your places\" (Light device frame)\n\n**Background**: Dark (#02040c). Uses a native 470x1008 design scaled down to 370x790 via `transform: scale(0.787234)` with `transform-origin: top left`.\n\n**Video background (hero)**:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_114906_ad7cee37-9e56-434f-99bc-92d5bdc4f9fe.mp4\n```\n- `autoplay loop muted playsinline`, `object-fit: cover`, `object-position: center 48%`, covers entire frame, z-index 0.\n\n**Hero fade overlay**: Bottom 46% of the frame, gradient from `rgba(2,4,12,0)` to `rgba(2,4,12,.35)` at 46% to `rgba(2,4,12,.72)` at 100%. z-index 1.\n\n**Logo** (centered, top 74px):\n```\nhttps://polo-pecan-73837341.figma.site/_assets/v11/b1ddc82509144261f1999a0c4d92be5ce6689c0f.png\n```\n- Width 118px, `filter: drop-shadow(0 0 7px rgba(190,215,255,.28))`. z-index 4.\n\n**Title** (top 618px, centered, z-index 4):\n- Font: ITC Garamond Std Narrow, weight 300, 66px, line-height 68px, letter-spacing 0.2px\n- Text: `The place for all` then line break, then `your places` in italic (weight 400)\n- Text shadow: `0 0 34px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.35)`\n- The italic \"your places\" has an extra glow: `0 0 10px rgba(255,255,255,.6), 0 0 20px rgba(255,235,190,.5), 0 0 40px rgba(255,210,140,.32)`\n\n**Subtitle** (top 787px, centered, z-index 4):\n- Font: Inter, 16.5px, weight 400, line-height 26px, color `rgba(255,255,255,.52)`\n- Text: \"Save, Organize and Share\\nyour favorite places\"\n\n**Button** (top 874px, left 32px, 406x55px, z-index 4):\n- White background, border-radius 28px, box-shadow `0 6px 26px rgba(0,0,0,.28)`\n- Apple logo SVG (18x21, fill #1a1a1a) + text \"Continue with Apple\"\n- Font: Helvetica Neue, 18px, weight 500, -webkit-text-stroke 0.6px #1a1a1a\n\n**Terms** (top 950px, centered, z-index 4):\n- Font: 12px, weight 400, color `rgba(255,255,255,.42)`\n- Text: \"By continuing, you agree to **Terms of Use**\" (bold text is `rgba(255,255,255,.82)`, weight 400)\n\n---\n\n### Screen 2 -- \"Unlock Pro\" (Dark device frame)\n\n**Background**: Dark (#14151d).\n\n**Video background**:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_115050_a1ba47d0-aedf-413c-9dea-14509599d3dd.mp4\n```\n- `autoplay loop muted playsinline`, positioned `left: 0; top: -30%`, 370x790px, `object-fit: cover`, z-index 0.\n\n**Background fade** (full overlay, z-index 1):\n```css\nlinear-gradient(to bottom,\n  rgba(20,21,29,0) 0%, rgba(20,21,29,0) 40%,\n  rgba(20,21,29,0.55) 55%, rgba(20,21,29,0.92) 66%,\n  #14151d 74%, #14151d 100%);\n```\n\n**Heading** (left 28px, top 386px):\n- Font: ITC Garamond Std Narrow, weight 500, 26px, line-height 1, color white\n- Letter-spacing 0.2px, text-shadow `0 0 18px rgba(120,180,220,0.35)`\n- Text: \"Unlock Pro:\"\n\n**Divider** (left 28px, top 418px, 265x1px):\n- `linear-gradient(to right, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 100%)`\n\n**Feature list** (left 28px, top 429px, width 314px):\nEach row is 24px tall with a 22px-wide icon area + text (13.5px, weight 400, white, 4px left margin).\n\nIcons are all SVG, 19x19 (or 20x20 for infinity), stroke #fff, stroke-width 1.7, no fill:\n\n1. **Layers icon** (paths: `M12 2 2 7l10 5 10-5-10-5Z` / `M2 12l10 5 10-5` / `M2 17l10 5 10-5`) -- \"Create private Guides\"\n2. **Phone icon** (rect 6,2.5 12x19 rx2.5 + line 10.5,18.5 to 13.5,18.5) -- \"Import from social media\"\n3. **Infinity icon** (path: `M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.988-8-13.083-8-5.096 0-5.096 8 0 8 5.095 0 7.988-8 13.083-8z`) -- \"Unlimited Guides\"\n4. **Sparkle icon** (path: `M12 3c.4 3.6 1.4 4.6 5 5-3.6.4-4.6 1.4-5 5-.4-3.6-1.4-4.6-5-5 3.6-.4 4.6-1.4 5-5Z`) -- \"AI search\"\n5. **People icon** (circle cx8.5 cy8 r3 + path for body + second person outline) -- \"Collaborate with friends\"\n\n**Pricing cards** (left 28px, top 561px, 314x123px):\n\n- **Monthly card** (left 0, 144x123px, border-radius 14px):\n  - Background image: `https://polo-pecan-73837341.figma.site/_assets/v11/ef4533e6536f2495088e56e0f98036b5ff15446d.png` (cover, centered)\n  - Border: 1px solid `rgba(255,255,255,0.11)`\n  - Inner padding: 14px 14px 15px 15px\n  - \"Monthly\" label (13px, weight 400), \"$20\" price (19px, weight 500, margin-top 6px, letter-spacing 0.3px), \"Billed Monthly\" at bottom-left (12px)\n  - All text white with `text-shadow: 0 1px 6px rgba(0,0,0,0.35)`\n\n- **Yearly card** (left 154px, 160x123px, border-radius 14px):\n  - Background: #1e212a, border: 1px solid `rgba(255,255,255,0.11)`\n  - \"Yearly\" label + \"Billed Yearly\" in `rgba(255,255,255,0.50)`\n  - \"$200\" price in `rgba(255,255,255,0.62)`\n  - **Save badge** (left 15px, top 66px): inline-flex pill, padding 5px 8px, border-radius 11px, background #4d5057, text \"Save $40.00\" (10.5px, weight 600, color `rgba(255,255,255,0.65)`, letter-spacing 0.2px)\n\n**Subscribe button** (left 28px, top 709px, 314x50px):\n- White background, border-radius 26px\n- \"Subscribe\" text: Helvetica Neue, 16px, weight 500, color #0c0c0e, -webkit-text-stroke 0.4px\n- Right chevron SVG: 9x15, stroke #0c0c0e, stroke-width 2, path `M1.5 1.5 7 7.5 1.5 13.5`\n\n---\n\n### iOS Device Frame (reusable for both)\n\n- Width: 370px, Height: 790px, Border-radius: 48px\n- Light frame: background `#F2F2F7`; Dark frame: background `#000`\n- Box-shadow: `0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)`\n- Dynamic Island: 126x37px, border-radius 24px, black, centered at top 11px\n- Status bar time: SF Pro weight 590, 17px, white\n- Status bar icons: signal bars (4 rects), WiFi (3 arcs + dot), battery (rect + fill + nub) -- all white SVG\n- Home indicator: 139x5px bar, border-radius 100px, `rgba(0,0,0,0.25)` on light / `rgba(255,255,255,0.7)` on dark\n\n---\n\n### Stage Layout\n\n- Gap between phones: 70px\n- Viewport padding: 40px\n- Background: `#F4F4F4`\n- Auto-scale JS: measures stage vs viewport, applies `transform: scale(min(1, fitRatio) * 0.95)` centered\n\n---\n\n### Entrance Animations\n\nAll paused until `.ze-ready` class is added to viewport (triggered when both videos fire `loadeddata` + fonts ready, or 5s timeout).\n\n**Keyframes used:**\n- `zeBgSettle`: scale 1.12 + opacity 0 to scale 1 + opacity 1 (1.7s, for backgrounds)\n- `zeReveal`: translateY(26px) + scale(0.985) + blur(7px) + opacity 0 to normal (0.9s)\n- `zeDrop`: translateY(-16px) + scale(0.90) + opacity 0 to normal (0.9s)\n- `zeLine`: scaleX(0) to scaleX(1), transform-origin left (0.9s)\n- `zePop`: translateY(8px) + scale(0.78) to bounce scale(1.07) to scale(1) (0.7s, spring easing)\n\n**Easing:** `cubic-bezier(0.16, 1, 0.3, 1)` (expo-out). Save badge uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring).\n\n**Stagger (Screen 1):**\n- Hero bg: 0s delay\n- Logo (zeDrop): 0.45s\n- Title (zeReveal): 0.62s\n- Subtitle: 0.78s\n- Button: 0.94s\n- Terms: 1.06s\n\n**Stagger (Screen 2):**\n- Video bg (zeBgSettle): 0.12s delay\n- Heading (zeReveal): 0.58s\n- Divider (zeLine): 0.72s\n- Row 1-5 (zeReveal): 0.80s, 0.88s, 0.96s, 1.04s, 1.12s\n- Monthly card: 1.22s\n- Yearly card: 1.30s\n- Subscribe button: 1.42s\n- Save badge (zePop): 1.55s\n\n**Reduced motion:** All animations disabled via `@media (prefers-reduced-motion: reduce)`.\n\n-","url":"/prompts/place-saver"}},{"id":"travel-journal","object":"prompt","title":"Travel Journal","summary":"A preview-led travel prompt for generating a polished AI-built interface.","category":"Travel","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/mobile%20apps/balitravel.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a mobile travel app UI mockup displayed inside a realistic iPhone-style phone frame, centered on a white webpage. Tech stack: React + TypeScript, Tailwind CSS, Lucide React icons, Vite. Font: Google Fonts \"Inter\" (weights 300-900).\n\n---\n\n**PAGE WRAPPER:**\n\nFull viewport (`h-screen w-screen`), solid white background, flexbox centered, overflow hidden.\n\n---\n\n**PHONE FRAME:**\n\n- Dimensions: 375px x 780px\n- Background: `#0a0a0c`\n- Border-radius: 52px\n- Overflow: hidden\n- Box-shadow (layered bezel effect):\n  ```\n  inset 0 0 0 2px rgba(255, 255, 255, 0.08),\n  0 0 0 1px rgba(0, 0, 0, 0.6),\n  0 0 0 10px #1a1a1e,\n  0 0 0 11px rgba(255, 255, 255, 0.06),\n  0 0 60px rgba(0, 0, 0, 0.5)\n  ```\n\n**Dynamic Island notch:** Absolute, top-0, centered horizontally, 120px wide, 28px tall, solid black, `rounded-b-2xl`, z-50.\n\n---\n\n**HEADER (absolute, top):**\n\n- Z-index: 30\n- `backdrop-filter: blur(12px)` with `background-color: rgba(10, 10, 12, 0.75)`\n- Padding: `px-6 pt-14 pb-4`\n- Left side: Button with \"Asia\" text (text-lg, font-semibold, white) + ChevronDown icon (size 18, text-white/70)\n- Right side: Calendar icon button (size 22, text-white/70)\n\n---\n\n**SCROLLABLE CONTENT:**\n\n- `overflow-y-auto` with hidden scrollbar\n- Padding: `px-6 pt-28 pb-24`\n- Vertical spacing: `space-y-4` (16px gap)\n\n---\n\n**DESTINATION CARDS (4 total):**\n\nEach card:\n- Full width, height 200px, rounded-2xl, overflow hidden, position relative\n- Full-bleed background image (`absolute inset-0, object-cover`)\n- Gradient overlay: `bg-gradient-to-t from-black/20 to-transparent`\n- **Top-left:** liquid-glass pill (`rounded-full px-3 py-1`) with \"{N} moments\" text (text-white/90, text-xs, font-normal)\n- **Top-right:** liquid-glass circle (w-8 h-8, rounded-full) with MoreHorizontal icon (size 16, text-white/80)\n- **Bottom:** Destination name in 96px bold font, centered horizontally, clipped in an 80px tall container with `overflow: hidden`. Color: `rgba(255, 255, 255, 0.55)`, tracking-tight, leading-none, margin-top 2px\n\n**Card data with exact image URLs:**\n\n1. **Tokyo** - 23 moments\n   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101902_e8f0f37b-18b7-4c14-bb5c-99f0724d2646.png&w=1280&q=85`\n\n2. **Seoul** - 18 moments\n   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101935_4b17f250-8ddb-4ff2-b63d-dfd3497d4428.png&w=1280&q=85`\n\n3. **Bali** - 29 moments\n   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_101958_7116d6bf-fd6f-496f-b3cf-007688cd5123.png&w=1280&q=85`\n\n4. **Rome** - 15 moments\n   `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143008_72ee7299-04a8-474c-ae73-220d45b24a20.png&w=1280&q=85`\n\n---\n\n**FLOATING BOTTOM NAV BAR:**\n\n- Absolute, bottom-6, centered horizontally, z-30\n- liquid-glass pill (`rounded-full, flex, gap-6, px-6 py-2`)\n- 3 nav items (flex-col, items-center, gap-0.5):\n  - \"Feed\" + Home icon (size 20) -- inactive (`text-white/50`)\n  - \"Account\" + User icon (size 20) -- inactive (`text-white/50`)\n  - \"Trips\" + FileText icon (size 20) -- active (`text-white`)\n- Label style: `text-[10px] font-medium`\n\n---\n\n**LIQUID-GLASS CSS:**\n\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n---\n\n**STAGGERED ENTRANCE ANIMATION:**\n\nEach card starts at `opacity: 0` and `transform: translateY(24px)`. On component mount, a `setTimeout` triggers a state change that transitions to `opacity: 1` and `translateY(0)`. Transition: `transition-all duration-700 ease-out`. Stagger delay: first card 150ms, each subsequent +120ms (150, 270, 390, 510ms). Implemented with React `useState` + `useEffect`.\n\n---\n\n**SCROLLBAR HIDING:**\n\n```css\n.scrollbar-hide::-webkit-scrollbar { display: none; }\n.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }\n```\n\n---\n\n**GLOBAL:**\n\n```css\n* { font-family: 'Inter', sans-serif; }\n```\n\nLoad in HTML head:\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" />\n```","url":"/prompts/travel-journal"}},{"id":"celestial-renewal","object":"prompt","title":"Celestial Renewal","summary":"A preview-led wellness prompt for generating a polished AI-built interface.","category":"Wellness","subcategory":"Health & wellness","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_015443_a695a5b2-dfbf-461e-acc6-a3f5e5d87e86.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/uploaded/planetscrollArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called \"Serene\". Use TypeScript.**\n\n---\n\n### Fonts (loaded via Google Fonts in index.html)\n\nLoad these three font families from Google Fonts:\n- **Dancing Script** (weights: 400, 500, 600, 700) -- used for the brand logo\n- **Instrument Serif** (italic: 0, 1) -- used for the hero heading and the quote text\n- **Inter** (weights: 300, 400, 500, 600, 700, 800, 900) -- used for body text, navbar links, and buttons\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" />\n```\n\n---\n\n### Global CSS (index.css)\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Inter', sans-serif;\n  background: #0a0a0c;\n  overflow-x: hidden;\n}\n\n.font-inter {\n  font-family: 'Inter', sans-serif;\n}\n\n.font-instrument {\n  font-family: 'Instrument Serif', serif;\n}\n\n.scrollbar-hide::-webkit-scrollbar {\n  display: none;\n}\n.scrollbar-hide {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n.text-glow {\n  text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.2), 0 0 120px rgba(255, 255, 255, 0.1);\n}\n\n.button-glow {\n  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1);\n}\n```\n\n---\n\n### App Layout (App.tsx)\n\nThe wrapper div has `bg-[#0a0608]`. It renders `<Hero />` followed by `<QuoteSection />`.\n\n---\n\n### SECTION 1: Hero\n\nA full-viewport (`h-screen`) section with:\n\n1. **Background video** -- autoplays, muted, loops, playsInline, covers the full section with `object-cover`:\n   ```\n   https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4\n   ```\n\n2. **Dark overlay** -- `absolute inset-0 bg-black/20`\n\n3. **Fixed Navbar** -- `fixed top-0 left-0 right-0 z-50`, flex row, space-between, `px-6 md:px-12 py-5`:\n   - **Left**: Brand name \"Serene\" in Dancing Script cursive, white, `text-2xl md:text-3xl`\n   - **Center (desktop only, hidden on mobile)**: Navigation links -- \"About\", \"Services\", \"Journal\", \"Contact\" -- `text-white/80 hover:text-white text-sm tracking-wide`, spaced `gap-12`\n   - **Right (desktop)**: White pill button \"Book a consultation\"\n   - **Right (mobile)**: Hamburger icon (3 lines, animated to X on open). Uses cubic-bezier(0.22,1,0.36,1) easing. On open: top line rotates 45deg + translates down 9px; middle line fades/scales to 0; bottom line rotates -45deg + translates up 9px.\n   - **Mobile menu**: Slide-in panel from right, `w-[85%] max-w-[340px]`, `bg-[#0a0608]/95 backdrop-blur-xl border-l border-white/10`. Links stagger-animate in (opacity + translateX, 75ms delay between each, starting at 150ms). Button at bottom with 450ms delay.\n\n4. **Center content** -- absolutely positioned, flex column, centered, with `-mt-[120px]` to shift up:\n   - **Heading**: `font-instrument text-white text-[36px] md:text-7xl lg:text-[110px] leading-[0.9] tracking-tight text-center text-glow` -- text: \"Gentle touch. Radiant presence.\"\n   - **Subtext**: `text-white/70 text-sm md:text-base text-center mt-5 md:mt-7 max-w-xl` -- text: \"Expert beauty and holistic wellness, delivered with warmth and intention.\"\n   - **CTA Button**: White pill button \"Begin your renewal\", `mt-6 md:mt-9`\n\n5. **Sound indicator (desktop only)** -- bottom-left corner (`bottom-8 left-8`), a 40px circle with `border border-white/20` containing a small horizontal bar, next to two lines of text: \"Experience\" / \"with sound\" in `text-white/60 text-xs`\n\n**Button component**: `bg-white text-black px-8 py-3.5 rounded-full font-medium text-sm tracking-wide hover:bg-white/90 transition-all duration-300 button-glow`\n\n---\n\n### SECTION 2: Quote Section (with parallax scroll animations)\n\nA full-viewport (`h-screen`) section with:\n\n**Background**: CSS linear-gradient top to bottom:\n```\n#010A17 0% -> #0A4267 30% -> #20658E 60% -> #6BADC4 100%\n```\n\n**Animated layers (requestAnimationFrame-based parallax with lerp smoothing):**\n\nThe animation uses a `progress` value (0 to 1) based on how far the section has scrolled through the viewport:\n```\nprogress = clamp(0, 1, (windowHeight - rect.top) / (windowHeight + rect.height))\n```\n\n1. **Rainbow image** -- full-width, positioned `absolute inset-x-0 top-0 z-30`. Parallax: moves vertically from +120px to -160px based on scroll progress. Lerp factor: 0.06.\n   ```\n   https://soft-zoom-63098134.figma.site/_assets/v11/8d520a7515d06cbfc403d0125e3d05b1a7ccd29c.png\n   ```\n\n2. **Left cloud** -- `absolute left-0 bottom-[10%] z-10`, hidden on mobile (`hidden sm:block`). Width: `w-[500px] md:w-[650px]`. Has `marginLeft: '-50%'` to let it overflow left. Slides in from -200px on X when in view (progress 0.12-0.92), slides back out when not. Also drifts up (cloudY = progress * -50). Opacity tied to X distance. Lerp factor: 0.04.\n   ```\n   https://soft-zoom-63098134.figma.site/_assets/v11/0d6dfd3f90b930f21726f2ed56a3320d79b7a797.png\n   ```\n\n3. **Right cloud** -- same image as left but `scale-x-[-1]` (flipped), `absolute right-0 bottom-[15%] z-10`. Has `marginRight: '-75%'`. Slides in from +200px. Same lerp/timing as left cloud.\n\n4. **Quote content** -- centered, `z-20`, `max-w-4xl`:\n   - **Quote text**: `font-instrument text-white text-xl sm:text-2xl md:text-4xl lg:text-[42px] leading-[1.45] md:leading-[1.5]` -- text: \"Serene was founded on a belief in beauty that honors your nature. We pursue refined outcomes, considered approaches, and lasting vitality. We spend time learning what matters to you before deciding what serves you best. No rushing, no excess -- just support that lets you feel radiant.\" (wrapped in curly quotes)\n   - **Attribution**: `mt-6 md:mt-8 text-white/80 text-sm md:text-base tracking-wide` -- text: \"Dr. Mia Callahan -- Founder\"\n\n**Key animation implementation detail**: All transforms use `translate3d` for GPU acceleration with `will-change-transform`. Initial cloud state is `opacity: 0` and translated off-screen. The lerp function smoothly interpolates current values toward targets each frame: `current + (target - current) * factor`.\n\n---\n\n### Tailwind Config\n\nDefault Tailwind config with no extensions -- all custom styling handled via CSS utility classes in index.css.","url":"/prompts/celestial-renewal"}},{"id":"ai-workflow-agents","object":"prompt","title":"AI Workflow Agents","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_014544_2e2e15ee-0037-456c-b0d1-1c174ef0bc27.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/naturezoompuirple.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page hero landing page for a product called \"Axon\" — a platform that deploys digital workers for mundane workflows. The page is a full-viewport hero section with a looping background video and overlaid content.\n\n**Fonts:**\n- Load Google Fonts: `Instrument Serif` (regular + italic) and `Inter` (weights 400, 500, 600).\n- Body font: `Inter`, color `#1B133C`.\n- Heading font: `Instrument Serif`.\n\n**Page structure (single full-screen section, 100vh):**\n\n1. **Navigation bar** — centered at the top with `pt-4 md:pt-6` padding. A horizontal nav pill with `bg-white/70 backdrop-blur-md rounded-xl px-4 md:px-6 py-3 shadow-sm`. Contains:\n   - A custom SVG logo (two geometric arrow/chevron shapes in `#1B133C`, 24x24px). The SVG paths are: `M 256 256 L 128 256 L 0 128 L 128 128 Z` and `M 256 128 L 128 128 L 0 0 L 128 0 Z` inside a 256x256 viewBox.\n   - Navigation links (hidden on mobile, shown `sm:` and up): \"Features\", \"Plans\", \"Security\", \"About\" — styled as `text-sm font-medium text-[#1B133C]/80` with hover transition to full opacity.\n\n2. **Hero content** — centered below nav with `mt-8 md:mt-16`, stacked vertically:\n   - **Badge**: `mb-6`, inline-flex pill with `rounded-xl border border-[#1B133C]/10 bg-white/70 backdrop-blur-sm px-4 py-2 text-sm font-medium`. Contains an orange square icon (`bg-orange-500 rounded w-5 h-5`) with a bold white \"Y\" letter, followed by text \"Funded by Y Combinator\".\n   - **Heading**: `font-['Instrument_Serif'] text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight text-[#1B133C] max-w-4xl`. Two lines:\n     - \"Deploy digital workers\"\n     - \"for mundane workflows\"\n   - **Subtitle**: `mt-5 sm:mt-6 max-w-3xl text-xs sm:text-sm md:text-base leading-relaxed text-[#1B133C]/70`. Text: \"Eliminate your tedious browser work and 10x your team's capacity. Put intelligent agents on every routine process so you grow faster and deliver more for clients — effortlessly.\"\n   - **CTA button**: `mt-7 sm:mt-8`, styled as `rounded-xl bg-[#FEFEFE] px-6 sm:px-8 py-3 sm:py-3.5 text-sm font-semibold text-[#1B133C] shadow-[0px_4px_12px_rgba(0,0,0,0.15)]` with hover shadow `shadow-[0px_6px_16px_rgba(0,0,0,0.2)]` and `transition-all duration-300`. Text: \"Get Early Access\".\n\n3. **Background video** — absolutely positioned (`absolute inset-0 z-0`) behind all content. The video element uses:\n   - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260714_113715_c7e0daa0-8bdd-4486-a2da-040901f8f0ea.mp4`\n   - Attributes: `autoPlay muted loop playsInline`\n   - Styling: `w-full h-[130%] object-cover object-top` — full width, 130% height so it overflows vertically, with the focal point anchored to the top.\n\n**CSS reset in index.css:**\n```\nbody { font-family: 'Inter', sans-serif; color: #1B133C; }\n```\n\n**Key details:**\n- The hero section uses `relative h-screen w-full overflow-hidden flex flex-col`.\n- All content elements are `relative z-10` to sit above the video (`z-0`).\n- No other sections or pages — just this single hero.\n- Color palette: deep navy `#1B133C` for text, white/translucent for glass elements, orange-500 for the Y Combinator badge accent.\n- Page title: \"Axon — Digital Workers for Mundane Workflows\"","url":"/prompts/ai-workflow-agents"}},{"id":"f1-racing-hub","object":"prompt","title":"F1 Racing Hub","summary":"A preview-led statistics app prompt for generating a polished AI-built interface.","category":"Statistics App","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260720_023932_018ea051-5b45-4c65-bacf-331ff6923794.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/F1%20Racing%20HubArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"# Recreate This Page Exactly — Lewis Hamilton / Silverstone F1 Hero\n\n## Tech stack\n- React + TypeScript + Vite\n- Tailwind CSS (config extends `fontFamily.sans` = `['\"Albert Sans\"', 'sans-serif']`, plus custom `f1.dark = rgb(41,41,41)` and `f1.yellow = rgb(237,180,11)`)\n- lucide-react for icons (X, Menu used)\n- Google Font: **Albert Sans** weights 300;400;500;600;700;800, loaded in index.html via `https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800&display=swap`\n- Body background: `#0a0e1c`, antialiased\n## Overall layout\nA full-screen hero section (`relative w-full overflow-hidden font-sans`) with a page background image and dark overlay, then two responsive layouts:\n\n**Page background image (used for both page and inside phone screens):**\n```\nhttps://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260709_152331_bd312d1a-1f20-46b9-9b68-12bcdcf6d53e.png&w=1280&q=85\n```\n- Page: `<img>` absolute inset-0 w-full h-full object-cover z-0, then `<div className=\"absolute inset-0 bg-black/70 z-[1]\" />`\n\n**Desktop (md+):** `hidden md:flex relative z-[2] w-full h-screen items-center justify-center py-6` → a flex row `items-end justify-center gap-[2vw]` containing three phone mockups, each wrapped in `animate-fade-slide-up` with delays 300/500/700. Middle phone has `-mb-6`.\n\n**Mobile (below md):** `md:hidden relative z-[2] flex flex-col items-center gap-[50px] py-[20px] px-[20px]` → same three phones, delays 300/500/700.\n\n## PhoneMockup component\nA reusable iPhone-style frame:\n- Outer: `flex flex-col items-center`\n- Frame: `relative rounded-[clamp(30px,4vw,54px)] bg-black p-[clamp(6px,1vw,12px)] shadow-2xl shadow-black/60`, with inner ring `absolute inset-0 rounded-[clamp(30px,4vw,54px)] ring-1 ring-white/15`\n- Screen: `relative w-full h-full rounded-[clamp(24px,3.2vw,44px)] overflow-hidden bg-[#0a0e1c]`\n- Dynamic Island: `absolute top-[3%] left-1/2 -translate-x-1/2 w-[30%] h-[4%] bg-black rounded-full z-50`\n- Content scaling: inner div sized `390px × contentH` (contentH measured from ResizeObserver), scaled by `scale = screenW / 390`, transform-origin top-left\n- Side buttons (neutral-700): left side three buttons at top 19%/26%/35.5% (heights 4.5%/7.3%/7.3%), right side one at 30.8% height 11.4%\n\n**Phone frame sizing (CSS):**\n- `.phone-frame { aspect-ratio: 390/844; width: clamp(200px, 75vw, 340px); }`\n- `@media (min-width:768px) { width: min(25vw, 42vh); }`\n- `@media (min-width:1280px) { width: min(28vw, 48vh, 430px); }`\n\n## Phone navigation (shared, in every screen)\nTop nav `absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-5 h-14 mt-[20px]`:\n- Left: F1 logo `<img src=\"https://framerusercontent.com/images/NZPITJ6zDBvxVT7rc1NH2sOU.png\" className=\"h-7 w-auto object-contain\" />`\n- Right: two 14×14 (h-14 w-14) square buttons, no rounding:\n  - White button with profile icon `https://framerusercontent.com/images/JIl4japgQlMAQRvh1gDHszRvkUY.png?width=92&height=92` (w-5 h-5)\n  - Glass button: `background: rgba(255,255,255,0.15); backdropFilter: blur(12px)` containing two white bars (21px and 10px wide, 2px tall, rounded-full, 5px gap)\n\n**Menu overlay (z-50, full screen):** `linear-gradient(160deg, #1a0000 0%, #8B0000 40%, #E10600 100%)`, fade transition 400ms. Links: Biography, Statistics, Career — text-3xl font-bold tracking-tight, stagger slide-in (translateX -20px→0, delay 0.1 + i*0.08s, cubic-bezier(0.16,1,0.3,1)). Hover color `#EDB40B`. Bottom: white \"Sign in\" button.\n\n## Screen 1 — Lewis Hamilton hero\n`relative w-full h-full flex flex-col px-5 pb-0 pt-[76px] overflow-hidden`\n- Background: ScreenBackground (BG image + `bg-black/60`)\n- PhoneNav\n- Location block (z-10, mt-4 mb-2, animate-fade-slide-up delay-300): \"United Kingdom\" text-white/60 text-[16px] + UK flag `https://framerusercontent.com/images/pqUTggaeyOivtzDImRzkBRdww.png` (w-6 h-6). Title: text-white font-normal leading-[0.95] tracking-[-0.05em] text-[48px] → \"Silverstone\" / \"England\"\n- **Driver photo container** (z-[5], absolute fill, flex items-end justify-center): \n  - `<img src=\"https://framerusercontent.com/images/m5IyHuJeOQ5P0GOvWx1xv0IR9Y.png\" className=\"w-[calc(140%-5px)] max-w-none h-auto object-contain animate-scale-in delay-500 origin-bottom\" />`\n  - **Blur overlay** (the key glass effect): `absolute bottom-0 left-0 right-0 h-[50%] pointer-events-none` with inline style:\n    ```\n    backdropFilter: 'blur(6px)',\n    WebkitBackdropFilter: 'blur(6px)',\n    mask: 'linear-gradient(to bottom, transparent 0%, black 50%)',\n    WebkitMask: 'linear-gradient(to bottom, transparent 0%, black 50%)'\n    ```\n- Bottom content (z-10, absolute bottom-0 px-5 pb-5):\n  - Driver avatar selector strip `https://framerusercontent.com/images/dAAdqktZVxBDjPKk97YCjZjsE.png` (h-12 w-auto, animate-fade-slide-up delay-700, mb-3)\n  - Name: text-white font-semibold leading-[0.82] tracking-[-0.05em] text-[64px] animate-speed-reveal delay-800 → \"Lewis\" / \"Hamilton\"\n\n## Screen 2 — Silverstone circuit + stats\n`relative w-full h-full flex flex-col px-5 pb-8 pt-[76px] overflow-hidden`\n- Background + PhoneNav\n- Location block (z-10, mb-4, animate-fade-slide-up delay-400): same UK/flag/Silverstone England as Screen 1\n- Circuit image (z-10, flex-1 flex items-center justify-center -mx-5 px-2 min-h-0, animate-scale-in delay-600): `https://framerusercontent.com/images/raKAG2bJP9xeqi118VMniPLvbAA.png` w-full h-full object-contain\n- Stats block (z-10, mt-auto pt-4, animate-fade-slide-up delay-800): \"Season Points\" label + medal icon `https://framerusercontent.com/images/pIXUcwyAF0xzCIaKjtNLahHpasQ.png` (w-6 h-6). Three count-up numbers, each font-semibold tracking-[-0.06em] fontSize 110px lineHeight 0.72:\n  - 227 (delay 800) — gradient text `linear-gradient(to bottom, white 0%, rgba(255,255,255,0.4) 50%, transparent 85%)` via bg-clip-text text-transparent\n  - 374 (delay 1000) — same gradient\n  - 4987 (delay 1200) — solid color `#EDB40B`\n- Count-up animation: useCountUp hook, cubic ease-out (1-(1-t)³), duration 2200ms, starts after delay, requestAnimationFrame\n\n## Screen 3 — Scuderia Ferrari team\n`relative w-full h-full overflow-hidden`\n- Background + PhoneNav\n- Team title (absolute top-[100px] left-5 z-10, animate-fade-slide-up delay-300): \"Team Name\" text-white/60 text-[15px] + Ferrari icon `https://framerusercontent.com/images/sUDhzMuxKIOvqjSH5U1fn0QSXqI.png` (w-5 h-5). Title text-white font-normal leading-[0.83] text-[52px] letterSpacing -0.08em → \"Scuderia\" / \"Ferrari\"\n- Chassis (absolute top-[245px] left-5 z-10, animate-fade-slide-up delay-500): chassis icon `https://framerusercontent.com/images/zIA1tYDOAdZo3k6IXX9gBC5FGbY.png` (w-5 h-5) + \"Chassis\" label. Number text-[#EDB40B] font-semibold leading-[0.79] text-[120px] letterSpacing -0.08em → \"SF-26\"\n- Car image (absolute top-[390px] left-3 right-3 z-10 w-[calc(100%-24px)] h-auto object-contain animate-fade-slide-left delay-700): `https://framerusercontent.com/images/MzKCSYB4uVt9psQq4jRwQNRDjc.png`\n- Bottom driver cards (absolute bottom-0 flex, animate-fade-slide-up delay-900): two side-by-side cards, each w-1/2 h-200px rounded-t-2xl p-3, glass style:\n  ```\n  background: rgba(20,20,30,0.8),\n  border: 1px solid rgba(255,255,255,0.1),\n  borderBottom: none,\n  backdropFilter: blur(16px)\n  ```\n  - Leclerc card: \"Charles Leclerc\" text-white/60 text-[13px] + profile icon (w-4 h-4 opacity-60), stats image `https://framerusercontent.com/images/MJfqhcmEoIBnfimJNhKqoZpq0.png` (h-5), big number \"16\" text-white font-semibold leading-[0.79] text-[110px] letterSpacing -0.08em\n  - Hamilton card: \"Lewis Hamilton\" + profile icon, stats image `https://framerusercontent.com/images/3EwXxC1QutaGnlNDZMlAN66ZmTU.png` (h-5), big number \"44\"\n\n## Animations (CSS keyframes, all `both` fill-mode)\n- **fadeSlideUp**: opacity 0→1, translateY 30px→0, 0.9s cubic-bezier(0.16,1,0.3,1)\n- **fadeSlideDown**: translateY -20px→0, 0.7s\n- **fadeSlideLeft**: translateX 40px→0, 0.9s\n- **fadeSlideRight**: translateX -40px→0, 0.9s\n- **scaleIn**: opacity 0→1, scale 0.92→1, 1s\n- **fadeIn**: opacity 0→1, 0.8s ease-out\n- **speedReveal** (the name reveal): 0% opacity 0 translateX(-100%) skewX(-8deg) blur(8px) → 60% opacity 1 translateX(4%) skewX(-2deg) blur(0) → 100% translateX(0) skewX(0) blur(0), 0.8s\n- **raceLineLeft**: scaleX 0→1.1→1 from left\n- Delay utilities: delay-100 through delay-1600 (0.1s steps)\n\n## Exact asset URLs (use verbatim)\n- Page/phone background: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260709_152331_bd312d1a-1f20-46b9-9b68-12bcdcf6d53e.png&w=1280&q=85`\n- F1 logo: `https://framerusercontent.com/images/NZPITJ6zDBvxVT7rc1NH2sOU.png`\n- Profile/search icon: `https://framerusercontent.com/images/JIl4japgQlMAQRvh1gDHszRvkUY.png?width=92&height=92`\n- UK flag: `https://framerusercontent.com/images/pqUTggaeyOivtzDImRzkBRdww.png`\n- Lewis Hamilton photo: `https://framerusercontent.com/images/m5IyHuJeOQ5P0GOvWx1xv0IR9Y.png`\n- Driver avatar selector: `https://framerusercontent.com/images/dAAdqktZVxBDjPKk97YCjZjsE.png`\n- Silverstone circuit: `https://framerusercontent.com/images/raKAG2bJP9xeqi118VMniPLvbAA.png`\n- Season points medal: `https://framerusercontent.com/images/pIXUcwyAF0xzCIaKjtNLahHpasQ.png`\n- Ferrari team icon: `https://framerusercontent.com/images/sUDhzMuxKIOvqjSH5U1fn0QSXqI.png`\n- Chassis icon: `https://framerusercontent.com/images/zIA1tYDOAdZo3k6IXX9gBC5FGbY.png`\n- Ferrari SF-26 car: `https://framerusercontent.com/images/MzKCSYB4uVt9psQq4jRwQNRDjc.png`\n- Leclerc stats: `https://framerusercontent.com/images/MJfqhcmEoIBnfimJNhKqoZpq0.png`\n- Hamilton stats: `https://framerusercontent.com/images/3EwXxC1QutaGnlNDZMlAN66ZmTU.png`\n\n## Color tokens\n- Background dark: `#0a0e1c`\n- F1 red (menu gradient): `#E10600`, dark red `#8B0000`, near-black `#1a0000`\n- Gold/yellow accent: `#EDB40B`\n- Glass card: `rgba(20,20,30,0.8)` + `backdropFilter: blur(16px)` + `border: 1px solid rgba(255,255,255,0.1)`\n- Nav glass button: `rgba(255,255,255,0.15)` + `blur(12px)`\n- Photo bottom blur: `blur(6px)` with vertical mask gradient transparent→black at 50%\n\n## Typography rules\n- Font: Albert Sans throughout\n- Headlines: font-normal or font-semibold, very tight tracking (-0.05em to -0.08em), tight leading (0.72–0.95)\n- Large display numbers: 110–120px, lineHeight 0.72–0.79\n- Labels: text-white/60, 13–16px, font-normal","url":"/prompts/f1-racing-hub"}},{"id":"ai-workflow","object":"prompt","title":"AI Workflow Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260721_114043_a70b6aa4-73d7-4b38-9595-baa6a5bad2d3.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(55).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"### Stack\n\n- **Vite** + **React 18** + **TypeScript**\n- **Tailwind CSS 3.4**\n- **lucide-react** for icons (`LogIn`, `UserPlus`, `Play`, `Sparkles`, `Menu`, `X`)\n- No Framer Motion -- all animations are CSS `transition-*` classes\n\n---\n\n### Fonts (loaded in `index.html`)\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" />\n<link href=\"https://db.onlinewebfonts.com/c/6e47ef470dd19698c911332a9b4d1cf4?family=Neue+Haas+Grotesk+Text+Pro\" rel=\"stylesheet\" />\n<link href=\"https://db.onlinewebfonts.com/c/dec0d9b4e22ca588dc20e1e2e09a59b5?family=Neue+Haas+Grotesk+Display+Pro+55+Roman\" rel=\"stylesheet\" />\n```\n\nBody/root font stack (in `index.css`):\n\n```css\nhtml, body, #root {\n  height: 100%;\n  margin: 0;\n  font-family: 'Neue Haas Grotesk Display Pro 55 Roman', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n```\n\n---\n\n### Video URL (CloudFront)\n\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_131941_d136af49-e243-493a-be14-6ff3f24e09e6.mp4\n```\n\n---\n\n### Color Palette\n\n| Token | Hex |\n|-------|-----|\n| Dark green (text, buttons) | `#1f2a1d` |\n| Medium dark green | `#2d3a2a` |\n| Button hover | `#2a3827` |\n| Body text green | `#4b5b47` |\n| Heading primary | `#336443` |\n| Heading accent | `#85AB8B` |\n| Bottom-left text | `#3d5638` |\n| Bottom-left button bg | `#3d5638`, hover `#2d4228` |\n\n---\n\n### Architecture\n\nTwo files:\n\n1. **`BoomerangVideoBg.tsx`** -- captures video frames into canvas, then plays them forward/backward in a seamless boomerang loop at 30fps (960px max capture width).\n2. **`App.tsx`** -- the full hero section.\n\n---\n\n### `BoomerangVideoBg.tsx` (exact)\n\n```tsx\nimport { useEffect, useRef, useState } from 'react';\n\ntype Props = {\n  src: string;\n  className?: string;\n};\n\nexport default function BoomerangVideoBg({ src, className }: Props) {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const displayCanvasRef = useRef<HTMLCanvasElement>(null);\n  const [framesReady, setFramesReady] = useState(false);\n  const framesRef = useRef<HTMLCanvasElement[]>([]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n\n    const frames: HTMLCanvasElement[] = [];\n    let capturing = true;\n    let lastTime = -1;\n    const MAX_WIDTH = 960;\n\n    const captureFrame = () => {\n      if (!capturing || video.readyState < 2) return;\n      if (video.currentTime === lastTime) return;\n      lastTime = video.currentTime;\n\n      const vw = video.videoWidth;\n      const vh = video.videoHeight;\n      if (!vw || !vh) return;\n\n      const scale = Math.min(1, MAX_WIDTH / vw);\n      const w = Math.round(vw * scale);\n      const h = Math.round(vh * scale);\n\n      const canvas = document.createElement('canvas');\n      canvas.width = w;\n      canvas.height = h;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n      ctx.drawImage(video, 0, 0, w, h);\n      frames.push(canvas);\n    };\n\n    type VFCVideo = HTMLVideoElement & {\n      requestVideoFrameCallback?: (cb: () => void) => number;\n    };\n    const vfcVideo = video as VFCVideo;\n    const hasVFC = typeof vfcVideo.requestVideoFrameCallback === 'function';\n\n    let rafId = 0;\n    const rafLoop = () => {\n      captureFrame();\n      if (capturing) rafId = requestAnimationFrame(rafLoop);\n    };\n\n    const vfcLoop = () => {\n      captureFrame();\n      if (capturing && vfcVideo.requestVideoFrameCallback) {\n        vfcVideo.requestVideoFrameCallback(vfcLoop);\n      }\n    };\n\n    const onEnded = () => {\n      capturing = false;\n      if (frames.length > 0) {\n        framesRef.current = frames;\n        setFramesReady(true);\n      }\n    };\n\n    const onLoaded = () => {\n      video.play().catch(() => {});\n      if (hasVFC) {\n        vfcVideo.requestVideoFrameCallback!(vfcLoop);\n      } else {\n        rafId = requestAnimationFrame(rafLoop);\n      }\n    };\n\n    video.addEventListener('loadedmetadata', onLoaded);\n    video.addEventListener('ended', onEnded);\n    if (video.readyState >= 1) onLoaded();\n\n    return () => {\n      capturing = false;\n      cancelAnimationFrame(rafId);\n      video.removeEventListener('loadedmetadata', onLoaded);\n      video.removeEventListener('ended', onEnded);\n    };\n  }, [src]);\n\n  useEffect(() => {\n    if (!framesReady) return;\n    const canvas = displayCanvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n    const frames = framesRef.current;\n    if (frames.length === 0) return;\n\n    const first = frames[0];\n    canvas.width = first.width;\n    canvas.height = first.height;\n\n    let index = 0;\n    let direction = 1;\n    let last = performance.now();\n    const interval = 1000 / 30;\n    let rafId = 0;\n\n    const render = (now: number) => {\n      if (now - last >= interval) {\n        last = now;\n        ctx.drawImage(frames[index], 0, 0);\n        index += direction;\n        if (index >= frames.length - 1) {\n          index = frames.length - 1;\n          direction = -1;\n        } else if (index <= 0) {\n          index = 0;\n          direction = 1;\n        }\n      }\n      rafId = requestAnimationFrame(render);\n    };\n    rafId = requestAnimationFrame(render);\n    return () => cancelAnimationFrame(rafId);\n  }, [framesReady]);\n\n  return (\n    <div className={className ?? 'absolute inset-0 w-full h-full'}>\n      <video\n        ref={videoRef}\n        src={src}\n        className=\"w-full h-full object-cover\"\n        style={{ display: framesReady ? 'none' : 'block' }}\n        muted\n        playsInline\n        preload=\"auto\"\n        crossOrigin=\"anonymous\"\n      />\n      <canvas\n        ref={displayCanvasRef}\n        className=\"w-full h-full object-cover\"\n        style={{ display: framesReady ? 'block' : 'none' }}\n      />\n    </div>\n  );\n}\n```\n\n---\n\n### `App.tsx` (exact)\n\n```tsx\nimport { useState, useEffect } from 'react';\nimport { LogIn, UserPlus, Play, Sparkles, Menu, X } from 'lucide-react';\nimport BoomerangVideoBg from './BoomerangVideoBg';\n\nconst BG_VIDEO =\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_131941_d136af49-e243-493a-be14-6ff3f24e09e6.mp4';\n\nfunction App() {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  useEffect(() => {\n    if (menuOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [menuOpen]);\n\n  const navLinks = [\n    { href: '#mission', label: 'Purpose' },\n    { href: '#how', label: 'The Process' },\n    { href: '#pricing', label: 'Tariffs' },\n  ];\n\n  return (\n    <section className=\"relative w-full min-h-screen sm:h-screen overflow-hidden\">\n      <BoomerangVideoBg src={BG_VIDEO} className=\"absolute inset-0 w-full h-full\" />\n      <nav className=\"absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-4 sm:px-6 md:px-10 py-4 sm:py-6\">\n        <div className=\"flex items-center gap-2 text-[#2d3a2a]\">\n          <span className=\"text-lg sm:text-xl md:text-2xl font-semibold tracking-tight\">\n            LinkFlow<sup className=\"text-[10px] sm:text-xs font-medium\">TM</sup>\n          </span>\n        </div>\n\n        <div className=\"hidden lg:flex items-center gap-1 bg-white/70 backdrop-blur-md rounded-full pl-6 pr-1 py-1 shadow-sm border border-white/60\">\n          {navLinks.map((link, i) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className={`text-sm px-3 py-2 transition-colors ${\n                i === 0 ? 'font-semibold text-[#1f2a1d]' : 'font-medium text-[#4b5b47] hover:text-[#1f2a1d]'\n              }`}\n            >\n              {link.label}\n            </a>\n          ))}\n          <button className=\"ml-2 bg-[#1f2a1d] hover:bg-[#2a3827] text-white text-sm font-medium px-5 py-2.5 rounded-full transition-colors\">\n            Try it Live\n          </button>\n        </div>\n\n        <div className=\"flex items-center gap-3 sm:gap-6 text-[#2d3a2a]\">\n          <a href=\"#signup\" className=\"hidden sm:flex items-center gap-2 text-sm font-medium hover:opacity-80 transition-opacity\">\n            <UserPlus className=\"w-4 h-4\" />\n            Sign Me Up!\n          </a>\n          <a href=\"#login\" className=\"hidden sm:flex items-center gap-2 text-sm font-medium hover:opacity-80 transition-opacity\">\n            <LogIn className=\"w-4 h-4\" />\n            Enter\n          </a>\n          <button\n            onClick={() => setMenuOpen((v) => !v)}\n            className=\"lg:hidden relative flex items-center justify-center w-10 h-10 rounded-full bg-white/70 backdrop-blur-md border border-white/60 text-[#1f2a1d] transition-all duration-300 hover:bg-white/90\"\n            aria-label={menuOpen ? 'Close menu' : 'Open menu'}\n            aria-expanded={menuOpen}\n          >\n            <Menu\n              className={`w-5 h-5 absolute transition-all duration-300 ${\n                menuOpen ? 'opacity-0 rotate-90 scale-50' : 'opacity-100 rotate-0 scale-100'\n              }`}\n            />\n            <X\n              className={`w-5 h-5 absolute transition-all duration-300 ${\n                menuOpen ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-50'\n              }`}\n            />\n          </button>\n        </div>\n      </nav>\n\n      {/* Mobile menu overlay */}\n      <div\n        className={`lg:hidden fixed inset-0 z-20 transition-opacity duration-300 ${\n          menuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'\n        }`}\n        onClick={() => setMenuOpen(false)}\n      >\n        <div className=\"absolute inset-0 bg-[#1f2a1d]/40 backdrop-blur-sm\" />\n      </div>\n\n      {/* Mobile menu drawer */}\n      <div\n        className={`lg:hidden fixed top-0 right-0 bottom-0 z-20 w-[85%] max-w-sm bg-white/95 backdrop-blur-xl shadow-2xl transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${\n          menuOpen ? 'translate-x-0' : 'translate-x-full'\n        }`}\n      >\n        <div className=\"flex flex-col h-full pt-24 px-8 pb-8\">\n          <div className=\"flex flex-col gap-1\">\n            {navLinks.map((link, i) => (\n              <a\n                key={link.href}\n                href={link.href}\n                onClick={() => setMenuOpen(false)}\n                className={`text-2xl font-semibold text-[#1f2a1d] py-4 border-b border-[#1f2a1d]/10 transition-all duration-500 ${\n                  menuOpen ? 'translate-x-0 opacity-100' : 'translate-x-8 opacity-0'\n                }`}\n                style={{ transitionDelay: menuOpen ? `${150 + i * 70}ms` : '0ms' }}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n\n          <div\n            className={`mt-8 flex flex-col gap-4 transition-all duration-500 ${\n              menuOpen ? 'translate-x-0 opacity-100' : 'translate-x-8 opacity-0'\n            }`}\n            style={{ transitionDelay: menuOpen ? '400ms' : '0ms' }}\n          >\n            <a href=\"#signup\" className=\"flex items-center gap-2 text-sm font-medium text-[#2d3a2a] sm:hidden\">\n              <UserPlus className=\"w-4 h-4\" />\n              Sign Me Up!\n            </a>\n            <a href=\"#login\" className=\"flex items-center gap-2 text-sm font-medium text-[#2d3a2a] sm:hidden\">\n              <LogIn className=\"w-4 h-4\" />\n              Enter\n            </a>\n            <button className=\"mt-2 bg-[#1f2a1d] hover:bg-[#2a3827] text-white text-sm font-semibold px-5 py-3 rounded-full transition-colors\">\n              Try it Live\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Hero copy */}\n      <div className=\"relative z-10 flex flex-col items-center text-center pt-24 sm:pt-28 md:pt-32 px-4 sm:px-6\">\n        <h1\n          className=\"font-normal leading-[0.95] text-[#336443] text-[2rem] sm:text-4xl md:text-5xl lg:text-[4.75rem] xl:text-[5.25rem] max-w-5xl\"\n          style={{ fontFamily: '\"Neue Haas Grotesk Display Pro 55 Roman\", \"Neue Haas Grotesk Text Pro\", \"Helvetica Neue\", Helvetica, Arial, sans-serif', letterSpacing: '-0.035em' }}\n        >\n          Close the rift{' '}\n          <span className=\"text-[#85AB8B]\">\n            linking\n            <br className=\"hidden sm:block\" /> signals and action\n          </span>\n        </h1>\n        <p className=\"mt-6 sm:mt-8 text-[#4b5b47] text-sm sm:text-base md:text-lg leading-relaxed max-w-md px-2\">\n          Shape scattered signals into meaningful outcomes via AI-driven workflows.\n        </p>\n      </div>\n\n      {/* Bottom-left CTA block */}\n      <div className=\"absolute left-4 right-4 sm:right-auto sm:left-6 md:left-10 bottom-6 sm:bottom-8 md:bottom-10 z-10 max-w-sm\">\n        <div className=\"flex items-center gap-2 text-[#3d5638] sm:text-white/95 mb-3\">\n          <Sparkles className=\"w-4 h-4\" />\n          <span className=\"text-sm font-semibold sm:font-medium\">\n            FluxEngine<sup className=\"text-[10px]\">TM</sup>\n          </span>\n        </div>\n        <p className=\"text-[#3d5638]/90 sm:text-white/85 text-xs leading-relaxed mb-6 max-w-xs font-medium sm:font-normal\">\n          LinkFlow smoothly unites your company systems, streamlining data paths between services without having to write custom scripts.\n        </p>\n        <div className=\"flex items-center gap-4 flex-wrap\">\n          <button className=\"bg-[#3d5638] sm:bg-white hover:bg-[#2d4228] sm:hover:bg-white/90 text-white sm:text-[#1f2a1d] text-sm font-semibold px-5 sm:px-6 py-2.5 sm:py-3 rounded-full transition-colors shadow-sm\">\n            Try it Live\n          </button>\n          <button className=\"text-[#3d5638] sm:text-white text-sm font-semibold sm:font-medium hover:opacity-80 transition-opacity\">\n            Know More.\n          </button>\n        </div>\n      </div>\n\n      {/* Bottom-right video link */}\n      <div className=\"hidden sm:flex absolute right-6 md:right-10 bottom-8 md:bottom-10 z-10 items-center gap-2 text-white/90 text-sm\">\n        <button className=\"flex items-center justify-center w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors\">\n          <Play className=\"w-3 h-3 fill-white text-white ml-0.5\" />\n        </button>\n        <span className=\"font-medium\">How we build?</span>\n        <span className=\"text-white/60\">1:35</span>\n      </div>\n    </section>\n  );\n}\n\nexport default App;\n```\n\n---\n\n### Animation Details (all CSS, no Framer Motion)\n\n| Element | Property | Values |\n|---------|----------|--------|\n| Hamburger Menu/X icon swap | `transition-all duration-300` | Open: Menu gets `opacity-0 rotate-90 scale-50`, X gets `opacity-100 rotate-0 scale-100`. Closed: reverse. |\n| Mobile overlay backdrop | `transition-opacity duration-300` | Open: `opacity-100 pointer-events-auto`. Closed: `opacity-0 pointer-events-none`. |\n| Mobile drawer slide | `transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]` | Open: `translate-x-0`. Closed: `translate-x-full`. |\n| Mobile nav links stagger | `transition-all duration-500` | Open: `translate-x-0 opacity-100`, delay per item: `150ms + i * 70ms`. Closed: `translate-x-8 opacity-0`, delay `0ms`. |\n| Mobile CTA group | `transition-all duration-500` | Open: `translate-x-0 opacity-100`, delay `400ms`. Closed: `translate-x-8 opacity-0`, delay `0ms`. |\n| Nav buttons | `transition-colors` | Default Tailwind duration (150ms). |\n| Opacity links | `transition-opacity` | `hover:opacity-80`. |\n\n---\n\n### Key Layout/Spacing Notes\n\n- Root section: `relative w-full min-h-screen sm:h-screen overflow-hidden`\n- Navbar padding: `px-4 sm:px-6 md:px-10 py-4 sm:py-6`\n- Desktop pill nav: `bg-white/70 backdrop-blur-md rounded-full pl-6 pr-1 py-1 shadow-sm border border-white/60`\n- Hero heading: `pt-24 sm:pt-28 md:pt-32`, font sizes `text-[2rem] sm:text-4xl md:text-5xl lg:text-[4.75rem] xl:text-[5.25rem]`, `leading-[0.95]`, `letterSpacing: '-0.035em'`\n- Bottom-left block: `absolute left-4 right-4 sm:right-auto sm:left-6 md:left-10 bottom-6 sm:bottom-8 md:bottom-10`\n- Bottom-right video: `absolute right-6 md:right-10 bottom-8 md:bottom-10`\n\n---\n\n### Dependencies (package.json)\n\n```json\n{\n  \"dependencies\": {\n    \"lucide-react\": \"^0.344.0\",\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-react\": \"^4.3.1\",\n    \"autoprefixer\": \"^10.4.18\",\n    \"postcss\": \"^8.4.35\",\n    \"tailwindcss\": \"^3.4.1\",\n    \"typescript\": \"^5.5.3\",\n    \"vite\": \"^5.4.2\"\n  }\n}\n```","url":"/prompts/ai-workflow"}},{"id":"tech-forward","object":"prompt","title":"Tech-Forward","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/prompts%20(i've%20added%20them%20to%20the%20motionsites)/132Area.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen hero section landing page using React, Vite, and Framer Motion (`motion` package). Use plain CSS (no Tailwind). The font is Inter (weights 300, 400, 500, 600) from Google Fonts. The design is minimal black-and-white with a full-viewport background video.\n\n**Stack:** React 19, Vite, `motion` (framer-motion), `lucide-react` (for the Plus icon).\n\n**Layout:**\n- Full viewport height (`min-height: 100vh`), white background, flex column with `justify-content: space-between`\n- Fixed navbar at top (z-index 50, pointer-events none on the nav itself, auto on children)\n- Absolutely positioned full-screen video behind everything (z-index 0)\n- Footer content pinned to bottom (z-index 30) with a white gradient fade-up background\n\n**Navbar (fixed, top):**\n- Left side contains:\n  1. Logo: custom SVG icon (two rotated rounded rectangles at -35deg, black fill) + brand text \"NeuralKinetics\" (hidden on mobile, shown on desktop 768px+)\n  2. Menu button: black pill with white circle containing a Plus icon (lucide, size 12, strokeWidth 3) + \"Menu\" text (11px, white)\n  3. Tags pill: light gray (#F4F4F6) rounded-full container with two text labels \"Advanced Bionics\" and \"Cognitive AI\" (hidden on mobile, shown on desktop)\n- Right side contains:\n  - A light gray pill with a black circle button (containing a 4-dot grid SVG icon) + label \"Adaptive Systems\" (hidden on mobile)\n\n**Background Video:**\n- URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4`\n- autoPlay, muted, playsInline, object-fit: cover\n- On mobile: video wrapper is 80% width and 80% height (centered)\n- On desktop (768px+): video wrapper is 100% width and 100% height\n\n**Footer content (bottom, over gradient):**\n- Background: `linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 50%, transparent 100%)`\n- On mobile: stacks vertically. On desktop: row layout, items aligned to bottom.\n- Left block:\n  1. Subtitle line: small black dot (8px circle) + \"Best digital banking card 2026\" (13px, 55% opacity black)\n  2. Heading: \"One Card, Zero / Limits. Worldwide.\" on two lines. Font-weight 300, clamp(2rem, 8vw, 4.5rem) on mobile, clamp(2.5rem, 5.5vw, 4.5rem) on desktop, letter-spacing -0.03em, line-height 1\n  3. Two buttons: \"See Features\" (black pill, white text, 13px) and \"How It Works\" (transparent with dark border rgba(0,0,0,0.35), 13px)\n- Right block: Three tag pills \"Neuromorphic\", \"AGI\", \"Cybernetics\" (white bg, light border rgba(0,0,0,0.12), 11px, rounded-full)\n\n**Animations (using `motion` from 'motion/react'):**\n- Navbar: slides down from y:-16, opacity 0 to visible. Duration 0.8s, ease [0.16, 1, 0.3, 1]\n- Video: fades in from opacity 0 + scale 1.05 to opacity 1 + scale 1. Duration 1.8s\n- Footer wrapper: slides up from y:20, delay 0.5s, duration 1s\n- Subtitle: slides up from y:16, delay 0.6s, duration 0.8s\n- Heading: slides up from y:20, delay 0.8s, duration 0.8s\n- Buttons: slides up from y:16, delay 1.0s, duration 0.8s\n- All use ease: [0.16, 1, 0.3, 1]\n\n**Responsive (mobile-first, breakpoint at 768px):**\n- Mobile: navbar padding 16px, smaller buttons (28px circles), brand text hidden, tags hidden, right label hidden, footer stacks vertically, video at 80% size\n- Desktop (768px+): navbar padding 24px 32px, larger buttons (32px circles), all text/tags visible, footer is row layout, video fills 100%","url":"/prompts/tech-forward"}},{"id":"radial-diagram","object":"prompt","title":"Radial Diagram","summary":"A preview-led testimonials prompt for generating a polished AI-built interface.","category":"Testimonials","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(62).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build an \"Our Comprehensive Branding Approach\" section as a React component using TypeScript, Tailwind CSS 3, and Framer Motion. The section sits on a dark background (`#0f0f0f`) with white text. Font is `'DM Sans', sans-serif` (loaded via Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). Here is the exact specification:\n\n---\n\n**Overall Section Container:**\n\n- `<section>` with `overflow-x-hidden`, `bg-[#0f0f0f]`, `text-white`, inline style `fontFamily: \"'DM Sans', sans-serif\"`\n\n- Inner wrapper: `mx-auto max-w-7xl px-6 py-24 sm:px-10 lg:px-16 lg:py-32`\n\n- All animations use the easing curve `[0.22, 1, 0.36, 1]` and trigger once when scrolled into view using Framer Motion's `useInView` with `{ once: true, margin: \"-60px\" }`\n\n---\n\n**Header (top of section):**\n\n- Flex row (`flex items-start gap-4`) with `mb-20`\n\n- Two lines of text stacked vertically:\n\n  - Line 1: \"Our Comprehensive\" in `text-[#6e6e6e]` (gray), `font-light`, size `clamp(2rem, 3.4vw, 2.6rem)`, `leading-[1.18]`, `tracking-[-0.01em]`. Animates from `opacity:0, y:20` to visible, duration `0.7s`.\n\n  - Line 2: \"Branding Approach\" in `text-white`, same font styling. Same animation but with `delay: 0.1s`.\n\n- A small square button to the right: `h-7 w-7`, `border border-white/20`, contains a plus icon (SVG: two perpendicular lines forming a +, `stroke=\"currentColor\"`, `strokeWidth=\"1.3\"`, viewBox `0 0 12 12`). Text color `text-white/70`, hover: `bg-white/10 text-white`. Animates scale from 0.8 to 1, opacity 0 to 1, delay `0.25s`.\n\n---\n\n**Content Row (below header):**\n\n- `flex flex-col gap-12 lg:flex-row lg:items-start lg:gap-10`\n\n- Left side: `flex min-w-0 flex-1 flex-col gap-8 sm:flex-row sm:items-start sm:gap-10` containing the portrait and testimonial\n\n- Right side: the circle diagram\n\n---\n\n**Left: Glitch Portrait**\n\n- Container: `relative shrink-0`, fixed size `width: 250px`, `height: 310px`\n\n- Contains an `<img>` filling the container with `object-cover`, using this Pexels image: `https://images.pexels.com/photos/3778212/pexels-photo-3778212.jpeg?auto=compress&cs=tinysrgb&w=600`\n\n- 10 small white glitch blocks (`bg-white`) absolutely positioned around the edges of the portrait (some overflow outside). Each block has a fixed pixel `width` and `height` and percentage-based `left`/`top`. They animate in with `scale: 0 -> 1`, `opacity: [0, 1, 0.9]`, staggered by `0.05s` starting at `delay: 0.5s`, duration `0.35s`.\n\n- The exact glitch block positions (x%, y%, width px, height px):\n\n  ```\n\n  (2, -3, 22, 22), (12, -5, 14, 10), (28, -2, 10, 10),\n\n  (82, 22, 8, 8), (-4, 75, 16, 12), (8, 82, 10, 10),\n\n  (-2, 88, 18, 16), (56, 82, 12, 14), (70, 90, 10, 10),\n\n  (42, 94, 8, 6)\n\n  ```\n\n- The entire portrait group animates from `opacity:0, y:24` to visible, duration `0.8s`, delay `0.2s`.\n\n---\n\n**Left: Testimonial Text (next to portrait)**\n\n- Container: `min-w-0 max-w-[420px]`\n\n- Opening curly quote character `\\u201C` in `text-[#555]`, font `Georgia, 'Times New Roman', serif`, `fontSize: \"3.2rem\"`, `lineHeight: 0.7`. Animates in with `y:14`, delay `0.3s`.\n\n- Quote paragraph: \"We kept seeing the same pattern -- brands with potential lost between messy processes, scattered visuals, and forgettable websites. This studio exists to align it all into one clear, consistent story.\" Use `&mdash;` for the em-dash. Styled as `text-white/90`, size `clamp(1.05rem, 1.5vw, 1.28rem)`, `font-normal`, `leading-[1.58]`. Animates from `y:20`, delay `0.4s`.\n\n- Attribution block `mt-10`:\n\n  - Name: \"Alex West\" in `text-[1.15rem] font-medium tracking-[0.01em] text-white`\n\n  - Title: \"Founder & Creative Director\" (`&amp;` in JSX) in `mt-1 text-[0.85rem] tracking-wide text-[#6e6e6e]`\n\n  - Both animate together from `y:14`, delay `0.55s`.\n\n---\n\n**Right: Circle Diagram**\n\n- Wrapper: `flex w-full max-w-[360px] shrink-0 items-center justify-center self-center sm:max-w-[400px] lg:max-w-[440px]`\n\n- Inner container has `aspect-ratio: 1/1`, position relative, animates opacity 0->1, delay `0.4s`, duration `0.8s`.\n\n- SVG with `viewBox=\"0 0 100 100\"`, absolutely filling the container:\n\n  - A circle centered at `(50, 50)` with radius `30`, `stroke=\"white\"`, `strokeWidth=\"0.18\"`, `opacity=\"0.45\"`\n\n  - 3 lines radiating from center `(50,50)` outward to radius `36` (30+6) at these angles:\n\n    - \"websites\" at 215 degrees\n\n    - \"brands\" at 335 degrees\n\n    - \"ui/ux design\" at 110 degrees\n\n  - Lines default: `strokeWidth: 0.18`, `opacity: 0.45`. On hover of corresponding label: `strokeWidth: 0.6`, `opacity: 1`. Transition duration `0.3s`.\n\n- 3 text labels positioned at radius `46` (30+16) from center at the same angles, using `transform: translate(-50%, -50%)` for centering. Styled with `fontSize: clamp(1.25rem, 2.8vw, 2.4rem)`, `letterSpacing: -0.01em`, `text-white`, `whitespace-nowrap`.\n\n  - Default `fontWeight: 300`, on hover of that label: `fontWeight: 700` (transition `0.25s`).\n\n  - Each label animates in with `opacity:0, y:16` to visible, staggered by `0.15s` starting at delay `0.6s`, duration `0.7s`.\n\n- Hover state is shared: hovering a label highlights both the label (bold) and its corresponding SVG line.\n\n---\n\n**Dependencies:** React 18, Framer Motion (v12+), Tailwind CSS 3. Uses `useState`, `useRef`, `useInView` from framer-motion, and `motion` components for all animations. No external animation libraries beyond Framer Motion.","url":"/prompts/radial-diagram"}},{"id":"rocket-cta","object":"prompt","title":"Rocket CTA","summary":"A preview-led cta prompt for generating a polished AI-built interface.","category":"CTA","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(69).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` as `cn()`. Dark theme background (`#000000`), Inter font, Material Symbols Outlined for icons. Use the white-alpha \"landing\" palette in `tailwind.config.ts`:\n\n```ts\nlanding: {\n  surface: \"rgba(255, 255, 255, 0.10)\",\n  \"surface-hover\": \"rgba(255, 255, 255, 0.16)\",\n  border: \"rgba(255, 255, 255, 0.10)\",\n  \"border-strong\": \"rgba(255, 255, 255, 0.20)\",\n  text: \"rgba(255, 255, 255, 0.80)\",\n  \"text-muted\": \"rgba(255, 255, 255, 0.60)\",\n}\n```\n\nAdd a global `.liquid-glass` utility (frosted translucent surface):\n```css\n.liquid-glass {\n  background: rgba(255,255,255,0.06);\n  border: 1px solid rgba(255,255,255,0.10);\n  backdrop-filter: blur(20px) saturate(140%);\n  -webkit-backdrop-filter: blur(20px) saturate(140%);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25);\n}\n```\n\nAdd keyframes in `index.css` for the inner Velorah hero animation:\n```css\n@keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }\n.animate-fade-rise          { animation: fade-rise .8s ease-out both; }\n.animate-fade-rise-delay    { animation: fade-rise .8s ease-out .25s both; }\n.animate-fade-rise-delay-2  { animation: fade-rise .8s ease-out .5s both; }\n.scrollbar-hide::-webkit-scrollbar { display: none; }\n.scrollbar-hide { scrollbar-width: none; }\n```\n\nLoad fonts in `index.html`: Inter (400/500/600), Instrument Serif (400 + italic), Material Symbols Outlined.\n\n---\n\n## Assets\n\n- Foreground \"grass / horizon\" PNG that overlays the bottom of the section — load directly from this URL (no local asset):\n  `https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`\n- CloudFront video URL used **inside** the Velorah dashboard preview (exact):\n  `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4`\n\n---\n\n## Helper components (must exist)\n\n### `FadeUp` (`framer-motion`)\n```tsx\n<motion.div\n  initial={{ opacity: 0, y: y ?? 24 }}\n  whileInView={{ opacity: 1, y: 0 }}\n  viewport={{ once: true, amount: 0.3 }}\n  transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}\n/>\n```\n\n### `MIcon` — Material Symbols Outlined span, supports `name`, `size`, `fill`, `weight`, `grade`, `opticalSize`, applied via `fontVariationSettings: \"'FILL' x, 'wght' y, 'GRAD' z, 'opsz' s\"`.\n\n### `PrimaryButton` (landing primitive)\n- White pill, black text, `rounded-full`, sizes `sm/md/lg` (default `lg`: `h-12 px-9 text-sm font-medium`).\n- Class: `inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-black leading-none transition-colors`.\n- Wraps children in an `AnimatedText` component that slides current text up and reveals duplicate from below on hover (200–300ms ease).\n- Polymorphic via `as=\"a\" | \"button\"`, default `a`.\n\n### `ChatPanel` (left side of the dashboard mock)\n- Vertical flex column inside `rounded-2xl border border-white/10`, background `rgba(8,8,10,0.6)` + `backdrop-filter: blur(24px)`.\n- Header row: 28px circular `bg-white/5` with `MIcon name=\"auto_awesome\" size={14}`, then two-line label: **\"Vibe Design course\"** (text-sm font-medium white) + **\"Learn how to build website with AI\"** (text-[11px] white/40).\n- Messages scroll area (`scrollbar-hide`, `space-y-4`, px-4 py-5). Seed messages:\n  1. assistant — \"Welcome to the Vibe Design course! I'll guide you through building stunning websites with AI. What would you like to learn first?\"\n  2. user — \"I want to learn how to build a hero section with a cinematic video background using AI.\"\n  3. assistant — \"Great choice! In this course, you'll learn how to create full-screen looping videos, liquid glass nav bars, email signups, and manifesto buttons — all with AI assistance. Let's dive in!\"\n- Message bubbles: `max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed`. User = `bg-white/15 text-white/90` (right-aligned). Assistant = `bg-white/5 text-white/70 border border-white/5` (left).\n- Props: `initialScroll?: \"top\" | \"bottom\"` (CTA uses `\"top\"`), `animateMessagesIn?: boolean` (CTA passes `true`, each message wrapped in `FadeUp delay={i * 0.12} y={16}`).\n- Input row: `.liquid-glass rounded-2xl` containing a 1-row autosize `<textarea>` (transparent, placeholder \"Ask about the course...\") + white square send button (`bg-white text-black rounded-xl p-2`) with `MIcon name=\"arrow_upward\" size={16}`. Enter (no shift) sends. Pushing user msg also pushes a canned assistant reply.\n\n### `VelorahHeroPreview` (right side of the dashboard mock)\n```tsx\nconst VIDEO_SRC = \"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4\";\n```\n- Wrapper: `relative w-full h-full overflow-hidden rounded-2xl`, inline `backgroundColor: \"hsl(201 100% 13%)\"` (deep teal as the video-loading color).\n- `<video autoPlay loop muted playsInline preload=\"auto\">` absolutely positioned, `object-cover`, `z-0`.\n- Nav row (`relative z-10 flex items-center justify-between px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4`):\n  - Left brand: `Velorah®` with `font-family: 'Instrument Serif', serif`, `text-sm sm:text-base md:text-lg`, `tracking-tight`, `®` as `<sup className=\"text-[0.5em]\">`.\n  - Center (hidden < md): `Home` (white) · `Studio` · `About` · `Journal` · `Reach Us` — `text-[9px] lg:text-[10px] text-white/60` with `hover:text-white` on the inactive items.\n  - Right: `.liquid-glass rounded-full px-2.5 sm:px-3 py-1 text-[9px] sm:text-[10px] text-white` reading **Begin Journey**.\n- Hero block (`flex flex-col items-center text-center px-3 sm:px-4 pt-3 sm:pt-5 md:pt-7 pb-6`):\n  - `<h1>` Instrument Serif, `font-normal leading-[0.95] tracking-[-0.03em]`, `text-lg sm:text-2xl md:text-3xl lg:text-4xl max-w-[90%]`, class `animate-fade-rise`. Content: `Where <em class=\"not-italic text-white/55\">dreams</em> rise <em class=\"not-italic text-white/55\">through the silence.</em>`\n  - Paragraph `animate-fade-rise-delay text-white/60 text-[9px] sm:text-[11px] md:text-xs leading-relaxed max-w-[80%] sm:max-w-sm md:max-w-md mt-2 sm:mt-3 md:mt-4`: \"We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work.\"\n  - Pill button `animate-fade-rise-delay-2 liquid-glass rounded-full px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 md:py-2.5 text-[9px] sm:text-[10px] text-white mt-3 sm:mt-4 md:mt-5` reading **Begin Journey**.\n\n### `CtaDashboardMock`\nFrame around ChatPanel + VelorahHeroPreview:\n```tsx\n<div className=\"liquid-glass w-full max-w-[1100px] aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl mx-auto overflow-hidden p-2 sm:p-3\">\n  <div className=\"grid h-full grid-cols-1 sm:grid-cols-[minmax(220px,320px)_1fr] gap-2 sm:gap-3\">\n    <div className=\"min-h-0 hidden sm:block\"><ChatPanel initialScroll=\"top\" animateMessagesIn /></div>\n    <div className=\"min-h-0\"><VelorahHeroPreview /></div>\n  </div>\n</div>\n```\n\n---\n\n## `CtaSection` — exact layout & behavior\n\n```tsx\nconst sectionRef = useRef<HTMLElement>(null);\nconst isMobile = useIsMobile(); // tailwind md breakpoint hook\nconst { scrollYProgress } = useScroll({ target: sectionRef, offset: [\"start end\", \"end start\"] });\nconst dashboardY = useTransform(scrollYProgress, [0, 1], [\"120px\", \"-120px\"]);\nconst grassY     = useTransform(scrollYProgress, [0, 1], isMobile ? [\"80px\", \"-40px\"] : [\"200px\", \"-200px\"]);\n```\n\nMarkup:\n```tsx\n<section\n  ref={sectionRef}\n  id=\"cta\"\n  className=\"relative w-full\"\n  style={{ background: \"linear-gradient(to bottom, transparent 0%, #14191E 100%)\" }}\n>\n  <div className=\"relative mx-auto max-w-[1080px] px-4 sm:px-6 pt-24 sm:pt-32 md:pt-40 pb-[440px] sm:pb-[520px] md:pb-[440px]\">\n    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-start\">\n      {/* Left column */}\n      <div className=\"relative z-20 max-w-[400px]\">\n        <FadeUp delay={1}>\n          <h2 className=\"text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground\">\n            Learn how can one go from 0 to $11.5k with AI in 60 days.\n          </h2>\n        </FadeUp>\n        <FadeUp delay={0.1}>\n          <p className=\"mt-6 text-landing-text text-base sm:text-lg leading-[1.5] max-w-[380px]\">\n            Learn to turn your ideas into stunning websites with AI — the same skills agencies charge $5,000 for. Join the UI Rocket training and start building like a pro today.\n          </p>\n        </FadeUp>\n        <FadeUp delay={0.2} className=\"mt-10\">\n          <PrimaryButton as=\"button\">Start for free</PrimaryButton>\n        </FadeUp>\n      </div>\n    </div>\n  </div>\n\n  {/* Dashboard pinned to right edge, behind grass, parallax Y */}\n  <motion.div\n    style={{ y: dashboardY }}\n    className=\"absolute top-[440px] sm:top-[460px] md:top-[500px] lg:top-20 left-4 right-4 sm:left-auto sm:-right-[8%] md:-right-[10%] lg:-right-[12%] z-10 sm:w-[85%] md:w-[80%] lg:w-[68%]\"\n  >\n    <CtaDashboardMock />\n  </motion.div>\n\n  {/* Foreground grass — in front of dashboard, parallax Y */}\n  <motion.img\n    src=\"https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png\"\n    alt=\"\"\n    aria-hidden\n    style={{ y: grassY }}\n    className=\"pointer-events-none select-none absolute left-0 right-0 bottom-[-40px] sm:bottom-[-80px] lg:bottom-[-140px] w-full z-30 object-cover\"\n  />\n</section>\n```\n\n### Behavior summary\n- Section fades from transparent → `#14191E` vertically.\n- On scroll, the dashboard translates from `+120px` → `-120px` (parallax up). The grass image translates `+200px` → `-200px` desktop, `+80px` → `-40px` mobile, on top of the dashboard (`z-30` over `z-10`).\n- Left column stays static, on top of the grass (`z-20` left text container would otherwise be covered — keep grass at `z-30` to overlap the dashboard while the heading visually sits left of it).\n- Headline `Learn how can one go from 0 to $11.5k with AI in 60 days.` enters with a delayed FadeUp; paragraph + button stagger in afterward.\n- Mobile (< sm): dashboard stacks below the heading (`top-[440px]`), chat panel hides (`hidden sm:block`), only the Velorah preview shows.\n- Button is `PrimaryButton as=\"button\"` reading **Start for free**; hover triggers the AnimatedText slide.\n\n---\n\n## Acceptance checklist\n- [ ] Section bg: `transparent → #14191E` linear gradient bottom.\n- [ ] Inter font globally; Instrument Serif used in Velorah brand + headline; Material Symbols Outlined for icons.\n- [ ] Headline copy is exactly: `Learn how can one go from 0 to $11.5k with AI in 60 days.`\n- [ ] Subtext copy is exactly the paragraph above; button label exactly `Start for free`.\n- [ ] `CtaDashboardMock` uses `.liquid-glass` frame, aspect `3/4 → 16/10 → 16/9`, ChatPanel left (hidden on mobile) + Velorah right.\n- [ ] Velorah `<video>` uses the exact CloudFront URL, `autoPlay loop muted playsInline preload=\"auto\"`, fallback bg `hsl(201 100% 13%)`.\n- [ ] Velorah inner copy/animation classes match (`animate-fade-rise`, `-delay`, `-delay-2`).\n- [ ] `useScroll` + `useTransform` parallax: dashboard `120 → -120`, grass `200 → -200` (desktop) / `80 → -40` (mobile).\n- [ ] Grass image loaded from Cloudinary URL (`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`) sits at `z-30` over dashboard (`z-10`), pointer-events-none, full width.\n- [ ] FadeUp entrance order: heading (delay 1) → paragraph (0.1) → button (0.2).\n- [ ] PrimaryButton: white pill, black text, AnimatedText hover slide.","url":"/prompts/rocket-cta"}},{"id":"stark-minimal-footer","object":"prompt","title":"Stark Minimal Footer","summary":"A preview-led footer prompt for generating a polished AI-built interface.","category":"Footer","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(37).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"---\n\nBuild a **Site Footer** for an aerospace company called \"EngineTech.\" This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading, an oversized wordmark brand row, and a legal line.\n\n---\n\n## ROOT CONTAINER (`.site-footer`)\n\n- Position relative, z-index 100, overflow hidden.\n- Background: `#000000`. Color: `#ffffff`.\n\n---\n\n## ANIMATED DOTS STRIP (`.footer-dots`)\n\nA decorative band at the very top of the footer with horizontally drifting dots.\n\n- Position relative, height 120px, overflow hidden, background `#000000`.\n- Has `aria-hidden=\"true\"`.\n\n**Inside (`.footer-dots__line`):**\n\n- Position absolute, `left: 0; top: 50%`. Width **200%**, height 70px.\n- Opacity 0.75. `transform: translateY(-50%)`.\n- Background-image (three layered radial-gradient dot patterns):\n  - `radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px)`\n  - `radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px)`\n  - `radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px)`\n- Background-position: `0 8px, 24px 22px, 48px 14px`.\n- Background-size: `72px 38px, 110px 44px, 160px 52px`.\n- Animation: `footerDotsMove 18s linear infinite`.\n\n**Keyframes:**\n\n```\n@keyframes footerDotsMove {\n  from { transform: translate3d(0, -50%, 0); }\n  to   { transform: translate3d(-50%, -50%, 0); }\n}\n```\n\n---\n\n## FOOTER INNER (`.site-footer__inner`)\n\n- Width: `min(100% - 96px, var(--hero-max-width))` where `--hero-max-width: 1820px`. Margin `0 auto`.\n- Padding: `clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px)`.\n\n---\n\n## TOP GRID (`.site-footer__top`)\n\n- Display grid. Columns: `minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr))`.\n- Gap: `clamp(28px, 4vw, 76px)`. Min-height: `clamp(220px, 24vw, 330px)`.\n\n### H2 (first cell)\n\n- Text: \"Proven Advanced Propulsion Technology\".\n- Max-width 680px, margin 0, color `#ffffff`, `font-size: clamp(34px, 3.5vw, 62px)`, weight 220, letter-spacing 0, line-height 1.06.\n\n### Nav columns (three `.site-footer__nav` elements)\n\nEach nav is `display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px)`.\n\nEach link `<a>`:\n- Color `rgb(255 255 255 / 0.88)`, font-size 16px, weight 650, line-height 1.1.\n- Transition: `color 180ms ease, transform 180ms ease`.\n- Hover: color `#ffffff`, `transform: translateX(3px)`.\n\n**Nav 1 (`aria-label=\"Footer navigation\"`):**\n- Company → `#company`\n- Technology → `#technology`\n- Solutions → `#solutions`\n- Our Edge → `#our-edge`\n- Investors → `#investors`\n\n**Nav 2 (`aria-label=\"Company links\"`):**\n- Our Team → `#our-team`\n- News → `#news`\n- Careers → `#careers`\n- Contact Us → `#contact`\n\n**Nav 3 (`aria-label=\"Social links\"`):**\n- LinkedIn → `https://www.linkedin.com` (`target=\"_blank\" rel=\"noreferrer\"`)\n- Follow Us on X → `https://x.com` (`target=\"_blank\" rel=\"noreferrer\"`)\n\n---\n\n## BRAND ROW (`.site-footer__brand-row`)\n\n- Width 100%. Margin-top: `clamp(18px, 3vw, 46px)`.\n\n**Brand link (`.site-footer__brand`):**\n\n- Anchor `href=\"/\"`, `aria-label=\"EngineTech home\"`.\n- Display flex, align-items center, width 100%, color `#ffffff`.\n\n**Brand mark (`.site-footer__mark`):**\n\n- Position relative, `flex: 0 0 clamp(58px, 6.1vw, 118px)`, `aspect-ratio: 1`.\n- Margin-right `clamp(14px, 1.6vw, 28px)`. Overflow hidden, border-radius 50%.\n- Background `#ffffff`.\n- `::before` pseudo: absolute `inset: -18%`, background `#000000`, with `clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%)`. This creates a zig-zag wave pattern inside the white circle.\n- Has `aria-hidden=\"true\"`.\n\n**Brand wordmark (second `<span>`):**\n\n- Text: \"EngineTech\".\n- Display block, `flex: 1 1 auto`, min-width 0.\n- `font-size: clamp(58px, 11.1vw, 214px)`. Weight 760. `letter-spacing: -0.055em`. Line-height 0.78.\n- `white-space: nowrap`.\n\n---\n\n## LEGAL LINE (`.site-footer__legal`)\n\n- Flex row, wrap allowed, justify-content flex-start, gap `8px 18px`.\n- Margin-top: `clamp(14px, 1.4vw, 24px)`.\n- Color `rgb(255 255 255 / 0.52)`, font-size 9px, line-height 1.35.\n\nContents:\n- `<p>`: \"© 2026 EngineTech. All rights reserved.\" (margin 0)\n- `<a href=\"#privacy\">`: \"Privacy Policy\" (color inherit, hover `#ffffff`)\n- `<a href=\"#terms\">`: \"Terms of Use\" (same styling)\n\n---\n\n## RESPONSIVE BREAKPOINTS\n\n**At 980px:**\n\n- `.site-footer__inner` width: `min(100% - 48px, var(--hero-max-width))`.\n- Top grid: `grid-template-columns: 1fr 1fr` (two columns).\n- H2 spans full width: `grid-column: 1 / -1`.\n\n**At 560px:**\n\n- `.site-footer__inner` width: `min(100% - 32px, var(--hero-max-width))`.\n- Top grid: single column (`grid-template-columns: 1fr`). Min-height auto.\n- Nav links font-size 15px.\n- Brand mark flex-basis: `clamp(38px, 12vw, 58px)`.\n- Brand wordmark font-size: `clamp(45px, 18vw, 84px)`.\n\n---\n\n## GLOBAL STYLES\n\n**CSS custom property used:** `--hero-max-width: 1820px`.\n\n**Font stack:** `\"Geist\", \"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`.\n\n**Anchor reset:** `a { color: inherit; text-decoration: none; }`.\n\n**Color palette:** No purple or violet. Pure black `#000000` background, pure white `#ffffff` text, with `rgb(255 255 255 / 0.88)` for nav links, `rgb(255 255 255 / 0.55)` / `0.45` / `0.35` for the dot pattern, and `rgb(255 255 255 / 0.52)` for legal text.","url":"/prompts/stark-minimal-footer"}},{"id":"prompt-hero","object":"prompt","title":"PROMPT","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260715_020312_6a21f245-35e1-47c1-a730-090d3ebd518e.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/fe42Area.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"### Overview\n\nBuild a full-screen, scroll-driven fashion/archive landing page for a brand called \"prmpt\". The page has two main phases:\n\n1. **Hero phase** (first 100vh of scroll): Full-viewport video background with overlaid UI (logo, nav, product info, custom cursor). A black panel slides up from below covering the video.\n2. **Gallery phase** (continues scrolling): The black panel contains a scattered grid of product images that scale in/out as they enter/exit the viewport. At the end, a white overlay fades in with a \"view\" CTA button.\n\n---\n\n### Tech Stack\n\n- **React 19** + **TypeScript**\n- **Vite 6** with `@vitejs/plugin-react`\n- **Tailwind CSS v4** via `@tailwindcss/vite` plugin\n- **GSAP 3.15** + `@gsap/react` (ScrollTrigger)\n- **Motion (Framer Motion) 12** (`motion/react`)\n- **Font**: \"Inter Tight\" (Google Fonts, weight 500) -- loaded via `<link>` or import\n\n---\n\n### Asset URLs\n\n**Videos (CloudFront):**\n- LEFT video: `https://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154433_532a85d3-dabf-4265-b8bd-19ac6af31842.mp4`\n- RIGHT video: `https://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154401_a664f076-b971-4557-8728-40ef9ea4c49b.mp4`\n\n**Gallery Images (10 total, in order):**\n1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104530_521b2f85-c0f3-4d0e-9704-b578315b4cb9.png&w=1920&q=85`\n2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103711_76ccdb8b-5043-4f47-9c54-4379713393ea.png&w=1920&q=85`\n3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103728_394f6a1b-85e2-4386-a4f6-408472a0a5b7.png&w=1920&q=85`\n4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103739_86743e0e-16a7-4bee-bf38-dd67985344dc.png&w=1920&q=85`\n5. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103748_b2215dc8-a3a7-470d-b19a-5b87fa7d0c37.png&w=1920&q=85`\n6. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103758_e919ce72-5c9d-4b87-9be6-d7647b34825c.png&w=1920&q=85`\n7. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103808_013583d0-3386-4547-9832-37c7d8edb3ac.png&w=1920&q=85`\n8. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103937_a0c49d0a-33eb-4ead-aea6-c1baf241acbc.png&w=1920&q=85`\n9. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103956_d18ed8fd-7b6f-4b86-91f9-20010fe38670.png&w=1920&q=85`\n10. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104034_ba5a9963-87ff-4008-a545-6bd686c088b5.png&w=1920&q=85`\n\n---\n\n### SECTION 1: Hero (Video Background + Overlaid UI)\n\n#### Root Container\n- `id=\"scroll-spacer\"`, `position: relative`, `user-select: none`, `background: white`\n- Height is dynamically calculated (initially `500vh`, then overridden by GSAP to `vh + maxScroll + 2*vh`)\n- Custom cursor hidden on desktop (`cursor: none`), default on touch devices\n\n#### 1A. Custom Cursor (Desktop Only)\n- Hidden on mobile/tablet (< 1024px)\n- A `fixed`, `pointer-events-none`, `z-index: 50` div that follows `mousemove`\n- Positioned via direct DOM manipulation (`style.left/top = clientX/clientY`)\n- `transform: translate(-50%, -50%)` to center on pointer\n- `mix-blend-mode: exclusion`\n- Contains a 48x48 SVG: a circle with stroke (r=22.75, strokeWidth=2.5) containing a custom Japanese/decorative glyph path, all filled white\n\n#### 1B. Logo (Top Left)\n- `position: fixed`, `pointer-events-none`, `z-index: 20`\n- `mix-blend-mode: exclusion`\n- Responsive width: 124px (mobile < 640), 266px (tablet 640-1024), 355px (desktop)\n- Position: `top: 16px, left: 16px` (mobile), `top: 32px, left: 32px` (desktop)\n- Motion animation: fade in + slide up (`opacity: 0->1, y: 12->0`), duration 0.6s, ease `[0.25, 0.1, 0.25, 1]`, delay 0s\n- SVG viewBox `0 0 355 110`, contains the \"prmpt\" wordmark + circled \"R\" mark, all paths filled white\n\n#### 1C. Caption (Below Logo, Left Side)\n- `position: fixed`, `pointer-events-none`, `z-index: 20`\n- `mix-blend-mode: exclusion`\n- Position: `left: 32px` (desktop), `left: 16px` (mobile)\n- Top: 244px (desktop), 180px (tablet), 118px (mobile)\n- Width: 692px (desktop), `calc(50vw - 48px)` (tablet), `calc(100vw - 32px)` (mobile)\n- Font: Inter Tight, weight 500, size 12px, line-height 140%, letter-spacing -0.04em, color #FFFFFF\n- Motion animation: same as logo but delay 0.3s\n- Text content: \"When switching between videos near the center, do not reset currentTime to 0 abruptly. Add a small dead zone: if cursor is within +/-50px of center, keep both videos at currentTime = 0 and show whichever was last active.\"\n\n#### 1D. Header Navigation (Top Right)\n- `position: fixed`, `z-index: 20`, `pointer-events-none`\n- `mix-blend-mode: exclusion`\n- Position: `top: 32px, right: 32px` (desktop), `top: 16px, right: 16px` (mobile)\n- Width: 330px (desktop), auto (mobile)\n- Height: 30px\n- Flex row, justify-content: space-between, align-items: center\n- Motion animation: same easing, delay 0.15s\n- Contains:\n  - \"ABOUT\" text (hidden on mobile): Inter Tight, 500, 15px, uppercase, white\n  - A flex row with gap 50px (desktop) / 20px (mobile):\n    - Hamburger SVG icon: viewBox `0 0 40 40`, two horizontal lines (`M0 14H40` and `M0 26H40`), stroke white, strokeWidth 2.5. Size: 30x30 (desktop), 24x24 (mobile)\n    - \"[ CART ]\" text: Inter Tight, 500, 15px (desktop) / 13px (mobile), white\n\n#### 1E. Product Info (Bottom Right)\n- `id=\"outro-info\"`, `position: fixed`, `pointer-events-none`, `z-index: 20`\n- `mix-blend-mode: exclusion`\n- **Desktop**: right: 32px, bottom: 80px, width: 330px, flex-column, align center\n- **Mobile**: left: 0, right: 0, bottom: 48px, flex-column, align center\n- Motion animation: opacity 0->1, delay 0.45s\n- `data-outro-offset`: 166 (desktop), 132 (mobile) -- used by scroll animation\n- Contains:\n  - Top block (flex-column, align flex-start, width 100% desktop / 252px mobile, margin-bottom 32px desktop / 12px mobile):\n    - Circle icon: relative div (30x30 desktop, 20x20 mobile) containing:\n      - SVG circle (cx=20, cy=20, r=18.75, stroke white, strokeWidth 2.5 desktop / 2 mobile)\n      - `<span id=\"circle-symbol\">` centered inside, shows \"8\" initially, changes to random symbol from `['8', '$', '^^', '%', '/']` on scroll (throttled 80ms)\n      - Font: Inter Tight, 500, 15px (desktop) / 10px (mobile), letter-spacing -0.04em, uppercase, white\n    - Collection label: Inter Tight, 500, 30px (desktop) / 20px (mobile), line-height 100%, text-align center, letter-spacing -0.04em, uppercase, white. Content: `ARCHIVE COLLECTION` + line break + `\"PROMPT\"`\n  - Price: Inter Tight, 500, 80px (desktop) / 60px (mobile), line-height 100%, text-align center, letter-spacing -0.04em, white. Content: `$97,33`\n\n#### 1F. \"View\" Button (Bottom Right, Initially Hidden)\n- `id=\"outro-buy\"`, `position: fixed`, `pointer-events-none`, `z-index: 20`\n- `mix-blend-mode: exclusion`\n- **Desktop**: right: 32px, bottom: 32px, width: 330px, height: 174px\n- **Mobile**: left: 16px, right: 16px, bottom: 60px, height: 100px\n- `transform-origin: right bottom`, `transform: scale(0)` (starts hidden, scales to 1 via scroll)\n- Background: #fff, border-radius: 1335px (pill shape)\n- Flex center\n- Text \"view\": Inter Tight, 500, 110px (desktop) / 72px (mobile), letter-spacing -0.04em, color #fff, `mix-blend-mode: exclusion`\n\n#### 1G. Video Container\n- `id=\"main-canvas\"`, `pointer-events-none`\n- **Desktop**: `position: fixed, inset: 0, width: 100%, height: 100%, z-index: 0`\n- **Mobile**: `position: fixed, left: 0, top: 220px, width: 100vw, height: calc(100vh - 220px), z-index: 0`\n- Opacity transition: 0 -> 1 when both videos loaded (`opacity 0.3s ease`)\n- `overflow: hidden`\n- Contains two `<video>` elements (muted, playsInline, preload=\"auto\"), absolutely positioned to fill container, `object-fit: cover`\n- Left video starts `display: none`, right starts `display: block`\n\n\n**Desktop (non-touch):**\n- Videos are NOT auto-played. They are scrubbed based on cursor X position via `requestAnimationFrame`.\n- Dead zone: `Math.max(30, width * 0.05)` pixels from center\n- If cursor is in dead zone, keep current video at `currentTime = 0`\n- If cursor moves left of dead zone: show RIGHT video, scrub it based on distance from center-left-edge to left edge\n- If cursor moves right of dead zone: show LEFT video, scrub it based on distance from center+deadzone to right edge\n- `activeSideRef` tracks which side was last active, only changes when cursor exceeds dead zone\n- Progress calculation: `(distance from dead zone edge) / (available range)` mapped to `0...video.duration`\nCRITICAL: Only update currentTime when !video.seeking -- this prevents jittery playback by waiting for the browser to finish rendering the previous seek before requesting a new one.\n#### 1H. Video Interaction Logic\n\n**Mobile/Tablet (touch):**\n- Videos auto-play alternately: left plays first, on `ended` event switches to right, on right `ended` switches back to left\n- Respects `prefers-reduced-motion`\n\n#### 1I. White Overlay\n- `id=\"outro-overlay\"`, `position: fixed, inset: 0`, `pointer-events-none`, `z-index: 12`\n- Background: #fff, opacity: 0 (controlled by scroll)\n\n#### 1J. Footer\n- `id=\"outro-footer\"`, `position: fixed`, `pointer-events-none`\n- Left: 16px, bottom: 32px (desktop) / 24px (mobile)\n- `mix-blend-mode: exclusion`, opacity: 0 (controlled by scroll)\n- Flex row, gap: 80px (desktop) / space-between (mobile)\n- Two spans: \"PRMPT (R) 2026\" and \"PRIVACY POLICY\"\n- Font: Inter Tight, 500, 13px (desktop) / 11px (mobile), letter-spacing -0.02em, uppercase, white\n\n---\n\n### SECTION 2: Black Panel (Gallery)\n\n#### Container\n- `position: fixed, inset: 0`, background: black, `z-index: 10`\n- Initially translated `translateY(100vh)` (off-screen below)\n- Slides up to `translateY(0)` during first 100vh of scroll via GSAP ScrollTrigger (scrub: true, ease: none)\n\n#### Inner Wrapper\n- `width: 100%`, `padding-top: min(400px, 40vh)`\n\n#### Grid Layout Algorithm\n- Responsive columns: 2 (< 640px), 3 (640-1024px), 4 (>= 1024px)\n- Each cell has `aspect-ratio: 2/3`\n- Layout function `buildLayout(count, cols)` creates rows:\n  - For each row `r`, compute primary column: `a = (r * 2 + (r % 2)) % cols`\n  - Place one image at column `a`\n  - Every 3rd row (`r % 3 === 0`), place a second image at `b = (a + 2) % cols` (or `(a+1)%cols` if same as a)\n  - Empty cells get `-1` (rendered as empty spacer divs)\n\n#### Card Behavior\n- Each card has class `bp-card`, `will-change: transform`\n- `transform: scale(0)` initially\n- `transform-origin`: cards in left half of grid get `right bottom`, right half get `left bottom`\n- Scale is computed per-frame in RAF based on card's vertical position:\n  - **Enter**: `Math.min(1, (vh - top) / (vh * 0.6))` -- scales from 0 to 1 as it enters viewport\n  - **Exit**: `Math.min(1, bottom / (vh * 0.4))` -- scales from 1 to 0 as it exits top\n  - Final scale: `Math.min(enter, exit)`\n  - If card is fully off-screen (bottom <= 0 or top >= vh): `scale(0)`\n\n#### Scroll Phases (RAF-based, NOT scroll events)\n- **Phase 1** (scrollY 0 to vh): Panel slides up. Cards are computed with panelOffset = `vh - scrollY`\n- **Phase 2** (scrollY > vh): Panel is fixed at top. Inner wrapper translates up: `translateY(-(scrollY - vh))`. Cards recomputed with phase2 offset.\n- **Outro** (scrollY > vh + maxScroll): White overlay fades in, product info slides up by `outroOffset` px, \"view\" button scales from 0 to 1, footer fades in. Progress: `(scrollY - vh - maxScroll) / (vh - 100)`\n\n#### Spacer Height Calculation\n- Set dynamically: `vh + maxScroll + 2 * vh` where `maxScroll = wrapScrollHeight - vh`\n\n---\n\n### CSS (index.css)\n\n```css\n@import \"tailwindcss\";\n\n.bp-card {\n  will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bp-card {\n    will-change: auto;\n  }\n}\n```\n\n---\n\n### Responsive Breakpoints\n- **Mobile**: < 640px\n- **Tablet**: 640px - 1024px\n- **Desktop**: >= 1024px\n\n---\n\n### Key Design Principles\n- All text overlays use `mix-blend-mode: exclusion` to remain visible against both light and dark backgrounds\n- No visible scroll bar interaction -- entirely RAF-driven position tracking\n- `pointer-events-none` on all overlaid UI elements\n- `user-select: none` on root container\n- Videos hidden (`visibility: hidden`) once scroll passes first viewport height\n- Circle symbol randomizes on scroll (throttled to 80ms)\n- Entry animations staggered: logo (0s), nav (0.15s), caption (0.3s), product info (0.45s)","url":"/prompts/prompt-hero"}},{"id":"rocket-pricing","object":"prompt","title":"Rocket Pricing","summary":"A preview-led pricing prompt for generating a polished AI-built interface.","category":"Pricing","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(55).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a `PricingSection` React component that matches the spec below exactly.\n\n## Stack & global setup\n\n- React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` exposed as `cn()` from `@/lib/utils`.\n- Dark theme. Page background `#000000`. Font: Inter (`font-inter`). Icons: Google **Material Symbols Outlined** (loaded globally).\n- Tailwind config must include semantic HSL tokens plus:\n  ```ts\n  theme.extend.colors.landing = {\n    surface: \"rgba(255,255,255,0.10)\",\n    \"surface-hover\": \"rgba(255,255,255,0.16)\",\n    border: \"rgba(255,255,255,0.10)\",\n  }\n  ```\n- `--background` / `--foreground` HSL tokens drive `bg-background` (dark) and `text-foreground` (near-white).\n\n## Helper components (reuse exact behavior)\n\n### `MIcon`\nMaterial Symbols span. Props: `name`, `size=20`, `weight=400`, `fill=0`, `grade=0`, `opticalSize=24`, `className`.\n```tsx\n<span\n  className={cn(\"material-symbols-outlined select-none leading-none\", className)}\n  style={{\n    fontSize: size,\n    fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`,\n  }}\n>{name}</span>\n```\n\n### `FadeUp`\n`framer-motion` wrapper: `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{once:true, amount:0.3}}`, `transition={{duration:0.6, delay, ease:[0.22,1,0.36,1]}}`. Props: `children`, `delay=0`, `className`.\n\n### `SpotlightBorder`\n1px gradient border that follows the cursor via CSS masks.\n- Props: `children`, `className`, `radius=\"2xl\"`, `size=520`, `intensity=0.5`.\n- Wrapper sets CSS vars `--spot-x`, `--spot-y` (default `-9999px`) updated on `pointermove` relative to element.\n- Two stacked layers using `-webkit-mask` + `mask` `linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)` with `mask-composite: exclude` to produce a 1px ring; the ring is painted with `radial-gradient(circle var(--size) at var(--spot-x) var(--spot-y), rgba(255,255,255, var(--intensity)), transparent 60%)`.\n- Outer ring: `rounded-2xl border border-white/10`. Inner highlight ring: thinner, brighter on hover. Pointer events on inner content only.\n\n### `PrimaryButton` / `SecondaryButton`\n- Both: `inline-flex items-center justify-center rounded-full`, Inter, leading-none, hover text-up-from-below animation (`AnimatedText`).\n- PrimaryButton: `bg-white/80 hover:bg-white text-black`. Size `sm` = `h-8 px-4 text-sm`.\n- SecondaryButton: `bg-landing-surface hover:bg-landing-surface-hover border border-landing-border text-foreground backdrop-blur-[2.5px] font-medium`. Size `sm` = `h-8 px-4 text-sm`.\n\n## Section structure — `PricingSection`\n\n```tsx\n<section id=\"pricing\" className=\"relative w-full bg-background py-12 sm:py-16\">\n  <div className=\"mx-auto max-w-[1080px] px-4 sm:px-6\">\n    {/* HEADER */}\n    <div className=\"mb-14 flex flex-col items-start gap-10 lg:flex-row lg:items-end lg:justify-between\">\n      <div className=\"max-w-2xl\">\n        <FadeUp>\n          <span className=\"mb-6 inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur\">\n            <span className=\"h-1.5 w-1.5 rounded-full bg-foreground/70\" />\n            Pricing\n          </span>\n        </FadeUp>\n        <FadeUp delay={0.1}>\n          <h2 className=\"text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground\">\n            Clear pricing plans\n            <br className=\"hidden sm:block\" /> that scale with you.\n          </h2>\n        </FadeUp>\n      </div>\n      <FadeUp delay={0.2}>\n        <p className=\"max-w-sm text-sm sm:text-base text-foreground/60\">\n          One-time payment. Lifetime access. Pick the plan that fits how far\n          you want to go.\n        </p>\n      </FadeUp>\n    </div>\n\n    {/* CARDS */}\n    <div className=\"mx-auto grid max-w-3xl grid-cols-1 gap-6 md:grid-cols-2\">\n      {plans.map(p => <PricingCard key={p.name} plan={p} />)}\n    </div>\n  </div>\n</section>\n```\n\n## Plans data (exact)\n\n```ts\ntype Feature = { text: string; included: boolean };\ntype Plan = {\n  name: string; price: string; originalPrice?: string; description: string;\n  features: Feature[]; featured?: boolean; badge?: string; bg: string;\n};\n\nconst plans: Plan[] = [\n  {\n    name: \"Course\",\n    price: \"159\", originalPrice: \"497\",\n    description: \"Once. Lifetime. 68% off.\",\n    bg: \"#161616\",\n    features: [\n      { text: \"All courses and videos\", included: true },\n      { text: \"All modules. Lifetime access.\", included: true },\n      { text: \"AI Builder\", included: true },\n      { text: \"Unlimited Templates\", included: false },\n      { text: \"Unlimited Motion Videos\", included: false },\n    ],\n  },\n  {\n    name: \"Course + Lovable Templates\",\n    price: \"239\", originalPrice: \"697\",\n    description: \"Once. Lifetime. Best deal.\",\n    bg: \"#252525\",\n    features: [\n      { text: \"All courses and videos\", included: true },\n      { text: \"All modules. Lifetime access.\", included: true },\n      { text: \"AI Builder\", included: true },\n      { text: \"Unlimited Templates\", included: true },\n      { text: \"Unlimited Motion Videos\", included: true },\n    ],\n    featured: true,\n    badge: \"Best Value\",\n  },\n];\n```\n\n## `PricingCard`\n\n```tsx\n<SpotlightBorder radius=\"2xl\" size={460} intensity={0.5}\n  className=\"relative h-full p-2 sm:p-3\">\n  <div\n    className=\"relative flex h-full flex-col rounded-2xl border border-white/10 p-7 sm:p-8\"\n    style={{ backgroundColor: plan.bg }}\n  >\n    {plan.badge && (\n      <div className=\"absolute -top-3 left-1/2 -translate-x-1/2 rounded-full border border-white/15 bg-white px-3 py-1 text-xs font-medium text-black\">\n        {plan.badge}\n      </div>\n    )}\n\n    <FadeUp delay={0}>\n      <div className=\"text-[11px] uppercase tracking-[0.2em] text-foreground/60\">\n        {plan.name}\n      </div>\n    </FadeUp>\n    <div className=\"mt-3 border-t border-white/10\" />\n\n    <FadeUp delay={0.1}>\n      <div className=\"mt-10 flex items-baseline gap-2\">\n        <span className=\"text-[2.75rem] leading-none font-normal tracking-tight text-foreground\">${plan.price}</span>\n        {plan.originalPrice && (\n          <span className=\"text-lg text-foreground/40 line-through\">${plan.originalPrice}</span>\n        )}\n      </div>\n    </FadeUp>\n\n    <FadeUp delay={0.2}>\n      <p className=\"mt-4 text-sm leading-relaxed text-foreground/60\">{plan.description}</p>\n    </FadeUp>\n\n    <FadeUp delay={0.3}>\n      <div className=\"mt-7\">\n        {plan.featured\n          ? <PrimaryButton href=\"/auth?mode=signup\" size=\"sm\">Get Started</PrimaryButton>\n          : <SecondaryButton href=\"/auth?mode=signup\" size=\"sm\">Get Started</SecondaryButton>}\n      </div>\n    </FadeUp>\n\n    <FadeUp delay={0.4}>\n      <ul className=\"mt-7 flex flex-1 flex-col gap-2\">\n        {plan.features.map((f, i) => (\n          <li key={f.text}\n            className={cn(\n              \"flex items-center gap-3 py-4 text-sm\",\n              i !== 0 && \"border-t border-white/10\",\n              f.included ? \"text-foreground/85\" : \"text-foreground/40\"\n            )}>\n            <span className={cn(\n              \"flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border\",\n              f.included ? \"border-white/20 bg-white/[0.06]\" : \"border-white/10 bg-transparent\"\n            )}>\n              {f.included\n                ? <MIcon name=\"check\" size={12} className=\"text-foreground\" />\n                : <MIcon name=\"close\" size={12} className=\"text-foreground/50\" />}\n            </span>\n            {f.text}\n          </li>\n        ))}\n      </ul>\n    </FadeUp>\n  </div>\n</SpotlightBorder>\n```\n\n## Acceptance checklist\n\n- Section id `pricing`, `bg-background`, vertical padding `py-12 sm:py-16`, max width `1080px`.\n- Header: pill (\"Pricing\" with dot), heading \"Clear pricing plans / that scale with you.\" (line break ≥sm), right-aligned paragraph (max-w-sm) on `lg+`. All three with staggered `FadeUp` delays 0, 0.1, 0.2.\n- Cards grid: `max-w-3xl mx-auto`, `gap-6`, 1 col → 2 cols at `md`.\n- Card 1 bg `#161616`, card 2 bg `#252525` with \"Best Value\" pill (`-top-3`, white bg, black text), featured uses `PrimaryButton`, other uses `SecondaryButton`.\n- `SpotlightBorder` 1px cursor-following ring on each card (size 460, intensity 0.5).\n- Card content order: eyebrow (uppercase, `text-[11px] tracking-[0.2em]`), divider, price row (`$2.75rem` + line-through original `text-foreground/40`), description, button, feature list.\n- Feature rows: `py-4`, divided by `border-t border-white/10` except first. Included = 20px circle `border-white/20 bg-white/[0.06]` with check; excluded = transparent circle with close, text `text-foreground/40`.\n- Inner card `FadeUp` stagger: 0, 0.1, 0.2, 0.3, 0.4.\n- Buttons link to `/auth?mode=signup`.\n- All colors via HSL tokens / declared landing surface tokens; never hardcode hex outside the two card backgrounds and `#000000`.","url":"/prompts/rocket-pricing"}},{"id":"mind-body-healing","object":"prompt","title":"Mind-Body Healing","summary":"A preview-led medicine prompt for generating a polished AI-built interface.","category":"Medicine","subcategory":"Health & wellness","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260716_103110_f5ec790a-0696-4637-a556-a0f3917d92f6.png&w=1920&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/brainhealthArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page hero landing page for a holistic wellness brand called \"Vibrant Wellness.\" Use React, TypeScript, Tailwind CSS, and Lucide React icons. Load Google Fonts \"Inter\" (weights 300, 400, 500, 600, 700) via link tags in the HTML head. The entire page is a full-screen (100vh) section with a looping background video and liquid glass UI elements overlaid on top.\n\n**BACKGROUND VIDEO**\n\nFull-viewport autoplaying, looping, muted, playsInline video with `object-cover`, positioned absolute inset-0. Use this exact URL:\n`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260715_082433_69699cf8-444b-4484-93cc-053e57896dfd.mp4`\n\n**LIQUID GLASS EFFECT**\n\nCreate a `.liquid-glass` CSS class applied to the nav pill, avatar circles, badge, and CTA button:\n- `background: rgba(255,255,255,0.01)` with `background-blend-mode: luminosity`\n- `backdrop-filter: blur(4px)` (with -webkit prefix)\n- No border\n- `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`\n- `position: relative; overflow: hidden`\n- `::before` pseudo-element creating a gradient border: absolute inset-0, border-radius inherit, padding 1.4px, background is a vertical linear-gradient from rgba(255,255,255,0.45) at 0%, to 0.15 at 20%, transparent at 40-60%, back to 0.15 at 80% and 0.45 at 100%. Use the mask-composite exclude trick (`-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude`) so the gradient only shows as a border. Set `pointer-events: none`.\n\n**NAVIGATION (z-20, top)**\n\nFlex row, justify-between, padding px-5 pt-6 / sm:px-8 sm:pt-8 / md:px-16 lg:px-20.\n- Left: custom SVG logo (32x32, md:36x36), white fill, viewBox 0 0 256 256, path: `M 128 128 C 198.692 128 256 185.308 256 256 L 151.883 256 C 149.812 220.307 120.213 192 84 192 C 47.787 192 18.188 220.307 16.117 256 L 0 256 C 0 185.308 57.308 128 128 128 Z M 104.117 0 C 106.188 35.694 135.787 64 172 64 C 208.213 64 237.812 35.694 239.883 0 L 256 0 C 256 70.692 198.692 128 128 128 C 57.308 128 0 70.692 0 0 Z`\n- Center (desktop only, hidden on mobile): liquid-glass rounded-full pill (px-8 py-3) with three links — \"Home\" (text-white), \"Our Approach\" and \"Healing Methods\" (text-white/70, hover:opacity-100). All text-sm font-medium.\n- Right (desktop only): liquid-glass circle (h-10 w-10 rounded-full) containing Lucide `CircleUserRound` (h-5 w-5, text-white/80, strokeWidth 1.5).\n- Right (mobile only, md:hidden): liquid-glass circle button (h-10 w-10 rounded-full, z-50). Animated icon swap between Lucide `Menu` and `X` using absolute positioning with rotate-90 scale-0 opacity-0 transitions (duration-300) toggled by a `menuOpen` state.\n\n**MOBILE MENU OVERLAY (z-10, fixed inset-0, md:hidden)**\n\nToggle visibility with 500ms ease-out opacity transition. Background: black/80 with backdrop-blur-xl. Centered flex column (gap-8) with the same three nav links at text-2xl font-medium. Below links: liquid-glass avatar circle + \"Account\" text (text-sm font-light text-white/60). Links close the menu on click. Content slides from -translate-y-8 to 0.\n\n**MAIN CONTENT (z-10)**\n\nFlex column, justify-between, fills remaining viewport height. On mobile, fades to opacity-0 and pointer-events-none when menu is open.\n\nTop block (mt-14 sm:mt-20 md:mt-28, max-w-2xl):\n1. Badge — liquid-glass pill (rounded-full, inline-flex, gap-2.5 sm:gap-3, px-3 py-1.5 sm:px-4 sm:py-2, mb-5 sm:mb-6). Contains 4 overlapping avatars (flex -space-x-2, each h-5 w-5 sm:h-6 sm:w-6, rounded-full, border-2 border-white/20, object-cover) using these Pexels URLs:\n   - `https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=100`\n   - `https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=100`\n   - `https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=100`\n   - `https://images.pexels.com/photos/697509/pexels-photo-697509.jpeg?auto=compress&cs=tinysrgb&w=100`\n   Followed by text \"our path to natural wellness\" (text-xs sm:text-sm, font-light, text-white/80).\n2. Heading — `<h1>` \"Heal Your Body\" + `<br/>` + \"Naturally\". Style: text-4xl sm:text-5xl md:text-6xl lg:text-7xl, font-normal, leading-[1.05], text-white, inline letterSpacing -0.05em.\n3. Subtitle — `<p>` \"Holistic wellness. Transformative results.\" mt-4 sm:mt-5, text-sm sm:text-base md:text-lg, font-light, text-white/70.\n4. CTA button — liquid-glass, rounded-full, px-6 py-3 sm:px-7 sm:py-3.5, mt-6 sm:mt-8, text-sm font-medium text-white, transition duration-300, hover:bg-white/10. Text: \"Begin Your Journey\".\n\n**BOTTOM STATS (flex, items-end, gap-6 sm:gap-10 md:gap-16)**\n\nTwo stat columns:\n1. First: a small triangular dot-pattern icon built from 9 absolutely-positioned 2.5px white/60 squares inside a 20x20 box; value \"48 Hours\" (text-xl sm:text-2xl md:text-3xl, font-normal, text-white); label \"Initial Consultation\" (text-xs sm:text-sm, font-light, text-white/60).\n2. Second: a 3x3 grid icon (grid-cols-3, gap-[2px]) of 4px rounded cells alternating bg-white/60 and bg-white/0 in a checkerboard; value \"Initial Consultation\" (same sizing); label \"Healing Sessions\" (text-xs sm:text-sm, font-light, text-white/60).","url":"/prompts/mind-body-healing"}},{"id":"innovation-lab","object":"prompt","title":"Innovation Lab","summary":"A preview-led technology prompt for generating a polished AI-built interface.","category":"Technology","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_102913_d13e11c1-91c9-4617-952b-72c446f8838e.png&w=1280&q=85","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/buttterflies%20purpleArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a full-screen immersive landing page for a fictional creative-tech studio called \"VortxLab Creations\" (brand: \"V O R T X\"). The page features a looping background video, a glassmorphism-cut button aesthetic with octagonal clip-path shapes, and staggered fade-up entrance animations on every element.\n\n### Tech Stack\n- React + TypeScript + Vite\n- Tailwind CSS (configured with `fontFamily.inter: ['Inter', 'sans-serif']`)\n- `lucide-react` for icons (only `ArrowRight` used)\n- Google Fonts: **Inter** weights 300–900, loaded via `<link>` in index.html with preconnect to fonts.googleapis.com and fonts.gstatic.com\n\n### Global CSS (index.css)\n- `@tailwind base/components/utilities`\n- `body { font-family: 'Inter', sans-serif; background-color: #000000; }`\n- Three octagonal clip-path button classes:\n\n**`.btn-cut`** (large buttons, 12px cut):\n```\nclip-path: polygon(\n  12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px),\n  calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px\n);\n```\n\n**`.btn-cut-border`** (outline variant): `position: relative; background: white;` same clip-path as above. A `::before` pseudo-element with `inset: 1px; background: black;` and the same clip-path but offset by 1px (11px values), `z-index: 0`. Direct children get `position: relative; z-index: 1;` so text shows on black.\n\n**`.btn-cut-sm`** (small social buttons, 8px cut): same polygon but with 8px values.\n\n### Animations (in index.css)\n```css\n@keyframes fadeUp {\n  from { opacity: 0; transform: translateY(24px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n.anim-stagger {\n  opacity: 0;\n  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n.anim-fade {\n  opacity: 0;\n  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n```\n\n### Background Video\nUse this exact CloudFront URL as the `<video src>`:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260717_120352_eb988725-1351-43b3-8095-16e4a1005e3d.mp4\n```\nAttributes: `autoPlay loop muted playsInline`, class `absolute inset-0 w-full h-full object-cover anim-fade` with `animationDelay: '0.2s'`.\n\n### Layout Structure (App.tsx)\n\nRoot: `div.h-screen.w-full.bg-black.p-3.md:p-4.font-inter`\n → Inner: `div.w-full.h-full.rounded-2xl.flex.flex-col.overflow-hidden.relative.bg-black` (this is the liquid-glass container — rounded corners, overflow hidden, video absolute behind content)\n   → `<video>` (absolute background, as above)\n\n**Navbar** (`nav.relative.z-10.flex.items-center.justify-between.px-6.md:px-10.pt-6.md:pt-8`):\n- **Logo block** (`.anim-stagger`, delay 0.1s): custom SVG logo (256×256 viewBox, white fill, four quarter-circle shapes forming a vortex/plus pattern), sized `w-14 h-14 md:w-16 md:h-16`. Below it: `<span>` \"V O R T X\" — `text-white text-[10px] md:text-xs tracking-[0.4em] mt-1 font-light`.\n- **Nav buttons** (`.anim-stagger`, delay 0.2s, `flex items-center gap-3`):\n  - \"Neural Synergy\" — `hidden md:block px-5 py-2.5 text-white text-sm hover:bg-white/10 btn-cut-border` (text wrapped in `<span>`)\n  - \"Cyber Synthesis\" — `hidden md:block px-5 py-2.5 bg-white text-black text-sm hover:bg-white/90 btn-cut`\n\n**Main content** (`div.relative.z-10.flex-1.flex.flex-col.justify-between.px-6.md:px-10.pb-8.md:pb-10`):\n\n*Top section* (`div.flex-1.flex.items-center.relative`):\n- **Left column** (`.anim-stagger`, delay 0.4s) — `hidden lg:flex flex-col gap-6 absolute left-0 top-[18%]`:\n  - Paragraph: `text-white/80 text-base leading-relaxed max-w-[220px]` — text \"Come with us<br>exploring the<br>horizon\"\n  - Decorative group (`flex flex-col gap-2 mt-4`):\n    - Two `4×4` circles: `rounded-full border border-white/40` in a `flex items-center gap-1` row\n    - Row (`flex items-center gap-2 mt-2`): `<span>` \"Perpetual<br>Immersion\" (`text-white/70 text-xs`) + `<span>` \"01\" (`text-white/50 text-xs`)\n- **Center heading** (`.anim-stagger`, delay 0.5s) — `div.w-full.text-center`:\n  - `<h1>` `text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal leading-[1.1] tracking-[-0.04em]` with inline `textShadow: '0 2px 12px rgba(0,0,0,0.25)'`. Three lines:\n    ```\n    Forging Tomorrow\n    Virtual Horizon\n    VortxLab Creations\n    ```\n\n*Bottom row* (`div.grid.grid-cols-1.md:grid-cols-3.gap-6.items-center.mt-8`) — **3 columns; on mobile all center-aligned, on md+ outer columns right-aligned**:\n- **Col 1** (`.anim-stagger`, delay 0.7s) — `flex items-center justify-center md:justify-end`:\n  - `<p>` `text-white text-sm leading-relaxed max-w-[260px] text-center md:text-left md:ml-auto` — \"We push past conventions, reshaping the virtual terrain with next-level technologies.\"\n- **Col 2** (`.anim-stagger`, delay 0.85s) — `flex flex-col items-center gap-8 md:gap-24` (smaller gap on mobile, large gap on desktop):\n  - `<span>` `text-white text-2xl md:text-3xl font-medium` — \"Net Dynamics\"\n  - `<button>` `w-full max-w-[280px] py-3.5 bg-white flex items-center justify-center gap-2 text-black hover:bg-white/90 transition-colors group btn-cut`:\n    - `<span>` `text-sm font-medium` — \"Discover Now\"\n    - `<ArrowRight className=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" />`\n- **Col 3** (`.anim-stagger`, delay 1s) — `flex items-center justify-center md:justify-end gap-3`:\n  - Three social buttons, each `w-10 h-10 bg-white flex items-center justify-center text-black hover:bg-white/90 transition-colors btn-cut-sm`, containing custom inline SVGs (`w-4 h-4 fill=\"currentColor\"`, viewBox `0 0 24 24`): **X (Twitter)**, **LinkedIn**, **Facebook** — standard brand path data.\n\n### Staggered Animation Delays (summary)\n| Element | Class | Delay |\n|---|---|---|\n| Background video | `anim-fade` | 0.2s |\n| Logo + brand | `anim-stagger` | 0.1s |\n| Nav buttons | `anim-stagger` | 0.2s |\n| Left column | `anim-stagger` | 0.4s |\n| Center heading | `anim-stagger` | 0.5s |\n| Bottom col 1 | `anim-stagger` | 0.7s |\n| Bottom col 2 | `anim-stagger` | 0.85s |\n| Bottom col 3 | `anim-stagger` | 1s |\n\n### Responsive Rules\n- Page padding: `p-3` mobile / `md:p-4` desktop\n- Nav and content horizontal padding: `px-6` / `md:px-10`\n- Left column: hidden below `lg`\n- Nav buttons: hidden below `md`\n- Heading scales: `text-3xl → sm:4xl → md:5xl → lg:6xl → xl:7xl`\n- Bottom row: single column on mobile, 3 columns from `md` up\n- On mobile: bottom-row columns 1 & 3 are **center-aligned** (`justify-center`); on `md+` they're `justify-end`\n- Column 2 gap: `gap-8` mobile / `md:gap-24` desktop\n- Social button text and description text: `text-center` on mobile, `md:text-left` (with `md:ml-auto`)\n\n### index.html\n- `<title>VortxLab Creations</title>`\n- Google Fonts Inter link: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`\n\n### Tailwind config\n```js\ntheme: { extend: { fontFamily: { inter: ['Inter', 'sans-serif'] } } }\n```\n\n---","url":"/prompts/innovation-lab"}},{"id":"neo-museum","object":"prompt","title":"Neo Museum","summary":"A preview-led website prompt for generating a polished AI-built interface.","category":"Website","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(75).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Project Setup\n\nStack: React 19 + Vite 6 + Tailwind CSS 4 + Motion (Framer Motion) + Lucide React icons + TypeScript\n\npackage.json dependencies:\n- `react`, `react-dom` ^19.0.1\n- `vite` ^6.2.3\n- `@tailwindcss/vite` ^4.1.14, `tailwindcss` ^4.1.14\n- `motion` ^12.23.24\n- `lucide-react` ^0.546.0\n- `@vitejs/plugin-react` ^5.0.4\n- `typescript` ~5.8.2\n\nFonts (loaded via Google Fonts in `index.css`):\n- Sans: Inter (weights: 300, 400, 500, 600)\n- Mono: JetBrains Mono (weights: 400, 500)\n\n```css\n/* index.css */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');\n@import \"tailwindcss\";\n\n@theme {\n  --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace;\n}\n\n@layer utilities {\n  .text-mega {\n    font-size: 21vw;\n    line-height: 0.75;\n    letter-spacing: -0.04em;\n  }\n}\n```\n\nGlobal styling: Background `#fcfcfc`, text `#111`, selection color `bg-black text-white`, `overflow-x-hidden`, `font-sans` (Inter).\n\n---\n\nDATA\n\n```tsx\nconst chaptersData = [\n  { name: \"Age of Dinosaurs\", image: \"https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624247/01_udnber.png\" },\n  { name: \"Fossils of Ancient Life\", image: \"https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624374/02_pmvxxl.png\" },\n  { name: \"Reptiles of the Mesozoic\", image: \"https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624236/03_hcp3jc.png\" },\n  { name: \"Marine Fossil Gallery\", image: \"https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624256/04_get63z.png\" },\n  { name: \"Prehistoric Giants\", image: \"https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624251/05_kz1tyu.png\" }\n];\n```\n\n---\n\nSTATE\n\n```tsx\nconst [showVideo, setShowVideo] = useState(false);\nconst [activeChapter, setActiveChapter] = useState(2); // starts at \"Reptiles of the Mesozoic\"\nconst [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n```\n\n- `showVideo` flips to `true` after a 2800ms delay (setTimeout)\n- `activeChapter` auto-cycles every 3500ms via setInterval, wrapping `(prev + 1) % 5`\n\n---\n\nANIMATION VARIANTS\n\n```tsx\nconst fadeUp = {\n  initial: { opacity: 0, y: 20 },\n  animate: { opacity: 1, y: 0 },\n};\n\nconst letterBlock = {\n  initial: { y: 120, opacity: 0 },\n  animate: { \n    y: 0, \n    opacity: 1, \n    transition: { duration: 1.2, ease: [0.16, 1, 0.3, 1] } \n  }\n};\n```\n\n---\n\nSECTION 1: HERO (full viewport height)\n\nContainer: `relative w-full min-h-screen flex flex-col overflow-hidden`\n\n1A. HEADER (NHM Logo)\n\n- `motion.header` with `staggerChildren: 0.1, delayChildren: 0.1`\n- Padding: `pt-6 px-6 md:px-16`, `z-20`\n- The \"NHM\" logo is a custom inline SVG with `viewBox=\"0 0 840 100\"`, `fill-[#111]`, full width\n- The SVG is wrapped in `motion.h1` with `variants` that animate from `scale: 1.03` to `scale: 1` with `staggerChildren: 0.06, delayChildren: 0.1`\n- Each polygon of each letter uses the `letterBlock` variant (slides up from `y: 120`)\n- Letter N (translate 0,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, diagonal `0,0 33,0 214,100 181,100`\n- Letter H (translate 280,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, crossbar `14,43 200,43 200,57 14,57`\n- Letter M (translate 560,0): Four polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `266,0 280,0 280,100 266,100`, left diagonal `0,0 26,0 153,100 127,100`, right diagonal `254,0 280,0 153,100 127,100`\n\n1B. SUB-NAV BAR\n\n- Below the SVG logo, `flex justify-between items-start mt-8`\n- Font: `text-[10px] md:text-[11px] font-mono tracking-[0.2em] uppercase`\n- Uses `fadeUp` variant with `duration: 0.8, ease: \"easeOut\"`\n\nLeft column (15% width): Three lines -- \"Natura\" / \"History\" / \"Museum\"\n\nArrow separator (5% width, hidden on mobile): `ArrowRight` from lucide, size 14, strokeWidth 1, `text-gray-400`\n\nCenter column (flex-1 on mobile, 30% on desktop): \"Exploring the story of life on earth through science, discovery and wonder.\" -- Split differently on desktop (3 lines) vs mobile (4 lines). `text-gray-800 leading-relaxed font-mono`\n\nArrow separator (5% width, hidden on mobile): Same as above\n\nRight column (15% width, hidden on mobile): Nav links list -- Visit, Exhibitions, Discover, Learn, About. `text-gray-800`, `hover:text-black hover:underline`\n\nHamburger button (far right, z-60): Two horizontal lines (`w-8 h-[1.5px] bg-black`), `gap-[6px]`. Hover: first line shrinks to `w-6`, second expands to `w-10`. When open: first rotates 45deg + translateY, second rotates -45deg + translateY (forming an X). Transition: `duration-300`.\n\n1C. MOBILE MENU OVERLAY\n\n- `AnimatePresence` wrapping a `motion.div`\n- Appears below the header, slides in from `y: -20`, `opacity: 0` to `y: 0, opacity: 1`\n- `bg-[#fcfcfc] border-b border-gray-200 shadow-xl`, only visible on `md:hidden`\n- Contains the same nav links as the desktop version, `text-sm font-mono tracking-[0.2em] uppercase`, `space-y-6`\n\n1D. BACKGROUND VIDEO\n\n- Appears after 2800ms delay (controlled by `showVideo` state)\n- `absolute top-0 left-0 w-full h-full pointer-events-none z-0`\n- Video: `autoPlay loop muted playsInline`, `w-full h-full object-cover`\n- Video URL: `https://res.cloudinary.com/dsdxaxkiz/video/upload/v1779624998/magnific_use-img-2-as-the-exact-ba_Piu3X0W42C_wnrc8f.mp4`\n\n1E. LEFT SIDEBAR CONTENT\n\n- `motion.div` with `staggerChildren: 0.15, delayChildren: 0.6`\n- Position: `px-10 md:px-16`, `mt-20 sm:mt-28 md:mt-32`, `w-[320px]`, `z-10`\n\nSection indicator: `01` + horizontal line (`w-16 h-[1.5px] bg-black/20`), `text-xs font-mono`\n\nHeadline: \"TIMELESS WONDERS\" -- `text-[3.5rem] md:text-[5rem] font-normal tracking-tight leading-[1]`. Line break between \"TIMELESS\" and \"WONDERS\".\n\nDescription: \"Step into the natural world and / discover the stories written / millions of years ago.\" -- `text-[13px] md:text-[14px] text-gray-700 w-[240px] leading-[1.6]`\n\nCTA Button (\"Explore Now\"):\n- Container: `bg-[#1a1a1a] px-6 py-3.5 border border-[#1a1a1a] rounded-md shadow-sm`\n- Hover: slides up 0.5px, adds `shadow-[3px_3px_0px_rgba(17,17,17,0.5)]`\n- Active: resets translate and shadow\n- Has a sliding background panel: `bg-[#fcfcfc]` that slides from `-translate-x-[101%]` to `translate-x-0` on hover, `duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]`\n- Icon: Custom SVG leaf/plant shape (4 paths forming a stylized leaf), white by default, turns `#111` on hover with `scale-110 -rotate-12 -translate-y-1` transform\n- Text: \"Explore Now\", `text-[15px] font-medium`, white turning to `#111` on hover\n\n1F. RIGHT SIDEBAR (hidden on mobile)\n\n- `motion.div` with `staggerChildren: 0.15, delayChildren: 0.9`\n- Position: `w-[200px] mt-12 md:mt-20`, `hidden md:flex`\n\nSpecimen info: \"Tyrannosaurus Rex\" heading (`text-[10px] font-bold font-mono tracking-widest uppercase`), subtext \"Late Cretaceous period / 68-66 million years ago\" (`text-[12px] text-gray-600 leading-[1.6]`)\n\nStats: \"Length\" label + \"12.3 m\" value, \"Height\" label + \"4.0 m\" value. Labels: `text-[10px] font-mono tracking-widest uppercase text-gray-500`. Values: `text-[13px] font-medium`.\n\nView Details button: Circle (`w-10 h-10 rounded-full border border-gray-400`) with `Plus` icon (size 16, strokeWidth 1.5), text \"View Details\" (`text-[10px] font-mono uppercase tracking-widest font-bold`). Hover: circle gets `border-black bg-[#111]`, icon turns white.\n\n1G. BOTTOM-LEFT \"SCROLL TO EXPLORE\"\n\n- `absolute bottom-10 left-[2.5rem] md:left-[4rem]`, `hidden md:flex`\n- Fade up animation: `delay: 1.2`\n- Circle (`w-12 h-12 rounded-full border border-gray-300`) containing two thin vertical lines (`w-[1px] h-[12px] bg-gray-600`, `gap-[4px]`) representing a pause icon\n- Text: \"Scroll to explore\" -- `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-semibold`\n\n---\n\nSECTION 2: \"EXPLORE OUR WORLD\"\n\nContainer: `relative w-full min-h-[75vh] md:min-h-screen bg-[#fcfcfc]`, flex column centered, `pt-24 md:pt-32 pb-0 z-20`\n\n2A. SECTION LABEL\n\n`[ 02 ] Explore Our World` -- `text-[10px] md:text-[11px] font-mono tracking-[0.2em]`, `mb-12`. \"02\" in `text-gray-500`, \"Explore Our World\" in `text-gray-900 font-bold uppercase`.\n\n2B. MAIN HEADING\n\n\"Unearth the stories of our planet's past through fossils, minerals, and ancient wonders.\" -- `text-[2.2rem] md:text-[3.5rem] lg:text-[4.2rem] leading-[1.1] font-medium tracking-tight text-[#111]`, max-width 1000px, text-center. Line break on desktop after \"past\". Animates with `whileInView` from `y: 40, opacity: 0` to `y: 0, opacity: 1`, `once: true`, margin `-100px`.\n\n2C. ACTION PILLS\n\nFive pill buttons in a flex-wrap row, `gap-3 md:gap-4`, `mb-10 md:mb-24`. Staggered reveal animation (`staggerChildren: 0.1, delayChildren: 0.3`). Each pill: `rounded-full border border-gray-300 text-[11px] font-medium uppercase tracking-wider bg-white/50 backdrop-blur-sm text-gray-800`. Hover: `border-black bg-black text-white`. Icons from lucide (size 14, strokeWidth 2):\n\n1. `Bone` + \"Dinosaurs\"\n2. `Dna` + \"Ancient Life\"\n3. `Gem` + \"Minerals\"\n4. `Leaf` + \"Fossils\"\n5. `BookOpen` + \"Learn More\"\n\n2D. SPACER\n\n`min-h-[220px] md:min-h-[450px]` -- provides room for the pterodactyl image from Section 3 to overlap upward.\n\n2E. BOTTOM TEXT\n\nAbsolute positioned at bottom, `px-8 md:px-16 pb-8 md:pb-12`, `pointer-events-none`. Two text elements at `justify-between`:\n- Left: \"WE DON'T JUST TELL STORIES.\"\n- Right: \"PALEONTOLOGY (C) 2026\"\n- Both: `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-medium`, hidden on mobile.\n\n---\n\nSECTION 3: \"ANCIENT COLLECTION\" (Dark Section)\n\nContainer: `relative w-full bg-[#0a0a0a] text-white flex flex-col z-30`\n\n3A. PTERODACTYL IMAGE (Overlapping)\n\n- Absolute positioned at top, centered horizontally (`left-1/2 -translate-x-1/2`)\n- Width: `w-[160vw] md:w-[1100px]`\n- Image URL: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779625001/ChatGPT_Image_May_23_2026_12_24_44_PM_1_lv1dne.png`\n- Animates with `whileInView` from `y: \"-65%\", opacity: 0` to `y: \"-78%\", opacity: 1`, `duration: 1.4, ease: \"easeOut\"`, viewport margin `100px`\n- `pointer-events-none z-0`, `mix-blend` not applied here\n\n3B. HEADING AREA\n\n- Padding: `px-8 md:px-16 pt-32 md:pt-48 mb-16`, `z-10`\n- Two-column layout on xl (`flex-col xl:flex-row justify-between`)\n\nLeft -- Main heading: \"Curated from millions of years of wonder [3 circle icons] & discovery.\" -- `text-[1.8rem] md:text-[3rem] lg:text-[3.8rem] xl:text-[4rem] leading-[1.15] font-medium tracking-tight text-white`. The three circle icons are inline (`inline-flex gap-2 md:gap-3 align-middle mx-2 md:mx-4 translate-y-[-4px]`), each `w-10 h-10 md:w-14 md:h-14 rounded-full border border-gray-600 bg-black text-gray-400`. Hover: `bg-white text-black border-white`. Icons: `Bone`, `Dna`, `Leaf` (size 22).\n\nRight -- Tagline + pills:\n- Tagline: \"WE DON'T JUST DISPLAY FOSSILS / WE SHARE EARTH'S STORY\" -- `text-[9px] md:text-[10px] font-mono tracking-widest text-gray-400 uppercase mb-6 leading-relaxed`\n- Three pills: \"Educational\", \"Authentic\", \"Inspiring\" -- `px-5 py-2 rounded-full border border-gray-600 text-[9px] font-mono tracking-widest uppercase text-gray-300`. Hover: `bg-white text-black border-white`.\n\n3C. TWO-COLUMN PANEL\n\nSeparated by `h-[1px] bg-gray-800` line. Flex row on desktop, column on mobile.\n\nLeft panel (35% width):\n- `border-r border-gray-800` on desktop, `border-b` on mobile\n- `min-h-[400px] md:min-h-[500px]`\n- Top: `***` text (`text-gray-500 text-xl tracking-[0.3em]`)\n- Center: Chapter image using `SandTransitionImage` component (SVG filter-based sand/dissolve transition). Image: `absolute inset-0 w-[80%] h-[80%] m-auto object-contain mix-blend-lighten`. Uses `AnimatePresence mode=\"wait\"`.\n- Bottom: Chapter counter `01 / 05` style, with animated number (`motion.div` slides vertically). `text-[10px] font-mono tracking-widest text-[#888] uppercase`. Counter numeral color `#888`, divider `text-[#333]`.\n\nRight panel (65% width):\n- Top bar: \"Explore the past. Understand the present.\" + animated \"Chapter 0X\" label. `border-b border-gray-800 p-8 text-[10px] font-mono text-gray-400 tracking-widest`.\n- Chapter list: 5 items, each `border-b border-gray-800/80 py-8`. Active: `text-white`, inactive: `text-[#444] hover:text-[#999]`. Chapter name: `text-2xl md:text-[2rem] font-medium tracking-tight`. Active item shows `ArrowUpRight` icon (size 22, strokeWidth 1, `text-gray-400`) that animates in/out.\n- Clicking a chapter sets `activeChapter`.\n\n3D. BOTTOM FOOTER\n\n- `h-[1px] bg-gray-800` divider\n- Text: \"DIGGING INTO OUR PLANET'S PAST\" -- `px-8 py-8 text-[10px] font-mono tracking-widest text-gray-500 uppercase bg-[#0a0a0a]`\n\n---\n\nSandTransitionImage COMPONENT\n\nA custom component that creates a sand/particle dissolve effect using SVG filters:\n\n```tsx\nfunction SandTransitionImage({ src, alt, className }) {\n  // Uses usePresence() from motion/react for AnimatePresence awareness\n  // Unique filterId per instance via useRef\n  // requestAnimationFrame loop over 900ms\n  // Easing: entering = quartic ease-out (1 - Math.pow(1-t, 4)), exiting = cubic (Math.pow(t, 3))\n  // SVG filter chain:\n  //   1. feTurbulence: fractalNoise, baseFrequency 1.8, numOctaves 4\n  //   2. feDisplacementMap: scale up to 150 based on progress\n  //   3. feOffset: dy up to -80 (enter) or 120 (exit), dx up to -30/+30\n  //   4. feGaussianBlur: up to 6px\n  //   5. feColorMatrix: opacity fades (1 - progress * 1.2)\n  // Image has crossOrigin=\"anonymous\" and referrerPolicy=\"no-referrer\"\n}\n```\n\n---\n\nALL EXTERNAL ASSET URLs\n\nVideo:\n- `https://res.cloudinary.com/dsdxaxkiz/video/upload/v1779624998/magnific_use-img-2-as-the-exact-ba_Piu3X0W42C_wnrc8f.mp4`\n\nImages:\n- Chapter 1: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624247/01_udnber.png`\n- Chapter 2: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624374/02_pmvxxl.png`\n- Chapter 3: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624236/03_hcp3jc.png`\n- Chapter 4: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624256/04_get63z.png`\n- Chapter 5: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624251/05_kz1tyu.png`\n- Pterodactyl: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779625001/ChatGPT_Image_May_23_2026_12_24_44_PM_1_lv1dne.png`\n\n(Note: these are Cloudinary URLs, not CloudFront. The project uses Cloudinary for all hosted media assets.)\n\n---\n\nKEY DESIGN DETAILS\n\n- Color palette: `#fcfcfc` (off-white bg), `#111` / `#1a1a1a` (near-black), `#0a0a0a` (dark section bg). Gray scale via Tailwind: `gray-300` through `gray-800`.\n- No purple/indigo anywhere. Strictly monochrome black/white/gray.\n- Typography hierarchy: Large display headings (3.5-5rem), mono labels (10-11px), body text (13-14px).\n- Spacing: 8px base system throughout.\n- Transitions: Most hover transitions 300-700ms. Button slide effect uses `cubic-bezier(0.16, 1, 0.3, 1)`. Letter animations use same cubic bezier.\n- The page is entirely a single `App.tsx` component plus the `SandTransitionImage` helper function in the same file.","url":"/prompts/neo-museum"}},{"id":"vaultshield","object":"prompt","title":"VaultShield","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(64).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a fullscreen hero section for a password manager app called \"VaultShield\" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons.\n\n---\n\n## Fonts\n\n- **Heading font:** `Helvetica Now Display Bold` loaded from `https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold` (add as a `<link>` in `index.html`)\n- **Body font:** `Inter` (weights 300-900) loaded from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap` (imported in CSS)\n\n## CSS Variables\n\n```css\n:root {\n  --font-heading: 'Helvetica Now Display Bold', sans-serif;\n  --font-body: 'Inter', sans-serif;\n  --color-text: #192837;\n  --color-accent: #7342E2;\n  --color-login-bg: #F2F2EE;\n}\n```\n\n## Background Video\n\nFull-screen background video covering the entire viewport (`absolute inset-0, object-cover`):\n\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4\n```\n\nAttributes: `autoPlay`, `muted`, `loop`, `playsInline`\n\n## Layout Structure\n\n1. **Container:** `relative w-full min-h-screen`, font-family from `--font-body`, color from `--color-text`\n2. **Navbar:** max-width 1280px, centered, z-10, `px-5 sm:px-8 py-4 sm:py-5`, flex with items centered and space-between\n3. **Hero content:** max-width 1280px centered container with `paddingTop: clamp(40px, 8vw, 72px)`, content block capped at `max-width: 560px`\n\n## Logo (SVG)\n\nCustom SVG logo, 32x32, fill `#192837`, geometric angular shape:\n\n```svg\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"none\" overflow=\"visible\" viewBox=\"0 0 256 256\">\n  <path d=\"M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z\" fill=\"#192837\"/>\n</svg>\n```\n\n## Navbar Elements\n\n- **Left:** Logo\n- **Center (desktop only, `hidden md:flex`):** 5 links — `['Vault', 'Plans', 'Install', 'News', 'Help']`, text-sm font-medium, opacity hover effect\n- **Right (desktop only):**\n  - \"Start For Free\" button — `background: #7342E2`, white text, rounded-full, `px-5 py-2.5`\n  - \"Sign In\" button — `background: #F2F2EE`, dark text, rounded-full, `px-5 py-2.5`\n- **Mobile:** Hamburger icon (Menu/X from lucide-react), opens a right-side slide-in sheet\n\n## Mobile Menu Sheet (AnimatePresence + Framer Motion)\n\n- **Backdrop:** fixed inset-0, `rgba(25,40,55,0.35)` background with `blur(4px)` backdrop-filter\n- **Sheet:** fixed right-0 top-0, width `min(88vw, 360px)`, height `100dvh`, background `#CFC8C5`, box-shadow `-12px 0 48px rgba(25,40,55,0.18)`\n- **Sheet animation:** slides from `x: '100%'` to `x: 0`, ease `[0.22, 1, 0.36, 1]`, duration 0.45s\n- **Sheet content:** Logo + close button header, 1px divider, staggered nav links (delay `0.18 + i * 0.07`), bottom CTA buttons matching desktop style\n\n## Hero Heading\n\n- Font: `var(--font-heading)`\n- Size: `clamp(1.65rem, 5vw, 3rem)`\n- Line-height: `1.05`\n- Letter-spacing: `-0.01em`\n- Color: `#192837`\n- Margin-bottom: `24px`\n- Contains inline Lucide icons (Zap, LockKeyhole, Fingerprint) at 24px, color `#192837`, vertically aligned middle, positioned `top: -2px`\n- Text: \"Lock Down Your Passwords with Ironclad Security\"\n  - Zap icon before \"Lock\"\n  - LockKeyhole icon between \"Passwords\" and \"with\"\n  - Fingerprint icon after \"Security\"\n\n## Hero Subtext\n\n- Font: `var(--font-body)`\n- Size: `clamp(0.9rem, 2.5vw, 1.1rem)`\n- Line-height: `1.65`\n- Opacity: `0.8`\n- Max-width: `560px`\n- Text: \"Zero stress, total control. VaultShield keeps you covered with unbreakable storage, one-tap access, and pro-grade tools for your non-stop world.\"\n\n## CTA Button\n\n- Background: `#7342E2`\n- Color: white\n- Border-radius: `50px`\n- Padding: `17px 24px`\n- Font: `var(--font-body)`, font-weight semibold\n- Size: `clamp(0.9rem, 2vw, 1rem)`\n- Box-shadow: `0 4px 24px rgba(115,66,226,0.28)`\n- Min-width: `210px`\n- Flex with space-between, gap `32px`\n- Text: \"Get It Free\" with ArrowRightCircle icon (20px) on the right\n- Hover: `scale(1.04)` + `brightness(1.1)`\n- Tap: `scale(0.96)`\n\n## Animations (Framer Motion)\n\n**fadeUp variant** applied to heading (delay 0), subtext (delay 0.15s), and CTA button (delay 0.30s):\n\n```js\nhidden: { opacity: 0, y: 28 }\nvisible: { opacity: 1, y: 0, transition: { delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] } }\n```\n\n## Dependencies\n\n- `react`, `react-dom`\n- `framer-motion`\n- `lucide-react` (icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X)\n- Tailwind CSS\n\n---\n\nThat is every detail needed to reproduce the hero section exactly as built.","url":"/prompts/vaultshield"}},{"id":"visual-hero","object":"prompt","title":"Visual Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://stream.mux.com/i9kUFJpB6GrWoe2UXRZG4lIP02g00LGulS1GTVrMMwZI00.m3u8"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Build a fullscreen hero section in a Vite + React + TypeScript + Tailwind CSS project. Use `gsap` and `lucide-react`. No other UI libraries.**\n\n### Fonts (in `src/index.css`)\nImport at the top of index.css BEFORE `\n@tailwind\n` directives:\n```css\n@import\n url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap');\n\n@font\n-face {\n  font-family: 'Dirtyline';\n  src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff');\n  font-weight: normal;\n  font-style: normal;\n  font-display: swap;\n}\n```\nBody font: `'Barlow', sans-serif`, background `#000`.\n\n### Tailwind config (`tailwind.config.js`)\n```js\ntheme: {\n  extend: {\n    fontFamily: {\n      heading: ['Instrument Serif', 'serif'],\n      body: ['Barlow', 'sans-serif'],\n      dirtyline: ['Dirtyline', 'sans-serif'],\n    },\n    borderRadius: { DEFAULT: '9999px' },\n  },\n},\n```\n\n### CSS (append to `src/index.css`)\n```css\n.liquid-glass {\n  background: rgba(255,255,255,0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: \"\";\n  position: absolute; inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%,\n    rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0)    40%,\n    rgba(255,255,255,0)    60%,\n    rgba(255,255,255,0.15) 80%,\n    rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n.liquid-glass-strong {\n  background: rgba(255,255,255,0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(50px);\n  -webkit-backdrop-filter: blur(50px);\n  border: none;\n  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass-strong::before {\n  content: \"\";\n  position: absolute; inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.5) 0%,\n    rgba(255,255,255,0.2) 20%,\n    rgba(255,255,255,0)   40%,\n    rgba(255,255,255,0)   60%,\n    rgba(255,255,255,0.2) 80%,\n    rgba(255,255,255,0.5) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n\n.hero-title {\n  font-family: 'Instrument Serif', serif;\n  font-style: italic;\n  font-size: clamp(96px, 18vw, 280px);\n  line-height: 0.92;\n  letter-spacing: -0.02em;\n  color: white;\n  text-align: center;\n}\n```\n\n### Component (`src/App.tsx`)\n\n**Constants:**\n- `NAV_LINKS = ['Gallery', 'Styles', 'API', 'Pricing', 'Blog']`\n- `VIDEO_SRC = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_080827_a9e5ad52-b6ee-4e79-b393-d936f179cfd7.mp4'`\n\n**LogoMark** — inline SVG, 44x26, viewBox `0 0 44 26`, three white rects at x=0/16/30, y=3, widths 14/12/14, height 20, rx=3.\n\n**State/refs:**\n- `mounted` (boolean, set true in a mount effect for fade-in).\n- `videoRef` (HTMLVideoElement), `videoBgRef` (HTMLDivElement), `displayCanvasRef` (HTMLCanvasElement).\n- `framesReady` boolean state, `framesRef` = `useRef<HTMLCanvasElement[]>([])`.\n\n**Effect 1 — Frame capture (boomerang setup):**\n- On mount, get `videoRef.current`. Set `capturing = true`, `lastTime = -1`, `MAX_WIDTH = 960`, `frames: HTMLCanvasElement[] = []`.\n- `captureFrame()`: bail if `!capturing` or `readyState < 2` or `currentTime === lastTime`. Update `lastTime`. Scale = `min(1, 960/videoWidth)`. Create offscreen canvas at scaled w/h, `ctx.drawImage(video, 0, 0, w, h)`, push to frames.\n- Use `requestVideoFrameCallback` when available, else `requestAnimationFrame` fallback.\n- On `loadedmetadata`: call `http://video.play().catch(()=>{})` then start the capture loop.\n- On `ended`: set `capturing = false`, store frames in `framesRef.current`, `setFramesReady(true)`.\n- If `readyState >= 1`, invoke `onLoaded()` immediately.\n- Cleanup: cancel raf + remove listeners.\n\n**Effect 2 — Boomerang render:**\n- When `framesReady` true, grab `displayCanvasRef`, set its `width/height` from `frames[0]`.\n- Variables: `index = 0`, `direction = 1`, `last = http://performance.now()`, `interval = 1000/30`.\n- In an `requestAnimationFrame(render)` loop: if `now - last >= interval`, draw `frames[index]`, advance `index += direction`. When `index >= frames.length - 1`, clamp and flip to `-1`. When `index <= 0`, clamp and flip to `+1`.\n- Cleanup: cancelAnimationFrame.\n\n**Effect 3 — Parallax mouse tracking (gsap):**\n- `strength = 20`. Track `targetX/Y`, smoothly lerp `currentX/Y += (target - current) * 0.06` each frame.\n- On `mousemove`: `targetX = ((clientX - cx)/cx) * strength` (same for Y).\n- Each frame: `gsap.set(videoBgRef.current, { x: currentX, y: currentY })`.\n\n**JSX structure:**\nRoot: `<div className=\"min-h-screen bg-black text-white font-body overflow-x-hidden\">`\n\n1. **Video background layer:** `<div ref={videoBgRef} className=\"fixed top-0 left-0 w-full h-full z-0 scale-[1.08] origin-center\">` containing:\n   - `<video>` with `src={VIDEO_SRC}`, `muted`, `playsInline`, `preload=\"auto\"`, `crossOrigin=\"anonymous\"`, `className=\"w-full h-full object-cover\"`, `style={{ display: framesReady ? 'none' : 'block' }}`.\n   - `<canvas ref={displayCanvasRef} className=\"w-full h-full object-cover\" style={{ display: framesReady ? 'block' : 'none' }}>`.\n\n2. **Hero title:** fixed div, `left-0 right-0 z-20 w-full px-4`, `style={{ top: '126px' }}`, fades in via `transition-all duration-1000` toggling `opacity-100 translate-y-0` vs `opacity-0 translate-y-6` based on `mounted`. Inside: `<h1 className=\"hero-title select-none\">MicroVisuals</h1>`.\n\n3. **Nav:** `<nav className=\"fixed top-5 left-1/2 -translate-x-1/2 z-50 whitespace-nowrap\">` containing a `liquid-glass flex items-center gap-6 rounded px-4 py-2.5` pill:\n   - `<LogoMark />`\n   - `<div className=\"flex items-center gap-5\">` of `NAV_LINKS` as `<a>` with classes `text-sm font-body font-light text-white/70 hover:text-white transition-colors duration-200`.\n   - Right cluster `flex items-center gap-3 ml-4`: \"Sign in\" link (same style), then \"Try it free\" with `liquid-glass-strong text-sm font-body font-medium text-white rounded px-4 py-1.5 transition-all duration-200 hover:scale-[1.04] hover:shadow-[0_0_16px_2px_rgba(255,255,255,0.12)] active:scale-[0.97]`.\n\n4. **Bottom row:** fixed, `bottom-12 left-0 right-0 px-10 flex items-end justify-between z-20`, fade-in with `transition-all duration-1000 delay-300`.\n   - Left `<p>`: `text-sm font-body font-light text-white/75 max-w-[220px] leading-relaxed`, text: \"Forma's AI understands context, composition, and style like a creative director would.\"\n   - Center absolute `left-1/2 -translate-x-1/2 bottom-0 flex items-center gap-3` with two buttons:\n     - Primary: `group relative bg-white text-black text-sm font-body font-medium rounded px-6 py-3 overflow-hidden active:scale-[0.97] transition-all duration-200 shadow-[0_0_0_0_rgba(255,255,255,0)] hover:shadow-[0_0_24px_4px_rgba(255,255,255,0.25)] hover:scale-[1.03]`. Contents: `<span className=\"relative z-10\">Start generating</span>` + overlay `<span className=\"absolute inset-0 bg-gradient-to-b from-white to-white/85 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" />`.\n     - Secondary: `liquid-glass group text-white text-sm font-body font-medium rounded px-6 py-3 active:scale-[0.97] transition-all duration-200 hover:scale-[1.03] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_0_20px_2px_rgba(255,255,255,0.07)]` — label \"See templates\".\n   - Right `<p>`: same classes as left plus `text-right`, text: \"Describe what you see in your head — get images that actually match.\"\n\n### Notes\n- Tailwind default border-radius is overridden to `9999px` (full pill) — every `rounded` in the markup produces pill corners.\n- Do NOT use `video.currentTime` to reverse — the boomerang uses the captured `frames[]` array only.\n- The video element stays mounted (hidden once `framesReady`) so the canvas keeps drawing snapshots.","url":"/prompts/visual-hero"}},{"id":"church-community","object":"prompt","title":"Church Community","summary":"A preview-led church prompt for generating a polished AI-built interface.","category":"Church","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/a/churchserice.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a mobile app showcase page displaying 3 iPhone mockups for \"Christ Family Church\" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and Manrope font (weights: Light, Regular, Medium).\n\n**General layout:**\n- Background color: `#5A4C41`\n- 3 iPhone frames shown side by side on desktop (horizontal scroll), stacked vertically on mobile (<900px) with scale-to-fit\n- Desktop: 40px padding, 48px gap between phones\n- Mobile: 20px padding, 32px gap, phones scale down to fit screen width\n- Each phone frame: 375x812 artboard inside a black rounded frame (borderRadius 50, borderWidth 2, borderColor `#2a2a2a`), with dynamic island notch (126x36, black, borderRadius 18) and home indicator bar (134x5, white 30% opacity)\n- Soft shadow on frames: `shadowColor: #000, offset: {0, 12}, opacity: 0.3, radius: 24`\n\n**Assets (all from framerusercontent.com):**\n- Portrait photo: `https://framerusercontent.com/images/7nIpqB1Y0QYgLe70j5NmdtK5Rk.png`\n- Logo (cross icon): `https://framerusercontent.com/images/Fr3jIzrNgNkSo8ZgFFTkpS308.png`\n- Quote mark icon: `https://framerusercontent.com/images/DmIPflrtvNHr7mnr6k3K5Ayn8w.png`\n- Star/compass decorative icon: `https://framerusercontent.com/images/yi0dRg7NDCZUtTbPxCa115nMU5M.png`\n- Hero image (hands raised worship): `https://framerusercontent.com/images/G9ZdWZubRnpc37d5d7uUzqaBqiw.png`\n- Avatars row: `https://framerusercontent.com/images/l3LBaTwnoXLWZd6axR7m3Q9iWeU.png`\n- Arrow icon: `https://framerusercontent.com/images/zBmfi9e2hdwkTHpcMqbS61FIc3c.png`\n- Screen 3 hero (preacher): `https://framerusercontent.com/images/Q7jLZsObox26xQCiWPAVYWzTsYs.png`\n- Play button icon: `https://framerusercontent.com/images/3M0CPgfOsuyRxuRs37KkTOTrUM.png`\n\n**Color palette:**\n- Dark background: `rgb(29, 25, 26)`\n- Cream/gold accent: `rgb(241, 229, 198)` / `#F1E5C6`\n- White: `#FFFFFF`\n- Light text on dark: `rgba(255, 255, 255, 0.77)`, `rgba(255, 255, 255, 0.6)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`\n- Off-white: `#F5F0E8`\n\n**Typography (all Manrope):**\n- Brand name in header: 17px Regular, white, lineHeight 20\n- Rotated sidebar text: 14px, Medium (name) and Regular (role), letterSpacing 1.2, half-transparent white\n- Quote text: 20px Regular, lineHeight 27, `rgba(255,255,255,0.77)`\n- Event card title: 36px Medium, letterSpacing -0.5, color `#1a1a1a`\n- Event card date: 17px Regular, `#888888`\n- Hero headline (Screen 2): 52px Light, lineHeight 52, letterSpacing -2.5, cream color `#F1E5C6`\n- Hero subtext: 21px Regular, lineHeight 27, white 60% opacity\n- CTA button text: 21px Medium, dark color\n- Section title \"Upcoming\" (Screen 3): 38px Regular, letterSpacing -0.8, white\n- Event list titles: 21px Regular, lineHeight 26\n- Event times: 17px Regular, `#999999`\n- Date card day: 34px Medium\n- Date card month: 18px Regular\n- Menu links: 36px Light, letterSpacing -0.8, white\n\n**Animations:**\n- Each iPhone frame fades in with `FadeIn.duration(600)` using react-native-reanimated\n- All text uses a typewriter effect (characters appear one by one) with configurable delay and speed\n- Menu overlay fades in with `FadeIn.duration(200)`\n\n**Screen 1 - Testimonial:**\n- Dark background (`rgb(29, 25, 26)`)\n- Header: logo (46x46) + \"Christ Family Church\" text on left, hamburger menu (3 lines, 2 long + 1 short) on right, paddingTop 48, paddingHorizontal 19\n- Rotated text on left side: \"Anna Miller\" / \"Community Member\" rotated -90deg, positioned at left: -44, top: 115, translateX: -60\n- Portrait photo: positioned at top: 120, left: 125, size 240x300\n- Quote icon (28x24) at left: 19, top: 395\n- Quote text at left: 19, top: 440, width: 336: \"We want to be a family where people can connect and benefit from friendships in Christ.\"\n- White card at bottom (height 245): contains \"Sunday Worship Service\" (36px), \"Dec 7th, 10-11:30am\", \"Learn more\" with arrow, star icon (48x48) bottom-right\n\n**Screen 2 - Hero/Landing:**\n- Full hero image covering top 472px with dark overlay (15% black)\n- Same header as Screen 1\n- Avatars image (149x53) at left: 19, top: 442\n- Headline at top: 520: \"Take a step toward the light\"\n- Subtext: \"Discover faith, hope, and a home for your soul\"\n- Cream CTA button at bottom (height 52, bottom: 32): \"Join us\" with arrow icon\n\n**Screen 3 - Sermons/Events:**\n- Hero image at top: covers 345px height (width: 415, offset left: -20), with 30% black overlay\n- Play button (65x65 circle, cream background) centered at top: 175\n- White body section starting at top: 343\n- Dark band inside body (height 220, `rgb(29, 25, 26)`) behind \"Upcoming\" title\n- Events list with date cards (68x90):\n  - 14 Dec: \"Luke 1 | A Story From Zechariah\" - 6:30 - 8:00 pm (white date card)\n  - 21 Dec: \"Romans 15 | Living For Christ Alone\" - 8:30 - 10:00 am (cream date card)\n  - 28 Dec: \"Romans 9 | The Sovereignty Of God\" - 5:30 - 7:00 pm (cream date card)\n  - 4 Jan: \"John 3 | Born Again\" (partial/faded at 50% opacity, cream date card)\n- Gap between event rows: 22px\n\n**Menu overlay (shared across all screens):**\n- Full-screen dark overlay (`rgb(29, 25, 26)`), z-index 100\n- Header with logo + brand name and X close button (two rotated lines)\n- Navigation links: Home, About, Events, Sermons, Contact (36px Light)\n- Gap between links: 22px\n- Cream CTA \"Join us\" button at bottom (bottom: 36)\n- Hamburger button on each screen opens the menu; close button dismisses it","url":"/prompts/church-community"}},{"id":"3d-collectible-hero","object":"prompt","title":"3D Collectible Hero","summary":"A preview-led 3d website prompt for generating a polished AI-built interface.","category":"3D Website","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(24).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called \"TOONHUB\".\n\n**Fonts (load in `index.html` head):**\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" />\n```\nBody font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`.\n\n**Image data (4 items, exact URLs and colors):**\n```ts\nconst IMAGES = [\n  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' },\n  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/2.b977faab.png', bg: '#6BBF7A', panel: '#85CC92' },\n  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/3.4df853b4.png', bg: '#E882B4', panel: '#ED9DC4' },\n  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/4.4457fbce.png', bg: '#6EB5FF', panel: '#8DC4FF' },\n];\n```\nPreload all 4 images on mount via `new Image()`.\n\n**State & logic:**\n- `activeIndex` (0–3), `isAnimating` boolean lock, `isMobile` (`window.innerWidth < 640`, updated on resize).\n- `navigate('next' | 'prev')`: ignore if animating; set `isAnimating=true`; bump `activeIndex` `(prev+1)%4` or `(prev+3)%4`; release lock after `650ms`.\n- Roles derived from activeIndex: `center=activeIndex`, `left=(activeIndex+3)%4`, `right=(activeIndex+1)%4`, `back=(activeIndex+2)%4`.\n\n**Layout structure:**\nOuter `<div>` has `backgroundColor: IMAGES[activeIndex].bg`, transition `background-color 650ms cubic-bezier(0.4,0,0.2,1)`, `fontFamily: 'Inter, sans-serif'`, `relative w-full overflow-hidden`. Inside, a `relative w-full` div with `height: 100vh; overflow: hidden`.\n\n1. **Grain overlay** (`absolute inset-0 pointer-events-none`, zIndex 50): SVG fractalNoise data URI, `baseFrequency=0.9`, `numOctaves=4`, opacity 0.08 inside SVG, container `opacity: 0.4`, `backgroundSize: 200px 200px`, repeat.\n\n2. **Giant ghost text \"3D SHAPE\"** (`absolute inset-x-0 flex items-center justify-center pointer-events-none select-none`, zIndex 2, `top: 18%`): font Anton, `fontSize: clamp(90px, 28vw, 380px)`, weight 900, color white, opacity 1, lineHeight 1, uppercase, letterSpacing `-0.02em`, whiteSpace nowrap.\n\n3. **Top-left brand label \"TOONHUB\"** (`absolute top-6 left-4 sm:left-8`, zIndex 60): `text-xs font-semibold uppercase`, white, opacity 0.9, letterSpacing `0.18em`.\n\n4. **Carousel** (`absolute inset-0`, zIndex 3): map all 4 IMAGES; each item is `position:absolute`, `aspectRatio: '0.6 / 1'`, with role-based styles below. Inside, an `<img>` `width:100%; height:100%; objectFit:contain; objectPosition:bottom center; draggable=false`.\n\n   Per-role style:\n   - **center**: `transform: translateX(-50%) scale(${isMobile?1.25:1.68})`, no blur, opacity 1, zIndex 20, `left:50%`, `height: isMobile?'60%':'92%'`, `bottom: isMobile?'22%':0`.\n   - **left**: `translateX(-50%) scale(1)`, blur 2px, opacity 0.85, zIndex 10, `left: isMobile?'20%':'30%'`, `height: isMobile?'16%':'28%'`, `bottom: isMobile?'32%':'12%'`.\n   - **right**: same as left but `left: isMobile?'80%':'70%'`.\n   - **back**: `translateX(-50%) scale(1)`, blur 4px, opacity 1, zIndex 5, `left:50%`, `height: isMobile?'13%':'22%'`, `bottom: isMobile?'32%':'12%'`.\n\n   Transition on each item: `transform 650ms cubic-bezier(0.4,0,0.2,1), filter 650ms ..., opacity 650ms ..., left 650ms ...`. `willChange: transform, filter, opacity`.\n\n5. **Bottom-left text + nav buttons** (`absolute bottom-6 left-4 sm:bottom-20 sm:left-24`, zIndex 60, `maxWidth:320px`):\n   - `<p>` \"TOONHUB FIGURINES\" — bold uppercase, tracking-widest, `mb-2 sm:mb-3 text-base sm:text-[22px]`, white, opacity 0.95, letterSpacing `0.02em`.\n   - `<p>` (hidden on mobile, `hidden sm:block`): \"The artwork is stunning, shipped fully prepared. The finish is a vision, the 3D craft is flawless. Many thanks! Wishing you the win. Order now.\" — `text-xs sm:text-sm`, white, opacity 0.85, lineHeight 1.6, `mb-4 sm:mb-5`.\n   - Two circular buttons (`w-12 h-12 sm:w-16 sm:h-16`, transparent bg, 2px white border, white icon): `ArrowLeft` and `ArrowRight` from lucide-react, size 26, strokeWidth 2.25. On hover: scale 1.08 + bg `rgba(255,255,255,0.12)`. Transition `transform 150ms, background-color 150ms`. Click triggers `navigate('prev')` / `navigate('next')`.\n\n6. **Bottom-right link \"DISCOVER IT\"** (`absolute bottom-6 right-4 sm:bottom-20 sm:right-10`, zIndex 60): `<a>` flex items-center, font Anton, `fontSize: clamp(20px, 4vw, 56px)`, weight 400, white, opacity 0.95→1 on hover (200ms), letterSpacing `-0.02em`, lineHeight 1, uppercase, no underline. Followed by `ArrowRight` (`w-5 h-5 sm:w-8 sm:h-8`, strokeWidth 2.25).\n\n**Behavior summary:** clicking arrows rotates roles; background color, image positions, scales, blurs, and opacities all crossfade simultaneously over 650ms with `cubic-bezier(0.4,0,0.2,1)`. The character images sit at the bottom of the screen overlapping the giant \"3D SHAPE\" text behind them.","url":"/prompts/3d-collectible-hero"}},{"id":"wellness-hero","object":"prompt","title":"Wellness Hero","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(32).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen hero section landing page for \"Aurai\" - an always-on AI wellness companion. The page is a single viewport-height section with a looping background video and overlaid content.\n\n## Video Background\n\n- Full-screen `<video>` element with `autoPlay`, `loop`, `muted`, `playsInline` attributes\n- Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260618_174853_aac61aa2-0f3f-4cf1-bc78-7f657dd11164.mp4`\n- Video covers entire viewport with `object-cover`\n- Focal point positioning:\n  - Mobile (default): `object-position: 80% center`\n  - Tablet (md breakpoint): `object-position: right center`\n  - Desktop (lg breakpoint): `object-position: center center`\n\n## Fonts\n\n- **Askan Light** loaded from: `https://db.onlinewebfonts.com/c/304a6edcec9f8858eeaafc2ac18243f4?family=Askan+Light` - used for the brand name and heading\n- **Inter** (weights 300, 400, 500, 600) from Google Fonts - used as the body/UI font\n- Tailwind config extends fontFamily with `askan: ['\"Askan Light\"', 'serif']` and `inter: ['Inter', 'sans-serif']`\n\n## Layout Structure\n\nThe content is layered on top of the video using `absolute inset-0 z-10` with a flex column layout. Padding: `px-4 sm:px-10 lg:px-12 py-4 sm:py-8`.\n\n## Navigation (Top)\n\nA `<nav>` with `flex items-center justify-between`:\n\n**Left nav pill (glassmorphism):**\n- `bg-black/20 backdrop-blur-md rounded-2xl border border-white/10`\n- Padding: `px-4 py-2.5 sm:px-6 sm:py-4`\n- Contains:\n  - A custom SVG logo (4-petal pinwheel shape, `w-5 h-5 sm:w-7 sm:h-7`, white)\n  - Brand text \"Aurai\" in `font-askan text-white text-base sm:text-xl tracking-wide`\n  - Hamburger menu icon (lucide-react `Menu`/`X`) with left margin: `ml-4 sm:ml-32 md:ml-64 lg:ml-96`\n\n**Right button (desktop only):**\n- `hidden sm:block bg-white text-gray-900 font-medium text-sm px-6 py-3 rounded-full`\n- Text: \"Join the list\"\n\n## Mobile Menu (shown on toggle)\n\n- `sm:hidden`, positioned `absolute top-[4.5rem] left-4 right-4`\n- `bg-black/30 backdrop-blur-xl rounded-2xl p-5 border border-white/10`\n- Contains links: \"Story\", \"Benefits\", \"Connect\" (white text) and a full-width \"Join the list\" button\n\n## Main Content (Bottom-aligned)\n\nOn mobile: a spacer `flex-1 sm:hidden` pushes content to the bottom.\n\nThe content container: `flex flex-col sm:flex-1 sm:flex-row sm:items-end pb-4 sm:pb-12 lg:pb-16 sm:mt-auto`\n\n**Left column:**\n\n1. **Heading:** `font-askan text-white text-[2rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5.5rem] leading-[1.05] tracking-tight max-w-[700px]`\n   - Text: \"Your calm is always within.\"\n\n2. **Subtitle:** `text-white/70 text-xs sm:text-base md:text-lg max-w-[520px] leading-relaxed`\n   - Text: \"Aurai is your always-on wellness companion. Built by leading therapists, it brings you the care and clarity right when you need it.\"\n\n3. **Email form:** A rounded pill input with inline submit button\n   - Container: `bg-black/30 backdrop-blur-md rounded-full border border-white/10`\n   - Input: transparent background, white text, placeholder \"Your email address\", `px-4 sm:px-6 py-3 sm:py-4 text-sm`\n   - Submit button (absolute right-1.5): `bg-white text-gray-900 text-xs sm:text-sm font-medium px-3 sm:px-6 py-2 sm:py-3 rounded-full`\n   - Text: \"Join the list\"\n   - On submit: shows alert with entered email\n\n4. **Feature pills (mobile only):** `flex sm:hidden flex-wrap gap-2 mt-2`\n   - Three pills with `bg-black/30 backdrop-blur-md text-white text-xs px-3 py-1.5 rounded-full border border-white/10`\n   - Labels: \"Smart Therapy\", \"Real-time Healing\", \"Insights into outcomes\"\n\n**Right column (desktop only):**\n- `hidden sm:flex flex-col items-end gap-2 self-end`\n- Same three feature pills as mobile but with `text-xs sm:text-sm px-4 py-2`\n\n## Custom SVG Logo\n\nA pinwheel/4-quadrant shape with this path:\n```\nM 228 0 C 172.772 0 128 44.772 128 100 L 128 0 L 0 0 L 0 28 C 0 83.228 44.772 128 100 128 L 0 128 L 0 256 L 28 256 C 83.228 256 128 211.228 128 156 L 128 256 L 256 256 L 256 228 C 256 172.772 211.228 128 156 128 L 256 128 L 256 0 Z\n```\nViewBox: `0 0 256 256`, fill: `currentColor`\n\n## Global CSS\n\n```css\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\n```\n\n## Key Design Principles\n\n- No dark overlay on the video - content relies on glassmorphism pills and text contrast\n- All interactive glass elements use `bg-black/20` or `bg-black/30` with `backdrop-blur-md` or `backdrop-blur-xl`\n- Borders are `border-white/10` throughout\n- White text with `/70` opacity for secondary text\n- Rounded-full for buttons and inputs, rounded-2xl for containers\n- Page title: \"Aurai - Always-On Wellness Companion\"","url":"/prompts/wellness-hero"}},{"id":"neon-logic","object":"prompt","title":"Neon Logic","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(33).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single-page landing site for \"SynapseX\" -- a futuristic neural-AI interface product. The entire site uses a black background with white text and full-viewport video backgrounds. The primary font is \"Space Mono\" (monospace) for all text. Use React + TypeScript + Vite + Tailwind CSS + Framer Motion.\n\n### Fonts & External Assets\n\n- **Primary font:** \"Space Mono\" (all weights: 400, 700, italic) from Google Fonts\n- **Display font (background watermark only):** \"Anton SC\" from Google Fonts\n- **Icons:** Bootstrap Icons CDN (`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css`) -- used only for the Apple icon (`bi bi-apple`) in the download button\n- **All Tailwind `fontFamily` keys** (`sans`, `serif`, `mono`) are overridden to `\"Space Mono\", monospace`\n\n### Video URLs (CloudFront -- use exactly these)\n\n1. **Hero (mouse-scrubbed, NOT autoplay):**\n   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4`\n\n2. **Second Section (autoplay, muted, loop):**\n   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4`\n\n3. **Metrics Section (autoplay, muted, loop):**\n   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4`\n\n4. **Technology Section (autoplay, muted, loop):**\n   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4`\n\n5. **Footer (autoplay, muted, loop):**\n   `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4`\n\n### Dependencies\n\n```json\n\"framer-motion\": \"^12.40.0\",\n\"lucide-react\": \"^0.344.0\",\n\"react\": \"^18.3.1\",\n\"react-dom\": \"^18.3.1\"\n```\n\n### Global CSS (`index.css`)\n\n- Import Space Mono from Google Fonts\n- Import Bootstrap Icons CSS\n- Tailwind directives (`@tailwind base/components/utilities`)\n- CSS variables: all `--font-*` set to `\"Space Mono\", monospace`\n- Global reset: `* { margin: 0; padding: 0; box-sizing: border-box; }`\n- `html, body`: `background: #000; color: #fff; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`\n- Lenis smooth scroll utility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`)\n\n### Custom Text Animation Components\n\n#### 1. `ScrambleIn` -- entrance reveal animation\n- Props: `text: string`, `delay: number` (ms before start), `triggered: boolean`\n- Character set: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~|}{[]:;?><`\n- On trigger (after delay): runs interval every 25ms, revealing characters left-to-right at 0.5 chars/frame\n- Characters not yet revealed show random chars (up to 3 ahead of the reveal cursor); characters beyond that are empty\n- Spaces always show as spaces\n- Before triggered: renders `&nbsp;`\n\n#### 2. `ScrambleText` -- hover-driven scramble\n- Props: `text: string`, `isHovered: boolean`, `className?: string`\n- On hover: scrambles all chars with random chars, then reveals left-to-right at 4 frames/char, interval 25ms\n- On unhover: immediately resets to original text\n\n### Custom SVG Logo (`SynapseXLogo`)\n\nA 4-fold rotationally symmetric abstract shape rendered in an SVG with `viewBox=\"-50 -50 100 100\"`. Each quadrant is the same path rotated 0/90/180/270 degrees:\n\n```\nM 1.5,23 L 1.5,33 C 1.5,38.5 6,43 11.5,43 L 16.5,43 C 22,43 26.5,38.5 26.5,33 Q 28,28 33,26.5 C 38.5,26.5 43,22 43,16.5 L 43,11.5 C 43,6 38.5,1.5 33,1.5 L 23,1.5 Q 12,12 1.5,23 Z\n```\n\n### Animated Hamburger (`SquashHamburger`)\n\n- 3 horizontal bars (absolute positioned spans)\n- Desktop: container 18x12px, bar height 1.5px\n- Mobile: container 15x10px, bar height 1.2px\n- On open: top bar rotates 45deg + translates down to center; middle bar fades/scales out; bottom bar rotates -45deg + translates up to center\n- Spring animation: stiffness 300, damping 20\n\n---\n\n### Page Sections (in order)\n\n---\n\n#### SECTION 1: Hero (full viewport height)\n\n- **Background:** Video #1, `object-cover`, paused on load. Controlled by mouse-scrub: horizontal mouse movement across viewport scrubs the video timeline forward/backward. Sensitivity factor: `0.8`. Uses `seeked` event to chain seeks without dropping frames.\n- **Entrance animation:** After 800ms delay, `entranceComplete` state becomes true -- all hero content fades in (opacity 0 -> 1, duration 1s).\n- **Dot grid overlay:** `radial-gradient(#ffffff 1px, transparent 1px)` with 24x24px grid, opacity 0.05, pointer-events-none\n- **Large background watermark text:** The word \"TRANSCENDENCE\" in \"Anton SC\" font, centered vertically (offset +50px from center), `clamp(120px, 30vw, 521px)` font size, uppercase, letter-spacing -4px. Opacity 0.10. Color achieved via `radial-gradient(circle, rgba(142,127,148,0) 0%, #8E7F94 70%)` as `background-clip: text` with transparent fill.\n- **Layout:** Flexbox column, padding `px-4 sm:px-6 md:px-8 pt-20 sm:pt-24 pb-8 sm:pb-12`. Content is pushed to the bottom using `flex-1` spacer.\n- **Bottom row:** `flex-col gap-6 md:flex-row md:items-end md:justify-between`\n  - **Left column** (`flex flex-col gap-4`):\n    - **h1** \"Brain\" / \"And Body\" (two lines via `<br>`): `text-white font-light leading-[0.95] tracking-[-0.03em] text-[clamp(40px,10vw,100px)]`. Each line uses `ScrambleIn` with delays 200ms and 500ms.\n    - **Description paragraph** (motion.p): fade-up animation (y:25->0, opacity 0->1, duration 0.9s, cubic-bezier ease `[0.215, 0.610, 0.355, 1.000]`, delay 0.2s). Text: \"Built at the intersection of neuroscience and artificial intelligence. SynapseX continuously maps neural pathways, cognitive load, and physiological states into a single adaptive intelligence layer.\" Style: `max-w-sm text-[13px] sm:text-[15px] text-white/60 leading-relaxed`\n  - **Right h1** \"One\" / \"Network\": Same styling as left h1 but with `text-left md:text-right`. ScrambleIn delays: 700ms and 1000ms.\n\n---\n\n#### NAVBAR (fixed, z-50)\n\n- Fixed to top, height 80px (h-20), transparent background, full width\n- Fades in with `entranceComplete` (opacity 0->1, duration 0.8s)\n\n**Desktop (hidden below `sm`):**\n- Left group: two pills side by side with gap-2\n  - **Logo pill:** h-12, px-5, `bg-white/15 backdrop-blur-md rounded-[14px]`. Contains SynapseXLogo (18x18px white) + \"SynapseX\" text (16px font-medium tracking-tight white). WhileHover: scale 1.02 + bg rgba(255,255,255,0.22). WhileTap: scale 0.98. Hides on `sm` when menu open (`hidden md:flex`), shows normally otherwise.\n  - **Expanding menu pill:** Animates width from 48px (closed) to 290px (open) with spring (stiffness 350, damping 28). h-12, `rounded-[14px]`, `bg-white/15 backdrop-blur-md`. Contains:\n    - Hamburger button: when closed = 48x48px rounded-[14px]; when open = 36x36px rounded-[11px] with `bg-white/10 hover:bg-white/20 ml-1.5`\n    - Nav links (fade in when open, offset x:15->0): \"About\" and \"Metrics\" with ScrambleText on hover. 16px font-normal text-white/85 hover:text-white. Smooth-scroll to `window.innerHeight` and `window.innerHeight * 2` respectively.\n- Right: **Download button** -- `h-12 px-6 bg-white rounded-full`, black text. Apple icon + \"Download\" with ScrambleText on hover. WhileHover: scale 1.03 + bg #e2e2e6. WhileTap: scale 0.97.\n\n**Mobile (visible below `sm`):**\n- Scaled-down version: h-9 pills, rounded-[10px], smaller text (13px), logo pill animates to width 0 when menu open (spring stiffness 350, damping 28). Menu capsule expands to 100% width when open. Download button: h-9 px-3.5 rounded-full.\n\n---\n\n#### SECTION 2: Cinematic Text (full viewport height)\n\n- **Background:** Video #2, autoplay muted loop, object-cover\n- **Top gradient overlay:** 180px height, linear-gradient from `#010103` to transparent, z-10\n- **Content:** Centered large paragraph in a `max-w-5xl` container with 3D perspective (400px)\n  - Framer Motion: `rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)` where `yScaleValue` transforms from 60 to -120 based on smooth scroll progress (spring: stiffness 15, damping 32, mass 1.8). Opacity fades in from 0 to 1 between scroll progress 0.3-0.5.\n  - Text: \"A neural-AI interface built on the architecture of the human nervous system. SynapseX translates synaptic activity into computational intelligence. Every signal becomes measurable, structured, and visible. It continuously reconstructs internal state as a dynamic neural map. Biological noise is filtered into actionable cognitive patterns.\"\n  - Style: `font-sans font-normal text-[22px] sm:text-[30px] md:text-[36px] lg:text-[42px] text-white leading-[1.35] tracking-[-0.02em] select-none px-6 sm:px-12 text-center`\n\n---\n\n#### SECTION 3: Metrics (min-h-screen)\n\n- **Background:** Video #3, autoplay muted loop, object-cover\n- **Layout:** Centered content, `pt-32 pb-32 px-6`, max-w-6xl\n- **Subtitle:** \"Performance Metrics\" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-20 text-center`. Fades in on scroll (whileInView, duration 1.2s, once, amount 0.3).\n- **Metrics grid:** 3 columns on md, 1 on mobile, gap-16 md:gap-8. Each metric fades up (y:30->0, opacity, duration 0.8s, staggered 0.15s delay per item):\n  - \"2.4ms\" -- Synaptic Latency\n  - \"99.7%\" -- Signal Accuracy\n  - \"140B\" -- Neural Parameters\n  - Value: `text-white text-[clamp(48px,10vw,96px)] font-light tracking-[-0.04em] leading-none`\n  - Label: `text-white/40 text-[13px] sm:text-[15px] mt-4 tracking-wide`\n\n---\n\n#### SECTION 4: Technology / Adaptive Intelligence (full viewport height)\n\n- **Background:** Video #4, autoplay muted loop, object-cover\n- **Layout:** Flexbox column, `px-8 sm:px-12 md:px-16 py-12 sm:py-16`\n- **Top area:** flex-col md:flex-row md:justify-between md:items-start gap-6\n  - **Left heading:** \"Adaptive / Intelligence\" (two lines), `text-white font-light text-[clamp(36px,8vw,72px)] leading-[0.95] tracking-[-0.03em]`. Fades up (y:40->0, duration 1.0s, whileInView once amount 0.3).\n  - **Right paragraph:** \"The system learns your neural baseline within 72 hours. From there, every cognitive state is mapped, predicted, and optimized in real time.\" `text-white/50 text-[13px] sm:text-[15px] leading-relaxed max-w-xs md:text-right md:pt-2`. Fades up (y:20->0, duration 1.0s, delay 0.2s).\n- **Spacer** (`flex-1`)\n- **Bottom grid:** 2 cols on mobile, 4 cols on md, gap-8 md:gap-6. Fades in on scroll (duration 1.0s, delay 0.3s). Each item staggered (y:20->0, duration 0.7s, delay i*0.1):\n  1. \"Cortical Mapping\" -- \"Real-time spatial reconstruction of active neural regions.\"\n  2. \"Signal Isolation\" -- \"Separates cognitive intent from biological noise.\"\n  3. \"State Prediction\" -- \"Anticipates cognitive transitions before they occur.\"\n  4. \"Loop Feedback\" -- \"Closed-loop adjustment based on outcome correlation.\"\n  - Title: `text-white text-[14px] sm:text-[16px] font-normal mb-2`\n  - Desc: `text-white/40 text-[12px] sm:text-[14px] leading-relaxed`\n\n---\n\n#### SECTION 5: Architecture (min-h-screen, pure black background, no video)\n\n- Centered content, max-w-3xl, `px-6 py-32`\n- **Heading block** (fades up y:30->0, duration 1.0s, whileInView once amount 0.4):\n  - Subtitle: \"Architecture\" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-8`\n  - Heading: \"Three layers. Zero friction.\" -- `text-white font-light text-[clamp(28px,6vw,56px)] leading-[1.15] tracking-[-0.02em] mb-10`\n  - Description: \"Sensor layer captures raw bioelectric signals. Processing layer isolates intent. Interface layer delivers structured output to any connected system.\" -- `text-white/45 text-[15px] sm:text-[17px] leading-relaxed max-w-xl mx-auto`\n- **Layer cards** (fade in, duration 1.2s, delay 0.4s, whileInView once amount 0.4): 3 stacked cards, `mt-20 flex-col items-center gap-4`. Each card: `max-w-md h-[72px] border border-white/10 rounded-lg flex items-center justify-between px-6`\n  - Left: \"Layer 1/2/3\" -- `text-white/30 text-[12px] tracking-[0.15em] uppercase`\n  - Right: \"Capture\" / \"Process\" / \"Interface\" -- `text-white text-[16px] sm:text-[18px] font-light`\n\n---\n\n#### FOOTER\n\n- Black background, overflow hidden\n- Two-column layout (stacked on mobile): `flex-col md:flex-row min-h-[400px]`\n- **Left:** Video #5, `object-cover`, fills half width (h-[300px] on mobile, auto height on md)\n- **Right:** Flex column justify-between, `p-10 sm:p-16`\n  - Top: SynapseXLogo (18x18px, text-white/70) + \"SynapseX\" text (15px font-medium text-white/70 tracking-tight), mb-8. Below: \"The next evolution of human-machine interaction. Built for those who refuse to be limited by biology alone.\" `text-white/40 text-[14px] sm:text-[15px] leading-relaxed max-w-sm`\n  - Bottom: \"(c) 2026 SynapseX Labs. All rights reserved.\" `text-white/25 text-[12px] mt-12`\n\n---\n\n### Key Technical Details\n\n- The entire app wrapper has inline style: `fontFamily: '\"Space Mono\", monospace'`\n- All `h-screen` elements also have `h-[100dvh]` for mobile viewport compatibility\n- The hero video is NOT autoplay -- it starts paused at time 0 and is scrubbed by horizontal mouse movement (delta-based, not absolute position). The seek logic chains via `seeked` event to avoid frame-dropping.\n- Framer Motion `useScroll` tracks the second section with offset `[\"start end\", \"end start\"]`, piped through `useSpring` (stiffness 15, damping 32, mass 1.8) then `useTransform` and `useMotionTemplate` for the 3D text rotation effect.\n- No external state management, no routing, no database -- pure single-page React app.\n\n---","url":"/prompts/neon-logic"}},{"id":"animated-cards","object":"prompt","title":"Animated Cards","summary":"A preview-led component prompt for generating a polished AI-built interface.","category":"Component","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(8).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards.\nCore Features & Interactions:\nUse React (useState, useEffect, useRef), Tailwind CSS v4, and standard requestAnimationFrame for a smooth 60fps render loop. No external animation libraries needed.\nThe scene should behave like a continuous circular scroll/carousel, updating a continuous progress variable.\nAdd interactive 3D parallax tilt to the cards that smoothly responds to mouse cursor movement (mousemove), using inertia damping to lag slightly behind the cursor.\nThe cards should have real volumetric 3D thickness (achieved by stacking multiple div layers close together, simulating 3D depth).\nThe carousel math should push cards to the sides (using smoothstep interpolation) and hide them gracefully using perspective formulas as they move completely off-screen.\nEach card must have a front and back face. The front face includes an autoplaying video background, a silver metallic chip (SVG), an embedded JWT logo top-right, and intersecting circles bottom-right. The back face should blur the same video background, have a dark magnetic stripe across the top, and feature the cardholder name, number, and CVV in JetBrains Mono.\nVisual Styling:\nUse a pure black background (#000000).\nThe application relies exclusively on the interactive 3D card layout (no text layers over the background).\nMake sure the scene's wrapper uses CSS perspective: 1350px; and standard transformStyle: preserve-3d.\nPlease use the exact code below for src/App.tsx and src/index.css to build this exactly as requested.\n\nimport React, { useState, useEffect, useRef } from 'react';\n\nconst CARD_VIDEOS = [\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_171347_f640c30d-ec21-426a-98bc-77e07c2c60cb.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_104800_bc43ae09-f494-43e3-97d7-2f8c1692cfd7.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_161253_c72b1869-400f-45ed-ac0c-52f68c2ed5bd.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_115655_b4d9cd77-feed-43cd-a198-af78ebdf1f7a.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4',\n  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4'\n];\n\n// Nine beautiful premium solid colors to clearly track the cards\nconst CARD_COLORS = [\n  '#FF3B30', // Apple Red\n  '#FF9500', // Apple Orange\n  '#FFCC00', // Apple Yellow\n  '#34C759', // Apple Green\n  '#007AFF', // Apple Blue\n  '#5856D6', // Apple Purple\n  '#FF2D55', // Apple Pink\n  '#AF52DE', // Apple Violet\n  '#00C7BE', // Apple Teal\n];\n\n// Different card details for each of the cards\nconst CARD_DETAILS = [\n  { number: '4232 8908 1121 4892', name: 'ZACHARY MERCER', cvv: '382' },\n  { number: '4154 7831 9904 5124', name: 'SOPHIA MARTINEZ', cvv: '109' },\n  { number: '5457 4120 7733 9035', name: 'BENJAMIN CARTER', cvv: '764' },\n  { number: '4441 5567 1223 2468', name: 'EMILY MORRISON', cvv: '491' },\n  { number: '5375 8891 2234 7713', name: 'JACKSON REID', cvv: '255' },\n];\n\n\nexport default function App() {\n  const cardCount = 5;\n  const cardsRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const frameId = useRef<number>(0);\n  \n  // Continuous scroll progress\n  const progress = useRef<number>(0);\n\n  // Track mouse coordinates for interactive 3D parallax tilt with inertia damping\n  const mouse = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 });\n\n  // Responsive state containing card dimensions\n  const [metrics, setMetrics] = useState({\n    cardW: 336,\n    cardH: 211, // 1.59 standard credit card ratio\n  });\n\n  // Typography metrics to prevent collisions beautifully across all viewports\n  const [fontMetrics, setFontMetrics] = useState({\n    titleFontSize: '1.5rem',\n    sigFontSize: '2.5rem',\n    descFontSize: '14px',\n    titleGap: '40px',\n    pl: '0px'\n  });\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      // Screen-space cursor offset relative to window center, clamped to [-1.0, 1.0] range\n      const rx = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2);\n      const ry = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2);\n      mouse.current.targetX = Math.max(-1, Math.min(1, rx));\n      mouse.current.targetY = Math.max(-1, Math.min(1, ry));\n    };\n\n    const handleMouseLeave = () => {\n      // Return gently to center orientation when mouse focus is lost or moves away\n      mouse.current.targetX = 0;\n      mouse.current.targetY = 0;\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseleave', handleMouseLeave);\n\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseleave', handleMouseLeave);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleResize = () => {\n      const w = window.innerWidth;\n      const h = window.innerHeight;\n\n      // 1. Calculate Card Metrics (shrink cards if height is small to save vertical space)\n      let cardW = Math.round(w * 0.16 + 130);\n      \n      const heightFactor = Math.min(1.0, Math.max(0.65, h / 850));\n      cardW = Math.round(cardW * heightFactor);\n      \n      cardW = Math.min(336, Math.max(150, cardW));\n      const cardH = Math.round(cardW / 1.5925); // Standard credit card ratio\n\n      setMetrics({ cardW, cardH });\n\n      // 2. Calculate Typography Metrics (shrink font sizes aggressively if height or width is small)\n      const isMobile = w < 640;\n      \n      let titleSize = '';\n      let sigSize = '';\n      let descSize = '';\n      let titleGap = '40px'; \n      let plVal = '0px';\n\n      if (isMobile) {\n        // Mobile style: centered, text size increased by 30% for high legibility\n        titleSize = 'clamp(1.8rem, 5.2vw + 0.4rem, 2.2rem)';\n        sigSize = 'clamp(2.86rem, 7.8vw + 0.6rem, 3.5rem)';\n        descSize = 'clamp(0.72rem, 1.4vw + 0.35rem, 0.95rem)';\n        titleGap = '24px';\n        plVal = '0px';\n      } else {\n        // Desktop / Tablet style: aligned bottom-left\n        // Scale factor depends on width and height to shrink before hitting cards\n        const scale = Math.min(1.0, Math.max(0.48, (w * 0.45 + h * 0.55) / 1300));\n        \n        titleSize = `${Math.max(1.15, 3.5 * scale).toFixed(3)}rem`;\n        sigSize = `${Math.max(1.5, 4.5 * scale).toFixed(3)}rem`;\n        descSize = `${Math.max(11, 16 * scale).toFixed(1)}px`;\n        titleGap = `${Math.max(16, Math.round(40 * scale))}px`;\n        plVal = `${Math.min(6, Math.max(2.8, 3.5 * scale + 2.2)).toFixed(2)}rem`;\n      }\n\n      setFontMetrics({\n        titleFontSize: titleSize,\n        sigFontSize: sigSize,\n        descFontSize: descSize,\n        titleGap,\n        pl: plVal\n      });\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  // Compute positions, rotations, and visual rules at 60fps\n  const renderLoop = () => {\n    // Upward flow speed of continuous transition - decreased speed by more than half for slower, premium, and calmer transitions\n    progress.current += 0.0016; \n\n    // Smoothly interpolate current mouse variables towards their target positions (damping/inertia logic)\n    mouse.current.x += (mouse.current.targetX - mouse.current.x) * 0.08;\n    mouse.current.y += (mouse.current.targetY - mouse.current.y) * 0.08;\n\n    const cards = cardsRefs.current;\n    const h = window.innerHeight;\n    const { cardH } = metrics;\n\n    const continuousProgress = progress.current;\n    const roundedIndex = Math.round(continuousProgress);\n    const diffFromRound = continuousProgress - roundedIndex; // ranges between [-0.5, 0.5]\n    \n    // Custom non-linear magnetic step logic\n    // It creates a gorgeous brief \"dwell/pause\" at front center before accelerating to the next card\n    const easedDiff = Math.sign(diffFromRound) * Math.pow(Math.abs(diffFromRound) * 2, 4.2) / 2;\n    const virtualActiveIndex = roundedIndex + easedDiff;\n\n    for (let i = 0; i < cardCount; i++) {\n      const card = cards[i];\n      if (!card) continue;\n\n      // Solve circular wrapping to get closest representation in [-cardCount/2, cardCount/2]\n      let offset = i - virtualActiveIndex;\n      const halfCount = cardCount / 2;\n      while (offset > halfCount) offset -= cardCount;\n      while (offset < -halfCount) offset += cardCount;\n\n      const absOffset = Math.abs(offset);\n      const sign = Math.sign(offset);\n\n      // Allow cards to render completely off-screen smoothly up to offset 3.0. This prevents any clipping or sudden pop-outs.\n      if (absOffset > 3.0) {\n        card.style.visibility = 'hidden';\n        continue;\n      } else {\n        card.style.visibility = 'visible';\n      }\n\n      // Spacing gap between center card and adjacent cards\n      const gap = 36;\n      const peekAmount = -55; // Push the card's edge 55px past the screen boundary to hide a premium portion of it!\n      const D = 1350; // Perspective distance\n\n      let y = 0;\n      let z = 0;\n      let rot = 0;\n\n      if (absOffset <= 1) {\n        // Smoothstep interpolation from 0 to 1 (Center card to first adjacent card)\n        const t = absOffset;\n        const easedT = t * t * (3 - 2 * t);\n\n        // Y moves from 0 to (cardH + gap)\n        const targetY = cardH + gap;\n        y = -sign * (easedT * targetY);\n\n        // Z moves from 400 (center) to 220 (adjacent)\n        z = 400 + easedT * (220 - 400);\n\n        // Rotation moves from 0 to 132 degrees (beautiful tilted back face)\n        rot = easedT * 132;\n      } else if (absOffset <= 2) {\n        // Smoothstep interpolation from 1 to 2 (Adjacent card to peeking screen-edge card)\n        const t = absOffset - 1;\n        const easedT = t * t * (3 - 2 * t);\n\n        const yStart = cardH + gap;\n        const zStart = 220;\n        const rotStart = 132;\n\n        const zEnd = -60;\n        const rotEnd = 175;\n\n        // Perspective-aware formula for exact edge alignment at the screen boundary (peekAmount = 26px inside)\n        const sEnd = D / (D - zEnd);\n        const yEnd = (h / 2 - peekAmount) / sEnd - (cardH / 2);\n\n        const currentY = yStart + easedT * (yEnd - yStart);\n        y = -sign * currentY;\n\n        z = zStart + easedT * (zEnd - zStart);\n        rot = rotStart + easedT * (rotEnd - rotStart);\n      } else {\n        // Smoothstep interpolation from 2 to 3 (Peeking card to completely off-screen card)\n        const t = Math.min(absOffset - 2, 1);\n        const easedT = t * t * (3 - 2 * t);\n\n        const zStart = -60;\n        const rotStart = 175;\n\n        const zEnd3 = -250;\n        const rotEnd3 = 195;\n\n        const sEnd2 = D / (D - zStart);\n        const yEnd2 = (h / 2 - peekAmount) / sEnd2 - (cardH / 2);\n\n        // Calculate yEnd3 dynamically so that the card's edge is completely 100px past the screen boundary\n        const sEnd3 = D / (D - zEnd3);\n        const yEnd3 = (h / 2 + 100) / sEnd3 + (cardH / 2);\n\n        const currentY = yEnd2 + easedT * (yEnd3 - yEnd2);\n        y = -sign * currentY;\n\n        z = zStart + easedT * (zEnd3 - zStart);\n        rot = rotStart + easedT * (rotEnd3 - rotStart);\n      }\n\n      const localCardRotation = -sign * rot;\n\n      // Determine how close this card is to the exact center (1.0 = center, 0.0 = adjacent/offscreen)\n      const centerFactor = Math.max(0, 1 - absOffset);\n\n      // Vertical tilt (around X-axis) and horizontal tilt (around Y-axis) driven by mouse coordinates\n      const maxTiltY = 15; // Max angle tilt left-to-right (degrees)\n      const maxTiltX = 12; // Max angle tilt up-and-down (degrees)\n\n      const activeTiltX = -mouse.current.y * maxTiltX * centerFactor;\n      const activeTiltY = mouse.current.x * maxTiltY * centerFactor;\n\n      const totalRotX = localCardRotation + activeTiltX;\n      const totalRotY = activeTiltY;\n\n      // Depth z-index layer\n      card.style.zIndex = Math.round(z).toString();\n      card.style.opacity = '1';\n\n      // Inject translation matrix with the premium -3deg tilt combined with dynamic mouse-interactive 3D tilt\n      card.style.transform = `translateY(${y.toFixed(2)}px) translateZ(${z.toFixed(2)}px) rotateX(${totalRotX.toFixed(2)}deg) rotateY(${totalRotY.toFixed(2)}deg) rotateZ(-3deg)`;\n    }\n  };\n\n  useEffect(() => {\n    const tick = () => {\n      renderLoop();\n      frameId.current = requestAnimationFrame(tick);\n    };\n\n    frameId.current = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frameId.current);\n  }, [metrics]);\n\n  // Slices for 3D volumetric depth with 30% reduced thickness\n  // Span from -1.47px to 1.47px creates an extremely premium real 3D volume feel\n  const thicknessLayers = [-1.47, -0.73, 0, 0.73, 1.47];\n\n  return (\n    <div className=\"absolute inset-0 bg-[#000000] text-white flex items-center justify-center overflow-hidden select-none\">\n      \n      {/* 3D perspective camera space */}\n      <div\n        className=\"relative w-full h-full flex items-center justify-center pointer-events-none\"\n        style={{\n          perspective: '1350px',\n        }}\n      >\n        {/* Dynamic 3D coordinate viewport */}\n        <div\n          className=\"absolute\"\n          style={{\n            width: `${metrics.cardW}px`,\n            height: `${metrics.cardH}px`,\n            transformStyle: 'preserve-3d',\n          }}\n        >\n          {Array.from({ length: cardCount }).map((_, i) => (\n            <div\n              key={i}\n              ref={(el) => { cardsRefs.current[i] = el; }}\n              className=\"absolute inset-0\"\n              style={{\n                width: `${metrics.cardW}px`,\n                height: `${metrics.cardH}px`,\n                transformStyle: 'preserve-3d',\n                backfaceVisibility: 'visible',\n              }}\n            >\n              {/* Build physical 3D volumetric thickness by dense parallel layering */}\n              {thicknessLayers.map((zOffset, layerIdx) => {\n                const isFrontFace = layerIdx === thicknessLayers.length - 1;\n                const isBackFace = layerIdx === 0;\n\n                const videoSrc = CARD_VIDEOS[i % CARD_VIDEOS.length];\n                const baseBgColor = '#0f0f0f';\n\n                // Middle structural slice\n                if (!isFrontFace && !isBackFace) {\n                  return (\n                    <div\n                      key={layerIdx}\n                      className=\"absolute inset-0 rounded-[16px] border border-[#808080] pointer-events-none overflow-hidden\"\n                      style={{\n                        backgroundColor: '#808080',\n                        transform: `translateZ(${zOffset}px)`,\n                      }}\n                    />\n                  );\n                }\n\n                // Front face slice\n                if (isFrontFace) {\n                  const frontBorderStyle = \"border border-white/15\";\n                  return (\n                    <div\n                      key={layerIdx}\n                      className={`absolute inset-0 rounded-[16px] ${frontBorderStyle} pointer-events-none overflow-hidden`}\n                      style={{\n                        backgroundColor: baseBgColor,\n                        transform: `translateZ(${zOffset}px)`,\n                        backfaceVisibility: 'hidden',\n                        boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)',\n                      }}\n                    >\n                      <video\n                        src={videoSrc}\n                        autoPlay\n                        loop\n                        muted\n                        playsInline\n                        className=\"absolute inset-0 w-full h-full object-cover rounded-[16px]\"\n                      />\n\n                      <div className=\"absolute inset-0 p-5 sm:p-6 text-white h-full w-full font-sans z-10 bg-black/15\">\n                        {/* Golden/Silver Metallic Contact Chip - positioned mid-left (vertically centered on the card) with custom user vectors */}\n                        <div className=\"absolute left-5 sm:left-6 top-1/2 -translate-y-1/2\">\n                          <svg\n                            className=\"w-6 h-6 sm:w-[29px] sm:h-[29px]\"\n                            viewBox=\"0 0 60 60\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                          >\n                            <path\n                              fillRule=\"evenodd\"\n                              clipRule=\"evenodd\"\n                              d=\"M20 8H40V14C40.0016 14.5299 40.2128 15.0377 40.5875 15.4125C40.9623 15.7872 41.4701 15.9984 42 16H59V24H42C41.4701 24.0016 40.9623 24.2128 40.5875 24.5875C40.2128 24.9623 40.0016 25.4701 40 26V52H20V8ZM18 8H8.00039C4.47435 8 1.56576 10.6083 1.08 14H18V8ZM1 16V24V26V34V36V44H18V36H1V34H18V26H1V24H18V16H1ZM1.08 46C1.56576 49.3917 4.47435 52 8.00039 52H18V46H1.08ZM42 14V8H52.0004C55.5264 8 58.4342 10.6084 58.92 14H42ZM59 26H42V34H59V26ZM59 36H42V44H59V36ZM52.0004 52H42V46H58.92C58.4342 49.3916 55.5264 52 52.0004 52Z\"\n                              fill={`url(#paint0_linear_1032_4_${i})`}\n                            />\n                            <path\n                              fillRule=\"evenodd\"\n                              clipRule=\"evenodd\"\n                              d=\"M1.02453 14.4146C1.00608 14.609 0.998061 14.8045 1.00039 15C1.00039 14.8028 1.00854 14.6076 1.02453 14.4146ZM1.00039 45C0.998061 45.1955 1.00608 45.391 1.02453 45.5854C1.00854 45.3924 1.00039 45.1972 1.00039 45ZM59.0004 15C59.0026 14.8176 58.9955 14.6353 58.9794 14.4538C58.9933 14.634 59.0004 14.8162 59.0004 15ZM59.0004 45C59.0004 45.1838 58.9933 45.366 58.9794 45.5462C58.9955 45.3647 59.0026 45.1824 59.0004 45Z\"\n                              fill=\"#B7B7B7\"\n                            />\n                            <defs>\n                              <linearGradient\n                                id={`paint0_linear_1032_4_${i}`}\n                                x1=\"30\"\n                                y1=\"8\"\n                                x2=\"30\"\n                                y2=\"52\"\n                                gradientUnits=\"userSpaceOnUse\"\n                              >\n                                <stop stopColor=\"white\" />\n                                <stop offset=\"1\" stopColor=\"#999999\" />\n                              </linearGradient>\n                            </defs>\n                          </svg>\n                        </div>\n\n                        {/* JWT Brand Logo - positioned at top-right */}\n                        <div className=\"absolute right-5 sm:right-6 top-5 sm:top-6 opacity-95\">\n                          <svg\n                            className=\"w-[84px] xs:w-[101px] sm:w-[120px] h-auto\"\n                            viewBox=\"0 0 341 49\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                          >\n                            <path\n                              d=\"M8.75294 47.68C6.10761 47.68 4.10227 47.04 2.73694 45.76C1.41427 44.48 0.582275 42.7733 0.240941 40.64C-0.100392 38.464 -0.0790588 36.0747 0.304941 33.472C0.731608 30.8267 1.37161 28.1813 2.22494 25.536C3.07827 22.848 3.99561 20.3307 4.97694 17.984C6.00094 15.5947 6.93961 13.5893 7.79294 11.968C8.26227 11.072 8.88094 10.56 9.64894 10.432C10.4169 10.2613 11.1423 10.368 11.8249 10.752C12.5503 11.136 13.0623 11.6907 13.3609 12.416C13.7023 13.1413 13.6383 13.9307 13.1689 14.784C11.2916 18.368 9.79828 21.7813 8.68894 25.024C7.57961 28.2667 6.85427 31.1467 6.51294 33.664C6.21427 36.1387 6.23561 38.1013 6.57694 39.552C6.96094 40.96 7.68628 41.664 8.75294 41.664C9.73428 41.664 10.8009 41.3013 11.9529 40.576C13.1049 39.8507 14.3423 38.5493 15.6649 36.672C17.0303 34.6667 18.3529 32.064 19.6329 28.864C20.9556 25.6213 22.1289 21.8667 23.1529 17.6C23.4089 16.6187 23.8783 15.9573 24.5609 15.616C25.2863 15.2747 26.0329 15.2107 26.8009 15.424C27.5689 15.6373 28.1876 16.064 28.6569 16.704C29.1263 17.3013 29.2543 18.0693 29.0409 19.008C27.9316 23.616 27.3769 27.5627 27.3769 30.848C27.4196 34.1333 27.7609 36.5227 28.4009 38.016C28.8703 39.0827 29.4249 39.8507 30.0649 40.32C30.7476 40.7893 31.4943 41.024 32.3049 41.024C33.1156 41.024 33.9689 40.7253 34.8649 40.128C35.8036 39.488 36.7209 38.4 37.6169 36.864C38.5556 35.328 39.3876 33.216 40.1129 30.528C37.6809 28.48 35.6756 25.7707 34.0969 22.4C32.5183 19.0293 31.7289 15.168 31.7289 10.816C31.7289 8.93867 31.9423 7.21067 32.3689 5.632C32.7956 4.05333 33.5209 2.79467 34.5449 1.856C35.5689 0.874666 36.9769 0.383999 38.7689 0.383999C40.9449 0.383999 42.7156 1.17333 44.0809 2.752C45.4463 4.288 46.4489 6.37867 47.0889 9.024C47.7289 11.6267 48.0063 14.5493 47.9209 17.792C47.8783 21.0347 47.5369 24.3413 46.8969 27.712C47.5369 28.0107 48.2196 28.2453 48.9449 28.416C49.7129 28.5867 50.4809 28.672 51.2489 28.672C52.9983 28.672 54.7903 28.416 56.6249 27.904C58.5023 27.3493 60.1023 26.6453 61.4249 25.792C62.2783 25.2373 63.0676 25.088 63.7929 25.344C64.5183 25.5573 65.0943 26.0053 65.521 26.688C65.9476 27.328 66.1183 28.0533 66.0329 28.864C65.9903 29.632 65.5636 30.272 64.7529 30.784C62.8756 32.0213 60.7423 33.0027 58.3529 33.728C56.0063 34.4533 53.6383 34.816 51.2489 34.816C49.2863 34.816 47.3449 34.4533 45.4249 33.728C44.1876 37.7387 42.5023 40.96 40.3689 43.392C38.2356 45.824 35.5476 47.04 32.3049 47.04C30.2569 47.04 28.3583 46.4427 26.6089 45.248C24.9023 44.0107 23.6223 42.4107 22.7689 40.448C22.5983 40.064 22.4276 39.6587 22.2569 39.232C22.1289 38.8053 22.0223 38.4 21.9369 38.016C21.7236 38.4 21.4889 38.7627 21.2329 39.104C21.0196 39.4453 20.7849 39.7867 20.5289 40.128C18.9503 42.3467 17.1796 44.16 15.2169 45.568C13.2969 46.976 11.1423 47.68 8.75294 47.68ZM41.5849 23.104C42.0116 19.9893 42.1183 17.3653 41.9049 15.232C41.6916 13.0987 41.3503 11.392 40.8809 10.112C40.4116 8.78933 39.9423 7.85067 39.4729 7.296C39.0463 6.69867 38.8116 6.4 38.7689 6.4C38.7689 6.4 38.6836 6.42133 38.5129 6.464C38.3849 6.464 38.2356 6.76267 38.0649 7.36C37.9369 7.91467 37.8729 9.06667 37.8729 10.816C37.8729 12.992 38.1929 15.168 38.8329 17.344C39.4729 19.4773 40.3903 21.3973 41.5849 23.104Z\"\n439:                               fill=\"white\"\n440:                             />\n441:                             <path\n442:                               d=\"M91.5429 48.768C89.5376 48.768 87.9163 48.3627 86.6789 47.552C85.4843 46.784 84.6096 45.76 84.0549 44.48C83.5003 43.1573 83.2016 41.7493 83.1589 40.256C81.3243 42.4747 79.2763 44.224 77.0149 45.504C74.7963 46.7413 72.4709 47.36 70.0389 47.36C68.1189 47.36 66.3056 46.912 64.5989 46.016C62.8923 45.0773 61.5056 43.6907 60.4389 41.856C59.4149 39.9787 58.9029 37.6107 58.9029 34.752C58.9029 31.7653 59.5216 28.8427 60.7589 25.984C62.0389 23.0827 63.7669 20.48 65.9429 18.176C68.1616 15.8293 70.6789 13.9733 73.4949 12.608C76.3536 11.2 79.3403 10.496 82.4549 10.496C84.5029 10.496 86.5296 10.752 88.5349 11.264C90.5403 11.776 92.2896 12.5227 93.7829 13.504C94.6363 14.0587 95.1056 14.72 95.1909 15.488C95.2763 16.256 95.0843 16.9813 94.6149 17.664C94.1883 18.304 93.6123 18.752 92.8869 19.008C92.1616 19.264 91.3936 19.136 90.5829 18.624C89.7723 18.112 88.5563 17.6427 86.9349 17.216C85.3563 16.7467 83.8629 16.512 82.4549 16.512C80.0229 16.512 77.7616 17.0667 75.6709 18.176C73.5803 19.2853 71.7243 20.736 70.1029 22.528C68.5243 24.32 67.2869 26.2827 66.3909 28.416C65.4949 30.5493 65.0469 32.6613 65.0469 34.752C65.0469 35.8187 65.1749 36.864 65.4309 37.888C65.7296 38.8693 66.2416 39.7013 66.9669 40.384C67.6923 41.024 68.7163 41.344 70.0389 41.344C71.3189 41.344 72.7483 40.9173 74.3269 40.064C75.9483 39.168 77.4843 37.76 78.9349 35.84C79.8309 34.6453 80.7696 33.216 81.7509 31.552C82.7323 29.8453 83.6283 28.16 84.4389 26.496C85.2923 24.7893 85.9749 23.3387 86.4869 22.144C86.8283 21.2907 87.3403 20.736 88.0229 20.48C88.7483 20.224 89.4736 20.224 90.1989 20.48C90.9243 20.6933 91.5003 21.0987 91.9269 21.696C92.3536 22.2933 92.4816 23.04 92.3109 23.936L89.4949 37.632C89.1963 39.1253 89.1963 40.2347 89.4949 40.96C89.7936 41.6853 90.1776 42.176 90.6469 42.432C91.1163 42.6453 91.4149 42.752 91.5429 42.752C92.2256 42.752 93.1003 42.432 94.1669 41.792C95.2336 41.1093 96.5563 39.8507 98.1349 38.016C99.4576 36.5227 100.823 34.7733 102.231 32.768C103.682 30.72 105.068 28.6293 106.391 26.496C107.756 24.32 108.972 22.272 110.039 20.352C111.148 18.3893 112.023 16.768 112.663 15.488C113.09 14.592 113.687 14.0587 114.455 13.888C115.223 13.7173 115.948 13.824 116.631 14.208C117.356 14.5493 117.868 15.0827 118.167 15.808C118.508 16.4907 118.466 17.28 118.039 18.176C117.356 19.584 116.439 21.2907 115.287 23.296C114.178 25.3013 112.919 27.4347 111.511 29.696C110.146 31.9147 108.695 34.0907 107.159 36.224C105.666 38.3573 104.194 40.2773 102.743 41.984C101.036 43.9467 99.2869 45.568 97.4949 46.848C95.7456 48.128 93.7616 48.768 91.5429 48.768Z\"\n443:                               fill=\"white\"\n444:                             />\n445:                             <path\n446:                               d=\"M118.45 48.448C115.549 48.448 113.351 47.6373 111.858 46.016C110.407 44.352 109.533 42.0267 109.234 39.04C108.978 36.0533 109.17 32.5547 109.81 28.544C110.493 24.5333 111.517 20.16 112.882 15.424C113.181 14.4427 113.693 13.8027 114.418 13.504C115.143 13.1627 115.89 13.12 116.658 13.376C117.426 13.632 118.023 14.08 118.45 14.72C118.919 15.36 119.026 16.1493 118.77 17.088C117.191 22.464 116.146 26.8373 115.634 30.208C115.165 33.536 115.037 36.096 115.25 37.888C115.463 39.6373 115.869 40.832 116.466 41.472C117.106 42.112 117.767 42.432 118.45 42.432C119.303 42.432 120.413 41.9413 121.778 40.96C123.143 39.936 124.594 38.5067 126.13 36.672C127.666 34.8373 129.138 32.7253 130.546 30.336C129.778 27.904 129.394 25.152 129.394 22.08C129.394 20.2027 129.501 18.176 129.714 16C129.97 13.7813 130.397 11.6907 130.994 9.728C131.634 7.76533 132.509 6.18667 133.618 4.992C134.77 3.79733 136.242 3.264 138.034 3.392C139.485 3.52 140.573 4.032 141.298 4.928C142.066 5.824 142.535 6.95467 142.706 8.32C142.919 9.68533 142.941 11.1573 142.77 12.736C142.599 14.272 142.343 15.808 142.002 17.344C141.661 18.8373 141.319 20.16 140.978 21.312C139.954 24.8107 138.781 28.032 137.458 30.976C138.61 33.024 140.061 34.432 141.81 35.2C143.559 35.968 145.33 36.2453 147.122 36.032C148.914 35.776 150.45 35.2427 151.73 34.432C152.583 33.8773 153.373 33.728 154.098 33.984C154.823 34.1973 155.399 34.6453 155.826 35.328C156.295 35.968 156.487 36.6933 156.402 37.504C156.317 38.272 155.869 38.912 155.058 39.424C152.967 40.7893 150.642 41.6427 148.082 41.984C145.565 42.3253 143.09 42.0907 140.658 41.28C138.226 40.4693 136.093 39.04 134.258 36.992C132.039 40.576 129.586 43.392 126.898 45.44C124.253 47.4453 121.437 48.448 118.45 48.448ZM135.666 18.112C136.391 15.5947 136.882 13.7173 137.138 12.48C137.394 11.2427 137.522 10.432 137.522 10.048C137.522 9.62133 137.522 9.408 137.522 9.408C137.522 9.408 137.394 9.68533 137.138 10.24C136.882 10.752 136.605 11.648 136.306 12.928C136.007 14.1653 135.794 15.8933 135.666 18.112Z\"\n447:                               fill=\"white\"\n448:                             />\n449:                             <path\n450:                               d=\"M164.834 48.512C161.762 48.512 159.117 47.808 156.898 46.4C154.68 44.9493 152.973 43.008 151.778 40.576C150.584 38.1013 149.986 35.328 149.986 32.256C149.986 29.2267 150.562 26.3893 151.714 23.744C152.866 21.056 154.36 18.7093 156.194 16.704C158.072 14.656 160.056 13.0773 162.146 11.968C164.28 10.816 166.306 10.24 168.226 10.24C169.762 10.24 171.17 10.5387 172.45 11.136C173.73 11.7333 174.754 12.5867 175.522 13.696C176.333 14.8053 176.738 16.1493 176.738 17.728C176.738 20.0747 176.034 22.1227 174.626 23.872C173.261 25.5787 171.384 27.4773 168.994 29.568C167.202 31.1467 165.325 32.64 163.362 34.048C161.4 35.456 159.352 36.8427 157.218 38.208C158.584 41.0667 161.122 42.496 164.834 42.496C165.858 42.496 166.946 42.3467 168.098 42.048C169.25 41.7067 170.552 41.024 172.002 40C173.453 38.976 175.16 37.376 177.122 35.2C177.762 34.4747 178.466 34.1333 179.234 34.176C180.045 34.2187 180.749 34.5173 181.346 35.072C181.944 35.584 182.285 36.2453 182.37 37.056C182.498 37.824 182.242 38.5707 181.602 39.296C178.445 42.7947 175.458 45.2053 172.642 46.528C169.869 47.8507 167.266 48.512 164.834 48.512ZM156.13 31.744C157.752 30.6773 159.309 29.6107 160.802 28.544C162.296 27.4347 163.704 26.2827 165.026 25.088C167.245 23.1253 168.738 21.504 169.506 20.224C170.317 18.9013 170.722 18.0693 170.722 17.728C170.722 17.5573 170.594 17.28 170.338 16.896C170.082 16.4693 169.378 16.256 168.226 16.256C167.16 16.256 165.944 16.6613 164.578 17.472C163.256 18.24 161.954 19.328 160.674 20.736C159.437 22.144 158.392 23.7867 157.538 25.664C156.685 27.5413 156.216 29.568 156.13 31.744Z\"\n451:                               fill=\"white\"\n452:                             />\n453:                             <path\n454:                               d=\"M201.487 13.248C204.773 13.248 207.717 13.9733 210.319 15.424C212.922 16.8747 214.949 18.9013 216.399 21.504C217.893 24.1067 218.639 27.1147 218.639 30.528C218.639 33.9413 217.893 36.9707 216.399 39.616C214.949 42.2187 212.922 44.2453 210.319 45.696C207.717 47.1467 204.773 47.872 201.487 47.872C198.97 47.872 196.666 47.3813 194.575 46.4C192.485 45.4187 190.757 43.9893 189.391 42.112V47.488H183.503V0H189.647V18.688C191.013 16.896 192.719 15.552 194.767 14.656C196.815 13.7173 199.055 13.248 201.487 13.248ZM200.975 42.496C203.151 42.496 205.093 42.0053 206.799 41.024C208.549 40 209.914 38.592 210.895 36.8C211.919 34.9653 212.431 32.8747 212.431 30.528C212.431 28.1813 211.919 26.112 210.895 24.32C209.914 22.4853 208.549 21.0773 206.799 20.096C205.093 19.1147 203.151 18.624 200.975 18.624C198.842 18.624 196.901 19.1147 195.151 20.096C193.402 21.0773 192.037 22.4853 191.055 24.32C190.074 26.112 189.583 28.1813 189.583 30.528C189.583 32.8747 190.074 34.9653 191.055 36.8C192.037 38.592 193.402 40 195.151 41.024C196.901 42.0053 198.842 42.496 200.975 42.496Z\"\n455:                               fill=\"white\"\n456:                             />\n457:                             <path\n458:                               d=\"M256.568 13.568V47.488H250.68V42.112C249.315 43.9893 247.587 45.4187 245.496 46.4C243.406 47.3813 241.102 47.872 238.584 47.872C235.299 47.872 232.355 47.1467 229.752 45.696C227.15 44.2453 225.102 42.2187 223.608 39.616C222.158 36.9707 221.432 33.9413 221.432 30.528C221.432 27.1147 222.158 24.1067 223.608 21.504C225.102 18.9013 227.15 16.8747 229.752 15.424C232.355 13.9733 235.299 13.248 238.584 13.248C241.016 13.248 243.256 13.7173 245.304 14.656C247.352 15.552 249.059 16.896 250.424 18.688V13.568H256.568ZM239.096 42.496C241.23 42.496 243.171 42.0053 244.92 41.024C246.67 40 248.035 38.592 249.016 36.8C249.998 34.9653 250.488 32.8747 250.488 30.528C250.488 28.1813 249.998 26.112 249.016 24.32C248.035 22.4853 246.67 21.0773 244.92 20.096C243.171 19.1147 241.23 18.624 239.096 18.624C236.92 18.624 234.958 19.1147 233.208 20.096C231.502 21.0773 230.136 22.4853 229.112 24.32C228.131 26.112 227.64 28.1813 227.64 30.528C227.64 32.8747 228.131 34.9653 229.112 36.8C230.136 38.592 231.502 40 233.208 41.024C234.958 42.0053 236.92 42.496 239.096 42.496Z\"\n459:                               fill=\"white\"\n460:                             />\n461:                             <path\n462:                               d=\"M283.745 13.248C288.055 13.248 291.468 14.5067 293.985 17.024C296.545 19.4987 297.825 23.1467 297.825 27.968V47.488H291.681V28.672C291.681 25.3867 290.892 22.912 289.313 21.248C287.735 19.584 285.473 18.752 282.529 18.752C279.201 18.752 276.577 19.7333 274.657 21.696C272.737 23.616 271.777 26.3893 271.777 30.016V47.488H265.633V13.568H271.521V18.688C272.759 16.9387 274.423 15.5947 276.513 14.656C278.647 13.7173 281.057 13.248 283.745 13.248ZM319.82 31.68L312.78 38.208V47.488H306.636V0H312.78V30.464L331.276 13.568H338.7L324.428 27.584L340.108 47.488H332.556L319.82 31.68Z\"\n463:                               fill=\"white\"\n464:                             />\n465:                           </svg>\n466:                         </div>\n467: \n468:                         {/* Double intersecting circle Brand Logo - bottom right corner */}\n469:                         <div className=\"absolute right-5 sm:right-6 bottom-5 sm:bottom-6 flex -space-x-3 items-center opacity-90\">\n470:                           <div className=\"w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/20 backdrop-blur-[1px] border border-white/10\" />\n471:                           <div className=\"w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/35 backdrop-blur-[1px] border border-white/10\" />\n472:                         </div>\n473:                       </div>\n474:                     </div>\n475:                   );\n476:                 }\n477: \n478:                 // Back face slice\n479:                 if (isBackFace) {\n480:                   const backBorderStyle = \"border border-white/15\";\n481:                   const details = CARD_DETAILS[i % CARD_DETAILS.length];\n482:                   return (\n483:                     <div\n484:                       key={layerIdx}\n485:                       className={`absolute inset-0 rounded-[16px] ${backBorderStyle} pointer-events-none overflow-hidden`}\n486:                       style={{\n487:                         backgroundColor: baseBgColor,\n488:                         transform: `translateZ(${zOffset}px) rotateX(180deg)`,\n489:                         backfaceVisibility: 'hidden',\n490:                         boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)',\n491:                       }}\n492:                     >\n493:                       {/* Render Video with premium 16px blur on the back face of the card */}\n494:                       <div className=\"absolute inset-0 pointer-events-none\" style={{ filter: 'blur(16px)', transform: 'scale(1.15)' }}>\n495:                         <video\n496:                           src={videoSrc}\n497:                           autoPlay\n498:                           loop\n499:                           muted\n500:                           playsInline\n501:                           className=\"absolute inset-0 w-full h-full object-cover\"\n502:                         />\n503:                       </div>\n504: \n505:                       {/* Premium Real Magnetic stripe */}\n506:                       <div className=\"absolute left-0 right-0 top-4 sm:top-5 h-7 sm:h-9 bg-black/85 backdrop-blur-md z-10\" />\n507: \n508:                       {/* Card holder info and details on the bottom-left */}\n509:                       <div \n510:                         className=\"absolute left-4 sm:left-6 bottom-4 sm:bottom-5 z-20 flex flex-col gap-0.5 sm:gap-1 text-left\"\n511:                         style={{ fontFamily: '\"JetBrains Mono\", monospace' }}\n512:                       >\n513:                         {/* Card Number */}\n514:                         <div className=\"font-mono text-[10px] sm:text-[12px] font-medium tracking-[0.14em] text-white select-none\">\n515:                           {details.number}\n516:                         </div>\n517:                         {/* Owner & CVV */}\n518:                         <div className=\"font-mono text-[7px] sm:text-[9px] font-medium text-white/70 tracking-wide flex items-center gap-2 select-none\">\n519:                           <span className=\"uppercase\">{details.name}</span>\n520:                           <span className=\"text-white/40 font-light\">•</span>\n521:                           <span>CVV: {details.cvv}</span>\n522:                         </div>\n523:                       </div>\n524:                     </div>\n525:                   );\n526:                 }\n527: \n528:                 return null;\n529:               })}\n530:             </div>\n531:           ))}\n532:         </div>\n533:       </div>\n534:     </div>\n535:   );\n536: }","url":"/prompts/animated-cards"}},{"id":"arceage-stats","object":"prompt","title":"Arceage Stats","summary":"A preview-led stats prompt for generating a polished AI-built interface.","category":"Stats","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(59).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"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.\n\n### Fonts\n\nImport from Google Fonts in your global CSS:\n```\n@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');\n```\n\nDefine two Tailwind v4 theme fonts:\n- `--font-sans: \"Barlow\", ui-sans-serif, system-ui, sans-serif;` (used as the primary UI font via `font-sans`)\n- `--font-dm-serif: \"Instrument Serif\", serif;` (used as the accent/poetic font via `font-dm-serif`)\n\nThe page wrapper uses `bg-black font-sans text-white`.\n\n### Dependencies\n\n- `react` v19\n- `motion` (npm package \"motion\", imported as `motion/react` -- provides `motion`, `useInView`, `animate`)\n- `tailwindcss` v4 with `@tailwindcss/vite` plugin\n- Vite v6+\n\n### Section Layout\n\nThe section is a `<section>` with:\n- `id=\"stats\"`\n- 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`\n- Inner wrapper: `w-full max-w-[1440px] mx-auto`\n- Content is a two-column flexbox: `flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch`\n\n### Left Column (flex-1, flex flex-col justify-start)\n\nThe entire left column is wrapped in a `motion.div` with staggered reveal animation:\n- `initial=\"hidden\"`, `whileInView=\"visible\"`, `viewport={{ once: true, margin: \"-100px\" }}`\n- Variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06 } }`\n\n**Heading (h2):**\n- Classes: `text-[clamp(1.5rem,4vw,3.5rem)] font-medium tracking-tight mb-6 leading-[1.1] w-[590px] max-w-full`\n- Content uses a custom `<Typewriter>` component (described below):\n  - `<Typewriter text=\"Powering Harvests\" delay={0} speed={0.012} />` followed by `<br />`\n  - `<Typewriter text=\"that \" delay={0.25} speed={0.012} />` then a `<span className=\"font-dm-serif italic font-normal\">` wrapping `<Typewriter text=\"Maximize Your Yield\" delay={0.35} speed={0.012} />`\n- The phrase \"Maximize Your Yield\" renders in Instrument Serif italic as the accent font.\n\n**Subtitle (p):**\n- Classes: `text-base md:text-lg text-white/40 leading-relaxed font-light max-w-lg whitespace-normal mb-16`\n- Content: `<Typewriter text=\"For over a decade, the region's most demanding agricultural operations have relied on our modern machinery and skilled crews to secure their crops efficiently and reduce loss.\" delay={0.1} speed={0.012} />`\n\n**Stats Grid:**\n- Wrapped in `motion.div` with stagger variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.1 } }`\n- Classes: `grid grid-cols-2 md:grid-cols-[max-content_max-content] gap-8 md:gap-x-16 lg:gap-x-24`\n- 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\" } }`\n- Each stat item (`flex flex-col`):\n  - **Number:** `text-4xl md:text-5xl lg:text-[56px] font-dm-serif tracking-tight mb-3` (uses Instrument Serif)\n  - **Label:** `text-[10px] md:text-xs font-semibold text-white/40 uppercase tracking-wider`\n\nThe 5 stats with their AnimatedCounter props:\n1. `value={500} suffix=\"K+\"` / Label: \"Acres Harvested Annually\"\n2. `value={99.8} decimals={1} suffix=\"%\"` / Label: \"Crop Recovery Rate\"\n3. `value={50} suffix=\"+\"` / Label: \"Modern Combines Deployed\"\n4. `value={15} suffix=\"+\"` / Label: \"Crop Varieties Supported\"\n5. `value={24} suffix=\"/7\"` / Label: \"Uptime During Season\"\n\n### AnimatedCounter Component\n\nA helper component that animates from 0 to a target value on scroll into view:\n- Props: `value: number`, `suffix?: string` (default \"\"), `prefix?: string` (default \"\"), `decimals?: number` (default 0)\n- Uses `useRef<HTMLSpanElement>`, `useInView(ref, { once: true, margin: \"-50px\" })` from `motion/react`\n- On `inView`, calls `animate(0, value, { duration: 1.5, ease: \"easeOut\", onUpdate(val) { ref.current.textContent = prefix + val.toFixed(decimals) + suffix } })`\n- Returns `<span ref={ref}>{prefix}0{suffix}</span>` as initial render\n\n### Typewriter Component\n\nA reusable character-by-character reveal animation triggered on scroll:\n- Props: `text: string`, `delay?: number` (default 0), `speed?: number` (default 0.015), `className?: string` (default \"\")\n- Uses `useRef`, `useInView(ref, { once: true, margin: \"-10px\" })` from `motion/react`\n- Renders a `motion.span` with `initial=\"hidden\"` and `animate={inView ? \"visible\" : \"hidden\"}`\n- Parent variants: hidden = `{ opacity: 1 }`, visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }`\n- Splits text into individual characters, each wrapped in `motion.span` with variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1 }`\n\n### Right Column: Logo-Masked Video\n\n- Wrapper: `flex justify-center lg:justify-end items-center shrink-0 lg:w-1/2`\n- Inner `motion.div`:\n  - `initial={{ opacity: 0, scale: 0.9 }}`\n  - `whileInView={{ opacity: 1, scale: 1.2 }}`\n  - `viewport={{ once: true, margin: \"-100px\" }}`\n  - `transition={{ duration: 0.8, delay: 0, ease: \"easeOut\" }}`\n  - Classes: `w-full max-w-[500px] lg:max-w-none lg:w-[120%] aspect-square origin-center`\n  - 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:\n    ```\n    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\n    ```\n  - SVG viewBox: `0 0 100 100`\n  - Mask properties: `maskSize: 'contain'`, `maskRepeat: 'no-repeat'`, `maskPosition: 'center'`\n  - Full inline style object:\n    ```js\n    {\n      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\")`,\n      WebkitMaskSize: 'contain',\n      WebkitMaskRepeat: 'no-repeat',\n      WebkitMaskPosition: 'center',\n      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\")`,\n      maskSize: 'contain',\n      maskRepeat: 'no-repeat',\n      maskPosition: 'center',\n    }\n    ```\n\n- Inside the masked div, a `<video>` element:\n  - Attributes: `autoPlay`, `loop`, `muted`, `playsInline`\n  - Classes: `w-full h-full object-cover`\n  - Source: `https://app-uploads.krea.ai/wan-videos/7f348c17-c3aa-40c9-9d5b-a2bed9a72c2e.mp4` (type `video/mp4`)\n\n### Mobile Responsiveness Summary\n\n- Section padding: `py-8 px-6` on mobile, `md:py-24 md:px-12`, `lg:px-[120px]`\n- Layout stacks vertically on mobile (`flex-col`), goes side-by-side at `lg:` (`flex-row`)\n- Heading uses fluid typography: `clamp(1.5rem, 4vw, 3.5rem)`\n- Stats grid: 2 columns on mobile (`grid-cols-2`), auto-sized on `md:` (`grid-cols-[max-content_max-content]`)\n- Stat numbers: `text-4xl` on mobile, `md:text-5xl`, `lg:text-[56px]`\n- Video mask: `max-w-[500px]` on mobile, full width at `lg:` with `lg:w-[120%]`\n\n---","url":"/prompts/arceage-stats"}},{"id":"cognitra-feature","object":"prompt","title":"Cognitra Feature","summary":"A preview-led feature prompt for generating a polished AI-built interface.","category":"Feature","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(72).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"---\n\n**Prompt:**\n\nCreate a full-viewport section (100vh) that sits over a fixed background video. The section has no background color of its own -- it is fully transparent so the fixed video behind it shows through.\n\n**Background video (fixed, behind everything):**\nA `<video>` element fixed to the viewport (`position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 0`), using this source:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_135830_bb6491d1-9b66-4aec-9722-13b4dfe3fb46.mp4\n```\nIt should `autoPlay`, be `muted`, `loop`, and `playsInline`.\n\n**Section layout:**\n- `position: relative; z-index: 1`\n- `display: flex; flex-direction: column; justify-content: center` (centers content vertically)\n- `height: 100vh`\n- Padding: `70px 32px 32px 32px`\n\n**Content block** (inside the section):\n- A wrapper `div` with `display: flex; flex-direction: column; align-items: flex-start; max-width: 720px`\n- **Heading (`<h2>`):**\n  - Text: `\"WE BUILD END-TO-END AI AUTOMATION SYSTEMS.\"`\n  - Each word is wrapped in an individual `<span>` element, displayed using `display: flex; flex-wrap: wrap; gap: 0.25em`\n  - Each word animates in with a staggered fade-up animation: starts at `opacity: 0, y: 32px`, animates to `opacity: 1, y: 0` using Framer Motion `whileInView` with `viewport: { once: true, amount: 0.2 }`\n  - Stagger: first word at `delay: 0.15`, each subsequent word adds `0.08s` (so word 2 = 0.23, word 3 = 0.31, etc.)\n  - Animation easing: `[0.22, 1, 0.36, 1]`, duration: `0.7s`\n  - Typography: `font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0`\n\n- **Subtext (`<p>`):**\n  - Text: `\"We provide all-in-one AI automation services in one place.\"`\n  - `margin-top: 24px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 260px`\n  - Same fade-up animation as the words but with `delay: 0.9` and default `y: 24px`\n\n**Font:**\n```css\n@import url('https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var');\n* { font-family: 'Helvetica Now Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; }\n```\n\n**FadeUp component (reusable, Framer Motion):**\n```tsx\nimport { motion } from 'framer-motion';\nimport { CSSProperties, ReactNode } from 'react';\n\ntype FadeUpProps = {\n  children: ReactNode;\n  delay?: number;\n  duration?: number;\n  y?: number;\n  className?: string;\n  style?: CSSProperties;\n  as?: 'div' | 'section' | 'span' | 'h1' | 'h2' | 'h3' | 'p' | 'nav';\n  once?: boolean;\n};\n\nexport function FadeUp({\n  children, delay = 0, duration = 0.7, y = 24,\n  className, style, as = 'div', once = true,\n}: FadeUpProps) {\n  const Tag = motion[as];\n  return (\n    <Tag\n      className={className}\n      style={style}\n      initial={{ opacity: 0, y }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once, amount: 0.2 }}\n      transition={{ duration, delay, ease: [0.22, 1, 0.36, 1] }}\n    >\n      {children}\n    </Tag>\n  );\n}\n```\n\n**Mobile responsive (max-width: 900px):**\n- Section padding changes to `90px 18px 32px 18px`\n\n**Tech stack:** React 18, TypeScript, Vite, Tailwind CSS 3, Framer Motion 12.\n\n---","url":"/prompts/cognitra-feature"}},{"id":"coffee-rewards","object":"prompt","title":"Coffee Rewards","summary":"A preview-led loyalty app prompt for generating a polished AI-built interface.","category":"Loyalty App","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/uploaded/coffeorangeArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements.\n\n**Phone mockup:**\n- 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow\n- Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar\n\n**Hero section (top):**\n- Full-width, 430px tall\n- Contains a looping muted autoplay video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4`\n- Video covers the area with `object-fit: cover; object-position: center top`\n- Bottom gradient overlay fading from transparent at 52% to the background color at 100%\n- Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px\n\n**Identity section (overlaps hero by -112px margin-top):**\n- Centered name \"Dasha\" (28px, weight 500)\n- Left and right laurel images flanking the name (local assets `/assets/images/laurel-left.png` and `laurel-right.png`), 73px tall, 0.6 opacity, positioned via `right: calc(50% + 66px)` / `left: calc(50% + 66px)`\n- Subtitle \"Plum Parfait Latte\" below (15px, muted color `rgba(235, 220, 205, 0.55)`)\n\n**Achievements pill (centered, 30px below identity):**\n- Glass pill button, 54px tall, 225px wide, 27px border-radius\n- Trophy icon (local `/assets/images/icon-trophy.png`, 18px) + text \"12 achievements\" (18px, weight 500)\n\n**Stats grid (3 columns, 12px gap, 26px top padding, 16px horizontal padding):**\n- Each card: semi-transparent background `rgba(255,255,255,0.06)`, 24px border-radius\n- Card 1: coffee image `https://polo-pecan-73837341.figma.site/_assets/v11/a8ba62db54d1e331b7beb36d69308e9b92516b99.png` (84x84), number \"154\", label \"drinks consumed\"\n- Card 2: sandwich image `https://polo-pecan-73837341.figma.site/_assets/v11/953600065119f54f64ab9edb076b3cbb289fcff8.png` (84x84), number \"36\", label \"sandwiches eaten\"\n- Card 3: cafe image `https://polo-pecan-73837341.figma.site/_assets/v11/aef68e05f729a30ed177f74c2cece578c05bfdba.png` (84x84), number \"12\", label \"cafes visited\"\n- Numbers: 25px, weight 500. Labels: 13px, color `#BAAA9A8C`\n\n**Favorite card (12px below stats, 16px horizontal margin):**\n- Same card background, 24px radius, 110px height, flex row with 16px gap\n- Latte image `https://polo-pecan-73837341.figma.site/_assets/v11/976a811111808abc50be33c2483872dbdb6ad5a8.png` (108x108, object-fit contain)\n- Text column: \"Favorite\" (13px, weight 500), \"Latte\" (19px, weight 500), \"Ordered 73 times\" (13px, color `#BAAA9A8C`)\n- Shuffle button on right (glass circle, local icon `/assets/images/icon-shuffle.png` 19px)\n\n**Partial next card:** Same card style but only 34px tall with flat bottom corners (teaser for scroll)\n\n**Glass button system:**\n- Shared `.glass` class: no border, `rgba(255,255,255,0.03)` background, subtle inset box-shadows for edge highlights, `backdrop-filter: blur(2px) saturate(1.3)`, scale-down on `:active`\n- `.glass.circle`: 58x44px, 22px radius\n- `.glass.pill`: 54px tall, pill-shaped\n\n**Fonts:**\n- Primary: \"Neue Haas Unica\" (loaded from local `/assets/fonts/neue-haas-unica/stylesheet.css`)\n- Also load \"Helvetica Now Display\" from `/assets/fonts/helvetica-now/stylesheet.css`\n- Fallbacks: -apple-system, SF Pro Display, Inter, Segoe UI, Roboto\n\n**Page background (behind phone):**\n- Multiple warm-toned radial gradients over `#070402`:\n  - `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`\n  - `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`\n  - `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`\n  - `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`\n\n**Entry animations (respects prefers-reduced-motion):**\n- Hero: `heroReveal` - opacity 0 + scale(1.01) to normal, 1.9s, cubic-bezier(0.16, 1, 0.3, 1)\n- Top bar buttons: `dropIn` from translateY(-10px), 0.7s, staggered 0.35s/0.42s\n- Laurels: `fadeIn` 0.8s, delay 0.5s\n- Name: `fadeRise` from translateY(16px), 0.7s, delay 0.5s\n- Subtitle: same, delay 0.58s\n- Achievements: same, delay 0.66s\n- Stat cards: staggered at 0.74s, 0.80s, 0.86s\n- Favorite card: delay 0.94s\n- Next card: fadeIn delay 1.02s\n- All use cubic-bezier(0.16, 1, 0.3, 1) except simple fadeIn which uses ease-out\n\n**JavaScript (liquid glass effect):**\n- Generates a displacement map canvas for each `[data-liquid]` element based on its dimensions and border-radius\n- Uses SDF (signed distance field) of a rounded rectangle to compute refraction vectors\n- Creates SVG `<feDisplacementMap>` filters and applies them as `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)`\n- Falls back to standard blur if SVG filter not supported\n\n**CSS variables:**\n```\n--bg: #180a06\n--card: rgba(255, 255, 255, 0.06)\n--text: #ede4d8\n--muted: rgba(235, 220, 205, 0.55)\n--radius-card: 24px\n```\n\n**Responsive:** At 440px viewport, phone scales to zoom 0.6. Body flex-wraps at 900px.","url":"/prompts/coffee-rewards"}},{"id":"faq-cta","object":"prompt","title":"FAQ CTA","summary":"A preview-led cta prompt for generating a polished AI-built interface.","category":"CTA","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(61).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"**PROMPT:**\n\nBuild a React + TypeScript + Vite + Tailwind CSS page with a \"CTA + FAQ + Footer\" section using the **Inter** font. Use `lucide-react` for icons (`ChevronDown`, `ChevronUp`). No other UI libraries.\n\n### Layout\n\nA centered container `max-w-[1100px] w-full mx-auto px-5`, white body (`bg-white text-neutral-900`), applied font: `style={{ fontFamily: \"'Inter', sans-serif\" }}`. Main section has `py-20 max-[900px]:py-[60px]`.\n\nInside `<main>`, a two-column grid:\n- `grid grid-cols-[1.6fr_1fr] gap-[30px] items-stretch max-[900px]:grid-cols-1 max-[900px]:gap-[60px]`\n\n### Left column — Animated Gradient CTA card\n\nA div with class `c5-animated-gradient rounded-[24px] py-20 px-10 text-white flex flex-col justify-center items-center text-center` and inline `boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05)'`.\n\nContents:\n- `<h2>` — \"Ready to Transfer<br/>Without Borders?\" with classes `font-normal leading-[1.1] mb-[15px]` and inline `fontSize: '3.5rem', letterSpacing: '-0.03em'`.\n- `<p>` — \"Send Money Worldwide at the Best Rates\" with `text-[0.9rem] mb-[30px] font-normal opacity-85`.\n- `<button>` — \"Get Started Today\", classes `bg-neutral-900 text-white font-semibold cursor-pointer border-none text-[0.95rem] transition-all duration-200 hover:-translate-y-0.5`, inline `padding: '14px 32px', borderRadius: '12px', boxShadow: '0 10px 20px rgba(0,0,0,0.3)'`. On hover, bump shadow to `0 14px 30px rgba(0,0,0,0.4)` via `onMouseEnter`/`onMouseLeave`.\n\n### Animated Gradient CSS (put in `src/index.css` after the Tailwind directives)\n\nUse CSS `@property` declarations so custom properties interpolate smoothly, five radial-gradient blobs that each drift across wide paths AND pulse in size. Fast, looping, respects `prefers-reduced-motion`:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@property --c5-x1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }\n@property --c5-y1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }\n@property --c5-x2 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }\n@property --c5-y2 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }\n@property --c5-x3 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }\n@property --c5-y3 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }\n@property --c5-x4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }\n@property --c5-y4 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }\n@property --c5-x5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }\n@property --c5-y5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }\n@property --c5-s1 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }\n@property --c5-s2 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }\n@property --c5-s3 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }\n@property --c5-s4 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }\n@property --c5-s5 { syntax: '<percentage>'; inherits: false; initial-value: 65%; }\n\n.c5-animated-gradient {\n  background-color: #ff8e53;\n  background-image:\n    radial-gradient(circle at var(--c5-x1) var(--c5-y1), #fff1aa 0px, transparent var(--c5-s1)),\n    radial-gradient(circle at var(--c5-x2) var(--c5-y2), #ff4b2b 0px, transparent var(--c5-s2)),\n    radial-gradient(circle at var(--c5-x3) var(--c5-y3), #8aff8a 0px, transparent var(--c5-s3)),\n    radial-gradient(circle at var(--c5-x4) var(--c5-y4), #ffd000 0px, transparent var(--c5-s4)),\n    radial-gradient(circle at var(--c5-x5) var(--c5-y5), #ff1493 0px, transparent var(--c5-s5));\n  animation:\n    c5-blob1 5s ease-in-out infinite,\n    c5-blob2 6s ease-in-out infinite,\n    c5-blob3 5.5s ease-in-out infinite,\n    c5-blob4 6.5s ease-in-out infinite,\n    c5-blob5 4s ease-in-out infinite,\n    c5-size1 3.5s ease-in-out infinite,\n    c5-size2 4.2s ease-in-out infinite,\n    c5-size3 3.8s ease-in-out infinite,\n    c5-size4 4.6s ease-in-out infinite,\n    c5-size5 3s ease-in-out infinite;\n}\n\n@keyframes c5-blob1 {\n  0%,100% { --c5-x1: 5%;  --c5-y1: 5%;  }\n  25%     { --c5-x1: 45%; --c5-y1: 20%; }\n  50%     { --c5-x1: 30%; --c5-y1: 55%; }\n  75%     { --c5-x1: 0%;  --c5-y1: 30%; }\n}\n@keyframes c5-blob2 {\n  0%,100% { --c5-x2: 95%; --c5-y2: 5%;  }\n  33%     { --c5-x2: 55%; --c5-y2: 35%; }\n  66%     { --c5-x2: 80%; --c5-y2: 65%; }\n}\n@keyframes c5-blob3 {\n  0%,100% { --c5-x3: 5%;  --c5-y3: 95%; }\n  40%     { --c5-x3: 45%; --c5-y3: 65%; }\n  70%     { --c5-x3: 25%; --c5-y3: 100%; }\n}\n@keyframes c5-blob4 {\n  0%,100% { --c5-x4: 95%; --c5-y4: 95%; }\n  30%     { --c5-x4: 60%; --c5-y4: 70%; }\n  60%     { --c5-x4: 100%; --c5-y4: 50%; }\n}\n@keyframes c5-blob5 {\n  0%,100% { --c5-x5: 50%; --c5-y5: 50%; }\n  25%     { --c5-x5: 70%; --c5-y5: 30%; }\n  50%     { --c5-x5: 40%; --c5-y5: 70%; }\n  75%     { --c5-x5: 30%; --c5-y5: 40%; }\n}\n\n@keyframes c5-size1 { 0%,100% { --c5-s1: 45%; } 50% { --c5-s1: 80%; } }\n@keyframes c5-size2 { 0%,100% { --c5-s2: 45%; } 50% { --c5-s2: 85%; } }\n@keyframes c5-size3 { 0%,100% { --c5-s3: 45%; } 50% { --c5-s3: 78%; } }\n@keyframes c5-size4 { 0%,100% { --c5-s4: 45%; } 50% { --c5-s4: 82%; } }\n@keyframes c5-size5 { 0%,100% { --c5-s5: 50%; } 50% { --c5-s5: 85%; } }\n\n@media (prefers-reduced-motion: reduce) {\n  .c5-animated-gradient { animation: none; }\n}\n```\n\n### Right column — FAQ accordion\n\nState: `const [activeIndex, setActiveIndex] = useState<number | null>(0);` with toggle function.\n\nFAQ data array (in order):\n1. Q: \"What is the maximum amount I can send?\" — A: \"Transfer limits depend on your verification level and country. You can check your limits inside your account settings.\"\n2. Q: \"Does my recipient need an account?\" — A: \"No, your recipient doesn't need an account. Funds can be sent directly to their bank account or mobile wallet.\"\n3. Q: \"Is there a mobile app available?\" — A: \"Yes, our mobile app is available on both iOS and Android for easy transfers on the go.\"\n4. Q: \"Can I cancel a transfer?\" — A: \"Transfers can be cancelled if they have not yet been processed by the receiving bank. Check your transfer status for options.\"\n5. Q: \"What currencies are supported?\" — A: \"We support over 50 currencies worldwide. You can view the full list of supported currencies in our app or website.\"\n\nContainer: `flex flex-col justify-center gap-3`.\n\nEach item: clickable div, `bg-white border rounded-[10px] py-[18px] px-5 cursor-pointer transition-all duration-200`, border color `#eaeaea` when active else `#f0f0f0` (+ `hover:border-[#eaeaea]`). Box shadow `0 4px 12px rgba(0,0,0,0.04)` when active, else `0 2px 8px rgba(0,0,0,0.02)`.\n\nRow: `flex justify-between items-center font-normal text-[0.9rem] text-neutral-900`, question on left, `ChevronUp` (size 20) if active else `ChevronDown`.\n\nWhen active, answer block below: `mt-3 text-[0.9rem] text-[#666] leading-[1.6]`.\n\n### Footer\n\n`<footer className=\"bg-[#fafafa] pt-20 pb-5 max-[900px]:pt-[60px]\">`, container `max-w-[1100px] w-full mx-auto px-5`.\n\nGrid: `grid grid-cols-[2fr_1fr_1fr_2fr] gap-10 mb-[50px] max-[900px]:grid-cols-2 max-[480px]:grid-cols-1`.\n\n1. **Logo column**: `<img src=\"https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg\" className=\"h-6 mb-[15px]\" style={{ filter: 'brightness(0)' }}/>` then `<p className=\"text-[0.85rem] text-[#888] leading-[1.6] max-w-[220px]\">Reliable transfers that always reach their destination on time.</p>`.\n2. **Navigation**: `<h4 className=\"font-semibold mb-5 text-[0.95rem] text-neutral-900\">Navigation</h4>` + `<ul>` of `Features, Benefits, Testimonials, Pricing` — each `<li className=\"mb-3\">` with `<a href=\"#\" className=\"text-[#888] no-underline text-[0.85rem] transition-colors duration-200 hover:text-neutral-900\">`.\n3. **Pages**: same styling, items `Home, Contact, 404`.\n4. **Newsletter**: heading \"Newsletter\", p: \"Join our newsletter and get notified.\" (`text-[0.85rem] text-[#888] mb-[15px]`), then `flex gap-[10px]`:\n   - Input: `type=\"email\"`, placeholder \"Enter your email...\", classes `flex-grow border border-[#f0f0f0] bg-white outline-none transition-colors duration-200 focus:border-[#ccc] text-[0.9rem]`, inline `padding: '12px 16px', borderRadius: '10px', boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.02)'`.\n   - Button \"Subscribe\": `bg-neutral-900 text-white border-none font-semibold cursor-pointer transition-all duration-200 hover:-translate-y-0.5 text-[0.9rem]`, inline `padding: '12px 28px', borderRadius: '10px', boxShadow: '0 12px 24px rgba(0,0,0,0.4)'`.\n\nBottom bar: `border-t border-[#f0f0f0] pt-[25px] pb-[10px] flex justify-between text-[0.85rem] text-[#888] max-[480px]:flex-col max-[480px]:gap-[15px] max-[480px]:items-center` containing \"All rights reserved. © 2025\" and \"Designed by Peter Design\".\n\n### Font loading\n\nAdd to `index.html` `<head>`: Google Fonts Inter preconnect + stylesheet link:\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\n### Notes\n\n- Gradient uses five colors: base `#ff8e53`, blobs `#fff1aa`, `#ff4b2b`, `#8aff8a`, `#ffd000`, `#ff1493`.\n- Animation uses CSS `@property` for GPU-friendly custom-property interpolation — this is the modern standard for animated CSS gradients (no JS, no canvas).\n- Blobs travel wide paths and pulse in radius; durations 3–6.5s, each offset for organic motion.","url":"/prompts/faq-cta"}},{"id":"no-code-waitlist","object":"prompt","title":"No-Code Waitlist","summary":"A preview-led waitlist prompt for generating a polished AI-built interface.","category":"Waitlist","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://stream.mux.com/iY611PYuZ02AKpIzYB4Q1BMpl7W2O3UwqjQm9p01xlmVg.m3u8"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen dark hero section landing page in React + Vite + Tailwind CSS v4 + Motion (framer-motion) + Lucide React icons + hls.js. The page should be a single screen (100vh, no scroll) with a black background, a fullscreen background video, a glassmorphism navbar, and a centered hero with an email capture CTA.\n>\n> **Dependencies:** `react`, `react-dom`, `motion`, `hls.js`, `lucide-react`, `tailwindcss` v4 with `@tailwindcss/vite`, `@vitejs/plugin-react`\n>\n> **Fonts:** Import Google Fonts:\n> - `Inter` (weights 300, 400, 500, 600) -- used as the base sans-serif font\n> - `Instrument Serif` (regular and italic) -- used for the hero heading\n>\n> **CSS (`index.css`):**\n> - Import both Google Font URLs, then `@import \"tailwindcss\";`\n> - Set `@theme { --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif; }`\n> - `:root` variables: `--background: #000000; --foreground: #ffffff;`\n> - `body`: background-color var(--background), color var(--foreground), font-family var(--font-sans), `-webkit-font-smoothing: antialiased`, `letter-spacing: -0.01em`\n> - `.liquid-glass` class: `background: rgba(255,255,255,0.01)`, `background-blend-mode: luminosity`, `backdrop-filter: blur(4px)`, `-webkit-backdrop-filter: blur(4px)`, `border: none`, `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`, `position: relative`, `overflow: hidden`. It has a `::before` pseudo-element for a gradient border effect: `padding: 1.4px`, `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`, masked with `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)` and `-webkit-mask-composite: xor; mask-composite: exclude;`\n> - `.glass-pill` class: `background: rgba(255,255,255,0.04)`, `backdrop-filter: blur(16px) saturate(180%)`, `border-radius: 9999px`, `box-shadow: none !important`\n>\n> **Background Video component:**\n> - Renders an absolutely positioned `<div>` covering the full parent (`absolute inset-0 overflow-hidden pointer-events-none`)\n> - Contains a `<video>` element: `autoPlay`, `muted`, `loop`, `playsInline`, classes `w-full h-full object-cover opacity-100`\n> - Video source URL: `https://stream.mux.com/kimF2ha9zLrX64H00UgLGPflCzNtl1T0215MlAmeOztv8.m3u8` (this is an HLS stream from Mux, NOT CloudFront)\n> - Uses `hls.js`: if the browser natively supports HLS (`video.canPlayType(\"application/vnd.apple.mpegurl\")`), set `video.src` directly; otherwise instantiate `new Hls()`, `loadSource`, `attachMedia`\n>\n> **Navbar component:**\n> - Animates in with `motion.nav`: `initial={{ y: -20, opacity: 0 }}`, `animate={{ y: 0, opacity: 1 }}`\n> - Classes: `relative z-20 px-6 py-6 w-full`\n> - Inner container: `liquid-glass rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto`\n> - Left side (`flex items-center gap-8`):\n>   - Logo: `Globe` icon from lucide-react (w-6 h-6 text-white) + \"Asme\" text (`text-white font-semibold text-lg`), in a `flex items-center gap-2` wrapper\n>   - Nav links: \"Features\", \"Pricing\", \"About\" -- hidden on mobile (`hidden md:flex`), `items-center gap-8 text-white/80 text-sm font-medium`, each link has `hover:text-white transition-colors duration-300`\n> - Right side (`flex items-center gap-4`):\n>   - \"Sign Up\" plain text button: `text-white hover:text-white/80 transition-colors text-sm font-medium cursor-pointer`\n>   - \"Login\" glassmorphism button: `liquid-glass rounded-full px-6 py-2 text-sm font-medium text-white hover:opacity-90 transition-opacity cursor-pointer`\n>\n> **Hero component:**\n> - `<section>` with `relative flex-1 flex flex-col items-center justify-center px-6`\n> - Content wrapper: `relative z-10 text-center max-w-5xl mx-auto flex flex-col items-center justify-center w-full gap-12`\n> - **Tagline** (motion.p): text \"BUILD A NO-CODE AI APP IN MINUTES\", `text-white/80 text-[10px] md:text-[11px] font-medium tracking-[0.2em] uppercase mb-4`, animates `initial={{ opacity: 0, y: 10 }}`, `animate={{ opacity: 1, y: 0 }}`, `transition={{ delay: 0.1 }}`\n> - **Heading** (motion.h1): text \"A new way to think and create with computers\" (with `<br className=\"hidden md:block\" />` after \"create\"), `fontFamily: \"'Instrument Serif', serif\"` set via inline style, classes `text-4xl md:text-[64px] font-medium tracking-[-0.01em] leading-[1.1] mb-6 bg-gradient-to-b from-white via-white/95 to-white/70 bg-clip-text text-transparent max-w-4xl`, animates `initial={{ opacity: 0, y: 20 }}`, `animate={{ opacity: 1, y: 0 }}`, `transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}`\n> - **CTA area** (motion.div): `min-h-[50px] mt-2`, animates with `delay: 0.4`. Uses `AnimatePresence mode=\"wait\"` to toggle between:\n>   - **Button state**: \"Get early access\" -- `px-10 py-3 text-[14px] font-medium border border-white/10 rounded-full hover:border-white/30 hover:bg-white/[0.02] transition-all duration-300 text-white/90 backdrop-blur-sm cursor-pointer`. On click, switches to email form.\n>   - **Email form state**: a `<form>` with `flex items-center gap-2 pl-5 pr-1.5 py-1.5 text-[14px] font-medium border border-white/20 rounded-full bg-white/[0.02] backdrop-blur-sm w-full max-w-[320px] focus-within:border-white/40 transition-colors duration-300`. Contains an email `<input>` (transparent background, white text, `placeholder-white/45`, `autoFocus`) and a submit button with either `ArrowRight` icon (default) or `Check` icon (after submit). Both states animate scale 0.95 to 1 with 0.2s duration.\n>   - **Typewriter placeholder**: when the email form opens, the placeholder text \"Enter Your Email Here For Early Access\" types in character by character at 60ms intervals. After submission, it types \"You Will Receive Notifications By Email\" instead. After 4 seconds, it resets back to the button state.\n> - **\"Play Video Demo\"** link below (motion.div with `delay: 0.8` fade-in): `text-white/80 hover:text-white/40 transition-colors duration-300 text-[13px] font-medium tracking-wide`\n>\n> **App root layout:**\n> - `<main>` with `relative bg-black h-screen w-screen flex flex-col overflow-hidden selection:bg-white selection:text-black shrink-0`\n> - Render order: `BackgroundVideo`, `Navbar`, `Hero`\n> - Text selection is styled white bg with black text\n\n---\n\nKey clarification: The video URL is **not** from CloudFront. It is an HLS stream hosted on **Mux**: `https://stream.mux.com/kimF2ha9zLrX64H00UgLGPflCzNtl1T0215MlAmeOztv8.m3u8`. The `.m3u8` format requires hls.js for non-Safari browsers.","url":"/prompts/no-code-waitlist"}},{"id":"email-landing-page","object":"prompt","title":"Email Landing Page","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(59).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a premium, AI-native email client landing page called \"Aura\" using **React 18 + TypeScript + Vite + Tailwind CSS + motion/react (framer motion) + lucide-react**. The aesthetic is dark (bg `#0c0c0c`), cinematic, glassy, with a looping fullscreen background video, a shiny gradient headline, a macOS-style menu bar, a realistic inbox mockup, and a custom \"liquid-glass\" card treatment.\n\n## Stack / setup\n\n- `package.json` dependencies: `react`, `react-dom`, `@supabase/supabase-js`, `motion` (v12+, import from `motion/react`), `lucide-react`.\n- Tailwind config extends colors with `brand: '#3D81E3'` and fontFamily sans with `['Inter','system-ui','sans-serif']`.\n- Font: Google Fonts Inter weights 400, 500, 600, 700, 800, 900. Import in `index.css` via `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');`.\n- `html,body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }`.\n- Background color base `#0c0c0c`, text white, selection `bg-brand/30`.\n\n## Global background video (fixed, behind everything)\n\nInside the root wrapper (`relative min-h-screen overflow-x-hidden bg-[#0c0c0c] text-white`), render a fixed full-screen video:\n\n```\n<div className=\"fixed inset-0 z-0 pointer-events-none\">\n  <video autoPlay loop muted playsInline\n    className=\"w-full h-full object-cover pointer-events-none\"\n    src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4\" />\n</div>\n```\n\nAlso render two hidden-on-mobile fixed vertical guide lines at the 36rem container edges:\n```\n<div className=\"hidden md:block pointer-events-none fixed inset-y-0 left-1/2 -translate-x-[calc(50%+36rem)] w-px bg-white/10 z-[5]\" />\n<div className=\"hidden md:block pointer-events-none fixed inset-y-0 left-1/2 translate-x-[calc(-50%+36rem)] w-px bg-white/10 z-[5]\" />\n```\n\n## Global SVG noise filters (two, both id `c3-noise`)\n\n- One at root level (subtle grain, multiply blend) for the shiny headline.\n- One inside the pricing section (fractal noise, overlay blend) for the watermark.\n\nRoot filter:\n```\n<filter id=\"c3-noise\">\n  <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"2\" stitchTiles=\"stitch\" />\n  <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0\" />\n  <feComposite in2=\"SourceGraphic\" operator=\"in\" result=\"noise\" />\n  <feBlend in=\"SourceGraphic\" in2=\"noise\" mode=\"multiply\" />\n</filter>\n```\n\nPricing filter:\n```\n<filter id=\"c3-noise\">\n  <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.5\" numOctaves=\"2\" stitchTiles=\"stitch\" />\n  <feComponentTransfer><feFuncA type=\"linear\" slope=\"0.075\" /></feComponentTransfer>\n  <feComposite in2=\"SourceGraphic\" operator=\"in\" result=\"noise\" />\n  <feBlend in=\"SourceGraphic\" in2=\"noise\" mode=\"overlay\" />\n</filter>\n```\n\n## Shared primitives\n\n**AppleLogo** — inline SVG Apple mark, `viewBox=\"0 0 384 512\"`, `fill=\"currentColor\"`, default `w-4 h-4`. Path:\n`M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z`.\n\n**LogoMark** — abstract 4-quadrant curve mark, `viewBox=\"0 0 256 256\"`, default `w-8 h-8`, white fill. Path:\n`M 0 128 C 70.692 128 128 185.308 128 256 L 64 256 C 64 220.654 35.346 192 0 192 Z M 256 192 C 220.654 192 192 220.654 192 256 L 128 256 C 128 185.308 185.308 128 256 128 Z M 128 0 C 128 70.692 70.692 128 0 128 L 0 64 C 35.346 64 64 35.346 64 0 Z M 192 0 C 192 35.346 220.654 64 256 64 L 256 128 C 185.308 128 128 70.692 128 0 Z`.\n\n**AppleButton** — rounded-full white pill, Apple logo + \"Download Aura\" label + ChevronRight. Chevron translates `+1px` on group hover. Classes: `group inline-flex items-center justify-center gap-2 rounded-full bg-white text-black font-medium text-sm px-5 py-3 transition-all hover:bg-white/90 active:scale-[0.98]`. Accepts `label` and `full` props.\n\n**SectionEyebrow** — `<span className=\"w-1.5 h-1.5 rounded-full bg-white\" />` + label, optional tag pill with `px-2 py-0.5 rounded-full border border-white/10 text-white/50`.\n\n**gradientStyle** used on the headline word \"Revitalized\":\n```\nbackgroundImage: 'linear-gradient(to right, #091020 0%, #0B2551 12.5%, #A4F4FD 32.5%, #00d2ff 50%, #0B2551 67.5%, #091020 87.5%, #091020 100%)'\nbackgroundSize: '200% auto'\nWebkitBackgroundClip: 'text' (+ backgroundClip text)\ncolor: 'transparent'; WebkitTextFillColor: 'transparent'\nfilter: 'url(#c3-noise)'\n```\n\nShiny animation (`.animate-shiny`): 6s linear infinite, keyframes shiny `{0%: background-position: -200% center; 100%: 200% center;}`.\n\n## Liquid-glass utility (used across cards)\n\n```\n.liquid-glass {\n  background: rgba(255,255,255,0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);\n  position: relative; overflow: hidden;\n}\n.liquid-glass::before {\n  content: ''; position: absolute; inset: 0; border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor; mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n## Section 1 — Navbar\n\nMax-width `max-w-6xl mx-auto px-6`. Motion nav fades/slides down (opacity 0 -> 1, y -10 -> 0, 0.6s easeOut). Left: just the `LogoMark` (NO \"Aura\" word). Center (`hidden md:flex gap-8`): links `['Solutions','Pricing','Blog','Documentation','Careers']` each `text-white/70 text-sm font-medium hover:text-white` with staggered y animation (delay 0.1 + i*0.05). Right desktop: `<AppleButton />` default label \"Download Aura\". Mobile right: `w-10 h-10 rounded-full border border-white/10 bg-white/5` Menu icon button.\n\n## Section 2 — Hero\n\nCentered section, `pt-16 md:pt-28 pb-20 text-center flex flex-col items-center`.\nMotion h1 (delay 0.3, 0.8s cubic-bezier(.22,1,.36,1)), classes `text-4xl md:text-7xl font-semibold tracking-tight leading-[0.9]`:\n- Line 1: \"Your email.\" (white)\n- Line 2: \"Revitalized\" — apply `animate-shiny` and the `gradientStyle` inline.\n\nThen motion paragraph (delay 0.5): `mt-8 text-white/60 max-w-md text-base leading-[1.5]`:\n> \"Aura is the premier inbox platform for the current era. It leverages powerful AI to organize, prioritize, and refine your messages into total clarity.\"\n\nThen motion div (delay 0.7) with `<AppleButton />` and `text-xs text-white/40` \"Download for Intel / Apple Silicon\".\n\n## Section 3 — macOS menu bar strip\n\nFull-width bar `h-10 bg-black/40 backdrop-blur-md border-t border-b border-white/10`. Inside `max-w-6xl mx-auto px-6 h-full flex items-center justify-between text-xs`. Left: `AppleLogo w-3.5 h-3.5`, bold white \"Aura\", then menu items `['File','Edit','View','Go','Window','Help']` (progressive hiding: index>2 `hidden sm:inline`, index>3 `hidden md:inline`). Right: `Search w-3.5 h-3.5` + \"Wed May 6 1:09 PM\". Enters with delay 0.9.\n\n## Section 4 — Inbox mockup\n\n`max-w-6xl mx-auto px-6 py-16 md:py-24`. Outer container `relative rounded-2xl overflow-hidden border border-white/10 bg-[#0e1014]/90 backdrop-blur-2xl`. Motion enters from y:40 at delay 1.1.\n\nTitle bar: three traffic lights `#ff5f57`, `#febc2e`, `#28c840` (each `w-3 h-3 rounded-full`); center label \"Aura — Inbox\" `text-xs text-white/50`.\n\nBody `grid grid-cols-12 h-[520px]`:\n\n**Sidebar (col-span-3, border-r, bg-black/30, p-4):**\n- White \"Compose with Aura\" button with `Sparkles` icon (`rounded-lg bg-white text-black text-xs font-semibold px-3 py-2`).\n- Nav items (icon + label + optional count): Inbox (12, active), Starred (3), Sent, Drafts (2), Archive, Trash. Active uses `bg-white/10 text-white`, others `text-white/60 hover:bg-white/5`.\n- Labels section: uppercase tracking \"Labels\" small title, then 4 color dots: Work `#00d2ff`, Personal `#A4F4FD`, Travel `#f59e0b`, Finance `#10b981`.\n\n**Message list (col-span-4, border-r):**\n- Search header: `Search` icon + placeholder \"Search mail\".\n- 6 messages with name, subject, preview, time, unread/active flags:\n  - Linear — \"Weekly product digest\" — \"Your team shipped 23 issues this week...\" — 9:41 AM — unread + active\n  - Sophia Chen — \"Re: Q3 roadmap review\" — \"Thanks for sending the deck over. I had a few thoughts...\" — 8:12 AM — unread\n  - Figma — \"Marcus commented on your file\" — \"Love the new direction on the landing hero.\" — Yesterday\n  - Stripe — \"Payout of $12,480.00 sent\" — \"Your payout is on its way to your bank...\" — Yesterday\n  - Vercel — \"Deployment ready for aura-web\" — \"Preview is live at aura-web-g3f.vercel.app\" — Mon\n  - GitHub — \"[aura/core] PR #482 approved\" — \"david-lim approved your pull request.\" — Mon\n\n**Reader (col-span-5):**\n- Toolbar with Reply, Forward, Archive, Trash2 icon buttons (each `w-7 h-7 rounded-md hover:bg-white/5`) and a MoreHorizontal on the right.\n- Header: \"Weekly product digest\"; sender avatar gradient bubble `w-7 h-7 rounded-full bg-gradient-to-br from-[#00d2ff] to-[#0B2551]` with \"L\"; \"Linear\" + \"to me · 9:41 AM\"; \"Work\" pill.\n- Body:\n  - Card with `Sparkles` icon (color `#A4F4FD`) labeled \"Summary by Aura\" and text \"Your team closed 23 issues, merged 14 PRs, and shipped 2 features. Top contributor: Marcus. No action needed.\"\n  - Paragraphs: \"Hi team,\", \"Here is your weekly digest of everything happening across your projects. This was a strong week with significant progress on the Q3 roadmap.\", \"Twenty-three issues were closed, fourteen pull requests were merged, and two customer-facing features went out. The velocity trend continues to climb.\", \"Let me know if you would like a deeper breakdown by project or contributor.\", \"— The Linear team\" (`text-white/50`).\n  - Attachment pill with `Paperclip` icon: \"digest-may-6.pdf\".\n\n## Section 5 — FeatureTriage\n\n`max-w-6xl mx-auto px-6 py-20 md:py-28`, two-column grid `grid md:grid-cols-2 gap-10 md:gap-16 items-start`.\n\nLeft column motion (y 20 -> 0, 0.7s): `SectionEyebrow label=\"Triage\" tag=\"AI-native\"`, h2 `mt-5 text-3xl md:text-5xl font-semibold tracking-tight leading-[1.02]`: \"Clear your inbox\" <br/> \"in a single pass.\". Paragraph `mt-6 text-white/60 text-base leading-[1.6] max-w-md`: \"Aura reads every message, understands intent, and routes the noise away from the signal. Focus on what moves your day forward — the rest handles itself.\" Chips row (`text-xs text-white/70 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03]`): \"Auto-categorize\", \"Snooze for later\", \"Silent newsletters\", \"One-tap unsubscribe\".\n\nRight column: `liquid-glass rounded-2xl p-5` card. Eyebrow text: \"Today · 42 messages triaged\". Four sub-cards (each `liquid-glass rounded-lg p-3`):\n- Priority (4) `#ffffff` — items: \"Sophia Chen — Q3 review\", \"David Lim — contract signoff\"\n- Follow-up (7) `#e5e5e5` — items: \"Marcus — design review\", \"Figma — comment thread\"\n- Updates (18) `#a3a3a3` — items: \"Vercel — deploy ready\", \"GitHub — PR #482 merged\"\n- Archived (13) `#525252` — items: \"Stripe payout · Newsletter · Receipts\"\n\n## Section 6 — LogoCloud\n\n`max-w-6xl mx-auto px-6 py-16 md:py-20`. Centered kicker `text-xs uppercase tracking-widest text-white/40`: \"Trusted by the world's most thoughtful teams\". Grid `mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-6`, each logo name as `text-sm font-semibold tracking-tight text-white/50 hover:text-white`. Names: Linear, Vercel, Figma, Stripe, Ramp, Notion, Loom, Arc. Each fades in with stagger 0.05.\n\n## Section 7 — Testimonials\n\n`max-w-6xl mx-auto px-6 py-20 md:py-28 border-t border-white/10`. 3-col grid of `liquid-glass rounded-2xl p-6` figures. Each: blockquote `text-sm text-white/80 leading-[1.6]` wrapped in quotes, `figcaption mt-6 pt-5 border-t border-white/10` with name `text-sm font-semibold`, role `text-xs text-white/50`, company uppercased `text-xs text-white font-semibold tracking-wide`.\n- \"Aura gave our leadership team four hours of their week back. It reads like email from the future.\" — Parker Wilf, Group Product Manager, MERCURY\n- \"The command palette alone has changed how I process messages. I can't imagine going back to a traditional client.\" — Andrew von Rosenbach, Senior Engineering Program Manager, COHERE\n- \"Triage that actually understands context. Our team stopped dreading Monday morning inboxes.\" — Mathies Christensen, Engineering Manager, LUNAR\n\n## Section 8 — Pricing\n\nUses custom CSS classes (not Tailwind) for cinematic typography.\n\nOuter `<section className=\"c3-pricing-section\">` with its own `<svg>` defining the `c3-noise` pricing filter described earlier.\n\nWatermark (giant hero headline as backdrop):\n```\n<div className=\"c3-watermark-container\">\n  <div className=\"c3-watermark-main\">\n    <span className=\"c3-watermark-line-1\">Your email.</span>\n    <span className=\"c3-watermark-line-2\">Revitalized</span>\n  </div>\n</div>\n```\n\nState: `yearly` boolean toggle. Three plans:\n- **Free** — \"Free\" — \"For creators taking their first steps with Forma.\" — Up to 3 projects in the cloud / Image export up to 1080p / Basic editing tools / Free templates and icons / Access via web and mobile app.\n- **Standard** — monthly \"$9,99/m\" yearly \"$99,99/y\" — \"For freelancers and small teams who need more freedom and flexibility.\" — Up to 50 projects in the cloud / Export up to 4K / Advanced editing toolkit / Team collaboration (up to 5 members) / Access to premium template library.\n- **Pro** (`c3-card-pro`) — monthly \"$19,99/m\" yearly \"$199,99/y\" — \"For studios, agencies, and professional creators working with brands.\" — Unlimited projects / Export up to 8K + animations / AI-powered content generation tools / Unlimited team members / Brand customization.\n\nEach card renders: `c3-tier-small` (tier), `c3-tier-large` (price), `c3-desc`, `c3-list` of checkmark rows (white circle `c3-check` with white SVG check), `c3-btn` \"Choose Plan\".\n\nBelow: `c3-toggle-wrap` with \"Yearly\" label and a pill toggle (white knob black when off; when `.active`, background `rgba(255,255,255,0.2)`, knob white, translated 24px).\n\nPricing CSS (key values, include exactly):\n- `.c3-pricing-section { position: relative; padding: 40px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }`\n- `.c3-watermark-container { position: relative; width: 100%; max-width: 1100px; text-align: center; margin-top: 40px; z-index: 2; }`\n- `.c3-watermark-main { font-size: 9rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; filter: url(#c3-noise); display: flex; flex-direction: column; align-items: center; }`\n- `.c3-watermark-line-1 { color: #fff; }`\n- `.c3-watermark-line-2 { background: linear-gradient(to right, #091020 0%, #0B2551 25%, #A4F4FD 65%, #00d2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }`\n- `.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1100px; margin-top: 60px; transform: translateX(20px); position: relative; z-index: 3; }`\n- `.c3-card { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); backdrop-filter: blur(14px) brightness(0.91); border: 1px solid rgba(255,255,255,1); border-radius: 44px; padding: 50px 24px; min-height: 580px; display: flex; flex-direction: column; transition: all 0.6s cubic-bezier(.22,1,.36,1); overflow: hidden; position: relative; }`\n- `.c3-card::before { content:''; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }`\n- `.c3-card:hover { background: rgba(15,15,15,0.6); border-color: rgba(34,211,238,0.7); transform: translateY(-12px) scale(1.01); }`\n- `.c3-card-pro { background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); }`\n- `.c3-tier-small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); }`\n- `.c3-tier-large { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin-top: 8px; }`\n- `.c3-desc { font-size: 0.88rem; color: rgba(255,255,255,0.45); min-height: 3.2em; margin-top: 16px; margin-bottom: 40px; line-height: 1.5; }`\n- `.c3-list li { display:flex; align-items:flex-start; gap: 14px; font-size: 0.92rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.4; }`\n- `.c3-check { width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }`\n- `.c3-btn { background:#fff; color:#000; padding: 10px 32px; border-radius: 100px; font-weight:600; font-size: 0.88rem; margin-top:auto; border:none; cursor:pointer; align-self:center; transition: all 0.3s cubic-bezier(.22,1,.36,1); }`\n- `.c3-btn:hover { background:#f5f5f5; transform:scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }`\n- `.c3-toggle-wrap { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:1100px; margin-top:32px; padding-right:20px; }`\n- `.c3-toggle { width:52px; height:28px; background:#fff; border-radius:100px; position:relative; cursor:pointer; border:none; transition: background 0.3s cubic-bezier(.4,0,.2,1); padding:0; }`\n- `.c3-toggle-knob { width:20px; height:20px; background:#000; border-radius:50%; position:absolute; top:4px; left:4px; transition: all 0.3s cubic-bezier(.4,0,.2,1); }`\n- `.c3-toggle.active { background: rgba(255,255,255,0.2); }`\n- `.c3-toggle.active .c3-toggle-knob { transform: translateX(24px); background:#fff; }`\n- Media query `(max-width:1024px)`: `.c3-watermark-main { font-size: 3.5rem; filter:none; }`, `.c3-watermark-line-2 { background:none; -webkit-text-fill-color:#00d2ff; color:#00d2ff; }`, `.c3-grid` becomes horizontal scroll-snap flex (`display:flex; overflow-x:auto; scroll-snap-type:x mandatory; transform:none; width:100vw; padding:0 20px; gap:16px; scrollbar-width:none`), cards `flex: 0 0 320px; scroll-snap-align:center`, `.c3-grid::-webkit-scrollbar{display:none}`, `.c3-toggle-wrap { justify-content:center; padding-right:0; }`.\n\n## Section 9 — FinalCTA\n\n`max-w-6xl mx-auto px-6 py-20 md:py-32`. Motion `liquid-glass relative overflow-hidden rounded-3xl px-8 py-16 md:py-24 text-center`. Radial glow overlay: `radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%)` at opacity 0.3.\n- h2 `text-4xl md:text-6xl font-semibold tracking-tight leading-[1.02]`: \"Close the tabs.\" / \"Open your day.\".\n- Paragraph `mt-6 text-white/60 max-w-md mx-auto text-sm leading-[1.6]`: \"Join thousands of builders, founders, and operators who treat email like a tool — not an obligation.\"\n- Buttons: `<AppleButton label=\"Download Aura\" />` and `rounded-full border border-white/15 text-white text-sm font-medium px-5 py-3 hover:bg-white/5` \"Talk to sales\" + ChevronRight.\n\n\nReproduce exactly — fonts, gradient stops, noise filters, copy strings, animation delays, and the CloudFront video URL `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`.","url":"/prompts/email-landing-page"}},{"id":"creative-studio","object":"prompt","title":"Creative Studio","summary":"A preview-led agency prompt for generating a polished AI-built interface.","category":"Agency","subcategory":"Portfolios & agencies","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(71).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen hero section using React, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font. The page is fully mobile-responsive. Here are the exact specifications:\n\n---\n\n**BACKGROUND:**\n- A full-screen autoplaying, looping, muted video covering the entire viewport as a background.\n- Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260517_222138_3e3205be-3364-417b-a64a-bfe087acbec4.mp4`\n- The video is positioned absolute, inset-0, with `object-cover` to fill the viewport.\n\n---\n\n**COLOR:**\n- Accent color: `#5E0ED7` (deep purple). Used for the logo dot, the \"+\" symbols in stats, and the CTA link text.\n- All body text is black (#000).\n\n---\n\n**FONT:**\n- Font family: `'Inter', sans-serif` applied to the root container.\n- All text is uppercase with wide letter-spacing (`tracking-widest` or `tracking-wide`).\n- Font weights: 600 (semibold) throughout.\n\n---\n\n**LAYOUT (flex column, min-h-screen):**\nThe page is a flex column with three vertical sections:\n1. **Nav** (top, fixed height)\n2. **Stats row** (flex-1, vertically centered, right-aligned)\n3. **Bottom content** (pinned to bottom with padding)\n\n---\n\n**NAVIGATION BAR:**\n- Horizontal flex, items centered, justified between. Padding: `px-5 sm:px-8 md:px-12 pt-5 md:pt-6`.\n- **Left:** A circular logo — 32px round div with 2px border in accent color, containing a 10px solid circle in accent color.\n- **Center (hidden on mobile, visible md+):** Four nav links: \"Story\", \"Expertise\", \"Studios\", \"Feedback\". Text: 14px, font-semibold, tracking-widest, uppercase, black.\n- **Right:** A 36px round black button with three horizontal white lines (hamburger icon — three `span` elements, each `w-4 h-0.5 bg-white` with `gap-1`). This opens the mobile menu on click.\n\n---\n\n**MOBILE MENU OVERLAY:**\n- Triggered by hamburger click. Fixed, full-screen, z-50, white background.\n- Top row: same logo (left) and a 36px round black close button with an X icon (right).\n- Below: vertical list of the 4 nav links at `text-3xl`, font-semibold, tracking-widest, uppercase, with `gap-8` and `mt-16`.\n- Bottom (mt-auto): \"Work With Us\" CTA in accent color with ArrowUpRight icon, `text-xl`.\n\n---\n\n**STATS ROW (middle section):**\n- Container: `flex-1 flex items-center justify-end`, with same horizontal padding. `py-8 md:py-0`.\n- Three stat items in a horizontal row with `gap-5 sm:gap-8 md:gap-10`, each right-aligned:\n  - **+300** / CRAFTED BRANDS\n  - **+200** / DIGITAL PRODUCTS\n  - **+100** / VENTURES FUNDED\n- Number styling: `fontSize: clamp(1.5rem, 5vw, 3.5rem)`, weight 600. The \"+\" is rendered separately in accent color at 0.5em size. The number is black.\n- Label: `text-[10px] sm:text-xs md:text-sm`, font-semibold, tracking-widest, uppercase, black, `whitespace-pre-line leading-tight` (each label has a line break between the two words).\n\n---\n\n**BOTTOM SECTION:**\n- Padding: `px-5 sm:px-8 md:px-12 pb-8 md:pb-12`. Flex column with `gap-6 md:gap-12`.\n\n**Row A (tagline + CTA):**\n- Flex row, items-center, justify-between, gap-4.\n- **Left:** Small uppercase tagline paragraph: \"Shaping Bold / Visions Into Power / For Your Tribe\" (with `<br />` line breaks). Text: `text-[10px] sm:text-xs md:text-sm`, font-semibold, tracking-widest, max-width `130px sm:160px md:max-w-xs`.\n- **Right:** CTA link \"Work With Us\" with ArrowUpRight icon. Text: `text-base sm:text-xl md:text-2xl`, accent color, weight 600, `whitespace-nowrap`. Icon: 18px on mobile, 22px on sm+.\n\n**Row B (description + main heading):**\n- Flex row, `items-end`, justify-between, `gap-3 sm:gap-4`.\n- **Left:** A fixed-width container (`w-[120px] sm:w-[180px] md:w-[280px]`, shrink-0) containing a paragraph: \"Creative Studios Built Around Elevating Your Vision Into Striking Reality\". Text: `text-[9px] sm:text-xs md:text-sm`, font-semibold, tracking-widest, uppercase, `text-left md:text-right`.\n- **Right:** The main heading — three words stacked vertically: \"Fearless\", \"Vision\", \"Delivered\". Each word in its own `overflow-hidden` wrapper. Text: `fontSize: clamp(2rem, 9vw, 9rem)`, `lineHeight: 0.88`, weight 600, uppercase, black, text-right.\n\n---\n\n**ANIMATIONS (Framer Motion):**\n\nAll animations fire on page load (initial -> animate).\n\n1. **fadeDown variant** (nav elements):\n   - From: `{ opacity: 0, y: -20 }`\n   - To: `{ opacity: 1, y: 0 }`\n   - Each element has a custom stagger index. Delay: `index * 0.1s`. Duration: 0.5s. Ease: `[0.22, 1, 0.36, 1]`.\n   - Applied to: logo (custom=0), each nav link (custom=1-4), hamburger (custom=5).\n\n2. **fadeUp variant** (stats + bottom content):\n   - From: `{ opacity: 0, y: 32 }`\n   - To: `{ opacity: 1, y: 0 }`\n   - Delay: `index * 0.12s`. Duration: 0.6s. Ease: `[0.22, 1, 0.36, 1]`.\n   - Applied to: each stat card (custom=2,3,4), tagline paragraph (custom=5), CTA link (custom=6), description block (custom=7).\n\n3. **Heading slide-up** (main heading words):\n   - Each word slides up from `y: \"110%\"` to `y: 0` within its overflow-hidden parent (clip reveal effect).\n   - Delay: `0.4 + wordIndex * 0.14` (so 0.4s, 0.54s, 0.68s). Duration: 0.7s. Ease: `[0.22, 1, 0.36, 1]`.\n\n---\n\n**RESPONSIVE BREAKPOINTS:**\n- Mobile-first. Three tiers: default (mobile), `sm:` (640px), `md:` (768px).\n- Nav links hidden on mobile, shown md+.\n- Spacing, font sizes, and widths scale up at each breakpoint.\n- Mobile menu provides full navigation on small screens.\n\n---\n\n**DEPENDENCIES:**\n- React 18\n- Tailwind CSS 3\n- framer-motion\n- lucide-react (ArrowUpRight, X icons)","url":"/prompts/creative-studio"}},{"id":"creative-portfolio","object":"prompt","title":"Creative Portfolio","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(89).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"626f6c742d63632d6167656e74Let me read all the relevant files to compile the full recreation prompt.\nHere's the full recreation prompt:\n\n---\n\n## Prompt to Recreate This Hero Section\n\nBuild a full-screen hero section for a creative portfolio using React, Vite, Tailwind CSS, and the Figtree Google Font. The page has two components: a **Navbar** and a **Hero**. No additional packages beyond `lucide-react` (though it's not used here). The entire page is black background with white text.\n\n---\n\n### Setup\n\n- **Font:** Figtree (400, 500, 600) from Google Fonts, loaded in `index.html`\n- **Tailwind custom breakpoints (max-width based):**\n  - `mobile`: max 809.98px\n  - `md-tablet`: min 810px, max 1199.98px\n- **CSS variable:** `--ease-spring: cubic-bezier(0.16, 1, 0.3, 1)`\n\n---\n\n### Video Background\n\nThree full-screen looping videos (muted, autoPlay, playsInline, loop) stacked absolutely with crossfade switching. All three render simultaneously; only the active one has `opacity-100`, the others have `opacity-0` with `transition-opacity duration-[1200ms] ease-in-out`.\n\n**Video URLs (CloudFront):**\n1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260629_030107_874273ea-684a-4e90-bb96-8fdfde48d53d.mp4`\n2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260629_032424_3c9c2a9d-807b-4482-80e6-dd6d9dfd4545.mp4`\n3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260627_094019_4214ea73-b963-46a4-8327-61489192de99.mp4`\n\n**Preloading:** On mount, fetch all videos as blobs and create object URLs for instant playback. Fall back to original URL on failure.\n\nA `bg-black/10` overlay sits above videos at `z-[1]`.\n\n---\n\n### Navbar (absolute positioned, z-10, on top of hero)\n\n- **Layout:** Centered container, max-width 1340px, `py-9 px-[15px]`\n- **Left side:** Navigation items formatted as `01 / Works`, `02 / Services`, `03 / About`, `04 / Contact`\n  - Index number: `text-[8px] leading-3 tracking-[-0.08px] font-medium uppercase`\n  - Label: `text-xs leading-4 tracking-[-0.12px] font-medium uppercase`\n  - Each link has a `.nav-link-underline` effect (underline slides in from right on hover via `scaleX` transform)\n- **Right side (aligned right):** Email `Davies@gmail.com` and live clock showing `CUP HH:MM:SS` (24h format, updates every second using `Intl.DateTimeFormat('en-GB')`)\n- **Mobile:** Nav items hidden, replaced by a `Menu`/`Close` toggle button. Mobile panel uses CSS Grid `grid-rows-[0fr]`/`grid-rows-[1fr]` transition (420ms, spring ease) for smooth expand/collapse. Mobile nav links are large: `text-[28px] leading-8 tracking-[-0.84px]`\n\n---\n\n### Hero Content (z-[2], relative)\n\nContainer: `max-w-[1340px]`, full height, flex column, `justify-end items-end`, `gap-[150px]`, `pt-[190px] px-[15px]`\n\n**Section 1 - Video Switcher + Availability (upper area):**\n- Left column (`flex-[4]`): Three buttons labeled `01 / WATER WAVE`, `02 / GRIDWAVE`, `03 / LIGHT TUNNEL`. Active button is full opacity, inactive is `opacity-55` with `hover:opacity-75`. On click, sets `activeIndex` to crossfade videos. Each has a `.role-link` class that translates 4px right on hover.\n- Right column (`flex-1`): Pulsing dot + \"Available for work\" text. Dot is 7px circle with glow shadow and infinite pulse animation (scale 1 to 1.45, opacity 1 to 0.45, 1.6s). On slide 1, dot is `#F598F2` pink with pink glow. On slides 2-3, dot is white with white glow.\n\n**Section 2 - Name + CTA (bottom area, pb-[60px]):**\n- Left column (`flex-[2]`): Giant name \"Viktor.\" in `text-[200px] leading-[81%] tracking-[-6px] font-medium uppercase`. The period is accent-colored: pink `#F598F2` on slide 1, white on slides 2-3. Animate in with `revealUp` (translateY 80px to 0, 0.9s spring ease).\n- Right column (`flex-1`, `pl-[50px]`): Paragraph text (\"I craft bold brands and modern websites with purpose...\") at `text-base leading-6 tracking-[-0.16px] font-medium`. Below it, a \"start a project\" button (lowercase) with white border. Button has a fill-up hover effect: `::before` pseudo-element with `#F598F2` background that translateY from 101% to 0 on hover, text turns black, border turns pink. Both animate in with `revealRight` (translateX 100px to 0, 0.9s spring ease), button delayed by 0.08s.\n\n**Reveal animations** trigger once via IntersectionObserver at 0.35 threshold.\n\n---\n\n### Responsive Tablet (810px-1199px)\n- Navbar: `py-[30px] px-[18px]`, nav gaps shrink to `gap-4`\n- Hero name: `text-[129.6px] leading-[113.4px] tracking-[-7.7px]`\n- Bottom section: gap 28px, pb 52px, left padding 24px\n\n### Responsive Mobile (<810px)\n- Navbar: `py-6 px-[18px]`, desktop nav hidden, hamburger menu shown\n- Hero content: `justify-end items-start gap-[72px] pt-[140px] px-[18px]`\n- Switcher + availability stack vertically with `gap-7`\n- Bottom section: column layout, `gap-8 pb-11`\n- Name: `text-[clamp(68px,21vw,80px)] leading-[96px] tracking-[-4.8px]`\n- Paragraph: `max-w-[420px]`\n\n---\n\n### Custom CSS Animations\n\n```css\n@keyframes videoFadeIn { from { opacity: 0 } to { opacity: 1 } }\n@keyframes revealUp { from { opacity: 0; transform: translateY(80px) } to { opacity: 1; transform: translateY(0) } }\n@keyframes revealRight { from { opacity: 0; transform: translateX(100px) } to { opacity: 1; transform: translateX(0) } }\n@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:0.45; transform:scale(1.45) } }\n```\n\n### Accessibility\n- `prefers-reduced-motion: reduce` disables all animations\n- Semantic landmarks: `<header>`, `<main>`, `<nav>`, `<section>`\n- ARIA labels on navigation regions and status elements\n- Videos are `aria-hidden=\"true\"`","url":"/prompts/creative-portfolio"}},{"id":"cozypaws","object":"prompt","title":"CozyPaws","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/prompts%20(i've%20added%20them%20to%20the%20motionsites)/petsArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"## Prompt to Recreate CozyPaws Hero Section\n\n**Build a single-page \"CozyPaws\" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height (h-screen), no scroll, with three responsive breakpoints (mobile, tablet md, desktop lg+). Use Vite + TypeScript.**\n\n---\n\n### Fonts (Google Fonts)\n- **Inter** (weights: 400, 500, 600) — body/UI text\n- **DM Serif Display** (weight: 400) — hero heading only\n\nLoad via `<link>` in `index.html`:\n```\nhttps://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap\n```\n\nApply with CSS utility class `.font-serif-display { font-family: 'DM Serif Display', serif; }` and `body { font-family: 'Inter', sans-serif; }`\n\n---\n\n### Color Palette\n- Background: `#EFFDF0` (light mint green)\n- Primary dark green: `#1a3d1a`\n- Hover green: `#2a5a2a`\n- Orange accent: `#E86A10`\n- Orange hover: `#d45e0d`\n\n---\n\n### Asset URLs (all external, do not download)\n\n| Asset | URL |\n|-------|-----|\n| Logo SVG | `https://polo-pecan-73837341.figma.site/_assets/v11/0ae29d6d9628bede667f90d57bebe81b8f1ec2bf.svg` |\n| Avatar | `https://polo-pecan-73837341.figma.site/_assets/v11/e62173d41f91350a59628e8a9a55ae078a886fb9.png?w=128` |\n| Product card (Cat House) | `https://polo-pecan-73837341.figma.site/_assets/v11/3e5158dad63d392ade022e81890edc9f54d750bc.png` |\n| Video card (TikTok/YouTube) | `https://polo-pecan-73837341.figma.site/_assets/v11/76be6ec3a93a703b15e9cc01e764a4e3f9d7d2c0.png` |\n| Bottom left image | `https://polo-pecan-73837341.figma.site/_assets/v11/8d44b25186ef45a5789c74668fb781cea4e1ff49.png` |\n| Bottom center image (tallest) | `https://polo-pecan-73837341.figma.site/_assets/v11/96745c4e72ad5c5208e53a885df797fd82cd854a.png?h=1024` |\n| Bottom right image | `https://polo-pecan-73837341.figma.site/_assets/v11/81bd2e7a66b58f3d8f3ad78fd1ebf01af8dfdee1.png` |\n\n---\n\n### Header\n- Full-width, `px-12` on desktop, `py-4`, relative z-30\n- **Left:** Logo image (205x52px desktop, 130x33px mobile)\n- **Center nav (hidden below md):** Links \"Home\" (text-gray-900), \"Shop\", \"Delivery and payment\", \"Brands\", \"Blog\" (text-gray-600), text-sm font-medium, gap-8\n- **Right:** Search button (circle, border, hidden below sm), Favorites button (orange circle, white star icon, badge \"4\"), Cart button (circle, border, cart icon, badge \"1\"), Avatar (circle, 40x40)\n- Badges: absolute -top-1 -right-1, 20x20, bg-orange, border-2 border-background, white text 10px bold\n\n---\n\n### Desktop Hero Layout (lg+)\n\n**Text layer (z-5):** Centered, `px-12 pt-[5.4rem]`\n- Heading: `font-serif-display`, color `#1a3d1a`, `text-[clamp(60px,7.5vw,110px)]`, `leading-[0.95]`, tracking-tight\n- Text reads: \"Everything\" (line 1), \"Your Pets Love\" (line 2)\n- Each word is an `inline-block` with staggered `animate-word-pop` animation\n\n**Left product card:** Absolutely positioned `top-[50px] left-12`\n- Width: `clamp(160px,14vw,260px)`\n- Image: aspect-ratio 260/257, rounded-2xl, overflow-hidden\n- Arrow button bottom-right corner (dark green circle, ArrowUpRight icon)\n- Text below: \"Cozy Cat House\" in gray-700, \"$49.99\" in dark green bold\n- Responsive font sizes via clamp\n\n**Right video card:** Absolutely positioned `top-[50px] right-12`\n- Width: `clamp(120px,10vw,177px)`\n- Image: aspect-ratio 177/287, rounded-2xl\n- Play button (dark green circle) centered near bottom\n- Text below play button: \"Watch Product Reviews on TikTok and YouTube\"\n\n**Bottom 3 images:** Absolutely positioned `bottom-0 left-0 right-0`, z-10, flex items-end, no gaps\n- Left image: `flex-1`, max-height `min(70vh, 55vw)`\n- Center image: `flex-[1.265]` (wider), max-height `min(85vh, 70vw)`\n- Right image: `flex-1`, max-height `min(70vh, 55vw)`\n- All images: `w-full h-auto block`\n\n**Overlays on bottom images:**\n- Left: \"98K+\" stat with avatar stack (avatar + green circle with Plus icon)\n- Center: \"Best Products for Your Pet\" white heading + \"Explore Products\" orange pill button with ArrowRight icon\n- Right: \"4.6\" rating with orange filled Star icon\n- All positioned with `bottom: clamp(20px, 4vh, 50px)`\n\n---\n\n### Tablet Layout (md to lg) — Similar to desktop but smaller\n- Heading: text-7xl\n- Side cards at `top-[80px]`, left-4/right-4, smaller fixed widths (160px/120px)\n- Bottom images: same 3-panel flex, maxHeight 60vh/75vh/60vh\n\n---\n\n### Mobile Layout (below md)\n- Top section: centered title (36px), subtitle, \"Explore Products\" button\n- Two cards side-by-side (flex, gap-3): product card (aspect-square) + video card (aspect-3/4)\n- Stats row: \"98K+\" with avatars left, divider, \"4.6\" star right\n- Bottom images: same 3-panel flex, no max-height constraint\n\n---\n\n### Animations (CSS keyframes, custom classes)\n\n| Class | Keyframe | Duration | Easing |\n|-------|----------|----------|--------|\n| `.animate-fade-up` | 0→30px translateY, 0→1 opacity | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-fade-in` | 0→1 opacity | 0.6s | ease-out |\n| `.animate-slide-up` | 0→60px translateY | 0.9s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-slide-in-left` | -40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-slide-in-right` | 40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-text-reveal` | translateY(40px) skewY(3deg) blur(4px) → none | 1s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-word-pop` | translateY(60px) scale(0.7) rotate(-4deg) blur(8px) → bounce overshoot → settle | 0.9s | cubic-bezier(0.34, 1.56, 0.64, 1) |\n| `.animate-scale-in` | scale(0.85)→1 | 0.7s | cubic-bezier(0.16, 1, 0.3, 1) |\n| `.animate-photo-reveal` | translateY(80px) scale(1.02) → normal | 1.1s | cubic-bezier(0.16, 1, 0.3, 1) |\n\nAll use `animation-fill-mode: both`. `.animate-word-pop` starts with `opacity: 0`.\n\n**Delay classes:** `.delay-100` through `.delay-1200` in 100ms increments.\n\n---\n\n### Stagger Order\n1. Header fades in (100-300ms)\n2. Hero heading words pop in (200-600ms stagger)\n3. Side cards slide in (600-700ms)\n4. Bottom photos reveal upward (600-900ms stagger, center first)\n5. Overlay stats/buttons pop in (1000-1200ms)\n\n---\n\n### Key Technical Details\n- Container: `h-screen flex flex-col overflow-hidden` (no scrolling)\n- Header: `shrink-0`\n- Hero section: `flex-1 flex flex-col overflow-hidden`\n- All responsive layouts use show/hide (`hidden lg:flex`, etc.), not CSS-only media queries\n- Extensive use of `clamp()` for fluid typography and spacing\n- Lucide icons used: Search, ShoppingCart, Star, ArrowUpRight, Play, ArrowRight, Plus","url":"/prompts/cozypaws"}},{"id":"daisy-wild","object":"prompt","title":"Daisy Wild","summary":"A preview-led product prompt for generating a polished AI-built interface.","category":"Product","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(32).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"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.\n\n## Tech Stack\n- React 18 + TypeScript\n- Tailwind CSS 3 (default config, default breakpoints: `sm:640px`, `md:768px`)\n- Vite\n- No extra packages. No icon libraries needed.\n\n## Constants\n\n```ts\nconst TEXT_COLOR = '#000000';\nconst BG_LIME = '#BDE84F';\nconst EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';\n```\n\n## Animation Helper\n\n```ts\nfunction anim(visible: boolean, delay: number, opts: { y?: number; x?: number; duration?: number } = {}) {\n  const { y = 20, x = 0, duration = 1600 } = opts;\n  const translateFrom = y !== 0 ? `translateY(${y}px)` : x !== 0 ? `translateX(${x}px)` : 'none';\n  return {\n    style: {\n      opacity: visible ? 1 : 0,\n      transform: visible ? 'translate(0,0)' : translateFrom,\n      transition: `opacity ${duration}ms ${EASE} ${delay}ms, transform ${duration}ms ${EASE} ${delay}ms`,\n    } as React.CSSProperties,\n  };\n}\n```\n\n## Product Data\n\n```ts\nconst WILD_PRODUCT = {\n  name: 'Eau So Extra',\n  size: '100 ml / 3.3 oz',\n  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',\n  notes: [\n    { label: 'Top', ingredient: 'BANANA BLOSSOM ACCORD' },\n    { label: 'Heart', ingredient: 'CHOCOLATE DAISY ACCORD' },\n    { label: 'Base', ingredient: 'VETIVER OIL' },\n  ],\n};\n```\n\n## Video URL (exact, verbatim)\n\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151818_65bb22c5-33ae-4e23-85ea-0a3dd89957c2.mp4\n```\n\n---\n\n## Component: `ProductPanel`\n\nThis is a reusable component shared with Section 2. For this section it is called with `noteStyle=\"bold\"`.\n\n### Props\n\n```ts\n{\n  bg: string;\n  product: { name: string; size: string; image: string };\n  notes: { label: string; ingredient: string }[];\n  visible: boolean;\n  noteStyle?: 'normal' | 'bold';   // defaults to 'normal'\n}\n```\n\n### Outer wrapper\n```jsx\n<div\n  className=\"relative flex flex-col px-6 md:px-8 pt-6 md:pt-8 pb-8 md:pb-10\"\n  style={{ backgroundColor: bg, minHeight: '100%' }}\n>\n```\n\n### 1. Top labels row\n```jsx\n<div\n  className=\"flex items-start justify-between mb-auto\"\n  {...anim(visible, 0, { y: 12, duration: 1400 })}\n>\n  <span className=\"text-xs font-normal\" style={{ color: TEXT_COLOR }}>\n    {noteStyle === 'bold' ? 'Daisy wild' : 'Daisy love'}\n  </span>\n  <span className=\"text-xs font-normal\" style={{ color: TEXT_COLOR }}>\n    {noteStyle === 'bold' ? 'Playful' : 'Sweet'}\n  </span>\n</div>\n```\n\nFor this section (`noteStyle=\"bold\"`), the labels read **\"Daisy wild\"** on the left and **\"Playful\"** on the right.\n\n### 2. Product image block\n```jsx\n<div\n  className=\"flex flex-col items-center py-8\"\n  style={{ flex: 1, justifyContent: 'center', ...anim(visible, 300, { y: 40, duration: 1800 }).style }}\n>\n```\n\n#### Image container\n```jsx\n<div\n  className=\"overflow-hidden\"\n  style={{\n    width: 'clamp(140px, 40%, 220px)',\n    aspectRatio: '220/340',\n    backgroundColor: '#D9D9D9',\n    borderRadius: '2px',\n    flexShrink: 0,\n  }}\n>\n  <img\n    src={product.image}\n    alt={product.name}\n    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n  />\n</div>\n```\n\n#### Caption (below image)\n```jsx\n<div className=\"text-center mt-4\" {...anim(visible, 600, { y: 10, duration: 1400 })}>\n  <p className=\"text-sm font-normal\" style={{ color: TEXT_COLOR }}>{product.name}</p>\n  <p className=\"text-xs font-normal mt-1\" style={{ color: TEXT_COLOR }}>{product.size}</p>\n</div>\n```\n\n### 3. Bottom row — notes + button\n\n```jsx\n<div className=\"flex items-end justify-between gap-4 flex-wrap\">\n```\n\n#### Notes column (left side)\n```jsx\n<div className=\"flex flex-col gap-0.5\" {...anim(visible, 900, { y: 16, duration: 1400 })}>\n```\nFor each note, render `<div key={note.ingredient}>` with two `<p>`:\n- Label: `<p className=\"text-xs leading-snug\" style={{ color: TEXT_COLOR, fontWeight: noteStyle === 'bold' ? 700 : 400 }}>{note.label}</p>`\n- Ingredient: `<p className=\"text-xs font-bold tracking-widest uppercase leading-snug\" style={{ color: TEXT_COLOR }}>{note.ingredient}</p>`\n\nFor this section (`noteStyle=\"bold\"`), the note LABELS (\"Top\", \"Heart\", \"Base\") render at `fontWeight: 700`. The ingredient lines are always `font-bold` regardless.\n\n#### SHOP NOW button (right side)\n```jsx\n<button\n  className=\"text-xs font-bold tracking-widest uppercase border px-6 py-3 relative group shrink-0\"\n  style={{\n    color: TEXT_COLOR,\n    borderColor: TEXT_COLOR,\n    backgroundColor: 'transparent',\n    ...anim(visible, 1150, { y: 16, duration: 1400 }).style,\n  }}\n>\n  <span className=\"relative z-10 group-hover:text-black transition-colors duration-500\">SHOP NOW</span>\n  <span\n    className=\"absolute inset-0 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out\"\n    style={{ backgroundColor: '#ffffff' }}\n  />\n</button>\n```\n\nButton: `1px` solid border colored `#000000`. On hover, a white fill scales from the left over 500ms. Text stays above (`z-10`).\n\n---\n\n## Component: `WildScentSection`\n\n### Visibility trigger\n```ts\nconst ref = useRef<HTMLDivElement>(null);\nconst [visible, setVisible] = useState(false);\n\nuseEffect(() => {\n  const observer = new IntersectionObserver(\n    ([entry]) => { if (entry.isIntersecting) setVisible(true); },\n    { threshold: 0.15 }\n  );\n  if (ref.current) observer.observe(ref.current);\n  return () => observer.disconnect();\n}, []);\n```\n\nOne-shot: once 15% visible, `visible` becomes `true` permanently, triggering all staggered animations.\n\n### Layout structure\n\n```jsx\n<section ref={ref} className=\"relative w-full\">\n  <div className=\"flex flex-col-reverse md:grid md:min-h-screen\" style={{ gridTemplateColumns: '1fr 1fr' }}>\n```\n\n**Critical difference from Section 2:** This uses `flex-col-reverse` (not `flex-col`). The DOM order is: video divs first, then ProductPanel. But on mobile, `flex-col-reverse` visually flips them so the product panel appears ABOVE the video.\n\n### Three children inside (in DOM order):\n\n#### Child 1: Desktop video panel (left half on desktop, hidden below `md`)\n```jsx\n<div className=\"hidden md:block relative overflow-hidden\" style={{ backgroundColor: '#111', minHeight: '100%' }}>\n  <video autoPlay muted loop playsInline className=\"absolute inset-0 w-full h-full object-cover\">\n    <source src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151818_65bb22c5-33ae-4e23-85ea-0a3dd89957c2.mp4\" type=\"video/mp4\" />\n  </video>\n</div>\n```\n\n#### Child 2: Mobile video strip (hidden at `md` and above)\n```jsx\n<div className=\"md:hidden relative overflow-hidden\" style={{ height: '75vw', backgroundColor: '#111' }}>\n  <video autoPlay muted loop playsInline className=\"absolute inset-0 w-full h-full object-cover\">\n    <source src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151818_65bb22c5-33ae-4e23-85ea-0a3dd89957c2.mp4\" type=\"video/mp4\" />\n  </video>\n</div>\n```\n\n#### Child 3: ProductPanel (right half on desktop, visually on top on mobile)\n```jsx\n<ProductPanel\n  bg={BG_LIME}\n  product={WILD_PRODUCT}\n  notes={WILD_PRODUCT.notes}\n  visible={visible}\n  noteStyle=\"bold\"\n/>\n```\n\nCalled with `noteStyle=\"bold\"`, which changes:\n- Top labels: `\"Daisy wild\"` / `\"Playful\"` (instead of `\"Daisy love\"` / `\"Sweet\"`)\n- Note labels: `fontWeight: 700` (instead of `400`)\n\n---\n\n## Responsive Behavior\n\n| Viewport | Layout | Visual order (top to bottom / left to right) |\n|---|---|---|\n| < 768px | `flex flex-col-reverse` | Product panel (lime, full width) then video strip (`height: 75vw`, full width) |\n| >= 768px | `grid 1fr 1fr`, `min-h-screen` | Video (left half) then Product panel (right half, lime) |\n\nThe `flex-col-reverse` trick: DOM order is [video-desktop, video-mobile, panel]. On mobile, `flex-col-reverse` reverses visual order to [panel, video-mobile, video-desktop(hidden)]. On desktop, `md:grid` overrides flex, and the grid places them left-to-right in DOM order: video left, panel right.\n\n## Animation Stagger Timeline\n\nAll triggered when 15% of the section scrolls into view. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`.\n\n| Element | Delay | Duration | Direction | Distance |\n|---|---|---|---|---|\n| Top labels (\"Daisy wild\" / \"Playful\") | 0ms | 1400ms | translateY | 12px |\n| Product image block | 300ms | 1800ms | translateY | 40px |\n| Caption (name + size) | 600ms | 1400ms | translateY | 10px |\n| Notes column | 900ms | 1400ms | translateY | 16px |\n| SHOP NOW button | 1150ms | 1400ms | translateY | 16px |\n\nEach element starts at `opacity: 0` + translated down, then transitions to `opacity: 1` + `translate(0,0)`.\n\n## Colors Used\n\n- `#BDE84F` — product panel background (lime green)\n- `#000000` — all text, button border\n- `#D9D9D9` — image placeholder background\n- `#111` — video panel background (while loading)\n- `#ffffff` — button hover fill\n\n## Fonts\nNo custom or Google Fonts. Tailwind default sans-serif system stack for all text.\n\n## SVGs / Icons\nNone in this section.\n\n## Key Differences from Section 2 (ScentFinder)\n\n| Aspect | Section 2 (ScentFinder) | Section 3 (WildScent) |\n|---|---|---|\n| Background color | `#4BB3ED` (sky blue) | `#BDE84F` (lime green) |\n| Panel position (desktop) | LEFT half | RIGHT half |\n| Video position (desktop) | RIGHT half | LEFT half |\n| Flex direction (mobile) | `flex-col` (panel on top, video below) | `flex-col-reverse` (panel on top via reversal, video below) |\n| Top labels | \"Daisy love\" / \"Sweet\" | \"Daisy wild\" / \"Playful\" |\n| Note label weight | `fontWeight: 400` (normal) | `fontWeight: 700` (bold) |\n| `noteStyle` prop | `'normal'` (default) | `'bold'` |\n| Product name | Eau So Sweet | Eau So Extra |\n| Product size | 100 ml / 3.3 oz | 100 ml / 3.3 oz |\n| Video URL | `...151802_1bbf9a81...` | `...151818_65bb22c5...` |\n| Notes content | Fruity top / WHITE RASPBERRIES, Floral heart / DAISY TREE PETALS, Feminine base / SUGAR MUSKS | Top / BANANA BLOSSOM ACCORD, Heart / CHOCOLATE DAISY ACCORD, Base / VETIVER OIL |","url":"/prompts/daisy-wild"}},{"id":"portfolio-about","object":"prompt","title":"Portfolio About","summary":"A preview-led about prompt for generating a polished AI-built interface.","category":"About","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(23).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"**Prompt:**\n\nCreate an \"About Me\" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font \"Kanit\"** (weights 300-900) and a dark background `#0C0C0C`.\n\n**Section layout:**\n- Full-width section, `min-h-screen`, flexbox column, centered both axes\n- Padding: `px-5 sm:px-8 md:px-10 py-20`\n- Background: `#0C0C0C` (inherited from page)\n- `position: relative` -- the section has 4 decorative floating images placed absolutely in the corners\n\n**4 decorative corner images (absolute positioned, z-0):**\n\n1. **Top-left** -- Moon icon\n   - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png`\n   - Position: `top-[4%] left-[1%] sm:left-[2%] md:left-[4%]`\n   - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto`\n   - Fade-in animation: `delay: 0.1`, slides from left (`x: -80, y: 0`), `duration: 0.9`\n\n2. **Bottom-left** -- 3D object\n   - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png`\n   - Position: `bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]`\n   - Size: `w-[100px] sm:w-[140px] md:w-[180px] h-auto`\n   - Fade-in animation: `delay: 0.25`, slides from left (`x: -80, y: 0`), `duration: 0.9`\n\n3. **Top-right** -- Lego icon\n   - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png`\n   - Position: `top-[4%] right-[1%] sm:right-[2%] md:right-[4%]`\n   - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto`\n   - Fade-in animation: `delay: 0.15`, slides from right (`x: 80, y: 0`), `duration: 0.9`\n\n4. **Bottom-right** -- 3D group\n   - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png`\n   - Position: `bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]`\n   - Size: `w-[130px] sm:w-[170px] md:w-[220px] h-auto`\n   - Fade-in animation: `delay: 0.3`, slides from right (`x: 80, y: 0`), `duration: 0.9`\n\n**Center content (relative z-10, max-w-4xl, centered):**\n\nVertical layout with `gap-16 sm:gap-20 md:gap-24`, containing two groups:\n\n**Group 1 -- Heading + Animated Text** (gap `10 sm:14 md:16`):\n\n- **Heading \"About me\":**\n  - `font-black uppercase leading-none tracking-tight text-center`\n  - Font size: `clamp(3rem, 12vw, 160px)`\n  - Uses a CSS class `hero-heading` which applies a gradient text fill:\n    ```css\n    .hero-heading {\n      background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n    }\n    ```\n  - Fade-in: `delay: 0, y: 40`\n\n- **Animated paragraph** (scroll-driven character-by-character reveal):\n  - Text content: `\"With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!\"`\n  - Styling: `text-[#D7E2EA] font-medium text-center leading-relaxed max-w-[560px]`\n  - Font size: `clamp(1rem, 2vw, 1.35rem)`\n  - **Animation behavior** (uses framer-motion `useScroll` + `useTransform`):\n    - Each character is rendered as an individual `<span>` with `position: relative; display: inline-block`\n    - An invisible duplicate holds the space; the visible character is absolutely positioned on top\n    - Scroll tracking: `useScroll({ target: containerRef, offset: ['start 0.8', 'end 0.2'] })`\n    - Per-character opacity: calculate `charProgress = index / totalChars`, then `start = max(0, charProgress - 0.1)` and `end = min(1, charProgress + 0.05)`. Map `scrollYProgress` from `[start, end]` to opacity `[0.2, 1]`\n    - Spaces are rendered as `\\u00A0` (non-breaking space)\n    - Characters start dim (opacity 0.2) and brighten to full opacity (1) as the user scrolls through the section, creating a progressive text reveal from left to right\n\n**Group 2 -- Contact Button:**\n- Fade-in: `delay: 0.3, y: 20`\n- Pill-shaped button (rounded-full), text \"Contact Me\"\n- Responsive padding: `px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4`\n- Text: `text-white font-medium uppercase tracking-widest`, size `text-xs sm:text-sm md:text-base`\n- Background gradient: `linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)`\n- Box shadow: `0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset`\n- Outline: `2px solid #E3E3E3` with `outlineOffset: -3px`\n- Hover: `opacity: 0.9`, Active: `opacity: 0.75`, transition 200ms\n- Links to `#contact`\n\n**FadeIn component (reusable, framer-motion):**\n- Props: `delay`, `duration` (default 0.7), `x` (default 0), `y` (default 30), `className`, `style`, `as` (HTML element tag, default `div`)\n- Uses `motion.create()` to make any HTML element animatable\n- Variants: `hidden` state sets `opacity: 0` + the x/y offsets; `visible` animates to `opacity: 1, x: 0, y: 0`\n- Easing: cubic bezier `[0.25, 0.1, 0.25, 1]`\n- Viewport trigger: `{ once: true, margin: \"50px\", amount: 0 }`\n\n**Font (loaded in HTML head):**\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\" />\n```\n\nCSS base: `font-family: 'Kanit', sans-serif` on html/body.\n\n---","url":"/prompts/portfolio-about"}},{"id":"intelligentx","object":"prompt","title":"IntelligentX","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(61).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Prompt:\nBuild a modern React landing page using Vite, Tailwind CSS, and motion/react for elegant animations. The application must feature a highly polished, aesthetic hero section and a glassmorphic navigation bar.\n1. Typography & Global CSS (src/index.css)\nImport the fonts \"Inter\" and \"Outfit\" from Google Fonts.\nSet --font-sans to Inter and --font-display to Outfit.\nSet --color-brand-green to #9fff00 and --color-bg-base strictly to #EDEEF5.\nEnsure the body uses @apply bg-bg-base text-zinc-900 font-sans antialiased; to carry the #EDEEF5 background throughout the entire page.\n2. Component Structure (src/App.tsx)\nImport Navbar and Hero.\nReturn a div containing the <Navbar /> and <main><Hero /></main>.\nSet the wrapper container classes to min-h-screen bg-bg-base selection:bg-brand-green selection:text-black.\n3. Navbar Component (src/components/Navbar.tsx)\nGive it fixed styling: fixed top-0 left-0 w-full z-50 py-6 md:py-10 bg-gradient-to-b from-[#f1f1f1]/80 to-transparent backdrop-blur-[2px].\nContainer layout: A 12-column grid (grid-cols-12 max-w-7xl mx-auto).\nLeft (Cols 1-3): A geometric flower/clover SVG icon (fill: #1a1a1a) beside the brand name \"mėntality\" using the display font.\nCenter (Cols 4-9): Desktop-only hidden nav links: \"service\", \"patient resources\", \"about us\", \"education center\". Styled small and lowercase.\nRight (Cols 10-12): \"find help\" anchor link, a black rounded button reading \"get started →\", and an elegant animated hamburger toggle icon for mobile.\nInclude an AnimatePresence and motion.div drawer that slides down for mobile with the navigation links.\n4. Hero Component (src/components/Hero.tsx)\nMain styling: <section className=\"relative min-h-[110vh] sm:min-h-[140vh] w-full flex flex-col items-center justify-start overflow-hidden bg-bg-base\">\nBackground Video Container:\nAbsolute wrapper: <div className=\"absolute top-[15vh] sm:top-[20vh] left-0 w-full h-[95vh] sm:h-[120vh] z-0 pointer-events-none\">\nThe video itself should be <video autoPlay loop muted playsInline className=\"w-full h-full object-cover opacity-100\" />\nExact CloudFront URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260603_132049_036591b8-6e92-4760-b94c-a7ea6eef315c.mp4\nGradient Mask: Below the video in the wrapper, add <div className=\"absolute top-0 left-0 w-full h-24 sm:h-32 bg-gradient-to-b from-bg-base to-transparent\"></div> to smoothly blend the video into the #EDEEF5 background.\nHero Content Alignment: Use <div className=\"max-w-7xl w-full mx-auto px-8 md:px-16 lg:px-20 relative z-10 grid grid-cols-12 gap-x-4 md:gap-x-8\">. Place the text in col-span-12 md:col-span-10 md:col-start-2.\nHero Header (motion.h1): Needs a slide-up fade (initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}).\nExact text formatting:\n[#1a1a1a] Remix: Mentality offers\n[#8e8e8e] information\n(line break)\n[#8e8e8e] and resources to help you manage\n(line break)\n[#8e8e8e] your [Eye Icon Puipl UI Element] mental wellbeing.\nFor the Eye Icon Element between \"your\" and \"mental\", create an inline pill-shaped visual: w-[16px] md:w-[42px] lg:w-[62px] border-[2px] border-[#1a1a1a] rounded-full inline-flex items-center justify-center containing a tiny solid black dot (w-2 h-2).\nSearch Pill Component:\nAdd a delayed slide-up animation (delay: 0.15) under the header text.\nMake a custom capsule <div className=\"bg-white rounded-[6px] border border-black/[0.05] p-1 pl-4 flex items-center shadow-sm\">.\nInclude an <input placeholder=\"Ask me anything...\"> with transparent background so it looks integrated.\nTrailing action button: <button className=\"bg-[#1a1a1a] text-white w-9 h-9 rounded-full relative\"> containing an SVG chevron/arrow icon.\nArchitectural Edge Anchors:\nAbsolute middle right edge: Create a glassmorphic pill button for language switching (pl — en).\nAbsolute bottom left corner: Place \"2024\" in small neat text.\nAbsolute bottom right corner: Place \"mental health tools\" in small neat text.\nEnsure there are no artificial margins/padding below the video to make sure the video takes exactly 100% of the Hero viewport, while allowing the #EDEEF5 background base to anchor the entire page cleanly.","url":"/prompts/intelligentx"}},{"id":"fun-404-page","object":"prompt","title":"Fun 404 Page","summary":"A preview-led education website prompt for generating a polished AI-built interface.","category":"Education Website","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260714_014547_d5d9edba-1894-4305-a283-4835ab060947.png&w=1920&q=85","video_url":"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260714_015111_b6301eeb-0a2c-4b2d-b9d2-238eaa3c099e.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen animated 404 error page for a children's brand called \"TinyTrails\" using React, Tailwind CSS, and Lucide React icons. The page must be a single `App.tsx` component. Use the Inter font (weights 400–900) loaded from Google Fonts. The page is a single viewport-height screen with no scrolling.\n\n---\n\n**LAYOUT & BACKGROUND:**\n\n- The full page is `w-full h-screen overflow-hidden flex flex-col` with a CSS linear gradient background from `#FF8233` (top) to `#FDAC55` (bottom).\n\n---\n\n**BACKGROUND \"404\" TEXT EFFECT:**\n\n- Behind everything, centered in the viewport, render the text \"404\" in white (`#FFFFFF`), `font-black`, `leading-none`, `tracking-tighter`, `whitespace-nowrap`.\n- Font size: `clamp(200px, 48vw, 800px)`.\n- The text is scaled horizontally by `1.15` and vertically dynamically: on mount (and resize), measure the text element's `offsetHeight`, divide `window.innerHeight` by that height, and multiply by `1.4` to get the Y scale. Apply via `transform: scale(1.15, ${scaleY * 1.4})`.\n- Over the \"404\" text (same centered container), render a white (`#FFFFFF`) oval: a `div` with `rounded-full`, height `h-[22vh] sm:h-[26vh] md:h-[50vh]`, width `clamp(120px, 20vw, 400px)`, scaled vertically by the same dynamic `scaleY` value with `transformOrigin: center`.\n- The entire background layer (text + oval) is wrapped in a container with `opacity: 0.8` and a CSS mask that fades to transparent at the bottom: `mask-image: linear-gradient(to bottom, black 40%, transparent 95%)` (with `-webkit-mask-image` for Safari).\n- This layer is `absolute inset-0 pointer-events-none`.\n\n---\n\n**NAVIGATION BAR:**\n\n- `relative z-20`, flex row, items centered, `justify-between`, padding `px-4 sm:px-6 md:px-12 py-4 sm:py-5`.\n- **Logo (left):** A 2x2 grid of white circles (`grid-cols-2 gap-0.5`), each circle `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`. Next to it, the text \"TinyTrails\" in `text-white font-bold text-lg sm:text-xl ml-1`.\n- **Desktop nav links (center/right):** Hidden on mobile (`hidden md:flex`), a row of pill buttons with `gap-1`. Items: \"About Us\", \"Programs\", \"Reviews\", \"FAQ\", \"Contacts\". Each is an `<a>` with `px-4 py-1.5 text-sm font-medium rounded-full bg-white` and text color `#F16524`, with `hover:opacity-90 transition-colors`.\n- **Menu button (right):** A pill button with `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white` and background color `#F16524`. Contains a Lucide `Menu` icon (`w-4 h-4`) and the text \"Menu\" (`text-sm font-medium hidden sm:inline`). Has `hover:opacity-90 transition-colors`.\n\n---\n\n**MOBILE MENU OVERLAY:**\n\n- Fixed fullscreen (`fixed inset-0 z-50`), with visibility toggled. Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`.\n- **Backdrop:** `absolute inset-0 bg-black/40 backdrop-blur-sm`, fades in/out with `opacity` transition over 500ms. Clicking it closes the menu.\n- **Panel:** Slides in from right. `absolute top-0 right-0 h-full w-full sm:w-[380px]`, translates between `translate-x-full` (closed) and `translate-x-0` (open). Background: `linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`.\n  - **Panel header:** Same logo as nav (2x2 white dots + \"TinyTrails\" bold white text). Close button: `w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30` with Lucide `X` icon (`w-5 h-5`).\n  - **Menu items:** Staggered animation. Each item is `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`. When open: `opacity-100 translate-y-0`; when closed: `opacity-0 translate-y-4`. Transition delay per item: `150 + i * 60`ms when opening, `0ms` when closing.\n  - **Bottom CTA:** Absolutely positioned at bottom (`absolute bottom-0 left-0 right-0 p-6`). A pill link: `w-full py-4 rounded-full bg-white font-semibold text-base` with text color `#F16524`, `hover:scale-[1.02]`. Contains Lucide `ArrowLeft` icon + \"Back to Home\". Fades in with 450ms delay when opening.\n- Body scroll is locked (`overflow: hidden`) when menu is open.\n\n---\n\n**CENTER VIDEO:**\n\n- An absolutely positioned container (`absolute inset-0 flex items-center justify-center pointer-events-none`) with `margin-top: calc(-6vh - 40px)` to shift it upward.\n- Inside, a responsive container: `w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`.\n- Contains a `<video>` element with `autoPlay loop muted playsInline`, class `w-full h-full object-contain pointer-events-none mix-blend-darken`.\n- **Video source URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_234424_b1332b69-2e69-4302-8dbc-40f86846afbd.mp4`\n\n---\n\n**BOTTOM CONTENT:**\n\n- `relative z-30 mt-auto pb-8 sm:pb-16 flex flex-col items-center text-center px-4`.\n- Heading: \"Oops, something went wrong!\" in `text-white text-lg sm:text-xl md:text-2xl font-medium mb-3 sm:mb-4`.\n- Button/link: An `<a href=\"/\">` pill with `inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 rounded-full text-white font-semibold text-sm sm:text-base` and background `#F16524`. Has `hover:scale-105 hover:shadow-lg transition-all`. Contains Lucide `ArrowLeft` icon (`w-4 h-4 sm:w-5 sm:h-5`) + \"Back to Home\".\n\n---\n\n**GLOBAL CSS (`index.css`):**\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Inter', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n```\n\n---\n\n**HTML HEAD:**\n\n- Load Inter font from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap` with preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`.\n- Title: \"404 - Page Not Found\".\n\n---\n\n**KEY COLOR PALETTE:**\n- Page gradient: `#FF8233` to `#FDAC55`\n- Accent/buttons: `#F16524`\n- Text & shapes: `#FFFFFF`\n- Menu gradient: `#FF6B1A` to `#FF9642`\n- Menu overlay backdrop: `black/40` with `backdrop-blur-sm`\n- Menu item backgrounds: `white/10`, `white/20` on hover\n\n---\n\n**DEPENDENCIES:** React, Tailwind CSS, Lucide React (`ArrowLeft`, `Menu`, `X` icons). Vite build system. No other libraries.","url":"/prompts/fun-404-page"}},{"id":"stillmind","object":"prompt","title":"Stillmind","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/prompts%20(i've%20added%20them%20to%20the%20motionsites)/endless.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a fullscreen cinematic hero section for a mindfulness/focus app called \"Lumora\" using React, Tailwind CSS, and Lucide React icons.\n\n## Font\n\nUse **Instrument Serif** (Google Fonts, italic for the logo). Load it in index.html:\n```\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\n```\n\nSet `font-family: 'Instrument Serif', serif` on html/body. Use `system-ui, sans-serif` inline for body text (subtext, buttons, stats, video labels).\n\n---\n\n## Background Video Layer\n\nStack 4 fullscreen looping videos absolutely positioned. Only the active one has `opacity-100`; others have `opacity-0`. Transition opacity over 1000ms ease-in-out. Videos autoPlay, muted, loop, playsInline.\n\n**Video URLs (in order):**\n1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081127_0992a171-d3c6-4978-8213-0ec5df8b6d63.mp4`\n2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_092026_dd05b805-ea0f-40b2-8c52-332b88502592.mp4`\n3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081042_df7202bf-bd80-4b2b-bbc6-1f09ba2870e9.mp4`\n4. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_080959_4cac5234-3573-464e-a5b7-76b94b8a7d61.mp4`\n\n**Labels:** Golden Hour, Still Water, Deep Woods, Quiet Dawn\n\n---\n\n## Transparent PNG Overlay (z-index 1)\n\nPlace this image over the videos as an absolutely positioned overlay covering the full viewport:\n```\nhttps://soft-zoom-63098134.figma.site/_assets/v11/0b4a435b2df2747593c43d7a1c9b4578f7d8d90c.png\n```\n\nApply a continuous \"train-bob\" animation: translateY oscillates between 0 and -6px over 3s ease-in-out infinite, with a constant scale(1.03) to prevent edges from showing during the motion.\n\n---\n\n## Liquid Glass Effect (CSS class `.liquid-glass`)\n\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n```\n\nWith a `::before` pseudo-element for a subtle gradient border:\n```css\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n---\n\n## Content Layer (z-index 2) - Flex Column Full Height\n\n### Navigation (top)\n- Left: \"Lumora\" in white, italic, text-xl (sm:text-2xl)\n- Right (desktop md+): A `.liquid-glass` pill containing nav links (\"How It Works\", \"Features\", \"Pricing\", \"Community\") in white/90 text-sm with hover to white, plus a solid white \"Get Started\" button at the end\n- Right (mobile): A `.liquid-glass` rounded hamburger button using Lucide `Menu`/`X` icons with a crossfade rotation animation (300ms). The Menu icon rotates out 90deg and scales to 75%; the X icon rotates in from -90deg\n\n### Mobile Menu Overlay (fixed, z-50)\n- Backdrop: `bg-black/60 backdrop-blur-sm`\n- Centered fullscreen panel with staggered entrance (each link delays 50ms more: 100ms, 150ms, 200ms, 250ms, 300ms)\n- Links: white text-3xl, translate-y-4 to 0 on open\n- \"Get Started\" button at bottom with scale animation\n- Cubic-bezier easing: `cubic-bezier(0.4,0,0.2,1)`, duration 500ms\n\n### Hero Content (centered, below nav)\n- **Badge**: `.liquid-glass` rounded-full pill with text \"Over 10,000 minds already finding their clarity\"\n- **Heading**: \"Clarity in an Endlessly / Noisy Universe\" (line break after \"Endlessly\"). Sizes: text-4xl / sm:text-5xl / md:text-7xl / lg:text-[5.5rem], leading-[1.1], max-w-4xl\n- **Subtext**: \"Rise above the chaos of pings, infinite scrolling, and relentless demands. Discover how to protect your presence and create with intention.\" max-w-xl, leading-relaxed\n- **Email Input**: `.liquid-glass` rounded-full pill containing a text input (\"Your Best Email\") and a solid white \"Get Early Access\" button. Max-width 320px on mobile, sm:max-w-sm\n- **Video Switcher**: Row of 4 text buttons with labels. Active button has solid color + bottom border. Inactive buttons are 50% opacity with transparent border, hover to 80%\n\n### Dark Mode for \"Deep Woods\" (3rd video, index 2)\nWhen the 3rd video is active, all hero content (badge, heading, subtext, input, video switcher) transitions to dark color `#182C41` with 700ms duration. The navbar and bottom stats remain white always.\n\n### Bottom Stats (pushed to bottom via flex-1 spacer)\n- Row of stats separated by `|` dividers (hidden on mobile): \"60+ Deep Sessions\", \"12,000+ Creators\", \"4.8 User Satisfaction\", \"Intentional-First Design\"\n- text-white/70, text-xs sm:text-sm, system-ui font\n\n---\n\n## Video Switching Logic\n- Track `activeVideo` state (default 0) and `isTransitioning` boolean\n- On click, if not already active and not mid-transition, set new active video and start a 1000ms cooldown (matching the CSS crossfade duration)\n- During cooldown, ignore additional clicks\n\n---\n\n## Responsive Behavior\n- Mobile: Smaller text sizes, tighter padding, hamburger nav, stats wrap naturally\n- Tablet/Desktop: Larger heading, more padding, inline nav pill, stats with pipe separators\n\n---\n\n## Section Container\n```html\n<section className=\"relative w-full h-screen overflow-hidden bg-black\">\n```\n\nBlack background prevents flash before videos load. Everything is a single viewport-height section with no scroll.\n\n---\n\nThat's the complete specification. The entire app lives in a single `App.tsx` component with the CSS in `index.css`.","url":"/prompts/stillmind"}},{"id":"saas-value","object":"prompt","title":"SaaS Value","summary":"A preview-led saas prompt for generating a polished AI-built interface.","category":"SaaS","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://res.cloudinary.com/dsdhxhhqh/image/upload/v1781539562/CleanShot_2026-06-15_at_15.31.34_2x_ckhjmj.png","video_url":null},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-viewport hero section for a SaaS landing page called \"Questly\" using React, TypeScript, Tailwind CSS 3, and Vite. Use `lucide-react` for all icons. No other UI libraries.\n\n---\n\nFONT\n\nUse the font \"Nimbus Sans TW01\" loaded from this stylesheet in `index.html`:\n\n```\nhttps://db.onlinewebfonts.com/c/bb5de19d87c09a95216dc6ccd96e37c6?family=Nimbus+Sans+TW01\n```\n\nSet the font stack in both `tailwind.config.js` and `index.css`:\n\n```\n'Nimbus Sans TW01', 'Helvetica Neue', Helvetica, Arial, sans-serif\n```\n\nEnable `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on `html`.\n\n---\n\nBACKGROUND IMAGE\n\nThe full hero section uses this image as a `background-image` (cover, centered):\n\n```\nhttps://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260611_133301_d5f2a94a-b22e-4e4a-a6b6-eacdddf1f5b0.png&w=1280&q=85\n```\n\nApplied via inline `style={{ backgroundImage: url(...) }}` on the `\n\n`. The section is `relative min-h-[100svh] overflow-hidden bg-cover bg-center flex flex-col`.\n\n---\n\nGRASS OVERLAY\n\nAn absolutely positioned grass PNG sits at the bottom of the section, full width, `z-10`, pointer-events-none, select-none:\n\n```\nhttps://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781191264/grass_eam204.png\n```\n\nClasses: `pointer-events-none absolute bottom-0 left-0 z-10 w-full select-none`\n\n---\n\nLOGO (SVG Component)\n\nA custom SVG logo component used in the navbar and dashboard sidebar. It uses `currentColor` for fill so it inherits text color. ViewBox: `0 0 256 256`. Path data:\n\n```\nM 144 256 L 27.598 256 L 144 139.598 Z M 256 207.5 L 200 256 L 200 56 L 0 56 L 48 0 L 256 0 Z M 0 204.402 L 0 112 L 92.402 112 Z\n```\n\n---\n\nNAVBAR\n\n- Positioned with `animate-fade-down relative z-20`\n- Flex row: logo left, nav links center, CTA + hamburger right\n- Horizontal padding: `px-5 sm:px-8 lg:px-10`, vertical: `py-4 sm:py-5`\n- Logo: `text-gray-900`, icon sized `w-5 h-5 sm:w-6 sm:h-6`\n- Desktop nav links (hidden below `md`): `text-[13px] text-gray-700`, hover `text-gray-900`, gap-8. Items: \"Toolkit\" (with `ChevronDown` icon `w-3.5 h-3.5`), \"Plans\", \"News\"\n- CTA button: `bg-gray-900 text-white text-[13px] font-medium px-4 sm:px-5 py-2 rounded-full hover:bg-gray-800`\n- Hamburger (md:hidden): `w-9 h-9 rounded-full text-gray-900 hover:bg-gray-900/10`, toggles `Menu`/`X` icons (`w-5 h-5`)\n- Mobile dropdown (when open): `absolute left-4 right-4 top-full rounded-2xl bg-white/80 backdrop-blur-xl ring-1 ring-gray-200 px-5 py-3 animate-fade-up`. Links: `text-[15px] text-gray-700 hover:text-gray-900 border-b border-gray-200 last:border-b-0`\n\n---\n\nHERO CONTENT (centered, text-center)\n\nSpacing between navbar and content uses a flex spacer: `flex-1 min-h-8 sm:min-h-12 lg:min-h-16 shrink-0`\n\nHeadline (h1)\n- `text-gray-900 font-normal leading-[1.05] tracking-tight`\n- Sizes: `text-[40px] min-[400px]:text-[44px] sm:text-6xl lg:text-7xl xl:text-[80px]`\n- Two lines, each a `` with staggered `animate-fade-up`:\n  - Line 1: \"Get cited.\" (no delay)\n  - Line 2: \"Effortlessly.\" (`[animation-delay:100ms]`)\n\n### Search Bar (form)\n- `animate-fade-up [animation-delay:220ms] mt-5 sm:mt-6 w-full max-w-xl`\n- Pill container: `flex items-center gap-3 rounded-full bg-white/60 backdrop-blur-md ring-1 ring-gray-200 pl-5 pr-1.5 py-1.5`\n- Input: `flex-1 bg-transparent text-sm sm:text-base text-gray-900 placeholder-gray-500 outline-none py-2`, placeholder: \"What makes content rank in AI search?\"\n- Submit button: `w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-gray-900 text-white hover:scale-105 active:scale-95 transition-transform shrink-0`, contains `ArrowUp` icon `w-4 h-4 sm:w-[18px] sm:h-[18px]`\n\n### Description\n- `animate-fade-up [animation-delay:340ms] mt-4 sm:mt-5 text-gray-600 text-sm sm:text-base lg:text-lg leading-relaxed max-w-md`\n- Text: \"Ship articles that answer actual customer questions -- and be seen on [Sparkles icon] ChatGPT\"\n- Line break `\n` before the dash\n- `Sparkles` icon: `inline w-4 h-4 -mt-1`\n\n### CTA Buttons\n- `animate-fade-up [animation-delay:460ms] mt-4 sm:mt-5 flex flex-wrap items-center justify-center gap-3`\n- **Primary**: `bg-gray-900 text-white text-sm font-medium px-6 py-2.5 rounded-full hover:bg-gray-800 hover:shadow-lg transition-all` -- \"Try It Free\"\n- **Secondary**: `text-gray-700 text-sm font-medium px-6 py-2.5 rounded-full ring-1 ring-gray-300 hover:bg-gray-100 transition-colors` -- \"Talk to sales\"\n\n---\n\n## DASHBOARD MOCKUP (below the hero content)\n\nAnother flex spacer (`flex-1 min-h-10 sm:min-h-12 lg:min-h-16 shrink-0`) separates the content from the dashboard.\n\n### Container\n- `animate-hero-rise [animation-delay:620ms] relative z-0 w-[92%] sm:w-[84%] lg:w-[72%] max-w-4xl mx-auto shrink-0 -mb-10 sm:-mb-20 lg:-mb-32`\n- Uses a **ScaledDashboard** wrapper: a `ResizeObserver`-based component that renders the mockup at a fixed design width of **896px** and scales it down via CSS `transform: scale()` to fit its container, with `transformOrigin: 'top left'`. The outer div's height is set to `inner.offsetHeight * scale` to prevent layout overflow.\n\n### Mockup Chrome\n- Outer: `rounded-t-2xl overflow-hidden bg-[#1a1a1c] shadow-[0_-20px_80px_rgba(0,0,0,0.35)] ring-1 ring-white/10 text-left`\n- **Title bar**: `bg-[#242427] border-b border-white/5 px-4 py-2.5`\n  - Traffic lights: three spans `w-2.5 h-2.5 rounded-full` colored `#ff5f57`, `#febc2e`, `#28c840`\n  - Icons (all `w-3.5 h-3.5 text-white/40`): `PanelLeft`, `ChevronLeft`, `ChevronRight` (text-white/25)\n  - Center URL bar: `bg-[#1a1a1c] rounded-md px-6 py-1 text-[10px] text-white/60` with `Monitor` icon -- text \"questly.ai\"\n  - Right icons: `RotateCw`, `Share`, `Plus`, `Copy`\n\n### Sidebar (22% width)\n- `border-r border-white/5 bg-[#1e1e21] px-3 py-3.5`\n- Logo icon `w-4 h-4 text-white/70` + `Grid` icon `w-3.5 h-3.5 text-white/30`\n- Workspace badge: `w-4 h-4 rounded bg-[#e8553f]` with \"C\" letter, label \"CareNest\" `text-[10px] text-white/80`\n- Nav items: Compass/Uncover, Layers/Subjects, ListTodo/Inbox -- `text-[10px] text-white/60`\n- Recent articles list with \"Ready to Release\" green dots `text-[#28c840]/70`\n\n### Main Content Area\n- Header: workspace icon (larger `w-9 h-9 rounded-lg bg-[#e8553f]`), \"CareNest\" `text-sm font-medium text-white`, subtitle `text-[10px] text-white/45`, and a \"Generate\" button with `Sparkles` icon\n- **Stats grid** (4 columns): `grid-cols-4 divide-x divide-white/5 rounded-xl bg-white/[0.03] ring-1 ring-white/5`\n  - RELEASED: 62 / Posts indexed\n  - BREADTH: 12 / Subject groups\n  - REMAINING: 412 / Ready to draft\n  - MAX REACH: 3,156,200 / Searches a month\n  - Values: `text-xl font-medium text-white`, labels: `text-[8px] tracking-wider text-white/35`\n- **Subject cards** (3 columns): Elder Care, Mobility, Home Safety -- `rounded-lg bg-white/[0.03] ring-1 ring-white/5`\n- **Drafting inbox** table: 5 rows with question, volume, difficulty, status columns. \"Drafting\" status colored `text-[#febc2e]/80`\n\n---\n\n## ANIMATIONS (defined in index.css)\n\n```css\n@keyframes fade-up {\n  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }\n  to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n\n@keyframes fade-down {\n  from { opacity: 0; transform: translateY(-16px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes hero-rise {\n  from { opacity: 0; transform: translateY(64px) scale(0.97); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.animate-fade-up { animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }\n.animate-fade-down { animation: fade-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }\n.animate-hero-rise { animation: hero-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }\n```\n\nStaggered delays applied via inline `[animation-delay:Xms]` Tailwind arbitrary values. Respect `prefers-reduced-motion: reduce` by disabling all three animations.\n\n---\n\nRESPONSIVE BREAKPOINTS SUMMARY\n\n| Element | Mobile (<640) | SM (640+) | MD (768+) | LG (1024+) | XL (1280+) |\n|---|---|---|---|---|---|\n| Headline | 40px / 44px@400 | 60px | -- | 70px | 80px |\n| Nav links | Hidden (hamburger) | -- | Visible | -- | -- |\n| Search bar width | full | -- | -- | -- | max-w-xl |\n| Dashboard width | 92% | 84% | -- | 72% | -- |\n| Dashboard bottom overlap | -mb-10 | -mb-20 | -- | -mb-32 | -- |\n\n---\n\nFILE STRUCTURE\n\n```\nsrc/\n  App.tsx            -- renders <Hero />\n  main.tsx           -- ReactDOM.createRoot\n  index.css          -- Tailwind directives + custom keyframes\n  components/\n    Hero.tsx          -- main section with bg image, content, ScaledDashboard, grass overlay\n    Navbar.tsx        -- top nav with mobile drawer\n    Logo.tsx          -- SVG logo component\n    DashboardMockup.tsx -- full browser-chrome dashboard mockup\n```","url":"/prompts/saas-value"}},{"id":"blog-showcase","object":"prompt","title":"Blog Showcase","summary":"A preview-led blog prompt for generating a polished AI-built interface.","category":"Blog","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(22).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a \"Behind the Lens\" photography blog section with the following exact specifications:\n\n**Layout and Structure:**\n- White background page, max-width 1200px, centered, 60px vertical padding, 20px horizontal padding\n- Header with: a small grey \"Blog\" badge (bg #f4f4f4, 8px border-radius), a large heading \"Behind the lens\" (64px, Outfit font, weight 500, letter-spacing -2.5px), a subtitle paragraph and a \"View all posts\" button side by side\n- Subtitle: \"Thoughts, insights, and stories from my photography journey. Take a peek into my creative process and recent projects.\" (max-width 480px, #666 color, 18px, weight 500, opacity 0.8)\n- \"View all posts\" button: black bg, white text, 40px border-radius pill shape, 14px font, weight 600, scales 1.02 on hover\n\n**Featured Post (full-width card):**\n- 2-column grid (1fr 1fr), 20px border-radius, 1px solid #f0f0f0 border, min-height 520px, bg #fcfcfc\n- Left side: autoplaying looped muted video, object-fit cover, fills the entire area\n- Right side: 60px padding, contains a black \"Must Read\" pill badge (12px font, 20px border-radius), title in Outfit font 48px weight 500 (letter-spacing -1.5px), description in #666 at 17px, and a footer with author name and colored category badge pushed to the bottom via margin-top auto\n- Featured post data: title \"Full-Frame vs. Crop Sensor: Which for Photography?\", description \"An honest look at the real-world differences between these camera systems to help you choose what's actually right for your photography needs.\", author \"By August Renner (c)\", category \"Gear\" with color #7d1a4a\n- Featured video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_155500_808e6fdd-761f-4acd-b3be-cb7e6e700def.mp4`\n\n**Blog Grid (3 standard cards):**\n- 3-column grid, 25px gap, below the featured post\n- Each card: video with 16/10 aspect ratio, 20px border-radius, title below (Outfit 17px weight 600) with a colored category badge aligned right\n- Card 1: \"Finding Natural Light in Unexpected Places\", category \"Lighting\" (#2c4c34), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4`\n- Card 2: \"My Approach to Editing: Creating a Consistent Photography Style\", category \"Editing\" (#a63e2d), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`\n- Card 3: \"Pricing Your Photography: Strategies That Work\", category \"Business\" (#1a2b8c), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_154232_f8809bd2-a6c3-4a38-908d-2005e5b3cb3e.mp4`\n\n**Hover Interactions (on all video containers):**\n- Videos scale to 1.08 on hover with cubic-bezier(0.33, 1, 0.68, 1) over 0.5s\n- A dark overlay (rgba(0,0,0,0.25)) fades in over 0.4s on hover\n- A centered \"+\" icon inside a 70px circle (rgba(255,255,255,0.2) bg) scales from 0.7 to 1.0 on hover over 0.3s\n- White \"L-shaped\" corner brackets (12px, 1.5px border) in all 4 corners of each video, 15px inset from edges\n\n**Category Badges:**\n- Pill shape (20px border-radius), white text, 11px font, weight 600, 4px 12px padding, capitalized, background color matches each post's assigned color\n\n**Fonts:**\n- Google Fonts: Inter (400, 500, 600) for body text, Outfit (500, 600, 700) for headings and titles\n\n**Responsive:**\n- At 1024px: featured post becomes single column, grid becomes 2 columns, featured content padding 40px\n- At 768px: heading drops to 48px, header-bottom stacks vertically, grid becomes 1 column, featured title drops to 32px\n\n**Data Source:**\n- Store all blog post data (type, badge, title, description, author, category, category_color, image/video URL, display_order) in a Supabase `blog_posts` table\n- Fetch and render dynamically, ordered by display_order ascending\n- Enable RLS with public read access for anon and authenticated users\n\n**Tech Stack:**\n- React + TypeScript + Vite + Tailwind CSS (for base resets only, use custom CSS for the blog styles)\n- Supabase JS client for data fetching\n- All videos use autoPlay, loop, muted, playsInline attributes","url":"/prompts/blog-showcase"}},{"id":"equilibrium","object":"prompt","title":"Equilibrium","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(93).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen, single-page React + TypeScript + Vite + Tailwind CSS hero section with a \"liquid glass\" aesthetic on top of a looping background video. Use `lucide-react` for icons. No other UI libraries.\n\n**Font & Global CSS (`src/index.css`):**\n- Import Geist from Google Fonts: `https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap`\n- Apply `Geist` globally via `* { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }`\n- Include `@tailwind base; @tailwind components; @tailwind utilities;`\n- Define a `.liquid-glass` class:\n  - `background: rgba(255,255,255,0.01);`\n  - `background-blend-mode: luminosity;`\n  - `backdrop-filter: blur(4px);` plus `-webkit-backdrop-filter`\n  - `border: none;`\n  - `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);`\n  - `position: relative; overflow: hidden;`\n- Add a `.liquid-glass::before` pseudo-element creating a gradient border via mask compositing:\n  - `content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;`\n  - `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);`\n  - `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;`\n\n**Component (`src/App.tsx`):**\n- Import from `lucide-react`: `ChevronDown`, `Infinity`, `Menu`, `X`. Import `useState` from React.\n- Constant `BG_VIDEO = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_230229_7c9bc431-46cf-489a-948d-e8144d8eb5d4.mp4'`\n- `navLinks` array: `{ label: 'Home', active: true }`, `{ label: 'Wellness', dropdown: true }`, `{ label: 'Routine' }`, `{ label: 'Our Team' }`.\n- `menuOpen` state via `useState(false)`.\n\n**Layout:**\n- Root: `<div class=\"relative w-full h-screen overflow-hidden\">`.\n- Background `<video>` absolutely positioned, `w-full h-full object-cover`, `autoPlay muted loop playsInline`, `src={BG_VIDEO}`.\n\n**Navbar** (`absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-5 sm:px-8 py-5`):\n- Logo (left): flex with `gap-2 text-white font-medium text-base`. `<Infinity size={22} strokeWidth={1.5} />` followed by `<span>Equilibrium</span>`.\n- Nav pill (center, `hidden md:flex`): `liquid-glass items-center gap-1 rounded-xl px-2 py-2`. Map `navLinks`. Each button: `flex items-center gap-0.5 px-3 py-1.5 rounded-md text-sm transition-colors`; active gets `bg-white/15 text-white`, others `text-white/70 hover:text-white`. Dropdown items render a `<ChevronDown size={13} class=\"mt-px\" />`.\n- CTAs (right, `hidden md:flex items-center gap-3`):\n  - \"Log in\": `liquid-glass text-white text-sm font-medium px-4 py-2.5 rounded-full hover:bg-white/5 transition-colors`\n  - \"Begin Now\": `bg-white text-black text-sm font-medium px-4 py-2.5 rounded-full hover:bg-white/90 transition-colors`\n- Mobile toggle (`md:hidden`): `liquid-glass text-white p-2 rounded-lg`; shows `X` when open else `Menu` (size 18).\n\n**Mobile menu** (when `menuOpen`): `absolute top-[72px] left-4 right-4 z-30 md:hidden liquid-glass rounded-2xl p-4 flex flex-col gap-1`. Same nav links as buttons `flex items-center justify-between w-full px-4 py-3 rounded-lg text-sm`. Bottom CTA row: `flex gap-2 mt-2 pt-3 border-t border-white/10` with two `flex-1` buttons (\"Log in\", \"Begin Now\") matching desktop styles.\n\n**Hero content (bottom-left)** `absolute bottom-0 left-0 z-20 px-6 sm:px-12 pb-10 sm:pb-16 max-w-2xl`:\n- `<h1>`: `text-white text-4xl sm:text-5xl lg:text-6xl font-medium leading-tight tracking-tight mb-4` — text: `Live Better, Feel Whole Every Day`.\n- `<p>`: `text-white/60 text-sm leading-relaxed mb-7 max-w-md` — text: `Take charge of how you feel with a companion built for your journey—build routines, follow your growth, and unlock tailored insights for a steadier, more vibrant life each day.`\n- Buttons row `flex flex-wrap items-center gap-3`:\n  - \"Start Today\": `bg-white text-black text-sm sm:text-base font-medium px-6 sm:px-7 py-3 rounded-full hover:bg-white/90 transition-colors`\n  - \"Discover How\": `liquid-glass text-white text-sm sm:text-base font-medium px-6 sm:px-7 py-3 rounded-full hover:bg-white/5 transition-colors`\n\n**Animations/interactions:** all buttons use Tailwind `transition-colors`; liquid-glass effect uses `backdrop-filter: blur(4px)` plus the animated-looking gradient border pseudo. No additional keyframe animations. The background video itself provides motion.\n\n**Dependencies:** `react`, `react-dom`, `lucide-react`, `tailwindcss`, `vite`, `@vitejs/plugin-react`, TypeScript. Tailwind configured with default content globs for `./index.html` and `./src/**/*.{ts,tsx}`.","url":"/prompts/equilibrium"}},{"id":"pixel-grid-hover","object":"prompt","title":"Pixel Grid Hover","summary":"A preview-led case studies prompt for generating a polished AI-built interface.","category":"Case Studies","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(15).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"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:\n\n---\n\n**Section Container:**\n- `<section>` with `relative bg-white text-black`, inline style `fontFamily: \"'DM Sans', sans-serif\"`\n- All animations use easing `[0.22, 1, 0.36, 1]`\n- Inject a `<style>` block for the marquee keyframe:\n  ```css\n  @keyframes marqueeProjects {\n    from { transform: translateX(0); }\n    to   { transform: translateX(-50%); }\n  }\n  .marquee-projects {\n    animation: marqueeProjects 28s linear infinite;\n  }\n  .marquee-projects:hover {\n    animation-play-state: paused;\n  }\n  ```\n\n---\n\n**Top Area (Header with floating squares):**\n- Container: `relative px-6 pb-10 pt-32 sm:px-10 lg:px-16 lg:pt-40`\n- Contains a `pointer-events-none absolute inset-0 overflow-hidden` layer with 8 parallax floating black squares. Each square uses `useScroll` (target: the section ref, offset `[\"start end\", \"end start\"]`) and `useTransform` + `useSpring` for vertical parallax, plus a gentle infinite bob animation (`y: [0, -10, 0]`, duration `3s + index * 0.4s`, ease `easeInOut`, staggered delay `index * 0.3s`).\n- Square positions (x%, y%, size px):\n  ```\n  (6, 20, 12), (12, 32, 8), (8, 44, 6), (88, 18, 10),\n  (92, 30, 14), (85, 42, 7), (90, 52, 5), (14, 56, 5)\n  ```\n- Parallax formula: `useTransform(scrollYProgress, [0, 1], [0, -(80 + index * 30)])`, smoothed with `useSpring({ stiffness: 40, damping: 20 })`\n\n**Header text** (centered, inside `relative mx-auto max-w-7xl text-center`):\n- Animates from `opacity: 0, y: 24` to visible, duration `0.7s`, triggered by `useInView` with `{ once: true, margin: \"-60px\" }`\n- Badge: \"Projects\" in `mb-5 inline-block bg-black px-4 py-1.5 text-[13px] font-medium tracking-wide text-white`\n- Heading: `text-[clamp(1.8rem,3.2vw,2.8rem)] font-light leading-[1.25] tracking-tight`\n  - \"Insights from \" in `text-black`, then \"Our\" in `text-black/40`\n  - New line: \"Case Studies\" in `text-black/40`\n\n---\n\n**Case Study Cards (2x2 grid):**\n- Container: `mx-auto max-w-7xl px-6 pb-16 sm:px-10 lg:px-16`, inner `grid gap-4 md:grid-cols-2`\n- Each card animates from `opacity: 0, y: 30` to visible, staggered `delay: index * 0.1`, duration `0.7s`\n\n**4 case studies data:**\n```\n1. id: \"heartx\", title: \"HeartX\", category: \"Brand Strategy & Product Design\", year: \"2026\"\n   image: https://images.pexels.com/photos/7691249/pexels-photo-7691249.jpeg?auto=compress&cs=tinysrgb&w=800\n\n2. id: \"swave\", title: \"Swave\\u00AE\", category: \"Web Design & Identity\", year: \"2025\"\n   image: https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=800\n\n3. id: \"eduspark\", title: \"EduSpark\", category: \"Brand Strategy & Web Design\", year: \"2023\"\n   image: https://images.pexels.com/photos/5428003/pexels-photo-5428003.jpeg?auto=compress&cs=tinysrgb&w=800\n\n4. id: \"greenergy\", title: \"Greenergy\", category: \"Brand Strategy & Web Design\", year: \"2022\"\n   image: https://images.pexels.com/photos/2800832/pexels-photo-2800832.jpeg?auto=compress&cs=tinysrgb&w=800\n```\n\n**Each card structure** (aspect ratio `4/3`, `group relative overflow-hidden`):\n\n1. **Background image**: absolutely positioned, `h-full w-full object-cover`\n\n2. **Pixel-block hover overlay**: A 12-column x 8-row grid of absolutely positioned `bg-black/80` blocks. Each block covers `100/12 %` width and `100/8 %` height. On hover they animate `scale: 0 -> 1, opacity: 0 -> 1` with a diagonal stagger: `delayIn = (row + col) * 0.018s`, `delayOut = ((8 - row) + (12 - col)) * 0.012s`. Duration `0.25s`. This creates a pixel-dissolve reveal effect on hover.\n\n3. **Magnetic squares**: 5-6 small black squares per card, absolutely positioned. They react to the cursor via `useMotionValue` + `useTransform` + `useSpring`: when the card is hovered, each square shifts toward the pointer proportionally (`dist * 40`). Spring config: `{ stiffness: 80, damping: 18, mass: 0.6 }`. When pointer leaves, they spring back to center (pointer resets to `0.5, 0.5`).\n\n   Square positions per card (x%, y%, size px):\n   ```\n   HeartX:    (5,30,16), (10,42,10), (3,52,7), (80,70,14), (85,82,9), (78,60,6)\n   Swave:     (82,55,16), (88,68,10), (78,72,7), (85,42,6), (90,80,8)\n   EduSpark:  (4,24,16), (10,36,10), (2,44,7), (78,78,14), (84,88,8)\n   Greenergy: (82,26,14), (88,38,10), (78,44,7), (84,54,5), (90,60,8)\n   ```\n\n4. **Plus button** (top right): `absolute right-4 top-4`, `h-7 w-7 items-center justify-center border border-white/30 text-xs text-white`, \"+\" text, `zIndex: 10`\n\n5. **Info plate** (bottom left): `absolute bottom-0 left-0 bg-white px-4 pb-3 pt-2.5`, `zIndex: 20`, `maxWidth: \"70%\"`\n   - Title: `text-[clamp(1.4rem,2.2vw,2rem)] font-normal leading-tight text-black`\n   - Below: flex row with category (`text-[12px] text-black/60`) and year (`text-[12px] font-medium text-black`), `mt-1.5 gap-4`\n\n---\n\n**Footer Area:**\n- Container: `mx-auto max-w-7xl px-6 pb-6 sm:px-10 lg:px-16`\n- Flex row on desktop (`md:flex-row md:items-end md:justify-between`), column on mobile\n\n**Left side** (`max-w-md`):\n- Plus button: `mb-4 flex h-7 w-7 items-center justify-center border border-black/20 text-xs text-black`, \"+\"\n- Paragraph: \"We partner with ambitious brands that are ready to move beyond fragmented visuals and shallow quick fixes -- turning their identity, website, and messaging into one focused engine for growth.\" in `text-[14px] leading-[1.7] text-black/60`\n- CTA button (`mt-6`): A `<button>` with `group flex items-end`:\n  - Main label: `inline-flex items-center gap-[10px] border border-black/20 bg-black px-3 py-2 text-base font-medium text-white`, hover `bg-black/85`. Text: \"Let's work together\"\n  - Arrow badge: A small `h-6 w-6` black square with `mb-6`, containing a diagonal arrow SVG (white, 16x16, viewBox `0 0 24 24`, path: `M18.75 6V15.75C18.75 15.949 18.671 16.14 18.53 16.28C18.39 16.421 18.199 16.5 18 16.5C17.801 16.5 17.61 16.421 17.47 16.28C17.329 16.14 17.25 15.949 17.25 15.75V7.81L6.53 18.53C6.39 18.671 6.199 18.75 6 18.75C5.801 18.75 5.61 18.671 5.47 18.53C5.329 18.39 5.25 18.199 5.25 18C5.25 17.801 5.329 17.61 5.47 17.47L16.19 6.75H8.25C8.051 6.75 7.86 6.671 7.72 6.53C7.579 6.39 7.5 6.199 7.5 6C7.5 5.801 7.579 5.61 7.72 5.47C7.86 5.329 8.051 5.25 8.25 5.25H18C18.199 5.25 18.39 5.329 18.53 5.47C18.671 5.61 18.75 5.801 18.75 6Z`). On group hover, the badge shifts up: `mb-6 -> mb-9`, with `transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]`\n\n**Right side** (`flex-1 overflow-hidden md:ml-12`, with `border-t border-black/10` on mobile, no border on desktop):\n- An infinite horizontal marquee (`overflow-hidden py-5`)\n- Inner track: `marquee-projects flex w-max` (uses the CSS keyframe above, 28s duration)\n- Pauses on hover\n- 8 logos, doubled (16 total) for seamless loop. Each item: `flex shrink-0 items-center gap-2.5 px-8`\n  - An SVG icon (black, varying per logo)\n  - Name text: `whitespace-nowrap text-sm font-medium tracking-wide text-black/80`\n\n**8 marquee logos** (name, icon type):\n```\n(\"Codecraft_\", code), (\"ennLabs\", dots), (\"GlobalBank\", circle-ring),\n(\"45 Degrees\\u00b0\", arrow), (\"AlphaWave\", wave-circle), (\"Biosynthesis\", lines),\n(\"Boltshift\", bolt), (\"Clandestine\", plus)\n```\n\n**SVG icon definitions** (all black stroke or fill):\n- **code**: 22x18, viewBox `0 0 22 18`, stroke, strokeWidth 2, round caps. Two polylines `6,4 1,9 6,14` and `16,4 21,9 16,14`, one line `13,2 to 9,16`\n- **dots**: 20x20, viewBox `0 0 20 20`, filled. 9 circles at grid positions `[3,10,17] x [3,10,17]`, radius `2.2`\n- **circle-ring**: 22x22, viewBox `0 0 22 22`, stroke, strokeWidth 2. Two circles at `(11,11)` with radii `9` and `4`\n- **arrow**: 18x18, viewBox `0 0 18 18`, stroke, strokeWidth 2, round caps. Line `2,16 to 16,2`, polyline `7,2 16,2 16,11`\n- **wave-circle**: 22x22, viewBox `0 0 22 22`, stroke, strokeWidth 1.5. Circle `(11,11)` r=9, path `M5 11Q8 7 11 11Q14 15 17 11`\n- **lines**: 24x18, viewBox `0 0 24 18`, stroke, strokeWidth 2.2, round caps. Three horizontal lines: `(0,3 to 24,3)`, `(6,9 to 24,9)`, `(0,15 to 18,15)`\n- **bolt**: 14x20, viewBox `0 0 14 20`, filled. Polygon `8,0 0,11 6,11 6,20 14,9 8,9`\n- **plus**: 18x18, viewBox `0 0 18 18`, filled. Two rects: `(7.5, 0, 3, 18)` and `(0, 7.5, 18, 3)`\n\n**Bottom spacer**: `<div className=\"h-12\" />`\n\n---\n\n**Dependencies:** React 18, Framer Motion (v12+), Tailwind CSS 3. Uses `useRef`, `useState`, `useCallback`, `useScroll`, `useTransform`, `useSpring`, `useMotionValue`, `useInView`, and `motion` from framer-motion. No other libraries.","url":"/prompts/pixel-grid-hover"}},{"id":"vision-reveal","object":"prompt","title":"Vision Reveal","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/newpsotArea.mp4"},"delivery":{"type":"inline_full_prompt","prompt_text":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n<title>Creative Studio Showcase</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"/>\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin/>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\"/>\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n* { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif; }\n\nhtml, body {\n  margin: 0; padding: 0;\n  background: #E4E4E4;\n  color: #F4F1E8;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n\n/* ===== SPLASH ===== */\n.splash {\n  position: fixed; inset: 0;\n  width: 100vw; height: 100vh;\n  z-index: 9999;\n  pointer-events: none;\n  overflow: hidden;\n  animation: splashHide 0.3s ease forwards;\n  animation-delay: 1.35s;\n}\n.splash-row { display: flex; width: 100%; height: 50%; }\n.splash-box { width: 20%; height: 100%; background: #75C5DE; }\n.splash-row-top .splash-box { animation: splashTop 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; }\n.splash-row-bottom .splash-box { animation: splashBottom 1s cubic-bezier(0.96,-0.02,0.38,1.01) forwards; }\n.splash-box:nth-child(1) { animation-delay: 0s; }\n.splash-box:nth-child(2) { animation-delay: 0.05s; }\n.splash-box:nth-child(3) { animation-delay: 0.1s; }\n.splash-box:nth-child(4) { animation-delay: 0.15s; }\n.splash-box:nth-child(5) { animation-delay: 0.2s; }\n\n@keyframes splashTop { from { transform: translateY(0%); } to { transform: translateY(-100%); } }\n@keyframes splashBottom { from { transform: translateY(0%); } to { transform: translateY(100%); } }\n@keyframes splashHide { to { opacity: 0; visibility: hidden; } }\n\n/* ===== HERO IMAGE ENTRANCE ===== */\n@keyframes heroImageIn {\n  from { opacity: 0; transform: scale(1.5) rotate(3deg); }\n  to { opacity: 1; transform: scale(1) rotate(0deg); }\n}\n.hero-image-animate {\n  animation: heroImageIn 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;\n  animation-delay: 1s;\n  opacity: 0;\n}\n\n/* ===== WORD REVEAL ===== */\n@keyframes wordReveal {\n  from { opacity: 0; transform: translateY(10px); filter: blur(10px); }\n  to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n.word-reveal {\n  opacity: 0;\n  display: inline-block;\n  margin-right: 0.3em;\n  animation: wordReveal 0.4s ease forwards;\n}\n\n/* ===== CTA ENTRANCE ===== */\n@keyframes slideUpScale {\n  from { opacity: 0; transform: translateY(60px) scale(0.4); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n.cta-animate {\n  opacity: 0;\n  animation: slideUpScale 0.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards;\n  animation-delay: 1s;\n}\n\n/* ===== CTA BUTTON ===== */\n.cta-btn { position: relative; overflow: hidden; display: flex; align-items: center; border: none; background: none; cursor: pointer; border-radius: 9999px; padding: 8px; gap: 12px; }\n.cta-btn-bg {\n  position: absolute; top: 5px; bottom: 5px; left: 8px;\n  width: calc(100% - 8px - 8px - 48px - 12px);\n  border-radius: 9999px; background: white; z-index: 0;\n  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n@media (min-width: 768px) { .cta-btn-bg { width: calc(100% - 8px - 8px - 54px - 12px); } }\n.cta-btn:hover .cta-btn-bg { width: calc(100% - 16px); }\n.cta-btn-text { position: relative; z-index: 1; color: #111111; font-weight: 500; font-size: 16px; padding: 12px 32px; white-space: nowrap; }\n@media (min-width: 768px) { .cta-btn-text { font-size: 18px; padding: 16px 40px; } }\n.cta-btn-circle {\n  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;\n  width: 48px; height: 48px; border-radius: 50%; background: #75C5DE; flex-shrink: 0;\n  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n@media (min-width: 768px) { .cta-btn-circle { width: 54px; height: 54px; } }\n.cta-btn:hover .cta-btn-circle { transform: translateX(-7px); }\n\n/* ===== MENU CTA (smaller) ===== */\n.menu-cta-btn { position: relative; overflow: hidden; display: flex; align-items: center; border: none; background: none; cursor: pointer; border-radius: 9999px; padding: 6px; gap: 8px; }\n.menu-cta-bg {\n  position: absolute; top: 5px; bottom: 5px; left: 8px;\n  width: calc(100% - 8px - 8px - 38px - 8px);\n  border-radius: 9999px; background: white; z-index: 0;\n  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n.menu-cta-btn:hover .menu-cta-bg { width: calc(100% - 12px); }\n.menu-cta-text { position: relative; z-index: 1; color: #111111; font-weight: 500; font-size: 14px; padding: 8px 40px; white-space: nowrap; }\n.menu-cta-circle {\n  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;\n  width: 38px; height: 38px; border-radius: 50%; background: #75C5DE; flex-shrink: 0;\n  transition: transform 0.3s ease;\n}\n.menu-cta-btn:hover .menu-cta-circle { transform: translateX(-4px); }\n\n/* ===== CREATOR TEXT ===== */\n@keyframes creatorSlideUp { from { transform: translateY(330px); } to { transform: translateY(0); } }\n.creator-text-animate {\n  transform: translateY(330px);\n  animation: creatorSlideUp 1s cubic-bezier(0.16,1,0.3,1) forwards;\n  animation-delay: 1.5s;\n}\n\n/* ===== NAVIGATION ===== */\n.logo-wrapper {\n  position: fixed; top: 30px; left: 0; width: 50%; z-index: 10;\n  display: flex; justify-content: flex-start; align-items: center; mix-blend-mode: difference;\n}\n@media (min-width: 768px) { .logo-wrapper { top: 40px; } }\n.logo-wrapper .inner { padding-left: 20px; }\n@media (min-width: 768px) { .logo-wrapper .inner { padding-left: 40px; } }\n.logo-wrapper img { width: 32px; height: 32px; }\n\n.burger-wrapper {\n  position: fixed; top: 16px; right: 0; width: 50%; z-index: 10;\n  display: flex; justify-content: flex-end; align-items: center;\n}\n@media (min-width: 768px) { .burger-wrapper { top: 27px; } }\n.burger-wrapper .inner { padding-right: 20px; }\n@media (min-width: 768px) { .burger-wrapper .inner { padding-right: 40px; } }\n\n.burger-btn {\n  width: 59px; height: 59px; border-radius: 50%; border: none; cursor: pointer;\n  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;\n  background: #F4F1E8; transition: background 0.4s ease;\n}\n.burger-btn:hover { background: #0B0B0B; }\n.burger-btn .bar {\n  display: block; width: 24px; height: 2px; background: #111111;\n  transition: all 0.3s ease;\n}\n.burger-btn:hover .bar { background: #F4F1E8; }\n.burger-btn.open { background: #0B0B0B; }\n.burger-btn.open .bar { background: #F4F1E8; }\n.burger-btn.open .bar:first-child { transform: rotate(45deg) translate(2px, 2px); }\n.burger-btn.open .bar:last-child { transform: rotate(-45deg) translate(2px, -2px); }\n\n/* ===== MENU PANEL ===== */\n.menu-panel {\n  position: fixed; z-index: 9;\n  left: 8px; right: 8px;\n  border-radius: 20px;\n  background: rgba(17,17,17,0.95);\n  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);\n  padding: 90px 32px 32px 32px;\n  display: flex; flex-direction: column; justify-content: space-between;\n  transition: top 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s ease;\n  top: -600px; opacity: 0; pointer-events: none;\n}\n@media (min-width: 768px) {\n  .menu-panel { left: auto; right: 7px; width: 420px; padding: 60px; }\n}\n.menu-panel.open { top: 0; opacity: 1; pointer-events: auto; }\n@media (min-width: 768px) { .menu-panel.open { top: 7px; } }\n\n.menu-panel nav { display: flex; flex-direction: column; gap: 8px; }\n.menu-panel nav a {\n  color: #F4F1E8; font-size: 36px; font-weight: 500; text-decoration: none;\n  line-height: 130%; transition: opacity 0.3s ease;\n}\n@media (min-width: 768px) { .menu-panel nav a { font-size: 42px; } }\n.menu-panel nav a:hover { opacity: 0.7; }\n\n.menu-contact { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }\n.menu-email { color: #9A9590; font-size: 18px; text-decoration: none; transition: color 0.3s ease; }\n@media (min-width: 768px) { .menu-email { font-size: 20px; } }\n.menu-email:hover { color: #F4F1E8; }\n.menu-socials { display: flex; gap: 24px; }\n.menu-socials a {\n  color: #9A9590; font-size: 14px; text-decoration: underline;\n  text-underline-offset: 2px; transition: color 0.3s ease;\n}\n.menu-socials a:hover { color: #F4F1E8; }\n\n/* ===== HERO ===== */\n.hero {\n  position: relative; width: 100%; overflow: hidden;\n  background: #E4E4E4; min-height: 100vh;\n}\n@media (min-width: 768px) { .hero { height: 100vh; min-height: 800px; } }\n\n.hero-big-text {\n  position: absolute; bottom: -30px; left: 0; right: 0; z-index: 2;\n  pointer-events: none; width: 100%; text-align: center;\n}\n@media (min-width: 768px) { .hero-big-text { bottom: -40px; } }\n.hero-big-text h2 {\n  font-weight: 500; color: #F4F1E8; line-height: 80%;\n  letter-spacing: -0.04em; white-space: nowrap;\n  font-size: clamp(180px, 28vw, 560px);\n}\n\n.hero-base-img {\n  position: absolute; top: 30vh; left: 0; right: 0; bottom: 0;\n  background-size: cover; background-repeat: no-repeat;\n  background-position: 60% center; z-index: 5;\n}\n@media (min-width: 768px) { .hero-base-img { top: 0; background-position: center; } }\n\n.hero-reveal-img {\n  position: absolute; top: 30vh; left: 0; right: 0; bottom: 0;\n  background-size: cover; background-repeat: no-repeat;\n  background-position: 60% center; z-index: 7; pointer-events: none;\n}\n@media (min-width: 768px) { .hero-reveal-img { top: 0; background-position: center; } }\n\n.hero-content {\n  position: relative; z-index: 8;\n  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;\n  width: 100%; max-width: 1600px; margin: 0 auto;\n  padding: 110px 16px 24px 16px; pointer-events: none;\n}\n@media (min-width: 768px) {\n  .hero-content {\n    position: absolute; inset: 0;\n    justify-content: space-between;\n    padding: 160px 40px 100px 40px;\n  }\n}\n.hero-content-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; width: 100%; pointer-events: auto; }\n\n.hero-headline {\n  font-size: 22px; font-weight: 500; line-height: 120%;\n  letter-spacing: -0.02em; color: #111111; max-width: 447px;\n}\n@media (min-width: 768px) { .hero-headline { font-size: 28px; } }\n\n/* ===== CANVAS (hidden) ===== */\n#reveal-canvas { display: none; position: absolute; inset: 0; pointer-events: none; }\n\n/* ===== REDUCED MOTION ===== */\n@media (prefers-reduced-motion: reduce) {\n  .splash { animation: splashHide 0.01s linear forwards; }\n  .splash-box { animation: none !important; }\n  .hero-image-animate, .word-reveal, .cta-animate, .creator-text-animate {\n    animation: none !important; opacity: 1 !important;\n    transform: none !important; filter: none !important; visibility: visible !important;\n  }\n}\n</style>\n</head>\n<body>\n\n<!-- SPLASH -->\n<div class=\"splash\" id=\"splash\">\n  <div class=\"splash-row splash-row-top\">\n    <div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div>\n  </div>\n  <div class=\"splash-row splash-row-bottom\">\n    <div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div><div class=\"splash-box\"></div>\n  </div>\n</div>\n\n<!-- LOGO -->\n<div class=\"logo-wrapper\">\n  <div class=\"inner\">\n    <a href=\"/\" aria-label=\"Home\">\n      <img src=\"https://framerusercontent.com/images/VMcS7YYTM5PXfXvlHc9u3hSCMM.svg\" alt=\"\"/>\n    </a>\n  </div>\n</div>\n\n<!-- BURGER -->\n<div class=\"burger-wrapper\">\n  <div class=\"inner\">\n    <button class=\"burger-btn\" id=\"burger-btn\" aria-label=\"Open menu\">\n      <span class=\"bar\"></span>\n      <span class=\"bar\"></span>\n    </button>\n  </div>\n</div>\n\n<!-- MENU PANEL -->\n<div class=\"menu-panel\" id=\"menu-panel\">\n  <nav>\n    <a href=\"#work\">Work</a>\n    <a href=\"#about\">About</a>\n    <a href=\"#blog\">Blog</a>\n  </nav>\n  <div class=\"menu-contact\">\n    <a href=\"mailto:studio@norakessler.com\" class=\"menu-email\">studio@norakessler.com</a>\n    <div class=\"menu-socials\">\n      <a href=\"#\">Pinterest</a>\n      <a href=\"#\">Behance</a>\n      <a href=\"#\">Letterboxd</a>\n    </div>\n  </div>\n  <div style=\"margin-top:32px;\">\n    <button class=\"menu-cta-btn\">\n      <span class=\"menu-cta-bg\"></span>\n      <span class=\"menu-cta-text\">Let's talk</span>\n      <span class=\"menu-cta-circle\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5 13L13 5M13 5H6M13 5V12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n    </button>\n  </div>\n</div>\n\n<!-- HERO -->\n<main class=\"hero\">\n  <!-- Big text behind image -->\n  <div class=\"hero-big-text creator-text-animate\">\n    <h2>Visuals</h2>\n  </div>\n\n  <!-- Base image -->\n  <div class=\"hero-base-img hero-image-animate\"\n       style=\"background-image:url('https://soft-zoom-63098134.figma.site/_assets/v11/5c9f982199fde1d9b85a20e5396f0fa7bacaf9a3.png?w=2560');\">\n  </div>\n\n  <!-- Reveal layer -->\n  <canvas id=\"reveal-canvas\"></canvas>\n  <div class=\"hero-reveal-img\" id=\"reveal-img\"\n       style=\"background-image:url('https://soft-zoom-63098134.figma.site/_assets/v11/6be2165e31648955b4e071f4cf2a50bc572b9bfd.png?w=1536');\">\n  </div>\n\n  <!-- Content -->\n  <div class=\"hero-content\">\n    <div class=\"hero-content-inner\">\n      <h1 class=\"hero-headline\" id=\"headline\"></h1>\n      <button class=\"cta-btn cta-animate\">\n        <span class=\"cta-btn-bg\"></span>\n        <span class=\"cta-btn-text\">Start a project now</span>\n        <span class=\"cta-btn-circle\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5 13L13 5M13 5H6M13 5V12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n      </button>\n    </div>\n  </div>\n</main>\n\n<script>\n(function() {\n  // Word reveal\n  const headline = document.getElementById('headline');\n  const text = \"I build compelling visual stories & motion that make ideas shine.\";\n  const words = text.split(' ');\n  words.forEach(function(word, i) {\n    const span = document.createElement('span');\n    span.className = 'word-reveal';\n    span.textContent = word;\n    span.style.animationDelay = (1 + i * 0.05) + 's';\n    headline.appendChild(span);\n  });\n\n  // Burger menu toggle\n  const burgerBtn = document.getElementById('burger-btn');\n  const menuPanel = document.getElementById('menu-panel');\n  let menuOpen = false;\n  burgerBtn.addEventListener('click', function() {\n    menuOpen = !menuOpen;\n    if (menuOpen) {\n      burgerBtn.classList.add('open');\n      menuPanel.classList.add('open');\n      burgerBtn.setAttribute('aria-label', 'Close menu');\n    } else {\n      burgerBtn.classList.remove('open');\n      menuPanel.classList.remove('open');\n      burgerBtn.setAttribute('aria-label', 'Open menu');\n    }\n  });\n  // Close menu on nav link click\n  menuPanel.querySelectorAll('nav a').forEach(function(a) {\n    a.addEventListener('click', function() {\n      menuOpen = false;\n      burgerBtn.classList.remove('open');\n      menuPanel.classList.remove('open');\n    });\n  });\n\n  // Spotlight reveal\n  const SPOTLIGHT_R = 260;\n  const canvas = document.getElementById('reveal-canvas');\n  const imgLayer = document.getElementById('reveal-img');\n  const ctx = canvas.getContext('2d');\n\n  function resizeCanvas() {\n    canvas.width = window.innerWidth;\n    canvas.height = window.innerHeight;\n  }\n  resizeCanvas();\n  window.addEventListener('resize', resizeCanvas);\n\n  const mouse = { x: -999, y: -999 };\n  const smooth = { x: -999, y: -999 };\n\n  window.addEventListener('mousemove', function(e) {\n    mouse.x = e.clientX;\n    mouse.y = e.clientY;\n  });\n\n  function loop() {\n    smooth.x += (mouse.x - smooth.x) * 0.1;\n    smooth.y += (mouse.y - smooth.y) * 0.1;\n\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n    var grad = ctx.createRadialGradient(smooth.x, smooth.y, 0, smooth.x, smooth.y, SPOTLIGHT_R);\n    grad.addColorStop(0, 'rgba(255,255,255,1)');\n    grad.addColorStop(0.4, 'rgba(255,255,255,1)');\n    grad.addColorStop(0.6, 'rgba(255,255,255,0.75)');\n    grad.addColorStop(0.75, 'rgba(255,255,255,0.4)');\n    grad.addColorStop(0.88, 'rgba(255,255,255,0.12)');\n    grad.addColorStop(1, 'rgba(255,255,255,0)');\n\n    ctx.beginPath();\n    ctx.arc(smooth.x, smooth.y, SPOTLIGHT_R, 0, Math.PI * 2);\n    ctx.fillStyle = grad;\n    ctx.fill();\n\n    var dataUrl = canvas.toDataURL();\n    imgLayer.style.webkitMaskImage = 'url(' + dataUrl + ')';\n    imgLayer.style.maskImage = 'url(' + dataUrl + ')';\n    imgLayer.style.webkitMaskSize = '100% 100%';\n    imgLayer.style.maskSize = '100% 100%';\n\n    requestAnimationFrame(loop);\n  }\n  requestAnimationFrame(loop);\n})();\n</script>\n</body>\n</html>","url":"/prompts/vision-reveal"}},{"id":"404","object":"prompt","title":"Nexto 404","summary":"A preview-led 404 prompt for generating a polished AI-built interface.","category":"404","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/CleanShot_2026-05-15_at_15.46.24_2x_i163nd.png","video_url":null},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a 404 \"Page Not Found\" hero page as a single full-viewport (100vh, no scroll) React + Vite + Tailwind CSS application using the DM Sans font and Google Material Symbols Rounded icons. The page must match the following specification exactly:\n\n---\n\n## Fonts & External Resources\n\n- **Google Font:** DM Sans (all weights, variable: `opsz 9..40, wght 100..1000`)\n- **Google Material Symbols Rounded:** `opsz,wght,FILL,GRAD@24,400,1,0`\n- **Logo image:** `https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg` (rendered with `filter: brightness(0)` to make it black, height 28px)\n- **Background spaceship image:** `https://pub-e68758f43067417dba612b2371819aa1.r2.dev/viktor-components/alien-spaceship.png`\n\n---\n\n## Layout\n\nThe entire page is exactly `100vh` with `overflow: hidden` on html, body, and `#root`. No scrolling. The body uses `display: flex; flex-direction: column`. The `#root` div also uses `height: 100vh; display: flex; flex-direction: column; overflow: hidden`.\n\n---\n\n## Background\n\nBody has a layered background:\n1. The spaceship PNG centered at `center 40%`, sized with `background-size: contain`\n2. A `linear-gradient(to top left, #F5F5F5, #F7F7F7)` covering the full page\n\nBoth are `background-attachment: fixed` and `no-repeat`.\n\n---\n\n## Color Variables (CSS custom properties)\n\n```\n--text-main: #1a1a1a\n--text-secondary: #888888\n--bg-page: #F5F5F5\n--card-bg: #ffffff\n```\n\n---\n\n## Navbar\n\n- Max-width `1100px`, centered, padding `28px 40px`\n- Has a dashed bottom border made with `background-image: linear-gradient(to right, rgba(0,0,0,0.08) 2px, transparent 2px); background-size: 6px 1px` on a `::after` pseudo-element\n- **Left:** Logo (the SVG image + the text \"nexto.\" in 20px bold, -0.3px letter-spacing, color #111, flex with 9px gap)\n- **Center:** Nav links (\"Our Team\", \"Solutions\" with a dropdown arrow character, \"Showcase\", \"News\") - 14px, weight 400, opacity 0.65, hover to opacity 1, gap 36px\n- **Right:** CTA button \"Let's Connect\" - dark gradient button (`linear-gradient(180deg, #2c2c2c 0%, #111111 100%)`), white text 13px weight 500, border-radius 40px, padding `5px 16px 5px 5px`. Has a white circular arrow icon (24px circle) on the LEFT side with a chevron SVG inside. Box-shadow `0 4px 15px rgba(0,0,0,0.15)`. On hover: translateY(-1px), stronger shadow, brightness(1.1).\n- **Hamburger (mobile only):** 3 spans, 24px wide, 2px height, animates to X when active. Hidden on desktop, shown on mobile (`display: flex` at max-width 768px).\n\n---\n\n## Mobile Navigation\n\n- Fixed full-screen overlay, slides in from right with `transform: translateX(100%)` -> `translateX(0)`, cubic-bezier(0.77, 0, 0.175, 1) transition\n- On mobile: left-aligned, large links (38px, weight 800, letter-spacing -1.5px), each with bottom border, padding 24px 0\n- Last link is the CTA button styled same as navbar but with 32px arrow circle\n\n---\n\n## Main Content Area\n\n- `flex: 1`, centered both ways (`align-items: center; justify-content: center`), max-width 700px, padding `20px 20px 30px`\n- **Lost text:** \"Seems you've wandered off...\" - 15px, color `--text-secondary`, weight 400, margin-bottom 12px\n- **Title wrapper:** `position: relative; display: inline-block; margin-bottom: 14px`\n  - **Cloud decoration:** Material Symbols \"cloud\" icon, positioned `top: -18px; left: -24px`, font-size 42px, with gradient text fill (`linear-gradient(to bottom, #F7B2FB 50%, #786EF1 80%, #5588FB 100%)` using `-webkit-background-clip: text; -webkit-text-fill-color: transparent`), white drop-shadow outline, `floatSlow` animation (5s, 0.3s delay)\n  - **Heart decoration:** Material Symbols \"favorite\" icon, positioned `bottom: -15px; right: 20px`, font-size 32px, same gradient fill, white drop-shadow outline, `floatSlow` animation (4.5s, 1s delay)\n  - **Title:** \"Whoops! Nothing here yet\" - `font-size: clamp(34px, 5vw, 52px)`, weight 500, letter-spacing -1.5px, line-height 1.08, color #0f0f0f\n- **Subtext:** \"Grab a 30-minute `chat` to explore your ideas, scope, and vision. We'll find common ground, sync and `define` a clear roadmap.\" - 14px, color `--text-secondary`, line-height 1.7, max-width 470px, margin-bottom 28px. The words \"chat\" and \"define\" are in highlighted tags (inline-flex, background #E0E2E7, 12.5px, weight 600, padding 2px 12px, border-radius 6px)\n\n---\n\n## Navigation Cards\n\n- Flex column, gap 12px, max-width 460px, positioned at bottom with `margin-top: auto`\n- **Card 1 \"Main Page\":** House SVG icon (path: `M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z` with door `M9 21V12h6v9` in white). Subtitle: \"Back where it all begins...\"\n- **Card 2 \"Showcase\":** Circle-dot SVG icon (circle r=9 filled, inner circle r=3.5 white). Subtitle: \"Where we walk the walk\"\n- Each card: white background, border-radius 18px, padding 18px 22px, flex between, 1px border rgba(0,0,0,0.05), shadow `0 2px 12px rgba(0,0,0,0.04)`. On hover: translateY(-3px), shadow `0 8px 28px rgba(0,0,0,0.08)`.\n- Icon container: 48px circle, background #eaecf0, scales 1.05 on card hover\n- Right chevron arrow (rsaquo character, 21px), translateX(6px) on hover\n- Card title: 15px weight 600, subtitle: 12px color `--text-secondary`\n\n---\n\n## Animations\n\n```css\n@keyframes floatSlow {\n  0%, 100% { transform: translateY(0px) rotate(0deg); }\n  50% { transform: translateY(-10px) rotate(3deg); }\n}\n```\n\n---\n\n## Responsive Breakpoints\n\n**768px and below:**\n- Hide nav-links and desktop CTA button, show hamburger\n- Background-size: 90%, position: center 45%\n- Navbar padding: 20px\n- Title: 30px, decorations smaller\n- Cards: full width, gap 10px, smaller padding/icons\n\n**480px and below:**\n- Title: 26px\n- Background-size: 100%\n- Decorations even smaller\n\n---","url":"/prompts/404"}},{"id":"beauty-categories","object":"prompt","title":"Beauty Categories","summary":"A preview-led categories prompt for generating a polished AI-built interface.","category":"Categories","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(67).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"---\n\n**Prompt to recreate the \"Categories\" section:**\n\n> Build a \"Categories\" section in React + Tailwind CSS with the following exact specifications:\n>\n> **Section Container:**\n> - Full-width `<section>` with `bg-white`, `text-white`, `min-h-screen`.\n> - Flexbox column layout with `justify-center` to vertically center the grid content.\n> - No horizontal or vertical padding on the section itself.\n>\n> **Grid Layout:**\n> - A CSS grid: `grid-cols-1` on mobile, `md:grid-cols-3` on medium+.\n> - The entire grid uses an IntersectionObserver-based reveal animation (threshold `0.1`): transitions from `opacity-0 translate-y-12` to `opacity-100 translate-y-0` over `duration-1000 ease-out`.\n>\n> **3 Category Cards with exact data:**\n> 1. Name: `\"face\"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203023_87a26602-2898-4acc-a396-c7a2b5ad84fd.mp4`\n> 2. Name: `\"beauty tools\"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203415_b86e3f19-2aec-46cd-9a86-b64c40118e38.mp4`\n> 3. Name: `\"body\"` | Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260518_203051_85fee398-ea01-4aa0-972b-137a74213be5.mp4`\n>\n> **Card Layout (each card):**\n> - `position: relative`, flexbox column with `justify-between`, `items-start`.\n> - Padding: `p-6` mobile, `sm:p-8`, `md:p-12`.\n> - Heights: `min-h-[400px]` mobile, `sm:min-h-[500px]`, `md:min-h-[750px]`.\n> - `overflow-hidden`.\n> - Each card has a staggered `transitionDelay` of `index * 150ms`.\n> - Uses `group` for hover interactions.\n>\n> **Background Video:**\n> - `<video>` element with attributes: `autoPlay`, `loop`, `muted`, `playsInline`.\n> - Positioned absolutely: `absolute inset-0 w-full h-full object-cover`.\n> - Hover effect: `scale-105` over `duration-700` via `transition-transform group-hover:scale-105`.\n> - The `src` attribute is set directly from the video URL (no `<source>` tag).\n>\n> **Dark Overlay:**\n> - A `<div>` absolutely positioned over the video: `absolute inset-0`.\n> - Default: `bg-black/10`. On hover: `group-hover:bg-black/20`.\n> - `transition-colors duration-500`.\n>\n> **Category Name (vertical text):**\n> - `<h2>` tag, positioned above overlay: `relative z-10`.\n> - Font sizes: `text-5xl` mobile, `sm:text-6xl`, `md:text-7xl`, `lg:text-8xl`. Weight: `font-medium`.\n> - **Vertical text**: achieved with inline style `writingMode: 'vertical-lr'` combined with `transform: 'rotate(180deg)'` (this makes text read bottom-to-top).\n> - Hover: `group-hover:-translate-y-2` over `duration-500`.\n> - Text is lowercase (rendered as-is from the data: \"face\", \"beauty tools\", \"body\").\n>\n> **Shop Button:**\n> - `<button>` with class `btn-primary` (see CSS below) plus `relative z-10 mt-auto px-8 py-3 bg-white text-black rounded-full text-sm`.\n> - Text: `\"shop {category name}\"` in lowercase (e.g., \"shop face\", \"shop beauty tools\", \"shop body\").\n> - `mt-auto` pushes the button to the bottom of the card.\n>\n> **Required CSS for `btn-primary` (in global stylesheet):**\n> ```css\n> .btn-primary {\n>   position: relative;\n>   overflow: hidden;\n>   transition: transform 0.3s ease, box-shadow 0.3s ease;\n> }\n> .btn-primary::before {\n>   content: '';\n>   position: absolute;\n>   inset: 0;\n>   background: linear-gradient(120deg, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%);\n>   transform: translateX(-100%);\n>   transition: transform 0.5s ease;\n> }\n> .btn-primary:hover {\n>   transform: translateY(-2px);\n>   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n> }\n> .btn-primary:hover::before {\n>   transform: translateX(100%);\n> }\n> .btn-primary:active {\n>   transform: translateY(0);\n>   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n> }\n> ```\n>\n> **IntersectionObserver hook (`useInView`):**\n> - Accepts a `threshold` parameter (default `0.15`), uses a ref.\n> - Observes the element; once `isIntersecting` is true, sets `isVisible = true` and unobserves (one-shot animation).\n> - Returns `{ ref, isVisible }`.\n> - This section calls it with threshold `0.1`.\n\n---","url":"/prompts/beauty-categories"}},{"id":"immersive-ocean","object":"prompt","title":"Immersive Ocean","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(14).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Create a fullscreen hero landing page for a creative studio called \"Foldcraft\" using React, Tailwind CSS, and Lucide React icons. The page is a single viewport-height section with a looping background video, a responsive navbar, a mobile menu, and staggered-animated hero text.\n\n**Video Background:**\n- URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4`\n- Attributes: autoPlay, muted, loop, playsInline\n- Styling: absolute positioned, full width/height, object-cover, object-position at 70% horizontal center\n- The video sits behind all content (no z-index or z-0)\n\n**Font:**\n- Google Fonts: Geist (weights 300-700), loaded via `<link>` in index.html\n- Tailwind config extends fontFamily with `geist: ['Geist', 'sans-serif']`\n- Applied as `font-geist` on the root container\n- Body CSS: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`\n\n**Root Container:**\n- `relative h-screen w-full overflow-hidden bg-black font-geist`\n\n**Navbar (z-30):**\n- Flex, space-between, padding: `px-6 py-5 md:px-12 lg:px-16`\n- Left side: Logo text \"Foldcraft\" (`text-lg font-semibold tracking-tight text-white sm:text-xl`) followed by desktop nav links (hidden on mobile, flex on md+)\n- Nav links: Home, Projects, Studio, Reach Us (`text-sm text-white/80 hover:text-white transition-colors`)\n- Right side (desktop): \"Let's Talk\" button (`rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`)\n- Right side (mobile): hamburger toggle button (40x40, z-50) with animated Menu/X icons from lucide-react. Menu rotates 90deg out and X rotates in with opacity and scale transitions (duration-300). Button has `active:scale-90`.\n\n**Mobile Menu (z-20):**\n- Absolute, `inset-x-0 top-0`, full-screen overlay with `bg-black/98 backdrop-blur-xl`\n- Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]` toggling between `h-screen opacity-100` and `h-0 opacity-0 pointer-events-none`\n- Inner content: centered vertically (`flex h-full flex-col justify-center px-8`), with a delayed fade + translate animation (delay-100, translate-y-8)\n- Links: Home, Projects, Studio, Reach Us (`text-3xl font-medium text-white/90 hover:text-white`)\n- Button: \"Let's Talk\" (`mt-6 rounded-full bg-white px-8 py-3.5 text-base font-medium text-black hover:scale-105`)\n- All links/button call `setMobileMenuOpen(false)` on click\n\n**Hero Content (z-10):**\n- Flex column, justify-between, fills remaining height: `h-[calc(100vh-80px)]`\n- Padding: `px-6 pb-10 pt-12 sm:pb-12 sm:pt-16 md:px-12 md:pb-16 md:pt-20 lg:px-16`\n\n**Top Section (max-w-3xl):**\n- Badge: \"Brand & Visual Storytelling\" (`text-xs sm:text-sm text-white/90`), with `animate-[fadeSlideUp_0.8s_ease_0.2s_both]`, margin-bottom 4 (sm:6)\n- Heading h1: \"Shaping visual / narratives, / one pixel at a time.\" with `<br/>` line breaks\n  - Sizing: `text-3xl sm:text-5xl md:text-6xl lg:text-7xl`\n  - Style: `font-medium leading-[1.1] tracking-tight text-white`\n  - Animation: `animate-[fadeSlideUp_0.8s_ease_0.4s_both]`\n\n**Bottom Section:**\n- Paragraph: \"Turning vision into reality through craft, motion, and an endless pursuit of beauty.\"\n  - Style: `text-sm sm:text-base md:text-lg leading-relaxed text-white/60 max-w-sm sm:max-w-lg mb-5 sm:mb-6`\n  - Animation: `animate-[fadeSlideUp_0.8s_ease_0.7s_both]`\n- CTA Button: \"Explore Work\" with ArrowRight icon (size 16)\n  - Style: `rounded-lg bg-white px-5 py-2.5 sm:px-6 sm:py-3 text-sm font-medium text-black hover:scale-105 transition-transform inline-flex items-center gap-2`\n  - Animation: `animate-[fadeSlideUp_0.8s_ease_0.9s_both]`\n\n**CSS Animation (in index.css):**\n```css\n@keyframes fadeSlideUp {\n  from {\n    opacity: 0;\n    transform: translateY(24px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n```\n\n**CSS Reset (in index.css):**\n```css\n* { margin: 0; padding: 0; box-sizing: border-box; }\n```\n\n**Dependencies:** React, lucide-react (ArrowRight, Menu, X), Tailwind CSS, Google Fonts Geist.","url":"/prompts/immersive-ocean"}},{"id":"ai-image-generator-ui","object":"prompt","title":"AI Image Generator UI","summary":"A preview-led ai prompt for generating a polished AI-built interface.","category":"AI","subcategory":"SaaS & AI","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://res.cloudinary.com/dsdhxhhqh/image/upload/v1778221760/CleanShot_2026-05-08_at_13.28.55_2x_swwnfd.png","video_url":null},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a \"Core Features\" marketing section as a single centered component with three gradient cards. Use the Inter font family (weights 400, 500, 600) loaded from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap`.\n\n**Page shell:**\n- Body: white background `#ffffff`, 80px top/bottom + 20px left/right padding, flex centered, Inter font.\n- Global reset: `* { box-sizing: border-box; margin: 0; padding: 0; }`.\n\n**Container (`.c1-container`):** max-width 1100px, full width, text-align center.\n\n**Header block:**\n- Badge (`.c1-badge`): text \"Core Features\", 0.75rem, weight 600, uppercase, letter-spacing 1px, gradient text using `linear-gradient(90deg, #F5C344, #F28482, #B567C2)` with `-webkit-background-clip: text` and transparent fill. 16px bottom margin.\n- Title (`.c1-title`): \"Built for Speed & Quality\", font-size 2.75rem, weight 500, color `#0f172a`, letter-spacing -0.02em, 12px bottom margin.\n- Subtitle (`.c1-subtitle`): \"Everything you need to go\" + `<br>` + \"from idea to image\", 1.125rem, color `#64748b`, line-height 1.5, 50px bottom margin.\n\n**Grid (`.c1-grid`):** 3 equal columns, 24px gap. Breakpoints: 2 columns under 900px, 1 column under 600px (title scales to 2.25rem).\n\n**Card base (`.c1-card`):** 20px border-radius, height 340px, flex column justify-end, relative, overflow hidden, text-align left, background `#F4F8F9`, shadow `0 10px 30px -10px rgba(0,0,0,0.1)`. Titles inside (`h3`): 1.05rem, weight 600, color `#1e293b`, padding 24px, z-index 2.\n\n**Card 1 — Smart Prompt Suggestions (`.c1-card-1`):**\n- Background: `radial-gradient(circle at 50% 0%, #FFB347 0%, #F9ED96 30%, #F4F8F9 60%, #F4F8F9 100%)`.\n- Prompt box (white, 12px radius, 16px padding, 0.8rem text, color `#475569`, line-height 1.6, shadow `0 8px 20px rgba(0,0,0,0.04)`), absolutely positioned top:30px/left:24px/right:24px. Text: \"A bright, high-resolution 3D illustration of a **cheerful cartoon** of a **girl character** **centred against a** smooth blue background\" — bold phrases have class `.c1-blur-text` with gradient `linear-gradient(90deg, #FFB347, #E5A1F5)` as clipped text, weight 600.\n- \"Add more details\" pill button: absolute top:180px/left:40px, white background, 1px solid black border, 5px 14px padding, 20px radius, 0.75rem text, weight 600, color `#1e293b`, shadow `0 4px 15px rgba(0,0,0,0.08)`, includes `✦` character styled `color: #a855f7; font-size: 1rem` with 6px gap.\n- Cursor SVG arrow: absolute top:205px/left:110px, 24x24, fill `#0f172a`, white stroke 1px, drop-shadow `0 4px 6px rgba(0,0,0,0.2)`, z-index 10. Path: `M4 2L20 11L11 13L9 22L4 2Z`.\n- Heading: \"Smart Prompt Suggestions\".\n\n**Card 2 — API Access (`.c1-card-2`):**\n- Background: `radial-gradient(circle at 50% 0%, #E5A1F5 0%, #F8ACA0 30%, #F4F8F9 60%, #F4F8F9 100%)`.\n- `.c1-api-visual` absolutely positioned top:0/left:0/right:0/bottom:70px, flex centered, 24px horizontal padding.\n- Image (`.c1-network-img`): width 100%, height 180px, object-fit contain, margin-top 20px. Source: `https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/network.svg`.\n- Heading: \"API Access\".\n\n**Card 3 — Project Library (`.c1-card-3`):**\n- Background: `radial-gradient(circle at 50% 0%, #F9ED96 0%, #E5A1F5 30%, #F4F8F9 60%, #F4F8F9 100%)`.\n- Mesh overlay (`.c1-mesh`): absolute inset 0, background image = two linear gradients of `rgba(255,255,255,0.8) 1px, transparent 1px` (horizontal and 90deg vertical), background-size 16px 16px, masked with `radial-gradient(circle at center top, black 0%, transparent 80%)` (include `-webkit-mask-image`).\n- Folder image (`.c1-folder`): absolute top:50px, horizontally centered via `left:50%; transform:translateX(-50%)`, width 170px, drop-shadow `0 15px 25px rgba(0,0,0,0.08)`. Source: `https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/library%20icon.svg`.\n- Search pill (`.c1-search`): absolute top:220px, centered, white background, 1px solid black, 6px 18px padding, 20px radius, 0.75rem text weight 500 color `#1e293b`, shadow `0 8px 20px rgba(0,0,0,0.06)`, white-space nowrap, 8px gap. Contains a 14x14 lucide-style search SVG (circle cx=11 cy=11 r=8, line 21,21→16.65,16.65, stroke `#64748b`, stroke-width 2, round caps/joins) followed by text \"Search in library\".\n- Heading: \"Project Library\".\n\n**Note:** No animations are defined in this component — it is purely static styling. No JavaScript behavior, no hover effects. Use Supabase if any data persistence is needed, though this section requires none.","url":"/prompts/ai-image-generator-ui"}},{"id":"launchex-about","object":"prompt","title":"LaunchEx About","summary":"A preview-led about prompt for generating a polished AI-built interface.","category":"About","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(49).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"--\n\n**Prompt to recreate the About section:**\n\n> Build a full-viewport \"About the Founders\" section using React with Tailwind CSS and lucide-react for icons. This is a single `<section>` with the following exact specifications:\n>\n> **Section container:**\n> - `id=\"about\"`\n> - Background color: `#F0F5F7`\n> - `min-height: 100vh`\n> - Position relative\n> - Padding: `py-20 sm:py-28 px-6 sm:px-10`\n> - Uses `flex flex-col justify-center` to vertically center content\n>\n> **Inner wrapper:**\n> - `max-w-7xl mx-auto`\n>\n> **Top row -- heading + description (side by side on desktop):**\n> - A flex container: `flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20`\n> - All text color: `#154359`\n>\n> **Left side -- Section heading:**\n> - `<h2>` with text `About` on line 1, `the founders` on line 2 (separated by `<br />`)\n> - Uses custom font class `.font-firs` (font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`)\n> - Font sizes: `text-[36px] sm:text-[48px] lg:text-[54px]`\n> - `font-semibold uppercase tracking-tight leading-[0.95]`\n>\n> **Right side -- Description block:**\n> - `flex flex-col max-w-xl`\n> - Text container: `text-[17px] sm:text-[18px] leading-[1.5]`, color `#154359`\n> - Paragraph 1: `\"Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations.\"`\n> - Paragraph 2: `\"Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation.\"` -- with `mt-4` spacing\n> - Below paragraphs, an external link:\n>   - `<a>` tag pointing to `https://base.launchex.vc/`, opens in new tab (`target=\"_blank\" rel=\"noreferrer\"`)\n>   - `group inline-flex items-center gap-4 mt-6 text-[14px] font-medium`, color `#154359`\n>   - Text: `\"Launchex.Hub website\"`\n>   - Next to it, an icon button: `flex items-center justify-center w-8 h-8 border`, border color `#154359`, with `transition-transform group-hover:-translate-y-0.5`\n>   - The icon button uses a chamfered clip-path: `polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`\n>   - Inside the button: `<ArrowUpRight>` from lucide-react, `w-3.5 h-3.5`, `strokeWidth={2}`\n>\n> **Stats cards grid (below the heading row):**\n> - `mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5`\n> - Contains 3 stat cards with this exact data:\n>   1. value: `\"7+ years\"`, text: `\"Launchex has served the market, guiding ventures and their journeys\"`, image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8.png&w=1280&q=85`, offset: false\n>   2. value: `\"15000+\"`, text: `\"innovation ventures moved through the Launchex pipeline\"`, image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8.png&w=1280&q=85`, offset: true\n>   3. value: `\"120+\"`, text: `\"accelerator sessions delivered by Launchex across Eastern Europe\"`, image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637.png&w=1280&q=85`, offset: false\n>\n> **Each stat card:**\n> - Outer wrapper: `relative w-full h-[280px] sm:h-[340px]`\n> - The 2nd card (index 1, offset: true) gets `lg:mt-24` to create a staggered effect\n> - Outer wrapper has `backgroundColor: 'rgba(255, 255, 255, 0.8)'` and `padding: '1.5px'` (acts as a thin white border)\n> - Each card uses a unique polygon clip-path for chamfered/angular corners:\n>   - Card 1: `polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)` -- large chamfer on top-left\n>   - Card 2: `polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))` -- large chamfer on top-right and bottom-left\n>   - Card 3: `polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))` -- large chamfer on top-right, bottom-right\n> - The same clip-path is applied to both the outer div and the inner image div (creating an inset border effect)\n> - Inner div: `relative w-full h-full overflow-hidden bg-cover bg-center`, with the card's image as `backgroundImage`, `mixBlendMode: 'Normal'`\n>\n> **Text overlay inside each card:**\n> - Positioned absolutely with different placements per card:\n>   - Card 1: `left-6 right-6 bottom-6`\n>   - Card 2: `left-6 bottom-20`\n>   - Card 3: `left-6 right-28 bottom-6`\n> - All have `max-w-[66%]`\n> - The stat value uses `.font-firs font-semibold uppercase leading-none text-[36px] sm:text-[52px]`\n> - Value text has a gradient fill: `linear-gradient(294deg, #185B7B 20%, #4BBDF0)` applied via `background`, `WebkitBackgroundClip: 'text'`, `backgroundClip: 'text'`, `color: 'transparent'`\n> - Description text: `mt-3 text-[14px] leading-[1.4]`, color `#154359`\n>\n> **Bottom fade overlay:**\n> - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10`\n> - Background: `linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)` -- fades to the same background color\n>\n> **Fonts required in CSS:**\n> ```css\n> html, body {\n>   font-family: 'Inter', system-ui, -apple-system, sans-serif;\n>   -webkit-font-smoothing: antialiased;\n> }\n> .font-firs {\n>   font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;\n> }\n> ```\n>\n> **Color palette used:**\n> - Section background: `#F0F5F7`\n> - All text: `#154359` (dark teal/navy)\n> - Card outer background/border: `rgba(255, 255, 255, 0.8)`\n> - Stat value gradient: `#185B7B` to `#4BBDF0` at 294deg\n> - Link icon border: `#154359`\n> - Bottom gradient: fades to `#F0F5F7`\n>\n> **Key design details:**\n> - The stat cards use CSS `clip-path` polygons (not border-radius) for angular/chamfered corner shapes -- each card has a different polygon creating visual variety\n> - The 1.5px padding on the outer wrapper + white background creates the appearance of a thin white border inside the clip-path\n> - The 2nd card is offset downward by `lg:mt-24` to create a staggered/masonry feel on desktop\n> - Background images are loaded via inline `backgroundImage` style, not `<img>` tags\n> - The external link arrow icon sits inside a small chamfered square button using clip-path\n> - Responsive: cards stack 1-column on mobile, 2-column on `md:`, 3-column on `lg:`\n> - No animations beyond the hover lift on the external link icon button (`group-hover:-translate-y-0.5`)\n\n---","url":"/prompts/launchex-about"}},{"id":"tech-noir-about","object":"prompt","title":"Tech-Noir About","summary":"A preview-led about prompt for generating a polished AI-built interface.","category":"About","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(48).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"---\n\n## Prompt\n\nCreate a single full-page section with a solid `#FF0000` red background using React 19, TypeScript, Vite, Tailwind CSS v4 (`@tailwindcss/vite`), and `motion` (from `motion/react`).\n\n### Fonts (index.css)\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Manrope:wght@400;600&family=Marck+Script&display=swap');\n@import \"tailwindcss\";\n\n@theme {\n  --font-manrope: \"Manrope\", sans-serif;\n  --font-italiana: \"Italiana\", serif;\n  --font-marck: \"Marck Script\", cursive;\n}\n```\n\n### Section Container\n\n```\n<section className=\"relative min-h-screen w-full bg-[#FF0000] flex flex-col z-10\">\n```\n\n---\n\n### 1. Centered Content\n\n**Outer wrapper:**\n```\n<div className=\"flex-1 flex flex-col items-center w-full pt-[100px] md:pt-[400px]\">\n```\n\n**Inner container:**\n```\n<div className=\"flex flex-col items-center w-full px-8 text-center z-20 relative max-w-[900px] h-auto md:h-[620px] mx-auto\">\n```\n\n**a) Logo SVG** -- white fill, 80x80, `mb-12`:\n```tsx\n<svg width=\"80\" height=\"80\" viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M60 120C26.8629 120 0 93.1371 0 60V0C22.5654 0 42.2213 12.4569 52.4662 30.8691C38.4788 34.2089 28.0787 46.7902 28.0787 61.8006V63.1443C28.0787 79.9648 41.7146 93.6006 58.5353 93.6006H59.8789L59.8785 61.8006C59.8785 79.3633 74.1159 93.6006 91.6787 93.6006L91.6787 61.8006C91.6787 44.2783 77.5071 30.0661 60 30.0008L60 0H62.5352C94.2722 0 120 25.7279 120 57.4648V60C120 93.1371 93.1371 120 60 120Z\" fill=\"white\"/>\n</svg>\n```\n\n**b) Mission statement:**\n```tsx\n<p className=\"text-white text-[16px] h-[100px] w-full max-w-[400px] leading-[1.6] mb-[40px] uppercase tracking-wider mx-auto\">\n  We built this platform with a single purpose to eliminate operational chaos and restore balance to your daily business routine\n</p>\n```\n\n**c) Cursive signature:**\n```tsx\n<div className=\"font-marck text-white text-[120px] leading-none mb-[32px]\">\n  S.P.D\n</div>\n```\n\n**d) Two paragraphs** (Title Case, font-light):\n```tsx\n<div className=\"text-white leading-[1.6] mb-[100px] md:mb-24 w-full flex flex-col items-center font-light\">\n  <p className=\"mb-[24px] text-[16px] w-[400px] max-w-full text-center\">\n    I Was Exhausted By Software That Demanded More Effort Than It Actually Saved. That Is Why We Engineered An Autonomous Architecture That Operates Silently In The Background.\n  </p>\n  <p className=\"text-[16px] w-[400px] max-w-full text-center\">\n    Your Business Should Serve Your Life, Not Consume It. Let Our Algorithms Handle The Heavy Lifting, So You Can Focus On The Vision.\n  </p>\n</div>\n```\n\n---\n\n### 2. Bottom Video with Red Gradient Blend\n\n```tsx\n<div className=\"relative w-full shrink-0\">\n  <div className=\"absolute top-0 left-0 w-full h-[100px] bg-gradient-to-b from-[#FF0000] to-transparent z-10 pointer-events-none\" />\n  <video autoPlay loop muted playsInline className=\"w-full h-auto block object-contain\">\n    <source\n      src=\"https://res.cloudinary.com/daklr2whx/video/upload/v1778602552/track-video_2_s9lp53.mp4\"\n      type=\"video/mp4\"\n    />\n  </video>\n</div>\n```\n\nA 100px gradient overlay at the top of the video fades from `#FF0000` to transparent, seamlessly blending the red background into the video. The video uses `object-contain` -- native aspect ratio, full width, no cropping. `shrink-0` prevents flexbox from compressing it.\n\n---\n\n### Asset URL\n\n| Asset | URL |\n|---|---|\n| Bottom video | `https://res.cloudinary.com/daklr2whx/video/upload/v1778602552/track-video_2_s9lp53.mp4` |\n\nHosted on **Cloudinary**.","url":"/prompts/tech-noir-about"}},{"id":"liquid-glass-cta","object":"prompt","title":"Liquid Glass CTA","summary":"A preview-led cta prompt for generating a polished AI-built interface.","category":"CTA","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(17).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a \"CTA + Footer\" section component for a React + Vite + Tailwind CSS project. This is a cinematic full-width call-to-action section with an HLS video background, centered text, two CTA buttons, and a minimal footer bar at the bottom. Black background, white text, liquid glassmorphism effects.\n\n---\n\n### FONTS (import in index.css or HTML head)\n\n```\nhttps://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap\n```\n\n- Headings: `Instrument Serif` italic -- Tailwind class `font-heading`\n- Body: `Barlow` -- Tailwind class `font-body`\n\nAdd to `tailwind.config.ts` under `theme.extend.fontFamily`:\n```js\nheading: [\"'Instrument Serif'\", \"serif\"],\nbody: [\"'Barlow'\", \"sans-serif\"],\n```\n\nBase styles in `index.css`:\n```css\nbody {\n  font-family: 'Barlow', sans-serif;\n  background: #000;\n  color: #fff;\n}\nh1, h2, h3 {\n  font-family: 'Instrument Serif', serif;\n}\n```\n\n---\n\n### LIQUID GLASS CSS (add to index.css inside `@layer components`)\n\n```css\n@layer components {\n  .liquid-glass-strong {\n    background: rgba(255, 255, 255, 0.01);\n    background-blend-mode: luminosity;\n    backdrop-filter: blur(50px);\n    -webkit-backdrop-filter: blur(50px);\n    border: none;\n    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),\n      inset 0 1px 1px rgba(255, 255, 255, 0.15);\n    position: relative;\n    overflow: hidden;\n  }\n\n  .liquid-glass-strong::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    padding: 1.4px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0.5) 0%,\n      rgba(255, 255, 255, 0.2) 20%,\n      rgba(255, 255, 255, 0) 40%,\n      rgba(255, 255, 255, 0) 60%,\n      rgba(255, 255, 255, 0.2) 80%,\n      rgba(255, 255, 255, 0.5) 100%\n    );\n    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n}\n```\n\nThe `::before` pseudo-element uses a mask-composite trick to render a thin glowing gradient border that fades out in the middle of each side.\n\n---\n\n### DEPENDENCIES\n\n```\nnpm install lucide-react hls.js\n```\n\n- `ArrowUpRight` icon from `lucide-react`\n- `hls.js` for streaming the Mux HLS video\n\n---\n\n### HLS VIDEO URL (Mux)\n\n```\nhttps://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8\n```\n\nThis is an HLS stream that requires `hls.js` to play in non-Safari browsers. Safari supports HLS natively via `<video>`.\n\n---\n\n### EXACT COMPONENT CODE\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport Hls from \"hls.js\";\n\nconst CtaFooter = () => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n\n    const src = \"https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8\";\n\n    if (Hls.isSupported()) {\n      const hls = new Hls();\n      hls.loadSource(src);\n      hls.attachMedia(video);\n      return () => hls.destroy();\n    } else if (video.canPlayType(\"application/vnd.apple.mpegurl\")) {\n      video.src = src;\n    }\n  }, []);\n\n  return (\n    <section className=\"relative py-32 px-6 md:px-16 lg:px-24 text-center overflow-hidden\">\n      {/* Background HLS Video */}\n      <video\n        ref={videoRef}\n        autoPlay\n        loop\n        muted\n        playsInline\n        className=\"absolute inset-0 w-full h-full object-cover z-0\"\n      />\n\n      {/* Top fade */}\n      <div\n        className=\"absolute top-0 left-0 right-0 z-[1] pointer-events-none\"\n        style={{ height: '200px', background: 'linear-gradient(to bottom, black, transparent)' }}\n      />\n      {/* Bottom fade */}\n      <div\n        className=\"absolute bottom-0 left-0 right-0 z-[1] pointer-events-none\"\n        style={{ height: '200px', background: 'linear-gradient(to top, black, transparent)' }}\n      />\n\n      {/* Content */}\n      <div className=\"relative z-10\">\n        <h2 className=\"text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4\">\n          Your next website starts here.\n        </h2>\n        <p className=\"text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8\">\n          Book a free strategy call. See what AI&#8209;powered design can do. No commitment, no pressure. Just possibilities.\n        </p>\n        <div className=\"flex items-center justify-center gap-6\">\n          <button className=\"liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body\">\n            Book a Call\n            <ArrowUpRight className=\"h-5 w-5\" />\n          </button>\n          <button className=\"bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body\">\n            View Pricing\n            <ArrowUpRight className=\"h-4 w-4\" />\n          </button>\n        </div>\n\n        {/* Footer */}\n        <div className=\"mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4\">\n          <p className=\"text-white/40 font-body font-light text-xs\">\n            &copy; 2026 Studio. All rights reserved.\n          </p>\n          <div className=\"flex items-center gap-6\">\n            {[\"Privacy\", \"Terms\", \"Contact\"].map((link) => (\n              <a key={link} href=\"#\" className=\"text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors\">\n                {link}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default CtaFooter;\n```\n\n---\n\n### SECTION STRUCTURE BREAKDOWN\n\n```\n<section>  (relative, py-32, px-6 md:px-16 lg:px-24, text-center, overflow-hidden)\n  |\n  +-- <video>  (absolute inset-0, full cover, z-0, autoPlay loop muted playsInline)\n  |\n  +-- Top gradient fade  (absolute top-0, 200px tall, black->transparent, z-[1])\n  +-- Bottom gradient fade  (absolute bottom-0, 200px tall, transparent<-black, z-[1])\n  |\n  +-- Content wrapper  (relative z-10)\n       |\n       +-- <h2> heading\n       +-- <p> subtext\n       +-- Button row (flex, centered, gap-6)\n       |    +-- \"Book a Call\" (liquid-glass-strong, rounded-full)\n       |    +-- \"View Pricing\" (bg-white text-black, rounded-full)\n       |\n       +-- Footer bar (mt-32, border-t border-white/10)\n            +-- Copyright (left)\n            +-- Links: Privacy, Terms, Contact (right)\n```\n\n---\n\n### HLS VIDEO SETUP PATTERN\n\nThe `useEffect` hook initializes `hls.js` for non-Safari browsers and falls back to native HLS for Safari:\n\n1. Check `Hls.isSupported()` -- if true, create an `Hls` instance, load the `.m3u8` source, attach to the `<video>` element\n2. If not supported but the browser can play `application/vnd.apple.mpegurl` (Safari), set `video.src` directly\n3. Cleanup: `hls.destroy()` on unmount\n\nThe `<video>` element uses `autoPlay loop muted playsInline` -- all four attributes are required for autoplay to work across browsers (especially mobile).\n\n---\n\n### VIDEO OVERLAY FADE PATTERN\n\nTwo absolutely positioned `<div>` elements create black gradient fades at the top and bottom edges, making the video blend seamlessly into the surrounding black background:\n\n- **Top fade**: `height: 200px`, `background: linear-gradient(to bottom, black, transparent)`, `z-[1]`, `pointer-events-none`\n- **Bottom fade**: `height: 200px`, `background: linear-gradient(to top, black, transparent)`, `z-[1]`, `pointer-events-none`\n\nContent sits at `z-10` above both the video and the fades.\n\n---\n\n### RESPONSIVE BEHAVIOR\n\n| Breakpoint | Heading size | Padding | Footer layout |\n|---|---|---|---|\n| Mobile (default) | `text-5xl` | `px-6` | Stacked column (`flex-col`) |\n| Tablet (`md:`) | `text-6xl` | `px-16` | Horizontal row (`md:flex-row`) |\n| Desktop (`lg:`) | `text-7xl` | `px-24` | Horizontal row |\n\n- Button row always horizontal (`flex items-center justify-center gap-6`), buttons stack naturally if viewport is very narrow\n- Footer: `flex-col md:flex-row` -- copyright and links stack on mobile, sit side-by-side on tablet+\n- Subtext constrained to `max-w-xl mx-auto`\n- Heading constrained to `max-w-3xl mx-auto`\n\n---\n\n### TYPOGRAPHY DETAILS\n\n| Element | Classes |\n|---|---|\n| Heading | `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4` |\n| Subtext | `text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8` |\n| Glass button text | `text-sm font-medium text-white font-body` |\n| Solid button text | `text-sm font-medium` (inherits `text-black` from `bg-white text-black`) |\n| Copyright | `text-white/40 font-body font-light text-xs` |\n| Footer links | `text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors` |\n\n---\n\n### BUTTON DETAILS\n\n**Primary CTA (\"Book a Call\"):**\n`liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body`\n- Glass background with gradient border via `::before`\n- `ArrowUpRight` icon at `h-5 w-5`\n\n**Secondary CTA (\"View Pricing\"):**\n`bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body`\n- Solid white background, black text\n- `ArrowUpRight` icon at `h-4 w-4` (slightly smaller than the primary)\n\n---\n\n### EXACT TEXT CONTENT\n\n**Heading**: \"Your next website starts here.\"\n**Subtext**: \"Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities.\"\n**Button 1**: \"Book a Call\"\n**Button 2**: \"View Pricing\"\n**Copyright**: \"(c) 2026 Studio. All rights reserved.\"\n**Footer links**: \"Privacy\", \"Terms\", \"Contact\"\n\n---\n\n### PARENT CONTEXT\n\nThis section sits on a `bg-black` parent container as the last section of the page. The top gradient fade blends the video into the section above (which also has a black background). The footer bar is part of this same component -- there is no separate footer component.","url":"/prompts/liquid-glass-cta"}},{"id":"audio-showcase","object":"prompt","title":"Audio Showcase","summary":"A preview-led hero prompt for generating a polished AI-built interface.","category":"Hero","subcategory":"Hero sections","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(70).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a full-screen hero section for a fictional vinyl record label called **\"quietpress\"** using React, TypeScript, Tailwind CSS, and Vite. The page is a single viewport-height hero with no scrolling. Use **lucide-react** for icons. No other UI libraries.\n\n---\n\n### Font\n\nLoad **Helvetica Regular** via this stylesheet in `index.html`:\n```\nhttps://db.onlinewebfonts.com/c/a64ff11d2c24584c767f6257e880dc65?family=Helvetica+Regular\n```\nSet the base font in CSS:\n```css\nhtml { font-family: 'Helvetica Regular', Helvetica, Arial, sans-serif; }\n```\n\n---\n\n### Background: Boomerang Video Loop\n\nUse this CloudFront video as the background:\n```\nhttps://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260611_183632_c311af08-e4b7-458f-81e7-79847a49b3d3.mp4\n```\n\nCreate a `BoomerangVideoBg` component that:\n1. Plays the video once (muted, playsInline, crossOrigin=\"anonymous\"), capturing every frame into off-screen canvases (max width 960px, scaled proportionally).\n2. Uses `requestVideoFrameCallback` when available, falling back to `requestAnimationFrame`.\n3. When the video ends, hides the `<video>` element and renders a `<canvas>` that plays the captured frames in a ping-pong (boomerang) loop at 30fps -- forward then backward, endlessly.\n4. The container is `absolute inset-0 z-0` with `scale-[1.08] origin-center overflow-hidden` to slightly zoom the video and hide edges.\n\n---\n\n### Liquid Glass CSS Effect\n\nCreate a reusable `.liquid-glass` CSS class:\n```css\n.liquid-glass {\n  background: rgba(255, 255, 255, 0.01);\n  background-blend-mode: luminosity;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border: none;\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  position: relative;\n  overflow: hidden;\n}\n.liquid-glass::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.4px;\n  background: linear-gradient(180deg,\n    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,\n    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,\n    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n}\n```\n\n---\n\n### Fade-Up Entrance Animation\n\n```css\n@keyframes fade-up {\n  from { opacity: 0; transform: translateY(20px); }\n  to   { opacity: 1; transform: none; }\n}\n.animate-fade-up {\n  animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;\n}\n.delay-1 { animation-delay: 0.1s; }\n.delay-2 { animation-delay: 0.25s; }\n.delay-3 { animation-delay: 0.4s; }\n.delay-4 { animation-delay: 0.55s; }\n.delay-5 { animation-delay: 0.75s; }\n@media (prefers-reduced-motion: reduce) {\n  .animate-fade-up { animation: none; }\n}\n```\n\n**CRITICAL:** Use `animation-fill-mode: backwards` (not `both` or `forwards`). Using `both` or `forwards` leaves a `transform` on the element after the animation ends, which breaks `backdrop-filter` on any child using `.liquid-glass`. `backwards` applies the \"from\" state before the animation starts but fully releases all properties when it finishes, so the glass blur works correctly.\n\n---\n\n### Header (absolute, top, z-20)\n\n- **Logo (left):** A custom SVG icon (a quarter-circle shape with a centered dot, white fill, 20x20px) next to the text \"quietpress\" in `text-base tracking-tight text-white`.\n  - SVG path: `M 256 256 L 128 256 C 198.692 256 256 198.692 256 128 C 256 57.308 198.692 0 128 0 C 57.308 0 0 57.308 0 128 C 0 198.692 57.308 256 128 256 L 0 256 L 0 0 L 256 0 Z M 128 104 C 141.255 104 152 114.745 152 128 C 152 141.255 141.255 152 128 152 C 114.745 152 104 141.255 104 128 C 104 114.745 114.745 104 128 104 Z` (viewBox `0 0 256 256`)\n\n- **Nav links (center, hidden on mobile):** \"Anthology\", \"Talents\", \"Sound diary\", \"Playback salon\" -- `text-sm text-white/90 hover:text-white`, gap-8.\n\n- **Right side:**\n  - **Cart button:** White pill shape (`rounded-xl bg-white p-1 pr-3 sm:pr-4`). Contains a blue-700 icon square (`h-7 w-7 rounded-lg bg-blue-700`) with a `ShoppingCart` icon (size 14, strokeWidth 2), then text \"Cart (0)\" (hidden on mobile, showing just \"(0)\" on small screens). Has `hover:scale-105 active:scale-95`.\n  - **Mobile menu toggle:** `liquid-glass` square button (`h-9 w-9 rounded-xl`), shows `Menu` or `X` icon (size 18). Hidden on `md:` and above.\n\n- **Mobile nav dropdown** (shown when menu is open): `liquid-glass mx-4 rounded-2xl p-2`, each link is `rounded-xl px-4 py-3 text-sm text-white/90 hover:bg-white/10`.\n\n---\n\n### Hero Content (centered, z-10)\n\nPadding: `pt-28 sm:pt-36 md:pt-44`, `px-4 sm:px-6`.\n\n1. **Tag badge** (animate-fade-up delay-1): `liquid-glass rounded-lg px-4 py-1.5 text-xs sm:text-sm text-white` with inline style `background: rgba(255, 255, 255, 0.16)`. Text: \"Press 04 . Vernal woods\". Bottom margin `mb-5 sm:mb-6`.\n\n2. **Headline** (animate-fade-up delay-2): `max-w-3xl text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-[1.1] text-white`. Two lines:\n   ```\n   records cut for the\n   calm listener.\n   ```\n\n3. **Subtext** (animate-fade-up delay-3): `mt-5 sm:mt-6 max-w-md text-sm sm:text-base md:text-lg leading-relaxed text-white/90`. Text: \"Drone, roots, and nature-captured sound on wax LPs. Every disc cut just once, snag it or miss.\"\n\n4. **Two buttons** (animate-fade-up delay-4, `mt-8`, stack vertically on mobile, row on `sm:`):\n   - **Primary:** `rounded-xl bg-white px-7 py-2.5 text-sm text-gray-900 hover:scale-105 active:scale-95`. Label: \"Browse the shelves\"\n   - **Secondary:** `liquid-glass rounded-xl px-7 py-2.5 text-sm text-white hover:scale-105 active:scale-95`. Label: \"Newest arrivals\"\n\n---\n\n### Now Playing Widget (bottom-right, z-20)\n\nPositioned `absolute bottom-4 right-4 sm:bottom-6 sm:right-6 md:bottom-8 md:right-10`. Max width `270px` on mobile, `w-72` on sm+. Has `animate-fade-up delay-5`.\n\n- **Track card:** `rounded-2xl bg-white p-2.5 pr-4 shadow-lg`. Contains:\n  - Blue icon square (`h-11 w-11 rounded-xl bg-blue-700`) with `BarChart3` icon (size 20, strokeWidth 2.5).\n  - Track info: \"Helia Marsh -- Fern Light\" (truncated, `text-sm text-gray-900`).\n  - Progress bar: `h-1 rounded-full bg-gray-200` with `w-[30%] bg-blue-700` fill.\n  - Times: \"0:33\" and \"-1:21\" in `text-[10px] text-gray-500`.\n\n- **Controls row** (gap-2):\n  - \"Prev\" and \"Next\" buttons: `flex-1 rounded-2xl bg-white py-2 text-sm text-gray-900 shadow-lg hover:scale-105 active:scale-95`.\n  - Heart button (center): `h-10 w-10 rounded-full bg-white shadow-lg hover:scale-110 active:scale-95`. Uses `Heart` icon (size 16) in `text-blue-700`, filled when liked (`fill-blue-700`). Toggles on click.\n\n---\n\n### Key Technical Notes\n- The outer wrapper is `relative h-screen w-full overflow-hidden`.\n- All interactive elements use `transition-transform duration-200`.\n- The accent color throughout is Tailwind's `blue-700`.\n- No Supabase or backend needed -- this is purely a static hero.","url":"/prompts/audio-showcase"}},{"id":"digital-experiences","object":"prompt","title":"Digital Experiences","summary":"A preview-led landing page prompt for generating a polished AI-built interface.","category":"Landing Page","subcategory":"Landing pages","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(40).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"## Prompt\n\nBuild a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency landing page with \"liquid glass\" morphism UI elements and smooth blur/fade animations using Framer Motion.\n\n---\n\n### Fonts (Google Fonts)\n\nLoad via `<link>` in `index.html`:\n- **Instrument Serif** (italic) -- used for all headings (`font-heading`)\n- **Barlow** (weights 300, 400, 500, 600) -- used for body text (`font-body`)\n\nTailwind config extends `fontFamily`:\n```js\nheading: [\"'Instrument Serif'\", 'serif'],\nbody: [\"'Barlow'\", 'sans-serif'],\n```\n\nBase CSS: `html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }`\n\n---\n\n### Liquid Glass CSS (in index.css)\n\nTwo variants defined as plain CSS classes:\n\n**`.liquid-glass`** (subtle):\n- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`\n- `backdrop-filter: blur(4px)` / `-webkit-backdrop-filter: blur(4px)`\n- No border; `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)`\n- `position: relative; overflow: hidden`\n- `::before` pseudo-element creates a gradient stroke border:\n- `position: absolute; inset: 0; border-radius: inherit; padding: 1.4px`\n- `background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`\n- Masked with `-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;`\n- `pointer-events: none`\n\n**`.liquid-glass-strong`** (bolder):\n- Same structure but `backdrop-filter: blur(50px)`\n- `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)`\n- `::before` gradient uses 0.5 alpha at edges, 0.2 at 20%/80%\n\n---\n\n### FadingVideo Component\n\nA reusable `<video>` component accepting `src` (string or string[]), `className`, and `style`. It:\n1. Starts with `opacity: 0`\n2. On `loadeddata`, fades in over 500ms using `requestAnimationFrame`\n3. On `timeupdate`, when remaining time <= 0.55s, fades out over 550ms\n4. On `ended`, if single source: resets `currentTime` to 0, replays, fades back in. If array: advances to next index (cycling).\n5. Video is `autoPlay`, `muted`, `playsInline`, `preload=\"auto\"`\n\n---\n\n### BlurText Component\n\nA word-by-word staggered blur-in animation component using Framer Motion:\n- Splits `text` prop by spaces\n- Each word is a `motion.span` with `display: inline-block`, `marginRight: 0.28em`\n- Triggers on IntersectionObserver (threshold 0.1)\n- Each word animates: `filter` from `blur(10px)` to `blur(0px)`, `opacity` 0 to 1, `y` from 50 to 0\n- Duration 0.7s per word, stagger delay of 100ms per word index\n- Container uses `display: flex; flexWrap: wrap; justifyContent: center; rowGap: 0.1em`\n\n---\n\n### Section 1: Hero\n\n- Full viewport height (`h-screen`), `overflow-hidden`, `bg-black`\n- **Background video**: Single `<FadingVideo>` with:\n- `src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4\"`\n- Positioned: `absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0`\n- Inline style: `width: 120%; height: 120%`\n\n- **Content** (`relative z-10, flex flex-col h-full`):\n\n**Navbar** (fixed, `top-4 left-0 right-0 z-50`, flex between, `px-8 lg:px-16`):\n- Left: `liquid-glass` circle (h-12 w-12 rounded-full) with italic \"a\" in `font-heading text-2xl`\n- Center (hidden on mobile, `md:flex`): `liquid-glass rounded-full px-1.5 py-1.5` pill containing links [\"Work\", \"Studio\", \"Services\", \"Journal\", \"Contact\"] as `px-3 py-2 text-sm font-medium text-white/90 font-body` + a white CTA button \"Start a Project\" with ArrowUpRight icon\n- Right: empty `h-12 w-12` spacer div\n\n**Main content** (centered, `flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center`):\n- **Badge** (motion.div, delay 0.4): `liquid-glass rounded-full` pill with a white \"New\" badge inside + text \"Booking Q3 2026 engagements -- limited capacity\"\n- **Headline** (mt-6, max-w-3xl): `<BlurText>` with text \"Crafted Digital Experiences Built to Outlast Trends\", classes: `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] tracking-[-4px]`\n- **Subtext** (motion.p, delay 0.8, mt-4): \"We are a small studio of designers and engineers shaping brand-defining websites for ambitious companies. Precise typography, cinematic motion, and code you can be proud of.\" -- `text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight`\n- **CTA buttons** (motion.div, delay 1.1, mt-6, flex gap-6): \"Start a Project\" in `liquid-glass-strong rounded-full px-5 py-2.5` with ArrowUpRight + \"Watch Showreel\" plain text with Play icon\n- **Stats cards** (motion.div, delay 1.3, mt-8, flex gap-4): Two `liquid-glass p-5 w-[220px] rounded-[1.25rem]` cards:\n- Card 1: ClockIcon, \"6 Weeks\", \"Average End-to-End Launch Time\"\n- Card 2: GlobeIcon, \"140+\", \"Brands Shipped Across Four Continents\"\n- Numbers: `text-4xl font-heading italic tracking-[-1px] leading-none mt-4`\n\n**Bottom trust bar** (motion.div, delay 1.4, flex-col items-center gap-4 pb-8):\n- `liquid-glass rounded-full` pill: \"Trusted by founders, operators, and creative directors worldwide\"\n- Logo names in a flex row (gap-12 md:gap-16): [\"Aeon\", \"Vela\", \"Apex\", \"Orbit\", \"Zeno\"] each as `font-heading italic text-2xl md:text-3xl tracking-tight`\n\n- **All motion elements** use shared initial/animate: `{ filter: 'blur(10px)', opacity: 0, y: 20 }` -> `{ filter: 'blur(0px)', opacity: 1, y: 0 }`, duration 0.8s, easeOut\n\n---\n\n### Section 2: Capabilities\n\n- `min-h-screen`, `overflow-hidden`, `bg-black`, relative\n- **Background video**: `<FadingVideo>` with:\n- `src=\"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_093722_ccfc7ebf-182f-419f-8a62-2dc02db7dd9d.mp4\"`\n- `absolute inset-0 w-full h-full object-cover z-0`\n\n- **Content** (`relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10 flex flex-col min-h-screen`):\n- **Header** (mb-auto):\n- Label: `text-sm font-body text-white/80 mb-6` -- \"// Capabilities\"\n- Heading: `font-heading italic text-6xl md:text-7xl lg:text-[6rem] leading-[0.9] tracking-[-3px]` -- \"Studio craft,\\nend to end\"\n\n- **Cards grid** (mt-16, `grid grid-cols-1 md:grid-cols-3 gap-6`), three cards:\n1. **Design** -- Icon: ImageIcon (filled image icon), Tags: [\"Brand Systems\", \"Art Direction\", \"Visual Identity\", \"Motion\"], Body: \"We shape identities and interfaces that feel unmistakably yours -- typographic systems, component libraries, and art-directed pages that scale without losing soul.\"\n2. **Engineering** -- Icon: MovieIcon (film/clapboard), Tags: [\"React\", \"Next.js\", \"Headless CMS\", \"Edge-Ready\"], Body: \"Production-grade front-ends built on modern stacks. Performant, accessible, and instrumented -- with code your team will enjoy extending long after launch.\"\n3. **Growth** -- Icon: LightbulbIcon, Tags: [\"SEO\", \"Analytics\", \"A/B Testing\", \"Retention\"], Body: \"Launch is the starting line. We partner with your team on conversion, content, and iteration loops that turn a beautiful site into a compounding asset.\"\n\n- Each card: `liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col`\n- Top row: icon in a nested `liquid-glass h-11 w-11 rounded-[0.75rem]` square + tags (flex-wrap, gap-1.5) right-aligned, each tag is `liquid-glass rounded-full px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap`\n- Spacer: `flex-1`\n- Bottom: title in `font-heading italic text-3xl md:text-4xl tracking-[-1px] leading-none` + body in `text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]`\n\n---\n\n### Custom SVG Icons (no external icon library needed for these)\n\n- **ArrowUpRight**: 24x24, stroke, paths \"M7 17L17 7\" and \"M7 7h10v10\"\n- **Play**: 24x24, filled polygon \"6 4 20 12 6 20 6 4\"\n- **ClockIcon**: 24x24, stroke (1.5), circle r=9 + \"M12 7v5l3 2\"\n- **GlobeIcon**: 24x24, stroke (1.5), circle r=9 + horizontal line + two arc paths\n- **ImageIcon**: 24x24, filled Material-style image icon\n- **MovieIcon**: 24x24, filled Material-style movie icon\n- **LightbulbIcon**: 24x24, filled Material-style bulb icon\n\n---\n\n### Dependencies\n\n- react, react-dom\n- framer-motion\n- tailwindcss, postcss, autoprefixer\n- vite, @vitejs/plugin-react\n- typescript\n\n---\n\n### Key Design Principles\n\n- Everything is on a pure black (#000) background\n- All text is white; subtle text uses `white/80` or `white/90`\n- Liquid glass elements have near-invisible fills with gradient-stroke borders via CSS masks\n- Videos cover sections as atmospheric backgrounds, fading in/out smoothly\n- Typography: heading font is always italic with very tight tracking (negative), body font is light weight\n- Responsive: nav links hidden on mobile, grid collapses to single column, text sizes scale with breakpoints\n- Animations: staggered blur-in on load for hero content, intersection-triggered for BlurText","url":"/prompts/digital-experiences"}},{"id":"aurora-onboard","object":"prompt","title":"Aurora Onboard","summary":"A preview-led sign up prompt for generating a polished AI-built interface.","category":"Sign Up","subcategory":"Apps & mobile","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/CleanShot_2026-05-07_at_15.40.21_2x_kfgapx.png","video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/CleanShot_2026-05-07_at_15.40.21_2x_kfgapx.png"},"delivery":{"type":"inline_full_prompt","prompt_text":"Please build a modern, two-column registration interface called \"Aurora Sign Up\". Use React, Tailwind CSS (v4), `motion/react` (for animations), and `lucide-react` (for icons). The app should be contained entirely in `App.tsx` and `index.css`.\n\n### 1. Global Setup & CSS (`index.css`)\n- Import the \"Inter\" font from Google Fonts (weights 300, 400, 500, 600, 700).\n- Extend the Tailwind theme with `--font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif;` and a custom color: `--color-brand-gray: #1A1A1A`.\n- Apply base styles to the `body`: `@apply font-sans bg-black text-white antialiased;`.\n\n### 2. Main Layout (`App.tsx` container)\n- The `<main>` element should have: `flex min-h-screen w-full bg-black selection:bg-white/30 p-2 transition-all duration-500`. \n- On `lg` breakpoints: `lg:h-screen lg:overflow-hidden lg:p-4`.\n- Split this container into a Left Column (Hero) and a Right Column (Form).\n\n### 3. Left Column (Hero & Background Video)\n- Width on large screens should be exactly `w-[52%]`. It should be hidden on mobile/tablet and only visible `lg:flex`.\n- Styles: `relative flex-col items-center justify-end pb-32 px-12 rounded-3xl overflow-hidden shadow-2xl h-full`.\n- **Background Video**: Add an absolutely positioned `<video>` tag (`inset-0`, `w-full`, `h-full`, `object-cover`). It must have `autoPlay`, `muted`, `loop`, and `playsInline`. \n- **CRITICAL**: The `<source>` MUST be exactly `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_081238_406ed0e3-5d83-436e-a512-0bbff7ec5b95.mp4` (`type=\"video/mp4\"`).\n- **CRITICAL**: Do NOT add any dark overlay, gradient, or tint mask over the video. Let it play purely without overlays.\n- **Hero Content Container**: Place content over the video (`z-10 w-full max-w-xs space-y-8`).\n- **Animations**: Use `motion.div` for a staggered reveal. The container should transition `opacity: 0` to `1` with `staggerChildren: 0.15` and `delayChildren: 0.2`. Every child element inside should fade in and slide up (`y: 10` to `y: 0`, duration `0.5`).\n- **Brand/Logo**: A flex row with the `Circle` icon from Lucide (fill-white text-white) and the text \"Aurora\" (`text-xl font-semibold tracking-tight`).\n- **Heading Block**: \"Join Aurora\" (`text-4xl font-medium tracking-tight whitespace-nowrap`). Below it, a description: \"Follow these 3 quick phases to activate your space.\" (`text-white/60 text-sm leading-relaxed px-4`).\n- **Steps**: Render a custom `<StepItem>` component three times. \n  1: \"Register your identity\" (active state)\n  2: \"Configure your studio\"\n  3: \"Finalize your profile\"\n\n### 4. Right Column (Sign Up Form)\n- A container with `flex-1 flex flex-col items-center justify-center py-12 lg:py-6 px-4 sm:px-12 lg:px-16 xl:px-24 overflow-y-auto lg:overflow-hidden`.\n- **Animation**: Wrap the interior content in a `motion.div` that fades in (`opacity: 0` to `1`, `duration: 0.8`, `ease: \"easeOut\"`). Inner width `w-full max-w-xl`, spacing `space-y-8 lg:space-y-6 sm:space-y-10`.\n- **Header**: \"Create New Profile\" (`text-3xl font-medium tracking-tight`). Subtitle: \"Input your basic details to begin the journey.\" (`text-white/40 text-sm`).\n- **Social Buttons**: A 2-column grid (`grid grid-cols-2 gap-4`). Render Google (`Chrome` icon) and Github (`Github` icon) using a `<SocialButton>` component.\n- **Divider**: A horizontal line (`border-white/10`) with the text \"Or\" in the center (`bg-black px-4 text-xs font-medium text-white/40 uppercase tracking-widest`).\n- **Form Layout**: \n  - First Name and Last Name in a 2-column grid.\n  - Email (full width).\n  - Password (full width) with a custom `lucide-react` `Eye` toggle icon in the absolute right of the input, and a tiny helper text \"Requires at least 8 symbols.\"\n  - **Submit Button**: \"Create Account\" (`w-full h-14 bg-white text-black font-semibold rounded-xl hover:bg-white/90 active:scale-[0.98] mt-4`).\n  - **Footer Link**: \"Member of the team? Log in\".\n\n### 5. Reusable Components to Create\nCreate these exact functional components at the bottom of the file:\n1. **`<StepItem>`**: Takes `number`, `text`, and an optional `active` boolean.\n   - If active: Apply `bg-white text-black border border-white`. The number circle is `bg-black text-white`.\n   - If inactive: Apply `bg-brand-gray text-white border-none`. The number circle is `bg-white/10 text-white/40`.\n2. **`<SocialButton>`**: Takes `icon` and `label`. Button has `bg-black border border-white/10 rounded-xl hover:bg-white/5`.\n3. **`<InputGroup>`**: Takes `label`, `placeholder`, and `type`. The label is `text-sm font-medium text-white`. The input is `bg-brand-gray border-none rounded-xl h-11 px-4 text-white placeholder:text-white/20 focus:ring-2 focus:ring-white/20`.\n\nEnsure the final code uses `export default function App()` at the top.","url":"/prompts/aurora-onboard"}},{"id":"guardnet-benefits","object":"prompt","title":"Guardnet Benefits","summary":"A preview-led benefits prompt for generating a polished AI-built interface.","category":"Benefits","subcategory":"Sections & components","pricing":{"model":"free","price_cents":0,"currency":"USD"},"preview":{"image_url":null,"video_url":"https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/animated%20(34).webp"},"delivery":{"type":"inline_full_prompt","prompt_text":"Build a single React + TypeScript section using Tailwind CSS. No extra libraries. Fully mobile-responsive. Black background, white text.\n\n## Global Prerequisites\n\n- Font: `@import url(https://db.onlinewebfonts.com/c/e55e9079ee863276569c8a68d776ef04?family=Futura+Md+BT+Medium);`\n- Body: `font-family: 'Futura Md BT Medium', system-ui, -apple-system, sans-serif; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`\n- Section sits inside a `w-full max-w-[1400px]` wrapper on a black page.\n\n---\n\n## BenefitsSection\n\nContainer: `relative w-full bg-black px-4 sm:px-6 md:px-10 py-12 sm:py-20`\n\n### Section Heading\n\n`text-white text-3xl sm:text-4xl md:text-5xl font-light text-center mb-12 sm:mb-24` with inline style `letterSpacing: '-0.04em'`\n\nText: **\"Key Benefits\"**\n\n### Three-Column Card Grid\n\n`grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4`\n\nAll three cards share: `relative h-[380px] sm:h-[460px] rounded-2xl bg-neutral-950 overflow-hidden`\n\n---\n\n#### Card 1: Text Card (Left)\n\nAdditional classes: `p-6 sm:p-8`\n\n**Blue Blob:** `absolute top-1/2 -translate-y-1/2 -left-[420px] h-[460px] w-[460px] rounded-full bg-[#1e3a8a] blur-3xl opacity-40`\n\n**Content wrapper:** `relative z-10 flex flex-col h-full`\n\n**Heading:** `text-white text-xl sm:text-2xl font-light leading-tight`\nText (two lines with `<br />`):\n```\nPreemptive Risks\nScouting and Reactions\n```\n\n**Body paragraph:** `mt-12 sm:mt-20 text-[13px] sm:text-[14px] leading-relaxed text-white/70 font-light max-w-[280px]`\nText: **\"Defense platforms constantly observe bandwidth streams, record files, and machine behaviors to uncover unusual patterns or outliers that could signal a defensive failure.\"**\n\n---\n\n#### Card 2: Video Card (Center)\n\nAdditional classes: `flex flex-col` (no padding on card itself)\n\n**Top video region:** `relative w-full overflow-hidden` with inline style `height: '75%'`\n\n- `<video>` element: `w-full h-full object-cover block`, attributes: `autoPlay loop muted playsInline`\n- **Exact URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260421_072701_f6a01abb-eb30-4559-9d6e-774362defbc3.mp4`\n- **Bottom fade overlay inside video wrapper:** `pointer-events-none absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-neutral-950`\n\n**Bottom text region:** `flex-1 flex items-center justify-start p-6 sm:p-8`\n\n**Heading:** `text-white text-xl sm:text-2xl font-light leading-tight text-left`\nText (two lines with `<br />`):\n```\nKnow-how and Sectoral\nAwareness\n```\n\n---\n\n#### Card 3: Text Card (Right)\n\nAdditional classes: `p-6 sm:p-8`\n\n**Blue Blob:** `absolute -top-28 -right-28 h-56 w-56 rounded-full bg-[#1e3a8a] blur-3xl opacity-40`\n\n**Content wrapper:** `relative z-10 flex flex-col h-full`\n\n**Heading:** `text-white text-xl sm:text-2xl font-light leading-tight`\nText (two lines with `<br />`):\n```\nPreemptive Risks\nScouting and Reactions\n```\n\n**Body paragraph:** `mt-auto text-[13px] sm:text-[14px] leading-relaxed text-white/70 font-light max-w-[320px]`\nText: **\"Defense platforms constantly observe bandwidth streams, record files, and machine behaviors to uncover unusual patterns or outliers that could signal a defensive failure.\"**\n\nKey difference from Card 1: the paragraph uses `mt-auto` to pin it to the **bottom** of the card, versus Card 1 which uses `mt-12 sm:mt-20` to place it in the **middle**.\n\n---\n\n## Color Palette Reference\n\n| Token | Hex |\n|---|---|\n| Background | `#000000` (black) |\n| Card surface | `neutral-950` (Tailwind) |\n| Blob blue | `#1e3a8a` |\n| Video fade target | `neutral-950` (matches card bg) |\n| Body text | `white/70` |\n| Heading text | `white` |\n\n## Responsive Breakpoints\n\n- Default (mobile): `< 640px` -- cards stack in a single column\n- `sm:` at `640px` -- cards grow taller (460px), text/padding increases\n- `md:` at `768px` -- switches to 3-column grid layout\n\n## Interactions\n\n- No hover states or JavaScript animations\n- All motion comes from the looping background video in Card 2\n- The bottom fade on the video blends seamlessly into the `neutral-950` card surface","url":"/prompts/guardnet-benefits"}}]}