|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Training Programs | PawSmart</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.program-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.filter-active { |
|
|
background-color: #3B82F6; |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="heart" class="text-blue-500 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">PawSmart</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Programs</a> |
|
|
<a href="ai-trainer.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">AI Trainer</a> |
|
|
<a href="community.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Sign In</button> |
|
|
<button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Programs</a> |
|
|
<a href="ai-trainer.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">AI Trainer</a> |
|
|
<a href="community.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a> |
|
|
<div class="mt-4 pt-4 border-t border-gray-200"> |
|
|
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-base font-medium transition duration-300">Sign In</button> |
|
|
<button class="w-full mt-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-base font-medium transition duration-300">Get Started</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="bg-blue-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-bold mb-4" data-aos="fade-up">Training Programs</h1> |
|
|
<p class="text-xl text-blue-100 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Comprehensive courses for every training need, from puppy basics to advanced obedience</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="filter-active px-4 py-2 rounded-full text-sm font-medium transition duration-300">All Programs</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-full text-sm font-medium transition duration-300">Puppy Basics</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-full text-sm font-medium transition duration-300">Obedience</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-full text-sm font-medium transition duration-300">Behavior</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-full text-sm font-medium transition duration-300">Advanced</button> |
|
|
</div> |
|
|
<div class="relative w-full md:w-64"> |
|
|
<input type="text" placeholder="Search programs..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> |
|
|
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/1" alt="Puppy training" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">FREE</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Puppy Basics</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">12 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Puppy Essentials</h3> |
|
|
<p class="text-gray-600 mb-4">Master potty training, crate training, bite inhibition, and basic commands in this comprehensive puppy course.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>25%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Continue</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.9 (128)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/2" alt="Dog obedience" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded">PREMIUM</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Obedience</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">18 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Mastering Obedience</h3> |
|
|
<p class="text-gray-600 mb-4">From sit to advanced commands, build reliable obedience through positive reinforcement techniques.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Start Now</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.8 (97)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/3" alt="Behavior training" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded">PREMIUM</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Behavior</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">15 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Behavior Correction</h3> |
|
|
<p class="text-gray-600 mb-4">Address common issues like barking, jumping, leash pulling, and aggression with science-based methods.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Start Now</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.7 (84)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/4" alt="Dog tricks" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">FREE</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Advanced</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">8 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Fun Tricks</h3> |
|
|
<p class="text-gray-600 mb-4">Teach your dog impressive tricks like spin, play dead, and high five to strengthen your bond and mental stimulation.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Start Now</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.9 (56)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/5" alt="Service dog" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded">PREMIUM</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Obedience</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">10 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Service Dog Prep</h3> |
|
|
<p class="text-gray-600 mb-4">Specialized training for service dogs, including public access skills and task training foundations.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Start Now</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.6 (32)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="program-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/pets/640x360/6" alt="Senior dog" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">FREE</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Special Needs</span> |
|
|
<span class="text-gray-500 text-sm ml-auto">6 lessons</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Senior Dog Care</h3> |
|
|
<p class="text-gray-600 mb-4">Adapt training for aging dogs, manage cognitive decline, and maintain quality of life in their golden years.</p> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span>Progress</span> |
|
|
<span>0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full progress-bar"> |
|
|
<div class="bg-blue-600 progress-bar" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium">Start Now</button> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<span class="ml-1 text-sm text-gray-600">4.8 (41)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Simple, Transparent Pricing</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Choose the plan that works best for you and your dog</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Starter</h3> |
|
|
<p class="text-gray-600 mb-6">Perfect for trying out basic training</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-900">$0</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Access to free courses</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Basic training guides</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">Premium courses</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">AI Trainer</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">Live sessions</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg font-medium transition duration-300">Current Plan</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transform scale-105" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="bg-blue-600 text-white text-center py-2"> |
|
|
<p class="text-sm font-medium">MOST POPULAR</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Premium</h3> |
|
|
<p class="text-gray-600 mb-6">Full access to all training content</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-900">$19</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>All free courses</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Full premium course library</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>AI Trainer access</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Progress tracking</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="x" class="text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">Live sessions (add-on)</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition duration-300">Upgrade Now</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">Pro</h3> |
|
|
<p class="text-gray-600 mb-6">For those who want personalized training</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-900">$49</span> |
|
|
<span class="text-gray-500">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Everything in Premium</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>2 live sessions per month</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Priority trainer support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Personalized training plan</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2"></i> |
|
|
<span>Exclusive webinars</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-medium transition duration-300">Get Pro</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
|
|
<div class="text-center mb-12" data-aos="fade-up"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">Frequently Asked Questions</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">Everything you need to know about our training programs</p> |
|
|
</div> |
|
|
<div class="max-w-3xl mx-auto" data-aos="fade-up"> |
|
|
<div class="space-y-4"> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="flex justify-between items-center w-full px-6 py-4 text-left font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
|
<span>How do I access the training programs?</span> |
|
|
<i data-feather="chevron-down" class="text-gray-500"></i> |
|
|
</button> |
|
|
<div class="px-6 py-4 bg-white hidden"> |
|
|
<p class="text-gray-600">After signing up (it's free!), you'll have immediate access to all free programs. For premium content, simply choose a subscription plan that fits your needs. All programs are available on our website and mobile app.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="flex justify-between items-center w-full px-6 py-4 text-left font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
|
<span>Can I cancel my subscription anytime?</span> |
|
|
<i data-feather="chevron-down" class="text-gray-500"></i> |
|
|
</button> |
|
|
<div class="px-6 py-4 bg-white hidden"> |
|
|
<p class="text-gray-600">Absolutely! You can cancel your premium subscription at any time through your account settings. You'll continue to have access until the end of your current billing period.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="flex justify-between items-center w-full px-6 py-4 text-left font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
|
<span>How long does each program take to complete?</span> |
|
|
<i data-feather="chevron-down" class="text-gray-500"></i> |
|
|
</button> |
|
|
<div class="px-6 py-4 bg-white hidden"> |
|
|
<p class="text-gray-600">Program durations vary based on content and your dog's learning pace. Most programs suggest 2-4 weeks of consistent practice, but you can work at your own pace. Each lesson includes estimated practice time needed.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden"> |
|
|
<button class="flex justify-between items-center w-full px-6 py-4 text-left font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none"> |
|
|
<span>Are the training methods positive reinforcement based?</span> |
|
|
<i data-feather="chevron-down" class="text-gray-500"></i> |
|
|
</button> |
|
|
<div class="px-6 py-4 bg-white hidden"> |
|
|
<p class="text-gray-600">Yes! All our training programs are based on positive reinforcement techniques that strengthen your bond with your dog. We never recommend punishment-based methods.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="md:col-span-1"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="heart" class="text-blue-400 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold">PawSmart</span> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-400">Science-based dog training for modern owners.</p> |
|
|
<div class="flex mt-6 space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="facebook" class="h-5 w-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="instagram" class="h-5 w-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter" class="h-5 w-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="youtube" class="h-5 w-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Training</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Puppy Basics</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Obedience</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Behavior Correction</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Advanced Tricks</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Company</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Our Trainers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Stay Updated</h3> |
|
|
<p class="text-gray-400 mb-4">Subscribe to our newsletter for training tips and special offers.</p> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg transition duration-300"> |
|
|
<i data-feather="send" class="h-4 w-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 pt-8 border-t border-gray-800"> |
|
|
<p class="text-gray-400 text-sm text-center">© 2023 PawSmart Training. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
const expanded = this.getAttribute('aria-expanded') === 'true'; |
|
|
this.setAttribute('aria-expanded', !expanded); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
const icon = this.querySelector('i'); |
|
|
if (expanded) { |
|
|
icon.setAttribute('data-feather', 'menu'); |
|
|
} else { |
|
|
icon.setAttribute('data-feather', 'x'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
|
|
|
|
|
|
const faqButtons = document.querySelectorAll('.border button'); |
|
|
faqButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
if (content.classList.contains('hidden')) { |
|
|
content.classList.remove('hidden'); |
|
|
icon.setAttribute('data-feather', 'chevron-up'); |
|
|
} else { |
|
|
content.classList.add('hidden'); |
|
|
icon.setAttribute('data-feather', 'chevron-down'); |
|
|
} |
|
|
feather.replace(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const filterButtons = document.querySelectorAll('.bg-gray-100'); |
|
|
filterButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
|
|
|
filterButtons.forEach(btn => { |
|
|
btn.classList.remove('filter-active'); |
|
|
btn.classList.add('bg-gray-100', 'hover:bg-gray-200'); |
|
|
}); |
|
|
|
|
|
|
|
|
button.classList.add('filter-active'); |
|
|
button.classList.remove('bg-gray-100', 'hover:bg-gray-200'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
