Add src/app/pets/page.tsx

This commit is contained in:
2026-03-03 14:01:56 +00:00
parent d8c994adfa
commit 17839ee353

150
src/app/pets/page.tsx Normal file
View File

@@ -0,0 +1,150 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Heart, Mail, Sparkles, MapPin, Calendar, Users } from 'lucide-react';
export default function PetsPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="noiseDiagonalGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Paws Haven"
navItems={[
{ name: "About", id: "about" },
{ name: "Pets", id: "pets" },
{ name: "Adopt", id: "adopt" },
{ name: "Get Involved", id: "involved" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="pets-listing" data-section="pets-listing">
<ProductCardOne
title="All Available Pets"
description="Browse our complete selection of wonderful animals waiting for their forever homes. Each pet has been rescued, rehabilitated, and is ready to bring joy to your family."
tag="Find Your Match"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
products={[
{
id: "1", name: "Max", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/mother-her-daughter-playing-with-dog-family-autumn-park-pet-domestic-animal-lifestyle-concept_1157-42385.jpg", imageAlt: "Max, friendly golden retriever puppy"
},
{
id: "2", name: "Whiskers", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tabby-cat_23-2148045837.jpg", imageAlt: "Whiskers, tabby cat ready for adoption"
},
{
id: "3", name: "Bella", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/closeup-cute-yorkshire-terrier-field-covered-greenery-sunlight_181624-47735.jpg", imageAlt: "Bella, small terrier mix with big personality"
},
{
id: "4", name: "Charlie", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/young-man-his-dog-sitting-grass-near-lake_181624-13093.jpg", imageAlt: "Charlie, energetic black labrador"
},
{
id: "5", name: "Luna", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/fluffy-cat-sitting-blue-background_23-2151174141.jpg", imageAlt: "Luna, beautiful long-haired cat"
},
{
id: "6", name: "Rocky", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/portrait-german-shepherd-dog-outdoor_23-2149024410.jpg", imageAlt: "Rocky, loyal German shepherd"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
carouselMode="buttons"
/>
</div>
<div id="pet-details" data-section="pet-details">
<FeatureCardMedia
title="Pet Details & Information"
description="Learn more about each animal's personality, background, and special needs. Our detailed profiles help you find the perfect match for your lifestyle."
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "1", title: "Age & Background", description: "Detailed information about each pet's age, breed mix, rescue history, and any special circumstances of their arrival at Paws Haven.", tag: "Biography", imageSrc: "http://img.b2bpic.net/free-photo/happy-dog-playing-grass-field_23-2148700435.jpg"
},
{
id: "2", title: "Personality Profile", description: "Discover each pet's unique personality traits, energy level, social habits, and behavioral characteristics to ensure the best family match.", tag: "Character", imageSrc: "http://img.b2bpic.net/free-photo/adorable-dog-playing-grass-field_23-2149286029.jpg"
},
{
id: "3", title: "Health & Medical", description: "Complete health records, vaccinations, spay/neuter status, and any ongoing medical needs or special health considerations for your new pet.", tag: "Wellness", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-kitten-bed_23-2148703526.jpg"
},
{
id: "4", title: "Adoption Requirements", description: "Specific requirements and recommendations for each pet's new home, including space needs, family composition, and training support available.", tag: "Guidelines", imageSrc: "http://img.b2bpic.net/free-photo/happy-child-with-dog-outdoor_23-2148695272.jpg"
},
{
id: "5", title: "Photos & Videos", description: "View gallery of each pet's photos and video clips to get to know them better before your visit or adoption appointment.", tag: "Gallery", imageSrc: "http://img.b2bpic.net/free-photo/cute-kitten-playing-with-toys_23-2148700289.jpg"
}
]}
animationType="slide-up"
carouselMode="buttons"
/>
</div>
<div id="adoption-cta" data-section="adoption-cta">
<ContactSplit
tag="Ready to Adopt?"
title="Start Your Adoption Journey"
description="Take the first step toward bringing a new furry friend into your family. Sign up to schedule a visit or get updates on specific pets you're interested in."
tagIcon={Heart}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/happy-family-with-dog-home_23-2148693656.jpg"
imageAlt="Happy family with their adopted dog"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="your@email.com"
buttonText="Express Interest"
termsText="We'll reach out within 24 hours to discuss your adoption preferences and schedule a time to meet your potential new family member."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "About", items: [
{ label: "Our Mission", href: "about" },
{ label: "Our Team", href: "#" },
{ label: "Meet Our Pets", href: "pets" }
]
},
{
title: "Get Involved", items: [
{ label: "Adopt a Pet", href: "adopt" },
{ label: "Volunteer", href: "involved" },
{ label: "Donate", href: "#" }
]
},
{
title: "Resources", items: [
{ label: "Pet Care Tips", href: "#" },
{ label: "FAQ", href: "faq" },
{ label: "Contact Us", href: "contact" }
]
}
]}
copyrightText="© 2025 Paws Haven. All animals deserve love. Registered nonprofit 501(c)(3)."
/>
</div>
</ThemeProvider>
);
}