Hugging Face's logo

Spaces:
Pablassso
/
deepsite-project
Running

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

be more creative with layouts, use Montsserat and K2 for fonts, make more easy to compare

Browse files
Files changed (2) hide show
  1. index.html +155 -44
  2. pricing.html +54 -28
index.html CHANGED
@@ -6,8 +6,21 @@
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Modern Static Space</title>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
9
  <script src="https://cdn.tailwindcss.com"></script>
10
- <style>
 
 
 
 
 
 
 
 
 
 
11
  .hero-gradient {
12
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
  }
@@ -61,68 +74,166 @@
61
  </div>
62
  </div>
63
  </section>
64
-
65
- <section id="pricing" class="py-16 bg-gray-100">
66
  <div class="container mx-auto px-6">
67
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Simple Pricing</h2>
68
- <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
69
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
 
 
 
 
 
 
 
 
 
 
70
  <div class="p-8">
71
- <h3 class="text-xl font-semibold mb-2">Basic</h3>
72
- <p class="text-gray-600 mb-6">Perfect for getting started</p>
73
- <div class="text-4xl font-bold mb-6">$9<span class="text-lg text-gray-500">/month</span></div>
74
- <ul class="mb-8 space-y-3">
75
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 1 Website</li>
76
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5GB Storage</li>
77
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic Support</li>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </ul>
79
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition duration-300">Get Started</button>
80
  </div>
81
  </div>
82
- <div class="bg-white rounded-lg shadow-lg overflow-hidden transform scale-105 relative">
83
- <div class="absolute top-0 right-0 bg-purple-600 text-white px-4 py-1 text-sm font-semibold rounded-bl">Popular</div>
 
 
84
  <div class="p-8">
85
- <h3 class="text-xl font-semibold mb-2">Pro</h3>
86
- <p class="text-gray-600 mb-6">For growing businesses</p>
87
- <div class="text-4xl font-bold mb-6">$29<span class="text-lg text-gray-500">/month</span></div>
88
- <ul class="mb-8 space-y-3">
89
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5 Websites</li>
90
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 50GB Storage</li>
91
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Priority Support</li>
92
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Analytics</li>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  </ul>
94
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition duration-300">Get Started</button>
95
  </div>
96
  </div>
97
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
 
 
98
  <div class="p-8">
99
- <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
100
- <p class="text-gray-600 mb-6">For large scale projects</p>
101
- <div class="text-4xl font-bold mb-6">$99<span class="text-lg text-gray-500">/month</span></div>
102
- <ul class="mb-8 space-y-3">
103
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited Websites</li>
104
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 500GB Storage</li>
105
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 24/7 Support</li>
106
- <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Custom Domains</li>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </ul>
108
- <button class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition duration-300">Get Started</button>
109
  </div>
110
  </div>
111
  </div>
 
 
 
 
 
 
 
112
  </div>
113
  </section>
114
-
115
- <section class="py-16">
116
  <div class="container mx-auto px-6 text-center">
117
- <h2 class="text-3xl font-bold text-gray-800 mb-8">Ready to get started?</h2>
118
- <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers using our platform.</p>
119
- <button class="bg-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition duration-300">
120
- Sign Up Now
121
- </button>
 
 
 
 
 
122
  </div>
123
  </section>
124
-
125
- <footer class="bg-gray-800 text-white py-12">
126
  <div class="container mx-auto px-6">
127
  <div class="grid md:grid-cols-4 gap-8">
128
  <div>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Modern Static Space</title>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=K2D:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
12
  <script src="https://cdn.tailwindcss.com"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ fontFamily: {
17
+ sans: ['Montserrat', 'sans-serif'],
18
+ heading: ['K2D', 'sans-serif'],
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
  .hero-gradient {
25
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
26
  }
 
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>
81
+
82
+ <div class="flex justify-center mb-8">
83
+ <div class="inline-flex bg-white rounded-full p-1 shadow-sm">
84
+ <button class="px-6 py-2 rounded-full font-medium bg-purple-600 text-white">Monthly</button>
85
+ <button class="px-6 py-2 rounded-full font-medium text-gray-700">Annual (Save 20%)</button>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
90
+ <!-- Basic Plan -->
91
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 transition-all hover:shadow-xl">
92
  <div class="p-8">
93
+ <div class="flex items-center mb-4">
94
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
95
+ <i class="fas fa-rocket text-purple-600 text-xl"></i>
96
+ </div>
97
+ <h3 class="font-heading text-2xl font-bold">Starter</h3>
98
+ </div>
99
+ <p class="text-gray-500 mb-6">Ideal for individuals getting started</p>
100
+ <div class="mb-8">
101
+ <span class="text-5xl font-bold text-gray-900">$9</span>
102
+ <span class="text-gray-500">/month</span>
103
+ </div>
104
+ <button class="w-full bg-gray-100 text-purple-600 font-semibold py-4 rounded-lg hover:bg-purple-600 hover:text-white transition duration-300 mb-8">
105
+ Get Started
106
+ </button>
107
+ <ul class="space-y-4">
108
+ <li class="flex items-start">
109
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
110
+ <span>1 Website</span>
111
+ </li>
112
+ <li class="flex items-start">
113
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
114
+ <span>5GB Storage</span>
115
+ </li>
116
+ <li class="flex items-start">
117
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
118
+ <span>Basic Support</span>
119
+ </li>
120
  </ul>
 
121
  </div>
122
  </div>
123
+
124
+ <!-- Popular Plan -->
125
+ <div class="bg-purple-600 text-white rounded-2xl shadow-2xl overflow-hidden transform scale-105 relative">
126
+ <div class="absolute top-0 right-0 bg-yellow-400 text-purple-900 px-4 py-1 font-bold rounded-bl-lg">BEST VALUE</div>
127
  <div class="p-8">
128
+ <div class="flex items-center mb-4">
129
+ <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
130
+ <i class="fas fa-star text-white text-xl"></i>
131
+ </div>
132
+ <h3 class="font-heading text-2xl font-bold">Professional</h3>
133
+ </div>
134
+ <p class="text-purple-200 mb-6">Perfect for growing businesses</p>
135
+ <div class="mb-8">
136
+ <span class="text-5xl font-bold">$29</span>
137
+ <span class="text-purple-200">/month</span>
138
+ </div>
139
+ <button class="w-full bg-white text-purple-600 font-semibold py-4 rounded-lg hover:bg-gray-100 transition duration-300 mb-8">
140
+ Get Started
141
+ </button>
142
+ <ul class="space-y-4">
143
+ <li class="flex items-start">
144
+ <i class="fas fa-check text-yellow-400 mt-1 mr-3"></i>
145
+ <span>5 Websites</span>
146
+ </li>
147
+ <li class="flex items-start">
148
+ <i class="fas fa-check text-yellow-400 mt-1 mr-3"></i>
149
+ <span>50GB Storage</span>
150
+ </li>
151
+ <li class="flex items-start">
152
+ <i class="fas fa-check text-yellow-400 mt-1 mr-3"></i>
153
+ <span>Priority Support</span>
154
+ </li>
155
+ <li class="flex items-start">
156
+ <i class="fas fa-check text-yellow-400 mt-1 mr-3"></i>
157
+ <span>Advanced Analytics</span>
158
+ </li>
159
+ <li class="flex items-start">
160
+ <i class="fas fa-check text-yellow-400 mt-1 mr-3"></i>
161
+ <span>Custom Domain</span>
162
+ </li>
163
  </ul>
 
164
  </div>
165
  </div>
166
+
167
+ <!-- Enterprise Plan -->
168
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 transition-all hover:shadow-xl">
169
  <div class="p-8">
170
+ <div class="flex items-center mb-4">
171
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
172
+ <i class="fas fa-globe text-purple-600 text-xl"></i>
173
+ </div>
174
+ <h3 class="font-heading text-2xl font-bold">Enterprise</h3>
175
+ </div>
176
+ <p class="text-gray-500 mb-6">For large scale projects</p>
177
+ <div class="mb-8">
178
+ <span class="text-5xl font-bold text-gray-900">$99</span>
179
+ <span class="text-gray-500">/month</span>
180
+ </div>
181
+ <button class="w-full bg-gray-100 text-purple-600 font-semibold py-4 rounded-lg hover:bg-purple-600 hover:text-white transition duration-300 mb-8">
182
+ Get Started
183
+ </button>
184
+ <ul class="space-y-4">
185
+ <li class="flex items-start">
186
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
187
+ <span>Unlimited Websites</span>
188
+ </li>
189
+ <li class="flex items-start">
190
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
191
+ <span>500GB Storage</span>
192
+ </li>
193
+ <li class="flex items-start">
194
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
195
+ <span>24/7 Premium Support</span>
196
+ </li>
197
+ <li class="flex items-start">
198
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
199
+ <span>Advanced Analytics</span>
200
+ </li>
201
+ <li class="flex items-start">
202
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
203
+ <span>Custom Domains</span>
204
+ </li>
205
+ <li class="flex items-start">
206
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
207
+ <span>Team Collaboration</span>
208
+ </li>
209
  </ul>
 
210
  </div>
211
  </div>
212
  </div>
213
+
214
+ <div class="mt-16 text-center">
215
+ <p class="text-gray-600 mb-4">Need something custom? We've got you covered.</p>
216
+ <button class="inline-flex items-center text-purple-600 font-semibold hover:text-purple-800">
217
+ Contact Sales <i class="fas fa-arrow-right ml-2"></i>
218
+ </button>
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>
236
+ <footer class="bg-gray-800 text-white py-12">
 
237
  <div class="container mx-auto px-6">
238
  <div class="grid md:grid-cols-4 gap-8">
239
  <div>
pricing.html CHANGED
@@ -4,8 +4,21 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Pricing Plans</title>
 
 
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <style>
 
 
 
 
 
 
 
 
 
 
9
  .pricing-card:hover {
10
  transform: translateY(-10px);
11
  }
@@ -13,17 +26,24 @@
13
  </head>
14
  <body class="bg-[#F29155] text-black">
15
  <div class="container mx-auto px-4 py-16">
16
- <h1 class="text-4xl font-bold text-center mb-16">Our Pricing Plans</h1>
17
-
18
- <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
 
 
 
19
  <!-- Minimalist Plan -->
20
- <div class="bg-white rounded-2xl shadow-xl overflow-hidden pricing-card transition duration-300">
21
  <div class="p-8 text-center">
22
- <h3 class="text-2xl font-bold mb-4">MINIMALISTINIS</h3>
23
- <div class="text-3xl font-bold mb-6">1 VAL</div>
24
- <p class="mb-6 font-medium">TRUKMĖ</p>
25
-
26
- <ul class="space-y-4 mb-8">
 
 
 
 
27
  <li class="flex items-start">
28
  <span class="mr-2">✓</span>
29
  <span>Pasirinktas personažas</span>
@@ -57,14 +77,19 @@
57
  <span>Fotosesija su personažu</span>
58
  </li>
59
  </ul>
60
-
61
- <button class="w-full bg-[#F29155] text-white py-3 rounded-lg font-bold hover:bg-opacity-90 transition">
62
  Choose Plan
63
  </button>
64
- </div>
65
- </div>
66
 
67
- <!-- Standard Plan -->
 
 
 
 
 
 
 
68
  <div class="bg-white rounded-2xl shadow-2xl overflow-hidden pricing-card transform scale-105 relative transition duration-300">
69
  <div class="absolute top-0 right-0 bg-[#F29155] text-white px-4 py-1 rounded-bl-lg font-bold">Popular</div>
70
  <div class="p-8 text-center">
@@ -114,21 +139,23 @@
114
  <span>Dovanos jubiliatui gamyba</span>
115
  </li>
116
  </ul>
117
-
118
- <button class="w-full bg-[#F29155] text-white py-3 rounded-lg font-bold hover:bg-opacity-90 transition">
119
  Choose Plan
120
  </button>
121
- </div>
122
  </div>
123
-
124
  <!-- Entertainment Plan -->
125
- <div class="bg-white rounded-2xl shadow-xl overflow-hidden pricing-card transition duration-300">
126
  <div class="p-8 text-center">
127
- <h3 class="text-2xl font-bold mb-4">PRAMOGINIS</h3>
128
- <div class="text-3xl font-bold mb-6">2 VAL</div>
129
- <p class="mb-6 font-medium">TRUKMĖ</p>
130
-
131
- <ul class="space-y-4 mb-8">
 
 
 
 
132
  <li class="flex items-start">
133
  <span class="mr-2">✓</span>
134
  <span>Pasirinktas personažas</span>
@@ -178,11 +205,10 @@
178
  <span>Laikinos tatuiruotės</span>
179
  </li>
180
  </ul>
181
-
182
- <button class="w-full bg-[#F29155] text-white py-3 rounded-lg font-bold hover:bg-opacity-90 transition">
183
  Choose Plan
184
  </button>
185
- </div>
186
  </div>
187
  </div>
188
  </div>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Pricing Plans</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=K2D:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
10
  <script src="https://cdn.tailwindcss.com"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ fontFamily: {
15
+ sans: ['Montserrat', 'sans-serif'],
16
+ heading: ['K2D', 'sans-serif'],
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <style>
22
  .pricing-card:hover {
23
  transform: translateY(-10px);
24
  }
 
26
  </head>
27
  <body class="bg-[#F29155] text-black">
28
  <div class="container mx-auto px-4 py-16">
29
+ <div class="text-center mb-16">
30
+ <span class="inline-block bg-orange-100 text-orange-800 px-4 py-1 rounded-full text-sm font-semibold mb-4">PLAN COMPARISON</span>
31
+ <h1 class="font-heading text-4xl font-bold mb-4">Choose Your Perfect Plan</h1>
32
+ <p class="text-lg text-gray-700 max-w-2xl mx-auto">Simple pricing that fits your needs and budget</p>
33
+ </div>
34
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
35
  <!-- Minimalist Plan -->
36
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 transition-all hover:shadow-xl">
37
  <div class="p-8 text-center">
38
+ <div class="flex flex-col items-center mb-6">
39
+ <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
40
+ <i class="fas fa-leaf text-orange-500 text-2xl"></i>
41
+ </div>
42
+ <h3 class="font-heading text-2xl font-bold">MINIMALISTINIS</h3>
43
+ </div>
44
+ <div class="text-4xl font-bold mb-2">1 VAL</div>
45
+ <p class="text-gray-500 mb-8">TRUKMĖ</p>
46
+ <ul class="space-y-4 mb-8">
47
  <li class="flex items-start">
48
  <span class="mr-2">✓</span>
49
  <span>Pasirinktas personažas</span>
 
77
  <span>Fotosesija su personažu</span>
78
  </li>
79
  </ul>
80
+ <button class="w-full bg-orange-100 text-orange-600 font-semibold py-4 rounded-lg hover:bg-orange-600 hover:text-white transition duration-300 mb-8">
 
81
  Choose Plan
82
  </button>
83
+ </div>
 
84
 
85
+ <div class="mt-16 text-center">
86
+ <p class="text-gray-700 mb-4">Need a custom solution for your special event?</p>
87
+ <button class="inline-flex items-center text-orange-600 font-semibold hover:text-orange-800">
88
+ Contact Us <i class="fas fa-arrow-right ml-2"></i>
89
+ </button>
90
+ </div>
91
+ </div>
92
+ <!-- Standard Plan -->
93
  <div class="bg-white rounded-2xl shadow-2xl overflow-hidden pricing-card transform scale-105 relative transition duration-300">
94
  <div class="absolute top-0 right-0 bg-[#F29155] text-white px-4 py-1 rounded-bl-lg font-bold">Popular</div>
95
  <div class="p-8 text-center">
 
139
  <span>Dovanos jubiliatui gamyba</span>
140
  </li>
141
  </ul>
142
+ <button class="w-full bg-white text-orange-600 font-semibold py-4 rounded-lg hover:bg-gray-100 transition duration-300 mb-8">
 
143
  Choose Plan
144
  </button>
145
+ </div>
146
  </div>
 
147
  <!-- Entertainment Plan -->
148
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 transition-all hover:shadow-xl">
149
  <div class="p-8 text-center">
150
+ <div class="flex flex-col items-center mb-6">
151
+ <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
152
+ <i class="fas fa-party-horn text-orange-500 text-2xl"></i>
153
+ </div>
154
+ <h3 class="font-heading text-2xl font-bold">PRAMOGINIS</h3>
155
+ </div>
156
+ <div class="text-4xl font-bold mb-2">2 VAL</div>
157
+ <p class="text-gray-500 mb-8">TRUKMĖ</p>
158
+ <ul class="space-y-4 mb-8">
159
  <li class="flex items-start">
160
  <span class="mr-2">✓</span>
161
  <span>Pasirinktas personažas</span>
 
205
  <span>Laikinos tatuiruotės</span>
206
  </li>
207
  </ul>
208
+ <button class="w-full bg-orange-100 text-orange-600 font-semibold py-4 rounded-lg hover:bg-orange-600 hover:text-white transition duration-300 mb-8">
 
209
  Choose Plan
210
  </button>
211
+ </div>
212
  </div>
213
  </div>
214
  </div>