Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
190 lines (181 loc) · 8.58 KB
/
Copy pathindex.html
File metadata and controls
190 lines (181 loc) · 8.58 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-237XSKT45R"></script>
<script src="analytics.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MockLoop - AI-Powered Mock Interviews</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container nav-container">
<div class="logo">
<span class="logo-icon">⚡</span>
<span class="logo-text">MockLoop</span>
</div>
<ul class="nav-menu">
<li><a href="#features">Features</a></li>
<!-- <li><a href="#how-it-works">How it works</a></li> -->
<!-- <li><a href="#plans">Plans</a></li> -->
<li><a href="#testimonials">Testimonials</a></li>
<!-- <li><a href="#faq">FAQ</a></li> -->
</ul>
<div class="nav-buttons">
<button class="btn-signup">Sign up</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<span class="ai-badge">✨ AI-Powered Mock Interviews</span>
<h1>Practice like it's the <span class="highlight">real interview.</span></h1>
<p>MockLoop is your AI interviewer for system design and technical interviews. Speak your answers, get real follow-ups, and improve with detailed feedback after every session.</p>
<ul class="features-list">
<li>
<span class="check">✓</span>
<span>Realistic AI interviewer that adapts to you</span>
</li>
<li>
<span class="check">✓</span>
<span>Voice-based. Speak naturally, no typing</span>
</li>
<li>
<span class="check">✓</span>
<span>In-depth feedback with a performance score</span>
</li>
<li>
<span class="check">✓</span>
<span>Track progress and get better, faster</span>
</li>
</ul>
<button class="btn-primary">Start a mock interview →</button>
<p class="no-credit">No credit card required</p>
</div>
<div class="hero-visual">
<div class="interview-card">
<div class="interview-header">
<span class="status">● Interview in progress</span>
<span class="time">24:36</span>
</div>
<div class="interview-visualizer">
<div class="pulse-ring"></div>
</div>
<div class="interview-content">
<p class="ai-label">AI Interviewer</p>
<p class="interview-text">Great. You mentioned using a cache layer. What happens if the cache goes down? How will your system behave?</p>
</div>
<div class="tap-speak">
<button class="microphone-btn">🎤</button>
<p>Tap to speak</p>
</div>
</div>
<p class="rating">★★★★★<br><span>Loved by 2,000+ engineers</span></p>
</div>
</div>
</div>
</section>
<!-- Trusted By Section -->
<section class="trusted-by">
<div class="container">
<p class="trusted-label">Trusted by engineers from top companies</p>
<div class="logos-grid">
<div class="company-logo">Google</div>
<div class="company-logo">Meta</div>
<div class="company-logo">Amazon</div>
<div class="company-logo">Microsoft</div>
<div class="company-logo">Apple</div>
<div class="company-logo">Netflix</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features-section">
<div class="container">
<h2>Everything you need to ace your interview</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🎤</div>
<h3>Voice-Based Interviews</h3>
<p>Speak your answers naturally. Our AI listens, understands, and responds like a real interviewer.</p>
</div>
<div class="feature-card">
<div class="feature-icon">💬</div>
<h3>Intelligent Follow-Ups</h3>
<p>Get dynamic follow-up questions based on your answers, just like in a real interview.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Detailed Feedback</h3>
<p>Receive a comprehensive scorecard with strengths, weaknesses, and actionable improvements.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3>Track Your Progress</h3>
<p>Practice more. Improve faster. Track your scores over time and watch yourself level up.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
<div class="container">
<h2>Loved by engineers</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="quote-icon">"</p>
<p class="testimonial-text">MockLoop feels exactly like my real system design interviews. The follow-ups are tough and realistic. It helped me get offers from two FAANG companies.</p>
<div class="testimonial-author">
<div class="avatar">👩</div>
<div>
<p class="author-name">Aisha K.</p>
<p class="author-role">Senior Software Engineer @ Amazon</p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="quote-icon">"</p>
<p class="testimonial-text">The feedback is insanely detailed and actually helps me improve. I went from confused to confident in just a few weeks.</p>
<div class="testimonial-author">
<div class="avatar">👨</div>
<div>
<p class="author-name">Michael T.</p>
<p class="author-role">Software Engineer @ Google</p>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="quote-icon">"</p>
<p class="testimonial-text">I love that I can just speak and think out loud. No typing, no distractions. Just like a real interview.</p>
<div class="testimonial-author">
<div class="avatar">👨</div>
<div>
<p class="author-name">James L.</p>
<p class="author-role">Staff Engineer @ Meta</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Ready to boost your interview skills?</h2>
<p>Join thousands of engineers who are practicing smarter and getting hired.</p>
<button class="btn-primary-large">Sign up →</button>
<p class="no-credit-large">No credit card required</p>
</div>
<div class="cta-graphic">🚀</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>