development/440d6121-5e58-457e-a0c0-19a037703720
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitalijmulika
2026-01-23 11:38:51 +02:00
commit 5a20383806
297 changed files with 57742 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,166 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="entrance-slide"
borderRadius="sharp"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarLayoutFloatingInline
brandName="Happy Paws Shelter"
navItems={[
{ name: "Home", id: "/home" },
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Pets", id: "featured-pets" },
{ name: "Adopt", id: "adoption-process" }
]}
button={{ text: "Contact Us", href: "contact" }}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardOne
blogs={posts}
title="Latest Pet Stories & News"
description="Stay updated with heartwarming rescue stories, adoption success stories, and helpful pet care tips from our shelter"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
tag="Blog"
/>
)}
<FooterSimple
columns={[
{
title: "Adopt", items: [
{ label: "Browse Pets", href: "#featured-pets" },
{ label: "Adoption Process", href: "#adoption-process" },
{ label: "FAQ", href: "#" }
]
},
{
title: "About", items: [
{ label: "Our Story", href: "#about" },
{ label: "Our Mission", href: "#about" },
{ label: "Impact Report", href: "#metrics" }
]
},
{
title: "Get Involved", items: [
{ label: "Volunteer", href: "#contact" },
{ label: "Donate", href: "#" },
{ label: "Sponsor", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "Email Us", href: "#contact" },
{ label: "Visit Us", href: "#" },
{ label: "Social Media", href: "#" }
]
}
]}
bottomLeftText="© 2025 Happy Paws Shelter. All rights reserved."
bottomRightText="Rescue, Rehabilitate, Rehome"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #1c1c1c;;
--secondary-cta: #ffffff;;
--accent: #15479c;;
--background-accent: #a8cce8;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #1c1c1c;;
--secondary-cta: #ffffff;;
--accent: #15479c;;
--background-accent: #a8cce8;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-outfit), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-outfit), sans-serif;
}

1267
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

245
src/app/page.tsx Normal file
View File

@@ -0,0 +1,245 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import TextAbout from "@/components/sections/about/TextAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { CheckCircle, Heart, Star, TrendingUp } from "lucide-react";
export default function PetShelterPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="entrance-slide"
borderRadius="sharp"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Happy Paws Shelter"
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Pets", id: "featured-pets" },
{ name: "Adopt", id: "adoption-process" }
]}
button={{
text: "Contact Us", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Find Your New Best Friend"
description="Welcome to Happy Paws Shelter. Discover loving pets ready for their forever homes. Every animal deserves a chance to be loved and cherished."
background={{ variant: "sparkles-gradient" }}
imageSrc="https://img.b2bpic.net/free-photo/little-puppy-farm-is-enjoying-sunny-day_181624-40643.jpg"
imageAlt="Adorable puppies and kittens at the pet shelter"
frameStyle="card"
logoLineHeight={1.2}
/>
</div>
<div id="about" data-section="about">
<TextAbout
title="We believe every pet deserves a loving, permanent home. Our mission is to rescue, rehabilitate, and rehome animals in need. With compassion at our core, we provide comprehensive care, medical treatment, and behavioral support to help each animal thrive."
buttons={[
{ text: "Learn Our Story", href: "#" },
{ text: "Support Us", href: "#" }
]}
useInvertedBackground="noInvert"
/>
</div>
<div id="featured-pets" data-section="featured-pets">
<ProductCardOne
title="Meet Our Pets"
description="Browse our available animals looking for their forever homes. Each pet has been carefully evaluated and is ready to join a loving family."
tag="Available Now"
tagIcon={Heart}
textboxLayout="default"
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
useInvertedBackground="invertDefault"
products={[
{
id: "1", name: "Luna", price: "Tabby Cat", imageSrc: "https://img.b2bpic.net/free-photo/hipster-woman-smile-enjoy-playing-with-her-puppy-summer-field-vintage-tone-filter_1150-1188.jpg", imageAlt: "Luna, a friendly tabby cat ready for adoption"
},
{
id: "2", name: "Max", price: "Golden Retriever", imageSrc: "https://img.b2bpic.net/free-photo/close-up-dog-smelling-woman-s-hand_23-2147840637.jpg", imageAlt: "Max, an energetic golden retriever"
},
{
id: "3", name: "Whiskers", price: "Holland Lop Rabbit", imageSrc: "https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg", imageAlt: "Whiskers, a cute Holland lop rabbit"
}
]}
/>
</div>
<div id="adoption-process" data-section="adoption-process">
<FeatureCardOne
title="Our Adoption Process"
description="Simple, transparent steps to bring your new companion home"
tag="Easy & Transparent"
tagIcon={CheckCircle}
textboxLayout="default"
features={[
{
title: "Browse & Visit", description: "Explore our available pets online and visit in person to meet them. Spend time getting to know their personality and needs.", imageSrc: "https://img.b2bpic.net/free-photo/happy-parents-their-daughters-enjoying-home-having-fun-with-their-dog_637285-2878.jpg", imageAlt: "family children pets happiness adoption dog"
},
{
title: "Application Review", description: "Complete our adoption application to ensure the best match. We verify references and discuss your lifestyle and expectations.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-family-dog_329181-20491.jpg", imageAlt: "volunteer caring animals shelter helping pet"
},
{
title: "Home Ready", description: "Receive adoption support and guidance to prepare your home. We provide care tips and ongoing assistance for your new pet.", imageSrc: "https://img.b2bpic.net/free-photo/happy-parents-their-daughters-enjoying-home-having-fun-with-their-dog_637285-2878.jpg", imageAlt: "family children pets happiness adoption dog"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
useInvertedBackground="noInvert"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Stories from Happy Families"
description="Real people sharing their beautiful journeys with pets from Happy Paws Shelter"
tag="Testimonials"
tagIcon={Star}
textboxLayout="default"
showRating={true}
animationType="slide-up"
useInvertedBackground="invertDefault"
testimonials={[
{
id: "1", name: "Sarah Mitchell", handle: "@sarahmakes", testimonial: "Adopting Bella from Happy Paws has been the best decision ever. The staff's care and support made the transition so smooth. Bella is now an integral part of our family!", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-parents-their-small-daughter-enjoying-with-dog-home-grandparents-are-standing-background_637285-5542.jpg", imageAlt: "person portrait smiling happy professional"
},
{
id: "2", name: "James Chen", handle: "@jameschen", testimonial: "The team at Happy Paws truly cares about each animal's wellbeing. They helped us find the perfect match in Max, and the guidance they provided was invaluable.", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/full-shot-family-with-cute-dog-outdoors_23-2148996586.jpg", imageAlt: "person portrait friendly face photo"
},
{
id: "3", name: "Emma Rodriguez", handle: "@emmastyle", testimonial: "Professional, compassionate, and dedicated. Happy Paws Shelter exceeded our expectations. Our new cat has brought so much joy to our home!", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/three-beautiful-cute-girls-blue-dresses-with-beautiful-hairstyles-make-up-sitting_1157-14080.jpg", imageAlt: "person portrait woman smiling professional"
},
{
id: "4", name: "David Thompson", handle: "@davidtravel", testimonial: "Wonderful experience from start to finish. The staff answered all our questions and made sure we were ready for pet ownership. Highly recommend!", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/full-shot-family-having-fun-with-dog_23-2148748724.jpg", imageAlt: "person portrait man happy headshot"
},
{
id: "5", name: "Lisa Anderson", handle: "@lisatravel", testimonial: "Finally found our forever pet! Happy Paws made it so easy and worry-free. Our family can't imagine life without our new furry friend.", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-family-autumn_329181-7440.jpg", imageAlt: "person portrait cheerful face professional"
},
{
id: "6", name: "Michael Brooks", handle: "@mikebrooks", testimonial: "Exceptional service. The adoption team's dedication to finding the perfect home for each pet is truly impressive. Thank you, Happy Paws!", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/three-beautiful-cute-girls-blue-dresses-with-beautiful-hairstyles-make-up-sitting_1157-14082.jpg", imageAlt: "person portrait smiling professional woman"
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Our Impact"
description="Making a difference in the lives of animals and families"
tag="By The Numbers"
tagIcon={TrendingUp}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
metrics={[
{
id: "1", value: "2,500+", title: "Animals Rescued", items: [
"Dogs, cats, rabbits & more", "All backgrounds welcome", "Full medical care provided"
]
},
{
id: "2", value: "98%", title: "Adoption Success Rate", items: [
"Loving homes found", "Lifetime support included", "Happy families created"
]
},
{
id: "3", value: "500+", title: "Active Volunteers", items: [
"Dedicated to animal care", "Community driven mission", "Making real impact daily"
]
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Get in Touch"
description="Have questions about adoption? Want to volunteer? We'd love to hear from you. Reach out and let's make a difference together."
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...", rows: 5,
required: true
}}
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-photo/dog-sitting-near-girl_8353-5282.jpg"
imageAlt="Happy pets ready to meet their new families"
mediaPosition="right"
buttonText="Send Message"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Adopt", items: [
{ label: "Browse Pets", href: "#featured-pets" },
{ label: "Adoption Process", href: "#adoption-process" },
{ label: "FAQ", href: "#" }
]
},
{
title: "About", items: [
{ label: "Our Story", href: "#about" },
{ label: "Our Mission", href: "#about" },
{ label: "Impact Report", href: "#metrics" }
]
},
{
title: "Get Involved", items: [
{ label: "Volunteer", href: "#contact" },
{ label: "Donate", href: "#" },
{ label: "Sponsor", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "Email Us", href: "#contact" },
{ label: "Visit Us", href: "#" },
{ label: "Social Media", href: "#" }
]
}
]}
bottomLeftText="© 2025 Happy Paws Shelter. All rights reserved."
bottomRightText="Rescue, Rehabilitate, Rehome"
/>
</div>
</ThemeProvider>
);
}