247 lines
14 KiB
TypeScript
247 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import BlogCardEleven from '@/components/sections/blog/BlogCardEleven';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Heart, PawPrint, Home, Users, Smile } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="plain"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Paw Shelter"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Animals", id: "product" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Get Involved", id: "blog" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Every Pet Deserves a Loving Home"
|
|
description="Discover your perfect companion at Paw Shelter. We rescue, rehabilitate, and rehome animals with compassion and care."
|
|
tag="Rescue & Care"
|
|
tagIcon={Heart}
|
|
buttons={[
|
|
{ text: "Browse Adoptable Pets", href: "product" },
|
|
{ text: "Support Our Mission", href: "contact" }
|
|
]}
|
|
mediaItems={[
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg", imageAlt: "Happy dog ready for adoption" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/rescue-dog-enjoying-being-pet-by-woman-shelter_23-2148682929.jpg", imageAlt: "Playful rescue cat" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-adorable-dog-shelter_23-2148682978.jpg", imageAlt: "Joyful dog playing" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-shelter-with-dog-waiting-be-adopted_23-2148682992.jpg", imageAlt: "Sanctuary with rescue animals" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/close-up-senior-woman-with-her-dog_23-2148256624.jpg", imageAlt: "Friendly dog portrait" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg", imageAlt: "Cute adoptable rabbit" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardFour
|
|
title="Meet Our Adoptable Pets"
|
|
description="Each animal in our care is waiting for their forever home. Browse our current residents and find your perfect match."
|
|
tag="Available Now"
|
|
tagIcon={PawPrint}
|
|
products={[
|
|
{
|
|
id: "1", name: "Max", variant: "Golden Retriever 2 Years Old", price: "Adoption Fee: $150", imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-woman-cuddling-her-friendly-dog_23-2147840629.jpg", imageAlt: "Max - Golden Retriever"
|
|
},
|
|
{
|
|
id: "2", name: "Whiskers", variant: "Orange Tabby Cat 1 Year Old", price: "Adoption Fee: $75", imageSrc: "https://img.b2bpic.net/free-photo/happy-cute-woman-with-dog-outdoor_624325-836.jpg", imageAlt: "Whiskers - Orange Tabby Cat"
|
|
},
|
|
{
|
|
id: "3", name: "Hoppy", variant: "Holland Lop Rabbit 6 Months Old", price: "Adoption Fee: $50", imageSrc: "https://img.b2bpic.net/free-photo/little-girl-holds-puppy-her-arms_8353-152.jpg", imageAlt: "Hoppy - Holland Lop Rabbit"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Our mission is to rescue, rehabilitate, and rehome animals in need, creating a world where every pet is safe, loved, and valued."
|
|
metrics={[
|
|
{ icon: Heart, label: "Animals Rescued", value: "2,500+" },
|
|
{ icon: Home, label: "Successful Adoptions", value: "1,800+" },
|
|
{ icon: Users, label: "Active Volunteers", value: "120+" },
|
|
{ icon: Smile, label: "Happy Families", value: "95%" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<FeatureCardNine
|
|
title="How We Transform Lives"
|
|
description="From rescue to forever home, we provide comprehensive care for every animal."
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Rescue & Assess", description: "We rescue animals in need and provide immediate medical care and behavioral assessment to ensure they're healthy and ready for adoption.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/close-up-girl-hugging-cute-dog_23-2148699657.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-posing-with-cute-rescue-dog_23-2148682981.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Rehabilitate & Care", description: "Our dedicated team provides rehabilitation, training, and socialization to help animals adjust and prepare for their new families.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-with-dog-up-adoption_23-2148682990.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/hipster-woman-smile-enjoy-playing-with-her-puppy-summer-field-vintage-tone-filter_1150-1188.jpg" }
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Find Forever Homes", description: "We carefully match each animal with the right family, ensuring lasting, loving placements that create joy for both pet and owner.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-girl-with-cute-dog-bench_23-2148699660.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/woman-petting-fluffy-black-dog-outdoors_23-2148683015.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardThirteen
|
|
title="Stories from Our Community"
|
|
description="Hear from the families who found their perfect companions at Paw Shelter."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@sarahjlove", testimonial: "Finding Max changed our lives completely. He brought so much love and joy to our family. Thank you for the wonderful care and support!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-with-curly-blonde-hair-smiling_23-2148911874.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "@mchen_home", testimonial: "The team at Paw Shelter is incredible. They helped me find the perfect match in Whiskers. Best decision ever!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-person-barbeque_23-2149271990.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "@emily_pets", testimonial: "Adopting from Paw Shelter was seamless. The staff genuinely cares about each animal and their future families.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/front-view-happy-woman-posing_23-2148493110.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "@davepets", testimonial: "Hoppy brought happiness into our home. The shelter's commitment to animal welfare is truly commendable.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-woman-home_23-2150062545.jpg"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Martinez", handle: "@jessmartinez", testimonial: "Professional, compassionate, and genuinely dedicated. Highly recommend Paw Shelter to anyone looking to adopt!", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13339.jpg"
|
|
},
|
|
{
|
|
id: "6", name: "Thomas Walker", handle: "@twalker_family", testimonial: "Our rescue journey with Paw Shelter was amazing. They made sure our new family member was the perfect fit.", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-vector/women-avatar-collection_24908-60284.jpg"
|
|
}
|
|
]}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardEleven
|
|
title="Ways to Get Involved"
|
|
description="Support our mission through adoption, volunteering, donations, or fostering. Every contribution makes a difference."
|
|
blogs={[
|
|
{
|
|
id: "1", title: "Become a Volunteer", author: "Paw Shelter Team", description: "Join our passionate team of volunteers and help care for rescue animals. From daily care to socializing, your time makes a real impact.", tags: ["Volunteer", "Community"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg"
|
|
},
|
|
{
|
|
id: "2", title: "Donate to Save Lives", author: "Paw Shelter Team", description: "Your generous donations help us provide medical care, food, shelter, and rehabilitation for animals in need.", tags: ["Donate", "Support"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/woman-playing-with-rescue-dogs-shelter_23-2148682984.jpg"
|
|
},
|
|
{
|
|
id: "3", title: "Foster a Pet", author: "Paw Shelter Team", description: "Open your home to a rescue animal and help them prepare for their forever family. Foster animals gain valuable social experience.", tags: ["Foster", "Care"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-woman-cuddling-her-friendly-dog_23-2147840629.jpg"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch with Paw Shelter"
|
|
description="Have questions about adoption, volunteering, or fostering? We'd love to hear from you. Fill out the form and we'll get back to you soon."
|
|
inputs={[
|
|
{ name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Your Phone Number", required: false },
|
|
{ name: "interest", type: "text", placeholder: "Interest (Adoption/Volunteer/Donate/Foster)", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your interest or ask your questions...", rows: 5,
|
|
required: true
|
|
}}
|
|
imageSrc="https://img.b2bpic.net/free-photo/smiling-young-woman-cuddling-her-friendly-dog_23-2147840629.jpg"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Quick Links", items: [
|
|
{ label: "Available Pets", href: "#product" },
|
|
{ label: "Adoption Process", href: "#about" },
|
|
{ label: "Contact Us", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Get Involved", items: [
|
|
{ label: "Volunteer", href: "#blog" },
|
|
{ label: "Donate", href: "https://donate.example.com" },
|
|
{ label: "Foster", href: "#blog" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Mission", href: "#about" },
|
|
{ label: "Our Story", href: "#feature" },
|
|
{ label: "Our Impact", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Email", href: "mailto:info@pawshelter.org" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Paw Shelter. All rights reserved. 501(c)(3) Non-Profit Organization."
|
|
bottomRightText="Saving lives, one paw at a time."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |