Files
55be1eaa-4497-4317-8adf-e11…/src/app/page.tsx
2026-03-06 10:59:44 +00:00

259 lines
15 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import MediaAbout from "@/components/sections/about/MediaAbout";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Heart, Circle, Sparkles, Trophy, Users, Zap } from "lucide-react";
export default function PawsHomeLanding() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="medium"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="PawsHome"
navItems={[
{ name: "About", id: "about" },
{ name: "Available Pets", id: "pets" },
{ name: "Our Impact", id: "metrics" },
{ name: "Team", id: "team" },
{ name: "Process", id: "process" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Adopt Today", href: "#pets" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Find Your Perfect Companion"
description="Welcome to PawsHome, where every animal deserves a loving home. Browse our adoptable pets and join our mission to give shelter animals the second chance they deserve."
tag="Open for Adoptions"
tagIcon={Heart}
tagAnimation="slide-up"
background={{ variant: "plain" }}
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-dog-posing-front-yellow-wall_23-2148366923.jpg", imageAlt: "Happy dog running in sunshine"},
{
imageSrc: "http://img.b2bpic.net/free-photo/girl-plays-with-domestic-rabbit-street-pet-concept_169016-63663.jpg", imageAlt: "Playful rabbit in nature"},
{
imageSrc: "http://img.b2bpic.net/free-photo/couple-dog-warming-up-with-heater_23-2149339516.jpg", imageAlt: "Family with adopted puppy"},
{
imageSrc: "http://img.b2bpic.net/free-photo/white-gray-cat-couch-woman-stroking-cat-fluffy-cat_1157-46555.jpg", imageAlt: "Kitten playing with toy"},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-grumpy-striped-cat-sunlight-with-blurry-background_181624-45985.jpg", imageAlt: "Cute cat by window"},
{
imageSrc: "http://img.b2bpic.net/free-photo/couple-smiling-sitting-grass-with-french-bulldog-park_176420-3862.jpg", imageAlt: "Happy pets playing together"},
{
imageSrc: "http://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg", imageAlt: "Shelter dogs in care"},
{
imageSrc: "http://img.b2bpic.net/free-photo/farmer-his-daugher-spending-time-farm_259150-57595.jpg", imageAlt: "Various adoptable animals"},
]}
carouselPosition="right"
buttons={[
{ text: "Browse Pets", href: "#pets" },
{ text: "Learn More", href: "#about" },
]}
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Our Mission"
description="PawsHome is dedicated to rescuing, rehabilitating, and rehoming animals in need. Since 2010, we've found loving homes for over 5,000 pets. Our compassionate team works tirelessly to ensure every animal receives the care, attention, and love they deserve while waiting for their forever families."
tag="About Us"
tagIcon={Circle}
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/happy-couple-with-horse_23-2147562470.jpg"
imageAlt="PawsHome team caring for animals"
buttons={[{ text: "Our Story", href: "#" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="pets" data-section="pets">
<ProductCardTwo
title="Available Pets"
description="Meet the wonderful animals waiting for their forever homes. Each pet has been health-checked and is ready for adoption."
tag="Find Your Match"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1", brand: "PawsHome", name: "Max - Golden Retriever", price: "Adoption Fee: $150", rating: 5,
reviewCount: "Family-Friendly", imageSrc: "http://img.b2bpic.net/free-photo/cute-golden-retriever-dog_1204-384.jpg", imageAlt: "Golden Retriever Max"},
{
id: "2", brand: "PawsHome", name: "Whiskers - Orange Tabby", price: "Adoption Fee: $100", rating: 5,
reviewCount: "Indoor Cat", imageSrc: "http://img.b2bpic.net/free-photo/dog-house-with-adopt-me-sign-outside_23-2148682995.jpg", imageAlt: "Orange Tabby Whiskers"},
{
id: "3", brand: "PawsHome", name: "Shadow - Rescue Mix", price: "Adoption Fee: $120", rating: 5,
reviewCount: "Energetic", imageSrc: "http://img.b2bpic.net/free-photo/black-dog-park-with-blurred-background_181624-5606.jpg", imageAlt: "Black Mixed Breed Shadow"},
]}
buttons={[{ text: "View All Pets", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Our Impact"
description="Celebrating the lives we've changed and the connections we've made."
tag="Success Stories"
tagIcon={Trophy}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{
id: "1", value: "5,000+", title: "Pets Adopted", description: "Loving homes found since 2010", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-couple-playing-with-dog_23-2148540210.jpg", imageAlt: "Happy family with adopted dog"},
{
id: "2", value: "150+", title: "Animals Rescued", description: "Currently in our care waiting", imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-picnic-with-her-dog_23-2148199142.jpg", imageAlt: "Dogs in shelter care"},
]}
buttons={[{ text: "Read Success Stories", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Team"
description="Dedicated professionals committed to animal welfare and finding the perfect matches."
tag="Our People"
tagIcon={Users}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
members={[
{
id: "1", name: "Sarah Johnson", role: "Shelter Director", description: "20+ years of experience in animal rescue and adoption services.", imageSrc: "http://img.b2bpic.net/free-photo/young-lady-checked-shirt-standing-with-crossed-arms-looking-merry_176474-56077.jpg", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", role: "Veterinary Care Lead", description: "Licensed veterinarian ensuring all animals receive medical attention.", imageSrc: "http://img.b2bpic.net/free-photo/woman-nurse-medical-uniform-with-stethoscope-with-hand-chin-smiling-confident-standing-isolated-white_141793-19528.jpg", imageAlt: "Michael Chen"},
{
id: "3", name: "Emily Rodriguez", role: "Adoption Coordinator", description: "Passionate about matching pets with their perfect families.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinarian-checking-dog_23-2149143865.jpg", imageAlt: "Emily Rodriguez"},
{
id: "4", name: "David Park", role: "Volunteer Manager", description: "Organizes community support and volunteer programs.", imageSrc: "http://img.b2bpic.net/free-photo/girl-trying-examine-her-cat_329181-14482.jpg", imageAlt: "David Park"},
]}
buttons={[{ text: "Join Our Team", href: "#contact" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
testimonial="PawsHome made our adoption experience so smooth and joyful. Max has brought so much happiness to our family. The entire team was supportive and truly cared about making sure he was going to the right home."
rating={5}
author="The Thompson Family"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/indoor-shot-optimistic-curly-haired-pretty-woman-keeps-hand-chin-looks-directly-being-good-mood-stands-satisfied-delighted-wears-casual-sweatshirt-poses-indoor_273609-42598.jpg", alt: "Thompson Family member"},
{
src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", alt: "Thompson Family member"},
{
src: "http://img.b2bpic.net/free-photo/woman-red-dress-model-posing-outside_1303-10118.jpg", alt: "Thompson Family member"},
{
src: "http://img.b2bpic.net/free-photo/happy-man-with-earphones-smiling-camera_23-2148322120.jpg", alt: "Thompson Family member"},
{
src: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-up-thinking-positive-smiling-broadly_141793-55034.jpg", alt: "Thompson Family member"},
{
src: "http://img.b2bpic.net/free-photo/close-up-man-with-bright-smile_23-2148563438.jpg", alt: "Thompson Family member"},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="process" data-section="process">
<FeatureCardSix
title="The Adoption Process"
description="Simple, transparent steps to find your new family member."
tag="How It Works"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: 1,
title: "Browse & Connect", description: "Explore our available pets and learn about their personalities, health status, and care needs.", imageSrc: "http://img.b2bpic.net/free-photo/trainer-giving-treats-dogs-session_23-2149448202.jpg", imageAlt: "Browse available pets"},
{
id: 2,
title: "Application Review", description: "Submit your adoption application and our team will review to ensure a great match.", imageSrc: "http://img.b2bpic.net/free-photo/trainer-giving-treats-dogs-session_23-2149448202.jpg", imageAlt: "Application process"},
{
id: 3,
title: "Meet & Greet", description: "Schedule a time to meet your potential new pet and spend time together.", imageSrc: "http://img.b2bpic.net/free-photo/trainer-giving-treats-dogs-session_23-2149448202.jpg", imageAlt: "Meet and greet"},
{
id: 4,
title: "Welcome Home", description: "Complete the adoption, receive care guidelines, and start your journey together.", imageSrc: "http://img.b2bpic.net/free-photo/trainer-giving-treats-dogs-session_23-2149448202.jpg", imageAlt: "Welcome home"},
]}
buttons={[{ text: "Start Application", href: "#contact" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Get in Touch"
description="Have questions about adoption, volunteering, or donations? Our team is here to help. Reach out and let's find your perfect match!"
inputs={[
{
name: "name", type: "text", placeholder: "Your Name", required: true,
},
{
name: "email", type: "email", placeholder: "Your Email", required: true,
},
]}
textarea={{
name: "message", placeholder: "Tell us how we can help or which pet interests you...", rows: 5,
required: true,
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/vertical-portrait-smiling-handsome-man-with-his-dog-drinks-coffee-petfriendly-cafe-city-touches-golden-retriever_1258-314266.jpg"
imageAlt="Dog waiting for adoption at PawsHome"
mediaAnimation="slide-up"
mediaPosition="right"
buttonText="Send Message"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="PawsHome"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}