Hugging Face's logo

Spaces:
Ramtinhoss
/
webcraft-pro
Running

App Files Community
Ramtinhoss commited on
Commit
132f92a
·
verified ·
1 Parent(s): e2c1cf0

modify this app

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +365 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Webcraft Pro
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: WebCraft Pro ✨
3
+ colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,366 @@
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>WebCraft Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .vanta-bg {
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ z-index: -1;
24
+ }
25
+ .gradient-text {
26
+ background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
27
+ -webkit-background-clip: text;
28
+ background-clip: text;
29
+ color: transparent;
30
+ }
31
+ .card-hover {
32
+ transition: all 0.3s ease;
33
+ }
34
+ .card-hover:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <div id="vanta-bg" class="vanta-bg"></div>
42
+
43
+ <!-- Navbar -->
44
+ <nav class="backdrop-blur-md bg-white/80 shadow-sm sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i data-feather="code" class="h-8 w-8 text-indigo-600"></i>
50
+ <span class="ml-2 text-xl font-bold text-gray-900">WebCraft Pro</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
54
+ <a href="#" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
55
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Features</a>
56
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
57
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
58
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</button>
59
+ </div>
60
+ <div class="-mr-2 flex items-center md:hidden">
61
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
62
+ <i data-feather="menu" class="h-6 w-6"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile menu -->
69
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg rounded-b-lg">
70
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
71
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Home</a>
72
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-gray-50">Features</a>
73
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-gray-50">Pricing</a>
74
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
75
+ <button class="w-full mt-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-base font-medium transition duration-300">Get Started</button>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Hero Section -->
81
+ <div class="relative overflow-hidden">
82
+ <div class="max-w-7xl mx-auto">
83
+ <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
84
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20">
85
+ <div class="sm:text-center lg:text-left">
86
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
87
+ <span class="block">Build Amazing</span>
88
+ <span class="block gradient-text">Web Experiences</span>
89
+ </h1>
90
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
91
+ WebCraft Pro helps you create stunning, responsive websites with ease.
92
+ Our tools make web development faster and more enjoyable than ever before.
93
+ </p>
94
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
95
+ <div class="rounded-md shadow">
96
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition duration-300">
97
+ Get Started
98
+ </a>
99
+ </div>
100
+ <div class="mt-3 sm:mt-0 sm:ml-3">
101
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition duration-300">
102
+ Live Demo
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </main>
108
+ </div>
109
+ </div>
110
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
111
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="http://static.photos/technology/1024x576/42" alt="Web development illustration">
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Features Section -->
116
+ <div class="py-12 bg-white">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="lg:text-center">
119
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
120
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
121
+ A better way to build
122
+ </p>
123
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
124
+ All the tools you need to create professional websites in one place.
125
+ </p>
126
+ </div>
127
+
128
+ <div class="mt-10">
129
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 lg:grid-cols-3">
130
+ <!-- Feature 1 -->
131
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
132
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
133
+ <i data-feather="cpu"></i>
134
+ </div>
135
+ <div class="mt-5">
136
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Powerful Performance</h3>
137
+ <p class="mt-2 text-base text-gray-500">
138
+ Optimized for speed and efficiency to deliver the best user experience.
139
+ </p>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Feature 2 -->
144
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
145
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
146
+ <i data-feather="smartphone"></i>
147
+ </div>
148
+ <div class="mt-5">
149
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Mobile First</h3>
150
+ <p class="mt-2 text-base text-gray-500">
151
+ Responsive design that works perfectly on all devices and screen sizes.
152
+ </p>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Feature 3 -->
157
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
158
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
159
+ <i data-feather="code"></i>
160
+ </div>
161
+ <div class="mt-5">
162
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Clean Code</h3>
163
+ <p class="mt-2 text-base text-gray-500">
164
+ Semantic, well-structured code that's easy to maintain and extend.
165
+ </p>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Feature 4 -->
170
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
171
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
172
+ <i data-feather="layout"></i>
173
+ </div>
174
+ <div class="mt-5">
175
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Beautiful UI</h3>
176
+ <p class="mt-2 text-base text-gray-500">
177
+ Pre-designed components that look great and are easy to customize.
178
+ </p>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Feature 5 -->
183
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
184
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
185
+ <i data-feather="zap"></i>
186
+ </div>
187
+ <div class="mt-5">
188
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Fast Development</h3>
189
+ <p class="mt-2 text-base text-gray-500">
190
+ Save time with our intuitive tools and pre-built templates.
191
+ </p>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Feature 6 -->
196
+ <div class="card-hover p-6 bg-white rounded-lg shadow-md">
197
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
198
+ <i data-feather="shield"></i>
199
+ </div>
200
+ <div class="mt-5">
201
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Secure</h3>
202
+ <p class="mt-2 text-base text-gray-500">
203
+ Built with security best practices to protect your data and users.
204
+ </p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- CTA Section -->
213
+ <div class="bg-indigo-700">
214
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
215
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
216
+ <span class="block">Ready to dive in?</span>
217
+ <span class="block">Start your free trial today.</span>
218
+ </h2>
219
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
220
+ No credit card required. Cancel anytime.
221
+ </p>
222
+ <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto transition duration-300">
223
+ Sign up for free
224
+ </a>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Footer -->
229
+ <footer class="bg-gray-900">
230
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
231
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
232
+ <div class="space-y-8 xl:col-span-1">
233
+ <div class="flex items-center">
234
+ <i data-feather="code" class="h-8 w-8 text-indigo-400"></i>
235
+ <span class="ml-2 text-xl font-bold text-white">WebCraft Pro</span>
236
+ </div>
237
+ <p class="text-gray-300 text-base">
238
+ Making web development accessible and enjoyable for everyone.
239
+ </p>
240
+ <div class="flex space-x-6">
241
+ <a href="#" class="text-gray-400 hover:text-white">
242
+ <i data-feather="twitter"></i>
243
+ </a>
244
+ <a href="#" class="text-gray-400 hover:text-white">
245
+ <i data-feather="github"></i>
246
+ </a>
247
+ <a href="#" class="text-gray-400 hover:text-white">
248
+ <i data-feather="instagram"></i>
249
+ </a>
250
+ <a href="#" class="text-gray-400 hover:text-white">
251
+ <i data-feather="linkedin"></i>
252
+ </a>
253
+ </div>
254
+ </div>
255
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
256
+ <div class="md:grid md:grid-cols-2 md:gap-8">
257
+ <div>
258
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
259
+ <ul class="mt-4 space-y-4">
260
+ <li>
261
+ <a href="#" class="text-base text-gray-300 hover:text-white">Marketing</a>
262
+ </li>
263
+ <li>
264
+ <a href="#" class="text-base text-gray-300 hover:text-white">Analytics</a>
265
+ </li>
266
+ <li>
267
+ <a href="#" class="text-base text-gray-300 hover:text-white">Commerce</a>
268
+ </li>
269
+ <li>
270
+ <a href="#" class="text-base text-gray-300 hover:text-white">Insights</a>
271
+ </li>
272
+ </ul>
273
+ </div>
274
+ <div class="mt-12 md:mt-0">
275
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
276
+ <ul class="mt-4 space-y-4">
277
+ <li>
278
+ <a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a>
279
+ </li>
280
+ <li>
281
+ <a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a>
282
+ </li>
283
+ <li>
284
+ <a href="#" class="text-base text-gray-300 hover:text-white">Guides</a>
285
+ </li>
286
+ <li>
287
+ <a href="#" class="text-base text-gray-300 hover:text-white">API Status</a>
288
+ </li>
289
+ </ul>
290
+ </div>
291
+ </div>
292
+ <div class="md:grid md:grid-cols-2 md:gap-8">
293
+ <div>
294
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
295
+ <ul class="mt-4 space-y-4">
296
+ <li>
297
+ <a href="#" class="text-base text-gray-300 hover:text-white">About</a>
298
+ </li>
299
+ <li>
300
+ <a href="#" class="text-base text-gray-300 hover:text-white">Blog</a>
301
+ </li>
302
+ <li>
303
+ <a href="#" class="text-base text-gray-300 hover:text-white">Jobs</a>
304
+ </li>
305
+ <li>
306
+ <a href="#" class="text-base text-gray-300 hover:text-white">Press</a>
307
+ </li>
308
+ </ul>
309
+ </div>
310
+ <div class="mt-12 md:mt-0">
311
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
312
+ <ul class="mt-4 space-y-4">
313
+ <li>
314
+ <a href="#" class="text-base text-gray-300 hover:text-white">Claim</a>
315
+ </li>
316
+ <li>
317
+ <a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a>
318
+ </li>
319
+ <li>
320
+ <a href="#" class="text-base text-gray-300 hover:text-white">Terms</a>
321
+ </li>
322
+ <li>
323
+ <a href="#" class="text-base text-gray-300 hover:text-white">Policy</a>
324
+ </li>
325
+ </ul>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ <div class="mt-12 border-t border-gray-800 pt-8">
331
+ <p class="text-base text-gray-400 text-center">
332
+ &copy; 2023 WebCraft Pro. All rights reserved.
333
+ </p>
334
+ </div>
335
+ </div>
336
+ </footer>
337
+
338
+ <script>
339
+ // Initialize Vanta.js globe background
340
+ VANTA.GLOBE({
341
+ el: "#vanta-bg",
342
+ mouseControls: true,
343
+ touchControls: true,
344
+ gyroControls: false,
345
+ minHeight: 200.00,
346
+ minWidth: 200.00,
347
+ scale: 1.00,
348
+ scaleMobile: 1.00,
349
+ color: 0x6366f1,
350
+ backgroundColor: 0xf1f5f9,
351
+ size: 0.8
352
+ });
353
+
354
+ // Mobile menu toggle
355
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
356
+ const mobileMenu = document.getElementById('mobile-menu');
357
+
358
+ mobileMenuButton.addEventListener('click', () => {
359
+ mobileMenu.classList.toggle('hidden');
360
+ });
361
+
362
+ // Feather icons
363
+ feather.replace();
364
+ </script>
365
+ </body>
366
  </html>