Techplement/about.html at main · rishabhKernel/Techplement · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - EduTech</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1f2937',
                        secondary: '#4b5563'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            @apply bg-gradient-to-br from-indigo-500 to-purple-600;
        }

        .glass {
            @apply bg-white/10 backdrop-blur-md border border-white/20;
        }

        .card {
            @apply bg-white border border-gray-200 shadow-lg;
        }

        .card:hover {
            @apply transform -translate-y-1 transition-all duration-200;
        }

        .nav-link {
            @apply text-gray-600 hover:text-gray-900 transition-colors;
        }

        .nav-link.active {
            @apply text-gray-900 font-medium;
        }

        .section-title {
            @apply text-3xl font-bold text-gray-900 mb-4;
        }

        .section-subtitle {
            @apply text-lg text-gray-600 mb-8;
        }

        .btn-primary {
            @apply bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition-all hover:scale-105;
        }

        .btn-secondary {
            @apply bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-all hover:scale-105;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .animate-slide-up {
            animation: slideUp 0.5s ease-out;
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Custom scrollbar - because why not? */
        .custom-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Quick fix for mobile menu */
        @media (max-width: 768px) {
            .mobile-menu {
                display: none;
            }
            .mobile-menu.active {
                display: block;
            }
        }

        .timeline-item {
            position: relative;
            padding-left: 2rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #6366F1;
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            left: -4px;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #6366F1;
        }
    </style>
</head>
<body class="min-h-screen gradient-bg">
    <!-- Navigation -->
    <nav class="bg-white/10 backdrop-blur-md fixed w-full z-50 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-2xl font-bold text-white hover:text-gray-200 transition-colors">EduTech</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="nav-link">Home</a>
                    <a href="courses.html" class="nav-link">Courses</a>
                    <a href="instructors.html" class="nav-link">Instructors</a>
                    <a href="about.html" class="nav-link active">About</a>
                    <a href="login.html" class="bg-white text-indigo-600 px-6 py-2 rounded-full hover:bg-gray-100 transition-all hover:scale-105">Sign In</a>
                </div>
                <!-- Mobile menu button -->
                <div class="md:hidden flex items-center">
                    <button class="mobile-menu-button p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <!-- Mobile menu -->
        <div class="mobile-menu hidden md:hidden">
            <a href="index.html" class="block py-2 px-4 text-indigo-600 bg-indigo-50">Home</a>
            <a href="courses.html" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Courses</a>
            <a href="instructors.html" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Instructors</a>
            <a href="about.html" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">About</a>
            <a href="login.html" class="block py-2 px-4 text-gray-700 hover:bg-indigo-50">Sign In</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="relative bg-gradient-to-r from-indigo-600 to-purple-600 text-white pt-32 pb-24">
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute inset-0 bg-gradient-radial from-white/10 to-transparent"></div>
            <div class="absolute -top-24 -right-24 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float"></div>
            <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" style="animation-delay: -1.5s"></div>
        </div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in">Our Journey</h1>
            <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto animate-slide-up" style="animation-delay: 0.2s">
                Discover the story behind EduTech and our commitment to transforming education.
            </p>
        </div>
    </div>

    <!-- Mission Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 animate-slide-up">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Mission</h2>
                    <p class="text-gray-600 mb-6">
                        At EduTech, we believe that quality education should be accessible to everyone. Our mission is to empower learners worldwide by providing cutting-edge courses taught by industry experts.
                    </p>
                    <p class="text-gray-600">
                        We combine the best of traditional education with modern technology to create an engaging and effective learning experience for our students.
                    </p>
                </div>
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                         alt="Students learning"
                         class="rounded-lg shadow-xl w-full h-auto">
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-indigo-600 rounded-lg -z-10 animate-float" style="animation-delay: 1s"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeline Section -->
    <div class="bg-gradient-to-b from-gray-100 to-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-4xl font-bold text-gray-900 mb-12 text-center">Our Journey</h2>
            <div class="space-y-12">
                <div class="timeline-item animate-slide-up">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2020</h3>
                    <p class="text-gray-600">EduTech was founded with a vision to revolutionize online education.</p>
                </div>
                <div class="timeline-item animate-slide-up" style="animation-delay: 0.1s">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2021</h3>
                    <p class="text-gray-600">Launched our first 50 courses and reached 10,000 students worldwide.</p>
                </div>
                <div class="timeline-item animate-slide-up" style="animation-delay: 0.2s">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2022</h3>
                    <p class="text-gray-600">Expanded our course catalog and introduced live interactive sessions.</p>
                </div>
                <div class="timeline-item animate-slide-up" style="animation-delay: 0.3s">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2023</h3>
                    <p class="text-gray-600">Expanded our reach to over 50 countries and launched our mobile app.</p>
                </div>
                <div class="timeline-item animate-slide-up" style="animation-delay: 0.4s">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2024</h3>
                    <p class="text-gray-600">Introduced AI-powered personalized learning paths and virtual tutoring system.</p>
                </div>
                <div class="timeline-item animate-slide-up" style="animation-delay: 0.5s">
                    <h3 class="text-xl font-bold text-gray-900 mb-2">2025</h3>
                    <p class="text-gray-600">Launching immersive VR/AR learning experiences and expanding to new emerging markets.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Values Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <h2 class="text-4xl font-bold text-gray-900 mb-12 text-center">Our Values</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-8 rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-300 animate-slide-up">
                <div class="bg-indigo-100 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-center">Innovation</h3>
                <p class="text-gray-600 text-center">Constantly evolving and adapting to the latest educational technologies.</p>
            </div>

            <div class="bg-white p-8 rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-300 animate-slide-up" style="animation-delay: 0.1s">
                <div class="bg-indigo-100 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-center">Community</h3>
                <p class="text-gray-600 text-center">Building a supportive learning environment for students worldwide.</p>
            </div>

            <div class="bg-white p-8 rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-300 animate-slide-up" style="animation-delay: 0.2s">
                <div class="bg-indigo-100 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-4 text-center">Excellence</h3>
                <p class="text-gray-600 text-center">Committed to delivering the highest quality education experience.</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                <div>
                    <h3 class="text-2xl font-bold mb-6">EduTech</h3>
                    <p class="text-gray-400 leading-relaxed">
                        Empowering learners worldwide with quality education and cutting-edge technology.
                    </p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">Quick Links</h4>
                    <ul class="space-y-4">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
                        <li><a href="courses.html" class="text-gray-400 hover:text-white transition-colors">Courses</a></li>
                        <li><a href="instructors.html" class="text-gray-400 hover:text-white transition-colors">Instructors</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">About Us</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">Support</h4>
                    <ul class="space-y-4">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Help Center</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-6">Newsletter</h4>
                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for updates and exclusive offers.</p>
                    <form class="flex flex-col space-y-4">
                        <input type="email" placeholder="Enter your email"
                            class="px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-indigo-500 text-white">
                        <button class="bg-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors">
                            Subscribe
                        </button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2024 EduTech. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // Mobile menu toggle
        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
            document.querySelector('.mobile-menu').classList.toggle('active');
        });
    </script>
</body>
</html>