79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { useSearchParams } from 'react-router-dom';
|
||
import { Header } from '../components/Header';
|
||
import { FeaturedSection } from '../components/FeaturedSection';
|
||
import { AuthorsSection } from '../components/AuthorsSection';
|
||
import { BackgroundImages } from '../hooks/useBackgroundImage';
|
||
import { CategoryDescription, CategoryText, CategoryTitles } from '../types';
|
||
|
||
export function HomePage() {
|
||
const [searchParams] = useSearchParams();
|
||
const categoryId = searchParams.get('category');
|
||
const backgroundImage= BackgroundImages[Number(categoryId)];
|
||
|
||
console.log(categoryId)
|
||
|
||
const getHeroTitle = () => {
|
||
if (categoryId) {
|
||
return {
|
||
main: CategoryTitles[Number(categoryId)],
|
||
sub: CategoryDescription[Number(categoryId)],
|
||
description: CategoryText[Number(categoryId)]
|
||
};
|
||
}
|
||
return {
|
||
main: 'Волшебный мир искуства',
|
||
sub: 'Все о культуре Москвы и Петербурга',
|
||
description: 'Следите за событиями культурной жизни столиц: концерты, выставки, спектакли и многое другое в одном удобном формате.'
|
||
};
|
||
};
|
||
|
||
const { main, sub, description } = getHeroTitle();
|
||
|
||
return (
|
||
<div className="min-h-screen bg-cover bg-center bg-fixed bg-white/95" style={{ backgroundImage: `url('/images/gpt_main-bg.webp')` }}>
|
||
<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">
|
||
{description}
|
||
</p>
|
||
<div className="mt-8 flex justify-center space-x-4">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="relative bg-white/95">
|
||
<div id="featured">
|
||
<FeaturedSection />
|
||
</div>
|
||
<AuthorsSection />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
} |