понимаешь, как устроены продажи
умеешь вести диалог с клиентом
не боишься отказов и продаж
{
anchor.addEventListener('click', (e) => {
e.preventDefault();
const target = document.querySelector(anchor.getAttribute('href'));
if (target) smoothScrollTo(target);
});
});
// ============================================
// Hero Cascade Animation
// ============================================
const heroTl = gsap.timeline({ delay: 0.5 });
heroTl
.from('.hero-badge', { y: 30, opacity: 0, duration: 0.8, ease: 'power3.out' })
.from('.hero-title', { y: 60, opacity: 0, duration: 1, ease: 'power3.out' }, '-=0.4')
.from('.hero-subtitle', { y: 40, opacity: 0, duration: 0.8, ease: 'power3.out' }, '-=0.6')
.from('.hero-buttons > *', { y: 30, opacity: 0, duration: 0.6, stagger: 0.15, ease: 'power3.out' }, '-=0.4')
.from('.scroll-indicator', { y: 20, opacity: 0, duration: 0.6, ease: 'power3.out' }, '-=0.2');
// Scroll dot bounce
gsap.to('#scrollDot', { y: 15, duration: 1.5, repeat: -1, yoyo: true, ease: 'power1.inOut' });
// ============================================
// Section Animations (varied per section)
// ============================================
// Section titles — slide up
gsap.utils.toArray('.section-title').forEach(title => {
gsap.from(title, { y: 60, opacity: 0, duration: 1, ease: 'power3.out',
scrollTrigger: { trigger: title, start: 'top 80%' } });
});
// About — fade in paragraphs with stagger
gsap.from('.about-content > *', {
y: 30, opacity: 0, duration: 0.6, stagger: 0.15, ease: 'power3.out',
scrollTrigger: { trigger: '.about-content', start: 'top 80%' }
});
// Services — cards appear with stagger + set initial state
gsap.set('.services-grid > *', { y: 50, opacity: 0 });
ScrollTrigger.create({
trigger: '.services-grid', start: 'top 80%', once: true,
onEnter: () => {
gsap.to('.services-grid > *', { y: 0, opacity: 1, duration: 0.8, stagger: 0.12, ease: 'power3.out', clearProps: 'all' });
}
});
// Advantages — scale up with stagger
gsap.from('.advantages-grid > *', {
scale: 0.85, opacity: 0, duration: 0.6, stagger: 0.1, ease: 'power3.out',
scrollTrigger: { trigger: '.advantages-grid', start: 'top 80%' }
});
// CTA card — slide up
gsap.from('.cta-card', {
y: 60, opacity: 0, duration: 1, ease: 'power3.out',
scrollTrigger: { trigger: '.cta-card', start: 'top 75%' }
});
// ============================================
// Glow Cards (light follows cursor)
// ============================================
if (!isMobile) {
document.querySelectorAll('.glow-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
card.style.setProperty('--mouse-x', ((e.clientX - rect.left) / rect.width) * 100 + '%');
card.style.setProperty('--mouse-y', ((e.clientY - rect.top) / rect.height) * 100 + '%');
});
});
}
// ============================================
// Magnetic Buttons
// ============================================
if (!isMobile) {
document.querySelectorAll('.magnetic-btn').forEach(btn => {
btn.addEventListener('mousemove', (e) => {
const rect = btn.getBoundingClientRect();
const x = (e.clientX - rect.left - rect.width / 2) * 0.3;
const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
btn.style.transform = `translate(${x}px, ${y}px)`;
});
btn.addEventListener('mouseleave', () => { btn.style.transform = 'translate(0, 0)'; });
});
}
// ============================================
// Tilt Cards (3D perspective on hover)
// ============================================
if (!isMobile) {
document.querySelectorAll('.tilt-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left - rect.width / 2) / 40;
const y = (e.clientY - rect.top - rect.height / 2) / 40;
card.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${-y}deg) translateY(-4px)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'perspective(1000px) rotateY(0) rotateX(0) translateY(0)';
});
});
}