Hugging Face's logo

Spaces:
Pablassso
/
deepsite-project
Running

App Files Community
Pablassso commited on
Commit
cca0612
·
verified ·
1 Parent(s): 5038008

make even more comfortable for use layout, different one

Browse files
Files changed (1) hide show
  1. index.html +155 -41
index.html CHANGED
@@ -31,50 +31,138 @@
31
  </style>
32
  </head>
33
  <body class="bg-gray-50">
34
- <header class="hero-gradient text-white">
35
- <div class="container mx-auto px-6 py-16">
36
- <div class="flex flex-col md:flex-row items-center">
37
- <div class="md:w-1/2 mb-8 md:mb-0">
38
- <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Welcome to Your Modern Static Space</h1>
39
- <p class="text-xl mb-8">A beautiful, responsive platform for your content and sales funnel.</p>
40
- <a href="#pricing" class="bg-white text-purple-700 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300 inline-block">Get Started</a>
41
- </div>
42
- <div class="md:w-1/2">
43
- <img src="http://static.photos/technology/640x360/1" alt="Hero Image" class="rounded-lg shadow-2xl">
 
 
44
  </div>
45
  </div>
 
 
 
46
  </div>
47
  </header>
48
-
49
- <section class="py-16">
50
  <div class="container mx-auto px-6">
51
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Key Features</h2>
52
- <div class="grid md:grid-cols-3 gap-8">
53
- <div class="bg-white rounded-lg shadow-md p-8 card-hover transition duration-300">
54
- <div class="text-purple-600 mb-4">
55
- <i class="fas fa-bolt text-4xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  </div>
57
- <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
58
- <p class="text-gray-600">Static sites load instantly for your visitors with no server delay.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </div>
60
- <div class="bg-white rounded-lg shadow-md p-8 card-hover transition duration-300">
61
- <div class="text-purple-600 mb-4">
62
- <i class="fas fa-shield-alt text-4xl"></i>
63
  </div>
64
- <h3 class="text-xl font-semibold mb-3">Secure</h3>
65
- <p class="text-gray-600">No databases or dynamic code means fewer vulnerabilities.</p>
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
- <div class="bg-white rounded-lg shadow-md p-8 card-hover transition duration-300">
68
- <div class="text-purple-600 mb-4">
69
- <i class="fas fa-chart-line text-4xl"></i>
70
  </div>
71
- <h3 class="text-xl font-semibold mb-3">Scalable</h3>
72
- <p class="text-gray-600">Handle traffic spikes without breaking a sweat.</p>
 
 
 
 
 
 
 
 
 
 
73
  </div>
74
  </div>
75
  </div>
76
  </section>
77
- <section id="pricing" class="py-16 bg-gray-50">
78
  <div class="container mx-auto px-6">
79
  <h2 class="font-heading text-4xl font-bold text-center text-gray-900 mb-4">Choose Your Perfect Plan</h2>
80
  <p class="text-xl text-center text-gray-600 max-w-2xl mx-auto mb-16">Simple, transparent pricing that grows with you</p>
@@ -219,17 +307,43 @@
219
  </div>
220
  </div>
221
  </section>
222
- <section class="py-16 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
223
- <div class="container mx-auto px-6 text-center">
224
- <h2 class="font-heading text-4xl font-bold mb-6">Ready to transform your web presence?</h2>
225
- <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Join over 10,000 businesses that trust our platform.</p>
226
- <div class="flex flex-col sm:flex-row justify-center gap-4">
227
- <button class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition duration-300">
228
- Start Free Trial
229
- </button>
230
- <button class="border-2 border-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">
231
- Schedule Demo
232
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  </div>
234
  </div>
235
  </section>
 
31
  </style>
32
  </head>
33
  <body class="bg-gray-50">
34
+ <header class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white">
35
+ <div class="container mx-auto px-6 py-24">
36
+ <div class="max-w-3xl mx-auto text-center">
37
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Build Better with Modern Static</h1>
38
+ <p class="text-xl md:text-2xl mb-10 opacity-90">The simplest way to create blazing fast websites with no server headaches</p>
39
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
40
+ <a href="#pricing" class="bg-white text-purple-700 font-semibold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 inline-block text-lg">
41
+ Get Started
42
+ </a>
43
+ <a href="#features" class="border-2 border-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300 inline-block text-lg">
44
+ Explore Features
45
+ </a>
46
  </div>
47
  </div>
48
+ <div class="mt-20 max-w-5xl mx-auto">
49
+ <img src="http://static.photos/technology/1024x576/5" alt="Hero Image" class="rounded-xl shadow-2xl w-full">
50
+ </div>
51
  </div>
52
  </header>
53
+ <section id="features" class="py-20 bg-gray-50">
 
54
  <div class="container mx-auto px-6">
55
+ <div class="max-w-3xl mx-auto text-center mb-16">
56
+ <h2 class="text-4xl font-bold text-gray-900 mb-4">Everything You Need to Succeed</h2>
57
+ <p class="text-xl text-gray-600">Our platform provides all the tools to build, launch, and grow your online presence</p>
58
+ </div>
59
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
60
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
61
+ <div class="text-purple-600 mb-6">
62
+ <i class="fas fa-bolt text-5xl"></i>
63
+ </div>
64
+ <h3 class="text-2xl font-bold mb-4">Lightning Fast</h3>
65
+ <p class="text-gray-600 text-lg">Static sites load instantly with our global CDN, keeping visitors engaged.</p>
66
+ <ul class="mt-6 space-y-3">
67
+ <li class="flex items-start">
68
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
69
+ <span>90+ PageSpeed score</span>
70
+ </li>
71
+ <li class="flex items-start">
72
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
73
+ <span>Global edge network</span>
74
+ </li>
75
+ </ul>
76
+ </div>
77
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
78
+ <div class="text-purple-600 mb-6">
79
+ <i class="fas fa-shield-alt text-5xl"></i>
80
  </div>
81
+ <h3 class="text-2xl font-bold mb-4">Secure by Design</h3>
82
+ <p class="text-gray-600 text-lg">Built-in security features protect your site from threats.</p>
83
+ <ul class="mt-6 space-y-3">
84
+ <li class="flex items-start">
85
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
86
+ <span>Automatic HTTPS</span>
87
+ </li>
88
+ <li class="flex items-start">
89
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
90
+ <span>DDoS protection</span>
91
+ </li>
92
+ </ul>
93
+ </div>
94
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
95
+ <div class="text-purple-600 mb-6">
96
+ <i class="fas fa-chart-line text-5xl"></i>
97
+ </div>
98
+ <h3 class="text-2xl font-bold mb-4">Powerful Analytics</h3>
99
+ <p class="text-gray-600 text-lg">Understand your visitors with built-in privacy-focused analytics.</p>
100
+ <ul class="mt-6 space-y-3">
101
+ <li class="flex items-start">
102
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
103
+ <span>Real-time stats</span>
104
+ </li>
105
+ <li class="flex items-start">
106
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
107
+ <span>Traffic sources</span>
108
+ </li>
109
+ </ul>
110
+ </div>
111
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
112
+ <div class="text-purple-600 mb-6">
113
+ <i class="fas fa-mobile-alt text-5xl"></i>
114
+ </div>
115
+ <h3 class="text-2xl font-bold mb-4">Mobile Optimized</h3>
116
+ <p class="text-gray-600 text-lg">All sites are automatically responsive on any device.</p>
117
+ <ul class="mt-6 space-y-3">
118
+ <li class="flex items-start">
119
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
120
+ <span>Perfect on all screens</span>
121
+ </li>
122
+ <li class="flex items-start">
123
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
124
+ <span>Touch optimized</span>
125
+ </li>
126
+ </ul>
127
  </div>
128
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
129
+ <div class="text-purple-600 mb-6">
130
+ <i class="fas fa-sync-alt text-5xl"></i>
131
  </div>
132
+ <h3 class="text-2xl font-bold mb-4">Continuous Updates</h3>
133
+ <p class="text-gray-600 text-lg">Your site stays fresh with automatic updates and deployments.</p>
134
+ <ul class="mt-6 space-y-3">
135
+ <li class="flex items-start">
136
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
137
+ <span>Git integration</span>
138
+ </li>
139
+ <li class="flex items-start">
140
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
141
+ <span>Instant previews</span>
142
+ </li>
143
+ </ul>
144
  </div>
145
+ <div class="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100">
146
+ <div class="text-purple-600 mb-6">
147
+ <i class="fas fa-headset text-5xl"></i>
148
  </div>
149
+ <h3 class="text-2xl font-bold mb-4">24/7 Support</h3>
150
+ <p class="text-gray-600 text-lg">Our team is always available to help you succeed.</p>
151
+ <ul class="mt-6 space-y-3">
152
+ <li class="flex items-start">
153
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
154
+ <span>Live chat</span>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
158
+ <span>Documentation</span>
159
+ </li>
160
+ </ul>
161
  </div>
162
  </div>
163
  </div>
164
  </section>
165
+ <section id="pricing" class="py-16 bg-gray-50">
166
  <div class="container mx-auto px-6">
167
  <h2 class="font-heading text-4xl font-bold text-center text-gray-900 mb-4">Choose Your Perfect Plan</h2>
168
  <p class="text-xl text-center text-gray-600 max-w-2xl mx-auto mb-16">Simple, transparent pricing that grows with you</p>
 
307
  </div>
308
  </div>
309
  </section>
310
+ <section class="py-20 bg-gray-900 text-white">
311
+ <div class="container mx-auto px-6">
312
+ <div class="max-w-4xl mx-auto text-center">
313
+ <h2 class="text-4xl font-bold mb-6">Join 15,000+ Happy Customers</h2>
314
+ <p class="text-xl text-gray-300 mb-12">See what our customers say about building with Modern Static</p>
315
+
316
+ <div class="grid md:grid-cols-2 gap-10 mb-16">
317
+ <div class="bg-gray-800 p-8 rounded-xl">
318
+ <div class="flex items-center mb-6">
319
+ <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
320
+ <div>
321
+ <h4 class="font-bold">Sarah Johnson</h4>
322
+ <p class="text-gray-400">Marketing Director</p>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-300 italic">"Migrating our site to Modern Static reduced our load times by 80% and improved our conversion rates dramatically."</p>
326
+ </div>
327
+ <div class="bg-gray-800 p-8 rounded-xl">
328
+ <div class="flex items-center mb-6">
329
+ <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
330
+ <div>
331
+ <h4 class="font-bold">Michael Chen</h4>
332
+ <p class="text-gray-400">Startup Founder</p>
333
+ </div>
334
+ </div>
335
+ <p class="text-gray-300 italic">"As a non-technical founder, I love how easy it is to update my site without needing a developer."</p>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="flex flex-col sm:flex-row justify-center gap-6">
340
+ <a href="#pricing" class="bg-purple-600 text-white px-10 py-5 rounded-full font-semibold hover:bg-purple-700 transition duration-300 text-lg flex items-center justify-center">
341
+ <i class="fas fa-rocket mr-3"></i> Start Free Trial
342
+ </a>
343
+ <a href="#" class="border-2 border-white px-10 py-5 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300 text-lg flex items-center justify-center">
344
+ <i class="fas fa-comment-dots mr-3"></i> Chat with Sales
345
+ </a>
346
+ </div>
347
  </div>
348
  </div>
349
  </section>