Hugging Face's logo

Spaces:
Enoy909
/
eduexcel
Running

App Files Community
Enoy909 commited on
Commit
e3cd7df
·
verified ·
1 Parent(s): 19bc865

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eduexcel
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: blue
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: eduexcel
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
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,661 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EduExcel - Academic & Admission Courses</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ secondary: {
28
+ 50: '#faf5ff',
29
+ 100: '#f3e8ff',
30
+ 200: '#e9d5ff',
31
+ 300: '#d8b4fe',
32
+ 400: '#c084fc',
33
+ 500: '#a855f7',
34
+ 600: '#9333ea',
35
+ 700: '#7e22ce',
36
+ 800: '#6b21a8',
37
+ 900: '#581c87',
38
+ }
39
+ },
40
+ fontFamily: {
41
+ 'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
42
+ },
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+ <style>
48
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
49
+
50
+ body {
51
+ font-family: 'Inter', sans-serif;
52
+ background-color: #f9fafb;
53
+ }
54
+
55
+ .dark body {
56
+ background-color: #111827;
57
+ }
58
+
59
+ .gradient-text {
60
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
61
+ -webkit-background-clip: text;
62
+ background-clip: text;
63
+ color: transparent;
64
+ }
65
+
66
+ .gradient-bg {
67
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
68
+ }
69
+
70
+ .course-card:hover {
71
+ transform: translateY(-5px);
72
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
73
+ }
74
+
75
+ .feature-card:hover {
76
+ transform: scale(1.03);
77
+ }
78
+
79
+ .blur-header {
80
+ backdrop-filter: blur(12px);
81
+ -webkit-backdrop-filter: blur(12px);
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
86
+ <!-- Floating Navigation -->
87
+ <header class="fixed top-0 left-0 right-0 z-50 blur-header bg-white/80 dark:bg-gray-900/80 border-b border-gray-200 dark:border-gray-800 shadow-sm">
88
+ <div class="container mx-auto px-4 py-3">
89
+ <div class="flex items-center justify-between">
90
+ <!-- Logo -->
91
+ <div class="flex items-center">
92
+ <a href="#" class="flex items-center space-x-2">
93
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">EE</div>
94
+ <span class="text-2xl font-bold text-gray-900 dark:text-white">Edu<span class="gradient-text">Excel</span></span>
95
+ </a>
96
+ </div>
97
+
98
+ <!-- Desktop Navigation -->
99
+ <nav class="hidden md:flex items-center space-x-8">
100
+ <a href="#courses" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Courses</a>
101
+ <a href="#features" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Why Choose Us</a>
102
+ <div class="flex items-center space-x-4">
103
+ <!-- Theme Toggle -->
104
+ <button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none">
105
+ <i class="fas fa-moon dark:hidden"></i>
106
+ <i class="fas fa-sun hidden dark:block"></i>
107
+ </button>
108
+
109
+ <!-- Cart -->
110
+ <button class="relative text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none">
111
+ <i class="fas fa-shopping-cart"></i>
112
+ <span class="absolute -top-2 -right-2 bg-primary-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
113
+ </button>
114
+
115
+ <!-- CTA Button -->
116
+ <a href="#courses" class="px-4 py-2 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg">Enroll Now</a>
117
+ </div>
118
+ </nav>
119
+
120
+ <!-- Mobile Menu Button -->
121
+ <button id="mobile-menu-button" class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none">
122
+ <i class="fas fa-bars text-2xl"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Mobile Menu -->
128
+ <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
129
+ <div class="container mx-auto px-4 py-3">
130
+ <div class="flex flex-col space-y-4">
131
+ <a href="#courses" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Courses</a>
132
+ <a href="#features" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors">Why Choose Us</a>
133
+ <div class="flex items-center space-x-4 pt-2">
134
+ <button id="mobile-theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none">
135
+ <i class="fas fa-moon dark:hidden"></i>
136
+ <i class="fas fa-sun hidden dark:block"></i>
137
+ </button>
138
+ <button class="relative text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none">
139
+ <i class="fas fa-shopping-cart"></i>
140
+ <span class="absolute -top-2 -right-2 bg-primary-600 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
141
+ </button>
142
+ </div>
143
+ <a href="#courses" class="px-4 py-2 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg text-center">Enroll Now</a>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </header>
148
+
149
+ <!-- Hero Section -->
150
+ <section class="pt-24 pb-16 md:pt-32 md:pb-24">
151
+ <div class="container mx-auto px-4">
152
+ <div class="flex flex-col md:flex-row items-center">
153
+ <div class="md:w-1/2 mb-10 md:mb-0">
154
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6">
155
+ Ace Your Exams with <span class="gradient-text">EduExcel</span>
156
+ </h1>
157
+ <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
158
+ Join 10,000+ students who improved their scores by 200+ points on average. Our proven methods make learning effective and fun!
159
+ </p>
160
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
161
+ <a href="#courses" class="px-6 py-3 gradient-bg text-white font-medium rounded-full hover:opacity-90 transition-opacity shadow-lg text-center">Browse Courses</a>
162
+ <a href="#features" class="px-6 py-3 border-2 border-primary-600 text-primary-600 dark:text-primary-400 font-medium rounded-full hover:bg-primary-50 dark:hover:bg-gray-800 transition-colors text-center">Learn More</a>
163
+ </div>
164
+ <div class="mt-10 flex flex-wrap gap-6">
165
+ <div class="flex items-center">
166
+ <div class="mr-3 text-primary-600 dark:text-primary-400 text-2xl">
167
+ <i class="fas fa-user-graduate"></i>
168
+ </div>
169
+ <div>
170
+ <div class="text-2xl font-bold text-gray-900 dark:text-white">10K+</div>
171
+ <div class="text-gray-600 dark:text-gray-400">Students</div>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-center">
175
+ <div class="mr-3 text-secondary-600 dark:text-secondary-400 text-2xl">
176
+ <i class="fas fa-chart-line"></i>
177
+ </div>
178
+ <div>
179
+ <div class="text-2xl font-bold text-gray-900 dark:text-white">200+</div>
180
+ <div class="text-gray-600 dark:text-gray-400">Avg. Score Increase</div>
181
+ </div>
182
+ </div>
183
+ <div class="flex items-center">
184
+ <div class="mr-3 text-yellow-500 text-2xl">
185
+ <i class="fas fa-star"></i>
186
+ </div>
187
+ <div>
188
+ <div class="text-2xl font-bold text-gray-900 dark:text-white">4.9</div>
189
+ <div class="text-gray-600 dark:text-gray-400">Rating (500+ reviews)</div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <div class="md:w-1/2 flex justify-center">
195
+ <div class="relative w-full max-w-lg">
196
+ <div class="absolute -top-10 -left-10 w-64 h-64 bg-primary-100 dark:bg-primary-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob"></div>
197
+ <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-secondary-100 dark:bg-secondary-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob animation-delay-2000"></div>
198
+ <div class="absolute top-0 left-1/2 w-64 h-64 bg-purple-100 dark:bg-purple-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 dark:opacity-30 animate-blob animation-delay-4000"></div>
199
+ <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
200
+ <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Students learning" class="w-full h-auto">
201
+ <div class="p-6">
202
+ <div class="flex items-center mb-3">
203
+ <div class="flex items-center space-x-1 text-yellow-400">
204
+ <i class="fas fa-star"></i>
205
+ <i class="fas fa-star"></i>
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star"></i>
209
+ </div>
210
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.9/5 (500+ reviews)</span>
211
+ </div>
212
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">SAT Prep Masterclass</h3>
213
+ <div class="flex items-center">
214
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-lg">$199</span>
215
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$299</span>
216
+ <span class="ml-2 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-0.5 rounded">33% OFF</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Features Section -->
227
+ <section id="features" class="py-16 bg-gray-50 dark:bg-gray-800/50">
228
+ <div class="container mx-auto px-4">
229
+ <div class="text-center mb-16">
230
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Why Students Choose <span class="gradient-text">EduExcel</span></h2>
231
+ <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Our unique approach combines cutting-edge teaching methods with personalized support to help you achieve your academic goals.</p>
232
+ </div>
233
+
234
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
235
+ <!-- Feature 1 -->
236
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
237
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
238
+ <i class="fas fa-bolt text-xl"></i>
239
+ </div>
240
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Fast-Track Learning</h3>
241
+ <p class="text-gray-600 dark:text-gray-300">Our condensed curriculum helps you learn more in less time with proven accelerated techniques.</p>
242
+ </div>
243
+
244
+ <!-- Feature 2 -->
245
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
246
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
247
+ <i class="fas fa-medal text-xl"></i>
248
+ </div>
249
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Guaranteed Results</h3>
250
+ <p class="text-gray-600 dark:text-gray-300">Score improvement guarantee or your money back. 93% of students see significant score increases.</p>
251
+ </div>
252
+
253
+ <!-- Feature 3 -->
254
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
255
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
256
+ <i class="fas fa-calendar-alt text-xl"></i>
257
+ </div>
258
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Flexible Schedule</h3>
259
+ <p class="text-gray-600 dark:text-gray-300">Learn at your own pace with 24/7 access to all materials and recorded sessions.</p>
260
+ </div>
261
+
262
+ <!-- Feature 4 -->
263
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
264
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
265
+ <i class="fas fa-users text-xl"></i>
266
+ </div>
267
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Small Batch Learning</h3>
268
+ <p class="text-gray-600 dark:text-gray-300">Limited class sizes ensure personalized attention from expert instructors.</p>
269
+ </div>
270
+
271
+ <!-- Feature 5 -->
272
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
273
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
274
+ <i class="fas fa-headset text-xl"></i>
275
+ </div>
276
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">24/7 Support</h3>
277
+ <p class="text-gray-600 dark:text-gray-300">Get help whenever you need it with our dedicated student support team.</p>
278
+ </div>
279
+
280
+ <!-- Feature 6 -->
281
+ <div class="feature-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-gray-700">
282
+ <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
283
+ <i class="fas fa-chart-pie text-xl"></i>
284
+ </div>
285
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Score Analytics</h3>
286
+ <p class="text-gray-600 dark:text-gray-300">Track your progress with detailed analytics and personalized improvement plans.</p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Courses Section -->
293
+ <section id="courses" class="py-16">
294
+ <div class="container mx-auto px-4">
295
+ <div class="text-center mb-16">
296
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Popular <span class="gradient-text">Courses</span></h2>
297
+ <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Choose from our selection of high-impact courses designed to maximize your test scores.</p>
298
+ </div>
299
+
300
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
301
+ <!-- Course 1 -->
302
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
303
+ <div class="relative">
304
+ <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="SAT Prep" class="w-full h-48 object-cover">
305
+ <div class="absolute top-3 left-3 flex space-x-2">
306
+ <span class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium px-2 py-1 rounded">Bestseller</span>
307
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">Trending</span>
308
+ </div>
309
+ </div>
310
+ <div class="p-6">
311
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">SAT Prep Masterclass</h3>
312
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Comprehensive SAT preparation covering all sections with proven strategies to boost your score.</p>
313
+ <div class="flex items-center mb-4">
314
+ <div class="flex items-center space-x-1 text-yellow-400">
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star"></i>
318
+ <i class="fas fa-star"></i>
319
+ <i class="fas fa-star"></i>
320
+ </div>
321
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (428 reviews)</span>
322
+ </div>
323
+ <div class="flex items-center justify-between mb-4">
324
+ <div>
325
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$199</span>
326
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$299</span>
327
+ </div>
328
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">33% OFF</span>
329
+ </div>
330
+ <div class="flex flex-wrap gap-2 mb-4">
331
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Weeks</span>
332
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">20 Hours</span>
333
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">5 Practice Tests</span>
334
+ </div>
335
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Course 2 -->
340
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
341
+ <div class="relative">
342
+ <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="IELTS Prep" class="w-full h-48 object-cover">
343
+ <div class="absolute top-3 left-3">
344
+ <span class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs font-medium px-2 py-1 rounded">New</span>
345
+ </div>
346
+ </div>
347
+ <div class="p-6">
348
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">IELTS Complete Course</h3>
349
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Master all four IELTS components with expert guidance and realistic practice materials.</p>
350
+ <div class="flex items-center mb-4">
351
+ <div class="flex items-center space-x-1 text-yellow-400">
352
+ <i class="fas fa-star"></i>
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star"></i>
355
+ <i class="fas fa-star"></i>
356
+ <i class="fas fa-star-half-alt"></i>
357
+ </div>
358
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.7 (312 reviews)</span>
359
+ </div>
360
+ <div class="flex items-center justify-between mb-4">
361
+ <div>
362
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$179</span>
363
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$249</span>
364
+ </div>
365
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">28% OFF</span>
366
+ </div>
367
+ <div class="flex flex-wrap gap-2 mb-4">
368
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">8 Weeks</span>
369
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">30 Hours</span>
370
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">4 Mock Tests</span>
371
+ </div>
372
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Course 3 -->
377
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
378
+ <div class="relative">
379
+ <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AP Calculus" class="w-full h-48 object-cover">
380
+ <div class="absolute top-3 left-3">
381
+ <span class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium px-2 py-1 rounded">Limited Seats</span>
382
+ </div>
383
+ </div>
384
+ <div class="p-6">
385
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">AP Calculus AB/BC</h3>
386
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Conquer calculus with our intensive AP prep course designed to help you score a 5.</p>
387
+ <div class="flex items-center mb-4">
388
+ <div class="flex items-center space-x-1 text-yellow-400">
389
+ <i class="fas fa-star"></i>
390
+ <i class="fas fa-star"></i>
391
+ <i class="fas fa-star"></i>
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ </div>
395
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (276 reviews)</span>
396
+ </div>
397
+ <div class="flex items-center justify-between mb-4">
398
+ <div>
399
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$229</span>
400
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$349</span>
401
+ </div>
402
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">34% OFF</span>
403
+ </div>
404
+ <div class="flex flex-wrap gap-2 mb-4">
405
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">10 Weeks</span>
406
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">40 Hours</span>
407
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Practice Exams</span>
408
+ </div>
409
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Course 4 -->
414
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
415
+ <div class="relative">
416
+ <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="GRE Prep" class="w-full h-48 object-cover">
417
+ <div class="absolute top-3 left-3 flex space-x-2">
418
+ <span class="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-xs font-medium px-2 py-1 rounded">Hot Deal</span>
419
+ </div>
420
+ </div>
421
+ <div class="p-6">
422
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">GRE Ultimate Prep</h3>
423
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Comprehensive GRE preparation with advanced strategies for Verbal, Quant, and AWA sections.</p>
424
+ <div class="flex items-center mb-4">
425
+ <div class="flex items-center space-x-1 text-yellow-400">
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star-half-alt"></i>
431
+ </div>
432
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.7 (198 reviews)</span>
433
+ </div>
434
+ <div class="flex items-center justify-between mb-4">
435
+ <div>
436
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$249</span>
437
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$399</span>
438
+ </div>
439
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">38% OFF</span>
440
+ </div>
441
+ <div class="flex flex-wrap gap-2 mb-4">
442
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">12 Weeks</span>
443
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">50 Hours</span>
444
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">8 Full Tests</span>
445
+ </div>
446
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Course 5 -->
451
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
452
+ <div class="relative">
453
+ <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="College Essay" class="w-full h-48 object-cover">
454
+ </div>
455
+ <div class="p-6">
456
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">College Essay Workshop</h3>
457
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Craft compelling college essays that stand out with personalized feedback from Ivy League advisors.</p>
458
+ <div class="flex items-center mb-4">
459
+ <div class="flex items-center space-x-1 text-yellow-400">
460
+ <i class="fas fa-star"></i>
461
+ <i class="fas fa-star"></i>
462
+ <i class="fas fa-star"></i>
463
+ <i class="fas fa-star"></i>
464
+ <i class="fas fa-star"></i>
465
+ </div>
466
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.9 (342 reviews)</span>
467
+ </div>
468
+ <div class="flex items-center justify-between mb-4">
469
+ <div>
470
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$299</span>
471
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$499</span>
472
+ </div>
473
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">40% OFF</span>
474
+ </div>
475
+ <div class="flex flex-wrap gap-2 mb-4">
476
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">4 Weeks</span>
477
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">15 Hours</span>
478
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">3 Draft Reviews</span>
479
+ </div>
480
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Course 6 -->
485
+ <div class="course-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
486
+ <div class="relative">
487
+ <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="ACT Prep" class="w-full h-48 object-cover">
488
+ <div class="absolute top-3 left-3">
489
+ <span class="bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200 text-xs font-medium px-2 py-1 rounded">Popular</span>
490
+ </div>
491
+ </div>
492
+ <div class="p-6">
493
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">ACT Intensive Prep</h3>
494
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Master the ACT with our proven strategies and comprehensive practice materials.</p>
495
+ <div class="flex items-center mb-4">
496
+ <div class="flex items-center space-x-1 text-yellow-400">
497
+ <i class="fas fa-star"></i>
498
+ <i class="fas fa-star"></i>
499
+ <i class="fas fa-star"></i>
500
+ <i class="fas fa-star"></i>
501
+ <i class="fas fa-star-half-alt"></i>
502
+ </div>
503
+ <span class="ml-2 text-gray-600 dark:text-gray-300">4.8 (256 reviews)</span>
504
+ </div>
505
+ <div class="flex items-center justify-between mb-4">
506
+ <div>
507
+ <span class="text-primary-600 dark:text-primary-400 font-bold text-xl">$179</span>
508
+ <span class="ml-2 text-gray-500 dark:text-gray-400 line-through">$279</span>
509
+ </div>
510
+ <span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-1 rounded">36% OFF</span>
511
+ </div>
512
+ <div class="flex flex-wrap gap-2 mb-4">
513
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">6 Weeks</span>
514
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">25 Hours</span>
515
+ <span class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-medium px-2 py-1 rounded">5 Full Tests</span>
516
+ </div>
517
+ <button class="w-full px-4 py-2 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition-opacity shadow">Enroll Now</button>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+ <div class="text-center mt-16">
523
+ <a href="#" class="px-6 py-3 border-2 border-primary-600 text-primary-600 dark:text-primary-400 font-medium rounded-full hover:bg-primary-50 dark:hover:bg-gray-800 transition-colors inline-block">View All Courses</a>
524
+ </div>
525
+ </div>
526
+ </section>
527
+
528
+ <!-- CTA Section -->
529
+ <section class="py-16 gradient-bg">
530
+ <div class="container mx-auto px-4">
531
+ <div class="max-w-4xl mx-auto text-center">
532
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Transform Your Academic Journey?</h2>
533
+ <p class="text-xl text-white/90 mb-8">Join thousands of students who've achieved their dream scores with EduExcel. Limited seats available!</p>
534
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
535
+ <a href="#courses" class="px-6 py-3 bg-white text-primary-600 font-medium rounded-full hover:bg-gray-100 transition-colors shadow-lg">Browse Courses</a>
536
+ <a href="#" class="px-6 py-3 border-2 border-white text-white font-medium rounded-full hover:bg-white/10 transition-colors">Talk to Advisor</a>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </section>
541
+
542
+ <!-- Footer -->
543
+ <footer class="bg-gray-900 text-gray-300 py-12">
544
+ <div class="container mx-auto px-4">
545
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
546
+ <div>
547
+ <a href="#" class="flex items-center space-x-2 mb-4">
548
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">EE</div>
549
+ <span class="text-2xl font-bold text-white">Edu<span class="gradient-text">Excel</span></span>
550
+ </a>
551
+ <p class="mb-4">Empowering students to achieve academic excellence through innovative learning solutions.</p>
552
+ <div class="flex space-x-4">
553
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
554
+ <i class="fab fa-facebook-f"></i>
555
+ </a>
556
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
557
+ <i class="fab fa-twitter"></i>
558
+ </a>
559
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
560
+ <i class="fab fa-instagram"></i>
561
+ </a>
562
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
563
+ <i class="fab fa-linkedin-in"></i>
564
+ </a>
565
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
566
+ <i class="fab fa-youtube"></i>
567
+ </a>
568
+ </div>
569
+ </div>
570
+
571
+ <div>
572
+ <h3 class="text-lg font-semibold text-white mb-4">Courses</h3>
573
+ <ul class="space-y-2">
574
+ <li><a href="#" class="hover:text-white transition-colors">SAT Prep</a></li>
575
+ <li><a href="#" class="hover:text-white transition-colors">ACT Prep</a></li>
576
+ <li><a href="#" class="hover:text-white transition-colors">IELTS Prep</a></li>
577
+ <li><a href="#" class="hover:text-white transition-colors">GRE Prep</a></li>
578
+ <li><a href="#" class="hover:text-white transition-colors">AP Courses</a></li>
579
+ <li><a href="#" class="hover:text-white transition-colors">College Essays</a></li>
580
+ </ul>
581
+ </div>
582
+
583
+ <div>
584
+ <h3 class="text-lg font-semibold text-white mb-4">Resources</h3>
585
+ <ul class="space-y-2">
586
+ <li><a href="#" class="hover:text-white transition-colors">Study Guides</a></li>
587
+ <li><a href="#" class="hover:text-white transition-colors">Practice Tests</a></li>
588
+ <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
589
+ <li><a href="#" class="hover:text-white transition-colors">Webinars</a></li>
590
+ <li><a href="#" class="hover:text-white transition-colors">Success Stories</a></li>
591
+ </ul>
592
+ </div>
593
+
594
+ <div>
595
+ <h3 class="text-lg font-semibold text-white mb-4">Legal</h3>
596
+ <ul class="space-y-2">
597
+ <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
598
+ <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
599
+ <li><a href="#" class="hover:text-white transition-colors">Refund Policy</a></li>
600
+ <li><a href="#" class="hover:text-white transition-colors">Cookie Policy</a></li>
601
+ </ul>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center">
606
+ <p>&copy; 2023 EduExcel. All rights reserved.</p>
607
+ </div>
608
+ </div>
609
+ </footer>
610
+
611
+ <script>
612
+ // Theme toggle functionality
613
+ const themeToggle = document.getElementById('theme-toggle');
614
+ const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
615
+ const html = document.documentElement;
616
+
617
+ function toggleTheme() {
618
+ html.classList.toggle('dark');
619
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
620
+ }
621
+
622
+ themeToggle.addEventListener('click', toggleTheme);
623
+ mobileThemeToggle.addEventListener('click', toggleTheme);
624
+
625
+ // Set initial theme based on localStorage or prefer-color-scheme
626
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
627
+ html.classList.add('dark');
628
+ }
629
+
630
+ // Mobile menu toggle
631
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
632
+ const mobileMenu = document.getElementById('mobile-menu');
633
+
634
+ mobileMenuButton.addEventListener('click', () => {
635
+ mobileMenu.classList.toggle('hidden');
636
+ });
637
+
638
+ // Smooth scrolling for anchor links
639
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
640
+ anchor.addEventListener('click', function (e) {
641
+ e.preventDefault();
642
+
643
+ const targetId = this.getAttribute('href');
644
+ if (targetId === '#') return;
645
+
646
+ const targetElement = document.querySelector(targetId);
647
+ if (targetElement) {
648
+ targetElement.scrollIntoView({
649
+ behavior: 'smooth'
650
+ });
651
+
652
+ // Close mobile menu if open
653
+ if (!mobileMenu.classList.contains('hidden')) {
654
+ mobileMenu.classList.add('hidden');
655
+ }
656
+ }
657
+ });
658
+ });
659
+ </script>
660
+ <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=Enoy909/eduexcel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
661
+ </html>