Merge version_3 into main

Merge version_3 into main

src/app/appointment/page.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
+import ContactForm from "@/components/form/ContactForm";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Calendar, User, Sparkles } from "lucide-react";
+import { useState } from "react";
+
+export default function AppointmentPage() {
+  const [selectedService, setSelectedService] = useState<string>("");
+  const [selectedDate, setSelectedDate] = useState<string>("");
+  const [formData, setFormData] = useState({
+    fullName: "",    email: "",    phone: "",    service: "",    date: "",    time: ""});
+
+  const services = [
+    { id: "makeup", name: "Professional Makeup Consultation", duration: "60 min", price: "$75" },
+    { id: "skincare", name: "Skincare Analysis & Treatment", duration: "90 min", price: "$120" },
+    { id: "makeover", name: "Complete Beauty Makeover", duration: "120 min", price: "$180" },
+    { id: "bridal", name: "Bridal Beauty Package", duration: "180 min", price: "$250" },
+  ];
+
+  const timeSlots = [
+    "9:00 AM",    "10:00 AM",    "11:00 AM",    "1:00 PM",    "2:00 PM",    "3:00 PM",    "4:00 PM",    "5:00 PM"];
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (name === "service") setSelectedService(value);
+    if (name === "date") setSelectedDate(value);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log("Appointment booked:", formData);
+    alert(`Appointment booked for ${formData.fullName} on ${formData.date} at ${formData.time}`);
+    setFormData({ fullName: "", email: "", phone: "", service: "", date: "", time: "" });
+    setSelectedService("");
+    setSelectedDate("");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="largeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="solid"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Radiance Beauty"
+          navItems={[
+            { name: "Shop", id: "products" },
+            { name: "About", id: "about" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Booking", id: "/appointment" },
+            { name: "Contact", id: "contact" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboardSplit
+          logoText="BOOK YOUR APPOINTMENT"
+          description="Schedule a personalized beauty consultation with our expert beauty professionals. Choose your preferred service, date, and time."
+          background={{ variant: "radial-gradient" }}
+          buttons={[
+            { text: "Back to Shop", href: "/" },
+          ]}
+          layoutOrder="default"
+          imageSrc="http://img.b2bpic.net/free-photo/happy-woman-holding-mascara-wand_23-2148398589.jpg?_wi=1"
+          imageAlt="Radiance Beauty professional makeup artist"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div className="py-20 px-6 md:px-10">
+        <div className="max-w-4xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-10">
+            {/* Services Section */}
+            <div className="space-y-6">
+              <div>
+                <h2 className="text-2xl font-bold mb-2 flex items-center gap-2">
+                  <Sparkles className="w-6 h-6" />
+                  Our Services
+                </h2>
+                <p className="text-foreground/80 mb-4">Select a service to get started</p>
+              </div>
+              <div className="space-y-3">
+                {services.map((service) => (
+                  <div
+                    key={service.id}
+                    onClick={() =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        service: service.id,
+                      }))
+                    }
+                    className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
+                      selectedService === service.id
+                        ? "border-primary-cta bg-primary-cta/10"
+                        : "border-background-accent hover:border-primary-cta/50"
+                    }`}
+                  >
+                    <h3 className="font-semibold text-sm">{service.name}</h3>
+                    <p className="text-xs text-foreground/60 mt-1">
+                      {service.duration} • {service.price}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Booking Form Section */}
+            <div className="space-y-6">
+              <div>
+                <h2 className="text-2xl font-bold mb-2 flex items-center gap-2">
+                  <Calendar className="w-6 h-6" />
+                  Your Information
+                </h2>
+                <p className="text-foreground/80 mb-4">Complete your booking details</p>
+              </div>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {/* Client Name */}
+                <div>
+                  <label htmlFor="fullName" className="block text-sm font-medium mb-2 flex items-center gap-2">
+                    <User className="w-4 h-4" />
+                    Full Name *
+                  </label>
+                  <input
+                    type="text"
+                    id="fullName"
+                    name="fullName"
+                    value={formData.fullName}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="Enter your full name"
+                    className="w-full px-4 py-2 border-2 border-background-accent rounded-lg bg-background focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                {/* Email */}
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium mb-2">
+                    Email Address *
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="your.email@example.com"
+                    className="w-full px-4 py-2 border-2 border-background-accent rounded-lg bg-background focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                {/* Phone */}
+                <div>
+                  <label htmlFor="phone" className="block text-sm font-medium mb-2">
+                    Phone Number *
+                  </label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    required
+                    placeholder="(555) 123-4567"
+                    className="w-full px-4 py-2 border-2 border-background-accent rounded-lg bg-background focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                {/* Date Selection */}
+                <div>
+                  <label htmlFor="date" className="block text-sm font-medium mb-2">
+                    Preferred Date *
+                  </label>
+                  <input
+                    type="date"
+                    id="date"
+                    name="date"
+                    value={formData.date}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border-2 border-background-accent rounded-lg bg-background focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                {/* Time Selection */}
+                <div>
+                  <label htmlFor="time" className="block text-sm font-medium mb-2">
+                    Preferred Time *
+                  </label>
+                  <select
+                    id="time"
+                    name="time"
+                    value={formData.time}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-2 border-2 border-background-accent rounded-lg bg-background focus:outline-none focus:border-primary-cta transition-colors"
+                  >
+                    <option value="">Select a time slot</option>
+                    {timeSlots.map((time) => (
+                      <option key={time} value={time}>
+                        {time}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Service Confirmation */}
+                {selectedService && (
+                  <div className="p-3 bg-primary-cta/10 border-2 border-primary-cta rounded-lg">
+                    <p className="text-sm font-medium">
+                      Selected Service:{" "}
+                      <span className="text-primary-cta">
+                        {services.find((s) => s.id === selectedService)?.name}
+                      </span>
+                    </p>
+                  </div>
+                )}
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  className="w-full bg-primary-cta text-background font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity mt-6"
+                >
+                  Confirm Appointment
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Radiance Beauty"
+          columns={[
+            {
+              items: [
+                { label: "Shop", href: "/" },
+                { label: "Book Appointment", href: "/appointment" },
+                { label: "New Arrivals", href: "/" },
+                { label: "Collections", href: "/" },
+              ],
+            },
+            {
+              items: [
+                { label: "About Us", href: "/" },
+                { label: "Our Story", href: "/" },
+                { label: "Sustainability", href: "#" },
+                { label: "Careers", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Help Center", href: "/" },
+                { label: "Contact Us", href: "#" },
+                { label: "Shipping Info", href: "#" },
+                { label: "Track Order", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Refund Policy", href: "#" },
+                { label: "Accessibility", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,297 +1,166 @@
 "use client";
 
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
-import SplitAbout from "@/components/sections/about/SplitAbout";
-import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
-import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import React from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Award, CheckCircle, Crown, Heart, Shield, Sparkles } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Sparkles, CheckCircle, Heart } from "lucide-react";
 
-export default function LandingPage() {
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "#about" },
+  { name: "Features", id: "#features" },
+  { name: "Testimonials", id: "#testimonials" },
+  { name: "Contact", id: "#contact" },
+];
+
+const heroMediaItems = [
+  { imageSrc: "asset://beauty-product-1", imageAlt: "Premium cosmetics collection" },
+  { imageSrc: "asset://beauty-product-2", imageAlt: "Natural skincare products" },
+  { imageSrc: "asset://beauty-product-3", imageAlt: "Luxury beauty essentials" },
+  { imageSrc: "asset://beauty-product-4", imageAlt: "Cruelty-free cosmetics" },
+  { imageSrc: "asset://beauty-product-5", imageAlt: "Dermatologist-tested skincare" },
+];
+
+const aboutBulletPoints = [
+  {
+    title: "Natural Ingredients",    description: "Crafted with premium natural ingredients sourced responsibly from around the world",    icon: Sparkles,
+  },
+  {
+    title: "Dermatologist-Tested",    description: "All products are rigorously tested and approved by leading dermatologists",    icon: CheckCircle,
+  },
+  {
+    title: "Cruelty-Free",    description: "100% cruelty-free and ethically produced for conscious beauty lovers",    icon: Heart,
+  },
+];
+
+const features = [
+  {
+    id: 1,
+    title: "Cleanse & Purify",    description: "Our gentle cleansing formulas remove impurities while maintaining skin's natural balance for a fresh, radiant complexion",    imageSrc: "asset://feature-cleanse"},
+  {
+    id: 2,
+    title: "Nourish & Hydrate",    description: "Rich moisturizing treatments infused with antioxidants and vitamins to deeply hydrate and restore skin vitality",    imageSrc: "asset://feature-nourish"},
+  {
+    id: 3,
+    title: "Protect & Glow",    description: "Advanced sun protection and brightening serums that shield your skin while enhancing natural radiance",    imageSrc: "asset://feature-protect"},
+];
+
+const testimonials = [
+  {
+    id: "1",    name: "Sarah Johnson",    imageSrc: "asset://testimonial-avatar-1"},
+  {
+    id: "2",    name: "Emily Chen",    imageSrc: "asset://testimonial-avatar-2"},
+  {
+    id: "3",    name: "Jessica Martinez",    imageSrc: "asset://testimonial-avatar-3"},
+  {
+    id: "4",    name: "Amanda Wilson",    imageSrc: "asset://testimonial-avatar-4"},
+];
+
+export default function Page() {
   return (
     <ThemeProvider
-      defaultButtonVariant="expand-hover"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSizeMediumTitles"
-      background="noiseDiagonalGradient"
-      cardStyle="solid"
-      primaryButtonStyle="diagonal-gradient"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="Radiance Beauty"
-          navItems={[
-            { name: "Shop", id: "products" },
-            { name: "About", id: "about" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
+        <NavbarStyleApple navItems={navItems} brandName="Radiance" />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboardSplit
-          logoText="RADIANCE"
-          description="Discover premium cosmetics crafted with natural ingredients. Enhance your natural beauty with our luxury skincare and makeup collection."
-          background={{ variant: "radial-gradient" }}
+        <HeroBillboardGallery
+          background={{ variant: "plain" }}
+          title="Premium Cosmetics & Skincare"
+          description="Discover luxury beauty products crafted with natural ingredients. Cruelty-free, dermatologist-tested, and made for all skin types."
+          tag="Beauty Excellence"
+          tagIcon={Sparkles}
+          mediaItems={heroMediaItems}
+          mediaAnimation="none"
           buttons={[
-            { text: "Shop Now", href: "#products" },
+            { text: "Shop Now", href: "#features" },
             { text: "Learn More", href: "#about" },
           ]}
-          layoutOrder="default"
-          imageSrc="http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg"
-          imageAlt="Luxury cosmetics beauty collection"
-          frameStyle="card"
-          mediaAnimation="slide-up"
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="about" data-section="about">
         <SplitAbout
           title="About Radiance Beauty"
-          description="We believe beauty comes from within and is enhanced by quality skincare and cosmetics. Our products are carefully formulated with premium natural ingredients to nourish your skin while delivering stunning color and finish."
+          description="We believe that true beauty comes from within, enhanced by premium skincare that respects your skin and the environment. Our mission is to provide effective, luxurious beauty solutions without compromising on ethics or quality."
           tag="Our Story"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          bulletPoints={[
-            {
-              title: "Natural Ingredients",              description: "Sourced from sustainable suppliers worldwide for purity and effectiveness",              icon: Sparkles,
-            },
-            {
-              title: "Cruelty-Free",              description: "Never tested on animals, always kind to all living beings",              icon: Heart,
-            },
-            {
-              title: "Dermatologist Tested",              description: "Safe and effective for all skin types including sensitive skin",              icon: Shield,
-            },
-            {
-              title: "Premium Quality",              description: "Rigorous quality control ensures every product exceeds expectations",              icon: Award,
-            },
-          ]}
-          imageSrc="http://img.b2bpic.net/free-photo/happy-woman-holding-mascara-wand_23-2148398589.jpg?_wi=1"
-          imageAlt="Radiance Beauty cosmetics laboratory"
-          mediaAnimation="slide-up"
+          tagIcon={Heart}
+          bulletPoints={aboutBulletPoints}
+          imageSrc="asset://about-image"
+          imageAlt="Radiance Beauty products display"
           imagePosition="right"
-          buttons={[{ text: "Discover Our Philosophy", href: "#features" }]}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
-      <div id="products" data-section="products">
-        <ProductCardOne
-          title="Featured Products"
-          description="Explore our bestselling collection of premium cosmetics and skincare products"
-          tag="New Collection"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          products={[
-            {
-              id: "1",              name: "Luminous Foundation",              price: "$45",              imageSrc: "http://img.b2bpic.net/free-photo/makeup-foundation-celebrating-all-skin-tones_23-2149179692.jpg?_wi=1",              imageAlt: "Luminous Foundation premium makeup"
-            },
-            {
-              id: "2",              name: "Radiant Lipstick",              price: "$28",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-different-shades-lip-gloss_52683-95223.jpg",              imageAlt: "Radiant Lipstick luxury cosmetics"
-            },
-            {
-              id: "3",              name: "Glow Serum",              price: "$52",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-natural-cosmetics-concept_23-2148578622.jpg",              imageAlt: "Glow Serum premium skincare"
-            },
+          mediaAnimation="none"
+          buttons={[
+            { text: "Explore Products", href: "#features" },
+            { text: "Our Values", href: "#about" },
           ]}
-          buttons={[{ text: "View All Products", href: "#" }]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="features" data-section="features">
-        <FeatureCardTwentyFour
-          title="Why Choose Radiance"
-          description="Discover what sets our cosmetics apart from the rest"
-          tag="Benefits"
+        <FeatureCardSix
+          features={features}
+          title="Our Beauty Ritual"
+          description="A complete skincare journey designed to transform your complexion through innovative formulations and time-tested techniques."
+          tag="Product Features"
+          tagIcon={CheckCircle}
           textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          features={[
-            {
-              id: "1",              title: "Advanced Formula Technology",              author: "Beauty Lab",              description: "Our proprietary blend combines cutting-edge cosmetic science with nature's finest ingredients for superior performance and results.",              tags: ["Innovation", "Science"],
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-holding-mascara-wand_23-2148398589.jpg?_wi=2",              imageAlt: "Advanced cosmetics formulation"
-            },
-            {
-              id: "2",              title: "Long-Lasting Performance",              author: "Quality Team",              description: "Engineered to last all day without fading, creasing, or settling. Experience beauty that stays true from morning to night.",              tags: ["Durability", "Performance"],
-              imageSrc: "http://img.b2bpic.net/free-photo/makeup-foundation-celebrating-all-skin-tones_23-2149179692.jpg?_wi=2",              imageAlt: "Long-lasting cosmetics products"
-            },
+          useInvertedBackground={false}
+          buttons={[
+            { text: "View All Products", href: "#features" },
+            { text: "Get Started", href: "#contact" },
           ]}
-          buttons={[{ text: "Shop Premium Line", href: "#pricing" }]}
-          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardThirteen
-          title="What Our Customers Say"
-          description="Join thousands of satisfied beauty enthusiasts who trust Radiance"
-          tag="Reviews"
-          textboxLayout="default"
+        <TestimonialCardTwelve
+          testimonials={testimonials}
+          cardTitle="Over 50,000 customers worldwide trust Radiance Beauty for their skincare needs"
+          cardTag="Join Our Community"
+          cardTagIcon={Heart}
+          cardAnimation="slide-up"
           useInvertedBackground={false}
-          showRating={true}
-          animationType="slide-up"
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              handle: "@sarahjbeauty",              testimonial: "The quality is absolutely incredible! My skin has never looked better. The foundation blends seamlessly and lasts all day.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-asian-attractive-sensual-young-woman-pose-holding-makeup-blusher-brush-isolated-gray-wall_1150-51864.jpg",              imageAlt: "Sarah Johnson"
-            },
-            {
-              id: "2",              name: "Emma Davis",              handle: "@emmadavis_makeup",              testimonial: "Finally found a lipstick that doesn't dry out my lips! The formula is so creamy and the colors are stunning.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-stylish-lady-with-collected-hair-dressed-gold-tshirt-neck-jewelry-is-smiling-camera-posing-beige-background_291650-2401.jpg",              imageAlt: "Emma Davis"
-            },
-            {
-              id: "3",              name: "Jessica Chen",              handle: "@jessicabeauty",              testimonial: "Love that these products are cruelty-free and natural. My sensitive skin responds so well to the skincare line.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-female-pink-dress-with-blonde-hair-poses-camera-with-open-mouth_132075-8044.jpg",              imageAlt: "Jessica Chen"
-            },
-            {
-              id: "4",              name: "Michelle Rodriguez",              handle: "@michelleglam",              testimonial: "The customer service is exceptional and the products deliver results. Worth every penny!",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/real-professional-smiling-businesswoman-looking-confident-determined-face-expression-standing-suit-white-background_1258-123234.jpg",              imageAlt: "Michelle Rodriguez"
-            },
-            {
-              id: "5",              name: "Rachel Kim",              handle: "@rachelkimbeauty",              testimonial: "I recommend Radiance to all my friends. The quality speaks for itself. This is luxury beauty done right.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-s-portrait-blondie-straight-hair_633478-1294.jpg",              imageAlt: "Rachel Kim"
-            },
-            {
-              id: "6",              name: "Victoria Lee",              handle: "@victorialee_glow",              testimonial: "Changed my entire makeup routine. The products are so easy to apply and the results are professional-grade.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-talks-via-headphones-phone_1304-5107.jpg",              imageAlt: "Victoria Lee"
-            },
-          ]}
         />
       </div>
 
-      <div id="pricing" data-section="pricing">
-        <PricingCardOne
-          title="Simple, Transparent Pricing"
-          description="Choose the collection that's right for your beauty routine"
-          tag="Collections"
-          textboxLayout="default"
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to transform your skincare routine? Discover the Radiance difference today and get exclusive welcome offers."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Shop Now", href: "#features" },
+            { text: "Get in Touch", href: "#contact" },
+          ]}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          animationType="slide-up"
-          plans={[
-            {
-              id: "1",              badge: "Starter",              badgeIcon: Sparkles,
-              price: "$49",              subtitle: "Perfect for first-time buyers",              features: [
-                "3 essential products",                "Natural ingredients",                "Free shipping",                "30-day guarantee"
-              ],
-            },
-            {
-              id: "2",              badge: "Most Popular",              badgeIcon: Heart,
-              price: "$99",              subtitle: "Complete beauty essentials",              features: [
-                "7 premium products",                "Luxury packaging",                "Priority support",                "Quarterly new releases",                "VIP access"
-              ],
-            },
-            {
-              id: "3",              badge: "Ultimate",              badgeIcon: Crown,
-              price: "$179",              subtitle: "The complete collection",              features: [
-                "All 15 products",                "Exclusive items",                "Personal beauty consultant",                "Monthly box service",                "Lifetime support"
-              ],
-            },
-          ]}
-          buttons={[{ text: "Get Started", href: "#" }]}
-          buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="socialproof" data-section="socialproof">
-        <SocialProofOne
-          title="Trusted by Beauty Experts"
-          description="Featured in leading beauty magazines and endorsed by professional makeup artists"
-          tag="Featured"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          names={[
-            "Vogue Beauty",            "Elle Magazine",            "Harper's Bazaar",            "Beauty Insider",            "Glamour",            "Marie Claire",            "Allure",            "InStyle"
-          ]}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Everything you need to know about Radiance Beauty products and services"
-          textPosition="left"
-          useInvertedBackground={false}
-          animationType="smooth"
-          showCard={true}
-          faqsAnimation="slide-up"
-          faqs={[
-            {
-              id: "1",              title: "Are your products suitable for all skin types?",              content: "Yes! Our products are formulated to be gentle and effective for all skin types, including sensitive skin. We use hypoallergenic ingredients and dermatologist test everything before release."
-            },
-            {
-              id: "2",              title: "How long does delivery usually take?",              content: "Standard shipping takes 5-7 business days. We offer free shipping on orders over $50. Express shipping options are also available for faster delivery."
-            },
-            {
-              id: "3",              title: "What's your return policy?",              content: "We offer a 30-day money-back guarantee on all products. If you're not completely satisfied, simply return the unused product for a full refund."
-            },
-            {
-              id: "4",              title: "Are your products cruelty-free?",              content: "Absolutely! All Radiance Beauty products are 100% cruelty-free and vegan. We're certified by leading animal welfare organizations."
-            },
-            {
-              id: "5",              title: "Can I mix and match products?",              content: "Of course! Our formulations are designed to work beautifully together, but you can also customize your collection based on your preferences and needs."
-            },
-            {
-              id: "6",              title: "Do you offer subscription services?",              content: "Yes! Our Ultimate collection includes monthly beauty boxes with new releases and exclusive items. You can customize frequency and pause anytime."
-            },
-          ]}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          logoText="Radiance Beauty"
-          columns={[
-            {
-              items: [
-                { label: "Shop", href: "#products" },
-                { label: "New Arrivals", href: "#products" },
-                { label: "Best Sellers", href: "#products" },
-                { label: "Collections", href: "#pricing" },
-              ],
-            },
-            {
-              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Our Story", href: "#about" },
-                { label: "Sustainability", href: "#" },
-                { label: "Careers", href: "#" },
-              ],
-            },
-            {
-              items: [
-                { label: "Help Center", href: "#faq" },
-                { label: "Contact Us", href: "#" },
-                { label: "Shipping Info", href: "#" },
-                { label: "Track Order", href: "#" },
-              ],
-            },
-            {
-              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Refund Policy", href: "#" },
-                { label: "Accessibility", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <FooterLogoReveal
+        logoText="Radiance Beauty"
+        leftLink={{ text: "Privacy Policy", href: "#" }}
+        rightLink={{ text: "Terms of Service", href: "#" }}
+      />
     </ThemeProvider>
   );
-}
+}