From 7d2b7538a2a15bb5c9ff8a73db502ebc9adfb526 Mon Sep 17 00:00:00 2001 From: csxark Date: Tue, 29 Jul 2025 21:31:28 +0530 Subject: [PATCH] New Landing page and fixed dark mode toggle --- app/clientLayout.tsx | 4 +- app/page.tsx | 528 ++++++++++++++++++++++------------ components/theme-provider.tsx | 7 +- package-lock.json | 26 +- package.json | 2 +- 5 files changed, 363 insertions(+), 204 deletions(-) diff --git a/app/clientLayout.tsx b/app/clientLayout.tsx index f8bc8e6..0029d27 100644 --- a/app/clientLayout.tsx +++ b/app/clientLayout.tsx @@ -5,7 +5,7 @@ import type React from "react" import { Inter } from "next/font/google" import { motion, AnimatePresence } from "framer-motion" -import { ThemeProvider } from "@/components/theme-provider" +import ThemeProvider from "@/components/theme-provider" import { Navbar } from "@/components/navbar" import { Footer } from "@/components/footer" import {Toaster} from "react-hot-toast" @@ -24,7 +24,7 @@ export default function ClientLayout({ - +
diff --git a/app/page.tsx b/app/page.tsx index a8eedc7..8b1d703 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,246 +1,406 @@ -"use client" +"use client"; -import { ArrowRight, Check, MessageSquare, Scale, Search } from "lucide-react" -import Image from "next/image" -import Link from "next/link" -import { motion } from "framer-motion" +import { + ArrowRight, + Check, + MessageSquare, + Scale, + Search, + Shield, + Award, + Users, + FileText, + BookOpen, + Globe, + UserCheck, + BarChart2, + Briefcase, +} from "lucide-react"; +import Link from "next/link"; +import Image from "next/image"; +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { TestimonialCard } from "@/components/testimonial-card" +// Counter utility for animated achievements +function useCounter(end, speed = 40, isPercent = false) { + const [count, setCount] = useState(0); + useEffect(() => { + let start = 0; + if (end === 0) return; + const increment = Math.max(1, Math.floor(end / (speed * 3))); + const interval = setInterval(() => { + start += increment; + if (start > end) start = end; + setCount(start); + if (start === end) clearInterval(interval); + }, 15); + return () => clearInterval(interval); + }, [end, speed]); + return isPercent ? `${count}%` : count.toLocaleString(); +} export default function LandingPage() { + useEffect(() => { + document.documentElement.classList.add("dark"); + }, []); + const features = [ { - icon: , + icon: , title: "AI Legal Chatbot", - description: "Get instant answers to your legal questions from our AI-powered chatbot.", + description: "Instant authoritative legal answers using Indian case law.", link: "/chat", }, { - icon: , + icon: , title: "Case Tracker", - description: "Track your legal cases in real-time with updates on status and next steps.", + description: "Track your legal cases in real-time, every stage.", link: "/dashboard", }, { - icon: , - title: "Legal Rights Visualizer", - description: "Understand your legal rights in simple language with interactive visualizations.", + icon: , + title: "Rights Visualizer", + description: "Your rights explained in clear, friendly language.", link: "/rights", }, - ] + { + icon: , + title: "Document Generator", + description: "Auto-generate contracts and legal documents tailored for you.", + link: "/documents", + }, + { + icon: , + title: "Knowledge Hub", + description: "Explore a growing library of explainer articles and legal guides.", + link: "/knowledge", + }, + { + icon: , + title: "Regional Languages", + description: "Access services in your preferred Indian language.", + link: "/languages", + }, + ]; const testimonials = [ { name: "Priya Sharma", role: "Small Business Owner", - content: - "LegalEase helped me understand my rights as a business owner without expensive legal consultations. The AI chatbot answered all my questions clearly.", + content: "LegalEase provided clarity without expensive consultations. The AI chatbot gave me confidence.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Rahul Patel", - role: "Tenant", - content: - "I was having issues with my landlord and didn't know my rights. The Rights Visualizer made everything clear, and I was able to resolve my dispute quickly.", + role: "Property Owner", + content: "The Rights Visualizer made tenant law crystal clear—helped me resolve a dispute painlessly.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Ananya Desai", - role: "Student", - content: - "As a law student, I find LegalEase incredibly useful for research. The platform simplifies complex legal concepts and makes them accessible to everyone.", + role: "Legal Professional", + content: "As a lawyer, LegalEase speeds up my research and offers reliable up-to-date information.", avatar: "/placeholder.svg?height=80&width=80", }, - ] + ]; + + const areas = [ + "Corporate Law", + "Property Law", + "Employment Law", + "Consumer Rights", + "Family Law", + "Criminal Law", + "Tax Law", + "Contract Law", + ]; + + const stats = [ + { icon: , label: "Clients Served", value: "10,000+" }, + { icon: , label: "Success Rate", value: "95%" }, + { icon: , label: "Legal Support", value: "24/7" }, + ]; + + // Achievement section state counters + const usersCount = useCounter(27777, 60); + const casesCount = useCounter(8333, 50); + const lawyersCount = useCounter(272, 20); + const rateCount = useCounter(53, 32, true); + + // Achievements data/config + const achievements = [ + { icon: , label: "Users Connected", num: usersCount }, + { icon: , label: "Cases Solved", num: casesCount }, + { icon: , label: "Verified Lawyers", num: lawyersCount }, + { icon: , label: "Success Rate", num: rateCount }, + ]; return ( -
- {/* Hero Section */} -
-
-
- -
-

- Simplifying Legal Access for All Indians -

-

- LegalEase makes the justice system accessible through AI-powered tools, plain language explanations, - and personalized guidance. -

-
-
- - -
- - - Legal assistance illustration - -
-
-
+
+ {/* HERO SECTION */} +
+ {/* Teal blob for light, cyan for dark, alternate */} +
+ {/* Second blob */} +
- {/* Mission Statement */} -
-
+
-

Our Mission

-

- We believe that legal knowledge should be accessible to everyone, not just those who can afford expensive - lawyers. LegalEase uses AI and plain language to demystify the legal system, empowering citizens to - understand and exercise their rights. -

+ + TRUSTED BY 10,000+ LEGAL PROFESSIONALS + + India's Most Trusted +
+ LegalTech Platform + + + Experience the convergence of legal expertise and seamless technology. + Get instant guidance, transparent tracking, and friendly rights visualization. + +
+ + + + + + +
+
+
+ + Free for individuals +
+
+ + No credit card required +
+
- {/* Features */} -
-
-
-
-

Core Features

-

- Powerful tools designed to simplify your legal journey -

+ {/* STATS BAR */} +
+
+
+ +
+ {stats.map((s, i) => ( +
+ {s.icon} +
+
{s.value}
+
{s.label}
+
+ ))} +
+
+ + {/* PRACTICE AREAS */} +
+
+
+
+
+ +
+

+ Practice Areas We Cover +

+

+ Comprehensive legal guidance across the most common areas of Indian law +

+
+ {areas.map((area, i) => ( +
+ {/* Vibrant Icon with unique colors */} + + + +
{area}
+
+ ))}
-
- {features.map((feature, index) => ( - +
+ + {/* FEATURES */} +
+
+
+ +
+

+ Professional-Grade Legal Tools +

+

+ Sophisticated technology meets legal expertise for reliable, accessible solutions. +

+
+ {features.map((feature, idx) => ( +
- - -
{feature.icon}
- {feature.title} - {feature.description} - - - - - - +
+ {feature.icon} +
+
+ {feature.title} +
+

{feature.description}

+ + Explore Feature + +
))}
- {/* Testimonials */} -
-
-
-
-

What Our Users Say

-

- Real stories from people who have used LegalEase to navigate their legal challenges -

-
+ {/* DEMO SECTION */} +
+
+
+ +
+

+ See LegalEase in Action +

+

+ Watch our quick demo to understand how LegalEase transforms complex legal processes into actionable insights. +

+
+
-
- {testimonials.map((testimonial, index) => ( - +
+ + {/* TESTIMONIALS */} +
+
+
+ +
+

+ Trusted by Legal Professionals +

+

+ Real stories from clients and legal professionals who rely on LegalEase for critical legal guidance and case management. +

+
+ {testimonials.map((testimonial, i) => ( +
- - +
+ +
+
{testimonial.name}
+
{testimonial.role}
+
+
+

+ “{testimonial.content}” +

+
))}
- {/* CTA Section */} -
-
- -
-

- Ready to Simplify Your Legal Journey? -

-

- Join thousands of Indians who are using LegalEase to understand their rights and navigate the legal - system with confidence. -

+ {/* FINAL CTA */} +
+
+
+ +
+

+ Ready to Transform Your Legal Practice? +

+

+ Join thousands across India who trust LegalEase to navigate legal challenges with clarity and confidence. +

+ +
+
+ + No credit card required
-
- - +
+ + Free consultation available
-
-
- - No credit card required -
-
- - Free basic access -
-
- - Cancel anytime -
+
+ + Cancel anytime
- +
- ) + ); } diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx index 298a3eb..a8f97cf 100644 --- a/components/theme-provider.tsx +++ b/components/theme-provider.tsx @@ -1,17 +1,16 @@ "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" -import type { ThemeProviderProps } from "next-themes/dist/types" -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { +function ThemeProvider({ children }: { children: React.ReactNode }) { return ( {children} ) } +export default ThemeProvider \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6097e54..6ac3316 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,7 @@ "embla-carousel-react": "8.5.1", "express": "^4.18.2", "express-session": "^1.17.3", - "framer-motion": "latest", + "framer-motion": "^12.23.7", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "mongoose": "^7.5.0", @@ -5313,13 +5313,13 @@ } }, "node_modules/framer-motion": { - "version": "12.6.5", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.6.5.tgz", - "integrity": "sha512-MKvnWov0paNjvRJuIy6x418w23tFqRfS6CXHhZrCiSEpXVlo/F+usr8v4/3G6O0u7CpsaO1qop+v4Ip7PRCBqQ==", + "version": "12.23.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.7.tgz", + "integrity": "sha512-Qs+zNG9D/3c9C0riom1iXVVOOOaY3T32LIofgbQJz9APY/CUE5v6G41WkcZl2lVhaAgQDQcNq94f8qzLf3rTZA==", "license": "MIT", "dependencies": { - "motion-dom": "^12.6.5", - "motion-utils": "^12.6.5", + "motion-dom": "^12.23.7", + "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { @@ -6835,18 +6835,18 @@ } }, "node_modules/motion-dom": { - "version": "12.6.5", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.6.5.tgz", - "integrity": "sha512-jpM9TQLXzYMWMJ7Ec7sAj0iis8oIuu6WvjI3yNKJLdrZyrsI/b2cRInDVL8dCl683zQQq19DpL9cSMP+k8T1NA==", + "version": "12.23.7", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.7.tgz", + "integrity": "sha512-AyJR07/YxObtK3NyGLCfebUe0k9UZGhik+2eIPUoKz76cKRRSkMeifmIxfztIvOaKb/Smu9IfVHkmx+mV+iFmQ==", "license": "MIT", "dependencies": { - "motion-utils": "^12.6.5" + "motion-utils": "^12.23.6" } }, "node_modules/motion-utils": { - "version": "12.6.5", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.6.5.tgz", - "integrity": "sha512-IsOeKsOF+FWBhxQEDFBO6ZYC8/jlidmVbbLpe9/lXSA9j9kzGIMUuIBx2SZY+0reAS0DjZZ1i7dJp4NHrjocPw==", + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", "license": "MIT" }, "node_modules/mpath": { diff --git a/package.json b/package.json index aa6cd05..0842c39 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "embla-carousel-react": "8.5.1", "express": "^4.18.2", "express-session": "^1.17.3", - "framer-motion": "latest", + "framer-motion": "^12.23.7", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "mongoose": "^7.5.0",