bender/07bbbcf9-62e7-4ce4-ae41-cf1365296c5d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-02-13 14:04:56 +00:00
parent 62665da790
commit d27777c761
1 changed files with 57 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/app/page.tsx
View File

@@ -3,17 +3,18 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Mail } from "lucide-react";
export default function LandingPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -30,13 +31,7 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Paw Paradise"
navItems={[
{ name: "Adopt", id: "adopt" },
{ name: "About Us", id: "about" },
{ name: "Help", id: "features" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
navItems={navItems}
/>
</div>
<div id="hero" data-section="hero">
@@ -45,36 +40,44 @@ export default function LandingPage() {
description="Giving Every Paw a Second Chance at a Loving Home."
buttons={[
{ text: "Adopt a Friend", href: "#adopt" },
{ text: "Support Our Mission", href: "#contact" },
{ text: "Support Our Mission", href: "/contact" },
]}
buttonAnimation="bounce-effect"
buttonAnimation="slide-up"
imageSrc="https://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg"
imageAlt="Happy dog and cat in a loving home environment"
showDimOverlay={false}
ariaLabel="Hero section for Paw Paradise pet shelter"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "About " },
<div id="features" data-section="features">
<FeatureCardTwelve
title="How You Can Help"
description="There are many ways to support Paw Paradise and make a difference in an animal's life."
features={[
{
type: "image", src: "https://img.b2bpic.net/free-photo/pretty-young-woman-petting-her-dog_23-2148740455.jpg", alt: "Dogs playing in a shelter"},
{ type: "text", content: " Our Mission at Paw Paradise" },
id: "volunteer", label: "Volunteer", title: "Join Our Dedicated Volunteer Team", items: [
"Assist with daily animal care", "Help with adoption events", "Spend time socializing with pets", "Support administrative tasks"
],
buttons: [{ text: "Become a Volunteer", href: "/contact" }],
},
{
id: "donate", label: "Donate", title: "Your Contribution Makes a Difference", items: [
"Provide food and medical supplies", "Support facility maintenance", "Fund special care for animals", "Enable outreach and education programs"
],
buttons: [{ text: "Make a Donation", href: "#" }],
},
{
id: "foster", label: "Foster", title: "Open Your Home to a Pet in Need", items: [
"Provide temporary care for animals", "Help pets decompress outside the shelter", "Assist with behavior training", "Prepare pets for permanent adoption"
],
buttons: [{ text: "Learn About Fostering", href: "/contact" }],
},
]}
buttons={[
{ text: "Learn More", href: "#" },
{ text: "Meet Our Team", href: "#team" },
]}
buttonAnimation="bounce-effect"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="About Paw Paradise pet shelter"
ariaLabel="Ways to help Paw Paradise"
className="py-12 md:py-20"
containerClassName="max-w-screen-lg mx-auto"
headingClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
buttonClassName="px-6 py-3 rounded-full text-lg"
buttonTextClassName="font-medium"
/>
</div>
<div id="adopt" data-section="adopt">
@@ -85,19 +88,24 @@ export default function LandingPage() {
products={[
{
id: "dog1", brand: "Golden Retriever Mix", name: "Buddy", price: "Adoptable", rating: 5,
reviewCount: "150+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "A friendly golden retriever mix dog"},
reviewCount: "150+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "A friendly golden retriever mix dog"
},
{
id: "cat1", brand: "Domestic Shorthair", name: "Luna", price: "Adoptable", rating: 4,
reviewCount: "120+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "A playful domestic shorthair cat"},
reviewCount: "120+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg", imageAlt: "A playful domestic shorthair cat"
},
{
id: "rabbit1", brand: "Dutch Rabbit", name: "Hopper", price: "Adoptable", rating: 5,
reviewCount: "30+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/dog-sitting-near-girl_8353-5282.jpg", imageAlt: "A cute Dutch rabbit"},
reviewCount: "30+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/dog-sitting-near-girl_8353-5282.jpg", imageAlt: "A cute Dutch rabbit"
},
{
id: "bird1", brand: "Cockatiel", name: "Sky", price: "Adoptable", rating: 4,
reviewCount: "20+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/lots-cute-rescue-dogs-shelter-waiting-be-adopted_23-2148682950.jpg", imageAlt: "A colorful cockatiel bird"},
reviewCount: "20+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/lots-cute-rescue-dogs-shelter-waiting-be-adopted_23-2148682950.jpg", imageAlt: "A colorful cockatiel bird"
},
{
id: "hamster1", brand: "Syrian Hamster", name: "Squeaky", price: "Adoptable", rating: 5,
reviewCount: "10+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg", imageAlt: "A tiny Syrian hamster"},
reviewCount: "10+ Happy Homes", imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg", imageAlt: "A tiny Syrian hamster"
},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -105,49 +113,6 @@ export default function LandingPage() {
useInvertedBackground={false}
ariaLabel="Available pets for adoption"
className="py-12 md:py-20"
cardClassName="bg-card rounded-soft overflow-hidden group-hover:scale-105 transition-transform duration-300"
imageClassName="aspect-video object-cover"
cardBrandClassName="text-foreground/70 text-sm mt-3"
cardNameClassName="text-foreground text-xl font-medium"
cardPriceClassName="text-primary-cta text-2xl font-semibold"
cardRatingClassName="flex items-center gap-1 text-accent"
textBoxTitleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
textBoxDescriptionClassName="text-lg text-foreground/80 mt-4"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
title="How You Can Help"
description="There are many ways to support Paw Paradise and make a difference in an animal's life."
features={[
{
id: "volunteer", label: "Volunteer", title: "Join Our Dedicated Volunteer Team", items: [
"Assist with daily animal care", "Help with adoption events", "Spend time socializing with pets", "Support administrative tasks"],
buttons: [{ text: "Become a Volunteer", href: "#contact" }],
},
{
id: "donate", label: "Donate", title: "Your Contribution Makes a Difference", items: [
"Provide food and medical supplies", "Support facility maintenance", "Fund special care for animals", "Enable outreach and education programs"],
buttons: [{ text: "Make a Donation", href: "#" }],
},
{
id: "foster", label: "Foster", title: "Open Your Home to a Pet in Need", items: [
"Provide temporary care for animals", "Help pets decompress outside the shelter", "Assist with behavior training", "Prepare pets for permanent adoption"],
buttons: [{ text: "Learn About Fostering", href: "#contact" }],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Ways to help Paw Paradise"
className="py-12 md:py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
textBoxDescriptionClassName="text-lg text-foreground/80 mt-4"
cardClassName="bg-card rounded-soft p-6 md:p-15"
labelClassName="text-primary-cta text-5xl md:text-6xl font-extrabold"
cardTitleClassName="text-foreground text-3xl font-semibold mt-4"
itemTextClassName="text-foreground/90 leading-relaxed"
cardButtonClassName="mt-6 px-6 py-3 rounded-full text-lg"
/>
</div>
<div id="testimonials" data-section="testimonials">
@@ -157,16 +122,20 @@ export default function LandingPage() {
testimonials={[
{
id: "1", name: "Sarah Johnson", role: "New Pet Parent", company: "Paw Paradise Adopter", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-woman-shopping-clothes_23-2149187303.jpg", imageAlt: "Portrait of Sarah Johnson"},
imageSrc: "https://img.b2bpic.net/free-photo/young-woman-shopping-clothes_23-2149187303.jpg", imageAlt: "Portrait of Sarah Johnson"
},
{
id: "2", name: "Michael Chen", role: "Volunteer", company: "Paw Paradise", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg", imageAlt: "Portrait of Michael Chen"},
imageSrc: "https://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg", imageAlt: "Portrait of Michael Chen"
},
{
id: "3", name: "Emily Rodriguez", role: "Foster Parent", company: "Paw Paradise Community", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Portrait of Emily Rodriguez"},
imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Portrait of Emily Rodriguez"
},
{
id: "4", name: "David Kim", role: "Donor", company: "Animal Welfare Advocate", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-happy-after-shopping_23-2148660676.jpg", imageAlt: "Portrait of David Kim"},
imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-happy-after-shopping_23-2148660676.jpg", imageAlt: "Portrait of David Kim"
},
]}
kpiItems={[
{ value: "500+", label: "Pets Adopted" },
@@ -178,92 +147,6 @@ export default function LandingPage() {
useInvertedBackground={false}
ariaLabel="Testimonials from happy adopters and supporters"
className="py-12 md:py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
textBoxDescriptionClassName="text-lg text-foreground/80 mt-4"
cardClassName="bg-card rounded-soft overflow-hidden group-hover:scale-105 transition-transform duration-300"
overlayClassName="p-6 bg-gradient-to-t from-black/60 to-transparent absolute inset-0 flex flex-col justify-end text-white"
nameClassName="text-xl font-medium"
roleClassName="text-sm text-white/70"
companyClassName="text-xs text-white/50"
ratingClassName="flex items-center gap-1 text-yellow-400 text-lg"
/>
</div>
<div id="team" data-section="team">
<TeamCardSix
title="Meet Our Dedicated Team"
description="The compassionate individuals who make Paw Paradise a loving home for every animal."
members={[
{
id: "1", name: "Dr. Alex Chen", role: "Veterinarian", imageSrc: "https://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg", imageAlt: "Portrait of Dr. Alex Chen"},
{
id: "2", name: "Maria Garcia", role: "Operations Manager", imageSrc: "https://img.b2bpic.net/free-photo/close-up-beautiful-joyful-african-student-woman-with-dark-wavy-hair-green-cardigan-sitting-cafe-drinking-cup-coffee-smiling-camera-woman-waiting-her-boyfriend-after-university_176420-12329.jpg", imageAlt: "Portrait of Maria Garcia"},
]}
gridVariant="uniform-all-items-equal"
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Paw Paradise Team"
className="py-12 md:py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
textBoxDescriptionClassName="text-lg text-foreground/80 mt-4"
cardClassName="rounded-soft overflow-hidden bg-card"
nameClassName="text-2xl font-semibold"
roleClassName="text-base text-foreground/70"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
faqs={[
{
id: "1", title: "What are your adoption requirements?", content:
"We require potential adopters to fill out an application, undergo a home visit, and have a meet-and-greet with the pet. All applicants must be 18 years or older and have a valid ID. Our goal is to ensure a safe and loving environment for every animal."},
{
id: "2", title: "Can I visit the shelter before adopting?", content:
"Yes, we encourage visits! Our shelter is open for public visits during our operating hours. You can meet our animals, speak with our staff, and learn more about our adoption process. Appointments are recommended but not required."},
{
id: "3", title: "How can I donate?", content:
"Donations can be made directly through our website via credit card or PayPal. We also accept in-kind donations of food, blankets, and toys at our shelter location during business hours. Every contribution helps us care for our animals."},
{
id: "4", title: "What if I can no longer care for my pet?", content:
"We understand that circumstances change. If you need to rehome your pet, please contact us directly to discuss options. We may be able to accept your pet into our shelter or help you find a new loving home through our rehoming network."},
]}
imageSrc="https://img.b2bpic.net/free-photo/woman-petting-adorable-dog_23-2148740422.jpg"
imageAlt="Two pets sitting next to a question mark icon"
mediaAnimation="opacity"
mediaPosition="left"
title="Frequently Asked Questions"
description="Find answers to common questions about adoption, volunteering, and supporting Paw Paradise."
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="Frequently Asked Questions section"
className="py-12 md:py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
textBoxDescriptionClassName="text-lg text-foreground/80 mt-4"
faqsContainerClassName="bg-card rounded-soft p-6 md:p-8"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get in Touch"
tagIcon={Mail}
tagAnimation="blur-reveal"
title="Ready to Welcome a New Family Member?"
description="Contact us today to learn more about our adoptable pets, volunteer opportunities, or how you can support our mission."
buttons={[
{ text: "Send Us a Message", href: "#" },
{ text: "View Adoptable Pets", href: "#adopt" },
]}
buttonAnimation="bounce-effect"
background={{ variant: "plain" }}
useInvertedBackground={false}
ariaLabel="Contact section for Paw Paradise"
className="py-12 md:py-20"
contentClassName="bg-card rounded-soft p-8 md:p-12 text-center"
titleClassName="text-4xl md:text-5xl font-semibold text-foreground leading-tight"
descriptionClassName="text-lg text-foreground/80 mt-4"
tagClassName="text-accent text-sm font-semibold"
/>
</div>
<div id="footer" data-section="footer">
@@ -277,15 +160,15 @@ export default function LandingPage() {
},
{
title: "Support", items: [
{ label: "Volunteer", href: "#contact" },
{ label: "Volunteer", href: "/contact" },
{ label: "Donate", href: "#" },
],
},
{
title: "About Us", items: [
{ label: "Our Story", href: "#about" },
{ label: "Our Team", href: "#team" },
{ label: "FAQs", href: "#faq" },
{ label: "Our Story", href: "/about" },
{ label: "Our Team", href: "/about#team" },
{ label: "FAQs", href: "/contact#faq" },
],
},
]}
@@ -294,10 +177,6 @@ export default function LandingPage() {
onPrivacyClick={() => console.log('Privacy policy clicked')}
ariaLabel="Site footer"
className="py-12 md:py-20 bg-primary-cta text-white"
logoTextClassName="text-white text-3xl font-bold"
copyrightTextClassName="text-white/80"
columnTitleClassName="text-white font-semibold mb-4"
columnItemClassName="text-white/70 hover:text-white transition-colors"
/>
</div>
</ThemeProvider>