WorkspaceExplore
BoostedConcept: Repurposes the photorealistic city-skyline-over-park image (the VEX asset). Instead of a generic VC, position it as a personal wealth-building platform for young professionals — optimistic, daylight, growth-oriented, "your city is your portfolio."Visual PromptBuild a full-screen hero section for a wealth-tech platform called MERIDIAN, using React + TypeScript + Vite + Tailwind CSS and lucide-react for icons.Background image: [https://maklruruvcxgrrjunysc.supabase.co/storage/v1/object/public/prompt-assets/20bb9338-47ee-4757-b882-87fda8babb0.jpeg] (skyline-over-park, daylight). absolute inset-0 w-full h-full object-cover z-0. No dark overlay — the bright daytime image carries the energy; only a very subtle bg-gradient-to-t from-black/30 via-transparent to-transparent at the bottom 25% for text legibility.Fonts: "Inter" (400/500/600/700) for everything — body, nav, CTAs. "Fraunces" (serif, weights 400/500, italic variant) for the headline only, loaded via Google Fonts <link> tags. CSS variables: --font-display: 'Fraunces', serif, --font-body: 'Inter', sans-serif.Colors: Light theme. --background: 0 0% 100%, --foreground: 220 20% 12%, --muted-foreground: 220 10% 45%, --primary: 220 20% 12%, --primary-foreground: 0 0% 100%, --accent: 142 40% 35% (muted green, used sparingly for one highlighted word). No bright blues/purples beyond the photo itself.Navbar: relative z-10 flex justify-between items-center px-8 py-6 max-w-7xl mx-auto. Left: logo "MERIDIAN" — text-xl font-semibold tracking-tight text-white. Center (hidden md:flex gap-8 text-sm text-white/80): "Invest", "Save", "Learn", "Company" with hover:text-white transition-colors. Right: pill button "Open Account" — bg-white text-gray-900 rounded-full px-6 py-2.5 text-sm font-medium hover:bg-gray-100. Mobile: hamburger (Menu/X from lucide), fullscreen bg-white/95 backdrop-blur overlay with staggered link entrance (delay: i * 80 + 100ms, fade-up).Hero content (left-aligned, bottom third of viewport, flex flex-col justify-end h-screen pb-20 px-8 max-w-7xl mx-auto):create a grander, editorial-style typographic hierarchy. Eyebrow: "Build your Future one Decision at a Time."— text-white/80 text-xs tracking-[0.3em] uppercase mb-4, animate-fade-up.H1 (two lines, font-display italic, text-5xl sm:text-7xl md:text-8xl leading-[0.95] text-white): "Build your future" / "<em class="text-[hsl(142,40%,55%)] not-italic">one decision</em> at a time." — animate-fade-up-delay-1.Subtext: "Smart investing, automated savings, and real human advice — all in one place." — text-white/85 text-base sm:text-lg max-w-xl mt-6, animate-fade-up-delay-2.CTA row (mt-10 flex gap-4, animate-fade-up-delay-3): primary "Open Account" (bg-white text-gray-900 rounded-full px-8 py-3.5 font-medium hover:scale-[1.02]), secondary "See How It Works" (border border-white/40 text-white rounded-full px-8 py-3.5 hover:bg-white/10, with ArrowUpRight icon).Stat row (mt-12 flex gap-10, animate-fade-up-delay-4): "$2.4B+ / Assets Managed", "180K+ / Members", "4.9/5 / App Rating" — values text-2xl sm:text-3xl font-semibold text-white, labels text-xs text-white/60 uppercase tracking-wider mt-1.Signature effect: A glass "portfolio ticker" card pinned bottom-right (hidden lg:flex absolute bottom-10 right-8 liquid-glass rounded-2xl px-5 py-4 flex-col gap-2 w-[220px]) that cycles through 3 mini stat lines (e.g., "S&P 500 +1.2%", "Your Portfolio +2.8%", "Cash Reserve $12,400") with a fade-cross animation every 3 seconds via setInterval + opacity transition (400ms). Include the standard .liquid-glass CSS block (background rgba(255,255,255,0.08), backdrop-filter: blur(8px), gradient border via ::before).Animations: fade-up keyframes (translateY(24px) → 0, opacity 0→1, 0.7s ease-out), classes .animate-fade-up through .animate-fade-up-delay-4 at 0.15s increments.Responsiveness: Stats row wraps to 2 columns below sm; ticker card hidden below lg; hero text scales down per breakpoint; mobile nav as described above.Tone: Clean, daylight, confident — "old money meets modern app." No dark mode, no neon, no gradients beyond the single bottom fade for legibility.
Creator Reviews
No verified reviews yet
Sign in and purchase this prompt to leave a verified review.