108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { gsap } from "gsap";
|
|
|
|
const line1 = "La mayoría de agencias alquilan sus herramientas.".split(" ");
|
|
const line2 = "Nosotros construimos la nuestra.".split(" ");
|
|
|
|
function Words({ words, grad }: { words: string[]; grad?: boolean }) {
|
|
return (
|
|
<span className={"line" + (grad ? " grad" : "")}>
|
|
{words.map((w, i) => (
|
|
<span className="word" key={i}>
|
|
<span className="word-in">{w}</span>{" "}
|
|
</span>
|
|
))}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function Hero() {
|
|
const root = useRef<HTMLElement>(null);
|
|
const mark = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = root.current;
|
|
if (!el) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
|
|
tl.from(".eyebrow", { y: 20, opacity: 0, duration: 0.8 })
|
|
.from(
|
|
".word-in",
|
|
{ yPercent: 115, duration: 1.05, stagger: 0.045 },
|
|
"-=0.4"
|
|
)
|
|
.from(".hero-sub", { y: 24, opacity: 0, duration: 0.9 }, "-=0.7")
|
|
.from(".hero-actions > *", { y: 20, opacity: 0, stagger: 0.12, duration: 0.7 }, "-=0.6")
|
|
.from(".bar", { scaleX: 0, transformOrigin: "left", stagger: 0.08, duration: 0.7, ease: "power3.inOut" }, "-=1.1");
|
|
|
|
// floating pill-mark
|
|
gsap.to(".bar", {
|
|
y: "+=8",
|
|
duration: 2.4,
|
|
ease: "sine.inOut",
|
|
repeat: -1,
|
|
yoyo: true,
|
|
stagger: { each: 0.15, from: "random" },
|
|
});
|
|
|
|
}, el);
|
|
|
|
const onMove = (e: MouseEvent) => {
|
|
const rx = (e.clientX / window.innerWidth - 0.5) * 2;
|
|
const ry = (e.clientY / window.innerHeight - 0.5) * 2;
|
|
gsap.to(mark.current, { x: rx * 22, y: ry * 22, duration: 0.8, ease: "power3" });
|
|
gsap.to(".blob", { x: rx * 30, y: ry * 30, duration: 1.2, ease: "power3" });
|
|
};
|
|
window.addEventListener("mousemove", onMove);
|
|
|
|
return () => {
|
|
window.removeEventListener("mousemove", onMove);
|
|
ctx.revert();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section className="hero" ref={root}>
|
|
<div className="mesh" aria-hidden>
|
|
<span className="blob b1" />
|
|
<span className="blob b2" />
|
|
<span className="blob b3" />
|
|
<span className="blob b4" />
|
|
</div>
|
|
|
|
<div className="hero-inner wrap">
|
|
<p className="eyebrow">Agencia de marketing AI-native</p>
|
|
|
|
<div ref={mark} className="pillmark" aria-hidden>
|
|
<span className="bar bar-grad" />
|
|
<div className="bar-row">
|
|
<span className="bar bar-ink" />
|
|
<span className="bar bar-blue" />
|
|
</div>
|
|
<span className="bar bar-green" />
|
|
</div>
|
|
|
|
<h1 className="hero-h1">
|
|
<Words words={line1} />
|
|
<Words words={line2} grad />
|
|
</h1>
|
|
|
|
<p className="hero-sub">
|
|
Estrategia humana + nuestra propia plataforma de IA. Web, SEO, ads y
|
|
contenido — más rápido, más medible y a mejor coste que una agencia
|
|
tradicional.
|
|
</p>
|
|
|
|
<div className="hero-actions">
|
|
<a className="btn primary hoverable" href="#contacto">Habla con nosotros</a>
|
|
<a className="btn ghost hoverable" href="#servicios">Ver qué hacemos</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="scroll-hint" aria-hidden>scroll</div>
|
|
</section>
|
|
);
|
|
}
|