95 lines
3.7 KiB
TypeScript
95 lines
3.7 KiB
TypeScript
import { useSearchParams } from 'react-router-dom';
|
|
import { Header } from '../components/Header';
|
|
import { FeaturedSection } from '../components/FeaturedSection';
|
|
import { useBackgroundImage } from '../hooks/useBackgroundImage';
|
|
import { Category } from '../types';
|
|
|
|
export function HomePage() {
|
|
const [searchParams] = useSearchParams();
|
|
const category = searchParams.get('category') as Category | null;
|
|
const backgroundImage = useBackgroundImage(category);
|
|
|
|
const getHeroTitle = () => {
|
|
if (category) {
|
|
return {
|
|
main: `Discover ${category}`,
|
|
sub: getCategoryDescription(category)
|
|
};
|
|
}
|
|
return {
|
|
main: 'Discover the World of',
|
|
sub: 'Arts & Culture'
|
|
};
|
|
};
|
|
|
|
const getCategoryDescription = (category: Category): string => {
|
|
const descriptions = {
|
|
Film: 'Cinema & Motion Pictures',
|
|
Theater: 'Stage & Performance',
|
|
Music: 'Rhythm & Harmony',
|
|
Sports: 'Athletics & Competition',
|
|
Art: 'Visual & Creative Expression',
|
|
Legends: 'Stories & Heritage',
|
|
Anniversaries: 'Celebrations & Milestones',
|
|
Memory: 'History & Remembrance'
|
|
};
|
|
return descriptions[category];
|
|
};
|
|
|
|
const { main, sub } = getHeroTitle();
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main>
|
|
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div className="px-4 py-6 sm:px-0">
|
|
<div className="relative">
|
|
<div className="absolute inset-0">
|
|
<div
|
|
className="w-full h-full bg-cover bg-center transition-all duration-500 ease-in-out"
|
|
style={{
|
|
backgroundImage: `url("${backgroundImage}")`,
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-gray-900/90 to-gray-900/60 backdrop-blur-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="text-center max-w-4xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
|
|
<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl">
|
|
<span className="block mb-2">{main}</span>
|
|
<span className="block text-blue-400">{sub}</span>
|
|
</h1>
|
|
<p className="mt-6 text-xl text-gray-200 max-w-2xl mx-auto">
|
|
{category ?
|
|
`Explore the latest ${category.toLowerCase()} stories, events, and cultural highlights from around the globe.` :
|
|
'Explore the latest in art, music, theater, and cultural events from around the globe. Join us on a journey through the world\'s most inspiring creative expressions.'
|
|
}
|
|
</p>
|
|
<div className="mt-8 flex justify-center space-x-4">
|
|
<a
|
|
href={category ? `/?category=${category}` : '/?category=Art'}
|
|
className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors"
|
|
>
|
|
Explore Articles
|
|
</a>
|
|
<a
|
|
href="#featured"
|
|
className="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-white hover:bg-white/10 transition-colors"
|
|
>
|
|
Latest Stories
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="featured">
|
|
<FeaturedSection />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
} |