84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Users, Star } from "lucide-react";
|
|
import { CONTACT_DATA } from "@/services/Constants";
|
|
import DemoModal from "../../_homeComponents/DemoModal";
|
|
|
|
// Happy Customers Component
|
|
const HappyCustomers: React.FC = () => (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="bg-gradient-to-br from-purple-50 via-blue-50 to-pink-50 rounded-3xl p-8 md:p-12"
|
|
>
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<Badge className="mb-4 px-4 py-2 bg-yellow-100 text-yellow-800 border-yellow-300">
|
|
<Star className="w-4 h-4 mr-2 inline fill-yellow-500" />
|
|
{CONTACT_DATA.customers.badge}
|
|
</Badge>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
|
|
{CONTACT_DATA.customers.title}
|
|
<span className="text-orange-600">
|
|
{CONTACT_DATA.customers.highlight}
|
|
</span>
|
|
</h2>
|
|
|
|
<DemoModal
|
|
trigger={
|
|
<Button
|
|
size="lg"
|
|
className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
|
|
>
|
|
Try for FREE
|
|
</Button>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-8 h-8 text-[#2563eb]" />
|
|
<div>
|
|
<p className="text-3xl font-bold text-gray-900">
|
|
{CONTACT_DATA.customers.count}
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
{CONTACT_DATA.customers.label}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{CONTACT_DATA.customers.logos.map((logo, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.05 }}
|
|
whileHover={{ scale: 1.1 }}
|
|
>
|
|
<div className="bg-white rounded-xl p-4 shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center h-20">
|
|
<span className={`font-bold text-lg ${logo.color}`}>
|
|
{logo.name}
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
|
|
export default HappyCustomers;
|