Hugging Face's logo

Spaces:
aops02
/
ielts-platform
Running

App Files Community
aops02 commited on
Commit
f42797e
·
verified ·
1 Parent(s): bec72ca

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +712 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ielts Platform
3
- emoji: 🐢
4
- colorFrom: pink
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: ielts-platform
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,712 @@
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>IELTS Mastery - Your Path to English Excellence</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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
+ <style>
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ }
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
16
+ }
17
+ .btn-gradient {
18
+ background: linear-gradient(90deg, #3b82f6 0%, #1e40af 100%);
19
+ }
20
+ .btn-gradient:hover {
21
+ background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
22
+ }
23
+ .feature-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
26
+ }
27
+ .testimonial-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .testimonial-card:hover {
31
+ transform: scale(1.03);
32
+ }
33
+ .course-card:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .teacher-card:hover {
38
+ transform: translateY(-5px);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i class="fas fa-graduation-cap text-blue-600 text-2xl mr-2"></i>
50
+ <span class="text-xl font-bold text-blue-600">IELTS Mastery</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
54
+ <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
55
+ <a href="#features" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a>
56
+ <a href="#courses" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Courses</a>
57
+ <a href="#testimonials" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Testimonials</a>
58
+ <a href="#team" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Our Team</a>
59
+ </div>
60
+ <div class="hidden md:ml-6 md:flex md:items-center">
61
+ <a href="/login" class="text-gray-500 hover:text-blue-600 px-3 py-2 text-sm font-medium">Login</a>
62
+ <a href="/register" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white btn-gradient hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
63
+ Get Started
64
+ </a>
65
+ </div>
66
+ <div class="-mr-2 flex items-center md:hidden">
67
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
68
+ <span class="sr-only">Open main menu</span>
69
+ <i class="fas fa-bars"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile menu -->
76
+ <div class="hidden md:hidden" id="mobile-menu">
77
+ <div class="pt-2 pb-3 space-y-1">
78
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-600 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
79
+ <a href="#features" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
80
+ <a href="#courses" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Courses</a>
81
+ <a href="#testimonials" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Testimonials</a>
82
+ <a href="#team" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Our Team</a>
83
+ </div>
84
+ <div class="pt-4 pb-3 border-t border-gray-200">
85
+ <div class="mt-3 space-y-1">
86
+ <a href="/login" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Login</a>
87
+ <a href="/register" class="block w-full text-left px-4 py-2 text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50">Get Started</a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Hero Section -->
94
+ <div class="gradient-bg">
95
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
96
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
97
+ <div>
98
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
99
+ Master IELTS with Confidence
100
+ </h1>
101
+ <p class="mt-3 max-w-3xl text-lg text-blue-100">
102
+ Our comprehensive platform helps students of all ages achieve their IELTS goals with personalized learning paths, expert teachers, and advanced tracking tools.
103
+ </p>
104
+ <div class="mt-8 sm:flex sm:max-w-md">
105
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
106
+ <a href="/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
107
+ Start Free Trial
108
+ </a>
109
+ </div>
110
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
111
+ <a href="#demo" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
112
+ Watch Demo
113
+ </a>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ <div class="mt-12 lg:mt-0">
118
+ <div class="relative w-full rounded-lg shadow-xl overflow-hidden">
119
+ <img class="w-full" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Students learning">
120
+ <div class="absolute inset-0 bg-blue-500 mix-blend-multiply"></div>
121
+ <div class="absolute inset-0 bg-gradient-to-t from-blue-600 via-blue-600 opacity-70"></div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Stats Section -->
129
+ <div class="bg-white py-12">
130
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
131
+ <div class="lg:text-center">
132
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Trusted by thousands</h2>
133
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
134
+ Proven Results Across All Age Groups
135
+ </p>
136
+ </div>
137
+
138
+ <div class="mt-10">
139
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
140
+ <div class="text-center">
141
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mx-auto">
142
+ <i class="fas fa-users text-xl"></i>
143
+ </div>
144
+ <h3 class="mt-6 text-3xl font-extrabold text-gray-900">10,000+</h3>
145
+ <p class="mt-2 text-base text-gray-500">Students Enrolled</p>
146
+ </div>
147
+
148
+ <div class="text-center">
149
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mx-auto">
150
+ <i class="fas fa-chart-line text-xl"></i>
151
+ </div>
152
+ <h3 class="mt-6 text-3xl font-extrabold text-gray-900">92%</h3>
153
+ <p class="mt-2 text-base text-gray-500">Achieve Target Scores</p>
154
+ </div>
155
+
156
+ <div class="text-center">
157
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mx-auto">
158
+ <i class="fas fa-user-tie text-xl"></i>
159
+ </div>
160
+ <h3 class="mt-6 text-3xl font-extrabold text-gray-900">150+</h3>
161
+ <p class="mt-2 text-base text-gray-500">Certified Teachers</p>
162
+ </div>
163
+
164
+ <div class="text-center">
165
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mx-auto">
166
+ <i class="fas fa-headset text-xl"></i>
167
+ </div>
168
+ <h3 class="mt-6 text-3xl font-extrabold text-gray-900">24/7</h3>
169
+ <p class="mt-2 text-base text-gray-500">TA Support Available</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Features Section -->
177
+ <div id="features" class="py-12 bg-gray-50">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <div class="lg:text-center">
180
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2>
181
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
182
+ Everything You Need to Succeed
183
+ </p>
184
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
185
+ Our platform is designed to help students of all levels achieve their IELTS goals.
186
+ </p>
187
+ </div>
188
+
189
+ <div class="mt-10">
190
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
191
+ <!-- Feature 1 -->
192
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
193
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
194
+ <i class="fas fa-clipboard-check text-xl"></i>
195
+ </div>
196
+ <div class="mt-5">
197
+ <h3 class="text-lg font-medium text-gray-900">Practice Tests</h3>
198
+ <p class="mt-2 text-base text-gray-500">
199
+ Full-length IELTS practice tests with automated scoring and detailed feedback.
200
+ </p>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Feature 2 -->
205
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
206
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
207
+ <i class="fas fa-layer-group text-xl"></i>
208
+ </div>
209
+ <div class="mt-5">
210
+ <h3 class="text-lg font-medium text-gray-900">Multi-level Courses</h3>
211
+ <p class="mt-2 text-base text-gray-500">
212
+ Courses tailored for all levels from beginner to advanced, with adaptive learning paths.
213
+ </p>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Feature 3 -->
218
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
219
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
220
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
221
+ </div>
222
+ <div class="mt-5">
223
+ <h3 class="text-lg font-medium text-gray-900">1-on-1 Tutoring</h3>
224
+ <p class="mt-2 text-base text-gray-500">
225
+ Personalized sessions with certified IELTS instructors to focus on your weak areas.
226
+ </p>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Feature 4 -->
231
+ <div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
232
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
233
+ <i class="fas fa-hands-helping text-xl"></i>
234
+ </div>
235
+ <div class="mt-5">
236
+ <h3 class="text-lg font-medium text-gray-900">TA Support</h3>
237
+ <p class="mt-2 text-base text-gray-500">
238
+ Round-the-clock support from teaching assistants to answer your questions.
239
+ </p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Courses Section -->
248
+ <div id="courses" class="py-12 bg-white">
249
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
250
+ <div class="lg:text-center">
251
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Courses</h2>
252
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
253
+ Structured Learning Paths
254
+ </p>
255
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
256
+ Choose the course that matches your current level and target score.
257
+ </p>
258
+ </div>
259
+
260
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
261
+ <!-- Course 1 -->
262
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
263
+ <div class="px-6 py-4 bg-blue-50">
264
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
265
+ <i class="fas fa-flag text-xl"></i>
266
+ </div>
267
+ <h3 class="mt-4 text-lg font-medium text-gray-900">IELTS Foundation</h3>
268
+ <p class="mt-2 text-sm text-gray-500">
269
+ For beginners starting their IELTS journey (Target: 4.0-5.5)
270
+ </p>
271
+ </div>
272
+ <div class="px-6 py-4">
273
+ <ul class="space-y-3">
274
+ <li class="flex items-start">
275
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
276
+ <span class="text-gray-700">Basic grammar & vocabulary</span>
277
+ </li>
278
+ <li class="flex items-start">
279
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
280
+ <span class="text-gray-700">Introduction to test format</span>
281
+ </li>
282
+ <li class="flex items-start">
283
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
284
+ <span class="text-gray-700">Simple practice exercises</span>
285
+ </li>
286
+ </ul>
287
+ <div class="mt-6">
288
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn more →</a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Course 2 -->
294
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
295
+ <div class="px-6 py-4 bg-blue-50">
296
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
297
+ <i class="fas fa-medal text-xl"></i>
298
+ </div>
299
+ <h3 class="mt-4 text-lg font-medium text-gray-900">IELTS Intermediate</h3>
300
+ <p class="mt-2 text-sm text-gray-500">
301
+ For students aiming for university admission (Target: 5.5-7.0)
302
+ </p>
303
+ </div>
304
+ <div class="px-6 py-4">
305
+ <ul class="space-y-3">
306
+ <li class="flex items-start">
307
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
308
+ <span class="text-gray-700">Advanced vocabulary building</span>
309
+ </li>
310
+ <li class="flex items-start">
311
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
312
+ <span class="text-gray-700">Test strategies & techniques</span>
313
+ </li>
314
+ <li class="flex items-start">
315
+ <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
316
+ <span class="text-gray-700">Full practice tests with feedback</span>
317
+ </li>
318
+ </ul>
319
+ <div class="mt-6">
320
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn more →</a>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Course 3 -->
326
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
327
+ <div class="px-6 py-4 bg-blue-50">
328
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
329
+ <i class="fas fa-trophy text-xl"></i>
330
+ </div>
331
+ <h3 class="mt-4 text-lg font-medium text-gray-900">IELTS Advanced</h3>
332
+ <p class="mt-2 text-sm text-gray-500">
333
+ For high achievers (Target: 7.0-9.0)
334
+ </p>
335
+ </div>
336
+ <div class="px-6 py-4">
337
+ <ul class="space-y-3">
338
+ <li class="flex items-start">
339
+ <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
340
+ <span class="text-gray-700">Academic writing refinement</span>
341
+ </li>
342
+ <li class="flex items-start">
343
+ <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
344
+ <span class="text-gray-700">Native-level speaking practice</span>
345
+ </li>
346
+ <li class="flex items-start">
347
+ <i class="fas fa-check text-green-500 mt=1 mr-2"></i>
348
+ <span class="text-gray-700">Expert coaching sessions</span>
349
+ </li>
350
+ </ul>
351
+ <div class="mt-6">
352
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Learn more →</a>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Learning Path Section -->
361
+ <div class="py-12 bg-gray-50">
362
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363
+ <div class="lg:text-center">
364
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Path to Success</h2>
365
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
366
+ Your Personalized IELTS Journey
367
+ </p>
368
+ </div>
369
+
370
+ <div class="mt-10">
371
+ <div class="relative">
372
+ <!-- Timeline line -->
373
+ <div class="hidden sm:block absolute top-0 left-1/2 w-1 h-full bg-blue-200 transform -translate-x-1/2"></div>
374
+
375
+ <!-- Timeline items -->
376
+ <div class="relative space-y-8 sm:space-y-0 sm:grid sm:grid-cols-4 sm:gap-8">
377
+ <!-- Step 1 -->
378
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
379
+ <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-500 text-white mx-auto mb-4">
380
+ <span class="text-xl font-bold">1</span>
381
+ </div>
382
+ <h3 class="text-lg font-medium text-gray-900">Assessment</h3>
383
+ <p class="mt-2 text-base text-gray-500">
384
+ Take our placement test to determine your current level
385
+ </p>
386
+ </div>
387
+
388
+ <!-- Step 2 -->
389
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
390
+ <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-500 text-white mx-auto mb-4">
391
+ <span class="text-xl font-bold">2</span>
392
+ </div>
393
+ <h3 class="text-lg font-medium text-gray-900">Plan</h3>
394
+ <p class="mt-2 text-base text-gray-500">
395
+ Receive a customized study plan based on your target score
396
+ </p>
397
+ </div>
398
+
399
+ <!-- Step 3 -->
400
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
401
+ <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-500 text-white mx-auto mb-4">
402
+ <span class="text-xl font-bold">3</span>
403
+ </div>
404
+ <h3 class="text-lg font-medium text-gray-900">Learn</h3>
405
+ <p class="mt-2 text-base text-gray-500">
406
+ Engage with interactive lessons and practice materials
407
+ </p>
408
+ </div>
409
+
410
+ <!-- Step 4 -->
411
+ <div class="bg-white p-6 rounded-lg shadow-md text-center">
412
+ <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-500 text-white mx-auto mb-4">
413
+ <span class="text-xl font-bold">4</span>
414
+ </div>
415
+ <h3 class="text-lg font-medium text-gray-900">Achieve</h3>
416
+ <p class="mt-2 text-base text-gray-500">
417
+ Take mock tests and refine your skills until test day
418
+ </p>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <!-- Testimonials Section -->
427
+ <div id="testimonials" class="py-12 bg-white">
428
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
429
+ <div class="lg:text-center">
430
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
431
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
432
+ What Our Students Say
433
+ </p>
434
+ </div>
435
+
436
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
437
+ <!-- Testimonial 1 -->
438
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
439
+ <div class="flex items-center">
440
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Student testimonial">
441
+ <div class="ml-4">
442
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
443
+ <p class="text-blue-600">High School Student</p>
444
+ </div>
445
+ </div>
446
+ <div class="mt-4">
447
+ <p class="text-gray-600 italic">
448
+ "I improved my score from 5.5 to 7.0 in just 3 months! The personalized feedback on my writing was incredibly helpful."
449
+ </p>
450
+ </div>
451
+ <div class="mt-4 flex">
452
+ <i class="fas fa-star text-yellow-400"></i>
453
+ <i class="fas fa-star text-yellow-400"></i>
454
+ <i class="fas fa-star text-yellow-400"></i>
455
+ <i class="fas fa-star text-yellow-400"></i>
456
+ <i class="fas fa-star text-yellow-400"></i>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Testimonial 2 -->
461
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
462
+ <div class="flex items-center">
463
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Student testimonial">
464
+ <div class="ml-4">
465
+ <h4 class="text-lg font-medium text-gray-900">David Kim</h4>
466
+ <p class="text-blue-600">University Applicant</p>
467
+ </div>
468
+ </div>
469
+ <div class="mt-4">
470
+ <p class="text-gray-600 italic">
471
+ "The 1-on-1 speaking sessions gave me the confidence I needed. My speaking score went from 6.0 to 7.5!"
472
+ </p>
473
+ </div>
474
+ <div class="mt-4 flex">
475
+ <i class="fas fa-star text-yellow-400"></i>
476
+ <i class="fas fa-star text-yellow-400"></i>
477
+ <i class="fas fa-star text-yellow-400"></i>
478
+ <i class="fas fa-star text-yellow-400"></i>
479
+ <i class="fas fa-star text-yellow-400"></i>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Testimonial 3 -->
484
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md border border-gray-100">
485
+ <div class="flex items-center">
486
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student testimonial">
487
+ <div class="ml-4">
488
+ <h4 class="text-lg font-medium text-gray-900">Maria Rodriguez</h4>
489
+ <p class="text-blue-600">Working Professional</p>
490
+ </div>
491
+ </div>
492
+ <div class="mt-4">
493
+ <p class="text-gray-600 italic">
494
+ "As a busy professional, the flexible schedule and TA support made all the difference. Achieved my target band 8!"
495
+ </p>
496
+ </div>
497
+ <div class="mt-4 flex">
498
+ <i class="fas fa-star text-yellow-400"></i>
499
+ <i class="fas fa-star text-yellow-400"></i>
500
+ <i class="fas fa-star text-yellow-400"></i>
501
+ <i class="fas fa-star text-yellow-400"></i>
502
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Team Section -->
510
+ <div id="team" class="py-12 bg-gray-50">
511
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
512
+ <div class="lg:text-center">
513
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Team</h2>
514
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
515
+ Meet Our Experts
516
+ </p>
517
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
518
+ Certified IELTS instructors and dedicated support staff
519
+ </p>
520
+ </div>
521
+
522
+ <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
523
+ <!-- Teacher 1 -->
524
+ <div class="teacher-card bg-white p-6 rounded-lg shadow-md text-center transition duration-300 ease-in-out">
525
+ <img class="h-32 w-32 rounded-full mx-auto" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Teacher">
526
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Dr. Emily Wilson</h3>
527
+ <p class="text-blue-600">IELTS Examiner (10+ years)</p>
528
+ <p class="mt-2 text-sm text-gray-500">
529
+ Specializes in academic writing and reading strategies
530
+ </p>
531
+ <div class="mt-4 flex justify-center space-x-4">
532
+ <a href="#" class="text-blue-500 hover:text-blue-700">
533
+ <i class="fab fa-linkedin"></i>
534
+ </a>
535
+ <a href="#" class="text-blue-500 hover:text-blue-700">
536
+ <i class="fas fa-envelope"></i>
537
+ </a>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- Teacher 2 -->
542
+ <div class="teacher-card bg-white p-6 rounded-lg shadow-md text-center transition duration-300 ease-in-out">
543
+ <img class="h-32 w-32 rounded-full mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Teacher">
544
+ <h3 class="mt-4 text-lg font-medium text-gray-900">James Peterson</h3>
545
+ <p class="text-blue-600">Speaking Specialist</p>
546
+ <p class="mt-2 text-sm text-gray-500">
547
+ Former British Council examiner with accent training expertise
548
+ </p>
549
+ <div class="mt-4 flex justify-center space-x-4">
550
+ <a href="#" class="text-blue-500 hover:text-blue-700">
551
+ <i class="fab fa-linkedin"></i>
552
+ </a>
553
+ <a href="#" class="text-blue-500 hover:text-blue-700">
554
+ <i class="fas fa-envelope"></i>
555
+ </a>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- TA 1 -->
560
+ <div class="teacher-card bg-white p-6 rounded-lg shadow-md text-center transition duration-300 ease-in-out">
561
+ <img class="h-32 w-32 rounded-full mx-auto" src="https://randomuser.me/api/portraits/women/63.jpg" alt="TA">
562
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Sophia Chen</h3>
563
+ <p class="text-blue-600">Head Teaching Assistant</p>
564
+ <p class="mt-2 text-sm text-gray-500">
565
+ MA in TESOL, provides writing feedback and study tips
566
+ </p>
567
+ <div class="mt-4 flex justify-center space-x-4">
568
+ <a href="#" class="text-blue-500 hover:text-blue-700">
569
+ <i class="fab fa-linkedin"></i>
570
+ </a>
571
+ <a href="#" class="text-blue-500 hover:text-blue-700">
572
+ <i class="fas fa-envelope"></i>
573
+ </a>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- TA 2 -->
578
+ <div class="teacher-card bg-white p-6 rounded-lg shadow-md text-center transition duration-300 ease-in-out">
579
+ <img class="h-32 w-32 rounded-full mx-auto" src="https://randomuser.me/api/portraits/men/75.jpg" alt="TA">
580
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Michael Brown</h3>
581
+ <p class="text-blue-600">Listening & Reading Specialist</p>
582
+ <p class="mt-2 text-sm text-gray-500">
583
+ Creates practice materials and provides test strategies
584
+ </p>
585
+ <div class="mt-4 flex justify-center space-x-4">
586
+ <a href="#" class="text-blue-500 hover:text-blue-700">
587
+ <i class="fab fa-linkedin"></i>
588
+ </a>
589
+ <a href="#" class="text-blue-500 hover:text-blue-700">
590
+ <i class="fas fa-envelope"></i>
591
+ </a>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <!-- CTA Section -->
599
+ <div class="gradient-bg">
600
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-16">
601
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
602
+ <div>
603
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
604
+ Ready to start your IELTS journey?
605
+ </h2>
606
+ <p class="mt-3 max-w-3xl text-lg text-blue-100">
607
+ Join thousands of students who have achieved their target scores with our proven methods.
608
+ </p>
609
+ </div>
610
+ <div class="mt-8 lg:mt-0">
611
+ <div class="inline-flex rounded-md shadow">
612
+ <a href="/register" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50">
613
+ Get Started Today
614
+ </a>
615
+ </div>
616
+ <div class="inline-flex ml-3 rounded-md shadow">
617
+ <a href="#demo" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70">
618
+ Watch Demo
619
+ </a>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <!-- Footer -->
627
+ <footer class="bg-gray-800">
628
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
629
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
630
+ <!-- About -->
631
+ <div class="space-y-4">
632
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">About</h3>
633
+ <ul class="space-y-2">
634
+ <li><a href="#" class="text-gray-300 hover:text-white">Our Story</a></li>
635
+ <li><a href="#" class="text-gray-300 hover:text-white">Team</a></li>
636
+ <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
637
+ <li><a href="#" class="text-gray-300 hover:text-white">Press</a></li>
638
+ </ul>
639
+ </div>
640
+
641
+ <!-- Resources -->
642
+ <div class="space-y-4">
643
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Resources</h3>
644
+ <ul class="space-y-2">
645
+ <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
646
+ <li><a href="#" class="text-gray-300 hover:text-white">IELTS Tips</a></li>
647
+ <li><a href="#" class="text-gray-300 hover:text-white">Practice Tests</a></li>
648
+ <li><a href="#" class="text-gray-300 hover:text-white">Webinars</a></li>
649
+ </ul>
650
+ </div>
651
+
652
+ <!-- Support -->
653
+ <div class="space-y-4">
654
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Support</h3>
655
+ <ul class="space-y-2">
656
+ <li><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
657
+ <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
658
+ <li><a href="#" class="text-gray-300 hover:text-white">FAQs</a></li>
659
+ <li><a href="#" class="text-gray-300 hover:text-white">System Status</a></li>
660
+ </ul>
661
+ </div>
662
+
663
+ <!-- Legal -->
664
+ <div class="space-y-4">
665
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Legal</h3>
666
+ <ul class="space-y-2">
667
+ <li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li>
668
+ <li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li>
669
+ <li><a href="#" class="text-gray-300 hover:text-white">Cookie Policy</a></li>
670
+ <li><a href="#" class="text-gray-300 hover:text-white">GDPR</a></li>
671
+ </ul>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="mt-8 pt-8 border-t border-gray-700">
676
+ <div class="md:flex md:items-center md:justify-between">
677
+ <div class="flex justify-center space-x-6 md:order-2">
678
+ <a href="#" class="text-gray-400 hover:text-white">
679
+ <i class="fab fa-facebook-f"></i>
680
+ </a>
681
+ <a href="#" class="text-gray-400 hover:text-white">
682
+ <i class="fab fa-instagram"></i>
683
+ </a>
684
+ <a href="#" class="text-gray-400 hover:text-white">
685
+ <i class="fab fa-twitter"></i>
686
+ </a>
687
+ <a href="#" class="text-gray-400 hover:text-white">
688
+ <i class="fab fa-youtube"></i>
689
+ </a>
690
+ <a href="#" class="text-gray-400 hover:text-white">
691
+ <i class="fab fa-linkedin-in"></i>
692
+ </a>
693
+ </div>
694
+ <div class="mt-8 md:mt-0 md:order-1">
695
+ <p class="text-center text-base text-gray-400">
696
+ &copy; 2023 IELTS Mastery. All rights reserved.
697
+ </p>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </footer>
703
+
704
+ <script>
705
+ // Mobile menu toggle
706
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
707
+ const menu = document.getElementById('mobile-menu');
708
+ menu.classList.toggle('hidden');
709
+ });
710
+ </script>
711
+ <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=aops02/ielts-platform" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
712
+ </html>