Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -38,7 +38,7 @@ export default function LandingPage() {
         {
           name: "About",          id: "#about"},
         {
-          name: "Collections",          id: "#products"},
+          name: "Collections",          id: "/products"},
         {
           name: "Features",          id: "#features"},
         {
@@ -52,7 +52,7 @@ export default function LandingPage() {
       logoAlt="AromaLux Logo"
       brandName="AromaLux"
       button={{
-        text: "Shop Now",        href: "#products"}}
+        text: "Shop Now",        href: "/products"}}
       animateOnLoad={true}
     />
   </div>
@@ -65,7 +65,7 @@ export default function LandingPage() {
       description="Experience the art of perfumery with AromaLux. Handcrafted fragrances designed to captivate and inspire."
       buttons={[
         {
-          text: "Explore Collection",          href: "#products"},
+          text: "Explore Collection",          href: "/products"},
         {
           text: "Our Story",          href: "#about"},
       ]}
@@ -125,8 +125,8 @@ export default function LandingPage() {
   <div id="products" data-section="products">
       <ProductCardFour
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
+      textboxLayout="default"
       useInvertedBackground={false}
       products={[
         {
@@ -220,15 +220,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",          title: "What makes AromaLux fragrances unique?",          content: "Our fragrances are crafted by master perfumers using rare and ethically sourced ingredients. Each scent is a unique composition designed for longevity and complexity."},
-        {
-          id: "q2",          title: "How long do your fragrances last?",          content: "AromaLux fragrances are formulated for exceptional longevity. Depending on the concentration (Eau de Parfum vs. Extrait de Parfum) and skin type, they can last anywhere from 6 to 12 hours."},
-        {
-          id: "q3",          title: "Are your products cruelty-free?",          content: "Yes, AromaLux is committed to ethical practices. All our products are 100% cruelty-free and vegan, never tested on animals."},
-        {
-          id: "q4",          title: "Do you offer international shipping?",          content: "Yes, we offer worldwide shipping. Shipping costs and delivery times vary by destination. Please see our shipping policy for more details."},
-        {
-          id: "q5",          title: "Can I sample fragrances before buying a full bottle?",          content: "We offer discovery sets with small samples of our most popular fragrances, allowing you to experience them before committing to a full-size purchase."},
+          id: "q1",          title: "What makes AromaLux fragrances unique?",          content: "Our fragrances are crafted by master perfumers using rare and ethically sourced ingredients. Each scent is a unique composition designed for longevity and complexity."},        {
+          id: "q2",          title: "How long do your fragrances last?",          content: "AromaLux fragrances are formulated for exceptional longevity. Depending on the concentration (Eau de Parfum vs. Extrait de Parfum) and skin type, they can last anywhere from 6 to 12 hours."},        {
+          id: "q3",          title: "Are your products cruelty-free?",          content: "Yes, AromaLux is committed to ethical practices. All our products are 100% cruelty-free and vegan, never tested on animals."},        {
+          id: "q4",          title: "Do you offer international shipping?",          content: "Yes, we offer worldwide shipping. Shipping costs and delivery times vary by destination. Please see our shipping policy for more details."},        {
+          id: "q5",          title: "Can I sample fragrances before buying a full bottle?",          content: "We offer discovery sets with small samples of our most popular fragrances, allowing you to experience them before committing to a full-size purchase."}
       ]}
       title="Frequently Asked Questions"
       description="Find answers to common inquiries about our fragrances, ingredients, and ordering process."
@@ -260,11 +256,11 @@ export default function LandingPage() {
         {
           title: "Shop",          items: [
             {
-              label: "All Fragrances",              href: "#products"},
+              label: "All Fragrances",              href: "/products"},
             {
               label: "Gift Sets",              href: "#offerings"},
             {
-              label: "New Arrivals",              href: "#products"},
+              label: "New Arrivals",              href: "/products"},
             {
               label: "Discovery Sets",              href: "#offerings"},
           ],

src/app/products/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="noise"
+        cardStyle="outline"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              {
+                name: "Home",          id: "/"},
+              {
+                name: "About",          id: "#about"},
+              {
+                name: "Collections",          id: "/products"},
+              {
+                name: "Features",          id: "#features"},
+              {
+                name: "Testimonials",          id: "#testimonials"},
+              {
+                name: "FAQ",          id: "#faq"},
+              {
+                name: "Contact",          id: "#contact"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/luxury-floral-perfume-logo-template-concept_23-2148467151.jpg"
+            logoAlt="AromaLux Logo"
+            brandName="AromaLux"
+            button={{
+              text: "Shop Now",        href: "/products"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardCarousel
+            background={{
+              variant: "radial-gradient"}}
+            title="Our Exquisite Products"
+            description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
+            buttons={[
+              {
+                text: "Back to Home",          href: "/"}
+            ]}
+            buttonAnimation="slide-up"
+            mediaItems={[
+              {
+                imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=1",          imageAlt: "Product display"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="products" data-section="products">
+          <ProductCardFour
+            animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "p1",          name: "Aura Bloom",          price: "$120",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=2",          imageAlt: "Aura Bloom Perfume"},
+              {
+                id: "p2",          name: "Serenity Mist",          price: "$110",          variant: "Eau de Toilette",          imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=2",          imageAlt: "Serenity Mist Perfume"},
+              {
+                id: "p3",          name: "Ignite Elixir",          price: "$135",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=2",          imageAlt: "Ignite Elixir Perfume"},
+              {
+                id: "p4",          name: "Blooming Charm",          price: "$105",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-yellow-flower-arrangement_23-2149353084.jpg",          imageAlt: "Blooming Charm Perfume"},
+              {
+                id: "p5",          name: "Noir Allure",          price: "$140",          variant: "Extrait de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/luxury-black-perfume-bottle-with-gold-cap-dark-textured-background_84443-84117.jpg",          imageAlt: "Noir Allure Perfume"},
+              {
+                id: "p6",          name: "Solstice Glow",          price: "$125",          variant: "Eau de Parfum",          imageSrc: "http://img.b2bpic.net/free-photo/golden-smoke-black-screen_23-2148227231.jpg",          imageAlt: "Solstice Glow Perfume"},
+            ]}
+            title="Our Exquisite Collections"
+            description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Shop",          items: [
+                  {
+                    label: "All Fragrances",              href: "/products"},
+                  {
+                    label: "Gift Sets",              href: "#offerings"},
+                  {
+                    label: "New Arrivals",              href: "/products"},
+                  {
+                    label: "Discovery Sets",              href: "#offerings"},
+                ],
+              },
+              {
+                title: "Company",          items: [
+                  {
+                    label: "Our Story",              href: "#about"},
+                  {
+                    label: "Craftsmanship",              href: "#features"},
+                  {
+                    label: "Sustainability",              href: "#features"},
+                  {
+                    label: "Careers",              href: "#"},
+                ],
+              },
+              {
+                title: "Support",          items: [
+                  {
+                    label: "FAQ",              href: "#faq"},
+                  {
+                    label: "Contact Us",              href: "#contact"},
+                  {
+                    label: "Shipping & Returns",              href: "#"},
+                  {
+                    label: "Privacy Policy",              href: "#"},
+                ],
+              },
+            ]}
+            logoText="AromaLux"
+            copyrightText="© 2024 AromaLux. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}