NovaPay - One Globe, One Future

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:T1ae1,Build a mobile movie app UI showcase called "Cineva Mobile UI" using React + TypeScript + Vite + Tailwind CSS + Lucide React icons. The page displays a single centered iPhone mockup (375x780px) on a white background. No routing, no database -- purely a visual UI with interactive card swiping. --- ## TECH STACK - React 18, TypeScript, Vite, Tailwind CSS 3.4, Lucide React for icons - Font: Google Fonts "Inter" weights 300-900 applied globally via `* { font-family: 'Inter', sans-serif; }` - No additional UI libraries --- ## LAYOUT STRUCTURE **Outer wrapper:** Full viewport (`h-screen w-screen`), `bg-white`, flex centered. **Phone frame:** Fixed 375x780px, border-radius 52px, overflow hidden. Uses a custom `.phone-frame` class with layered box-shadows to simulate a real device bezel: ```css .phone-frame { border-radius: 52px; box-shadow: 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); } ``` **Dynamic Island:** Absolute positioned pill at top center, 126x34px, bg-black, rounded-full, z-100. --- ## BACKGROUND Behind all content inside the phone: the current front card image rendered at full size with `scale-110 blur-[40px] brightness-50`, overlaid with `bg-black/30`. --- ## FOLDER-TAB NAVIGATION (top) A two-level tab system with staggered fade-up animation (class `animate-stagger-1`, 0.1s delay): - **Left tab** (outside the black area): "Premieres" - text-[11px], font-medium, px-5 py-2.5, white/40 when inactive, white when active. - **Main black tab area** with `rounded-tl-[28px] rounded-tr-[28px]`, bg-black, py-4 px-1, containing: - A CSS radial-gradient connector div positioned at `-left-7 bottom-0` (28x28px): `radial-gradient(circle at 0% 0%, transparent 28px, #000 28px)` -- creates the smooth curve joining the tab to the content below. - "In Theaters" button (left, text-[12px], font-medium) - "Upcoming" button (right, ml-auto, with ChevronRight icon size 12) --- ## CONTENT AREA Below the tabs: `bg-black rounded-tl-[28px]` (pure black, only top-left corner rounded). Contains: ### Date display (animate-stagger-2, 0.2s delay): - Centered, `text-[58px] font-extrabold leading-none tracking-tight` in white - Format: "05" in full white, "JUL" in `text-white/80 font-bold` ### Card Stack (animate-stagger-3, 0.35s delay with scale animation): - Container uses `perspective: 1200px` - Shows 4 cards stacked, each absolute positioned filling the container with `border-radius: 20px` - Stack offsets: each card behind gets `translateY(-24px * position)`, `scale(1 - 0.05 * position)` - Opacity: front=1, second=0.85, third=0.6, fourth=0.4 - Front card has draggable pointer events (swipe down to dismiss) - SWIPE_THRESHOLD = 80px. Dragging adds `translateY(dragY) rotate(dragY * 0.015deg)` and fades opacity - On release past threshold: plays `cardDropOut` animation (0.48s) then rotates card order **Card drop animation:** ```css @keyframes cardDropOut { 0% { transform: translateY(var(--drop-start-y)) scale(1) rotate(var(--drop-start-rot)); opacity: var(--drop-start-opacity); } 60% { opacity: 0.3; } 100% { transform: translateY(130%) scale(0.8) rotate(8deg); opacity: 0; } } ``` **Front card overlays:** - Gradient overlay: `bg-gradient-to-t from-black/40 via-transparent to-transparent` - Top-left badges (flex column gap-2): - Clock icon (12px) + "2h 15m" -- bg-black rounded-full px-3 py-1.5, text-white/90 text-xs - Popcorn icon (12px) + "Sci-Fi" -- same styling --- ## BOTTOM NAVIGATION (animate-stagger-4, 0.5s delay with navSlideUp): Absolute bottom-6, centered. Uses `.liquid-glass` class: ```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; } ``` With a `::before` pseudo-element creating a gradient border effect using mask-composite. 4 nav items: Explore (LayoutGrid), Flicks (Film), Queue (Bookmark), Account (User) -- all size 20. Active item (default: index 1 "Flicks") shows white + label text. Inactive shows white/40. Rounded-full buttons with transition-all duration-300. --- ## STAGGERED ENTRANCE ANIMATIONS All use `cubic-bezier(0.16, 1, 0.3, 1)` easing with `both` fill-mode: | Class | Keyframes | Duration | Delay | |---|---|---|---| | `.animate-stagger-1` | staggerFadeUp (translateY 20px to 0) | 0.6s | 0.1s | | `.animate-stagger-2` | staggerFadeUp | 0.6s | 0.2s | | `.animate-stagger-3` | staggerFadeIn (scale 0.95 to 1) | 0.7s | 0.35s | | `.animate-stagger-4` | navSlideUp (translate -50%, 20px to -50%, 0) | 0.5s | 0.5s | --- ## IMAGE URLS (6 movie poster cards) ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105630_4428f039-9cd3-44a3-bb7f-15c28b0703f2.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105503_6f51b402-7feb-4a64-a154-bce55a4bff52.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105544_9e41e1d6-2da4-458f-99a5-8568241ab76b.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105558_d8ebccec-11f9-4445-8bae-f44e1117ca00.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105613_e3910ee6-0196-48a4-b1e3-2a2c16c721d0.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260705_105621_a97dd98e-cf52-4084-9977-2556ac4fc1fa.png&w=1280&q=85 ``` --- ## KEY IMPLEMENTATION DETAILS - Card order managed via `useState` initialized as `[0,1,2,3,4,5]` - On swipe dismiss: shift first element to end of array after animation completes (480ms timeout) - Pointer capture used on front card for reliable drag tracking - Only downward drag allowed (`Math.max(0, diff)`) - CSS custom properties (`--drop-start-y`, `--drop-start-rot`, `--drop-start-opacity`) pass dynamic values into the keyframe animation - `.stack-card` base transition: `transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1)` -- disabled during active drag on front card - All cards have `touch-action: none; user-select: none; will-change: transform, opacity` - Background image changes instantly when card order changes (shows current front card blurred)24:Te54,Build a full-screen hero section using React + Tailwind CSS + Vite. It must be fully mobile-responsive. **Fonts:** Load these Google Fonts in `index.html`: ``` Inter (weights: 400, 500, 600) — used as the body/primary font Instrument Serif (italic) — used for the italic accent word in the heading ``` Google Fonts link: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap` **CSS (index.css):** ```css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-serif-italic { font-family: 'Instrument Serif', serif; font-style: italic; } ``` **Layout structure (single full-viewport section):** 1. **Background video** — absolute positioned, covers the entire viewport using `object-cover`. Autoplays, muted, loops, playsInline. - Video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260624_052448_43259007-b7c4-4269-90bd-e3ab14e80075.mp4` 2. **Navbar** — absolute top, z-10, flex row with `justify-between`, padded `px-4 sm:px-6 lg:px-8 py-4`. Contains two pill-shaped groups: - **Left pill** (logo + nav links): `bg-black/40 backdrop-blur-xl rounded-full px-5 py-2.5 border border-white/10`. Contains: - A custom SVG logo (20x20, white fill) with this path: `M 256 192 C 256 227.346 227.346 256 192 256 L 0 256 L 0 64 C 0 28.654 28.654 0 64 0 L 256 0 Z M 128 192 L 192 192 L 192 128 L 128 128 L 128 64 L 64 64 L 64 128 L 128 128 Z` - Nav links (hidden on mobile, `hidden sm:flex`): "Work", "Gallery", "Plans", "Story" — white text-sm font-medium with hover:text-white/80 transition - **Right pill** (buttons): `bg-black/40 backdrop-blur-xl rounded-full px-2 py-1.5 border border-white/10`. Contains: - Ghost button: "Get Free" — white text, rounded-full, hover:bg-white/10 - Solid button: "Get a quote" — bg-white text-black, rounded-full, hover:bg-white/90 3. **Bottom gradient overlay** — absolutely positioned at bottom, `h-[60%]`, z-[5], pointer-events-none. Gradient: `bg-gradient-to-t from-black/80 via-black/40 to-transparent`. This provides text contrast. 4. **Bottom content area** — absolute bottom, z-10, padded `px-4 sm:px-6 lg:px-8 pb-8 sm:pb-12 lg:pb-16`. Flex layout: column on mobile, row on lg+ with items-end and justify-between. - **Left column** (max-w-3xl): - Badge pill: `bg-black/40 backdrop-blur-xl rounded-full px-3 py-1 mb-4 border border-white/10` containing: "Luminara * Creative Showcase" (the asterisk is a separate span in text-white/60) - Heading (h1): `text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium leading-[1.05] tracking-tight text-white` - Text: "Make ordinary ideas into captivating " - Last word "narratives." is wrapped in a span with class `font-serif-italic font-normal` (renders in Instrument Serif italic) - **Right column** (lg:max-w-sm lg:text-right): - Paragraph: "Design your ideal online presence, grow your client base while crafting pieces with love and soul." — `text-white/80 text-sm sm:text-base leading-relaxed` **Key design details:** - All pill elements use `bg-black/40 backdrop-blur-xl border border-white/10 rounded-full` - The gradient overlay covers the bottom 60% of the viewport and fades from solid black/80 upward to transparent - The section is `relative w-full h-screen overflow-hidden` - No other pages or routing needed — single section only - Tailwind config is default with no extensions25:T1599,Create a modern Hero Section web application using React (TypeScript), Tailwind CSS v4, motion/react, and lucide-react for icons. Implement the exact layout, CSS variables, mock data, and components as described below. 1. Global CSS & Typography (index.css) Configure Tailwind CSS and import two specific fonts: Inter: https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap SK Reykjavik Rounded Regular: https://db.onlinewebfonts.com/c/16e715573b2b3072037cf4ab26fc8bb8?family=SK+Reykjavik+Rounded+Regular Define standard CSS configurations: Make a @theme block defining --font-heading (SK Reykjavik) and --font-sans (Inter). Add a body block in @layer base that applies: font-sans antialiased text-[#202020] bg-[#F7F7F7]. 2. Mock Data & Types Define the following TypeScript interfaces and constants at the top of your App.tsx: An array of 4 Unsplash avatar URLs (AVATARS): https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=100&h=100 https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=100&h=100 https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100&h=100 https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=100&h=100 Types: CallItem (name, avatar, time, duration) and ClientCall (id, day, date, items: CallItem[]). CLIENT_CALLS Array: Create an array of 5 call agenda items (e.g., MON 18 JUL, TUE 19 JUL, THU 25 JUL, MON 25 JUL, WED 20 JUL). Assign 1 or 2 consultation items per day using the avatar array and mock times (e.g., "9:30 AM - 10:30 AM", "1hr"). 3. Custom Deep UI Components Create the following custom React components exactly: DeepShadowIcon: An inline div containing a background blur glowing layer (absolute opacity-60 bg-[#F25C40] blur-[18px] scale-90 translate-y-1.5) sitting underneath an inner bg-[#F25C40] box. Add exact shadows onto the top box: shadow-[0px_0px_5px_rgba(255,255,255,0.5)_inset,0px_8px_20px_rgba(242,92,64,0.35)]. Add p-2 rounded-2xl. DeepShadowButton: A button wrapped in a group div containing an outer glowing shadow (absolute opacity-40 bg-[#212121] blur-[25px]) that animates scaling up slightly to scale-110 and translate-y-1 on hover. The button itself uses bg-[#202020] and inner shadows: shadow-[0px_0px_4px_rgba(255,255,255,0.25)_inset,0px_6px_19px_rgba(0,0,0,0.25)]. Text inside is white. DeepShadowAvatar: Avatar image stacked on a blur shadow (bg-black blur-[12px] opacity-20). Provide a hasGlow prop; if true, the background glow is orange (bg-[#F25C40] opacity-60 blur-[18px]). Accept size props for sm, md, lg. AvatarWithShadow: Small functional image component wrapped in a div with an absolute bottom backdrop of bg-black opacity-25 blur-[10px]. ClientCard: Accepts index and a single ClientCall. Wraps content in a motion.div that fades & scales up in on load. Rotates the card alternately rotate-3 or -rotate-3 depending on if the index is even/odd. Background applies bg-white and an outer shadow shadow-[0_4px_20px_rgba(0,0,0,0.03)]. Card header displays Day on left, Date on right. Iterates over call.items dividing the avatar, names, and limits with dotted bottom borders. 4. The Hero Layout (App.tsx > App) Construct the main app structure over a bg-[#F7F7F7] global page: Use a main grid container: max-w-[1440px] lg:grid-cols-[1.2fr_0.8fr] gap-12. Left Side (Value Prop): Pulse Badge: A small pill with rounded borders border-[#D1F2D1]. Inside is a green pulsing dot bg-[#52D352] animate-pulse shadow-[0_0_8px_rgba(82,211,82,0.6)] and uppercase text "BOOKING FOR SUMMER" in tracking wide #52D352. Main Headline: h1 using the font-heading style. Text #202020, negative letter spacing (tracking-tight / tracking-[-0.02em]). Text says: "Expanding" [insert inline DeepShadowIcon here wrapping a white lucide TrendingUp icon rotated -rotate-6] "reach
with every lead". Subheadline: Paragraph using text-neutral-500. Text: "Automating lead systems and funnels, we design scalable growth engines for your next venture." CTA Row: A layout using gap-4 sm:gap-6. Uses your DeepShadowButton with "Scale revenue now", sitting next to a standard white button (with border, grey text, and a Lucide Play icon) saying "Start Here". Social Proof Section: Side-by-side layout separated by a .w-px dividing line on desktop. Left half: "VERIFIED CLIENTS" over a row of 4 DeepShadowAvatar elements. Make the 2nd one uniquely use hasGlow={true}. Make sizes alternate between md and lg. Right half: "TOP TIER QUALITY 5/5" over a row of 5 Lucide Star icons styled with text-[#FFB648] fill-[#FFB648]. Right Side (The Infinite Client Marquee): Wrap the column in a container with relative overflow-hidden lg:h-full (height 600px on mobile). Add top and bottom fade masks: absolute divs with bg-gradient-to-b and bg-gradient-to-t (from-[#F7F7F7] to-transparent) spanning h-20 sm:h-40 for scroll falloff. Use a dual-column vertical scrolling tracks configuration (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1). Framer Motion Tracks: Apply motion.div scrolling tracks wrapped in an infinite repeating frame moving its Y axis: animate={{ y: [0, -1200] }} transition={{ repeat: Infinity, duration: 40, ease: "linear" }}. Provide continuous looping visual depth by iterating through [...CLIENT_CALLS, ...CLIENT_CALLS, ...CLIENT_CALLS] printing out copies of the ClientCard components onto the tracks. Create a hidden second track for tablets using animate={{ y: [-600, -1800] }}.26:T170c,**Build a fullscreen hero section with a looping background video, navigation bar, and centered content. Use React, TypeScript, Tailwind CSS, and Lucide React icons. Here are the exact specifications:** --- ## Fonts Load two fonts in `index.html`: - **Qanelas-Heavy** from `https://db.onlinewebfonts.com/c/3010f9da43a41a81d5daa32bd6edebc2?family=Qanelas-Heavy` - **Inter** (weights 400, 500, 600, 700) from Google Fonts Define custom font utility classes in `index.css`: - `.font-qanelas` -- font-family: 'Qanelas-Heavy', sans-serif; font-weight: 900; - `.font-inter` -- font-family: 'Inter', sans-serif; Register both in `tailwind.config.js` under `theme.extend.fontFamily`. --- ## Layout The entire section is `w-full h-screen overflow-hidden` with `font-inter` as the base font. Everything is stacked via `relative`/`absolute` positioning. --- ## Background Video A `

Movie Premiere

Luminara

BookedUp

Conversion

Radial Diagram

Impressive Hero

Animated Cards

Travel Journal

Remit Race

Kresna Footer

Taskly

Gear Shop

Datacore SaaS Hero

Nex Max Upgrade

Rocket CTA

Securify Data Security

Neuralyn

Nike Hover

Integration SaaS

LearnHub