From 14e96d61927d8918955ecf98fe18511ab1efb9df Mon Sep 17 00:00:00 2001 From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:27:15 +0530 Subject: [PATCH] done --- app/globals.css | 94 ++-- app/page.tsx | 416 ++++++++++++------ .../LandingEmerlandButton.tsx | 13 + components/LandingComponents/PriceCard.tsx | 86 ++++ components/header.tsx | 2 +- package-lock.json | 116 +---- public/PricingTick.svg | 3 + 7 files changed, 453 insertions(+), 277 deletions(-) create mode 100644 components/LandingComponents/LandingEmerlandButton.tsx create mode 100644 components/LandingComponents/PriceCard.tsx create mode 100644 public/PricingTick.svg diff --git a/app/globals.css b/app/globals.css index 3bd392b..83a3314 100644 --- a/app/globals.css +++ b/app/globals.css @@ -5,47 +5,73 @@ @layer base { :root { --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --foreground: 0 0% 3.9%; --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 221.2 83.2% 53.3%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 221.2 83.2% 53.3%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; } - + .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 217.2 91.2% 59.8%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 224.3 76.3% 48%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; } } diff --git a/app/page.tsx b/app/page.tsx index 0a3a63c..78192eb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,47 +1,75 @@ -import Image from 'next/image' -import Link from 'next/link' -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel" -import { ThemeToggle } from "@/components/theme-toggle" -import { BookOpen, CheckCircle, Github } from 'lucide-react' -import { SocialLinks } from "@/components/socials" +import Image from "next/image"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { ThemeToggle } from "@/components/theme-toggle"; +import { BookOpen, CheckCircle, Github } from "lucide-react"; +import { SocialLinks } from "@/components/socials"; import { Highlight } from "@/components/ui/hero-hihglight"; -import Navbar from '@/components/header' +import Navbar from "@/components/header"; +import PricingCard from "@/components/LandingComponents/PriceCard"; export default function LandingPage() { return (
- +
-
+

-

Master LeetCode

+

Master LeetCode

Track Your Progress

- LeetCode Journal helps you organize your problem-solving journey, track your progress, and achieve your coding interview goals. + LeetCode Journal helps you organize your problem-solving + journey, track your progress, and achieve your coding + interview goals.

- - +
-
-
-

Features

+
+
+

+ Features +

Track @@ -52,7 +80,10 @@ export default function LandingPage() { Problem Tracking - Log and organize all the LeetCode problems you've attempted and solved. + + Log and organize all the LeetCode problems you've + attempted and solved. +

Keep a detailed record of your LeetCode journey:

@@ -68,13 +99,18 @@ export default function LandingPage() { Progress Analytics - Visualize your progress with detailed charts and statistics. + + Visualize your progress with detailed charts and + statistics. +

Gain insights into your LeetCode performance:

  • Track solved problems over time
    • -
  • Analyze your performance by problem type and difficulty
    • +
  • + Analyze your performance by problem type and difficulty +
  • Identify areas for improvement
 @@ -84,7 +120,10 @@ export default function LandingPage() { Skill Improvement - Enhance your problem-solving skills with targeted practice. + + Enhance your problem-solving skills with targeted + practice. +

Boost your coding interview readiness:

@@ -100,135 +139,254 @@ export default function LandingPage() {
-
-

Simple Pricing

-
+
+
+

+ Affordable Plans for Every Developer +

+

+ Choose a plan that fits your needs and start enhancing your + coding skills today. Whether you're a beginner or Pro, we have + the right plan for you. +

+
+
{[ { - title: "Free", - description: "For casual users", - price: "$0/mo", - features: ["Track up to 50 problems", "Basic progress analytics", "Community forums access"], + title: "Starter", + description: + "Perfect for beginners who are just starting their coding journey and want to keep track of their progress without any cost.", + price: "Free", + features: [ + "Track up to 50 problems", + "Basic progress analytics", + "Access to community forums", + "Email support", + "Weekly coding tips", + ], }, { - title: "Pro", - description: "For serious coders", + title: "Pro Coder", + description: + "Designed for dedicated developers who want to take their problem-solving skills to the next level with advanced features and insights.", price: "$9.99/mo", - features: ["Unlimited problem tracking", "Advanced analytics and insights", "Priority support", "Custom study plans"], + features: [ + "Unlimited problem tracking", + "Advanced analytics and insights", + "Priority email support", + "Custom study plans", + "Access to exclusive problem sets", + "Monthly coding challenges", + ], }, { - title: "Team", - description: "For coding groups", + title: "Team Leader", + description: + "Ideal for coding groups and teams, offering collaboration tools and administrative features to manage and track team performance effectively.", price: "$29.99/mo", - features: ["All Pro features", "Team collaboration tools", "Admin dashboard", "API access"], + features: [ + "All Pro features", + "Team collaboration tools", + "Admin dashboard", + "API access", + "Dedicated account manager", + "Team performance reports", + "Customizable problem sets", + ], }, ].map((plan, index) => ( - - - {plan.title} - {plan.description} - - -

{plan.price}

-
    - {plan.features.map((feature, i) => ( -
  • - - {feature} -
    • - ))} -
- - - + ))}
-
+
-
-
+
+
-

Ready to Boost Your Coding Skills?

+

+ Ready to Boost Your Coding Skills? +

- Join thousands of developers who are mastering LeetCode with our journal. Start your journey today! + Join thousands of developers who are mastering LeetCode with + our journal. Start your journey today!

- +
-
-
-
- - LeetCode Journal -
- -
-
-
-

Product

-
    -
  • Features
    • -
  • Pricing
    • -
  • FAQ
    • -
-
-
-

Company

-
    -
  • About
    • -
  • Blog
    • -
  • Careers
    • -
-
-
-

Resources

-
    -
  • Documentation
    • -
  • Community
    • -
  • Support
    • -
-
-
-

Legal

-
    -
  • Privacy Policy
    • -
  • Terms of Service
    • -
  • Cookie Policy
    • -
-
-
-
-

© 2023 LeetCode Journal. All rights reserved.

-
-
-
+
+
+
+ + LeetCode Journal +
+ +
+
+
+

Product

+
    +
  • + + Features + +
    • +
  • + + Pricing + +
    • +
  • + + FAQ + +
    • +
+
+
+

Company

+
    +
  • + + About + +
    • +
  • + + Blog + +
    • +
  • + + Careers + +
    • +
+
+
+

Resources

+
    +
  • + + Documentation + +
    • +
  • + + Community + +
    • +
  • + + Support + +
    • +
+
+
+

Legal

+
    +
  • + + Privacy Policy + +
    • +
  • + + Terms of Service + +
    • +
  • + + Cookie Policy + +
    • +
+
+
+
+

+ © 2023 LeetCode Journal. All rights reserved. +

+
+
+
- ) + ); } - diff --git a/components/LandingComponents/LandingEmerlandButton.tsx b/components/LandingComponents/LandingEmerlandButton.tsx new file mode 100644 index 0000000..13ad338 --- /dev/null +++ b/components/LandingComponents/LandingEmerlandButton.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export default function LandingEmerlandButton({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + ); +} \ No newline at end of file diff --git a/components/LandingComponents/PriceCard.tsx b/components/LandingComponents/PriceCard.tsx new file mode 100644 index 0000000..1c468f6 --- /dev/null +++ b/components/LandingComponents/PriceCard.tsx @@ -0,0 +1,86 @@ +'use client' + +import React from "react"; +import { motion } from "framer-motion"; +import { Card, CardContent, CardFooter, CardHeader } from "../ui/card"; +import LandingEmerlandButton from "./LandingEmerlandButton"; + +export interface PricingCardProps { + title: string; + description: string; + price: string; + features: string[]; + classname?: string; +} + +export default function PricingCard({ + title, + description, + price, + features, + classname +}: PricingCardProps) { + return ( + + + + + {title} + + + + + +
+ {price !== "Free" && ( +

+ pause or cancel anytime +

+ )} +

{price}

+
+

{description}

+ + + {features.map((feature, index) => ( + + {feature} + + ))} + + + + + {price !== "Free" ? ( + Buy Now + ) : ( + Start Free Trial + )} + + + + + ); +} diff --git a/components/header.tsx b/components/header.tsx index 083d97f..4128294 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -10,7 +10,7 @@ const Navbar: FC = () => { return (
-