import React from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { motion } from "framer-motion";
import {
ArrowRight,
Zap,
TrendingUp,
Users,
Mail,
MessageSquare,
Globe,
Target,
Clock,
CheckCircle
} from "lucide-react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import ChatBot from "../components/ChatBot";
export default function Home() {
// Forcing a refresh to resolve platform loading issues.
const features = [
{
icon: MessageSquare,
title: "Turn Your Website Visitors Into Paying Customers",
description: "Automatically engage every visitor with intelligent chat automation",
color: "from-purple-500 to-blue-500"
},
{
icon: Zap,
title: "Most Business Websites Are Just...",
description: "73% of visitors leave without taking action. Your competitors are losing $2,400 per lead.",
color: "from-blue-500 to-indigo-500"
},
{
icon: Users,
title: "Meet Your New 24/7 AI Assistant",
description: "Greet visitors instantly, answer questions, and qualify leads while you sleep",
color: "from-indigo-500 to-purple-500"
}
];
const benefits = [
"Faster Response = More Trust",
"More Engagement = More Leads",
"No Extra Staff = Lower Costs",
"Instant Answers = Happier Customers",
"Be First in Area"
];
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative py-20 px-4">
<div className="max-w-4xl mx-auto text-center">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
Turn Your Website Visitors Into{" "}
<span className="gradient-text">Paying Customers</span>
</h1>
<p className="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
Automatically engage every visitor with intelligent chat automation that works 24/7
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-semibold px-8 py-4 rounded-full smooth-transition glow-effect"
onClick={() => window.open('mailto:tyronebuel@gmail.com', '_blank')}
>
<Mail className="w-5 h-5 mr-2" />
Get Started - Free Demo
</Button>
<Link to={createPageUrl("MindMap")}>
<Button
variant="outline"
className="border-white/30 text-white hover:bg-white/10 px-8 py-4 rounded-full smooth-transition"
>
View Mind Map
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
</Link>
{/* Added link to CRM page */}
<Link to={createPageUrl("CRM")}>
<Button
variant="outline"
className="border-white/30 text-white hover:bg-white/10 px-8 py-4 rounded-full smooth-transition"
>
Explore CRM Features
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
</Link>
</div>
</motion.div>
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4">
<div className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-3 gap-8">
{features.map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.2 }}
>
<Card className="glass-card p-8 h-full hover:scale-105 smooth-transition">
<div className={`w-16 h-16 rounded-2xl bg-gradient-to-r ${feature.color} flex items-center justify-center mb-6`}>
<feature.icon className="w-8 h-8 text-white" />
</div>
<h3 className="text-xl font-bold text-white mb-4">{feature.title}</h3>
<p className="text-white/80">{feature.description}</p>
</Card>
</motion.div>
))}
</div>
</div>
</section>
{/* Problem Section */}
<section className="py-20 px-4">
<div className="max-w-4xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
className="text-center mb-12"
>
<h2 className="text-4xl font-bold text-white mb-6">
Most Business Websites Are Just...
</h2>
<p className="text-xl text-white/80">Silent</p>
</motion.div>
<div className="grid md:grid-cols-2 gap-8">
<Card className="glass-card p-8">
<div className="flex items-center space-x-4 mb-6">
<div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center">
<Target className="w-6 h-6 text-red-400" />
</div>
<h3 className="text-xl font-bold text-white">The Problem</h3>
</div>
<ul className="space-y-3 text-white/80">
<li className="flex items-center space-x-2">
<Globe className="w-4 h-4" />
<span>Silent Websites</span>
</li>
<li className="flex items-center space-x-2">
<TrendingUp className="w-4 h-4" />
<span>Missed Opportunities</span>
</li>
<li className="flex items-center space-x-2">
<Users className="w-4 h-4" />
<span>73% Visitors Leave</span>
</li>
<li className="flex items-center space-x-2">
<Clock className="w-4 h-4" />
<span>5 Sec Bounce Time</span>
</li>
<li className="flex items-center space-x-2">
<Target className="w-4 h-4" />
<span>$2,400 Lost Lead Value</span>
</li>
</ul>
</Card>
<Card className="glass-card p-8">
<div className="flex items-center space-x-4 mb-6">
<div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
<CheckCircle className="w-6 h-6 text-green-400" />
</div>
<h3 className="text-xl font-bold text-white">Why It Works</h3>
</div>
<ul className="space-y-3 text-white/80">
{benefits.map((benefit, index) => (
<li key={index} className="flex items-center space-x-2">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>{benefit}</span>
</li>
))}
</ul>
</Card>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-4">
<div className="max-w-4xl mx-auto text-center">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
>
<Card className="glass-card p-12">
<h2 className="text-3xl font-bold text-white mb-6">
Ready to Transform Your Website?
</h2>
<p className="text-xl text-white/80 mb-8">
See how smart automation can revolutionize your business in just 24 hours
</p>
<Button
onClick={() => window.open('mailto:tyronebuel@gmail.com', '_blank')}
className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-semibold px-12 py-4 rounded-full smooth-transition glow-effect text-lg"
>
<Mail className="w-5 h-5 mr-2" />
Contact tyronebuel@gmail.com
</Button>
</Card>
</motion.div>
</div>
</section>
{/* ChatBot */}
<ChatBot />
</div>
);
}