Alejandro Veras
ddeecef631
Dark cinematic redesign: animated globe hero, stats, interactive capabilities engine, proprietary technology visuals, AI discovery, attribution journey, connections manifesto, CTA and footer.
469 lines
20 KiB
TypeScript
469 lines
20 KiB
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
||
import SiteHeader from "@/components/site-header";
|
||
import GlobeCanvas from "@/components/globe-canvas";
|
||
import RevealObserver from "@/components/reveal-observer";
|
||
import StatCounter from "@/components/stat-counter";
|
||
import Capabilities from "@/components/capabilities";
|
||
import QueryTicker from "@/components/query-ticker";
|
||
import ProductVisual from "@/components/product-visuals";
|
||
import Logo from "@/components/logo";
|
||
import { stats, products, journeySteps, gaps, footerColumns } from "@/content/home";
|
||
|
||
type Vars = CSSProperties & Record<`--${string}`, string | number>;
|
||
const delay = (ms: number) => ({ "--d": `${ms}ms` }) as Vars;
|
||
|
||
const Arrow = () => <span className="arrow">→</span>;
|
||
|
||
function Eyebrow({ index, children }: { index?: string; children: ReactNode }) {
|
||
return (
|
||
<p className="eyebrow">
|
||
{index && <span className="idx">{index}</span>}
|
||
{children}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
<a href="#main" className="skip-link">
|
||
Skip to content
|
||
</a>
|
||
<SiteHeader />
|
||
<RevealObserver />
|
||
|
||
<main id="main">
|
||
{/* ───────────────────────── Hero ───────────────────────── */}
|
||
<section className="hero" id="top" aria-labelledby="hero-title">
|
||
<GlobeCanvas />
|
||
<div className="wrap hero-inner">
|
||
<div data-reveal>
|
||
<Eyebrow>Digital Growth Architects</Eyebrow>
|
||
</div>
|
||
<h1 id="hero-title" className="display h1" data-reveal style={delay(120)}>
|
||
Where Search, AI, Media, and Technology Work Together.
|
||
</h1>
|
||
|
||
<div className="hero-grid">
|
||
<div className="hero-lead lead" data-reveal style={delay(260)}>
|
||
<p>
|
||
Your customer might find you through Google today, an AI answer tomorrow, and a paid ad three
|
||
days later.
|
||
</p>
|
||
<p className="muted">They don’t think in channels. Your growth strategy shouldn’t either.</p>
|
||
</div>
|
||
<div className="hero-body" data-reveal style={delay(380)}>
|
||
<div className="copy">
|
||
<p>
|
||
AI Growth Technologies brings paid media, search, AI visibility, technology, and attribution
|
||
together so each part strengthens the others.
|
||
</p>
|
||
<p className="hl">One strategy. Connected execution. A clearer view of what is actually driving growth.</p>
|
||
</div>
|
||
<div className="hero-actions">
|
||
<a href="#contact" className="btn btn-solid">
|
||
Book a Strategy Call <Arrow />
|
||
</a>
|
||
<a href="#capabilities" className="btn btn-ghost">
|
||
Explore Services <Arrow />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-foot" data-reveal style={delay(520)}>
|
||
<div className="hero-channels" aria-hidden="true">
|
||
<span>Paid Media</span>
|
||
<i />
|
||
<span>Search</span>
|
||
<i />
|
||
<span>AI Visibility</span>
|
||
<i />
|
||
<span>Technology</span>
|
||
<i />
|
||
<span>Attribution</span>
|
||
</div>
|
||
<a href="#evidence" className="scroll-cue">
|
||
Scroll <i />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Numbers ───────────────────────── */}
|
||
<section className="section" id="evidence" aria-labelledby="evidence-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="01">The Numbers Behind the Work</Eyebrow>
|
||
<h2 id="evidence-title" className="display h2">
|
||
Good Growth Leaves Evidence.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="stats">
|
||
{stats.map((s, i) => (
|
||
<div key={s.label} className="stat" data-reveal style={delay(i * 120)}>
|
||
<StatCounter value={s.value} suffix={s.suffix} />
|
||
<div className="stat-label">{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Capabilities ───────────────────────── */}
|
||
<section className="section section-night" id="capabilities" aria-labelledby="cap-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="02">Everything Works Better Connected</Eyebrow>
|
||
<h2 id="cap-title" className="display h2">
|
||
Eight Capabilities.
|
||
<br />
|
||
One Growth Engine.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="split">
|
||
<div className="lead" data-reveal>
|
||
<p>
|
||
A search can lead to an ad. An ad can lead to a website visit. An AI answer can introduce the brand
|
||
before either happens.
|
||
</p>
|
||
</div>
|
||
<div className="copy" data-reveal style={delay(140)}>
|
||
<p>To your customer, that is not SEO, paid media, AI, and web.</p>
|
||
<p className="hl">It is one experience with your business.</p>
|
||
<p>Our capabilities are designed to work that way too.</p>
|
||
</div>
|
||
</div>
|
||
<div data-reveal>
|
||
<Capabilities />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Proprietary technology ───────────────────────── */}
|
||
<section className="section" id="technology" aria-labelledby="tech-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="03">Proprietary Technology</Eyebrow>
|
||
<h2 id="tech-title" className="display h2">
|
||
We Wanted Better Answers, So We Built Better Tools.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="split">
|
||
<div className="lead" data-reveal>
|
||
<p>Marketing produces plenty of numbers.</p>
|
||
<p className="muted">The harder part is knowing which ones matter.</p>
|
||
</div>
|
||
<div className="copy" data-reveal style={delay(140)}>
|
||
<p>
|
||
Our proprietary technology gives our teams and clients a clearer view across attribution, organic and
|
||
AI visibility, and digital resilience.
|
||
</p>
|
||
<p>
|
||
Not more data for the sake of it. <span className="hl">Better information for the decisions that come next.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="products">
|
||
{products.map((p, i) => (
|
||
<article key={p.name} className="product" aria-labelledby={`product-${i}`}>
|
||
<div className="product-visual" data-reveal>
|
||
<ProductVisual kind={p.visual} />
|
||
</div>
|
||
<div className="product-body" data-reveal style={delay(160)}>
|
||
<div className="product-kind">
|
||
<span>{String(i + 1).padStart(2, "0")} / 03</span>
|
||
<span className="pill">{p.kind}</span>
|
||
</div>
|
||
<h3 id={`product-${i}`} className="product-name">
|
||
{p.name}
|
||
</h3>
|
||
<h4 className="display h3">{p.headline}</h4>
|
||
<div className="copy">
|
||
{p.body.map((b) => (
|
||
<p key={b}>{b}</p>
|
||
))}
|
||
</div>
|
||
<a href="#" className="arrow-link">
|
||
{p.cta} <Arrow />
|
||
</a>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Discovery ───────────────────────── */}
|
||
<section className="section section-night discovery" id="discovery" aria-labelledby="disc-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="04">Discovery Is Changing</Eyebrow>
|
||
<h2 id="disc-title" className="display h2">
|
||
Your Next Customer May Ask Before They Search.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="discovery-stage" data-reveal>
|
||
<div className="query-label">People now ask AI platforms</div>
|
||
<QueryTicker />
|
||
<div className="surfaces">
|
||
<div className="surface left">
|
||
<span className="pill">Google</span>
|
||
<span className="pill">Rankings</span>
|
||
<span className="pill">Authority</span>
|
||
</div>
|
||
<div className="surface-core">Your Brand</div>
|
||
<div className="surface">
|
||
<span className="pill">ChatGPT</span>
|
||
<span className="pill">Gemini</span>
|
||
<span className="pill">AI Overviews</span>
|
||
<span className="pill">Perplexity</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="split">
|
||
<div className="lead" data-reveal>
|
||
<p>People still search Google.</p>
|
||
<p className="muted">
|
||
Now they also ask AI platforms which companies to consider, how products compare, what to buy, and
|
||
who to trust.
|
||
</p>
|
||
</div>
|
||
<div data-reveal style={delay(140)}>
|
||
<div className="copy">
|
||
<p className="hl">That changes what visibility means.</p>
|
||
<p>
|
||
Rankings still matter. But so do the information, authority, context, and signals that help AI
|
||
systems understand a brand well enough to surface it.
|
||
</p>
|
||
<p>Our SEO and LLMO work connects both sides of that shift.</p>
|
||
</div>
|
||
<a href="#" className="arrow-link" style={{ marginTop: 28 }}>
|
||
Explore AI Visibility <Arrow />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Attention to action ───────────────────────── */}
|
||
<section className="section" id="approach" aria-labelledby="journey-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="05">From Attention to Action</Eyebrow>
|
||
<h2 id="journey-title" className="display h2">
|
||
The Last Click Rarely Tells the Whole Story.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="journey" data-reveal-group>
|
||
<ol>
|
||
{journeySteps.map((s, i) => (
|
||
<li key={s.label} style={{ "--i": i } as Vars}>
|
||
<span className="dot" />
|
||
<span className="channel">
|
||
{String(i + 1).padStart(2, "0")} — {s.channel}
|
||
</span>
|
||
<span className="step">{s.label}</span>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
|
||
<div className="credit split">
|
||
<h3 className="display question" data-reveal>
|
||
Which interaction gets the credit?
|
||
</h3>
|
||
<div className="copy" data-reveal style={delay(140)}>
|
||
<p>Too often, the answer depends on which dashboard you open.</p>
|
||
<p>
|
||
We bring media, search, AI visibility, and attribution closer together to answer a more useful
|
||
question:
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<figure className="pullquote" data-reveal>
|
||
<Eyebrow>The more useful question</Eyebrow>
|
||
<blockquote>What actually helped move the customer toward a decision?</blockquote>
|
||
<figcaption className="copy">
|
||
<p>Better attribution isn’t about producing a prettier report.</p>
|
||
<p className="hl">
|
||
It is about knowing where the next dollar has the best chance of doing something useful.
|
||
</p>
|
||
</figcaption>
|
||
<a href="#" className="arrow-link">
|
||
Explore Our Approach <Arrow />
|
||
</a>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── Connections ───────────────────────── */}
|
||
<section className="section section-night" id="difference" aria-labelledby="diff-title">
|
||
<div className="wrap">
|
||
<div className="section-head">
|
||
<div className="title" data-reveal>
|
||
<Eyebrow index="06">The Difference Is in the Connections</Eyebrow>
|
||
<h2 id="diff-title" className="display h2">
|
||
Good Channels Don’t Automatically Make a Good System.
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<ul className="gaps">
|
||
{gaps.map((g, i) => (
|
||
<li key={g} data-reveal style={delay(i * 80)}>
|
||
<span>{g}</span>
|
||
<svg className="break" viewBox="0 0 120 14" aria-hidden="true">
|
||
<line x1="0" y1="7" x2="50" y2="7" />
|
||
<line x1="70" y1="7" x2="120" y2="7" />
|
||
<line className="cut" x1="55" y1="1" x2="65" y2="13" />
|
||
</svg>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="split" style={{ marginTop: "clamp(80px, 10vw, 144px)" }}>
|
||
<h3 className="display h2" data-reveal>
|
||
That is the gap we care about.
|
||
</h3>
|
||
<div className="copy" data-reveal style={delay(140)}>
|
||
<p>We look at how discovery, acquisition, experience, data, technology, and security affect one another.</p>
|
||
<p className="hl">Then we strengthen the connections that make the whole system perform better.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="nos">
|
||
<div data-reveal>
|
||
<span>No. 01</span>
|
||
No channel fighting for credit.
|
||
</div>
|
||
<div data-reveal style={delay(120)}>
|
||
<span>No. 02</span>
|
||
No technology added just because it is new.
|
||
</div>
|
||
<div data-reveal style={delay(240)}>
|
||
<span>No. 03</span>
|
||
No dashboard pretending the numbers mean more than they do.
|
||
</div>
|
||
</div>
|
||
|
||
<p className="closing" data-reveal>
|
||
Just a clearer system and a team accountable for making it work.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ───────────────────────── CTA ───────────────────────── */}
|
||
<section className="cta" id="contact" aria-labelledby="cta-title">
|
||
<GlobeCanvas layout="center" />
|
||
<div className="wrap">
|
||
<div data-reveal>
|
||
<Eyebrow>Ready When You Are</Eyebrow>
|
||
</div>
|
||
<h2 id="cta-title" className="display h2" data-reveal style={delay(120)}>
|
||
Bring Us the Growth Problem You Can’t Quite Pin Down.
|
||
</h2>
|
||
<div className="copy" data-reveal style={delay(240)}>
|
||
<p>
|
||
Maybe acquisition is getting more expensive. Maybe organic visibility has stalled. Maybe AI is changing
|
||
how customers find you.
|
||
</p>
|
||
<p>Or maybe every dashboard looks healthy, but the business is telling you something different.</p>
|
||
</div>
|
||
<div className="lead" data-reveal style={delay(320)}>
|
||
<p>You don’t need to diagnose it before the call.</p>
|
||
<p className="muted">Bring us what you’re seeing. We’ll start there.</p>
|
||
</div>
|
||
<div data-reveal style={delay(400)}>
|
||
<a href="#" className="btn btn-solid">
|
||
Book Your Strategy Call <Arrow />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* ───────────────────────── Footer ───────────────────────── */}
|
||
<footer className="footer">
|
||
<div className="wrap">
|
||
<div className="footer-top">
|
||
<div className="footer-brand">
|
||
<Logo />
|
||
<p>
|
||
Paid media, SEO, AI visibility, web, attribution, and technology — connected into one accountable
|
||
digital growth system.
|
||
</p>
|
||
<div className="socials">
|
||
<a href="#" aria-label="LinkedIn">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||
<rect x="3" y="3" width="18" height="18" />
|
||
<path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" />
|
||
</svg>
|
||
</a>
|
||
<a href="#" aria-label="Instagram">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||
<circle cx="12" cy="12" r="4" />
|
||
<path d="M17.5 6.5v.01" />
|
||
</svg>
|
||
</a>
|
||
<a href="#" aria-label="X">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||
<path d="M4 4l16 16M20 4L4 20" />
|
||
</svg>
|
||
</a>
|
||
<a href="#" aria-label="YouTube">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
|
||
<rect x="2.5" y="5.5" width="19" height="13" rx="3" />
|
||
<path d="M10 9.5v5l4.5-2.5z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="footer-cols">
|
||
{footerColumns.map((col) => (
|
||
<div key={col.title}>
|
||
<h4>{col.title}</h4>
|
||
<ul>
|
||
{col.links.map((l) => (
|
||
<li key={l}>
|
||
<a href="#">{l}</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<p className="footer-word" aria-hidden="true">
|
||
AI Growth Technologies
|
||
</p>
|
||
<div className="footer-bottom">
|
||
<span>© 2026 AI Growth Technologies. All rights reserved.</span>
|
||
<nav aria-label="Legal">
|
||
<a href="#">Privacy</a>
|
||
<a href="#">Terms</a>
|
||
<a href="#">Cookies</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</>
|
||
);
|
||
}
|