Hugging Face's logo

Spaces:
chatkenneth
/
webcraft
Running

App Files Community
chatkenneth commited on
Commit
938ea94
·
verified ·
1 Parent(s): c62cf66

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +655 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Webcraft
3
- emoji: 🦀
4
- colorFrom: blue
5
- colorTo: purple
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
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,655 @@
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 - Premium Website Templates</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .template-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .feature-icon {
18
+ width: 60px;
19
+ height: 60px;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ border-radius: 12px;
24
+ margin-bottom: 1rem;
25
+ }
26
+ .testimonial-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .testimonial-card:hover {
30
+ transform: scale(1.03);
31
+ }
32
+ .pricing-card:hover {
33
+ transform: scale(1.02);
34
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
35
+ }
36
+ .nav-link {
37
+ position: relative;
38
+ }
39
+ .nav-link:after {
40
+ content: '';
41
+ position: absolute;
42
+ width: 0;
43
+ height: 2px;
44
+ bottom: -2px;
45
+ left: 0;
46
+ background-color: #6e8efb;
47
+ transition: width 0.3s ease;
48
+ }
49
+ .nav-link:hover:after {
50
+ width: 100%;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-sans antialiased text-gray-800">
55
+ <!-- Navigation -->
56
+ <nav class="bg-white shadow-sm fixed w-full z-10">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="flex justify-between h-16">
59
+ <div class="flex items-center">
60
+ <div class="flex-shrink-0 flex items-center">
61
+ <i class="fas fa-cubes text-indigo-600 text-2xl mr-2"></i>
62
+ <span class="text-xl font-bold text-gray-900">WebCraft</span>
63
+ </div>
64
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
65
+ <a href="#templates" class="nav-link border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a>
66
+ <a href="#features" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
67
+ <a href="#pricing" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
68
+ <a href="#testimonials" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Testimonials</a>
69
+ </div>
70
+ </div>
71
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
72
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Get Started</button>
73
+ </div>
74
+ <div class="-mr-2 flex items-center sm:hidden">
75
+ <button type="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 focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
76
+ <span class="sr-only">Open main menu</span>
77
+ <i class="fas fa-bars"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </nav>
83
+
84
+ <!-- Hero Section -->
85
+ <div class="gradient-bg pt-24 pb-20">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
88
+ <div class="mb-12 lg:mb-0">
89
+ <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Launch Your Website in Minutes</h1>
90
+ <p class="text-xl text-indigo-100 mb-8">Beautiful, responsive templates that convert. No coding required.</p>
91
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
92
+ <button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Browse Templates</button>
93
+ <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-6 py-3 rounded-lg text-lg font-semibold transition duration-150 ease-in-out">Live Demo</button>
94
+ </div>
95
+ </div>
96
+ <div class="relative">
97
+ <div class="absolute -top-8 -left-8 w-64 h-64 bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
98
+ <div class="absolute -bottom-12 -right-8 w-64 h-64 bg-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
99
+ <div class="relative">
100
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="Dashboard" class="rounded-lg shadow-2xl border-8 border-white">
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Templates Section -->
108
+ <section id="templates" class="py-20 bg-gray-50">
109
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
110
+ <div class="text-center mb-16">
111
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Premium Website Templates</h2>
112
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose from our collection of professionally designed templates for any industry.</p>
113
+ </div>
114
+
115
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
116
+ <!-- Template 1 -->
117
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
118
+ <div class="relative pb-2/3 h-48">
119
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/agency.jpg" alt="Agency Template">
120
+ <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs px-2 py-1 rounded">Popular</div>
121
+ </div>
122
+ <div class="p-6">
123
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Creative Agency</h3>
124
+ <p class="text-gray-600 mb-4">Perfect for design studios, marketing agencies, and creative professionals.</p>
125
+ <div class="flex justify-between items-center">
126
+ <span class="text-lg font-bold text-gray-900">$49</span>
127
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Template 2 -->
133
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
134
+ <div class="relative pb-2/3 h-48">
135
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/ecommerce.jpg" alt="Ecommerce Template">
136
+ </div>
137
+ <div class="p-6">
138
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">E-Commerce Pro</h3>
139
+ <p class="text-gray-600 mb-4">Complete online store solution with product pages, cart, and checkout flow.</p>
140
+ <div class="flex justify-between items-center">
141
+ <span class="text-lg font-bold text-gray-900">$79</span>
142
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Template 3 -->
148
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
149
+ <div class="relative pb-2/3 h-48">
150
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/portfolio.jpg" alt="Portfolio Template">
151
+ </div>
152
+ <div class="p-6">
153
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Artist Portfolio</h3>
154
+ <p class="text-gray-600 mb-4">Showcase your creative work with this elegant portfolio template.</p>
155
+ <div class="flex justify-between items-center">
156
+ <span class="text-lg font-bold text-gray-900">$39</span>
157
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Template 4 -->
163
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
164
+ <div class="relative pb-2/3 h-48">
165
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/restaurant.jpg" alt="Restaurant Template">
166
+ </div>
167
+ <div class="p-6">
168
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Gourmet Restaurant</h3>
169
+ <p class="text-gray-600 mb-4">Beautiful template for restaurants, cafes, and food businesses.</p>
170
+ <div class="flex justify-between items-center">
171
+ <span class="text-lg font-bold text-gray-900">$59</span>
172
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Template 5 -->
178
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
179
+ <div class="relative pb-2/3 h-48">
180
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/saas.jpg" alt="SaaS Template">
181
+ </div>
182
+ <div class="p-6">
183
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">SaaS Startup</h3>
184
+ <p class="text-gray-600 mb-4">Modern landing page for software as a service businesses.</p>
185
+ <div class="flex justify-between items-center">
186
+ <span class="text-lg font-bold text-gray-900">$69</span>
187
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Template 6 -->
193
+ <div class="bg-white rounded-xl overflow-hidden shadow-md template-card transition duration-300 ease-in-out">
194
+ <div class="relative pb-2/3 h-48">
195
+ <img class="absolute h-full w-full object-cover" src="https://lessclicks.site/images/templates/blog.jpg" alt="Blog Template">
196
+ </div>
197
+ <div class="p-6">
198
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Minimal Blog</h3>
199
+ <p class="text-gray-600 mb-4">Clean and content-focused template for writers and bloggers.</p>
200
+ <div class="flex justify-between items-center">
201
+ <span class="text-lg font-bold text-gray-900">$29</span>
202
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="text-center mt-12">
209
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">View All Templates (24+)</button>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Features Section -->
215
+ <section id="features" class="py-20 bg-white">
216
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
217
+ <div class="text-center mb-16">
218
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Why Choose WebCraft</h2>
219
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Everything you need to launch a professional website quickly.</p>
220
+ </div>
221
+
222
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
223
+ <!-- Feature 1 -->
224
+ <div class="text-center px-4">
225
+ <div class="feature-icon bg-indigo-100 text-indigo-600 mx-auto">
226
+ <i class="fas fa-bolt text-2xl"></i>
227
+ </div>
228
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Lightning Fast Setup</h3>
229
+ <p class="text-gray-600">Get your website up and running in minutes with our one-click deployment.</p>
230
+ </div>
231
+
232
+ <!-- Feature 2 -->
233
+ <div class="text-center px-4">
234
+ <div class="feature-icon bg-pink-100 text-pink-600 mx-auto">
235
+ <i class="fas fa-mobile-alt text-2xl"></i>
236
+ </div>
237
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Fully Responsive</h3>
238
+ <p class="text-gray-600">All templates look perfect on any device, from desktop to mobile.</p>
239
+ </div>
240
+
241
+ <!-- Feature 3 -->
242
+ <div class="text-center px-4">
243
+ <div class="feature-icon bg-blue-100 text-blue-600 mx-auto">
244
+ <i class="fas fa-paint-brush text-2xl"></i>
245
+ </div>
246
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">Easy Customization</h3>
247
+ <p class="text-gray-600">Change colors, fonts, and content with our intuitive editor.</p>
248
+ </div>
249
+
250
+ <!-- Feature 4 -->
251
+ <div class="text-center px-4">
252
+ <div class="feature-icon bg-green-100 text-green-600 mx-auto">
253
+ <i class="fas fa-headset text-2xl"></i>
254
+ </div>
255
+ <h3 class="text-lg font-semibold text-gray-900 mb-2">24/7 Support</h3>
256
+ <p class="text-gray-600">Our team is always ready to help you with any questions.</p>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
261
+ <div>
262
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Advanced Customization Options</h3>
263
+ <p class="text-gray-600 mb-6">Our templates come with extensive customization options that let you tailor every aspect of your website without touching a single line of code.</p>
264
+ <ul class="space-y-4">
265
+ <li class="flex items-start">
266
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
267
+ <span class="text-gray-700">Change colors with our color picker tool</span>
268
+ </li>
269
+ <li class="flex items-start">
270
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
271
+ <span class="text-gray-700">Upload your own fonts or choose from our library</span>
272
+ </li>
273
+ <li class="flex items-start">
274
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
275
+ <span class="text-gray-700">Drag-and-drop section rearrangement</span>
276
+ </li>
277
+ <li class="flex items-start">
278
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
279
+ <span class="text-gray-700">One-click demo content import</span>
280
+ </li>
281
+ </ul>
282
+ </div>
283
+ <div class="relative">
284
+ <div class="absolute -top-8 -left-8 w-64 h-64 bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
285
+ <div class="relative">
286
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Customization dashboard" class="rounded-lg shadow-2xl border-8 border-white">
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- Testimonials Section -->
294
+ <section id="testimonials" class="py-20 bg-gray-50">
295
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
296
+ <div class="text-center mb-16">
297
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">What Our Customers Say</h2>
298
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Join thousands of satisfied customers who launched their websites with WebCraft.</p>
299
+ </div>
300
+
301
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
302
+ <!-- Testimonial 1 -->
303
+ <div class="bg-white p-8 rounded-xl shadow-md testimonial-card">
304
+ <div class="flex items-center mb-4">
305
+ <div class="flex-shrink-0">
306
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
307
+ </div>
308
+ <div class="ml-4">
309
+ <div class="font-medium text-gray-900">Sarah Johnson</div>
310
+ <div class="text-indigo-600">Creative Director</div>
311
+ </div>
312
+ </div>
313
+ <div class="text-gray-600">
314
+ <p>"I was able to launch our agency website in just one afternoon. The template was exactly what we needed and the customization options let us make it truly ours."</p>
315
+ </div>
316
+ <div class="mt-4 flex">
317
+ <i class="fas fa-star text-yellow-400"></i>
318
+ <i class="fas fa-star text-yellow-400"></i>
319
+ <i class="fas fa-star text-yellow-400"></i>
320
+ <i class="fas fa-star text-yellow-400"></i>
321
+ <i class="fas fa-star text-yellow-400"></i>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Testimonial 2 -->
326
+ <div class="bg-white p-8 rounded-xl shadow-md testimonial-card">
327
+ <div class="flex items-center mb-4">
328
+ <div class="flex-shrink-0">
329
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Michael Chen">
330
+ </div>
331
+ <div class="ml-4">
332
+ <div class="font-medium text-gray-900">Michael Chen</div>
333
+ <div class="text-indigo-600">E-commerce Entrepreneur</div>
334
+ </div>
335
+ </div>
336
+ <div class="text-gray-600">
337
+ <p>"The e-commerce template saved me weeks of development time. It had all the features I needed and the support team helped me integrate my payment gateway."</p>
338
+ </div>
339
+ <div class="mt-4 flex">
340
+ <i class="fas fa-star text-yellow-400"></i>
341
+ <i class="fas fa-star text-yellow-400"></i>
342
+ <i class="fas fa-star text-yellow-400"></i>
343
+ <i class="fas fa-star text-yellow-400"></i>
344
+ <i class="fas fa-star text-yellow-400"></i>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Testimonial 3 -->
349
+ <div class="bg-white p-8 rounded-xl shadow-md testimonial-card">
350
+ <div class="flex items-center mb-4">
351
+ <div class="flex-shrink-0">
352
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
353
+ </div>
354
+ <div class="ml-4">
355
+ <div class="font-medium text-gray-900">Emma Rodriguez</div>
356
+ <div class="text-indigo-600">Photographer</div>
357
+ </div>
358
+ </div>
359
+ <div class="text-gray-600">
360
+ <p>"As a photographer, my portfolio is everything. The portfolio template showcases my work beautifully and I get compliments on it all the time."</p>
361
+ </div>
362
+ <div class="mt-4 flex">
363
+ <i class="fas fa-star text-yellow-400"></i>
364
+ <i class="fas fa-star text-yellow-400"></i>
365
+ <i class="fas fa-star text-yellow-400"></i>
366
+ <i class="fas fa-star text-yellow-400"></i>
367
+ <i class="fas fa-star text-yellow-400"></i>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="mt-12 text-center">
373
+ <div class="inline-flex space-x-4">
374
+ <button class="w-3 h-3 rounded-full bg-indigo-600"></button>
375
+ <button class="w-3 h-3 rounded-full bg-gray-300"></button>
376
+ <button class="w-3 h-3 rounded-full bg-gray-300"></button>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Pricing Section -->
383
+ <section id="pricing" class="py-20 bg-white">
384
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
385
+ <div class="text-center mb-16">
386
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Simple, Transparent Pricing</h2>
387
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose the plan that works best for your business.</p>
388
+ </div>
389
+
390
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
391
+ <!-- Basic Plan -->
392
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden pricing-card transition duration-300 ease-in-out">
393
+ <div class="px-6 py-8">
394
+ <h3 class="text-lg font-medium text-gray-900">Basic</h3>
395
+ <div class="mt-4 flex items-baseline">
396
+ <span class="text-4xl font-extrabold text-gray-900">$29</span>
397
+ <span class="ml-1 text-lg font-medium text-gray-500">/template</span>
398
+ </div>
399
+ <p class="mt-4 text-gray-500">Perfect for personal projects and small businesses.</p>
400
+ </div>
401
+ <div class="border-t border-gray-200 px-6 pt-6 pb-8">
402
+ <ul class="space-y-4">
403
+ <li class="flex items-start">
404
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
405
+ <span class="text-gray-700">1 Website License</span>
406
+ </li>
407
+ <li class="flex items-start">
408
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
409
+ <span class="text-gray-700">Basic Customization</span>
410
+ </li>
411
+ <li class="flex items-start">
412
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
413
+ <span class="text-gray-700">Email Support</span>
414
+ </li>
415
+ <li class="flex items-start">
416
+ <i class="fas fa-times text-gray-400 mt-1 mr-3"></i>
417
+ <span class="text-gray-500">Premium Support</span>
418
+ </li>
419
+ <li class="flex items-start">
420
+ <i class="fas fa-times text-gray-400 mt-1 mr-3"></i>
421
+ <span class="text-gray-500">Future Updates</span>
422
+ </li>
423
+ </ul>
424
+ <div class="mt-8">
425
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Pro Plan -->
431
+ <div class="bg-white rounded-xl shadow-2xl overflow-hidden border-2 border-indigo-500 transform scale-105 pricing-card transition duration-300 ease-in-out">
432
+ <div class="px-6 py-8 bg-indigo-50">
433
+ <div class="flex justify-between items-center">
434
+ <h3 class="text-lg font-medium text-gray-900">Pro</h3>
435
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Popular</span>
436
+ </div>
437
+ <div class="mt-4 flex items-baseline">
438
+ <span class="text-4xl font-extrabold text-gray-900">$79</span>
439
+ <span class="ml-1 text-lg font-medium text-gray-500">/template</span>
440
+ </div>
441
+ <p class="mt-4 text-gray-500">Ideal for growing businesses and professionals.</p>
442
+ </div>
443
+ <div class="border-t border-gray-200 px-6 pt-6 pb-8">
444
+ <ul class="space-y-4">
445
+ <li class="flex items-start">
446
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
447
+ <span class="text-gray-700">3 Website Licenses</span>
448
+ </li>
449
+ <li class="flex items-start">
450
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
451
+ <span class="text-gray-700">Advanced Customization</span>
452
+ </li>
453
+ <li class="flex items-start">
454
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
455
+ <span class="text-gray-700">Priority Email Support</span>
456
+ </li>
457
+ <li class="flex items-start">
458
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
459
+ <span class="text-gray-700">1 Year of Updates</span>
460
+ </li>
461
+ <li class="flex items-start">
462
+ <i class="fas fa-times text-gray-400 mt-1 mr-3"></i>
463
+ <span class="text-gray-500">Dedicated Account Manager</span>
464
+ </li>
465
+ </ul>
466
+ <div class="mt-8">
467
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Enterprise Plan -->
473
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden pricing-card transition duration-300 ease-in-out">
474
+ <div class="px-6 py-8">
475
+ <h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
476
+ <div class="mt-4 flex items-baseline">
477
+ <span class="text-4xl font-extrabold text-gray-900">$199</span>
478
+ <span class="ml-1 text-lg font-medium text-gray-500">/template</span>
479
+ </div>
480
+ <p class="mt-4 text-gray-500">For agencies and large organizations.</p>
481
+ </div>
482
+ <div class="border-t border-gray-200 px-6 pt-6 pb-8">
483
+ <ul class="space-y-4">
484
+ <li class="flex items-start">
485
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
486
+ <span class="text-gray-700">Unlimited Licenses</span>
487
+ </li>
488
+ <li class="flex items-start">
489
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
490
+ <span class="text-gray-700">White-label Options</span>
491
+ </li>
492
+ <li class="flex items-start">
493
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
494
+ <span class="text-gray-700">24/7 Priority Support</span>
495
+ </li>
496
+ <li class="flex items-start">
497
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
498
+ <span class="text-gray-700">Lifetime Updates</span>
499
+ </li>
500
+ <li class="flex items-start">
501
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
502
+ <span class="text-gray-700">Dedicated Account Manager</span>
503
+ </li>
504
+ </ul>
505
+ <div class="mt-8">
506
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">Get Started</button>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="mt-12 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto">
513
+ <div class="md:flex md:items-center md:justify-between">
514
+ <div class="md:w-2/3">
515
+ <h3 class="text-xl font-bold text-gray-900">Need a custom solution?</h3>
516
+ <p class="mt-2 text-gray-600">We offer custom template development and white-label solutions for agencies.</p>
517
+ </div>
518
+ <div class="mt-4 md:mt-0">
519
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Contact Sales</button>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </section>
525
+
526
+ <!-- CTA Section -->
527
+ <section class="gradient-bg py-20">
528
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
529
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">Ready to Launch Your Website?</h2>
530
+ <p class="mt-4 max-w-2xl text-xl text-indigo-100 mx-auto">Join thousands of businesses who launched their online presence with WebCraft.</p>
531
+ <div class="mt-8 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
532
+ <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-4 rounded-lg text-lg font-semibold shadow-lg transition duration-150 ease-in-out">Browse All Templates</button>
533
+ <button class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-8 py-4 rounded-lg text-lg font-semibold transition duration-150 ease-in-out">Schedule a Demo</button>
534
+ </div>
535
+ </div>
536
+ </section>
537
+
538
+ <!-- Footer -->
539
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
540
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
541
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
542
+ <div>
543
+ <h3 class="text-lg font-semibold mb-4">WebCraft</h3>
544
+ <p class="text-gray-400">Premium website templates for businesses and professionals.</p>
545
+ <div class="mt-4 flex space-x-4">
546
+ <a href="#" class="text-gray-400 hover:text-white">
547
+ <i class="fab fa-twitter"></i>
548
+ </a>
549
+ <a href="#" class="text-gray-400 hover:text-white">
550
+ <i class="fab fa-facebook-f"></i>
551
+ </a>
552
+ <a href="#" class="text-gray-400 hover:text-white">
553
+ <i class="fab fa-instagram"></i>
554
+ </a>
555
+ <a href="#" class="text-gray-400 hover:text-white">
556
+ <i class="fab fa-linkedin-in"></i>
557
+ </a>
558
+ </div>
559
+ </div>
560
+
561
+ <div>
562
+ <h3 class="text-lg font-semibold mb-4">Products</h3>
563
+ <ul class="space-y-2">
564
+ <li><a href="#" class="text-gray-400 hover:text-white">All Templates</a></li>
565
+ <li><a href="#" class="text-gray-400 hover:text-white">Popular Templates</a></li>
566
+ <li><a href="#" class="text-gray-400 hover:text-white">New Releases</a></li>
567
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
568
+ </ul>
569
+ </div>
570
+
571
+ <div>
572
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
573
+ <ul class="space-y-2">
574
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
575
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
577
+ <li><a href="#" class="text-gray-400 hover:text-white">Support Center</a></li>
578
+ </ul>
579
+ </div>
580
+
581
+ <div>
582
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
583
+ <ul class="space-y-2">
584
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
586
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
587
+ <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
588
+ </ul>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
593
+ <p class="text-gray-400">© 2023 WebCraft. All rights reserved.</p>
594
+ <div class="mt-4 md:mt-0 flex space-x-6">
595
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
596
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
597
+ <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </footer>
602
+
603
+ <script>
604
+ // Simple JavaScript for mobile menu toggle
605
+ document.addEventListener('DOMContentLoaded', function() {
606
+ const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
607
+ const mobileMenu = document.createElement('div');
608
+ mobileMenu.id = 'mobile-menu';
609
+ mobileMenu.className = 'hidden sm:hidden bg-white shadow-lg absolute top-16 left-0 right-0 z-20';
610
+ mobileMenu.innerHTML = `
611
+ <div class="px-2 pt-2 pb-3 space-y-1">
612
+ <a href="#templates" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-50">Templates</a>
613
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Features</a>
614
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Pricing</a>
615
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Testimonials</a>
616
+ <div class="mt-4 pt-4 border-t border-gray-200">
617
+ <button class="block w-full text-center bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-base font-medium">Get Started</button>
618
+ </div>
619
+ </div>
620
+ `;
621
+ document.body.appendChild(mobileMenu);
622
+
623
+ mobileMenuButton.addEventListener('click', function() {
624
+ const isExpanded = this.getAttribute('aria-expanded') === 'true';
625
+ this.setAttribute('aria-expanded', !isExpanded);
626
+ mobileMenu.classList.toggle('hidden');
627
+ });
628
+
629
+ // Smooth scrolling for anchor links
630
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
631
+ anchor.addEventListener('click', function (e) {
632
+ e.preventDefault();
633
+
634
+ const targetId = this.getAttribute('href');
635
+ if (targetId === '#') return;
636
+
637
+ const targetElement = document.querySelector(targetId);
638
+ if (targetElement) {
639
+ window.scrollTo({
640
+ top: targetElement.offsetTop - 80,
641
+ behavior: 'smooth'
642
+ });
643
+
644
+ // Close mobile menu if open
645
+ if (!mobileMenu.classList.contains('hidden')) {
646
+ mobileMenuButton.setAttribute('aria-expanded', 'false');
647
+ mobileMenu.classList.add('hidden');
648
+ }
649
+ }
650
+ });
651
+ });
652
+ });
653
+ </script>
654
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chatkenneth/webcraft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
655
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a saas that sell premade website, you can use data here: https://lessclicks.site/