106 lines
4.5 KiB
TypeScript
106 lines
4.5 KiB
TypeScript
import { useEffect } from "react";
|
||
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 { useScrollStore } from '../stores/scrollStore';
|
||
import { CategoryDescription, CategoryText, CategoryTitles } from '../types';
|
||
import { SEO } from '../components/SEO';
|
||
import { MasterBio } from "../components/MasterBio";
|
||
|
||
|
||
export function HomePage() {
|
||
const [searchParams] = useSearchParams();
|
||
const categoryId = searchParams.get('category');
|
||
const backgroundImage= BackgroundImages[Number(categoryId)];
|
||
const restoreHomeScrollPosition = useScrollStore(state => state.restoreHomeScrollPosition);
|
||
|
||
// Восстановление позиции скролинга, когда возвращаемся на главную страницу
|
||
useEffect(() => {
|
||
// Проверка, возвращаемся ли мы к статье (сохранено положение скролинга).
|
||
const hasStoredPosition = useScrollStore.getState().homeScrollPosition > 0;
|
||
if (hasStoredPosition) {
|
||
restoreHomeScrollPosition();
|
||
}
|
||
}, [restoreHomeScrollPosition]);
|
||
|
||
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();
|
||
|
||
const getSEODescription = () => {
|
||
if (categoryId) {
|
||
return `Explore the latest ${CategoryTitles[Number(categoryId)].toLowerCase()} stories, events, and cultural highlights from around the globe.`;
|
||
}
|
||
return 'Discover the latest in art, music, theater, and cultural events from around the globe. Your premier destination for arts and culture coverage.';
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-cover bg-center bg-fixed bg-white/95" style={{ backgroundImage: `url('/images/gpt_main-bg.webp')` }}>
|
||
<SEO
|
||
title={categoryId ? `${CategoryTitles[Number(categoryId)]} Stories - CultureScope` : undefined}
|
||
description={getSEODescription()}
|
||
keywords={categoryId ? [CategoryTitles[Number(categoryId)].toLowerCase(), 'culture', 'arts', 'events'] : undefined}
|
||
image={backgroundImage}
|
||
/>
|
||
<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>
|
||
<MasterBio/>
|
||
<AuthorsSection />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
} |