Update src/app/page.tsx

This commit is contained in:
2026-03-04 13:41:04 +00:00
parent 62b51f03c2
commit 14961cc81e

View File

@@ -1,229 +1,37 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import TextAbout from "@/components/sections/about/TextAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { CheckCircle, Handshake, Heart, Share2, Sparkles, Users } from "lucide-react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
export default function LandingPage() {
export default function Home() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="fluid"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Paws & Care"
<NavbarLayoutFloatingInline
brandName="Webild"
navItems={[
{ name: "About", id: "/about" },
{ name: "Pets", id: "featured-pets" },
{ name: "Adopt", id: "adopt" },
{ name: "Support", id: "support" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "/contact" },
{ name: "Our Pets", id: "/our-pets" },
{ name: "Home", id: "/" },
{ name: "Privacy Policy", id: "/privacy-policy" },
{ name: "Terms", id: "/terms" },
]}
button={{ text: "Adopt Now", href: "#featured-pets" }}
button={{ text: "Get Started", href: "https://webild.io" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Give a Loving Pet a Forever Home"
description="Meet our adorable animals waiting for their perfect family. Every adoption saves lives and opens homes to joy, companionship, and unconditional love."
tag="Adopt Today"
tagIcon={Heart}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
buttons={[
{ text: "Browse Pets", href: "#featured-pets" },
{ text: "Learn More", href: "/about" },
]}
buttonAnimation="slide-up"
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "Happy pets at our shelter" },
{ imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=1", imageAlt: "Golden Retriever in park" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=1", imageAlt: "Woman with tabby cat" },
{ imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=1", imageAlt: "German Shepherd puppy" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "Family with dog" },
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="Our Mission"
tagIcon={Heart}
title="Dedicated to Rescuing, Caring For, and Finding Forever Homes for Abandoned and Neglected Animals"
useInvertedBackground={false}
buttons={[{ text: "Support Our Mission", href: "#support" }]}
/>
</div>
<div id="featured-pets" data-section="featured-pets">
<ProductCardOne
title="Meet Our Adorable Residents"
description="Each of these wonderful animals is waiting to join your family. Click to learn more about their personalities and adoption requirements."
tag="Available Now"
tagIcon={Sparkles}
products={[
{ id: "1", name: "Max - Golden Retriever", price: "Adoption Fee: $150", imageSrc: "http://img.b2bpic.net/free-photo/what-good-boy-beautiful-golden-labrador-with-leash-sitting-with-his-owners-park_496169-2472.jpg?_wi=2", imageAlt: "Max the Golden Retriever"},
{ id: "2", name: "Luna - Tabby Cat", price: "Adoption Fee: $75", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=2", imageAlt: "Luna the Tabby Cat"},
{ id: "3", name: "Charlie - Puppy", price: "Adoption Fee: $120", imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=2", imageAlt: "Charlie the Puppy"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Pets", href: "/our-pets" }]}
/>
</div>
<div id="adopt" data-section="adopt">
<FeatureCardTwentySeven
title="How to Adopt"
description="Our adoption process is simple and transparent. We ensure every pet finds the right home where they'll be loved and cared for."
tag="Simple Steps"
tagIcon={CheckCircle}
features={[
{ id: "1", title: "Browse & Meet", description: "Explore our available pets online or visit us in person. Spend time with the animals to find your perfect match.", imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=1", imageAlt: "Browse pets"},
{ id: "2", title: "Application", description: "Complete our adoption application. We ask a few questions to ensure a good fit between you and your new pet.", imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=2", imageAlt: "Application process"},
{ id: "3", title: "Home Visit", description: "Our team may schedule a quick home visit to ensure a safe environment for your new companion.", imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=3", imageAlt: "Home visit"},
{ id: "4", title: "Welcome Home", description: "Complete the adoption paperwork and take your new family member home to start your wonderful journey together.", imageSrc: "http://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg?_wi=4", imageAlt: "Happy adoption"},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "Start Adoption", href: "#" }]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="Success Stories"
description="Hear from families whose lives have been transformed by our rescue animals. Every adoption is a love story waiting to happen."
tag="Happy Homes"
tagIcon={Heart}
testimonials={[
{ id: "1", name: "Sarah Johnson", role: "Pet Parent", company: "New York", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Sarah with her dog"},
{ id: "2", name: "Michael Chen", role: "Cat Lover", company: "California", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-looking-his-cat-embracing-wife-indoor-portrait-happy-family-posing-with-pet_197531-12215.jpg", imageAlt: "Michael with his cat"},
{ id: "3", name: "Emily Rodriguez", role: "Dog Rescuer", company: "Texas", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg", imageAlt: "Emily with her rescue dog"},
{ id: "4", name: "David & Lisa Kim", role: "Family", company: "Seattle", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg", imageAlt: "David and Lisa with their pet"},
]}
kpiItems={[
{ value: "500+", label: "Pets Adopted This Year" },
{ value: "2,000+", label: "Happy Families" },
{ value: "15+", label: "Years Saving Lives" },
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="support" data-section="support">
<MetricCardThree
title="How You Can Help"
description="There are many ways to support our mission of caring for animals in need. Join our community of heroes."
tag="Make a Difference"
tagIcon={Handshake}
metrics={[
{ id: "1", icon: Heart, title: "Donate", value: "Every $5 Helps" },
{ id: "2", icon: Users, title: "Volunteer", value: "Give Your Time" },
{ id: "3", icon: Share2, title: "Share", value: "Spread the Word" },
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Donate Now", href: "#" },
{ text: "Volunteer", href: "#" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Find answers to common questions about adoption, our facilities, and how to support our mission."
faqs={[
{ id: "1", title: "What is your adoption process?", content: "Our adoption process includes browsing available pets, completing an application, a potential home visit, and finalizing paperwork. The entire process typically takes 3-7 business days."},
{ id: "2", title: "What are the adoption fees?", content: "Adoption fees vary based on the animal's age and health status, typically ranging from $50-$200. Fees help cover vaccinations, spaying/neutering, and initial medical care."},
{ id: "3", title: "Can I volunteer at the shelter?", content: "Yes! We welcome volunteers. Visit our facility or contact us to learn about available volunteer positions in animal care, adoption support, and administrative roles."},
{ id: "4", title: "Do you accept donations?", content: "Absolutely. We accept monetary donations, pet supplies, and in-kind contributions. Every donation directly helps us care for our animals and find them loving homes."},
{ id: "5", title: "What animals do you have available?", content: "We rescue and care for dogs, cats, and small animals including rabbits and guinea pigs. Our available animals are listed on our website with full profiles and photos."},
{ id: "6", title: "Are your animals vaccinated and neutered?", content: "Yes, all adopted animals are vaccinated, spayed/neutered, and microchipped. We provide complete medical records with each adoption."},
]}
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
faqsAnimation="slide-up"
buttons={[{ text: "Contact Us", href: "/contact" }]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Help?"
tagIcon={Heart}
title="Transform a Life Today"
description="Whether you're looking to adopt, volunteer, or donate, your involvement makes a real difference in the lives of animals in need. Join our community of animal lovers and help us continue our mission."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Adopt a Pet", href: "#featured-pets" },
{ text: "Get Involved", href: "#support" },
]}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Navigate", items: [
{ label: "Home", href: "/" },
{ label: "Available Pets", href: "/our-pets" },
{ label: "Adoption", href: "#adopt" },
{ label: "About Us", href: "/about" },
],
},
{
title: "Support", items: [
{ label: "Donate", href: "#" },
{ label: "Volunteer", href: "#" },
{ label: "Sponsorship", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Adoption Policy", href: "#" },
],
},
]}
bottomLeftText="© 2025 Paws & Care Pet Shelter. All rights reserved."
bottomRightText="Saving Lives, Building Families"
/>
<h1>Welcome to Webild</h1>
<p>Your modern web solution</p>
</div>
</ThemeProvider>
);