Hugging Face's logo

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

App Files Community
sobansameer commited on
Commit
67f7aba
·
verified ·
1 Parent(s): 62075a5

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuantumCart - E-Commerce Evolution</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<style>


@import
 url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #6b46c1 0%, #805ad5 50%, #9f7aea 100%);
}
.phase-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.glow {
filter: drop-shadow(0 0 8px rgba(159, 122, 234, 0.6));
}
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Vanta.js Globe Background -->
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>

<!-- Navigation -->
<nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
<div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-purple-600 font-medium transition">Home</a>
<a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
<a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
<a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
<a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
</div>
<button class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</nav>

<!-- Hero Section -->
<section class="hero-gradient text-white py-20">
<div class="container mx-auto px-4 md:px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">E-Commerce <span class="bg-white text-purple-600 px-2 rounded-lg">Evolution</span></h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 opacity-90">
QuantumCart transforms online shopping with AI-powered automation and seamless scaling.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-purple-600 hover:bg-purple-50 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
Join Beta
</button>
<button class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
Learn More
</button>
</div>
</div>
</section>

<!-- Phases Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4 md:px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Our <span class="text-purple-600">Development</span> Journey</h2>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Phase 1 -->
<div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6 glow">
<span class="text-2xl font-bold text-purple-600">1</span>
</div>
<h3 class="text-xl font-bold mb-3">MVP Launch</h3>
<p class="text-gray-600 mb-4">Core e-commerce with basic automation features</p>
<div class="flex items-center text-purple-600">
<span class="text-sm font-medium">Now Live</span>
<i data-feather="check-circle" class="ml-2 w-4 h-4"></i>
</div>
</div>

<!-- Phase 2 -->
<div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
<span class="text-2xl font-bold text-purple-600">2</span>
</div>
<h3 class="text-xl font-bold mb-3">Beta Testing</h3>
<p class="text-gray-600 mb-4">Limited user group for feedback and improvements</p>
<div class="flex items-center text-purple-600">
<span class="text-sm font-medium">Q3 2023</span>
<i data-feather="clock" class="ml-2 w-4 h-4"></i>
</div>
</div>

<!-- Phase 3 -->
<div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
<span class="text-2xl font-bold text-purple-600">3</span>
</div>
<h3 class="text-xl font-bold mb-3">Full Launch</h3>
<p class="text-gray-600 mb-4">All features active and available to the public</p>
<div class="flex items-center text-purple-600">
<span class="text-sm font-medium">Q1 2024</span>
<i data-feather="calendar" class="ml-2 w-4 h-4"></i>
</div>
</div>

<!-- Phase 4 -->
<div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
<div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
<span class="text-2xl font-bold text-purple-600">4</span>
</div>
<h3 class="text-xl font-bold mb-3">Scale Phase</h3>
<p class="text-gray-600 mb-4">Advanced AI features and global expansion</p>
<div class="flex items-center text-purple-600">
<span class="text-sm font-medium">Q3 2024</span>
<i data-feather="globe" class="ml-2 w-4 h-4"></i>
</div>
</div>
</div>
</div>
</section>

<!-- Features Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4 md:px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Next-Gen <span class="text-purple-600">E-Commerce</span> Features</h2>

<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="zap" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI Product Recommendations</h3>
<p class="text-gray-600">Machine learning suggests products based on browsing behavior and purchase history.</p>
</div>

<div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="repeat" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Automated Inventory</h3>
<p class="text-gray-600">Real-time stock tracking with automated reordering when inventory runs low.</p>
</div>

<div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="shield" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Fraud Detection</h3>
<p class="text-gray-600">Advanced algorithms identify and prevent fraudulent transactions in real-time.</p>
</div>
</div>
</div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
<div class="container mx-auto px-4 md:px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Revolutionize Your E-Commerce?</h2>
<p class="text-xl max-w-2xl mx-auto mb-10 opacity-90">
Join our beta program and be among the first to experience QuantumCart.
</p>
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300">
<button type="submit" class="bg-white text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
Get Ear

Files changed (2) hide show
  1. demo.html +305 -0
  2. index.html +16 -14
demo.html ADDED
@@ -0,0 +1,305 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Live Demo | 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
+ .demo-card {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .demo-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .product-image {
22
+ transition: transform 0.3s ease;
23
+ }
24
+ .product-image:hover {
25
+ transform: scale(1.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50">
30
+ <!-- Navigation -->
31
+ <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
32
+ <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
35
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">QuantumCart</span>
36
+ </div>
37
+ <div class="hidden md:flex space-x-8">
38
+ <a href="index.html" class="text-gray-600 hover:text-purple-600 transition">Home</a>
39
+ <a href="features.html" class="text-gray-600 hover:text-purple-600 transition">Features</a>
40
+ <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
41
+ <a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
42
+ <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
43
+ <a href="demo.html" class="text-purple-600 font-medium transition">Live Demo</a>
44
+ </div>
45
+ <button class="md:hidden text-gray-600">
46
+ <i data-feather="menu"></i>
47
+ </button>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
53
+ <div class="container mx-auto px-4 md:px-6 text-center">
54
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Experience <span class="bg-white text-purple-600 px-2 rounded-lg">QuantumCart</span></h1>
55
+ <p class="text-xl max-w-3xl mx-auto opacity-90">
56
+ Explore our interactive demo showcasing the power of AI-powered e-commerce automation.
57
+ </p>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- Live Demo Section -->
62
+ <section class="py-16">
63
+ <div class="container mx-auto px-4 md:px-6">
64
+ <h2 class="text-3xl font-bold text-center mb-12">Interactive <span class="text-purple-600">Demo</span></h2>
65
+
66
+ <div class="max-w-6xl mx-auto">
67
+ <!-- Demo Navigation -->
68
+ <div class="flex flex-wrap justify-center gap-4 mb-12">
69
+ <button class="demo-nav bg-white text-purple-600 px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105">
70
+ Product Catalog
71
+ </button>
72
+ <button class="demo-nav bg-gray-100 hover:bg-white text-gray-800 px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105">
73
+ AI Recommendations
74
+ </button>
75
+ <button class="demo-nav bg-gray-100 hover:bg-white text-gray-800 px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105">
76
+ Smart Inventory
77
+ </button>
78
+ <button class="demo-nav bg-gray-100 hover:bg-white text-gray-800 px-6 py-3 rounded-lg font-medium transition-all transform hover:scale-105">
79
+ Analytics Dashboard
80
+ </button>
81
+ </div>
82
+
83
+ <!-- Product Showcase -->
84
+ <div class="demo-card bg-white rounded-xl shadow-sm p-8 mb-8">
85
+ <h3 class="text-2xl font-bold mb-6 text-center">Featured Products</h3>
86
+
87
+ <div class="grid md:grid-cols-3 gap-8">
88
+ <!-- Product 1 -->
89
+ <div class="bg-gray-50 rounded-lg p-6 text-center">
90
+ <img src="http://static.photos/electronics/320x240/1" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-lg mb-4 product-image">
91
+ <h4 class="text-lg font-bold mb-2">Wireless Headphones</h4>
92
+ <p class="text-gray-600 mb-4">Premium sound quality with active noise cancellation</p>
93
+ <div class="flex justify-between items-center">
94
+ <span class="text-xl font-bold text-purple-600">$199.99</span>
95
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
96
+ Add to Cart
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Product 2 -->
102
+ <div class="bg-gray-50 rounded-lg p-6 text-center">
103
+ <img src="http://static.photos/technology/320x240/2" alt="Smart Watch" class="w-full h-48 object-cover rounded-lg mb-4 product-image">
104
+ <h4 class="text-lg font-bold mb-2">Smart Watch Pro</h4>
105
+ <p class="text-gray-600 mb-4">Advanced health tracking and smart notifications</p>
106
+ <div class="flex justify-between items-center">
107
+ <span class="text-xl font-bold text-purple-600">$249.99</span>
108
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
109
+ Add to Cart
110
+ </button>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Product 3 -->
115
+ <div class="bg-gray-50 rounded-lg p-6 text-center">
116
+ <img src="http://static.photos/office/320x240/3" alt="Ergonomic Chair" class="w-full h-48 object-cover rounded-lg mb-4 product-image">
117
+ <h4 class="text-lg font-bold mb-2">Ergonomic Office Chair</h4>
118
+ <p class="text-gray-600 mb-4">Premium comfort with adjustable lumbar support</p>
119
+ <div class="flex justify-between items-center">
120
+ <span class="text-xl font-bold text-purple-600">$349.99</span>
121
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
122
+ Add to Cart
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- AI Recommendations Demo -->
132
+ <div class="demo-card bg-white rounded-xl shadow-sm p-8">
133
+ <h3 class="text-2xl font-bold mb-6 text-center">AI-Powered Recommendations</h3>
134
+
135
+ <div class="bg-purple-50 rounded-lg p-6 mb-6">
136
+ <h4 class="text-lg font-bold mb-4 text-center">Based on your interests, you might like:</h4>
137
+
138
+ <div class="grid md:grid-cols-2 gap-6">
139
+ <!-- Recommended Product 1 -->
140
+ <div class="flex items-center space-x-4">
141
+ <img src="http://static.photos/electronics/200x200/4" alt="Wireless Earbuds" class="w-20 h-20 object-cover rounded-lg">
142
+ <div>
143
+ <h5 class="font-bold">Wireless Earbuds</h5>
144
+ <p class="text-gray-600 text-sm">Perfect companion for your active lifestyle</p>
145
+ </div>
146
+
147
+ <!-- Recommended Product 2 -->
148
+ <div class="flex items-center space-x-4">
149
+ <img src="http://static.photos/technology/200x200/5" alt="Phone Case" class="w-20 h-20 object-cover rounded-lg">
150
+ <div>
151
+ <h5 class="font-bold">Phone Case & Stand</h5>
152
+ <p class="text-gray-600 text-sm">Protect your device with premium materials</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Features Demo -->
160
+ <section class="py-16 bg-gray-50">
161
+ <div class="container mx-auto px-4 md:px-6">
162
+ <h2 class="text-3xl font-bold text-center mb-12">Live <span class="text-purple-600">Features</span></h2>
163
+
164
+ <div class="grid md:grid-cols-2 gap-12">
165
+ <!-- Smart Inventory Demo -->
166
+ <div class="demo-card bg-white p-8 rounded-xl shadow-sm">
167
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
168
+ <i data-feather="repeat" class="text-purple-600 w-6 h-6"></i>
169
+ </div>
170
+ <h3 class="text-xl font-bold mb-3">Smart Inventory Management</h3>
171
+ <p class="text-gray-600 mb-4">Watch inventory levels update in real-time as products are added to cart.</p>
172
+ <div class="bg-gray-100 rounded-lg p-4">
173
+ <div class="flex justify-between items-center mb-2">
174
+ <span>Current Stock:</span>
175
+ <span class="text-purple-600 font-medium">24 units</span>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Analytics Demo -->
180
+ <div class="demo-card bg-white p-8 rounded-xl shadow-sm">
181
+ <div class="w-14 h-14 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
182
+ <i data-feather="bar-chart-2" class="text-purple-600 w-6 h-6"></i>
183
+ </div>
184
+ <h3 class="text-xl font-bold mb-3">Real-time Analytics</h3>
185
+ <p class="text-gray-600 mb-4">Monitor sales performance and customer behavior in real-time.</p>
186
+ <div class="bg-gray-100 rounded-lg p-4">
187
+ <div class="space-y-2">
188
+ <div class="flex justify-between">
189
+ <span>Today's Sales:</span>
190
+ <span class="text-purple-600 font-medium">$2,847</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Call to Action -->
199
+ <section class="py-16 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
200
+ <div class="container mx-auto px-4 md:px-6 text-center">
201
+ <h2 class="text-3xl font-bold mb-6">Ready to Get Started?</h2>
202
+ <p class="text-xl max-w-2xl mx-auto mb-10 opacity-90">
203
+ Experience the full power of QuantumCart with our 14-day free trial.</p>
204
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
205
+ <a href="index.html#cta" class="bg-white text-purple-600 hover:bg-purple-50 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 text-center">
206
+ Start Free Trial
207
+ </a>
208
+ <a href="contact.html" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 text-center">
209
+ Contact Sales
210
+ </a>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Footer -->
216
+ <footer class="bg-gray-900 text-gray-400 py-12">
217
+ <div class="container mx-auto px-4 md:px-6">
218
+ <div class="grid md:grid-cols-4 gap-8">
219
+ <div>
220
+ <div class="flex items-center space-x-2 mb-6">
221
+ <i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
222
+ <span class="text-xl font-bold text-white">QuantumCart</span>
223
+ </div>
224
+ <p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
225
+ <div class="flex space-x-4">
226
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
227
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
228
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <h4 class="text-white font-medium mb-4">Product</h4>
233
+ <ul class="space-y-2">
234
+ <li><a href="features.html" class="hover:text-white transition">Features</a></li>
235
+ <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
236
+ <li><a href="blog.html" class="hover:text-white transition">Blog</a></li>
237
+ <li><a href="demo.html" class="hover:text-white transition">Live Demo</a></li>
238
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
239
+ </ul>
240
+ </div>
241
+ <div>
242
+ <h4 class="text-white font-medium mb-4">Resources</h4>
243
+ <ul class="space-y-2">
244
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
245
+ <li><a href="#" class="hover:text-white transition">API</a></li>
246
+ <li><a href="#" class="hover:text-white transition">Community</a></li>
247
+ </ul>
248
+ </div>
249
+ <div>
250
+ <h4 class="text-white font-medium mb-4">Company</h4>
251
+ <ul class="space-y-2">
252
+ <li><a href="#" class="hover:text-white transition">About</a></li>
253
+ <li><a href="contact.html" class="hover:text-white transition">Contact</a></li>
254
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
255
+ </ul>
256
+ </div>
257
+ </div>
258
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
259
+ <p>© 2023 QuantumCart. All rights reserved.</p>
260
+ <div class="flex space-x-6 mt-4 md:mt-0">
261
+ <a href="#" class="hover:text-white transition">Privacy</a>
262
+ <a href="#" class="hover:text-white transition">Terms</a>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </footer>
267
+
268
+ <script>
269
+ feather.replace();
270
+
271
+ // Demo interactivity
272
+ document.addEventListener('DOMContentLoaded', function() {
273
+ const demoCards = document.querySelectorAll('.demo-card');
274
+ const demoNavs = document.querySelectorAll('.demo-nav');
275
+
276
+ // Add click handlers for demo navigation
277
+ demoNavs.forEach((nav, index) => {
278
+ nav.addEventListener('click', function() {
279
+ // Remove active state from all navs
280
+ demoNavs.forEach(n => n.classList.remove('bg-white', 'text-purple-600'));
281
+ demoNavs.forEach(n => n.classList.add('bg-gray-100', 'text-gray-800'));
282
+
283
+ // Add active state to clicked nav
284
+ this.classList.remove('bg-gray-100', 'text-gray-800'));
285
+ this.classList.add('bg-white', 'text-purple-600'));
286
+
287
+ // Simple animation for demo cards
288
+ demoCards.forEach((card, cardIndex) => {
289
+ card.style.opacity = '0';
290
+ card.style.transform = 'translateY(20px)';
291
+ anime({
292
+ targets: card,
293
+ opacity: 1,
294
+ translateY: 0,
295
+ delay: cardIndex * 100,
296
+ duration: 600,
297
+ easing: 'easeOutExpo'
298
+ });
299
+ });
300
+ });
301
+ });
302
+ });
303
+ </script>
304
+ </body>
305
+ </html>
index.html CHANGED
@@ -43,7 +43,8 @@
43
  <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
44
  <a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
45
  <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
46
- </div>
 
47
  <button class="md:hidden text-gray-600">
48
  <i data-feather="menu"></i>
49
  </button>
@@ -61,10 +62,10 @@
61
  <button class="bg-white text-purple-600 hover:bg-purple-50 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
62
  Join Beta
63
  </button>
64
- <button class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
65
- Learn More
66
- </button>
67
- </div>
68
  </div>
69
  </section>
70
 
@@ -161,7 +162,6 @@
161
  </div>
162
  </div>
163
  </section>
164
-
165
  <!-- CTA Section -->
166
  <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
167
  <div class="container mx-auto px-4 md:px-6 text-center">
@@ -169,16 +169,17 @@
169
  <p class="text-xl max-w-2xl mx-auto mb-10 opacity-90">
170
  Join our beta program and be among the first to experience QuantumCart.
171
  </p>
172
- <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
173
- <input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300">
174
- <button type="submit" class="bg-white text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
175
- Get Early Access
 
 
176
  </button>
177
- </form>
178
  </div>
179
  </section>
180
-
181
- <!-- Footer -->
182
  <footer class="bg-gray-900 text-gray-400 py-12">
183
  <div class="container mx-auto px-4 md:px-6">
184
  <div class="grid md:grid-cols-4 gap-8">
@@ -200,8 +201,9 @@
200
  <li><a href="features.html" class="hover:text-white transition">Features</a></li>
201
  <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
202
  <li><a href="blog.html" class="hover:text-white transition">Blog</a></li>
 
203
  <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
204
- </ul>
205
  </div>
206
  <div>
207
  <h4 class="text-white font-medium mb-4">Resources</h4>
 
43
  <a href="pricing.html" class="text-gray-600 hover:text-purple-600 transition">Pricing</a>
44
  <a href="blog.html" class="text-gray-600 hover:text-purple-600 transition">Blog</a>
45
  <a href="contact.html" class="text-gray-600 hover:text-purple-600 transition">Contact</a>
46
+ <a href="demo.html" class="text-gray-600 hover:text-purple-600 transition">Live Demo</a>
47
+ </div>
48
  <button class="md:hidden text-gray-600">
49
  <i data-feather="menu"></i>
50
  </button>
 
62
  <button class="bg-white text-purple-600 hover:bg-purple-50 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
63
  Join Beta
64
  </button>
65
+ <a href="demo.html" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 text-center">
66
+ Live Demo
67
+ </a>
68
+ </div>
69
  </div>
70
  </section>
71
 
 
162
  </div>
163
  </div>
164
  </section>
 
165
  <!-- CTA Section -->
166
  <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
167
  <div class="container mx-auto px-4 md:px-6 text-center">
 
169
  <p class="text-xl max-w-2xl mx-auto mb-10 opacity-90">
170
  Join our beta program and be among the first to experience QuantumCart.
171
  </p>
172
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
173
+ <a href="demo.html" class="bg-white text-purple-600 hover:bg-purple-50 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 text-center">
174
+ Try Live Demo
175
+ </a>
176
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
177
+ Join Beta
178
  </button>
179
+ </div>
180
  </div>
181
  </section>
182
+ <!-- Footer -->
 
183
  <footer class="bg-gray-900 text-gray-400 py-12">
184
  <div class="container mx-auto px-4 md:px-6">
185
  <div class="grid md:grid-cols-4 gap-8">
 
201
  <li><a href="features.html" class="hover:text-white transition">Features</a></li>
202
  <li><a href="pricing.html" class="hover:text-white transition">Pricing</a></li>
203
  <li><a href="blog.html" class="hover:text-white transition">Blog</a></li>
204
+ <li><a href="demo.html" class="hover:text-white transition">Live Demo</a></li>
205
  <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
206
+ </ul>
207
  </div>
208
  <div>
209
  <h4 class="text-white font-medium mb-4">Resources</h4>