Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
-import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Mail } from "lucide-react";
+import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { ShieldCheck, Zap, Globe, MessageSquare, Heart } from "lucide-react";
 
 export default function SkincareTemplatePage() {
     return (
@@ -28,112 +28,125 @@ export default function SkincareTemplatePage() {
         >
             <div id="nav" data-section="nav">
                 <NavbarStyleCentered
-                    brandName="Luminé Skincare"
+                    brandName="Aibin"
                     navItems={[
-                        { name: "Brands", id: "products" },
-                        { name: "Our Story", id: "about" },
-                        { name: "Benefits", id: "benefits" },
-                        { name: "Reviews", id: "reviews" },
+                        { name: "Products", id: "products" },
+                        { name: "Why Us", id: "benefits" },
+                        { name: "Testimonials", id: "reviews" },
+                        { name: "FAQ", id: "faq" },
                         { name: "Contact", id: "contact" }
                     ]}
-                    button={{ text: "Shop Now", href: "products" }}
+                    button={{ text: "Affiliate Program", href: "#contact" }}
                 />
             </div>
 
             <div id="hero" data-section="hero">
-                <HeroBillboard
-                    title="The Finest Skincare Brands, Curated For You"
-                    description="Explore a curated selection of global skincare leaders. From revolutionary dermatological science to sustainable botanical luxury, we bring the best of the world's beauty directly to your routine."
+                <HeroBillboardDashboard
+                    title="Scale Your Affiliate Earnings with Aibin"
+                    description="Access top-tier skincare brands and high-conversion assets. Elevate your marketing efforts with our data-driven dashboard and partner portal."
                     background={{ variant: "sparkles-gradient" }}
-                    buttons={[{ text: "Explore Brands", href: "#products" }]}
+                    dashboard={{
+                        title: "Aibin Portal",                        stats: [
+                            { title: "Earnings", values: [1500, 2200, 3100], description: "Monthly growth rate" },
+                            { title: "Clicks", values: [5000, 8000, 12000], description: "Engagement metrics" },
+                            { title: "Conversion", values: [2, 4, 6], description: "Purchase conversion" }
+                        ],
+                        logoIcon: ShieldCheck,
+                        sidebarItems: [{ icon: Zap, active: true }, { icon: Globe }, { icon: MessageSquare }],
+                        buttons: [{ text: "Get Started" }],
+                        listItems: [{ icon: Zap, title: "Transfer Initiated", status: "Pending" }, { icon: Globe, title: "Global Reach", status: "Complete" }],
+                        imageSrc: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg"
+                    }}
+                    buttons={[{ text: "Join Program", href: "#contact" }]}
                 />
             </div>
 
             <div id="about" data-section="about">
-                <MediaAbout
-                    title="Defining Modern Beauty Standards"
-                    description="We partner exclusively with brands that prioritize efficacy, sustainability, and transparency. Our mission is to democratize access to premium skincare, helping you build a regimen that truly works for your unique skin needs."
-                    useInvertedBackground={true}
+                <TestimonialAboutCard
+                    tag="Our Philosophy"
+                    title="Affiliate-First Skincare Curation"
+                    description="We believe in simplifying the skincare journey for your audience. Aibin connects content creators with the most trusted, high-performance global brands."
+                    subdescription="Transparency, efficacy, and high-conversion partnerships drive everything we do."
+                    icon={Heart}
+                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=1"
+                    useInvertedBackground={false}
                 />
             </div>
 
             <div id="products" data-section="products">
-                <ProductCardThree
-                    title="Featured Brand Collections"
-                    description="Hand-picked collections from globally renowned skincare laboratories and indie beauty pioneers."
-                    gridVariant="three-columns-all-equal-width"
+                <ProductCardOne
+                    title="Top Performing Collections"
+                    description="High-converting products selected for optimal affiliate results."
+                    gridVariant="one-large-left-three-stacked-right"
                     animationType="slide-up"
                     textboxLayout="default"
                     useInvertedBackground={false}
                     products={[
-                        { id: "1", name: "Dr. Botanical Labs", price: "Premium Range", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp" },
-                        { id: "2", name: "Pure Glow Organics", price: "Sustainable Care", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp" },
-                        { id: "3", name: "SkinScience Elite", price: "Clinical Grade", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp" }
+                        { id: "1", name: "Dr. Botanical Labs", price: "Tier 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=2" },
+                        { id: "2", name: "Pure Glow Organics", price: "Tier 2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp" },
+                        { id: "3", name: "SkinScience Elite", price: "Tier 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp?_wi=1" }
                     ]}
                 />
             </div>
 
             <div id="benefits" data-section="benefits">
-                <FeatureCardSeven
-                    title="Why Shop With Us"
-                    description="We don't just sell products; we offer a curated experience based on rigorous quality and effectiveness standards."
+                <FeatureCardTwentyFive
+                    title="Why Partners Choose Aibin"
+                    description="Advanced tools to maximize your affiliate marketing success."
                     animationType="slide-up"
                     textboxLayout="default"
                     useInvertedBackground={true}
                     features={[
-                        { title: "Certified Authenticity", description: "Direct-to-consumer partnerships with every featured brand.", imageSrc: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg" },
-                        { title: "Global Logistics", description: "Secured worldwide shipping for all our premium partners.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp" },
-                        { title: "Expert Curation", description: "Every product undergoes a strict dermatological review process.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif" }
+                        { title: "Conversion Tracking", description: "Detailed analytics to refine your strategy.", icon: Zap, mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif" }] },
+                        { title: "Direct Partnerships", description: "High commission rates on authentic products.", icon: ShieldCheck, mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp?_wi=2" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp?_wi=3" }] }
                     ]}
                 />
             </div>
 
             <div id="reviews" data-section="reviews">
-                <TestimonialCardFifteen
-                    testimonial="Finding all my favorite luxury skincare brands in one place was a game changer. The curation is impeccable and shipping is incredibly fast!"
-                    rating={5}
-                    author="Sarah Mitchell, Beauty Enthusiast"
-                    ratingAnimation="slide-up"
-                    avatarsAnimation="slide-up"
+                <TestimonialCardSix
+                    title="Partner Success Stories"
+                    description="Trusted by beauty content creators globally."
+                    textboxLayout="default"
+                    animationType="slide-up"
                     useInvertedBackground={false}
-                    avatars={[]}
+                    testimonials={[
+                        { id: "1", name: "Emma R.", handle: "@emmarbeauty", testimonial: "Aibin transformed my affiliate revenue by providing clear metrics and top-performing skincare brands." },
+                        { id: "2", name: "Marcus T.", handle: "@marcusreviews", testimonial: "The brand variety and high commission rates have made Aibin my primary partner for my skincare reviews." }
+                    ]}
                 />
             </div>
 
             <div id="faq" data-section="faq">
-                <FaqSplitMedia
-                    title="Common Questions"
-                    description="Everything you need to know."
+                <FaqBase
+                    title="Partner FAQs"
+                    description="Answers to frequently asked questions."
                     faqs={[
-                        { id: "1", title: "Are these brands official partners?", content: "Yes, we maintain direct retail partnerships with all listed brands." },
-                        { id: "2", title: "Do you ship internationally?", content: "We support worldwide shipping for all brand collections listed here." }
+                        { id: "1", title: "How do I join?", content: "Simply sign up through our contact form and get instant access to your portal." },
+                        { id: "2", title: "Are payouts weekly?", content: "Yes, we offer reliable weekly commission payouts to all our partners." }
                     ]}
                     faqsAnimation="slide-up"
-                    useInvertedBackground={true}
                     textboxLayout="default"
+                    useInvertedBackground={false}
                 />
             </div>
 
             <div id="contact" data-section="contact">
-                <ContactCenter
-                    tag="Updates"
-                    title="Never Miss A Drop"
-                    description="Get notified when new skincare brands launch on our platform."
-                    tagIcon={Mail}
+                <ContactSplitForm
+                    title="Ready to scale your reach?"
+                    description="Apply for the Aibin partner program today."
+                    inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+                    buttonText="Join Now"
                     useInvertedBackground={false}
-                    buttonText="Subscribe"
-                    background={{ variant: "sparkles-gradient" }}
                 />
             </div>
 
             <div id="footer" data-section="footer">
-                <FooterBaseCard
-                    logoText="Luminé"
+                <FooterBaseReveal
+                    logoText="Aibin"
                     columns={[
-                        { title: "Brands", items: [{ label: "All Brands", href: "#products" }] },
-                        { title: "Company", items: [{ label: "About Us", href: "#about" }] },
-                        { title: "Support", items: [{ label: "FAQ", href: "#faq" }] },
-                        { title: "Connect", items: [{ label: "Instagram", href: "#" }] }
+                        { title: "Platform", items: [{ label: "Products", href: "#products" }, { label: "Why Us", href: "#benefits" }] },
+                        { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] }
                     ]}
                 />
             </div>