rootandClaude Sonnet 5
0c6a297198
Registration collects health-adjacent data (age, weight, height, health notes, goals) with no privacy policy or ToS anywhere in the app. Adds both as real pages at /privacy and /terms, a site-wide footer linking to them (the app had no footer at all outside the homepage), and a consent line on the registration form. Both pages are marked as a starting draft with bracketed placeholders for operator/jurisdiction details rather than inventing legal claims the app can't back up. Also removed the homepage's own footer, which duplicated the new global one and whose Privacy/Terms/About/Contact links were all dead `#` placeholders, and fixed APP_NAME (was "Laravel", site is branded FitAtlas everywhere else including the browser tab title). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
196 lines
14 KiB
PHP
196 lines
14 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">{{ __('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>
|