Skip to content

Commit 70cb99d

Browse files
JAYANTJOSHI001JAYANTJOSHI001
authored
Add learn more page (#38)
Signed-off-by: JAYANTJOSHI001 <[email protected]>
1 parent ca1e6a4 commit 70cb99d

File tree

3 files changed

+315
-0
lines changed

3 files changed

+315
-0
lines changed

Diff for: ‎app/learn-more/components/TabContainer.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import { motion } from 'framer-motion'
5+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
6+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
7+
import { CheckCircle, Code, Brain, TrendingUp, Users, Zap } from 'lucide-react'
8+
9+
const features = [
10+
{ icon: <Code className="w-6 h-6" />, title: 'Track Progress', description: 'Log solved problems and track improvement over time.' },
11+
{ icon: <Brain className="w-6 h-6" />, title: 'Enhance Learning', description: 'Write comprehensive notes and explanations for each problem.' },
12+
{ icon: <TrendingUp className="w-6 h-6" />, title: 'Analyze Performance', description: 'Gain insights into problem-solving patterns and focus areas.' },
13+
{ icon: <CheckCircle className="w-6 h-6" />, title: 'Interview Prep', description: 'Organize solutions by companies and topics for targeted review.' },
14+
{ icon: <Users className="w-6 h-6" />, title: 'Collaborate', description: 'Share insights and learn from peers in the community.' },
15+
{ icon: <Zap className="w-6 h-6" />, title: 'Boost Efficiency', description: 'Streamline your coding practice with powerful tools and analytics.' },
16+
]
17+
18+
const benefits = [
19+
'Seamless integration with your LeetCode account',
20+
'Customizable templates for consistent note-taking',
21+
'Advanced search and filtering options',
22+
'Progress visualization and performance analytics',
23+
'Collaborative features for group study and peer review',
24+
'Mobile-friendly interface for on-the-go learning'
25+
]
26+
27+
const containerVariants = {
28+
hidden: { opacity: 0 },
29+
visible: {
30+
opacity: 1,
31+
transition: {
32+
staggerChildren: 0.1
33+
}
34+
}
35+
}
36+
37+
const itemVariants = {
38+
hidden: { y: 20, opacity: 0 },
39+
visible: {
40+
y: 0,
41+
opacity: 1
42+
}
43+
}
44+
45+
export function TabContainer() {
46+
const [activeTab, setActiveTab] = useState('features')
47+
48+
return (
49+
<Tabs defaultValue="features" className="mb-16">
50+
<TabsList className="grid w-full grid-cols-2 mb-8 bg-gradient-to-r from-purple-100 to-purple-200 dark:from-gray-800 dark:to-purple-900">
51+
<TabsTrigger value="features" onClick={() => setActiveTab('features')}>Key Features</TabsTrigger>
52+
<TabsTrigger value="benefits" onClick={() => setActiveTab('benefits')}>Benefits</TabsTrigger>
53+
</TabsList>
54+
<TabsContent value="features">
55+
<motion.div
56+
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
57+
variants={containerVariants}
58+
initial="hidden"
59+
animate={activeTab === 'features' ? "visible" : "hidden"}
60+
>
61+
{features.map((feature, index) => (
62+
<motion.div key={index} variants={itemVariants}>
63+
<Card className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-purple-200 dark:border-purple-700 shadow-purple-100 dark:shadow-purple-900/20 shadow-lg h-full">
64+
<CardHeader>
65+
<CardTitle className="flex items-center text-purple-700 dark:text-purple-300">
66+
{feature.icon}
67+
<span className="ml-2">{feature.title}</span>
68+
</CardTitle>
69+
</CardHeader>
70+
<CardContent>
71+
<CardDescription className="text-purple-600 dark:text-purple-200">
72+
{feature.description}
73+
</CardDescription>
74+
</CardContent>
75+
</Card>
76+
</motion.div>
77+
))}
78+
</motion.div>
79+
</TabsContent>
80+
<TabsContent value="benefits">
81+
<motion.div
82+
className="bg-gradient-to-r from-purple-100 to-purple-200 dark:from-gray-800 dark:to-purple-900 rounded-lg p-8 shadow-lg"
83+
variants={containerVariants}
84+
initial="hidden"
85+
animate={activeTab === 'benefits' ? "visible" : "hidden"}
86+
>
87+
<h2 className="text-3xl font-bold mb-6 text-purple-800 dark:text-purple-300">Why Choose LeetCode Journal?</h2>
88+
<motion.ul className="space-y-4" variants={containerVariants}>
89+
{benefits.map((benefit, index) => (
90+
<motion.li key={index} className="flex items-start" variants={itemVariants}>
91+
<CheckCircle className="mr-2 mt-1 text-purple-600 dark:text-purple-400 flex-shrink-0" />
92+
<span className="text-purple-700 dark:text-purple-200">{benefit}</span>
93+
</motion.li>
94+
))}
95+
</motion.ul>
96+
</motion.div>
97+
</TabsContent>
98+
</Tabs>
99+
)
100+
}
101+

Diff for: ‎app/learn-more/page.tsx

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { motion } from 'framer-motion'
5+
import { Button } from "@/components/ui/button"
6+
import { TabContainer } from './components/TabContainer'
7+
import Navbar1 from '@/components/navbar'
8+
import {SocialLinks} from '@/components/SocialLinks'
9+
import { BookOpen, Github } from 'lucide-react'
10+
11+
export default function LearnMorePage() {
12+
return (
13+
<div className="">
14+
<Navbar1 />
15+
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900 bg-texture">
16+
<div className="container mx-auto px-4 py-16">
17+
<motion.h1
18+
className="text-5xl font-bold text-center mb-8 text-purple-800 dark:text-purple-300"
19+
initial={{ y: -20, opacity: 0 }}
20+
animate={{ y: 0, opacity: 1 }}
21+
transition={{ duration: 0.5 }}
22+
>
23+
Discover LeetCode Journal
24+
</motion.h1>
25+
26+
<motion.div
27+
className="max-w-3xl mx-auto mb-16"
28+
initial={{ y: 20, opacity: 0 }}
29+
animate={{ y: 0, opacity: 1 }}
30+
transition={{ delay: 0.2, duration: 0.5 }}
31+
>
32+
<p className="text-xl text-center mb-8 text-purple-700 dark:text-purple-200">
33+
Elevate your coding practice and ace technical interviews with LeetCode Journal - your ultimate companion for mastering coding challenges.
34+
</p>
35+
<div className="flex justify-center">
36+
<Button asChild size="lg" className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white dark:from-purple-500 dark:to-purple-600 dark:hover:from-purple-600 dark:hover:to-purple-700">
37+
<Link href="/signup">Start Your Coding Journey</Link>
38+
</Button>
39+
</div>
40+
</motion.div>
41+
42+
<TabContainer />
43+
44+
<motion.div
45+
className="text-center bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg p-8 shadow-lg mt-16"
46+
initial={{ y: 20, opacity: 0 }}
47+
animate={{ y: 0, opacity: 1 }}
48+
transition={{ delay: 0.4, duration: 0.5 }}
49+
>
50+
<h2 className="text-3xl font-bold mb-4 text-purple-800 dark:text-purple-300">Ready to Elevate Your Coding Journey?</h2>
51+
<p className="text-xl mb-8 text-purple-700 dark:text-purple-200">Join thousands of developers who have transformed their LeetCode experience with LeetCode Journal.</p>
52+
<Button asChild size="lg" className="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white dark:from-purple-500 dark:to-purple-600 dark:hover:from-purple-600 dark:hover:to-purple-700">
53+
<Link href="/signup">Start Your Free Trial</Link>
54+
</Button>
55+
</motion.div>
56+
</div>
57+
</div>
58+
<footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
59+
<div className="container mx-auto">
60+
<div className="flex flex-col md:flex-row justify-between items-center mb-8">
61+
<div className="flex items-center space-x-4 mb-4 md:mb-0">
62+
<BookOpen className="h-6 w-6 text-primary" />
63+
<span className="font-bold text-lg">LeetCode Journal</span>
64+
</div>
65+
<div className="flex items-center space-x-4 -ml-2">
66+
<Button
67+
variant="outline"
68+
size="sm"
69+
className="hidden md:flex"
70+
asChild
71+
>
72+
<a
73+
href="https://github.com/yashksaini-coder/leetcode-journal"
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
>
77+
<Github className="mr-2 h-4 w-4" />
78+
Star on GitHub
79+
</a>
80+
</Button>
81+
<SocialLinks />
82+
</div>
83+
</div>
84+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
85+
<div>
86+
<h3 className="font-semibold mb-3 text-lg">Product</h3>
87+
<ul className="space-y-2">
88+
<li>
89+
<Link
90+
href="#features"
91+
className="text-sm hover:text-primary transition-colors"
92+
>
93+
Features
94+
</Link>
95+
</li>
96+
<li>
97+
<Link
98+
href="#pricing"
99+
className="text-sm hover:text-primary transition-colors"
100+
>
101+
Pricing
102+
</Link>
103+
</li>
104+
<li>
105+
<Link
106+
href="#"
107+
className="text-sm hover:text-primary transition-colors"
108+
>
109+
FAQ
110+
</Link>
111+
</li>
112+
</ul>
113+
</div>
114+
<div>
115+
<h3 className="font-semibold mb-3 text-lg">Company</h3>
116+
<ul className="space-y-2">
117+
<li>
118+
<Link
119+
href="#"
120+
className="text-sm hover:text-primary transition-colors"
121+
>
122+
About
123+
</Link>
124+
</li>
125+
<li>
126+
<Link
127+
href="#"
128+
className="text-sm hover:text-primary transition-colors"
129+
>
130+
Blog
131+
</Link>
132+
</li>
133+
<li>
134+
<Link
135+
href="#"
136+
className="text-sm hover:text-primary transition-colors"
137+
>
138+
Careers
139+
</Link>
140+
</li>
141+
</ul>
142+
</div>
143+
<div>
144+
<h3 className="font-semibold mb-3 text-lg">Resources</h3>
145+
<ul className="space-y-2">
146+
<li>
147+
<Link
148+
href="#"
149+
className="text-sm hover:text-primary transition-colors"
150+
>
151+
Documentation
152+
</Link>
153+
</li>
154+
<li>
155+
<Link
156+
href="#"
157+
className="text-sm hover:text-primary transition-colors"
158+
>
159+
Community
160+
</Link>
161+
</li>
162+
<li>
163+
<Link
164+
href="#"
165+
className="text-sm hover:text-primary transition-colors"
166+
>
167+
Support
168+
</Link>
169+
</li>
170+
</ul>
171+
</div>
172+
<div>
173+
<h3 className="font-semibold mb-3 text-lg">Legal</h3>
174+
<ul className="space-y-2">
175+
<li>
176+
<Link
177+
href="#"
178+
className="text-sm hover:text-primary transition-colors"
179+
>
180+
Privacy Policy
181+
</Link>
182+
</li>
183+
<li>
184+
<Link
185+
href="#"
186+
className="text-sm hover:text-primary transition-colors"
187+
>
188+
Terms of Service
189+
</Link>
190+
</li>
191+
<li>
192+
<Link
193+
href="#"
194+
className="text-sm hover:text-primary transition-colors"
195+
>
196+
Cookie Policy
197+
</Link>
198+
</li>
199+
</ul>
200+
</div>
201+
</div>
202+
<div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
203+
<p className="text-sm text-muted-foreground mb-4 md:mb-0">
204+
© 2023 LeetCode Journal. All rights reserved.
205+
</p>
206+
</div>
207+
</div>
208+
</footer>
209+
</div>
210+
)
211+
}
212+

Diff for: ‎package-lock.json

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)