Compare commits
20 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3193faedb3 | |||
|
e210255bcd | ||
| 9ff4bec675 | |||
|
|
36661602df | ||
| f1324c3acc | |||
|
|
307f8aae69 | ||
| 103f1ac138 | |||
|
|
1808eaeb59 | ||
| 0a555cebf0 | |||
|
|
1bd975b83a | ||
| 070498676d | |||
|
|
0adc67b76d | ||
| bc5393893b | |||
|
|
b0069a702f | ||
| 3c3c30edec | |||
|
|
a8915a2817 | ||
| 3aa9469b5d | |||
|
|
c9c7285f53 | ||
| eed444b7ad | |||
|
|
d7574da9bd |
@@ -1,210 +1,39 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import FeaturesMediaGrid from '@/components/sections/features/FeaturesMediaGrid';
|
||||
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
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 HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import PortfolioSection from './HomePage/sections/Portfolio';
|
||||
import ClientsSection from './HomePage/sections/Clients';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import FaqSection from './HomePage/sections/Faq';{/* webild-stub @2026-06-03T15:01:45.386Z: Increase the spacing from the side of each element on the hero section like the rest of the site */}
|
||||
|
||||
{/* webild-stub @2026-06-03T14:38:48.425Z: Fix the spacing and buttons on the first section. */}
|
||||
|
||||
{/* webild-stub @2026-06-03T14:26:17.945Z: Make the hero section smoothly switch between 4 images, with a loading animation in between each image transition. */}
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardBrand
|
||||
brand="Innovate Marketing"
|
||||
description="Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together."
|
||||
primaryButton={{
|
||||
text: "Our Services",
|
||||
href: "#services",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952344.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="About Us"
|
||||
quote="Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth."
|
||||
author="Jane Doe"
|
||||
role="Founder & CEO, Innovate Marketing"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesMediaGrid
|
||||
tag="Our Services"
|
||||
title="Comprehensive Digital Marketing Solutions"
|
||||
description="From strategy to execution, we cover all aspects of digital marketing to ensure your brand stands out and achieves its goals."
|
||||
items={[
|
||||
{
|
||||
title: "SEO & SEM",
|
||||
description: "Boost your visibility and drive organic traffic with our expert search engine optimization and marketing strategies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg",
|
||||
},
|
||||
{
|
||||
title: "Content Marketing",
|
||||
description: "Engage your audience with compelling stories and valuable content that converts leads into loyal customers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",
|
||||
},
|
||||
{
|
||||
title: "Social Media Management",
|
||||
description: "Build a strong online presence and foster community with tailored social media strategies and engaging campaigns.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code_23-2149357862.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<SectionErrorBoundary name="portfolio">
|
||||
<FeaturesImageBento
|
||||
tag="Our Work"
|
||||
title="Successful Campaigns, Tangible Results"
|
||||
description="Explore a selection of our recent projects that delivered significant impact and measurable success for our diverse range of clients."
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-team-discussing-their-ideas-office-working-collaborate-together-analysis-chart_1421-632.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-holding-spiral-notepad-with-text_1170-1098.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laboratory-test-tube-with-coronavirus-vaccine_637285-4809.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020337.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-reading-menu-restaurant_23-2150384822.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-personal-care-products-fondant-pink_23-2151053850.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="clients" data-section="clients">
|
||||
<SectionErrorBoundary name="clients">
|
||||
<SocialProofMarquee
|
||||
tag="Our Clients"
|
||||
title="Trusted by Industry Leaders"
|
||||
description="We partner with ambitious brands across various sectors, helping them achieve their marketing objectives and grow their market share."
|
||||
names={[
|
||||
"GlobalCorp Solutions",
|
||||
"Apex Innovations",
|
||||
"Digital Dynamics",
|
||||
"EcoVibe Brands",
|
||||
"SynergyTech Group",
|
||||
"Quantum Leap Ventures",
|
||||
"FutureForward Co.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCards
|
||||
tag="Meet the Team"
|
||||
title="Dedicated Experts Driving Your Success"
|
||||
description="Our diverse team of marketing professionals brings a wealth of experience, creativity, and passion to every project, ensuring exceptional results."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Johnson",
|
||||
role: "Marketing Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-composition-with-modern-style_23-2147900149.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Lee",
|
||||
role: "Content Strategist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-sitting-restaurant-looking-mobile-phone_23-2148101654.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "SEO Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-disabilities-invalid-disabled-paralized-handicapped-immobilized-looking-camera-upset-tired-sitting-wheelchair-business-office-room-working-financial-project-with-team_482257-28442.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Testimonials"
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it. Hear directly from the businesses we've helped succeed and grow their brand."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Emily Watson",
|
||||
role: "CEO, Tech Solutions",
|
||||
quote: "Innovate Marketing completely transformed our online presence. Their strategic approach and execution led to a significant increase in lead generation and brand engagement. Highly recommend!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Davis",
|
||||
role: "Founder, Urban Bites",
|
||||
quote: "Working with Innovate Marketing was a game-changer for our restaurant. Their creative campaigns and social media expertise brought in new customers and boosted our visibility immensely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098593.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica Chen",
|
||||
role: "Marketing Manager, HealthCo",
|
||||
quote: "The team at Innovate Marketing is incredibly professional and results-driven. They understood our niche perfectly and delivered a campaign that exceeded all our expectations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-businesswoman-with-laptop-coffee-go-city-street_574295-836.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Brown",
|
||||
role: "Owner, CraftWorks",
|
||||
quote: "From website redesign to targeted ads, Innovate Marketing handled everything with precision. Our sales have never been better, thanks to their dedicated efforts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sophia Rodriguez",
|
||||
role: "E-commerce Lead, StyleHub",
|
||||
quote: "Innovate Marketing provided exceptional support for our e-commerce platform. Their data-driven insights and innovative strategies significantly improved our conversion rates.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-woman-working-night-using-computer-laptop-doing-money-gesture-with-hands-asking-salary-payment-millionaire-business_839833-14045.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Grow?"
|
||||
text="Let's build a powerful marketing strategy tailored to your unique business goals. Get in touch today and start your journey to success."
|
||||
primaryButton={{
|
||||
text: "Start a Project",
|
||||
href: "mailto:contact@innovatemarketing.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us",
|
||||
href: "tel:+1234567890",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HeroSection />
|
||||
<AboutSection />
|
||||
<ServicesSection />
|
||||
<PortfolioSection />
|
||||
<ClientsSection />
|
||||
<TeamSection />
|
||||
<TestimonialsSection />
|
||||
<FaqSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
50
src/pages/HomePage/sections/About.tsx
Normal file
50
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
// 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 AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-webild-section="about" className="py-24 bg-background">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<Tag text="About Us" className="mb-6" />
|
||||
<h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl mb-6">
|
||||
We are a team of passionate marketers.
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Button text="Learn More" variant="primary" />
|
||||
<Button text="Meet the Team" variant="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[500px] rounded-2xl overflow-hidden">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80"
|
||||
alt="Team working"
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden">
|
||||
<AboutTestimonial
|
||||
tag="About Us"
|
||||
quote="Our mission is to empower businesses with innovative marketing solutions that connect, engage, and convert. We believe in transparent partnerships and sustainable growth."
|
||||
author="Jane Doe"
|
||||
role="Founder & CEO, Innovate Marketing"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg"
|
||||
/>
|
||||
</div>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/Clients.tsx
Normal file
29
src/pages/HomePage/sections/Clients.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 "clients" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ClientsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="clients" data-section="clients">
|
||||
<SectionErrorBoundary name="clients">
|
||||
<SocialProofMarquee
|
||||
tag="Our Clients"
|
||||
title="Trusted by Industry Leaders"
|
||||
description="We partner with ambitious brands across various sectors, helping them achieve their marketing objectives and grow their market share."
|
||||
names={[
|
||||
"GlobalCorp Solutions",
|
||||
"Apex Innovations",
|
||||
"Digital Dynamics",
|
||||
"EcoVibe Brands",
|
||||
"SynergyTech Group",
|
||||
"Quantum Leap Ventures",
|
||||
"FutureForward Co.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</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 Grow?"
|
||||
text="Let's build a powerful marketing strategy tailored to your unique business goals. Get in touch today and start your journey to success."
|
||||
primaryButton={{
|
||||
text: "Start a Project",
|
||||
href: "mailto:contact@innovatemarketing.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us",
|
||||
href: "tel:+1234567890",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
src/pages/HomePage/sections/Faq.tsx
Normal file
47
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
// Created by create_section tool.
|
||||
|
||||
import React from 'react';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="faq" className="py-24 px-6 md:px-12 lg:px-24 bg-background">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16 flex flex-col items-center">
|
||||
<Tag text="FAQ" className="mb-6" />
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6 tracking-tight">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Find answers to common questions about our services, process, and how we can help your business grow.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
q: "What services do you offer?",
|
||||
a: "We offer a comprehensive suite of digital marketing services including SEO, PPC advertising, social media management, content marketing, and email marketing. Our strategies are tailored to meet your specific business goals."
|
||||
},
|
||||
{
|
||||
q: "How do you measure success?",
|
||||
a: "We use a data-driven approach, tracking key performance indicators (KPIs) such as website traffic, conversion rates, cost per acquisition (CPA), and return on investment (ROI). We provide regular, transparent reports so you can see exactly how your campaigns are performing."
|
||||
},
|
||||
{
|
||||
q: "Do you work with businesses in my industry?",
|
||||
a: "We have experience working with a wide range of industries, from e-commerce and technology to healthcare and professional services. Our team takes the time to understand your unique market and audience to develop effective strategies."
|
||||
},
|
||||
{
|
||||
q: "How long does it take to see results?",
|
||||
a: "The timeline for results varies depending on the specific services and your current digital presence. While some tactics like PPC can yield immediate traffic, strategies like SEO typically take 3-6 months to show significant impact. We focus on sustainable, long-term growth."
|
||||
}
|
||||
].map((faq, i) => (
|
||||
<div key={i} className="border border-border rounded-xl p-6 bg-card">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-3">{faq.q}</h3>
|
||||
<p className="text-muted-foreground">{faq.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
src/pages/HomePage/sections/Hero.tsx
Normal file
101
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const IMAGES = [
|
||||
"http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952344.jpg",
|
||||
"https://images.unsplash.com/photo-1522071820075-bc879564763a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca8849d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
"https://images.unsplash.com/photo-1517245381810-b23468734b09?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||
];
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const duration = 5000; // 5 seconds per image
|
||||
const interval = 50; // update progress every 50ms
|
||||
const step = (interval / duration) * 100;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
if (prev >= 100) {
|
||||
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % IMAGES.length);
|
||||
return 0;
|
||||
}
|
||||
return prev + step;
|
||||
});
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="hero" data-webild-section="hero" className="relative w-full pt-24 pb-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="container mx-auto mb-12">
|
||||
<h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8 text-center">
|
||||
Innovate Marketing
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-end items-end gap-6">
|
||||
<div className="max-w-md text-right">
|
||||
<p className="text-base md:text-lg text-muted-foreground mb-6">
|
||||
Your Vision, Amplified. We craft data-driven strategies and compelling narratives to elevate your brand and drive measurable results. Let's grow together.
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<Button href="#services" text="Our Services" variant="primary" />
|
||||
<Button href="#contact" text="Contact Us" variant="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full container mx-auto relative rounded-3xl overflow-hidden aspect-[16/9] md:aspect-[21/9] shadow-2xl bg-muted">
|
||||
{IMAGES.map((src, index) => (
|
||||
<div
|
||||
key={src}
|
||||
className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
|
||||
index === currentImageIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Progress Bars Overlay */}
|
||||
<div className="absolute bottom-6 left-0 right-0 z-20 flex justify-center gap-3 px-6">
|
||||
{IMAGES.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-1.5 w-16 sm:w-24 bg-white/30 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer"
|
||||
onClick={() => {
|
||||
setCurrentImageIndex(index);
|
||||
setProgress(0);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="h-full bg-white transition-all duration-75 ease-linear"
|
||||
style={{
|
||||
width: index === currentImageIndex
|
||||
? `${progress}%`
|
||||
: index < currentImageIndex ? '100%' : '0%'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
src/pages/HomePage/sections/Portfolio.tsx
Normal file
43
src/pages/HomePage/sections/Portfolio.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "portfolio" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PortfolioSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<SectionErrorBoundary name="portfolio">
|
||||
<FeaturesImageBento
|
||||
tag="Our Work"
|
||||
title="Successful Campaigns, Tangible Results"
|
||||
description="Explore a selection of our recent projects that delivered significant impact and measurable success for our diverse range of clients."
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-team-discussing-their-ideas-office-working-collaborate-together-analysis-chart_1421-632.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-holding-spiral-notepad-with-text_1170-1098.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laboratory-test-tube-with-coronavirus-vaccine_637285-4809.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020337.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-reading-menu-restaurant_23-2150384822.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-personal-care-products-fondant-pink_23-2151053850.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Services.tsx
Normal file
37
src/pages/HomePage/sections/Services.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 "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesMediaGrid from '@/components/sections/features/FeaturesMediaGrid';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesMediaGrid
|
||||
tag="Our Services"
|
||||
title="Comprehensive Digital Marketing Solutions"
|
||||
description="From strategy to execution, we cover all aspects of digital marketing to ensure your brand stands out and achieves its goals."
|
||||
items={[
|
||||
{
|
||||
title: "SEO & SEM",
|
||||
description: "Boost your visibility and drive organic traffic with our expert search engine optimization and marketing strategies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg",
|
||||
},
|
||||
{
|
||||
title: "Content Marketing",
|
||||
description: "Engage your audience with compelling stories and valuable content that converts leads into loyal customers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",
|
||||
},
|
||||
{
|
||||
title: "Social Media Management",
|
||||
description: "Build a strong online presence and foster community with tailored social media strategies and engaging campaigns.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-scanning-qr-code_23-2149357862.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Team.tsx
Normal file
37
src/pages/HomePage/sections/Team.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 "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCards
|
||||
tag="Meet the Team"
|
||||
title="Dedicated Experts Driving Your Success"
|
||||
description="Our diverse team of marketing professionals brings a wealth of experience, creativity, and passion to every project, ensuring exceptional results."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Johnson",
|
||||
role: "Marketing Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-composition-with-modern-style_23-2147900149.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Lee",
|
||||
role: "Content Strategist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-sitting-restaurant-looking-mobile-phone_23-2148101654.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "SEO Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-disabilities-invalid-disabled-paralized-handicapped-immobilized-looking-camera-upset-tired-sitting-wheelchair-business-office-room-working-financial-project-with-team_482257-28442.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// 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 TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Testimonials"
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it. Hear directly from the businesses we've helped succeed and grow their brand."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Emily Watson",
|
||||
role: "CEO, Tech Solutions",
|
||||
quote: "Innovate Marketing completely transformed our online presence. Their strategic approach and execution led to a significant increase in lead generation and brand engagement. Highly recommend!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Davis",
|
||||
role: "Founder, Urban Bites",
|
||||
quote: "Working with Innovate Marketing was a game-changer for our restaurant. Their creative campaigns and social media expertise brought in new customers and boosted our visibility immensely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098593.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica Chen",
|
||||
role: "Marketing Manager, HealthCo",
|
||||
quote: "The team at Innovate Marketing is incredibly professional and results-driven. They understood our niche perfectly and delivered a campaign that exceeded all our expectations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-businesswoman-with-laptop-coffee-go-city-street_574295-836.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Brown",
|
||||
role: "Owner, CraftWorks",
|
||||
quote: "From website redesign to targeted ads, Innovate Marketing handled everything with precision. Our sales have never been better, thanks to their dedicated efforts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sophia Rodriguez",
|
||||
role: "E-commerce Lead, StyleHub",
|
||||
quote: "Innovate Marketing provided exceptional support for our e-commerce platform. Their data-driven insights and innovative strategies significantly improved our conversion rates.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-age-woman-working-night-using-computer-laptop-doing-money-gesture-with-hands-asking-salary-payment-millionaire-business_839833-14045.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user