72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { motion } from "framer-motion"
|
|
import { Zap } from "lucide-react"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn, formatRupiah } from "@/utils/helpers"
|
|
import type { PackageData } from "@/types/site"
|
|
|
|
interface PackageCardProps {
|
|
pkg: PackageData
|
|
index: number
|
|
onSelect: (pkg: PackageData) => void
|
|
}
|
|
|
|
export default function PackageCard({ pkg, index, onSelect }: PackageCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className={cn(
|
|
"relative bg-white border-4 border-black rounded-lg p-6 shadow-brutal hover-lift",
|
|
pkg.popular && "bg-yellow-200"
|
|
)}
|
|
>
|
|
{pkg.popular && (
|
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
|
<Badge className="bg-red-500 hover:bg-red-600 text-white border-2 border-black font-black px-4 py-1 text-sm">
|
|
TERPOPULER
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-center space-y-4">
|
|
<h3 className="font-black text-xl">{pkg.name}</h3>
|
|
|
|
<div className="flex items-center justify-center gap-1 text-4xl font-black">
|
|
<Zap className="h-7 w-7 text-yellow-500" />
|
|
<span>{pkg.speed}</span>
|
|
<span className="text-lg">Mbps</span>
|
|
</div>
|
|
|
|
<ul className="space-y-2 text-left">
|
|
{pkg.features.map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-2 text-sm font-bold">
|
|
<span className="text-green-500 font-black">✓</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="pt-2">
|
|
<div className="text-3xl font-black">{formatRupiah(pkg.price)}</div>
|
|
<div className="text-sm font-bold text-gray-500">/Bulan</div>
|
|
</div>
|
|
|
|
<Button
|
|
variant="brutal"
|
|
className={cn(
|
|
"w-full font-black",
|
|
pkg.popular
|
|
? "bg-red-500 hover:bg-red-600 text-white"
|
|
: "bg-green-400 hover:bg-green-500"
|
|
)}
|
|
onClick={() => onSelect(pkg)}
|
|
>
|
|
Pilih Paket
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
} |