274 lines
15 KiB
TypeScript
274 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { CheckCircle, Heart, Mail, Sparkles, TrendingUp } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Paws Haven"
|
|
navItems={[
|
|
{ name: "Adopt", id: "featured-pets" },
|
|
{ name: "About Us", id: "about" },
|
|
{ name: "How It Works", id: "adoption-process" },
|
|
{ name: "Support", id: "support" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Adoption", href: "featured-pets" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Give a Loving Home to Your Perfect Companion"
|
|
description="Meet hundreds of adorable animals waiting for their forever families. Every pet deserves a loving home, and adoption saves lives."
|
|
background={{ variant: "plain" }}
|
|
tag="Open for Adoptions"
|
|
tagIcon={Heart}
|
|
imageSrc="https://img.b2bpic.net/free-photo/full-shot-women-dog-posing_23-2148977468.jpg"
|
|
imageAlt="Happy dogs and cats together looking for their forever homes"
|
|
buttons={[
|
|
{ text: "Browse Pets", href: "featured-pets" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
avatars={[
|
|
{ src: "https://img.b2bpic.net/free-photo/outdoor-portrait-curly-european-tanned-woman-holds-happy-pet-dog-pomeranian-spitz_343596-1381.jpg", alt: "Happy adopter" },
|
|
{ src: "https://img.b2bpic.net/free-photo/cute-girl-blue-jacket-playing-with-little-dog_1157-32621.jpg", alt: "Happy adopter" },
|
|
{ src: "https://img.b2bpic.net/free-photo/front-view-woman-posing-happily-with-her-dog_23-2148567002.jpg", alt: "Happy adopter" }
|
|
]}
|
|
avatarText="Join 5,000+ happy adopters"
|
|
ariaLabel="Pet shelter hero section with adoption call to action"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-pets" data-section="featured-pets">
|
|
<ProductCardThree
|
|
title="Meet Your New Best Friend"
|
|
description="Discover our wonderful animals available for adoption. Each one is waiting for a loving home and ready to become part of your family."
|
|
tag="Available Now"
|
|
tagIcon={Sparkles}
|
|
products={[
|
|
{
|
|
id: "dog-001", name: "Max - Golden Retriever Mix", price: "Adoption Fee: $150", imageSrc: "https://img.b2bpic.net/free-photo/direct-look-into-face-duck-tolling-retriever-dog_493961-1048.jpg", imageAlt: "Golden retriever mix named Max", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "cat-001", name: "Luna - Tabby Cat", price: "Adoption Fee: $75", imageSrc: "https://img.b2bpic.net/free-photo/adorable-smiling-golden-toller-dog-sun_493961-1039.jpg", imageAlt: "Tabby cat named Luna", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "rabbit-001", name: "Snowball - Holland Lop Rabbit", price: "Adoption Fee: $50", imageSrc: "https://img.b2bpic.net/free-photo/cute-red-river-duck-dog-wearing-plaid-bandana_493961-1043.jpg", imageAlt: "Holland lop rabbit named Snowball", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[{ text: "View All Animals", href: "#" }]}
|
|
ariaLabel="Featured pets available for adoption"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Our Mission"
|
|
description={[
|
|
"At Paws Haven, we believe every animal deserves a loving, safe home. Since 2015, we've rescued and rehomed over 10,000 animals, providing medical care, behavioral support, and individualized attention to help each pet find their perfect match.", "Our dedicated team of veterinarians, behaviorists, and animal lovers works tirelessly to ensure that when you adopt from us, you're getting a healthy, happy companion prepared for their new life with you. We don't just facilitate adoptions—we create lasting bonds between families and their furry friends."
|
|
]}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#" },
|
|
{ text: "Become a Volunteer", href: "#" }
|
|
]}
|
|
showBorder={true}
|
|
useInvertedBackground="invertDefault"
|
|
ariaLabel="About Paws Haven shelter"
|
|
/>
|
|
</div>
|
|
|
|
<div id="adoption-process" data-section="adoption-process">
|
|
<FeatureCardSeven
|
|
title="Simple Adoption Process"
|
|
description="We've streamlined our adoption process to make it easy and stress-free. Here's how to bring your new pet home."
|
|
tag="4 Simple Steps"
|
|
tagIcon={CheckCircle}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Browse & Meet", description: "Explore our available animals online or visit us in person. Spend time getting to know your potential companion.", imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg", imageAlt: "Browse and meet pets at the shelter"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Complete Application", description: "Fill out a simple adoption application so we can ensure a good match between you and the animal.", imageSrc: "https://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "Complete adoption application"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Home Check & Approval", description: "Our team reviews your application and may visit your home to ensure a safe environment for your new pet.", imageSrc: "https://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "Home check approval"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Welcome Home", description: "Complete the paperwork, pay the adoption fee, and take your new family member home. We offer ongoing support!", imageSrc: "https://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "Take your pet home"
|
|
}
|
|
]}
|
|
ariaLabel="Pet adoption process steps"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Our Impact"
|
|
description="The lives we've changed and the love we've facilitated speak volumes about our commitment to animal welfare."
|
|
tag="By The Numbers"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{ id: "1", value: "10,000+", description: "Animals Rescued & Rehomed" },
|
|
{ id: "2", value: "98%", description: "Adoption Success Rate" },
|
|
{ id: "3", value: "15+", description: "Years of Service" }
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
ariaLabel="Shelter impact statistics"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Stories from Happy Families"
|
|
description="Hear from families whose lives have been changed by their adoption from Paws Haven."
|
|
tag="Testimonials"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", role: "Dog Parent", company: "Austin, TX", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/outdoor-portrait-curly-european-tanned-woman-holds-happy-pet-dog-pomeranian-spitz_343596-1381.jpg", imageAlt: "Sarah with her adopted dog"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", role: "Cat Lover", company: "Seattle, WA", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/cute-girl-blue-jacket-playing-with-little-dog_1157-32621.jpg", imageAlt: "James with his adopted cat"
|
|
},
|
|
{
|
|
id: "3", name: "The Martinez Family", role: "Pet Parents", company: "Denver, CO", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-posing-happily-with-her-dog_23-2148567002.jpg", imageAlt: "Martinez family with their adopted dog"
|
|
},
|
|
{
|
|
id: "4", name: "Eleanor Schmidt", role: "Senior Adopter", company: "Portland, OR", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-blonde-girl-walking-playing-with-beagle-dog-park_176420-6461.jpg", imageAlt: "Eleanor with her adopted companion"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "10,000+", label: "Happy Adoptions" },
|
|
{ value: "98%", label: "Success Stories" },
|
|
{ value: "24/7", label: "Ongoing Support" }
|
|
]}
|
|
ariaLabel="Adoption testimonials from happy families"
|
|
/>
|
|
</div>
|
|
|
|
<div id="support" data-section="support">
|
|
<FeatureCardSeven
|
|
title="Ways to Help"
|
|
description="Whether you're ready to adopt or want to support our mission another way, there are many ways to make a difference in animal lives."
|
|
tag="Get Involved"
|
|
tagIcon={Heart}
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Adopt", description: "Give a loving animal a forever home. Every adoption saves a life and makes room for another animal in need of rescue.", imageSrc: "https://img.b2bpic.net/free-photo/direct-look-into-face-duck-tolling-retriever-dog_493961-1048.jpg", imageAlt: "Adopt a pet"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Donate", description: "Your donation provides medical care, food, shelter, and rehabilitation services for animals in our care.", imageSrc: "https://img.b2bpic.net/free-photo/elderly-people-with-cat-pet_23-2150285636.jpg", imageAlt: "Make a donation"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Volunteer", description: "Join our dedicated team! Help with animal care, events, administration, or foster programs—all expertise welcomed.", imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg", imageAlt: "Volunteer with us"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Sponsor a Pet", description: "Sponsor an animal's care while they wait for adoption. Your support covers food, medical care, and daily needs.", imageSrc: "https://img.b2bpic.net/free-photo/adorable-smiling-golden-toller-dog-sun_493961-1039.jpg", imageAlt: "Sponsor a pet"
|
|
}
|
|
]}
|
|
ariaLabel="Ways to support the pet shelter"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get in Touch"
|
|
tagIcon={Mail}
|
|
title="Ready to Welcome a New Family Member?"
|
|
description="Visit us today to meet our amazing animals, ask questions about adoption, or learn how you can support our mission. We're here to help!"
|
|
buttons={[
|
|
{ text: "Contact Us", href: "#" },
|
|
{ text: "Visit Our Facility", href: "#" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground="noInvert"
|
|
ariaLabel="Contact Paws Haven shelter"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/woman-pink-coat-walking-dogs_1157-45723.jpg"
|
|
imageAlt="Paws Haven shelter facility"
|
|
logoText="Paws Haven"
|
|
copyrightText="© 2025 Paws Haven Animal Shelter | All animals deserve loving homes"
|
|
columns={[
|
|
{
|
|
title: "Adopt", items: [
|
|
{ label: "Available Pets", href: "featured-pets" },
|
|
{ label: "Adoption Process", href: "adoption-process" },
|
|
{ label: "Success Stories", href: "testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Donate", href: "#" },
|
|
{ label: "Volunteer", href: "#" },
|
|
{ label: "Sponsor a Pet", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "about" },
|
|
{ label: "Contact Us", href: "contact" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
ariaLabel="Paws Haven footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |