Skip to content

Commit f8e4765

Browse files
JAYANTJOSHI001JAYANTJOSHI001
committed
made changes in learn-more page and added
TabContainer component Signed-off-by: JAYANTJOSHI001 <[email protected]>
1 parent e4811bb commit f8e4765

File tree

3 files changed

+146
-123
lines changed

3 files changed

+146
-123
lines changed

‎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+

‎app/learn-more/page.tsx

+43-123
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,59 @@
11
'use client'
22

3-
import { useState } from 'react'
43
import Link from 'next/link'
54
import { motion } from 'framer-motion'
65
import { Button } from "@/components/ui/button"
7-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
8-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
9-
import { CheckCircle, Code, Brain, TrendingUp, Users, Zap } from 'lucide-react'
6+
import { TabContainer } from './components/TabContainer'
107
import Navbar1 from '@/components/navbar'
11-
import { SocialLinks } from '@/components/SocialLinks'
12-
import { Github, BookOpen } from 'lucide-react'
8+
import {SocialLinks} from '@/components/SocialLinks'
9+
import { BookOpen, Github } from 'lucide-react'
1310

1411
export default function LearnMorePage() {
15-
const [activeTab, setActiveTab] = useState('features')
16-
17-
const features = [
18-
{ icon: <Code className="w-6 h-6" />, title: 'Track Progress', description: 'Log solved problems and track improvement over time.' },
19-
{ icon: <Brain className="w-6 h-6" />, title: 'Enhance Learning', description: 'Write comprehensive notes and explanations for each problem.' },
20-
{ icon: <TrendingUp className="w-6 h-6" />, title: 'Analyze Performance', description: 'Gain insights into problem-solving patterns and focus areas.' },
21-
{ icon: <CheckCircle className="w-6 h-6" />, title: 'Interview Prep', description: 'Organize solutions by companies and topics for targeted review.' },
22-
{ icon: <Users className="w-6 h-6" />, title: 'Collaborate', description: 'Share insights and learn from peers in the community.' },
23-
{ icon: <Zap className="w-6 h-6" />, title: 'Boost Efficiency', description: 'Streamline your coding practice with powerful tools and analytics.' },
24-
]
25-
26-
const containerVariants = {
27-
hidden: { opacity: 0 },
28-
visible: {
29-
opacity: 1,
30-
transition: {
31-
staggerChildren: 0.1
32-
}
33-
}
34-
}
35-
36-
const itemVariants = {
37-
hidden: { y: 20, opacity: 0 },
38-
visible: {
39-
y: 0,
40-
opacity: 1
41-
}
42-
}
43-
4412
return (
45-
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 dark:from-zinc-900 dark:via-zinc-800 dark:to-purple-900 bg-texture">
13+
<div className="">
4614
<Navbar1 />
47-
<div className="container mx-auto px-4 py-16">
48-
<motion.h1
49-
className="text-5xl font-bold text-center mb-8 text-purple-800 dark:text-purple-300"
50-
initial={{ y: -20, opacity: 0 }}
51-
animate={{ y: 0, opacity: 1 }}
52-
transition={{ duration: 0.5 }}
53-
>
54-
Discover LeetCode Journal
55-
</motion.h1>
56-
57-
<motion.div
58-
className="max-w-3xl mx-auto mb-16"
59-
initial={{ y: 20, opacity: 0 }}
60-
animate={{ y: 0, opacity: 1 }}
61-
transition={{ delay: 0.2, duration: 0.5 }}
62-
>
63-
<p className="text-xl text-center mb-8 text-purple-700 dark:text-purple-200">
64-
Elevate your coding practice and ace technical interviews with LeetCode Journal - your ultimate companion for mastering coding challenges.
65-
</p>
66-
<div className="flex justify-center">
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>
6752
<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">
68-
<Link href="/signup">Start Your Coding Journey</Link>
53+
<Link href="/signup">Start Your Free Trial</Link>
6954
</Button>
70-
</div>
71-
</motion.div>
72-
73-
<div className="text-left mb-16">
74-
<div className='mb-8'>
75-
<h2 id="features" className="text-3xl font-bold mb-8 text-purple-800 dark:text-purple-300">Key Features</h2>
76-
</div>
77-
<motion.div
78-
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
79-
>
80-
{features.map((feature, index) => (
81-
<motion.div key={index} variants={itemVariants}>
82-
<Card className="bg-white/80 dark:bg-zinc-800/80 backdrop-blur-sm border-purple-200 dark:border-purple-700 shadow-purple-100 dark:shadow-purple-900/20 shadow-lg h-full">
83-
<CardHeader>
84-
<CardTitle className="flex items-center text-purple-700 dark:text-purple-300">
85-
{feature.icon}
86-
<span className="ml-2">{feature.title}</span>
87-
</CardTitle>
88-
</CardHeader>
89-
<CardContent>
90-
<CardDescription className="text-purple-600 dark:text-purple-200">
91-
{feature.description}
92-
</CardDescription>
93-
</CardContent>
94-
</Card>
95-
</motion.div>
96-
))}
97-
</motion.div>
98-
</div>
99-
<div className="text-left mb-16">
100-
<div className='mb-8'>
101-
<h2 id="features" className="text-3xl font-bold mb-8 text-purple-800 dark:text-purple-300">Benefits</h2>
102-
</div>
103-
<motion.div
104-
className="bg-gradient-to-r from-purple-100 to-purple-200 dark:from-zinc-800 dark:to-purple-900 rounded-lg p-8 shadow-lg"
105-
variants={containerVariants}
106-
>
107-
<h2 className="text-3xl font-bold mb-6 text-purple-800 dark:text-purple-300">Why Choose LeetCode Journal?</h2>
108-
<motion.ul className="space-y-4" variants={containerVariants}>
109-
{[
110-
'Seamless integration with your LeetCode account',
111-
'Customizable templates for consistent note-taking',
112-
'Advanced search and filtering options',
113-
'Progress visualization and performance analytics',
114-
'Collaborative features for group study and peer review',
115-
'Mobile-friendly interface for on-the-go learning'
116-
].map((benefit, index) => (
117-
<motion.li key={index} className="flex items-start" variants={itemVariants}>
118-
<CheckCircle className="mr-2 mt-1 text-purple-600 dark:text-purple-400 flex-shrink-0" />
119-
<span className="text-purple-700 dark:text-purple-200">{benefit}</span>
120-
</motion.li>
121-
))}
122-
</motion.ul>
123-
</motion.div>
55+
</motion.div>
12456
</div>
125-
<motion.div
126-
className="text-center bg-white/80 dark:bg-zinc-800/80 backdrop-blur-sm rounded-lg p-8 shadow-lg"
127-
initial={{ y: 20, opacity: 0 }}
128-
animate={{ y: 0, opacity: 1 }}
129-
transition={{ delay: 0.4, duration: 0.5 }}
130-
>
131-
<h2 className="text-3xl font-bold mb-4 text-purple-800 dark:text-purple-300">Ready to Elevate Your Coding Journey?</h2>
132-
<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>
133-
<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">
134-
<Link href="/signup">Start Your Free Trial</Link>
135-
</Button>
136-
</motion.div>
13757
</div>
13858
<footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
13959
<div className="container mx-auto">

‎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)