Switch to version 3: modified src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,9 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import { useState } from "react";
-import Input from '@/components/form/Input';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
@@ -17,10 +15,6 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import { Award, Shield, Zap } from "lucide-react";
 
 export default function LandingPage() {
-  const [gmail, setGmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
-
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -38,12 +32,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        { name: "Login", id: "contact" },
         { name: "Home", id: "home" },
+        { name: "Emergency Auth", id: "emergency-auth" },
         { name: "Security", id: "features" },
+        { name: "Support", id: "contact" },
       ]}
       brandName="PUBG Emergency Auth"
-      button={{ text: "Verify Now", href: "#contact" }}
+      button={{
+        text: "Verify Now",        href: "#emergency-auth"}}
     />
   </div>
 
@@ -52,20 +48,30 @@ export default function LandingPage() {
       title="Emergency Account Authentication"
       description="Secure your compromised PUBG Mobile account immediately using our verified emergency recovery protocol."
       testimonials={[
-        { name: "John Doe", handle: "@pubg_pro", testimonial: "Saved my account in minutes. Incredible service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637780.jpg" },
+        { name: "John Doe", handle: "@pubg_pro", testimonial: "Saved my account in minutes. Incredible service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637780.jpg?_wi=1" },
         { name: "Sarah Miller", handle: "@gaming_fan", testimonial: "Fast response when I lost my credentials.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/key-lock-password-security-privacy-protection-graphic_53876-122570.jpg" },
         { name: "Alex Riv", handle: "@esports_star", testimonial: "The only way to verify ownership securely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/laptop-screen-with-technical-information_53876-101869.jpg" },
         { name: "Mike Tech", handle: "@gamer_guy", testimonial: "Professional authentication process.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637762.jpg" },
         { name: "Lena K", handle: "@battle_royale", testimonial: "Highly reliable account protection.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169866.jpg" },
       ]}
-      buttons={[{ text: "Authenticate Now", href: "#contact" }]}
+      buttons={[{ text: "Start Verification", href: "#emergency-auth" }]}
       imageSrc="http://img.b2bpic.net/free-photo/it-specialist-working-data-center-facility-housing-storage-hardware-close-up_482257-90136.jpg"
     />
-    <div className="flex flex-col gap-4 max-w-md mx-auto p-8">
-      <Input value={name} onChange={setName} placeholder="Full Name" />
-      <Input value={gmail} onChange={setGmail} placeholder="Gmail Address" type="email" />
-      <Input value={password} onChange={setPassword} placeholder="Password" type="password" />
-    </div>
+  </div>
+
+  <div id="emergency-auth" data-section="emergency-auth">
+    <ContactSplitForm 
+      title="Emergency Account Access"
+      description="Enter your details to initiate an emergency security audit for your compromised account."
+      inputs={[
+        { name: "username", type: "text", placeholder: "PUBG Username / ID", required: true },
+        { name: "email", type: "email", placeholder: "Registered Email Address", required: true }
+      ]}
+      textarea={{ name: "details", placeholder: "Describe the incident...", rows: 4, required: true }}
+      buttonText="Secure Account Now"
+      imageSrc="http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637780.jpg?_wi=2"
+      useInvertedBackground={true}
+    />
   </div>
 
   <div id="metrics" data-section="metrics">
@@ -101,7 +107,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         { id: "t1", name: "User 1", date: "2024-05", title: "Verified", quote: "Instant verification.", tag: "PUBG", avatarSrc: "http://img.b2bpic.net/free-photo/computer-security-data-protection-concept_107791-15659.jpg", imageSrc: "http://img.b2bpic.net/free-photo/digital-cybersecurity-shield-network-background_84443-85964.jpg" },
-        { id: "t2", name: "User 2", date: "2024-05", title: "Verified", quote: "Professional team.", tag: "Mobile", avatarSrc: "http://img.b2bpic.net/free-photo/password-lock-phone-screen_1387-184.jpg", imageSrc: "http://img.b2bpic.net/free-photo/device-protected-by-cyber-security_23-2149270833.jpg" },
+        { id: "t2", name: "User 2", date: "2024-05", title: "Verified", quote: "Professional team.", tag: "Mobile", avatarSrc: "http://img.b2bpic.net/free-photo/password-lock-phone-screen_1387-184.jpg", imageSrc: "http://img.b2bpic.net/free-photo/device-protected-by-cyber-security_23-2149270833.jpg" }
       ]}
       title="Security Success Stories"
       description="Real players trusting our auth system."
@@ -138,22 +144,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         { id: "f1", title: "How long does auth take?", content: "Under 10 minutes." },
-        { id: "f2", title: "Is my data encrypted?", content: "Military grade." },
+        { id: "f2", title: "Is my data encrypted?", content: "Military grade." }
       ]}
       sideTitle="Common Auth Questions"
       faqsAnimation="blur-reveal"
     />
   </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{ variant: "cell-wave" }}
-      text="Initiate emergency login authentication now. Our secure channel is live."
-      buttons={[{ text: "Authenticate My Account", href: "#" }]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       logoText="PUBG Emergency Auth"