Merge version_1_1777036652775 into main #5
177
src/App.tsx
177
src/App.tsx
@@ -1,177 +1,10 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesDualMedia from '@/components/sections/features/FeaturesDualMedia';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import HomePage from './pages/HomePage';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Happy Paws"
|
||||
navItems={[
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Pets", href: "#pets" },
|
||||
{ name: "Metrics", href: "#metrics" },
|
||||
{ name: "Testimonials", href: "#testimonials" },
|
||||
]}
|
||||
ctaButton={{ text: "Adopt Today", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Find Your Best Friend"
|
||||
title="Give a Second Chance"
|
||||
description="Our shelter helps homeless pets find their forever homes. Meet our current residents waiting for love."
|
||||
primaryButton={{ text: "View Pets", href: "#pets" }}
|
||||
secondaryButton={{ text: "Volunteer", href: "#contact" }}
|
||||
items={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87dmhu" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=paw4k1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tnqe3w" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yipmxq" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j10rae" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8cvoqu" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Mission"
|
||||
title="Giving Love to Every Paw"
|
||||
description="At Happy Paws, we believe every animal deserves a loving environment. We provide medical care, rehabilitation, and a safe harbor."
|
||||
items={[
|
||||
{ icon: "Heart", title: "Rescue Services", description: "Taking in animals in need." },
|
||||
{ icon: "Activity", title: "Health Care", description: "Full medical support provided." },
|
||||
{ icon: "Home", title: "Adoption Support", description: "Matching pets to families." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=53wx5y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="How We Help"
|
||||
title="Programs That Matter"
|
||||
description="We offer various programs to support the community and our shelter residents."
|
||||
items={[
|
||||
{
|
||||
icon: "Heart",
|
||||
title: "Fostering",
|
||||
description: "Open your home to a pet temporarily.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ibrxn2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uvt928" },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "Calendar",
|
||||
title: "Adoption Days",
|
||||
description: "Regular weekend adoption events.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f95q9k" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ocpi" },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "BookOpen",
|
||||
title: "Pet Education",
|
||||
description: "Resources for responsible owners.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ghygq2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pig7v5" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pets" data-section="pets">
|
||||
<ProductRatingCards
|
||||
tag="Available Pets"
|
||||
title="Adoptable Friends"
|
||||
description="Meet our lovely animals waiting to meet you."
|
||||
products={[
|
||||
{ brand: "Dog", name: "Buddy", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g0wcnf" },
|
||||
{ brand: "Cat", name: "Luna", price: "Kitten", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rjs3y" },
|
||||
{ brand: "Dog", name: "Max", price: "Senior", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zxiot0" },
|
||||
{ brand: "Cat", name: "Oliver", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rngr7s" },
|
||||
{ brand: "Dog", name: "Daisy", price: "Puppy", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=191xu0" },
|
||||
{ brand: "Cat", name: "Milo", price: "Adult", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7giz1r" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Shelter Success"
|
||||
description="Helping pets every day."
|
||||
metrics={[
|
||||
{ icon: "Users", title: "Adoptions", value: "1200+" },
|
||||
{ icon: "Home", title: "Fosters", value: "450+" },
|
||||
{ icon: "Heart", title: "Rescues", value: "2000+" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Happy Tails"
|
||||
title="Stories from Adopters"
|
||||
description="Heartwarming feedback from our community."
|
||||
testimonials={[
|
||||
{ name: "Alice Smith", role: "Adopter", quote: "Buddy is the best dog ever!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v1phby" },
|
||||
{ name: "Bob Jones", role: "Foster", quote: "Fostering changed my life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vulepf" },
|
||||
{ name: "Charlie Day", role: "Adopter", quote: "So thankful for Happy Paws.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kj0je1" },
|
||||
{ name: "Dana White", role: "Volunteer", quote: "Love working with this team.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udxu44" },
|
||||
{ name: "Evan Wright", role: "Adopter", quote: "Luna adapted perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lngv46" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Questions?"
|
||||
title="Adoption FAQ"
|
||||
description="Everything you need to know."
|
||||
items={[
|
||||
{ question: "What is the process?", answer: "Fill out a form, then meet the pet." },
|
||||
{ question: "Are they vaccinated?", answer: "Yes, all animals receive full care." },
|
||||
{ question: "Can I visit?", answer: "Yes, visit during open hours." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Join Us"
|
||||
title="Stay Connected"
|
||||
description="Sign up for our newsletter to get updates."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
brand="Happy Paws Shelter"
|
||||
columns={[
|
||||
{ title: "Info", items: [{ label: "About Us", href: "#about" }, { label: "Volunteer", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyright="© 2024 Happy Paws Shelter. All rights reserved."
|
||||
links={[{ label: "Home", href: "/" }]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,179 @@
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesDualMedia from '@/components/sections/features/FeaturesDualMedia';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
|
||||
const HomePage = () => {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<NavbarCentered
|
||||
logo="Logo"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl text-center">
|
||||
Your website content will appear here.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Happy Paws"
|
||||
navItems={[
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Pets", href: "#pets" },
|
||||
{ name: "Metrics", href: "#metrics" },
|
||||
{ name: "Testimonials", href: "#testimonials" },
|
||||
]}
|
||||
ctaButton={{ text: "Adopt Today", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTiltedCarousel
|
||||
tag="Find Your Best Friend"
|
||||
title="Give a Second Chance"
|
||||
description="Our shelter helps homeless pets find their forever homes. Meet our current residents waiting for love."
|
||||
primaryButton={{ text: "View Pets", href: "#pets" }}
|
||||
secondaryButton={{ text: "Volunteer", href: "#contact" }}
|
||||
items={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=87dmhu" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=paw4k1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tnqe3w" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yipmxq" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j10rae" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8cvoqu" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Mission"
|
||||
title="Giving Love to Every Paw"
|
||||
description="At Happy Paws, we believe every animal deserves a loving environment. We provide medical care, rehabilitation, and a safe harbor."
|
||||
items={[
|
||||
{ icon: "Heart", title: "Rescue Services", description: "Taking in animals in need." },
|
||||
{ icon: "Activity", title: "Health Care", description: "Full medical support provided." },
|
||||
{ icon: "Home", title: "Adoption Support", description: "Matching pets to families." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=53wx5y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesDualMedia
|
||||
tag="How We Help"
|
||||
title="Programs That Matter"
|
||||
description="We offer various programs to support the community and our shelter residents."
|
||||
items={[
|
||||
{
|
||||
icon: "Heart",
|
||||
title: "Fostering",
|
||||
description: "Open your home to a pet temporarily.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ibrxn2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uvt928" },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "Calendar",
|
||||
title: "Adoption Days",
|
||||
description: "Regular weekend adoption events.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f95q9k" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ocpi" },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "BookOpen",
|
||||
title: "Pet Education",
|
||||
description: "Resources for responsible owners.",
|
||||
mediaItems: [
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ghygq2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pig7v5" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pets" data-section="pets">
|
||||
<ProductRatingCards
|
||||
tag="Available Pets"
|
||||
title="Adoptable Friends"
|
||||
description="Meet our lovely animals waiting to meet you."
|
||||
products={[
|
||||
{ brand: "Dog", name: "Buddy", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g0wcnf" },
|
||||
{ brand: "Cat", name: "Luna", price: "Kitten", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7rjs3y" },
|
||||
{ brand: "Dog", name: "Max", price: "Senior", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zxiot0" },
|
||||
{ brand: "Cat", name: "Oliver", price: "Adult", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rngr7s" },
|
||||
{ brand: "Dog", name: "Daisy", price: "Puppy", rating: 5, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=191xu0" },
|
||||
{ brand: "Cat", name: "Milo", price: "Adult", rating: 4, reviewCount: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7giz1r" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Shelter Success"
|
||||
description="Helping pets every day."
|
||||
metrics={[
|
||||
{ icon: "Users", title: "Adoptions", value: "1200+" },
|
||||
{ icon: "Home", title: "Fosters", value: "450+" },
|
||||
{ icon: "Heart", title: "Rescues", value: "2000+" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Happy Tails"
|
||||
title="Stories from Adopters"
|
||||
description="Heartwarming feedback from our community."
|
||||
testimonials={[
|
||||
{ name: "Alice Smith", role: "Adopter", quote: "Buddy is the best dog ever!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v1phby" },
|
||||
{ name: "Bob Jones", role: "Foster", quote: "Fostering changed my life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vulepf" },
|
||||
{ name: "Charlie Day", role: "Adopter", quote: "So thankful for Happy Paws.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kj0je1" },
|
||||
{ name: "Dana White", role: "Volunteer", quote: "Love working with this team.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udxu44" },
|
||||
{ name: "Evan Wright", role: "Adopter", quote: "Luna adapted perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lngv46" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSimple
|
||||
tag="Questions?"
|
||||
title="Adoption FAQ"
|
||||
description="Everything you need to know."
|
||||
items={[
|
||||
{ question: "What is the process?", answer: "Fill out a form, then meet the pet." },
|
||||
{ question: "Are they vaccinated?", answer: "Yes, all animals receive full care." },
|
||||
{ question: "Can I visit?", answer: "Yes, visit during open hours." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Join Us"
|
||||
title="Stay Connected"
|
||||
description="Sign up for our newsletter to get updates."
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
brand="Happy Paws Shelter"
|
||||
columns={[
|
||||
{ title: "Info", items: [{ label: "About Us", href: "#about" }, { label: "Volunteer", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyright="© 2024 Happy Paws Shelter. All rights reserved."
|
||||
links={[{ label: "Home", href: "/" }]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user