Initial commit
This commit is contained in:
srikanth_M
parent
bfebfe803f
commit
e6990ad7d2
@ -52,7 +52,7 @@ const ContactPage = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your first name"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
@ -60,7 +60,7 @@ const ContactPage = () => {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your last name"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,7 +70,7 @@ const ContactPage = () => {
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email address"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -79,7 +79,7 @@ const ContactPage = () => {
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Tell us how we can help you..."
|
||||
className="w-full bg-black text-white placeholder:text-zinc-500 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium resize-none"
|
||||
className="w-full bg-black text-white placeholder:text-zinc-100 border border-zinc-800 rounded-xl px-4 py-4 focus:outline-none focus:border-red-600 transition-colors font-medium resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Box, Zap, Clock, Target, Store, ShoppingBag, Utensils, Layout, AreaChart } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555507036-ab1f4038808a?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1517433670267-08bbd4be890f?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Asset Imports
|
||||
import BakeryLeft from '@/assets/restaurant/types/bakery/left.webp'
|
||||
import BakeryCentre from '@/assets/restaurant/types/bakery/centre.webp'
|
||||
import BakeryRight from '@/assets/restaurant/types/bakery/right.webp'
|
||||
import Bakery1 from '@/assets/restaurant/types/bakery/1.webp'
|
||||
import Bakery2 from '@/assets/restaurant/types/bakery/2.webp'
|
||||
import Bakery3 from '@/assets/restaurant/types/bakery/3.webp'
|
||||
import Bakery4 from '@/assets/restaurant/types/bakery/4.webp'
|
||||
import BakeryPOS from '@/assets/restaurant/types/bakery/pos.webp'
|
||||
import BakeryOrder from '@/assets/restaurant/types/bakery/order-management.webp'
|
||||
import BakeryTable from '@/assets/restaurant/types/bakery/table-reservation.webp'
|
||||
import BakeryQR from '@/assets/restaurant/types/bakery/qr-menu.webp'
|
||||
import BakeryMulti from '@/assets/restaurant/types/bakery/multi-location.webp'
|
||||
|
||||
const JOURNEY_IMAGES = [Bakery1, Bakery2, Bakery3, Bakery4]
|
||||
|
||||
const BakeryPage = () => {
|
||||
return (
|
||||
@ -95,8 +103,8 @@ const BakeryPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Bakery Counter" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={BakeryLeft} alt="Bakery Counter" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">85% Faster</p>
|
||||
@ -110,8 +118,8 @@ const BakeryPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Custom Cakes" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={BakeryCentre} alt="Custom Cakes" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Accuracy</p>
|
||||
<p className="text-white font-bold text-2xl">-30% Errors</p>
|
||||
@ -125,8 +133,8 @@ const BakeryPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[4]} alt="Inventory Control" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={BakeryRight} alt="Inventory Control" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Real-time</p>
|
||||
<p className="text-white font-bold text-2xl">100% Control</p>
|
||||
@ -215,12 +223,12 @@ const BakeryPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Order Tracking" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Order Tracking" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Box className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Easy Order Tracking</h3>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Easy Order Tracking</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Track walk-in, pre-orders, and custom cake requests from one view.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -229,12 +237,12 @@ const BakeryPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Production Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Production Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Organized Production Workflow</h3>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Organized Production Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Manage baking schedules and order priorities effortlessly.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -243,13 +251,13 @@ const BakeryPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Counter Service" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Counter Service" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Faster Service at Counter</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce waiting time with quick billing and instant transaction processing.</p>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Faster Service at Counter</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium text-nowrap">Reduce waiting time with quick billing and instant transaction processing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -257,12 +265,12 @@ const BakeryPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Delivery" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Delivery" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Accurate Billing & Delivery</h3>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3 text-nowrap">Accurate Billing & Delivery</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure every bakery order is delivered correctly and billed accurately.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -315,7 +323,7 @@ const BakeryPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Bakery POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={BakeryPOS} alt="Bakery POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,7 +339,7 @@ const BakeryPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={BakeryOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -414,7 +422,7 @@ const BakeryPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Bakery Flow" fill className="object-cover rounded-2xl" />
|
||||
<Image src={BakeryTable} alt="Bakery Flow" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -430,7 +438,7 @@ const BakeryPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={BakeryQR} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -509,28 +517,8 @@ const BakeryPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full hidden lg:block">
|
||||
<Image src={BakeryMulti} alt="Multi Branch Management" fill className="object-cover opacity-40 mix-blend-overlay" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-red-600/20 rounded-full blur-[100px]" />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
className="aspect-square bg-white rounded-3xl p-6 shadow-xl relative overflow-hidden"
|
||||
>
|
||||
<Store className="w-8 h-8 text-red-600 mb-4" />
|
||||
<p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Total Branches</p>
|
||||
<p className="text-zinc-900 text-3xl font-bold">12 Outlets</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="aspect-square bg-zinc-800 rounded-3xl p-6 shadow-xl relative mt-8"
|
||||
>
|
||||
<AreaChart className="w-8 h-8 text-red-500 mb-4" />
|
||||
<p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Growth rate</p>
|
||||
<p className="text-white text-3xl font-bold">+28%</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Layout, Sparkles } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1550966841-3ee5ad0110c3?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Local Assets
|
||||
import LeftImg from '@/assets/restaurant/types/bistro/left.webp';
|
||||
import CenterImg from '@/assets/restaurant/types/bistro/center.avif';
|
||||
import RightImg from '@/assets/restaurant/types/bistro/right.avif';
|
||||
import Step1Img from '@/assets/restaurant/types/bistro/1.avif';
|
||||
import Step2Img from '@/assets/restaurant/types/bistro/2.avif';
|
||||
import Step3Img from '@/assets/restaurant/types/bistro/3.webp';
|
||||
import Step4Img from '@/assets/restaurant/types/bistro/4.avif';
|
||||
import PosImg from '@/assets/restaurant/types/bistro/pos.webp';
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/bistro/order-management.webp';
|
||||
import TableMgmtImg from '@/assets/restaurant/types/bistro/table-reservation.webp';
|
||||
import QrMenuImg from '@/assets/restaurant/types/bistro/qr-menu.webp';
|
||||
import MultiLocationImg from '@/assets/restaurant/types/bistro/multi-location.webp';
|
||||
|
||||
const BistroPage = () => {
|
||||
return (
|
||||
@ -95,7 +101,7 @@ const BistroPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Bistro Vibe" fill className="object-cover" />
|
||||
<Image src={LeftImg} alt="Bistro Vibe" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
@ -110,7 +116,7 @@ const BistroPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Cozy Dining" fill className="object-cover" />
|
||||
<Image src={CenterImg} alt="Cozy Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Table Turnover</p>
|
||||
@ -125,7 +131,7 @@ const BistroPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Delicious Food" fill className="object-cover" />
|
||||
<Image src={RightImg} alt="Delicious Food" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliability</p>
|
||||
@ -215,7 +221,7 @@ const BistroPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Seamless Order Taking" fill className="object-cover" />
|
||||
<Image src={Step1Img} alt="Seamless Order Taking" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +235,7 @@ const BistroPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Smooth Kitchen Coordination" fill className="object-cover" />
|
||||
<Image src={Step2Img} alt="Smooth Kitchen Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +249,7 @@ const BistroPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Enhanced Guest Experience" fill className="object-cover" />
|
||||
<Image src={Step3Img} alt="Enhanced Guest Experience" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +263,7 @@ const BistroPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Accurate Billing" fill className="object-cover" />
|
||||
<Image src={Step4Img} alt="Accurate Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +321,7 @@ const BistroPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Bistro POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="Bistro POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,7 +337,7 @@ const BistroPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -408,7 +414,7 @@ const BistroPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Seating" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableMgmtImg} alt="Table Seating" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -420,7 +426,7 @@ const BistroPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -498,7 +504,7 @@ const BistroPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Bistro Growth" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiLocationImg} alt="Bistro Growth" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,23 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Hero Assets
|
||||
import LeftImg from '@/assets/restaurant/types/buffet/left.webp'
|
||||
import CentreImg from '@/assets/restaurant/types/buffet/centre.webp'
|
||||
import RightImg from '@/assets/restaurant/types/buffet/right.webp'
|
||||
|
||||
// Journey Assets
|
||||
import Step1Img from '@/assets/restaurant/types/buffet/1.webp'
|
||||
import Step2Img from '@/assets/restaurant/types/buffet/2.webp'
|
||||
import Step3Img from '@/assets/restaurant/types/buffet/3.webp'
|
||||
import Step4Img from '@/assets/restaurant/types/buffet/4.webp'
|
||||
|
||||
// Feature Assets
|
||||
import PosImg from '@/assets/restaurant/types/buffet/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/buffet/order-management.webp'
|
||||
import TableMgmtImg from '@/assets/restaurant/types/buffet/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/buffet/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/buffet/multi-location.webp'
|
||||
|
||||
const BuffetPage = () => {
|
||||
return (
|
||||
@ -46,7 +56,7 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-[1px] w-6 bg-red-500" />
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
BUFFET RESTAURANT
|
||||
</div>
|
||||
|
||||
@ -85,8 +95,8 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +105,8 @@ const BuffetPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Buffet Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={LeftImg} alt="Buffet Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">90%</p>
|
||||
@ -110,8 +120,8 @@ const BuffetPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={CentreImg} alt="Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Table Turnover</p>
|
||||
<p className="text-white font-bold text-2xl">35%</p>
|
||||
@ -125,8 +135,8 @@ const BuffetPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={RightImg} alt="Dining Floor" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -139,7 +149,7 @@ const BuffetPage = () => {
|
||||
</main>
|
||||
|
||||
{/* Intro Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-4xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -147,9 +157,9 @@ const BuffetPage = () => {
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR BUFFET SERVICE</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
@ -186,7 +196,7 @@ const BuffetPage = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="bg-white p-8 rounded-[2.5rem] shadow-sm border border-zinc-100 text-center"
|
||||
className="bg-white p-8 rounded-4xl shadow-sm border border-zinc-100 text-center"
|
||||
>
|
||||
<p className="text-red-600 font-bold text-4xl mb-2">{stat.value}</p>
|
||||
<h4 className="text-zinc-900 font-bold text-lg mb-2">{stat.label}</h4>
|
||||
@ -211,11 +221,11 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Guest Check-In" fill className="object-cover" />
|
||||
<Image src={Step1Img} alt="Guest Check-In" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +235,11 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Dining Flow" fill className="object-cover" />
|
||||
<Image src={Step2Img} alt="Dining Flow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +249,11 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Waiting Lines" fill className="object-cover" />
|
||||
<Image src={Step3Img} alt="Waiting Lines" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +263,11 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={Step4Img} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -270,11 +280,11 @@ const BuffetPage = () => {
|
||||
</section>
|
||||
|
||||
{/* POS Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[2.5rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex flex-col gap-6 order-2 lg:order-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
|
||||
@ -294,7 +304,7 @@ const BuffetPage = () => {
|
||||
"Track daily sales instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +318,14 @@ const BuffetPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,19 +334,19 @@ const BuffetPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
@ -354,7 +364,7 @@ const BuffetPage = () => {
|
||||
"Monitor preparation status"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -371,12 +381,12 @@ const BuffetPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
|
||||
@ -406,9 +416,9 @@ const BuffetPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,15 +427,15 @@ const BuffetPage = () => {
|
||||
{/* QR Code Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR MENU</span>
|
||||
@ -443,7 +453,7 @@ const BuffetPage = () => {
|
||||
"Highlight buffet options and add-ons"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -460,11 +470,11 @@ const BuffetPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI LOCATION RESTAURANTS</span>
|
||||
@ -482,7 +492,7 @@ const BuffetPage = () => {
|
||||
"Compare branch performance"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -495,10 +505,10 @@ const BuffetPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={MultiBranchImg} alt="Multi-Branch Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,13 +8,34 @@ import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Coffee, Menu, AreaChart, RefreshCw } from 'lucide-react'
|
||||
import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Coffee, Menu, AreaChart, RefreshCw, Quote, Star } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import CafeLeft from '@/assets/restaurant/types/cafe/left.webp'
|
||||
import CafeCentre from '@/assets/restaurant/types/cafe/centre.webp'
|
||||
import CafeRight from '@/assets/restaurant/types/cafe/right.webp'
|
||||
import Cafe1 from '@/assets/restaurant/types/cafe/1.webp'
|
||||
import Cafe2 from '@/assets/restaurant/types/cafe/2.webp'
|
||||
import Cafe3 from '@/assets/restaurant/types/cafe/3.webp'
|
||||
import Cafe4 from '@/assets/restaurant/types/cafe/4.webp'
|
||||
import POSImg from '@/assets/restaurant/types/cafe/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/cafe/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/cafe/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/cafe/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/cafe/multi-location.webp'
|
||||
import TestimonialImg from '@/assets/restaurant/types/cafe/testimonial.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
CafeLeft,
|
||||
CafeCentre,
|
||||
CafeRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Cafe1,
|
||||
Cafe2,
|
||||
Cafe3,
|
||||
Cafe4,
|
||||
]
|
||||
|
||||
const CafeBistroPage = () => {
|
||||
@ -94,7 +115,7 @@ const CafeBistroPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Café Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Café Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
|
||||
@ -109,7 +130,7 @@ const CafeBistroPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Ordering" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Ordering" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
|
||||
@ -124,7 +145,7 @@ const CafeBistroPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Kitchen" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -214,7 +235,7 @@ const CafeBistroPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Quick Order" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Quick Order" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -228,7 +249,7 @@ const CafeBistroPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Coffee Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Coffee Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -242,7 +263,7 @@ const CafeBistroPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Customer Turnover" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Customer Turnover" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -256,7 +277,7 @@ const CafeBistroPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +336,7 @@ const CafeBistroPage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -332,7 +353,7 @@ const CafeBistroPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -409,7 +430,7 @@ const CafeBistroPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -421,7 +442,7 @@ const CafeBistroPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QRMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -499,15 +520,15 @@ const CafeBistroPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
|
||||
@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800",
|
||||
"https://images.unsplash.com/photo-1576402187878-974f70c890a5?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Local Assets
|
||||
import LeftImg from '@/assets/restaurant/types/cafeteria/left.webp'
|
||||
import CenterImg from '@/assets/restaurant/types/cafeteria/center.avif'
|
||||
import RightImg from '@/assets/restaurant/types/cafeteria/right.avif'
|
||||
import Step1Img from '@/assets/restaurant/types/cafeteria/1.avif'
|
||||
import Step2Img from '@/assets/restaurant/types/cafeteria/2.avif'
|
||||
import Step3Img from '@/assets/restaurant/types/cafeteria/3.webp'
|
||||
import Step4Img from '@/assets/restaurant/types/cafeteria/4.avif'
|
||||
import PosImg from '@/assets/restaurant/types/cafeteria/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/cafeteria/order-management.webp'
|
||||
import TableMgmtImg from '@/assets/restaurant/types/cafeteria/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/cafeteria/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/cafeteria/multi-location.webp'
|
||||
|
||||
const CafeteriaPage = () => {
|
||||
return (
|
||||
@ -85,8 +91,8 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +101,8 @@ const CafeteriaPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Cafeteria View" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={LeftImg} alt="Cafeteria View" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">+90%</p>
|
||||
@ -110,8 +116,8 @@ const CafeteriaPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Service Station" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={CenterImg} alt="Service Station" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Queue</p>
|
||||
<p className="text-white font-bold text-2xl">-40%</p>
|
||||
@ -125,8 +131,8 @@ const CafeteriaPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Dining Hall" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={RightImg} alt="Dining Hall" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -136,6 +142,8 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
{/* Intro Section */}
|
||||
@ -212,10 +220,10 @@ const CafeteriaPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Processing" fill className="object-cover" />
|
||||
<Image src={Step1Img} alt="Order Processing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +233,11 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
<Image src={Step2Img} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +247,11 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Queue Management" fill className="object-cover" />
|
||||
<Image src={Step3Img} alt="Queue Management" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +261,11 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={Step4Img} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -294,7 +302,7 @@ const CafeteriaPage = () => {
|
||||
"Real-time sales tracking across all stations"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +316,14 @@ const CafeteriaPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,14 +332,14 @@ const CafeteriaPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -354,7 +362,7 @@ const CafeteriaPage = () => {
|
||||
"Manage dine-in and takeaway orders seamlessly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -372,7 +380,7 @@ const CafeteriaPage = () => {
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
@ -406,9 +414,9 @@ const CafeteriaPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,10 +425,10 @@ const CafeteriaPage = () => {
|
||||
{/* QR Code Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -443,7 +451,7 @@ const CafeteriaPage = () => {
|
||||
"Highlight daily specials and offers"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -482,7 +490,7 @@ const CafeteriaPage = () => {
|
||||
"Track performance of each location instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -495,10 +503,10 @@ const CafeteriaPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import CasualDiningLeft from '@/assets/restaurant/types/casual-dining/left.webp'
|
||||
import CasualDiningCentre from '@/assets/restaurant/types/casual-dining/centre.webp'
|
||||
import CasualDiningRight from '@/assets/restaurant/types/casual-dining/right.webp'
|
||||
import CasualDining1 from '@/assets/restaurant/types/casual-dining/1.webp'
|
||||
import CasualDining2 from '@/assets/restaurant/types/casual-dining/2.webp'
|
||||
import CasualDining3 from '@/assets/restaurant/types/casual-dining/3.webp'
|
||||
import CasualDining4 from '@/assets/restaurant/types/casual-dining/4.webp'
|
||||
import POSImg from '@/assets/restaurant/types/casual-dining/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/casual-dining/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/casual-dining/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/casual-dining/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/casual-dining/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
CasualDiningLeft,
|
||||
CasualDiningCentre,
|
||||
CasualDiningRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
CasualDining1,
|
||||
CasualDining2,
|
||||
CasualDining3,
|
||||
CasualDining4,
|
||||
]
|
||||
|
||||
const CasualDiningPage = () => {
|
||||
@ -95,7 +114,7 @@ const CasualDiningPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Casual Dining" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Casual Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
@ -110,7 +129,7 @@ const CasualDiningPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Revenue</p>
|
||||
@ -125,7 +144,7 @@ const CasualDiningPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -211,11 +230,11 @@ const CasualDiningPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +248,7 @@ const CasualDiningPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Syncing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Syncing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +262,7 @@ const CasualDiningPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Queue" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Queue" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +276,7 @@ const CasualDiningPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Delivery" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Delivery" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +334,7 @@ const CasualDiningPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,7 +350,7 @@ const CasualDiningPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -408,7 +427,7 @@ const CasualDiningPage = () => {
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={TableReservationImg} alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -420,7 +439,7 @@ const CasualDiningPage = () => {
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -498,7 +517,7 @@ const CasualDiningPage = () => {
|
||||
<div className="relative h-[420px]">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={MultiBranchImg} alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,35 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Coffee, Utensils, Users, Store } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1541167760496-162955ed8a9f?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import CoffeeHouseLeft from '@/assets/restaurant/types/coffee-house/left.webp'
|
||||
import CoffeeHouseCentre from '@/assets/restaurant/types/coffee-house/center.avif'
|
||||
import CoffeeHouseRight from '@/assets/restaurant/types/coffee-house/right.avif'
|
||||
import CoffeeHouse1 from '@/assets/restaurant/types/coffee-house/1.avif'
|
||||
import CoffeeHouse2 from '@/assets/restaurant/types/coffee-house/2.avif'
|
||||
import CoffeeHouse3 from '@/assets/restaurant/types/coffee-house/3.avif'
|
||||
import CoffeeHouse4 from '@/assets/restaurant/types/coffee-house/4.avif'
|
||||
import POSImg from '@/assets/restaurant/types/coffee-house/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/coffee-house/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/coffee-house/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/coffee-house/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/coffee-house/multi-location.webp'
|
||||
import Multi1 from '@/assets/restaurant/types/coffee-house/multi 1.webp'
|
||||
import Multi2 from '@/assets/restaurant/types/coffee-house/multi 2.avif'
|
||||
import Multi3 from '@/assets/restaurant/types/coffee-house/multi 3.avif'
|
||||
import Multi4 from '@/assets/restaurant/types/coffee-house/multi 4.avif'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
CoffeeHouseLeft,
|
||||
CoffeeHouseCentre,
|
||||
CoffeeHouseRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
CoffeeHouse1,
|
||||
CoffeeHouse2,
|
||||
CoffeeHouse3,
|
||||
CoffeeHouse4,
|
||||
]
|
||||
|
||||
const CoffeeHousePage = () => {
|
||||
@ -90,7 +113,7 @@ const CoffeeHousePage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Coffee House" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Coffee House" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Order Delivery</p>
|
||||
@ -105,7 +128,7 @@ const CoffeeHousePage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Coffee Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Coffee Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
|
||||
@ -120,7 +143,7 @@ const CoffeeHousePage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Coffee Counter" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Coffee Counter" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -208,11 +231,11 @@ const CoffeeHousePage = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Quick Coffee Orders" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Quick Coffee Orders" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -226,7 +249,7 @@ const CoffeeHousePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Efficient Preparation" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Efficient Preparation" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -240,7 +263,7 @@ const CoffeeHousePage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Reduced Wait Time" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Reduced Wait Time" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -254,7 +277,7 @@ const CoffeeHousePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Accurate Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -306,7 +329,7 @@ const CoffeeHousePage = () => {
|
||||
</div>
|
||||
<div className="order-1 lg:order-2">
|
||||
<div className="relative h-[400px] w-full rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white">
|
||||
<Image src={CARD_IMAGES[0]} alt="POS System" fill className="object-cover" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -318,7 +341,7 @@ const CoffeeHousePage = () => {
|
||||
<div className="relative h-[400px] w-full">
|
||||
<div className="absolute inset-0 bg-red-50 rounded-[2.5rem] rotate-3" />
|
||||
<div className="relative h-full w-full rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white">
|
||||
<Image src={CARD_IMAGES[1]} alt="Order Management" fill className="object-cover" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -393,8 +416,8 @@ const CoffeeHousePage = () => {
|
||||
</div>
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute w-[120%] h-[120%] bg-red-600/20 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-[450px] w-full max-w-sm rounded-[3rem] overflow-hidden border-8 border-zinc-800 shadow-2xl">
|
||||
<Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover" />
|
||||
<div className="relative h-[450px] w-full max-sm:max-w-xs max-w-sm rounded-[3rem] overflow-hidden border-8 border-zinc-800 shadow-2xl">
|
||||
<Image src={TableReservationImg} alt="Table Management" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -412,8 +435,8 @@ const CoffeeHousePage = () => {
|
||||
>
|
||||
<div className="w-full h-full bg-white rounded-[2.5rem] p-4 flex flex-col items-center">
|
||||
<div className="w-12 h-1 bg-zinc-200 rounded-full mb-8 mt-2" />
|
||||
<div className="w-full aspect-square bg-zinc-50 rounded-2xl flex items-center justify-center mb-6">
|
||||
<Smartphone className="w-12 h-12 text-red-600" />
|
||||
<div className="w-full aspect-square bg-zinc-50 rounded-2xl flex items-center justify-center mb-6 overflow-hidden relative">
|
||||
<Image src={QRMenuImg} alt="QR Menu" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="w-full space-y-3">
|
||||
<div className="h-4 bg-zinc-100 rounded-full w-3/4 mx-auto" />
|
||||
@ -493,16 +516,16 @@ const CoffeeHousePage = () => {
|
||||
</div>
|
||||
<div className="relative grid grid-cols-2 gap-4">
|
||||
<div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white translate-y-8">
|
||||
<Image src={CARD_IMAGES[3]} alt="Branch 1" fill className="object-cover" />
|
||||
<Image src={Multi1} alt="Branch 1" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white">
|
||||
<Image src={CARD_IMAGES[4]} alt="Branch 2" fill className="object-cover" />
|
||||
<Image src={Multi2} alt="Branch 2" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white translate-y-8">
|
||||
<Image src={CARD_IMAGES[0]} alt="Branch 3" fill className="object-cover" />
|
||||
<Image src={Multi3} alt="Branch 3" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="relative h-64 w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white">
|
||||
<Image src={CARD_IMAGES[1]} alt="Branch 4" fill className="object-cover" />
|
||||
<Image src={Multi4} alt="Branch 4" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,15 +8,21 @@ import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, Clock, Target, Smartphone, RefreshCw } from 'lucide-react'
|
||||
import { Check, Zap, Clock, Target, Smartphone, RefreshCw, Box, ChevronRight } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1576402187878-974f70c890a5?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Local Assets
|
||||
import LeftImg from '@/assets/restaurant/types/concession-stand/left.webp'
|
||||
import CenterImg from '@/assets/restaurant/types/concession-stand/centre.webp'
|
||||
import RightImg from '@/assets/restaurant/types/concession-stand/right.webp'
|
||||
import PosImg from '@/assets/restaurant/types/concession-stand/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/concession-stand/order-management.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/concession-stand/multi-location.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/concession-stand/qr-menu.webp'
|
||||
import ServiceMgmtImg from '@/assets/restaurant/types/concession-stand/SERVICE MANAGEMENT.webp'
|
||||
import Img1 from '@/assets/restaurant/types/concession-stand/1.webp'
|
||||
import Img2 from '@/assets/restaurant/types/concession-stand/2.webp'
|
||||
import Img3 from '@/assets/restaurant/types/concession-stand/3.webp'
|
||||
import Img4 from '@/assets/restaurant/types/concession-stand/4.webp'
|
||||
|
||||
const ConcessionPage = () => {
|
||||
return (
|
||||
@ -66,19 +72,26 @@ const ConcessionPage = () => {
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
|
||||
<Image src={CARD_IMAGES[0]} alt="Concession Service" fill className="object-cover" />
|
||||
<Image src={LeftImg} alt="Concession Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Crowd Speed</p>
|
||||
<p className="text-white font-bold text-2xl">95% Faster</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
|
||||
<Image src={CARD_IMAGES[1]} alt="Snack Billing" fill className="object-cover" />
|
||||
<Image src={CenterImg} alt="Snack Billing" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Queue Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">40% Less</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
|
||||
<Image src={RightImg} alt="Queue Management" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Rapid Flow</p>
|
||||
<p className="text-white font-bold text-2xl">100% Reliable</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,10 +146,10 @@ const ConcessionPage = () => {
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Step 1 */}
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Rapid Order" fill className="object-cover" />
|
||||
<Image src={Img1} alt="Rapid Order" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -148,10 +161,10 @@ const ConcessionPage = () => {
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Smooth Service" fill className="object-cover" />
|
||||
<Image src={Img2} alt="Smooth Service" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -163,10 +176,10 @@ const ConcessionPage = () => {
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Short Lines" fill className="object-cover" />
|
||||
<Image src={Img3} alt="Short Lines" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -178,10 +191,10 @@ const ConcessionPage = () => {
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
|
||||
<Image src={Img4} alt="Accurate Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -232,7 +245,7 @@ const ConcessionPage = () => {
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -244,7 +257,7 @@ const ConcessionPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -321,7 +334,7 @@ const ConcessionPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[2]} alt="Service Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={ServiceMgmtImg} alt="Service Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -333,7 +346,7 @@ const ConcessionPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -411,7 +424,7 @@ const ConcessionPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,22 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Layout, Sparkles } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1550961102-149b16afb386?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Local Assets
|
||||
import LeftImg from '@/assets/restaurant/types/contemporary/left.avif'
|
||||
import CenterImg from '@/assets/restaurant/types/contemporary/center.avif'
|
||||
import RightImg from '@/assets/restaurant/types/contemporary/right.webp'
|
||||
import Step1Img from '@/assets/restaurant/types/contemporary/1.avif'
|
||||
import Step2Img from '@/assets/restaurant/types/contemporary/2.avif'
|
||||
import Step3Img from '@/assets/restaurant/types/contemporary/3.avif'
|
||||
import Step4Img from '@/assets/restaurant/types/contemporary/4.avif'
|
||||
import PosImg from '@/assets/restaurant/types/contemporary/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/contemporary/order-management.webp'
|
||||
import TableMgmtImg from '@/assets/restaurant/types/contemporary/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/contemporary/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/contemporary/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [LeftImg, CenterImg, RightImg]
|
||||
const JOURNEY_IMAGES = [Step1Img, Step2Img, Step3Img, Step4Img]
|
||||
|
||||
const ContemporaryCasualPage = () => {
|
||||
return (
|
||||
@ -85,8 +94,8 @@ const ContemporaryCasualPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +104,8 @@ const ContemporaryCasualPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Dining Experience" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[0]} alt="Dining Experience" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">85%</p>
|
||||
@ -110,8 +119,8 @@ const ContemporaryCasualPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Modern Table" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[1]} alt="Modern Table" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service</p>
|
||||
<p className="text-white font-bold text-2xl">35%</p>
|
||||
@ -125,8 +134,8 @@ const ContemporaryCasualPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Signature Dish" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[2]} alt="Signature Dish" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliability</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -212,10 +221,10 @@ const ContemporaryCasualPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Order Handling" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +234,11 @@ const ContemporaryCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +248,11 @@ const ContemporaryCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Guest Experience" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Guest Experience" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +262,11 @@ const ContemporaryCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -294,7 +303,7 @@ const ContemporaryCasualPage = () => {
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +317,14 @@ const ContemporaryCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,14 +333,14 @@ const ContemporaryCasualPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -354,7 +363,7 @@ const ContemporaryCasualPage = () => {
|
||||
"Monitor preparation time"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -372,7 +381,7 @@ const ContemporaryCasualPage = () => {
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
@ -406,9 +415,9 @@ const ContemporaryCasualPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,10 +426,10 @@ const ContemporaryCasualPage = () => {
|
||||
{/* QR Code Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -443,7 +452,7 @@ const ContemporaryCasualPage = () => {
|
||||
"Instant menu updates"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -482,7 +491,7 @@ const ContemporaryCasualPage = () => {
|
||||
"Track sales and analytics"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -495,10 +504,10 @@ const ContemporaryCasualPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi Location" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,15 +8,23 @@ import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Truck } from 'lucide-react'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Truck, ChevronRight } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=800",
|
||||
"https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&q=80&w=800",
|
||||
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&q=80&w=800",
|
||||
"https://images.unsplash.com/photo-1616733148217-1bb14305490e?auto=format&fit=crop&q=80&w=800",
|
||||
]
|
||||
// Local Assets
|
||||
import LeftImg from '@/assets/restaurant/types/delivery-only/left.webp'
|
||||
import CenterImg from '@/assets/restaurant/types/delivery-only/centre.webp'
|
||||
import RightImg from '@/assets/restaurant/types/delivery-only/right.webp'
|
||||
import PosImg from '@/assets/restaurant/types/delivery-only/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/delivery-only/order-management.webp'
|
||||
import DeliveryMgmtImg from '@/assets/restaurant/types/delivery-only/delivery-management.webp'
|
||||
import DigitalMenuImg from '@/assets/restaurant/types/delivery-only/digital-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/delivery-only/multi-location.webp'
|
||||
import UberIntegrationImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
|
||||
import RestaurantImg from '@/assets/restaurant/types/food-truck/testimonial.webp'
|
||||
import Img1 from '@/assets/restaurant/types/delivery-only/1.webp'
|
||||
import Img2 from '@/assets/restaurant/types/delivery-only/2.webp'
|
||||
import Img3 from '@/assets/restaurant/types/delivery-only/3.webp'
|
||||
import Img4 from '@/assets/restaurant/types/delivery-only/4.webp'
|
||||
|
||||
const DeliveryOnlyPage = () => {
|
||||
return (
|
||||
@ -24,7 +32,7 @@ const DeliveryOnlyPage = () => {
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
|
||||
<section className="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
|
||||
<div className="grid lg:grid-cols-2 gap-10 items-center">
|
||||
|
||||
{/* Left Content */}
|
||||
@ -46,7 +54,7 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-[1px] w-6 bg-red-500" />
|
||||
<div className="h-0.5 w-6 bg-red-500" />
|
||||
DELIVERY-ONLY OPERATIONS
|
||||
</div>
|
||||
|
||||
@ -85,8 +93,8 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +103,8 @@ const DeliveryOnlyPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={LeftImg} alt="Delivery Hub" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">3X Faster</p>
|
||||
@ -110,8 +118,8 @@ const DeliveryOnlyPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={CenterImg} alt="Kitchen Operations" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Operational</p>
|
||||
<p className="text-white font-bold text-2xl">+40%</p>
|
||||
@ -125,8 +133,8 @@ const DeliveryOnlyPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={RightImg} alt="Cloud System" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliable</p>
|
||||
<p className="text-white font-bold text-2xl">100% Cloud</p>
|
||||
@ -136,10 +144,10 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-6xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -147,9 +155,9 @@ const DeliveryOnlyPage = () => {
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-0.5 w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR DELIVERY-FIRST BRANDS</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-0.5 w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
@ -186,7 +194,7 @@ const DeliveryOnlyPage = () => {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="bg-white p-8 rounded-[2.5rem] shadow-sm border border-zinc-100 text-center"
|
||||
className="bg-white p-8 rounded-4xl shadow-sm border border-zinc-100 text-center"
|
||||
>
|
||||
<p className="text-red-600 font-bold text-4xl mb-2">{stat.value}</p>
|
||||
<h4 className="text-zinc-900 font-bold text-lg mb-2">{stat.label}</h4>
|
||||
@ -212,10 +220,10 @@ const DeliveryOnlyPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={Img1} alt="Centralized Orders" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +233,11 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={Img2} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +247,11 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Fulfillment" fill className="object-cover" />
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={Img3} alt="Order Fulfillment" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +261,11 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Order Handling" fill className="object-cover" />
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={Img4} alt="Order Handling" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -274,7 +282,7 @@ const DeliveryOnlyPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex flex-col gap-6 order-2 lg:order-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
|
||||
@ -294,7 +302,7 @@ const DeliveryOnlyPage = () => {
|
||||
"Secure digital payments"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,7 +316,7 @@ const DeliveryOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
@ -316,7 +324,7 @@ const DeliveryOnlyPage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -326,19 +334,19 @@ const DeliveryOnlyPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
@ -356,7 +364,7 @@ const DeliveryOnlyPage = () => {
|
||||
"Reduce order mistakes"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -373,12 +381,12 @@ const DeliveryOnlyPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Delivery Flow Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-6xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">DELIVERY MANAGEMENT</span>
|
||||
@ -408,9 +416,9 @@ const DeliveryOnlyPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[1]} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={DeliveryMgmtImg} alt="Delivery Flow" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -419,15 +427,15 @@ const DeliveryOnlyPage = () => {
|
||||
{/* Menu Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[3]} alt="Menu Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={DigitalMenuImg} alt="Menu Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">DIGITAL MENU</span>
|
||||
@ -445,7 +453,7 @@ const DeliveryOnlyPage = () => {
|
||||
"Highlight combos and offers"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -462,11 +470,11 @@ const DeliveryOnlyPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Multi-Brand Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-6xl">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI BRAND OPERATIONS</span>
|
||||
@ -484,7 +492,7 @@ const DeliveryOnlyPage = () => {
|
||||
"Monitor revenue and analytics"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -497,15 +505,89 @@ const DeliveryOnlyPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Brand Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={MultiLocationImg} alt="Multi-Brand Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Integration Section
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={UberIntegrationImg} alt="Integrations" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs font-dm-sans">INTEGRATIONS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Seamlessly Connect with Delivery Apps
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Dine360 integrates with major delivery platforms, ensuring all orders flow directly into your POS.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 pt-4">
|
||||
{[
|
||||
"Uber Eats", "Zomato", "Swiggy",
|
||||
"Talabat", "Deliveroo", "Careem"
|
||||
].map((platform, i) => (
|
||||
<div key={i} className="bg-white border border-zinc-100 p-4 rounded-xl flex items-center justify-center text-zinc-400 font-bold text-sm hover:border-red-500/20 hover:text-red-500 transition-all cursor-default shadow-sm shadow-zinc-200/50">
|
||||
{platform}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* Highlights Section */}
|
||||
{/* <section className="py-24 bg-zinc-900 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-red-500/20 to-transparent" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Built for High-Growth Delivery Brands</h2>
|
||||
<p className="text-zinc-400 text-lg">Scale your operations and maximize your revenue with features designed for delivery efficiency.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "Scalable Infrastructure",
|
||||
desc: "Cloud-based system that grows with your brand across multiple locations.",
|
||||
icon: <ChevronRight className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "In-depth Analytics",
|
||||
desc: "Gain insights into customer behavior and order trends to optimize performance.",
|
||||
icon: <ChevronRight className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Centralized Management",
|
||||
desc: "Manage everything—from menus to staff—across all your virtual brands from one dashboard.",
|
||||
icon: <ChevronRight className="w-6 h-6" />
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-800/50 p-8 rounded-3xl border border-zinc-700/50 hover:border-red-500/30 transition-all group">
|
||||
<div className="w-12 h-12 rounded-2xl bg-red-500/10 flex items-center justify-center text-red-500 mb-6 group-hover:scale-110 transition-transform">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">{feature.title}</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">{feature.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
|
||||
@ -11,12 +11,31 @@ import FAQ from '@/components/FAQ'
|
||||
import { Check, MapPin, Star, Clock, Target, Utensils, Users, Globe } from 'lucide-react'
|
||||
import { Zap, RefreshCw } from "lucide-react";
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import DestinationLeft from '@/assets/restaurant/types/destination/left.avif'
|
||||
import DestinationCentre from '@/assets/restaurant/types/destination/center.avif'
|
||||
import DestinationRight from '@/assets/restaurant/types/destination/right.avif'
|
||||
import Destination1 from '@/assets/restaurant/types/destination/1.avif'
|
||||
import Destination2 from '@/assets/restaurant/types/destination/2.avif'
|
||||
import Destination3 from '@/assets/restaurant/types/destination/3.avif'
|
||||
import Destination4 from '@/assets/restaurant/types/destination/4.avif'
|
||||
import POSImg from '@/assets/restaurant/types/destination/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/destination/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/destination/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/destination/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/destination/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
DestinationLeft,
|
||||
DestinationCentre,
|
||||
DestinationRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Destination1,
|
||||
Destination2,
|
||||
Destination3,
|
||||
Destination4,
|
||||
]
|
||||
|
||||
const DestinationPage = () => {
|
||||
@ -96,7 +115,7 @@ const DestinationPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Destination Atmosphere" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Destination Atmosphere" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Guest Experience</p>
|
||||
@ -111,7 +130,7 @@ const DestinationPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Premium Dining" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Premium Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reservations</p>
|
||||
@ -126,7 +145,7 @@ const DestinationPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Exquisite Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Exquisite Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Scalability</p>
|
||||
@ -216,11 +235,11 @@ const DestinationPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Advanced Reservation" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Advanced Reservation" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 h-5" /></div>
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Zap className="w-5 s-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Advanced Reservation Management</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle bookings and guest flow efficiently.</p>
|
||||
</div>
|
||||
@ -230,11 +249,11 @@ const DestinationPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Seamless Order Coordination" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Seamless Order Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><RefreshCw className="w-5 h-5" /></div>
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><RefreshCw className="w-5 s-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Seamless Order Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure smooth communication between service staff and kitchen.</p>
|
||||
</div>
|
||||
@ -244,11 +263,11 @@ const DestinationPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Elevated Guest Experience" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Elevated Guest Experience" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 h-5" /></div>
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Clock className="w-5 s-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Elevated Guest Experience</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Deliver consistent, high-quality service without delays.</p>
|
||||
</div>
|
||||
@ -258,11 +277,11 @@ const DestinationPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Accurate Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 h-5" /></div>
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Target className="w-5 s-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Accurate Billing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Provide a smooth and professional checkout experience.</p>
|
||||
</div>
|
||||
@ -316,7 +335,7 @@ const DestinationPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Premium POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="Premium POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -332,7 +351,7 @@ const DestinationPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -409,7 +428,7 @@ const DestinationPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Selection" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableReservationImg} alt="Table Selection" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -421,7 +440,7 @@ const DestinationPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Premium QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QRMenuImg} alt="Premium QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -499,7 +518,7 @@ const DestinationPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Destination Scale" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiBranchImg} alt="Destination Scale" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, Clock, Target, Smartphone, RefreshCw } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1615892715664-d8480396000e?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1526367790999-0150786686a2?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Asset Imports
|
||||
import DigitalLeft from '@/assets/restaurant/types/digital/left.webp'
|
||||
import DigitalCentre from '@/assets/restaurant/types/digital/centre.webp'
|
||||
import DigitalRight from '@/assets/restaurant/types/digital/right.webp'
|
||||
import Digital1 from '@/assets/restaurant/types/digital/1.webp'
|
||||
import Digital2 from '@/assets/restaurant/types/digital/2.webp'
|
||||
import Digital3 from '@/assets/restaurant/types/digital/3.webp'
|
||||
import Digital4 from '@/assets/restaurant/types/digital/4.webp'
|
||||
import DigitalPOS from '@/assets/restaurant/types/digital/pos.webp'
|
||||
import DigitalOrder from '@/assets/restaurant/types/digital/order-management.webp'
|
||||
import DigitalTable from '@/assets/restaurant/types/digital/table-reservation.webp'
|
||||
import DigitalQR from '@/assets/restaurant/types/digital/qr-menu.webp'
|
||||
import DigitalMulti from '@/assets/restaurant/types/digital/multi-location.webp'
|
||||
|
||||
const JOURNEY_IMAGES = [Digital1, Digital2, Digital3, Digital4]
|
||||
|
||||
const DigitalOnlyPage = () => {
|
||||
return (
|
||||
@ -61,24 +69,46 @@ const DigitalOnlyPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
{/* Right Content - Images */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
|
||||
<Image src={CARD_IMAGES[0]} alt="Online Orders" fill className="object-cover" />
|
||||
<motion.div
|
||||
className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right"
|
||||
initial={{ opacity: 0, x: -50, rotate: -20 }}
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={DigitalLeft} alt="Online Orders" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Online Growth</p>
|
||||
<p className="text-white font-bold text-2xl">95% Increase</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
|
||||
<Image src={CARD_IMAGES[1]} alt="Digital Command" fill className="object-cover" />
|
||||
<motion.div
|
||||
className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20"
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={DigitalCentre} alt="Digital Command" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Response Time</p>
|
||||
<p className="text-white font-bold text-2xl">90% Faster</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left"
|
||||
initial={{ opacity: 0, x: 50, rotate: 20 }}
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={DigitalRight} alt="Delivery Peak" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-bold tracking-widest uppercase mb-0.5">Volume</p>
|
||||
<p className="text-white font-bold text-2xl">Peak Ready</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,11 +162,11 @@ const DigitalOnlyPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Step 1 */}
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Centralized Order" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Centralized Order" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -147,11 +177,11 @@ const DigitalOnlyPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Automated Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Automated Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -162,11 +192,11 @@ const DigitalOnlyPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Faster Fulfillment" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Faster Fulfillment" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -177,11 +207,11 @@ const DigitalOnlyPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -232,7 +262,7 @@ const DigitalOnlyPage = () => {
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[3]} alt="Digital POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={DigitalPOS} alt="Digital POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -244,7 +274,7 @@ const DigitalOnlyPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
|
||||
<Image src={CARD_IMAGES[1]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={DigitalOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -321,7 +351,7 @@ const DigitalOnlyPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[2]} alt="Delivery Operations" fill className="object-cover rounded-3xl" />
|
||||
<Image src={DigitalTable} alt="Delivery Operations" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -333,7 +363,7 @@ const DigitalOnlyPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[1]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={DigitalQR} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -411,7 +441,7 @@ const DigitalOnlyPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Brand Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={DigitalMulti} alt="Multi-Brand Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Store, Users } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1579546929518-9e396f3cc809?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1543353071-097072382f14?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1520699912061-0d3a54d5801c?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1502301103665-0b95cc738def?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1551024601-bec78aea704b?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import DinerLeft from '@/assets/restaurant/types/diner/left.webp'
|
||||
import DinerCentre from '@/assets/restaurant/types/diner/centre.webp'
|
||||
import DinerRight from '@/assets/restaurant/types/diner/right.webp'
|
||||
import Diner1 from '@/assets/restaurant/types/diner/1.webp'
|
||||
import Diner2 from '@/assets/restaurant/types/diner/2.webp'
|
||||
import Diner3 from '@/assets/restaurant/types/diner/3.webp'
|
||||
import Diner4 from '@/assets/restaurant/types/diner/4.webp'
|
||||
import PosImg from '@/assets/restaurant/types/diner/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/diner/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/diner/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/diner/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/diner/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
DinerLeft,
|
||||
DinerCentre,
|
||||
DinerRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Diner1,
|
||||
Diner2,
|
||||
Diner3,
|
||||
Diner4,
|
||||
]
|
||||
|
||||
const DinerPage = () => {
|
||||
@ -95,7 +114,7 @@ const DinerPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Diner Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Diner Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
@ -110,7 +129,7 @@ const DinerPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[4]} alt="Pancake Breakfast" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Pancake Breakfast" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Turnover</p>
|
||||
@ -125,7 +144,7 @@ const DinerPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Classic Diner Booth" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Classic Diner Booth" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -215,7 +234,7 @@ const DinerPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Quick Order Taking" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Quick Order Taking" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +248,7 @@ const DinerPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Kitchen Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +262,7 @@ const DinerPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Table Service" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Table Service" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +276,7 @@ const DinerPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Accurate Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Accurate Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -308,7 +327,7 @@ const DinerPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,7 +343,7 @@ const DinerPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -393,7 +412,7 @@ const DinerPage = () => {
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={TableReservationImg} alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -405,7 +424,7 @@ const DinerPage = () => {
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -475,7 +494,7 @@ const DinerPage = () => {
|
||||
<div className="relative h-[420px]">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi Branch" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={MultiLocationImg} alt="Multi Branch" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,33 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Users, Calendar, Menu, AreaChart } from 'lucide-react'
|
||||
|
||||
// Import local assets
|
||||
import HeroLeft from '@/assets/restaurant/types/family-style/left.webp'
|
||||
import HeroCenter from '@/assets/restaurant/types/family-style/centre.webp'
|
||||
import HeroRight from '@/assets/restaurant/types/family-style/right.webp'
|
||||
|
||||
import Journey1 from '@/assets/restaurant/types/family-style/1.webp'
|
||||
import Journey2 from '@/assets/restaurant/types/family-style/2.webp'
|
||||
import Journey3 from '@/assets/restaurant/types/family-style/3.webp'
|
||||
import Journey4 from '@/assets/restaurant/types/family-style/4.webp'
|
||||
|
||||
import PosImg from '@/assets/restaurant/types/family-style/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/family-style/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/family-style/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/family-style/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/family-style/multi-location.webp'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1543353071-873f17a7a088?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
HeroLeft,
|
||||
HeroCenter,
|
||||
HeroRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Journey1,
|
||||
Journey2,
|
||||
Journey3,
|
||||
Journey4,
|
||||
]
|
||||
|
||||
const FamilyStylePage = () => {
|
||||
@ -215,7 +236,7 @@ const FamilyStylePage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Group Order" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Group Order" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +250,7 @@ const FamilyStylePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Communication" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Communication" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +264,7 @@ const FamilyStylePage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Table Coord" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Table Coord" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +278,7 @@ const FamilyStylePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -316,7 +337,7 @@ const FamilyStylePage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -333,7 +354,7 @@ const FamilyStylePage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -410,7 +431,7 @@ const FamilyStylePage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[2]} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -422,7 +443,7 @@ const FamilyStylePage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[1]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QrMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -500,7 +521,7 @@ const FamilyStylePage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,24 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Import local hero and journey images
|
||||
import LeftImg from '@/assets/restaurant/types/fast-casual/left.webp'
|
||||
import CenterImg from '@/assets/restaurant/types/fast-casual/center.webp'
|
||||
import RightImg from '@/assets/restaurant/types/fast-casual/right.webp'
|
||||
|
||||
// Import local feature images
|
||||
import PosImg from '@/assets/restaurant/types/fast-casual/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/fast-casual/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/fast-casual/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/fast-casual/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/fast-casual/multi-location.webp'
|
||||
|
||||
// Import journey images
|
||||
import Img1 from '@/assets/restaurant/types/fast-casual/1.webp'
|
||||
import Img2 from '@/assets/restaurant/types/fast-casual/2.webp'
|
||||
import Img3 from '@/assets/restaurant/types/fast-casual/3.webp'
|
||||
import Img4 from '@/assets/restaurant/types/fast-casual/4.webp'
|
||||
|
||||
|
||||
const FastCasualPage = () => {
|
||||
return (
|
||||
@ -46,7 +57,7 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-[1px] w-6 bg-red-500" />
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
FAST CASUAL RESTAURANT
|
||||
</div>
|
||||
|
||||
@ -85,8 +96,8 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +106,8 @@ const FastCasualPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Fast Casual" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={LeftImg} alt="Fast Casual" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Processing</p>
|
||||
<p className="text-white font-bold text-2xl">90%</p>
|
||||
@ -110,8 +121,8 @@ const FastCasualPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[4]} alt="Quick Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={CenterImg} alt="Quick Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Growth</p>
|
||||
<p className="text-white font-bold text-2xl">30%</p>
|
||||
@ -125,8 +136,8 @@ const FastCasualPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Checkout" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={RightImg} alt="Checkout" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Payments</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -139,7 +150,7 @@ const FastCasualPage = () => {
|
||||
</main>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-4xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -147,9 +158,9 @@ const FastCasualPage = () => {
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">EFFORTLESS SERVICE, BIGGER RESULTS</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
@ -212,10 +223,10 @@ const FastCasualPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
|
||||
<Image src={Img1} alt="Order Processing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +236,11 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Communication" fill className="object-cover" />
|
||||
<Image src={Img2} alt="Communication" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +250,11 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Wait Times" fill className="object-cover" />
|
||||
<Image src={Img3} alt="Wait Times" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +264,11 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Fulfillment" fill className="object-cover" />
|
||||
<Image src={Img4} alt="Fulfillment" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -270,11 +281,11 @@ const FastCasualPage = () => {
|
||||
</section>
|
||||
|
||||
{/* POS Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[2.5rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex flex-col gap-6 order-2 lg:order-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
|
||||
@ -294,7 +305,7 @@ const FastCasualPage = () => {
|
||||
"Accept multiple payment options"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +319,14 @@ const FastCasualPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,19 +335,19 @@ const FastCasualPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
@ -354,7 +365,7 @@ const FastCasualPage = () => {
|
||||
"Monitor preparation status in real time"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -371,12 +382,12 @@ const FastCasualPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
|
||||
@ -406,9 +417,9 @@ const FastCasualPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Seating Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={TableReservationImg} alt="Seating Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,15 +428,15 @@ const FastCasualPage = () => {
|
||||
{/* QR Code Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR CODE MENU</span>
|
||||
@ -443,7 +454,7 @@ const FastCasualPage = () => {
|
||||
"Highlight daily specials and combos"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -460,11 +471,11 @@ const FastCasualPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-4xl">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI BRANCH RESTAURANT</span>
|
||||
@ -482,7 +493,7 @@ const FastCasualPage = () => {
|
||||
"Monitor operations from one dashboard"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -495,10 +506,10 @@ const FastCasualPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,11 +10,30 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Calendar, Menu, AreaChart, RefreshCw } from 'lucide-react'
|
||||
|
||||
// Import local assets
|
||||
// import FastFood1 from '@/assets/restaurant/types/fast-food-restaurant/1.webp'
|
||||
// import FastFood2 from '@/assets/restaurant/types/fast-food-restaurant/2.webp'
|
||||
import FastFood1 from '@/assets/restaurant/types/fast-food-restaurant/1.webp'
|
||||
import FastFood2 from '@/assets/restaurant/types/fast-food-restaurant/2.webp'
|
||||
import FastFood3 from '@/assets/restaurant/types/fast-food-restaurant/3.webp'
|
||||
import FastFood4 from '@/assets/restaurant/types/fast-food-restaurant/4.webp'
|
||||
import FastFoodLeft from '@/assets/restaurant/types/fast-food-restaurant/left.webp'
|
||||
import FastFoodCentre from '@/assets/restaurant/types/fast-food-restaurant/centre.webp'
|
||||
import FastFoodRight from '@/assets/restaurant/types/fast-food-restaurant/right.webp'
|
||||
import FastFoodPos from '@/assets/restaurant/types/fast-food-restaurant/pos.webp'
|
||||
import FastFoodOrder from '@/assets/restaurant/types/fast-food-restaurant/order-management.webp'
|
||||
import FastFoodQR from '@/assets/restaurant/types/fast-food-restaurant/qr-menu.webp'
|
||||
import FastFoodTable from '@/assets/restaurant/types/fast-food-restaurant/table-reservation.webp'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1561758033-d89a9ad46330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1551782450-a2132b4ba21d?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1571091718767-18b5b1457add?auto=format&fit=crop&q=80&w=600",
|
||||
FastFood1,
|
||||
FastFood2,
|
||||
FastFood3,
|
||||
FastFood4,
|
||||
FastFoodPos,
|
||||
FastFoodOrder,
|
||||
FastFoodQR,
|
||||
FastFoodTable,
|
||||
]
|
||||
|
||||
const FastFoodPage = () => {
|
||||
@ -94,7 +113,7 @@ const FastFoodPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Fast Food Service" fill className="object-cover" />
|
||||
<Image src={FastFoodLeft} alt="Fast Food Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
|
||||
@ -109,7 +128,7 @@ const FastFoodPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Ordering" fill className="object-cover" />
|
||||
<Image src={FastFoodCentre} alt="Ordering" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service</p>
|
||||
@ -124,7 +143,7 @@ const FastFoodPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
|
||||
<Image src={FastFoodRight} alt="Kitchen" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -214,7 +233,7 @@ const FastFoodPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Order Processing" fill className="object-cover" />
|
||||
<Image src={FastFood1} alt="Order Processing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -228,7 +247,7 @@ const FastFoodPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Sync" fill className="object-cover" />
|
||||
<Image src={FastFood2} alt="Kitchen Sync" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -242,7 +261,7 @@ const FastFoodPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Queues" fill className="object-cover" />
|
||||
<Image src={FastFood3} alt="Queues" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -256,7 +275,7 @@ const FastFoodPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Validation" fill className="object-cover" />
|
||||
<Image src={FastFood4} alt="Validation" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +334,7 @@ const FastFoodPage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={FastFoodPos} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -332,7 +351,7 @@ const FastFoodPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={FastFoodOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -421,7 +440,7 @@ const FastFoodPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={FastFoodQR} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
|
||||
@ -10,11 +10,17 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Star, Zap, Clock, Target, Utensils, Users, Layout, Smartphone, Calendar, Menu, AreaChart, Award } from 'lucide-react'
|
||||
|
||||
// Import local assets
|
||||
import FineDiningPos from '@/assets/restaurant/types/fine-dining/pos.webp'
|
||||
import FineDiningMenu from '@/assets/restaurant/types/fine-dining/digital-menu.webp'
|
||||
import FineDiningHero from '@/assets/restaurant/types/fine-dining/table-reservation.webp'
|
||||
import FineDiningOrder from '@/assets/restaurant/types/fine-dining/order-management.webp'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
FineDiningPos,
|
||||
FineDiningMenu,
|
||||
FineDiningHero,
|
||||
FineDiningOrder,
|
||||
]
|
||||
|
||||
const FineDiningPage = () => {
|
||||
|
||||
@ -10,10 +10,29 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, ShoppingCart, Package, QrCode, BookOpen, Tag } from 'lucide-react'
|
||||
|
||||
// Import local hero images
|
||||
import Hero1 from '@/assets/restaurant/types/fine-dining/hero-1.webp'
|
||||
import Hero2 from '@/assets/restaurant/types/fine-dining/hero-2.webp'
|
||||
import Hero3 from '@/assets/restaurant/types/fine-dining/hero-3.webp'
|
||||
|
||||
// Import other fine dining assets
|
||||
import PosImg from '@/assets/restaurant/types/fine-dining/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/fine-dining/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/fine-dining/table-reservation.webp'
|
||||
import DigitalMenuImg from '@/assets/restaurant/types/fine-dining/digital-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/fine-dining/multi-location.webp'
|
||||
|
||||
// Import journey step images
|
||||
import KitchenCommsImg from '@/assets/restaurant/types/fine-dining/kitchen-comms.webp'
|
||||
import Journey1 from '@/assets/restaurant/types/fine-dining/1.webp'
|
||||
import Journey2 from '@/assets/restaurant/types/fine-dining/2.webp'
|
||||
import Journey3 from '@/assets/restaurant/types/fine-dining/3.webp'
|
||||
import Journey4 from '@/assets/restaurant/types/fine-dining/4.webp'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
Hero1,
|
||||
Hero2,
|
||||
Hero3,
|
||||
"https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
@ -321,7 +340,7 @@ const FineDinePage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover" />
|
||||
<Image src={Journey1} alt="Table Management" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -335,7 +354,7 @@ const FineDinePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?auto=format&fit=crop&q=80&w=800" alt="Course Tracking" fill className="object-cover" />
|
||||
<Image src={KitchenCommsImg} alt="Kitchen Communication" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -349,7 +368,7 @@ const FineDinePage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch" fill className="object-cover" />
|
||||
<Image src={Journey3} alt="Multi-Branch" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -363,7 +382,7 @@ const FineDinePage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src="https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&q=80&w=800" alt="Guest Experience" fill className="object-cover" />
|
||||
<Image src={Journey4} alt="Guest Experience" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -422,7 +441,7 @@ const FineDinePage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -439,7 +458,7 @@ const FineDinePage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -516,7 +535,7 @@ const FineDinePage = () => {
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={TableReservationImg} alt="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -528,7 +547,7 @@ const FineDinePage = () => {
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Digital Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={DigitalMenuImg} alt="Digital Menu" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -606,7 +625,7 @@ const FineDinePage = () => {
|
||||
<div className="relative h-[420px]">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Branch Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,11 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, Clock, Target, Users, Layout, Smartphone, Truck, Menu, AreaChart, RefreshCw } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1565123409695-7b5ef63a2efb?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555126634-323283e090fa?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1524350300373-313d47ad9d63?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1567129995593-01024f1dc055?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import FoodTruckLeft from '@/assets/restaurant/types/food-truck/left.webp'
|
||||
import FoodTruckCentre from '@/assets/restaurant/types/food-truck/centre.webp'
|
||||
import FoodTruckRight from '@/assets/restaurant/types/food-truck/right.webp'
|
||||
import FoodTruck1 from '@/assets/restaurant/types/food-truck/1.webp'
|
||||
import FoodTruck2 from '@/assets/restaurant/types/food-truck/2.webp'
|
||||
import FoodTruck3 from '@/assets/restaurant/types/food-truck/3.webp'
|
||||
import FoodTruck4 from '@/assets/restaurant/types/food-truck/4.webp'
|
||||
import POSImg from '@/assets/restaurant/types/food-truck/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/food-truck/order-management.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/food-truck/qr-menu.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/food-truck/table-reservation.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/food-truck/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
FoodTruckLeft,
|
||||
FoodTruckCentre,
|
||||
FoodTruckRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
FoodTruck1,
|
||||
FoodTruck2,
|
||||
FoodTruck3,
|
||||
FoodTruck4,
|
||||
]
|
||||
|
||||
const FoodTruckPage = () => {
|
||||
@ -94,7 +114,7 @@ const FoodTruckPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Food Truck Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Food Truck Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Speed</p>
|
||||
@ -109,7 +129,7 @@ const FoodTruckPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Ordering" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Ordering" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Sales</p>
|
||||
@ -124,7 +144,7 @@ const FoodTruckPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Kitchen" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Kitchen" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
@ -214,7 +234,7 @@ const FoodTruckPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Order Taking" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Order Taking" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -228,7 +248,7 @@ const FoodTruckPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -242,7 +262,7 @@ const FoodTruckPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Wait Times" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Wait Times" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -256,7 +276,7 @@ const FoodTruckPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Validation" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Validation" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +335,7 @@ const FoodTruckPage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -332,7 +352,7 @@ const FoodTruckPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -409,7 +429,7 @@ const FoodTruckPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[2]} alt="Service Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={TableReservationImg} alt="Service Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -421,7 +441,7 @@ const FoodTruckPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[0]} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QRMenuImg} alt="Digital Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -499,7 +519,7 @@ const FoodTruckPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1555126634-323283e090fa?auto=format&fit=crop&q=80&w=800" alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Location Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,15 +8,27 @@ import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart } from 'lucide-react'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target, Box, Menu, AreaChart, Star, Quote } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1616733148217-1bb14305490e?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Import local assets
|
||||
import LeftImg from '@/assets/restaurant/types/ghost-restaurant/left.webp'
|
||||
import CentreImg from '@/assets/restaurant/types/ghost-restaurant/centre.webp'
|
||||
import RightImg from '@/assets/restaurant/types/ghost-restaurant/right.webp'
|
||||
import POSImg from '@/assets/restaurant/types/ghost-restaurant/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/ghost-restaurant/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/ghost-restaurant/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/ghost-restaurant/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/ghost-restaurant/multi-location.webp'
|
||||
import DeliveryOperationsImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
|
||||
import TestimonialImg from '@/assets/restaurant/types/ghost-restaurant/testimonial.webp'
|
||||
|
||||
import Ghost1 from '@/assets/restaurant/types/ghost-restaurant/1.webp'
|
||||
import Ghost2 from '@/assets/restaurant/types/ghost-restaurant/2.webp'
|
||||
import Ghost3 from '@/assets/restaurant/types/ghost-restaurant/3.webp'
|
||||
import Ghost4 from '@/assets/restaurant/types/ghost-restaurant/4.webp'
|
||||
|
||||
const HERO_IMAGES = [LeftImg, CentreImg, RightImg]
|
||||
const JOURNEY_IMAGES = [Ghost1, Ghost2, Ghost3, Ghost4]
|
||||
|
||||
const GhostKitchenPage = () => {
|
||||
return (
|
||||
@ -95,7 +107,7 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Delivery Hub" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
@ -110,7 +122,7 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Kitchen Operations" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Operational</p>
|
||||
@ -125,7 +137,7 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Cloud System" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Reliable</p>
|
||||
@ -215,7 +227,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Centralized Orders" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +241,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Kitchen Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +255,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Order Fulfillment" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Order Fulfillment" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +269,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Order Handling" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Order Handling" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -316,7 +328,7 @@ const GhostKitchenPage = () => {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@ -333,7 +345,7 @@ const GhostKitchenPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -410,7 +422,7 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[1]} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={DeliveryOperationsImg} alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -422,7 +434,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={CARD_IMAGES[3]} alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={QRMenuImg} alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -500,7 +512,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="relative h-[420px]">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Kitchen Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Kitchen Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,19 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Dot, Layout, TrendingUp, Smartphone, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1504939097-451b0c9e1f44?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Image Imports
|
||||
import LeftImg from '@/assets/restaurant/types/ghost-restaurant/left.webp'
|
||||
import CentreImg from '@/assets/restaurant/types/ghost-restaurant/centre.webp'
|
||||
import RightImg from '@/assets/restaurant/types/ghost-restaurant/right.webp'
|
||||
import Step1Img from '@/assets/restaurant/types/ghost-restaurant/1.webp'
|
||||
import Step2Img from '@/assets/restaurant/types/ghost-restaurant/2.webp'
|
||||
import Step3Img from '@/assets/restaurant/types/ghost-restaurant/3.webp'
|
||||
import Step4Img from '@/assets/restaurant/types/ghost-restaurant/4.webp'
|
||||
import PosImg from '@/assets/restaurant/types/ghost-restaurant/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/ghost-restaurant/order-management.webp'
|
||||
import DeliveryOpsImg from '@/assets/restaurant/types/ghost-restaurant/DELIVERY OPERATIONS.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/ghost-restaurant/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/ghost-restaurant/multi-location.webp'
|
||||
|
||||
const GhostKitchenPage = () => {
|
||||
return (
|
||||
@ -46,7 +52,7 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-[1px] w-6 bg-red-500" />
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
GHOST RESTAURANT
|
||||
</div>
|
||||
|
||||
@ -85,8 +91,8 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +101,8 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Ghost Kitchen" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={LeftImg} alt="Ghost Kitchen" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Processing</p>
|
||||
<p className="text-white font-bold text-2xl">3X Faster</p>
|
||||
@ -110,8 +116,8 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Efficiency" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={CentreImg} alt="Efficiency" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">40% Up</p>
|
||||
@ -125,8 +131,8 @@ const GhostKitchenPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[4]} alt="Cloud System" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={RightImg} alt="Cloud System" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Cloud</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -139,7 +145,7 @@ const GhostKitchenPage = () => {
|
||||
</main>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-[3rem]">
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden bg-zinc-50/50 rounded-6xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@ -147,9 +153,9 @@ const GhostKitchenPage = () => {
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">DELIVERY-FIRST OPERATIONS</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
@ -212,10 +218,10 @@ const GhostKitchenPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Delivery Orders" fill className="object-cover" />
|
||||
<Image src={Step1Img} alt="Delivery Orders" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +231,11 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Smart Workflow" fill className="object-cover" />
|
||||
<Image src={Step2Img} alt="Smart Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +245,11 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Fulfillment" fill className="object-cover" />
|
||||
<Image src={Step3Img} alt="Fulfillment" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +259,11 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Order Accuracy" fill className="object-cover" />
|
||||
<Image src={Step4Img} alt="Order Accuracy" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -274,7 +280,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex flex-col gap-6 order-2 lg:order-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs flex items-center gap-2">
|
||||
@ -294,7 +300,7 @@ const GhostKitchenPage = () => {
|
||||
"Accept secure online payments"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +314,14 @@ const GhostKitchenPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,19 +330,19 @@ const GhostKitchenPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
@ -354,7 +360,7 @@ const GhostKitchenPage = () => {
|
||||
"Prevent order bottlenecks during peak hours"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -371,12 +377,12 @@ const GhostKitchenPage = () => {
|
||||
</section>
|
||||
|
||||
{/* Delivery Operations Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3rem] overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-6xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">DELIVERY OPERATIONS</span>
|
||||
@ -406,9 +412,9 @@ const GhostKitchenPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-[2rem] shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Delivery Flow" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src={DeliveryOpsImg} alt="Delivery Flow" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,15 +423,15 @@ const GhostKitchenPage = () => {
|
||||
{/* Digital Menu (Virtual Brands) Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-[2rem] shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="Virtual Brands" fill className="object-cover rounded-[1.5rem]" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src={QrMenuImg} alt="Virtual Brands" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-[2px] w-10 bg-red-500 relative">
|
||||
<div className="h-0.5 w-10 bg-red-500 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">DIGITAL MENU</span>
|
||||
@ -443,7 +449,7 @@ const GhostKitchenPage = () => {
|
||||
"Sync menus across delivery platforms"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -498,7 +504,7 @@ const GhostKitchenPage = () => {
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Kithchen Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi-Kithchen Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1617196034183-421b4917c92d?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1563805042-7684c019e1cb?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1580442151529-343f2f5e3ef2?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import MongolianLeft from '@/assets/restaurant/types/mongolian-barbecue/left.avif'
|
||||
import MongolianCentre from '@/assets/restaurant/types/mongolian-barbecue/center.avif'
|
||||
import MongolianRight from '@/assets/restaurant/types/mongolian-barbecue/right.webp'
|
||||
import Mongolian1 from '@/assets/restaurant/types/mongolian-barbecue/1.webp'
|
||||
import Mongolian2 from '@/assets/restaurant/types/mongolian-barbecue/2.webp'
|
||||
import Mongolian3 from '@/assets/restaurant/types/mongolian-barbecue/3.webp'
|
||||
import Mongolian4 from '@/assets/restaurant/types/mongolian-barbecue/4.webp'
|
||||
import POSImg from '@/assets/restaurant/types/mongolian-barbecue/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/mongolian-barbecue/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/mongolian-barbecue/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/mongolian-barbecue/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/mongolian-barbecue/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
MongolianLeft,
|
||||
MongolianCentre,
|
||||
MongolianRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Mongolian1,
|
||||
Mongolian2,
|
||||
Mongolian3,
|
||||
Mongolian4,
|
||||
]
|
||||
|
||||
const MongolianBBQPage = () => {
|
||||
@ -64,21 +83,21 @@ const MongolianBBQPage = () => {
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
|
||||
<Image src={CARD_IMAGES[2]} alt="Grill Station" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Mongolian Left" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">90% Faster</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
|
||||
<Image src={CARD_IMAGES[0]} alt="Fresh Ingredients" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Mongolian Centre" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Guest Flow</p>
|
||||
<p className="text-white font-bold text-2xl">35% Improved</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
|
||||
<Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Mongolian Right" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Billing</p>
|
||||
<p className="text-white font-bold text-2xl">100% Accurate</p>
|
||||
@ -136,7 +155,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Guest Flow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Guest Flow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -150,7 +169,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Cooking Workflow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Cooking Workflow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -164,7 +183,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Service" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Service" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -178,7 +197,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -217,7 +236,7 @@ const MongolianBBQPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -227,7 +246,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -287,7 +306,7 @@ const MongolianBBQPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={TableReservationImg} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -298,7 +317,7 @@ const MongolianBBQPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -354,7 +373,7 @@ const MongolianBBQPage = () => {
|
||||
</div>
|
||||
<div className="relative h-105">
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1544148103-0773bf10d330?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiBranchImg} alt="Multi Location" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,62 +14,30 @@ import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
|
||||
// Hero Images
|
||||
import HeroLeftTop from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-top.webp'
|
||||
import HeroLeftBottom from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/left-bottom.webp'
|
||||
import HeroRightBottom from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-bottom.webp'
|
||||
import HeroRightTop from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/right-top.webp'
|
||||
|
||||
// Journey Images
|
||||
import Journey1 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/1.webp'
|
||||
import Journey2 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/2.webp'
|
||||
import Journey3 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/3.webp'
|
||||
import Journey4 from '@/assets/restaurant/restaurant-main-page-20260410T183413Z-3-001/4.webp'
|
||||
|
||||
const RESTAURANT_TYPES = [
|
||||
{
|
||||
label: "Fast Food",
|
||||
icon: Zap,
|
||||
description: "Handle high-volume orders with lightning-fast billing, instant kitchen sync, and peak-hour performance optimization.",
|
||||
angle: 0,
|
||||
href: "/restaurant-types/fast-food",
|
||||
},
|
||||
{
|
||||
label: "Food Truck",
|
||||
icon: Truck,
|
||||
description: "Run your food truck from anywhere with a mobile-ready POS, simplified menu control, and real-time sales tracking.",
|
||||
angle: 45,
|
||||
href: "/restaurant-types/food-truck",
|
||||
},
|
||||
{
|
||||
label: "Cafe & Bistro",
|
||||
icon: Coffee,
|
||||
description: "Deliver smooth table service, quick counter billing, and loyalty-ready customer management in one compact system.",
|
||||
angle: 90,
|
||||
href: "/restaurant-types/cafe-bistro",
|
||||
},
|
||||
{
|
||||
label: "Ghost Kitchen",
|
||||
icon: Cloud,
|
||||
description: "Centralize delivery orders, manage multiple platforms, and optimize kitchen workflows for delivery-first operations.",
|
||||
angle: 135,
|
||||
href: "/restaurant-types/ghost-kitchen",
|
||||
},
|
||||
{
|
||||
label: "Full Service",
|
||||
icon: UtensilsCrossed,
|
||||
description: "Coordinate front-of-house and kitchen operations seamlessly with reservations, table control, and staff synchronization.",
|
||||
angle: 180,
|
||||
href: "/restaurant-types/full-service",
|
||||
},
|
||||
{
|
||||
label: "Bakery",
|
||||
icon: ChefHat,
|
||||
description: "Track daily inventory, manage batch production, and streamline pre-orders with precision and efficiency.",
|
||||
angle: 225,
|
||||
href: "/restaurant-types/bakery",
|
||||
},
|
||||
{
|
||||
label: "Fine Dine",
|
||||
label: "Fine Dining",
|
||||
icon: Gem,
|
||||
description: "Elevate premium dining with reservation accuracy, table layout control, and detailed performance analytics.",
|
||||
angle: 270,
|
||||
href: "/restaurant-types/fine-dine",
|
||||
href: "/restaurant-types/fine-dining",
|
||||
},
|
||||
{
|
||||
label: "Family Style",
|
||||
icon: Users,
|
||||
description: "Manage large group dining, shared tables, and flexible seating arrangements without operational confusion.",
|
||||
angle: 315,
|
||||
href: "/restaurant-types/family-style",
|
||||
label: "Casual Dining",
|
||||
icon: Store,
|
||||
description: "Streamlined service for relaxed dining. Manage table turns, orders, and guest experiences with simplicity and speed.",
|
||||
href: "/restaurant-types/casual-dining",
|
||||
},
|
||||
{
|
||||
label: "Fast Casual",
|
||||
@ -78,34 +46,34 @@ const RESTAURANT_TYPES = [
|
||||
href: "/restaurant-types/fast-casual",
|
||||
},
|
||||
{
|
||||
label: "Diner",
|
||||
icon: Store,
|
||||
description: "Classic desk service meets modern tech. Manage high-turnover seating, complicated breakfast orders, and multi-staff coordination with ease.",
|
||||
href: "/restaurant-types/diner",
|
||||
label: "Ghost Restaurant",
|
||||
icon: Cloud,
|
||||
description: "Virtual brands, real profits. Manage multiple digital storefronts from one kitchen and sync with all major delivery apps.",
|
||||
href: "/restaurant-types/ghost-restaurant",
|
||||
},
|
||||
{
|
||||
label: "Pub",
|
||||
icon: Beer,
|
||||
description: "Built for busy bars and pubs. Track open tabs, manage age-restricted items, and handle lightning-fast counter rounds flawlessly.",
|
||||
href: "/restaurant-types/pub",
|
||||
label: "Family Style",
|
||||
icon: Users,
|
||||
description: "Manage large group dining, shared tables, and flexible seating arrangements without operational confusion.",
|
||||
href: "/restaurant-types/family-style",
|
||||
},
|
||||
{
|
||||
label: "Italian / Pizza",
|
||||
icon: Pizza,
|
||||
description: "Specialized for modifiers and toppings. Manage ingredient inventory, delivery zones, and custom modifiers with ease.",
|
||||
href: "/restaurant-types/italian-pizza",
|
||||
label: "Fast Food",
|
||||
icon: Zap,
|
||||
description: "Handle high-volume orders with lightning-fast billing, instant kitchen sync, and peak-hour performance optimization.",
|
||||
href: "/restaurant-types/fast-food",
|
||||
},
|
||||
{
|
||||
label: "Steakhouse",
|
||||
icon: Beef,
|
||||
description: "Focus on precision. Manage specific meat aging, cooking temperatures, and premium wine pairings for high-ticket service.",
|
||||
href: "/restaurant-types/steakhouse",
|
||||
label: "Food Truck",
|
||||
icon: Truck,
|
||||
description: "Run your food truck from anywhere with a mobile-ready POS, simplified menu control, and real-time sales tracking.",
|
||||
href: "/restaurant-types/food-truck",
|
||||
},
|
||||
{
|
||||
label: "Seafood",
|
||||
icon: Utensils,
|
||||
description: "Handle fresh catch inventory, fluctuating market pricing, and seasonal menu changes with our flexible management system.",
|
||||
href: "/restaurant-types/seafood",
|
||||
label: "Cafe",
|
||||
icon: Coffee,
|
||||
description: "Deliver smooth counter billing, quick service, and loyalty-ready customer management in one compact system.",
|
||||
href: "/restaurant-types/cafe-bistro",
|
||||
},
|
||||
{
|
||||
label: "Buffet",
|
||||
@ -114,10 +82,10 @@ const RESTAURANT_TYPES = [
|
||||
href: "/restaurant-types/buffet",
|
||||
},
|
||||
{
|
||||
label: "Bistro",
|
||||
icon: Wine,
|
||||
description: "Small plates, big impact. Manage cozy seating layouts, rotating wine lists, and intimate guest experiences efficiently.",
|
||||
href: "/restaurant-types/bistro",
|
||||
label: "Pub",
|
||||
icon: Beer,
|
||||
description: "Built for busy bars and pubs. Track open tabs, manage age-restricted items, and handle lightning-fast counter rounds flawlessly.",
|
||||
href: "/restaurant-types/pub",
|
||||
},
|
||||
{
|
||||
label: "Cafeteria",
|
||||
@ -125,6 +93,42 @@ const RESTAURANT_TYPES = [
|
||||
description: "Built for institutional or corporate cafeterias. Handle meal plans, quick-tap payments, and large-scale bulk ordering.",
|
||||
href: "/restaurant-types/cafeteria",
|
||||
},
|
||||
{
|
||||
label: "Coffee House",
|
||||
icon: Coffee,
|
||||
description: "Perfect for coffee shops and tea houses. Manage customizations, loyalty programs, and create engaging customer relationships.",
|
||||
href: "/restaurant-types/coffee-house",
|
||||
},
|
||||
{
|
||||
label: "Diner",
|
||||
icon: Store,
|
||||
description: "Classic table service meets modern tech. Manage high-turnover seating, complicated breakfast orders, and multi-staff coordination with ease.",
|
||||
href: "/restaurant-types/diner",
|
||||
},
|
||||
{
|
||||
label: "Pop-Up",
|
||||
icon: Zap,
|
||||
description: "Flexible POS for temporary or seasonal restaurants. Quick setup, easy management, and seamless operations on the go.",
|
||||
href: "/restaurant-types/pop-up",
|
||||
},
|
||||
{
|
||||
label: "Contemporary Casual",
|
||||
icon: Flame,
|
||||
description: "Modern tech for modern dining. Integrated QR ordering, mobile payments, and tableside service for trend-setting restaurants.",
|
||||
href: "/restaurant-types/contemporary-casual",
|
||||
},
|
||||
{
|
||||
label: "Bistro",
|
||||
icon: Wine,
|
||||
description: "Small plates, big impact. Manage cozy seating layouts, rotating wine lists, and intimate guest experiences efficiently.",
|
||||
href: "/restaurant-types/bistro",
|
||||
},
|
||||
{
|
||||
label: "Destination",
|
||||
icon: Gem,
|
||||
description: "Premium experience management for high-end destination venues. Seamless coordination for exceptional dining moments.",
|
||||
href: "/restaurant-types/destination",
|
||||
},
|
||||
{
|
||||
label: "Teppanyaki",
|
||||
icon: Flame,
|
||||
@ -132,28 +136,10 @@ const RESTAURANT_TYPES = [
|
||||
href: "/restaurant-types/teppanyaki",
|
||||
},
|
||||
{
|
||||
label: "Contemporary Casual",
|
||||
icon: Zap,
|
||||
description: "Modern tech for modern dining. Integrated QR ordering, mobile payments, and tableside service for trend-setting restaurants.",
|
||||
href: "/restaurant-types/contemporary-casual",
|
||||
},
|
||||
{
|
||||
label: "Buffet",
|
||||
icon: UtensilsCrossed,
|
||||
description: "Manage large scale dining with ticket entry systems, kitchen replenishment notifications, and wastage tracking.",
|
||||
href: "/restaurant-types/buffet",
|
||||
},
|
||||
{
|
||||
label: "Ghost Restaurant",
|
||||
icon: Cloud,
|
||||
description: "Virtual brands, real profits. Manage multiple digital storefronts from one kitchen and sync with all major delivery apps.",
|
||||
href: "/restaurant-types/ghost-restaurant",
|
||||
},
|
||||
{
|
||||
label: "Delivery Only",
|
||||
icon: Truck,
|
||||
description: "Focus on the fleet. Optimize dispatching, track delivery times, and manage third-party integration from a single order screen.",
|
||||
href: "/restaurant-types/delivery-only",
|
||||
label: "Mongolian Barbecue",
|
||||
icon: Beef,
|
||||
description: "Interactive dining optimization. Manage custom ingredient selections, station workflows, and guest-driven experience.",
|
||||
href: "/restaurant-types/mongolian-bbq",
|
||||
},
|
||||
{
|
||||
label: "Concession",
|
||||
@ -162,31 +148,49 @@ const RESTAURANT_TYPES = [
|
||||
href: "/restaurant-types/concession",
|
||||
},
|
||||
{
|
||||
label: "Ice Cream Shop",
|
||||
icon: IceCream,
|
||||
description: "Cold treats, hot sales. Manage complex modifier chains, seasonal flavors, and high-frequency transactions with ease.",
|
||||
href: "/restaurant-types/ice-cream-shop",
|
||||
label: "Digital-Only",
|
||||
icon: Cloud,
|
||||
description: "Delivery-first operations. Centralize orders across all platforms, optimize fulfillment, and track performance in real-time.",
|
||||
href: "/restaurant-types/digital-only",
|
||||
},
|
||||
{
|
||||
label: "Theme",
|
||||
icon: Gem,
|
||||
description: "Specialized management for themed venues. Coordinate experiences, manage entertainment, and deliver brand-consistent service.",
|
||||
href: "/restaurant-types/theme",
|
||||
},
|
||||
{
|
||||
label: "Bakery",
|
||||
icon: ChefHat,
|
||||
description: "Track daily inventory, manage batch production, and streamline pre-orders with precision and efficiency.",
|
||||
href: "/restaurant-types/bakery",
|
||||
},
|
||||
{
|
||||
label: "Delivery-Only",
|
||||
icon: Truck,
|
||||
description: "Focus on the fleet. Optimize dispatching, track delivery times, and manage third-party integration from a single order screen.",
|
||||
href: "/restaurant-types/delivery-only",
|
||||
},
|
||||
]
|
||||
|
||||
const HERO_IMAGES = [
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800",
|
||||
src: HeroLeftTop,
|
||||
alt: "Fine Dining",
|
||||
label: "Full Service"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&q=80&w=800",
|
||||
src: HeroLeftBottom,
|
||||
alt: "Fast Food",
|
||||
label: "Fast Food"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800",
|
||||
src: HeroRightBottom,
|
||||
alt: "Cafe Bistro",
|
||||
label: "Cafe & Bistro"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1567521464027-f127ff144326?auto=format&fit=crop&q=80&w=800",
|
||||
src: HeroRightTop,
|
||||
alt: "Ghost Kitchen",
|
||||
label: "Ghost Kitchen"
|
||||
}
|
||||
@ -468,7 +472,7 @@ const RestaurantTypesPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
|
||||
<Image src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&q=80&w=800" alt="Fast Processing" fill className="object-cover" />
|
||||
<Image src={Journey1} alt="Fast Processing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -487,7 +491,7 @@ const RestaurantTypesPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
|
||||
<Image src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?auto=format&fit=crop&q=80&w=800" alt="Order Syncing" fill className="object-cover" />
|
||||
<Image src={Journey2} alt="Order Syncing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -506,7 +510,7 @@ const RestaurantTypesPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-black rounded-l-[100px] z-0" />
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg border border-zinc-100">
|
||||
<Image src="https://images.unsplash.com/photo-1556745753-b2904692b3cd?auto=format&fit=crop&q=80&w=800" alt="Zero Delays" fill className="object-cover" />
|
||||
<Image src={Journey3} alt="Zero Delays" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -525,7 +529,7 @@ const RestaurantTypesPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-black rounded-r-[100px] z-0" />
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg border border-zinc-100">
|
||||
<Image src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?auto=format&fit=crop&q=80&w=800" alt="Order Accuracy" fill className="object-cover" />
|
||||
<Image src={Journey4} alt="Order Accuracy" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -592,7 +596,7 @@ const RestaurantTypesPage = () => {
|
||||
viewBox="0 0 580 580"
|
||||
>
|
||||
{diagramItems.map((type, idx) => {
|
||||
const angle = type.angle ?? (idx * (360 / diagramItems.length))
|
||||
const angle = (idx * (360 / diagramItems.length))
|
||||
const rad = (angle * Math.PI) / 180
|
||||
const r = 210
|
||||
const rInner = 90
|
||||
@ -635,7 +639,7 @@ const RestaurantTypesPage = () => {
|
||||
>
|
||||
<span className="text-red-500 font-black uppercase tracking-[0.25em] text-[11px]">DINE360</span>
|
||||
<span className="text-white font-black text-lg leading-tight">Built for Every Restaurant Model</span>
|
||||
<span className="text-gray-300 text-xs leading-relaxed max-w-[200px] font-medium">
|
||||
<span className="text-gray-300 text-xs leading-relaxed max-w-50 font-medium">
|
||||
One system. Unlimited possibilities. From small independent outlets to multi-branch operations, Dine360 powers modern restaurant performance.
|
||||
</span>
|
||||
</motion.div>
|
||||
@ -662,7 +666,7 @@ const RestaurantTypesPage = () => {
|
||||
|
||||
{/* Nodes */}
|
||||
{diagramItems.map((type, idx) => {
|
||||
const angle = type.angle ?? (idx * (360 / diagramItems.length))
|
||||
const angle = (idx * (360 / diagramItems.length))
|
||||
const rad = (angle * Math.PI) / 180
|
||||
const r = 210
|
||||
const cx = 290 + r * Math.sin(rad)
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target, Utensils, Users, Sparkles, Layout } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1550966841-3ee5ad0110c3?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import PopUpLeft from '@/assets/restaurant/types/pop-up/left.webp'
|
||||
import PopUpCentre from '@/assets/restaurant/types/pop-up/center.avif'
|
||||
import PopUpRight from '@/assets/restaurant/types/pop-up/right.avif'
|
||||
import PopUp1 from '@/assets/restaurant/types/pop-up/1.avif'
|
||||
import PopUp2 from '@/assets/restaurant/types/pop-up/2.avif'
|
||||
import PopUp3 from '@/assets/restaurant/types/pop-up/3.webp'
|
||||
import PopUp4 from '@/assets/restaurant/types/pop-up/4.avif'
|
||||
import POSImg from '@/assets/restaurant/types/pop-up/pos.webp'
|
||||
import OrderManagementImg from '@/assets/restaurant/types/pop-up/order-management.webp'
|
||||
import TableReservationImg from '@/assets/restaurant/types/pop-up/table-reservation.webp'
|
||||
import QRMenuImg from '@/assets/restaurant/types/pop-up/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/pop-up/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
PopUpLeft,
|
||||
PopUpCentre,
|
||||
PopUpRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
PopUp1,
|
||||
PopUp2,
|
||||
PopUp3,
|
||||
PopUp4,
|
||||
]
|
||||
|
||||
const PopUpPage = () => {
|
||||
@ -95,7 +114,7 @@ const PopUpPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Pop-Up Setup" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Pop-Up Left" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Setup</p>
|
||||
@ -110,7 +129,7 @@ const PopUpPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Flexible Service" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Pop-Up Centre" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
@ -125,7 +144,7 @@ const PopUpPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="On-the-go Dining" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Pop-Up Right" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Flexibility</p>
|
||||
@ -215,7 +234,7 @@ const PopUpPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Quick Setup" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Quick Setup" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -229,7 +248,7 @@ const PopUpPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Smooth Flow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Smooth Flow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -243,7 +262,7 @@ const PopUpPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Event Crowds" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Event Crowds" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +276,7 @@ const PopUpPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +334,7 @@ const PopUpPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={POSImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,7 +350,7 @@ const PopUpPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderManagementImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -408,7 +427,7 @@ const PopUpPage = () => {
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Event Service" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableReservationImg} alt="Event Service" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -420,7 +439,7 @@ const PopUpPage = () => {
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QRMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -498,7 +517,7 @@ const PopUpPage = () => {
|
||||
<div className="relative h-[420px]">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiBranchImg} alt="Multi Location" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1538488881038-e252a119ace7?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1574096079513-d8259312b785?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1566633806327-68e152aaf26d?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1572116469696-31de0f17cc34?auto=format&fit=crop&q=80&w=600",
|
||||
// Import local assets
|
||||
import PubLeft from '@/assets/restaurant/types/pub/left.webp'
|
||||
import PubCentre from '@/assets/restaurant/types/pub/centre.webp'
|
||||
import PubRight from '@/assets/restaurant/types/pub/right.webp'
|
||||
import Pub1 from '@/assets/restaurant/types/pub/1.webp'
|
||||
import Pub2 from '@/assets/restaurant/types/pub/2.webp'
|
||||
import Pub3 from '@/assets/restaurant/types/pub/3.webp'
|
||||
import Pub4 from '@/assets/restaurant/types/pub/4.webp'
|
||||
import PosImg from '@/assets/restaurant/types/pub/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/pub/order-management.webp'
|
||||
import TableMgmtImg from '@/assets/restaurant/types/pub/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/pub/qr-menu.webp'
|
||||
import MultiBranchImg from '@/assets/restaurant/types/pub/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
PubLeft,
|
||||
PubCentre,
|
||||
PubRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Pub1,
|
||||
Pub2,
|
||||
Pub3,
|
||||
Pub4,
|
||||
]
|
||||
|
||||
const PubPage = () => {
|
||||
@ -85,8 +104,8 @@ const PubPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative h-125 w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div
|
||||
@ -95,8 +114,8 @@ const PubPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Pub View" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[0]} alt="Pub View" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Efficiency</p>
|
||||
<p className="text-white font-bold text-2xl">+85%</p>
|
||||
@ -110,8 +129,8 @@ const PubPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Bar Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[1]} alt="Bar Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Sales</p>
|
||||
<p className="text-white font-bold text-2xl">+30%</p>
|
||||
@ -125,8 +144,8 @@ const PubPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Pub Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<Image src={HERO_IMAGES[2]} alt="Pub Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Secure</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
@ -212,10 +231,10 @@ const PubPage = () => {
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row items-center relative">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Drink Order" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Drink Order" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -225,11 +244,11 @@ const PubPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Bar Coordination" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Bar Coordination" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -239,11 +258,11 @@ const PubPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-4xl md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Table Service" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Table Service" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -253,11 +272,11 @@ const PubPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-[10px]">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="flex flex-col md:flex-row-reverse items-center relative md:-mt-2.5">
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-4xl md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -294,7 +313,7 @@ const PubPage = () => {
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -308,14 +327,14 @@ const PubPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full order-1 lg:order-2">
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,14 +343,14 @@ const PubPage = () => {
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] w-full">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -354,7 +373,7 @@ const PubPage = () => {
|
||||
"Track preparation and service times"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -372,7 +391,7 @@ const PubPage = () => {
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-4xl overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/10 to-transparent" />
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/10 to-transparent" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
@ -406,9 +425,9 @@ const PubPage = () => {
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px]">
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-3xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -417,10 +436,10 @@ const PubPage = () => {
|
||||
{/* QR Code Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[420px] order-2 lg:order-1">
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -443,7 +462,7 @@ const PubPage = () => {
|
||||
"Update menu items instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -482,7 +501,7 @@ const PubPage = () => {
|
||||
"Manage menus and inventory centrally"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<div className="mt-1 shrink-0 w-5 h-5 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
@ -495,10 +514,10 @@ const PubPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[420px]">
|
||||
<div className="relative h-105">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-3xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&q=80&w=800" alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={MultiBranchImg} alt="Multi-Location Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,31 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Zap, RefreshCw, Clock, Target } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1544124499-58962cc3d645?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1615362312505-babc78c19967?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=600",
|
||||
// Local Assets
|
||||
import TeppanyakiLeft from '@/assets/restaurant/types/teppanyaki-grill/left.avif'
|
||||
import TeppanyakiCentre from '@/assets/restaurant/types/teppanyaki-grill/centre.webp'
|
||||
import TeppanyakiRight from '@/assets/restaurant/types/teppanyaki-grill/right.webp'
|
||||
import Step1Img from '@/assets/restaurant/types/teppanyaki-grill/1.webp'
|
||||
import Step2Img from '@/assets/restaurant/types/teppanyaki-grill/2.webp'
|
||||
import Step3Img from '@/assets/restaurant/types/teppanyaki-grill/3.webp'
|
||||
import Step4Img from '@/assets/restaurant/types/teppanyaki-grill/4.webp'
|
||||
import PosImg from '@/assets/restaurant/types/teppanyaki-grill/pos.webp'
|
||||
import OrderMgmtImg from '@/assets/restaurant/types/teppanyaki-grill/order-management.webp'
|
||||
import TableMgmtImg from '@/assets/restaurant/types/teppanyaki-grill/table-reservation.webp'
|
||||
import QrMenuImg from '@/assets/restaurant/types/teppanyaki-grill/qr-menu.webp'
|
||||
import MultiLocationImg from '@/assets/restaurant/types/teppanyaki-grill/multi-location.webp'
|
||||
|
||||
const HERO_IMAGES = [
|
||||
TeppanyakiLeft,
|
||||
TeppanyakiCentre,
|
||||
TeppanyakiRight,
|
||||
]
|
||||
|
||||
const JOURNEY_IMAGES = [
|
||||
Step1Img,
|
||||
Step2Img,
|
||||
Step3Img,
|
||||
Step4Img,
|
||||
]
|
||||
|
||||
const TeppanyakiPage = () => {
|
||||
@ -64,21 +83,21 @@ const TeppanyakiPage = () => {
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-linear-to-tr from-red-50 to-zinc-50 rounded-full blur-3xl -z-10" />
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0">
|
||||
<motion.div className="absolute top-20 left-0 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-right" initial={{ opacity: 0, x: -50, rotate: -20 }} animate={{ opacity: 1, x: 0, rotate: -12 }} transition={{ duration: 0.8, delay: 0.2 }}>
|
||||
<Image src={CARD_IMAGES[0]} alt="Chef Prep" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[0]} alt="Chef Prep" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Coordination</p>
|
||||
<p className="text-white font-bold text-2xl">85% Better</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-10 left-12 md:left-20 w-64 h-80 bg-white rounded-3xl shadow-2xl overflow-hidden border-4 border-white z-20" initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
|
||||
<Image src={CARD_IMAGES[1]} alt="Live Cooking" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[1]} alt="Live Cooking" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Timing</p>
|
||||
<p className="text-white font-bold text-2xl">30% Improved</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div className="absolute top-32 right-0 md:right-2 w-56 h-72 bg-white rounded-3xl shadow-xl overflow-hidden border-4 border-white transform origin-bottom-left" initial={{ opacity: 0, x: 50, rotate: 20 }} animate={{ opacity: 1, x: 0, rotate: 12 }} transition={{ duration: 0.8, delay: 0.4 }}>
|
||||
<Image src={CARD_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<Image src={HERO_IMAGES[2]} alt="Dining Floor" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-linear-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-white">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Billing</p>
|
||||
<p className="text-white font-bold text-2xl">100% Accurate</p>
|
||||
@ -136,7 +155,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-10 border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Group Seating" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Group Seating" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -150,7 +169,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -164,7 +183,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-10 border-b-10 border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[2]} alt="Order Flow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Order Flow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -178,7 +197,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-10 border-b-10 border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-2xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -217,7 +236,7 @@ const TeppanyakiPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100 w-full order-1 lg:order-2">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-6" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }}>
|
||||
<Image src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
<Image src={PosImg} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -227,7 +246,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-105 w-full">
|
||||
<motion.div className="absolute inset-0 bg-white rounded-3xl shadow-xl overflow-hidden border border-zinc-100 p-4" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
|
||||
<Image src="https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?auto=format&fit=crop&q=80&w=800" alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={OrderMgmtImg} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -287,7 +306,7 @@ const TeppanyakiPage = () => {
|
||||
</div>
|
||||
<div className="relative h-100">
|
||||
<div className="relative h-full bg-zinc-800 p-2 rounded-4xl shadow-2xl border border-zinc-700 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1544124499-58962cc3d645?auto=format&fit=crop&q=80&w=800" alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
<Image src={TableMgmtImg} alt="Table Management" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -298,7 +317,7 @@ const TeppanyakiPage = () => {
|
||||
<div className="relative h-105 order-2 lg:order-1">
|
||||
<div className="absolute inset-0 bg-red-200/20 blur-3xl rounded-full" />
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
<Image src={QrMenuImg} alt="QR Menu" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
@ -354,7 +373,7 @@ const TeppanyakiPage = () => {
|
||||
</div>
|
||||
<div className="relative h-105">
|
||||
<div className="relative h-full bg-white p-4 rounded-4xl shadow-2xl border border-zinc-100 overflow-hidden">
|
||||
<Image src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=800" alt="Multi Location" fill className="object-cover rounded-3xl" />
|
||||
<Image src={MultiLocationImg} alt="Multi Location" fill className="object-cover rounded-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,21 @@ import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Box, Zap, Clock, Target, Store, Users, Layout, AreaChart } from 'lucide-react'
|
||||
|
||||
const CARD_IMAGES = [
|
||||
"https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1574091417483-376043477164?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=600",
|
||||
"https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
// Asset Imports
|
||||
import ThemeLeft from '@/assets/restaurant/types/theme/left.webp'
|
||||
import ThemeCentre from '@/assets/restaurant/types/theme/centre.webp'
|
||||
import ThemeRight from '@/assets/restaurant/types/theme/right.webp'
|
||||
import Theme1 from '@/assets/restaurant/types/theme/1.webp'
|
||||
import Theme2 from '@/assets/restaurant/types/theme/2.webp'
|
||||
import Theme3 from '@/assets/restaurant/types/theme/3.webp'
|
||||
import Theme4 from '@/assets/restaurant/types/theme/4.webp'
|
||||
import ThemePOS from '@/assets/restaurant/types/theme/pos.webp'
|
||||
import ThemeOrder from '@/assets/restaurant/types/theme/order-management.webp'
|
||||
import ThemeTable from '@/assets/restaurant/types/theme/table-reservation.webp'
|
||||
import ThemeQR from '@/assets/restaurant/types/theme/qr-menu.webp'
|
||||
import ThemeMulti from '@/assets/restaurant/types/theme/multi-location.webp'
|
||||
|
||||
const JOURNEY_IMAGES = [Theme1, Theme2, Theme3, Theme4]
|
||||
|
||||
const ThemeRestaurantPage = () => {
|
||||
return (
|
||||
@ -84,7 +92,7 @@ const ThemeRestaurantPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
{/* Right Content - Images */}
|
||||
<div className="relative h-[500px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1000px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[110%] h-[110%] bg-gradient-to-tr from-red-50/50 to-orange-50/50 rounded-full blur-3xl -z-10" />
|
||||
|
||||
@ -95,7 +103,7 @@ const ThemeRestaurantPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: -12 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Themed Dining" fill className="object-cover" />
|
||||
<Image src={ThemeLeft} alt="Themed Dining" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Service Flow</p>
|
||||
@ -110,7 +118,7 @@ const ThemeRestaurantPage = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="Guest Experience" fill className="object-cover" />
|
||||
<Image src={ThemeCentre} alt="Guest Experience" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Satisfaction</p>
|
||||
@ -125,7 +133,7 @@ const ThemeRestaurantPage = () => {
|
||||
animate={{ opacity: 1, x: 0, rotate: 12 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing Experience" fill className="object-cover" />
|
||||
<Image src={ThemeRight} alt="Billing Experience" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-900/90 via-zinc-900/40 to-transparent p-4 flex flex-col justify-end text-nowrap">
|
||||
<div className="relative z-10">
|
||||
<p className="text-[10px] text-zinc-300 font-medium tracking-wide uppercase mb-0.5">Checkout</p>
|
||||
@ -215,7 +223,7 @@ const ThemeRestaurantPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-t-[10px] border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[0]} alt="Smooth Order Flow" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[0]} alt="Smooth Order Flow" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
|
||||
@ -229,7 +237,7 @@ const ThemeRestaurantPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[1]} alt="Service Timing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
|
||||
@ -243,7 +251,7 @@ const ThemeRestaurantPage = () => {
|
||||
<div className="hidden md:block absolute left-0 top-0 w-[55%] h-full border-l-[10px] border-b-[10px] border-zinc-800 rounded-l-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pl-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-l-[80px] md:rounded-r-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[3]} alt="Enhanced Experience" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[2]} alt="Enhanced Experience" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -257,7 +265,7 @@ const ThemeRestaurantPage = () => {
|
||||
<div className="hidden md:block absolute right-0 top-0 w-[55%] h-full border-r-[10px] border-b-[10px] border-zinc-800 rounded-r-[100px] z-0"></div>
|
||||
<div className="w-full md:w-1/2 p-6 md:pr-10 md:py-8 relative z-10">
|
||||
<div className="relative h-36 w-full rounded-3xl md:rounded-r-[80px] md:rounded-l-2xl overflow-hidden shadow-lg">
|
||||
<Image src={CARD_IMAGES[4]} alt="Billing" fill className="object-cover" />
|
||||
<Image src={JOURNEY_IMAGES[3]} alt="Billing" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10">
|
||||
@ -315,7 +323,7 @@ const ThemeRestaurantPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[0]} alt="Theme POS" fill className="object-cover rounded-2xl" />
|
||||
<Image src={ThemePOS} alt="Theme POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,7 +339,7 @@ const ThemeRestaurantPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[2]} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={ThemeOrder} alt="Order Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -416,7 +424,7 @@ const ThemeRestaurantPage = () => {
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[3]} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
<Image src={ThemeTable} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@ -432,7 +440,7 @@ const ThemeRestaurantPage = () => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<Image src={CARD_IMAGES[1]} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
<Image src={ThemeQR} alt="QR Menu" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@ -511,28 +519,8 @@ const ThemeRestaurantPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full hidden lg:block">
|
||||
<Image src={ThemeMulti} alt="Multi Branch Management" fill className="object-cover opacity-40 mix-blend-overlay" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-red-600/20 rounded-full blur-[100px]" />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
className="aspect-square bg-white rounded-3xl p-6 shadow-xl relative overflow-hidden"
|
||||
>
|
||||
<Store className="w-8 h-8 text-red-600 mb-4" />
|
||||
<p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Total Venues</p>
|
||||
<p className="text-zinc-900 text-3xl font-bold">15+ Worlds</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="aspect-square bg-zinc-800 rounded-3xl p-6 shadow-xl relative mt-8"
|
||||
>
|
||||
<AreaChart className="w-8 h-8 text-red-500 mb-4" />
|
||||
<p className="text-zinc-400 text-xs font-medium uppercase tracking-wider mb-1">Growth rate</p>
|
||||
<p className="text-white text-3xl font-bold">+35%</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/restaurant/types/bakery/1.webp
Normal file
BIN
src/assets/restaurant/types/bakery/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/assets/restaurant/types/bakery/2.webp
Normal file
BIN
src/assets/restaurant/types/bakery/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/restaurant/types/bakery/3.webp
Normal file
BIN
src/assets/restaurant/types/bakery/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/restaurant/types/bakery/4.webp
Normal file
BIN
src/assets/restaurant/types/bakery/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/restaurant/types/bakery/centre.webp
Normal file
BIN
src/assets/restaurant/types/bakery/centre.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/restaurant/types/bakery/left.webp
Normal file
BIN
src/assets/restaurant/types/bakery/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/restaurant/types/bakery/multi-location.webp
Normal file
BIN
src/assets/restaurant/types/bakery/multi-location.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/restaurant/types/bakery/order-management.webp
Normal file
BIN
src/assets/restaurant/types/bakery/order-management.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/restaurant/types/bakery/pos.webp
Normal file
BIN
src/assets/restaurant/types/bakery/pos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/restaurant/types/bakery/qr-menu.webp
Normal file
BIN
src/assets/restaurant/types/bakery/qr-menu.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/restaurant/types/bakery/right.webp
Normal file
BIN
src/assets/restaurant/types/bakery/right.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/restaurant/types/bakery/table-reservation.webp
Normal file
BIN
src/assets/restaurant/types/bakery/table-reservation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/restaurant/types/bistro/1.avif
Normal file
BIN
src/assets/restaurant/types/bistro/1.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/restaurant/types/bistro/2.avif
Normal file
BIN
src/assets/restaurant/types/bistro/2.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/restaurant/types/bistro/3.webp
Normal file
BIN
src/assets/restaurant/types/bistro/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/restaurant/types/bistro/4.avif
Normal file
BIN
src/assets/restaurant/types/bistro/4.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/restaurant/types/bistro/center.avif
Normal file
BIN
src/assets/restaurant/types/bistro/center.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/restaurant/types/bistro/left.webp
Normal file
BIN
src/assets/restaurant/types/bistro/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/restaurant/types/bistro/multi-location.webp
Normal file
BIN
src/assets/restaurant/types/bistro/multi-location.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/restaurant/types/bistro/order-management.webp
Normal file
BIN
src/assets/restaurant/types/bistro/order-management.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/restaurant/types/bistro/pos.webp
Normal file
BIN
src/assets/restaurant/types/bistro/pos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/restaurant/types/bistro/qr-menu.webp
Normal file
BIN
src/assets/restaurant/types/bistro/qr-menu.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/restaurant/types/bistro/right.avif
Normal file
BIN
src/assets/restaurant/types/bistro/right.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/restaurant/types/bistro/table-reservation.webp
Normal file
BIN
src/assets/restaurant/types/bistro/table-reservation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/restaurant/types/bistro/testimonial.webp
Normal file
BIN
src/assets/restaurant/types/bistro/testimonial.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/restaurant/types/buffet/1.webp
Normal file
BIN
src/assets/restaurant/types/buffet/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/restaurant/types/buffet/2.webp
Normal file
BIN
src/assets/restaurant/types/buffet/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/restaurant/types/buffet/3.webp
Normal file
BIN
src/assets/restaurant/types/buffet/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/restaurant/types/buffet/4.webp
Normal file
BIN
src/assets/restaurant/types/buffet/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/restaurant/types/buffet/centre.webp
Normal file
BIN
src/assets/restaurant/types/buffet/centre.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/restaurant/types/buffet/left.webp
Normal file
BIN
src/assets/restaurant/types/buffet/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/restaurant/types/buffet/multi-location.webp
Normal file
BIN
src/assets/restaurant/types/buffet/multi-location.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/restaurant/types/buffet/order-management.webp
Normal file
BIN
src/assets/restaurant/types/buffet/order-management.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/restaurant/types/buffet/pos.webp
Normal file
BIN
src/assets/restaurant/types/buffet/pos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/restaurant/types/buffet/qr-menu.webp
Normal file
BIN
src/assets/restaurant/types/buffet/qr-menu.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/restaurant/types/buffet/right.webp
Normal file
BIN
src/assets/restaurant/types/buffet/right.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/restaurant/types/buffet/table-reservation.webp
Normal file
BIN
src/assets/restaurant/types/buffet/table-reservation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/restaurant/types/cafe/1.webp
Normal file
BIN
src/assets/restaurant/types/cafe/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/assets/restaurant/types/cafe/2.webp
Normal file
BIN
src/assets/restaurant/types/cafe/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
src/assets/restaurant/types/cafe/3.webp
Normal file
BIN
src/assets/restaurant/types/cafe/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/restaurant/types/cafe/4.webp
Normal file
BIN
src/assets/restaurant/types/cafe/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/restaurant/types/cafe/centre.webp
Normal file
BIN
src/assets/restaurant/types/cafe/centre.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/restaurant/types/cafe/left.webp
Normal file
BIN
src/assets/restaurant/types/cafe/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/restaurant/types/cafe/multi-location.webp
Normal file
BIN
src/assets/restaurant/types/cafe/multi-location.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/restaurant/types/cafe/order-management.webp
Normal file
BIN
src/assets/restaurant/types/cafe/order-management.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/restaurant/types/cafe/pos.webp
Normal file
BIN
src/assets/restaurant/types/cafe/pos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/restaurant/types/cafe/qr-menu.webp
Normal file
BIN
src/assets/restaurant/types/cafe/qr-menu.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/restaurant/types/cafe/right.webp
Normal file
BIN
src/assets/restaurant/types/cafe/right.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/restaurant/types/cafe/table-reservation.webp
Normal file
BIN
src/assets/restaurant/types/cafe/table-reservation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/restaurant/types/cafe/testimonial.webp
Normal file
BIN
src/assets/restaurant/types/cafe/testimonial.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/restaurant/types/cafeteria/1.avif
Normal file
BIN
src/assets/restaurant/types/cafeteria/1.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
src/assets/restaurant/types/cafeteria/2.avif
Normal file
BIN
src/assets/restaurant/types/cafeteria/2.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/restaurant/types/cafeteria/3.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/restaurant/types/cafeteria/4.avif
Normal file
BIN
src/assets/restaurant/types/cafeteria/4.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/restaurant/types/cafeteria/center.avif
Normal file
BIN
src/assets/restaurant/types/cafeteria/center.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/restaurant/types/cafeteria/left.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/left.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/restaurant/types/cafeteria/multi-location.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/multi-location.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/restaurant/types/cafeteria/order-management.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/order-management.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/restaurant/types/cafeteria/pos.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/pos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/restaurant/types/cafeteria/qr-menu.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/qr-menu.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/restaurant/types/cafeteria/right.avif
Normal file
BIN
src/assets/restaurant/types/cafeteria/right.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/restaurant/types/cafeteria/table-reservation.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/table-reservation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/restaurant/types/cafeteria/testimonial.webp
Normal file
BIN
src/assets/restaurant/types/cafeteria/testimonial.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/restaurant/types/casual-dining/1.webp
Normal file
BIN
src/assets/restaurant/types/casual-dining/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user