Build the AI Growth Technologies homepage
Dark cinematic redesign: animated globe hero, stats, interactive capabilities engine, proprietary technology visuals, AI discovery, attribution journey, connections manifesto, CTA and footer.
This commit is contained in:
Alejandro Veras
+462
-63
@@ -1,69 +1,468 @@
|
||||
import Image from "next/image";
|
||||
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 (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert h-5 w-[100px]"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the{" "}
|
||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
||||
page.tsx
|
||||
</code>{" "}
|
||||
file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert h-[14px] w-4"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={14}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* ───────────────────────── 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user