Hugging Face's logo

Spaces:
sreenathsree1578
/
extends-base-html-block-titl
Running

App Files Community
sreenathsree1578 commited on
Commit
cdedf8d
·
verified ·
1 Parent(s): 2379c2b

{% extends "base.html" %}

Browse files

{% block title %}Online Exam Platform{% endblock %}

{% block content %}
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&family=Saira:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdn.tailwindcss.com"></script>

<style>
:root {
--primary-color: #000000;
--primary-dark: #111111;
--primary-light: #333333;
--secondary-color: #FFFFFF;
--accent-color: #7C3AED;
--text-primary: #000000;
--text-secondary: #666666;
--text-light: #999999;
--bg-light: #F5F5F5;
--bg-white: #FFFFFF;
--bg-dark: #121212;
--border-color: #E5E7EB;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
}

* {
font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}

body {
color: var(--text-primary);
background-color: var(--bg-white);
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Hero Section Styles - Fixed horizontal scrolling issue */
.hero-gradient {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
min-height: 110vh;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
overflow: hidden;

margin-top: -24px;
}

.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
object-fit: cover;
z-index: 0;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
}


/* Hero Section Font - Saira */
.hero-saira {
font-family: 'Saira', sans-serif;
}

/* Button Styles - Removed border-radius */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
border: none;
box-shadow: var(--shadow-md);
}

.btn-primary {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}

.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}

.btn-outline:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-2px);
}

/* Card Styles */
.card {
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}

.card-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}

.card-body {
padding: 1.5rem;
}

.card-footer {
padding: 1.5rem;
border-top: 1px solid var(--border-color);
background-color: var(--bg-light);
}

/* Feature Card Styles */
.feature-card {
text-align: center;
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.feature-icon {
width: 4rem;
height: 4rem;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
font-size: 1.5rem;
}

/* Carousel Section - Smaller and Left Aligned */
.carousel-section {
background-color: var(--bg-white);
padding: 4rem 0;


}

.carousel-container {
position: relative;
width: 100%;
max-width: 500px;
height: 350px;
overflow: hidden;
box-shadow: var(--shadow-xl);
border-radius: 1px;


}

.carousel {
display: flex;
width: 100%;
height: 100%;


transition: transform 0.5s ease-in-out;
}

.carousel-slide {
position: relative;
width: 100%;
height: 100%;
flex-shrink: 0;
}

.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.carousel-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 1.5rem;
color: white;
}

.carousel-text h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.25rem;
}

.carousel-text p {
font-size: 0.8rem;
opacity: 0.9;
}

.carousel-indicators {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}

.carousel-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}

.carousel-dot.active {
background-color: white;
width: 1.2rem;
border-radius: 0.2rem;
}

/* Carousel Content Layout */
.carousel-content {
display: flex;
align-items: center;
gap: 3rem;

}

.carousel-text-content {
flex: 1;
}

.carousel-text-content h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--primary-color);
}

.carousel-text-content p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}

.carousel-text-content ul {
list-style: none;
padding: 0;
}

.carousel-text-content li {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--text-secondary);
}

.carousel-text-content li i {
color: var(--accent-color);
margin-right: 0.75rem;
margin-top: 0.25rem;
}

/* Stats Section */
.stat-card {
text-align: center;
padding: 1.5rem;
}

.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
font-family: 'Montserrat', sans-serif;
}

.stat-label {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 500;
}

/* Testimonial Card */
.testimonial-card {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.testimonial-avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
margin-bottom: 1rem;
object-fit: cover;
}

.testimonial-text {
font-style: italic;
color: var(--text-secondary);
margin-bottom: 1.5rem;
flex-grow: 1;
}

.testimonial-name {
font-weight: 600;
margin-bottom: 0.25rem;
}

.testimonial-title {
color: var(--text-secondary);
font-size: 0.875rem;
margin-bottom: 1rem;
}

.testimonial-rating {
color: var(--accent-color);
}

/* Access Card */
.access-card {
height: 100%;
display: flex;
flex-direction: column;
}

.access-icon {
width: 5rem;
height: 5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}

.student-icon {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.admin-icon {
background: linear-gradient(135deg, #EF4444, #DC2626);
}

/* FAQ Accordion */
.faq-i

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +1052 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Extends Base Html Block Titl
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: pink
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: ---extends--base-html---------block-titl
3
+ colorFrom: gray
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,1053 @@
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>ExamPro - Transform Your Educational Journey</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
15
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
16
+
17
+ <style>
18
+ :root {
19
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
21
+ --dark-gradient: linear-gradient(135deg, #1a1c20 0%, #2d3436 100%);
22
+ --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
23
+ --warning-gradient: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Inter', sans-serif;
34
+ overflow-x: hidden;
35
+ background: #ffffff;
36
+ }
37
+
38
+ h1, h2, h3, h4, h5, h6 {
39
+ font-family: 'Poppins', sans-serif;
40
+ }
41
+
42
+ .brand-font {
43
+ font-family: 'Space Grotesk', sans-serif;
44
+ }
45
+
46
+ /* Animated Background */
47
+ .animated-bg {
48
+ position: fixed;
49
+ top: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ z-index: -1;
54
+ background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
55
+ background-size: 400% 400%;
56
+ animation: gradientShift 15s ease infinite;
57
+ }
58
+
59
+ @keyframes gradientShift {
60
+ 0% { background-position: 0% 50%; }
61
+ 50% { background-position: 100% 50%; }
62
+ 100% { background-position: 0% 50%; }
63
+ }
64
+
65
+ /* Hero Section */
66
+ .hero-section {
67
+ position: relative;
68
+ min-height: 100vh;
69
+ display: flex;
70
+ align-items: center;
71
+ overflow: hidden;
72
+ background: var(--dark-gradient);
73
+ }
74
+
75
+ .hero-particles {
76
+ position: absolute;
77
+ width: 100%;
78
+ height: 100%;
79
+ overflow: hidden;
80
+ }
81
+
82
+ .particle {
83
+ position: absolute;
84
+ width: 4px;
85
+ height: 4px;
86
+ background: rgba(255, 255, 255, 0.5);
87
+ border-radius: 50%;
88
+ animation: float 20s infinite linear;
89
+ }
90
+
91
+ @keyframes float {
92
+ from {
93
+ transform: translateY(100vh) translateX(0);
94
+ opacity: 0;
95
+ }
96
+ 10% {
97
+ opacity: 1;
98
+ }
99
+ 90% {
100
+ opacity: 1;
101
+ }
102
+ to {
103
+ transform: translateY(-100vh) translateX(100px);
104
+ opacity: 0;
105
+ }
106
+ }
107
+
108
+ /* Story Timeline */
109
+ .story-timeline {
110
+ position: relative;
111
+ padding: 100px 0;
112
+ background: linear-gradient(180deg, #1a1c20 0%, #2d3436 50%, #ffffff 50%, #ffffff 100%);
113
+ }
114
+
115
+ .timeline-line {
116
+ position: absolute;
117
+ left: 50%;
118
+ top: 0;
119
+ bottom: 0;
120
+ width: 2px;
121
+ background: linear-gradient(180deg, #667eea, #764ba2, #f093fb);
122
+ transform: translateX(-50%);
123
+ }
124
+
125
+ .timeline-item {
126
+ position: relative;
127
+ display: flex;
128
+ align-items: center;
129
+ margin-bottom: 100px;
130
+ opacity: 0;
131
+ transform: translateY(50px);
132
+ }
133
+
134
+ .timeline-item.visible {
135
+ opacity: 1;
136
+ transform: translateY(0);
137
+ transition: all 0.8s ease;
138
+ }
139
+
140
+ .timeline-content {
141
+ flex: 1;
142
+ padding: 40px;
143
+ background: white;
144
+ border-radius: 20px;
145
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
146
+ position: relative;
147
+ }
148
+
149
+ .timeline-item:nth-child(odd) .timeline-content {
150
+ margin-right: 50%;
151
+ text-align: right;
152
+ }
153
+
154
+ .timeline-item:nth-child(even) .timeline-content {
155
+ margin-left: 50%;
156
+ }
157
+
158
+ .timeline-dot {
159
+ position: absolute;
160
+ left: 50%;
161
+ transform: translateX(-50%);
162
+ width: 20px;
163
+ height: 20px;
164
+ background: white;
165
+ border: 4px solid #667eea;
166
+ border-radius: 50%;
167
+ z-index: 10;
168
+ }
169
+
170
+ /* Feature Cards */
171
+ .feature-card {
172
+ position: relative;
173
+ padding: 40px;
174
+ background: white;
175
+ border-radius: 20px;
176
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
177
+ overflow: hidden;
178
+ transition: all 0.4s ease;
179
+ }
180
+
181
+ .feature-card::before {
182
+ content: '';
183
+ position: absolute;
184
+ top: 0;
185
+ left: 0;
186
+ width: 100%;
187
+ height: 100%;
188
+ background: var(--primary-gradient);
189
+ opacity: 0;
190
+ transition: opacity 0.4s ease;
191
+ z-index: 0;
192
+ }
193
+
194
+ .feature-card:hover::before {
195
+ opacity: 0.9;
196
+ }
197
+
198
+ .feature-card:hover {
199
+ transform: translateY(-10px) scale(1.02);
200
+ box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
201
+ }
202
+
203
+ .feature-card:hover * {
204
+ color: white !important;
205
+ position: relative;
206
+ z-index: 1;
207
+ }
208
+
209
+ .feature-icon {
210
+ width: 80px;
211
+ height: 80px;
212
+ background: var(--primary-gradient);
213
+ border-radius: 20px;
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ margin-bottom: 20px;
218
+ transition: all 0.4s ease;
219
+ }
220
+
221
+ .feature-card:hover .feature-icon {
222
+ background: white;
223
+ transform: rotate(360deg) scale(1.1);
224
+ }
225
+
226
+ .feature-icon i {
227
+ font-size: 36px;
228
+ color: white;
229
+ }
230
+
231
+ .feature-card:hover .feature-icon i {
232
+ color: #667eea;
233
+ }
234
+
235
+ /* Stats Counter */
236
+ .stat-card {
237
+ text-align: center;
238
+ padding: 30px;
239
+ background: white;
240
+ border-radius: 20px;
241
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
242
+ position: relative;
243
+ overflow: hidden;
244
+ }
245
+
246
+ .stat-card::before {
247
+ content: '';
248
+ position: absolute;
249
+ top: -50%;
250
+ left: -50%;
251
+ width: 200%;
252
+ height: 200%;
253
+ background: var(--primary-gradient);
254
+ opacity: 0;
255
+ transition: all 0.6s ease;
256
+ transform: rotate(45deg);
257
+ }
258
+
259
+ .stat-card:hover::before {
260
+ opacity: 0.1;
261
+ }
262
+
263
+ .stat-number {
264
+ font-size: 48px;
265
+ font-weight: 800;
266
+ background: var(--primary-gradient);
267
+ -webkit-background-clip: text;
268
+ -webkit-text-fill-color: transparent;
269
+ background-clip: text;
270
+ margin-bottom: 10px;
271
+ }
272
+
273
+ /* Testimonial Cards */
274
+ .testimonial-card {
275
+ padding: 40px;
276
+ background: white;
277
+ border-radius: 20px;
278
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
279
+ position: relative;
280
+ transition: all 0.4s ease;
281
+ }
282
+
283
+ .testimonial-card:hover {
284
+ transform: translateY(-10px);
285
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
286
+ }
287
+
288
+ .quote-icon {
289
+ position: absolute;
290
+ top: 20px;
291
+ right: 20px;
292
+ font-size: 60px;
293
+ color: rgba(102, 126, 234, 0.1);
294
+ }
295
+
296
+ /* Floating Animation */
297
+ @keyframes floatAnimation {
298
+ 0%, 100% { transform: translateY(0px); }
299
+ 50% { transform: translateY(-20px); }
300
+ }
301
+
302
+ .floating {
303
+ animation: floatAnimation 3s ease-in-out infinite;
304
+ }
305
+
306
+ /* Pulse Animation */
307
+ @keyframes pulse {
308
+ 0% { transform: scale(1); }
309
+ 50% { transform: scale(1.05); }
310
+ 100% { transform: scale(1); }
311
+ }
312
+
313
+ .pulse {
314
+ animation: pulse 2s ease-in-out infinite;
315
+ }
316
+
317
+ /* Gradient Text */
318
+ .gradient-text {
319
+ background: var(--primary-gradient);
320
+ -webkit-background-clip: text;
321
+ -webkit-text-fill-color: transparent;
322
+ background-clip: text;
323
+ }
324
+
325
+ /* Button Styles */
326
+ .btn-gradient {
327
+ background: var(--primary-gradient);
328
+ color: white;
329
+ padding: 15px 40px;
330
+ border-radius: 50px;
331
+ font-weight: 600;
332
+ text-decoration: none;
333
+ display: inline-block;
334
+ transition: all 0.4s ease;
335
+ position: relative;
336
+ overflow: hidden;
337
+ }
338
+
339
+ .btn-gradient::before {
340
+ content: '';
341
+ position: absolute;
342
+ top: 50%;
343
+ left: 50%;
344
+ width: 0;
345
+ height: 0;
346
+ background: rgba(255, 255, 255, 0.3);
347
+ border-radius: 50%;
348
+ transform: translate(-50%, -50%);
349
+ transition: width 0.6s, height 0.6s;
350
+ }
351
+
352
+ .btn-gradient:hover::before {
353
+ width: 300px;
354
+ height: 300px;
355
+ }
356
+
357
+ .btn-gradient:hover {
358
+ transform: translateY(-3px);
359
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
360
+ }
361
+
362
+ /* Navigation */
363
+ .navbar {
364
+ position: fixed;
365
+ top: 0;
366
+ width: 100%;
367
+ background: rgba(26, 28, 32, 0.95);
368
+ backdrop-filter: blur(10px);
369
+ z-index: 1000;
370
+ padding: 20px 0;
371
+ transition: all 0.3s ease;
372
+ }
373
+
374
+ .navbar.scrolled {
375
+ padding: 10px 0;
376
+ background: rgba(26, 28, 32, 0.98);
377
+ }
378
+
379
+ /* Loading Animation */
380
+ .loader {
381
+ width: 50px;
382
+ height: 50px;
383
+ border: 3px solid rgba(102, 126, 234, 0.3);
384
+ border-top-color: #667eea;
385
+ border-radius: 50%;
386
+ animation: spin 1s linear infinite;
387
+ }
388
+
389
+ @keyframes spin {
390
+ to { transform: rotate(360deg); }
391
+ }
392
+
393
+ /* Responsive */
394
+ @media (max-width: 768px) {
395
+ .timeline-item:nth-child(odd) .timeline-content,
396
+ .timeline-item:nth-child(even) .timeline-content {
397
+ margin: 0 20px;
398
+ text-align: left;
399
+ }
400
+
401
+ .timeline-line {
402
+ left: 20px;
403
+ }
404
+
405
+ .timeline-dot {
406
+ left: 20px;
407
+ }
408
+ }
409
+ </style>
410
+ </head>
411
+ <body>
412
+ <!-- Animated Background -->
413
+ <div class="animated-bg"></div>
414
+
415
+ <!-- Navigation -->
416
+ <nav class="navbar" id="navbar">
417
+ <div class="container mx-auto px-6">
418
+ <div class="flex justify-between items-center">
419
+ <div class="flex items-center">
420
+ <i class="fas fa-graduation-cap text-3xl text-white mr-3"></i>
421
+ <span class="text-2xl font-bold text-white brand-font">ExamPro</span>
422
+ </div>
423
+ <div class="hidden md:flex space-x-8">
424
+ <a href="#home" class="text-white hover:text-purple-400 transition">Home</a>
425
+ <a href="#story" class="text-white hover:text-purple-400 transition">Our Story</a>
426
+ <a href="#features" class="text-white hover:text-purple-400 transition">Features</a>
427
+ <a href="#testimonials" class="text-white hover:text-purple-400 transition">Testimonials</a>
428
+ <a href="#access" class="text-white hover:text-purple-400 transition">Access</a>
429
+ </div>
430
+ <div class="flex space-x-4">
431
+ <a href="#login" class="text-white hover:text-purple-400 transition">Login</a>
432
+ <a href="#register" class="btn-gradient">Get Started</a>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </nav>
437
+
438
+ <!-- Hero Section -->
439
+ <section id="home" class="hero-section">
440
+ <div class="hero-particles" id="particles"></div>
441
+ <div class="container mx-auto px-6 relative z-10">
442
+ <div class="flex flex-col md:flex-row items-center">
443
+ <div class="md:w-1/2 text-white">
444
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 brand-font animate__animated animate__fadeInLeft">
445
+ Transform Your <span class="gradient-text">Educational</span> Journey
446
+ </h1>
447
+ <p class="text-xl mb-8 animate__animated animate__fadeInLeft animate__delay-1s">
448
+ Where technology meets education, creating a seamless bridge between learning and success. Join thousands of students and educators revolutionizing the way we learn and grow.
449
+ </p>
450
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 animate__animated animate__fadeInUp animate__delay-2s">
451
+ <a href="#story" class="btn-gradient">
452
+ <i class="fas fa-play-circle mr-2"></i> Watch Our Story
453
+ </a>
454
+ <a href="#access" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
455
+ Start Learning <i class="fas fa-arrow-right ml-2"></i>
456
+ </a>
457
+ </div>
458
+ </div>
459
+ <div class="md:w-1/2 mt-10 md:mt-0">
460
+ <div class="relative floating">
461
+ <img src="https://static.photos/education/640x360/42" alt="Students Learning" class="rounded-2xl shadow-2xl">
462
+ <div class="absolute -bottom-10 -left-10 bg-white p-4 rounded-xl shadow-xl pulse">
463
+ <div class="flex items-center space-x-3">
464
+ <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
465
+ <i class="fas fa-check text-white"></i>
466
+ </div>
467
+ <div>
468
+ <p class="font-semibold">Success Rate</p>
469
+ <p class="text-2xl font-bold text-green-500">98%</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Story Timeline Section -->
480
+ <section id="story" class="story-timeline">
481
+ <div class="timeline-line"></div>
482
+ <div class="container mx-auto px-6">
483
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-4 text-white">The Journey of Excellence</h2>
484
+ <p class="text-xl text-center text-gray-300 mb-20">Follow the path of transformation from classroom to career</p>
485
+
486
+ <div class="timeline-item">
487
+ <div class="timeline-dot"></div>
488
+ <div class="timeline-content">
489
+ <div class="flex items-center mb-4">
490
+ <i class="fas fa-seedling text-4xl text-green-500"></i>
491
+ </div>
492
+ <h3 class="text-2xl font-bold mb-3">The Beginning</h3>
493
+ <p class="text-gray-600 mb-4">Every great journey starts with a single step. Meet Sarah, a passionate student with dreams of making a difference in the world.</p>
494
+ <div class="flex items-center space-x-4">
495
+ <img src="https://static.photos/people/200x200/1" alt="Student" class="w-16 h-16 rounded-full">
496
+ <div>
497
+ <p class="font-semibold">Sarah Johnson</p>
498
+ <p class="text-sm text-gray-500">Computer Science Major</p>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="timeline-item">
505
+ <div class="timeline-dot"></div>
506
+ <div class="timeline-content">
507
+ <div class="flex items-center mb-4">
508
+ <i class="fas fa-book-open text-4xl text-blue-500"></i>
509
+ </div>
510
+ <h3 class="text-2xl font-bold mb-3">The Challenge</h3>
511
+ <p class="text-gray-600 mb-4">Sarah faced the challenge of remote learning during uncertain times. Traditional exams couldn't provide the security and fairness needed for true assessment.</p>
512
+ <div class="bg-gray-100 p-4 rounded-lg">
513
+ <p class="italic">"I needed a platform that could ensure integrity while giving me the flexibility to learn from anywhere."</p>
514
+ </div>
515
+ </div>
516
+ </div>
517
+
518
+ <div class="timeline-item">
519
+ <div class="timeline-dot"></div>
520
+ <div class="timeline-content">
521
+ <div class="flex items-center mb-4">
522
+ <i class="fas fa-lightbulb text-4xl text-yellow-500"></i>
523
+ </div>
524
+ <h3 class="text-2xl font-bold mb-3">The Discovery</h3>
525
+ <p class="text-gray-600 mb-4">Sarah discovered ExamPro - a revolutionary platform that combines AI-powered proctoring with seamless user experience. The transformation began.</p>
526
+ <div class="grid grid-cols-3 gap-4 mt-6">
527
+ <div class="text-center">
528
+ <i class="fas fa-robot text-3xl text-purple-500 mb-2"></i>
529
+ <p class="text-sm">AI Proctoring</p>
530
+ </div>
531
+ <div class="text-center">
532
+ <i class="fas fa-shield-alt text-3xl text-green-500 mb-2"></i>
533
+ <p class="text-sm">100% Secure</p>
534
+ </div>
535
+ <div class="text-center">
536
+ <i class="fas fa-chart-line text-3xl text-blue-500 mb-2"></i>
537
+ <p class="text-sm">Real Analytics</p>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="timeline-item">
544
+ <div class="timeline-dot"></div>
545
+ <div class="timeline-content">
546
+ <div class="flex items-center mb-4">
547
+ <i class="fas fa-graduation-cap text-4xl text-purple-500"></i>
548
+ </div>
549
+ <h3 class="text-2xl font-bold mb-3">The Success</h3>
550
+ <p class="text-gray-600 mb-4">With ExamPro, Sarah excelled in her studies, gaining confidence and knowledge. The platform's detailed analytics helped her identify strengths and areas for improvement.</p>
551
+ <div class="flex justify-between items-center bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-lg">
552
+ <div>
553
+ <p class="text-3xl font-bold">A+</p>
554
+ <p class="text-sm">Final Grade</p>
555
+ </div>
556
+ <div>
557
+ <p class="text-3xl font-bold">95%</p>
558
+ <p class="text-sm">Score Average</p>
559
+ </div>
560
+ <div>
561
+ <p class="text-3xl font-bold">50+</p>
562
+ <p class="text-sm">Exams Completed</p>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="timeline-item">
569
+ <div class="timeline-dot"></div>
570
+ <div class="timeline-content">
571
+ <div class="flex items-center mb-4">
572
+ <i class="fas fa-rocket text-4xl text-red-500"></i>
573
+ </div>
574
+ <h3 class="text-2xl font-bold mb-3">The Career</h3>
575
+ <p class="text-gray-600 mb-4">Today, Sarah is a successful software engineer at a leading tech company. Her journey with ExamPro prepared her for real-world challenges and opportunities.</p>
576
+ <div class="bg-gray-50 p-6 rounded-lg">
577
+ <div class="flex items-center space-x-4">
578
+ <img src="https://static.photos/office/200x200/2" alt="Office" class="w-20 h-20 rounded-lg">
579
+ <div>
580
+ <p class="font-bold text-lg">Senior Developer</p>
581
+ <p class="text-gray-600">Tech Innovations Inc.</p>
582
+ <div class="flex items-center mt-2">
583
+ <i class="fas fa-star text-yellow-500"></i>
584
+ <i class="fas fa-star text-yellow-500"></i>
585
+ <i class="fas fa-star text-yellow-500"></i>
586
+ <i class="fas fa-star text-yellow-500"></i>
587
+ <i class="fas fa-star text-yellow-500"></i>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </section>
596
+
597
+ <!-- Features Section -->
598
+ <section id="features" class="py-20 bg-gray-50">
599
+ <div class="container mx-auto px-6">
600
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-4">Revolutionary Features</h2>
601
+ <p class="text-xl text-center text-gray-600 mb-16">Empowering education with cutting-edge technology</p>
602
+
603
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
604
+ <div class="feature-card">
605
+ <div class="feature-icon">
606
+ <i class="fas fa-brain"></i>
607
+ </div>
608
+ <h3 class="text-2xl font-bold mb-4">AI-Powered Learning</h3>
609
+ <p class="text-gray-600 mb-4">Personalized learning paths adapted to each student's pace and style, ensuring optimal understanding and retention.</p>
610
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
611
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
612
+ </a>
613
+ </div>
614
+
615
+ <div class="feature-card">
616
+ <div class="feature-icon">
617
+ <i class="fas fa-shield-alt"></i>
618
+ </div>
619
+ <h3 class="text-2xl font-bold mb-4">Ultimate Security</h3>
620
+ <p class="text-gray-600 mb-4">Bank-level encryption and biometric verification ensure complete integrity of every examination and assessment.</p>
621
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
622
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
623
+ </a>
624
+ </div>
625
+
626
+ <div class="feature-card">
627
+ <div class="feature-icon">
628
+ <i class="fas fa-chart-line"></i>
629
+ </div>
630
+ <h3 class="text-2xl font-bold mb-4">Real-Time Analytics</h3>
631
+ <p class="text-gray-600 mb-4">Comprehensive insights and performance metrics help educators make data-driven decisions for better outcomes.</p>
632
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
633
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
634
+ </a>
635
+ </div>
636
+
637
+ <div class="feature-card">
638
+ <div class="feature-icon">
639
+ <i class="fas fa-users"></i>
640
+ </div>
641
+ <h3 class="text-2xl font-bold mb-4">Collaborative Learning</h3>
642
+ <p class="text-gray-600 mb-4">Virtual classrooms and group projects foster teamwork and communication skills essential for modern careers.</p>
643
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
644
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
645
+ </a>
646
+ </div>
647
+
648
+ <div class="feature-card">
649
+ <div class="feature-icon">
650
+ <i class="fas fa-mobile-alt"></i>
651
+ </div>
652
+ <h3 class="text-2xl font-bold mb-4">Mobile First</h3>
653
+ <p class="text-gray-600 mb-4">Learn anytime, anywhere with our fully responsive platform optimized for all devices and screen sizes.</p>
654
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
655
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
656
+ </a>
657
+ </div>
658
+
659
+ <div class="feature-card">
660
+ <div class="feature-icon">
661
+ <i class="fas fa-certificate"></i>
662
+ </div>
663
+ <h3 class="text-2xl font-bold mb-4">Verified Certificates</h3>
664
+ <p class="text-gray-600 mb-4">Blockchain-verified certificates that employers trust, showcasing your achievements with undeniable proof.</p>
665
+ <a href="#" class="text-purple-600 font-semibold hover:text-purple-700 transition">
666
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
667
+ </a>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ </section>
672
+
673
+ <!-- Stats Section -->
674
+ <section class="py-20 bg-gradient-to-r from-purple-600 to-pink-600">
675
+ <div class="container mx-auto px-6">
676
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
677
+ <div class="stat-card">
678
+ <div class="stat-number" data-target="50000">0</div>
679
+ <p class="text-xl font-semibold text-gray-700">Active Students</p>
680
+ </div>
681
+ <div class="stat-card">
682
+ <div class="stat-number" data-target="1000">0</div>
683
+ <p class="text-xl font-semibold text-gray-700">Partner Institutions</p>
684
+ </div>
685
+ <div class="stat-card">
686
+ <div class="stat-number" data-target="98">0</div>
687
+ <p class="text-xl font-semibold text-gray-700">Success Rate %</p>
688
+ </div>
689
+ <div class="stat-card">
690
+ <div class="stat-number" data-target="24">0</div>
691
+ <p class="text-xl font-semibold text-gray-700">Countries</p>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </section>
696
+
697
+ <!-- Testimonials Section -->
698
+ <section id="testimonials" class="py-20 bg-white">
699
+ <div class="container mx-auto px-6">
700
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-4">Success Stories</h2>
701
+ <p class="text-xl text-center text-gray-600 mb-16">Real experiences from real people</p>
702
+
703
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
704
+ <div class="testimonial-card">
705
+ <i class="fas fa-quote-right quote-icon"></i>
706
+ <img src="https://static.photos/people/200x200/3" alt="User" class="w-20 h-20 rounded-full mx-auto mb-4">
707
+ <p class="text-gray-600 mb-6 italic">"ExamPro transformed my teaching experience. The AI insights help me understand each student's needs better than ever before."</p>
708
+ <h4 class="font-bold text-lg">Dr. Michael Chen</h4>
709
+ <p class="text-gray-500">Professor, MIT</p>
710
+ <div class="flex justify-center mt-4">
711
+ <i class="fas fa-star text-yellow-500"></i>
712
+ <i class="fas fa-star text-yellow-500"></i>
713
+ <i class="fas fa-star text-yellow-500"></i>
714
+ <i class="fas fa-star text-yellow-500"></i>
715
+ <i class="fas fa-star text-yellow-500"></i>
716
+ </div>
717
+ </div>
718
+
719
+ <div class="testimonial-card">
720
+ <i class="fas fa-quote-right quote-icon"></i>
721
+ <img src="https://static.photos/people/200x200/4" alt="User" class="w-20 h-20 rounded-full mx-auto mb-4">
722
+ <p class="text-gray-600 mb-6 italic">"The secure exam environment gave me confidence to pursue my degree online. Now I'm working at my dream job!"</p>
723
+ <h4 class="font-bold text-lg">Emily Rodriguez</h4>
724
+ <p class="text-gray-500">Software Engineer</p>
725
+ <div class="flex justify-center mt-4">
726
+ <i class="fas fa-star text-yellow-500"></i>
727
+ <i class="fas fa-star text-yellow-500"></i>
728
+ <i class="fas fa-star text-yellow-500"></i>
729
+ <i class="fas fa-star text-yellow-500"></i>
730
+ <i class="fas fa-star text-yellow-500"></i>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="testimonial-card">
735
+ <i class="fas fa-quote-right quote-icon"></i>
736
+ <img src="https://static.photos/people/200x200/5" alt="User" class="w-20 h-20 rounded-full mx-auto mb-4">
737
+ <p class="text-gray-600 mb-6 italic">"As an administrator, the analytics and reporting features have made our institution more efficient and effective."</p>
738
+ <h4 class="font-bold text-lg">James Wilson</h4>
739
+ <p class="text-gray-500">University Director</p>
740
+ <div class="flex justify-center mt-4">
741
+ <i class="fas fa-star text-yellow-500"></i>
742
+ <i class="fas fa-star text-yellow-500"></i>
743
+ <i class="fas fa-star text-yellow-500"></i>
744
+ <i class="fas fa-star text-yellow-500"></i>
745
+ <i class="fas fa-star text-yellow-500"></i>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </section>
751
+
752
+ <!-- Access Section -->
753
+ <section id="access" class="py-20 bg-gray-50">
754
+ <div class="container mx-auto px-6">
755
+ <h2 class="text-4xl md:text-5xl font-bold text-center mb-4">Choose Your Path</h2>
756
+ <p class="text-xl text-center text-gray-600 mb-16">Start your journey with the right access level</p>
757
+
758
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
759
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden transform hover:scale-105 transition">
760
+ <div class="bg-gradient-to-r from-purple-600 to-pink-600 p-6 text-white">
761
+ <i class="fas fa-user-graduate text-4xl mb-4"></i>
762
+ <h3 class="text-2xl font-bold">Student Portal</h3>
763
+ <p class="mt-2">For learners ready to excel</p>
764
+ </div>
765
+ <div class="p-8">
766
+ <ul class="space-y-4 mb-8">
767
+ <li class="flex items-center">
768
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
769
+ <span>Access unlimited courses</span>
770
+ </li>
771
+ <li class="flex items-center">
772
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
773
+ <span>Take secure exams</span>
774
+ </li>
775
+ <li class="flex items-center">
776
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
777
+ <span>Track your progress</span>
778
+ </li>
779
+ <li class="flex items-center">
780
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
781
+ <span>Earn certificates</span>
782
+ </li>
783
+ </ul>
784
+ <a href="#login" class="btn-gradient w-full text-center block">
785
+ Student Login
786
+ </a>
787
+ </div>
788
+ </div>
789
+
790
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden transform hover:scale-105 transition">
791
+ <div class="bg-gradient-to-r from-blue-600 to-cyan-600 p-6 text-white">
792
+ <i class="fas fa-chalkboard-teacher text-4xl mb-4"></i>
793
+ <h3 class="text-2xl font-bold">Educator Portal</h3>
794
+ <p class="mt-2">For teachers and institutions</p>
795
+ </div>
796
+ <div class="p-8">
797
+ <ul class="space-y-4 mb-8">
798
+ <li class="flex items-center">
799
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
800
+ <span>Create and manage courses</span>
801
+ </li>
802
+ <li class="flex items-center">
803
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
804
+ <span>Monitor students live</span>
805
+ </li>
806
+ <li class="flex items-center">
807
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
808
+ <span>Access detailed analytics</span>
809
+ </li>
810
+ <li class="flex items-center">
811
+ <i class="fas fa-check-circle text-green-500 mr-3"></i>
812
+ <span>Customize assessments</span>
813
+ </li>
814
+ </ul>
815
+ <a href="#admin-login" class="btn-gradient w-full text-center block" style="background: var(--secondary-gradient);">
816
+ Educator Login
817
+ </a>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </section>
823
+
824
+ <!-- CTA Section -->
825
+ <section class="py-20 bg-gradient-to-r from-purple-600 to-pink-600">
826
+ <div class="container mx-auto px-6 text-center">
827
+ <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Transform Your Future?</h2>
828
+ <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
829
+ Join thousands of students and educators already experiencing the future of education
830
+ </p>
831
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
832
+ <a href="#register" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
833
+ Start Free Trial
834
+ </a>
835
+ <a href="#demo" class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">
836
+ Request Demo
837
+ </a>
838
+ </div>
839
+ </div>
840
+ </section>
841
+
842
+ <!-- Footer -->
843
+ <footer class="bg-gray-900 text-white py-12">
844
+ <div class="container mx-auto px-6">
845
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
846
+ <div>
847
+ <div class="flex items-center mb-4">
848
+ <i class="fas fa-graduation-cap text-3xl mr-3"></i>
849
+ <span class="text-2xl font-bold brand-font">ExamPro</span>
850
+ </div>
851
+ <p class="text-gray-400">Empowering education through innovation and technology.</p>
852
+ <div class="flex space-x-4 mt-6">
853
+ <a href="#" class="text-gray-400 hover:text-white transition">
854
+ <i class="fab fa-facebook-f text-xl"></i>
855
+ </a>
856
+ <a href="#" class="text-gray-400 hover:text-white transition">
857
+ <i class="fab fa-twitter text-xl"></i>
858
+ </a>
859
+ <a href="#" class="text-gray-400 hover:text-white transition">
860
+ <i class="fab fa-linkedin-in text-xl"></i>
861
+ </a>
862
+ <a href="#" class="text-gray-400 hover:text-white transition">
863
+ <i class="fab fa-instagram text-xl"></i>
864
+ </a>
865
+ </div>
866
+ </div>
867
+
868
+ <div>
869
+ <h4 class="text-lg font-semibold mb-4">Product</h4>
870
+ <ul class="space-y-2">
871
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
872
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
873
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Security</a></li>
874
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li>
875
+ </ul>
876
+ </div>
877
+
878
+ <div>
879
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
880
+ <ul class="space-y-2">
881
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
882
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
883
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
884
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
885
+ </ul>
886
+ </div>
887
+
888
+ <div>
889
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
890
+ <ul class="space-y-2">
891
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
892
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
893
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
894
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li>
895
+ </ul>
896
+ </div>
897
+ </div>
898
+
899
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
900
+ <p>&copy; 2024 ExamPro. All rights reserved. | Privacy Policy | Terms of Service</p>
901
+ </div>
902
+ </div>
903
+ </footer>
904
+
905
+ <script>
906
+ // Initialize animations
907
+ document.addEventListener('DOMContentLoaded', function() {
908
+ // Generate particles
909
+ const particlesContainer = document.getElementById('particles');
910
+ for (let i = 0; i < 50; i++) {
911
+ const particle = document.createElement('div');
912
+ particle.className = 'particle';
913
+ particle.style.left = Math.random() * 100 + '%';
914
+ particle.style.animationDelay = Math.random() * 20 + 's';
915
+ particle.style.animationDuration = (15 + Math.random() * 10) + 's';
916
+ particlesContainer.appendChild(particle);
917
+ }
918
+
919
+ // Navbar scroll effect
920
+ window.addEventListener('scroll', function() {
921
+ const navbar = document.getElementById('navbar');
922
+ if (window.scrollY > 50) {
923
+ navbar.classList.add('scrolled');
924
+ } else {
925
+ navbar.classList.remove('scrolled');
926
+ }
927
+ });
928
+
929
+ // Smooth scrolling for anchor links
930
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
931
+ anchor.addEventListener('click', function (e) {
932
+ e.preventDefault();
933
+ const target = document.querySelector(this.getAttribute('href'));
934
+ if (target) {
935
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
936
+ }
937
+ });
938
+ });
939
+
940
+ // Timeline animation on scroll
941
+ const timelineItems = document.querySelectorAll('.timeline-item');
942
+ const observerOptions = {
943
+ threshold: 0.3,
944
+ rootMargin: '0px 0px -100px 0px'
945
+ };
946
+
947
+ const timelineObserver = new IntersectionObserver((entries) => {
948
+ entries.forEach(entry => {
949
+ if (entry.isIntersecting) {
950
+ entry.target.classList.add('visible');
951
+ }
952
+ });
953
+ }, observerOptions);
954
+
955
+ timelineItems.forEach(item => {
956
+ timelineObserver.observe(item);
957
+ });
958
+
959
+ // Counter animation
960
+ const counters = document.querySelectorAll('.stat-number');
961
+ const speed = 200;
962
+
963
+ const countUp = (counter) => {
964
+ const target = +counter.getAttribute('data-target');
965
+ const count = +counter.innerText;
966
+ const increment = target / speed;
967
+
968
+ if (count < target) {
969
+ counter.innerText = Math.ceil(count + increment);
970
+ setTimeout(() => countUp(counter), 10);
971
+ } else {
972
+ counter.innerText = target.toLocaleString();
973
+ }
974
+ };
975
+
976
+ const counterObserver = new IntersectionObserver((entries) => {
977
+ entries.forEach(entry => {
978
+ if (entry.isIntersecting) {
979
+ countUp(entry.target);
980
+ counterObserver.unobserve(entry.target);
981
+ }
982
+ });
983
+ }, { threshold: 0.5 });
984
+
985
+ counters.forEach(counter => {
986
+ counterObserver.observe(counter);
987
+ });
988
+
989
+ // Initialize Feather Icons
990
+ feather.replace();
991
+
992
+ // GSAP Animations
993
+ gsap.registerPlugin(ScrollTrigger);
994
+
995
+ // Hero section animation
996
+ gsap.from(".hero-section h1", {
997
+ duration: 1,
998
+ y: 50,
999
+ opacity: 0,
1000
+ ease: "power3.out"
1001
+ });
1002
+
1003
+ gsap.from(".hero-section p", {
1004
+ duration: 1,
1005
+ y: 30,
1006
+ opacity: 0,
1007
+ delay: 0.3,
1008
+ ease: "power3.out"
1009
+ });
1010
+
1011
+ gsap.from(".hero-section .btn-gradient", {
1012
+ duration: 1,
1013
+ y: 30,
1014
+ opacity: 0,
1015
+ delay: 0.6,
1016
+ ease: "power3.out"
1017
+ });
1018
+
1019
+ // Feature cards animation
1020
+ gsap.utils.toArray(".feature-card").forEach((card, index) => {
1021
+ gsap.from(card, {
1022
+ scrollTrigger: {
1023
+ trigger: card,
1024
+ start: "top 80%",
1025
+ toggleActions: "play none none reverse"
1026
+ },
1027
+ duration: 0.8,
1028
+ y: 50,
1029
+ opacity: 0,
1030
+ delay: index * 0.1,
1031
+ ease: "power2.out"
1032
+ });
1033
+ });
1034
+
1035
+ // Testimonial cards animation
1036
+ gsap.utils.toArray(".testimonial-card").forEach((card, index) => {
1037
+ gsap.from(card, {
1038
+ scrollTrigger: {
1039
+ trigger: card,
1040
+ start: "top 80%",
1041
+ toggleActions: "play none none reverse"
1042
+ },
1043
+ duration: 0.8,
1044
+ scale: 0.8,
1045
+ opacity: 0,
1046
+ delay: index * 0.2,
1047
+ ease: "back.out(1.7)"
1048
+ });
1049
+ });
1050
+ });
1051
+ </script>
1052
+ </body>
1053
  </html>