110 lines
4.9 KiB
TypeScript
110 lines
4.9 KiB
TypeScript
"use client";
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Check, ArrowRight } from 'lucide-react';
|
|
import Navbar from '@/components/Navbar';
|
|
import Footer from '@/components/Footer';
|
|
|
|
const PricingPageVersionTwo = () => {
|
|
return (
|
|
<div className="min-h-screen bg-[#FDFCF8] text-black selection:bg-red-600 selection:text-white pt-20">
|
|
<Navbar />
|
|
|
|
<main className="max-w-6xl mx-auto px-4 py-8 text-center relative overflow-hidden">
|
|
{/* Decorative Background Text "PRICING" */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-16 select-none pointer-events-none opacity-[0.03] text-[15vw] font-black whitespace-nowrap tracking-tighter uppercase italic">
|
|
PRICING
|
|
</div>
|
|
|
|
{/* Section Header */}
|
|
<div className="relative mb-10">
|
|
<div className="flex items-center justify-center gap-4 mb-6">
|
|
<div className="h-[2px] w-8 bg-brand-red"></div>
|
|
<span className="text-brand-red font-bold uppercase tracking-[0.2em] text-xs">Transparent Pricing</span>
|
|
<div className="h-[2px] w-8 bg-brand-red"></div>
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-7xl font-serif font-bold leading-[1.1] mb-4 tracking-tight">
|
|
Simple Plans for<br />
|
|
<span className="text-brand-red italic underline decoration-brand-red/20 underline-offset-8">Every Restaurant</span>
|
|
</h1>
|
|
|
|
<p className="text-gray-500 text-base md:text-lg max-w-2xl mx-auto leading-relaxed font-medium">
|
|
Affordable, scalable restaurant management tools designed to grow with your business — whether you run one outlet or many.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pricing Card */}
|
|
<div className="max-w-md mx-auto mb-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="bg-white rounded-[32px] p-6 md:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100 text-left relative"
|
|
>
|
|
<div className="mb-8">
|
|
<span className="text-brand-red font-bold uppercase tracking-widest text-xs mb-3 block">Starter</span>
|
|
<h2 className="text-3xl font-serif font-bold mb-2">Single Outlet</h2>
|
|
<p className="text-gray-500 text-sm leading-relaxed max-w-[260px]">
|
|
Perfect for independent restaurants getting started with smart POS.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full h-px bg-gray-100 mb-8"></div>
|
|
|
|
<div className="mb-8">
|
|
<span className="text-gray-400 font-bold uppercase tracking-[0.15em] text-[10px] mb-3 block">Starting at</span>
|
|
<div className="flex items-start">
|
|
<span className="text-2xl font-serif font-bold mt-1">$</span>
|
|
<span className="text-6xl md:text-7xl font-serif font-black tracking-tighter leading-none">200</span>
|
|
</div>
|
|
<p className="text-gray-500 font-medium text-xs mt-3">
|
|
per month · flat fee
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-10">
|
|
{[
|
|
"Unlimited tablets — no extra charge",
|
|
"Unlimited staff accounts",
|
|
"Use your own hardware",
|
|
"Core POS & order management"
|
|
].map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-3">
|
|
<div className="bg-[#FFF1F1] p-1 rounded-full">
|
|
<Check size={12} className="text-brand-red stroke-[3]" />
|
|
</div>
|
|
<span className="text-gray-700 font-medium text-sm md:text-base">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button className="w-full bg-white border-2 border-black text-black font-bold py-5 rounded-full hover:bg-black hover:text-white transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
Get Started
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Feature List Bottom */}
|
|
<div className="max-w-4xl mx-auto flex flex-wrap justify-center items-center gap-x-8 gap-y-4">
|
|
{[
|
|
"No hardware costs",
|
|
"No per-tablet fees",
|
|
"No per-user charges",
|
|
"Cancel anytime"
|
|
].map((item, idx) => (
|
|
<div key={idx} className="flex items-center gap-3 group">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-brand-red group-hover:scale-125 transition-transform"></div>
|
|
<span className="text-gray-400 font-bold text-xs tracking-tight">{item}</span>
|
|
{idx < 3 && <div className="hidden lg:block w-px h-6 bg-gray-200 ml-4"></div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingPageVersionTwo;
|