76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Button } from "@/components/ui/button";
|
|
import { BarChart3 } from "lucide-react";
|
|
import { crm } from "@/services/Constants";
|
|
|
|
const CRMAnalytics: React.FC = () => {
|
|
return (
|
|
<section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
|
|
|
|
<div className="container mx-auto max-w-7xl relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
|
|
<BarChart3 className="w-8 h-8 text-white" />
|
|
</div>
|
|
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-4">
|
|
CRM Analytics & Insights
|
|
</h2>
|
|
|
|
<p className="text-xl text-blue-100 max-w-3xl mx-auto">
|
|
Real-time customer and sales intelligence that helps you close more
|
|
deals and grow faster
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{crm.ANALYTICS_STATS.map((stat, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: idx * 0.1, type: "spring" }}
|
|
className="text-center"
|
|
>
|
|
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
|
|
<div className="text-6xl font-extrabold mb-3 bg-gradient-to-r from-blue-300 to-purple-300 text-blue-100 bg-clip-text ">
|
|
{stat.value}
|
|
</div>
|
|
<div className="text-blue-100 text-lg font-medium">
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="mt-12 text-center"
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
|
|
>
|
|
<BarChart3 className="mr-2" /> View Full Analytics Dashboard
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CRMAnalytics;
|