139 lines
12 KiB
PHP
139 lines
12 KiB
PHP
<x-app-layout>
|
|
<!-- Hero -->
|
|
<section class="relative overflow-hidden">
|
|
<!-- Background image with gradient overlay -->
|
|
<div class="absolute inset-0">
|
|
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1920&auto=format&fit=crop" alt="Athlete training" class="h-full w-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-indigo-900/70 via-indigo-800/60 to-transparent"></div>
|
|
</div>
|
|
<!-- Decorative blobs -->
|
|
<div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-fuchsia-500/30 blur-3xl"></div>
|
|
<div aria-hidden="true" class="pointer-events-none absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-cyan-400/30 blur-3xl"></div>
|
|
|
|
<div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 sm:py-28 text-center">
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-semibold text-white ring-1 ring-white/20 backdrop-blur">New • Explore 1,000+ moves</span>
|
|
<h1 class="mt-4 text-4xl sm:text-6xl font-extrabold tracking-tight text-white drop-shadow">
|
|
Discover 1,000+ Exercises. Build Your Perfect Workout.
|
|
</h1>
|
|
<p class="mt-4 text-lg text-indigo-100 max-w-2xl mx-auto">
|
|
Explore FitAtlas to find exercises by muscle group and equipment, then craft routines that match your goals.
|
|
</p>
|
|
<!-- Search Bar -->
|
|
<form action="{{ route('exercises.index') }}" method="GET" class="mt-8 max-w-2xl mx-auto">
|
|
<div class="flex rounded-2xl shadow-lg ring-1 ring-white/20 focus-within:ring-2 focus-within:ring-fuchsia-400/80 overflow-hidden bg-white/90 backdrop-blur">
|
|
<input type="text" name="q" placeholder="Search exercises (e.g. push up, dumbbell, back)" class="w-full px-4 py-3 text-gray-900 placeholder-gray-500 bg-transparent focus:outline-none">
|
|
<button type="submit" class="px-5 py-3 bg-gradient-to-r from-fuchsia-600 to-indigo-600 hover:from-fuchsia-500 hover:to-indigo-500 text-white font-semibold">Search</button>
|
|
</div>
|
|
</form>
|
|
<!-- Quick Filters -->
|
|
<div class="mt-6 flex flex-wrap items-center justify-center gap-3">
|
|
@php
|
|
$filters = ['Arms', 'Chest', 'Legs', 'Core', 'Back'];
|
|
$filterColors = [
|
|
'Arms' => 'from-amber-400 to-orange-500',
|
|
'Chest' => 'from-rose-400 to-pink-500',
|
|
'Legs' => 'from-emerald-400 to-teal-500',
|
|
'Core' => 'from-sky-400 to-cyan-500',
|
|
'Back' => 'from-violet-400 to-indigo-500',
|
|
];
|
|
@endphp
|
|
@foreach($filters as $filter)
|
|
<a href="{{ route('exercises.index') }}?muscle={{ strtolower($filter) }}" class="inline-flex items-center rounded-full bg-gradient-to-r {{ $filterColors[$filter] }} px-4 py-1.5 text-sm font-semibold text-white shadow hover:opacity-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/60">
|
|
{{ $filter }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
<div class="mt-8">
|
|
<a href="{{ route('workouts.builder') }}" class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 px-5 py-3 text-sm sm:text-base font-semibold text-white shadow-lg hover:from-fuchsia-500 hover:to-indigo-500">
|
|
Build a Workout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Exercises -->
|
|
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
|
<div class="flex items-end justify-between gap-4 mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Featured Exercises</h2>
|
|
<a href="{{ route('exercises.index') }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">Browse all</a>
|
|
</div>
|
|
@php
|
|
$exercises = $exercises ?? [
|
|
['name' => 'Push-Up', 'muscles' => ['Chest', 'Triceps', 'Core'], 'image' => 'https://images.unsplash.com/photo-1571907480495-9567b1f8e6c9?q=80&w=1200&auto=format&fit=crop'],
|
|
['name' => 'Barbell Squat', 'muscles' => ['Quads', 'Glutes', 'Core'], 'image' => 'https://images.unsplash.com/photo-1517963628607-235ccdd5476d?q=80&w=1200&auto=format&fit=crop'],
|
|
['name' => 'Deadlift', 'muscles' => ['Back', 'Hamstrings', 'Glutes'], 'image' => 'https://images.unsplash.com/photo-1517963879433-6ad2b56f6f8f?q=80&w=1200&auto=format&fit=crop'],
|
|
['name' => 'Plank', 'muscles' => ['Core'], 'image' => 'https://images.unsplash.com/photo-1517341720765-3a20b11a2c6e?q=80&w=1200&auto=format&fit=crop'],
|
|
['name' => 'Dumbbell Row', 'muscles' => ['Back', 'Biceps'], 'image' => 'https://images.unsplash.com/photo-1605296867424-35fc25c92102?q=80&w=1200&auto=format&fit=crop'],
|
|
['name' => 'Shoulder Press', 'muscles' => ['Shoulders', 'Triceps'], 'image' => 'https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=1200&auto=format&fit=crop'],
|
|
];
|
|
$badgePalette = ['bg-rose-100 text-rose-700','bg-amber-100 text-amber-700','bg-emerald-100 text-emerald-700','bg-sky-100 text-sky-700','bg-violet-100 text-violet-700'];
|
|
@endphp
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($exercises as $exercise)
|
|
<div class="group rounded-3xl overflow-hidden bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700 shadow-sm hover:shadow-xl transition">
|
|
<div class="relative aspect-[16/9] overflow-hidden">
|
|
<img src="{{ $exercise['image'] ?? 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1200&auto=format&fit=crop' }}" alt="{{ $exercise['name'] }} image" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
|
<div class="absolute bottom-3 left-3 inline-flex items-center rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-gray-900 shadow">
|
|
{{ $exercise['name'] }}
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="mt-1 flex flex-wrap gap-2">
|
|
@foreach($exercise['muscles'] as $i => $m)
|
|
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $badgePalette[$i % count($badgePalette)] }}">{{ $m }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Workout of the Week -->
|
|
<section class="relative bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-900/60 py-12 sm:py-16">
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-20 mx-auto h-40 max-w-5xl bg-gradient-to-r from-fuchsia-400/20 via-indigo-400/20 to-cyan-400/20 blur-3xl"></div>
|
|
<div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Workout of the Week</h2>
|
|
<p class="mt-3 text-gray-600 dark:text-gray-300">A balanced routine targeting all major muscle groups. Suitable for most levels and easy to adapt with available equipment.</p>
|
|
<a href="{{ route('workouts.builder') }}" class="mt-6 inline-flex items-center rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 px-5 py-3 text-white font-semibold shadow-lg hover:from-fuchsia-500 hover:to-indigo-500">Try This Routine</a>
|
|
</div>
|
|
<div class="relative h-64 sm:h-80">
|
|
<div class="absolute inset-0 rounded-3xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
|
|
<img src="https://images.unsplash.com/photo-1541534401786-2077eed87a72?q=80&w=1600&auto=format&fit=crop" alt="Workout preview" class="h-full w-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-tr from-indigo-700/30 via-transparent to-fuchsia-600/30 mix-blend-multiply"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-gray-200 dark:border-gray-800">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div class="text-sm text-gray-600 dark:text-gray-300">© {{ date('Y') }} FitAtlas</div>
|
|
<div class="flex items-center gap-6 text-sm">
|
|
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">About</a>
|
|
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Privacy</a>
|
|
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Terms</a>
|
|
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Contact</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="#" aria-label="Twitter" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path d="M22 5.92c-.77.34-1.6.57-2.46.67a4.27 4.27 0 0 0 1.87-2.36 8.49 8.49 0 0 1-2.7 1.03 4.24 4.24 0 0 0-7.23 3.87A12.04 12.04 0 0 1 3.15 4.6a4.24 4.24 0 0 0 1.31 5.66 4.2 4.2 0 0 1-1.92-.53v.05c0 2.05 1.46 3.76 3.4 4.15-.36.1-.74.15-1.13.15-.28 0-.55-.03-.81-.08.55 1.73 2.15 2.99 4.05 3.02A8.5 8.5 0 0 1 2 19.54a12 12 0 0 0 6.5 1.9c7.81 0 12.08-6.47 12.08-12.08 0-.18 0-.36-.01-.54A8.64 8.64 0 0 0 22 5.92z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="Instagram" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path d="M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm10 2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10zm-5 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6zM17.5 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="YouTube" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.4.6A3 3 0 0 0 .5 6.2 31.6 31.6 0 0 0 0 12a31.6 31.6 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.8.6 9.4.6 9.4.6s7.6 0 9.4-.6a3 3 0 0 0 2.1-2.1 31.6 31.6 0 0 0 .5-5.8 31.6 31.6 0 0 0-.5-5.8zM9.8 15.5v-7l6 3.5-6 3.5z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</x-app-layout>
|