108 lines
4.6 KiB
TypeScript
108 lines
4.6 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 {
|
|
CheckCircle,
|
|
Download,
|
|
ArrowRight,
|
|
Sparkles,
|
|
UserCheck,
|
|
} from "lucide-react";
|
|
import { crm } from "@/services/Constants";
|
|
|
|
|
|
// Components
|
|
const CRMHero: React.FC = () => {
|
|
return (
|
|
<section className="relative py-24 px-4 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50"></div>
|
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM4YjViZjYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
|
|
|
|
<div className="container mx-auto max-w-7xl relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<Badge className="mb-6 bg-blue-100 text-blue-700 border-blue-200 px-4 py-2 hover:bg-blue-200">
|
|
<Sparkles className="w-4 h-4 inline mr-2" />
|
|
Next-Generation crm Platform
|
|
</Badge>
|
|
|
|
<h1 className="text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight text-gray-900 mb-6">
|
|
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
|
|
A Powerful CRM
|
|
</span>
|
|
<br />
|
|
<span className="text-gray-900">to Manage Leads, Customers & Sales Growth</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-gray-600 mb-8 leading-relaxed">
|
|
{crm.hero.subtitle}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
|
|
>
|
|
{crm.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-2 border-gray-300 hover:border-blue-600 hover:bg-blue-50 text-gray-700 text-lg px-8 py-6"
|
|
>
|
|
<Download className="mr-2 w-5 h-5" /> {crm.hero.ctaSecondary}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-8 flex items-center gap-6 text-sm text-gray-600">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
|
<span>Free 14-day trial</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
|
<span>No credit card required</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative"
|
|
>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-600 rounded-3xl blur-2xl opacity-20"></div>
|
|
<img
|
|
src={crm.hero.heroImage}
|
|
alt="crm Dashboard"
|
|
className="relative rounded-3xl shadow-2xl w-full h-auto transform hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
|
|
<UserCheck className="w-7 h-7 text-white" />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900">16K+</div>
|
|
<div className="text-sm text-gray-600">Active Users</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CRMHero |