283 lines
17 KiB
TypeScript
283 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Sparkles, Zap, Target, Palette, LineChart, Users, Megaphone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Stellar"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Insights", id: "insights" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Transform Your Brand's Digital Presence"
|
|
description="Strategic marketing that drives growth. We blend creative excellence with data-driven insights to deliver campaigns that convert."
|
|
tag="San Francisco Marketing Agency"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
buttons={[
|
|
{ text: "Start Your Campaign", href: "contact" },
|
|
{ text: "View Our Work", href: "work" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/creative-marketing-agency-social-media-story-design-template_47987-33977.jpg", imageAlt: "Digital campaign showcase" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-team-employees-meeting-break-have-fun-discussing-about-business-collaboration-happy-people-laughing-planning-marketing-project-office-handheld-shot_482257-43330.jpg", imageAlt: "Brand strategy workshop" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg", imageAlt: "Marketing analytics dashboard" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/businessmen-hands-wooden-table-with-documents-drafts_176420-372.jpg", imageAlt: "Creative design process" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/teamworking-startup-engineers-brainstorming-working-with-machine-learning_482257-118818.jpg", imageAlt: "Team collaboration space" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Stellar"
|
|
title="We are a team of strategists, creatives, and technologists based in San Francisco, dedicated to building brands that matter and campaigns that move markets."
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#" },
|
|
{ text: "Meet the Team", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBorderGlow
|
|
title="Our Core Services"
|
|
description="We deliver comprehensive marketing solutions that transform your brand and accelerate growth."
|
|
tag="Services"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
icon: Zap,
|
|
title: "Brand Strategy", description: "Comprehensive positioning and messaging frameworks that define your market advantage and resonate with target audiences."
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: "Digital Marketing", description: "Results-driven campaigns across social, email, content, and paid channels optimized for maximum ROI and engagement."
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Creative Design", description: "Compelling visual narratives including branding, web design, and content creation that captivate and convert."
|
|
},
|
|
{
|
|
icon: LineChart,
|
|
title: "Analytics & Optimization", description: "Data-driven insights and continuous optimization to measure impact, refine strategy, and scale what works."
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Social Strategy", description: "End-to-end social media strategy, content planning, and community management that builds loyal audiences."
|
|
},
|
|
{
|
|
icon: Megaphone,
|
|
title: "Growth Marketing", description: "Acquisition and retention strategies focused on sustainable business growth and customer lifetime value."
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<BlogCardThree
|
|
title="Featured Case Studies"
|
|
description="Real results from brands we've transformed. Explore how we've driven growth across industries."
|
|
tag="Our Work"
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
blogs={[
|
|
{
|
|
id: "1", category: "SaaS Growth", title: "3x Revenue Growth in 12 Months", excerpt: "How we repositioned a B2B SaaS platform and drove 300% annual growth through strategic content and paid acquisition.", imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg", imageAlt: "SaaS platform growth metrics", authorName: "Alex Chen", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "Jan 2025"
|
|
},
|
|
{
|
|
id: "2", category: "E-Commerce", title: "Turned First-Time Visitors into Repeat Customers", excerpt: "A luxury retail brand's transformation through personalized email marketing and retention strategies that increased lifetime value by 250%.", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-web-shop-e-shopping-concept_53876-124856.jpg", imageAlt: "E-commerce customer engagement", authorName: "Sarah Martinez", authorAvatar: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", date: "Dec 2024"
|
|
},
|
|
{
|
|
id: "3", category: "Brand Launch", title: "Built a $5M Brand from Zero in 18 Months", excerpt: "Complete go-to-market strategy for an innovative fintech startup including positioning, messaging, and integrated launch campaign.", imageSrc: "http://img.b2bpic.net/free-photo/payment-solutions-financial-technology-with-businessman-using-tablet-background_53876-104203.jpg", imageAlt: "Fintech brand launch campaign", authorName: "Michael Zhang", authorAvatar: "http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg", date: "Nov 2024"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Clients Say"
|
|
description="Real feedback from founders and marketing leaders who've partnered with us."
|
|
tag="Testimonials"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
speed={40}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jessica Wong", handle: "Founder, TechFlow", testimonial: "Stellar transformed our marketing from scattered efforts into a cohesive strategy that actually drives revenue. Game-changer.", imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "Jessica Wong"
|
|
},
|
|
{
|
|
id: "2", name: "David Patel", handle: "CMO, CloudSync", testimonial: "The team's strategic insights combined with creative execution delivered results that exceeded our aggressive growth targets.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "David Patel"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "VP Marketing, Innovate Inc", testimonial: "Working with Stellar means partnering with experts who understand your business, not just executing tactics. Exceptional.", imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "James Kim", handle: "Founder, GrowthLabs", testimonial: "From strategy to execution, Stellar consistently delivers campaigns that perform. They're our go-to agency.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "James Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Rachel Green", handle: "Marketing Director, Brand Co", testimonial: "The data-driven approach combined with creative excellence made all the difference in our market positioning and growth.", imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "Rachel Green"
|
|
},
|
|
{
|
|
id: "6", name: "Marcus Thompson", handle: "CEO, Future Tech", testimonial: "Stellar's team brought strategic thinking and fresh perspectives that elevated our entire marketing operation.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Marcus Thompson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Our Impact"
|
|
description="Measurable results that demonstrate our expertise and commitment to client success."
|
|
tag="Track Record"
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "150+", title: "Successful campaigns launched", items: [
|
|
"Average 200% ROI increase", "Across 25+ industries", "Fortune 500 to ambitious startups"
|
|
]
|
|
},
|
|
{
|
|
id: "2", value: "$500M+", title: "Revenue generated for clients", items: [
|
|
"Through integrated strategies", "Data-driven optimization", "Long-term partnerships"
|
|
]
|
|
},
|
|
{
|
|
id: "3", value: "8 Years", title: "Proven track record in San Francisco", items: [
|
|
"Industry recognition and awards", "Trusted by venture-backed startups", "Consistent year-over-year growth"
|
|
]
|
|
},
|
|
{
|
|
id: "4", value: "98%", title: "Client satisfaction and retention", items: [
|
|
"Long-term strategic partnerships", "Repeat business and referrals", "Collaborative team approach"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about working with Stellar."
|
|
tag="FAQ"
|
|
tagAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What industries do you specialize in?", content: "We work across diverse sectors including SaaS, fintech, e-commerce, healthcare tech, and B2B services. Our team brings deep expertise across 25+ industries, with particular strength in scaling technology and innovative brands."
|
|
},
|
|
{
|
|
id: "2", title: "What's your typical engagement model?", content: "We offer flexible engagement models including project-based campaigns, retainer partnerships, and strategic consulting. Most clients start with a 3-6 month campaign or retainer to establish strategy, measure results, and build momentum."
|
|
},
|
|
{
|
|
id: "3", title: "How do you measure campaign success?", content: "We establish clear KPIs aligned with your business objectives before campaign launch. We provide monthly performance reports tracking metrics like ROI, conversion rates, customer acquisition cost, and other relevant business indicators."
|
|
},
|
|
{
|
|
id: "4", title: "Do you work with early-stage startups?", content: "Absolutely. We love working with ambitious early-stage teams. We've helped seed-stage through Series B companies establish market positioning, launch go-to-market strategies, and scale acquisition channels efficiently."
|
|
},
|
|
{
|
|
id: "5", title: "What's your process like?", content: "Our process starts with deep discovery to understand your business, market, and goals. We then develop a comprehensive strategy, present recommendations, execute campaigns with full transparency, and continuously optimize based on data and learnings."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your marketing and drive growth? Let's talk about your goals and how we can help you succeed."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Schedule a Consultation", href: "#" },
|
|
{ text: "Get in Touch", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Brand Strategy", href: "#services" },
|
|
{ label: "Digital Marketing", href: "#services" },
|
|
{ label: "Creative Design", href: "#services" },
|
|
{ label: "Analytics", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Work", href: "#work" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Email", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Stellar Marketing. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |