Spaces:
Running
Running
| export type HeroTemplateId = | |
| | "animated-gradient" | |
| | "particles" | |
| | "waves" | |
| | "noise" | |
| | "parallax" | |
| | "morphing-blobs" | |
| | "rays" | |
| | "grid" | |
| | "shapes" | |
| | "lines" | |
| | "orbits"; | |
| export interface HeroTemplate { | |
| id: HeroTemplateId; | |
| name: string; | |
| html: string; // full HTML snippet to insert inside <body> | |
| } | |
| export const HERO_TEMPLATES: HeroTemplate[] = [ | |
| { | |
| id: "animated-gradient", | |
| name: "Animated Gradient", | |
| html: ` | |
| <!-- Hero: Animated Gradient --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-sky-500/30 via-purple-500/20 to-pink-500/30 animate-[gradientMove_12s_ease_infinite] blur-3xl"></div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Welcome to <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-purple-400">OmniDev</span></h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Build full-stack web projects with AI in minutes.</p> | |
| <div class="mt-8 flex items-center justify-center gap-3"> | |
| <a href="#start" class="px-5 py-2.5 rounded-lg bg-white text-neutral-900 font-medium hover:opacity-90">Get Started</a> | |
| <a href="#learn" class="px-5 py-2.5 rounded-lg bg-white/10 border border-white/20 text-white hover:bg-white/20">Learn More</a> | |
| </div> | |
| </div> | |
| <style> | |
| @keyframes gradientMove { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} } | |
| </style> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "waves", | |
| name: "Waves", | |
| html: ` | |
| <!-- Hero: Waves --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-gradient-to-b from-neutral-900 to-neutral-950"> | |
| <svg class="absolute -bottom-10 left-0 w-[200%] opacity-40" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="#0ea5e9" fill-opacity="0.2" d="M0,64L48,74.7C96,85,192,107,288,122.7C384,139,480,149,576,176C672,203,768,245,864,229.3C960,213,1056,139,1152,128C1248,117,1344,171,1392,197.3L1440,224L1440,320L0,320Z" /> | |
| <path fill="#8b5cf6" fill-opacity="0.25" d="M0,96L60,117.3C120,139,240,181,360,192C480,203,600,181,720,160C840,139,960,117,1080,122.7C1200,128,1320,160,1380,176L1440,192L1440,320L0,320Z" /> | |
| </svg> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Beautiful Wave Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Effortless visuals with tailwind-only waves.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "noise", | |
| name: "Noise Overlay", | |
| html: ` | |
| <!-- Hero: Noise Overlay --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(14,165,233,0.2),transparent_50%),radial-gradient(circle_at_80%_30%,rgba(139,92,246,0.2),transparent_50%)]"></div> | |
| <div class="absolute inset-0 opacity-[0.07]" style="background-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'160\' height=\'160\'><filter id=\'n\'><feTurbulence baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\' /></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\' /></svg>');"></div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Noisy Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Subtle noise overlay for premium feel.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "parallax", | |
| name: "Parallax Layers", | |
| html: ` | |
| <!-- Hero: Parallax Layers --> | |
| <section class="relative overflow-hidden min-h-[60vh] text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0 pointer-events-none"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-sky-500/10 to-purple-500/10"></div> | |
| <div class="absolute -top-10 -left-10 w-64 h-64 bg-sky-500/20 rounded-full blur-3xl translate-y-4"></div> | |
| <div class="absolute -bottom-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl -translate-y-4"></div> | |
| </div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Parallax Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Layered glow with depth illusion.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "morphing-blobs", | |
| name: "Morphing Blobs", | |
| html: ` | |
| <!-- Hero: Morphing Blobs --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <svg class="absolute inset-0 w-full h-full opacity-20" viewBox="0 0 800 400" preserveAspectRatio="none"> | |
| <defs> | |
| <linearGradient id="g" x1="0" x2="1" y1="0" y2="1"> | |
| <stop offset="0%" stop-color="#0ea5e9" /> | |
| <stop offset="100%" stop-color="#8b5cf6" /> | |
| </linearGradient> | |
| </defs> | |
| <path fill="url(#g)"> | |
| <animate attributeName="d" dur="12s" repeatCount="indefinite" values=" | |
| M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z; | |
| M0,320L120,261.3C240,203,480,85,720,101.3C960,117,1200,267,1440,288L1440,400L0,400Z; | |
| M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z" /> | |
| </path> | |
| </svg> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Morphing Blobs Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">SVG animated blobs with gradient.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "rays", | |
| name: "Rays / Aurora", | |
| html: ` | |
| <!-- Hero: Rays / Aurora --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0" style="background: conic-gradient(from 90deg at 50% 50%, rgba(14,165,233,.15), rgba(139,92,246,.15), rgba(236,72,153,.15)); filter: blur(60px);"></div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Aurora Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Conic gradient rays for an Aurora feel.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "grid", | |
| name: "Animated Grid", | |
| html: ` | |
| <!-- Hero: Animated Grid --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,.07)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.07)_1px,transparent_1px)] bg-[size:24px_24px]"></div> | |
| <div class="absolute inset-0 animate-[pulse_6s_ease-in-out_infinite] bg-gradient-to-br from-white/5 to-transparent"></div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Grid Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Animated grid with light sweep.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "shapes", | |
| name: "Floating Shapes", | |
| html: ` | |
| <!-- Hero: Floating Shapes --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24"> | |
| <div class="absolute inset-0"> | |
| <div class="absolute left-10 top-10 w-8 h-8 rounded-full bg-sky-500/60 animate-[float_7s_ease-in-out_infinite]"></div> | |
| <div class="absolute right-10 top-14 w-10 h-10 rounded-md bg-purple-500/60 animate-[float_9s_ease-in-out_infinite]"></div> | |
| <div class="absolute left-1/2 bottom-10 w-12 h-12 rounded-lg bg-pink-500/60 animate-[float_6s_ease-in-out_infinite]"></div> | |
| </div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Floating Shapes</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Gentle motion with CSS keyframes.</p> | |
| </div> | |
| <style> | |
| @keyframes float { 0%{ transform: translateY(0)} 50%{ transform: translateY(-14px)} 100%{ transform: translateY(0)} } | |
| </style> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "lines", | |
| name: "Moving Lines", | |
| html: ` | |
| <!-- Hero: Moving Lines --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0 bg-[repeating-linear-gradient(90deg,rgba(255,255,255,.06)_0,rgba(255,255,255,.06)_1px,transparent_1px,transparent_8px)] animate-[scrollX_20s_linear_infinite]"></div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Moving Lines Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Subtle animated lines create motion.</p> | |
| </div> | |
| <style> | |
| @keyframes scrollX { from{ background-position:0 0 } to{ background-position: 100% 0 } } | |
| </style> | |
| </section> | |
| `.trim(), | |
| }, | |
| { | |
| id: "orbits", | |
| name: "Orbits", | |
| html: ` | |
| <!-- Hero: Orbits --> | |
| <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950"> | |
| <div class="absolute inset-0 grid place-content-center opacity-30"> | |
| <div class="relative w-64 h-64"> | |
| <div class="absolute inset-0 rounded-full border border-white/20"></div> | |
| <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-52 h-52 rounded-full border border-white/15"></div> | |
| <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 rounded-full border border-white/10"></div> | |
| </div> | |
| </div> | |
| <div class="relative z-10 max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-white">Orbit Hero</h1> | |
| <p class="mt-4 text-neutral-300 text-lg">Concentric orbits with minimal styling.</p> | |
| </div> | |
| </section> | |
| `.trim(), | |
| }, | |
| ]; | |