Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Heart, Shield, Lightbulb, Award, Star } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="PawsHaven"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Pets", id: "/" },
+            { name: "Pets Library", id: "/pets" },
+            { name: "Admin", id: "/admin" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Donate Now", href: "https://example.com/donate" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="About PawsHaven"
+          description="We are passionate about rescue, rehabilitation, and rehoming animals in need. Our mission is to create a world where every pet has a loving home and receives the care they deserve."
+          tag="Our Story"
+          tagIcon={Heart}
+          tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
+          imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg?_wi=2"
+          imageAlt="PawsHaven team with animals"
+          imagePosition="right"
+          mediaAnimation="blur-reveal"
+          buttons={[
+            { text: "Support Us", href: "https://example.com/donate" },
+            { text: "Get Involved", href: "contact" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <SplitAbout
+          title="Who We Are"
+          description="PawsHaven was founded on the belief that every animal deserves a second chance. For over a decade, we have been rescuing animals from neglect, providing them with comprehensive medical care, and carefully matching them with loving families. Our dedicated team works tirelessly to ensure that each pet receives the attention, medical treatment, and socialization they need to thrive in their new homes."
+          tag="Our Foundation"
+          tagAnimation="slide-up"
+          bulletPoints={[
+            {
+              title: "Rescue & Care",              description: "We rescue animals in crisis and provide comprehensive medical care, rehabilitation, and socialization",              icon: Heart
+            },
+            {
+              title: "Expert Team",              description: "Our experienced staff includes veterinarians, behaviorists, and animal care specialists",              icon: Shield
+            },
+            {
+              title: "Perfect Matches",              description: "We use behavioral assessments to match each animal with the ideal family and lifestyle",              icon: Lightbulb
+            }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=2"
+          imageAlt="Happy family with rescued pet"
+          imagePosition="left"
+          mediaAnimation="opacity"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Learn Our Impact", href: "/about" }]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="feature" data-section="feature">
+        <FeatureCardSeven
+          title="Our Commitment to Excellence"
+          description="Every aspect of PawsHaven is designed to provide the highest quality care and support for our animals and adoptive families."
+          tag="Our Values"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: 1,
+              title: "Comprehensive Medical Care",              description: "Every animal receives complete veterinary evaluations, vaccinations, spaying/neutering, microchipping, and treatment for any medical conditions.",              imageSrc: "http://img.b2bpic.net/free-photo/young-puppy-veterinarian-going-health-checkup-professional-examining-dog-using-stethoscope_839833-8462.jpg?_wi=2",              imageAlt: "Veterinary care"
+            },
+            {
+              id: 2,
+              title: "Behavioral Assessment & Training",              description: "Our trained behaviorists evaluate each animal's temperament and provide specialized training to prepare them for home life.",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=7",              imageAlt: "Animal behavioral training"
+            },
+            {
+              id: 3,
+              title: "Lifelong Support & Guarantees",              description: "We provide ongoing support to adoptive families and offer a return policy if a match doesn't work out. We're here for the lifetime of your pet.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12690.jpg",              imageAlt: "Family support"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="blur-reveal"
+          buttons={[{ text: "Explore More", href: "/about" }]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="testimonial" data-section="testimonial">
+        <TestimonialCardThirteen
+          title="Impact Stories"
+          description="Meet the animals we've helped and the families whose lives have been forever changed."
+          tag="Success Stories"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          testimonials={[
+            {
+              id: "1",              name: "Max's Transformation",              handle: "Rescued 2020",              testimonial: "Found abandoned on the streets, Max received intensive medical treatment and training. Today, he's a certified therapy dog bringing joy to hospitals and nursing homes.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=10",              imageAlt: "Max"
+            },
+            {
+              id: "2",              name: "Luna's Journey",              handle: "Rescued 2021",              testimonial: "This sweet tabby was malnourished and frightened. After months of care and rehabilitation, Luna is now a confident, affectionate companion in a loving home.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=9",              imageAlt: "Luna"
+            },
+            {
+              id: "3",              name: "Charlie's New Life",              handle: "Rescued 2022",              testimonial: "Charlie arrived at our shelter traumatized and aggressive. Through patient rehabilitation and training, he's become the most loving family pet anyone could ask for.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=6",              imageAlt: "Charlie"
+            },
+            {
+              id: "4",              name: "Bella's Story",              handle: "Rescued 2023",              testimonial: "Found in critical condition, Bella received emergency care and surgery. Now fully recovered, she's living her best life with a devoted family who adores her.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=11",              imageAlt: "Bella"
+            }
+          ]}
+          showRating={true}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="PawsHaven"
+          copyrightText="© 2025 PawsHaven. All rights reserved. Every pet deserves a loving home."
+          columns={[
+            {
+              title: "About",              items: [
+                { label: "Our Mission", href: "/about" },
+                { label: "Our Team", href: "/about" },
+                { label: "Contact", href: "contact" }
+              ]
+            },
+            {
+              title: "Adopt",              items: [
+                { label: "Available Pets", href: "/" },
+                { label: "Pets Library", href: "/pets" },
+                { label: "Adoption Process", href: "/about" }
+              ]
+            },
+            {
+              title: "Get Involved",              items: [
+                { label: "Volunteer", href: "contact" },
+                { label: "Donate", href: "https://example.com/donate" },
+                { label: "Sponsor a Pet", href: "/" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { BarChart3, Heart } from 'lucide-react';
+
+export default function AdminPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="PawsHaven"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Pets", id: "/" },
+            { name: "Pets Library", id: "/pets" },
+            { name: "Admin", id: "/admin" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Donate Now", href: "https://example.com/donate" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Admin Dashboard"
+          description="Welcome to the PawsHaven administration panel. Manage pets, staff, adoptions, and monitor shelter operations all from one centralized dashboard."
+          tag="Management Console"
+          tagIcon={BarChart3}
+          tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
+          imageSrc="http://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg?_wi=3"
+          imageAlt="Admin dashboard interface"
+          imagePosition="right"
+          mediaAnimation="blur-reveal"
+          buttons={[
+            { text: "Manage Pets", href: "#" },
+            { text: "View Reports", href: "#" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="PawsHaven"
+          copyrightText="© 2025 PawsHaven. All rights reserved. Every pet deserves a loving home."
+          columns={[
+            {
+              title: "About",              items: [
+                { label: "Our Mission", href: "/about" },
+                { label: "Our Team", href: "/about" },
+                { label: "Contact", href: "contact" }
+              ]
+            },
+            {
+              title: "Adopt",              items: [
+                { label: "Available Pets", href: "/" },
+                { label: "Pets Library", href: "/pets" },
+                { label: "Adoption Process", href: "/about" }
+              ]
+            },
+            {
+              title: "Get Involved",              items: [
+                { label: "Volunteer", href: "contact" },
+                { label: "Donate", href: "https://example.com/donate" },
+                { label: "Sponsor a Pet", href: "/" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { BarChart3, Heart } from 'lucide-react';
+
+export default function DashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="PawsHaven"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Pets", id: "/" },
+            { name: "Pets Library", id: "/pets" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Donate Now", href: "https://example.com/donate" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Customer Dashboard"
+          description="Welcome to your personalized PawsHaven dashboard. Track your adopted pets, manage your profile, and stay connected with our community."
+          tag="Your Account"
+          tagIcon={Heart}
+          tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
+          imageSrc="http://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg?_wi=2"
+          imageAlt="Customer dashboard interface"
+          imagePosition="right"
+          mediaAnimation="blur-reveal"
+          buttons={[
+            { text: "View My Pets", href: "#" },
+            { text: "Account Settings", href: "#" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="PawsHaven"
+          copyrightText="© 2025 PawsHaven. All rights reserved. Every pet deserves a loving home."
+          columns={[
+            {
+              title: "About",              items: [
+                { label: "Our Mission", href: "/about" },
+                { label: "Our Team", href: "/about" },
+                { label: "Contact", href: "contact" }
+              ]
+            },
+            {
+              title: "Adopt",              items: [
+                { label: "Available Pets", href: "/" },
+                { label: "Pets Library", href: "/pets" },
+                { label: "Adoption Process", href: "/about" }
+              ]
+            },
+            {
+              title: "Get Involved",              items: [
+                { label: "Volunteer", href: "contact" },
+                { label: "Donate", href: "https://example.com/donate" },
+                { label: "Sponsor a Pet", href: "/" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,22 +1,16 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Mulish } from "next/font/google";
+import { DM_Sans } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
 });
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
+const manrope = Manrope({
+  variable: "--font-manrope",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
@@ -41,7 +35,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${halant.variable} ${inter.variable} ${mulish.variable} antialiased`}
+          className={`${dmSans.variable} ${manrope.variable} antialiased`}
         >
           <Tag />
           {children}
@@ -1416,4 +1410,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -30,9 +30,10 @@ export default function LandingPage() {
         <NavbarLayoutFloatingInline
           brandName="PawsHaven"
           navItems={[
-            { name: "About", id: "about" },
-            { name: "Our Pets", id: "products" },
-            { name: "Adopt", id: "pricing" },
+            { name: "About", id: "/about" },
+            { name: "Our Pets", id: "/" },
+            { name: "Pets Library", id: "/pets" },
+            { name: "Admin", id: "/admin" },
             { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Donate Now", href: "https://example.com/donate" }}
@@ -48,13 +49,13 @@ export default function LandingPage() {
           tagIcon={Heart}
           tagAnimation="slide-up"
           background={{ variant: "glowing-orb" }}
-          imageSrc="http://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg?_wi=1"
           imageAlt="Happy pets at our shelter"
           imagePosition="right"
           mediaAnimation="blur-reveal"
           buttons={[
-            { text: "Browse Pets", href: "products" },
-            { text: "Learn More", href: "about" }
+            { text: "Browse Pets", href: "/" },
+            { text: "Learn More", href: "/about" }
           ]}
           buttonAnimation="slide-up"
         />
@@ -77,7 +78,7 @@ export default function LandingPage() {
               title: "Perfect Matches",              description: "We carefully match families with pets that fit their lifestyle",              icon: Lightbulb
             }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg?_wi=1"
           imageAlt="Our caring team with animals"
           imagePosition="right"
           mediaAnimation="opacity"
@@ -97,20 +98,62 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           products={[
             {
-              id: "dog-1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg",              imageAlt: "Max the friendly Golden Retriever",              initialQuantity: 1
+              id: "dog-1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=1",              imageAlt: "Max the friendly Golden Retriever",              initialQuantity: 1
             },
             {
-              id: "cat-1",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg",              imageAlt: "Luna the sweet tabby kitten",              initialQuantity: 1
+              id: "cat-1",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=1",              imageAlt: "Luna the sweet tabby kitten",              initialQuantity: 1
             },
             {
-              id: "dog-2",              name: "Charlie - Beagle Mix",              price: "Adoption Fee: $125",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg",              imageAlt: "Charlie the energetic beagle",              initialQuantity: 1
+              id: "dog-2",              name: "Charlie - Beagle Mix",              price: "Adoption Fee: $125",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=1",              imageAlt: "Charlie the energetic beagle",              initialQuantity: 1
             }
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "View All Pets", href: "#" }]}
+          buttons={[{ text: "View All Pets", href: "/pets" }]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="pets" data-section="pets">
+        <ProductCardThree
+          title="Complete Pets Library"
+          description="Browse our entire collection of available pets. Use filters to find your perfect match by species, age, size, and personality."
+          tag="All Available Pets"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "dog-3",              name: "Bella - German Shepherd",              price: "Adoption Fee: $175",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=2",              imageAlt: "Bella the loyal German Shepherd",              initialQuantity: 1
+            },
+            {
+              id: "cat-2",              name: "Shadow - Black Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=2",              imageAlt: "Shadow the mysterious black cat",              initialQuantity: 1
+            },
+            {
+              id: "rabbit-1",              name: "Fluffy - Holland Lop Rabbit",              price: "Adoption Fee: $50",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=1",              imageAlt: "Fluffy the adorable Holland Lop rabbit",              initialQuantity: 1
+            },
+            {
+              id: "dog-4",              name: "Rocky - Boxer Mix",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=3",              imageAlt: "Rocky the energetic Boxer mix",              initialQuantity: 1
+            },
+            {
+              id: "cat-3",              name: "Whiskers - Persian",              price: "Adoption Fee: $100",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=3",              imageAlt: "Whiskers the fluffy Persian cat",              initialQuantity: 1
+            },
+            {
+              id: "dog-5",              name: "Daisy - Poodle Mix",              price: "Adoption Fee: $130",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=2",              imageAlt: "Daisy the friendly Poodle mix",              initialQuantity: 1
+            },
+            {
+              id: "hamster-1",              name: "Chip - Syrian Hamster",              price: "Adoption Fee: $25",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=2",              imageAlt: "Chip the cute Syrian hamster",              initialQuantity: 1
+            },
+            {
+              id: "dog-6",              name: "Buddy - Labrador",              price: "Adoption Fee: $160",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=4",              imageAlt: "Buddy the loyal Labrador",              initialQuantity: 1
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Back to Featured", href: "/" }]}
           buttonAnimation="slide-up"
         />
       </div>
@@ -125,15 +168,15 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              title: "Comprehensive Health Care",              description: "Every animal receives full veterinary examination, vaccinations, and medical treatment before adoption.",              imageSrc: "http://img.b2bpic.net/free-photo/young-puppy-veterinarian-going-health-checkup-professional-examining-dog-using-stethoscope_839833-8462.jpg",              imageAlt: "Professional medical care"
+              title: "Comprehensive Health Care",              description: "Every animal receives full veterinary examination, vaccinations, and medical treatment before adoption.",              imageSrc: "http://img.b2bpic.net/free-photo/young-puppy-veterinarian-going-health-checkup-professional-examining-dog-using-stethoscope_839833-8462.jpg?_wi=1",              imageAlt: "Professional medical care"
             },
             {
               id: 2,
-              title: "Safe & Comfortable Environment",              description: "Our facility provides safe, spacious accommodations with enrichment activities and socialization for all pets.",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg",              imageAlt: "Safe shelter environment"
+              title: "Safe & Comfortable Environment",              description: "Our facility provides safe, spacious accommodations with enrichment activities and socialization for all pets.",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=3",              imageAlt: "Safe shelter environment"
             },
             {
               id: 3,
-              title: "Family Support Program",              description: "We offer ongoing support, training tips, and behavioral guidance for new pet families during the adjustment period.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg",              imageAlt: "Happy family with adopted pet"
+              title: "Family Support Program",              description: "We offer ongoing support, training tips, and behavioral guidance for new pet families during the adjustment period.",              imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=1",              imageAlt: "Happy family with adopted pet"
             }
           ]}
           textboxLayout="default"
@@ -228,23 +271,23 @@ export default function LandingPage() {
           columns={[
             {
               title: "About",              items: [
-                { label: "Our Mission", href: "about" },
-                { label: "Our Team", href: "#" },
+                { label: "Our Mission", href: "/about" },
+                { label: "Our Team", href: "/about" },
                 { label: "Contact", href: "contact" }
               ]
             },
             {
               title: "Adopt",              items: [
-                { label: "Available Pets", href: "products" },
-                { label: "Adoption Process", href: "#" },
-                { label: "FAQ", href: "#" }
+                { label: "Available Pets", href: "/" },
+                { label: "Pets Library", href: "/pets" },
+                { label: "Adoption Process", href: "/about" }
               ]
             },
             {
               title: "Get Involved",              items: [
                 { label: "Volunteer", href: "contact" },
                 { label: "Donate", href: "https://example.com/donate" },
-                { label: "Sponsor a Pet", href: "pricing" }
+                { label: "Sponsor a Pet", href: "/" }
               ]
             }
           ]}
@@ -252,4 +295,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pets/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Sparkles } from 'lucide-react';
+
+export default function PetsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noise"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="PawsHaven"
+          navItems={[
+            { name: "About", id: "/about" },
+            { name: "Our Pets", id: "/" },
+            { name: "Pets Library", id: "/pets" },
+            { name: "Admin", id: "/admin" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Donate Now", href: "https://example.com/donate" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="pets" data-section="pets" style={{ paddingTop: "6rem" }}>
+        <ProductCardThree
+          title="Complete Pets Library"
+          description="Browse our entire collection of available pets. Use filters to find your perfect match by species, age, size, and personality."
+          tag="All Available Pets"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "dog-1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=5",              imageAlt: "Max the friendly Golden Retriever",              initialQuantity: 1
+            },
+            {
+              id: "cat-1",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=4",              imageAlt: "Luna the sweet tabby kitten",              initialQuantity: 1
+            },
+            {
+              id: "dog-2",              name: "Charlie - Beagle Mix",              price: "Adoption Fee: $125",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=3",              imageAlt: "Charlie the energetic beagle",              initialQuantity: 1
+            },
+            {
+              id: "dog-3",              name: "Bella - German Shepherd",              price: "Adoption Fee: $175",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=6",              imageAlt: "Bella the loyal German Shepherd",              initialQuantity: 1
+            },
+            {
+              id: "cat-2",              name: "Shadow - Black Cat",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=5",              imageAlt: "Shadow the mysterious black cat",              initialQuantity: 1
+            },
+            {
+              id: "rabbit-1",              name: "Fluffy - Holland Lop Rabbit",              price: "Adoption Fee: $50",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=4",              imageAlt: "Fluffy the adorable Holland Lop rabbit",              initialQuantity: 1
+            },
+            {
+              id: "dog-4",              name: "Rocky - Boxer Mix",              price: "Adoption Fee: $150",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=7",              imageAlt: "Rocky the energetic Boxer mix",              initialQuantity: 1
+            },
+            {
+              id: "cat-3",              name: "Whiskers - Persian",              price: "Adoption Fee: $100",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=6",              imageAlt: "Whiskers the fluffy Persian cat",              initialQuantity: 1
+            },
+            {
+              id: "dog-5",              name: "Daisy - Poodle Mix",              price: "Adoption Fee: $130",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=4",              imageAlt: "Daisy the friendly Poodle mix",              initialQuantity: 1
+            },
+            {
+              id: "hamster-1",              name: "Chip - Syrian Hamster",              price: "Adoption Fee: $25",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=5",              imageAlt: "Chip the cute Syrian hamster",              initialQuantity: 1
+            },
+            {
+              id: "dog-6",              name: "Buddy - Labrador",              price: "Adoption Fee: $160",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=8",              imageAlt: "Buddy the loyal Labrador",              initialQuantity: 1
+            },
+            {
+              id: "guinea-pig-1",              name: "Pip - Guinea Pig",              price: "Adoption Fee: $40",              imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-58914.jpg?_wi=6",              imageAlt: "Pip the adorable guinea pig",              initialQuantity: 1
+            },
+            {
+              id: "dog-7",              name: "Scout - Cocker Spaniel",              price: "Adoption Fee: $140",              imageSrc: "http://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg?_wi=9",              imageAlt: "Scout the playful Cocker Spaniel",              initialQuantity: 1
+            },
+            {
+              id: "cat-4",              name: "Mittens - Calico",              price: "Adoption Fee: $80",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=7",              imageAlt: "Mittens the colorful Calico cat",              initialQuantity: 1
+            },
+            {
+              id: "dog-8",              name: "Mocha - Dachshund",              price: "Adoption Fee: $135",              imageSrc: "http://img.b2bpic.net/free-photo/two-dogs-playing-with-flying-disc-park_342744-939.jpg?_wi=5",              imageAlt: "Mocha the charming Dachshund",              initialQuantity: 1
+            },
+            {
+              id: "cat-5",              name: "Ginger - Orange Tabby",              price: "Adoption Fee: $75",              imageSrc: "http://img.b2bpic.net/free-photo/cute-cat-with-christmas-lights_181624-46162.jpg?_wi=8",              imageAlt: "Ginger the sweet orange tabby",              initialQuantity: 1
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Back to Home", href: "/" }]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="PawsHaven"
+          copyrightText="© 2025 PawsHaven. All rights reserved. Every pet deserves a loving home."
+          columns={[
+            {
+              title: "About",              items: [
+                { label: "Our Mission", href: "/about" },
+                { label: "Our Team", href: "/about" },
+                { label: "Contact", href: "contact" }
+              ]
+            },
+            {
+              title: "Adopt",              items: [
+                { label: "Available Pets", href: "/" },
+                { label: "Pets Library", href: "/pets" },
+                { label: "Adoption Process", href: "/about" }
+              ]
+            },
+            {
+              title: "Get Involved",              items: [
+                { label: "Volunteer", href: "contact" },
+                { label: "Donate", href: "https://example.com/donate" },
+                { label: "Sponsor a Pet", href: "/" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }