Hugging Face's logo

Spaces:
sobansameer
/
quantumcart-e-commerce-evolution
Running

App Files Community
sobansameer commited on
Commit
d219551
·
verified ·
1 Parent(s): 964fbfc

Make me website

Browse files
Files changed (4) hide show
  1. contact.html +219 -0
  2. features.html +166 -0
  3. index.html +5 -5
  4. pricing.html +240 -0
contact.html ADDED
@@ -0,0 +1,219 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Contact | QuantumCart</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .contact-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .contact-card:hover {
18
+ transform: translateY(-5px);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <!-- Navigation -->
24
+ <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
25
+ <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
26
+ <div class="flex items-center space-x-2">
27
+ <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
28
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
29
+ </div>
30
+ <div class="hidden md:flex space-x-8">
31
+ <a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
32
+ <a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
33
+ <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
34
+ <a href="contact.html" class="text-purple-600 font-medium transition">Contact</a>
35
+ </div>
36
+ <button class="md:hidden text-gray-600">
37
+ <i data-feather="menu"></i>
38
+ </button>
39
+ </div>
40
+ </nav>
41
+
42
+ <!-- Hero Section -->
43
+ <section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
44
+ <div class="container mx-auto px-4 md:px-6 text-center">
45
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Get In <span class="bg-white text-purple-600 px-2 rounded-lg">Touch</span></h1>
46
+ <p class="text-xl max-w-3xl mx-auto opacity-90">
47
+ Have questions or need support? Our team is here to help you with anything you need.
48
+ </p>
49
+ </div>
50
+ </section>
51
+
52
+ <!-- Contact Section -->
53
+ <section class="py-16">
54
+ <div class="container mx-auto px-4 md:px-6">
55
+ <div class="grid md:grid-cols-2 gap-12">
56
+ <!-- Contact Form -->
57
+ <div class="bg-white p-8 rounded-xl shadow-sm">
58
+ <h2 class="text-2xl font-bold mb-6">Send us a message</h2>
59
+ <form class="space-y-6">
60
+ <div>
61
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
62
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
63
+ </div>
64
+ <div>
65
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
66
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
67
+ </div>
68
+ <div>
69
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
70
+ <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
71
+ <option>General Inquiry</option>
72
+ <option>Sales Question</option>
73
+ <option>Technical Support</option>
74
+ <option>Billing Question</option>
75
+ </select>
76
+ </div>
77
+ <div>
78
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
79
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"></textarea>
80
+ </div>
81
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">
82
+ Send Message
83
+ </button>
84
+ </form>
85
+ </div>
86
+
87
+ <!-- Contact Info -->
88
+ <div>
89
+ <div class="space-y-8">
90
+ <!-- Contact Card 1 -->
91
+ <div class="contact-card bg-white p-8 rounded-xl shadow-sm">
92
+ <div class="flex items-center mb-4">
93
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
94
+ <i data-feather="mail" class="text-purple-600 w-5 h-5"></i>
95
+ </div>
96
+ <h3 class="text-xl font-bold">Email Us</h3>
97
+ </div>
98
+ <p class="text-gray-600 mb-2">For general inquiries:</p>
99
+ <a href="mailto:info@quantumcart.com" class="text-purple-600 font-medium">info@quantumcart.com</a>
100
+ <p class="text-gray-600 mt-4 mb-2">For support:</p>
101
+ <a href="mailto:support@quantumcart.com" class="text-purple-600 font-medium">support@quantumcart.com</a>
102
+ </div>
103
+
104
+ <!-- Contact Card 2 -->
105
+ <div class="contact-card bg-white p-8 rounded-xl shadow-sm">
106
+ <div class="flex items-center mb-4">
107
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
108
+ <i data-feather="phone" class="text-purple-600 w-5 h-5"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold">Call Us</h3>
111
+ </div>
112
+ <p class="text-gray-600 mb-2">Monday to Friday, 9am to 5pm EST</p>
113
+ <a href="tel:+18005551234" class="text-purple-600 font-medium">+1 (800) 555-1234</a>
114
+ </div>
115
+
116
+ <!-- Contact Card 3 -->
117
+ <div class="contact-card bg-white p-8 rounded-xl shadow-sm">
118
+ <div class="flex items-center mb-4">
119
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
120
+ <i data-feather="map-pin" class="text-purple-600 w-5 h-5"></i>
121
+ </div>
122
+ <h3 class="text-xl font-bold">Visit Us</h3>
123
+ </div>
124
+ <p class="text-gray-600 mb-2">Our headquarters:</p>
125
+ <address class="not-italic">
126
+ <p>123 Tech Park Drive</p>
127
+ <p>San Francisco, CA 94107</p>
128
+ <p>United States</p>
129
+ </address>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- FAQ Section -->
138
+ <section class="py-16 bg-white">
139
+ <div class="container mx-auto px-4 md:px-6">
140
+ <h2 class="text-3xl font-bold text-center mb-12">Need Help <span class="text-purple-600">Faster?</span></h2>
141
+
142
+ <div class="max-w-4xl mx-auto space-y-6">
143
+ <div class="border border-gray-200 rounded-lg p-6">
144
+ <h3 class="text-xl font-medium mb-2">Check our knowledge base</h3>
145
+ <p class="text-gray-600 mb-4">We've compiled answers to the most common questions in our comprehensive knowledge base.</p>
146
+ <a href="#" class="inline-flex items-center text-purple-600 font-medium">
147
+ Visit Help Center
148
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
149
+ </a>
150
+ </div>
151
+
152
+ <div class="border border-gray-200 rounded-lg p-6">
153
+ <h3 class="text-xl font-medium mb-2">Join our community</h3>
154
+ <p class="text-gray-600 mb-4">Connect with other QuantumCart users and get help from our active community.</p>
155
+ <a href="#" class="inline-flex items-center text-purple-600 font-medium">
156
+ Join Community Forum
157
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
158
+ </a>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- Footer -->
165
+ <footer class="bg-gray-900 text-gray-400 py-12">
166
+ <div class="container mx-auto px-4 md:px-6">
167
+ <div class="grid md:grid-cols-4 gap-8">
168
+ <div>
169
+ <div class="flex items-center space-x-2 mb-6">
170
+ <i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
171
+ <span class="text-xl font-bold text-white">QuantumCart</span>
172
+ </div>
173
+ <p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
174
+ <div class="flex space-x-4">
175
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
176
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
177
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
178
+ </div>
179
+ </div>
180
+ <div>
181
+ <h4 class="text-white font-medium mb-4">Product</h4>
182
+ <ul class="space-y-2">
183
+ <li><a href="features.html" class="hover:text-white transition">Features</a></li>
184
+ <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
185
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
186
+ </ul>
187
+ </div>
188
+ <div>
189
+ <h4 class="text-white font-medium mb-4">Resources</h4>
190
+ <ul class="space-y-2">
191
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
192
+ <li><a href="#" class="hover:text-white transition">API</a></li>
193
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
194
+ </ul>
195
+ </div>
196
+ <div>
197
+ <h4 class="text-white font-medium mb-4">Company</h4>
198
+ <ul class="space-y-2">
199
+ <li><a href="#" class="hover:text-white transition">About</a></li>
200
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
201
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
202
+ </ul>
203
+ </div>
204
+ </div>
205
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
206
+ <p>© 2023 QuantumCart. All rights reserved.</p>
207
+ <div class="flex space-x-6 mt-4 md:mt-0">
208
+ <a href="#" class="hover:text-white transition">Privacy</a>
209
+ <a href="#" class="hover:text-white transition">Terms</a>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </footer>
214
+
215
+ <script>
216
+ feather.replace();
217
+ </script>
218
+ </body>
219
+ </html>
features.html ADDED
@@ -0,0 +1,166 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Features | QuantumCart</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .feature-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-50">
21
+ <!-- Navigation -->
22
+ <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
23
+ <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
24
+ <div class="flex items-center space-x-2">
25
+ <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
26
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
27
+ </div>
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
30
+ <a href="features.html" class="text-purple-600 font-medium transition">Features</a>
31
+ <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
32
+ <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
33
+ </div>
34
+ <button class="md:hidden text-gray-600">
35
+ <i data-feather="menu"></i>
36
+ </button>
37
+ </div>
38
+ </nav>
39
+
40
+ <!-- Hero Section -->
41
+ <section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
42
+ <div class="container mx-auto px-4 md:px-6 text-center">
43
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Powerful E-Commerce <span class="bg-white text-purple-600 px-2 rounded-lg">Features</span></h1>
44
+ <p class="text-xl max-w-3xl mx-auto opacity-90">
45
+ Explore the cutting-edge capabilities that set QuantumCart apart from traditional e-commerce platforms.
46
+ </p>
47
+ </div>
48
+ </section>
49
+
50
+ <!-- Features Grid -->
51
+ <section class="py-16">
52
+ <div class="container mx-auto px-4 md:px-6">
53
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
54
+ <!-- Feature 1 -->
55
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
56
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
57
+ <i data-feather="cpu" class="text-purple-600 w-6 h-6"></i>
58
+ </div>
59
+ <h3 class="text-xl font-bold mb-3">AI-Powered Recommendations</h3>
60
+ <p class="text-gray-600">Our machine learning algorithms analyze customer behavior to suggest the most relevant products.</p>
61
+ </div>
62
+
63
+ <!-- Feature 2 -->
64
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
65
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
66
+ <i data-feather="repeat" class="text-purple-600 w-6 h-6"></i>
67
+ </div>
68
+ <h3 class="text-xl font-bold mb-3">Automated Inventory</h3>
69
+ <p class="text-gray-600">Never run out of stock with our smart inventory management system.</p>
70
+ </div>
71
+
72
+ <!-- Feature 3 -->
73
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
74
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
75
+ <i data-feather="trending-up" class="text-purple-600 w-6 h-6"></i>
76
+ </div>
77
+ <h3 class="text-xl font-bold mb-3">Dynamic Pricing</h3>
78
+ <p class="text-gray-600">Automatically adjust prices based on demand, competition and inventory levels.</p>
79
+ </div>
80
+
81
+ <!-- Feature 4 -->
82
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
83
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
84
+ <i data-feather="shield" class="text-purple-600 w-6 h-6"></i>
85
+ </div>
86
+ <h3 class="text-xl font-bold mb-3">Fraud Detection</h3>
87
+ <p class="text-gray-600">Advanced algorithms identify and prevent fraudulent transactions.</p>
88
+ </div>
89
+
90
+ <!-- Feature 5 -->
91
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
92
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
93
+ <i data-feather="globe" class="text-purple-600 w-6 h-6"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold mb-3">Multi-Channel Sales</h3>
96
+ <p class="text-gray-600">Manage inventory and orders across multiple sales channels from one dashboard.</p>
97
+ </div>
98
+
99
+ <!-- Feature 6 -->
100
+ <div class="feature-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
101
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
102
+ <i data-feather="bar-chart-2" class="text-purple-600 w-6 h-6"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold mb-3">Advanced Analytics</h3>
105
+ <p class="text-gray-600">Get deep insights into customer behavior and sales performance.</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- Footer -->
112
+ <footer class="bg-gray-900 text-gray-400 py-12">
113
+ <div class="container mx-auto px-4 md:px-6">
114
+ <div class="grid md:grid-cols-4 gap-8">
115
+ <div>
116
+ <div class="flex items-center space-x-2 mb-6">
117
+ <i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
118
+ <span class="text-xl font-bold text-white">QuantumCart</span>
119
+ </div>
120
+ <p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
121
+ <div class="flex space-x-4">
122
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
123
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
124
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
125
+ </div>
126
+ </div>
127
+ <div>
128
+ <h4 class="text-white font-medium mb-4">Product</h4>
129
+ <ul class="space-y-2">
130
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
131
+ <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
132
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
133
+ </ul>
134
+ </div>
135
+ <div>
136
+ <h4 class="text-white font-medium mb-4">Resources</h4>
137
+ <ul class="space-y-2">
138
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
139
+ <li><a href="#" class="hover:text-white transition">API</a></li>
140
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
141
+ </ul>
142
+ </div>
143
+ <div>
144
+ <h4 class="text-white font-medium mb-4">Company</h4>
145
+ <ul class="space-y-2">
146
+ <li><a href="#" class="hover:text-white transition">About</a></li>
147
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
148
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
149
+ </ul>
150
+ </div>
151
+ </div>
152
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
153
+ <p>© 2023 QuantumCart. All rights reserved.</p>
154
+ <div class="flex space-x-6 mt-4 md:mt-0">
155
+ <a href="#" class="hover:text-white transition">Privacy</a>
156
+ <a href="#" class="hover:text-white transition">Terms</a>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </footer>
161
+
162
+ <script>
163
+ feather.replace();
164
+ </script>
165
+ </body>
166
+ </html>
index.html CHANGED
@@ -38,12 +38,12 @@
38
  <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
39
  </div>
40
  <div class="hidden md:flex space-x-8">
41
- <a href="#" class="text-gray-600 hover:text-purple-600 transition">Home</a>
42
- <a href="#" class="text-gray-600 hover:text-purple-600 transition">Features</a>
43
- <a href="#" class="text-gray-600 hover:text-purple-600 transition">Roadmap</a>
44
- <a href="#" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
45
  </div>
46
- <button class="md:hidden text-gray-600">
47
  <i data-feather="menu"></i>
48
  </button>
49
  </div>
 
38
  <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
39
  </div>
40
  <div class="hidden md:flex space-x-8">
41
+ <a href="index.html" class="text-purple-600 font-medium transition">Home</a>
42
+ <a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
43
+ <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
44
+ <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
45
  </div>
46
+ <button class="md:hidden text-gray-600">
47
  <i data-feather="menu"></i>
48
  </button>
49
  </div>
pricing.html ADDED
@@ -0,0 +1,240 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Pricing | QuantumCart</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ }
14
+ .pricing-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .popular-plan {
19
+ border: 2px solid #805ad5;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50">
24
+ <!-- Navigation -->
25
+ <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
26
+ <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
27
+ <div class="flex items-center space-x-2">
28
+ <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
29
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
30
+ </div>
31
+ <div class="hidden md:flex space-x-8">
32
+ <a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
33
+ <a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
34
+ <a href="pricing.html" class="text-purple-600 font-medium transition">Pricing</a>
35
+ <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
36
+ </div>
37
+ <button class="md:hidden text-gray-600">
38
+ <i data-feather="menu"></i>
39
+ </button>
40
+ </div>
41
+ </nav>
42
+
43
+ <!-- Hero Section -->
44
+ <section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
45
+ <div class="container mx-auto px-4 md:px-6 text-center">
46
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Simple, Transparent <span class="bg-white text-purple-600 px-2 rounded-lg">Pricing</span></h1>
47
+ <p class="text-xl max-w-3xl mx-auto opacity-90">
48
+ Choose the perfect plan for your business needs. No hidden fees, cancel anytime.
49
+ </p>
50
+ </div>
51
+ </section>
52
+
53
+ <!-- Pricing Section -->
54
+ <section class="py-16">
55
+ <div class="container mx-auto px-4 md:px-6">
56
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
57
+ <!-- Basic Plan -->
58
+ <div class="pricing-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
59
+ <h3 class="text-xl font-bold mb-2">Starter</h3>
60
+ <p class="text-gray-600 mb-6">Perfect for small businesses</p>
61
+ <div class="mb-6">
62
+ <span class="text-4xl font-bold">$29</span>
63
+ <span class="text-gray-500">/month</span>
64
+ </div>
65
+ <ul class="space-y-3 mb-8">
66
+ <li class="flex items-center">
67
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
68
+ <span>Up to 100 products</span>
69
+ </li>
70
+ <li class="flex items-center">
71
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
72
+ <span>Basic analytics</span>
73
+ </li>
74
+ <li class="flex items-center">
75
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
76
+ <span>Email support</span>
77
+ </li>
78
+ </ul>
79
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-lg font-medium transition">
80
+ Get Started
81
+ </button>
82
+ </div>
83
+
84
+ <!-- Popular Plan -->
85
+ <div class="pricing-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300 popular-plan relative">
86
+ <div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
87
+ POPULAR
88
+ </div>
89
+ <h3 class="text-xl font-bold mb-2">Professional</h3>
90
+ <p class="text-gray-600 mb-6">For growing businesses</p>
91
+ <div class="mb-6">
92
+ <span class="text-4xl font-bold">$99</span>
93
+ <span class="text-gray-500">/month</span>
94
+ </div>
95
+ <ul class="space-y-3 mb-8">
96
+ <li class="flex items-center">
97
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
98
+ <span>Up to 1000 products</span>
99
+ </li>
100
+ <li class="flex items-center">
101
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
102
+ <span>Advanced analytics</span>
103
+ </li>
104
+ <li class="flex items-center">
105
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
106
+ <span>Priority support</span>
107
+ </li>
108
+ <li class="flex items-center">
109
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
110
+ <span>AI recommendations</span>
111
+ </li>
112
+ </ul>
113
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">
114
+ Get Started
115
+ </button>
116
+ </div>
117
+
118
+ <!-- Enterprise Plan -->
119
+ <div class="pricing-card bg-white p-8 rounded-xl shadow-sm transition-all duration-300">
120
+ <h3 class="text-xl font-bold mb-2">Enterprise</h3>
121
+ <p class="text-gray-600 mb-6">For large businesses</p>
122
+ <div class="mb-6">
123
+ <span class="text-4xl font-bold">$299</span>
124
+ <span class="text-gray-500">/month</span>
125
+ </div>
126
+ <ul class="space-y-3 mb-8">
127
+ <li class="flex items-center">
128
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
129
+ <span>Unlimited products</span>
130
+ </li>
131
+ <li class="flex items-center">
132
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
133
+ <span>Premium analytics</span>
134
+ </li>
135
+ <li class="flex items-center">
136
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
137
+ <span>24/7 support</span>
138
+ </li>
139
+ <li class="flex items-center">
140
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
141
+ <span>All AI features</span>
142
+ </li>
143
+ <li class="flex items-center">
144
+ <i data-feather="check" class="text-purple-600 mr-2 w-4 h-4"></i>
145
+ <span>Custom integrations</span>
146
+ </li>
147
+ </ul>
148
+ <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-lg font-medium transition">
149
+ Get Started
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- FAQ Section -->
157
+ <section class="py-16 bg-white">
158
+ <div class="container mx-auto px-4 md:px-6">
159
+ <h2 class="text-3xl font-bold text-center mb-12">Frequently Asked <span class="text-purple-600">Questions</span></h2>
160
+
161
+ <div class="max-w-3xl mx-auto space-y-6">
162
+ <div class="border-b border-gray-200 pb-6">
163
+ <h3 class="text-xl font-medium mb-2">Can I change plans later?</h3>
164
+ <p class="text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Your billing will be prorated accordingly.</p>
165
+ </div>
166
+
167
+ <div class="border-b border-gray-200 pb-6">
168
+ <h3 class="text-xl font-medium mb-2">Is there a free trial available?</h3>
169
+ <p class="text-gray-600">We offer a 14-day free trial for all plans. No credit card required to start the trial.</p>
170
+ </div>
171
+
172
+ <div class="border-b border-gray-200 pb-6">
173
+ <h3 class="text-xl font-medium mb-2">What payment methods do you accept?</h3>
174
+ <p class="text-gray-600">We accept all major credit cards (Visa, MasterCard, American Express) as well as PayPal.</p>
175
+ </div>
176
+
177
+ <div class="pb-6">
178
+ <h3 class="text-xl font-medium mb-2">How do I cancel my subscription?</h3>
179
+ <p class="text-gray-600">You can cancel anytime from your account settings with just a few clicks.</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- Footer -->
186
+ <footer class="bg-gray-900 text-gray-400 py-12">
187
+ <div class="container mx-auto px-4 md:px-6">
188
+ <div class="grid md:grid-cols-4 gap-8">
189
+ <div>
190
+ <div class="flex items-center space-x-2 mb-6">
191
+ <i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
192
+ <span class="text-xl font-bold text-white">QuantumCart</span>
193
+ </div>
194
+ <p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
195
+ <div class="flex space-x-4">
196
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
197
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
198
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
199
+ </div>
200
+ </div>
201
+ <div>
202
+ <h4 class="text-white font-medium mb-4">Product</h4>
203
+ <ul class="space-y-2">
204
+ <li><a href="features.html" class="hover:text-white transition">Features</a></li>
205
+ <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
206
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
207
+ </ul>
208
+ </div>
209
+ <div>
210
+ <h4 class="text-white font-medium mb-4">Resources</h4>
211
+ <ul class="space-y-2">
212
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
213
+ <li><a href="#" class="hover:text-white transition">API</a></li>
214
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
215
+ </ul>
216
+ </div>
217
+ <div>
218
+ <h4 class="text-white font-medium mb-4">Company</h4>
219
+ <ul class="space-y-2">
220
+ <li><a href="#" class="hover:text-white transition">About</a></li>
221
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
222
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
223
+ </ul>
224
+ </div>
225
+ </div>
226
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
227
+ <p>© 2023 QuantumCart. All rights reserved.</p>
228
+ <div class="flex space-x-6 mt-4 md:mt-0">
229
+ <a href="#" class="hover:text-white transition">Privacy</a>
230
+ <a href="#" class="hover:text-white transition">Terms</a>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </footer>
235
+
236
+ <script>
237
+ feather.replace();
238
+ </script>
239
+ </body>
240
+ </html>