MetatroncubeSoftwareSolutions/Dine360-Marketing-Website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated next config and feature pages

Browse Source
This commit is contained in:
srikanth_M 2026-04-06 22:23:12 +05:30
parent 37c251d7ba
commit c9dd89b7b3
43 changed files with 745 additions and 706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/app/features/business-dashboard/page.tsx
View File

@ -15,10 +15,15 @@ import {
FileText
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import DashboardOne from '@/assets/features/dashboard/dashboard-1.webp';
import DashboardTwo from '@/assets/features/dashboard/dashboard-2.webp';
const BusinessDashboardPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -74,31 +79,26 @@ const BusinessDashboardPage = () => {
{/* SECTION 2: ANALYTICS & REPORTING */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Dashboard Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<BarChart3 className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<LineChart className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Target className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={DashboardOne}
alt="Dine360 Business Dashboard Analysis"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
{/* Right: Text Content */}
<div className="space-y-6 order-1 lg:order-2">
<span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@ -150,7 +150,7 @@ const BusinessDashboardPage = () => {
{/* SECTION 3: REAL-TIME PERFORMANCE (Dark) */}
<section className="py-24 bg-zinc-900 text-white relative overflow-hidden">
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(#ef4444_1px,transparent_1px)] bg-[size:32px_32px]" />
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(#ef4444_1px,transparent_1px)] bg-size-[32px_32px]" />
<div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="text-center mb-16">
<motion.span
@ -313,40 +313,19 @@ const BusinessDashboardPage = () => {
</div>
{/* Abstract Graphic for Integrations */}
<div className="relative h-[400px] bg-zinc-50 rounded-[40px] border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
{/* Central Hub */}
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-2xl flex items-center justify-center border-4 border-red-50 group hover:scale-110 transition-transform duration-500">
<div className="text-2xl font-black text-red-600 tracking-tighter uppercase ">Dashboard</div>
</div>
{/* Connecting Lines */}
<div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
<div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
{/* Satellite Nodes */}
<div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[-5px] transition-transform">
<div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
<LineChart className="w-5 h-5" />
</div>
</div>
<div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[5px] transition-transform">
<div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
<Zap className="w-5 h-5" />
</div>
</div>
<div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[-5px] transition-transform">
<div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600">
<Search className="w-5 h-5" />
</div>
</div>
<div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-2xl shadow-xl border border-zinc-200 flex items-center justify-center group hover:translate-y-[5px] transition-transform">
<div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600">
<PieChart className="w-5 h-5" />
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] rounded-[40px] overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border-8 border-white bg-white"
>
<Image
src={DashboardTwo}
alt="Dine360 Integration Dashboard"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</section>
{/* QUICK NAV */}
@ -377,3 +356,6 @@ const BusinessDashboardPage = () => {
};
export default BusinessDashboardPage;

42
src/app/features/inventory-management/page.tsx
View File

@ -18,10 +18,14 @@ import {
ClipboardList
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import InventoryImage from '@/assets/features/inventory-management/inventory-management.webp';
const InventoryManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -76,31 +80,27 @@ const InventoryManagementPage = () => {
{/* Lower Split Section matching the image */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Inventory Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Layers className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Layers className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Menu className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
>
<Image
src={InventoryImage}
alt="Dine360 Inventory Management System"
className="w-full h-auto object-cover"
/>
</motion.div>
</div>
{/* Right: Text Content */}
{/* Right: Text Content */}
<div className="space-y-6 order-1 lg:order-2">
<span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">

37
src/app/features/invoicing/page.tsx
View File

@ -27,10 +27,14 @@ import {
History
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import InvoiceImage from '@/assets/features/invoice/invoice.webp';
const InvoicingPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -88,26 +92,19 @@ const InvoicingPage = () => {
{/* Left: Illustration Graphic */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<FileText className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Receipt className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<CreditCard className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={InvoiceImage}
alt="Invoice Management"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}

85
src/app/features/kitchen-management/page.tsx
View File

@ -15,10 +15,15 @@ import {
ChefHat
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import KDSOne from '@/assets/features/kds-20260406T072434Z-1-001/kds/kds-1.webp';
import KDSTwo from '@/assets/features/kds-20260406T072434Z-1-001/kds/kds-2.webp';
const KitchenManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -74,31 +79,26 @@ const KitchenManagementPage = () => {
{/* SECTION 2: KITCHEN DISPLAY */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: KDS Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Monitor className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<ChefHat className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Menu className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={KDSOne}
alt="Dine360 Kitchen Display System"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
{/* Right: Text Content */}
<div className="space-y-6 order-1 lg:order-2">
<span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@ -291,35 +291,24 @@ const KitchenManagementPage = () => {
</div>
</div>
{/* Abstract Graphic for Integrations */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
{/* Central Hub */}
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<div className="text-2xl font-black text-red-600">KDS</div>
</div>
{/* Connecting Lines */}
<div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
<div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
{/* Satellite Nodes */}
<div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<div className="w-8 h-8 bg-blue-100 rounded-full"></div>
</div>
<div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<div className="w-8 h-8 bg-green-100 rounded-full"></div>
</div>
<div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<div className="w-8 h-8 bg-orange-100 rounded-full"></div>
</div>
<div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<div className="w-8 h-8 bg-purple-100 rounded-full"></div>
</div>
</div>
{/* KDS Integration Image */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] rounded-3xl overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border-8 border-white bg-white"
>
<Image
src={KDSTwo}
alt="Dine360 KDS Integration"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</section>
{/* QUICK NAV */}
<FeatureQuickNav />

65
src/app/features/loyalty-management/page.tsx
View File

@ -30,10 +30,15 @@ import {
Star, RefreshCw, UserPlus
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import CRMOne from '@/assets/features/crm/crm-1.webp';
import CRMTwo from '@/assets/features/crm/crm-2.webp';
const LoyaltyManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -88,29 +93,21 @@ const LoyaltyManagementPage = () => {
{/* Lower Split Section */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: CRM Image One */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Users className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Heart className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<UserPlus className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Star className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white/50 bg-white"
>
<Image
src={CRMOne}
alt="Dine360 Customer Relationship Management"
className="w-full h-auto object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
@ -165,14 +162,14 @@ const LoyaltyManagementPage = () => {
{/* SECTION 3: CUSTOMER INSIGHTS (Professional Design) */}
<section className="bg-zinc-950 text-white py-32 px-6 relative overflow-hidden">
{/* Decorative background elements */}
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-red-600/5 to-transparent"></div>
<div className="absolute top-0 right-0 w-1/2 h-full bg-linear-to-l from-red-600/5 to-transparent"></div>
<div className="absolute -bottom-24 -left-24 w-96 h-96 bg-red-600/10 rounded-full blur-[120px]"></div>
<div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="flex flex-col lg:flex-row lg:items-end justify-between mb-20 gap-8">
<div className="max-w-2xl text-left">
<div className="inline-flex items-center gap-2 mb-6 text-red-500">
<span className="w-12 h-[2px] bg-red-600"></span>
<span className="w-12 h-0.5 bg-red-600"></span>
<span className="font-bold uppercase tracking-[0.2em] text-sm">Customer Insights</span>
</div>
<h2 className="text-4xl md:text-5xl font-bold mb-6 uppercase tracking-tight leading-none">
@ -320,13 +317,19 @@ const LoyaltyManagementPage = () => {
</div>
{/* Abstract Graphic area - keeping structure as-is */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<Users className="w-16 h-16 text-red-600" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
>
<Image
src={CRMTwo}
alt="Unified CRM"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</section>
{/* QUICK NAV */}
@ -357,3 +360,5 @@ const LoyaltyManagementPage = () => {
};
export default LoyaltyManagementPage;

81
src/app/features/multi-menu-management/page.tsx
View File

@ -1,4 +1,4 @@
'use client';
'use client';
import {
ArrowRight,
@ -17,10 +17,15 @@ import {
Globe
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import MultiBranchOne from '@/assets/features/multi-branch/multi-branch-1.webp';
import MultiBranchTwo from '@/assets/features/multi-branch/multi-branch-2.webp';
const MultiBranchManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -76,31 +81,27 @@ const MultiBranchManagementPage = () => {
{/* SECTION 2: MULTI-LOCATION MANAGEMENT */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Multi-Branch Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Network className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Globe className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Users className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<LayoutDashboard className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border border-zinc-200"
>
<Image
src={MultiBranchOne}
alt="Dine360 Multi-Branch Dashboard"
className="w-full h-auto object-cover"
/>
</motion.div>
</div>
{/* Right: Text Content */}
{/* Right: Text Content */}
<div className="space-y-6 order-1 lg:order-2">
<span className="inline-block px-5 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-bold uppercase tracking-wider border border-red-100">
@ -293,32 +294,16 @@ const MultiBranchManagementPage = () => {
</div>
</div>
{/* Abstract Graphic for Integrations */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
{/* Central Hub */}
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<div className="text-2xl font-black text-red-600 uppercase">HUB</div>
</div>
{/* Connecting Lines */}
<div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
<div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
{/* Satellite Nodes */}
<div className="absolute top-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<Globe className="w-8 h-8 text-blue-500" />
</div>
<div className="absolute bottom-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<Users className="w-8 h-8 text-green-500" />
</div>
<div className="absolute top-10 right-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<ClipboardList className="w-8 h-8 text-orange-500" />
</div>
<div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<Layers className="w-8 h-8 text-purple-500" />
</div>
{/* Multi-Branch Integration Image */}
<div className="relative h-[400px] rounded-3xl overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border border-zinc-200">
<Image
src={MultiBranchTwo}
alt="Dine360 Multi-Branch Integration"
layout="fill"
objectFit="cover"
className="hover:scale-105 transition-transform duration-700"
/>
<div className="absolute inset-0 bg-gradient-to-tr from-zinc-950/40 to-transparent" />
</div>
</section>

58
src/app/features/order-management/page.tsx
View File

@ -28,10 +28,15 @@ import {
Utensils
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import SalesOne from '@/assets/features/sales/sales-1.webp';
import SalesTwo from '@/assets/features/sales/sales-2.webp';
const OrderManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -89,26 +94,19 @@ const OrderManagementPage = () => {
{/* Left: Illustration Graphic */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<BarChart3 className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<TrendingUp className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Layers className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={SalesOne}
alt="Sales Performance Dashboard"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
@ -268,13 +266,19 @@ const OrderManagementPage = () => {
</div>
{/* Abstract Graphic area - keeping structure as-is */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<BarChart3 className="w-16 h-16 text-red-600" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
>
<Image
src={SalesTwo}
alt="Unified Sales Hub"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</section>
{/* QUICK NAV */}

64
src/app/features/pos/page.tsx
View File

@ -18,10 +18,14 @@ import {
Target
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import POSImage from '@/assets/features/pos/pos.webp';
const POSPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -79,54 +83,22 @@ const POSPage = () => {
{/* SECTION 2: HARDWARE & MOBILE (Split Layout) */}
<section className="py-32 px-6">
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
{/* Left: Interactive Graphic */}
{/* Left: POS Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -inset-10 bg-gradient-to-tr from-red-600/20 to-transparent blur-3xl opacity-50 -z-10 rounded-full"></div>
<div className="relative bg-zinc-950 rounded-[40px] p-12 border border-zinc-800 shadow-3xl overflow-hidden aspect-square flex flex-col justify-center">
<div className="absolute top-0 right-0 w-64 h-64 bg-red-600/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl"></div>
{/* POS Screen Simulation */}
<div className="relative z-10 space-y-6">
<div className="flex items-center justify-between border-b border-zinc-800 pb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-red-600 rounded-lg flex items-center justify-center text-white font-black text-xs ">D360</div>
<div>
<div className="text-white font-bold text-sm tracking-tight uppercase">Checkout #4</div>
<div className="text-zinc-500 text-[10px] font-bold">12:45 PM | OPERATOR: SARAH</div>
</div>
</div>
<Wifi className="w-4 h-4 text-green-500" />
</div>
<div className="space-y-3">
{[
{ item: 'Margherita Pizza (Large)', price: '$18.00' },
{ item: 'Garlic Bread Sticks', price: '$6.50' },
{ item: 'Classic Cola', price: '$3.00' }
].map((line, i) => (
<div key={i} className="flex justify-between text-sm py-1 border-b border-zinc-900">
<span className="text-zinc-300">{line.item}</span>
<span className="text-white font-bold font-mono">{line.price}</span>
</div>
))}
</div>
<div className="pt-4 space-y-2">
<div className="flex justify-between text-xs text-zinc-500 font-bold uppercase">
<span>Subtotal</span>
<span>$27.50</span>
</div>
<div className="flex justify-between text-2xl text-white font-black tracking-tighter uppercase pt-2 border-t border-zinc-800">
<span>Total</span>
<span className="text-red-500">$29.84</span>
</div>
</div>
<button className="w-full bg-red-600 text-white font-black py-4 rounded-xl shadow-lg shadow-red-600/20 uppercase tracking-widest text-sm hover:bg-red-500 transition-colors">
Process Payment (F10)
</button>
</div>
</div>
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative rounded-[40px] overflow-hidden shadow-3xl border border-zinc-200"
>
<Image
src={POSImage}
alt="Dine360 POS System Terminal"
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Content */}

39
src/app/features/promotion-management/page.tsx
View File

@ -29,10 +29,14 @@ import {
Truck
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import PromotionImage from '@/assets/features/purchase-promotions/purchase-promotions.webp';
const PromotionManagementPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -87,29 +91,22 @@ const PromotionManagementPage = () => {
{/* SECTION 2: SUPPLY MANAGEMENT */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Promotion Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Tag className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Users className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<ClipboardList className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
>
<Image
src={PromotionImage}
alt="Dine360 Purchase & Promotion Management"
className="w-full h-auto object-cover"
/>
</motion.div>
</div>
{/* Right: Text Content */}

73
src/app/features/promotions/page.tsx
View File

@ -20,9 +20,14 @@ import {
ArrowUpRight
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
// Visual Assets
import PromotionOne from '@/assets/features/promotions/promotions-1.webp';
import PromotionTwo from '@/assets/features/promotions/promotions-2.webp';
const PromotionsPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -78,29 +83,22 @@ const PromotionsPage = () => {
{/* SECTION 2: PROMOTION ENGINE */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Promotion Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Megaphone className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<TicketPercent className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<MousePointer2 className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Calendar className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<Sparkles className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200"
>
<Image
src={PromotionOne}
alt="Dine360 Smart Promotions System"
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
@ -295,29 +293,16 @@ const PromotionsPage = () => {
</div>
</div>
{/* Abstract Graphic for Integrations */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
{/* Central Hub */}
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<div className="text-2xl font-black text-red-600">OFFER</div>
</div>
{/* Orbiting Elements */}
<div className="absolute w-64 h-64 border border-red-100 rounded-full animate-[spin_20s_linear_infinite]"></div>
<div className="absolute w-80 h-80 border border-zinc-200 rounded-full animate-[spin_30s_linear_infinite_reverse]"></div>
{/* Connection Points */}
<div className="absolute top-1/4 left-1/4 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-red-600 z-20">
<TicketPercent className="w-6 h-6" />
</div>
<div className="absolute bottom-1/4 right-1/4 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-orange-600 z-20">
<Gift className="w-6 h-6" />
</div>
<div className="absolute top-1/2 -right-6 w-12 h-12 bg-white rounded-xl shadow-lg border border-zinc-100 flex items-center justify-center text-blue-600 z-20">
<Users className="w-6 h-6" />
</div>
{/* Promotion Integration Image */}
<div className="relative h-[400px] rounded-[40px] overflow-hidden flex items-center justify-center order-1 lg:order-2 shadow-2xl border border-zinc-200">
<Image
src={PromotionTwo}
alt="Dine360 Promotion Integration"
layout="fill"
objectFit="cover"
className="hover:scale-105 transition-transform duration-700"
/>
<div className="absolute inset-0 bg-gradient-to-tr from-zinc-950/40 to-transparent" />
</div>
</section>
</main>

68
src/app/features/qr-code-menu/page.tsx
View File

@ -26,10 +26,15 @@ import {
Tags
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import OnlineOrderingOne from '@/assets/features/online-ordering/online-ordering-1.webp';
import OnlineOrderingTwo from '@/assets/features/online-ordering/online-ordering-2.webp';
const QRCodeMenuPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -87,26 +92,19 @@ const QRCodeMenuPage = () => {
{/* Left: Illustration Graphic */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<QrCode className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Smartphone className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Menu className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={OnlineOrderingOne}
alt="QR Code Menu"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
@ -189,23 +187,19 @@ const QRCodeMenuPage = () => {
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-t from-pink-600/20 to-transparent rounded-3xl blur-2xl"></div>
<div className="relative bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl flex flex-col items-center text-center">
<QrCode className="w-32 h-32 text-white mb-6" />
<p className="text-zinc-400 mb-6 font-mono text-sm">SCAN TO VIEW MENU</p>
<div className="w-full bg-zinc-900 rounded-xl p-4 border border-zinc-800">
<div className="flex items-center space-x-3 mb-2">
<div className="w-10 h-10 bg-zinc-800 rounded-md"></div>
<div className="flex-1 h-2 bg-zinc-800 rounded"></div>
</div>
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-zinc-800 rounded-md"></div>
<div className="flex-1 h-2 bg-zinc-800 rounded"></div>
</div>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center p-4"
>
<Image
src={OnlineOrderingTwo}
alt="Dynamic QR Menu"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
</section>

62
src/app/features/restaurant-website/page.tsx
View File

@ -14,10 +14,15 @@ import {
CreditCard
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import SalesOne from '@/assets/features/sales/sales-1.webp';
import SalesTwo from '@/assets/features/sales/sales-2.webp';
const RestaurantWebsitePage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -76,26 +81,19 @@ const RestaurantWebsitePage = () => {
{/* Left: Illustration Graphic */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Smartphone className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Globe className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<CreditCard className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-white bg-white h-[400px] lg:h-[500px]"
>
<Image
src={SalesOne}
alt="Online Ordering System"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}
@ -291,15 +289,19 @@ const RestaurantWebsitePage = () => {
</div>
{/* Abstract Graphic for Integrations */}
<div className="relative h-[400px] bg-zinc-50 rounded-3xl border border-zinc-200 overflow-hidden flex items-center justify-center order-1 lg:order-2">
<div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
{/* Central Hub */}
<div className="relative z-10 w-32 h-32 bg-white rounded-full shadow-xl flex items-center justify-center border-4 border-red-50">
<div className="text-2xl font-black text-red-600 text-center leading-none">ONLINE<br/>HUB</div>
</div>
{/* Connecting Lines */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative h-[400px] lg:h-[500px] bg-white rounded-3xl border-8 border-white shadow-2xl overflow-hidden flex items-center justify-center order-1 lg:order-2"
>
<Image
src={SalesTwo}
alt="Sales Hub"
fill
className="object-contain hover:scale-105 transition-transform duration-700"
/>
</motion.div>
<div className="absolute w-[80%] h-[1px] bg-zinc-300"></div>
<div className="absolute w-[1px] h-[80%] bg-zinc-300"></div>
@ -316,7 +318,7 @@ const RestaurantWebsitePage = () => {
<div className="absolute bottom-10 left-10 w-16 h-16 bg-white rounded-xl shadow-lg border border-zinc-200 flex items-center justify-center">
<div className="w-8 h-8 bg-purple-100 rounded-full"></div>
</div>
</div>
</section>
{/* QUICK NAV */}

42
src/app/features/table-reservation/page.tsx
View File

@ -27,10 +27,14 @@ import {
Tags
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import TableReservationImage from '@/assets/features/table-reservation/table-reseravtion.webp';
const TableReservationPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -85,29 +89,25 @@ const TableReservationPage = () => {
{/* SECTION 2: TABLE RESERVATION SPLIT */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Table Reservation Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Calendar className="w-20 h-20" />
</div>
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative rounded-[40px] overflow-hidden shadow-2xl border border-zinc-200 bg-white"
>
<Image
src={TableReservationImage}
alt="Dine360 Table Reservation System"
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<LayoutGrid className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<Users className="w-7 h-7" />
</div>
</div>
{/* Right: Text Content */}
</div>
{/* Right: Text Content */}
@ -156,7 +156,7 @@ const TableReservationPage = () => {
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</button>
</div>
</div>
</section>
{/* SECTION 3: FLOOR MANAGEMENT (Stats) */}

54
src/app/features/team-communication/page.tsx
View File

@ -18,10 +18,14 @@ import {
Flag
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import TeamCommImage from '@/assets/features/team-communiaction/team-communiaction.webp';
const TeamCommunicationPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -80,44 +84,18 @@ const TeamCommunicationPage = () => {
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
{/* Left Graphics */}
<div className="relative">
<div className="relative w-full max-w-[400px] mx-auto">
{/* Phone Frame mock */}
<div className="bg-zinc-950 rounded-[3rem] p-4 border-[8px] border-zinc-900 shadow-3xl aspect-[9/19] overflow-hidden flex flex-col">
<div className="w-20 h-6 bg-zinc-900 rounded-full mx-auto mb-6"></div>
<div className="flex-1 space-y-4 px-2">
<div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
<div className="text-[10px] text-zinc-500 font-black mb-2 uppercase">Kitchen Station</div>
<div className="text-white text-xs font-bold leading-tight">Order #102 is taking longer than 15 mins. Need assistance?</div>
</div>
<div className="bg-red-600 rounded-2xl p-4 text-white">
<div className="text-[10px] text-red-200 font-black mb-2 uppercase">Manager Alert</div>
<div className="text-xs font-bold leading-tight">Table 12 just ordered a $400 bottle. VIP Protocol active.</div>
</div>
<div className="bg-zinc-800 rounded-2xl p-4">
<div className="text-[10px] text-zinc-400 font-bold mb-2 uppercase tracking-widest">Shift Poll</div>
<div className="text-white text-xs mb-3">Who's available for Sunday brunch double?</div>
<div className="flex gap-2">
<div className="w-6 h-6 bg-zinc-700 rounded-full border border-white"></div>
<div className="w-6 h-6 bg-zinc-600 rounded-full"></div>
<div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-[10px]">+3</div>
</div>
</div>
</div>
<div className="h-1 bg-zinc-800 w-1/3 mx-auto mt-6 rounded-full mb-2"></div>
</div>
{/* Floating Elements */}
<div className="absolute -top-10 -right-10 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center rotate-6 border border-zinc-100">
<MessageCircle className="w-10 h-10 text-red-600" />
</div>
<div className="absolute bottom-20 -left-10 w-20 h-20 bg-zinc-950 rounded-full shadow-2xl flex items-center justify-center -rotate-12 border-4 border-white">
<Zap className="w-8 h-8 text-yellow-400" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-[40px] overflow-hidden shadow-[0_50px_100px_-20px_rgba(0,0,0,0.25)] border border-zinc-200"
>
<Image
src={TeamCommImage}
alt="Dine360 Team Communication Mobile App"
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right Content */}

38
src/app/features/uber-integration/page.tsx
View File

@ -35,10 +35,14 @@ import {
RefreshCw
} from 'lucide-react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import FeatureQuickNav from '@/components/FeatureQuickNav';
// Visual Assets
import UberImage from '@/assets/features/uber/uber.webp';
const UberIntegrationPage = () => {
return (
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
@ -93,29 +97,21 @@ const UberIntegrationPage = () => {
{/* SECTION 2: DELIVERY PLATFORM INTEGRATION */}
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
{/* Left: Illustration Graphic */}
{/* Left: Uber Image */}
<div className="relative order-2 lg:order-1">
<div className="absolute -top-10 -left-10 w-64 h-64 bg-red-100 rounded-full blur-3xl opacity-50 -z-10"></div>
<div className="relative bg-white p-8 md:p-12 rounded-full border border-zinc-100 shadow-2xl aspect-square flex items-center justify-center max-sm:mx-auto overflow-visible">
{/* Central Icon */}
<div className="w-40 h-40 bg-zinc-50 rounded-full flex items-center justify-center text-red-600 shadow-inner border border-zinc-100">
<Globe className="w-20 h-20" />
</div>
{/* Floating Icons */}
<div className="absolute -top-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-red-500 border border-zinc-50 hover:scale-110 transition-transform">
<Smartphone className="w-7 h-7" />
</div>
<div className="absolute top-1/2 -right-4 -translate-y-1/2 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-blue-500 border border-zinc-50 hover:scale-110 transition-transform">
<Bike className="w-7 h-7" />
</div>
<div className="absolute -bottom-4 right-10 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-orange-500 border border-zinc-50 hover:scale-110 transition-transform">
<Clock className="w-7 h-7" />
</div>
<div className="absolute top-1/4 -left-6 w-14 h-14 bg-white rounded-full shadow-lg flex items-center justify-center text-emerald-500 border border-zinc-50 hover:scale-110 transition-transform">
<CheckCircle className="w-7 h-7" />
</div>
</div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="relative rounded-3xl overflow-hidden shadow-2xl border border-zinc-200"
>
<Image
src={UberImage}
alt="Dine360 Uber and Delivery Integration"
className="w-full h-auto object-cover hover:scale-105 transition-transform duration-700"
/>
</motion.div>
</div>
{/* Right: Text Content */}

6
src/app/globals.css
View File

@ -12,6 +12,12 @@
--font-mono: var(--font-geist-mono);
--color-brand-red: #dc2626;
--color-brand-cream: #f9f9f5;
--animate-infinite-scroll: infinite-scroll 40s linear infinite;
@keyframes infinite-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
}
body {

330
src/app/restaurant-types/page.tsx
View File

@ -2,7 +2,12 @@
import React, { useState } from 'react'
import Image from 'next/image'
import { ArrowUpRight, Zap, RefreshCw, Clock, Target, Truck, Coffee, Cloud, UtensilsCrossed, ChefHat, Gem, Users } from 'lucide-react'
import {
ArrowUpRight, Zap, RefreshCw, Clock, Target, Truck, Coffee, Cloud,
UtensilsCrossed, ChefHat, Gem, Users, Store, Beer, Flame,
Pizza, Sandwich, IceCream, Wine, Soup, Beef, Utensils,
ChevronLeft, ChevronRight, Layers
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
@ -66,6 +71,102 @@ const RESTAURANT_TYPES = [
angle: 315,
href: "/restaurant-types/family-style",
},
{
label: "Fast Casual",
icon: Flame,
description: "Combine speed with quality service. Our POS handles unique workflows for restaurants that bridge the gap between fast food and fine dining.",
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: "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: "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: "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: "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: "Buffet",
icon: Layers,
description: "Optimized for self-service or staff-assisted buffets. Track wastage, manage entry payments, and monitor kitchen refill rates.",
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: "Cafeteria",
icon: Soup,
description: "Built for institutional or corporate cafeterias. Handle meal plans, quick-tap payments, and large-scale bulk ordering.",
href: "/restaurant-types/cafeteria",
},
{
label: "Teppanyaki",
icon: Flame,
description: "Experience-led dining. Sync chef stations with POS orders and manage theater-style seating arrangements.",
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: "Concession",
icon: Sandwich,
description: "Built for stadiums and events. Handle extreme peak waves with offline-readiness and high-speed tap-to-pay processing.",
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",
},
]
const HERO_IMAGES = [
@ -111,6 +212,28 @@ const RESTAURANT_TYPE_EMOJIS: Record<string, string> = {
const RestaurantTypesPage = () => {
const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
const [hoveredCardIdx, setHoveredCardIdx] = useState<number | null>(null)
const [currentPage, setCurrentPage] = useState(0)
const [direction, setDirection] = useState(1) // 1 for next, -1 for previous
const itemsPerPage = 8
const totalPages = Math.ceil(RESTAURANT_TYPES.length / itemsPerPage)
const nextPage = () => {
setDirection(1)
setCurrentPage((prev) => (prev + 1) % totalPages)
}
const prevPage = () => {
setDirection(-1)
setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages)
}
const currentItems = RESTAURANT_TYPES.slice(
currentPage * itemsPerPage,
(currentPage + 1) * itemsPerPage
)
const diagramItems = RESTAURANT_TYPES.slice(0, 8)
return (
<div className="min-h-screen bg-black font-sans selection:bg-red-600 selection:text-white">
<Navbar />
@ -468,8 +591,9 @@ const RestaurantTypesPage = () => {
className="absolute inset-0 w-full h-full pointer-events-none"
viewBox="0 0 580 580"
>
{RESTAURANT_TYPES.map((type, idx) => {
const rad = (type.angle * Math.PI) / 180
{diagramItems.map((type, idx) => {
const angle = type.angle ?? (idx * (360 / diagramItems.length))
const rad = (angle * Math.PI) / 180
const r = 210
const rInner = 90
const x1 = 290 + rInner * Math.sin(rad)
@ -525,10 +649,10 @@ const RestaurantTypesPage = () => {
className="flex flex-col items-center gap-2"
>
<span className="text-red-500 font-black uppercase tracking-[0.18em] text-[10px]">
{RESTAURANT_TYPES[hoveredIdx].label}
{diagramItems[hoveredIdx].label}
</span>
<span className="text-white text-sm leading-snug font-semibold">
{RESTAURANT_TYPES[hoveredIdx].description}
{diagramItems[hoveredIdx].description}
</span>
</motion.div>
)}
@ -537,8 +661,9 @@ const RestaurantTypesPage = () => {
</div>
{/* Nodes */}
{RESTAURANT_TYPES.map((type, idx) => {
const rad = (type.angle * Math.PI) / 180
{diagramItems.map((type, idx) => {
const angle = type.angle ?? (idx * (360 / diagramItems.length))
const rad = (angle * Math.PI) / 180
const r = 210
const cx = 290 + r * Math.sin(rad)
const cy = 290 - r * Math.cos(rad)
@ -591,82 +716,143 @@ const RestaurantTypesPage = () => {
</section>
{/* ─── RESTAURANT TYPES CARD GRID ─────────────────────────────── */}
<section className="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-zinc-100">
<div className="max-w-7xl mx-auto">
<section className="py-20 sm:py-24 px-4 sm:px-6 lg:px-8 bg-white border-t border-white/5 relative">
{/* Subtle noise pattern for texture */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '16px 16px' }}></div>
<div className="max-w-7xl mx-auto relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45 }}
className="mb-8 sm:mb-10 text-center"
className="mb-12 text-center"
>
<p className="text-red-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-2">View All Types</p>
<h3 className="text-zinc-900 text-2xl sm:text-3xl font-black">Built for All Restaurant Types</h3>
<p className="text-red-600 font-bold uppercase tracking-[0.3em] text-[11px] mb-3">Explore All Models</p>
<h3 className="text-black text-3xl sm:text-4xl md:text-5xl font-black mb-6">Designed For Every Scale</h3>
<div className="flex items-center justify-center gap-6">
<button
onClick={prevPage}
className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
aria-label="Previous Page"
>
<div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
<div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
<ChevronLeft className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
</button>
<div className="flex gap-2 bg-black/5 px-4 py-3 rounded-2xl">
{[...Array(totalPages)].map((_, i) => (
<button
key={i}
onClick={() => setCurrentPage(i)}
className={`h-2 rounded-full transition-all duration-300 ${
currentPage === i ? 'w-8 bg-red-600 shadow-sm shadow-red-600/30' : 'w-2 bg-black/20 hover:bg-black/40'
}`}
/>
))}
</div>
<button
onClick={nextPage}
className="group relative flex items-center justify-center w-14 h-14 transition-all active:scale-95"
aria-label="Next Page"
>
<div className="absolute inset-0 rounded-2xl border border-black/50 bg-white shadow-sm group-hover:border-red-600 transition-colors" />
<div className="absolute inset-0 rounded-2xl bg-red-600 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100" />
<ChevronRight className="relative w-6 h-6 text-black group-hover:text-white transition-colors" />
</button>
</div>
</motion.div>
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-5">
{RESTAURANT_TYPES.map((type, idx) => {
const isHovered = hoveredCardIdx === idx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 perspective-[2000px]">
<AnimatePresence mode="wait">
<motion.div
key={currentPage}
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 col-span-full"
style={{ transformStyle: 'preserve-3d' }}
>
{currentItems.map((type, idx) => {
const isHovered = hoveredCardIdx === idx
return (
<motion.div
key={type.label}
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45, delay: idx * 0.04 }}
whileHover={{ y: -6 }}
>
<Link
href={type.href}
className="group block rounded-2xl border transition-all duration-300 relative overflow-hidden h-full p-5 sm:p-6"
style={{
backgroundColor: isHovered ? '#ffffff' : '#18181b', // White on hover, Black default
borderColor: isHovered ? '#dc2626' : '#27272a', // RED Border on hover
borderWidth: isHovered ? '2px' : '1px', // Thick border on hover
boxShadow: isHovered ? '0 16px 36px rgba(0,0,0,0.1)' : '0 6px 18px rgba(0,0,0,0.3)',
}}
onMouseEnter={() => setHoveredCardIdx(idx)}
onMouseLeave={() => setHoveredCardIdx(null)}
>
{/* Background Glow Effect on Hover - Subtle warm tint */}
<div className={`absolute inset-0 bg-gradient-to-br from-red-50/50 to-transparent transition-opacity duration-300 pointer-events-none ${isHovered ? 'opacity-100' : 'opacity-0'}`} />
<div
className={`w-16 h-16 rounded-full border flex items-center justify-center text-3xl shadow-sm mb-4 transition-all duration-300 group-hover:scale-105 relative z-10 text-white ${
isHovered
? 'bg-red-500 border-red-600'
: 'bg-zinc-800 border-zinc-700'
}`}
>
<type.icon aria-hidden="true" className="w-8 h-8 transition-all duration-300 text-white" />
</div>
<h4 className={`text-2xl leading-tight font-black mb-2 relative z-10 transition-colors duration-300 ${
isHovered ? 'text-red-600' : 'text-white' // Red Title on Hover
}`}>
{type.label}
</h4>
<p className={`text-base leading-relaxed mb-6 relative z-10 transition-colors duration-300 ${
isHovered ? 'text-zinc-600' : 'text-zinc-400'
}`}>
{type.description}
</p>
<span
className="inline-flex items-center justify-center rounded-xl px-4 py-2 font-semibold text-sm transition-all duration-300 relative z-10"
style={{
backgroundColor: '#dc2626',
border: `1px solid #dc2626`,
color: '#ffffff',
return (
<motion.div
key={type.label}
initial={{ opacity: 0, rotateY: 180 * direction, scale: 0.8 }}
animate={{
opacity: 1,
rotateY: 0,
scale: 1,
transition: {
delay: direction === 1 ? idx * 0.1 : (7 - idx) * 0.1,
duration: 0.7,
ease: [0.34, 1.56, 0.64, 1]
}
}}
exit={{
opacity: 0,
rotateY: -180 * direction,
scale: 0.8,
transition: {
delay: direction === 1 ? (7 - idx) * 0.05 : idx * 0.05,
duration: 0.5
}
}}
whileHover={{ y: -8 }}
className="h-full"
style={{ transformStyle: 'preserve-3d', backfaceVisibility: 'hidden' }}
>
Learn More →
</span>
</Link>
</motion.div>
)
})}
<Link
href={type.href}
className="group block rounded-3xl border transition-all duration-500 relative overflow-hidden h-full p-7"
style={{
backgroundColor: isHovered ? '#ffffff' : '#111111',
borderColor: isHovered ? '#dc2626' : 'rgba(255,255,255,0.05)',
boxShadow: isHovered ? '0 30px 60px -12px rgba(220,38,38,0.2)' : '0 10px 30px -10px rgba(0,0,0,0.5)',
}}
onMouseEnter={() => setHoveredCardIdx(idx)}
onMouseLeave={() => setHoveredCardIdx(null)}
>
{/* Hover Accent Line */}
<div className={`absolute top-0 left-0 w-full h-1.5 bg-red-600 transition-transform duration-500 ${isHovered ? 'translate-y-0' : '-translate-y-full'}`} />
<div
className={`w-14 h-14 rounded-2xl border flex items-center justify-center mb-6 transition-all duration-500 relative z-10 ${
isHovered
? 'bg-red-600 border-red-600 text-white shadow-lg shadow-red-600/30 rotate-12'
: 'bg-red-600/10 border-red-900/20 text-red-500'
}`}
>
<type.icon aria-hidden="true" className="w-7 h-7" />
</div>
<h4 className={`text-2xl font-black mb-3 leading-tight relative z-10 transition-colors duration-300 ${
isHovered ? 'text-zinc-900' : 'text-white'
}`}>
{type.label}
</h4>
<p className={`text-sm leading-relaxed mb-8 relative z-10 transition-colors duration-300 ${
isHovered ? 'text-zinc-600' : 'text-zinc-400'
}`}>
{type.description}
</p>
<div className="mt-auto flex items-center justify-between relative z-10">
<span
className={`text-xs font-black uppercase tracking-wider flex items-center gap-1 transition-colors duration-300 ${
isHovered ? 'text-red-600' : 'text-white/40'
}`}
>
Learn More <ArrowUpRight className="w-3.5 h-3.5" />
</span>
</div>
</Link>
</motion.div>
)
})}
</motion.div>
</AnimatePresence>
</div>
</div>
</section>

2
src/app/sitemap.ts
View File

@ -1,5 +1,7 @@
import { MetadataRoute } from 'next'
export const dynamic = "force-static"
export default function sitemap(): MetadataRoute.Sitemap {
const baseUrl = "https://dine360.vercel.app"

BIN
src/assets/features/crm/crm-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/features/crm/crm-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/features/dashboard/dashboard-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/features/dashboard/dashboard-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/features/inventory-management/inventory-management.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/features/invoice/invoice.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/features/kds-20260406T072434Z-1-001/kds/kds-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/features/kds-20260406T072434Z-1-001/kds/kds-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

0
src/assets/logo/dine360.jpeg → src/assets/features/logo/dine360.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/features/multi-branch/multi-branch-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/features/multi-branch/multi-branch-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/features/online-ordering/online-ordering-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/assets/features/online-ordering/online-ordering-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/features/pos/pos.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/features/promotions/promotions-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/features/promotions/promotions-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/features/purchase-promotions/purchase-promotions.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/assets/features/sales/sales-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/features/sales/sales-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/features/table-reservation/table-reseravtion.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/features/team-communiaction/team-communiaction.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/assets/features/uber/uber.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

71
src/components/FeatureQuickNav.tsx
View File

@ -1,6 +1,7 @@
'use client';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
Monitor,
BookOpen,
@ -9,46 +10,76 @@ import {
Users,
QrCode,
Tag,
Layers
Layers,
LayoutDashboard,
ChefHat,
Heart,
FileText,
MessageSquare,
Bike,
TicketPercent
} from 'lucide-react';
const navItems = [
{ name: 'POS', href: '/features/pos-management', icon: Monitor, color: 'bg-emerald-400' },
{ name: 'DASHBOARD', href: '/features/business-dashboard', icon: LayoutDashboard, color: 'bg-indigo-500' },
{ name: 'POS', href: '/features/pos', icon: Monitor, color: 'bg-emerald-400' },
{ name: 'MENU', href: '/features/multi-menu-management', icon: BookOpen, color: 'bg-sky-400' },
{ name: 'ORDERS', href: '/features/order-management', icon: ClipboardList, color: 'bg-orange-400' },
{ name: 'KITCHEN', href: '/features/kitchen-management', icon: ChefHat, color: 'bg-red-500' },
{ name: 'TABLES', href: '/features/table-reservation', icon: Users, color: 'bg-purple-400' },
{ name: 'WEBSITE', href: '/features/restaurant-website', icon: Globe, color: 'bg-emerald-500' },
{ name: 'LOYALTY', href: '/features/loyalty-management', icon: Heart, color: 'bg-pink-500' },
{ name: 'QR CODE', href: '/features/qr-code-menu', icon: QrCode, color: 'bg-sky-500' },
{ name: 'INVOICING', href: '/features/invoicing', icon: FileText, color: 'bg-blue-500' },
{ name: 'PROMO', href: '/features/promotion-management', icon: Tag, color: 'bg-orange-500' },
{ name: 'OFFERS', href: '/features/promotions', icon: TicketPercent, color: 'bg-yellow-500' },
{ name: 'STOCK', href: '/features/inventory-management', icon: Layers, color: 'bg-purple-500' },
{ name: 'TEAM', href: '/features/team-communication', icon: MessageSquare, color: 'bg-teal-500' },
{ name: 'UBER', href: '/features/uber-integration', icon: Bike, color: 'bg-black' },
];
const FeatureQuickNav = () => {
return (
<section className="py-16 bg-slate-50 border-t border-zinc-100">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-10">
<h3 className="text-sm font-black uppercase tracking-[0.3em] text-zinc-400">Explore More Features</h3>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
{navItems.map((item) => (
<Link
key={item.name}
href={item.href}
className="relative bg-zinc-100 hover:bg-white p-6 rounded-lg transition-all duration-300 group shadow-sm hover:shadow-xl border-2 border-zinc-200 hover:border-zinc-300 flex flex-col items-center gap-4 text-center overflow-hidden"
>
{/* Colorful Top Border like the image */}
<div className={`absolute top-0 left-0 right-0 h-1.5 ${item.color}`}></div>
// Duplicate only once for CSS loop
const duplicatedItems = [...navItems, ...navItems];
<div className="text-zinc-500 group-hover:text-red-500 transition-colors">
<item.icon className="w-8 h-8 md:w-10 md:h-10" />
return (
<section className="py-16 bg-gray-300 text-whiteborder-y border-white/5 overflow-hidden">
<div className="max-w-7xl mx-auto px-6 mb-10">
<div className="text-center">
<h3 className="text-sm font-black uppercase tracking-[0.3em] text-zinc-500 flex items-center justify-center gap-4">
<span className="h-px w-8 bg-zinc-900"></span>
Explore All Features
<span className="h-px w-8 bg-zinc-800"></span>
</h3>
</div>
</div>
<div className="relative flex overflow-hidden group">
<div
className="flex gap-4 px-4 whitespace-nowrap animate-infinite-scroll group-hover:[animation-play-state:paused]"
>
{duplicatedItems.map((item, idx) => (
<Link
key={`${item.name}-${idx}`}
href={item.href}
className="relative w-40 flex-shrink-0 bg-zinc-900 hover:bg-white p-6 rounded-2xl transition-all duration-300 group/card shadow-sm hover:shadow-xl border border-white/5 hover:border-red-500 flex flex-col items-center gap-4 text-center overflow-hidden"
>
{/* Colorful Top Border */}
<div className={`absolute top-0 left-0 right-0 h-1 ${item.color}`}></div>
<div className="text-white group-hover/card:text-red-500 transition-colors transform group-hover/card:scale-110 duration-300">
<item.icon className="w-10 h-10" />
</div>
<span className="text-[10px] font-black tracking-widest uppercase text-zinc-400 group-hover:text-zinc-900 transition-colors">
<span className="text-[10px] font-black tracking-widest uppercase text-zinc-500 group-hover/card:text-zinc-950 transition-colors">
{item.name}
</span>
</Link>
))}
</div>
{/* Gradient Overlays for smooth entry/exit fade */}
<div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-zinc-950 to-transparent z-10 pointer-events-none"></div>
<div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-zinc-950 to-transparent z-10 pointer-events-none"></div>
</div>
</section>
);

144
src/components/Footer.tsx
View File

@ -50,13 +50,8 @@ const Footer = () => {
{ name: "Inventory Management", href: "/features/inventory-management" },
{ name: "Purchase & Promotions", href: "/features/promotion-management" },
{ name: "Uber Integration", href: "/features/uber-integration" },
{ name: "Invoicing", href: "/features/invoicing" },
{ name: "POS Management", href: "/features/pos" },
{ name: "Promotions", href: "/features/promotions" },
{ name: "Website & Online Ordering", href: "/features/restaurant-website" },
{ name: "Business Dashboard", href: "/features/business-dashboard" },
{ name: "Multi-Branch Management", href: "/features/multi-menu-management" },
{ name: "Team Communication", href: "/features/team-communication" },
{ name: "view all pages ", href: "/features " },
];
const restaurantTypeLinks = [
@ -67,23 +62,7 @@ const Footer = () => {
{ name: "Family Style Restaurant", href: "/restaurant-types/family-style" },
{ name: "Fast Food Restaurant", href: "/restaurant-types/fast-food" },
{ name: "Food Truck, Cart, or Stand", href: "/restaurant-types/food-truck" },
{ name: "Cafe", href: "/restaurant-types/cafe-bistro" },
{ name: "Buffet Restaurant", href: "/restaurant-types/buffet" },
{ name: "Pub", href: "/restaurant-types/pub" },
{ name: "Cafeteria", href: "/restaurant-types/cafeteria" },
{ name: "Coffee House", href: "/restaurant-types/coffee-house" },
{ name: "Diner", href: "/restaurant-types/diner" },
{ name: "Pop-Up Restaurant", href: "/restaurant-types/pop-up" },
{ name: "Contemporary Casual Restaurant", href: "/restaurant-types/contemporary-casual" },
{ name: "Bistro", href: "/restaurant-types/bistro" },
{ name: "Destination Restaurant", href: "/restaurant-types/destination" },
{ name: "Teppanyaki Grill", href: "/restaurant-types/teppanyaki" },
{ name: "Mongolian Barbecue", href: "/restaurant-types/mongolian-bbq" },
{ name: "Concession Stand", href: "/restaurant-types/concession" },
{ name: "Digital-Only Restaurant", href: "/restaurant-types/digital-only" },
{ name: "Theme Restaurant", href: "/restaurant-types/theme" },
{ name: "Bakery", href: "/restaurant-types/bakery" },
{ name: "Delivery-Only Restaurant", href: "/restaurant-types/delivery-only" },
{ name: "view all pages", href: "/restaurant-types" },
];
return (
@ -147,10 +126,10 @@ const Footer = () => {
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12"
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8"
>
{/* Column 1: Brand */}
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-4">
<motion.div variants={itemVariants} className="space-y-6">
<div className="flex flex-col gap-2">
<h2 className="text-4xl font-bold tracking-tighter uppercase relative inline-block">
Dine <span className="text-brand-red">360</span>
@ -181,7 +160,7 @@ const Footer = () => {
</motion.div>
{/* Column 2: Quick Links */}
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-2">
<motion.div variants={itemVariants} className="space-y-6">
<div className="flex flex-col items-start">
<h3 className="text-2xl font-bold whitespace-nowrap">Quick Links</h3>
<div className="h-1 w-10 bg-brand-red mt-2"></div>
@ -190,7 +169,7 @@ const Footer = () => {
{links.map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
{link.name}
</a>
</li>
@ -199,92 +178,41 @@ const Footer = () => {
</motion.div>
{/* Column 3: Features */}
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-6">
<motion.div variants={itemVariants} className="space-y-6">
<div className="flex flex-col items-start">
<h3 className="text-2xl font-bold whitespace-nowrap">Features</h3>
<div className="h-1 w-10 bg-brand-red mt-2"></div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 pt-4">
<ul className="space-y-4">
{featureLinks.slice(0, 7).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
{link.name}
</a>
</li>
))}
</ul>
<ul className="space-y-4">
{featureLinks.slice(7, 14).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform" />
{link.name}
</a>
</li>
))}
</ul>
</div>
<ul className="space-y-4 pt-4">
{featureLinks.map((link, i) => (
<li key={i}>
<a href={link.href} className={`flex items-center gap-2 transition-colors group text-base ${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white font-bold hover:text-gray-200' : 'text-gray-400 hover:text-brand-red'}`}>
<ChevronsRight size={16} className={`${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white' : 'text-brand-red'} group-hover:translate-x-1 transition-transform shrink-0`} />
{link.name}
</a>
</li>
))}
</ul>
</motion.div>
</motion.div>
{/* Column 4: Restaurant Types */}
<motion.div variants={itemVariants} className="space-y-6">
<div className="flex flex-col items-start">
<h3 className="text-2xl font-bold whitespace-nowrap">Restaurant Types</h3>
<div className="h-1 w-10 bg-brand-red mt-2"></div>
</div>
<ul className="space-y-4 pt-4">
{restaurantTypeLinks.map((link, i) => (
<li key={i}>
<a href={link.href} className={`flex items-center gap-2 transition-colors group text-base ${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white font-bold hover:text-gray-200' : 'text-gray-400 hover:text-brand-red'}`}>
<ChevronsRight size={16} className={`${link.name.trim().toLowerCase() === 'view all pages' ? 'text-white' : 'text-brand-red'} group-hover:translate-x-1 transition-transform shrink-0`} />
{link.name}
</a>
</li>
))}
</ul>
</motion.div>
{/* 2nd Main Row: Restaurant Types */}
<motion.div
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="pt-16 border-t border-white/10 mt-16"
>
<div className="flex flex-col items-start mb-8">
<h3 className="text-2xl font-bold whitespace-nowrap uppercase tracking-wider">Restaurant Types</h3>
<div className="h-1 w-12 bg-brand-red mt-2"></div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4">
<ul className="space-y-4">
{restaurantTypeLinks.slice(0, 6).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
{link.name}
</a>
</li>
))}
</ul>
<ul className="space-y-4">
{restaurantTypeLinks.slice(6, 12).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
{link.name}
</a>
</li>
))}
</ul>
<ul className="space-y-4">
{restaurantTypeLinks.slice(12, 18).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
{link.name}
</a>
</li>
))}
</ul>
<ul className="space-y-4">
{restaurantTypeLinks.slice(18, 24).map((link, i) => (
<li key={i}>
<a href={link.href} className="flex items-center gap-2 text-gray-400 hover:text-brand-red transition-colors group text-base">
<ChevronsRight size={16} className="text-brand-red group-hover:translate-x-1 transition-transform shrink-0" />
{link.name}
</a>
</li>
))}
</ul>
</div>
</motion.div>
</div>
@ -292,7 +220,7 @@ const Footer = () => {
<div className="bg-brand-red py-8 relative z-20">
<div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-white font-medium">
© All Copyright 2024 by Dine 360
© All Copyright 2026 by Dine 360
</p>
<div className="flex gap-4">
<Link href="/terms" className="text-white hover:bg-black bg-brand-red transition-all text-sm px-6 py-2.5 font-bold rounded-lg shadow-sm border-1 border-white">Terms & Condition</Link>

2
src/components/Navbar.tsx
View File

@ -3,7 +3,7 @@
import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Logo from '@/assets/logo/dine360.jpeg';
import Logo from '../../public/dine360.jpeg';
import { motion, AnimatePresence } from 'framer-motion';
import {
Monitor,