2025-06-10 16:38:27 +03:00

140 lines
2.9 KiB
TypeScript

'use client';
import Header from '@/components/Header';
import Footer from '@/components/Fotter';
import PosterSlider from '@/components/Slideposter';
import RandomComment from '@/components/RandomComment';
// Дополнительные стили для улучшения внешнего вида
const styles = `
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes glowPulse {
0% {
text-shadow: 0 0 5px rgba(255,127,39,0.3);
}
50% {
text-shadow: 0 0 20px rgba(255,127,39,0.6);
}
100% {
text-shadow: 0 0 5px rgba(255,127,39,0.3);
}
}
.page-container {
background: radial-gradient(circle at top right, rgba(30,30,30,0.8) 0%, rgba(15,15,15,0.8) 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
.page-container::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('/noise-texture.png'), linear-gradient(145deg, rgba(255,127,39,0.1) 0%, rgba(0,0,0,0) 70%);
opacity: 0.4;
pointer-events: none;
z-index: -1;
}
.content-container {
animation: fadeInUp 0.6s ease-out forwards;
width: 100%;
}
.section-title {
color: #ff7f27;
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-weight: bold;
background: linear-gradient(to right, #ff7f27, #ff5500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glowPulse 3s infinite;
text-align: center;
}
.welcome-section {
text-align: center;
margin-bottom: 3rem;
}
.welcome-text {
max-width: 800px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.7;
color: rgba(255,255,255,0.9);
opacity: 0;
animation: fadeInUp 0.6s forwards;
animation-delay: 0.3s;
}
/* Добавьте это для улучшения работы модальных окон */
.modal-backdrop {
isolation: isolate;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: backdrop-filter;
}
@media screen and (max-width: 768px) {
.modal-backdrop {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
}
`;
// Стили для главного контейнера
const mainContentStyle = {
display: 'flex' as const,
flexDirection: 'column' as const,
alignItems: 'center' as const,
width: '100%',
maxWidth: '90vw',
margin: '0 auto',
flex: 1,
paddingTop: '76px',
paddingBottom: '30px',
};
export default function Home() {
return (
<div className="page-container">
<style>{styles}</style>
<Header />
<main style={mainContentStyle} className="content-container">
<PosterSlider />
<RandomComment />
</main>
<Footer />
</div>
);
}