1087 lines
71 KiB
HTML
1087 lines
71 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Second Tail — Pet Adoption Center</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
cream: '#FFF8F0',
|
||
terracotta: '#D4724E',
|
||
'terracotta-dark': '#B85A38',
|
||
sage: '#7A9E7E',
|
||
'sage-dark': '#5C8060',
|
||
'warm-brown': '#3D2B1F',
|
||
'warm-gray': '#6B5B4E',
|
||
'sand': '#E8D5BE',
|
||
'blush': '#F2D9C4',
|
||
},
|
||
fontFamily: {
|
||
heading: ['Nunito', 'sans-serif'],
|
||
body: ['DM Sans', 'sans-serif'],
|
||
},
|
||
borderRadius: {
|
||
'xl': '1rem',
|
||
'2xl': '1.5rem',
|
||
'3xl': '2rem',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
* { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: 'DM Sans', sans-serif;
|
||
background-color: #FFF8F0;
|
||
color: #3D2B1F;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: 'Nunito', sans-serif;
|
||
}
|
||
|
||
/* Focus states */
|
||
*:focus-visible {
|
||
outline: 3px solid #D4724E;
|
||
outline-offset: 3px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Hero parallax-like subtle movement */
|
||
.hero-section {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-image-wrap {
|
||
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
/* Fade-in-up animation */
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(40px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
|
||
.animate-on-scroll.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Stagger children */
|
||
.stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
|
||
.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 0.15s; }
|
||
.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 0.25s; }
|
||
.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 0.35s; }
|
||
|
||
/* Paw print floating animation */
|
||
@keyframes floatPaw {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
|
||
50% { transform: translateY(-20px) rotate(10deg); opacity: 0.2; }
|
||
}
|
||
|
||
.floating-paw {
|
||
animation: floatPaw 6s ease-in-out infinite;
|
||
}
|
||
|
||
.floating-paw:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
|
||
.floating-paw:nth-child(3) { animation-delay: -4s; animation-duration: 5s; }
|
||
|
||
/* Card hover */
|
||
.pet-card {
|
||
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
|
||
}
|
||
|
||
.pet-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 60px rgba(61, 43, 31, 0.12);
|
||
}
|
||
|
||
/* Button pulse */
|
||
@keyframes gentlePulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(212, 114, 78, 0.4); }
|
||
50% { box-shadow: 0 0 0 12px rgba(212, 114, 78, 0); }
|
||
}
|
||
|
||
.btn-pulse {
|
||
animation: gentlePulse 2.5s ease-in-out infinite;
|
||
}
|
||
|
||
/* Marquee for events */
|
||
@keyframes marquee {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-50%); }
|
||
}
|
||
|
||
.marquee-track {
|
||
animation: marquee 30s linear infinite;
|
||
}
|
||
|
||
.marquee-track:hover {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
/* Step connector line */
|
||
.step-connector {
|
||
position: absolute;
|
||
top: 2rem;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, #D4724E, transparent);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.step-connector { display: none; }
|
||
}
|
||
|
||
/* Testimonial card */
|
||
.testimonial-card {
|
||
position: relative;
|
||
}
|
||
|
||
.testimonial-card::before {
|
||
content: '\201C';
|
||
font-family: Nunito, sans-serif;
|
||
font-size: 6rem;
|
||
color: #D4724E;
|
||
opacity: 0.15;
|
||
position: absolute;
|
||
top: -1rem;
|
||
left: 0.5rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Nav scroll effect */
|
||
.nav-scrolled {
|
||
background: rgba(255, 248, 240, 0.95) !important;
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 2px 20px rgba(61, 43, 31, 0.08);
|
||
}
|
||
|
||
/* Custom scrollbar */
|
||
::-webkit-scrollbar { width: 8px; }
|
||
::-webkit-scrollbar-track { background: #FFF8F0; }
|
||
::-webkit-scrollbar-thumb { background: #D4724E; border-radius: 4px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #B85A38; }
|
||
|
||
/* Mobile menu */
|
||
.mobile-menu {
|
||
transform: translateX(100%);
|
||
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.mobile-menu.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Image overlay gradient */
|
||
.hero-overlay {
|
||
background: linear-gradient(135deg, rgba(255,248,240,0.92) 0%, rgba(255,248,240,0.6) 50%, transparent 100%);
|
||
}
|
||
|
||
/* Badge badge */
|
||
.pet-badge {
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-cream text-warm-brown antialiased">
|
||
|
||
<!-- Decorative floating paw prints -->
|
||
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden" aria-hidden="true">
|
||
<svg class="floating-paw absolute top-[15%] right-[10%] w-16 h-16 text-terracotta" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C10.9 2 10 2.9 10 4s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6.5 7C5.1 7 4 8.1 4 9.5S5.1 12 6.5 12 9 10.9 9 9.5 7.9 7 6.5 7zm11 0c-1.4 0-2.5 1.1-2.5 2.5S16.1 12 17.5 12 20 10.9 20 9.5 18.9 7 17.5 7zM12 8c-2.8 0-5.2 1.5-6.3 3.8-.4.9-.3 1.9.2 2.8C7.1 17 9.4 19 12 19s4.9-2 6.1-4.4c.5-.9.6-1.9.2-2.8C17.2 9.5 14.8 8 12 8z"/></svg>
|
||
<svg class="floating-paw absolute top-[45%] left-[5%] w-12 h-12 text-sage" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C10.9 2 10 2.9 10 4s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6.5 7C5.1 7 4 8.1 4 9.5S5.1 12 6.5 12 9 10.9 9 9.5 7.9 7 6.5 7zm11 0c-1.4 0-2.5 1.1-2.5 2.5S16.1 12 17.5 12 20 10.9 20 9.5 18.9 7 17.5 7zM12 8c-2.8 0-5.2 1.5-6.3 3.8-.4.9-.3 1.9.2 2.8C7.1 17 9.4 19 12 19s4.9-2 6.1-4.4c.5-.9.6-1.9.2-2.8C17.2 9.5 14.8 8 12 8z"/></svg>
|
||
<svg class="floating-paw absolute bottom-[20%] right-[15%] w-10 h-10 text-terracotta" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C10.9 2 10 2.9 10 4s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6.5 7C5.1 7 4 8.1 4 9.5S5.1 12 6.5 12 9 10.9 9 9.5 7.9 7 6.5 7zm11 0c-1.4 0-2.5 1.1-2.5 2.5S16.1 12 17.5 12 20 10.9 20 9.5 18.9 7 17.5 7zM12 8c-2.8 0-5.2 1.5-6.3 3.8-.4.9-.3 1.9.2 2.8C7.1 17 9.4 19 12 19s4.9-2 6.1-4.4c.5-.9.6-1.9.2-2.8C17.2 9.5 14.8 8 12 8z"/></svg>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<nav id="mainNav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 bg-transparent" role="navigation" aria-label="Main navigation">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex items-center justify-between h-20">
|
||
<!-- Logo -->
|
||
<a href="#" class="flex items-center gap-2 group" aria-label="Second Tail - Home">
|
||
<svg class="w-10 h-10 text-terracotta transition-transform duration-300 group-hover:scale-110" viewBox="0 0 40 40" fill="none">
|
||
<circle cx="14" cy="12" r="5" fill="currentColor"/>
|
||
<circle cx="26" cy="12" r="5" fill="currentColor"/>
|
||
<circle cx="20" cy="8" r="4" fill="currentColor"/>
|
||
<circle cx="10" cy="8" r="4" fill="currentColor"/>
|
||
<path d="M10 22C10 18 14.7 15 20 15S30 18 30 22V26C30 30.4 26.4 34 22 34H18C13.6 34 10 30.4 10 26V22Z" fill="currentColor"/>
|
||
</svg>
|
||
<span class="font-heading font-extrabold text-2xl text-warm-brown tracking-tight">Second Tail</span>
|
||
</a>
|
||
|
||
<!-- Desktop Nav Links -->
|
||
<div class="hidden md:flex items-center gap-8">
|
||
<a href="#pets" class="font-heading font-semibold text-warm-gray hover:text-terracotta transition-colors duration-300">Our Pets</a>
|
||
<a href="#how-it-works" class="font-heading font-semibold text-warm-gray hover:text-terracotta transition-colors duration-300">How It Works</a>
|
||
<a href="#stories" class="font-heading font-semibold text-warm-gray hover:text-terracotta transition-colors duration-300">Stories</a>
|
||
<a href="#events" class="font-heading font-semibold text-warm-gray hover:text-terracotta transition-colors duration-300">Events</a>
|
||
<a href="#contact" class="font-heading font-semibold text-warm-gray hover:text-terracotta transition-colors duration-300">Contact</a>
|
||
<a href="#adopt" class="ml-2 inline-flex items-center gap-2 bg-terracotta text-white font-heading font-bold px-6 py-3 rounded-full hover:bg-terracotta-dark transition-all duration-300 hover:shadow-lg hover:shadow-terracotta/25 btn-pulse">
|
||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
|
||
Adopt Now
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Mobile Menu Button -->
|
||
<button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-sand/50 transition-colors" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
|
||
<svg class="w-7 h-7 text-warm-brown" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||
<path id="menuIcon" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div id="mobileMenu" class="mobile-menu fixed top-0 right-0 h-screen w-80 bg-cream shadow-2xl z-50 md:hidden" role="dialog" aria-label="Mobile navigation">
|
||
<div class="flex justify-end p-4">
|
||
<button id="mobileMenuClose" class="p-2 rounded-lg hover:bg-sand/50 transition-colors" aria-label="Close menu">
|
||
<svg class="w-6 h-6 text-warm-brown" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="flex flex-col gap-2 px-6">
|
||
<a href="#pets" class="mobile-link font-heading font-semibold text-lg py-3 px-4 rounded-xl hover:bg-sand/50 transition-colors">Our Pets</a>
|
||
<a href="#how-it-works" class="mobile-link font-heading font-semibold text-lg py-3 px-4 rounded-xl hover:bg-sand/50 transition-colors">How It Works</a>
|
||
<a href="#stories" class="mobile-link font-heading font-semibold text-lg py-3 px-4 rounded-xl hover:bg-sand/50 transition-colors">Stories</a>
|
||
<a href="#events" class="mobile-link font-heading font-semibold text-lg py-3 px-4 rounded-xl hover:bg-sand/50 transition-colors">Events</a>
|
||
<a href="#contact" class="mobile-link font-heading font-semibold text-lg py-3 px-4 rounded-xl hover:bg-sand/50 transition-colors">Contact</a>
|
||
<div class="mt-4">
|
||
<a href="#adopt" class="mobile-link block text-center bg-terracotta text-white font-heading font-bold px-6 py-4 rounded-full hover:bg-terracotta-dark transition-colors">Adopt Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="hero-section relative min-h-screen flex items-center pt-20" aria-labelledby="hero-heading">
|
||
<div class="absolute inset-0 z-0">
|
||
<div class="hero-image-wrap w-full h-full">
|
||
<img src="https://images.pexels.com/photos/16652369/pexels-photo-16652369.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A friendly dog wearing an 'Adopt Me' bandana at a park, seeking a new home." class="w-full h-full object-cover" loading="eager">
|
||
</div>
|
||
<div class="hero-overlay absolute inset-0"></div>
|
||
</div>
|
||
|
||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20">
|
||
<div class="max-w-2xl">
|
||
<div class="inline-flex items-center gap-2 bg-white/80 backdrop-blur-sm rounded-full px-4 py-2 mb-6">
|
||
<span class="w-2 h-2 bg-sage rounded-full animate-pulse"></span>
|
||
<span class="font-heading font-semibold text-sm text-warm-brown">Over 2,400 pets adopted this year</span>
|
||
</div>
|
||
|
||
<h1 id="hero-heading" class="font-heading font-black text-5xl sm:text-6xl lg:text-7xl leading-[1.1] text-warm-brown mb-6">
|
||
Every pet deserves a
|
||
<span class="text-terracotta relative inline-block">
|
||
second tail
|
||
<svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 200 12" fill="none"><path d="M2 8C30 3 60 2 100 5S170 10 198 6" stroke="#D4724E" stroke-width="3" stroke-linecap="round"/></svg>
|
||
</span>
|
||
wag.
|
||
</h1>
|
||
|
||
<p class="font-body text-lg sm:text-xl text-warm-gray leading-relaxed mb-8 max-w-lg">
|
||
We match loving families with rescued dogs, cats, and small animals who just need one more chance. Come meet your forever companion today.
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-4 mb-12">
|
||
<a href="#pets" class="inline-flex items-center justify-center gap-2 bg-terracotta text-white font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-terracotta-dark transition-all duration-300 hover:shadow-xl hover:shadow-terracotta/25">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||
Meet Our Pets
|
||
</a>
|
||
<a href="#how-it-works" class="inline-flex items-center justify-center gap-2 bg-white text-warm-brown font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-sand transition-all duration-300 border-2 border-transparent hover:border-sand">
|
||
How It Works
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Photo attribution -->
|
||
<p class="text-sm text-warm-gray/70">
|
||
Photo by <a href="https://www.pexels.com/photo/dogs-with-their-owners-in-a-park-16652369/" target="_blank" rel="noopener noreferrer" class="text-terracotta hover:underline font-semibold">Matheus Bertelli</a> on Pexels
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll indicator -->
|
||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 animate-bounce">
|
||
<span class="text-xs font-heading font-semibold text-warm-gray uppercase tracking-widest">Scroll</span>
|
||
<svg class="w-5 h-5 text-warm-gray" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Bar -->
|
||
<section class="relative z-10 -mt-1 bg-white shadow-lg shadow-warm-brown/5 rounded-3xl max-w-6xl mx-auto mx-4 lg:mx-auto overflow-hidden" aria-label="Adoption statistics">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 divide-x divide-sand/50">
|
||
<div class="p-6 md:p-8 text-center">
|
||
<div class="font-heading font-black text-3xl md:text-4xl text-terracotta mb-1" data-count="2437">0</div>
|
||
<div class="font-heading font-semibold text-sm text-warm-gray uppercase tracking-wider">Pets Adopted</div>
|
||
</div>
|
||
<div class="p-6 md:p-8 text-center">
|
||
<div class="font-heading font-black text-3xl md:text-4xl text-terracotta mb-1" data-count="98">0</div>
|
||
<div class="font-heading font-semibold text-sm text-warm-gray uppercase tracking-wider">% Success Rate</div>
|
||
</div>
|
||
<div class="p-6 md:p-8 text-center">
|
||
<div class="font-heading font-black text-3xl md:text-4xl text-terracotta mb-1" data-count="15">0</div>
|
||
<div class="font-heading font-semibold text-sm text-warm-gray uppercase tracking-wider">Years of Service</div>
|
||
</div>
|
||
<div class="p-6 md:p-8 text-center">
|
||
<div class="font-heading font-black text-3xl md:text-4xl text-terracotta mb-1" data-count="340">0</div>
|
||
<div class="font-heading font-semibold text-sm text-warm-gray uppercase tracking-wider">Volunteers</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Featured Pets Section -->
|
||
<section id="pets" class="py-20 lg:py-28 relative z-10" aria-labelledby="pets-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 animate-on-scroll">
|
||
<span class="inline-block font-heading font-bold text-terracotta text-sm uppercase tracking-widest mb-3">Available Now</span>
|
||
<h2 id="pets-heading" class="font-heading font-black text-4xl md:text-5xl text-warm-brown mb-4">Meet Your New Best Friend</h2>
|
||
<p class="font-body text-warm-gray text-lg max-w-2xl mx-auto">Each of these wonderful animals has a unique story and personality. Take a look around and find the one that speaks to your heart.</p>
|
||
</div>
|
||
|
||
<!-- Filter Tabs -->
|
||
<div class="flex flex-wrap justify-center gap-3 mb-12 animate-on-scroll" role="tablist" aria-label="Filter pets by type">
|
||
<button class="filter-tab active font-heading font-bold px-6 py-3 rounded-full transition-all duration-300 bg-terracotta text-white" data-filter="all" role="tab" aria-selected="true">All Pets</button>
|
||
<button class="filter-tab font-heading font-bold px-6 py-3 rounded-full transition-all duration-300 bg-white text-warm-gray hover:bg-sand" data-filter="dog" role="tab" aria-selected="false">
|
||
<span class="mr-1">🐕</span> Dogs
|
||
</button>
|
||
<button class="filter-tab font-heading font-bold px-6 py-3 rounded-full transition-all duration-300 bg-white text-warm-gray hover:bg-sand" data-filter="cat" role="tab" aria-selected="false">
|
||
<span class="mr-1">🐈</span> Cats
|
||
</button>
|
||
<button class="filter-tab font-heading font-bold px-6 py-3 rounded-full transition-all duration-300 bg-white text-warm-gray hover:bg-sand" data-filter="small" role="tab" aria-selected="false">
|
||
<span class="mr-1">🐰</span> Small Animals
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Pet Cards Grid -->
|
||
<div id="petGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 stagger-children">
|
||
|
||
<!-- Pet 1: Dog -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="dog">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-sage/30 to-terracotta/20 flex items-center justify-center">
|
||
<span class="text-8xl">🐕</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ VACCINATED
|
||
</div>
|
||
<div class="absolute top-4 right-4 pet-badge bg-terracotta/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-white">
|
||
NEW
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Biscuit</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">3 years</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Golden Retriever mix</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Biscuit is a goofy, affectionate boy who loves belly rubs and long walks. He's great with kids and other dogs. His tail never stops wagging!</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Friendly</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">House Trained</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Good with Kids</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Biscuit</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Pet 2: Cat -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="cat">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-blush/50 to-terracotta/20 flex items-center justify-center">
|
||
<span class="text-8xl">🐈</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ SPAYED
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Luna</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">2 years</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Domestic Shorthair — Tortoiseshell</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Luna is a sweet, independent girl who loves window perches and soft blankets. She purrs loudly and enjoys gentle chin scratches.</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Calm</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Lap Cat</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Indoor</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Luna</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Pet 3: Dog -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="dog">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-sand to-warm-brown/10 flex items-center justify-center">
|
||
<span class="text-8xl">🐕🦺</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ NEUTERED
|
||
</div>
|
||
<div class="absolute top-4 right-4 pet-badge bg-sage/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-white">
|
||
SPECIAL NEEDS
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Duke</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">7 years</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Labrador mix — Senior</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Duke is a gentle giant with the soul of an old man. He walks slowly, naps often, and rewards every kind gesture with soulful eyes and a soft sigh.</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Gentle</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Low Energy</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Trained</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Duke</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Pet 4: Cat -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="cat">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-terracotta/20 to-sand flex items-center justify-center">
|
||
<span class="text-8xl">🐱</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ VACCINATED
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Miso</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">6 months</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Domestic Shorthair — Orange Tabby Kitten</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Miso is a playful, energetic kitten who thinks everything is a toy. He loves chasing feather wands and will follow you from room to room.</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Playful</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Kitten</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Social</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Miso</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Pet 5: Small Animal -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="small">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-sage/20 to-cream flex items-center justify-center">
|
||
<span class="text-8xl">🐰</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ HEALTHY
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Clover</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">1 year</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Holland Lop — Rabbit</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Clover is a sweet, calm bunny with adorable floppy ears. She loves being held and enjoys munching on fresh Timothy hay and leafy greens.</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Calm</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Litter Trained</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Low Maintenance</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Clover</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Pet 6: Dog -->
|
||
<article class="pet-card animate-on-scroll bg-white rounded-3xl overflow-hidden shadow-md shadow-warm-brown/5" data-type="dog">
|
||
<div class="relative h-64 bg-sand overflow-hidden">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-blush/60 to-sand flex items-center justify-center">
|
||
<span class="text-8xl">🦮</span>
|
||
</div>
|
||
<div class="absolute top-4 left-4 pet-badge bg-white/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-sage-dark">
|
||
✓ VACCINATED
|
||
</div>
|
||
<div class="absolute top-4 right-4 pet-badge bg-terracotta/90 rounded-full px-3 py-1 font-heading font-bold text-xs text-white">
|
||
POPULAR
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown">Rosie</h3>
|
||
<span class="font-heading font-bold text-sm text-terracotta bg-blush px-3 py-1 rounded-full">4 years</span>
|
||
</div>
|
||
<p class="font-body text-warm-gray text-sm mb-3">Border Collie mix</p>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed mb-4">Rosie is smart, athletic, and eager to please. She'd thrive with an active family who enjoys hiking, fetch, and learning new tricks together.</p>
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Smart</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Active</span>
|
||
<span class="inline-block bg-sage/15 text-sage-dark text-xs font-heading font-bold px-2 py-1 rounded-md">Trainable</span>
|
||
</div>
|
||
<a href="#adopt" class="block text-center font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white py-3 rounded-xl transition-all duration-300">Meet Rosie</a>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
<div class="text-center mt-12 animate-on-scroll">
|
||
<a href="#" class="inline-flex items-center gap-2 font-heading font-bold text-lg text-terracotta hover:text-terracotta-dark transition-colors group">
|
||
View All 42 Available Pets
|
||
<svg class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works Section -->
|
||
<section id="how-it-works" class="py-20 lg:py-28 bg-white relative z-10" aria-labelledby="how-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 animate-on-scroll">
|
||
<span class="inline-block font-heading font-bold text-sage text-sm uppercase tracking-widest mb-3">Simple Process</span>
|
||
<h2 id="how-heading" class="font-heading font-black text-4xl md:text-5xl text-warm-brown mb-4">How Adoption Works</h2>
|
||
<p class="font-body text-warm-gray text-lg max-w-2xl mx-auto">We've made the adoption process straightforward and supportive. Here's what to expect on your journey to finding your companion.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6 relative">
|
||
<!-- Step connector for desktop -->
|
||
<div class="hidden lg:block step-connector" aria-hidden="true"></div>
|
||
|
||
<!-- Step 1 -->
|
||
<div class="animate-on-scroll text-center relative">
|
||
<div class="w-16 h-16 mx-auto bg-terracotta rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-terracotta/20 relative z-10">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||
</div>
|
||
<div class="font-heading font-bold text-xs text-terracotta uppercase tracking-widest mb-2">Step 1</div>
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-3">Browse & Visit</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed">Explore our available pets online or stop by our adoption center. Spend time meeting the animals and finding your match.</p>
|
||
</div>
|
||
|
||
<!-- Step 2 -->
|
||
<div class="animate-on-scroll text-center relative">
|
||
<div class="w-16 h-16 mx-auto bg-terracotta rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-terracotta/20 relative z-10">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||
</div>
|
||
<div class="font-heading font-bold text-xs text-terracotta uppercase tracking-widest mb-2">Step 2</div>
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-3">Apply</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed">Fill out our simple application. We ask a few questions about your home, lifestyle, and experience to ensure a great fit.</p>
|
||
</div>
|
||
|
||
<!-- Step 3 -->
|
||
<div class="animate-on-scroll text-center relative">
|
||
<div class="w-16 h-16 mx-auto bg-terracotta rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-terracotta/20 relative z-10">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-5a3 3 0 00-5.356-1.857M17 20L7 10m10 10l2.29-6.857M7 10L2.5 15.5M7 10a3 3 0 003.356 1.857M7 10l-2.29 6.857"/></svg>
|
||
</div>
|
||
<div class="font-heading font-bold text-xs text-terracotta uppercase tracking-widest mb-2">Step 3</div>
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-3">Meet & Greet</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed">Our team arranges a meet-and-greet session. We'll introduce you and talk through any questions about care and compatibility.</p>
|
||
</div>
|
||
|
||
<!-- Step 4 -->
|
||
<div class="animate-on-scroll text-center relative">
|
||
<div class="w-16 h-16 mx-auto bg-sage rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-sage/20 relative z-10">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||
</div>
|
||
<div class="font-heading font-bold text-xs text-sage uppercase tracking-widest mb-2">Step 4</div>
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-3">Welcome Home</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm leading-relaxed">Sign the adoption agreement, pay the fee, and take your new family member home. We provide a starter kit and ongoing support.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Success Stories Section -->
|
||
<section id="stories" class="py-20 lg:py-28 relative z-10" aria-labelledby="stories-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 animate-on-scroll">
|
||
<span class="inline-block font-heading font-bold text-terracotta text-sm uppercase tracking-widest mb-3">Happy Tails</span>
|
||
<h2 id="stories-heading" class="font-heading font-black text-4xl md:text-5xl text-warm-brown mb-4">Stories That Warm Our Hearts</h2>
|
||
<p class="font-body text-warm-gray text-lg max-w-2xl mx-auto">Hear from families who found their perfect companion through Second Tail.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 stagger-children">
|
||
|
||
<!-- Story 1 -->
|
||
<div class="animate-on-scroll testimonial-card bg-white rounded-3xl p-8 shadow-md shadow-warm-brown/5">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-14 h-14 rounded-full bg-sage/20 flex items-center justify-center text-2xl">👩</div>
|
||
<div>
|
||
<div class="font-heading font-extrabold text-warm-brown">Sarah & Family</div>
|
||
<div class="font-body text-warm-gray text-sm">Adopted Biscuit, 2024</div>
|
||
</div>
|
||
</div>
|
||
<p class="font-body text-warm-gray/80 leading-relaxed mb-4">"We came in looking for a small dog and left with Biscuit. He transformed our home overnight. Our kids were hesitant at first, but now they can't sleep without him snuggled between them. He's not just a pet — he's family."</p>
|
||
<div class="flex gap-1">
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Story 2 -->
|
||
<div class="animate-on-scroll testimonial-card bg-white rounded-3xl p-8 shadow-md shadow-warm-brown/5">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-14 h-14 rounded-full bg-blush flex items-center justify-center text-2xl">👴</div>
|
||
<div>
|
||
<div class="font-heading font-extrabold text-warm-brown">Robert M.</div>
|
||
<div class="font-body text-warm-gray text-sm">Adopted Duke, 2024</div>
|
||
</div>
|
||
</div>
|
||
<p class="font-body text-warm-gray/80 leading-relaxed mb-4">"After my wife passed, the house felt too quiet. The staff at Second Tail suggested Duke, a senior Lab mix. They were right — his calm presence has been exactly what I needed. We take slow walks together every morning. He saved me as much as I saved him."</p>
|
||
<div class="flex gap-1">
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Story 3 -->
|
||
<div class="animate-on-scroll testimonial-card bg-white rounded-3xl p-8 shadow-md shadow-warm-brown/5">
|
||
<div class="flex items-center gap-4 mb-5">
|
||
<div class="w-14 h-14 rounded-full bg-sand flex items-center justify-center text-2xl">👩💻</div>
|
||
<div>
|
||
<div class="font-heading font-extrabold text-warm-brown">Aisha K.</div>
|
||
<div class="font-body text-warm-gray text-sm">Adopted Luna & Miso, 2024</div>
|
||
</div>
|
||
</div>
|
||
<p class="font-body text-warm-gray/80 leading-relaxed mb-4">"I adopted Luna as a solo apartment cat and six months later couldn't resist adding Miso the kitten. The staff helped me with a gradual introduction and now they're inseparable. Working from home with two cats purring around me is pure happiness."</p>
|
||
<div class="flex gap-1">
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<svg class="w-5 h-5 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Events Section -->
|
||
<section id="events" class="py-20 lg:py-28 bg-white relative z-10 overflow-hidden" aria-labelledby="events-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 animate-on-scroll">
|
||
<span class="inline-block font-heading font-bold text-sage text-sm uppercase tracking-widest mb-3">Join Us</span>
|
||
<h2 id="events-heading" class="font-heading font-black text-4xl md:text-5xl text-warm-brown mb-4">Upcoming Events</h2>
|
||
<p class="font-body text-warm-gray text-lg max-w-2xl mx-auto">Come visit us at these events. All are free and open to the public.</p>
|
||
</div>
|
||
|
||
<div class="space-y-4 stagger-children">
|
||
<!-- Event 1 -->
|
||
<div class="animate-on-scroll group bg-cream rounded-2xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8 hover:shadow-lg hover:shadow-warm-brown/5 transition-all duration-300">
|
||
<div class="flex-shrink-0 w-20 h-20 bg-terracotta rounded-2xl flex flex-col items-center justify-center text-white">
|
||
<span class="font-heading font-black text-2xl leading-none">JUN</span>
|
||
<span class="font-heading font-bold text-lg leading-none">15</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-1 group-hover:text-terracotta transition-colors">Puppy Socialization Playdate</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm mb-2">Bring your puppy (under 6 months) for a supervised play session. Great for socialization and meeting other young dogs.</p>
|
||
<div class="flex flex-wrap gap-3 text-sm text-warm-gray">
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
10:00 AM – 12:00 PM
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
Adoption Center — Indoor Yard
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="flex-shrink-0 font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white px-6 py-3 rounded-xl transition-all duration-300 text-sm whitespace-nowrap">Register</a>
|
||
</div>
|
||
|
||
<!-- Event 2 -->
|
||
<div class="animate-on-scroll group bg-cream rounded-2xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8 hover:shadow-lg hover:shadow-warm-brown/5 transition-all duration-300">
|
||
<div class="flex-shrink-0 w-20 h-20 bg-sage rounded-2xl flex flex-col items-center justify-center text-white">
|
||
<span class="font-heading font-black text-2xl leading-none">JUN</span>
|
||
<span class="font-heading font-bold text-lg leading-none">22</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-1 group-hover:text-terracotta transition-colors">Community Pet Health Fair</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm mb-2">Free health screenings, vaccination info, and meet local vets. Bring your pet for a wellness check and learn about preventive care.</p>
|
||
<div class="flex flex-wrap gap-3 text-sm text-warm-gray">
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
9:00 AM – 3:00 PM
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
Riverside Park Pavilion
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="flex-shrink-0 font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white px-6 py-3 rounded-xl transition-all duration-300 text-sm whitespace-nowrap">Register</a>
|
||
</div>
|
||
|
||
<!-- Event 3 -->
|
||
<div class="animate-on-scroll group bg-cream rounded-2xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8 hover:shadow-lg hover:shadow-warm-brown/5 transition-all duration-300">
|
||
<div class="flex-shrink-0 w-20 h-20 bg-warm-brown rounded-2xl flex flex-col items-center justify-center text-white">
|
||
<span class="font-heading font-black text-2xl leading-none">JUL</span>
|
||
<span class="font-heading font-bold text-lg leading-none">6</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<h3 class="font-heading font-extrabold text-xl text-warm-brown mb-1 group-hover:text-terracotta transition-colors">Summer Adoption Open House</h3>
|
||
<p class="font-body text-warm-gray/80 text-sm mb-2">Walk through our facility, meet all available animals, enjoy live music and food trucks. Reduced adoption fees all day!</p>
|
||
<div class="flex flex-wrap gap-3 text-sm text-warm-gray">
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
11:00 AM – 5:00 PM
|
||
</span>
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
Second Tail Adoption Center
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="flex-shrink-0 font-heading font-bold text-terracotta hover:text-terracotta-dark border-2 border-terracotta hover:bg-terracotta hover:text-white px-6 py-3 rounded-xl transition-all duration-300 text-sm whitespace-nowrap">Register</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Volunteer / CTA Section -->
|
||
<section class="py-20 lg:py-28 relative z-10 overflow-hidden" aria-labelledby="volunteer-heading">
|
||
<!-- Background decoration -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-terracotta to-terracotta-dark" aria-hidden="true"></div>
|
||
<div class="absolute inset-0 opacity-10" aria-hidden="true">
|
||
<svg class="absolute top-10 left-10 w-32 h-32 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C10.9 2 10 2.9 10 4s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6.5 7C5.1 7 4 8.1 4 9.5S5.1 12 6.5 12 9 10.9 9 9.5 7.9 7 6.5 7zm11 0c-1.4 0-2.5 1.1-2.5 2.5S16.1 12 17.5 12 20 10.9 20 9.5 18.9 7 17.5 7zM12 8c-2.8 0-5.2 1.5-6.3 3.8-.4.9-.3 1.9.2 2.8C7.1 17 9.4 19 12 19s4.9-2 6.1-4.4c.5-.9.6-1.9.2-2.8C17.2 9.5 14.8 8 12 8z"/></svg>
|
||
<svg class="absolute bottom-10 right-10 w-24 h-24 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C10.9 2 10 2.9 10 4s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-4 1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6.5 7C5.1 7 4 8.1 4 9.5S5.1 12 6.5 12 9 10.9 9 9.5 7.9 7 6.5 7zm11 0c-1.4 0-2.5 1.1-2.5 2.5S16.1 12 17.5 12 20 10.9 20 9.5 18.9 7 17.5 7zM12 8c-2.8 0-5.2 1.5-6.3 3.8-.4.9-.3 1.9.2 2.8C7.1 17 9.4 19 12 19s4.9-2 6.1-4.4c.5-.9.6-1.9.2-2.8C17.2 9.5 14.8 8 12 8z"/></svg>
|
||
</div>
|
||
|
||
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<div class="animate-on-scroll">
|
||
<h2 id="volunteer-heading" class="font-heading font-black text-4xl md:text-5xl lg:text-6xl text-white mb-6">Help Us Make More Happy Endings</h2>
|
||
<p class="font-body text-white/85 text-lg md:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">We rely on volunteers and donors to keep our doors open. Whether you can spare a few hours a week or want to support us financially, every bit makes a difference in an animal's life.</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a href="#" class="inline-flex items-center justify-center gap-2 bg-white text-terracotta font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-cream transition-all duration-300 hover:shadow-xl">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
|
||
Volunteer With Us
|
||
</a>
|
||
<a href="#" class="inline-flex items-center justify-center gap-2 bg-transparent border-2 border-white text-white font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-white/10 transition-all duration-300">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||
Make a Donation
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Newsletter Section -->
|
||
<section id="contact" class="py-20 lg:py-28 relative z-10" aria-labelledby="newsletter-heading">
|
||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<div class="animate-on-scroll">
|
||
<div class="inline-flex items-center justify-center w-16 h-16 bg-blush rounded-2xl mb-6">
|
||
<svg class="w-8 h-8 text-terracotta" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||
</div>
|
||
<h2 id="newsletter-heading" class="font-heading font-black text-3xl md:text-4xl text-warm-brown mb-3">Stay in the Loop</h2>
|
||
<p class="font-body text-warm-gray text-lg mb-8">Get weekly updates on new arrivals, success stories, and upcoming events. No spam — just paws and hearts.</p>
|
||
|
||
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto" aria-label="Newsletter signup">
|
||
<label for="email-input" class="sr-only">Your email address</label>
|
||
<input id="email-input" type="email" placeholder="your@email.com" required class="flex-grow px-6 py-4 rounded-xl bg-white border-2 border-sand focus:border-terracotta outline-none font-body text-warm-brown placeholder:text-warm-gray/50 transition-colors duration-300">
|
||
<button type="submit" class="flex-shrink-0 bg-terracotta text-white font-heading font-bold px-8 py-4 rounded-xl hover:bg-terracotta-dark transition-all duration-300 hover:shadow-lg hover:shadow-terracotta/25 whitespace-nowrap">
|
||
Subscribe
|
||
</button>
|
||
</form>
|
||
<p class="text-xs text-warm-gray/60 mt-4">We respect your privacy. Unsubscribe anytime.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Adopt CTA -->
|
||
<section id="adopt" class="py-16 relative z-10">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="animate-on-scroll bg-white rounded-3xl p-8 md:p-12 shadow-xl shadow-warm-brown/5 border border-sand/50 text-center">
|
||
<h2 class="font-heading font-black text-3xl md:text-4xl text-warm-brown mb-4">Ready to Adopt?</h2>
|
||
<p class="font-body text-warm-gray text-lg mb-8 max-w-xl mx-auto">Visit us in person or start your application online. Our team is here to guide you every step of the way.</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a href="#" class="inline-flex items-center justify-center gap-2 bg-terracotta text-white font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-terracotta-dark transition-all duration-300 hover:shadow-xl hover:shadow-terracotta/25">
|
||
Start Your Application
|
||
</a>
|
||
<a href="tel:+15551234567" class="inline-flex items-center justify-center gap-2 bg-sage text-white font-heading font-bold px-8 py-4 rounded-full text-lg hover:bg-sage-dark transition-all duration-300">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
|
||
Call (555) 123-4567
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-warm-brown text-white/80 relative z-10" role="contentinfo">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||
<!-- Brand -->
|
||
<div class="lg:col-span-1">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<svg class="w-8 h-8 text-terracotta" viewBox="0 0 40 40" fill="none">
|
||
<circle cx="14" cy="12" r="5" fill="currentColor"/>
|
||
<circle cx="26" cy="12" r="5" fill="currentColor"/>
|
||
<circle cx="20" cy="8" r="4" fill="currentColor"/>
|
||
<circle cx="10" cy="8" r="4" fill="currentColor"/>
|
||
<path d="M10 22C10 18 14.7 15 20 15S30 18 30 22V26C30 30.4 26.4 34 22 34H18C13.6 34 10 30.4 10 26V22Z" fill="currentColor"/>
|
||
</svg>
|
||
<span class="font-heading font-extrabold text-xl text-white">Second Tail</span>
|
||
</div>
|
||
<p class="font-body text-white/60 text-sm leading-relaxed mb-6">A non-profit rescue and adoption center dedicated to finding loving homes for every animal in our care. Open since 2009.</p>
|
||
<div class="flex gap-3">
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-terracotta flex items-center justify-center transition-colors duration-300" aria-label="Facebook">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.933-1.956 1.87v2.26h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-terracotta flex items-center justify-center transition-colors duration-300" aria-label="Instagram">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-terracotta flex items-center justify-center transition-colors duration-300" aria-label="Twitter / X">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links -->
|
||
<div>
|
||
<h3 class="font-heading font-bold text-white uppercase tracking-wider text-sm mb-5">Quick Links</h3>
|
||
<ul class="space-y-3">
|
||
<li><a href="#pets" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Available Pets</a></li>
|
||
<li><a href="#how-it-works" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Adoption Process</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Foster a Pet</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Volunteer</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Donate</a></li>
|
||
<li><a href="#stories" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Success Stories</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Visit Us -->
|
||
<div>
|
||
<h3 class="font-heading font-bold text-white uppercase tracking-wider text-sm mb-5">Visit Us</h3>
|
||
<div class="space-y-3">
|
||
<p class="font-body text-white/60 text-sm flex items-start gap-2">
|
||
<svg class="w-4 h-4 mt-0.5 flex-shrink-0 text-terracotta" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
742 Paw Haven Lane<br>Springfield, IL 62704
|
||
</p>
|
||
<p class="font-body text-white/60 text-sm flex items-center gap-2">
|
||
<svg class="w-4 h-4 flex-shrink-0 text-terracotta" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
Mon–Sat: 10 AM – 6 PM<br>Sun: 12 PM – 4 PM
|
||
</p>
|
||
<p class="font-body text-white/60 text-sm flex items-center gap-2">
|
||
<svg class="w-4 h-4 flex-shrink-0 text-terracotta" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
|
||
(555) 123-4567
|
||
</p>
|
||
<p class="font-body text-white/60 text-sm flex items-center gap-2">
|
||
<svg class="w-4 h-4 flex-shrink-0 text-terracotta" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||
hello@secondtail.org
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resources -->
|
||
<div>
|
||
<h3 class="font-heading font-bold text-white uppercase tracking-wider text-sm mb-5">Resources</h3>
|
||
<ul class="space-y-3">
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Pet Care Guides</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Training Tips</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Local Vets & Services</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Lost Pet Registry</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Annual Report</a></li>
|
||
<li><a href="#" class="font-body text-white/60 hover:text-terracotta transition-colors text-sm">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom bar -->
|
||
<div class="border-t border-white/10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<p class="font-body text-white/40 text-sm">© 2025 Second Tail Adoption Center. All rights reserved. A registered 501(c)(3) non-profit.</p>
|
||
<p class="font-body text-white/40 text-sm flex items-center gap-1">Made with
|
||
<svg class="w-4 h-4 text-terracotta" fill="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||
for every animal
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Mobile menu toggle
|
||
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||
const mobileMenuClose = document.getElementById('mobileMenuClose');
|
||
const mobileMenu = document.getElementById('mobileMenu');
|
||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||
|
||
function openMobileMenu() {
|
||
mobileMenu.classList.add('open');
|
||
mobileMenuBtn.setAttribute('aria-expanded', 'true');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeMobileMenu() {
|
||
mobileMenu.classList.remove('open');
|
||
mobileMenuBtn.setAttribute('aria-expanded', 'false');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
mobileMenuBtn.addEventListener('click', openMobileMenu);
|
||
mobileMenuClose.addEventListener('click', closeMobileMenu);
|
||
mobileLinks.forEach(link => link.addEventListener('click', closeMobileMenu));
|
||
|
||
// Nav scroll effect
|
||
const mainNav = document.getElementById('mainNav');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 50) {
|
||
mainNav.classList.add('nav-scrolled');
|
||
} else {
|
||
mainNav.classList.remove('nav-scrolled');
|
||
}
|
||
});
|
||
|
||
// Scroll-triggered animations
|
||
const observerOptions = {
|
||
threshold: 0.15,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
|
||
|
||
// Counter animation for stats
|
||
function animateCounters() {
|
||
const counters = document.querySelectorAll('[data-count]');
|
||
counters.forEach(counter => {
|
||
const target = parseInt(counter.getAttribute('data-count'));
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const updateCounter = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
counter.textContent = Math.floor(current).toLocaleString();
|
||
requestAnimationFrame(updateCounter);
|
||
} else {
|
||
counter.textContent = target.toLocaleString();
|
||
}
|
||
};
|
||
|
||
updateCounter();
|
||
});
|
||
}
|
||
|
||
// Trigger counter animation when stats section is visible
|
||
const statsSection = document.querySelector('[aria-label="Adoption statistics"]');
|
||
const statsObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
animateCounters();
|
||
statsObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
if (statsSection) statsObserver.observe(statsSection);
|
||
|
||
// Pet filter tabs
|
||
const filterTabs = document.querySelectorAll('.filter-tab');
|
||
const petCards = document.querySelectorAll('.pet-card');
|
||
|
||
filterTabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
const filter = tab.getAttribute('data-filter');
|
||
|
||
// Update active tab
|
||
filterTabs.forEach(t => {
|
||
t.classList.remove('bg-terracotta', 'text-white');
|
||
t.classList.add('bg-white', 'text-warm-gray');
|
||
t.setAttribute('aria-selected', 'false');
|
||
});
|
||
tab.classList.remove('bg-white', 'text-warm-gray');
|
||
tab.classList.add('bg-terracotta', 'text-white');
|
||
tab.setAttribute('aria-selected', 'true');
|
||
|
||
// Filter cards
|
||
petCards.forEach(card => {
|
||
const type = card.getAttribute('data-type');
|
||
if (filter === 'all' || type === filter) {
|
||
card.style.display = '';
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
requestAnimationFrame(() => {
|
||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
});
|
||
} else {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
setTimeout(() => {
|
||
card.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Newsletter form handling
|
||
const newsletterForm = document.querySelector('[aria-label="Newsletter signup"]');
|
||
if (newsletterForm) {
|
||
newsletterForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const emailInput = document.getElementById('email-input');
|
||
const submitBtn = newsletterForm.querySelector('button[type="submit"]');
|
||
const originalText = submitBtn.textContent;
|
||
|
||
submitBtn.textContent = '✓ Subscribed!';
|
||
submitBtn.classList.add('bg-sage');
|
||
submitBtn.classList.remove('bg-terracotta');
|
||
emailInput.value = '';
|
||
|
||
setTimeout(() => {
|
||
submitBtn.textContent = originalText;
|
||
submitBtn.classList.remove('bg-sage');
|
||
submitBtn.classList.add('bg-terracotta');
|
||
}, 3000);
|
||
});
|
||
}
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
e.preventDefault();
|
||
const navHeight = mainNav.offsetHeight;
|
||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
|
||
window.scrollTo({
|
||
top: targetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 400.89s</div></body>
|
||
</html> |