301 lines
13 KiB
TypeScript
301 lines
13 KiB
TypeScript
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { TestimonialSlider } from "@/components/testimonial-slider"
|
|
import { Header } from "@/components/header"
|
|
import { Footer } from "@/components/footer"
|
|
import { FontLoader } from "@/components/font-loader"
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<FontLoader />
|
|
<Header />
|
|
|
|
{/* Hero Section with New Mountain Background */}
|
|
<section className="relative h-screen flex items-center justify-center text-white">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url('/images/hero-background-new.jpg')",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
|
|
<div className="relative z-10 text-center max-w-4xl mx-auto px-4">
|
|
<h1 className="hero-title text-5xl md:text-6xl mb-6 leading-tight font-loading">
|
|
Bring your digital marketing strategy full circle
|
|
</h1>
|
|
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-loading">
|
|
We are a boutique digital marketing team committed to helping you succeed at what <em>you</em> do best.
|
|
</p>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="bg-transparent border-white text-white hover:bg-white hover:text-teal-600 font-loading"
|
|
>
|
|
<Link href="/our-services">See our Services</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section - FIXED TEXT VISIBILITY */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2
|
|
className="text-4xl font-bold text-gray-900 mb-4"
|
|
style={{ fontFamily: "var(--font-permanent-marker)" }}
|
|
>
|
|
Digital Marketing Solutions for Your Business
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
{/* Integrated Digital Marketing Strategy */}
|
|
<Card className="text-center p-6 border-none shadow-lg h-full">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-6 h-32 flex items-center justify-center">
|
|
<Image
|
|
src="/images/icons/marketing-strategy-green.png"
|
|
alt="Integrated Digital Marketing Strategy"
|
|
width={120}
|
|
height={120}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h3
|
|
className="text-xl mb-4 font-bold text-gray-900"
|
|
style={{ fontFamily: "var(--font-permanent-marker)" }}
|
|
>
|
|
Integrated Digital Marketing Strategy
|
|
</h3>
|
|
<p className="text-gray-600 mb-4 text-base leading-relaxed">
|
|
A robust marketing strategy should be rolled out consistently across each avenue you use to converse
|
|
with your customers. Our holistic approach to your digital success consists of the following
|
|
components & more:
|
|
</p>
|
|
<ul className="text-left text-gray-600 mb-6 space-y-2 text-sm">
|
|
<li>• Marketing Funnel Discovery</li>
|
|
<li>• Newsletter Automation Setup</li>
|
|
<li>• Social Content Strategy</li>
|
|
<li>• Promotion & Contest Planning</li>
|
|
</ul>
|
|
<Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
|
|
<Link href="/success-stories/integrated-digital-marketing-strategy">See our Success Story</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Digital Media Buys */}
|
|
<Card className="text-center p-6 border-none shadow-lg h-full">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-6 h-32 flex items-center justify-center">
|
|
<Image
|
|
src="/images/icons/media-buys-green.png"
|
|
alt="Digital Media Buys"
|
|
width={120}
|
|
height={120}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h3
|
|
className="text-xl mb-4 font-bold text-gray-900"
|
|
style={{ fontFamily: "var(--font-permanent-marker)" }}
|
|
>
|
|
Digital Media Buys
|
|
</h3>
|
|
<p className="text-gray-600 mb-4 text-base leading-relaxed">
|
|
Integrated, consistent cross platform messaging is essential to promoting your brand or product. Our
|
|
media buy tactics work together with your organic post strategy and can incorporate the following
|
|
channels:
|
|
</p>
|
|
<ul className="text-left text-gray-600 mb-6 space-y-2 text-sm">
|
|
<li>• Facebook Advertising</li>
|
|
<li>• Instagram Advertising</li>
|
|
<li>• Youtube Advertising</li>
|
|
<li>• Search Advertising</li>
|
|
</ul>
|
|
<Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
|
|
<Link href="/success-stories/digital-media-buys">See our Success Story</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Integrations, Analytics & Tracking */}
|
|
<Card className="text-center p-6 border-none shadow-lg h-full">
|
|
<CardContent className="pt-6">
|
|
<div className="mb-6 h-32 flex items-center justify-center">
|
|
<Image
|
|
src="/images/icons/integrations.jpg"
|
|
alt="Integrations, Analytics & Tracking"
|
|
width={120}
|
|
height={120}
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h3
|
|
className="text-xl mb-4 font-bold text-gray-900"
|
|
style={{ fontFamily: "var(--font-permanent-marker)" }}
|
|
>
|
|
Integrations, Analytics & Tracking
|
|
</h3>
|
|
<p className="text-gray-600 mb-4 text-base leading-relaxed">
|
|
An essential part of bringing your digital strategy full circle lies in tracking campaign progress,
|
|
ensuring targets are being met, and iterating on the ideas that work. Cost per result varies across
|
|
different industries, which is why we utilize a data based iteration model that suits the needs of any
|
|
business, utilizing the platforms below and more:
|
|
</p>
|
|
<ul className="text-left text-gray-600 mb-6 space-y-2 text-sm">
|
|
<li>• Google Analytics</li>
|
|
<li>• Tag Manager & Tracking Pixels</li>
|
|
<li>• Ad Campaign Reporting</li>
|
|
</ul>
|
|
<Button asChild className="bg-teal-600 hover:bg-teal-700 text-white">
|
|
<Link href="/success-stories/integrations-analytics-tracking">See our Success Story</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonials Section */}
|
|
<section className="relative py-20 text-white">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url('/images/hero-background-new.jpg')",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
|
|
<div className="relative z-10 container mx-auto px-4">
|
|
<h2 className="section-title text-4xl text-center mb-12 font-loading">Testimonials about Our Work</h2>
|
|
<TestimonialSlider />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Client Logos Section */}
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<Image
|
|
src="/images/clients-header-hd.png"
|
|
alt="Some of Our Clients"
|
|
width={600}
|
|
height={60}
|
|
className="mx-auto mb-8 h-auto max-w-2xl"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-wrap justify-center items-center gap-12 max-w-6xl mx-auto">
|
|
<Link
|
|
href="https://freeandeasytraveler.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
|
|
>
|
|
<Image
|
|
src="/images/free-and-easy-traveler.jpg"
|
|
alt="Free & Easy Traveler"
|
|
width={210}
|
|
height={210}
|
|
className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://breatheinlife.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
|
|
>
|
|
<Image
|
|
src="/images/breathe-in-life.jpg"
|
|
alt="Breathe in Life"
|
|
width={210}
|
|
height={210}
|
|
className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://seekers-media.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
|
|
>
|
|
<Image
|
|
src="/images/seekers-media.jpg"
|
|
alt="Seekers Media"
|
|
width={210}
|
|
height={210}
|
|
className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href="https://pilateswithfadia.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-center p-8 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow group"
|
|
>
|
|
<Image
|
|
src="/images/pilates-with-fadia-logo.png"
|
|
alt="Pilates with Fadia"
|
|
width={210}
|
|
height={210}
|
|
className="max-h-30 w-auto object-contain group-hover:scale-105 transition-transform"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Section */}
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="section-title text-4xl text-gray-900 mb-8 font-loading">Who We Are</h2>
|
|
<div className="max-w-4xl mx-auto">
|
|
<p className="text-lg text-gray-700 mb-8 leading-relaxed font-loading">
|
|
Full Circle Digital Marketing came together to amplify messages that we believe in. Although clicks and
|
|
channel growth are a necessary component of any digital marketing strategy, we believe there is a more
|
|
essential, real world impact when a good idea whose time has come hits the mainstream. We aren't your
|
|
typical marketing types - we're not in this for the sake of mindless engagement, but for the
|
|
people-oriented results we see when a good message spreads.
|
|
</p>
|
|
<Button asChild size="lg" className="bg-teal-600 hover:bg-teal-700 font-loading">
|
|
<Link href="/about">Learn More About Us</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative py-20 text-white">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url('/images/hero-background-new.jpg')",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/90 to-blue-900/90" />
|
|
<div className="relative z-10 container mx-auto px-4 text-center">
|
|
<h2 className="section-title text-4xl mb-6 font-loading">Ready to get noticed online?</h2>
|
|
<p className="text-xl mb-8 max-w-2xl mx-auto font-loading">
|
|
Great! If you'd like to learn more about how we can help you get noticed online, click the button below to
|
|
schedule an initial consultation phone call.
|
|
</p>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="bg-transparent border-white text-white hover:bg-white hover:text-teal-600 font-loading"
|
|
>
|
|
<Link href="/contact">Get in Touch</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|