111 lines
4.2 KiB
TypeScript
111 lines
4.2 KiB
TypeScript
"use client";
|
|
import { useState } from 'react';
|
|
import { MousePointer, Command, Coins, HeartHandshake } from 'lucide-react';
|
|
|
|
const benefits = [
|
|
{
|
|
icon: <MousePointer className="w-6 h-6" />,
|
|
title: "User-Friendly",
|
|
description: "Intuitive, drag-and-drop design means you can focus on what matters—your expertise.",
|
|
gradient: "from-purple-500/10 via-purple-500/5 to-transparent"
|
|
},
|
|
{
|
|
icon: <Command className="w-6 h-6" />,
|
|
title: "All-in-One Solution",
|
|
description: "No need for multiple tools; manage everything from one centralized platform.",
|
|
gradient: "from-blue-500/10 via-blue-500/5 to-transparent"
|
|
},
|
|
{
|
|
icon: <Coins className="w-6 h-6" />,
|
|
title: "Scalable Revenue Streams",
|
|
description: "Monetize your services through community building and our AI marketplace.",
|
|
gradient: "from-indigo-500/10 via-indigo-500/5 to-transparent"
|
|
},
|
|
{
|
|
icon: <HeartHandshake className="w-6 h-6" />,
|
|
title: "Dedicated Support",
|
|
description: "Our expert team is here to help you succeed every step of the way.",
|
|
gradient: "from-violet-500/10 via-violet-500/5 to-transparent"
|
|
}
|
|
];
|
|
|
|
export default function WhyChooseUs() {
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div className="w-full py-32">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-24">
|
|
<h2 className="text-4xl md:text-6xl text-white mb-8">Why Choose Us</h2>
|
|
<p className="text-xl text-gray-400">Everything you need to succeed with AI</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
|
{benefits.map((benefit, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative group"
|
|
onMouseEnter={() => setHoveredIndex(index)}
|
|
onMouseLeave={() => setHoveredIndex(null)}
|
|
>
|
|
{/* Animated background */}
|
|
<div className={`
|
|
absolute inset-0 opacity-0 group-hover:opacity-100
|
|
bg-gradient-to-r ${benefit.gradient}
|
|
transition-all duration-500 rounded-3xl
|
|
`} />
|
|
|
|
{/* Content container */}
|
|
<div className="relative p-8">
|
|
<div className="flex items-start gap-6">
|
|
{/* Icon container */}
|
|
<div className={`
|
|
w-12 h-12 rounded-xl
|
|
flex items-center justify-center
|
|
bg-gradient-to-br from-purple-500/20 to-blue-500/20
|
|
transition-all duration-500 text-white
|
|
${hoveredIndex === index ? 'scale-110 rotate-3' : 'scale-100 rotate-0'}
|
|
`}>
|
|
{benefit.icon}
|
|
</div>
|
|
|
|
{/* Text content */}
|
|
<div className="flex-1">
|
|
<h3 className={`
|
|
text-2xl text-white mb-3
|
|
transition-transform duration-500
|
|
${hoveredIndex === index ? 'translate-x-2' : 'translate-x-0'}
|
|
`}>
|
|
{benefit.title}
|
|
</h3>
|
|
<p className={`
|
|
text-gray-400 leading-relaxed
|
|
transition-all duration-500
|
|
${hoveredIndex === index ? 'opacity-100' : 'opacity-80'}
|
|
`}>
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className={`
|
|
absolute bottom-0 right-0 w-24 h-24
|
|
bg-gradient-to-br from-purple-500/5 to-blue-500/5
|
|
rounded-full blur-2xl
|
|
transition-opacity duration-500
|
|
${hoveredIndex === index ? 'opacity-100' : 'opacity-0'}
|
|
`} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom decoration */}
|
|
<div className="relative mt-16 flex justify-center">
|
|
<div className="w-32 h-1 bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |