import { Link } from "react-router-dom";
import Hero from "@/components/Hero";
import Section from "@/components/Section";
import ToolCard from "@/components/ToolCard";
import { Button } from "@/components/ui/button";
import {
Mail,
Users,
BookOpen,
TrendingUp
} from "lucide-react";
const Index = () => {
const featuredTools = [
{
title: "AWeber Pro",
description: "Pre-designed email templates to launch faster campaigns with professional results.",
imageSrc: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE2MjExNzYwMDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
ctaText: "Try AWeber Pro",
ctaLink: "#",
tag: "Featured"
},
{
title: "GetResponse Automation",
description: "Build powerful email workflows for free and automate your marketing campaigns.",
imageSrc: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y29kaW5nfHx8fHx8MTYyMTMwMDc4OA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
ctaText: "Start Automating",
ctaLink: "#",
},
{
title: "Moosend Automation",
description: "Simple automation tools for smarter campaigns that deliver results consistently.",
imageSrc: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4ODYyMjg4NA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
ctaText: "Try Moosend",
ctaLink: "#",
},
];
return (
<>
<Hero
title="Affordable Digital Marketing Solutions for Small Business Owners"
subtitle="Discover cost-effective tools and expert services to grow your business without breaking the bank"
ctaText="Explore Tools"
ctaLink="/top-picks"
secondaryCtaText="Browse Services"
secondaryCtaLink="/freelance-services"
/>
<Section
title="Welcome to FivZon.com"
subtitle="Our mission is to help small businesses and entrepreneurs succeed with affordable digital marketing solutions and on-demand freelance services."
background="white"
>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="card p-6 text-center flex flex-col items-center">
<div className="w-16 h-16 bg-brand-blue/10 rounded-full flex items-center justify-center mb-4">
<Mail className="w-8 h-8 text-brand-blue" />
</div>
<h3 className="text-xl font-bold mb-3">Email Marketing Tools</h3>
<p className="text-gray-600 mb-6">
Discover affordable email marketing platforms to grow your list, engage customers, and drive sales.
</p>
<Link to="/email-marketing" className="mt-auto">
<Button variant="outline" className="w-full">Explore Tools</Button>
</Link>
</div>
<div className="card p-6 text-center flex flex-col items-center">
<div className="w-16 h-16 bg-brand-teal/10 rounded-full flex items-center justify-center mb-4">
<Users className="w-8 h-8 text-brand-teal" />
</div>
<h3 className="text-xl font-bold mb-3">Freelance Services</h3>
<p className="text-gray-600 mb-6">
Connect with skilled professionals for on-demand services including design, development, and marketing.
</p>
<Link to="/freelance-services" className="mt-auto">
<Button variant="outline" className="w-full">Find Services</Button>
</Link>
</div>
<div className="card p-6 text-center flex flex-col items-center">
<div className="w-16 h-16 bg-brand-coral/10 rounded-full flex items-center justify-center mb-4">
<BookOpen className="w-8 h-8 text-brand-coral" />
</div>
<h3 className="text-xl font-bold mb-3">Courses & Funnels</h3>
<p className="text-gray-600 mb-6">
Learn marketing strategies and implement proven sales funnels to grow your business faster.
</p>
<Link to="/courses-funnels" className="mt-auto">
<Button variant="outline" className="w-full">Start Learning</Button>
</Link>
</div>
</div>
</Section>
<Section
title="Top Picks for 2025"
subtitle="Our recommended tools and services to help you grow your business this year"
background="light"
>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{featuredTools.map((tool) => (
<ToolCard
key={tool.title}
title={tool.title}
description={tool.description}
imageSrc={tool.imageSrc}
ctaText={tool.ctaText}
ctaLink={tool.ctaLink}
tag={tool.tag}
/>
))}
</div>
<div className="mt-12 text-center">
<Link to="/top-picks">
<Button size="lg" className="bg-brand-blue hover:bg-brand-blue/90">
View All Recommended Tools
</Button>
</Link>
</div>
</Section>
<Section
background="gradient"
>
<div className="flex flex-col md:flex-row md:items-center md:justify-between">
<div className="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<h2 className="section-title text-left">
Ready to Grow Your Business?
</h2>
<p className="text-lg text-gray-600 mb-6">
Explore our curated collection of affordable marketing tools, connect with talented freelancers, and access educational resources to help your business thrive.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link to="/top-picks">
<Button className="bg-brand-coral hover:bg-brand-coral/90">
Explore Tools
</Button>
</Link>
<Link to="/contact">
<Button variant="outline">
Contact Us
</Button>
</Link>
</div>
</div>
<div className="md:w-1/2">
<div className="bg-white p-6 rounded-lg shadow-lg border">
<div className="flex items-center mb-4">
<TrendingUp className="w-6 h-6 text-green-500 mr-2" />
<h3 className="font-bold text-lg">Latest from the Learning Center</h3>
</div>
<ul className="space-y-4">
<li>
<Link to="/blog/email-marketing-guide" className="block p-3 hover:bg-gray-50 rounded-md transition-colors">
<h4 className="font-medium text-brand-blue">Beginner's Guide to Email Marketing</h4>
<p className="text-sm text-gray-600">Learn the fundamentals of building an effective email strategy</p>
</Link>
</li>
<li>
<Link to="/blog/choosing-email-platform" className="block p-3 hover:bg-gray-50 rounded-md transition-colors">
<h4 className="font-medium text-brand-blue">How to Choose the Right Email Platform</h4>
<p className="text-sm text-gray-600">Compare features, pricing, and capabilities of popular email tools</p>
</Link>
</li>
<li>
<Link to="/blog/freelancer-hiring-guide" className="block p-3 hover:bg-gray-50 rounded-md transition-colors">
<h4 className="font-medium text-brand-blue">5 Tips for Hiring Quality Freelancers</h4>
<p className="text-sm text-gray-600">Avoid common pitfalls when outsourcing your projects</p>
</Link>
</li>
</ul>
<div className="mt-4 text-right">
<Link to="/blog" className="text-brand-blue hover:underline text-sm font-medium">
View All Articles →
</Link>
</div>
</div>
</div>
</div>
</Section>
</>
);
};
export default Index;