G360Pmk/aigrowthtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build the AI Growth Technologies homepage

Browse Source 
Dark cinematic redesign: animated globe hero, stats, interactive
capabilities engine, proprietary technology visuals, AI discovery,
attribution journey, connections manifesto, CTA and footer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-08 15:44:57 -04:00
parent 62539b2929
commit 5134fbfb73
17 changed files with 3242 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+462 -63
View File
@@ -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>
</>
);
}