264 lines
9.3 KiB
TypeScript
264 lines
9.3 KiB
TypeScript
import Link from "next/link";
|
|
import {
|
|
SITE,
|
|
services,
|
|
cases,
|
|
testimonials,
|
|
} from "./content";
|
|
|
|
import SiteHeader from "./components/SiteHeader";
|
|
import Hero from "./components/Hero";
|
|
import VelocityMarquee from "./components/VelocityMarquee";
|
|
import Reveal, { RevealItem } from "./components/Reveal";
|
|
import Scoreboard from "./components/Scoreboard";
|
|
import CaseCard, { type CaseData } from "./components/CaseCard";
|
|
import ProcessLoop from "./components/ProcessLoop";
|
|
import Faq from "./components/Faq";
|
|
import Magnetic from "./components/Magnetic";
|
|
|
|
const TAPE = [
|
|
"Revenue, not vanity metrics",
|
|
"Paid",
|
|
"SEO",
|
|
"Content",
|
|
"Social",
|
|
"+52% ROAS",
|
|
"+217% demos",
|
|
"+128 booked/mo",
|
|
"Reported every month",
|
|
];
|
|
|
|
const INDUSTRIES = [
|
|
"E-commerce",
|
|
"B2B SaaS",
|
|
"Clinics",
|
|
"Professional services",
|
|
"DTC brands",
|
|
"Marketplaces",
|
|
];
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<SiteHeader />
|
|
|
|
<main id="main">
|
|
<Hero />
|
|
|
|
{/* ===== KINETIC TAPE — scroll-velocity marquee ===== */}
|
|
<section className="tape" aria-label="What we do, at a glance">
|
|
<VelocityMarquee items={TAPE} />
|
|
</section>
|
|
|
|
{/* ===== POSITIONING / MANIFESTO ===== */}
|
|
<section id="manifesto" className="manifesto frame" aria-labelledby="man-h">
|
|
<div className="wrap manifesto__wrap">
|
|
<Reveal as="p" className="kicker">
|
|
<span className="kicker__dot" />
|
|
The problem with most agencies
|
|
</Reveal>
|
|
<Reveal as="p" className="manifesto__lead display" delay={80}>
|
|
<span id="man-h">
|
|
Most budgets buy <span className="strike">activity</span>, not
|
|
outcomes. Dashboards fill with impressions while the sales number{" "}
|
|
<span className="grad">sits still.</span>
|
|
</span>
|
|
</Reveal>
|
|
<Reveal as="p" className="manifesto__body" delay={180}>
|
|
We started Feedback Studios to fix that. Every campaign we run is
|
|
built to move revenue, and we report on it the way your CFO would.
|
|
No vanity metrics. No mystery. Just the number that pays the bills.
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== INDUSTRIES / SOCIAL PROOF ===== */}
|
|
<section className="proof" aria-label="Who we work with">
|
|
<div className="wrap">
|
|
<p className="kicker proof__label">
|
|
Trusted by teams that care about the sales number
|
|
</p>
|
|
<Reveal as="ul" className="proof__list" stagger={0.06}>
|
|
{INDUSTRIES.map((p) => (
|
|
<RevealItem as="li" className="proof__item" key={p}>
|
|
{p}
|
|
</RevealItem>
|
|
))}
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== SERVICES — interactive ledger ===== */}
|
|
<section id="services" className="services frame" aria-labelledby="svc-h">
|
|
<div className="wrap">
|
|
<header className="sec-head">
|
|
<p className="kicker">
|
|
<span className="kicker__dot" />
|
|
Services / 06
|
|
</p>
|
|
<h2 id="svc-h" className="display sec-head__title">
|
|
How we grow your business
|
|
</h2>
|
|
</header>
|
|
|
|
<Reveal as="ol" className="ledger" stagger={0.07}>
|
|
{services.map((s, i) => (
|
|
<RevealItem as="li" key={s.id}>
|
|
<a href={SITE.booking} className="ledger__row" data-cursor="Scope it">
|
|
<span className="ledger__no">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</span>
|
|
<h3 className="ledger__name display">{s.name}</h3>
|
|
<p className="ledger__desc">{s.desc}</p>
|
|
<span className="ledger__arrow" aria-hidden="true">↗</span>
|
|
</a>
|
|
</RevealItem>
|
|
))}
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== METRICS scoreboard (animated SVG bars + count-ups) ===== */}
|
|
<Scoreboard />
|
|
|
|
{/* ===== CASE STUDIES — 3D tilt + coded charts ===== */}
|
|
<section id="work" className="work frame" aria-labelledby="work-h">
|
|
<div className="wrap">
|
|
<header className="sec-head">
|
|
<p className="kicker">
|
|
<span className="kicker__dot" />
|
|
Selected work — sample
|
|
</p>
|
|
<h2 id="work-h" className="display sec-head__title">
|
|
Proof, not promises
|
|
</h2>
|
|
</header>
|
|
|
|
<div className="work__grid">
|
|
{cases.map((c, i) => (
|
|
<CaseCard key={c.tag} data={c as unknown as CaseData} index={i} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="work__cta">
|
|
<Magnetic strength={0.3}>
|
|
<a href={SITE.booking} className="btn btn--ghost" data-cursor="See more">
|
|
View all work <span className="arrow" aria-hidden="true">→</span>
|
|
</a>
|
|
</Magnetic>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== PROCESS — pinned scroll + morphing SVG ===== */}
|
|
<ProcessLoop />
|
|
|
|
{/* ===== TESTIMONIALS ===== */}
|
|
<section className="quotes frame" aria-label="What clients say">
|
|
<div className="wrap quotes__grid">
|
|
{testimonials.map((t, i) => (
|
|
<Reveal as="figure" className="quote" key={i} delay={i * 120}>
|
|
<span className="quote__mark display" aria-hidden="true">“</span>
|
|
<blockquote className="quote__text display">{t.quote}</blockquote>
|
|
<figcaption className="quote__by">
|
|
<span className="quote__rule" aria-hidden="true" />
|
|
{t.by}
|
|
</figcaption>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
<div className="wrap partners">
|
|
<p className="kicker">Partners</p>
|
|
<ul className="partners__list">
|
|
<li>Google Partner</li>
|
|
<li>Meta Business Partner</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== FAQ ===== */}
|
|
<section id="faq" data-invert className="faq-sec frame" aria-labelledby="faq-h">
|
|
<div className="wrap faq-sec__wrap">
|
|
<header className="sec-head">
|
|
<p className="kicker">
|
|
<span className="kicker__dot" />
|
|
FAQ
|
|
</p>
|
|
<h2 id="faq-h" className="display sec-head__title">
|
|
Questions about working with a digital marketing agency
|
|
</h2>
|
|
</header>
|
|
<Faq />
|
|
</div>
|
|
</section>
|
|
|
|
{/* ===== FINAL CTA ===== */}
|
|
<section className="final frame" aria-labelledby="final-h">
|
|
<div className="wrap final__wrap">
|
|
<p className="kicker">
|
|
<span className="kicker__dot" />
|
|
The bottom line
|
|
</p>
|
|
<Reveal as="header">
|
|
<h2 id="final-h" className="display final__h">
|
|
Ready to <span className="grad">grow?</span>
|
|
</h2>
|
|
</Reveal>
|
|
<p className="final__sub">
|
|
No long contracts. No vanity reports. Marketing you can measure in
|
|
sales.
|
|
</p>
|
|
<div className="final__cta">
|
|
<Magnetic strength={0.4}>
|
|
<Link href={SITE.booking} className="btn btn--accent" data-cursor="Book a call">
|
|
Book a call
|
|
</Link>
|
|
</Magnetic>
|
|
<a href={`mailto:${SITE.email}`} className="btn btn--ghost">
|
|
or {SITE.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{/* ===== FOOTER ===== */}
|
|
<footer data-invert className="colophon frame" aria-label="Footer">
|
|
<div className="wrap">
|
|
<div className="colophon__top">
|
|
<div className="colophon__brand">
|
|
<span className="brand__mark" aria-hidden="true">
|
|
<span className="brand__dot" />
|
|
</span>
|
|
<p className="colophon__line">
|
|
{SITE.name}. {SITE.tagline}
|
|
</p>
|
|
</div>
|
|
<nav className="colophon__nav" aria-label="Footer">
|
|
<ul>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#work">Work</a></li>
|
|
<li><a href="#process">About</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href={`mailto:${SITE.email}`}>Contact</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href="https://www.linkedin.com" rel="noopener">LinkedIn</a></li>
|
|
<li><a href={SITE.booking}>Book a call</a></li>
|
|
<li><a href="#main">Privacy</a></li>
|
|
<li><a href="#main">Terms</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div className="rule" />
|
|
<div className="colophon__bottom">
|
|
<p>© 2026 {SITE.name}. All rights reserved.</p>
|
|
<p className="colophon__note">
|
|
Metrics and case studies shown are illustrative samples.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|