0xmetaschool/
MockInterviewerGPT
MockInterviewerGPT is a tool for students and professionals looking to prepare for interviews with ease. This AI-driven template simulates real interview scenarios, providing tailored questions and feedback to help users improve their responses. Built with Next.js and leveraging Gemini AI, this open-source template is perfect for developers aiming to create advanced interview preparation tools. Whether you're applying for a new job or prepping for a big promotion, this template is designed to streamline your interview prep.
Readme
Source Codeapp
dashboard
globals.css
layout.js
page.js
theme.js
components
lib
utils
.gitignore
components.json
drizzle.config.js
jsconfig.json
LICENSE
middleware.js
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
page.js
page.jspage.js
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
"use client"
import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Star, Check, Target, BookOpen, Trophy } from "lucide-react";
import HeroSection from '@/components/ui/HeroSection';
export default function Home() {
const [activeReview, setActiveReview] = useState(0);
const trustedLogos = [
{ name: "Harvard", logo: "/harvard-logo.png" },
{ name: "Stanford", logo: "/stanford-logo.png" },
{ name: "MIT", logo: "/mit-logo.png" },
{ name: "Berkeley", logo: "/berkeley-logo.png" }
];
const benefitGroups = [
{
icon: <BookOpen className="w-12 h-12 text-black" />,
title: "Students",
description: "Prepare for technical, behavioral, and industry-specific interviews"
},
{
icon: <Target className="w-12 h-12 text-black" />,
title: "Career Changers",
description: "Build confidence and master interview skills across different domains"
},
{
icon: <Trophy className="w-12 h-12 text-black" />,
title: "Professionals",
description: "Upgrade your interviewing techniques and stay competitive in the job market"
}
];
const userReviews = [
{
name: "Sarah Chen",
role: "Software Engineer, Google",
review: "MockInterviewerGPT transformed my interview preparation. I landed my dream job at Google!",
rating: 5
},
{
name: "Michael Rodriguez",
role: "Product Manager, Stripe",
review: "The AI feedback is incredibly detailed and helped me improve my communication skills.",
rating: 5
},
{
name: "Emily Wong",
role: "Data Scientist, Amazon",
review: "Realistic scenarios and personalized coaching made all the difference in my interviews.",
rating: 5
},
{
name: "Alex James",
role: "Software Engineer, Google",
review: "MockInterviewerGPT has boosted my interview preparation. I landed my dream job at Google!",
rating: 5
},
{
name: "Michael Vaughn",
role: "Product Manager, Stripe",
review: "The AI feedback is incredibly detailed and helped me improve my communication skills.",
rating: 5
},
{
name: "Willy Wong",
role: "Data Scientist, Amazon",
review: "Realistic scenarios and personalized coaching made all the difference in my interviews.",
rating: 5
}
];
return (
<div className="min-h-screen bg-white -mt-20">
<HeroSection/>
{/* Trusted By Section */}
<section className="bg-gray-50 py-16">
<div className="container mx-auto text-center">
<h2 className="text-3xl font-bold mb-8 text-gray-900">Trusted by Top Institutions Worldwide</h2>
<div className="flex justify-center items-center space-x-8 opacity-70">
{trustedLogos.map((logo, index) => (
<img
key={index}
src={logo.logo}
alt={logo.name}
className="h-16 grayscale hover:grayscale-0 transition-all"
/>
))}
</div>
</div>
</section>
{/* Who Can Benefit Section */}
<section className="container mx-auto py-16">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-gray-900">Who Can Benefit?</h2>
<p className="text-gray-600 mt-4">Our AI interview coach is designed for everyone seeking to excel</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{benefitGroups.map((group, index) => (
<Card key={index} className="hover:shadow-lg transition-all">
<CardHeader className="flex items-center">
{group.icon}
<CardTitle className="mt-4">{group.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-gray-600">{group.description}</p>
</CardContent>
</Card>
))}
</div>
</section>
{/* Try an Interactive Demo Section */}
<section className="bg-gray-50 py-16">
<div className="container mx-auto text-center">
<h2 className="text-3xl font-bold mb-8 text-gray-900">Try an Interactive Demo</h2>
<p className="text-gray-600 mb-8">Experience the power of MockInterviewerGPT with our interactive demo.</p>
<div className="w-full max-w-4xl mx-auto">
<iframe
src="https://app.arcade.software/share/1BYhy3FcrntEmZzkd4sz"
title="Interactive Demo"
width="100%"
height="600"
style={{ border: 'none', borderRadius: '10px' }}
></iframe>
</div>
</div>
</section>
{/* User Reviews Carousel */}
<section className="container mx-auto py-16">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-gray-900">What Our Users Say</h2>
</div>
<Carousel
opts={{ align: "start" }}
className="w-full max-w-4xl mx-auto"
>
<CarouselContent>
{userReviews.map((review, index) => (
<CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
<Card className="h-full">
<CardContent className="flex flex-col justify-between p-6 h-full">
<div className="mb-4">
<div className="flex mb-2">
{[...Array(review.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
))}
</div>
<p className="text-gray-600 italic">"{review.review}"</p>
</div>
<div className="flex items-center">
<Avatar>
<AvatarImage src={`/avatars/${review.name.toLowerCase().replace(' ', '-')}.jpg`} />
<AvatarFallback>{review.name.charAt(0)}</AvatarFallback>
</Avatar>
<div className="ml-4">
<h4 className="font-bold">{review.name}</h4>
<p className="text-sm text-gray-500">{review.role}</p>
</div>
</div>
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</section>
{/* Call to Action */}
<section className="bg-gray-900 text-white py-16">
<div className="container mx-auto text-center">
<h2 className="text-4xl font-bold mb-4">Ready to Ace Your Next Interview?</h2>
<p className="text-xl mb-8 text-gray-300">Start your journey to interview mastery today</p>
<a href="/dashboard" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-white rounded-lg bg-gray-600 hover:bg-gray-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900"> Sign In Now </a>
</div>
</section>
</div>
);
}Downloads
0
Version
1.0.0
License
MIT
Platform
Gemini AI
Contributors 2
Open in
Last updated 1 month ago
We are a open source platform and encourage community to contribute to these templates!