126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { gsap } from "gsap";
|
|
import KineticText from "./KineticText";
|
|
import PillMark from "./PillMark";
|
|
import Magnetic from "./Magnetic";
|
|
|
|
export default function Hero() {
|
|
const root = useRef<HTMLElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = root.current;
|
|
if (!el) return;
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
|
|
tl.from(".hero__eyebrow", { y: 18, opacity: 0, duration: 0.9, delay: 0.15 })
|
|
.from(".hero__sub", { y: 22, opacity: 0, duration: 0.9 }, "-=0.2")
|
|
.from(
|
|
".hero__actions > *",
|
|
{ y: 20, opacity: 0, stagger: 0.1, duration: 0.7 },
|
|
"-=0.5"
|
|
)
|
|
.from(".hero__meta", { opacity: 0, duration: 0.8 }, "-=0.4");
|
|
|
|
// parallax on the floating mark as you scroll the hero out
|
|
gsap.to(".hero__mark", {
|
|
yPercent: -22,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: true,
|
|
},
|
|
});
|
|
gsap.to(".hero__display", {
|
|
yPercent: 12,
|
|
opacity: 0.25,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: true,
|
|
},
|
|
});
|
|
}, el);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<section className="hero" ref={root}>
|
|
<div className="hero__inner wrap">
|
|
<p className="hero__eyebrow">
|
|
<span className="dot" aria-hidden="true" />
|
|
Agencia de marketing AI-native
|
|
</p>
|
|
|
|
<h1 className="hero__display">
|
|
<KineticText as="span" className="hero__line" text="No alquilamos" immediate delay={0.25} />
|
|
<span className="hero__line hero__line--mixed">
|
|
<KineticText as="span" text="las" immediate delay={0.4} />
|
|
<em className="hero__serif"> herramientas.</em>
|
|
</span>
|
|
<KineticText
|
|
as="span"
|
|
className="hero__line hero__line--grad"
|
|
text="Construimos la máquina."
|
|
immediate
|
|
delay={0.5}
|
|
highlight={[0, 2]}
|
|
/>
|
|
</h1>
|
|
|
|
<div className="hero__mark" aria-hidden="true">
|
|
<PillMark animate breathe />
|
|
</div>
|
|
|
|
<p className="hero__sub">
|
|
Estrategia humana sobre <strong>nuestra propia plataforma de IA</strong>.
|
|
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">
|
|
<Magnetic strength={0.5}>
|
|
<a className="btn btn--primary hoverable" href="#contacto">
|
|
<span>Habla con nosotros</span>
|
|
</a>
|
|
</Magnetic>
|
|
<Magnetic strength={0.3}>
|
|
<a className="btn btn--ghost hoverable" href="#servicios">
|
|
<span>Ver qué hacemos</span>
|
|
</a>
|
|
</Magnetic>
|
|
</div>
|
|
|
|
<dl className="hero__meta">
|
|
<div>
|
|
<dt>Entrega</dt>
|
|
<dd>en días, no semanas</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Reporting</dt>
|
|
<dd>cada acción medida</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Infraestructura</dt>
|
|
<dd>propia, no alquilada</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<a className="hero__scroll hoverable" href="#ventaja" aria-label="Bajar a la siguiente sección">
|
|
<span>scroll</span>
|
|
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
|
<path d="M12 4v16m0 0l-6-6m6 6l6-6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</a>
|
|
</section>
|
|
);
|
|
}
|