281 lines
15 KiB
TypeScript
281 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Heart, PawPrint, Dog, Cat, Smile, Target, Search, CheckCircle, Star, HelpCircle, TrendingUp, Facebook, Instagram } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Pets", id: "pets" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Adopt", id: "adopt" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="Paw Haven Shelter"
|
|
bottomLeftText="Saving Lives, Finding Homes"
|
|
bottomRightText="hello@pawhavenshelter.org"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
tag="Welcome to Paw Haven"
|
|
tagIcon={Heart}
|
|
title="Find Your Perfect Pet Companion"
|
|
description="Discover loving dogs, cats, rabbits, and more ready to join your family. Every pet deserves a second chance at happiness."
|
|
buttons={[
|
|
{ text: "Browse Available Pets", href: "#pets" },
|
|
{ text: "Learn About Adoption", href: "#adopt" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
dashboard={{
|
|
title: "Meet Our Available Pets", logoIcon: PawPrint,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/full-shot-women-dog-posing_23-2148977468.jpg", searchPlaceholder: "Search by name or breed...", buttons: [
|
|
{ text: "View All", href: "#pets" },
|
|
{ text: "Filter", href: "#" }
|
|
],
|
|
sidebarItems: [
|
|
{ icon: Dog },
|
|
{ icon: Cat },
|
|
{ icon: Heart }
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Pets Adopted", values: [245, 312, 389],
|
|
description: "Successful matches this year"
|
|
},
|
|
{
|
|
title: "Current Available", values: [42, 38, 45],
|
|
description: "Waiting for their forever homes"
|
|
},
|
|
{
|
|
title: "Success Rate", values: [98, 98, 98],
|
|
valueSuffix: "%", description: "Pet placement satisfaction"
|
|
}
|
|
],
|
|
chartTitle: "Monthly Adoptions", chartData: [
|
|
{ value: 28 },
|
|
{ value: 35 },
|
|
{ value: 42 },
|
|
{ value: 38 },
|
|
{ value: 45 }
|
|
],
|
|
listTitle: "Recently Adopted", listItems: [
|
|
{ icon: Smile, title: "Max found his family!", status: "Adopted" },
|
|
{ icon: Smile, title: "Bella is home", status: "Adopted" },
|
|
{ icon: Smile, title: "Charlie joined the Smiths", status: "Adopted" }
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Mission"
|
|
tagIcon={Target}
|
|
title="Every pet deserves love, care, and a forever home where they can thrive"
|
|
buttons={[{ text: "Learn Our Story", href: "#" }]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pets" data-section="pets">
|
|
<ProductCardTwo
|
|
title="Meet Our Available Pets"
|
|
description="Each of our animals is waiting for their perfect match. Browse our current residents and find your new best friend."
|
|
tag="Ready for Adoption"
|
|
tagIcon={Search}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Golden Retriever", name: "Max", price: "Adoption Fee: $150", rating: 5,
|
|
reviewCount: "Perfect Match", imageSrc: "https://img.b2bpic.net/free-photo/adorable-pitbull-dogs-looking-up_23-2149131461.jpg", imageAlt: "Golden Retriever Max"
|
|
},
|
|
{
|
|
id: "2", brand: "Persian Cat", name: "Luna", price: "Adoption Fee: $75", rating: 5,
|
|
reviewCount: "Affectionate", imageSrc: "https://img.b2bpic.net/free-photo/view-cats-dogs-showing-friendship_23-2151806316.jpg", imageAlt: "Persian Cat Luna"
|
|
},
|
|
{
|
|
id: "3", brand: "Holland Lop", name: "Snowball", price: "Adoption Fee: $50", rating: 5,
|
|
reviewCount: "Gentle", imageSrc: "https://img.b2bpic.net/free-photo/view-cats-dogs-being-friends_23-2151806350.jpg", imageAlt: "Holland Lop Rabbit Snowball"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[{ text: "View All Available", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureProcessSteps
|
|
tag="Simple Process"
|
|
tagIcon={CheckCircle}
|
|
title="How to Adopt Your New Companion"
|
|
description="We've designed our adoption process to be simple, transparent, and focused on finding the perfect match between pets and families."
|
|
steps={[
|
|
{
|
|
number: "01", title: "Browse & Connect", tag: "Step 1", description: "Explore our available pets online or visit us in person to meet the animals. Spend time getting to know them and their personalities."
|
|
},
|
|
{
|
|
number: "02", title: "Application & Interview", tag: "Step 2", description: "Complete our adoption application and speak with our team about your home and lifestyle to ensure a great match."
|
|
},
|
|
{
|
|
number: "03", title: "Meet & Greet", tag: "Step 3", description: "Have a final meeting with your new pet to confirm the connection. We want you to feel confident and excited about adoption."
|
|
},
|
|
{
|
|
number: "04", title: "Take Them Home", tag: "Step 4", description: "Complete the paperwork, pay the adoption fee, and welcome your new family member into their forever home!"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Start Application", href: "#contact" }]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
tag="Success Stories"
|
|
tagIcon={Star}
|
|
title="Happy Adoptions"
|
|
description="See how our pets have transformed lives and found their forever homes with loving families."
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Max Changed Our Lives Forever", quote: "When we adopted Max, we didn't expect how much joy a dog could bring to our family. He's not just a pet—he's part of us now. Paw Haven Shelter made the entire process so smooth and caring.", name: "The Johnson Family", role: "Dog Owners", imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-girl-lying-with-beagle-dog-grass-park_176420-6435.jpg", imageAlt: "Happy family with dog"
|
|
},
|
|
{
|
|
id: "2", title: "Luna Brought Us Together", quote: "We were hesitant about adopting, but the team at Paw Haven convinced us it was right. Luna has been the best decision we ever made. She's brought so much love into our home.", name: "Sarah & Mike", role: "Cat Owners", imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-guys-playing-with-their-dog-backyard-grass-cheerful-old-dog_158595-6547.jpg", imageAlt: "Couple with cat"
|
|
},
|
|
{
|
|
id: "3", title: "A Best Friend Like No Other", quote: "Our daughter has grown so much having a pet. The shelter staff really helped us find a dog that's perfect for kids. We can't imagine life without our furry friend now.", name: "The Martinez Household", role: "Pet-Loving Family", imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-girl-lying-with-beagle-dog-grass-park_176420-6434.jpg", imageAlt: "Child playing with puppy"
|
|
},
|
|
{
|
|
id: "4", title: "Senior Pets Deserve Love Too", quote: "We decided to adopt an older dog and we're so glad we did. The shelter helped us understand his needs, and now he's thriving with us. Age is just a number—love is what matters.", name: "Robert Chen", role: "Senior Dog Advocate", imageSrc: "https://img.b2bpic.net/free-photo/young-hispanic-couple-doing-laundry-with-dogs-doing-heart-shape-with-hand-fingers-smiling-looking-through-sign_839833-10678.jpg", imageAlt: "Senior person with older dog"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
tag="Questions?"
|
|
tagIcon={HelpCircle}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about pet adoption, our shelter, and what to expect."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's included in the adoption fee?", content: "Our adoption fees include spaying/neutering, microchipping, current vaccinations, and a health check by our veterinarian. Your pet will be fully prepared for their new home!"
|
|
},
|
|
{
|
|
id: "2", title: "Can I return a pet if it doesn't work out?", content: "Yes, we have a 30-day trial period. If the adoption doesn't work out for any reason, you can return the pet without judgment. We just want to make sure the match is right."
|
|
},
|
|
{
|
|
id: "3", title: "How do I know which pet is right for my family?", content: "Our staff will help guide you through the selection process, considering your lifestyle, living space, and family dynamics. We want to ensure a perfect match."
|
|
},
|
|
{
|
|
id: "4", title: "Do you have pets with special needs?", content: "Yes! We have many wonderful pets with special needs who deserve loving homes. We provide extra support and information to help you care for them."
|
|
},
|
|
{
|
|
id: "5", title: "Can I visit the shelter to meet pets in person?", content: "Absolutely! We're open Tuesday through Sunday, 10 AM to 5 PM. Come meet our animals and experience their personalities firsthand."
|
|
},
|
|
{
|
|
id: "6", title: "What if I want to help but can't adopt?", content: "We'd love your support! You can volunteer, donate, or sponsor a pet's care. Every bit helps us rescue and care for animals in need."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
tag="Our Impact"
|
|
tagIcon={TrendingUp}
|
|
title="Making a Difference"
|
|
description="These numbers represent real lives changed and animals given a second chance."
|
|
metrics={[
|
|
{
|
|
id: "1", value: "1,247", description: "Pets Rescued This Year"
|
|
},
|
|
{
|
|
id: "2", value: "98%", description: "Successful Adoptions"
|
|
},
|
|
{
|
|
id: "3", value: "450+", description: "Active Volunteers"
|
|
},
|
|
{
|
|
id: "4", value: "15", description: "Years of Service"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Involved"
|
|
tagIcon={Heart}
|
|
title="Ready to Find Your Perfect Pet?"
|
|
description="Start your adoption journey today or learn how you can support our mission to rescue and care for animals in need."
|
|
buttons={[
|
|
{ text: "Start Adoption Process", href: "#" },
|
|
{ text: "Become a Volunteer", href: "#" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Paw Haven Shelter"
|
|
copyrightText="© 2025 Paw Haven Shelter | Saving Lives, Finding Homes"
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/pawhavenshelter", ariaLabel: "Follow us on Facebook"
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/pawhavenshelter", ariaLabel: "Follow us on Instagram"
|
|
},
|
|
{
|
|
icon: Heart,
|
|
href: "https://donate.pawhavenshelter.org", ariaLabel: "Support our mission"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |