Merge version_2_1781624849641 into main #1
@@ -1,309 +1,39 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
|
||||
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { BarChart, CheckCircle, Globe, Target, Users, Zap } 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. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Marketing Excellence"
|
||||
title="Scale Your Business With Data-Driven Strategies"
|
||||
description="We help ambitious brands grow through performance-led marketing and innovative storytelling."
|
||||
primaryButton={{
|
||||
text: "Book Strategy Call",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Services",
|
||||
href: "#features",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
text: "Proven ROI Tracking",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
text: "Global Reach",
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
text: "24/7 Support",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241198.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted By Industry Leaders"
|
||||
title="Scaling brands globally"
|
||||
description="We partner with visionary companies to deliver market-leading results every day."
|
||||
names={[
|
||||
"TechCorp",
|
||||
"InnovateLabs",
|
||||
"GrowthCo",
|
||||
"NexusMedia",
|
||||
"Velocity",
|
||||
"ApexDigital",
|
||||
"ZenithLabs",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SocialProofSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Expertise"
|
||||
title="More Than Just Marketing"
|
||||
description="We combine creative vision with rigorous analytics to ensure every campaign delivers maximum impact."
|
||||
items={[
|
||||
{
|
||||
icon: BarChart,
|
||||
title: "Precision Analytics",
|
||||
description: "Deep-dive data analysis to optimize your campaigns in real-time.",
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Strategic Targeting",
|
||||
description: "Reach your perfect audience with highly tailored advertising.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Dedicated Support",
|
||||
description: "You get a senior strategist working on your account full-time.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/workers-long-wooden-table_1262-810.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesDetailedCards
|
||||
tag="Core Services"
|
||||
title="Comprehensive Marketing Solutions"
|
||||
description="Tailored strategies designed for modern business landscapes."
|
||||
items={[
|
||||
{
|
||||
title: "SEO Engine Optimization",
|
||||
description: "Dominate search rankings with our proven algorithmic approach.",
|
||||
tags: [
|
||||
"Growth",
|
||||
"Analytics",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/analysis-model-flow-chart-icon_53876-167121.jpg",
|
||||
},
|
||||
{
|
||||
title: "Social Media Growth",
|
||||
description: "Drive authentic engagement across all major platforms.",
|
||||
tags: [
|
||||
"Social",
|
||||
"Engagement",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-skillful-people-using-digital-tablet-workplace_23-2147847545.jpg",
|
||||
},
|
||||
{
|
||||
title: "Content Strategy",
|
||||
description: "Create compelling content that builds lasting brand authority.",
|
||||
tags: [
|
||||
"Creative",
|
||||
"Brand",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749868.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Transparent Pricing"
|
||||
title="Plans That Scale With You"
|
||||
description="Clear pricing for every stage of your business growth."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "$2,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"SEO Audit",
|
||||
"Basic Social",
|
||||
"Monthly Reporting",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-success-growth-visualization_23-2152011787.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$5,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Advanced SEO",
|
||||
"Multi-platform Social",
|
||||
"Content Strategy",
|
||||
"Bi-weekly Call",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-annual-report_1098-3459.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "$10,000+",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Full Stack Management",
|
||||
"Dedicated Account Manager",
|
||||
"Custom Creative",
|
||||
"24/7 Priority",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996795.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Our Impact"
|
||||
title="Proven Performance Results"
|
||||
description="We measure success by the growth of your business bottom line."
|
||||
metrics={[
|
||||
{
|
||||
value: "150%",
|
||||
title: "Average Revenue Growth",
|
||||
description: "Our strategies consistently deliver ROI within 3 months.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-graphics-schedules-getting-checked-by-young-lady_140725-16046.jpg",
|
||||
},
|
||||
{
|
||||
value: "2M+",
|
||||
title: "Leads Generated",
|
||||
description: "Helping clients build sustainable sales funnels that scale.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
title: "Client Retention",
|
||||
description: "We build long-term partnerships through consistent quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2250.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Client Voices"
|
||||
title="They Love Our Results"
|
||||
description="Discover how we've helped businesses exceed their growth goals."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "CEO",
|
||||
quote: "The team transformed our lead generation strategy entirely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: "CMO",
|
||||
quote: "Incredible performance results from day one. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/face-casual-manager-communication-man_1157-3672.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emma Wilson",
|
||||
role: "Founder",
|
||||
quote: "Professional, data-driven, and truly creative visionaries.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Roberts",
|
||||
role: "Manager",
|
||||
quote: "We've seen a consistent 50% increase in revenue month over month.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-designer-looking-some-prints-choose-best-one-agency-employee_482257-32975.jpg",
|
||||
},
|
||||
{
|
||||
name: "Julia Adams",
|
||||
role: "Director",
|
||||
quote: "Truly exceptional service and results that speak for themselves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-posing-office_176420-911.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Got Questions?"
|
||||
title="Everything You Need To Know"
|
||||
description="Quick answers to common questions about our marketing agency services."
|
||||
items={[
|
||||
{
|
||||
question: "What is the typical onboarding timeline?",
|
||||
answer: "Onboarding takes roughly 1-2 weeks depending on your business complexity.",
|
||||
},
|
||||
{
|
||||
question: "Do you provide transparent reporting?",
|
||||
answer: "Absolutely. You receive real-time access to a customized performance dashboard.",
|
||||
},
|
||||
{
|
||||
question: "Can I cancel my monthly subscription?",
|
||||
answer: "Yes, we operate on flexible monthly agreements with 30-day notice.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/insurance-agent-having-consultations-with-couple-while-visiting-them-their-home_637285-3779.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to scale?"
|
||||
text="Let's build a strategy that works for your unique goals."
|
||||
primaryButton={{
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Email Us",
|
||||
href: "mailto:hello@agency.pro",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
108
src/pages/HomePage/sections/About.tsx
Normal file
108
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { BarChart, Target, Users } from 'lucide-react';
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import { resolveIcon } from "@/utils/resolve-icon";
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: BarChart,
|
||||
title: "Precision Analytics",
|
||||
description: "Deep-dive data analysis to optimize your campaigns in real-time."
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Strategic Targeting",
|
||||
description: "Reach your perfect audience with highly tailored advertising."
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Dedicated Support",
|
||||
description: "You get a senior strategist working on your account full-time."
|
||||
}
|
||||
];
|
||||
|
||||
type AboutFeaturesSplitProps = {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: { icon: string | LucideIcon; title: string; description: string }[];
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const AboutInline = () => {
|
||||
return (
|
||||
<section aria-label="About section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10 mx-auto w-content-width">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Our Expertise"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"More Than Just Marketing"}
|
||||
variant="slide-up"
|
||||
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 combine creative vision with rigorous analytics to ensure every campaign delivers maximum impact."}
|
||||
variant="slide-up"
|
||||
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>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-stretch gap-5">
|
||||
<div className="flex flex-col justify-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 w-full md:w-4/10 2xl:w-35/100 card rounded">
|
||||
{items.map((item, index) => {
|
||||
const ItemIcon = resolveIcon(item.icon);
|
||||
return (
|
||||
<div key={item.title}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
|
||||
<ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold">{item.title}</h3>
|
||||
<p className="text-base leading-snug">{item.description}</p>
|
||||
</div>
|
||||
{index < items.length - 1 && (
|
||||
<div className="mt-4 xl:mt-5 2xl:mt-6 border-b border-accent/40" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="p-px w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
|
||||
<div className="relative size-full">
|
||||
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/workers-long-wooden-table_1262-810.jpg"} className="absolute inset-0 object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<div data-webild-section="about" id="about">
|
||||
<AboutInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// 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="Ready to scale?"
|
||||
text="Let's build a strategy that works for your unique goals."
|
||||
primaryButton={{
|
||||
text: "Schedule Consultation",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Email Us",
|
||||
href: "mailto:hello@agency.pro",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/pages/HomePage/sections/Faq.tsx
Normal file
35
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
// 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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Got Questions?"
|
||||
title="Everything You Need To Know"
|
||||
description="Quick answers to common questions about our marketing agency services."
|
||||
items={[
|
||||
{
|
||||
question: "What is the typical onboarding timeline?",
|
||||
answer: "Onboarding takes roughly 1-2 weeks depending on your business complexity.",
|
||||
},
|
||||
{
|
||||
question: "Do you provide transparent reporting?",
|
||||
answer: "Absolutely. You receive real-time access to a customized performance dashboard.",
|
||||
},
|
||||
{
|
||||
question: "Can I cancel my monthly subscription?",
|
||||
answer: "Yes, we operate on flexible monthly agreements with 30-day notice.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/insurance-agent-having-consultations-with-couple-while-visiting-them-their-home_637285-3779.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
src/pages/HomePage/sections/Features.tsx
Normal file
125
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
/* 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 ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "SEO Engine Optimization",
|
||||
description: "Dominate search rankings with our proven algorithmic approach.",
|
||||
tags: [
|
||||
"Growth",
|
||||
"Analytics"
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/analysis-model-flow-chart-icon_53876-167121.jpg"
|
||||
},
|
||||
{
|
||||
title: "Social Media Growth",
|
||||
description: "Drive authentic engagement across all major platforms.",
|
||||
tags: [
|
||||
"Social",
|
||||
"Engagement"
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-skillful-people-using-digital-tablet-workplace_23-2147847545.jpg"
|
||||
},
|
||||
{
|
||||
title: "Content Strategy",
|
||||
description: "Create compelling content that builds lasting brand authority.",
|
||||
tags: [
|
||||
"Creative",
|
||||
"Brand"
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749868.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesDetailedCardsProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: FeatureItem[];
|
||||
}
|
||||
|
||||
const FeaturesInline = () => {
|
||||
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>{"Core 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={"Tailored strategies designed for modern business landscapes."}
|
||||
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>
|
||||
|
||||
<div className="flex flex-col w-content-width mx-auto gap-5">
|
||||
{items.map((item) => (
|
||||
<ScrollReveal
|
||||
variant="fade"
|
||||
key={item.title}
|
||||
className="flex flex-col md:grid md:grid-cols-2 mx-auto gap-6 md:gap-20 p-6 md:p-10 card rounded group"
|
||||
>
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">{item.title}</h3>
|
||||
|
||||
<div className="flex flex-col-reverse md:flex-col gap-3">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{item.tags.map((itemTag) => (
|
||||
<div key={itemTag} className="px-3 py-1 text-sm card rounded w-fit">
|
||||
<p>{itemTag}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-lg md:text-xl leading-snug text-balance">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="aspect-square md:aspect-5/4 rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="transition-transform duration-500 ease-in-out group-hover:scale-110 group-hover:rotate-2" />
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FeaturesSection() {
|
||||
return (
|
||||
<div data-webild-section="features" id="features">
|
||||
<FeaturesInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
118
src/pages/HomePage/sections/Hero.tsx
Normal file
118
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { CheckCircle, Globe, Zap } from 'lucide-react';
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
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 AvatarGroup from "@/components/ui/AvatarGroup";
|
||||
|
||||
const primaryButton = {
|
||||
text: "Book Strategy Call",
|
||||
href: "#contact"
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "View Services",
|
||||
href: "#features"
|
||||
};
|
||||
const items = [
|
||||
{
|
||||
text: "Proven ROI Tracking",
|
||||
icon: CheckCircle
|
||||
},
|
||||
{
|
||||
text: "Global Reach",
|
||||
icon: Globe
|
||||
},
|
||||
{
|
||||
text: "24/7 Support",
|
||||
icon: Zap
|
||||
}
|
||||
];
|
||||
|
||||
type HeroOverlayMarqueeProps = {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
avatarsSrc?: string[];
|
||||
avatarsLabel?: string;
|
||||
items: { text: string; icon: LucideIcon }[];
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const HeroInline = () => {
|
||||
return (
|
||||
<section
|
||||
aria-label="Hero section"
|
||||
className="relative overflow-hidden flex flex-col justify-between mb-20 w-full h-svh"
|
||||
>
|
||||
<HeroBackgroundSlot />
|
||||
<ImageOrVideo
|
||||
imageSrc={"http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241198.jpg"}
|
||||
className="absolute inset-0 object-cover w-full h-full rounded-none transition-transform duration-700 ease-out hover:scale-110 hover:rotate-2"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute z-10 left-0 top-0 w-[150vw] h-[150vw] -translate-x-1/2 -translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 mx-auto pt-35 w-content-width">
|
||||
<div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
|
||||
<div className="mb-1 px-3 py-1 w-fit text-sm card rounded">
|
||||
<p>{"Marketing Excellence"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Scale Your Business With Data-Driven Strategies"}
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance text-white"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"We help ambitious brands grow through performance-led marketing and innovative storytelling."}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl leading-snug text-balance text-white"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
|
||||
</div>
|
||||
|
||||
{undefined && undefined.length > 0 && (
|
||||
<div className="mt-3 md:mt-4">
|
||||
<AvatarGroup size="lg" labelClassName="text-primary-cta-text" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 overflow-hidden mx-auto pb-8 w-content-width mask-fade-x">
|
||||
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
|
||||
{[...items, ...items, ...items, ...items].map((item, index) => (
|
||||
<div key={index} className="flex items-center shrink-0 gap-1 mx-3 pl-2 pr-4 py-2 card rounded">
|
||||
<item.icon className="h-(--text-base) text-foreground" />
|
||||
<span className="whitespace-nowrap text-base font-medium text-foreground">{item.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/pages/HomePage/sections/Metrics.tsx
Normal file
40
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Our Impact"
|
||||
title="Proven Performance Results"
|
||||
description="We measure success by the growth of your business bottom line."
|
||||
metrics={[
|
||||
{
|
||||
value: "150%",
|
||||
title: "Average Revenue Growth",
|
||||
description: "Our strategies consistently deliver ROI within 3 months.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-graphics-schedules-getting-checked-by-young-lady_140725-16046.jpg",
|
||||
},
|
||||
{
|
||||
value: "2M+",
|
||||
title: "Leads Generated",
|
||||
description: "Helping clients build sustainable sales funnels that scale.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-167093.jpg",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
title: "Client Retention",
|
||||
description: "We build long-term partnerships through consistent quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2250.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
69
src/pages/HomePage/sections/Pricing.tsx
Normal file
69
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "pricing" section.
|
||||
|
||||
import React from 'react';
|
||||
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PricingSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Transparent Pricing"
|
||||
title="Plans That Scale With You"
|
||||
description="Clear pricing for every stage of your business growth."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "$2,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"SEO Audit",
|
||||
"Basic Social",
|
||||
"Monthly Reporting",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-success-growth-visualization_23-2152011787.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$5,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Advanced SEO",
|
||||
"Multi-platform Social",
|
||||
"Content Strategy",
|
||||
"Bi-weekly Call",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-annual-report_1098-3459.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "$10,000+",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Full Stack Management",
|
||||
"Dedicated Account Manager",
|
||||
"Custom Creative",
|
||||
"24/7 Priority",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996795.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// 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="Trusted By Industry Leaders"
|
||||
title="Scaling brands globally"
|
||||
description="We partner with visionary companies to deliver market-leading results every day."
|
||||
names={[
|
||||
"TechCorp",
|
||||
"InnovateLabs",
|
||||
"GrowthCo",
|
||||
"NexusMedia",
|
||||
"Velocity",
|
||||
"ApexDigital",
|
||||
"ZenithLabs",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
src/pages/HomePage/sections/Testimonials.tsx
Normal file
108
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
/* 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 testimonials = [
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "CEO",
|
||||
quote: "The team transformed our lead generation strategy entirely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg"
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: "CMO",
|
||||
quote: "Incredible performance results from day one. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/face-casual-manager-communication-man_1157-3672.jpg"
|
||||
},
|
||||
{
|
||||
name: "Emma Wilson",
|
||||
role: "Founder",
|
||||
quote: "Professional, data-driven, and truly creative visionaries.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg"
|
||||
},
|
||||
{
|
||||
name: "Mark Roberts",
|
||||
role: "Manager",
|
||||
quote: "We've seen a consistent 50% increase in revenue month over month.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-designer-looking-some-prints-choose-best-one-agency-employee_482257-32975.jpg"
|
||||
},
|
||||
{
|
||||
name: "Julia Adams",
|
||||
role: "Director",
|
||||
quote: "Truly exceptional service and results that speak for themselves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-successful-businessman-smiling-posing-office_176420-911.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
role: string;
|
||||
quote: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const TestimonialsInline = () => (
|
||||
<section aria-label="Testimonials section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Client Voices"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"They Love Our Results"}
|
||||
variant="fade-blur"
|
||||
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={"Discover how we've helped businesses exceed their growth goals."}
|
||||
variant="fade-blur"
|
||||
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">
|
||||
<GridOrCarousel >
|
||||
{testimonials.map((testimonial) => (
|
||||
<div key={testimonial.name} className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 card rounded group">
|
||||
<div className="relative size-22 xl:size-24 2xl:size-26 overflow-hidden rounded-full">
|
||||
<ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} className="transition-transform duration-700 ease-out group-hover:scale-110 group-hover:rotate-6" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="text-2xl font-semibold leading-snug truncate">{testimonial.name}</span>
|
||||
<span className="text-base leading-snug opacity-75 truncate">{testimonial.role}</span>
|
||||
</div>
|
||||
|
||||
<p className="text-lg leading-snug">{testimonial.quote}</p>
|
||||
</div>
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<div data-webild-section="testimonials" id="testimonials">
|
||||
<TestimonialsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user