Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,295 +2,124 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import SplitAbout from '@/components/sections/about/SplitAbout';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import HeroSignup from '@/components/sections/hero/HeroSignup';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import { Calendar, FileText, LayoutDashboard, MessageSquare } from "lucide-react";
+import { Zap, Shield, Users, Search } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="icon-arrow"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="soft"
-        contentWidth="compact"
+        contentWidth="mediumLarge"
-        sizing="mediumLargeSizeLargeTitles"
+        sizing="largeSizeMediumTitles"
-        background="aurora"
+        background="noise"
-        cardStyle="glass-depth"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Features", id: "features" },
-          id: "hero",
+        { name: "How it Works", id: "dashboard" },
-        },
+        { name: "Trust", id: "trust" },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "How it Works",
-          id: "how-it-works",
-        },
-        {
-          name: "Dashboard",
-          id: "dashboard",
-        },
       ]}
       brandName="ProConnect"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDoubleCarousel
+      <HeroSignup
-      background={{
+      title="Modern Legal Solutions for Startups"
-        variant: "plain",
+      description="Streamline your legal operations with AI-powered guidance, expert connectivity, and intuitive case management."
-      }}
+      tag="NEW PLATFORM"
-      title="Legal Help Made Simple for Everyone"
+      tagIcon={Zap}
-      description="Understand your rights in plain language, get AI-powered legal guidance, and connect with verified legal professionals instantly."
+      inputPlaceholder="Enter your email"
-      leftCarouselItems={[
+      buttonText="Get Early Access"
-        {
+      onSubmit={(email) => console.log(email)}
-          imageSrc: "http://img.b2bpic.net/free-photo/person-reading-data-tablet_23-2149370610.jpg?_wi=1",
+      background={{ variant: "sparkles-gradient" }}
-          imageAlt: "Legal Tech Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-male-lawyer-suit_23-2151228083.jpg?_wi=1",
-          imageAlt: "Legal Consultation Art",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/teamwork-makes-dream-work-motivation-quote-message-box_53876-121429.jpg?_wi=1",
-          imageAlt: "AI Chat Interface",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg?_wi=1",
-          imageAlt: "Lawyer Profiles",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/access-identification-password-passcode-graphic-concept_53876-125070.jpg?_wi=1",
-          imageAlt: "Secure Video Call",
-        },
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-male-lawyer-suit_23-2151228083.jpg?_wi=2",
-          imageAlt: "Legal Tech UI",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/person-reading-data-tablet_23-2149370610.jpg?_wi=2",
-          imageAlt: "Legal Analytics",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/overworked-policewoman-having-eyes-pain-while-reading-detective-report-night-time-exhausted-african-american-private-investigator-rubbing-nose-studying-crime-case-late_482257-59762.jpg?_wi=1",
-          imageAlt: "Document Storage",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/access-identification-password-passcode-graphic-concept_53876-125070.jpg?_wi=2",
-          imageAlt: "Encryption Interface",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg?_wi=2",
-          imageAlt: "Team Collaboration",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Ask AI Legal Assistant",
-          href: "#",
-        },
-        {
-          text: "Find a Lawyer",
-          href: "#",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg",
-          alt: "Lawyer 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg",
-          alt: "Lawyer 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg",
-          alt: "Lawyer 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg",
-          alt: "Lawyer 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg",
-          alt: "Lawyer 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ verified legal experts"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Bar Certified",
-        },
-        {
-          type: "text",
-          text: "ISO Certified",
-        },
-        {
-          type: "text",
-          text: "Secure Encryption",
-        },
-        {
-          type: "text",
-          text: "Global Access",
-        },
-        {
-          type: "text",
-          text: "Privacy Focused",
-        },
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardEight
+      <FeatureBento
-      textboxLayout="default"
+      title="Built for Speed & Security"
+      description="A premium suite of tools designed to keep you compliant and connected."
+      animationType="blur-reveal"
       useInvertedBackground={false}
+      textboxLayout="split"
       features={[
         {
-          title: "AI Legal Guidance Assistant",
+          title: "AI Legal Chat",          description: "Instant legal insights powered by our secure AI engine.",          bentoComponent: "chat",          aiIcon: Zap,
-          description: "Chat-based assistant explaining laws in simple language with next-step guidance.",
+          userIcon: Users,
-          imageSrc: "http://img.b2bpic.net/free-photo/teamwork-makes-dream-work-motivation-quote-message-box_53876-121429.jpg?_wi=2",
+          exchanges: [{ userMessage: "How do I register?", aiResponse: "Follow the standard 3-step registration process..." }],
+          placeholder: "Ask me anything..."
         },
         {
-          title: "Verified Lawyer Network",
+          title: "Expert Search",          description: "Connect with certified professionals.",          bentoComponent: "reveal-icon",          icon: Search
-          description: "Browse verified legal profiles with specialization tags, years of experience, ratings, and consultation fees.",
-          imageSrc: "http://img.b2bpic.net/free-photo/faces-close-up-smiling-executives_1098-1829.jpg?_wi=3",
         },
         {
-          title: "Secure Consultation",
+          title: "Secure Data",          description: "Bank-grade protection for your documents.",          bentoComponent: "reveal-icon",          icon: Shield
-          description: "Live chat, secure video consultation, document sharing, and encrypted communications.",
+        }
-          imageSrc: "http://img.b2bpic.net/free-photo/access-identification-password-passcode-graphic-concept_53876-125070.jpg?_wi=3",
-        },
-        {
-          title: "Case & Document Management",
-          description: "Upload FIRs, agreements, notices with secure cloud storage, timeline tracking, and status monitoring.",
-          imageSrc: "http://img.b2bpic.net/free-photo/overworked-policewoman-having-eyes-pain-while-reading-detective-report-night-time-exhausted-african-american-private-investigator-rubbing-nose-studying-crime-case-late_482257-59762.jpg?_wi=2",
-        },
       ]}
-      title="Core Platform Features"
-      description="Powerful tools designed to simplify your journey through the legal system."
     />
   </div>
 
   <div id="dashboard" data-section="dashboard">
-      <AboutMetric
+      <SplitAbout
-      useInvertedBackground={false}
+      title="How ProConnect Works"
-      title="Comprehensive Legal Dashboard"
+      description="A seamless journey from initial consultation to final resolution."
-      metrics={[
+      imageSrc="http://img.b2bpic.net/free-photo/person-reading-data-tablet_23-2149370610.jpg"
-        {
+      bulletPoints={[
-          icon: LayoutDashboard,
+        { title: "Smart Discovery", description: "Identify your needs with our AI.", icon: Search },
-          label: "Lawyer Search",
+        { title: "Professional Match", description: "Get paired with verified experts.", icon: Users },
-          value: "Real-time",
+        { title: "Secure Execution", description: "Manage everything in one portal.", icon: Shield }
-        },
-        {
-          icon: MessageSquare,
-          label: "AI Chat",
-          value: "24/7",
-        },
-        {
-          icon: Calendar,
-          label: "Appointments",
-          value: "Secure",
-        },
-        {
-          icon: FileText,
-          label: "Documents",
-          value: "Encrypted",
-        },
       ]}
-      metricsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={false}
+      mediaAnimation="none"
     />
   </div>
 
   <div id="trust" data-section="trust">
       <SocialProofOne
+      names={["Bar Certified", "ISO-27001", "GDPR Ready", "Secure Pay", "Global Reach"]}
+      title="Security First Infrastructure"
+      description="We meet the highest standards of digital privacy."
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "Bar Council Verified",
-        "AES-256 Encryption",
-        "Transparent Ratings",
-        "Secure Payments",
-        "User Privacy First",
-        "Verified Lawyers",
-        "Encrypted Messaging",
-      ]}
-      title="Trusted by Experts"
-      description="We prioritize security, transparency, and verification at every step of your legal journey."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCTA
+      tag="CONNECT"
+      title="Ready to scale your legal operations?"
+      description="Join the premium ecosystem of modern legal tech."
+      buttons={[{ text: "Get Started", href: "#" }]}
+      background={{ variant: "radial-gradient" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Ready to get professional legal assistance? Start your journey today."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseCard
-      columns={[
-        {
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Features",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-            {
-              label: "Support",
-              href: "#",
-            },
-          ],
-        },
-      ]}
       logoText="ProConnect"
+      columns={[
+        { title: "Platform", items: [{ label: "Features", href: "#" }, { label: "Security", href: "#" }] },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+      ]}
     />
   </div>
       </ReactLenis>