'use client'; import { useEffect, useRef } from 'react'; import Image from 'next/image'; export default function HeroSection() { const punchlineRef = useRef(null); const punchlineSmallRef = useRef(null); const strip1Ref = useRef(null); const strip2Ref = useRef(null); const strip3Ref = useRef(null); useEffect(() => { const t1 = setTimeout(() => { punchlineRef.current?.classList.add('slide-in-blurred-bottom'); punchlineSmallRef.current?.classList.add('slide-in-blurred-bottom'); }, 100); const t2 = setTimeout(() => { strip1Ref.current?.classList.add('slide-in-blurred-bottom'); strip2Ref.current?.classList.add('slide-in-blurred-bottom'); strip3Ref.current?.classList.add('slide-in-blurred-bottom'); }, 700); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); const scrollToNext = (e: React.MouseEvent) => { e.preventDefault(); const sections = document.querySelectorAll('main > section'); if (sections[1]) sections[1].scrollIntoView({ behavior: 'smooth' }); }; return (
{/* ── Background builder ── */}
{/* black-strip */}
{/* blue-strip */}
{/* red-strip — float wrapper isolates translateY from the slide-in transform */}
{/* Mobile hint tiles — peek in from corners, desktop-hidden via CSS */}
{/* Mobile overlay */}
{/* ── Content ── */}
Bitsia

Bitsia

IT solutions with a business mind
Every project gets our complete team — developers, designers, marketers, and business consultants working together toward your goals. Not just code. Real solutions.
{/* ── Scroll down ── */}
); }