Add src/app/about/page.tsx

This commit is contained in:
2026-03-04 13:35:35 +00:00
parent 5c7ca5f9fb
commit c64ec62819

154
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,154 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { CheckCircle, Heart, Users } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Paws & Care"
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" },
]}
button={{ text: "Adopt Now", href: "#featured-pets" }}
/>
</div>
<div id="about-hero" data-section="about-hero">
<TextAbout
tag="Our Story"
tagIcon={Heart}
title="Paws & Care: Changing Lives, One Pet at a Time"
useInvertedBackground={false}
buttons={[{ text: "Learn More", href: "#mission" }]}
/>
</div>
<div id="mission" data-section="mission">
<TextAbout
tag="Our Mission"
tagIcon={CheckCircle}
title="We're dedicated to rescuing, caring for, and finding forever homes for abandoned and neglected animals. Every pet deserves love, safety, and a chance at a better life."
useInvertedBackground={true}
buttons={[{ text: "Get Involved", href: "/contact" }]}
/>
</div>
<div id="team" data-section="team">
<FeatureCardTwentySeven
title="Meet Our Team"
description="Our passionate staff and volunteers are committed to providing the highest standard of care for every animal in our shelter."
tag="Our People"
tagIcon={Users}
features={[
{
id: "1", title: "Sarah Williams", description: "Executive Director with 15 years of experience in animal rescue and welfare.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Sarah Williams"
},
{
id: "2", title: "Dr. Michael Park", description: "Chief Veterinarian ensuring all animals receive top-quality medical care and treatment.", 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: "Dr. Michael Park"
},
{
id: "3", title: "Emma Thompson", description: "Adoption Coordinator helping families find their perfect pet companions.", imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg", imageAlt: "Emma Thompson"
},
{
id: "4", title: "Volunteer Network", description: "Over 200 dedicated volunteers providing care, companionship, and support daily.", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg", imageAlt: "Our volunteers"
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{ id: "1", name: "Sarah", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Sarah" },
{ id: "2", name: "Michael", 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" },
{ id: "3", name: "Emily", imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-her-dog-making-selfie_329181-20369.jpg", imageAlt: "Emily" },
{ id: "4", name: "David", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-their-french-bulldogs-park_1303-17965.jpg", imageAlt: "David" },
{ id: "5", name: "Lisa", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-with-her-dog-park_23-2147902250.jpg", imageAlt: "Lisa" },
]}
cardTitle="Join thousands of happy pet families who found their perfect companions at Paws & Care"
cardTag="Trusted by families everywhere"
cardTagIcon={Heart}
cardAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Ready to Make a Difference?"
tagIcon={Heart}
title="Support Our Mission"
description="Your support helps us continue our lifesaving work. Whether through adoption, volunteering, or donations, every action counts."
background={{ variant: "sparkles-gradient" }}
buttons={[
{ text: "Adopt Today", href: "/our-pets" },
{ text: "Get in Touch", href: "/contact" },
]}
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"
/>
</div>
</ThemeProvider>
);
}