Hugging Face's logo

Spaces:
kalhdrawi
/
undefined
Running

App Files Community
kalhdrawi commited on
Commit
9dc3861
·
verified ·
1 Parent(s): bb3e997

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +98 -0
index.html CHANGED
@@ -15,6 +15,104 @@
15
  </style>
16
  </head>
17
  <body class="bg-gray-50">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  <!-- Navigation -->
19
  <nav class="bg-white shadow-lg sticky top-0 z-50">
20
  <div class="max-w-7xl mx-auto px-4">
 
15
  </style>
16
  </head>
17
  <body class="bg-gray-50">
18
+ <!-- Hero: Parallax Layers -->
19
+ <section class="relative overflow-hidden min-h-[60vh] text-center px-6 py-24 bg-neutral-950">
20
+ <div class="absolute inset-0 pointer-events-none">
21
+ <div class="absolute inset-0 bg-gradient-to-b from-sky-500/10 to-purple-500/10"></div>
22
+ <div class="absolute -top-10 -left-10 w-64 h-64 bg-sky-500/20 rounded-full blur-3xl translate-y-4"></div>
23
+ <div class="absolute -bottom-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl -translate-y-4"></div>
24
+ </div>
25
+ <div class="relative z-10 max-w-3xl mx-auto">
26
+ <h1 class="text-4xl md:text-6xl font-extrabold text-white">Parallax Hero</h1>
27
+ <p class="mt-4 text-neutral-300 text-lg">Layered glow with depth illusion.</p>
28
+ </div>
29
+ </section>
30
+
31
+ <!-- Hero: Morphing Blobs -->
32
+ <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950">
33
+ <svg class="absolute inset-0 w-full h-full opacity-20" viewBox="0 0 800 400" preserveAspectRatio="none">
34
+ <defs>
35
+ <linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
36
+ <stop offset="0%" stop-color="#0ea5e9" />
37
+ <stop offset="100%" stop-color="#8b5cf6" />
38
+ </linearGradient>
39
+ </defs>
40
+ <path fill="url(#g)">
41
+ <animate attributeName="d" dur="12s" repeatCount="indefinite" values="
42
+ M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z;
43
+ M0,320L120,261.3C240,203,480,85,720,101.3C960,117,1200,267,1440,288L1440,400L0,400Z;
44
+ M0,320L80,288C160,256,320,192,480,165.3C640,139,800,149,960,154.7L960,400L0,400Z" />
45
+ </path>
46
+ </svg>
47
+ <div class="relative z-10 max-w-3xl mx-auto">
48
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Morphing Blobs Hero</h1>
49
+ <p class="mt-4 text-neutral-300 text-lg">SVG animated blobs with gradient.</p>
50
+ </div>
51
+ </section>
52
+
53
+ <!-- Hero: Floating Shapes -->
54
+ <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24">
55
+ <div class="absolute inset-0">
56
+ <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>
57
+ <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>
58
+ <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>
59
+ </div>
60
+ <div class="relative z-10 max-w-3xl mx-auto">
61
+ <h1 class="text-4xl md:text-6xl font-extrabold text-white">Floating Shapes</h1>
62
+ <p class="mt-4 text-neutral-300 text-lg">Gentle motion with CSS keyframes.</p>
63
+ </div>
64
+ <style>
65
+ @keyframes float { 0%{ transform: translateY(0)} 50%{ transform: translateY(-14px)} 100%{ transform: translateY(0)} }
66
+ </style>
67
+ </section>
68
+
69
+ <!-- Hero: Rays / Aurora -->
70
+ <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950">
71
+ <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>
72
+ <div class="relative z-10 max-w-3xl mx-auto">
73
+ <h1 class="text-4xl md:text-6xl font-extrabold text-white">Aurora Hero</h1>
74
+ <p class="mt-4 text-neutral-300 text-lg">Conic gradient rays for an Aurora feel.</p>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Hero: Waves -->
79
+ <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">
80
+ <svg class="absolute -bottom-10 left-0 w-[200%] opacity-40" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
81
+ <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" />
82
+ <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" />
83
+ </svg>
84
+ <div class="relative z-10 max-w-3xl mx-auto">
85
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">Beautiful Wave Hero</h1>
86
+ <p class="mt-4 text-neutral-300 text-lg">Effortless visuals with tailwind-only waves.</p>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Hero: Noise Overlay -->
91
+ <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24 bg-neutral-950">
92
+ <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>
93
+ <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>
94
+ <div class="relative z-10 max-w-3xl mx-auto">
95
+ <h1 class="text-4xl md:text-6xl font-extrabold text-white">Noisy Hero</h1>
96
+ <p class="mt-4 text-neutral-300 text-lg">Subtle noise overlay for premium feel.</p>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- Hero: Animated Gradient -->
101
+ <section class="relative overflow-hidden min-h-[60vh] grid place-content-center text-center px-6 py-24">
102
+ <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>
103
+ <div class="relative z-10 max-w-3xl mx-auto">
104
+ <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>
105
+ <p class="mt-4 text-neutral-300 text-lg">Build full-stack web projects with AI in minutes.</p>
106
+ <div class="mt-8 flex items-center justify-center gap-3">
107
+ <a href="#start" class="px-5 py-2.5 rounded-lg bg-white text-neutral-900 font-medium hover:opacity-90">Get Started</a>
108
+ <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>
109
+ </div>
110
+ </div>
111
+ <style>
112
+ @keyframes gradientMove { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }
113
+ </style>
114
+ </section>
115
+
116
  <!-- Navigation -->
117
  <nav class="bg-white shadow-lg sticky top-0 z-50">
118
  <div class="max-w-7xl mx-auto px-4">