198 lines
12 KiB
TypeScript
198 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import { Sparkles } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="compact"
|
||
sizing="mediumLarge"
|
||
background="none"
|
||
cardStyle="solid"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="medium"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{
|
||
name: "Work", id: "#work"},
|
||
{
|
||
name: "Approach", id: "#approach"},
|
||
{
|
||
name: "Contact", id: "#contact"},
|
||
]}
|
||
brandName="Northbeam Studio."
|
||
animateOnLoad={true}
|
||
button={{ text: "Get in touch", href: "#contact" }}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "plain"}}
|
||
title="Paid ads that *pay back*. Content that earns attention. Sites that close the loop."
|
||
description="Northbeam is a one-operator studio for small businesses, founders, and e-commerce brands who'd rather see a return than a report."
|
||
tag="A small studio · Performance creative"
|
||
buttons={[
|
||
{
|
||
text: "Get a free audit →", href: "#contact"},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "hero-media-1", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-homemade-coconut-chocolate-arranged-row-white-checkered-table-cloth_23-2148123853.jpg", imageAlt: "Abstract lines and data points"},
|
||
{
|
||
id: "hero-media-2", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-earth-tone-design_53876-104099.jpg", imageAlt: "Abstract light geometric patterns"},
|
||
{
|
||
id: "hero-media-3", imageSrc: "http://img.b2bpic.net/free-photo/brown-comb-painting-texture-background_53876-123028.jpg", imageAlt: "Neutral gradient background smooth"},
|
||
{
|
||
id: "hero-media-4", imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-bubble-background_23-2147878030.jpg", imageAlt: "Minimalist design background warm"},
|
||
{
|
||
id: "hero-media-5", imageSrc: "http://img.b2bpic.net/free-photo/abstract-orange-background-layout-designstudioroom-web-template-business-report-with-smooth-circle-g_1258-108977.jpg", imageAlt: "Subtle cream lines abstract"},
|
||
{
|
||
id: "hero-media-6", imageSrc: "http://img.b2bpic.net/free-photo/abstract-luxury-black-gradient-with-border-vignette-background-studio-backdrop-well-use-as-backdrop-background-studio-background-gradient-frame_1258-71877.jpg", imageAlt: "Neutral background geometric minimal"},
|
||
]}
|
||
autoPlay={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwelve
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "service-1", label: "01", title: "Paid advertising", items: [
|
||
"Meta and Google campaigns built around money outcomes — purchases, leads, conversations.", "Creative tested every two weeks. Kill rules set in advance."],
|
||
},
|
||
{
|
||
id: "service-2", label: "02", title: "Content creation", items: [
|
||
"Short-form video, carousels, and captions sold as a system, not as one-off posts.", "The kind of content that keeps working when the ads are off."],
|
||
},
|
||
{
|
||
id: "service-3", label: "03", title: "Website creation", items: [
|
||
"Landing pages and small business sites that ask for a decision on every screen.", "Built to convert the traffic the ads send."],
|
||
},
|
||
]}
|
||
title="Three services. One throughline — performance."
|
||
description=""
|
||
/>
|
||
</div>
|
||
|
||
<div id="work" data-section="work">
|
||
<ProductCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "case-study-1", brand: "Harclev Store", name: "Return on a $2.5K budget across a multi-product e-commerce shop where every dollar had to defend itself. One conversion campaign, three audience signals, creative refreshed every two weeks.\n\nStats: Spend $2,548 · Purchases 2,498 · CPA $1.02 · CTR 8.70%", price: "13.07×", rating: 5,
|
||
reviewCount: "Case study 01 · E-commerce", imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-floating-concrete-background_23-2150808028.jpg", imageAlt: "E-commerce dashboard with sales data"},
|
||
{
|
||
id: "case-study-2", brand: "Richard Harpin", name: "A four-month engagement campaign for an established UK founder building a personal audience from scratch. Raw vertical video, one-line hooks, creative cycled every two weeks.\n\nStats: Spend £11.5K · Profile visits 112k · CPC £0.10 · CTR 5.72%", price: "775k", rating: 5,
|
||
reviewCount: "Case study 02 · Founder brand", imageSrc: "http://img.b2bpic.net/free-photo/pretty-business-lady-seated-comfortable-boss-armchair-her-office_1098-18744.jpg", imageAlt: "Social media content creation for a founder brand"},
|
||
{
|
||
id: "case-study-3", brand: "Liam — Shot Social", name: "A single Advantage+ Leads campaign for a service business that lives or dies on inbound. Tight lead form, two audience signals, one clear promise on the creative.\n\nStats: Spend £616 · Leads 44 · CPL £14.01 · Objective Advantage+", price: "£14/lead", rating: 5,
|
||
reviewCount: "Case study 03 · Lead gen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-back-office_23-2149097923.jpg", imageAlt: "Lead generation form with digital marketing metrics"},
|
||
]}
|
||
title="Three campaigns. Three industries. One throughline."
|
||
description="Real accounts, real spend, real outcomes — sorted by result, not by budget."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Northbeam Studio transformed our ad spend into tangible results. Their creative approach is truly performance-driven.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-men-looking-computer_23-2148920577.jpg", imageAlt: "Sarah Johnson"},
|
||
{
|
||
id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "The content strategy delivered by Northbeam actually worked beyond expectations. It kept earning attention even after campaigns ended.", imageSrc: "http://img.b2bpic.net/free-photo/smile-face-green-ball-with-golden-five-stars-customer-client-survey-satisfaction-after-use-product-service-concept-by-3d-render_616485-67.jpg", imageAlt: "Michael Chen"},
|
||
{
|
||
id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "Our new landing page is a conversion machine. Every element asks for a decision, and it shows in our lead numbers.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-female-model-posing-with-smiling-face-expression-red-wall_158595-4982.jpg", imageAlt: "Emily Rodriguez"},
|
||
{
|
||
id: "4", name: "David Kim", handle: "@davidk", testimonial: "Finally, an agency that speaks plain English and delivers on every promise. The audit was incredibly insightful.", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", imageAlt: "David Kim"},
|
||
{
|
||
id: "5", name: "Jessica Lee", handle: "@jessical", testimonial: "The attention to detail and data-driven decisions are unparalleled. Northbeam Studio truly understands performance creative.", imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg", imageAlt: "Jessica Lee"},
|
||
]}
|
||
title="What clients say about working together"
|
||
description="Authentic feedback from businesses and founders who've seen real returns."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Alpha Corp", "Beta Digital", "Gamma Innovations", "Delta Growth", "Epsilon Solutions", "Zeta Media", "Eta Ventures"]}
|
||
title="Trusted by brands, founders, and agencies"
|
||
description="Our work speaks for itself, driving real results for a diverse clientele across various industries."
|
||
/>
|
||
</div>
|
||
|
||
<div id="approach" data-section="approach">
|
||
<AboutMetric
|
||
useInvertedBackground={false}
|
||
title="Three rules. Every project. No exceptions."
|
||
metrics={[
|
||
{
|
||
icon: Sparkles,
|
||
label: "1.", value: "Every ad defends itself with a number. If a campaign can't be judged by money, it doesn't ship."},
|
||
{
|
||
icon: Sparkles,
|
||
label: "2.", value: "Every post earns the next one. Content is a system, not a transaction. Each piece compounds."},
|
||
{
|
||
icon: Sparkles,
|
||
label: "3.", value: "Every page asks for a decision. A site is a closer, not a brochure. Every screen has a job."},
|
||
]}
|
||
metricsAnimation="slide-up"/
|
||
>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "plain"}}
|
||
text="If you're spending on ads with no clear return — *send the account*.\nHonest read. No pitch.\n\nOne operator. Two revisions on every gig. Plain-English communication. A written note at the end on what I'd test next."
|
||
buttons={[
|
||
{
|
||
text: "sami@northbeam.studio", href: "mailto:sami@northbeam.studio"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoText="Northbeam Studio."
|
||
copyrightText="© Northbeam Studio · 2026 | Back to top ↑"
|
||
columns={[]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|