You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.2 KiB
58 lines
2.2 KiB
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
const WhyChooseUs: React.FC = () => {
|
|
const points = [
|
|
{ title: "99.2% Settlement", subtitle: "Industry leading claim record", icon: "🏆" },
|
|
{ title: "24/7 Support", subtitle: "Round the clock assistance", icon: "📞" },
|
|
{ title: "Instant Policy", subtitle: "Buy and download in 2 minutes", icon: "⚡" },
|
|
{ title: "Paperless Claims", subtitle: "Fully digital hassle-free process", icon: "📲" },
|
|
{ title: "Lowest Prices", subtitle: "Best quotes guaranteed", icon: "💰" }
|
|
];
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % points.length);
|
|
}, 3000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#f1f5f9] rounded-3xl p-6 border border-slate-200 overflow-hidden relative">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-[#1a2b4b] text-xs font-black uppercase tracking-widest">Why Choose Us?</h3>
|
|
<div className="flex gap-1">
|
|
{points.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${i === currentIndex ? 'bg-[#e31e24] w-4' : 'bg-slate-300'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative h-16">
|
|
{points.map((point, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={`absolute inset-0 flex items-center gap-4 transition-all duration-700 ease-in-out ${
|
|
idx === currentIndex ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-8 pointer-events-none'
|
|
}`}
|
|
>
|
|
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-2xl shadow-sm border border-slate-100">
|
|
{point.icon}
|
|
</div>
|
|
<div>
|
|
<h4 className="text-[#1a2b4b] font-bold text-sm leading-none mb-1">{point.title}</h4>
|
|
<p className="text-slate-500 text-[11px] font-medium">{point.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs;
|