bender/dd5ae4bb-1ea3-4950-aa6a-47efcbd3dc01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-07 13:31:35 +00:00
commit f67d84cc52
631 changed files with 86342 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,153 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Award } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Services", id: "services" },
{ name: "Results", id: "results" },
{ name: "About", id: "about" },
{ name: "Apply", id: "apply" },
{ name: "FAQ", id: "faq" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "How It Works", href: "/" },
{ label: "Services", href: "#services" },
{ label: "Pricing", href: "#pricing" },
{ label: "Results", href: "/results" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "FAQ", href: "#faq" },
{ label: "Apply", href: "/apply" },
{ label: "Contact", href: "mailto:hello@growthsystems.io" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Growth Systems"
navItems={navItems}
button={{ text: "Book Call", href: "/apply" }}
/>
</div>
<div id="founder" data-section="founder">
<TestimonialAboutCard
tag="Meet The Operator"
title="15 Years Building Businesses. Zero Failed Clients In This Program."
description="I've done what your competition is doing."
subdescription="Now I help you dominate them with what I learned."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg"
imageAlt="successful entrepreneur founder portrait professional"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="founder-story" data-section="founder-story">
<FeatureCardTwelve
title="The Journey from Service Owner to Growth Operator"
description="How I learned what actually works in local service marketing—through real business experience, not theory."
tag="My Background"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "1",
label: "Years 1–3",
title: "Built and Scaled Service Business to 7 Figures",
items: [
"Started from zero with no network",
"Bootstrapped to $1M+ annual revenue",
"Learned lead generation the hard way",
"Experimented with every marketing tactic"
],
},
{
id: "2",
label: "Years 4–7",
title: "Scaled 12 Service Businesses for Partners",
items: [
"Took equity in early-stage operators",
"Applied proven system across industries",
"Generated 8-figure collective revenue",
"Built repeatable playbook"
],
},
{
id: "3",
label: "Years 8–15",
title: "Refined to Premium Model—3 Clients Per Market",
items: [
"Shifted from volume to depth model",
"Zero failed clients since restructure",
"$180K+ average first-year ROI",
"This is now the only model I run"
],
},
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactText
text="Stop losing customers to your competition. Start dominating your market within 90 days."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{ text: "Apply to the Program", href: "/apply" },
{ text: "Schedule Strategy Call", href: "/apply" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Growth Systems"
copyrightText="© 2025 Growth Systems. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

234
src/app/apply/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
const navItems = [
{ name: "Services", id: "services" },
{ name: "Results", id: "results" },
{ name: "About", id: "about" },
{ name: "Apply", id: "apply" },
{ name: "FAQ", id: "faq" },
];
export default function ApplyPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
{/* Navigation */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Growth Systems"
navItems={navItems}
button={{
text: "Book Call",
href: "/apply",
}}
/>
</div>
{/* Hero Section - Application */}
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Apply for Our Program Today"
description="Start your 90-day transformation. Our application process is simple: fill out a brief form, tell us about your business, and we'll schedule a strategy call to see if we're a perfect fit for your goals."
tag="Application"
background={{ variant: "glowing-orb" }}
imageSrc="http://img.b2bpic.net/free-psd/neon-landing-page-template-candy-store_23-2149001652.jpg"
imageAlt="Application process"
mediaAnimation="slide-up"
testimonials={[
{
name: "Marcus Chen",
handle: "Founder, Digital Plumbing Co",
testimonial: "Went from invisible online to 47 qualified leads per month. This system works.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1652.jpg",
},
{
name: "Jennifer Rodriguez",
handle: "Owner, Rodriguez Dental Spa",
testimonial: "The most professional setup I've seen from an agency. Results in 60 days.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
},
{
name: "David Park",
handle: "CEO, Park Painting Solutions",
testimonial: "Finally someone who understands small business. Not a cookie-cutter approach.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-costume-with-cup-coffee_23-2148112124.jpg",
},
{
name: "Sarah Thompson",
handle: "Founder, Luxe Med Spa",
testimonial: "High-ticket service provider with high-ticket results. Invested 6k, made back 100k in 90 days.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",
},
]}
buttons={[
{
text: "Start Your Application",
href: "/apply",
},
{
text: "Return to Home",
href: "/",
},
]}
useInvertedBackground={false}
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqDouble
faqs={[
{
id: "1",
title: "What's the application process?",
content: "Our application has two steps: First, complete a brief online form about your business, market, and goals. This takes about 5 minutes. Second, we schedule a 20-minute strategy call to discuss fit and outline your custom plan. Qualified applicants hear back within 24 hours.",
},
{
id: "2",
title: "How long does it take to get approved?",
content: "We aim to review applications within 48 hours. Once approved, we schedule your strategy call immediately. The entire process from application to first strategy call typically takes 3–5 business days.",
},
{
id: "3",
title: "What if I'm not quite ready yet?",
content: "That's okay. We recommend reaching out when you're serious about growth and ready to invest $6K/month. If you're still thinking it over, join our email list to stay updated on new case studies and client results.",
},
{
id: "4",
title: "Can I change my mind after approval?",
content: "Absolutely. After your strategy call, you have 7 days to decide if Growth Systems is right for you. If you're not 100% confident, there's no commitment. No pressure, no hard feelings.",
},
{
id: "5",
title: "What happens if I get approved?",
content: "Once approved, we'll send you an onboarding packet with everything you need to know. We schedule your first implementation call within 3 days. You'll work directly with our founder and implementation team to set up your lead generation system.",
},
{
id: "6",
title: "Do I need any experience with marketing?",
content: "No. We handle all the marketing and lead generation for you. Your job is to follow our sales system and close leads. We'll teach you exactly how to do this during your founder consulting calls.",
},
]}
title="Application FAQ"
description="Common questions about the application process."
tag="Questions?"
textboxLayout="default"
faqsAnimation="blur-reveal"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
{/* CTA Section */}
<div id="cta" data-section="cta">
<ContactText
text="Ready to dominate your market? Let's get started today."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Complete Application Form",
href: "/apply",
},
{
text: "Back to Homepage",
href: "/",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBase
logoText="Growth Systems"
copyrightText="© 2025 Growth Systems. All rights reserved."
columns={[
{
title: "Product",
items: [
{
label: "How It Works",
href: "#hero",
},
{
label: "Services",
href: "/services",
},
{
label: "Pricing",
href: "/",
},
{
label: "Results",
href: "/results",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "FAQ",
href: "#faq",
},
{
label: "Apply",
href: "/apply",
},
{
label: "Contact",
href: "mailto:hello@growthsystems.io",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Disclaimer",
href: "#",
},
],
},
]}
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1442
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

509
src/app/page.tsx Normal file
View File

@@ -0,0 +1,509 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { AlertTriangle, Award, Sparkles } from "lucide-react";
const navItems = [
{ name: "Services", id: "services" },
{ name: "Results", id: "results" },
{ name: "About", id: "about" },
{ name: "Apply", id: "apply" },
{ name: "FAQ", id: "faq" },
];
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
{/* Navigation */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Growth Systems"
navItems={navItems}
button={{
text: "Book Call",
href: "/apply",
}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
title="Your Competitors Are Outranking You Online"
description="We help local service business owners dominate their market with a proven system that generates qualified leads on demand. No agencies that disappear. No false promises. Just results."
tag="For Service Owners"
background={{ variant: "glowing-orb" }}
imageSrc="http://img.b2bpic.net/free-psd/neon-landing-page-template-candy-store_23-2149001652.jpg"
imageAlt="Premium growth dashboard"
mediaAnimation="slide-up"
testimonials={[
{
name: "Marcus Chen",
handle: "Founder, Digital Plumbing Co",
testimonial: "Went from invisible online to 47 qualified leads per month. This system works.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1652.jpg",
},
{
name: "Jennifer Rodriguez",
handle: "Owner, Rodriguez Dental Spa",
testimonial: "The most professional setup I've seen from an agency. Results in 60 days.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
},
{
name: "David Park",
handle: "CEO, Park Painting Solutions",
testimonial: "Finally someone who understands small business. Not a cookie-cutter approach.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-costume-with-cup-coffee_23-2148112124.jpg",
},
{
name: "Sarah Thompson",
handle: "Founder, Luxe Med Spa",
testimonial: "High-ticket service provider with high-ticket results. Invested 6k, made back 100k in 90 days.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-businesswoman-with-charming-smile-posing-street-with-interesting-architecture-background_613910-3354.jpg",
},
]}
buttons={[
{
text: "Apply to Our Program",
href: "/apply",
},
{
text: "See Client Results",
href: "/results",
},
]}
useInvertedBackground={false}
/>
</div>
{/* Social Proof - Client Logos */}
<div id="logos" data-section="logos">
<SocialProofOne
title="Trusted by Service Owners Across Industries"
description="From plumbers to dentists, med spas to painting contractors—our system works."
textboxLayout="default"
useInvertedBackground={false}
names={[
"Digital Plumbing Co",
"Rodriguez Dental Spa",
"Park Painting Solutions",
"Luxe Med Spa",
"Premier RV Rentals",
"Barber's Edge Studio",
"Elite Barbershop Network",
]}
speed={50}
showCard={true}
/>
</div>
{/* Reality - Competition Section */}
<div id="reality" data-section="reality">
<TestimonialAboutCard
tag="The Reality"
title="Your Competition Is Stealing Your Customers Right Now"
description="They're outbidding you on Google Ads."
subdescription="And ranking on page one for every local search that matters."
icon={AlertTriangle}
imageSrc="http://img.b2bpic.net/free-photo/general-manager-ceo-sharing-insight-about-new-development-strategy_482257-88122.jpg"
imageAlt="Competitor analysis"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
{/* Difference - What Separates Us */}
<div id="difference" data-section="difference">
<FeatureCardTwelve
features={[
{
id: "1",
label: "Proven",
title: "System, Not Services",
items: [
"Fixed-price model (no surprises)",
"Guaranteed lead generation metrics",
"Transparent reporting dashboard",
"90-day performance guarantee",
],
},
{
id: "2",
label: "Expert",
title: "Founder-Led Strategy",
items: [
"Direct founder involvement",
"Strategic guidance, not execution only",
"Monthly business consulting calls",
"Access to proprietary systems",
],
},
{
id: "3",
label: "Exclusive",
title: "Limited to 3 Clients Per Market",
items: [
"No competitors in your area",
"Dedicated account management",
"Custom implementation per business",
"Zero template approaches",
],
},
]}
animationType="slide-up"
title="What Actually Separates Us From Every Other Agency"
description="Most agencies are factories. We're operators who understand your business."
tag="The Difference"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* Founder Section */}
<div id="founder" data-section="founder">
<TestimonialAboutCard
tag="Meet The Operator"
title="15 Years Building Businesses. Zero Failed Clients In This Program."
description="I've done what your competition is doing."
subdescription="Now I help you dominate them with what I learned."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg"
imageAlt="Founder portrait"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
{/* Proof - Metrics */}
<div id="proof" data-section="proof">
<MetricCardEleven
metrics={[
{
id: "1",
value: "47+",
title: "Qualified Leads/Month",
description: "Average for our plumbing clients",
imageSrc: "http://img.b2bpic.net/free-photo/table-laptop-showing-charts-conference-room-business-people-having-important-discussion_482257-27897.jpg",
},
{
id: "2",
value: "$180K",
title: "Revenue Generated",
description: "Average first-year ROI per client",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg",
},
{
id: "3",
value: "92%",
title: "Conversion Rate",
description: "Leads to paying customers",
imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographic-elements-flat-design_23-2148257617.jpg",
},
{
id: "4",
value: "3",
title: "Months to Profitability",
description: "Average break-even timeline",
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel_23-2148384403.jpg",
},
]}
title="Proof That This Works"
description="Real numbers from real clients. All within 90 days of program launch."
tag="Measurable Results"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
{/* Benefits Section */}
<div id="benefits" data-section="benefits">
<ProductCardThree
products={[
{
id: "1",
name: "Lead Generation System",
price: "$2,000/mo",
imageSrc: "http://img.b2bpic.net/free-photo/statistics-analysis-diagram-data-strategy-growth-concept_53876-121535.jpg",
},
{
id: "2",
name: "Reputation Management",
price: "$1,500/mo",
imageSrc: "http://img.b2bpic.net/free-photo/person-expressing-appreciation-their-workmates_23-2149430635.jpg",
},
{
id: "3",
name: "Founder Consulting",
price: "$1,500/mo",
imageSrc: "http://img.b2bpic.net/free-photo/two-male-colleagues-talking-each-other-meeting_23-2148817054.jpg",
},
{
id: "4",
name: "Performance Tracking",
price: "Included",
imageSrc: "http://img.b2bpic.net/free-photo/people-smiling-while-conference-room_23-2149085924.jpg",
},
{
id: "5",
name: "Custom Landing Pages",
price: "Included",
imageSrc: "http://img.b2bpic.net/free-psd/kids-sport-social-media-template_23-2148253780.jpg",
},
{
id: "6",
name: "Monthly Strategy Sessions",
price: "Included",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-working-together_23-2148347239.jpg",
},
]}
title="Finally, A System That Delivers"
description="Everything you get when you join the program."
tag="What's Included"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
/>
</div>
{/* Qualification Matrix */}
<div id="qualification" data-section="qualification">
<FeatureCardTwelve
features={[
{
id: "perfect-for",
label: "Perfect For",
title: "Local Service Owners Doing $5K–$50K/Month",
items: [
"Making consistent revenue already",
"Tired of traditional agencies",
"Want predictable lead flow",
"Ready to invest in growth",
],
},
{
id: "not-for",
label: "Skip This If",
title: "You're Looking For Shortcuts",
items: [
"Expecting overnight results",
"Want DIY tools to do it yourself",
"Budget under $6,000/month",
"Not ready to scale seriously",
],
},
]}
animationType="opacity"
title="This Program Is Not For Everyone"
description="Here's who it's perfect for—and who it's not."
tag="Qualification"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardEight
plans={[
{
id: "premium",
badge: "The Only Option",
badgeIcon: Sparkles,
price: "$6,000",
subtitle: "Per month. Three-month minimum commitment.",
buttons: [
{
text: "Apply Now",
href: "/apply",
},
{
text: "Book Strategy Call",
href: "/apply",
},
],
features: [
"Lead generation system",
"Reputation management",
"Monthly founder consulting",
"Custom landing pages",
"Performance dashboard",
"90-day guarantee",
"Direct founder support",
"Exclusive market lock",
],
},
]}
animationType="slide-up"
title="Simple Pricing. No Hidden Fees."
description="One plan. Full transparency."
tag="Investment"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqDouble
faqs={[
{
id: "1",
title: "How long until I see results?",
content: "Most clients see qualified leads within 30–45 days of program launch. Revenue generation typically follows 60–90 days after consistent lead flow. We provide a 90-day satisfaction guarantee—if you're not seeing results, we refund your investment.",
},
{
id: "2",
title: "What if my business doesn't fit the mold?",
content: "We work across plumbing, painting, dental, med spa, RV rental, barbering, and more. Every program is customized to your specific market, competition, and business model. The core system stays proven, but implementation is 100% unique to you.",
},
{
id: "3",
title: "Do you guarantee leads or revenue?",
content: "We guarantee performance metrics outlined in your custom contract. If lead generation targets aren't met within 90 days, we adjust the strategy at no additional cost or refund your investment. Revenue depends on your sales skills, but we set you up to close.",
},
{
id: "4",
title: "Why is this so expensive compared to other agencies?",
content: "Most agencies are factories that deprioritize your business. We take only 3 clients per market and operate as an extension of your leadership team. The $6K investment returns 30x within the first year for most clients. You're paying for proven results, not output.",
},
{
id: "5",
title: "What if I want to continue after three months?",
content: "Month-to-month continuation is available after your initial three-month commitment. Many clients stay for 12+ months as we scale their lead generation and expand into adjacent markets or service lines.",
},
{
id: "6",
title: "How do I apply?",
content: "Fill out a short qualification form and we'll schedule a 20-minute strategy call. During this call, we'll assess fit, understand your business deeply, and outline exactly what your first 90 days looks like. Apply below.",
},
]}
title="Common Questions"
description="Everything you need to know before applying."
tag="FAQ"
textboxLayout="default"
faqsAnimation="blur-reveal"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
{/* CTA Section */}
<div id="cta" data-section="cta">
<ContactText
text="Stop losing customers to your competition. Start dominating your market within 90 days."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Apply to the Program",
href: "/apply",
},
{
text: "Schedule Strategy Call",
href: "/apply",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBase
logoText="Growth Systems"
copyrightText="© 2025 Growth Systems. All rights reserved."
columns={[
{
title: "Product",
items: [
{
label: "How It Works",
href: "#hero",
},
{
label: "Services",
href: "/services",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "Results",
href: "/results",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "FAQ",
href: "#faq",
},
{
label: "Apply",
href: "/apply",
},
{
label: "Contact",
href: "mailto:hello@growthsystems.io",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Disclaimer",
href: "#",
},
],
},
]}
/>
</div>
</ThemeProvider>
);
}

183
src/app/results/page.tsx Normal file
View File

@@ -0,0 +1,183 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Award, AlertTriangle } from "lucide-react";
export default function ResultsPage() {
const navItems = [
{ name: "Services", id: "services" },
{ name: "Results", id: "results" },
{ name: "About", id: "about" },
{ name: "Apply", id: "apply" },
{ name: "FAQ", id: "faq" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "How It Works", href: "/" },
{ label: "Services", href: "#services" },
{ label: "Pricing", href: "#pricing" },
{ label: "Results", href: "/results" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "FAQ", href: "#faq" },
{ label: "Apply", href: "/apply" },
{ label: "Contact", href: "mailto:hello@growthsystems.io" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Growth Systems"
navItems={navItems}
button={{ text: "Book Call", href: "/apply" }}
/>
</div>
<div id="proof" data-section="proof">
<MetricCardEleven
title="Proof That This Works"
description="Real numbers from real clients. All within 90 days of program launch."
tag="Measurable Results"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "47+",
title: "Qualified Leads/Month",
description: "Average for our plumbing clients",
imageSrc: "http://img.b2bpic.net/free-photo/table-laptop-showing-charts-conference-room-business-people-having-important-discussion_482257-27897.jpg",
imageAlt: "qualified leads generation funnel visualization",
},
{
id: "2",
value: "$180K",
title: "Revenue Generated",
description: "Average first-year ROI per client",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg",
imageAlt: "revenue growth chart financial success analytics",
},
{
id: "3",
value: "92%",
title: "Conversion Rate",
description: "Leads to paying customers",
imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographic-elements-flat-design_23-2148257617.jpg",
imageAlt: "conversion rate optimization funnel analytics",
},
{
id: "4",
value: "3",
title: "Months to Profitability",
description: "Average break-even timeline",
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel_23-2148384403.jpg",
imageAlt: "business timeline roadmap milestone planning",
},
]}
/>
</div>
<div id="reality" data-section="reality">
<TestimonialAboutCard
tag="Client Success Story"
title="From Invisible Online to Market Leader in 90 Days"
description="Marcus Chen, Digital Plumbing Co"
subdescription="Generated 47 qualified leads monthly and 6-figure revenue in first year"
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1652.jpg"
imageAlt="professional male headshot business owner"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Results & Case Study Questions"
description="Everything you need to know about our proven track record."
tag="FAQ"
textboxLayout="default"
faqsAnimation="blur-reveal"
useInvertedBackground={false}
animationType="smooth"
faqs={[
{
id: "1",
title: "What do you mean by 47+ qualified leads per month?",
content: "These are inbound inquiries from potential customers actively looking for your service in your market. Not form fills or impressions—actual phone calls, emails, and appointments from ready-to-buy prospects. Our tracking system validates each lead against your qualification criteria.",
},
{
id: "2",
title: "How do you measure ROI if results vary by client?",
content: "We track three core metrics: leads generated, lead conversion rate, and average deal size. We know your business model, so ROI is calculated based on YOUR actual sales process. A $6K monthly investment yielding 47 leads at 92% conversion = $180K+ in first-year revenue for most service businesses.",
},
{
id: "3",
title: "Are these results guaranteed for my business?",
content: "Our 90-day guarantee covers lead generation targets outlined in your custom contract. If we don't hit those targets, we refund your investment or adjust strategy at no cost. Revenue depends on your sales skills, but we set you up for success.",
},
{
id: "4",
title: "What industries have you successfully scaled?",
content: "Plumbing, HVAC, electrical, painting, dental, med spa, barbering, RV rentals, and more. Any local service business with $5K–$50K monthly revenue doing B2C sales benefits from our system. Each implementation is customized to your industry, market, and competition.",
},
{
id: "5",
title: "Can I see case studies for my specific industry?",
content: "Yes. During your strategy call, we'll share 2–3 anonymized case studies from businesses similar to yours. These include lead flow timelines, conversion data, and first-year ROI projections. If we don't have a case study in your exact vertical, we'll explain why and how our system adapts.",
},
{
id: "6",
title: "What happens if my market is already saturated?",
content: "Saturation is an advantage for us. We've successfully entered hyper-competitive markets by finding underserved customer segments, leveraging founder positioning, and building a reputation moat your competitors can't copy. Our strategy call will assess market conditions and outline your specific competitive advantage.",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Growth Systems"
copyrightText="© 2025 Growth Systems. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}

189
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,189 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Award } from "lucide-react";
export default function ServicesPage() {
const navItems = [
{ name: "Services", id: "services" },
{ name: "Results", id: "results" },
{ name: "About", id: "about" },
{ name: "Apply", id: "apply" },
{ name: "FAQ", id: "faq" },
];
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Growth Systems"
navItems={navItems}
button={{
text: "Book Call",
href: "/apply",
}}
/>
</div>
<div id="services-detail" data-section="services-detail">
<FeatureCardTwelve
title="Our Complete Growth System"
description="A comprehensive approach designed specifically for local service business owners who are ready to scale."
tag="Services"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "1",
label: "Lead Gen",
title: "Qualified Lead Generation System",
items: [
"Google Ads + Local SEO optimization",
"Targeted landing page campaigns",
"Lead scoring and qualification",
"CRM integration and tracking",
],
},
{
id: "2",
label: "Reputation",
title: "Reputation Management & Authority",
items: [
"Review generation and monitoring",
"Response strategy for negative reviews",
"Industry positioning and PR",
"Social proof documentation",
],
},
{
id: "3",
label: "Consulting",
title: "Strategic Business Consulting",
items: [
"Monthly founder strategy calls",
"Sales process optimization",
"Marketing channel analysis",
"Scaling roadmap development",
],
},
]}
/>
</div>
<div id="methodology" data-section="methodology">
<TestimonialAboutCard
tag="Our Approach"
title="We Don't Just Execute—We Partner With Your Success"
description="Strategic guidance combined with proven execution."
subdescription="Your growth is our only measure of success."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg"
imageAlt="Founder portrait"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="services-cta" data-section="services-cta">
<ContactText
text="Ready to build a system that generates predictable, qualified leads? Let's explore if this program is right for your business."
animationType="entrance-slide"
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{
text: "Apply to the Program",
href: "/apply",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Growth Systems"
copyrightText="© 2025 Growth Systems. All rights reserved."
columns={[
{
title: "Product",
items: [
{
label: "How It Works",
href: "#hero",
},
{
label: "Services",
href: "/services",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "Results",
href: "/results",
},
],
},
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "FAQ",
href: "#faq",
},
{
label: "Apply",
href: "/apply",
},
{
label: "Contact",
href: "mailto:hello@growthsystems.io",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Disclaimer",
href: "#",
},
],
},
]}
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-dm-sans), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #0a0f1e;
--card: #0f1729;
--foreground: #ffffff;
--primary-cta: #f97316;
--primary-cta-text: #0a0f1e;
--secondary-cta: #0f1729;
--secondary-cta-text: #f97316;
--accent: #f97316;
--background-accent: #1a1f2e;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}