Hugging Face's logo

Spaces:
kalhdrawi
/
omnidev
Running

App Files
omnidev
File size: 9,830 Bytes 
a96208d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
 
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(),
  },
];