93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
||
import { animate } from 'animejs';
|
||
import './Hero.scss';
|
||
import content from '../../data/content.json';
|
||
|
||
const Hero: React.FC = () => {
|
||
const heroRef = useRef<HTMLDivElement>(null);
|
||
const fireParticlesRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
// Анимация появления текста
|
||
animate('.hero-title', {
|
||
translateY: [50, 0],
|
||
opacity: [0, 1],
|
||
duration: 1000,
|
||
easing: 'easeOutQuad',
|
||
delay: 500
|
||
});
|
||
|
||
animate('.hero-subtitle', {
|
||
translateY: [30, 0],
|
||
opacity: [0, 1],
|
||
duration: 800,
|
||
easing: 'easeOutQuad',
|
||
delay: 800
|
||
});
|
||
|
||
animate('.hero-buttons', {
|
||
translateY: [20, 0],
|
||
opacity: [0, 1],
|
||
duration: 600,
|
||
easing: 'easeOutQuad',
|
||
delay: 1200
|
||
});
|
||
|
||
// Создание частиц огня
|
||
createFireParticles();
|
||
}, []);
|
||
|
||
const createFireParticles = () => {
|
||
const container = fireParticlesRef.current;
|
||
if (!container) return;
|
||
|
||
for (let i = 0; i < 20; i++) {
|
||
const particle = document.createElement('div');
|
||
particle.className = 'fire-particle';
|
||
particle.style.left = Math.random() * 100 + '%';
|
||
particle.style.animationDelay = Math.random() * 2 + 's';
|
||
container.appendChild(particle);
|
||
}
|
||
};
|
||
|
||
const scrollToProjects = () => {
|
||
const projectsSection = document.getElementById('projects');
|
||
projectsSection?.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
|
||
return (
|
||
<section className="hero" ref={heroRef}>
|
||
<div className="fire-particles" ref={fireParticlesRef}></div>
|
||
<div className="hero-bg">
|
||
<div className="fire-gradient"></div>
|
||
</div>
|
||
|
||
<div className="container">
|
||
<div className="hero-content">
|
||
<div className="hero-logo">
|
||
<div className="logo-fire">🔥</div>
|
||
</div>
|
||
|
||
<h1 className="hero-title">{content.hero.title}</h1>
|
||
|
||
<p className="hero-subtitle">{content.hero.subtitle}</p>
|
||
|
||
<p className="hero-description">{content.hero.description}</p>
|
||
|
||
<div className="hero-buttons">
|
||
{/* заменил a на button, чтобы eslint не ругался */}
|
||
<button className="btn btn-primary">
|
||
Присоединиться
|
||
</button>
|
||
<button onClick={scrollToProjects} className="btn btn-secondary">
|
||
Проекты
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Hero;
|