Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 590790a568 | |||
| 5a2edfa967 | |||
| 43fa4f2c30 | |||
| a849d66d05 | |||
| 555cdc9ba2 | |||
| 24995515a4 | |||
| 40f56517d4 | |||
| dd2b6d52c0 | |||
| c72cf78baf | |||
| af47444289 | |||
| b756c7e9a1 | |||
| ed9ee347df | |||
| c7a594f9ff | |||
| eaa86f4430 | |||
| 152f11bbc7 | |||
| 36f4bac796 | |||
| be0915cfe0 | |||
| 8cca033e86 | |||
| 8bbfaf0650 | |||
| 74723234cd | |||
| 70e6c98faa |
@@ -1,56 +1,25 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Libre_Baskerville } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Poppins } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const libreBaskerville = Libre_Baskerville({
|
||||
variable: "--font-libre-baskerville",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "McLaren Labs | Growth Consultancy for Startups",
|
||||
description: "We operate in the shadows so you can shine in the light. Growth partner for ambitious startups ready to scale.",
|
||||
keywords: ["growth consultancy", "startup growth", "scaling", "strategy", "business growth"],
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: "McLaren Labs | Growth Consultancy for Startups",
|
||||
description: "We operate in the shadows so you can shine in the light. Growth partner for ambitious startups ready to scale.",
|
||||
siteName: "McLaren Labs",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "McLaren Labs | Growth Consultancy for Startups",
|
||||
description: "We operate in the shadows so you can shine in the light.",
|
||||
},
|
||||
};
|
||||
title: "McLaren Labs", description: "Growth partner for startups ready to scale"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${libreBaskerville.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className={`${poppins.variable}`}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1269,7 +1238,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
157
src/app/page.tsx
157
src/app/page.tsx
@@ -7,7 +7,10 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import Link from 'next/link';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||||
import { Twitter, Linkedin } from 'lucide-react';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
@@ -32,14 +35,13 @@ export default function HomePage() {
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Let's Talk",
|
||||
href: "#contact"
|
||||
text: "Let's Talk", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero" className="bg-secondary-cta">
|
||||
<div className="text-white">
|
||||
<div id="hero" data-section="hero" className="bg-white">
|
||||
<div className="text-black">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="We operate in the shadows so you can shine in the light."
|
||||
description="McLaren Labs is the growth partner startups call when they're ready to scale."
|
||||
@@ -49,34 +51,22 @@ export default function HomePage() {
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "carousel-1",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg",
|
||||
imageAlt: "mens health mobile app growth success scaling"
|
||||
id: "carousel-1", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "mens health mobile app growth success scaling"
|
||||
},
|
||||
{
|
||||
id: "carousel-2",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg",
|
||||
imageAlt: "saas platform b2b growth success analytics"
|
||||
id: "carousel-2", imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "saas platform b2b growth success analytics"
|
||||
},
|
||||
{
|
||||
id: "carousel-3",
|
||||
imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg",
|
||||
imageAlt: "ecommerce growth success sales revenue"
|
||||
id: "carousel-3", imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "ecommerce growth success sales revenue"
|
||||
},
|
||||
{
|
||||
id: "carousel-4",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg",
|
||||
imageAlt: "mens health mobile app growth success scaling"
|
||||
id: "carousel-4", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "mens health mobile app growth success scaling"
|
||||
},
|
||||
{
|
||||
id: "carousel-5",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg",
|
||||
imageAlt: "saas platform b2b growth success analytics"
|
||||
id: "carousel-5", imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "saas platform b2b growth success analytics"
|
||||
},
|
||||
{
|
||||
id: "carousel-6",
|
||||
imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg",
|
||||
imageAlt: "ecommerce growth success sales revenue"
|
||||
id: "carousel-6", imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "ecommerce growth success sales revenue"
|
||||
}
|
||||
]}
|
||||
autoPlay={true}
|
||||
@@ -85,7 +75,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<div id="about" data-section="about" className="bg-white">
|
||||
<MetricSplitMediaAbout
|
||||
tag="Our Approach"
|
||||
title="Strategy. Systems. Scale."
|
||||
@@ -102,59 +92,124 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="case-studies" data-section="case-studies" className="bg-background-accent">
|
||||
<div id="case-studies" data-section="case-studies" className="bg-white">
|
||||
<FeatureCardTwentyFour
|
||||
title="Playground for Profit"
|
||||
description="Real founders. Real challenges. Real solutions."
|
||||
features={[
|
||||
{
|
||||
id: "case-1",
|
||||
title: "1.2M+ Downloads",
|
||||
author: "Mobile Health",
|
||||
description: "Scaled a men's health app from $74K to $3.5M ARR in 12 months through user acquisition strategy and product positioning.",
|
||||
tags: ["Mobile App Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg",
|
||||
imageAlt: "Mobile app case study"
|
||||
id: "case-1", title: "1.2M+ Downloads", author: "Mobile Health", description: "Scaled a men's health app from $74K to $3.5M ARR in 12 months through user acquisition strategy and product positioning.", tags: ["Mobile App Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "Mobile app case study"
|
||||
},
|
||||
{
|
||||
id: "case-2",
|
||||
title: "$8M Series A",
|
||||
author: "SaaS Platform",
|
||||
description: "Built go-to-market engine for enterprise SaaS, securing $8M Series A with 3x revenue growth in 18 months.",
|
||||
tags: ["B2B SaaS Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg",
|
||||
imageAlt: "SaaS growth case study"
|
||||
id: "case-2", title: "$8M Series A", author: "SaaS Platform", description: "Built go-to-market engine for enterprise SaaS, securing $8M Series A with 3x revenue growth in 18 months.", tags: ["B2B SaaS Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "SaaS growth case study"
|
||||
},
|
||||
{
|
||||
id: "case-3",
|
||||
title: "5x Revenue",
|
||||
author: "Direct-to-Consumer",
|
||||
description: "Transformed e-commerce unit economics through strategy optimization, scaling from $2M to $10M annual revenue.",
|
||||
tags: ["DTC Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg",
|
||||
imageAlt: "E-commerce case study"
|
||||
id: "case-3", title: "5x Revenue", author: "Direct-to-Consumer", description: "Transformed e-commerce unit economics through strategy optimization, scaling from $2M to $10M annual revenue.", tags: ["DTC Growth"],
|
||||
imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "E-commerce case study"
|
||||
}
|
||||
]}
|
||||
animationType="none"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="testimonials" data-section="testimonials" className="bg-white">
|
||||
<TestimonialCardTen
|
||||
title="What Our Partners Say"
|
||||
description="Hear directly from founders and CEOs we've worked with"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1", title: "Transformed Our Growth Strategy", quote: "Working with McLaren Labs was a game-changer for our startup. They didn't just advise us—they embedded themselves in our team and helped us build a scalable growth engine that took us from $500K to $5M ARR.", name: "Sarah Chen", role: "CEO, TechFlow", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
id: "testimonial-2", title: "Results Beyond Expectations", quote: "The strategic clarity and execution support we received was exceptional. McLaren Labs helped us navigate a critical pivot while maintaining momentum. The confidence they instilled in our team was invaluable.", name: "Michael Rodriguez", role: "Founder, InnovateLabs", imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "Michael Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "testimonial-3", title: "Partners Who Understand Scale", quote: "McLaren Labs gets it. They understand the unique challenges of scaling a SaaS business and provided tactical strategies that immediately improved our metrics. Highly recommended for any serious founder.", name: "Jessica Martinez", role: "VP Growth, CloudScale", imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "Jessica Martinez"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team" className="bg-white">
|
||||
<TeamCardTwo
|
||||
title="Meet the Team"
|
||||
description="World-class operators and growth strategists"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Alex Johnson", role: "Founder & Chief Strategy Officer", description: "Former VP Growth at Stripe with 15+ years of scaling SaaS companies from $0 to $100M+", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "Alex Johnson", socialLinks: [
|
||||
{ icon: Twitter, url: "https://twitter.com/alexjohnson" },
|
||||
{ icon: Linkedin, url: "https://linkedin.com/in/alexjohnson" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2", name: "Emily Park", role: "Head of Operations", description: "Built and scaled operations for 3 unicorns. Expert in building high-performing teams and systems.", imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "Emily Park", socialLinks: [
|
||||
{ icon: Twitter, url: "https://twitter.com/emilypark" },
|
||||
{ icon: Linkedin, url: "https://linkedin.com/in/emilypark" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3", name: "David Kumar", role: "Growth Lead", description: "Specialist in product-market fit and user acquisition. Helped 5 startups reach Series A.", imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "David Kumar", socialLinks: [
|
||||
{ icon: Twitter, url: "https://twitter.com/davidkumar" },
|
||||
{ icon: Linkedin, url: "https://linkedin.com/in/davidkumar" }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4", name: "Lisa Thompson", role: "Analytics & Finance", description: "Data-driven decision maker who has optimized unit economics for multiple high-growth companies.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "Lisa Thompson", socialLinks: [
|
||||
{ icon: Twitter, url: "https://twitter.com/lisathompson" },
|
||||
{ icon: Linkedin, url: "https://linkedin.com/in/lisathompson" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog" className="bg-white">
|
||||
<BlogCardOne
|
||||
title="Latest Insights"
|
||||
description="Stay updated with our latest thoughts on growth, strategy, and scaling"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Strategy", title: "The Growth Flywheel Framework", excerpt: "How to build sustainable growth loops that compound over time. We break down the systems that successful startups use.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", imageAlt: "Growth Flywheel", authorName: "Alex Johnson", authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiling-afro-american-sportsman-listening-music_171337-9402.jpg", date: "15 Jan 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "SaaS", title: "Unit Economics 101 for SaaS Founders", excerpt: "The metrics that matter most for scaling a SaaS business. Learn how to optimize CAC, LTV, and payback period.", imageSrc: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", imageAlt: "SaaS Economics", authorName: "Lisa Thompson", authorAvatar: "https://img.b2bpic.net/free-photo/african-man-black-suit_1157-45555.jpg", date: "12 Jan 2025"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Operations", title: "Building Processes That Scale", excerpt: "Why documentation, delegation, and systems matter more than you think. The operational foundation for 10x growth.", imageSrc: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", imageAlt: "Operations", authorName: "Emily Park", authorAvatar: "https://img.b2bpic.net/free-vector/business-growth-concept-with-computer_23-2147796638.jpg", date: "10 Jan 2025"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact" className="bg-white">
|
||||
<ContactCenter
|
||||
tag="Next Step"
|
||||
title="Ready to scale?"
|
||||
description="We only take on a handful of partners at a time. If you're serious about growth, let's talk."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Start Conversation"
|
||||
termsText="We respect your privacy. No spam, ever."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="footer" data-section="footer" className="bg-white">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
@@ -181,4 +236,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,45 +82,45 @@ export default function ProductPage({ params }: ProductPageProps) {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading product...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
@@ -167,6 +167,99 @@ export default function ProductPage({ params }: ProductPageProps) {
|
||||
</div>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="slide-background"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="productDetailCard" data-section="productDetailCard">
|
||||
<ProductDetailCard
|
||||
layout="page"
|
||||
name={product.name}
|
||||
price={product.price}
|
||||
salePrice={meta.salePrice}
|
||||
rating={product.rating || 0}
|
||||
description={product.description}
|
||||
images={images}
|
||||
variants={variants.length > 0 ? variants : undefined}
|
||||
quantity={quantityVariant}
|
||||
ribbon={meta.ribbon}
|
||||
inventoryStatus={meta.inventoryStatus}
|
||||
inventoryQuantity={meta.inventoryQuantity}
|
||||
sku={meta.sku}
|
||||
buttons={[
|
||||
{ text: "Add To Cart", onClick: handleAddToCart },
|
||||
{ text: "Buy Now", onClick: handleBuyNow },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="productCart" data-section="productCart">
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
total={`$${cartTotal}`}
|
||||
buttons={[
|
||||
{
|
||||
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
@@ -190,99 +283,6 @@ export default function ProductPage({ params }: ProductPageProps) {
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="slide-background"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="productDetailCard" data-section="productDetailCard">
|
||||
<ProductDetailCard
|
||||
layout="page"
|
||||
name={product.name}
|
||||
price={product.price}
|
||||
salePrice={meta.salePrice}
|
||||
rating={product.rating || 0}
|
||||
description={product.description}
|
||||
images={images}
|
||||
variants={variants.length > 0 ? variants : undefined}
|
||||
quantity={quantityVariant}
|
||||
ribbon={meta.ribbon}
|
||||
inventoryStatus={meta.inventoryStatus}
|
||||
inventoryQuantity={meta.inventoryQuantity}
|
||||
sku={meta.sku}
|
||||
buttons={[
|
||||
{ text: "Add To Cart", onClick: handleAddToCart },
|
||||
{ text: "Buy Now", onClick: handleBuyNow },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="productCart" data-section="productCart">
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
total={`$${cartTotal}`}
|
||||
buttons={[
|
||||
{
|
||||
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -35,6 +35,66 @@ export default function ShopPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="slide-background"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
@@ -46,11 +106,19 @@ export default function ShopPage() {
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
</div>
|
||||
<div id="productCatalog" data-section="productCatalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
@@ -74,74 +142,6 @@ export default function ShopPage() {
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="slide-background"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="McLaren Labs"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "What We Do", id: "about" },
|
||||
{ name: "Work", id: "case-studies" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Shop", id: "/shop" }
|
||||
]}
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</div>
|
||||
<div id="productCatalog" data-section="productCatalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="McLaren Labs"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "hero" },
|
||||
{ label: "Our Approach", href: "about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Case Studies", href: "case-studies" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "https://example.com/privacy" },
|
||||
{ label: "Terms", href: "https://example.com/terms" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -2,21 +2,21 @@
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
|
||||
/* --background: #faf6f1;;
|
||||
--card: #ffffff;;
|
||||
--foreground: #1a1a1a;;
|
||||
--primary-cta: #2B4CED;;
|
||||
--secondary-cta: #E8923A;;
|
||||
--accent: #E8923A;;
|
||||
--background-accent: #f0e8dc;; */
|
||||
/* --background: #ffffff;;
|
||||
--card: #f9f9f9;;
|
||||
--foreground: #000612e6;;
|
||||
--primary-cta: #ff8c42;;
|
||||
--secondary-cta: #f9f9f9;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;; */
|
||||
|
||||
--background: #faf6f1;;
|
||||
--card: #ffffff;;
|
||||
--foreground: #1a1a1a;;
|
||||
--primary-cta: #2B4CED;;
|
||||
--secondary-cta: #E8923A;;
|
||||
--accent: #E8923A;;
|
||||
--background-accent: #f0e8dc;;
|
||||
--background: #ffffff;;
|
||||
--card: #f9f9f9;;
|
||||
--foreground: #000612e6;;
|
||||
--primary-cta: #ff8c42;;
|
||||
--secondary-cta: #f9f9f9;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user