2026-03-19 14:55:53 +00:00
2 changed files with 136 additions and 1 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,6 +29,8 @@ export default function LandingPage() {
        <NavbarStyleApple
          brandName="Maxna"
          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
            { name: "About", id: "about" },
            { name: "Collections", id: "features" },
            { name: "Testimonials", id: "testimonials" },
@@ -218,4 +220,4 @@ export default function LandingPage() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Sparkles } from "lucide-react";
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Maxna"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "about" },
+            { name: "Collections", id: "features" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Our Premium Floral Products"
+          description="Explore our curated selection of exquisite floral arrangements, ready-made bouquets, and custom designs. Each piece is crafted with passion and premium blooms."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Premium Selection"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          imageSrc="https://pixabay.com/get/gd08916469e8d06adee675fd60b23cf75e2e1e5f9d44064559971e5d9db12a6315546d359adea714a6171333db9a448e1a40307787de31dcc673a012f37a54c58_1280.jpg"
+          imageAlt="Premium floral products by Maxna"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Shop Now", href: "#products" },
+            { text: "Custom Order", href: "/contact" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardOne
+          title="Featured Products"
+          description="Discover our most popular floral arrangements and bouquets, carefully selected for their beauty and quality."
+          tag="Shop"
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Luxury Rose Ensemble",              price: "$185",              imageSrc: "https://pixabay.com/get/g0d8d7545bd1bcb75e410065b7c12395a108a6412748a96acabe4255a9289ad400381f6759f239f921258d24993a17ccfc26839b1e559d3b0815fc699202214e4_1280.jpg",              imageAlt: "Luxury rose arrangement",              onProductClick: () => window.open("https://example.com/product/1", "_blank")
+            },
+            {
+              id: "2",              name: "Seasonal Bloom Collection",              price: "$145",              imageSrc: "https://pixabay.com/get/g42aa4c809b734bac217107a84e7eab60722a501eed29a7ccca90449989534cba803f2a58e5de4cea8679c4f0a1bad0484f3c907b18f7c4a2a289c055f88e8fa4_1280.jpg",              imageAlt: "Seasonal bloom bouquet",              onProductClick: () => window.open("https://example.com/product/2", "_blank")
+            },
+            {
+              id: "3",              name: "Garden Fresh Mix",              price: "$125",              imageSrc: "https://pixabay.com/get/gba06cf3cec00cd27bec5198f873f48aeec98f8a9a8f9c46b7ed078eb702ab84d18d100ec48a93ab5e9d6b60616da8c1cc6ceb28f2e3d06f41c1acf60843cfba2_1280.jpg",              imageAlt: "Garden fresh flower mix",              onProductClick: () => window.open("https://example.com/product/3", "_blank")
+            },
+            {
+              id: "4",              name: "Tropical Paradise",              price: "$155",              imageSrc: "https://pixabay.com/get/gfd515623ddf78d3a9eb873830f5f3a04eb4d027da904c6ccff8eb6986362110fae85c6c031b628a44017007a0c8bd1ac_1280.jpg",              imageAlt: "Tropical paradise arrangement",              onProductClick: () => window.open("https://example.com/product/4", "_blank")
+            },
+            {
+              id: "5",              name: "Minimalist Elegance",              price: "$135",              imageSrc: "https://pixabay.com/get/g04aa2022f6ce160dd18da8c304bfb3c604b78e96b49b8dfa9659b9ec12858277a6d95e6350234b5495703b06f6024a8c41ec4eeb87b985f0fd40514265fccfe0_1280.jpg",              imageAlt: "Minimalist elegant bouquet",              onProductClick: () => window.open("https://example.com/product/5", "_blank")
+            },
+            {
+              id: "6",              name: "Premium Gift Box",              price: "$165",              imageSrc: "https://pixabay.com/get/gb686711862284d3c1ecf0a2677bff945c6da7779ff400a3061b58d06d9785e21c8a7928eef2cefd53bd9ad47432582797b5eeb6c4ab3ad7bb79254ecd7ef273b_1280.jpg",              imageAlt: "Premium gift box arrangement",              onProductClick: () => window.open("https://example.com/product/6", "_blank")
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Maxna"
+          columns={[
+            {
+              title: "Collections",              items: [
+                { label: "Wedding Florals", href: "/products" },
+                { label: "Corporate Events", href: "/products" },
+                { label: "Seasonal Collections", href: "/products" },
+                { label: "Custom Arrangements", href: "/contact" }
+              ]
+            },
+            {
+              title: "About",              items: [
+                { label: "Our Story", href: "/" },
+                { label: "Sustainability", href: "#" },
+                { label: "Team", href: "#" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Services",              items: [
+                { label: "Consultation", href: "/contact" },
+                { label: "Subscriptions", href: "/contact" },
+                { label: "Delivery", href: "#" },
+                { label: "Corporate Programs", href: "/contact" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Contact", href: "/contact" },
+                { label: "Instagram", href: "https://instagram.com" },
+                { label: "Email", href: "mailto:hello@maxna.com" },
+                { label: "Newsletter", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Maxna Flowers Studio. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}