Merge version_3 into main #5
154
src/app/about/page.tsx
Normal file
154
src/app/about/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
114
src/app/contact/page.tsx
Normal file
114
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Heart, Mail, MapPin, Phone } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
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="hero" data-section="hero">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tagIcon={Heart}
|
||||
title="Contact Paws & Care"
|
||||
description="Have questions about adoption, volunteering, or our services? We'd love to hear from you. Reach out to our team anytime."
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttons={[
|
||||
{ text: "Send Message", href: "#contact-form" },
|
||||
{ text: "Call Us", href: "tel:+1234567890" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<ContactText
|
||||
text="Have questions? Our friendly team is here to help. Reach out via phone, email, or visit us in person. We're committed to answering all your inquiries about pet adoption and our services."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:info@pawscare.com" },
|
||||
{ text: "Call Now", href: "tel:+1234567890" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hours" data-section="hours">
|
||||
<ContactText
|
||||
text="Visit our shelter during business hours. We're open Monday through Sunday, with extended hours on weekends. Our staff and volunteers are always ready to help you find your perfect companion."
|
||||
animationType="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "View Hours", href: "#" },
|
||||
{ text: "Get Directions", href: "#" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -4,9 +4,14 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import { Roboto } from "next/font/google";
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Pet Adoption & Shelter | Paws & Care", description: "Find your perfect pet companion at Paws & Care. Adopt rescue dogs, cats, and small animals. Learn about our adoption process, volunteer, and support our mission to save lives.", keywords: "pet adoption, animal shelter, rescue dogs, rescue cats, pet rescue, adopt a pet, animal welfare", robots: {
|
||||
@@ -24,12 +29,6 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
const roboto = Roboto({
|
||||
variable: "--font-roboto",
|
||||
subsets: ["latin"],
|
||||
weight: ["100", "300", "400", "500", "700", "900"],
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
@@ -38,7 +37,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body className={`${roboto.variable} antialiased`}>
|
||||
<body className={`${dmSans.variable} ${inter.variable} antialiased`}>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
@@ -283,7 +282,9 @@ export default function RootLayout({
|
||||
const getElementInfo = (element, assignId = false) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const tagName = element.tagName.toLowerCase();
|
||||
|
||||
const selector = getUniqueSelector(element, assignId);
|
||||
const sectionId = getSectionId(element);
|
||||
|
||||
let className = undefined;
|
||||
try {
|
||||
if (element.className) {
|
||||
@@ -311,7 +312,8 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
if (tagName === 'img') {
|
||||
info.imageData = {
|
||||
const originalSrc = extractOriginalUrl(element.src);
|
||||
info.imageData = {
|
||||
src: originalSrc,
|
||||
alt: element.alt || undefined,
|
||||
naturalWidth: element.naturalWidth,
|
||||
@@ -322,7 +324,8 @@ export default function RootLayout({
|
||||
|
||||
if (tagName === 'video') {
|
||||
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
|
||||
info.imageData = {
|
||||
const resolvedSrc = extractOriginalUrl(rawSrc);
|
||||
info.imageData = {
|
||||
src: resolvedSrc,
|
||||
alt: element.getAttribute('aria-label') || undefined,
|
||||
isBackground: false,
|
||||
@@ -335,7 +338,8 @@ export default function RootLayout({
|
||||
if (backgroundImage && backgroundImage !== 'none') {
|
||||
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
|
||||
if (urlMatch) {
|
||||
if (tagName !== 'img') {
|
||||
const originalBgSrc = extractOriginalUrl(urlMatch[1]);
|
||||
if (tagName !== 'img') {
|
||||
info.imageData = {
|
||||
src: originalBgSrc,
|
||||
isBackground: true
|
||||
@@ -347,7 +351,8 @@ export default function RootLayout({
|
||||
}
|
||||
}
|
||||
|
||||
info.elementType = elementType;
|
||||
const elementType = getElementType(element);
|
||||
info.elementType = elementType;
|
||||
|
||||
if (elementType === 'Button') {
|
||||
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
|
||||
@@ -440,11 +445,13 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
const isTextElement = (element) => {
|
||||
return elementType === 'Text';
|
||||
const elementType = getElementType(element);
|
||||
return elementType === 'Text';
|
||||
};
|
||||
|
||||
const isButtonElement = (element) => {
|
||||
return elementType === 'Button';
|
||||
const elementType = getElementType(element);
|
||||
return elementType === 'Button';
|
||||
};
|
||||
|
||||
const updateButtonText = (element, newText) => {
|
||||
@@ -519,7 +526,8 @@ export default function RootLayout({
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
let currentText = element.textContent;
|
||||
const elementInfo = getElementInfo(element);
|
||||
let currentText = element.textContent;
|
||||
|
||||
// Ensure there's always at least a space to keep the element editable
|
||||
if (currentText === '' || currentText === null || currentText.length === 0) {
|
||||
@@ -632,7 +640,8 @@ export default function RootLayout({
|
||||
}, '*');
|
||||
|
||||
if (save && originalContent !== element.textContent) {
|
||||
let finalText = element.textContent;
|
||||
const elementInfo = getElementInfo(element);
|
||||
let finalText = element.textContent;
|
||||
|
||||
// Trim the final text and convert space-only to empty string for saving
|
||||
if (finalText === ' ' || finalText.trim() === '') {
|
||||
@@ -761,7 +770,7 @@ export default function RootLayout({
|
||||
lastMouseX = e.clientX;
|
||||
lastMouseY = e.clientY;
|
||||
|
||||
|| e.target;
|
||||
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
||||
|
||||
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
|
||||
return;
|
||||
@@ -793,7 +802,8 @@ export default function RootLayout({
|
||||
hoverOverlay = createHoverOverlay(target);
|
||||
}
|
||||
|
||||
showElementTypeLabel(target, elementType);
|
||||
const elementType = getElementType(target);
|
||||
showElementTypeLabel(target, elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
type: 'webild-element-hover',
|
||||
@@ -835,7 +845,7 @@ export default function RootLayout({
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|| e.target;
|
||||
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
|
||||
if (!isValidElement(target)) return;
|
||||
|
||||
if (selectedElement && selectedElement !== target) {
|
||||
@@ -880,7 +890,8 @@ export default function RootLayout({
|
||||
hoveredElement = null;
|
||||
}
|
||||
|
||||
selectedElement.dataset.webildSelector = elementInfo.selector;
|
||||
const elementInfo = getElementInfo(target, true);
|
||||
selectedElement.dataset.webildSelector = elementInfo.selector;
|
||||
showElementTypeLabel(target, elementInfo.elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
@@ -963,7 +974,8 @@ export default function RootLayout({
|
||||
isScrolling = false;
|
||||
|
||||
if (lastMouseX > 0 && lastMouseY > 0) {
|
||||
if (target && isValidElement(target) && target !== selectedElement) {
|
||||
const target = getMostSpecificElement(lastMouseX, lastMouseY);
|
||||
if (target && isValidElement(target) && target !== selectedElement) {
|
||||
hoveredElement = target;
|
||||
|
||||
const computedStyle = window.getComputedStyle(target);
|
||||
@@ -977,7 +989,8 @@ export default function RootLayout({
|
||||
hoveredElement.classList.add(hoverClass);
|
||||
hoverOverlay = createHoverOverlay(target);
|
||||
|
||||
showElementTypeLabel(target, elementType);
|
||||
const elementType = getElementType(target);
|
||||
showElementTypeLabel(target, elementType);
|
||||
|
||||
window.parent.postMessage({
|
||||
type: 'webild-element-hover',
|
||||
@@ -1000,7 +1013,8 @@ export default function RootLayout({
|
||||
|
||||
const saveChangeToStorage = (change) => {
|
||||
try {
|
||||
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
const storageKey = getStorageKey();
|
||||
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
|
||||
const filteredChanges = existingChanges.filter(c => {
|
||||
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
|
||||
@@ -1020,7 +1034,8 @@ export default function RootLayout({
|
||||
|
||||
const clearLocalChanges = () => {
|
||||
try {
|
||||
localStorage.removeItem(storageKey);
|
||||
const storageKey = getStorageKey();
|
||||
localStorage.removeItem(storageKey);
|
||||
window.parent.postMessage({
|
||||
type: 'webild-local-changes-cleared',
|
||||
data: {}
|
||||
@@ -1069,7 +1084,8 @@ export default function RootLayout({
|
||||
|
||||
if (e.data.type === 'webild-cancel-changes') {
|
||||
try {
|
||||
const savedChanges = localStorage.getItem(storageKey);
|
||||
const storageKey = getStorageKey();
|
||||
const savedChanges = localStorage.getItem(storageKey);
|
||||
if (savedChanges) {
|
||||
const changes = JSON.parse(savedChanges);
|
||||
changes.forEach(change => {
|
||||
@@ -1091,7 +1107,8 @@ export default function RootLayout({
|
||||
if (isBackground) {
|
||||
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
|
||||
} else {
|
||||
if (revertTag === 'video' && oldMediaType === 'image') {
|
||||
const oldMediaType = getMediaTypeFromUrl(change.oldValue);
|
||||
if (revertTag === 'video' && oldMediaType === 'image') {
|
||||
swapMediaElement(element, 'img', change.oldValue);
|
||||
} else if (revertTag === 'img' && oldMediaType === 'video') {
|
||||
swapMediaElement(element, 'video', change.oldValue);
|
||||
@@ -1139,7 +1156,8 @@ export default function RootLayout({
|
||||
const el = textElements[i];
|
||||
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
|
||||
element = el;
|
||||
if (newSelector) {
|
||||
const newSelector = getUniqueSelector(element, true);
|
||||
if (newSelector) {
|
||||
element.dataset.webildSelector = newSelector;
|
||||
}
|
||||
break;
|
||||
@@ -1230,8 +1248,10 @@ export default function RootLayout({
|
||||
replaced = true;
|
||||
} else if (element.tagName.toLowerCase() === 'img') {
|
||||
oldValue = element.src;
|
||||
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
const newMediaType = getMediaTypeFromUrl(newSrc);
|
||||
if (newMediaType === 'video' && allowMediaTypeSwap) {
|
||||
const swapped = swapMediaElement(element, 'video', newSrc);
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
element = swapped;
|
||||
} else {
|
||||
element.src = newSrc;
|
||||
@@ -1239,9 +1259,11 @@ export default function RootLayout({
|
||||
replaced = true;
|
||||
} else if (element.tagName.toLowerCase() === 'video') {
|
||||
oldValue = element.src || element.currentSrc || '';
|
||||
const sources = element.querySelectorAll('source');
|
||||
const newMediaType = getMediaTypeFromUrl(newSrc);
|
||||
const sources = element.querySelectorAll('source');
|
||||
if (newMediaType === 'image' && allowMediaTypeSwap) {
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
const swapped = swapMediaElement(element, 'img', newSrc);
|
||||
if (selectedElement === element) selectedElement = swapped;
|
||||
element = swapped;
|
||||
} else {
|
||||
if (sources.length > 0) {
|
||||
@@ -1263,7 +1285,8 @@ export default function RootLayout({
|
||||
}
|
||||
|
||||
if (replaced) {
|
||||
|
||||
const elementInfo = getElementInfo(element);
|
||||
|
||||
let cleanOldValue = oldValue;
|
||||
if (oldValue.includes('url(')) {
|
||||
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
|
||||
@@ -1334,7 +1357,13 @@ export default function RootLayout({
|
||||
}
|
||||
}, true);
|
||||
|
||||
|
||||
const urlCheckInterval = setInterval(() => {
|
||||
if (lastPathname !== window.location.pathname) {
|
||||
lastPathname = window.location.pathname;
|
||||
notifyPageChange();
|
||||
}
|
||||
}, 500);
|
||||
|
||||
notifyPageChange();
|
||||
|
||||
window.webildCleanup = () => {
|
||||
|
||||
150
src/app/our-pets/page.tsx
Normal file
150
src/app/our-pets/page.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
||||
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Heart, Sparkles, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function OurPetsPage() {
|
||||
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: "/our-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="featured-pets" data-section="featured-pets">
|
||||
<ProductCardOne
|
||||
title="All Our Available Pets"
|
||||
description="Browse through our complete collection of wonderful animals waiting for their forever homes. Each pet has been carefully cared for and is ready to join your family."
|
||||
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 - German Shepherd 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"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Bella - Cocker Spaniel", price: "Adoption Fee: $140", 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: "Bella the Cocker Spaniel"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Oliver - Orange Tabby", price: "Adoption Fee: $60", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-tabby-cat_23-2148045665.jpg?_wi=1", imageAlt: "Oliver the Orange Tabby"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Daisy - Beagle Mix", price: "Adoption Fee: $110", imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-adorable-german-shepherd-puppy-with-chew-toy_181624-26888.jpg?_wi=1", imageAlt: "Daisy the Beagle Mix"
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Learn About Adoption", href: "/#adopt" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardTwentySeven
|
||||
title="Our Adoption Process"
|
||||
description="We've made the adoption process simple and transparent to ensure a perfect match between you and your new pet."
|
||||
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: "Complete Application", description: "Fill out 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 Verification", 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 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}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Adopt?"
|
||||
tagIcon={Heart}
|
||||
title="Find Your Perfect Companion"
|
||||
description="Each of these wonderful animals is looking for a loving home. Start your adoption journey today and make a difference in a pet's life."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Start Adoption", href: "/contact" },
|
||||
{ text: "Learn More", href: "/about" },
|
||||
]}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -31,11 +31,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Paws & Care"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ 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" }}
|
||||
/>
|
||||
@@ -51,7 +53,7 @@ export default function LandingPage() {
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Browse Pets", href: "#featured-pets" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
{ text: "Learn More", href: "/about" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
@@ -89,7 +91,7 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View All Pets", href: "#" }]}
|
||||
buttons={[{ text: "View All Pets", href: "/our-pets" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -173,7 +175,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
buttons={[{ text: "Contact Us", href: "/contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -197,10 +199,10 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "#" },
|
||||
{ label: "Available Pets", href: "#featured-pets" },
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Available Pets", href: "/our-pets" },
|
||||
{ label: "Adoption", href: "#adopt" },
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -208,7 +210,7 @@ export default function LandingPage() {
|
||||
{ label: "Donate", href: "#" },
|
||||
{ label: "Volunteer", href: "#" },
|
||||
{ label: "Sponsorship", href: "#" },
|
||||
{ label: "Contact Us", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user