139 lines
6.2 KiB
TypeScript
139 lines
6.2 KiB
TypeScript
"use client";
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { Check, X, ArrowRight } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
|
||
const ComparisonSection = () => {
|
||
const comparisonData = [
|
||
{
|
||
feature: "Hardware Cost",
|
||
dine360: "$0",
|
||
dine360Sub: "(Use your own)",
|
||
others: "$2,000 – $5,000",
|
||
othersSub: ""
|
||
},
|
||
{
|
||
feature: "Monthly License",
|
||
dine360: "1 Flat Fee",
|
||
dine360Sub: "",
|
||
others: "$150+ / mo",
|
||
othersSub: ""
|
||
},
|
||
{
|
||
feature: "Extra Tablet Fee",
|
||
dine360: "$0",
|
||
dine360Sub: "",
|
||
others: "$50 / mo per tablet",
|
||
othersSub: ""
|
||
},
|
||
{
|
||
feature: "Employee Fee",
|
||
dine360: "$0",
|
||
dine360Sub: "",
|
||
others: "$20 / mo per user",
|
||
othersSub: ""
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section id="comparison" className="py-12 md:py-16 bg-[#F8F9FA] overflow-hidden">
|
||
<div className="max-w-5xl mx-auto px-4">
|
||
{/* Header */}
|
||
<div className="mb-10">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<div className="h-0.5 w-6 bg-brand-red"></div>
|
||
<span className="text-brand-red font-bold uppercase tracking-widest text-xs">Dine 360 vs. Legacy POS</span>
|
||
</div>
|
||
<h2 className="text-3xl md:text-5xl font-bold text-black mb-4 leading-tight">
|
||
Why <span className="text-brand-red italic">Dine 360</span> wins<br className="hidden sm:block" />
|
||
every single time.
|
||
</h2>
|
||
<p className="text-gray-600 text-base md:text-lg max-w-xl leading-relaxed">
|
||
No hidden fees. No hardware trap. Just one flat price that makes luxury POS vendors very uncomfortable.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Table Container */}
|
||
<div className="bg-[#1A1A1A] rounded-2xl md:rounded-[24px] overflow-hidden shadow-xl border border-white/5">
|
||
<div className="grid grid-cols-12 relative">
|
||
|
||
{/* Table Header */}
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-[#e2dede]">
|
||
<span className="text-gray-900 font-bold uppercase tracking-widest text-[10px] md:text-xs">Feature</span>
|
||
</div>
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-brand-red text-center">
|
||
<span className="text-white font-black uppercase tracking-widest text-[10px] md:text-sm">Dine 360</span>
|
||
</div>
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-[#1A1A1A] text-center border-l border-white/5">
|
||
<span className="text-gray-100 font-bold uppercase tracking-widest text-[10px] md:text-sm">Others</span>
|
||
</div>
|
||
|
||
{/* Comparison Rows */}
|
||
{comparisonData.map((item, index) => (
|
||
<React.Fragment key={index}>
|
||
{/* Feature Name */}
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-white border-b border-gray-100">
|
||
<span className="text-gray-800 font-bold text-sm md:text-base">{item.feature}</span>
|
||
</div>
|
||
|
||
{/* Dine 360 Value */}
|
||
<div className="col-span-4 p-4 md:p-6 flex flex-col items-center justify-center bg-[#FFF1F1] border-b border-brand-red/10 relative">
|
||
<div className="bg-brand-red text-white font-bold py-1.5 px-4 rounded-full shadow-md text-sm md:text-base">
|
||
{item.dine360}
|
||
</div>
|
||
{item.dine360Sub && (
|
||
<span className="text-brand-red font-semibold text-[10px] mt-1 uppercase tracking-tight hidden md:block">{item.dine360Sub}</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Others Value */}
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-white border-b border-gray-100 border-l border-gray-100 text-center">
|
||
<div className="bg-red-50 text-brand-red/70 font-bold py-1.5 px-4 rounded-full border border-brand-red/10 text-sm md:text-base">
|
||
{item.others}
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
))}
|
||
|
||
{/* Always Included Row */}
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-[#e2dede]">
|
||
<span className="text-gray-900 font-medium text-[10px] md:text-sm">Use your own hardware</span>
|
||
</div>
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-brand-red text-center">
|
||
<div className="flex items-center gap-2 text-white font-bold">
|
||
<Check size={18} className="stroke-[3]" />
|
||
<span className="uppercase text-[10px] md:text-xs hidden sm:inline">Always included</span>
|
||
</div>
|
||
</div>
|
||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-[#1A1A1A] text-center border-l border-white/5">
|
||
<div className="flex items-center gap-2 text-gray-100 font-bold">
|
||
<X size={18} className="stroke-[3]" />
|
||
<span className="uppercase text-[10px] md:text-xs hidden sm:inline">Not available</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer Text & CTA */}
|
||
<div className="mt-8 flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<p className="text-gray-600 text-base font-medium">
|
||
<span className="font-bold text-black uppercase">Stop overpaying.</span> Switch to Dine 360 and <br className="hidden md:block" />
|
||
keep every dollar where it belongs.
|
||
</p>
|
||
<Link
|
||
href="/temppricing"
|
||
className="group relative inline-flex items-center gap-3 bg-brand-red text-white font-bold py-4 px-8 rounded-xl hover:bg-brand-red/90 transition-all shadow-lg overflow-hidden"
|
||
>
|
||
<span className="relative z-10">Get Started Free</span>
|
||
<ArrowRight size={20} className="relative z-10 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
|
||
};
|
||
|
||
export default ComparisonSection;
|