1131 lines
79 KiB
HTML
1131 lines
79 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=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
warm: {
|
||
50: '#fdf8f5',
|
||
100: '#fcefe9',
|
||
200: '#f7d5c3',
|
||
300: '#f0b696',
|
||
400: '#e89160',
|
||
500: '#e06c33',
|
||
600: '#cc5221',
|
||
700: '#a53d19',
|
||
800: '#823116',
|
||
900: '#682814',
|
||
},
|
||
sage: {
|
||
50: '#f5f7f3',
|
||
100: '#e8ede3',
|
||
200: '#d2ddd1',
|
||
300: '#b0c4ab',
|
||
400: '#8ba880',
|
||
500: '#6b8f5e',
|
||
600: '#547648',
|
||
700: '#445f39',
|
||
800: '#384d2f',
|
||
900: '#2f4127',
|
||
},
|
||
cream: '#FFFBF5',
|
||
ink: '#1A1A1A',
|
||
},
|
||
fontFamily: {
|
||
serif: ['DM Serif Display', 'Georgia', 'serif'],
|
||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
body {
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
background-color: #FFFBF5;
|
||
color: #1A1A1A;
|
||
}
|
||
.font-serif {
|
||
font-family: 'DM Serif Display', Georgia, serif;
|
||
}
|
||
.hero-gradient {
|
||
background: linear-gradient(135deg, rgba(224, 108, 51, 0.92) 0%, rgba(196, 82, 33, 0.88) 50%, rgba(165, 61, 25, 0.85) 100%);
|
||
}
|
||
.blob-shape {
|
||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||
}
|
||
.card-blob {
|
||
border-radius: 28% 72% 72% 28% / 28% 28% 72% 72%;
|
||
}
|
||
.paw-print {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e89160' opacity='0.08'%3E%3Cpath d='M12 18c-1.5 0-2.8-.5-3.8-1.5C7.2 15.5 6.5 14.2 6.5 12.8c0-1 .3-1.8.9-2.5.6-.7 1.4-1.1 2.4-1.3-.2-.5-.3-1-.3-1.5 0-1.4.8-2.5 2-2.8 1.2-.3 2.3.4 2.8 1.5.2-.8.8-1.5 1.6-1.7 1-.3 2.1.3 2.6 1.4.5 1.1.3 2.3-.4 3.2 1 .2 1.9.7 2.5 1.5.6.8.9 1.7.9 2.7 0 1.5-.7 2.8-1.8 3.7-1 1-2.3 1.5-3.7 1.5h-4z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-size: 120px;
|
||
background-position: center;
|
||
}
|
||
.animal-card {
|
||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
|
||
}
|
||
.animal-card:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: 0 20px 40px rgba(224, 108, 51, 0.15);
|
||
}
|
||
.animal-card:focus-within {
|
||
outline: 3px solid #e06c33;
|
||
outline-offset: 4px;
|
||
}
|
||
.step-circle {
|
||
position: relative;
|
||
}
|
||
.step-circle::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -4px;
|
||
border-radius: 50%;
|
||
border: 2px dashed #e89160;
|
||
animation: spin 20s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.floating-paw {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
.nav-link {
|
||
position: relative;
|
||
}
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: #e06c33;
|
||
transition: width 0.3s ease;
|
||
}
|
||
.nav-link:hover::after,
|
||
.nav-link:focus::after {
|
||
width: 100%;
|
||
}
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #e06c33, #cc5221);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, #cc5221, #a53d19);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.btn-primary:hover::before,
|
||
.btn-primary:focus::before {
|
||
opacity: 1;
|
||
}
|
||
.btn-primary span {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.btn-primary:hover,
|
||
.btn-primary:focus {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(224, 108, 51, 0.35);
|
||
}
|
||
.focus-visible-outline:focus-visible {
|
||
outline: 3px solid #e06c33;
|
||
outline-offset: 2px;
|
||
}
|
||
.testimonial-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.testimonial-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
||
}
|
||
.stat-number {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.wave-divider {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.wave-divider svg {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
.mobile-menu {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.35s ease;
|
||
}
|
||
.mobile-menu.open {
|
||
max-height: 400px;
|
||
}
|
||
.scroll-reveal {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.scroll-reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 10px;
|
||
border-radius: 9999px;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.03em;
|
||
text-transform: uppercase;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
|
||
<!-- Skip to main content link for accessibility -->
|
||
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-warm-600 focus:text-white focus:px-4 focus:py-2 focus:rounded-lg focus-visible-outline">
|
||
Skip to main content
|
||
</a>
|
||
|
||
<!-- Navigation -->
|
||
<header class="fixed top-0 left-0 right-0 z-40 bg-cream/90 backdrop-blur-md border-b border-warm-100/50">
|
||
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" aria-label="Main navigation">
|
||
<div class="flex items-center justify-between h-16 lg:h-20">
|
||
<!-- Logo -->
|
||
<a href="#" class="flex items-center gap-2 focus-visible-outline rounded-lg" aria-label="Second Tail Pet Adoption Center - Home">
|
||
<div class="w-9 h-9 lg:w-10 lg:h-10 bg-gradient-to-br from-warm-500 to-warm-700 rounded-xl flex items-center justify-center shadow-md">
|
||
<svg class="w-5 h-5 lg:w-6 lg:h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 18c-1.5 0-2.8-.5-3.8-1.5C7.2 15.5 6.5 14.2 6.5 12.8c0-1 .3-1.8.9-2.5.6-.7 1.4-1.1 2.4-1.3-.2-.5-.3-1-.3-1.5 0-1.4.8-2.5 2-2.8 1.2-.3 2.3.4 2.8 1.5.2-.8.8-1.5 1.6-1.7 1-.3 2.1.3 2.6 1.4.5 1.1.3 2.3-.4 3.2 1 .2 1.9.7 2.5 1.5.6.8.9 1.7.9 2.7 0 1.5-.7 2.8-1.8 3.7-1 1-2.3 1.5-3.7 1.5h-4z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="hidden sm:block">
|
||
<span class="font-serif text-xl lg:text-2xl text-ink tracking-tight">Second Tail</span>
|
||
<p class="text-[0.6rem] text-warm-600 font-medium tracking-widest uppercase -mt-0.5">Pet Adoption Center</p>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Desktop nav -->
|
||
<div class="hidden lg:flex items-center gap-8">
|
||
<a href="#animals" class="nav-link text-sm font-medium text-gray-700 hover:text-warm-600 transition-colors focus-visible-outline">Our Animals</a>
|
||
<a href="#process" class="nav-link text-sm font-medium text-gray-700 hover:text-warm-600 transition-colors focus-visible-outline">How It Works</a>
|
||
<a href="#stories" class="nav-link text-sm font-medium text-gray-700 hover:text-warm-600 transition-colors focus-visible-outline">Success Stories</a>
|
||
<a href="#events" class="nav-link text-sm font-medium text-gray-700 hover:text-warm-600 transition-colors focus-visible-outline">Events</a>
|
||
<a href="#volunteer" class="nav-link text-sm font-medium text-gray-700 hover:text-warm-600 transition-colors focus-visible-outline">Volunteer</a>
|
||
<a href="#contact" class="btn-primary text-white text-sm font-semibold px-5 py-2.5 rounded-full focus-visible-outline">
|
||
<span>Visit Us</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Mobile menu button -->
|
||
<button id="menu-toggle" class="lg:hidden p-2 text-ink rounded-lg hover:bg-warm-100/50 transition-colors focus-visible-outline" aria-label="Toggle menu" aria-expanded="false">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path id="menu-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Mobile menu -->
|
||
<div id="mobile-menu" class="mobile-menu lg:hidden pb-4" role="menu">
|
||
<a href="#animals" class="block px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-warm-600 hover:bg-warm-50 rounded-lg transition-colors focus-visible-outline" role="menuitem">Our Animals</a>
|
||
<a href="#process" class="block px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-warm-600 hover:bg-warm-50 rounded-lg transition-colors focus-visible-outline" role="menuitem">How It Works</a>
|
||
<a href="#stories" class="block px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-warm-600 hover:bg-warm-50 rounded-lg transition-colors focus-visible-outline" role="menuitem">Success Stories</a>
|
||
<a href="#events" class="block px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-warm-600 hover:bg-warm-50 rounded-lg transition-colors focus-visible-outline" role="menuitem">Events</a>
|
||
<a href="#volunteer" class="block px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-warm-600 hover:bg-warm-50 rounded-lg transition-colors focus-visible-outline" role="menuitem">Volunteer</a>
|
||
<a href="#contact" class="block mt-3 mx-3 btn-primary text-white text-sm font-semibold text-center px-5 py-2.5 rounded-full focus-visible-outline" role="menuitem">Visit Us</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative min-h-screen flex items-center pt-20 lg:pt-0" aria-label="Hero">
|
||
<div class="absolute inset-0">
|
||
<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 class="hero-gradient absolute inset-0"></div>
|
||
</div>
|
||
|
||
<!-- Decorative elements -->
|
||
<div class="absolute top-32 right-8 lg:right-20 w-24 h-24 lg:w-32 lg:h-32 bg-white/10 rounded-full blur-xl floating-paw" aria-hidden="true"></div>
|
||
<div class="absolute bottom-20 left-8 lg:left-20 w-16 h-16 lg:w-24 lg:h-24 bg-sage-400/20 rounded-full blur-lg" aria-hidden="true"></div>
|
||
|
||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-0">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div class="text-white">
|
||
<div class="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||
<span class="w-2 h-2 bg-sage-400 rounded-full animate-pulse"></span>
|
||
<span class="text-xs font-semibold tracking-wider uppercase">Now welcoming new families</span>
|
||
</div>
|
||
|
||
<h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] mb-6">
|
||
Every pet deserves a <em class="text-warm-200">second tail</em>
|
||
</h1>
|
||
|
||
<p class="text-base sm:text-lg lg:text-xl text-warm-100/90 mb-8 max-w-lg leading-relaxed">
|
||
We match loving animals with their perfect forever families. No judgment, no rush — just genuine connections between pets who need homes and people ready to open their hearts.
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<a href="#animals" class="btn-primary text-white font-semibold px-7 py-3.5 rounded-full text-sm tracking-wide focus-visible-outline inline-flex items-center justify-center gap-2">
|
||
<span>Meet Our Animals</span>
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||
</a>
|
||
<a href="#process" class="bg-white/15 backdrop-blur-sm text-white font-semibold px-7 py-3.5 rounded-full text-sm tracking-wide hover:bg-white/25 transition-colors focus-visible-outline inline-flex items-center justify-center gap-2">
|
||
<span>How Adoption Works</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Photo attribution -->
|
||
<div class="mt-8 text-xs text-warm-200/70">
|
||
Photo by <a href="https://www.pexels.com/photo/dogs-with-their-owners-in-a-park-16652369/" target="_blank" rel="noopener noreferrer" class="underline hover:text-warm-100 transition-colors focus-visible-outline">Matheus Bertelli</a> on Pexels
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats card -->
|
||
<div class="hidden lg:flex justify-end">
|
||
<div class="bg-white/10 backdrop-blur-md rounded-3xl p-8 border border-white/20 w-80">
|
||
<div class="text-white/70 text-xs font-semibold uppercase tracking-widest mb-6">Our Impact This Year</div>
|
||
<div class="space-y-5">
|
||
<div>
|
||
<div class="text-4xl font-serif text-white stat-number">1,247</div>
|
||
<div class="text-sm text-warm-200/80 mt-1">Animals found forever homes</div>
|
||
</div>
|
||
<div class="h-px bg-white/15"></div>
|
||
<div>
|
||
<div class="text-4xl font-serif text-white stat-number">98%</div>
|
||
<div class="text-sm text-warm-200/80 mt-1">Adoption success rate</div>
|
||
</div>
|
||
<div class="h-px bg-white/15"></div>
|
||
<div>
|
||
<div class="text-4xl font-serif text-white stat-number">342</div>
|
||
<div class="text-sm text-warm-200/80 mt-1">Active volunteers</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Wave divider -->
|
||
<div class="wave-divider">
|
||
<svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<path d="M0 60C240 120 480 0 720 60C960 120 1200 0 1440 60V120H0V60Z" fill="#FFFBF5"/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<main id="main-content">
|
||
|
||
<!-- Featured Animals Section -->
|
||
<section id="animals" class="py-20 lg:py-28 px-4 sm:px-6 lg:px-8" aria-labelledby="animals-heading">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-16 scroll-reveal">
|
||
<span class="badge bg-warm-100 text-warm-700 mb-4">
|
||
<svg class="w-3 h-3" 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>
|
||
Currently Available
|
||
</span>
|
||
<h2 id="animals-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink mb-4">Meet our friends looking for you</h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-base lg:text-lg">
|
||
Each of these wonderful animals has been fully vetted, vaccinated, and is ready to bring joy to a loving home. Come visit — the right one might just wait for you.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Filter tabs -->
|
||
<div class="flex flex-wrap justify-center gap-3 mb-12 scroll-reveal">
|
||
<button class="filter-btn active bg-warm-600 text-white px-5 py-2 rounded-full text-sm font-semibold transition-all focus-visible-outline" data-filter="all">All Pets</button>
|
||
<button class="filter-btn bg-warm-50 text-warm-700 hover:bg-warm-100 px-5 py-2 rounded-full text-sm font-semibold transition-all focus-visible-outline" data-filter="dog">Dogs</button>
|
||
<button class="filter-btn bg-warm-50 text-warm-700 hover:bg-warm-100 px-5 py-2 rounded-full text-sm font-semibold transition-all focus-visible-outline" data-filter="cat">Cats</button>
|
||
<button class="filter-btn bg-warm-50 text-warm-700 hover:bg-warm-100 px-5 py-2 rounded-full text-sm font-semibold transition-all focus-visible-outline" data-filter="senior">Senior Pets</button>
|
||
</div>
|
||
|
||
<!-- Animal cards grid -->
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" role="list">
|
||
<!-- Card 1 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="dog">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-amber-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-amber-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.5 2 6 4.5 6 7.5c0 1.5.5 2.8 1.5 3.8L6 18h12l-1.5-6.7C16.5 10.3 17 9 17 7.5 17 4.5 14.5 2 12 2z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-amber-700 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-sage-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Great with kids
|
||
</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Bailey</h3>
|
||
<p class="text-sm text-gray-500">Golden Retriever Mix • Female • 2 years</p>
|
||
</div>
|
||
<span class="badge bg-warm-100 text-warm-700 text-[0.55rem]">Dog</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Bailey is a sunshine-filled soul who loves belly rubs, long walks, and playing fetch until she drops. She's great with children and other dogs.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Bailey
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 2 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="cat">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-violet-100 to-purple-100 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-violet-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-violet-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 2.5 1 4.5 2.5 6L6 20h12l-1.5-5C18 13.5 19 11.5 19 9c0-4-3-7-7-7z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-violet-700 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-warm-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Gentle & calm
|
||
</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Mochi</h3>
|
||
<p class="text-sm text-gray-500">Domestic Shorthair • Male • 1 year</p>
|
||
</div>
|
||
<span class="badge bg-violet-100 text-violet-700 text-[0.55rem]">Cat</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Mochi is a curious little explorer with big personality. He adores window perches, chasing feather toys, and giving slow blinks to his favorite humans.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Mochi
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 3 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="dog senior">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-slate-100 to-gray-200 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-slate-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-slate-600" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.5 2 6 4.5 6 7.5c0 1.5.5 2.8 1.5 3.8L6 18h12l-1.5-6.7C16.5 10.3 17 9 17 7.5 17 4.5 14.5 2 12 2z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-slate-600 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-sage-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Low energy
|
||
</span>
|
||
<span class="absolute top-4 right-4 badge bg-amber-100 text-amber-800 text-[0.55rem]">Senior</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Oscar</h3>
|
||
<p class="text-sm text-gray-500">Labrador Retriever • Male • 10 years</p>
|
||
</div>
|
||
<span class="badge bg-warm-100 text-warm-700 text-[0.55rem]">Dog</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Oscar is a dignified gentleman who enjoys slow strolls, sunny naps, and being a loving companion. He's perfect for a quiet home with someone who appreciates gentle souls.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Oscar
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 4 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="cat">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-rose-100 to-pink-100 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-rose-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-rose-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 2.5 1 4.5 2.5 6L6 20h12l-1.5-5C18 13.5 19 11.5 19 9c0-4-3-7-7-7z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-rose-700 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-rose-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Playful
|
||
</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Luna</h3>
|
||
<p class="text-sm text-gray-500">Siamese Mix • Female • 3 years</p>
|
||
</div>
|
||
<span class="badge bg-violet-100 text-violet-700 text-[0.55rem]">Cat</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Luna is chatty, clever, and full of personality. She loves interactive play and will follow you from room to room, making sure you never miss a moment of her life.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Luna
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 5 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="dog">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-emerald-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-emerald-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.5 2 6 4.5 6 7.5c0 1.5.5 2.8 1.5 3.8L6 18h12l-1.5-6.7C16.5 10.3 17 9 17 7.5 17 4.5 14.5 2 12 2z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-emerald-700 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-emerald-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Active & fun
|
||
</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Rex</h3>
|
||
<p class="text-sm text-gray-500">German Shepherd Mix • Male • 4 years</p>
|
||
</div>
|
||
<span class="badge bg-warm-100 text-warm-700 text-[0.55rem]">Dog</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Rex is an athletic and loyal companion who thrives on activity. He's well-trained, knows his commands, and would be perfect for an active family or individual.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Rex
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Card 6 -->
|
||
<article class="animal-card bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100 scroll-reveal" role="listitem" data-category="cat senior">
|
||
<div class="relative">
|
||
<div class="h-56 bg-gradient-to-br from-indigo-100 to-blue-100 flex items-center justify-center">
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 mx-auto mb-3 bg-indigo-200 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-indigo-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 2.5 1 4.5 2.5 6L6 20h12l-1.5-5C18 13.5 19 11.5 19 9c0-4-3-7-7-7z"/></svg>
|
||
</div>
|
||
<p class="text-xs text-indigo-700 font-medium">Photo coming soon</p>
|
||
</div>
|
||
</div>
|
||
<span class="absolute top-4 left-4 badge bg-indigo-500 text-white text-[0.6rem]">
|
||
<svg class="w-2.5 h-2.5" 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>
|
||
Lap cat
|
||
</span>
|
||
<span class="absolute top-4 right-4 badge bg-amber-100 text-amber-800 text-[0.55rem]">Senior</span>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h3 class="font-serif text-xl text-ink">Duchess</h3>
|
||
<p class="text-sm text-gray-500">Persian Mix • Female • 12 years</p>
|
||
</div>
|
||
<span class="badge bg-violet-100 text-violet-700 text-[0.55rem]">Cat</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-4 leading-relaxed">Duchess is a refined lady who loves long grooming sessions and cozy laps. She's the perfect companion for someone who wants a calm, affectionate friend.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1.5 text-sm font-semibold text-warm-600 hover:text-warm-700 transition-colors focus-visible-outline rounded-lg">
|
||
Meet Duchess
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="text-center mt-12 scroll-reveal">
|
||
<a href="#contact" class="inline-flex items-center gap-2 text-warm-600 font-semibold hover:text-warm-700 transition-colors focus-visible-outline">
|
||
<span>View all available animals</span>
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works Section -->
|
||
<section id="process" class="py-20 lg:py-28 bg-sage-50/50 relative overflow-hidden" aria-labelledby="process-heading">
|
||
<!-- Background decoration -->
|
||
<div class="absolute top-0 right-0 w-96 h-96 bg-sage-100/40 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" aria-hidden="true"></div>
|
||
<div class="absolute bottom-0 left-0 w-72 h-72 bg-warm-100/30 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" aria-hidden="true"></div>
|
||
|
||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 scroll-reveal">
|
||
<span class="badge bg-sage-100 text-sage-700 mb-4">Simple & Caring</span>
|
||
<h2 id="process-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink mb-4">How adoption works</h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-base lg:text-lg">
|
||
We've made the process straightforward and friendly. Our goal is to help you find the right pet without any stress or confusion.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<!-- Step 1 -->
|
||
<div class="text-center scroll-reveal">
|
||
<div class="w-16 h-16 mx-auto mb-5 bg-white rounded-2xl shadow-sm border border-sage-100 flex items-center justify-center step-circle">
|
||
<span class="text-2xl font-serif text-sage-700 font-bold">1</span>
|
||
</div>
|
||
<h3 class="font-serif text-xl text-ink mb-2">Browse & Connect</h3>
|
||
<p class="text-sm text-gray-600 leading-relaxed">Look through our available pets online or visit our center. Take your time getting to know each animal's personality.</p>
|
||
</div>
|
||
|
||
<!-- Step 2 -->
|
||
<div class="text-center scroll-reveal" style="transition-delay: 0.1s;">
|
||
<div class="w-16 h-16 mx-auto mb-5 bg-white rounded-2xl shadow-sm border border-sage-100 flex items-center justify-center step-circle">
|
||
<span class="text-2xl font-serif text-sage-700 font-bold">2</span>
|
||
</div>
|
||
<h3 class="font-serif text-xl text-ink mb-2">Meet & Greet</h3>
|
||
<p class="text-sm text-gray-600 leading-relaxed">Schedule a visit to spend quality time with your potential new family member. We'll help facilitate a comfortable meeting.</p>
|
||
</div>
|
||
|
||
<!-- Step 3 -->
|
||
<div class="text-center scroll-reveal" style="transition-delay: 0.2s;">
|
||
<div class="w-16 h-16 mx-auto mb-5 bg-white rounded-2xl shadow-sm border border-sage-100 flex items-center justify-center step-circle">
|
||
<span class="text-2xl font-serif text-sage-700 font-bold">3</span>
|
||
</div>
|
||
<h3 class="font-serif text-xl text-ink mb-2">Simple Application</h3>
|
||
<p class="text-sm text-gray-600 leading-relaxed">Complete a brief, friendly application. We just want to make sure it's a good match for everyone involved.</p>
|
||
</div>
|
||
|
||
<!-- Step 4 -->
|
||
<div class="text-center scroll-reveal" style="transition-delay: 0.3s;">
|
||
<div class="w-16 h-16 mx-auto mb-5 bg-white rounded-2xl shadow-sm border border-sage-100 flex items-center justify-center step-circle">
|
||
<span class="text-2xl font-serif text-sage-700 font-bold">4</span>
|
||
</div>
|
||
<h3 class="font-serif text-xl text-ink mb-2">Welcome Home!</h3>
|
||
<p class="text-sm text-gray-600 leading-relaxed">Take your new family member home, complete with vaccinations, microchip, and a starter care kit. We're here for ongoing support.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Note card -->
|
||
<div class="mt-12 max-w-2xl mx-auto bg-white rounded-2xl p-6 border border-sage-100 shadow-sm scroll-reveal">
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 bg-sage-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-5 h-5 text-sage-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-ink mb-1">Good to know</h4>
|
||
<p class="text-sm text-gray-600">Our adoption fee covers vaccinations, spay/neuter, microchipping, and a health check. We also provide 30 days of complimentary support after adoption.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Success Stories Section -->
|
||
<section id="stories" class="py-20 lg:py-28 bg-cream" aria-labelledby="stories-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex flex-col lg:flex-row items-start gap-12 lg:gap-16">
|
||
<div class="lg:w-1/3 lg:sticky lg:top-24 scroll-reveal">
|
||
<span class="badge bg-amber-100 text-amber-800 mb-4">
|
||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||
Real Stories
|
||
</span>
|
||
<h2 id="stories-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink mb-4">Happy tails from our community</h2>
|
||
<p class="text-gray-600 text-base lg:text-lg leading-relaxed">
|
||
Nothing makes us happier than hearing about the bonds being formed between our animals and their new families. Here are some of our favorite stories.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="lg:w-2/3 space-y-6">
|
||
<!-- Story 1 -->
|
||
<blockquote class="testimonial-card bg-white rounded-2xl p-6 lg:p-8 border border-gray-100 shadow-sm scroll-reveal">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-warm-400 to-warm-600 rounded-full flex items-center justify-center text-white font-serif text-lg font-bold">
|
||
S
|
||
</div>
|
||
<div>
|
||
<cite class="font-semibold text-ink not-italic">Sarah M.</cite>
|
||
<p class="text-xs text-gray-500">Adopted Daisy, a 3-year-old beagle mix</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 leading-relaxed italic">
|
||
"I wasn't sure I was ready for a dog after moving to the city alone, but Daisy changed everything. Three months later, she's the reason I walk outside every day, make friends at the park, and feel truly at home. Second Tail made the whole process so easy and supportive."
|
||
</p>
|
||
</blockquote>
|
||
|
||
<!-- Story 2 -->
|
||
<blockquote class="testimonial-card bg-white rounded-2xl p-6 lg:p-8 border border-gray-100 shadow-sm scroll-reveal">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-sage-400 to-sage-600 rounded-full flex items-center justify-center text-white font-serif text-lg font-bold">
|
||
J
|
||
</div>
|
||
<div>
|
||
<cite class="font-semibold text-ink not-italic">James & Priya T.</cite>
|
||
<p class="text-xs text-gray-500">Adopted two senior cats, Winston and Cleo</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 leading-relaxed italic">
|
||
"We decided to adopt senior cats because we wanted something quieter after our kids left for college. The team at Second Tail helped us find Winston and Cleo, a bonded pair. They've brought our empty house back to life with their purrs and gentle companionship."
|
||
</p>
|
||
</blockquote>
|
||
|
||
<!-- Story 3 -->
|
||
<blockquote class="testimonial-card bg-white rounded-2xl p-6 lg:p-8 border border-gray-100 shadow-sm scroll-reveal">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-violet-400 to-violet-600 rounded-full flex items-center justify-center text-white font-serif text-lg font-bold">
|
||
M
|
||
</div>
|
||
<div>
|
||
<cite class="font-semibold text-ink not-italic">Marcus L.</cite>
|
||
<p class="text-xs text-gray-500">Adopted Rocky, a rescue pit bull mix</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-700 leading-relaxed italic">
|
||
"Rocky had a rough start, but the Second Tail team worked with him and helped me understand exactly how to support him. People judge him for his breed before they know him — but he's the sweetest, most loyal dog I've ever had. He's literally saved my mental health."
|
||
</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Events Section -->
|
||
<section id="events" class="py-20 lg:py-28 bg-warm-600 text-white relative overflow-hidden" aria-labelledby="events-heading">
|
||
<!-- Background pattern -->
|
||
<div class="absolute inset-0 opacity-5" aria-hidden="true">
|
||
<div class="paw-print w-full h-full"></div>
|
||
</div>
|
||
|
||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-16 scroll-reveal">
|
||
<span class="badge bg-white/20 text-white mb-4">
|
||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>
|
||
Upcoming Events
|
||
</span>
|
||
<h2 id="events-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl mb-4">Join us in person</h2>
|
||
<p class="text-warm-200/80 max-w-2xl mx-auto text-base lg:text-lg">
|
||
Come meet our animals, learn about responsible pet ownership, and connect with fellow animal lovers. All events are free and open to the public.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- Event 1 -->
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/15 hover:bg-white/15 transition-colors scroll-reveal">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-12 h-12 bg-white rounded-xl flex flex-col items-center justify-center text-warm-700">
|
||
<span class="text-xs font-bold uppercase leading-none">Nov</span>
|
||
<span class="text-lg font-serif font-bold leading-none">15</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-white">Sip & Sniff Social</h3>
|
||
<p class="text-xs text-warm-200/80">6:00 PM – 8:00 PM</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-warm-100/80 mb-4">Meet our dogs in a relaxed evening setting with complimentary drinks and light snacks. Great for first-time visitors!</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1 text-sm font-semibold text-warm-200 hover:text-white transition-colors focus-visible-outline">
|
||
<span>RSVP now</span>
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Event 2 -->
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/15 hover:bg-white/15 transition-colors scroll-reveal" style="transition-delay: 0.1s;">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-12 h-12 bg-white rounded-xl flex flex-col items-center justify-center text-warm-700">
|
||
<span class="text-xs font-bold uppercase leading-none">Nov</span>
|
||
<span class="text-lg font-serif font-bold leading-none">22</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-white">Puppy Training 101</h3>
|
||
<p class="text-xs text-warm-200/80">10:00 AM – 11:30 AM</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-warm-100/80 mb-4">New puppy parent? Join our certified trainer for basics on house training, socialization, and building good habits from day one.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1 text-sm font-semibold text-warm-200 hover:text-white transition-colors focus-visible-outline">
|
||
<span>RSVP now</span>
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Event 3 -->
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/15 hover:bg-white/15 transition-colors scroll-reveal" style="transition-delay: 0.2s;">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-12 h-12 bg-white rounded-xl flex flex-col items-center justify-center text-warm-700">
|
||
<span class="text-xs font-bold uppercase leading-none">Nov</span>
|
||
<span class="text-lg font-serif font-bold leading-none">29</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-white">Thankful Tails Fundraiser</h3>
|
||
<p class="text-xs text-warm-200/80">11:00 AM – 4:00 PM</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-warm-100/80 mb-4">Our annual gratitude event with a bake sale, pet photoshoot, adoption meet-and-greets, and a raffle. All proceeds support our animals.</p>
|
||
<a href="#contact" class="inline-flex items-center gap-1 text-sm font-semibold text-warm-200 hover:text-white transition-colors focus-visible-outline">
|
||
<span>RSVP now</span>
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Volunteer Section -->
|
||
<section id="volunteer" class="py-20 lg:py-28 bg-cream" aria-labelledby="volunteer-heading">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
<div class="scroll-reveal">
|
||
<span class="badge bg-sage-100 text-sage-700 mb-4">
|
||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
|
||
Get Involved
|
||
</span>
|
||
<h2 id="volunteer-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink mb-4">More than a shelter — a community</h2>
|
||
<p class="text-gray-600 text-base lg:text-lg mb-6 leading-relaxed">
|
||
We wouldn't be where we are without our incredible volunteers. Whether you have an hour a week or ten, there's a meaningful way for you to help our animals.
|
||
</p>
|
||
|
||
<ul class="space-y-4 mb-8">
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-6 h-6 bg-sage-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<svg class="w-3.5 h-3.5 text-sage-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||
</div>
|
||
<span class="text-gray-700">Walk dogs and socialize cats in our play area</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-6 h-6 bg-sage-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<svg class="w-3.5 h-3.5 text-sage-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||
</div>
|
||
<span class="text-gray-700">Help with foster care for animals needing special attention</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-6 h-6 bg-sage-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<svg class="w-3.5 h-3.5 text-sage-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||
</div>
|
||
<span class="text-gray-700">Assist at adoption events and community outreach</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="w-6 h-6 bg-sage-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<svg class="w-3.5 h-3.5 text-sage-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
|
||
</div>
|
||
<span class="text-gray-700">Donate supplies, food, or professional skills</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<a href="#contact" class="btn-primary text-white font-semibold px-7 py-3.5 rounded-full text-sm tracking-wide focus-visible-outline inline-flex items-center gap-2">
|
||
<span>Become a Volunteer</span>
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="scroll-reveal">
|
||
<div class="relative">
|
||
<div class="bg-gradient-to-br from-sage-100 to-sage-200 rounded-3xl p-8 lg:p-10">
|
||
<div class="flex items-center gap-4 mb-8">
|
||
<div class="flex -space-x-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-warm-400 to-warm-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
|
||
<div class="w-10 h-10 bg-gradient-to-br from-sage-400 to-sage-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">K</div>
|
||
<div class="w-10 h-10 bg-gradient-to-br from-violet-400 to-violet-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">R</div>
|
||
<div class="w-10 h-10 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">J</div>
|
||
</div>
|
||
<p class="text-sm text-sage-700 font-medium">+338 other volunteers</p>
|
||
</div>
|
||
|
||
<blockquote class="text-gray-700 italic leading-relaxed mb-6">
|
||
"I started volunteering to help with my anxiety, but it ended up doing the opposite of what I expected — meeting the animals gave me so much joy and purpose. I've been coming every Saturday for two years now, and I wouldn't trade it for anything."
|
||
</blockquote>
|
||
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 bg-sage-600 rounded-full flex items-center justify-center text-white font-serif">T</div>
|
||
<div>
|
||
<cite class="text-sm font-semibold text-ink not-italic">Tina R.</cite>
|
||
<p class="text-xs text-gray-500">Volunteer, 2 years</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact / Visit Us Section -->
|
||
<section id="contact" class="py-20 lg:py-28 bg-sage-900 text-white relative overflow-hidden" aria-labelledby="contact-heading">
|
||
<div class="absolute inset-0 opacity-10" aria-hidden="true">
|
||
<div class="w-[600px] h-[600px] bg-warm-500 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"></div>
|
||
</div>
|
||
|
||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16">
|
||
<div class="scroll-reveal">
|
||
<span class="badge bg-white/15 text-white mb-4">
|
||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
|
||
Visit Our Center
|
||
</span>
|
||
<h2 id="contact-heading" class="font-serif text-3xl sm:text-4xl lg:text-5xl mb-4">We'd love to see you</h2>
|
||
<p class="text-sage-200/80 text-base lg:text-lg mb-8 leading-relaxed">
|
||
Stop by our center to meet our animals in person. Our friendly staff will help you explore, answer your questions, and guide you through the adoption process.
|
||
</p>
|
||
|
||
<div class="space-y-5">
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-5 h-5 text-warm-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-white mb-1">Our Location</h4>
|
||
<p class="text-sm text-sage-200/80">247 Maplewood Avenue<br>Springfield, IL 62704</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-5 h-5 text-warm-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-white mb-1">Hours</h4>
|
||
<p class="text-sm text-sage-200/80">Mon–Fri: 10:00 AM – 6:00 PM<br>Sat–Sun: 10:00 AM – 4:00 PM</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-5 h-5 text-warm-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-white mb-1">Phone</h4>
|
||
<p class="text-sm text-sage-200/80">(217) 555-0142</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<svg class="w-5 h-5 text-warm-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
<div>
|
||
<h4 class="font-semibold text-white mb-1">Email</h4>
|
||
<p class="text-sm text-sage-200/80">hello@secondtail.org</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact form -->
|
||
<div class="scroll-reveal">
|
||
<form class="bg-white/5 backdrop-blur-sm rounded-3xl p-6 lg:p-8 border border-white/10 space-y-5" aria-label="Contact form">
|
||
<h3 class="font-serif text-2xl text-white mb-1">Send us a message</h3>
|
||
<p class="text-sm text-sage-200/70 mb-4">Ask about a specific animal, schedule a visit, or reach out with any question.</p>
|
||
|
||
<div class="grid sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label for="name" class="block text-sm font-medium text-sage-200 mb-1.5">Your name</label>
|
||
<input type="text" id="name" name="name" required class="w-full px-4 py-2.5 bg-white/10 border border-white/15 rounded-xl text-white placeholder-white/40 text-sm focus:outline-none focus:ring-2 focus:ring-warm-400 focus:border-transparent focus-visible-outline transition-all" placeholder="Jane Doe">
|
||
</div>
|
||
<div>
|
||
<label for="email" class="block text-sm font-medium text-sage-200 mb-1.5">Email address</label>
|
||
<input type="email" id="email" name="email" required class="w-full px-4 py-2.5 bg-white/10 border border-white/15 rounded-xl text-white placeholder-white/40 text-sm focus:outline-none focus:ring-2 focus:ring-warm-400 focus:border-transparent focus-visible-outline transition-all" placeholder="jane@example.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="interest" class="block text-sm font-medium text-sage-200 mb-1.5">What are you interested in?</label>
|
||
<select id="interest" name="interest" class="w-full px-4 py-2.5 bg-white/10 border border-white/15 rounded-xl text-white text-sm focus:outline-none focus:ring-2 focus:ring-warm-400 focus:border-transparent focus-visible-outline transition-all appearance-none">
|
||
<option value="" class="text-gray-800">Select an option...</option>
|
||
<option value="adopt" class="text-gray-800">Adopting a pet</option>
|
||
<option value="volunteer" class="text-gray-800">Volunteering</option>
|
||
<option value="donate" class="text-gray-800">Donating</option>
|
||
<option value="event" class="text-gray-800">Event information</option>
|
||
<option value="other" class="text-gray-800">Other question</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="message" class="block text-sm font-medium text-sage-200 mb-1.5">Your message</label>
|
||
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2.5 bg-white/10 border border-white/15 rounded-xl text-white placeholder-white/40 text-sm focus:outline-none focus:ring-2 focus:ring-warm-400 focus:border-transparent focus-visible-outline transition-all resize-none" placeholder="Tell us what's on your mind..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary w-full text-white font-semibold px-7 py-3.5 rounded-full text-sm tracking-wide focus-visible-outline">
|
||
<span>Send Message</span>
|
||
</button>
|
||
|
||
<p class="text-xs text-sage-300/50 text-center">We typically respond within 24 hours on business days.</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-ink text-white py-12 lg:py-16" aria-label="Footer">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-12">
|
||
<div class="sm:col-span-2 lg:col-span-1">
|
||
<a href="#" class="flex items-center gap-2 mb-4 focus-visible-outline rounded-lg">
|
||
<div class="w-9 h-9 bg-gradient-to-br from-warm-500 to-warm-700 rounded-xl flex items-center justify-center shadow-md">
|
||
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 18c-1.5 0-2.8-.5-3.8-1.5C7.2 15.5 6.5 14.2 6.5 12.8c0-1 .3-1.8.9-2.5.6-.7 1.4-1.1 2.4-1.3-.2-.5-.3-1-.3-1.5 0-1.4.8-2.5 2-2.8 1.2-.3 2.3.4 2.8 1.5.2-.8.8-1.5 1.6-1.7 1-.3 2.1.3 2.6 1.4.5 1.1.3 2.3-.4 3.2 1 .2 1.9.7 2.5 1.5.6.8.9 1.7.9 2.7 0 1.5-.7 2.8-1.8 3.7-1 1-2.3 1.5-3.7 1.5h-4z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="font-serif text-xl text-white tracking-tight">Second Tail</span>
|
||
</a>
|
||
<p class="text-sm text-gray-400 leading-relaxed">Giving animals a second chance at happiness since 2012. A 501(c)(3) nonprofit organization.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold text-sm uppercase tracking-wider text-gray-400 mb-4">Quick Links</h4>
|
||
<ul class="space-y-2.5">
|
||
<li><a href="#animals" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Our Animals</a></li>
|
||
<li><a href="#process" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Adoption Process</a></li>
|
||
<li><a href="#events" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Upcoming Events</a></li>
|
||
<li><a href="#volunteer" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Volunteer</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold text-sm uppercase tracking-wider text-gray-400 mb-4">Support</h4>
|
||
<ul class="space-y-2.5">
|
||
<li><a href="#" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Donate</a></li>
|
||
<li><a href="#" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Sponsor an Animal</a></li>
|
||
<li><a href="#" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Corporate Partnerships</a></li>
|
||
<li><a href="#" class="text-sm text-gray-300 hover:text-warm-400 transition-colors focus-visible-outline inline-block">Leave a Review</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold text-sm uppercase tracking-wider text-gray-400 mb-4">Follow Us</h4>
|
||
<div class="flex gap-3">
|
||
<a href="#" class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center hover:bg-warm-600 transition-colors focus-visible-outline" aria-label="Follow us on 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.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.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 bg-white/10 rounded-xl flex items-center justify-center hover:bg-warm-600 transition-colors focus-visible-outline" aria-label="Follow us on 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 bg-white/10 rounded-xl flex items-center justify-center hover:bg-warm-600 transition-colors focus-visible-outline" aria-label="Follow us on Twitter">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="border-t border-white/10 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||
<p class="text-xs text-gray-500">© 2024 Second Tail Pet Adoption Center. All rights reserved.</p>
|
||
<div class="flex gap-6">
|
||
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors focus-visible-outline inline-block">Privacy Policy</a>
|
||
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors focus-visible-outline inline-block">Terms of Use</a>
|
||
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors focus-visible-outline inline-block">Accessibility</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Mobile menu toggle
|
||
const menuToggle = document.getElementById('menu-toggle');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
const menuIcon = document.getElementById('menu-icon');
|
||
|
||
menuToggle.addEventListener('click', () => {
|
||
const isOpen = mobileMenu.classList.toggle('open');
|
||
menuToggle.setAttribute('aria-expanded', isOpen);
|
||
menuIcon.setAttribute('d', isOpen
|
||
? 'M6 18L18 6M6 6l12 12'
|
||
: 'M4 6h16M4 12h16M4 18h16'
|
||
);
|
||
});
|
||
|
||
// Close mobile menu when clicking a link
|
||
mobileMenu.querySelectorAll('a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileMenu.classList.remove('open');
|
||
menuToggle.setAttribute('aria-expanded', 'false');
|
||
menuIcon.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
|
||
});
|
||
});
|
||
|
||
// Scroll reveal animation
|
||
const observerOptions = {
|
||
root: null,
|
||
rootMargin: '0px 0px -50px 0px',
|
||
threshold: 0.1
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.scroll-reveal').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Filter buttons for animal cards
|
||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||
const animalCards = document.querySelectorAll('.animal-card');
|
||
|
||
filterBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
// Update active state
|
||
filterBtns.forEach(b => {
|
||
b.classList.remove('active', 'bg-warm-600', 'text-white');
|
||
b.classList.add('bg-warm-50', 'text-warm-700');
|
||
});
|
||
btn.classList.add('active', 'bg-warm-600', 'text-white');
|
||
btn.classList.remove('bg-warm-50', 'text-warm-700');
|
||
|
||
const filter = btn.dataset.filter;
|
||
|
||
animalCards.forEach(card => {
|
||
const categories = card.dataset.category;
|
||
if (filter === 'all' || categories.includes(filter)) {
|
||
card.style.display = 'block';
|
||
card.style.opacity = '1';
|
||
card.style.transform = 'translateY(0)';
|
||
} else {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(10px)';
|
||
setTimeout(() => {
|
||
card.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// Form submission handler (prevent default for demo)
|
||
document.querySelector('form').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const btn = e.target.querySelector('button[type="submit"]');
|
||
const originalText = btn.querySelector('span').textContent;
|
||
btn.querySelector('span').textContent = 'Message sent!';
|
||
btn.classList.add('bg-sage-600');
|
||
setTimeout(() => {
|
||
btn.querySelector('span').textContent = originalText;
|
||
btn.classList.remove('bg-sage-600');
|
||
e.target.reset();
|
||
}, 2500);
|
||
});
|
||
</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 472.82s<br>Model: DavidAU/Qwen3.6-27B-Fable-Fusion-711-Uncensored-Heretic-NM-DAU-NEO-MAX-MTP-GGUF:IQ4_XS</div></body>
|
||
</html> |