fitness/resources/views/home/index.blade.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">{{ __('app.home.badge') }}</span>
            <h1 class="mt-4 text-4xl sm:text-6xl font-extrabold tracking-tight text-white drop-shadow">
                {{ __('app.home.title') }}
            </h1>
            <p class="mt-4 text-lg text-indigo-100 max-w-2xl mx-auto">
                {{ __('app.home.subtitle') }}
            </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="{{ __('app.home.search_placeholder') }}" 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">{{ __('app.home.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={{ $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">
                        {{ __('app.home.filters.' . $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">
                    {{ __('app.nav.build_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">{{ __('app.home.featured') }}</h2>
            <a href="{{ route('exercises.index') }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">{{ __('app.home.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">{{ __('app.home.favorites') }}</h2>
                    <p class="mt-3 text-gray-600 dark:text-gray-300">{{ __('app.home.favorites_desc') }}</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">{{ __('app.home.try_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>

    <!-- Features -->
    <section class="relative bg-white dark:bg-gray-900 py-12 sm:py-16 border-t border-gray-100 dark:border-gray-800">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">{{ __('app.home.features.title') }}</h2>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.home.features.subtitle') }}</p>
            </div>
            <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @php $icons = [
                    'tracking' => 'M4 12h16M4 6h16M4 18h16',
                    'library' => 'M4 5h16v14H4z M8 9h8M8 13h8',
                    'plans' => 'M6 6h12v12H6z M9 9h6v6H9z',
                    'yoga' => 'M12 2v6M12 16v6M4 12h6M14 12h6M7 7l3 3M14 14l3 3M17 7l-3 3M10 14l-3 3',
                    'progress' => 'M4 20h16M6 16h2v4H6zm5-6h2v10h-2zm5-4h2v14h-2z',
                    'community' => 'M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm7 9a7 7 0 0 0-14 0',
                ]; @endphp
                @foreach(['tracking','library','plans','yoga','progress','community'] as $key)
                    <div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-6">
                        <div class="h-10 w-10 rounded-lg bg-gradient-to-br from-fuchsia-500 to-indigo-600 text-white flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
                                <path d="{{ $icons[$key] }}" />
                            </svg>
                        </div>
                        <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">{{ __('app.home.features.items.' . $key . '.title') }}</h3>
                        <p class="mt-1 text-gray-600 dark:text-gray-300">{{ __('app.home.features.items.' . $key . '.desc') }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Pricing -->
    <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 border-t border-gray-100 dark:border-gray-800">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">{{ __('app.home.pricing.title') }}</h2>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.home.pricing.subtitle') }}</p>
            </div>
            <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-6">
                @php $plans = ['free','pro','ultimate']; @endphp
                @foreach($plans as $plan)
                    <div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-6 flex flex-col">
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('app.home.pricing.plans.' . $plan . '.name') }}</h3>
                            <div class="mt-1 text-3xl font-extrabold text-gray-900 dark:text-white">{{ __('app.home.pricing.plans.' . $plan . '.price') }} <span class="text-base font-medium text-gray-600 dark:text-gray-300">{{ __('app.home.pricing.plans.' . $plan . '.period') }}</span></div>
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ __('app.home.pricing.plans.' . $plan . '.desc') }}</p>
                        </div>
                        <ul class="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-300 flex-1">
                            @for($i=1;$i<=5;$i++)
                                @php $key = 'feature'.$i; @endphp
                                @if(trans()->has('app.home.pricing.plans.' . $plan . '.features.' . $key))
                                    <li class="flex items-start gap-2"><span class="text-emerald-500">✓</span><span>{{ __('app.home.pricing.plans.' . $plan . '.features.' . $key) }}</span></li>
                                @endif
                            @endfor
                        </ul>
                        <div class="mt-6">
                            <a href="{{ route('register') }}" class="inline-flex items-center rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow hover:from-fuchsia-500 hover:to-indigo-500">{{ __('app.home.pricing.cta') }}</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="relative bg-white dark:bg-gray-900 py-12 sm:py-16 border-t border-gray-100 dark:border-gray-800">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">{{ __('app.home.faq.title') }}</h2>
                <p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.home.faq.subtitle') }}</p>
            </div>
            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach([1,2,3,4,5,6] as $i)
                    <div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-6">
                        <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ __('app.home.faq.q' . $i) }}</h3>
                        <p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.home.faq.a' . $i) }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

</x-app-layout>