0xmetaschool/
LangLearnGPT
LangLearnGPT is your personal language learning assistant, creating a custom plan to help you master any new language. With AI-interactive speaking exercises, it's like having a private tutor in your pocket. Just enter your target language, and the app generates personalized content to improve your vocabulary, pronunciation, and conversational skills. Built with Next.js and OpenAI GPT-4, this ready-to-use template empowers developers to create their own language learning platforms. As remote and self-paced education becomes more popular, this template lets you build an app that makes learning new languages accessible and engaging for everyone.
Readme
Source Codeapp
api
auth
components
contexts
curriculum
hooks
language-selector
lesson
lib
models
globals.css
layout.js
page.js
theme.js
.gitignore
allowlist.json
jsconfig.json
language_codes.json
LICENSE
next.config.js
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
page.js
page.jspage.js
1'use client';
2import React, { useEffect } from 'react';
3import {
4 Box,
5 VStack,
6 Heading,
7 Text,
8 Button,
9 SimpleGrid,
10 Container,
11 Icon,
12 Fade,
13 Badge,
14 useDisclosure,
15} from '@chakra-ui/react';
16import { CheckIcon } from 'lucide-react';
17import Link from 'next/link';
18import useTypewriter from './hooks/useTypewriterEffect';
19
20/**
21 * @dev Feature component that displays a feature with an icon, title, and text.
22 * @param {string} title - The title of the feature.
23 * @param {string} text - The description of the feature.
24 * @returns {JSX.Element} - The rendered Feature component.
25 */
26const Feature = ({ title, text }) => (
27 <VStack spacing={3} align="center">
28 <Icon as={CheckIcon} w={8} h={8} color="black" />
29 <Text fontWeight="bold" fontSize="lg" color="black">{title}</Text>
30 <Text textAlign="center" color="gray.600">{text}</Text>
31 </VStack>
32);
33
34/**
35 * @dev PriceWrapper component that wraps the pricing plan with additional styling.
36 * @param {object} children - The child components.
37 * @param {boolean} isRecommended - Whether the plan is recommended.
38 * @returns {JSX.Element} - The rendered PriceWrapper component.
39 */
40const PriceWrapper = ({ children, isRecommended = false }) => (
41 <Box
42 shadow={isRecommended ? "2xl" : "lg"}
43 borderWidth="1px"
44 borderRadius="xl"
45 borderColor={isRecommended ? "black" : "gray.200"}
46 p={8}
47 bg="white"
48 position="relative"
49 transform={isRecommended ? "scale(1.05)" : "none"}
50 zIndex={isRecommended ? 1 : 0}
51 height="450px" // Fixed height for all price wrappers
52 display="flex"
53 flexDirection="column"
54 justifyContent="space-between"
55 >
56 {isRecommended && (
57 <Badge
58 position="absolute"
59 top="-4"
60 left="50%"
61 transform="translateX(-50%)"
62 px={3}
63 py={1}
64 bg="black"
65 color="white"
66 fontWeight="bold"
67 fontSize="sm"
68 borderRadius="full"
69 >
70 Recommended
71 </Badge>
72 )}
73 {children}
74 </Box>
75);
76
77/**
78 * @dev LandingPage component that displays the main landing page.
79 * @returns {JSX.Element} - The rendered LandingPage component.
80 */
81export default function LandingPage() {
82 const { isOpen, onToggle } = useDisclosure();
83
84 useEffect(() => {
85 onToggle();
86 }, []);
87
88 const heroText = useTypewriter(
89 ['Learn English.', 'Aprender Español.', 'Apprendre le Français.', 'Lerne Deutsch.'],
90 70,
91 2000,
92 75
93 );
94
95 return (
96 <Box bg="white" color="black" minH="100vh">
97 {/* Hero Section */}
98 <Container maxW="6xl" pt={28} pb={40} textAlign="center">
99 <VStack spacing={8}>
100 <Fade in={isOpen}>
101 <Heading as="h1" size="3xl" fontWeight="black" lineHeight="1.2">
102 AI-Powered Language Learning
103 </Heading>
104 </Fade>
105 <Fade in={isOpen} delay={0.5}>
106 <Box height="80px" display="flex" alignItems="center" justifyContent="center">
107 <Text fontSize="2xl" fontWeight="medium" color="black">
108 {heroText}
109 </Text>
110 </Box>
111 </Fade>
112 <Fade in={isOpen} delay={1}>
113 <Link href="/auth">
114 <Button size="lg" bg="black" color="white" _hover={{ bg: 'gray.800' }}>
115 Get Started for Free
116 </Button>
117 </Link>
118 </Fade>
119 </VStack>
120 </Container>
121
122 {/* Features Section */}
123 <Box bg="gray.50" py={20}>
124 <Container maxW="6xl" textAlign="center">
125 <VStack spacing={10}>
126 <Heading as="h2" size="xl" fontWeight="bold" color="black">
127 Our Features
128 </Heading>
129 <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
130 <Feature
131 title="AI-Powered Learning"
132 text="Personalized lessons tailored to your learning style and pace."
133 />
134 <Feature
135 title="Interactive Exercises"
136 text="Engage with real-world scenarios to practice your skills."
137 />
138 <Feature
139 title="Progress Tracking"
140 text="Monitor your improvement with detailed analytics and insights."
141 />
142 </SimpleGrid>
143 </VStack>
144 </Container>
145 </Box>
146
147 {/* Pricing Section */}
148 <Box py={20}>
149 <Container maxW="6xl" textAlign="center">
150 <VStack spacing={12}>
151 <Heading as="h2" size="xl" fontWeight="bold" color="black">
152 Pricing Plans
153 </Heading>
154 <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
155 {/* Basic Plan */}
156 <PriceWrapper>
157 <VStack spacing={2} flex={1}>
158 <Text fontWeight="500" fontSize="2xl" color="black">Basic</Text>
159 <Heading as="h3" size="xl" color="black">$9.99</Heading>
160 <Text fontSize="lg" color="gray.500">per month</Text>
161 <VStack spacing={4} align="start" mt={4}>
162 <Text color="gray.600">1 language</Text>
163 <Text color="gray.600">Basic exercises</Text>
164 </VStack>
165 </VStack>
166 <Button mt={6} w="full" bg="black" color="white" _hover={{ bg: 'gray.800' }}>
167 Start Free Trial
168 </Button>
169 </PriceWrapper>
170
171 {/* Pro Plan (Recommended) */}
172 <PriceWrapper isRecommended={true}>
173 <VStack spacing={2} flex={1}>
174 <Text fontWeight="500" fontSize="2xl" color="black">Pro</Text>
175 <Heading as="h3" size="xl" color="black">$19.99</Heading>
176 <Text fontSize="lg" color="gray.500">per month</Text>
177 <VStack spacing={4} align="start" mt={4}>
178 <Text color="gray.600">3 languages</Text>
179 <Text color="gray.600">Advanced exercises</Text>
180 <Text color="gray.600">Progress tracking</Text>
181 </VStack>
182 </VStack>
183 <Button mt={6} w="full" bg="black" color="white" _hover={{ bg: 'gray.800' }}>
184 Start Free Trial
185 </Button>
186 </PriceWrapper>
187
188 {/* Enterprise Plan */}
189 <PriceWrapper>
190 <VStack spacing={2} flex={1}>
191 <Text fontWeight="500" fontSize="2xl" color="black">Enterprise</Text>
192 <Heading as="h3" size="xl" color="black">Custom</Heading>
193 <Text fontSize="lg" color="gray.500">per month</Text>
194 <VStack spacing={4} align="start" mt={4}>
195 <Text color="gray.600">Unlimited languages</Text>
196 <Text color="gray.600">Custom exercises</Text>
197 <Text color="gray.600">Dedicated support</Text>
198 </VStack>
199 </VStack>
200 <Button mt={6} w="full" bg="black" color="white" _hover={{ bg: 'gray.800' }}>
201 Contact Sales
202 </Button>
203 </PriceWrapper>
204 </SimpleGrid>
205 </VStack>
206 </Container>
207 </Box>
208
209 {/* Call to Action Section */}
210 <Box bg="gray.50" color="black" py={20} minWidth="100vw">
211 <Container maxW="4xl" textAlign="center">
212 <Heading as="h2" size="xl" mb={6} fontWeight="bold">
213 Start Your Language Learning Journey Today
214 </Heading>
215 <Text fontSize="xl" mb={8} color="gray.600">
216 Join thousands of satisfied learners and unlock your potential with our AI-powered language app.
217 </Text>
218 <Link href="/auth">
219 <Button size="lg" bg="black" color="white" _hover={{ bg: 'gray.800' }}>
220 Sign Up Now
221 </Button>
222 </Link>
223 </Container>
224 </Box>
225 </Box>
226 );
227}Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 2
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!