22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:Tcc5,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. **Fonts:** - Load Google Fonts: `Instrument Serif` (regular + italic) and `Inter` (weights 400, 500, 600). - Body font: `Inter`, color `#1B133C`. - Heading font: `Instrument Serif`. **Page structure (single full-screen section, 100vh):** 1. **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: - 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. - 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. 2. **Hero content** — centered below nav with `mt-8 md:mt-16`, stacked vertically: - **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". - **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: - "Deploy digital workers" - "for mundane workflows" - **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." - **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". 3. **Background video** — absolutely positioned (`absolute inset-0 z-0`) behind all content. The video element uses: - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260714_113715_c7e0daa0-8bdd-4486-a2da-040901f8f0ea.mp4` - Attributes: `autoPlay muted loop playsInline` - 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. **CSS reset in index.css:** ``` body { font-family: 'Inter', sans-serif; color: #1B133C; } ``` **Key details:** - The hero section uses `relative h-screen w-full overflow-hidden flex flex-col`. - All content elements are `relative z-10` to sit above the video (`z-0`). - No other sections or pages — just this single hero. - Color palette: deep navy `#1B133C` for text, white/translucent for glass elements, orange-500 for the Y Combinator badge accent. - Page title: "Axon — Digital Workers for Mundane Workflows"24:T118e,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`. **Page shell:** - Body: white background `#ffffff`, 80px top/bottom + 20px left/right padding, flex centered, Inter font. - Global reset: `* { box-sizing: border-box; margin: 0; padding: 0; }`. **Container (`.c1-container`):** max-width 1100px, full width, text-align center. **Header block:** - 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. - Title (`.c1-title`): "Built for Speed & Quality", font-size 2.75rem, weight 500, color `#0f172a`, letter-spacing -0.02em, 12px bottom margin. - Subtitle (`.c1-subtitle`): "Everything you need to go" + `
` + "from idea to image", 1.125rem, color `#64748b`, line-height 1.5, 50px bottom margin. **Grid (`.c1-grid`):** 3 equal columns, 24px gap. Breakpoints: 2 columns under 900px, 1 column under 600px (title scales to 2.25rem). **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. **Card 1 — Smart Prompt Suggestions (`.c1-card-1`):** - Background: `radial-gradient(circle at 50% 0%, #FFB347 0%, #F9ED96 30%, #F4F8F9 60%, #F4F8F9 100%)`. - 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. - "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. - 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`. - Heading: "Smart Prompt Suggestions". **Card 2 — API Access (`.c1-card-2`):** - Background: `radial-gradient(circle at 50% 0%, #E5A1F5 0%, #F8ACA0 30%, #F4F8F9 60%, #F4F8F9 100%)`. - `.c1-api-visual` absolutely positioned top:0/left:0/right:0/bottom:70px, flex centered, 24px horizontal padding. - Image (`.c1-network-img`): width 100%, height 180px, object-fit contain, margin-top 20px. Source: `https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/network.svg`. - Heading: "API Access". **Card 3 — Project Library (`.c1-card-3`):** - Background: `radial-gradient(circle at 50% 0%, #F9ED96 0%, #E5A1F5 30%, #F4F8F9 60%, #F4F8F9 100%)`. - 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`). - 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`. - 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". - Heading: "Project Library". **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.25:Ta85,Create a full-screen hero section with the following exact specifications: Layout & Structure: - Full viewport height (h-screen), full width, relative positioning with overflow-hidden - Background color: #070612 (dark purple-black) - Content aligned to the left side, vertically centered - Max-width container (max-w-7xl) with horizontal padding (px-6 lg:px-12) Background Video: Video Source: HLS stream from https://stream.mux.com/s8pMcOvMQXc4GD6AX4e1o01xFogFxipmuKltNfSYza0200.m3u8 - Autoplaying, looping, muted video positioned absolutely behind content - Video shifted 200px to the right (margin-left: 200px) - Video scaled to 1.2x with origin-left, object-cover, full height - Bottom fade gradient (h-40) from background color to transparent (z-10) Badge (top element): - Pill-shaped badge with rounded-full, border border-white/20, backdrop-blur-sm - Contains a Sparkles icon (lucide-react, w-3 h-3, text-white/80) - Text: "New AI Automation Ally" in text-sm font-medium text-white/80 - Animated with blur-in effect (0.6s duration, no delay) Main Heading: - Three lines of text: - Line 1: "Unlock the Power of AI" (block display) - Line 2: "for Your" (inline) - Line 3: "Business." in serif italic font (inline) - Font sizes: text-4xl md:text-5xl lg:text-6xl - Font weight: font-medium - Line height: leading-tight lg:leading-[1.2] - Color: white (text-foreground) - Each word animates in with staggered split-text animation (0.08s delay between words, 0.6s duration, y: 40px -> 0, opacity: 0 -> 1) Subtitle: - Text: "Our cutting-edge AI platform automates, analyzes, and accelerates your workflows so you can focus on what really matters." - Styling: text-white/80, text-lg, font-normal, leading-relaxed, max-w-xl - Animated with blur-in effect (0.4s delay, 0.6s duration) CTA Buttons (bottom): - Two buttons side by side with gap-4, flex-wrap - Primary button "Book A Free Call": - Solid white background (bg-foreground), dark text (text-background) - Rounded-full, px-5 py-3 - Includes right arrow icon (ArrowRight from lucide-react) - Links to /book-call - Secondary button "Learn now": - Semi-transparent background (bg-white/20), backdrop-blur-sm - Rounded-full, px-8 py-3 - White text - Both buttons animated with blur-in effect (0.6s delay, 0.6s duration) Animations (using framer-motion): - BlurIn component: opacity 0->1, blur 10px->0, y 20->0 - SplitText component: splits text by words, staggers each word's animation Z-index layering: - Video: z-0 - Bottom gradient: z-10 - Content: z-20 Spacing: - 12-unit gap (gap-12) between badge/heading group and CTA buttons - 6-unit gap (gap-6) between badge and heading, and between heading and subtitle26:T212c,Build a React + TypeScript + Vite landing page for a fintech app called "veloce" using Tailwind CSS and Framer Motion. The page has 4 sections. Do not use purple/indigo colors — the gradient used is a specific brand gradient defined below. Dependencies: framer-motion lucide-react @supabase/Bolt Database-js (not used in UI but installed) Fonts (Tailwind config + CSS): In tailwind.config.js, extend fontFamily with: 'manrope': ['Manrope', 'sans-serif'], 'helvetica': ['Helvetica', 'Arial', 'sans-serif'], 'helvetica-neue': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'], 'inter': ['Inter', 'sans-serif'], 'product-sans': ['Product Sans', 'sans-serif'], 'sf-compact': ['SF Compact Display', 'SF Compact Text', 'system-ui', 'sans-serif'], In tailwind.config.js, extend colors with: 'sintra-dark': '#00041F', 'sintra-accent': '#B56939', 'sintra-light': '#EFF4FF', 'sintra-gray': '#49484F', In index.css, import from Google Fonts: @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); Also add globally: @layer base { * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } Brand gradient: from-[#B56939] via-[#5C3779] to-[#454BBB] (left to right) src/components/BlurIn.tsx A reusable wrapper component using Framer Motion's useInView. When the element enters the viewport (once), animate from filter: blur(20px), opacity: 0 to filter: blur(0px), opacity: 1 over 1.2s. Export as named export BlurIn. src/App.tsx The root layout is a min-h-screen div. The first child is a full-screen h-screen flex flex-col relative div that contains: A background

Subscribe to Our Community

AI Workflow Agents

AI Image Generator UI

Luminex

AI Automation Hero

Veloce Finance

Digital Epoch

Cybersecurity Hero

HR SaaS Hero

Portal

Community CTA

Orbis Cards

Luminara

BookedUp

Conversion

Impressive Hero

Animated Cards

Kresna Footer

Taskly

Datacore SaaS Hero

Nex Max Upgrade