Hugging Face's logo

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

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

1. MVP Launch - Core e-commerce with basic automation

Browse files

2. Beta Testing - Limited user group
3. Full Launch - All features active
4. Scale Phase - Add advanced AI features

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +271 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantumcart E Commerce Evolution
3
- emoji: 😻
4
  colorFrom: purple
5
- colorTo: red
 
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: QuantumCart - E-Commerce Evolution 🚀
 
3
  colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,272 @@
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>QuantumCart - E-Commerce Evolution</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #6b46c1 0%, #805ad5 50%, #9f7aea 100%);
19
+ }
20
+ .phase-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .glow {
25
+ filter: drop-shadow(0 0 8px rgba(159, 122, 234, 0.6));
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 text-gray-900">
30
+ <!-- Vanta.js Globe Background -->
31
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>
32
+
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
35
+ <div class="container mx-auto px-4 md:px-6 flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="shopping-cart" class="text-purple-600 h-6 w-6"></i>
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>
50
+ </nav>
51
+
52
+ <!-- Hero Section -->
53
+ <section class="hero-gradient text-white py-20">
54
+ <div class="container mx-auto px-4 md:px-6 text-center">
55
+ <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>
56
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 opacity-90">
57
+ QuantumCart transforms online shopping with AI-powered automation and seamless scaling.
58
+ </p>
59
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
60
+ <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">
61
+ Join Beta
62
+ </button>
63
+ <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">
64
+ Learn More
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- Phases Section -->
71
+ <section class="py-16 bg-white">
72
+ <div class="container mx-auto px-4 md:px-6">
73
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Our <span class="text-purple-600">Development</span> Journey</h2>
74
+
75
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
76
+ <!-- Phase 1 -->
77
+ <div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
78
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6 glow">
79
+ <span class="text-2xl font-bold text-purple-600">1</span>
80
+ </div>
81
+ <h3 class="text-xl font-bold mb-3">MVP Launch</h3>
82
+ <p class="text-gray-600 mb-4">Core e-commerce with basic automation features</p>
83
+ <div class="flex items-center text-purple-600">
84
+ <span class="text-sm font-medium">Now Live</span>
85
+ <i data-feather="check-circle" class="ml-2 w-4 h-4"></i>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Phase 2 -->
90
+ <div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
91
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
92
+ <span class="text-2xl font-bold text-purple-600">2</span>
93
+ </div>
94
+ <h3 class="text-xl font-bold mb-3">Beta Testing</h3>
95
+ <p class="text-gray-600 mb-4">Limited user group for feedback and improvements</p>
96
+ <div class="flex items-center text-purple-600">
97
+ <span class="text-sm font-medium">Q3 2023</span>
98
+ <i data-feather="clock" class="ml-2 w-4 h-4"></i>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Phase 3 -->
103
+ <div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
104
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
105
+ <span class="text-2xl font-bold text-purple-600">3</span>
106
+ </div>
107
+ <h3 class="text-xl font-bold mb-3">Full Launch</h3>
108
+ <p class="text-gray-600 mb-4">All features active and available to the public</p>
109
+ <div class="flex items-center text-purple-600">
110
+ <span class="text-sm font-medium">Q1 2024</span>
111
+ <i data-feather="calendar" class="ml-2 w-4 h-4"></i>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Phase 4 -->
116
+ <div class="phase-card bg-gray-50 rounded-xl p-8 transition-all duration-300 border border-gray-100 hover:border-purple-200">
117
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
118
+ <span class="text-2xl font-bold text-purple-600">4</span>
119
+ </div>
120
+ <h3 class="text-xl font-bold mb-3">Scale Phase</h3>
121
+ <p class="text-gray-600 mb-4">Advanced AI features and global expansion</p>
122
+ <div class="flex items-center text-purple-600">
123
+ <span class="text-sm font-medium">Q3 2024</span>
124
+ <i data-feather="globe" class="ml-2 w-4 h-4"></i>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- Features Section -->
132
+ <section class="py-16 bg-gray-50">
133
+ <div class="container mx-auto px-4 md:px-6">
134
+ <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>
135
+
136
+ <div class="grid md:grid-cols-3 gap-8">
137
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
138
+ <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
139
+ <i data-feather="zap" class="text-purple-600"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold mb-3">AI Product Recommendations</h3>
142
+ <p class="text-gray-600">Machine learning suggests products based on browsing behavior and purchase history.</p>
143
+ </div>
144
+
145
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
146
+ <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
147
+ <i data-feather="repeat" class="text-purple-600"></i>
148
+ </div>
149
+ <h3 class="text-xl font-bold mb-3">Automated Inventory</h3>
150
+ <p class="text-gray-600">Real-time stock tracking with automated reordering when inventory runs low.</p>
151
+ </div>
152
+
153
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
154
+ <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-6">
155
+ <i data-feather="shield" class="text-purple-600"></i>
156
+ </div>
157
+ <h3 class="text-xl font-bold mb-3">Fraud Detection</h3>
158
+ <p class="text-gray-600">Advanced algorithms identify and prevent fraudulent transactions in real-time.</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- CTA Section -->
165
+ <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
166
+ <div class="container mx-auto px-4 md:px-6 text-center">
167
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Revolutionize Your E-Commerce?</h2>
168
+ <p class="text-xl max-w-2xl mx-auto mb-10 opacity-90">
169
+ Join our beta program and be among the first to experience QuantumCart.
170
+ </p>
171
+ <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
172
+ <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">
173
+ <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">
174
+ Get Early Access
175
+ </button>
176
+ </form>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Footer -->
181
+ <footer class="bg-gray-900 text-gray-400 py-12">
182
+ <div class="container mx-auto px-4 md:px-6">
183
+ <div class="grid md:grid-cols-4 gap-8">
184
+ <div>
185
+ <div class="flex items-center space-x-2 mb-6">
186
+ <i data-feather="shopping-cart" class="text-purple-400 h-6 w-6"></i>
187
+ <span class="text-xl font-bold text-white">QuantumCart</span>
188
+ </div>
189
+ <p class="mb-6">The future of e-commerce automation and AI-powered shopping experiences.</p>
190
+ <div class="flex space-x-4">
191
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
192
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
193
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
194
+ </div>
195
+ </div>
196
+ <div>
197
+ <h4 class="text-white font-medium mb-4">Product</h4>
198
+ <ul class="space-y-2">
199
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
200
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
201
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
202
+ <li><a href="#" class="hover:text-white transition">Beta Access</a></li>
203
+ </ul>
204
+ </div>
205
+ <div>
206
+ <h4 class="text-white font-medium mb-4">Resources</h4>
207
+ <ul class="space-y-2">
208
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
209
+ <li><a href="#" class="hover:text-white transition">API Reference</a></li>
210
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
211
+ <li><a href="#" class="hover:text-white transition">Support</a></li>
212
+ </ul>
213
+ </div>
214
+ <div>
215
+ <h4 class="text-white font-medium mb-4">Company</h4>
216
+ <ul class="space-y-2">
217
+ <li><a href="#" class="hover:text-white transition">About</a></li>
218
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
219
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
220
+ <li><a href="#" class="hover:text-white transition">Legal</a></li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
225
+ <p>© 2023 QuantumCart. All rights reserved.</p>
226
+ <div class="flex space-x-6 mt-4 md:mt-0">
227
+ <a href="#" class="hover:text-white transition">Privacy Policy</a>
228
+ <a href="#" class="hover:text-white transition">Terms of Service</a>
229
+ <a href="#" class="hover:text-white transition">Cookies</a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </footer>
234
+
235
+ <script>
236
+ // Initialize Vanta.js globe
237
+ VANTA.GLOBE({
238
+ el: "#vanta-bg",
239
+ mouseControls: true,
240
+ touchControls: true,
241
+ gyroControls: false,
242
+ minHeight: 200.00,
243
+ minWidth: 200.00,
244
+ scale: 1.00,
245
+ scaleMobile: 1.00,
246
+ color: 0x805ad5,
247
+ backgroundColor: 0xf8fafc,
248
+ size: 0.8
249
+ });
250
+
251
+ // Feather icons replacement
252
+ feather.replace();
253
+
254
+ // Simple animation for phase cards
255
+ document.addEventListener('DOMContentLoaded', function() {
256
+ const phaseCards = document.querySelectorAll('.phase-card');
257
+ phaseCards.forEach((card, index) => {
258
+ card.style.opacity = '0';
259
+ card.style.transform = 'translateY(20px)';
260
+ anime({
261
+ targets: card,
262
+ opacity: 1,
263
+ translateY: 0,
264
+ delay: index * 100,
265
+ duration: 800,
266
+ easing: 'easeOutExpo'
267
+ });
268
+ });
269
+ });
270
+ </script>
271
+ </body>
272
  </html>