Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 003d000

Browse files
momo-shogunmomo-shogun
committedJan 8, 2025·
Mergeinto supabase
2 parents c052992 + 8e12bb8 commit 003d000

File tree

5 files changed

+449
-163
lines changed

5 files changed

+449
-163
lines changed
 

‎app/globals.css

+60-34
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,73 @@
55
@layer base {
66
:root {
77
--background: 0 0% 100%;
8-
--foreground: 222.2 84% 4.9%;
8+
--foreground: 0 0% 3.9%;
99
--card: 0 0% 100%;
10-
--card-foreground: 222.2 84% 4.9%;
10+
--card-foreground: 0 0% 3.9%;
1111
--popover: 0 0% 100%;
12-
--popover-foreground: 222.2 84% 4.9%;
13-
--primary: 221.2 83.2% 53.3%;
14-
--primary-foreground: 210 40% 98%;
15-
--secondary: 210 40% 96.1%;
16-
--secondary-foreground: 222.2 47.4% 11.2%;
17-
--muted: 210 40% 96.1%;
18-
--muted-foreground: 215.4 16.3% 46.9%;
19-
--accent: 210 40% 96.1%;
20-
--accent-foreground: 222.2 47.4% 11.2%;
12+
--popover-foreground: 0 0% 3.9%;
13+
--primary: 0 0% 9%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 0 0% 96.1%;
16+
--secondary-foreground: 0 0% 9%;
17+
--muted: 0 0% 96.1%;
18+
--muted-foreground: 0 0% 45.1%;
19+
--accent: 0 0% 96.1%;
20+
--accent-foreground: 0 0% 9%;
2121
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 210 40% 98%;
23-
--border: 214.3 31.8% 91.4%;
24-
--input: 214.3 31.8% 91.4%;
25-
--ring: 221.2 83.2% 53.3%;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 0 0% 89.8%;
24+
--input: 0 0% 89.8%;
25+
--ring: 0 0% 3.9%;
26+
--chart-1: 12 76% 61%;
27+
--chart-2: 173 58% 39%;
28+
--chart-3: 197 37% 24%;
29+
--chart-4: 43 74% 66%;
30+
--chart-5: 27 87% 67%;
2631
--radius: 0.5rem;
32+
--sidebar-background: 0 0% 98%;
33+
--sidebar-foreground: 240 5.3% 26.1%;
34+
--sidebar-primary: 240 5.9% 10%;
35+
--sidebar-primary-foreground: 0 0% 98%;
36+
--sidebar-accent: 240 4.8% 95.9%;
37+
--sidebar-accent-foreground: 240 5.9% 10%;
38+
--sidebar-border: 220 13% 91%;
39+
--sidebar-ring: 217.2 91.2% 59.8%;
2740
}
28-
41+
2942
.dark {
30-
--background: 222.2 84% 4.9%;
31-
--foreground: 210 40% 98%;
32-
--card: 222.2 84% 4.9%;
33-
--card-foreground: 210 40% 98%;
34-
--popover: 222.2 84% 4.9%;
35-
--popover-foreground: 210 40% 98%;
36-
--primary: 217.2 91.2% 59.8%;
37-
--primary-foreground: 222.2 47.4% 11.2%;
38-
--secondary: 217.2 32.6% 17.5%;
39-
--secondary-foreground: 210 40% 98%;
40-
--muted: 217.2 32.6% 17.5%;
41-
--muted-foreground: 215 20.2% 65.1%;
42-
--accent: 217.2 32.6% 17.5%;
43-
--accent-foreground: 210 40% 98%;
43+
--background: 0 0% 3.9%;
44+
--foreground: 0 0% 98%;
45+
--card: 0 0% 3.9%;
46+
--card-foreground: 0 0% 98%;
47+
--popover: 0 0% 3.9%;
48+
--popover-foreground: 0 0% 98%;
49+
--primary: 0 0% 98%;
50+
--primary-foreground: 0 0% 9%;
51+
--secondary: 0 0% 14.9%;
52+
--secondary-foreground: 0 0% 98%;
53+
--muted: 0 0% 14.9%;
54+
--muted-foreground: 0 0% 63.9%;
55+
--accent: 0 0% 14.9%;
56+
--accent-foreground: 0 0% 98%;
4457
--destructive: 0 62.8% 30.6%;
45-
--destructive-foreground: 210 40% 98%;
46-
--border: 217.2 32.6% 17.5%;
47-
--input: 217.2 32.6% 17.5%;
48-
--ring: 224.3 76.3% 48%;
58+
--destructive-foreground: 0 0% 98%;
59+
--border: 0 0% 14.9%;
60+
--input: 0 0% 14.9%;
61+
--ring: 0 0% 83.1%;
62+
--chart-1: 220 70% 50%;
63+
--chart-2: 160 60% 45%;
64+
--chart-3: 30 80% 55%;
65+
--chart-4: 280 65% 60%;
66+
--chart-5: 340 75% 55%;
67+
--sidebar-background: 240 5.9% 10%;
68+
--sidebar-foreground: 240 4.8% 95.9%;
69+
--sidebar-primary: 224.3 76.3% 48%;
70+
--sidebar-primary-foreground: 0 0% 100%;
71+
--sidebar-accent: 240 3.7% 15.9%;
72+
--sidebar-accent-foreground: 240 4.8% 95.9%;
73+
--sidebar-border: 240 3.7% 15.9%;
74+
--sidebar-ring: 217.2 91.2% 59.8%;
4975
}
5076
}
5177

‎app/page.tsx

+287-129
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,75 @@
1-
import Image from 'next/image'
2-
import Link from 'next/link'
3-
import { Button } from "@/components/ui/button"
4-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
5-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
6-
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
7-
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
8-
import { ThemeToggle } from "@/components/theme-toggle"
9-
import { BookOpen, CheckCircle, Github } from 'lucide-react'
10-
import { SocialLinks } from "@/components/socials"
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import { Button } from "@/components/ui/button";
4+
import {
5+
Card,
6+
CardContent,
7+
CardDescription,
8+
CardHeader,
9+
CardTitle,
10+
} from "@/components/ui/card";
11+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
12+
import {
13+
Accordion,
14+
AccordionContent,
15+
AccordionItem,
16+
AccordionTrigger,
17+
} from "@/components/ui/accordion";
18+
import {
19+
Carousel,
20+
CarouselContent,
21+
CarouselItem,
22+
CarouselNext,
23+
CarouselPrevious,
24+
} from "@/components/ui/carousel";
25+
import { ThemeToggle } from "@/components/theme-toggle";
26+
import { BookOpen, CheckCircle, Github } from "lucide-react";
27+
import { SocialLinks } from "@/components/socials";
1128
import { Highlight } from "@/components/ui/hero-hihglight";
12-
import Navbar from '@/components/header'
29+
import Navbar from "@/components/header";
30+
import PricingCard from "@/components/LandingComponents/PriceCard";
1331

1432
export default function LandingPage() {
1533
return (
1634
<div className="flex flex-col min-h-screen bg-background">
17-
<Navbar/>
35+
<Navbar />
1836
<main className="flex-1">
1937
<section className="w-full py-12 md:py-24 lg:py-32 bg-secondary overflow-hidden">
20-
<div className="container px-4 md:px-6 relative z-10">
38+
<div className="container mx-auto px-4 md:px-6 relative z-10">
2139
<div className="flex flex-col items-center space-y-4 text-center">
2240
<div className="space-y-2">
2341
<h1 className="text-3xl mb-9 font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
24-
<p className='mb-5'>Master LeetCode</p>
42+
<p className="mb-5">Master LeetCode</p>
2543
<Highlight className="dark:bg-primary/20 bg-primary/10">
2644
Track Your Progress
2745
</Highlight>
2846
</h1>
2947
<p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
30-
LeetCode Journal helps you organize your problem-solving journey, track your progress, and achieve your coding interview goals.
48+
LeetCode Journal helps you organize your problem-solving
49+
journey, track your progress, and achieve your coding
50+
interview goals.
3151
</p>
3252
</div>
3353
<div className="space-x-4">
34-
<Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">Get Started</Button>
35-
<Button variant="outline" size="lg">Learn More
54+
<Button
55+
size="lg"
56+
className="bg-primary text-primary-foreground hover:bg-primary/90"
57+
>
58+
Get Started
59+
</Button>
60+
<Button variant="outline" size="lg">
61+
Learn More
3662
<a href=""></a>
3763
</Button>
3864
</div>
3965
</div>
4066
</div>
4167
</section>
42-
<section id="features" className="w-full abo py-12 md:py-24 lg:py-32">
43-
<div className="container px-4 md:px-6">
44-
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">Features</h2>
68+
<section id="features" className="w-full abo py-12 md:py-20 lg:py-24">
69+
<div className="container mx-auto px-4 md:px-6">
70+
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">
71+
Features
72+
</h2>
4573
<Tabs defaultValue="track" className="w-full max-w-4xl mx-auto">
4674
<TabsList className="grid w-full grid-cols-3">
4775
<TabsTrigger value="track">Track</TabsTrigger>
@@ -52,7 +80,10 @@ export default function LandingPage() {
5280
<Card>
5381
<CardHeader>
5482
<CardTitle>Problem Tracking</CardTitle>
55-
<CardDescription>Log and organize all the LeetCode problems you've attempted and solved.</CardDescription>
83+
<CardDescription>
84+
Log and organize all the LeetCode problems you've
85+
attempted and solved.
86+
</CardDescription>
5687
</CardHeader>
5788
<CardContent className="space-y-2">
5889
<p>Keep a detailed record of your LeetCode journey:</p>
@@ -68,13 +99,18 @@ export default function LandingPage() {
6899
<Card>
69100
<CardHeader>
70101
<CardTitle>Progress Analytics</CardTitle>
71-
<CardDescription>Visualize your progress with detailed charts and statistics.</CardDescription>
102+
<CardDescription>
103+
Visualize your progress with detailed charts and
104+
statistics.
105+
</CardDescription>
72106
</CardHeader>
73107
<CardContent className="space-y-2">
74108
<p>Gain insights into your LeetCode performance:</p>
75109
<ul className="list-disc list-inside space-y-1">
76110
<li>Track solved problems over time</li>
77-
<li>Analyze your performance by problem type and difficulty</li>
111+
<li>
112+
Analyze your performance by problem type and difficulty
113+
</li>
78114
<li>Identify areas for improvement</li>
79115
</ul>
80116
</CardContent>
@@ -84,7 +120,10 @@ export default function LandingPage() {
84120
<Card>
85121
<CardHeader>
86122
<CardTitle>Skill Improvement</CardTitle>
87-
<CardDescription>Enhance your problem-solving skills with targeted practice.</CardDescription>
123+
<CardDescription>
124+
Enhance your problem-solving skills with targeted
125+
practice.
126+
</CardDescription>
88127
</CardHeader>
89128
<CardContent className="space-y-2">
90129
<p>Boost your coding interview readiness:</p>
@@ -100,135 +139,254 @@ export default function LandingPage() {
100139
</div>
101140
</section>
102141
<section id="pricing" className="w-full py-12 md:py-24 lg:py-32">
103-
<div className="container px-4 md:px-6">
104-
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-12">Simple Pricing</h2>
105-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
142+
<section
143+
id="pricing"
144+
className="w-full max-w-5xl px-4 mx-auto pb-12 md:pb-24 lg:pb-32"
145+
>
146+
<div className="mb-12">
147+
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-center mb-2">
148+
Affordable Plans for Every Developer
149+
</h2>
150+
<p className="text-muted-foreground md:text-base text-center max-w-2xl mx-auto">
151+
Choose a plan that fits your needs and start enhancing your
152+
coding skills today. Whether you're a beginner or Pro, we have
153+
the right plan for you.
154+
</p>
155+
</div>
156+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
106157
{[
107158
{
108-
title: "Free",
109-
description: "For casual users",
110-
price: "$0/mo",
111-
features: ["Track up to 50 problems", "Basic progress analytics", "Community forums access"],
159+
title: "Starter",
160+
description:
161+
"Perfect for beginners who are just starting their coding journey and want to keep track of their progress without any cost.",
162+
price: "Free",
163+
features: [
164+
"Track up to 50 problems",
165+
"Basic progress analytics",
166+
"Access to community forums",
167+
"Email support",
168+
"Weekly coding tips",
169+
],
112170
},
113171
{
114-
title: "Pro",
115-
description: "For serious coders",
172+
title: "Pro Coder",
173+
description:
174+
"Designed for dedicated developers who want to take their problem-solving skills to the next level with advanced features and insights.",
116175
price: "$9.99/mo",
117-
features: ["Unlimited problem tracking", "Advanced analytics and insights", "Priority support", "Custom study plans"],
176+
features: [
177+
"Unlimited problem tracking",
178+
"Advanced analytics and insights",
179+
"Priority email support",
180+
"Custom study plans",
181+
"Access to exclusive problem sets",
182+
"Monthly coding challenges",
183+
],
118184
},
119185
{
120-
title: "Team",
121-
description: "For coding groups",
186+
title: "Team Leader",
187+
description:
188+
"Ideal for coding groups and teams, offering collaboration tools and administrative features to manage and track team performance effectively.",
122189
price: "$29.99/mo",
123-
features: ["All Pro features", "Team collaboration tools", "Admin dashboard", "API access"],
190+
features: [
191+
"All Pro features",
192+
"Team collaboration tools",
193+
"Admin dashboard",
194+
"API access",
195+
"Dedicated account manager",
196+
"Team performance reports",
197+
"Customizable problem sets",
198+
],
124199
},
125200
].map((plan, index) => (
126-
<Card key={index} className={index === 1 ? 'border-primary' : ''}>
127-
<CardHeader>
128-
<CardTitle>{plan.title}</CardTitle>
129-
<CardDescription>{plan.description}</CardDescription>
130-
</CardHeader>
131-
<CardContent>
132-
<p className="text-4xl font-bold mb-4">{plan.price}</p>
133-
<ul className="space-y-2">
134-
{plan.features.map((feature, i) => (
135-
<li key={i} className="flex items-center">
136-
<CheckCircle className="mr-2 h-4 w-4 text-primary" />
137-
{feature}
138-
</li>
139-
))}
140-
</ul>
141-
<Button className={`w-full mt-6 ${index === 1 ? 'bg-primary text-primary-foreground hover:bg-primary/90' : ''}`}>
142-
{index === 0 ? 'Get Started' : index === 1 ? 'Upgrade to Pro' : 'Contact Sales'}
143-
</Button>
144-
</CardContent>
145-
</Card>
201+
<PricingCard
202+
classname={
203+
index === 1 ? "bg-emerald-800/60 md:scale-110" : ""
204+
}
205+
key={index}
206+
description={plan.description}
207+
features={plan.features}
208+
price={plan.price}
209+
title={plan.title}
210+
/>
146211
))}
147212
</div>
148-
</div>
213+
</section>
149214
</section>
150-
<section className="w-full py-12 md:py-24 lg:py-32">
151-
<div className="container px-4 md:px-6">
215+
<section className="w-full pb-12 md:pb-24 lg:pb-32">
216+
<div className="container mx-auto px-4 md:px-6">
152217
<div className="flex flex-col items-center space-y-4 text-center">
153218
<div className="space-y-2">
154-
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Ready to Boost Your Coding Skills?</h2>
219+
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
220+
Ready to Boost Your Coding Skills?
221+
</h2>
155222
<p className="mx-auto max-w-[600px] text-muted-foreground md:text-xl">
156-
Join thousands of developers who are mastering LeetCode with our journal. Start your journey today!
223+
Join thousands of developers who are mastering LeetCode with
224+
our journal. Start your journey today!
157225
</p>
158226
</div>
159227
<div className="w-full max-w-sm space-y-2">
160-
<Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90" size="lg">Get Started for Free</Button>
228+
<Button
229+
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
230+
size="lg"
231+
>
232+
Get Started for Free
233+
</Button>
161234
</div>
162235
</div>
163236
</div>
164237
</section>
165238
</main>
166239
<footer className="w-full py-12 px-4 md:px-6 border-t bg-secondary">
167-
<div className="container mx-auto">
168-
<div className="flex flex-col md:flex-row justify-between items-center mb-8">
169-
<div className="flex items-center space-x-4 mb-4 md:mb-0">
170-
<BookOpen className="h-6 w-6 text-primary" />
171-
<span className="font-bold text-lg">LeetCode Journal</span>
172-
</div>
173-
<div className="flex items-center space-x-4 -ml-2">
174-
<Button
175-
variant="outline"
176-
size="sm"
177-
className="hidden md:flex"
178-
asChild
179-
>
180-
<a
181-
href="https://github.com/yashksaini-coder/leetcode-journal"
182-
target="_blank"
183-
rel="noopener noreferrer"
184-
>
185-
<Github className="mr-2 h-4 w-4" />
186-
Star on GitHub
187-
</a>
188-
</Button>
189-
<SocialLinks />
190-
</div>
191-
</div>
192-
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
193-
<div>
194-
<h3 className="font-semibold mb-3 text-lg">Product</h3>
195-
<ul className="space-y-2">
196-
<li><Link href="#features" className="text-sm hover:text-primary transition-colors">Features</Link></li>
197-
<li><Link href="#pricing" className="text-sm hover:text-primary transition-colors">Pricing</Link></li>
198-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">FAQ</Link></li>
199-
</ul>
200-
</div>
201-
<div>
202-
<h3 className="font-semibold mb-3 text-lg">Company</h3>
203-
<ul className="space-y-2">
204-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">About</Link></li>
205-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Blog</Link></li>
206-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Careers</Link></li>
207-
</ul>
208-
</div>
209-
<div>
210-
<h3 className="font-semibold mb-3 text-lg">Resources</h3>
211-
<ul className="space-y-2">
212-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Documentation</Link></li>
213-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Community</Link></li>
214-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Support</Link></li>
215-
</ul>
216-
</div>
217-
<div>
218-
<h3 className="font-semibold mb-3 text-lg">Legal</h3>
219-
<ul className="space-y-2">
220-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Privacy Policy</Link></li>
221-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Terms of Service</Link></li>
222-
<li><Link href="#" className="text-sm hover:text-primary transition-colors">Cookie Policy</Link></li>
223-
</ul>
224-
</div>
225-
</div>
226-
<div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
227-
<p className="text-sm text-muted-foreground mb-4 md:mb-0">© 2023 LeetCode Journal. All rights reserved.</p>
228-
</div>
229-
</div>
230-
</footer>
240+
<div className="container mx-auto">
241+
<div className="flex flex-col md:flex-row justify-between items-center mb-8">
242+
<div className="flex items-center space-x-4 mb-4 md:mb-0">
243+
<BookOpen className="h-6 w-6 text-primary" />
244+
<span className="font-bold text-lg">LeetCode Journal</span>
245+
</div>
246+
<div className="flex items-center space-x-4 -ml-2">
247+
<Button
248+
variant="outline"
249+
size="sm"
250+
className="hidden md:flex"
251+
asChild
252+
>
253+
<a
254+
href="https://github.com/yashksaini-coder/leetcode-journal"
255+
target="_blank"
256+
rel="noopener noreferrer"
257+
>
258+
<Github className="mr-2 h-4 w-4" />
259+
Star on GitHub
260+
</a>
261+
</Button>
262+
<SocialLinks />
263+
</div>
264+
</div>
265+
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
266+
<div>
267+
<h3 className="font-semibold mb-3 text-lg">Product</h3>
268+
<ul className="space-y-2">
269+
<li>
270+
<Link
271+
href="#features"
272+
className="text-sm hover:text-primary transition-colors"
273+
>
274+
Features
275+
</Link>
276+
</li>
277+
<li>
278+
<Link
279+
href="#pricing"
280+
className="text-sm hover:text-primary transition-colors"
281+
>
282+
Pricing
283+
</Link>
284+
</li>
285+
<li>
286+
<Link
287+
href="#"
288+
className="text-sm hover:text-primary transition-colors"
289+
>
290+
FAQ
291+
</Link>
292+
</li>
293+
</ul>
294+
</div>
295+
<div>
296+
<h3 className="font-semibold mb-3 text-lg">Company</h3>
297+
<ul className="space-y-2">
298+
<li>
299+
<Link
300+
href="#"
301+
className="text-sm hover:text-primary transition-colors"
302+
>
303+
About
304+
</Link>
305+
</li>
306+
<li>
307+
<Link
308+
href="#"
309+
className="text-sm hover:text-primary transition-colors"
310+
>
311+
Blog
312+
</Link>
313+
</li>
314+
<li>
315+
<Link
316+
href="#"
317+
className="text-sm hover:text-primary transition-colors"
318+
>
319+
Careers
320+
</Link>
321+
</li>
322+
</ul>
323+
</div>
324+
<div>
325+
<h3 className="font-semibold mb-3 text-lg">Resources</h3>
326+
<ul className="space-y-2">
327+
<li>
328+
<Link
329+
href="#"
330+
className="text-sm hover:text-primary transition-colors"
331+
>
332+
Documentation
333+
</Link>
334+
</li>
335+
<li>
336+
<Link
337+
href="#"
338+
className="text-sm hover:text-primary transition-colors"
339+
>
340+
Community
341+
</Link>
342+
</li>
343+
<li>
344+
<Link
345+
href="#"
346+
className="text-sm hover:text-primary transition-colors"
347+
>
348+
Support
349+
</Link>
350+
</li>
351+
</ul>
352+
</div>
353+
<div>
354+
<h3 className="font-semibold mb-3 text-lg">Legal</h3>
355+
<ul className="space-y-2">
356+
<li>
357+
<Link
358+
href="#"
359+
className="text-sm hover:text-primary transition-colors"
360+
>
361+
Privacy Policy
362+
</Link>
363+
</li>
364+
<li>
365+
<Link
366+
href="#"
367+
className="text-sm hover:text-primary transition-colors"
368+
>
369+
Terms of Service
370+
</Link>
371+
</li>
372+
<li>
373+
<Link
374+
href="#"
375+
className="text-sm hover:text-primary transition-colors"
376+
>
377+
Cookie Policy
378+
</Link>
379+
</li>
380+
</ul>
381+
</div>
382+
</div>
383+
<div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-border">
384+
<p className="text-sm text-muted-foreground mb-4 md:mb-0">
385+
© 2023 LeetCode Journal. All rights reserved.
386+
</p>
387+
</div>
388+
</div>
389+
</footer>
231390
</div>
232-
)
391+
);
233392
}
234-

‎components/LandingComponents/LandingEmerlandButton.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
export default function LandingEmerlandButton({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<button className="border-emerald-600 shadow-md hover:bg-emerald-600 text-emerald-950 dark:text-emerald-100 transition-colors duration-300 border px-4 py-2 font-semibold rounded-xl text-sm">
10+
{children}
11+
</button>
12+
);
13+
}

‎components/LandingComponents/PriceCard.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
'use client'
2+
3+
import React from "react";
4+
import { motion } from "framer-motion";
5+
import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
6+
import LandingEmerlandButton from "./LandingEmerlandButton";
7+
8+
export interface PricingCardProps {
9+
title: string;
10+
description: string;
11+
price: string;
12+
features: string[];
13+
classname?: string;
14+
}
15+
16+
export default function PricingCard({
17+
title,
18+
description,
19+
price,
20+
features,
21+
classname
22+
}: PricingCardProps) {
23+
return (
24+
<motion.div
25+
whileHover={{ scale: 1.05 }}
26+
>
27+
<Card className={`${classname} rounded-2xl h-full flex flex-col justify-between`}>
28+
<CardHeader>
29+
<motion.h1
30+
initial={{ opacity: 0, y: -20 }}
31+
animate={{ opacity: 1, y: 0 }}
32+
transition={{ duration: 0.5 }}
33+
className="dark:text-emerald-600 text-emerald-950 text-xl font-semibold"
34+
>
35+
{title}
36+
</motion.h1>
37+
</CardHeader>
38+
39+
<CardContent>
40+
<motion.div
41+
initial={{ opacity: 0, y: -20 }}
42+
animate={{ opacity: 1, y: 0 }}
43+
transition={{ duration: 0.5, delay: 0.2 }}
44+
className="mb-10 flex flex-col items-start justify-center"
45+
>
46+
<div>
47+
{price !== "Free" && (
48+
<p className="text-sm text-neutral-900 dark:text-neutral-200">
49+
pause or cancel anytime
50+
</p>
51+
)}
52+
<h1 className="text-4xl font-bold pb-4">{price}</h1>
53+
</div>
54+
<p className="description text-xs text-secondary-foreground/90">{description}</p>
55+
</motion.div>
56+
<motion.ul className="space-y-1">
57+
{features.map((feature, index) => (
58+
<motion.li
59+
key={feature}
60+
initial={{ opacity: 0, x: -20 }}
61+
animate={{ opacity: 1, x: 0 }}
62+
transition={{ duration: 0.3, delay: index * 0.1 }}
63+
className="flex gap-2 text-sm"
64+
>
65+
<img src="/PricingTick.svg" alt="" /> <span>{feature}</span>
66+
</motion.li>
67+
))}
68+
</motion.ul>
69+
</CardContent>
70+
<CardFooter>
71+
<motion.div
72+
initial={{ opacity: 0, y: 20 }}
73+
animate={{ opacity: 1, y: 0 }}
74+
transition={{ duration: 0.5, delay: 0.5 }}
75+
>
76+
{price !== "Free" ? (
77+
<LandingEmerlandButton>Buy Now</LandingEmerlandButton>
78+
) : (
79+
<LandingEmerlandButton>Start Free Trial</LandingEmerlandButton>
80+
)}
81+
</motion.div>
82+
</CardFooter>
83+
</Card>
84+
</motion.div>
85+
);
86+
}

‎public/PricingTick.svg

+3
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.