Compare commits
13 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e970b6ffc5 | |||
|
55a9520e02 | ||
| d156607e01 | |||
|
|
abca0f8f0e | ||
| 583cd2252e | |||
|
|
8c309f61c1 | ||
| 6ac4b24d15 | |||
|
|
da65f8817a | ||
| 743adf1ed7 | |||
|
|
a3572bdbb8 | ||
| 5d3ea19645 | |||
|
|
aa2ab01ed9 | ||
| 44e56e4306 |
@@ -1,196 +1,35 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesAttributeCards from '@/components/sections/features/FeaturesAttributeCards';
|
||||
import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
|
||||
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import { ArrowUpRight, BarChart2, Briefcase, ChartLine, Laptop, Lightbulb, Megaphone, TrendingUp, Users } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly; this shell only fixes render order.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HomeSection from './HomePage/sections/Home';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import ExpertiseSection from './HomePage/sections/Expertise';
|
||||
import ResultsSection from './HomePage/sections/Results';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
|
||||
import TeamSection from './HomePage/sections/Team';{/* webild-stub @2026-06-08T14:03:44.754Z: add buttons to each solution so that users can learn more */}
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="home" data-section="home">
|
||||
<SectionErrorBoundary name="home">
|
||||
<HeroBillboardBrand
|
||||
brand="Catalyst Marketing Agency"
|
||||
description="Your trusted partner for innovative marketing strategies in Santa Barbara. We elevate brands through data-driven campaigns, compelling content, and measurable results. Let's create your success story."
|
||||
primaryButton={{
|
||||
text: "Explore Our Services", href: "#services"}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us", href: "#contact"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Crafting Your Brand's Story in Santa Barbara"
|
||||
descriptions={[
|
||||
"At Catalyst Marketing, we blend local insights with global strategies to deliver impactful results. Based in the vibrant community of Santa Barbara, we understand the unique pulse of this market and how to connect your brand with its ideal audience.", "Our team is passionate about transforming businesses. From innovative digital campaigns to captivating brand narratives, we work tirelessly to ensure your message resonates, your audience engages, and your business thrives. Partner with us to unlock your full potential."]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesMediaCards
|
||||
tag="Our Services"
|
||||
title="Comprehensive Marketing Solutions"
|
||||
description="We offer a full spectrum of marketing services designed to meet your business objectives and drive sustainable growth."
|
||||
items={[
|
||||
{
|
||||
title: "Digital Strategy & SEO", description: "Develop tailored online strategies to boost your visibility and rankings, ensuring you reach your target audience effectively.", imageSrc: "http://img.b2bpic.net/free-photo/promotion-marketing-advertising-branding-sale-concept_53876-133670.jpg"},
|
||||
{
|
||||
title: "Brand Development", description: "Forge a compelling brand identity that tells your story, resonates with customers, and stands out in a crowded market.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cardboard-organic-dinnerware_23-2149542081.jpg"},
|
||||
{
|
||||
title: "Content Creation", description: "Produce engaging and high-quality content, from captivating visuals to persuasive copywriting, across all platforms.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="expertise" data-section="expertise">
|
||||
<SectionErrorBoundary name="expertise">
|
||||
<FeaturesAttributeCards
|
||||
tag="Our Expertise"
|
||||
title="Specialized Knowledge for Targeted Growth"
|
||||
description="Leverage our in-depth expertise in key marketing areas to maximize your impact and achieve exceptional results."
|
||||
items={[
|
||||
{
|
||||
title: "Search Engine Optimization (SEO)", tags: "Visibility, Rankings, Traffic", details: [
|
||||
{
|
||||
icon: ArrowUpRight,
|
||||
label: "Organic Growth", value: "Boost visibility"},
|
||||
{
|
||||
icon: ChartLine,
|
||||
label: "Data-Driven", value: "Analytics insights"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-colorful-arrows_1134-381.jpg"},
|
||||
{
|
||||
title: "Social Media Marketing", tags: "Engagement, Community, Reach", details: [
|
||||
{
|
||||
icon: Users,
|
||||
label: "Audience Connect", value: "Build community"},
|
||||
{
|
||||
icon: Megaphone,
|
||||
label: "Targeted Ads", value: "Maximize reach"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bullet-journals-arrangement_23-2149740092.jpg"},
|
||||
{
|
||||
title: "Web Design & Development", tags: "UX/UI, Conversion, Responsive", details: [
|
||||
{
|
||||
icon: Laptop,
|
||||
label: "User Experience", value: "Intuitive design"},
|
||||
{
|
||||
icon: BarChart2,
|
||||
label: "Conversion Focused", value: "Drive actions"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-laptop-meeting_53876-64855.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="results" data-section="results">
|
||||
<SectionErrorBoundary name="results">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Measurable Success, Proven Growth"
|
||||
description="Our strategies deliver real-world results that translate into tangible business growth for our clients."
|
||||
metrics={[
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Average Client Growth", value: "45%"},
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: "Client Retention Rate", value: "92%"},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: "Campaign ROI", value: "200%+"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Client Stories"
|
||||
title="What Our Clients Say"
|
||||
description="Hear directly from businesses in Santa Barbara and beyond who have experienced transformative growth with Catalyst Marketing."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sophia Rodriguez", role: "CEO, Ocean Breeze Boutique", quote: "Catalyst Marketing completely revamped our online presence. Our website traffic has quadrupled, and we've seen a significant increase in sales. Their local market insight is truly invaluable!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-manager-standing-her-restaurant-using-computer_23-2147936244.jpg"},
|
||||
{
|
||||
name: "David Chen", role: "Owner, Coastal Eats", quote: "Their team developed an incredible content strategy that perfectly captured our brand's voice. We're now consistently ranking higher in local searches, and customer engagement is at an all-time high.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg"},
|
||||
{
|
||||
name: "Emily White", role: "Marketing Director, SB Tech Solutions", quote: "The SEO work by Catalyst Marketing has been phenomenal. We've seen a dramatic improvement in our organic search results, bringing in more qualified leads than ever before.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg"},
|
||||
{
|
||||
name: "Michael Johnson", role: "Founder, Pacific Peak Adventures", quote: "Professional, creative, and highly effective. Catalyst Marketing understood our vision and translated it into a digital strategy that exceeded our expectations. Highly recommend!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3267.jpg"},
|
||||
{
|
||||
name: "Jessica Lee", role: "Brand Manager, Vine & Canvas Studio", quote: "From branding to social media, Catalyst Marketing provided comprehensive support that elevated our entire brand. Their attention to detail and creative approach made all the difference.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/project-manager-sitting-office-desk_482257-127147.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Partners"
|
||||
title="Trusted by Leading Brands"
|
||||
description="We're proud to partner with a diverse range of businesses, helping them achieve their marketing goals."
|
||||
names={[
|
||||
"Luxury Living Estates", "The Local Roaster", "Eco-Cycle Solutions", "Innovate Tech Hub", "Harbor Financial Group", "Coastal University", "Santa Barbara Events"]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Q&A"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our marketing agency and how we work with clients."
|
||||
items={[
|
||||
{
|
||||
question: "What types of businesses do you work with?", answer: "We partner with businesses of all sizes and industries, from local Santa Barbara startups to established national brands. Our strategies are tailored to meet the unique needs of each client."},
|
||||
{
|
||||
question: "How do you measure campaign success?", answer: "We utilize a variety of metrics including website traffic, conversion rates, lead generation, social media engagement, and ROI to provide comprehensive performance reports and ensure transparent results."},
|
||||
{
|
||||
question: "What makes your agency different?", answer: "Our blend of local Santa Barbara market expertise with cutting-edge global marketing strategies, combined with a highly personalized client approach, sets us apart. We prioritize measurable results and transparent communication."},
|
||||
{
|
||||
question: "Can I get a custom marketing plan?", answer: "Absolutely! We believe every business is unique. We offer bespoke marketing plans designed specifically to address your goals, challenges, and target audience. Contact us for a consultation."},
|
||||
{
|
||||
question: "What is your typical project timeline?", answer: "Project timelines vary depending on the scope and complexity of the services. We provide a detailed timeline and milestones for each project during the initial planning phase, ensuring clarity and accountability."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get Started"
|
||||
text="Ready to elevate your brand? Let's connect and craft your next success story."
|
||||
primaryButton={{
|
||||
text: "Schedule a Consultation", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "View Our Portfolio", href: "#"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HomeSection />
|
||||
<AboutSection />
|
||||
<TeamSection />
|
||||
<ServicesSection />
|
||||
<ExpertiseSection />
|
||||
<ResultsSection />
|
||||
<TestimonialsSection />
|
||||
<SocialProofSection />
|
||||
<FaqSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
20
src/pages/HomePage/sections/About.tsx
Normal file
20
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Crafting Your Brand's Story in Santa Barbara"
|
||||
descriptions={[
|
||||
"At Catalyst Marketing, we blend local insights with global strategies to deliver impactful results. Based in the vibrant community of Santa Barbara, we understand the unique pulse of this market and how to connect your brand with its ideal audience.", "Our team is passionate about transforming businesses. From innovative digital campaigns to captivating brand narratives, we work tirelessly to ensure your message resonates, your audience engages, and your business thrives. Partner with us to unlock your full potential."]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/pages/HomePage/sections/Contact.tsx
Normal file
23
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get Started"
|
||||
text="Ready to elevate your brand? Let's connect and craft your next success story."
|
||||
primaryButton={{
|
||||
text: "Schedule a Consultation", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "View Our Portfolio", href: "#"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/pages/HomePage/sections/Expertise.tsx
Normal file
53
src/pages/HomePage/sections/Expertise.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "expertise" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesAttributeCards from '@/components/sections/features/FeaturesAttributeCards';
|
||||
import { ArrowUpRight, BarChart2, Briefcase, ChartLine, Laptop, Lightbulb, Megaphone, TrendingUp, Users } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ExpertiseSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="expertise" data-section="expertise">
|
||||
<SectionErrorBoundary name="expertise">
|
||||
<FeaturesAttributeCards
|
||||
tag="Our Expertise"
|
||||
title="Specialized Knowledge for Targeted Growth"
|
||||
description="Leverage our in-depth expertise in key marketing areas to maximize your impact and achieve exceptional results."
|
||||
items={[
|
||||
{
|
||||
title: "Search Engine Optimization (SEO)", tags: "Visibility, Rankings, Traffic", details: [
|
||||
{
|
||||
icon: ArrowUpRight,
|
||||
label: "Organic Growth", value: "Boost visibility"},
|
||||
{
|
||||
icon: ChartLine,
|
||||
label: "Data-Driven", value: "Analytics insights"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-colorful-arrows_1134-381.jpg"},
|
||||
{
|
||||
title: "Social Media Marketing", tags: "Engagement, Community, Reach", details: [
|
||||
{
|
||||
icon: Users,
|
||||
label: "Audience Connect", value: "Build community"},
|
||||
{
|
||||
icon: Megaphone,
|
||||
label: "Targeted Ads", value: "Maximize reach"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bullet-journals-arrangement_23-2149740092.jpg"},
|
||||
{
|
||||
title: "Web Design & Development", tags: "UX/UI, Conversion, Responsive", details: [
|
||||
{
|
||||
icon: Laptop,
|
||||
label: "User Experience", value: "Intuitive design"},
|
||||
{
|
||||
icon: BarChart2,
|
||||
label: "Conversion Focused", value: "Drive actions"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-laptop-meeting_53876-64855.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/pages/HomePage/sections/Faq.tsx
Normal file
32
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Q&A"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our marketing agency and how we work with clients."
|
||||
items={[
|
||||
{
|
||||
question: "What types of businesses do you work with?", answer: "We partner with businesses of all sizes and industries, from local Santa Barbara startups to established national brands. Our strategies are tailored to meet the unique needs of each client."},
|
||||
{
|
||||
question: "How do you measure campaign success?", answer: "We utilize a variety of metrics including website traffic, conversion rates, lead generation, social media engagement, and ROI to provide comprehensive performance reports and ensure transparent results."},
|
||||
{
|
||||
question: "What makes your agency different?", answer: "Our blend of local Santa Barbara market expertise with cutting-edge global marketing strategies, combined with a highly personalized client approach, sets us apart. We prioritize measurable results and transparent communication."},
|
||||
{
|
||||
question: "Can I get a custom marketing plan?", answer: "Absolutely! We believe every business is unique. We offer bespoke marketing plans designed specifically to address your goals, challenges, and target audience. Contact us for a consultation."},
|
||||
{
|
||||
question: "What is your typical project timeline?", answer: "Project timelines vary depending on the scope and complexity of the services. We provide a detailed timeline and milestones for each project during the initial planning phase, ensuring clarity and accountability."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
src/pages/HomePage/sections/Home.tsx
Normal file
71
src/pages/HomePage/sections/Home.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import AutoFillText from "@/components/ui/AutoFillText";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
const primaryButton = {
|
||||
text: "Explore Our Services",
|
||||
href: "#services"
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "Contact Us",
|
||||
href: "#contact"
|
||||
};
|
||||
|
||||
type HeroBillboardBrandProps = {
|
||||
brand: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const HomeInline = () => {
|
||||
return (
|
||||
<section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30">
|
||||
<HeroBackgroundSlot />
|
||||
<div className="flex flex-col gap-10 md:gap-12 w-content-width mx-auto">
|
||||
<div className="flex flex-col items-end gap-5">
|
||||
<AutoFillText className="w-full font-semibold" paddingY="">{"Catalyst Marketing Agency"}</AutoFillText>
|
||||
|
||||
<TextAnimation
|
||||
text={"Your trusted partner for innovative marketing strategies in Santa Barbara. We elevate brands through data-driven campaigns, compelling content, and measurable results. Let's create your success story."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="w-full md:w-1/2 text-lg md:text-2xl leading-snug text-balance text-right"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-end gap-3 mt-1 md:mt-2">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
|
||||
<div className="relative w-full h-full rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg"} className="aspect-4/5 md:aspect-video" />
|
||||
<div className="absolute top-4 left-4 md:top-6 md:left-6 z-10 flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-sm font-medium shadow-sm">
|
||||
<span className="relative flex h-2.5 w-2.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
||||
</span>
|
||||
Active Now
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HomeSection() {
|
||||
return (
|
||||
<div data-webild-section="home" id="home">
|
||||
<HomeInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/pages/HomePage/sections/Results.tsx
Normal file
32
src/pages/HomePage/sections/Results.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "results" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import { ArrowUpRight, BarChart2, Briefcase, ChartLine, Laptop, Lightbulb, Megaphone, TrendingUp, Users } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ResultsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="results" data-section="results">
|
||||
<SectionErrorBoundary name="results">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Measurable Success, Proven Growth"
|
||||
description="Our strategies deliver real-world results that translate into tangible business growth for our clients."
|
||||
metrics={[
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Average Client Growth", value: "45%"},
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: "Client Retention Rate", value: "92%"},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: "Campaign ROI", value: "200%+"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
src/pages/HomePage/sections/Services.tsx
Normal file
103
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Digital Strategy & SEO",
|
||||
description: "Develop tailored online strategies to boost your visibility and rankings, ensuring you reach your target audience effectively.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/promotion-marketing-advertising-branding-sale-concept_53876-133670.jpg"
|
||||
},
|
||||
{
|
||||
title: "Brand Development",
|
||||
description: "Forge a compelling brand identity that tells your story, resonates with customers, and stands out in a crowded market.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cardboard-organic-dinnerware_23-2149542081.jpg"
|
||||
},
|
||||
{
|
||||
title: "Content Creation",
|
||||
description: "Produce engaging and high-quality content, from captivating visuals to persuasive copywriting, across all platforms.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320720.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesMediaCardsProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: FeatureItem[];
|
||||
}
|
||||
|
||||
const ServicesInline = () => {
|
||||
return (
|
||||
<section aria-label="Features section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Our Services"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Comprehensive Marketing Solutions"}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"We offer a full spectrum of marketing services designed to meet your business objectives and drive sustainable growth."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="fade-blur">
|
||||
<GridOrCarousel >
|
||||
{items.map((item) => (
|
||||
<div key={item.title} className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded">
|
||||
<div className="aspect-square rounded overflow-hidden button-secondary shadow shadow-foreground/5">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4">
|
||||
<h3 className="text-2xl font-semibold leading-snug">{item.title}</h3>
|
||||
<p className="text-base leading-snug">{item.description}</p>
|
||||
<div className="mt-4">
|
||||
<Button text="Learn more" variant="secondary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ServicesSection() {
|
||||
return (
|
||||
<div data-webild-section="services" id="services">
|
||||
<ServicesInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/SocialProof.tsx
Normal file
22
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "social-proof" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SocialProofSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Partners"
|
||||
title="Trusted by Leading Brands"
|
||||
description="We're proud to partner with a diverse range of businesses, helping them achieve their marketing goals."
|
||||
names={[
|
||||
"Luxury Living Estates", "The Local Roaster", "Eco-Cycle Solutions", "Innovate Tech Hub", "Harbor Financial Group", "Coastal University", "Santa Barbara Events"]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
148
src/pages/HomePage/sections/Team.tsx
Normal file
148
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { BadgeCheck } from "lucide-react";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import Button from "@/components/ui/Button";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { useButtonClick } from "@/hooks/useButtonClick";
|
||||
|
||||
const items = [
|
||||
{
|
||||
avatarSrc: "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=256&h=256",
|
||||
buttonText: "LinkedIn",
|
||||
title: "Michael Chen",
|
||||
imageSrc: "https://picsum.photos/seed/731591061/1200/800",
|
||||
description: "10+ years of experience in digital marketing and brand strategy."
|
||||
},
|
||||
{
|
||||
buttonText: "LinkedIn",
|
||||
title: "Sarah Jenkins",
|
||||
imageSrc: "https://picsum.photos/seed/1117886791/1200/800",
|
||||
avatarSrc: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=256&h=256",
|
||||
description: "Specializes in SEO, content creation, and organic growth."
|
||||
},
|
||||
{
|
||||
imageSrc: "https://picsum.photos/seed/1228880249/1200/800",
|
||||
buttonText: "LinkedIn",
|
||||
title: "David Rodriguez",
|
||||
avatarSrc: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&q=80&w=256&h=256",
|
||||
description: "Expert in paid media, analytics, and conversion rate optimization."
|
||||
}
|
||||
];
|
||||
|
||||
type TeamItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
avatarSrc: string;
|
||||
buttonText: string;
|
||||
buttonHref?: string;
|
||||
buttonOnClick?: () => void;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const ProfileCard = ({ item }: { item: TeamItem }) => {
|
||||
const handleClick = useButtonClick(item.buttonHref, item.buttonOnClick);
|
||||
|
||||
return (
|
||||
<div className="group relative overflow-hidden aspect-5/6 rounded">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
|
||||
|
||||
<div className="absolute top-4 left-1/2 -translate-x-1/2 xl:top-6 2xl:top-8 z-20 flex gap-2">
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-1 text-sm bg-white/20 backdrop-blur-md text-white border border-white/30 rounded cursor-pointer hover:bg-white/30 transition-colors"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-1 text-sm bg-white/20 backdrop-blur-md text-white border border-white/30 rounded cursor-pointer hover:bg-white/30 transition-colors"
|
||||
>
|
||||
Instagram
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="px-3 py-1 text-sm bg-white/20 backdrop-blur-md text-white border border-white/30 rounded cursor-pointer hover:bg-white/30 transition-colors"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
|
||||
|
||||
<div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
|
||||
<div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
|
||||
<div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="size-8 shrink-0 overflow-hidden rounded secondary-button">
|
||||
<img src={item.avatarSrc} alt="" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold leading-snug truncate text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
|
||||
{item.title}
|
||||
</h3>
|
||||
<BadgeCheck className="size-5 shrink-0 text-foreground md:text-background transition-colors duration-400 md:group-hover:text-foreground" strokeWidth={2} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
|
||||
<p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TeamInline = () => (
|
||||
<section aria-label="Team section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Our Team"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"The Minds Behind the Magic"}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Meet the experts behind our successful campaigns."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel>
|
||||
{items.map((item) => (
|
||||
<ProfileCard key={item.title} item={item} />
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default function TeamSection() {
|
||||
return (
|
||||
<div data-webild-section="team" id="team">
|
||||
<TeamInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Testimonials.tsx
Normal file
37
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Client Stories"
|
||||
title="What Our Clients Say"
|
||||
description="Hear directly from businesses in Santa Barbara and beyond who have experienced transformative growth with Catalyst Marketing."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sophia Rodriguez", role: "CEO, Ocean Breeze Boutique", quote: "Catalyst Marketing completely revamped our online presence. Our website traffic has quadrupled, and we've seen a significant increase in sales. Their local market insight is truly invaluable!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-manager-standing-her-restaurant-using-computer_23-2147936244.jpg"},
|
||||
{
|
||||
name: "David Chen", role: "Owner, Coastal Eats", quote: "Their team developed an incredible content strategy that perfectly captured our brand's voice. We're now consistently ranking higher in local searches, and customer engagement is at an all-time high.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg"},
|
||||
{
|
||||
name: "Emily White", role: "Marketing Director, SB Tech Solutions", quote: "The SEO work by Catalyst Marketing has been phenomenal. We've seen a dramatic improvement in our organic search results, bringing in more qualified leads than ever before.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg"},
|
||||
{
|
||||
name: "Michael Johnson", role: "Founder, Pacific Peak Adventures", quote: "Professional, creative, and highly effective. Catalyst Marketing understood our vision and translated it into a digital strategy that exceeded our expectations. Highly recommend!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3267.jpg"},
|
||||
{
|
||||
name: "Jessica Lee", role: "Brand Manager, Vine & Canvas Studio", quote: "From branding to social media, Catalyst Marketing provided comprehensive support that elevated our entire brand. Their attention to detail and creative approach made all the difference.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/project-manager-sitting-office-desk_482257-127147.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user