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: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 `

Global CTA Footer

Grow AI Talent Platform

Datacore Booking

Bold Portfolio Hero

Portfolio About

Prisma Creative Studio

NexaCore Control

Beauty Products

Stillmind

Immersive Studio

AI Workflow Hero

Nexto 404

xPortfolio Hero

SkyElite Private Jets

Stark Minimal Footer

Stellar AI

Keep Ahead Features

Max Reed Portfolio

Velorah Focus

Solar Energy Hero