0xmetaschool/
FlashcardGPT
FlashCardGPT transforms study materials into instant flashcards, saving students and professionals countless hours of manual work. While traditional flashcard creation is time-consuming, this app generates high-quality study materials in seconds, leading to better learning outcomes. Think of it as Grammarly for studying - simple, effective, and solving a universal pain point in education. Built with Next.js and powered by GPT-4o, this open-source template provides developers like you with a foundation to create your own AI-powered learning tools. With AI education tools trending, this template will help you build your next (pun intended) flashcard generator app in no time.
Readme
Source Codeapp
api
dashboard
globals.css
layout.js
page.js
components
lib
.gitignore
components.json
jsconfig.json
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
page.js
page.jspage.js
1import { Button } from "@/components/ui/button";
2import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
4import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5import { Check } from "lucide-react";
6
7import Header from "./dashboard/_components/Header";
8import Link from 'next/link';
9import FlashcardAnimation from "@/components/ui/FlashcardAnimation";
10import HeroSection from "@/components/HeroSection";
11
12const Feature = ({ title, text }) => (
13 <div className="flex flex-col items-center space-y-3">
14 <p className="font-bold text-lg text-black">{title}</p>
15 <p className="text-center text-gray-600">{text}</p>
16 </div>
17);
18
19const PriceWrapper = ({ children, isRecommended = false }) => (
20 <div className={`relative p-8 shadow-${isRecommended ? "2xl" : "lg"} border border-${isRecommended ? "black" : "gray-200"} rounded-xl bg-white flex flex-col justify-between h-[450px] transform-${isRecommended ? "scale-105" : "none"} z-${isRecommended ? 1 : 0}`}>
21 {isRecommended && (
22 <div className="absolute top-[-16px] left-1/2 transform-translate-x-[-50%] px-3 py-1 bg-black text-white font-bold text-sm rounded-full">
23 Recommended
24 </div>
25 )}
26 {children}
27 </div>
28);
29
30const TrustedBy = () => {
31 const logos = [
32 "/berkeley-light.webp",
33 "/oxford-light.webp",
34 "/princeton-light.webp",
35 "/stanford-light.webp",
36 "/yale-light.webp"
37 ];
38
39 return (
40 <section className="bg-gray-50 py-16">
41 <div className="container mx-auto text-center">
42 <h2 className="text-3xl font-bold mb-12 text-black">Trusted by Top Students and Educators Worldwide</h2>
43 <div className="flex flex-wrap justify-center items-center gap-12 opacity-70 grayscale">
44 {logos.map((logo, index) => (
45 <img
46 key={index}
47 src={logo}
48 alt={`Trusted Institution ${index + 1}`}
49 className="h-16 w-auto hover:opacity-100 transition-opacity duration-300 ml-5"
50 />
51 ))}
52 </div>
53 </div>
54 </section>
55 );
56};
57
58const WhoCanBenefit = () => {
59 const beneficiaries = [
60 { title: "Students", description: "Efficiently study and retain complex information across subjects" },
61 { title: "Educators", description: "Create interactive learning materials and track student progress" },
62 { title: "Researchers", description: "Quickly digest and memorize key research findings" },
63 { title: "Professionals", description: "Learn and retain critical information for certifications and training" }
64 ];
65
66 return (
67 <section className="py-20">
68 <div className="container mx-auto text-center">
69 <h2 className="text-3xl font-bold mb-12 text-black">Who Can Benefit?</h2>
70 <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
71 {beneficiaries.map((group, index) => (
72 <Card key={index} className="hover:shadow-lg transition-shadow duration-300">
73 <CardHeader>
74 <CardTitle className="text-xl">{group.title}</CardTitle>
75 </CardHeader>
76 <CardContent>
77 <p className="text-gray-600">{group.description}</p>
78 </CardContent>
79 </Card>
80 ))}
81 </div>
82 </div>
83 </section>
84 );
85};
86
87const HowToGenerate = () => {
88 const steps = [
89 { title: "Upload Document", description: "Upload any document or text source" },
90 { title: "AI Analysis", description: "Our AI extracts key information and concepts" },
91 { title: "Generate Flashcards", description: "Instantly create interactive study materials" },
92 { title: "Customize & Study", description: "Refine and start learning immediately" }
93 ];
94
95 return (
96 <section className="bg-gray-50 py-20">
97 <div className="container mx-auto text-center">
98 <h2 className="text-3xl font-bold mb-12 text-black">How to Generate Flashcards</h2>
99 <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
100 {steps.map((step, index) => (
101 <Card key={index} className="border-2 border-gray-200 hover:border-black transition-colors duration-300">
102 <CardHeader className="items-center">
103 <div className="w-12 h-12 bg-black text-white rounded-full flex items-center justify-center font-bold text-xl mb-4 hover:shadow-lg transition-shadow duration-300">
104 {index + 1}
105 </div>
106 <CardTitle>{step.title}</CardTitle>
107 </CardHeader>
108 <CardContent className="text-center">
109 <p className="text-gray-600">{step.description}</p>
110 </CardContent>
111 </Card>
112 ))}
113 </div>
114 </div>
115 </section>
116 );
117};
118
119const UserReviews = () => {
120 const reviews = [
121 {
122 name: "Sarah Johnson",
123 role: "Medical Student",
124 text: "FlashCardGPT revolutionized my study routine. Creating flashcards is now a breeze!",
125 rating: 5
126 },
127 {
128 name: "Michael Chen",
129 role: "Software Engineer",
130 text: "Incredibly efficient tool for learning complex technical concepts quickly.",
131 rating: 5
132 },
133 {
134 name: "Emma Rodriguez",
135 role: "High School Teacher",
136 text: "A game-changer for creating engaging study materials for my students.",
137 rating: 5
138 },
139 {
140 name: "Sarah Johnson",
141 role: "Medical Student",
142 text: "FlashCardGPT revolutionized my study routine. Creating flashcards is now a breeze!",
143 rating: 5
144 },
145 {
146 name: "Michael Chen",
147 role: "Software Engineer",
148 text: "Incredibly efficient tool for learning complex technical concepts quickly.",
149 rating: 5
150 },
151 {
152 name: "Emma Rodriguez",
153 role: "High School Teacher",
154 text: "A game-changer for creating engaging study materials for my students.",
155 rating: 5
156 }
157 ];
158
159 return (
160 <section className="py-20">
161 <div className="container mx-auto text-center">
162 <h2 className="text-3xl font-bold mb-12 text-black">What Our Users Say</h2>
163 <Carousel className="w-full max-w-4xl mx-auto">
164 <CarouselContent>
165 {reviews.map((review, index) => (
166 <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
167 <Card className="h-full">
168 <CardContent className="flex flex-col items-center p-6 text-center h-full justify-between">
169 <div className="mb-4">
170 <p className="text-gray-600 italic mb-4">"{review.text}"</p>
171 <div className="flex justify-center mb-4">
172 {[...Array(review.rating)].map((_, i) => (
173 <span key={i} className="text-yellow-500 text-2xl">ā
</span>
174 ))}
175 </div>
176 </div>
177 <div>
178 <h3 className="font-bold">{review.name}</h3>
179 <p className="text-gray-500">{review.role}</p>
180 </div>
181 </CardContent>
182 </Card>
183 </CarouselItem>
184 ))}
185 </CarouselContent>
186 <CarouselPrevious />
187 <CarouselNext />
188 </Carousel>
189 </div>
190 </section>
191 );
192};
193
194export default function Home() {
195 return (
196 <div className="relative flex flex-col justify-between min-h-screen overflow-hidden">
197 <Header />
198
199 <HeroSection/>
200
201 {/* New Sections */}
202 <TrustedBy />
203 <WhoCanBenefit />
204 <HowToGenerate />
205 <UserReviews />
206
207
208 {/* Call to Action */}
209 <section className="bg-gray-600 py-20 text-white">
210 <div className="container mx-auto text-center">
211 <h2 className="text-3xl mb-6 font-bold">Start Generating Flashcards Today!</h2>
212 <p className="text-xl mb-8 text-white">Upload your documents and transform your study experience with AI-generated flashcards.</p>
213 <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
214 <Button asChild>
215 <Link href="/dashboard">Get Started Now</Link>
216 </Button>
217 </div>
218 </div>
219 </section>
220 </div>
221 );
222}Downloads
0
Version
1.0.0
License
N/A
Platform
OpenAI GPT-4
Contributors 1
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!