Hugging Face's logo

Spaces:
allenprime
/
new-start
Running

App Files Community
allenprime commited on
Commit
afd777f
·
verified ·
1 Parent(s): 31d99d3

Project:* Design and Develop a One-Page Static Website for Ecome Ignite *Objective:* Create a sleek, modern, and responsive one-page static website that effectively communicates the value proposition of Ecome Ignite and encourages visitors to join the Telegram group or submit their email for updates. *Design Requirements:* 1. *Color Scheme:* - Primary background color: Black (#000000) - Primary text color: White (#FFFFFF) - Accent color 1: Premium Red (#FF0033 or #8B0A0A) - Accent color 2: Gold/Yellow (#F8E231 or #FFD700) 2. *Logo:* - Text-based logo with the brand name "Ecome Ignite" in a clean, modern font (e.g., Open Sans, Montserrat) - Font size and style should be consistent throughout the website 3. *Typography:* - Use a clean, modern sans-serif font (e.g., Open Sans, Montserrat) for headings and body text - Font sizes and line heights should be optimized for readability on various devices *Page Structure:* 1. *Hero Section:* - Headline: "Ignite Your Money-Making Future" - Subheadline: "Join Ecome Ignite — the Telegram group where real digital hustlers learn dropshipping, start marketing agencies, and build online businesses." - Call-to-action button: "Join Telegram Group " (links to Telegram group) - Button design: Use the premium red color (#FF0033) as the background, with white text and a slight gradient effect 2. *About Section:* - Title: "What is Ecome Ignite?" - Text: "Ecome Ignite is a digital accelerator for African youth. Inside our Telegram group, members get instant access to premium self-paced resources on dropshipping, social media marketing, and building online income streams." - Icons or bold visuals: Use simple, modern icons (e.g., Font Awesome) to highlight key aspects of the business 3. *Plans and Offers Section:* - Title: "Choose Your Plan" - Offer boxes: - Box 1: ₵100 – Full Access for Life - Lifetime membership - Access to all courses, updates, strategies (Dropshipping, Marketing Agency, Website building, etc.) - No expiry. No limits. Self-paced forever. - Box 2: ₵50 – 30 Days Access - Full group access - Valid for 30 days - After 30 days, you’ll be removed unless you top-up or upgrade - Box 3: ₵30 – 14 Days Access - Group access for 2 weeks - Removed after 14 days - Good for people who want to test things out, but serious success takes time - Box 4: ₵15 – 7 Days Trial Access (Strictly Once) - Only one 7-day trial allowed per person - Limited time to explore the group - You’ll see the value, but if you want to stay and grow, you'll need to upgrade - Offer box design: Use a clean and modern design with a white or light-colored background, and a subtle border. When an offer is selected, add a gold/yellow border or highlight to indicate the selection. 4. *Newsletter Section:* - Title: "Stay Updated" - Subtext: "Get tips, updates, and exclusive offers straight to your inbox." - Email input field: Use a simple, clean design with a white background and black text - Submit button: Use the gold/yellow accent color (#F8E231) as the background, with white text and a slight gradient effect - Integration: Connect the form to Google Sheets, (link unavailable), or Mailchimp for email collection and management *Technical Requirements:* 1. *Responsive Design:* Ensure the website is fully responsive and works well on various devices, including desktops, laptops, tablets, and smartphones. 2. *Static Website:* The website should be a single-page static website with no animations or multi-page setup. 3. *HTML, CSS, and JavaScript:* Use modern web development standards and best practices to build the website. 4. *No CMS:* The website should not require a Content Management System (CMS) to manage content. *Goals and Deliverables:* 1. *Effective Communication:* The website should clearly communicate the value proposition of Ecome Ignite and encourage visitors to join the Telegram group or submit their email. 2. *Conversion-Optimized Design:* The design should be optimized for conversions, with clear CTAs and a simple, intuitive layout. 3. *Fully Functional Website:* The website should be fully functional and work as expected on various devices and browsers. 4. _Easy Maintenance:_ The website should be easy to maintain and update, with a simple and organized codebase. _Additional Requirements:_ 1. _Browser Compatibility:_ Ensure the website works well on modern browsers, including Google Chrome, Mozilla Firefox, and Safari. 2. _Mobile-Friendliness:_ Ensure the website is fully responsive and works well on various mobile devices. 3. _Accessibility:_ Ensure the website follows accessibility guidelines and is usable by people with disabilities. _Deliverables:_ 1. A fully functional one-page static website that meets the design and technical requirements. 2. A website that is optimized for conversions and effectively communicates the value proposition of Ecome Ignite. 3. A website that is easy to maintain and update. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +456 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: New Start
3
- emoji: 🔥
4
- colorFrom: purple
5
  colorTo: purple
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: new-start
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,456 @@
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>Ecome Ignite | Digital Business Accelerator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ 'premium-red': '#FF0033',
16
+ 'deep-red': '#8B0A0A',
17
+ 'gold': '#F8E231',
18
+ 'rich-gold': '#FFD700',
19
+ 'dark': '#0A0A0A'
20
+ },
21
+ fontFamily: {
22
+ 'heading': ['Montserrat', 'sans-serif'],
23
+ 'body': ['Open Sans', 'sans-serif']
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ body {
31
+ background-color: #000;
32
+ color: #fff;
33
+ font-family: 'Open Sans', sans-serif;
34
+ }
35
+ h1, h2, h3 {
36
+ font-family: 'Montserrat', sans-serif;
37
+ font-weight: 700;
38
+ }
39
+ .hero-bg {
40
+ background: radial-gradient(ellipse at top, rgba(139, 10, 10, 0.2), transparent),
41
+ linear-gradient(to bottom, #000 0%, #130a00 100%);
42
+ }
43
+ .about-card {
44
+ background: linear-gradient(145deg, rgba(255, 0, 51, 0.05), rgba(139, 10, 10, 0.1), rgba(0, 0, 0, 0.2));
45
+ backdrop-filter: blur(10px);
46
+ }
47
+ .plan-card {
48
+ background: linear-gradient(145deg, rgba(18, 18, 18, 0.9), rgba(30, 30, 30, 0.9));
49
+ transition: all 0.3s ease;
50
+ box-shadow: 0 8px 32px rgba(139, 10, 10, 0.1);
51
+ }
52
+ .plan-card:hover {
53
+ transform: translateY(-5px);
54
+ box-shadow: 0 10px 25px rgba(248, 226, 49, 0.2);
55
+ }
56
+ .plan-card.selected {
57
+ border: 2px solid #FFD700;
58
+ background: linear-gradient(145deg, rgba(28, 28, 28, 0.95), rgba(45, 35, 15, 0.95));
59
+ box-shadow: 0 10px 25px rgba(248, 226, 49, 0.3);
60
+ position: relative;
61
+ overflow: hidden;
62
+ }
63
+ .plan-card.selected::after {
64
+ content: '✓ SELECTED';
65
+ position: absolute;
66
+ top: 10px;
67
+ right: -30px;
68
+ transform: rotate(45deg);
69
+ background: #FFD700;
70
+ color: #000;
71
+ font-size: 10px;
72
+ padding: 3px 30px;
73
+ font-weight: bold;
74
+ letter-spacing: 1px;
75
+ }
76
+ .cta-button {
77
+ background: linear-gradient(135deg, #FF0033, #8B0A0A);
78
+ transition: all 0.3s ease;
79
+ }
80
+ .cta-button:hover {
81
+ transform: scale(1.05);
82
+ box-shadow: 0 5px 15px rgba(255, 0, 51, 0.4);
83
+ }
84
+ .gold-button {
85
+ background: linear-gradient(135deg, #F8E231, #FFD700);
86
+ color: #000;
87
+ transition: all 0.3s ease;
88
+ }
89
+ .gold-button:hover {
90
+ transform: scale(1.05);
91
+ box-shadow: 0 5px 15px rgba(248, 226, 49, 0.4);
92
+ }
93
+ .scroll-down {
94
+ position: absolute;
95
+ bottom: 20px;
96
+ left: 50%;
97
+ transform: translateX(-50%);
98
+ color: #F8E231;
99
+ animation: bounce 2s infinite;
100
+ }
101
+ @keyframes bounce {
102
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
103
+ 40% {transform: translateY(-20px) translateX(-50%);}
104
+ 60% {transform: translateY(-10px) translateX(-50%);}
105
+ }
106
+ .icon-box {
107
+ border: 1px solid rgba(255, 255, 255, 0.1);
108
+ border-radius: 50%;
109
+ width: 70px;
110
+ height: 70px;
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+ margin: 0 auto 15px;
115
+ background: rgba(255, 255, 255, 0.05);
116
+ }
117
+ .gold-border {
118
+ position: relative;
119
+ }
120
+ .gold-border::before {
121
+ content: '';
122
+ position: absolute;
123
+ top: -2px;
124
+ left: -2px;
125
+ right: -2px;
126
+ bottom: -2px;
127
+ background: linear-gradient(135deg, #F8E231, #FFD700);
128
+ z-index: -1;
129
+ border-radius: 12px;
130
+ }
131
+ .pulse {
132
+ animation: pulse 2s infinite;
133
+ }
134
+ @keyframes pulse {
135
+ 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
136
+ 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
137
+ 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
138
+ }
139
+ .feature-bullet {
140
+ color: #FFD700;
141
+ margin-right: 10px;
142
+ }
143
+ .offer-badge {
144
+ position: absolute;
145
+ top: -10px;
146
+ right: 15px;
147
+ background: linear-gradient(135deg, #FF0033, #8B0A0A);
148
+ color: white;
149
+ font-size: 12px;
150
+ padding: 3px 15px;
151
+ border-radius: 20px;
152
+ font-weight: bold;
153
+ }
154
+ </style>
155
+ </head>
156
+ <body class="overflow-x-hidden">
157
+ <!-- Navigation Header -->
158
+ <header class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg">
159
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
160
+ <div class="flex items-center">
161
+ <a href="#" class="text-white text-2xl font-bold">
162
+ <span class="text-premium-red">ECO</span>
163
+ <span class="text-white">ME</span>
164
+ <span class="text-gold">IGNITE</span>
165
+ </a>
166
+ </div>
167
+ <a href="#plans" class="hidden md:inline-block gold-button py-2 px-6 rounded-full font-bold">
168
+ JOIN NOW
169
+ </a>
170
+ </div>
171
+ </header>
172
+
173
+ <!-- Hero Section -->
174
+ <section id="hero" class="hero-bg min-h-screen flex items-center relative">
175
+ <div class="container mx-auto px-6 pt-32 pb-16 z-10">
176
+ <div class="flex flex-col md:flex-row items-center">
177
+ <div class="w-full md:w-1/2 text-center md:text-left">
178
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
179
+ <span class="text-gold">IGNITE</span> YOUR MONEY-MAKING <span class="text-premium-red">FUTURE</span>
180
+ </h1>
181
+ <p class="text-xl mb-8 opacity-90 max-w-lg mx-auto md:mx-0">
182
+ Join Ecome Ignite — the Telegram community where digital hustlers master dropshipping, build marketing agencies, and create thriving online businesses.
183
+ </p>
184
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
185
+ <a href="#" class="cta-button py-4 px-8 rounded-full text-white font-bold text-lg inline-flex items-center justify-center gap-3">
186
+ <i class="fab fa-telegram"></i> JOIN TELEGRAM GROUP
187
+ </a>
188
+ <a href="#plans" class="gold-button py-4 px-8 rounded-full font-bold text-lg">
189
+ EXPLORE PLANS
190
+ </a>
191
+ </div>
192
+ </div>
193
+ <div class="w-full md:w-1/2 flex justify-center mt-16 md:mt-0">
194
+ <div class="relative">
195
+ <div class="relative z-10">
196
+ <div class="bg-gradient-to-br from-premium-red to-deep-red p-1 rounded-2xl inline-block">
197
+ <div class="bg-black rounded-2xl p-8 w-80 h-80 md:w-96 md:h-96 flex items-center justify-center">
198
+ <div class="text-center">
199
+ <div class="mb-6">
200
+ <span class="text-5xl font-bold text-gold">₵100</span>
201
+ <p class="text-premium-red font-bold">LIFETIME ACCESS</p>
202
+ </div>
203
+ <ul class="space-y-2 text-left">
204
+ <li class="flex items-center"><i class="fas fa-check-circle feature-bullet"></i> All Courses & Updates</li>
205
+ <li class="flex items-center"><i class="fas fa-check-circle feature-bullet"></i> Marketing Agency Blueprint</li>
206
+ <li class="flex items-center"><i class="fas fa-check-circle feature-bullet"></i> Dropshipping Mastery</li>
207
+ <li class="flex items-center"><i class="fas fa-check-circle feature-bullet"></i> 24/7 Community Support</li>
208
+ </ul>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="absolute -top-4 -right-4 bg-gold w-24 h-24 rounded-full z-0 opacity-20"></div>
214
+ <div class="absolute -bottom-4 -left-4 bg-premium-red w-32 h-32 rounded-full z-0 opacity-20"></div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ <div class="scroll-down">
220
+ <i class="fas fa-chevron-down text-2xl"></i>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- About Section -->
225
+ <section id="about" class="py-20">
226
+ <div class="container mx-auto px-6">
227
+ <div class="text-center mb-16">
228
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">WHAT IS <span class="text-gold">ECOME IGNITE</span>?</h2>
229
+ <div class="w-24 h-1 bg-premium-red mx-auto"></div>
230
+ </div>
231
+
232
+ <div class="about-card rounded-2xl p-10 max-w-4xl mx-auto mb-16">
233
+ <p class="text-xl leading-relaxed text-center">
234
+ Ecome Ignite is a digital accelerator for ambitious creators. Inside our exclusive Telegram community, members gain instant access to premium self-paced resources on dropshipping, social media marketing, and building sustainable online income streams that transform hustle into financial freedom.
235
+ </p>
236
+ </div>
237
+
238
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
239
+ <div class="text-center">
240
+ <div class="icon-box">
241
+ <i class="fas fa-box text-premium-red text-2xl"></i>
242
+ </div>
243
+ <h3 class="text-xl font-bold my-4">Dropshipping Domination</h3>
244
+ <p class="opacity-80">
245
+ Step-by-step blueprint for launching and scaling profitable dropshipping businesses.
246
+ </p>
247
+ </div>
248
+ <div class="text-center">
249
+ <div class="icon-box">
250
+ <i class="fas fa-bullhorn text-gold text-2xl"></i>
251
+ </div>
252
+ <h3 class="text-xl font-bold my-4">Agency Building</h3>
253
+ <p class="opacity-80">
254
+ Transform from freelancer to agency owner with our proven client acquisition system.
255
+ </p>
256
+ </div>
257
+ <div class="text-center">
258
+ <div class="icon-box">
259
+ <i class="fas fa-chart-line text-premium-red text-2xl"></i>
260
+ </div>
261
+ <h3 class="text-xl font-bold my-4">Income Streams</h3>
262
+ <p class="opacity-80">
263
+ Multiple online business models that generate passive income while you sleep.
264
+ </p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Plans and Offers -->
271
+ <section id="plans" class="py-20 bg-gradient-to-b from-gray-900 to-black">
272
+ <div class="container mx-auto px-6">
273
+ <div class="text-center mb-16">
274
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">CHOOSE YOUR <span class="text-gold">PLAN</span></h2>
275
+ <p class="text-xl max-w-2xl mx-auto opacity-90 mb-6">
276
+ Select the access level that fits your ambition. Transform your hustle into lasting success.
277
+ </p>
278
+ <div class="w-24 h-1 bg-premium-red mx-auto"></div>
279
+ </div>
280
+
281
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
282
+ <!-- Plan 1 -->
283
+ <div class="plan-card rounded-xl p-8 gold-border relative plan-card selected" onclick="selectPlan(this)">
284
+ <div class="offer-badge">MOST POPULAR</div>
285
+ <h3 class="text-3xl font-bold mb-4">
286
+ <span class="text-gold">₵100</span> <span class="text-lg">Full Access for Life</span>
287
+ </h3>
288
+ <ul class="space-y-3 mb-8">
289
+ <li class="flex items-start"><i class="fas fa-check-circle text-gold mt-1 mr-2"></i> <span>Lifetime membership</span></li>
290
+ <li class="flex items-start"><i class="fas fa-check-circle text-gold mt-1 mr-2"></i> <span>All courses & strategy updates</span></li>
291
+ <li class="flex items-start"><i class="fas fa-check-circle text-gold mt-1 mr-2"></i> <span>No expiry. No limits.</span></li>
292
+ <li class="flex items-start"><i class="fas fa-check-circle text-gold mt-1 mr-2"></i> <span>Priority access to new resources</span></li>
293
+ </ul>
294
+ <div class="text-center">
295
+ <button class="gold-button w-full py-3 rounded-full font-bold">SELECT PLAN</button>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Plan 2 -->
300
+ <div class="plan-card rounded-xl p-8 relative" onclick="selectPlan(this)">
301
+ <h3 class="text-3xl font-bold mb-4">
302
+ <span class="text-premium-red">₵50</span> <span class="text-lg">30 Days Access</span>
303
+ </h3>
304
+ <ul class="space-y-3 mb-8">
305
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Full group access</span></li>
306
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Valid for 30 days</span></li>
307
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Complete course library</span></li>
308
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>After 30 days, top-up required</span></li>
309
+ </ul>
310
+ <div class="text-center">
311
+ <button class="cta-button w-full py-3 rounded-full font-bold">SELECT PLAN</button>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Plan 3 -->
316
+ <div class="plan-card rounded-xl p-8 relative" onclick="selectPlan(this)">
317
+ <h3 class="text-3xl font-bold mb-4">
318
+ <span class="text-premium-red">₵30</span> <span class="text-lg">14 Days Access</span>
319
+ </h3>
320
+ <ul class="space-y-3 mb-8">
321
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Group access for 2 weeks</span></li>
322
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Core resources available</span></li>
323
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Perfect for testing the community</span></li>
324
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Upgrade required to continue</span></li>
325
+ </ul>
326
+ <div class="text-center">
327
+ <button class="cta-button w-full py-3 rounded-full font-bold">SELECT PLAN</button>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Plan 4 -->
332
+ <div class="plan-card rounded-xl p-8 relative" onclick="selectPlan(this)">
333
+ <div class="offer-badge">LIMITED TIME</div>
334
+ <h3 class="text-3xl font-bold mb-4">
335
+ <span class="text-premium-red">₵15</span> <span class="text-lg">7-Day Trial</span>
336
+ </h3>
337
+ <ul class="space-y-3 mb-8">
338
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>7-day trial access</span></li>
339
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Strictly once per person</span></li>
340
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Preview available resources</span></li>
341
+ <li class="flex items-start"><i class="fas fa-check-circle text-premium-red mt-1 mr-2"></i> <span>Full access requires upgrade</span></li>
342
+ </ul>
343
+ <div class="text-center">
344
+ <button class="cta-button w-full py-3 rounded-full font-bold">SELECT PLAN</button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Newsletter Section -->
352
+ <section id="newsletter" class="py-20">
353
+ <div class="container mx-auto px-6 max-w-4xl">
354
+ <div class="text-center mb-16">
355
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">STAY <span class="text-gold">UPDATED</span></h2>
356
+ <p class="text-xl opacity-90 mb-6">
357
+ Get actionable tips, exclusive offers, and success strategies straight to your inbox
358
+ </p>
359
+ <div class="w-24 h-1 bg-premium-red mx-auto"></div>
360
+ </div>
361
+
362
+ <div class="bg-gradient-to-br from-gray-900 to-black rounded-2xl p-8 md:p-12">
363
+ <form class="space-y-6">
364
+ <div class="pulse bg-gradient-to-br from-gray-800 to-black rounded-2xl p-1">
365
+ <input
366
+ type="email"
367
+ placeholder="Enter your email address"
368
+ class="w-full bg-black rounded-2xl p-5 text-lg focus:outline-none focus:ring-2 focus:ring-gold"
369
+ >
370
+ </div>
371
+ <button type="submit" class="gold-button w-full py-5 rounded-full text-lg font-bold">
372
+ GET PREMIUM UPDATES
373
+ </button>
374
+ </form>
375
+
376
+ <div class="mt-12 text-center border-t border-gray-800 pt-8">
377
+ <h3 class="text-xl font-bold mb-4">ACCESS PREMIUM RESOURCES TODAY</h3>
378
+ <p class="opacity-90 mb-6">
379
+ Join hundreds of digital hustlers already transforming their income potential
380
+ </p>
381
+ <a href="#" class="cta-button inline-flex items-center justify-center gap-3 py-4 px-8 rounded-full text-white font-bold text-lg">
382
+ <i class="fab fa-telegram"></i> JOIN OUR TELEGRAM GROUP
383
+ </a>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Footer -->
390
+ <footer class="bg-gradient-to-t from-black to-gray-900 py-12">
391
+ <div class="container mx-auto px-6">
392
+ <div class="text-center">
393
+ <a href="#" class="text-white text-2xl font-bold mb-4 inline-block">
394
+ <span class="text-premium-red">ECO</span>
395
+ <span class="text-white">ME</span>
396
+ <span class="text-gold">IGNITE</span>
397
+ </a>
398
+ <p class="opacity-70 max-w-2xl mx-auto">
399
+ Ecome Ignite is a digital accelerator dedicated to helping African youth master online business strategies and create sustainable income streams.
400
+ </p>
401
+ <div class="flex justify-center gap-6 mt-8">
402
+ <a href="#" class="text-gold hover:text-white"><i class="fab fa-telegram fa-2x"></i></a>
403
+ <a href="#" class="text-gold hover:text-white"><i class="fab fa-instagram fa-2x"></i></a>
404
+ <a href="#" class="text-gold hover:text-white"><i class="fab fa-twitter fa-2x"></i></a>
405
+ <a href="#" class="text-gold hover:text-white"><i class="fab fa-facebook fa-2x"></i></a>
406
+ </div>
407
+ <p class="mt-8 opacity-50">
408
+ © 2023 Ecome Ignite. All rights reserved.
409
+ </p>
410
+ </div>
411
+ </div>
412
+ </footer>
413
+
414
+ <script>
415
+ // Plan Selection Logic
416
+ function selectPlan(planElement) {
417
+ // Remove selection from all plans
418
+ document.querySelectorAll('.plan-card').forEach(plan => {
419
+ plan.classList.remove('selected');
420
+ });
421
+
422
+ // Add selection to clicked plan
423
+ planElement.classList.add('selected');
424
+
425
+ // Scroll to the top of plans section for better visibility on mobile
426
+ document.getElementById('plans').scrollIntoView({behavior: 'smooth'});
427
+ }
428
+
429
+ // Form validation and submission handling
430
+ document.addEventListener('DOMContentLoaded', function() {
431
+ const form = document.querySelector('form');
432
+ if (form) {
433
+ form.addEventListener('submit', function(e) {
434
+ e.preventDefault();
435
+ const emailInput = form.querySelector('input[type="email"]');
436
+
437
+ if (!emailInput.value || !isValidEmail(emailInput.value)) {
438
+ alert('Please enter a valid email address');
439
+ emailInput.focus();
440
+ return;
441
+ }
442
+
443
+ // Here you would normally submit to your form handler
444
+ alert('Thank you for subscribing! You will receive updates soon.');
445
+ form.reset();
446
+ });
447
+ }
448
+
449
+ function isValidEmail(email) {
450
+ const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
451
+ return re.test(email);
452
+ }
453
+ });
454
+ </script>
455
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=allenprime/new-start" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
456
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Project:* Design and Develop a One-Page Static Website for Ecome Ignite *Objective:* Create a sleek, modern, and responsive one-page static website that effectively communicates the value proposition of Ecome Ignite and encourages visitors to join the Telegram group or submit their email for updates. *Design Requirements:* 1. *Color Scheme:* - Primary background color: Black (#000000) - Primary text color: White (#FFFFFF) - Accent color 1: Premium Red (#FF0033 or #8B0A0A) - Accent color 2: Gold/Yellow (#F8E231 or #FFD700) 2. *Logo:* - Text-based logo with the brand name "Ecome Ignite" in a clean, modern font (e.g., Open Sans, Montserrat) - Font size and style should be consistent throughout the website 3. *Typography:* - Use a clean, modern sans-serif font (e.g., Open Sans, Montserrat) for headings and body text - Font sizes and line heights should be optimized for readability on various devices *Page Structure:* 1. *Hero Section:* - Headline: "Ignite Your Money-Making Future" - Subheadline: "Join Ecome Ignite — the Telegram group where real digital hustlers learn dropshipping, start marketing agencies, and build online businesses." - Call-to-action button: "Join Telegram Group " (links to Telegram group) - Button design: Use the premium red color (#FF0033) as the background, with white text and a slight gradient effect 2. *About Section:* - Title: "What is Ecome Ignite?" - Text: "Ecome Ignite is a digital accelerator for African youth. Inside our Telegram group, members get instant access to premium self-paced resources on dropshipping, social media marketing, and building online income streams." - Icons or bold visuals: Use simple, modern icons (e.g., Font Awesome) to highlight key aspects of the business 3. *Plans and Offers Section:* - Title: "Choose Your Plan" - Offer boxes: - Box 1: ₵100 – Full Access for Life - Lifetime membership - Access to all courses, updates, strategies (Dropshipping, Marketing Agency, Website building, etc.) - No expiry. No limits. Self-paced forever. - Box 2: ₵50 – 30 Days Access - Full group access - Valid for 30 days - After 30 days, you’ll be removed unless you top-up or upgrade - Box 3: ₵30 – 14 Days Access - Group access for 2 weeks - Removed after 14 days - Good for people who want to test things out, but serious success takes time - Box 4: ₵15 – 7 Days Trial Access (Strictly Once) - Only one 7-day trial allowed per person - Limited time to explore the group - You’ll see the value, but if you want to stay and grow, you'll need to upgrade - Offer box design: Use a clean and modern design with a white or light-colored background, and a subtle border. When an offer is selected, add a gold/yellow border or highlight to indicate the selection. 4. *Newsletter Section:* - Title: "Stay Updated" - Subtext: "Get tips, updates, and exclusive offers straight to your inbox." - Email input field: Use a simple, clean design with a white background and black text - Submit button: Use the gold/yellow accent color (#F8E231) as the background, with white text and a slight gradient effect - Integration: Connect the form to Google Sheets, (link unavailable), or Mailchimp for email collection and management *Technical Requirements:* 1. *Responsive Design:* Ensure the website is fully responsive and works well on various devices, including desktops, laptops, tablets, and smartphones. 2. *Static Website:* The website should be a single-page static website with no animations or multi-page setup. 3. *HTML, CSS, and JavaScript:* Use modern web development standards and best practices to build the website. 4. *No CMS:* The website should not require a Content Management System (CMS) to manage content. *Goals and Deliverables:* 1. *Effective Communication:* The website should clearly communicate the value proposition of Ecome Ignite and encourage visitors to join the Telegram group or submit their email. 2. *Conversion-Optimized Design:* The design should be optimized for conversions, with clear CTAs and a simple, intuitive layout. 3. *Fully Functional Website:* The website should be fully functional and work as expected on various devices and browsers. 4. _Easy Maintenance:_ The website should be easy to maintain and update, with a simple and organized codebase. _Additional Requirements:_ 1. _Browser Compatibility:_ Ensure the website works well on modern browsers, including Google Chrome, Mozilla Firefox, and Safari. 2. _Mobile-Friendliness:_ Ensure the website is fully responsive and works well on various mobile devices. 3. _Accessibility:_ Ensure the website follows accessibility guidelines and is usable by people with disabilities. _Deliverables:_ 1. A fully functional one-page static website that meets the design and technical requirements. 2. A website that is optimized for conversions and effectively communicates the value proposition of Ecome Ignite. 3. A website that is easy to maintain and update.