Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,184 +2,132 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { CheckCircle, Shield, Zap } from "lucide-react";
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { BatteryCharging, Zap, ShieldCheck, Smile } from "lucide-react";
 
-export default function LandingPage() {
+export default function JuicerWebsite() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-bubble"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="medium"
-        sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarStyleApple
             navItems={[
-              { name: "Verification", id: "hero" },
-              { name: "Security", id: "about" },
+              { name: "Overview", id: "hero" },
               { name: "Features", id: "features" },
-              { name: "Help", id: "faq" },
-              { name: "Support", id: "contact" },
+              { name: "Specs", id: "metrics" },
+              { name: "FAQ", id: "faq" },
+              { name: "Contact", id: "contact" },
             ]}
-            brandName="AliSecurity"
+            brandName="JuicePro"
           />
         </div>
 
         <div id="hero" data-section="hero">
           <HeroSplit
-            background={{ variant: "plain" }}
-            title="Secure Verification Portal"
-            description="We have detected unusual traffic from your network. Please slide to verify your identity to ensure safe and continuous access to our services."
-            buttons={[{ text: "Start Verification", href: "#contact" }]}
-            imageSrc="http://img.b2bpic.net/free-photo/cybersecurity-digital-padlock-protection-concept_23-2152004113.jpg"
+            background={{ variant: "sparkles-gradient" }}
+            title="350ML Portable Electric Juicer"
+            description="Experience fresh, nutrient-rich juice wherever you go. Our compact, powerful blender fits perfectly into your active lifestyle."
+            buttons={[{ text: "Order Now", href: "#contact" }]}
+            imageSrc="https://img.b2bpic.net/free-photo/fresh-smoothie-with-strawberries-mint-wooden-table_23-2148293774.jpg"
             mediaAnimation="slide-up"
-            avatars={[
-              { src: "http://img.b2bpic.net/free-photo/man-monitoring-company-systems-using-notebook-while-standing-office_482257-124884.jpg", alt: "Secure user 1" },
-              { src: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-94558.jpg", alt: "Secure user 2" },
-              { src: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-121538.jpg", alt: "Secure user 3" },
-              { src: "http://img.b2bpic.net/free-photo/employee-using-ai-technology-design-machine-learning-algorithms_482257-107566.jpg", alt: "Secure user 4" },
-              { src: "http://img.b2bpic.net/free-photo/apply-voucher-code-starting-download_53876-134031.jpg", alt: "Secure user 5" },
-            ]}
-            avatarText="Trusted by 50,000+ verified users"
-            marqueeItems={[
-              { type: "text", text: "ISO 27001 Certified" },
-              { type: "text", text: "256-bit Encryption" },
-              { type: "text", text: "Real-time Monitoring" },
-              { type: "text", text: "GDPR Compliant" },
-              { type: "text", text: "Verified Access" },
-            ]}
           />
         </div>
 
         <div id="about" data-section="about">
-          <SplitAbout
-            textboxLayout="split"
-            useInvertedBackground={false}
-            title="Why Verification is Necessary"
-            description="Protecting our network from unusual traffic patterns ensures that all users experience consistent speed and security. This verification step identifies human users from automated bot systems."
-            bulletPoints={[
-              { title: "Secure Transactions", description: "Ensure your data remains protected from unauthorized access." },
-              { title: "Bot Prevention", description: "Distinguish genuine users from malicious automated scripts." },
-              { title: "Network Stability", description: "Reduce server load to provide a seamless browsing experience." },
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/enjoyment-activities-festivities-movies-pastime_53876-21360.jpg"
-            mediaAnimation="blur-reveal"
+          <MediaAbout
+            title="Designed for Your Lifestyle"
+            description="With a 350ML capacity, this juicer is ideal for gym enthusiasts, travelers, and busy professionals who need a quick energy boost on the move. Rechargeable via USB, it's convenience redefined."
+            imageSrc="https://img.b2bpic.net/free-photo/woman-holding-glass-fresh-smoothie_23-2148293781.jpg"
+            useInvertedBackground={true}
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardThree
-            animationType="slide-up"
-            textboxLayout="default"
-            gridVariant="uniform-all-items-equal"
+          <FeatureCardEight
+            title="Key Features"
+            description="Packed with power, efficiency, and easy cleaning technology."
+            textboxLayout="split"
             useInvertedBackground={false}
             features={[
-              { title: "Advanced Traffic Filtering", description: "Intelligent nodes filter out suspicious bots from real traffic.", imageSrc: "http://img.b2bpic.net/free-photo/data-analytics-dashboard_23-2152001529.jpg" },
-              { title: "Data Encryption", description: "Every interaction is protected with industry-standard encryption.", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-lock-with-digital-particles_23-2152004084.jpg" },
-              { title: "Privacy Compliance", description: "Full compliance with global digital privacy standards.", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concepts_23-2152001154.jpg" },
+              { title: "Compact Design", description: "350ML capacity, lightweight and perfectly portable.", imageSrc: "https://img.b2bpic.net/free-photo/healthy-smoothie-with-ingredients-wooden-background_23-2148293796.jpg" },
+              { title: "High Speed Blending", description: "Powerful motor makes light work of tough ingredients.", imageSrc: "https://img.b2bpic.net/free-photo/strawberries-blender-making-smoothie_23-2148293815.jpg" },
+              { title: "USB Rechargeable", description: "Charge via any port—laptops, cars, or power banks.", imageSrc: "https://img.b2bpic.net/free-photo/usb-cable-connected-devices_23-2148293830.jpg" }
             ]}
-            title="Core Security Technologies"
-            description="Advanced systems protecting your digital footprint every step of the way."
-          />
-        </div>
-
-        <div id="socialProof" data-section="socialProof">
-          <SocialProofOne
-            textboxLayout="default"
-            useInvertedBackground={false}
-            names={["CloudScale", "SecureNet", "DataFlow", "ArmorCloud", "WebGuard", "TrafficOps", "CyberLink"]}
-            title="Trusted by Industry Leaders"
-            description="Global brands rely on our security standards to keep their customers safe."
           />
         </div>
 
         <div id="metrics" data-section="metrics">
-          <MetricCardOne
+          <MetricCardThree
+            title="Product Specifications"
+            description="Built for performance and reliability in every blend."
             animationType="slide-up"
-            textboxLayout="default"
-            gridVariant="uniform-all-items-equal"
+            textboxLayout="split"
             useInvertedBackground={false}
             metrics={[
-              { id: "m1", value: "99.9%", title: "Uptime", description: "Consistent platform performance.", icon: CheckCircle },
-              { id: "m2", value: "2M+", title: "Threats Blocked", description: "Daily automated threats neutralized.", icon: Shield },
-              { id: "m3", value: "15ms", title: "Latency", description: "Optimized verification speed.", icon: Zap },
+              { id: "s1", icon: BatteryCharging, title: "Battery Life", value: "15 Blends" },
+              { id: "s2", icon: Zap, title: "Motor Power", value: "20,000 RPM" },
+              { id: "s3", icon: ShieldCheck, title: "Blade Material", value: "SUS 304" },
+              { id: "s4", icon: Smile, title: "Capacity", value: "350 ML" },
             ]}
-            title="Our Security Impact"
-            description="Real-time statistics on our platform stability and user protection."
-          />
-        </div>
-
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialCardSix
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            testimonials={[
-              { id: "t1", name: "Alex Riv", handle: "@alex_riv", testimonial: "The verification was seamless and gave me peace of mind about my data security.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg" },
-              { id: "t2", name: "Sarah Lane", handle: "@slane", testimonial: "Fast and effective security verification that didn't interrupt my shopping.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg" },
-              { id: "t3", name: "Mike Chen", handle: "@mchen", testimonial: "Highly secure platform, appreciate the focus on keeping bots off the site.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-taking-break_1139-421.jpg" },
-              { id: "t4", name: "Jane Doe", handle: "@jdoe", testimonial: "Simple verification flow. Security done right for regular users.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg" },
-              { id: "t5", name: "Mark Wu", handle: "@mwu", testimonial: "Reliable security standards that make me feel safe while browsing online.", imageSrc: "http://img.b2bpic.net/free-photo/man-talking-phone-browsing-digital-tablet_329181-16301.jpg" },
-            ]}
-            title="Verified User Experiences"
-            description="Hear from those who trust our verification processes."
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqDouble
-            textboxLayout="default"
-            useInvertedBackground={false}
-            faqs={[
-              { id: "f1", title: "Why did I get this error?", content: "Our system detected traffic patterns that resemble automated bots." },
-              { id: "f2", title: "Is my data secure?", content: "Yes, we use advanced encryption to protect your sensitive information." },
-              { id: "f3", title: "Can I bypass the captcha?", content: "Verification is mandatory to ensure the stability of the platform." },
-            ]}
+          <FaqBase
             title="Frequently Asked Questions"
-            description="Common questions regarding security and traffic verification."
+            description="Learn more about your new favorite portable blender."
             faqsAnimation="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            faqs={[
+              { id: "f1", title: "Is it dishwasher safe?", content: "The blender cup is dishwasher safe, while the base should be rinsed carefully." },
+              { id: "f2", title: "How long does it take to charge?", content: "A full charge takes approximately 2 hours via USB." },
+              { id: "f3", title: "Can it crush ice?", content: "Yes, the stainless steel blades are designed for ice and frozen fruit." },
+            ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactSplit
+          <ContactSplitForm
+            title="Get in touch"
+            description="Have questions about our juicer? Send us a message and we'll be happy to assist."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name" },
+              { name: "email", type: "email", placeholder: "Your Email" },
+            ]}
+            textarea={{ name: "message", placeholder: "How can we help you?" }}
             useInvertedBackground={false}
-            background={{ variant: "radial-gradient" }}
-            tag="Support"
-            title="Need Help? Reach Out"
-            description="Contact our security team if you continue to face access issues."
-            imageSrc="http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg"
-            mediaAnimation="blur-reveal"
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterLogoEmphasis
+          <FooterBaseCard
+            logoText="JuicePro"
             columns={[
-              { items: [{ label: "Security Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
-              { items: [{ label: "Help Center", href: "#" }, { label: "Community", href: "#" }] },
+              { title: "Product", items: [{ label: "Shop", href: "#" }, { label: "Manual", href: "#" }] },
+              { title: "Support", items: [{ label: "Help", href: "#" }, { label: "Warranty", href: "#" }] },
             ]}
-            logoText="AliSecurity"
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}