140 lines
2.9 KiB
TypeScript
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>
|
|
);
|
|
}
|