210 lines
13 KiB
PHP
210 lines
13 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Explore Cities Around the World')
|
|
|
|
@section('content')
|
|
<div class="relative">
|
|
<!-- Hero Section -->
|
|
<div class="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white overflow-hidden">
|
|
<!-- Animated background shapes -->
|
|
<div class="absolute inset-0 opacity-20">
|
|
<div class="absolute top-0 left-1/4 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
|
|
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-yellow-300 rounded-full mix-blend-overlay filter blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
|
|
</div>
|
|
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up">
|
|
Explore Cities Around the World
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-12 text-purple-100 max-w-3xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
|
|
Discover hidden gems, plan unforgettable trips, and explore destinations like never before
|
|
</p>
|
|
|
|
<!-- City Search Component -->
|
|
<div x-data="citySearch()" class="max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.4s;">
|
|
<div class="relative group">
|
|
<div class="absolute -inset-1 bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
|
|
<input
|
|
type="text"
|
|
x-model="query"
|
|
@input.debounce.300ms="search()"
|
|
@focus="showResults = true"
|
|
placeholder="Search for a city..."
|
|
class="relative w-full px-8 py-5 text-lg text-gray-900 bg-white rounded-xl shadow-2xl focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-200"
|
|
>
|
|
|
|
<!-- Search Results Dropdown -->
|
|
<div
|
|
x-show="showResults && (results.local.length > 0 || results.wikipedia.length > 0)"
|
|
@click.away="showResults = false"
|
|
class="absolute z-10 w-full mt-2 bg-white rounded-lg shadow-xl max-h-96 overflow-y-auto"
|
|
>
|
|
<!-- Local Results -->
|
|
<template x-if="results.local.length > 0">
|
|
<div class="border-b border-gray-200">
|
|
<div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-600 uppercase">
|
|
Saved Cities
|
|
</div>
|
|
<template x-for="city in results.local" :key="city.id">
|
|
<a
|
|
:href="`/cities/${city.slug}`"
|
|
class="block px-4 py-3 hover:bg-blue-50 cursor-pointer border-b border-gray-100"
|
|
>
|
|
<div class="font-semibold text-gray-900" x-text="city.name"></div>
|
|
<div class="text-sm text-gray-600" x-text="city.country"></div>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Wikipedia Results -->
|
|
<template x-if="results.wikipedia.length > 0">
|
|
<div>
|
|
<div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-600 uppercase">
|
|
Wikipedia Results
|
|
</div>
|
|
<template x-for="city in results.wikipedia" :key="city.title">
|
|
<div class="px-4 py-3 hover:bg-blue-50 cursor-pointer border-b border-gray-100">
|
|
<div class="font-semibold text-gray-900" x-text="city.title"></div>
|
|
<div class="text-sm text-gray-600" x-text="city.description"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Loading State -->
|
|
<div x-show="loading" class="px-4 py-3 text-center text-gray-500">
|
|
<svg class="animate-spin h-5 w-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Popular Destinations Section -->
|
|
<div class="bg-gray-50 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Popular Destinations</h2>
|
|
<p class="text-xl text-gray-600">Start exploring these trending cities</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
@forelse($popularCities as $city)
|
|
<a href="{{ route('cities.show', $city->slug) }}" class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="relative h-64 overflow-hidden @if(!$city->thumbnail_url) bg-gradient-to-br from-blue-400 to-blue-600 @endif">
|
|
@if($city->thumbnail_url)
|
|
<img
|
|
src="{{ $city->thumbnail_url }}"
|
|
alt="{{ $city->name }}"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
>
|
|
@endif
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-50 transition-all duration-300"></div>
|
|
<div class="absolute inset-0 flex flex-col justify-end p-6 text-white">
|
|
<h3 class="text-2xl font-bold mb-1 drop-shadow-lg">{{ $city->name }}</h3>
|
|
<p class="text-sm text-gray-200 drop-shadow-md">{{ $city->country }}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<!-- Fallback if no cities are available -->
|
|
<a href="#" class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="aspect-w-16 aspect-h-12 bg-gradient-to-br from-blue-400 to-blue-600 h-64">
|
|
<div class="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-40 transition-all duration-300"></div>
|
|
<div class="absolute inset-0 flex flex-col justify-end p-6 text-white">
|
|
<h3 class="text-2xl font-bold mb-1">Start Exploring</h3>
|
|
<p class="text-sm text-gray-200">Search for cities above</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-4">Why Choose Wiki Travel</h2>
|
|
<p class="text-xl text-gray-600">Everything you need to plan your perfect journey</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Discover Cities</h3>
|
|
<p class="text-gray-600 leading-relaxed">Search and explore cities worldwide with comprehensive Wikipedia data and local insights</p>
|
|
</div>
|
|
|
|
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-400 to-pink-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Find Attractions</h3>
|
|
<p class="text-gray-600 leading-relaxed">Explore museums, restaurants, historic sites, and countless points of interest around the globe</p>
|
|
</div>
|
|
|
|
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-400 to-teal-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-3 text-gray-900">Plan Trips</h3>
|
|
<p class="text-gray-600 leading-relaxed">Create detailed itineraries, save your favorite destinations, and organize the perfect journey</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function citySearch() {
|
|
return {
|
|
query: '',
|
|
results: { local: [], wikipedia: [] },
|
|
showResults: false,
|
|
loading: false,
|
|
|
|
async search() {
|
|
if (this.query.length < 2) {
|
|
this.results = { local: [], wikipedia: [] };
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
try {
|
|
const response = await fetch(`/api/cities/search?q=${encodeURIComponent(this.query)}`);
|
|
const data = await response.json();
|
|
|
|
this.results = {
|
|
local: data.local || [],
|
|
wikipedia: data.wikipedia || []
|
|
};
|
|
this.showResults = true;
|
|
} catch (error) {
|
|
console.error('Search error:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endsection
|