Hugging Face's logo

Spaces:
Crossberry
/
Crossberryweb
Running

App Files Community
Crossberry commited on
Commit
400ab4b
·
verified ·
1 Parent(s): f853097

Index.html

Browse files
Files changed (1) hide show
  1. index.html +312 -19
index.html CHANGED
@@ -1,19 +1,312 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Crossberry App by Surya Prakash</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom animations */
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-20px); }
14
+ }
15
+ .floating {
16
+ animation: float 6s ease-in-out infinite;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ .glass-effect {
25
+ background: rgba(255, 255, 255, 0.1);
26
+ backdrop-filter: blur(10px);
27
+ -webkit-backdrop-filter: blur(10px);
28
+ border: 1px solid rgba(255, 255, 255, 0.2);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen text-white overflow-x-hidden">
33
+ <!-- Navigation -->
34
+ <nav class="glass-effect fixed w-full z-50">
35
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
36
+ <div class="flex items-center justify-between h-16">
37
+ <div class="flex items-center">
38
+ <div class="flex-shrink-0">
39
+ <span class="text-2xl font-bold gradient-text">Crossberry</span>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:block">
43
+ <div class="ml-10 flex items-baseline space-x-4">
44
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Home</a>
45
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Features</a>
46
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">About</a>
47
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition">Contact</a>
48
+ </div>
49
+ </div>
50
+ <div class="md:hidden">
51
+ <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-white/10 focus:outline-none">
52
+ <i class="fas fa-bars"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ <!-- Mobile menu -->
58
+ <div id="mobile-menu" class="hidden md:hidden bg-indigo-900/95">
59
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
60
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Home</a>
61
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Features</a>
62
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">About</a>
63
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-white/10">Contact</a>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
70
+ <div class="max-w-7xl mx-auto">
71
+ <div class="flex flex-col md:flex-row items-center">
72
+ <div class="md:w-1/2 mb-10 md:mb-0">
73
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
74
+ Crossberry App by <span class="gradient-text">Surya Prakash</span>
75
+ </h1>
76
+ <p class="text-lg md:text-xl mb-8 text-gray-200">
77
+ 3 years of development experience packed into one powerful application.
78
+ Click below to start exploring!
79
+ </p>
80
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
81
+ <a href="https://crossberry.vercel.app" class="bg-white text-indigo-900 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105 inline-block text-center">
82
+ Open Crossberry
83
+ </a>
84
+ <button class="glass-effect border border-white hover:bg-white/20 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105">
85
+ Learn More
86
+ </button>
87
+ </div>
88
+ </div>
89
+ <div class="md:w-1/2 flex justify-center">
90
+ <div class="relative floating">
91
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-white/10 rounded-full absolute -top-10 -left-10"></div>
92
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-white/5 rounded-full absolute -bottom-10 -right-10"></div>
93
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
94
+ alt="Welcome"
95
+ class="relative w-64 h-64 md:w-80 md:h-80 object-cover rounded-2xl shadow-2xl border-4 border-white/20">
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Features Section -->
103
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white/5">
104
+ <div class="max-w-7xl mx-auto">
105
+ <div class="text-center mb-16">
106
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose Us?</h2>
107
+ <p class="max-w-2xl mx-auto text-gray-300">We offer the best experience with our premium services</p>
108
+ </div>
109
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
110
+ <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition">
111
+ <div class="w-16 h-16 bg-indigo-500/20 rounded-full flex items-center justify-center mb-6">
112
+ <i class="fas fa-rocket text-2xl text-indigo-400"></i>
113
+ </div>
114
+ <h3 class="text-xl font-semibold mb-3">Fast Performance</h3>
115
+ <p class="text-gray-300">Lightning-fast loading times and smooth performance for the best user experience.</p>
116
+ </div>
117
+ <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition">
118
+ <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mb-6">
119
+ <i class="fas fa-shield-alt text-2xl text-purple-400"></i>
120
+ </div>
121
+ <h3 class="text-xl font-semibold mb-3">Secure Platform</h3>
122
+ <p class="text-gray-300">Your data is protected with enterprise-grade security measures.</p>
123
+ </div>
124
+ <div class="glass-effect p-8 rounded-xl hover:shadow-lg transition">
125
+ <div class="w-16 h-16 bg-pink-500/20 rounded-full flex items-center justify-center mb-6">
126
+ <i class="fas fa-headset text-2xl text-pink-400"></i>
127
+ </div>
128
+ <h3 class="text-xl font-semibold mb-3">24/7 Support</h3>
129
+ <p class="text-gray-300">Our dedicated team is always ready to help you with any questions.</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Testimonials -->
136
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
137
+ <div class="max-w-7xl mx-auto">
138
+ <div class="text-center mb-16">
139
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What People Say</h2>
140
+ <p class="max-w-2xl mx-auto text-gray-300">Hear from our satisfied customers</p>
141
+ </div>
142
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
143
+ <div class="glass-effect p-8 rounded-xl">
144
+ <div class="flex items-center mb-6">
145
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
146
+ <div>
147
+ <h4 class="font-semibold">Sarah Johnson</h4>
148
+ <p class="text-sm text-gray-400">Marketing Director</p>
149
+ </div>
150
+ </div>
151
+ <p class="text-gray-300 italic">"The welcome experience was incredible! The team made me feel right at home from the very first moment."</p>
152
+ <div class="mt-4 text-yellow-400">
153
+ <i class="fas fa-star"></i>
154
+ <i class="fas fa-star"></i>
155
+ <i class="fas fa-star"></i>
156
+ <i class="fas fa-star"></i>
157
+ <i class="fas fa-star"></i>
158
+ </div>
159
+ </div>
160
+ <div class="glass-effect p-8 rounded-xl">
161
+ <div class="flex items-center mb-6">
162
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
163
+ <div>
164
+ <h4 class="font-semibold">Michael Chen</h4>
165
+ <p class="text-sm text-gray-400">Tech Entrepreneur</p>
166
+ </div>
167
+ </div>
168
+ <p class="text-gray-300 italic">"I've never felt more welcomed on any platform. The onboarding process was seamless and intuitive."</p>
169
+ <div class="mt-4 text-yellow-400">
170
+ <i class="fas fa-star"></i>
171
+ <i class="fas fa-star"></i>
172
+ <i class="fas fa-star"></i>
173
+ <i class="fas fa-star"></i>
174
+ <i class="fas fa-star-half-alt"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- CTA Section -->
182
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-600 to-purple-600">
183
+ <div class="max-w-4xl mx-auto text-center">
184
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
185
+ <p class="text-xl mb-8 text-indigo-100">Join thousands of happy users today. It's free to sign up!</p>
186
+ <form class="max-w-md mx-auto">
187
+ <div class="flex flex-col sm:flex-row gap-4">
188
+ <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-full focus:outline-none text-gray-900">
189
+ <button type="submit" class="bg-white text-indigo-900 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105">
190
+ Sign Up Now
191
+ </button>
192
+ </div>
193
+ </form>
194
+ </div>
195
+ </section>
196
+
197
+ <!-- Footer -->
198
+ <footer class="bg-black/20 py-12 px-4 sm:px-6 lg:px-8">
199
+ <div class="max-w-7xl mx-auto">
200
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
201
+ <div>
202
+ <h3 class="text-xl font-bold mb-4 gradient-text">Crossberry</h3>
203
+ <p class="text-gray-400">Developed by Surya Prakash with 3 years of experience.</p>
204
+ </div>
205
+ <div>
206
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
207
+ <ul class="space-y-2">
208
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
209
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
210
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
211
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
212
+ </ul>
213
+ </div>
214
+ <div>
215
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
216
+ <ul class="space-y-2">
217
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
218
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
219
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
220
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
221
+ </ul>
222
+ </div>
223
+ <div>
224
+ <h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
225
+ <div class="flex space-x-4">
226
+ <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
227
+ <i class="fab fa-facebook-f"></i>
228
+ </a>
229
+ <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
230
+ <i class="fab fa-twitter"></i>
231
+ </a>
232
+ <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
233
+ <i class="fab fa-instagram"></i>
234
+ </a>
235
+ <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
236
+ <i class="fab fa-linkedin-in"></i>
237
+ </a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="border-t border-white/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
242
+ <p class="text-gray-400 text-sm">© 2023 Welcome. All rights reserved.</p>
243
+ <div class="flex space-x-6 mt-4 md:mt-0">
244
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
245
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
246
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </footer>
251
+
252
+ <!-- Back to Top Button -->
253
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
254
+ <i class="fas fa-arrow-up"></i>
255
+ </button>
256
+
257
+ <script>
258
+ // Mobile menu toggle
259
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
260
+ const mobileMenu = document.getElementById('mobile-menu');
261
+
262
+ mobileMenuButton.addEventListener('click', () => {
263
+ mobileMenu.classList.toggle('hidden');
264
+ });
265
+
266
+ // Back to top button
267
+ const backToTopButton = document.getElementById('back-to-top');
268
+
269
+ window.addEventListener('scroll', () => {
270
+ if (window.pageYOffset > 300) {
271
+ backToTopButton.classList.remove('opacity-0', 'invisible');
272
+ backToTopButton.classList.add('opacity-100', 'visible');
273
+ } else {
274
+ backToTopButton.classList.remove('opacity-100', 'visible');
275
+ backToTopButton.classList.add('opacity-0', 'invisible');
276
+ }
277
+ });
278
+
279
+ backToTopButton.addEventListener('click', () => {
280
+ window.scrollTo({
281
+ top: 0,
282
+ behavior: 'smooth'
283
+ });
284
+ });
285
+
286
+ // Animate elements when they come into view
287
+ const animateOnScroll = () => {
288
+ const elements = document.querySelectorAll('.glass-effect');
289
+
290
+ elements.forEach(element => {
291
+ const elementPosition = element.getBoundingClientRect().top;
292
+ const screenPosition = window.innerHeight / 1.3;
293
+
294
+ if (elementPosition < screenPosition) {
295
+ element.style.opacity = '1';
296
+ element.style.transform = 'translateY(0)';
297
+ }
298
+ });
299
+ };
300
+
301
+ // Set initial state for animation
302
+ document.querySelectorAll('.glass-effect').forEach(el => {
303
+ el.style.opacity = '0';
304
+ el.style.transform = 'translateY(20px)';
305
+ el.style.transition = 'all 0.6s ease';
306
+ });
307
+
308
+ window.addEventListener('load', animateOnScroll);
309
+ window.addEventListener('scroll', animateOnScroll);
310
+ </script>
311
+ </body>
312
+ </html>