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:T1d77,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. --- ### Background Full-page background image covering the entire viewport: ``` https://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 ``` Applied as `background: url(...) center center / cover no-repeat` on the root `.app` container. --- ### Header - Flexbox row, `justify-content: space-between`, padding `24px 64px`, max-width `1920px`, centered. - **Left side**: Logo image + nav links - Logo: `` with height 32px from: `https://polo-pecan-73837341.figma.site/_assets/v11/17ae538989a509947a8de3892c644664895e69b1.png` - 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). - **Right side**: "Log In" link + "Join Now" button - Log In: color `#ffffff`, 15px, weight 500, same underline hover as nav but white. - 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`. - 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. --- ### Hero Left - `flex: 0 1 600px`, `padding-top: 40px` - **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. - **"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). - **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. --- ### Hero Right -- Circles Visualization - Container: `720x720px`, centered. - 4 concentric circles (orbits), each rotating slowly: - Orbit 1 (innermost): 353px diameter, spins left (counterclockwise) 30s - Orbit 2: 501px diameter, spins right 40s - Orbit 3: 649px diameter, spins right 50s - Orbit 4 (outermost): 797px diameter, spins left 60s - 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. - **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. - **Avatars** placed on orbits using `transform: translate(-50%, -50%) rotate(Xdeg) translate(radius) rotate(-Xdeg)`: - Avatar images (58px default, some 78px/88px) from these URLs: - `https://polo-pecan-73837341.figma.site/_assets/v11/aa51718fb3af3637e6d666b6543fc27a175fada6.png` (orbit 1, at 270deg, 177px radius, square with border-radius 20px, purple glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/ca755f7f93c1126fb8bdbf99ab364a33aa9ab272.png` (orbit 2, at 60deg, 251px, round, yellow glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/dc01064c7093dcc32674876ee3cf5e41c4a485c6.png` (orbit 2, at 180deg, 251px, 78px, pink glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/d5470a58b02388336141575048720f19a50de832.png` (orbit 2, at 300deg, 251px, square border-radius 20px, blue glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/018736aa5d0275c4ce56cfebaf2ae3007d81ca1e.png` (orbit 3, at 130deg, 325px, 88px, pink glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/c76d8a0b99676de31c014344bfaf75bad090758d.png` (orbit 4, at 30deg, 399px, purple glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/7b1b5f039de7b54cc9913e96c1923c3b15a157fa.png` (orbit 4, at 95deg, 399px, 88px, square border-radius 24px, orange glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/9ae171d8895199349755c43fbff00e122221a027.png` (orbit 4, at 220deg, 399px, 88px, square border-radius 24px, pink glow) - `https://polo-pecan-73837341.figma.site/_assets/v11/926c9eb7b4bc1df846fa0e39f0b0dc3fefd80671.png` (orbit 4, at 320deg, 399px, purple glow) - Each avatar has a staggered fly-in animation (scale 0.3 + rotate -180deg + blur -> normal), delays from 0.6s to 2.3s. --- ### Logo Ticker (Bottom) - Horizontal infinitely scrolling strip of partner logos, `gap: 64px`, 20s animation. - Fade masks on left/right edges (linear-gradient mask). - 5 unique SVG logos repeated 4x for seamless loop: - `https://polo-pecan-73837341.figma.site/_assets/v11/1e7b0e6fcc016cd28aec5c68990118b8c54c35a5.svg` - `https://polo-pecan-73837341.figma.site/_assets/v11/3eac03c183db2ae080d910159211c14843398b61.svg` - `https://polo-pecan-73837341.figma.site/_assets/v11/17705a4c0023a0e5a99154dfb10582adbbf4260b.svg` - `https://polo-pecan-73837341.figma.site/_assets/v11/0e5f442b09dc5c248e3e60d40a65505fb1887228.svg` - `https://polo-pecan-73837341.figma.site/_assets/v11/63f99030ceb459e3c9ab9e429cfa2353491d3816.svg` - Each logo: `width: 137px`, `height: 40px`, `object-fit: contain`. --- ### Entrance Animations - Header: fade-down (translateY -20px to 0, 0.8s) - Hero left: fade-up (translateY 40px to 0, 1s) - Hero right circles: scale-in (scale 0.85 to 1 + opacity, 1.2s, delay 0.3s) - Logos section: fade-up, delay 0.6s - All using `cubic-bezier(0.22, 1, 0.36, 1)` easing. --- ### Responsive Breakpoints - **1280px**: circles scale 0.85 - **1024px**: stack layout (flex-direction column), heading 48px, circles scale 0.7, nav gap shrinks - **768px**: hide nav, heading 36px, circles scale 0.5 - **480px**: heading 28px, circles scale 0.4, smaller buttons/logos --- ### Key Colors - Primary accent: `#A068FF` - Background dark: `#060218` / `#070319` - Text dark: `#000000` - Text light: `#ffffff` - Body bg fallback: `#0a0a0a` --- ### Technical Details - React (useState, useEffect, useRef), Vite build - Custom `useCountUp` hook: animates 0 to 20 over 2s with easeOutCubic, starts after 1.2s delay - `TypewriterHeading` component: types char by char at configurable speed - CSS `@property --border-angle` for the animated border gradient - No external animation libraries -- pure CSS animations + JS for typewriter/counter24:T3024,Build a landing page for "Highframe" -- a SaaS product for building internal workflows, smart forms, and automations without code. The page has two responsive versions: **desktop** (served as a standalone HTML file) and **mobile** (served as a standalone HTML file). A React app switches between them via iframe based on viewport width (breakpoint: 768px). --- ### BRAND IDENTITY - **Product name:** Highframe - **Logo:** SVG circle icon -- outer circle (r=12, stroke #fff 1.6px), inner arc path (`M13 5a8 8 0 1 1-5.66 2.34`, stroke #fff 1.6px, round linecap), center dot (r=2.4, fill #fff), all within a 26x26 viewBox - **Tagline:** "Build the tools your team *actually* needs" - **Sub-headline:** "Turn any process into an intelligent form that routes data and triggers actions instantly." ### FONTS Load from Google Fonts: - **Hanken Grotesk** (weights: 400, 500, 600, 700) -- used for body, nav, buttons, UI - **EB Garamond** (weights: 400, 500, 600 + italic variants) -- used for h1 headings and footer headings ### COLOR SYSTEM (CSS custom properties) ``` --ink: #0c0d0d --paper: #f4f3f0 --lime: #c7ef6b --lime-deep: #b6e34f (desktop only) --green: #16331f (desktop only) --muted: rgba(255,255,255,.72) (desktop) / rgba(255,255,255,.65) (mobile) --line: rgba(255,255,255,.16) (desktop) / rgba(255,255,255,.13) (mobile) --card: rgba(255,255,255,.055) (mobile only) ``` Body background: `#000` (desktop), `#060707` (mobile). All text white. ### HERO BACKGROUND VIDEO - **URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260604_125109_19424216-4e2a-4560-b9f2-f1b5f6eb2c2e.mp4` - Attributes: autoplay, muted, loop (desktop) / no loop (mobile), playsinline - Position: absolute, inset 0, 100% width/height, object-fit: cover - **Horizontally flipped** using `transform: scaleX(-1)` - Desktop also has `scale(1.12)` and a Ken Burns animation (`scale(1.12)` to `scale(1.2)`, 26s ease-in-out infinite alternate) - Mobile has `object-position: center top`; desktop has `object-position: center` - **No overlay/scrim** on the video - Mobile loops the video back to 0 at 2 seconds using a `timeupdate` listener - z-index: -2 --- ### DESKTOP HERO SECTION **Layout:** `.hero` section, min-height 880px, `isolation: isolate`, overflow visible. **Nav bar** (88px height, flexbox space-between, z-index 5): - Left: brand logo (26x26 SVG) + "Highframe" text (20px, weight 600, letter-spacing -.01em) - Right nav links: "Product" (with chevron dropdown SVG), "Resources" (with chevron), "Pricing", "Customers", "Book a demo" (pill button with border `rgba(255,255,255,.4)`, border-radius 999px, padding 10px 20px, frosted background `rgba(255,255,255,.04)`) - Nav links: 15.5px, weight 500, color `rgba(255,255,255,.88)`, gap 34px **Hero content** (grid layout, single column): - `.hero-copy` container: padding 78px top 110px bottom, max-width 620px, z-index 4 - **h1:** EB Garamond, 62px, line-height 1.06, weight 400, letter-spacing -.005em, text-wrap balance. Contains `` for "actually" (italic) - **Subtitle (`.sub`):** EB Garamond, 22px, line-height 1.5, color `var(--muted)`, max-width 430px - **CTA buttons** (flex row, gap 14px, margin-top 38px): - Primary: "Get started for free" -- `#f4f3f0` bg, `#121312` text, 999px radius, 54px height, 16px weight 600, box-shadow `0 8px 30px rgba(0,0,0,.35)`. Hover: translateY(-2px) + stronger shadow - Ghost: "Watch demo" with Material Icons Round play_circle icon -- `rgba(12,13,13,.72)` bg, white text, border `rgba(255,255,255,.32)`, backdrop-filter blur(14px), gap 10px **Dashboard iframe** (`.dash`): - Positioned absolutely via CSS custom properties: `--dash-w: 670px`, `--dash-x: 59%`, `--dash-y: 55px` - border-radius 16px, box-shadow `0 40px 90px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06)` - Contains iframe to `assets/dashboard-orchestrator.html`, aspect-ratio 1456/1138 **Reveal animations** (triggered by JS on load): - `.reveal` elements start with `opacity:0; transform:translateY(22px)` and transition with `.8s cubic-bezier(.2,.7,.2,1)` - Dashboard reveal starts with `translateX(46px) scale(.985)` - Staggered delays: nav 0s, h1 .12s, subtitle .26s, CTA .4s, dashboard .5s - Handles visibility state: if page loads hidden, snaps content instantly then animates on visibility change **Responsive (max-width 860px):** - Hide nav links, h1 to 42px, hero min-height auto, hero-copy padding reduced - Dashboard becomes relative positioned, full width, border-radius 14px **Responsive (max-width 1100px):** - h1 to 54px --- ### DESKTOP FOOTER - Transparent background with frosted glass `::after` pseudo-element: `backdrop-filter: blur(12px) saturate(120%)`, gradient from `rgba(10,12,11,.38)` to `rgba(10,12,11,.80)`, `box-shadow: inset 0 1px 0 rgba(255,255,255,.18)`, border-radius 22px 22px 0 0 - `margin-top: -120px` to overlap hero, `border-top: 1px solid rgba(255,255,255,.14)`, border-radius 22px 22px 0 0 **Top grid** (4 columns: `1.1fr 1fr 1fr 1.5fr`, gap 30px, padding 72px top 64px bottom): Columns 1-3 are link lists: - **Product:** Workflow builder, AI automations, Smart forms, Data connections, Internal apps - **Resources:** Mobile, Manifesto, Press, Docs, Pricing - **Company:** About, Blog, Careers, Customers - Column headers: 13px, uppercase, letter-spacing .08em, color `rgba(255,255,255,.45)`, weight 600 - Links: 16px, color `rgba(255,255,255,.82)`, gap 14px. Hover: color #fff, translateX(2px) Column 4 (`.fbrand`): - Brand logo (28x28) + "Highframe" (23px) - Description: "Skip the dev queue. Build internal workflows, smart forms, and automations without code." -- 17px, line-height 1.5, color `rgba(255,255,255,.7)`, max-width 330px - **Waitlist form** (pill shape): flex row, `rgba(255,255,255,.08)` bg, border `rgba(255,255,255,.16)`, border-radius 999px, padding 6px 6px 6px 20px, max-width 440px, backdrop-filter blur(8px), inset box-shadow - Mail icon SVG (17x17) + email input (15.5px) - Submit button: white bg, `#0c0d0d` text, 999px radius, padding 12px 20px, 15px weight 600 **Bottom bar** (border-top `rgba(255,255,255,.12)`, flex space-between, padding 26px top 38px bottom): - Left: "(c) 2026 Highframe. All rights reserved." -- 14.5px, color `rgba(255,255,255,.55)` - Center: Social icons (X/Twitter, LinkedIn, GitHub) -- SVG 18x18, color `rgba(255,255,255,.6)`, gap 22px. Hover: color #fff, translateY(-2px) - Right: "Privacy Policy", "Terms of Use", "Cookie Policy" -- 14.5px, color `rgba(255,255,255,.6)`, gap 28px **Responsive (max-width 860px):** - Grid becomes 2 columns, brand spans full width, bottom stacks vertically --- ### MOBILE HERO SECTION Wrapped in `.phone` container (max-width 430px, centered, min-height 100dvh, bg #000). **Layout:** `.hero` section, min-height 100dvh, flexbox column, padding-bottom 28px, isolation isolate. **Lime glow:** `::after` pseudo-element -- radial gradient of `rgba(199,239,107,.18)`, 280px circle, centered bottom 12%, blur 22px. **Nav** (flex space-between, padding 26px 22px 0, z-index 10): - Left: brand logo (24x24) + "Highframe" (18px, weight 600) - Right: hamburger button (42x42, rounded 11px, border `rgba(255,255,255,.22)`, bg `rgba(0,0,0,.28)`, backdrop-filter blur(12px), three 18px wide / 1.4px tall white bars, gap 5px) **Hero body** (flex column, center aligned, text-align center, padding 32px 22px 38px, z-index 5): - **Badge** (hidden by default via `display:none`): pill with green dot (7px, `var(--lime)` with glow), "AI-Powered Workflow", frosted glass style - **h1:** EB Garamond, `clamp(44px, 12vw, 58px)`, line-height 1, letter-spacing -.025em, max-width 9ch, text-shadow `0 10px 30px rgba(0,0,0,.35)`. `` styled with `color: var(--lime)` and italic - **Subtitle:** 16px, line-height 1.62, color `rgba(255,255,255,.76)`, max-width 31ch - **CTA stack** (flex column, gap 11px, max-width 340px): - Primary: "Start Free Trial" -- `var(--paper)` bg, `var(--ink)` text, 58px height, 18px radius, 15.5px weight 600. Active: scale(.975) opacity .9 - Ghost: "Watch Demo" with play circle SVG icon -- `rgba(12,13,13,.78)` bg, border `rgba(255,255,255,.30)`, backdrop-filter blur(14px) **Dashboard preview** (`.hero-preview`): - Perspective 3D card: `perspective(1400px) rotateX(17deg) rotateY(-8deg) rotateZ(1deg) translateY(10px)` - Width `min(88vw, 368px)`, border-radius 32px, padding 10px - Multi-layered gradient background simulating glass edge lighting - Complex box-shadows for depth - `::before` adds highlight gradients, `::after` adds colored glow beneath - Contains `.preview-shell` with iframe to `dashboard-orchestrator.html` (aspect-ratio 1456/1138) - **Float animation:** 6.5s ease-in-out infinite, subtle rotation/translate changes at 50% keyframe - Shell has frosted glass styling with gradient borders via mask technique **Responsive (max-height 760px):** hero-body justify-content flex-end, h1 clamped smaller **Reveal animations:** `.r` class, `opacity 0 -> 1`, `translateY(20px) -> none`, .75s `cubic-bezier(.16,1,.3,1)`. Hero items animate immediately, footer items use IntersectionObserver (threshold 0.08). Staggered delays from 0s to .46s. --- ### MOBILE FOOTER Class `.foot`, bg #000, border-top `rgba(255,255,255,.13)`, border-radius 26px 26px 0 0, padding 54px 22px 44px. Shimmer `::after`: 1px height, horizontal gradient of white at center fading to transparent at edges. Box-shadow: `0 1px 0 rgba(255,255,255,.10) inset, 0 -1px 0 rgba(0,0,0,.28) inset` **Elements in order:** 1. **Mail icon circle** (58px, centered, frosted glass pill `rgba(255,255,255,.13)` bg, border `rgba(255,255,255,.30)`, glow box-shadow) 2. **Heading:** "Skip the dev queue" -- EB Garamond, 38px, weight 400, centered, line-height 1.08, letter-spacing -.015em 3. **Subtitle:** "Build internal workflows, smart forms, and automations without code." -- 15px, line-height 1.55, color `rgba(210,195,210,.72)`, centered 4. **Email form:** - Input: 52px height, `rgba(255,255,255,.06)` bg, border `rgba(255,255,255,.20)`, 14px radius, 15px font, backdrop-filter blur(10px). Focus: brighter border + glow ring - Button: "Sign up for waitlist" + arrow SVG -- 52px height, `var(--paper)` bg, `var(--ink)` text, 14px radius, 15.5px weight 600, box-shadow `0 10px 36px -14px rgba(255,255,255,.38)` 5. **Accordion** (4 sections: Product, Resources, Company, Legal): - Trigger: 16px, weight 500, color `rgba(235,220,230,.86)`, flex with chevron SVG - Chevron rotates 180deg on open, .26s cubic-bezier(.4,0,.2,1) - Body: max-height 0 -> 300px transition, links 15px color `rgba(255,255,255,.6)` - Same link lists as desktop (Product: 5 items, Resources: 5 items, Company: 4 items, Legal: Privacy Policy, Terms of Use, Cookie Policy) - Only one accordion open at a time (JS closes others on toggle) 6. **Social buttons** (centered row, gap 10px): - X/Twitter, LinkedIn, GitHub -- 46px circles, border `rgba(255,255,255,.18)`, bg `rgba(255,255,255,.04)`, color `rgba(215,190,210,.72)`, backdrop-filter blur(8px) - Hover: brighter bg/border/color + glow shadow 7. **Brand lockup card:** frosted glass card (18px radius, `rgba(255,255,255,.07)` bg, border `rgba(255,255,255,.16)`, backdrop-filter blur(14px)), logo (22x22) + "Highframe" (20px) + "(c) 2026 Highframe. All rights reserved." (13px, color `rgba(255,255,255,.38)`) Reveal stagger delays: mail icon 0s, heading .07s, subtitle .13s, form .19s, accordion .25s, socials .37s, brand .43s. --- ### REACT APP (App.jsx) Simple responsive switcher: - Uses `window.matchMedia` to detect mobile (<768px) - Renders a full-viewport iframe pointing to either `/desktop/index.html` or `/mobile/index.html` - Switches iframe key on breakpoint change ### KEY IMPLEMENTATION NOTES - All CSS is inline in `

VEKTIS LAB

Platform Outcomes Research Deploy

Platform Outcomes Research Deploy
Request demo

Tracing ®
the unseen

We distill fragmented data into sharp awareness, arming operators with live context to detect and neutralize with accuracy.

RISK SURFACE

CRITICAL

CAPTURED EVENTS:

187,941

VERIFIED ANOMALY FLAGGED . /

2f:T2dda,Create a 3x2 grid of 6 social media post cards (384px x 384px each, 16px gap) centered on the page. Every card has 12px rounded corners and overflow-hidden. Background image: Download this image and save it as public/bg.jpeg, then set it as the full-page background with background-size: cover, background-position: center, background-repeat: no-repeat on the outermost container. The container should be min-h-screen, flexbox centered, and allow overflow scrolling. Image URL: https://media.cleanshot.cloud/media/21620/LCl5ZplnQ16cj11YhT3EoWIj6Tfpndn3OEd9I1e4.jpeg?Expires=1775649006&Signature=n3nir~OV2wZrAh~Yw8rkuVkFKm0gABTt8LqemBwvbCWoeMbn4-fcW~FEbzlhutQ7k9i9EZWqNRW4~XSoX6QnyzBv6MzFCfc0gEuKGOI6Bb7bD-ExdwZKuGDGIqRuwG7fRSHfVrl4HimKHJt9zj~NeY6-evt6HjBdEmb4sA5mWOefxDqMfWZZrUZseo0PxYnnggxHvzcdfclviUMo~A-mH8qa9MgqcRWWAp-sk6t8qM8UP0MvWkOCKFzD1-yAm4UUmy2RHtp9UiD2LFk47SjZV~4OQN~4Ogm30DBe74mkFR0-~RkPLb-M3z3UVlUNhScSI1LmMCfiK5JptwlCmFflRA__&Key-Pair-Id=K269JMAT9ZF4GZ GOOGLE FONTS (load all in index.html via single link): Anton (used as font-grotesk in Tailwind) Condiment (used as font-condiment) Barlow weights 300-700 (used as font-barlow) Instrument Serif regular + italic (used as font-instrument) Inter weights 400-700 (used as font-inter) Poppins weights 300-700 (used as font-poppins) Source Serif 4 regular + italic weights 400-600 (used as font-source-serif) Tailwind config -- extend fontFamily with these mappings: grotesk -> "Anton", sans-serif condiment -> "Condiment", cursive barlow -> "Barlow", sans-serif instrument -> "Instrument Serif", serif inter -> "Inter", sans-serif poppins -> "Poppins", sans-serif source-serif -> "Source Serif 4", serif GLOBAL CSS (index.css) -- custom animations and classes: @keyframes fadeInUp -- from opacity:0, translateY(30px) to opacity:1, translateY(0). Class .animate-fade-in-up uses it at 0.6s ease-out forwards. @keyframes fadeInOverlay -- from opacity:0 to opacity:1. Class .animate-fade-in-overlay uses it at 0.4s ease-out forwards. @keyframes fade-rise -- from opacity:0, translateY(24px) to opacity:1, translateY(0). Three classes: .animate-fade-rise -- 0.8s ease-out both (no delay) .animate-fade-rise-delay -- 0.8s ease-out 0.2s both .animate-fade-rise-delay-2 -- 0.8s ease-out 0.4s both .liquid-glass -- background: rgba(255,255,255,0.01), background-blend-mode: luminosity, backdrop-filter: blur(4px), no border, box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), position relative, overflow hidden. Has a ::before pseudo-element that creates a thin gradient border effect using mask-composite: exclude with a padding: 1.4px gradient border going from rgba(255,255,255,0.45) at top/bottom to transparent in the middle. .liquid-glass-strong -- Same concept but with 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). Its ::before uses slightly stronger white values (0.5 at edges, 0.2 at 20%/80%). CARD 1 (top-left) -- "Simplify Your Work With AI" Black background, 384x384, 12px rounded corners, p-7, flex column justify-between Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260407_080531_1fe9b14c-9396-4b78-9372-42f4ddbd74c7.mp4 Positioned absolute top-0 right-0, height 75%, object-cover, horizontally flipped via transform: scaleX(-1), pointer-events-none, autoPlay loop muted playsInline Gradient overlay: absolute inset-0, bg-gradient-to-t from-black via-black/40 to-transparent Top content (z-10): Row: Lucide Sparkles icon (w-4 h-4, amber-400) + text "The Future Is Now" in font-condiment, amber-400, text-sm, tracking-wide, with mb-3 and gap-1.5 Heading: font-grotesk (Anton), white, 32px, leading 1.05, uppercase, tracking-tight. Three lines: "Simplify" / "Your Work" / "With AI" (last line in amber-400) Bottom content (z-10): Paragraph: font-mono, white/60, 10px, leading-relaxed, mb-4. Text: "Automate repetitive tasks, generate content in seconds, and let intelligent tools handle the heavy lifting -- so you can focus on what truly matters." Row with justify-between: Left: circle (w-7 h-7, rounded-full, bg-amber-400/20) containing Lucide Zap (w-3.5 h-3.5, amber-400) + label "AI Powered" in font-mono, white/40, 8px, uppercase, tracking-widest Right: pill button (bg-white/10, rounded-full, px-3.5 py-1.5, backdrop-blur-sm) with text "Learn More" in font-grotesk white 10px uppercase tracking-wide + Lucide ArrowRight (w-3.5 h-3.5 white) CARD 2 (top-center) -- "Your Insights. One Clear Overview." Black background, 384x384, 12px rounded corners Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4 Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline Gradient overlay z-[1]: bg-gradient-to-t from-black via-black/60 to-black/80 Content (z-10, flex column, h-full, justify-between, p-7): Top section: Pill badge using .liquid-glass class, rounded-lg, px-3 py-1.5, inline-flex, gap-2, mb-5, with .animate-fade-rise: Inner white label: bg-white text-black rounded-md 7px font-medium px-1.5 py-0.5, text "New" Text: "Say Hello to Corewave v3.2" in 7px font-medium white/60 font-inter Heading: font-inter font-medium, white, 36px, leading 1.05, tracking -1.5px, .animate-fade-rise-delay. Text: "Your Insights." / "One Clear " then "Overview." in font-instrument italic font-normal text-white/80 Paragraph: font-inter, color #d4d8e8, 8.5px, leading-relaxed, max-w 240px, mt-3, opacity-90, .animate-fade-rise-delay-2. Text: "Neuralyn helps teams track metrics, goals, and progress with precision." Bottom section (.animate-fade-rise-delay-2): Row: "Neuralyn" in font-inter white/30 9px font-semibold tracking-tight, then a 1px gradient divider line (from-white/15 to-transparent, flex-1), then "Analytics" in font-inter white/20 7px tracking-widest uppercase CARD 3 (top-right) -- "Work Smarter. Move Faster. AI Powers You Up." White background, 384x384, 12px rounded corners, font-inter Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260330_153826_e9005cf7-a1c7-4c7d-886f-fea22d644a9c.mp4 Absolute inset-0, full width/height, object-cover, pointer-events-none, pt-[140px] (pushes video down), autoPlay loop muted playsInline White fade overlay: absolute, left-0 right-0, top: 140px, height: 120px, linear-gradient(to bottom, white 0%, transparent 100%), z-10 Content (z-20, flex column, h-full): Top area (flex-1, flex column, items-center, justify-start, pt-10, text-center, px-5): Logo row (.animate-fade-in-up, animationDelay 0.1s, initial opacity 0): Lucide Star (w-3 h-3, fill-black) + "Stellar.ai" in 8px font-medium black Heading (.animate-fade-in-up, delay 0.2s, initial opacity 0): 30px font-normal, leading 1.08, tracking-tight, mb-2.5. Text: "Work Smarter." / "Move Faster." / "AI Powers You Up." where last line has bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent Paragraph (.animate-fade-in-up, delay 0.3s, initial opacity 0): 9px, text-gray-500, leading-relaxed, max-w 240px. Text: "Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time." Bottom section (flex column, items-center, gap-2, pb-4, .animate-fade-in-up, delay 0.4s, initial opacity 0): Small pill: rounded-full, px-2.5 py-0.5, 7px font-medium, text-white, backdrop-blur-md bg-white/15 border border-white/20. Text: "Collaborating with top aerospace pioneers globally" Row of 5 brand names: ['Aeon', 'Vela', 'Apex', 'Orbit', 'Zeno'] each in text-base italic text-white tracking-tight with fontFamily: 'Georgia, serif', spaced with gap-5 CARD 4 (bottom-left) -- "Focus in a Distracted World" Black background, 384x384, 12px rounded corners Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4 Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline Gradient overlay z-[1]: bg-gradient-to-t from-black/70 via-transparent to-transparent Content (z-10, flex column, h-full, justify-end, px-6, pb-7): Heading: font-instrument, white, 32px, leading 0.95, tracking-tight, .animate-fade-rise. Text: "Focus in a" / "Distracted World" Paragraph: font-inter, white/70, 8px, leading-relaxed, max-w 220px, mt-3, .animate-fade-rise-delay. Text: "Designing tools for deep thinkers, bold creators, and quiet rebels. Digital spaces for sharp focus and inspired work." Brand: font-instrument, white/25, 10px, tracking-tight, mt-4, .animate-fade-rise-delay-2. Text: "Velorah" with a ^{registered trademark symbol at 5px
CARD 5 (bottom-center) -- "Beyond silence, we build the eternal."

White background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4
Positioned in a container: absolute left-0 right-0 bottom-0, top: 140px. Video fills that container, object-cover. NOT looping -- uses a custom fade effect via React useRef/useEffect:
FADE_DURATION = 0.5 seconds
A requestAnimationFrame loop checks currentTime: if within first 0.5s, fade opacity up from 0; if within last 0.5s, fade opacity down to 0; else opacity 1
On ended event: set opacity to 0, wait 100ms, reset to beginning and play again
Video starts with style={{ opacity: 0 }}, autoPlay muted playsInline (no loop)
Complex white overlay (z-[1], absolute inset-0, pointer-events-none): linear-gradient(to bottom, white 0%, white 20%, transparent 45%, transparent 65%, white 90%, white 100%)
Content (z-10, flex column, items-center, justify-center, h-full, text-center, px-5):
Heading: font-instrument, 34px, leading 0.95, tracking-tight (-0.8px letterSpacing), black, .animate-fade-rise. Text: "Beyond " then "silence," in #6F6F6F / "we build " then "the eternal." in #6F6F6F
Paragraph: font-inter, #6F6F6F, 8px, leading-relaxed, max-w 230px, mt-3, .animate-fade-rise-delay. Text: "Platforms for deep thinkers and fearless makers. Digital havens for focused work and pure creative flow."
Brand: font-instrument, 10px, black/30, mt-5, tracking-tight, .animate-fade-rise-delay-2. Text: "Aethera" with ^{registered trademark at 5px
CARD 6 (bottom-right) -- "Innovating the spirit of bloom"

Black background, 384x384, 12px rounded corners
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
Absolute inset-0, full width/height, object-cover, z-0, autoPlay loop muted playsInline
Gradient overlay z-[1]: bg-gradient-to-t from-black/80 via-black/20 to-black/40
Content (z-10, flex column, h-full, justify-between, p-6):
Top: Row with Lucide Sparkles (w-3.5 h-3.5, white/50) + text "AI-Powered Floral Design" in font-poppins, white/50, 9px, font-medium, uppercase, tracking [0.2em]
Bottom section:
Heading: font-poppins font-medium, white, 38px, leading 0.95, tracking -0.05em, .animate-fade-rise. Text: "Innovating the" / then "spirit of" in font-source-serif italic font-medium white/80, followed by " bloom"
Paragraph: font-poppins, white/50, 8px, leading-relaxed, max-w 200px, mt-3, .animate-fade-rise-delay. Text: "Where artificial intelligence meets nature's artistry. Sculpting living compositions beyond imagination."
Two pills (mt-4, gap-2, .animate-fade-rise-delay-2): each uses .liquid-glass class, rounded-full, px-3 py-1, 7px, white/80, font-poppins. Labels: "AI Generation" and "3D Structures"
LAYOUT (App.tsx):
The outer div has the background image and centering. The inner div uses display: grid, gridTemplateColumns: repeat(3, 384px), gap: 16px, shrink-0. Cards are placed in order: CardOne, CardTwo, CardThree, CardFour, CardFive, CardSix.30:T11d3,Build a full-width "Features" section on a pure black (#000) background using TanStack Start (route file src/routes/index.tsx) and Tailwind CSS v4 (tokens in src/styles.css). Match the following spec exactly.

Global setup (src/styles.css)

Set body background to #000, text color #fff, and font-family to "Helvetica Neue", Helvetica, Arial, sans-serif.
Add a .liquid-glass button class with this exact CSS:

.liquid-glass {
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;
}
.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;
}
Add card classes (both same color, plain #252B4C, rounded 1.25rem, position: relative; overflow: hidden;):

.feature-card,
.feature-card-dark {
background: #252B4C;
border-radius: 1.25rem;
position: relative;
overflow: hidden;
}
Components

LiquidButton: a

9:41

Search

All

Vegan

Protein

Snacks

Drinks

Trending recipes
See All

36:Tb3b,Build a high-end, responsive Hero Section for a personal portfolio website using React and Tailwind CSS. The design should feel bold, modern, and energetic.

1. Global Styles & Theme:

Background: A vertical gradient from a vibrant red-orange [#fd2601] at the top to a lighter orange [#f37e1c] at the bottom.

Typography:
Headlines: Use the font "Anton" (or a similar heavy, condensed sans-serif). Text should be massive, uppercase, and tracking wide.

Body/UI: Use "Inter" or a clean sans-serif. Minimalist, uppercase, and legible.

Colors: All text and icons should be White.

Selection State: When user selects text, make the background White and text Orange [#fd2601].

2. Ambient Background Elements:

Place a large, faint SVG text or pattern (like the name "OLIVIA") in the absolute background. It should be centered, white, very low opacity (0.08), and blurred (4px).

Add glowing "blobs" behind the main content:

One bottom-right (300x300px, #F4791B, blur 80px).

One bottom-left (600x300px, #F4791B, blur 80px).

Use mix-blend-screen and opacity-60 for these blobs to make them blend beautifully.

3. Navigation Bar (Floating Top):

Position: Absolute top, full width, transparent background.

Left: Text logo "✱ VIKTORODDY" (Sans-serif, tracking wide).

Center (Desktop only): Links [PROJECTS, BLOG, ABOUT, RESUME]. Hover effect: opacity-80.

Right: A "HIRE ME" CTA.

Format: Text // HIRE ME followed by a circular button (white border) containing a diagonal arrow icon.

Hover: The circle fills white, icon turns orange.

4. Main Hero Content (Centered):

Headline: The text "NEW DESIGN ERA".

Desktop: Display on one line (or slightly wrapped), font size ~12vw (max 180px), z-index: 10.

Mobile: Stack vertically: "NEW" / "DESIGN" / "ERA".

Central Image: Place a portrait image of a person absolutely centered over the headline. CRITICAL: Apply a CSS Mask (paint brush stroke shape) to the image so it looks like a rough cutout, not a rectangle. The image should overlap the text, creating depth (z-index: 20).

Floating Elements (Desktop):

Bottom-Left: Intro text: "// I'm Olivia — a freelance UI/UX designer..." indented with a clean hierarchy.

Right-Middle: Tagline: "// DESIGN THAT [newline] SPEAKS YOUR BRAND". Text aligned right.

Mobile Layout: Move the floating elements below the main image/text stack so they don't overlap.

5. Footer / Brand Strip:

A row of white, semi-transparent (opacity-90) logos at the bottom (e.g., Gucci, Zara, Vogue, Sony, Zalora).

Desktop: Spread evenly across the width.

Mobile: Wrap them nicely in the center.

Technical Requirements:

Use flexbox for layout alignment.

Ensure the image is pointer-events-none so it doesn't block text selection.

Make it fully responsive: The massive text must scale down on mobile, and the layout must shift from absolute positioning (Desktop) to stacked block layout (Mobile).8:["$","$L22",null,{"activeCategory":"$undefined","items":[{"category":"sites","id":212,"media":[{"id":244,"alt":"Network Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:21.145Z","createdAt":"2026-08-13T11:42:21.145Z","url":"/api/media/file/sites-0218-01.webp","thumbnailURL":"/api/media/file/sites-0218-01-300x221.webp","filename":"sites-0218-01.webp","mimeType":"image/webp","filesize":946688,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0218-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":396140,"filename":"sites-0218-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0218-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":766678,"filename":"sites-0218-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0218-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":914654,"filename":"sites-0218-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":472,"prompt":"$23","title":"Network Hero"},{"category":"sections","id":399,"media":[{"id":436,"alt":"Global CTA Footer","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:54.132Z","createdAt":"2026-08-13T14:05:54.131Z","url":"/api/media/file/sections-0031-01.webp","thumbnailURL":"/api/media/file/sections-0031-01-300x216.webp","filename":"sections-0031-01.webp","mimeType":"image/webp","filesize":1098184,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0031-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":429424,"filename":"sections-0031-01-300x216.webp"},"square":{"url":"/api/media/file/sections-0031-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1049834,"filename":"sections-0031-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0031-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":1098880,"filename":"sections-0031-01-600x431.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":469,"prompt":"$24","title":"Global CTA Footer"},{"category":"sections","id":400,"media":[{"id":437,"alt":"NexaCore Results","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:55.663Z","createdAt":"2026-08-13T14:05:55.663Z","url":"/api/media/file/sections-0030-01.webp","thumbnailURL":"/api/media/file/sections-0030-01-300x218.webp","filename":"sections-0030-01.webp","mimeType":"image/webp","filesize":50818,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0030-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":8446,"filename":"sections-0030-01-300x218.webp"},"square":{"url":"/api/media/file/sections-0030-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":44194,"filename":"sections-0030-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0030-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":43232,"filename":"sections-0030-01-600x437.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":468,"prompt":"$25","title":"NexaCore Results"},{"category":"sites","id":213,"media":[{"id":245,"alt":"Cybersecurity Hero v2","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:31.304Z","createdAt":"2026-08-13T11:42:31.304Z","url":"/api/media/file/sites-0217-01.webp","thumbnailURL":"/api/media/file/sites-0217-01-300x222.webp","filename":"sites-0217-01.webp","mimeType":"image/webp","filesize":926492,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0217-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":315088,"filename":"sites-0217-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0217-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":770166,"filename":"sites-0217-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0217-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":809530,"filename":"sites-0217-01-600x444.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":467,"prompt":"$26","title":"Cybersecurity Hero v2"},{"category":"sections","id":401,"media":[{"id":438,"alt":"Bento Grid Stats","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:57.546Z","createdAt":"2026-08-13T14:05:57.546Z","url":"/api/media/file/sections-0029-01.webp","thumbnailURL":"/api/media/file/sections-0029-01-300x216.webp","filename":"sections-0029-01.webp","mimeType":"image/webp","filesize":216374,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0029-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":72124,"filename":"sections-0029-01-300x216.webp"},"square":{"url":"/api/media/file/sections-0029-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":189202,"filename":"sections-0029-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0029-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":205548,"filename":"sections-0029-01-600x431.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":464,"prompt":"$27","title":"Bento Grid Stats"},{"category":"sections","id":402,"media":[{"id":439,"alt":"Mouse Trail CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:59.365Z","createdAt":"2026-08-13T14:05:59.365Z","url":"/api/media/file/sections-0028-01.webp","thumbnailURL":"/api/media/file/sections-0028-01-300x237.webp","filename":"sections-0028-01.webp","mimeType":"image/webp","filesize":179364,"width":640,"height":506,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0028-01-300x237.webp","width":300,"height":237,"mimeType":"image/webp","filesize":75074,"filename":"sections-0028-01-300x237.webp"},"square":{"url":"/api/media/file/sections-0028-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":178102,"filename":"sections-0028-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0028-01-600x474.webp","width":600,"height":474,"mimeType":"image/webp","filesize":167396,"filename":"sections-0028-01-600x474.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":455,"prompt":"$28","title":"Mouse Trail CTA"},{"category":"sites","id":214,"media":[{"id":246,"alt":"Orbis Hello","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:40.019Z","createdAt":"2026-08-13T11:42:40.019Z","url":"/api/media/file/sites-0216-01.webp","thumbnailURL":"/api/media/file/sites-0216-01-300x220.webp","filename":"sites-0216-01.webp","mimeType":"image/webp","filesize":1277542,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0216-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":507750,"filename":"sites-0216-01-300x220.webp"},"square":{"url":"/api/media/file/sites-0216-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1137368,"filename":"sites-0216-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0216-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":1232308,"filename":"sites-0216-01-600x441.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":452,"prompt":"$29","title":"Orbis Hello"},{"category":"sites","id":215,"media":[{"id":247,"alt":"Interactive Discovery","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:47.777Z","createdAt":"2026-08-13T11:42:47.777Z","url":"/api/media/file/sites-0215-01.webp","thumbnailURL":"/api/media/file/sites-0215-01-300x222.webp","filename":"sites-0215-01.webp","mimeType":"image/webp","filesize":1218062,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0215-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":396856,"filename":"sites-0215-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0215-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1060864,"filename":"sites-0215-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0215-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":1191562,"filename":"sites-0215-01-600x444.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":450,"prompt":"$2a","title":"Interactive Discovery"},{"category":"sites","id":216,"media":[{"id":248,"alt":"Futuristic Cinematic","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:54.474Z","createdAt":"2026-08-13T11:42:54.474Z","url":"/api/media/file/sites-0214-01.webp","thumbnailURL":"/api/media/file/sites-0214-01-300x221.webp","filename":"sites-0214-01.webp","mimeType":"image/webp","filesize":725892,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0214-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":285564,"filename":"sites-0214-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0214-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":782304,"filename":"sites-0214-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0214-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":716066,"filename":"sites-0214-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":449,"prompt":"$2b","title":"Futuristic Cinematic"},{"category":"sites","id":217,"media":[{"id":249,"alt":"Financial Suite","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:54.537Z","createdAt":"2026-08-13T11:42:54.537Z","url":"/api/media/file/sites-0213-01.mp4","thumbnailURL":null,"filename":"sites-0213-01.mp4","mimeType":"video/mp4","filesize":1353721,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":446,"prompt":"$2c","title":"Financial Suite"},{"category":"sections","id":403,"media":[{"id":440,"alt":"Apex Program Accordion","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:01.383Z","createdAt":"2026-08-13T14:06:01.383Z","url":"/api/media/file/sections-0027-01.webp","thumbnailURL":"/api/media/file/sections-0027-01-300x222.webp","filename":"sections-0027-01.webp","mimeType":"image/webp","filesize":110076,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0027-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":40832,"filename":"sections-0027-01-300x222.webp"},"square":{"url":"/api/media/file/sections-0027-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":127568,"filename":"sections-0027-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0027-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":114702,"filename":"sections-0027-01-600x444.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":442,"prompt":"$2d","title":"Apex Program Accordion"},{"category":"sites","id":218,"media":[{"id":250,"alt":"Cybersecurity","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:54.579Z","createdAt":"2026-08-13T11:42:54.579Z","url":"/api/media/file/sites-0212-01.mp4","thumbnailURL":null,"filename":"sites-0212-01.mp4","mimeType":"video/mp4","filesize":2634609,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":438,"prompt":"$2e","title":"Cybersecurity"},{"category":"sites","id":219,"media":[{"id":251,"alt":"Social Media Posts","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:54.661Z","createdAt":"2026-08-13T11:42:54.661Z","url":"/api/media/file/sites-0211-01.webp","thumbnailURL":"/api/media/file/sites-0211-01-300x248.webp","filename":"sites-0211-01.webp","mimeType":"image/webp","filesize":21618,"width":480,"height":396,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0211-01-300x248.webp","width":300,"height":248,"mimeType":"image/webp","filesize":11452,"filename":"sites-0211-01-300x248.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":437,"prompt":"$2f","title":"Social Media Posts"},{"category":"sites","id":220,"media":[{"id":252,"alt":"Nexora Features","caption":null,"folder":null,"updatedAt":"2026-08-13T11:42:54.738Z","createdAt":"2026-08-13T11:42:54.738Z","url":"/api/media/file/sites-0210-01.webp","thumbnailURL":"/api/media/file/sites-0210-01-300x217.webp","filename":"sites-0210-01.webp","mimeType":"image/webp","filesize":16814,"width":480,"height":348,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0210-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":9844,"filename":"sites-0210-01-300x217.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":435,"prompt":"$30","title":"Nexora Features"},{"category":"sites","id":221,"media":[{"id":253,"alt":"Global CTA Footer","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:02.605Z","createdAt":"2026-08-13T11:43:02.605Z","url":"/api/media/file/sites-0209-01.webp","thumbnailURL":"/api/media/file/sites-0209-01-300x216.webp","filename":"sites-0209-01.webp","mimeType":"image/webp","filesize":1098184,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0209-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":429424,"filename":"sites-0209-01-300x216.webp"},"square":{"url":"/api/media/file/sites-0209-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1049834,"filename":"sites-0209-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0209-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":1098880,"filename":"sites-0209-01-600x431.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":434,"prompt":"$31","title":"Global CTA Footer"},{"category":"sites","id":222,"media":[{"id":254,"alt":"Grow AI Talent Platform","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:02.974Z","createdAt":"2026-08-13T11:43:02.974Z","url":"/api/media/file/sites-0208-01.webp","thumbnailURL":"/api/media/file/sites-0208-01-300x215.webp","filename":"sites-0208-01.webp","mimeType":"image/webp","filesize":7770,"width":480,"height":344,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0208-01-300x215.webp","width":300,"height":215,"mimeType":"image/webp","filesize":4818,"filename":"sites-0208-01-300x215.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":433,"prompt":"$32","title":"Grow AI Talent Platform"},{"category":"sites","id":223,"media":[{"id":255,"alt":"Datacore Booking","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:03.073Z","createdAt":"2026-08-13T11:43:03.073Z","url":"/api/media/file/sites-0207-01.webp","thumbnailURL":"/api/media/file/sites-0207-01-300x208.webp","filename":"sites-0207-01.webp","mimeType":"image/webp","filesize":11728,"width":480,"height":332,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0207-01-300x208.webp","width":300,"height":208,"mimeType":"image/webp","filesize":7192,"filename":"sites-0207-01-300x208.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":432,"prompt":"$33","title":"Datacore Booking"},{"category":"sections","id":404,"media":[{"id":441,"alt":"Liquid Glass CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:06.388Z","createdAt":"2026-08-13T14:06:06.388Z","url":"/api/media/file/sections-0026-01.webp","thumbnailURL":"/api/media/file/sections-0026-01-300x218.webp","filename":"sections-0026-01.webp","mimeType":"image/webp","filesize":897622,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0026-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":351502,"filename":"sections-0026-01-300x218.webp"},"square":{"url":"/api/media/file/sections-0026-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":751484,"filename":"sections-0026-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0026-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":838546,"filename":"sections-0026-01-600x437.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":431,"prompt":"$34","title":"Liquid Glass CTA"},{"category":"apps","id":445,"media":[{"id":482,"alt":"AI Calorie Tracker","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.350Z","createdAt":"2026-08-13T14:07:27.350Z","url":"/api/media/file/apps-0441-01.mp4","thumbnailURL":null,"filename":"apps-0441-01.mp4","mimeType":"video/mp4","filesize":1347120,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":430,"prompt":"$35","title":"AI Calorie Tracker"},{"category":"sites","id":224,"media":[{"id":256,"alt":"Bold Portfolio Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:03.175Z","createdAt":"2026-08-13T11:43:03.175Z","url":"/api/media/file/sites-0206-01.webp","thumbnailURL":"/api/media/file/sites-0206-01-300x209.webp","filename":"sites-0206-01.webp","mimeType":"image/webp","filesize":11548,"width":480,"height":334,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0206-01-300x209.webp","width":300,"height":209,"mimeType":"image/webp","filesize":7700,"filename":"sites-0206-01-300x209.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":429,"prompt":"$36","title":"Bold Portfolio Hero"}],"page":15,"query":"","totalDocs":455,"totalPages":23}]}}

Tracing ®
the unseen

Great Questions Unearth
Hidden Gems

Where Knowledge Begins

Your food, decoded by AI

Tracing ® the unseen

Great Questions UnearthHidden Gems

Where Knowledge Begins

Your food, decoded by AI

Tracing ®
the unseen

Great Questions Unearth
Hidden Gems