yes
This commit is contained in:
@@ -0,0 +1,510 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Paws & Purpose Adoption Center connects loving families with rescue animals through careful matching, rehabilitation, and lifelong support.">
|
||||
<title>Paws & Purpose Adoption Center</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
clay: '#D49A7A',
|
||||
sage: '#7A8B7A',
|
||||
cream: '#F9F6F0',
|
||||
dark: '#2C2825',
|
||||
warm: '#E8DCC4'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
serif: ['Playfair Display', 'Georgia', 'serif']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--focus-color: #D49A7A;
|
||||
--focus-ring: 0 0 0 3px rgba(212, 154, 122, 0.4);
|
||||
}
|
||||
*:focus-visible {
|
||||
outline: 3px solid var(--focus-color);
|
||||
outline-offset: 2px;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.fade-up.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.hero-bg {
|
||||
transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.hero-bg:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
.card-hover {
|
||||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 16px 32px rgba(44, 40, 37, 0.08);
|
||||
}
|
||||
.mobile-menu {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease;
|
||||
}
|
||||
.mobile-menu.open {
|
||||
max-height: 320px;
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--clay);
|
||||
color: #fff;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #c48b6a;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-cream text-dark font-sans antialiased selection:bg-clay selection:text-white">
|
||||
|
||||
<header class="sticky top-0 z-50 bg-cream/90 backdrop-blur-md border-b border-dark/10">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12 h-20 flex items-center justify-between">
|
||||
<a href="#" class="font-serif text-2xl font-bold tracking-tight hover:opacity-80 transition-opacity">Paws & Purpose</a>
|
||||
|
||||
<nav class="hidden md:flex items-center gap-8">
|
||||
<a href="#mission" class="text-sm font-medium hover:text-clay transition-colors">Our Mission</a>
|
||||
<a href="#pets" class="text-sm font-medium hover:text-clay transition-colors">Available Pets</a>
|
||||
<a href="#process" class="text-sm font-medium hover:text-clay transition-colors">How It Works</a>
|
||||
<a href="#stories" class="text-sm font-medium hover:text-clay transition-colors">Success Stories</a>
|
||||
<a href="#contact" class="text-sm font-medium hover:text-clay transition-colors">Visit Us</a>
|
||||
<a href="#contact" class="btn-primary px-5 py-2.5 rounded-full text-sm font-semibold">Start Adoption</a>
|
||||
</nav>
|
||||
|
||||
<button id="menu-toggle" class="md:hidden p-2 rounded-lg hover:bg-warm/50 transition-colors" aria-label="Toggle navigation menu" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="mobile-nav" class="mobile-menu md:hidden bg-cream border-t border-dark/10">
|
||||
<nav class="flex flex-col p-6 gap-4">
|
||||
<a href="#mission" class="text-lg font-medium hover:text-clay transition-colors">Our Mission</a>
|
||||
<a href="#pets" class="text-lg font-medium hover:text-clay transition-colors">Available Pets</a>
|
||||
<a href="#process" class="text-lg font-medium hover:text-clay transition-colors">How It Works</a>
|
||||
<a href="#stories" class="text-lg font-medium hover:text-clay transition-colors">Success Stories</a>
|
||||
<a href="#contact" class="text-lg font-medium hover:text-clay transition-colors">Visit Us</a>
|
||||
<a href="#contact" class="btn-primary px-5 py-3 rounded-full text-center font-semibold mt-2">Start Adoption</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 hero-bg">
|
||||
<img src="https://images.pexels.com/photos/20595085/pexels-photo-20595085.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A young puppy stands behind metal bars, casting a poignant gaze that captures a sense of longing and vulnerability." class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-dark/60 via-dark/40 to-dark/80"></div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl mx-auto px-6 md:px-12 text-center text-cream fade-up">
|
||||
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl font-bold leading-[1.1] mb-6 tracking-tight">Find Your Furry Soulmate</h1>
|
||||
<p class="text-lg md:text-xl lg:text-2xl text-cream/90 max-w-2xl mx-auto mb-10 leading-relaxed font-light">Every animal deserves a loving home. We bridge the gap between rescue and family through careful matching, rehabilitation, and lifelong support.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="#pets" class="btn-primary px-8 py-4 rounded-full text-lg font-semibold inline-block">Explore Available Pets</a>
|
||||
<a href="#process" class="px-8 py-4 rounded-full text-lg font-semibold border border-cream/40 hover:bg-cream/10 transition-colors inline-block">Learn the Process</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 left-6 md:left-12 z-10 text-cream/80 text-sm fade-up">
|
||||
<a href="https://www.pexels.com/photo/puppy-dog-standing-in-cage-20595085/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 hover:text-cream transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
|
||||
Photo by Bryan on Pexels
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-8 right-6 md:right-12 z-10 animate-bounce">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-cream"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mission" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-12 md:gap-20 items-center">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Our Mission</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-6 leading-tight">Rescue, Rehabilitate, Rehome</h2>
|
||||
<p class="text-dark/80 text-lg leading-relaxed mb-6">Founded in 2012, Paws & Purpose operates on a simple belief: adoption isn't just about finding a pet, it's about finding family. We partner with municipal shelters and private rescues to take in animals that need extra time, specialized care, or behavioral assessment before they're ready for their forever homes.</p>
|
||||
<p class="text-dark/80 text-lg leading-relaxed mb-8">Our team of veterinary technicians, behaviorists, and matchmakers spend weeks building trust with each animal. We don't rush. We ensure every placement aligns with the lifestyle, energy, and patience of the adopting household.</p>
|
||||
<div class="flex gap-8">
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">2,400+</span>
|
||||
<span class="text-sm text-dark/60">Animals Rehomed</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">98%</span>
|
||||
<span class="text-sm text-dark/60">Placement Success</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-3xl font-bold text-sage">12</span>
|
||||
<span class="text-sm text-dark/60">Years of Service</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative fade-up">
|
||||
<div class="aspect-[4/5] bg-warm/50 rounded-2xl overflow-hidden border border-dark/5">
|
||||
<div class="w-full h-full bg-gradient-to-br from-sage/20 to-clay/20 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-dark/20"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-dark text-cream p-6 rounded-xl shadow-lg max-w-xs">
|
||||
<p class="text-sm leading-relaxed italic">"We don't place pets. We place family members. Every match is a lifelong commitment to both sides."</p>
|
||||
<p class="mt-3 text-xs font-semibold text-clay">— Elena Rios, Director of Adoptions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pets" class="py-24 bg-warm/30">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="text-center max-w-2xl mx-auto mb-16 fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Current Residents</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-4">Ready to Meet You</h2>
|
||||
<p class="text-dark/70 text-lg">These four companions have completed their rehabilitation and are waiting for their final chapter to begin.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐕</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Golden Retriever Mix</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Barnaby</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">3 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Gentle, deeply affectionate, and loves long walks. Excellent with children and calm around other dogs.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.1s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐈</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Domestic Shorthair</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Luna</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">5 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Quiet observer, prefers calm environments, and settles gracefully into any lap. Ideal for apartment living.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.2s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐕🦺</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Terrier Mix</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Tango</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">2 Years</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Playful, highly energetic, and endlessly curious. Needs a fenced yard and an active owner for daily adventures.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bg-cream rounded-2xl overflow-hidden shadow-sm card-hover fade-up" style="transition-delay: 0.3s">
|
||||
<div class="aspect-[3/4] bg-sage/20 flex items-center justify-center p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-2">🐈⬛</div>
|
||||
<p class="text-sm font-semibold text-dark/60">Tabby Cat</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-serif text-xl font-bold">Milo</h3>
|
||||
<span class="text-xs font-medium bg-clay/10 text-clay px-2 py-1 rounded-full">1 Year</span>
|
||||
</div>
|
||||
<p class="text-dark/70 text-sm mb-4">Food-motivated, highly trainable, and balances independence with clear affection. Adapts quickly to new routines.</p>
|
||||
<button class="w-full py-2.5 border border-dark/20 rounded-lg text-sm font-semibold hover:bg-dark hover:text-cream transition-colors">Profile & Inquiry</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12 fade-up">
|
||||
<a href="#" class="inline-flex items-center gap-2 text-clay font-semibold hover:underline">View Full Catalog <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="text-center max-w-2xl mx-auto mb-16 fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">How It Works</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-4">Three Steps to Forever</h2>
|
||||
<p class="text-dark/70 text-lg">We've streamlined adoption to reduce stress for both you and the animal. Here is what to expect.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up">
|
||||
<div class="w-12 h-12 bg-sage/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-sage">01</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Browse & Connect</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Explore our current residents online or visit our facility. When you find a match, submit a brief inquiry form detailing your household, lifestyle, and experience level.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.15s">
|
||||
<div class="w-12 h-12 bg-clay/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-clay">02</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Meet & Greet</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Schedule a supervised visit with our staff. We observe interactions, answer behavioral questions, and ensure the energy aligns with your home environment.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.3s">
|
||||
<div class="w-12 h-12 bg-sage/20 rounded-xl flex items-center justify-center mb-6">
|
||||
<span class="text-2xl font-bold text-sage">03</span>
|
||||
</div>
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Welcome Home</h3>
|
||||
<p class="text-dark/70 leading-relaxed">Complete the adoption agreement and take your new family member home. We provide a starter kit, veterinary records, and a dedicated support line for the first 90 days.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="stories" class="py-24 bg-dark text-cream">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Success Stories</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-8">Families Transformed</h2>
|
||||
<p class="text-cream/70 text-lg leading-relaxed mb-8">Adoption changes more than just an animal's life. It reshapes daily routines, builds empathy, and creates bonds that last generations. Here is what our adopters have to say.</p>
|
||||
<button class="border border-cream/30 px-6 py-3 rounded-full text-sm font-semibold hover:bg-cream/10 transition-colors inline-flex items-center gap-2">Read More Stories <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 fade-up" style="transition-delay: 0.2s">
|
||||
<blockquote class="bg-cream/5 p-6 rounded-xl border border-cream/10">
|
||||
<p class="text-lg leading-relaxed italic mb-4">"We adopted Barnaby during a difficult year. His calm presence literally slowed our household down. The staff's guidance on transitioning him from shelter life to ours was invaluable."</p>
|
||||
<footer class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-clay/20 flex items-center justify-center text-sm font-bold">MJ</div>
|
||||
<div>
|
||||
<p class="font-semibold">Maria & James T.</p>
|
||||
<p class="text-sm text-cream/60">Adopted Barnaby, 2021</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="bg-cream/5 p-6 rounded-xl border border-cream/10">
|
||||
<p class="text-lg leading-relaxed italic mb-4">"I never expected to bond so deeply with a rescue cat. Luna walked into my apartment and immediately found her favorite sunbeam. Paws & Purpose matched us perfectly."</p>
|
||||
<footer class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-sage/20 flex items-center justify-center text-sm font-bold">SR</div>
|
||||
<div>
|
||||
<p class="font-semibold">Sam R.</p>
|
||||
<p class="text-sm text-cream/60">Adopted Luna, 2023</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-12 md:gap-20">
|
||||
<div class="fade-up">
|
||||
<span class="text-clay font-semibold tracking-wider uppercase text-sm">Visit Us</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mt-3 mb-6">Come Say Hello</h2>
|
||||
<p class="text-dark/70 text-lg leading-relaxed mb-8">Our adoption facility is open to the public for supervised visits. Walk-ins are welcome during open hours, but we recommend scheduling a specific meet-and-greet for the best experience.</p>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-sage/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Location</p>
|
||||
<p class="text-dark/70">482 Maple Creek Road, Suite 12<br>Portland, OR 97205</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-clay/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Hours</p>
|
||||
<p class="text-dark/70">Tue–Fri: 10:00 AM – 6:00 PM<br>Sat–Sun: 11:00 AM – 4:00 PM<br>Mon: Closed</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-sage/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Email</p>
|
||||
<a href="mailto:hello@pawsandpurpose.org" class="text-dark/70 hover:text-clay transition-colors">hello@pawsandpurpose.org</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-cream p-8 md:p-10 rounded-2xl border border-dark/5 fade-up" style="transition-delay: 0.15s">
|
||||
<h3 class="font-serif text-2xl font-bold mb-6">Send Us a Message</h3>
|
||||
<form id="contact-form" class="space-y-5" novalidate>
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium mb-2">Full Name</label>
|
||||
<input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="Jane Doe">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium mb-2">Email Address</label>
|
||||
<input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="jane@example.com">
|
||||
</div>
|
||||
<div>
|
||||
<label for="interest" class="block text-sm font-medium mb-2">Interest</label>
|
||||
<select id="interest" name="interest" class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors">
|
||||
<option value="">Select an option</option>
|
||||
<option value="adoption">Pet Adoption</option>
|
||||
<option value="volunteer">Volunteering</option>
|
||||
<option value="foster">Foster Care</option>
|
||||
<option value="donate">Donations</option>
|
||||
<option value="other">General Inquiry</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium mb-2">Message</label>
|
||||
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 rounded-lg border border-dark/20 bg-white focus:border-clay focus:ring-0 transition-colors" placeholder="Tell us about your home, lifestyle, or questions..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary w-full py-3.5 rounded-lg font-semibold text-lg">Submit Inquiry</button>
|
||||
<p class="text-xs text-center text-dark/50 mt-2">We typically respond within 24 hours. By submitting, you agree to our privacy practices.</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-dark text-cream/80 py-12 px-6 md:px-12 border-t border-cream/10">
|
||||
<div class="max-w-7xl mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-12">
|
||||
<div>
|
||||
<span class="font-serif text-2xl font-bold text-cream">Paws & Purpose</span>
|
||||
<p class="mt-4 text-sm leading-relaxed">Building bridges between rescue animals and loving families since 2012.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Explore</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="#mission" class="hover:text-clay transition-colors">Our Mission</a></li>
|
||||
<li><a href="#pets" class="hover:text-clay transition-colors">Available Pets</a></li>
|
||||
<li><a href="#process" class="hover:text-clay transition-colors">Adoption Process</a></li>
|
||||
<li><a href="#stories" class="hover:text-clay transition-colors">Success Stories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Support</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Volunteer</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Foster</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Donate</a></li>
|
||||
<li><a href="#" class="hover:text-clay transition-colors">Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-cream mb-4">Stay Connected</h4>
|
||||
<p class="text-sm mb-4">Join our newsletter for new arrivals, adoption tips, and center updates.</p>
|
||||
<form class="flex gap-2">
|
||||
<input type="email" placeholder="Your email" class="bg-cream/10 border border-cream/20 rounded-lg px-4 py-2 text-sm w-full focus:border-clay focus:ring-0">
|
||||
<button type="submit" class="bg-clay text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-[#c48b6a] transition-colors">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto pt-8 border-t border-cream/10 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm">
|
||||
<p>© <span id="year"></span> Paws & Purpose Adoption Center. All rights reserved.</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="hover:text-clay transition-colors">Privacy Policy</a>
|
||||
<a href="#" class="hover:text-clay transition-colors">Terms of Service</a>
|
||||
<a href="#" class="hover:text-clay transition-colors">Accessibility</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
const isOpen = mobileNav.classList.contains('open');
|
||||
mobileNav.classList.toggle('open');
|
||||
menuToggle.setAttribute('aria-expanded', !isOpen);
|
||||
});
|
||||
|
||||
// Close mobile menu on link click
|
||||
mobileNav.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileNav.classList.remove('open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.15
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
// Form handling (prevent default for demo)
|
||||
const form = document.getElementById('contact-form');
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const btn = form.querySelector('button[type="submit"]');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'Sent Successfully!';
|
||||
btn.classList.add('bg-sage', 'cursor-default');
|
||||
btn.classList.remove('btn-primary');
|
||||
form.reset();
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.classList.remove('bg-sage', 'cursor-default');
|
||||
btn.classList.add('btn-primary');
|
||||
}, 3000);
|
||||
});
|
||||
</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 204.71s<br>Model: unsloth/Qwen3.6-27B-MTP-GGUF:Q4_0</div></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user