first commit
This commit is contained in:
Alaguraj0361
commit
ab0cbaac0d
9
.github/copilot-instructions.md
vendored
Normal file
9
.github/copilot-instructions.md
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
D:\metetroncube\odoo_marketing\src\app\restaurant-types\food-truck\page.tsx- [x] Verify that the copilot-instructions.md file in the .github directory is created.
|
||||
- [x] Clarify Project Requirements
|
||||
- [x] Scaffold the Project
|
||||
- [x] Customize the Project
|
||||
- [x] Install Required Extensions
|
||||
- [x] Compile the Project
|
||||
- [x] Create and Run Task
|
||||
- [x] Launch the Project
|
||||
- [x] Ensure Documentation is Complete
|
||||
41
.gitignore
vendored
Normal file
41
.gitignore
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
36
README.md
Normal file
36
README.md
Normal file
@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
18
eslint.config.mjs
Normal file
18
eslint.config.mjs
Normal file
@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
36
next.config.ts
Normal file
36
next.config.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images.unsplash.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'www.transparenttextures.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'png.pngtree.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'purepng.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'cdn-icons-png.flaticon.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images.pexels.com',
|
||||
}, {
|
||||
protocol: 'https',
|
||||
hostname: 'randomuser.me',
|
||||
}, ],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
6591
package-lock.json
generated
Normal file
6591
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "odoo_marketing",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.34.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.1.6",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
7
postcss.config.mjs
Normal file
7
postcss.config.mjs
Normal file
@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
BIN
public/dine360.jpeg
Normal file
BIN
public/dine360.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
1
public/file.svg
Normal file
1
public/file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
public/robots.txt
Normal file
4
public/robots.txt
Normal file
@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://dine360.vercel.app/sitemap.xml
|
||||
11
public/sitemap.xml
Normal file
11
public/sitemap.xml
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
<url>
|
||||
<loc>https://dine360.vercel.app/</loc>
|
||||
<lastmod>2026-04-01</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
227
src/app/about/page.tsx
Normal file
227
src/app/about/page.tsx
Normal file
@ -0,0 +1,227 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import MarketValuationSection from '@/components/MarketValuationSection';
|
||||
import { CheckCircle2, TrendingUp, Users, Trophy, ArrowRight } from 'lucide-react';
|
||||
|
||||
const AboutPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-zinc-900 font-sans selection:bg-rose-100 selection:text-rose-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-32 pb-16 px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
|
||||
{/* Left Column: Heading & Description */}
|
||||
<div className="lg:col-span-5 flex flex-col justify-between h-full space-y-12">
|
||||
<div>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-[5rem] xs:text-[6rem] sm:text-[8rem] lg:text-[7rem] xl:text-[9rem] font-black tracking-tighter leading-[0.85] text-zinc-900"
|
||||
>
|
||||
ABOUT <br /> US
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="space-y-6 max-w-sm"
|
||||
>
|
||||
<div>
|
||||
<h3 className="font-bold text-zinc-900 text-lg mb-2">Modern Restaurant Solutions</h3>
|
||||
<p className="text-zinc-800 text-base leading-relaxed">
|
||||
Dine360 delivers powerful restaurant management technology designed to simplify operations and help restaurants grow faster in a competitive industry.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-zinc-900 text-lg mb-2">Seamless Integration</h3>
|
||||
<p className="text-zinc-800 text-base leading-relaxed">
|
||||
Our platform connects every part of your restaurant - from orders and inventory to customer insights - into one intelligent system that keeps operations running smoothly.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Images & Philosophy */}
|
||||
<div className="lg:col-span-7 flex flex-col gap-8 mt-8 lg:mt-0">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{/* Image 1 - Large Rounded */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative h-75 sm:h-100 w-full rounded-[2.5rem] overflow-hidden"
|
||||
>
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&q=80&w=1200"
|
||||
alt="Modern Office"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side column for second image and philosophy */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative h-50 w-full rounded-[2.5rem] overflow-hidden"
|
||||
>
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Team Collaboration"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="flex-1 flex flex-col justify-center p-4"
|
||||
>
|
||||
<h3 className="text-3xl font-bold text-zinc-900 mb-3">Our Philosophy</h3>
|
||||
<p className="text-zinc-800 text-base leading-relaxed">
|
||||
At Dine360, we believe restaurant technology should simplify operations rather than complicate them.
|
||||
Our mission is to build tools that work quietly in the background, allowing restaurant owners and teams to focus on delivering outstanding food and unforgettable dining experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story Section (How It Started) */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-50">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
{/* Left Content */}
|
||||
<div className="order-2 lg:order-1">
|
||||
<motion.span
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-rose-600 font-bold tracking-wider uppercase text-sm mb-4 block"
|
||||
>
|
||||
How It Started
|
||||
</motion.span>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-black text-zinc-900 mb-8 leading-[1.1]"
|
||||
>
|
||||
Our Dream is <br/>
|
||||
<span className="text-zinc-800">Global Restaurant Transformation</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="space-y-6 text-zinc-800 text-base leading-relaxed mb-12"
|
||||
>
|
||||
<p>
|
||||
Dine360 was founded by a team of technology innovators and hospitality experts who saw how difficult it was for restaurants to manage operations using disconnected tools.
|
||||
</p>
|
||||
<p>
|
||||
Many restaurant owners were forced to juggle multiple systems for orders, inventory, reservations, and customer data - leading to inefficiencies, mistakes, and lost opportunities.
|
||||
</p>
|
||||
<p>
|
||||
We built Dine360 to solve this problem.
|
||||
</p>
|
||||
<p>
|
||||
Our goal was simple: create one unified platform that connects every part of restaurant operations, helping owners make better decisions and deliver better service.
|
||||
</p>
|
||||
<p>
|
||||
Today, Dine360 powers restaurants with modern tools designed to increase efficiency, improve customer experience, and support sustainable growth.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-zinc-900 p-6 rounded-2xl shadow-xl border border-zinc-800"
|
||||
>
|
||||
<h4 className="text-3xl font-black text-rose-500 mb-1">3.5</h4>
|
||||
<p className="text-white text-sm font-medium">Years Experience</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-zinc-900 p-6 rounded-2xl shadow-xl border border-zinc-800"
|
||||
>
|
||||
<h4 className="text-3xl font-black text-rose-500 mb-1">200+</h4>
|
||||
<p className="text-white text-sm font-medium">Restaurant Projects</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-zinc-900 p-6 rounded-2xl shadow-xl border border-zinc-800"
|
||||
>
|
||||
<h4 className="text-3xl font-black text-rose-500 mb-1">830+</h4>
|
||||
<p className="text-white text-sm font-medium">Positive Reviews</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="bg-zinc-900 p-6 rounded-2xl shadow-xl border border-zinc-800"
|
||||
>
|
||||
<h4 className="text-3xl font-black text-rose-500 mb-1">100K</h4>
|
||||
<p className="text-white text-sm font-medium">Trusted Partners</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="order-1 lg:order-2 relative"
|
||||
>
|
||||
<div className="relative h-150 w-full bg-blue-100 rounded-[3rem] overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-linear-to-tr from-rose-50 to-blue-50 opacity-50"></div>
|
||||
<div className="absolute top-0 right-0 w-full h-full">
|
||||
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" className="opacity-10">
|
||||
<path d="M0 0 L100 0 L100 100 Z" fill="#f43f5e" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Founders working"
|
||||
fill
|
||||
className="object-cover relative z-10"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MarketValuationSection />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutPage;
|
||||
188
src/app/blog/page.tsx
Normal file
188
src/app/blog/page.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Search,
|
||||
ArrowRight,
|
||||
Calendar,
|
||||
User,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
TrendingUp,
|
||||
Layout,
|
||||
Smartphone,
|
||||
Users
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const categories = [
|
||||
{
|
||||
title: "Restaurant Operations",
|
||||
description: "Learn how to streamline daily workflows, improve staff productivity, and manage restaurant operations effectively.",
|
||||
icon: Layout,
|
||||
color: "text-red-600",
|
||||
bgColor: "bg-red-50"
|
||||
},
|
||||
{
|
||||
title: "Technology",
|
||||
description: "Discover how modern POS systems, kitchen display systems, and automation tools transform restaurant performance.",
|
||||
icon: Smartphone,
|
||||
color: "text-red-600",
|
||||
bgColor: "bg-red-50"
|
||||
},
|
||||
{
|
||||
title: "Growth & Marketing",
|
||||
description: "Get strategies to attract new customers, retain loyal guests, and increase repeat business.",
|
||||
icon: TrendingUp,
|
||||
color: "text-red-600",
|
||||
bgColor: "bg-red-50"
|
||||
},
|
||||
{
|
||||
title: "Industry Insights",
|
||||
description: "Stay updated with the latest trends in the restaurant industry and learn how successful restaurants adapt.",
|
||||
icon: Users,
|
||||
color: "text-red-600",
|
||||
bgColor: "bg-red-50"
|
||||
}
|
||||
];
|
||||
|
||||
const featuredPost = {
|
||||
title: "10 Ways to Streamline Your Restaurant Operations in 2024",
|
||||
excerpt: "Discover the most effective strategies to improve efficiency, reduce waste, and increase your bottom line with modern management techniques.",
|
||||
date: "Oct 24, 2024",
|
||||
author: "Sarah Johnson",
|
||||
readTime: "8 min read",
|
||||
category: "Operations",
|
||||
image: "https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=2070&auto=format&fit=crop"
|
||||
};
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "The Future of POS Systems: What to Expect",
|
||||
excerpt: "Technology is evolving rapidly. Here's how next-gen POS systems are changing the dining experience.",
|
||||
date: "Oct 20, 2024",
|
||||
author: "Michael Chen",
|
||||
readTime: "5 min read",
|
||||
category: "Technology",
|
||||
image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=1974&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Marketing Strategies for Fine Dining Establishments",
|
||||
excerpt: "Learn how to attract high-end clientele and build brand loyalty in a competitive market.",
|
||||
date: "Oct 18, 2024",
|
||||
author: "Emma Williams",
|
||||
readTime: "6 min read",
|
||||
category: "Marketing",
|
||||
image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Inventory Management: Avoiding Common Pitfalls",
|
||||
excerpt: "Small mistakes in inventory can lead to big losses. Our guide helps you stay on top of your stock.",
|
||||
date: "Oct 15, 2024",
|
||||
author: "David Ross",
|
||||
readTime: "10 min read",
|
||||
category: "Operations",
|
||||
image: "https://images.unsplash.com/photo-1581578731522-6b6dea1470c6?q=80&w=2070&auto=format&fit=crop"
|
||||
}
|
||||
];
|
||||
|
||||
export default function BlogPage() {
|
||||
return (
|
||||
<main className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-20 overflow-hidden bg-black">
|
||||
<div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-[500px] h-[500px] bg-red-600/20 rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 w-[500px] h-[500px] bg-red-600/10 rounded-full blur-[120px]" />
|
||||
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="inline-block px-4 py-1.5 rounded-full bg-red-600/10 border border-red-600/20 text-red-500 text-sm font-semibold mb-6"
|
||||
>
|
||||
Dine360 Blog
|
||||
</motion.span>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-5xl md:text-7xl font-bold text-white mb-8 tracking-tight"
|
||||
>
|
||||
Restaurant Management <br />
|
||||
<span className="text-red-600">Insights & Tips</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 text-lg md:text-xl leading-relaxed max-w-2xl mx-auto"
|
||||
>
|
||||
Stay ahead in the restaurant industry with expert insights, operational strategies, and technology updates. The Dine360 blog helps restaurant owners and managers improve efficiency, boost revenue, and deliver exceptional dining experiences.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="mt-12 max-w-md mx-auto relative"
|
||||
>
|
||||
<div className="relative group">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 w-5 h-5 transition-colors group-focus-within:text-red-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for guides, tips, or news..."
|
||||
className="w-full bg-zinc-900 border border-zinc-800 text-white rounded-2xl py-4 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-red-600/50 transition-all placeholder:text-zinc-600"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories Grid */}
|
||||
<section className="py-24 bg-zinc-50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-zinc-900 mb-4">What You'll Find Here</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{categories.map((category, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="bg-white p-8 rounded-3xl border border-zinc-100 hover:border-red-100 hover:shadow-xl hover:shadow-red-900/5 transition-all group"
|
||||
>
|
||||
<div className={`${category.bgColor} ${category.color} w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
|
||||
<category.icon className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">{category.title}</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed mb-6">
|
||||
{category.description}
|
||||
</p>
|
||||
<button className="flex items-center gap-2 text-red-600 font-bold text-sm hover:gap-3 transition-all">
|
||||
Explore Now <ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
207
src/app/contact/page.tsx
Normal file
207
src/app/contact/page.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
'use client'
|
||||
|
||||
import { Mail, Phone, MapPin, Facebook, Instagram, Linkedin, Youtube } from 'lucide-react'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Image from 'next/image'
|
||||
|
||||
const ContactPage = () => {
|
||||
return (
|
||||
<div className="bg-white min-h-screen text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-24">
|
||||
<Navbar />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-12 lg:py-16">
|
||||
{/* Header Section */}
|
||||
<div className="relative overflow-hidden bg-red-600 rounded-[32px] p-8 lg:p-12 text-center mb-16">
|
||||
{/* Decorative Circles */}
|
||||
<div className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 w-64 h-64 border-[20px] border-white/10 rounded-full opacity-20" />
|
||||
<div className="absolute top-0 left-0 -translate-x-1/3 -translate-y-1/3 w-48 h-48 border-[15px] border-white/10 rounded-full opacity-20" />
|
||||
<div className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2 w-64 h-64 border-[20px] border-white/10 rounded-full opacity-20" />
|
||||
<div className="absolute bottom-0 right-0 translate-x-1/3 translate-y-1/3 w-48 h-48 border-[15px] border-white/10 rounded-full opacity-20" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="inline-block bg-white text-red-600 text-[10px] font-black uppercase tracking-[0.2em] px-6 py-2 rounded-lg mb-6 shadow-sm">
|
||||
WRITE TO US
|
||||
</span>
|
||||
<h1 className="text-4xl lg:text-6xl font-black text-white tracking-tight">
|
||||
Get In Touch
|
||||
</h1>
|
||||
<p className="text-white/90 max-w-2xl mx-auto mt-6 text-lg font-medium">
|
||||
We’d love to hear from you. Whether you want to learn more about Dine360, request a demo, or need support — our team is here to help your restaurant grow.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-16 lg:gap-24">
|
||||
{/* Left Column: Form */}
|
||||
<div className="space-y-10">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-4xl font-black text-zinc-900">Let's Talk!</h2>
|
||||
<p className="text-zinc-500 font-medium whitespace-pre-line">
|
||||
Have questions about Dine360 or want to see how it can transform your restaurant operations?{"\n"}
|
||||
Fill out the form and our team will get back to you shortly.{"\n"}
|
||||
We typically respond within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-black ml-1">First Name</label>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-black ml-1">Last Name</label>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-black ml-1">Email</label>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-black ml-1">Message</label>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-start gap-3 cursor-pointer group">
|
||||
<input type="checkbox" className="mt-1 w-5 h-5 rounded border-zinc-300 text-red-600 focus:ring-red-600 cursor-pointer" />
|
||||
<span className="text-sm text-zinc-700 font-bold group-hover:text-black transition-colors">
|
||||
I agree to receive communication from Dine360 regarding product updates and services.
|
||||
</span>
|
||||
</label>
|
||||
<label className="flex items-start gap-3 cursor-pointer group">
|
||||
<input type="checkbox" className="mt-1 w-5 h-5 rounded border-zinc-300 text-red-600 focus:ring-red-600 cursor-pointer" />
|
||||
<span className="text-sm text-zinc-700 font-bold group-hover:text-black transition-colors">
|
||||
I consent to Dine360 storing my submitted information to respond to my enquiry.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p className="text-xs leading-relaxed text-zinc-600 font-bold">
|
||||
Dine360 respects your privacy. Your information will only be used to respond to your request and provide relevant product updates.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4">
|
||||
<button className="w-full sm:w-auto bg-red-600 text-white px-10 py-4 rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-red-700 transition-all active:scale-[0.98] shadow-lg shadow-red-600/20">
|
||||
Start Free Trial
|
||||
</button>
|
||||
<span className="text-zinc-400 font-bold text-xs uppercase tracking-widest">or</span>
|
||||
<button className="w-full sm:w-auto bg-white border-2 border-red-600 text-red-600 px-10 py-4 rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-red-50 transition-all active:scale-[0.98]">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Info & Image */}
|
||||
<div className="space-y-12">
|
||||
<div className="relative rounded-[32px] overflow-hidden bg-zinc-100 aspect-[4/3] group">
|
||||
<Image
|
||||
src="https://images.pexels.com/photos/7703651/pexels-photo-7703651.jpeg"
|
||||
alt="Quick Contact"
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
{/* Ripple pattern overlay */}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-20">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-[1px] border-white rounded-full" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] border-[1px] border-white rounded-full" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60%] h-[60%] border-[1px] border-white rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="w-12 h-12 shrink-0 bg-white border border-zinc-100 shadow-sm rounded-xl flex items-center justify-center text-red-600">
|
||||
<Mail className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 mb-1 uppercase tracking-wider text-xs">Quick Contact</h4>
|
||||
<p className="text-zinc-500 font-medium text-sm mb-1">Email our support team anytime and we’ll assist you with onboarding, setup, or product questions.</p>
|
||||
<p className="text-zinc-900 font-bold text-sm">Email:</p>
|
||||
<p className="text-red-600 font-bold text-sm">support@dine360.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="w-12 h-12 shrink-0 bg-white border border-zinc-100 shadow-sm rounded-xl flex items-center justify-center text-red-600">
|
||||
<Phone className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 mb-1 uppercase tracking-wider text-xs">Phone Number</h4>
|
||||
<p className="text-zinc-500 font-medium text-sm mb-1">Speak directly with our customer success team for immediate assistance.</p>
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-zinc-500 font-medium text-sm">+1 647 360-2507</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="w-12 h-12 shrink-0 bg-white border border-zinc-100 shadow-sm rounded-xl flex items-center justify-center text-red-600">
|
||||
<MapPin className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 mb-1 uppercase tracking-wider text-xs">Headquarters</h4>
|
||||
<div className="text-zinc-500 font-medium text-sm space-y-0.5">
|
||||
<p>Dine360 Headquarters</p>
|
||||
<p>Toronto, Ontario</p>
|
||||
<p>Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3 pb-4">
|
||||
<h3 className="text-2xl font-black text-zinc-900 uppercase tracking-tight">FOLLOW US</h3>
|
||||
<p className="text-zinc-500 font-medium text-sm">Stay connected with us for product updates, restaurant insights, and new features.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 pb-8">
|
||||
{[
|
||||
{ Icon: Linkedin, href: "https://www.linkedin.com/company/dine-360/" },
|
||||
{ Icon: Instagram, href: "https://www.instagram.com/dine360.ca/" },
|
||||
{ Icon: Youtube, href: "#" },
|
||||
{ Icon: Facebook, href: "#" }
|
||||
].map((social, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-12 h-12 rounded-xl bg-red-600 flex items-center justify-center text-white hover:bg-zinc-900 transition-all hover:-translate-y-1 shadow-lg shadow-red-600/10"
|
||||
>
|
||||
<social.Icon className="w-5 h-5" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactPage
|
||||
241
src/app/faq/page.tsx
Normal file
241
src/app/faq/page.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Plus, Minus, Search, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
|
||||
// FAQ Data Structure
|
||||
const faqCategories = [
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'features', label: 'Features' },
|
||||
{ id: 'pricing', label: 'Pricing' },
|
||||
{ id: 'technical', label: 'Technical' },
|
||||
{ id: 'support', label: 'Support' },
|
||||
];
|
||||
|
||||
const faqData = {
|
||||
general: [
|
||||
{
|
||||
question: "What is Dine360?",
|
||||
answer: "Dine360 is an all-in-one restaurant management platform that helps restaurants manage orders, billing, inventory, reservations, kitchen workflows, and analytics from a single system."
|
||||
},
|
||||
{
|
||||
question: "What types of restaurants can use Dine360?",
|
||||
answer: "Dine360 is designed for all restaurant formats including fast food outlets, cafés, bakeries, food trucks, ghost kitchens, fine dining restaurants, and multi-branch restaurant chains."
|
||||
},
|
||||
{
|
||||
question: "Is Dine360 suitable for small restaurants?",
|
||||
answer: "Yes. Dine360 is built to scale from small cafés and quick-service restaurants to large multi-location restaurant businesses."
|
||||
},
|
||||
{
|
||||
question: "Can Dine360 manage multiple branches?",
|
||||
answer: "Yes. Dine360 supports multi-branch restaurants with centralized dashboards, branch-wise reports, and unified operational control."
|
||||
}
|
||||
],
|
||||
features: [
|
||||
{
|
||||
question: "What features does Dine360 offer?",
|
||||
answer: "Dine360 includes essential restaurant management tools such as POS billing, kitchen display system (KDS), table reservations, inventory management, sales analytics, CRM, purchase management, and delivery integrations."
|
||||
},
|
||||
{
|
||||
question: "Does Dine360 support kitchen display systems (KDS)?",
|
||||
answer: "Yes. Dine360 provides a real-time Kitchen Display System that sends orders directly from the POS to the kitchen screen, improving speed and reducing errors."
|
||||
},
|
||||
{
|
||||
question: "Can I manage table reservations with Dine360?",
|
||||
answer: "Yes. The table reservation system allows you to track reservations, manage walk-ins, view table availability, and control seating from a visual floor layout."
|
||||
},
|
||||
{
|
||||
question: "Does Dine360 track inventory automatically?",
|
||||
answer: "Yes. Inventory levels update automatically as orders are processed, helping you track ingredients and receive low-stock alerts."
|
||||
}
|
||||
],
|
||||
pricing: [
|
||||
{
|
||||
question: "How much does Dine360 cost?",
|
||||
answer: "Dine360 offers flexible pricing plans designed for restaurants of different sizes. Pricing varies depending on the number of users, branches, and advanced features required."
|
||||
},
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes. Dine360 offers a free trial so restaurants can explore the platform and test its features before choosing a subscription plan."
|
||||
},
|
||||
{
|
||||
question: "Are there any setup fees?",
|
||||
answer: "In most cases, there are no hidden setup costs. Our team assists with onboarding to ensure a smooth implementation."
|
||||
}
|
||||
],
|
||||
technical: [
|
||||
{
|
||||
question: "Does Dine360 work on tablets and desktops?",
|
||||
answer: "Yes. Dine360 is cloud-based and works on desktops, tablets, and compatible POS devices."
|
||||
},
|
||||
{
|
||||
question: "Does the POS work if the internet goes down?",
|
||||
answer: "Yes. Dine360 includes offline functionality so your POS continues running even if the internet connection temporarily drops."
|
||||
},
|
||||
{
|
||||
question: "Is restaurant data secure?",
|
||||
answer: "Yes. Dine360 uses secure cloud infrastructure and encrypted data storage to protect restaurant and customer information."
|
||||
}
|
||||
],
|
||||
support: [
|
||||
{
|
||||
question: "What kind of support does Dine360 provide?",
|
||||
answer: "Dine360 offers dedicated customer support including onboarding assistance, technical help, and system training."
|
||||
},
|
||||
{
|
||||
question: "Is training provided for staff?",
|
||||
answer: "Yes. Our onboarding team provides training to ensure your staff can quickly learn and use the system efficiently."
|
||||
},
|
||||
{
|
||||
question: "How can I contact support?",
|
||||
answer: "You can contact the Dine360 support team through email, phone, or the support portal available inside the platform."
|
||||
},
|
||||
{
|
||||
question: "Can I request a product demo?",
|
||||
answer: "Yes. You can request a live demo to see how Dine360 works and how it can improve your restaurant operations."
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const FAQPage = () => {
|
||||
const [activeCategory, setActiveCategory] = useState('general');
|
||||
const [openQuestionIndex, setOpenQuestionIndex] = useState<number | null>(0);
|
||||
|
||||
const toggleQuestion = (index: number) => {
|
||||
setOpenQuestionIndex(openQuestionIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-black text-white font-sans selection:bg-rose-100 selection:text-rose-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section with Background Image */}
|
||||
<section className="relative h-[60vh] min-h-75 flex items-center justify-center overflow-hidden bg-zinc-900 pt-20">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=1974&auto=format&fit=crop"
|
||||
alt="FAQ Background"
|
||||
fill
|
||||
className="object-cover opacity-70"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-b from-black/40 via-black/20 to-black" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight"
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-zinc-300 text-lg md:text-xl max-w-2xl mx-auto"
|
||||
>
|
||||
Find answers to common questions about Dine360’s features, setup, pricing, and support to help you get started quickly.
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section className="px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto mt-10 relative z-20 pb-24">
|
||||
|
||||
{/* Category Tabs - Hidden if only one category */}
|
||||
{faqCategories.length > 1 && (
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
||||
{faqCategories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => {
|
||||
setActiveCategory(category.id);
|
||||
setOpenQuestionIndex(null);
|
||||
}}
|
||||
className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300 shadow-md ${
|
||||
activeCategory === category.id
|
||||
? 'bg-rose-600 text-white shadow-lg shadow-rose-600/30'
|
||||
: 'bg-white text-zinc-900 hover:bg-zinc-100 border border-zinc-200'
|
||||
}`}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Accordion Questions */}
|
||||
<div className="space-y-4">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeCategory}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{(faqData[activeCategory as keyof typeof faqData] || []).map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="mb-4 rounded-2xl overflow-hidden bg-white border border-zinc-200 transition-all duration-300 hover:border-zinc-300 shadow-sm"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleQuestion(index)}
|
||||
className="w-full flex items-center justify-between p-6 text-left focus:outline-none group"
|
||||
>
|
||||
<span
|
||||
className={`text-base md:text-lg font-bold transition-colors duration-300 ${
|
||||
openQuestionIndex === index ? 'text-rose-600' : 'text-zinc-900 group-hover:text-zinc-700'
|
||||
}`}
|
||||
>
|
||||
{item.question}
|
||||
</span>
|
||||
<div
|
||||
className={`shrink-0 ml-4 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 ${
|
||||
openQuestionIndex === index ? 'bg-rose-600 text-white rotate-180' : 'bg-zinc-100 text-zinc-600 group-hover:bg-zinc-200'
|
||||
}`}
|
||||
>
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{openQuestionIndex === index && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
<div className="px-6 pb-6 text-zinc-600 text-sm md:text-base leading-relaxed border-t border-zinc-100 pt-4">
|
||||
{item.answer}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Contact CTA */}
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-zinc-400 mb-4">Can't find what you're looking for?</p>
|
||||
<a href="/contact" className="inline-flex items-center justify-center px-8 py-3 bg-rose-600 text-white font-bold rounded-xl hover:bg-rose-700 transition-colors shadow-lg shadow-rose-600/20">
|
||||
Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQPage;
|
||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
379
src/app/features/business-dashboard/page.tsx
Normal file
379
src/app/features/business-dashboard/page.tsx
Normal file
@ -0,0 +1,379 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
CheckCircle,
|
||||
LayoutDashboard,
|
||||
Clock,
|
||||
Zap,
|
||||
LineChart,
|
||||
ClipboardList,
|
||||
Target,
|
||||
Search,
|
||||
PieChart,
|
||||
FileText
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const BusinessDashboardPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: BUSINESS INSIGHTS */}
|
||||
<section className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">BUSINESS INSIGHTS</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Smart Business Dashboard</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Make smarter decisions with a powerful dashboard that gives you real-time insights into sales, operations, and performance — all in one place.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Layout */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<LayoutDashboard className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Real-Time Data Visibility</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
View live sales, orders, and operational metrics instantly from a centralized dashboard.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<LineChart className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Performance Insights</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Understand your business performance with detailed analytics on revenue, orders, and trends.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<FileText className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Actionable Reports</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Turn data into decisions with easy-to-read reports that help you optimize operations and increase profitability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
ANALYTICS & REPORTING
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Turn Data Into <br/> Business Growth
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360’s Business Dashboard provides a complete overview of your restaurant’s performance. From daily sales to long-term trends, everything is available in one intuitive interface.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time sales tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Revenue and order analytics</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Performance reports</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Centralized dashboard view</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
REAL-TIME PERFORMANCE
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6"
|
||||
>
|
||||
Built for Data-Driven Decisions
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Stay informed with live data and insights that help you make quick and effective business decisions.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<LineChart className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">Live</h3>
|
||||
<p className="text-zinc-400 font-medium tracking-tight">Sales & Order Tracking</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<Clock className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">Instant</h3>
|
||||
<p className="text-zinc-400 font-medium tracking-tight">Report Generation</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<Target className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-4xl font-black text-white mb-2 group-hover:text-red-500 transition-colors leading-[0.9] pt-2">Data-Driven</h3>
|
||||
<p className="text-zinc-400 font-medium tracking-tight">Decision Making</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SMART BUSINESS ANALYTICS (Cards) */}
|
||||
<section className="bg-zinc-50 py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
SMART BUSINESS ANALYTICS
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Everything You Need to Understand Your Business</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Get full visibility into your restaurant operations with powerful analytics tools designed for growth.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<LineChart className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3 tracking-tight">Sales Insights</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Track daily, weekly, and monthly revenue in real time.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<PieChart className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3 tracking-tight">Order Analytics</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Analyze order trends and identify peak hours.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<ClipboardList className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3 tracking-tight">Performance Reports</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Generate reports to monitor business performance.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Search className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3 tracking-tight">Trend Analysis</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Understand customer behavior and optimize operations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 Business Dashboard integrates with all modules to provide accurate, real-time insights across your entire operation.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100 italic transition-all hover:bg-white hover:shadow-sm">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0 italic">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800 italic">POS Sales Data Integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100 italic transition-all hover:bg-white hover:shadow-sm">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0 italic">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800 italic">Inventory & Purchase Tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100 italic transition-all hover:bg-white hover:shadow-sm">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0 italic">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800 italic">CRM Customer Insights</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100 italic transition-all hover:bg-white hover:shadow-sm">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0 italic">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800 italic">Order & Delivery Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 italic">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>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 uppercase tracking-tighter">Ready to See Your Business Growth?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
Join hundreds of restaurants that use Dine360 to monitor their performance with
|
||||
precision and style.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95 flex items-center gap-2 mx-auto uppercase tracking-wide">
|
||||
Start Free Trial <ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessDashboardPage;
|
||||
323
src/app/features/inventory-management/page.tsx
Normal file
323
src/app/features/inventory-management/page.tsx
Normal file
@ -0,0 +1,323 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
Layers,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Search,
|
||||
Zap,
|
||||
TrendingUp,
|
||||
Trash2,
|
||||
Repeat,
|
||||
PackageCheck,
|
||||
ClipboardList
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const InventoryManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: INVENTORY MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">INVENTORY MANAGEMENT</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Take control of your restaurant supplies with real-time inventory tracking that prevents shortages and reduces waste.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Layers className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Real-Time Stock Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor ingredient levels as orders are placed so you always know what’s available in your kitchen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Smart Stock Alerts</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Receive automatic alerts when ingredients are running low to avoid service interruptions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Trash2 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Waste Reduction</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Track ingredient usage across menu items to minimize food waste and improve profitability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
INVENTORY CONTROL
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Know What’s in Your <br/> Kitchen at All Times
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 Inventory connects directly with your POS and kitchen systems, automatically updating stock levels every time an order is placed. This gives restaurant owners complete visibility into ingredient consumption and purchasing needs.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time inventory updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Low stock alerts</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Ingredient-level tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Automated inventory reports</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2: SMART STOCK MANAGEMENT */}
|
||||
<section className="py-24 bg-zinc-950 text-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
Smart Stock Management
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6"
|
||||
>
|
||||
Automated Replenishment & Costing
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Never run out of key ingredients. Dine360 automatically tracks usage and can generate reorder lists based on your specific par levels.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
{[
|
||||
{ value: "$14,250", label: "Total Stock Value Tracking", icon: PackageCheck },
|
||||
{ value: "-18.4%", label: "Waste Reduction Impact", icon: TrendingUp }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 + 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<stat.icon className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">{stat.value}</h3>
|
||||
<p className="text-zinc-400 font-medium">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-zinc-500 max-w-2xl mx-auto italic">
|
||||
Calculate the exact cost of every dish on your menu. See how fluctuating supplier prices impact your profit margins in real-time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: EVERYTHING YOU NEED TO CONTROL INVENTORY */}
|
||||
<section className="py-24 px-6 bg-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
Control Everything
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-zinc-950 mb-6 leading-tight">
|
||||
Everything You Need to <br/> Control Inventory.
|
||||
</h2>
|
||||
<p className="text-lg text-zinc-600 leading-relaxed mb-6">
|
||||
Balance inventory across multiple restaurant locations with centralized control and easy inter-branch transfers. Our intelligent platform gives you the oversight you need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"Multi-Location Stock management",
|
||||
"Supplier Management & delivery tracking",
|
||||
"Variance Reporting (Actual vs Theoretical)",
|
||||
"Direct POS integration for live tracking"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-start gap-4 p-4 rounded-xl bg-zinc-950 border border-zinc-800 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="mt-1 w-6 h-6 rounded-full bg-red-600/10 flex items-center justify-center shrink-0">
|
||||
<CheckCircle className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
<span className="text-white font-medium">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-red-600/20 to-transparent rounded-[3rem] transform rotate-3 scale-105 blur-2xl" />
|
||||
<div className="relative bg-white rounded-[2.5rem] shadow-2xl p-8 border border-zinc-100 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-red-50 rounded-full -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-red-50 rounded-full translate-y-1/2 -translate-x-1/2" />
|
||||
|
||||
{/* Abstract UI Representation */}
|
||||
<div className="relative z-10 flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between pb-6 border-b border-zinc-100">
|
||||
<div>
|
||||
<div className="h-2 w-24 bg-zinc-200 rounded mb-2" />
|
||||
<div className="h-4 w-48 bg-zinc-900 rounded" />
|
||||
</div>
|
||||
<div className="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<Layers className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-zinc-600 text-sm italic font-medium">
|
||||
"Dine360 Inventory transformed how we manage our food costs. We saved over 15% on monthly supplies just by identifying where our waste was coming from."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-zinc-100 flex justify-between items-center">
|
||||
<div className="h-4 w-32 bg-zinc-200 rounded" />
|
||||
<div className="h-8 w-28 bg-red-600 rounded-lg shadow-lg shadow-red-600/20 flex items-center justify-center text-white text-[10px] font-bold">LIVE SYNC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Scale Your Restaurant?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to manage their inventory with
|
||||
precision and style.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryManagementPage;
|
||||
311
src/app/features/invoicing/page.tsx
Normal file
311
src/app/features/invoicing/page.tsx
Normal file
@ -0,0 +1,311 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
ClipboardList,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
ClipboardCheck,
|
||||
Zap,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
FileText,
|
||||
Receipt,
|
||||
CreditCard,
|
||||
FileCheck,
|
||||
Download,
|
||||
ShieldCheck,
|
||||
Calculator,
|
||||
Wallet,
|
||||
PieChart,
|
||||
History
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const InvoicingPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: INVOICE MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">INVOICE MANAGEMENT</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Create professional invoices automatically and keep your restaurant’s billing organized and compliant.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Automatic Invoice Generation</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Invoices are created instantly when orders are completed, saving time for your staff.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Calculator className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Tax Calculation</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Built-in tax handling ensures accurate billing and compliance with local regulations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<ClipboardCheck className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Payment Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor invoice payments and maintain a clear financial record for every transaction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SECTION 2: SMART BILLING */}
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
SMART BILLING
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Simplify Financial <br/> Operations
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 invoicing automates the billing process so restaurant owners can focus on operations rather than paperwork. From order billing to financial records, everything is managed within the system.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Automated invoice generation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Tax and billing configuration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Payment tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Financial reporting</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: BILLING PERFORMANCE */}
|
||||
<section className="bg-zinc-950 py-24 text-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold mb-6 tracking-tight uppercase">BILLING PERFORMANCE</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mb-8"></div>
|
||||
<p className="text-zinc-400 text-lg mb-8 leading-relaxed">
|
||||
Designed for accurate transactions. Ensure every transaction is recorded and invoiced properly.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ title: "Instant Billing", desc: "Automatic Invoice Creation" },
|
||||
{ title: "Accurate Taxation", desc: "Built-In Tax Calculations" },
|
||||
{ title: "Clear Records", desc: "Complete Payment Tracking" },
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-4 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-red-600/10 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-xl font-bold text-zinc-200">{item.title}</span>
|
||||
<span className="text-zinc-400 text-sm">{item.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-red-600/10 blur-[120px] rounded-full"></div>
|
||||
<div className="relative grid grid-cols-2 gap-6">
|
||||
<div className="bg-zinc-900 p-8 rounded-3xl border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">100%</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Invoicing Accuracy</div>
|
||||
</div>
|
||||
<div className="p-8 mt-6 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">SEC</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Instant Generation</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">0</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Tax Errors</div>
|
||||
</div>
|
||||
<div className="p-8 mt-6 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">24/7</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Audit Trail</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: EVERYTHING YOU NEED FOR BILLING */}
|
||||
<section className="py-24 px-6 bg-zinc-50">
|
||||
<div className="max-w-7xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Everything You Need for Billing</h2>
|
||||
<div className="w-20 h-1 bg-red-600 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "Invoice Generation",
|
||||
desc: "Create professional invoices for every order.",
|
||||
icon: FileText
|
||||
},
|
||||
{
|
||||
title: "Tax Management",
|
||||
desc: "Configure taxes and ensure accurate billing.",
|
||||
icon: Calculator
|
||||
},
|
||||
{
|
||||
title: "Payment Records",
|
||||
desc: "Track payments and outstanding invoices.",
|
||||
icon: Wallet
|
||||
},
|
||||
{
|
||||
title: "Financial Reporting",
|
||||
desc: "Analyze billing data and revenue insights.",
|
||||
icon: BarChart3
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow border border-zinc-100 group text-center flex flex-col items-center">
|
||||
<div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center text-red-600 mb-6 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">{feature.title}</h3>
|
||||
<p className="text-zinc-600 leading-relaxed text-sm">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: WORKS SEAMLESSLY WITH YOUR RESTAURANT SYSTEM */}
|
||||
<section className="py-24 px-6 bg-white">
|
||||
<div className="max-w-5xl mx-auto flex flex-col items-center">
|
||||
<div className="w-16 h-16 bg-red-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-red-200">
|
||||
<PieChart className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-zinc-950 text-center mb-6 leading-tight">
|
||||
Works Seamlessly With <br/> Your Restaurant System
|
||||
</h2>
|
||||
<p className="text-gray-500 text-lg md:text-xl text-center mb-12 max-w-3xl leading-relaxed">
|
||||
Dine360 invoicing integrates with other modules to ensure financial accuracy.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{[
|
||||
"POS billing integration",
|
||||
"Sales analytics reporting",
|
||||
"Customer CRM data",
|
||||
"Inventory and purchase records"
|
||||
].map((service, idx) => (
|
||||
<div key={idx} className="px-6 py-3 bg-zinc-50 rounded-full border border-zinc-200 text-zinc-700 font-bold hover:border-red-600 hover:text-red-600 transition-colors">
|
||||
{service}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Automate Your Billing?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to manage their invoicing with precision and ease.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoicingPage;
|
||||
350
src/app/features/kitchen-management/page.tsx
Normal file
350
src/app/features/kitchen-management/page.tsx
Normal file
@ -0,0 +1,350 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
Monitor,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Zap,
|
||||
WifiOff,
|
||||
LineChart,
|
||||
ClipboardList,
|
||||
UtensilsCrossed,
|
||||
ChefHat
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const KitchenManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: KITCHEN MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">KITCHEN MANAGEMENT</span>
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Kitchen Display System (KDS)</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Experience a smarter kitchen workflow with a real-time display system that keeps your chefs organized, synchronized, and ready to deliver orders faster.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Layout */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<ClipboardList className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Order Flow Visibility</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Track every incoming order instantly on the kitchen screen. Chefs see exactly what needs to be prepared without relying on printed tickets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Clock className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Prep Time Monitoring</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor preparation times and kitchen performance in real time, helping your team maintain consistency even during peak hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Error-Free Communication</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Orders move directly from POS to the kitchen display, eliminating manual errors and reducing miscommunication between staff.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
KITCHEN DISPLAY
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Transform Your Kitchen <br/> Into a Smart Workflow Hub
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360’s Kitchen Display System replaces traditional paper tickets with a real-time digital workflow. Orders are automatically routed from the POS to the correct kitchen station, helping chefs prioritize tasks and maintain service speed.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time order synchronization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Station-based order routing</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Priority order management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Integration with POS and inventory</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
REAL-TIME PERFORMANCE
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6"
|
||||
>
|
||||
Built for High-Pressure Kitchens
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Even during your busiest hours, the kitchen stays organized. Orders are automatically sorted, timed, and prioritized so chefs can focus on preparing great food.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ value: "99.99%", label: "Order Sync Reliability", icon: Zap },
|
||||
{ value: "Instant", label: "Order Transmission Speed", icon: Clock },
|
||||
{ value: "Live Updates", label: "Real-Time Kitchen Status", icon: WifiOff }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 + 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<stat.icon className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">{stat.value}</h3>
|
||||
<p className="text-zinc-400 font-medium">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SMART KITCHEN OPERATIONS (Cards) */}
|
||||
<section className="bg-zinc-50 py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
SMART KITCHEN OPERATIONS
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-zinc-950 mb-4">Keep Your Kitchen Running Smoothly</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg">
|
||||
Our KDS ensures chefs receive clear instructions instantly while managers gain visibility into preparation times and kitchen workload.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Layers className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Station-Based Routing</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Send orders automatically to the correct kitchen station.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Prep Time Insights</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Track how long dishes take to prepare and improve efficiency.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<LineChart className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Chef Performance Tracking</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Understand kitchen productivity and optimize workflows.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<UtensilsCrossed className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Order Status Updates</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Mark items as preparing, ready, or completed in real time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 KDS integrates directly with your POS, inventory, and order management tools to create a fully synchronized restaurant workflow.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS Order Sync</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Inventory Ingredient Updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Delivery Order Management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Customer Order Tracking</span>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Scale Your Kitchen?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of kitchens that use Dine360 to manage their workflow with
|
||||
precision and style.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KitchenManagementPage;
|
||||
359
src/app/features/loyalty-management/page.tsx
Normal file
359
src/app/features/loyalty-management/page.tsx
Normal file
@ -0,0 +1,359 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
ClipboardList,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
ClipboardCheck,
|
||||
Bike,
|
||||
Zap,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
Users,
|
||||
CalendarCheck,
|
||||
QrCode,
|
||||
Percent,
|
||||
Tags,
|
||||
Heart,
|
||||
Gift,
|
||||
Star, RefreshCw, UserPlus
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const LoyaltyManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: CUSTOMER RELATIONSHIP MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">CUSTOMER RELATIONSHIP MANAGEMENT</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Build stronger relationships with every guest by tracking their preferences, visit history, and dining behavior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Users className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Customer Profiles</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Automatically create detailed customer profiles with order history, preferences, and visit frequency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<BarChart3 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Guest Insights</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Understand your customers better by analyzing what they order, when they visit, and how often they return.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Heart className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Loyalty Opportunities</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Identify repeat guests and create personalized experiences that encourage them to come back.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
CRM SYSTEM
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Turn Guests Into <br/> Loyal Customers
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 CRM helps restaurants build meaningful relationships with their guests by collecting valuable customer insights automatically during every transaction. From order preferences to visit frequency, everything is tracked to help you deliver personalized service.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Automatic customer profiles</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Order history tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Guest preferences insights</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Contact database management</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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 -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="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">
|
||||
Built for <span className="text-red-600">Guest Experience</span>
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-lg md:text-xl leading-relaxed">
|
||||
Deliver better service by understanding your guests and their preferences with our advanced behavioral tracking engine.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-12 h-12 rounded-full border border-zinc-800 flex items-center justify-center text-zinc-500">
|
||||
<BarChart3 className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-full border border-red-600/30 bg-red-600/10 flex items-center justify-center text-red-500">
|
||||
<Users className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Card 1 */}
|
||||
<div className="group relative p-10 bg-zinc-900/50 rounded-3xl border border-zinc-800 transition-all duration-500 hover:border-red-600/50 hover:-translate-y-2 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-100 transition-opacity">
|
||||
<TrendingUp className="w-12 h-12 text-red-600" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="text-6xl font-black text-white mb-6 group-hover:text-red-500 transition-colors">100%</div>
|
||||
<h3 className="text-xl font-bold text-zinc-100 mb-3">Customer Order Tracking</h3>
|
||||
<p className="text-zinc-500 text-sm leading-relaxed">
|
||||
Capture every preference and dietary requirement automatically at the point of sale.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="group relative p-10 bg-zinc-900/50 rounded-3xl border border-zinc-800 transition-all duration-500 hover:border-red-600/50 hover:-translate-y-2 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-100 transition-opacity">
|
||||
<RefreshCw className="w-12 h-12 text-red-600" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="text-6xl font-black text-white mb-6 group-hover:text-red-500 transition-colors">Real-Time</div>
|
||||
<h3 className="text-xl font-bold text-zinc-100 mb-3">Profile Updates</h3>
|
||||
<p className="text-zinc-500 text-sm leading-relaxed">
|
||||
Guest history is synced across all terminal locations instantly for seamless service.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="group relative p-10 bg-red-600 rounded-3xl border border-red-500 transition-all duration-500 hover:shadow-2xl hover:shadow-red-600/20 hover:-translate-y-2 overflow-hidden">
|
||||
<div className="absolute -bottom-10 -right-10 w-40 h-40 bg-white/10 rounded-full blur-3xl group-hover:bg-white/20 transition-all"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="text-4xl font-black text-white mb-6 flex items-center gap-2">
|
||||
SMART <br/> INSIGHTS
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">Guest behavior analysis</h3>
|
||||
<p className="text-red-100 text-sm leading-relaxed">
|
||||
Identify your most profitable customers and their visiting patterns with AI-driven analytics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: Everything You Need to Know Your Customers */}
|
||||
<section className="bg-zinc-50 py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-4xl font-bold text-zinc-900 mb-6 uppercase tracking-tight">Everything You Need to Know Your Customers</h2>
|
||||
<p className="text-xl text-zinc-500">
|
||||
Our CRM tools give you full visibility into your customer base.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<UserPlus className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Customer Profiles</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Store guest information automatically with every order.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<ClipboardCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Order History</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Track previous orders to understand customer preferences.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<CalendarCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Visit Tracking</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Monitor how frequently guests visit your restaurant.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Users className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Contact Management</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Maintain a centralized database of customer contact details.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950 leading-tight uppercase tracking-tight">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 CRM integrates across your entire restaurant platform.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS customer sync</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Reservation system connection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Sales analytics integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Marketing & loyalty tools</span>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 uppercase tracking-tight">Ready to Build Guest Loyalty?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to turn casual diners into
|
||||
loyal fans.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoyaltyManagementPage;
|
||||
352
src/app/features/multi-menu-management/page.tsx
Normal file
352
src/app/features/multi-menu-management/page.tsx
Normal file
@ -0,0 +1,352 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Network,
|
||||
BarChart3,
|
||||
Layers,
|
||||
Zap,
|
||||
Clock,
|
||||
LayoutDashboard,
|
||||
ShieldCheck,
|
||||
Smartphone,
|
||||
Users,
|
||||
ClipboardList,
|
||||
Target,
|
||||
Globe
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const MultiBranchManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: MULTI-BRANCH CONTROL */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">MULTI-BRANCH CONTROL</span>
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Multi-Branch Management System</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Manage all your restaurant locations from one centralized platform. Monitor performance, control operations, and scale your business with complete visibility.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Layout */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<LayoutDashboard className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Centralized Control</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Manage multiple branches from a single dashboard without switching between systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<BarChart3 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Branch Performance Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Compare sales, orders, and performance across all locations in real time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Target className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Standardized Operations</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Maintain consistency across branches with centralized menu, pricing, and process control.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
MULTI-LOCATION MANAGEMENT
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Scale Your Restaurant <br/> Without Losing Control
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360’s multi-branch system helps you manage operations across multiple locations seamlessly. Whether you run two outlets or a growing chain, everything stays connected and under control.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Centralized branch management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time performance comparison</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Unified menu and pricing control</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Role-based access for staff</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
REAL-TIME PERFORMANCE
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6 leading-tight uppercase tracking-tighter"
|
||||
>
|
||||
Built for Growing Restaurant Chains
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Stay on top of your entire business with real-time insights from every branch, helping you make faster and smarter decisions.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ value: "Live", label: "Multi-Branch Monitoring", icon: Globe },
|
||||
{ value: "Instant", label: "Performance Comparison", icon: Zap },
|
||||
{ value: "Centralized", label: "Operational Control", icon: ShieldCheck }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 + 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<stat.icon className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-4xl font-black text-white mb-2 group-hover:text-red-500 transition-colors uppercase tracking-tight">{stat.value}</h3>
|
||||
<p className="text-zinc-400 font-medium">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SMART BUSINESS EXPANSION (Cards) */}
|
||||
<section className="bg-zinc-50 py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
SMART BUSINESS EXPANSION
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-zinc-950 mb-4">Everything You Need to Manage Multiple Locations</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg">
|
||||
Operate your restaurant chain efficiently with tools designed to give you full control and visibility across all branches.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<LayoutDashboard className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Central Dashboard</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">View and manage all branches from one unified dashboard.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<BarChart3 className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Branch Analytics</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Compare performance metrics between locations easily.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Target className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Menu & Pricing Control</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Update menus and pricing across all branches instantly.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Users className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Role-Based Access</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Assign permissions and control staff access for each location.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 Multi-Branch Management integrates with all modules to ensure smooth operations across every location.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS & Sales Data Sync</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Inventory & Stock Management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">CRM Customer Insights</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Order & Delivery Tracking</span>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 uppercase tracking-tighter leading-tight">Ready to Scale Your Restaurant Group?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
Join hundreds of restaurant chains that use Dine360 to manage their multi-branch
|
||||
operations with unmatched precision and speed.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiBranchManagementPage;
|
||||
307
src/app/features/order-management/page.tsx
Normal file
307
src/app/features/order-management/page.tsx
Normal file
@ -0,0 +1,307 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
ClipboardList,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
ClipboardCheck,
|
||||
Bike,
|
||||
Zap,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
Users,
|
||||
CalendarCheck,
|
||||
QrCode,
|
||||
Percent,
|
||||
Tags,
|
||||
Utensils
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const OrderManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: SALES MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">SALES MANAGEMENT</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Gain complete visibility into your restaurant's performance with real-time sales insights.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<TrendingUp className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Real-Time Sales Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor sales as they happen and understand your restaurant's daily performance instantly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<BarChart3 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Revenue Insights</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Analyze which menu items generate the most revenue and optimize your offerings accordingly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Clock className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Peak Hour Analysis</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Identify your busiest hours and prepare your staff and kitchen for peak demand.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
SALES ANALYTICS
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Understand Your <br/> Restaurant Performance
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 Sales Analytics helps you make better business decisions by turning raw sales data into clear insights. From daily revenue tracking to menu performance analysis, everything you need to grow your restaurant is available in one dashboard.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time sales monitoring</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Revenue breakdown reports</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Menu performance analysis</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Branch comparison reports</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: BUSINESS INSIGHTS (Dark) */}
|
||||
<section className="bg-zinc-900 text-white py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10 text-center mb-16">
|
||||
<span className="text-red-500 font-bold uppercase tracking-widest text-sm mb-4 block">BUSINESS INSIGHTS</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 uppercase tracking-tight">Built for Data-Driven Restaurants</h2>
|
||||
<p className="text-zinc-400 max-w-2xl mx-auto text-lg mb-12">
|
||||
Stay informed with powerful analytics that help you improve operations and increase profitability.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 pt-10 border-t border-zinc-800">
|
||||
<div className="p-8 bg-zinc-800/50 rounded-2xl border border-zinc-700/50 hover:border-red-600/50 transition-all">
|
||||
<div className="text-4xl font-black text-white mb-2">Live Data</div>
|
||||
<div className="text-zinc-400 font-medium">Real-Time Sales Monitoring</div>
|
||||
</div>
|
||||
<div className="p-8 bg-zinc-800/50 rounded-2xl border border-zinc-700/50 hover:border-red-600/50 transition-all">
|
||||
<div className="text-4xl font-black text-white mb-2">Instant Reports</div>
|
||||
<div className="text-zinc-400 font-medium">Automated Report Generation</div>
|
||||
</div>
|
||||
<div className="p-8 bg-zinc-800/50 rounded-2xl border border-zinc-700/50 hover:border-red-600/50 transition-all">
|
||||
<div className="text-4xl font-black text-white mb-2">Smart Insights</div>
|
||||
<div className="text-zinc-400 font-medium">Revenue & Trend Analysis</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: Everything You Need to Track Revenue */}
|
||||
<section className="bg-zinc-50 py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-4xl font-bold text-zinc-900 mb-6 uppercase tracking-tight">Everything You Need to Track Revenue</h2>
|
||||
<p className="text-xl text-zinc-500">
|
||||
Our analytics tools provide complete financial visibility across your restaurant.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<TrendingUp className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Revenue Reports</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">View daily, weekly, and monthly sales reports.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Utensils className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Menu Performance</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Identify your best-selling and low-performing items.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Peak Hour Insights</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Understand customer demand patterns.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<LayoutGrid className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Branch Comparison</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Compare performance across multiple outlets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950 leading-tight uppercase tracking-tight">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 Sales integrates across the entire platform to give you accurate, real-time insights.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS sales sync</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Inventory consumption tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">CRM customer insights</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Accounting integrations</span>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 uppercase tracking-tight">Ready to Track Your Sales?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to monitor their performance
|
||||
with speed and precision.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderManagementPage;
|
||||
1164
src/app/features/page.tsx
Normal file
1164
src/app/features/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
382
src/app/features/pos/page.tsx
Normal file
382
src/app/features/pos/page.tsx
Normal file
@ -0,0 +1,382 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Smartphone,
|
||||
Zap,
|
||||
Clock,
|
||||
LayoutDashboard,
|
||||
ShieldCheck,
|
||||
CreditCard,
|
||||
Receipt,
|
||||
Printer,
|
||||
Wifi,
|
||||
BarChart3,
|
||||
Users,
|
||||
Database,
|
||||
Target
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const POSPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: POINT OF SALE HERO */}
|
||||
<section className="py-24 px-6 bg-zinc-50 border-b border-zinc-100">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block animate-bounce">POWERFUL POINT OF SALE</span>
|
||||
<h1 className="text-5xl md:text-6xl font-black text-zinc-950 mb-6 uppercase tracking-tighter">Modern POS System <br/> Built for Speed</h1>
|
||||
<div className="w-24 h-2 bg-red-600 mx-auto mb-8"></div>
|
||||
<p className="text-gray-500 max-w-3xl mx-auto text-xl leading-relaxed">
|
||||
Experience the fastest checkout in the industry. Our cloud-native POS handles high-volume transactions with ease, keeping your lines moving and your customers happy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* POS Terminal Illustration/Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center px-4">
|
||||
{/* Speed */}
|
||||
<div className="flex flex-col items-center p-10 rounded-3xl border border-zinc-200 bg-white transition-all duration-300 hover:border-red-600/30 hover:shadow-2xl group">
|
||||
<div className="w-20 h-20 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 group-hover:bg-red-600 group-hover:text-white transition-all transform group-hover:rotate-6">
|
||||
<Zap className="w-10 h-10" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-900 mb-4 tracking-tight uppercase">Lightning Fast</h3>
|
||||
<p className="text-zinc-500 leading-relaxed">
|
||||
Process orders in seconds with zero lag, even during peak rush hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Security */}
|
||||
<div className="flex flex-col items-center p-10 rounded-3xl border border-zinc-200 bg-white transition-all duration-300 hover:border-red-600/30 hover:shadow-2xl group">
|
||||
<div className="w-20 h-20 rounded-2xl bg-zinc-900 flex items-center justify-center mb-6 text-white group-hover:bg-red-600 transition-all transform group-hover:-rotate-6">
|
||||
<ShieldCheck className="w-10 h-10" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-900 mb-4 tracking-tight uppercase">Bank-Grade Security</h3>
|
||||
<p className="text-zinc-500 leading-relaxed">
|
||||
PCI-compliant transactions with end-to-end encryption for every payment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cloud */}
|
||||
<div className="flex flex-col items-center p-10 rounded-3xl border border-zinc-200 bg-white transition-all duration-300 hover:border-red-600/30 hover:shadow-2xl group">
|
||||
<div className="w-20 h-20 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 group-hover:bg-red-600 group-hover:text-white transition-all transform group-hover:rotate-6">
|
||||
<Database className="w-10 h-10" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-900 mb-4 tracking-tight uppercase">Always Syncing</h3>
|
||||
<p className="text-zinc-500 leading-relaxed">
|
||||
Your data is always backed up to the cloud and accessible from anywhere.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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 */}
|
||||
<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 italic">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>
|
||||
</div>
|
||||
|
||||
{/* Right: Content */}
|
||||
<div className="space-y-8 order-1 lg:order-2">
|
||||
<span className="inline-block px-5 py-2 bg-red-600 text-white rounded-full text-xs font-black uppercase tracking-[0.2em]">
|
||||
Enterprise POS Features
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-zinc-950 leading-[0.9] uppercase tracking-tighter">
|
||||
Hardware to <br/> Suit Your Style
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed font-medium">
|
||||
Our POS software runs on anything. From enterprise-grade dual-screen terminals to portable handhelds for table-side ordering—we provide the flexibility your staff needs.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-zinc-950 flex items-center justify-center text-white shrink-0 shadow-lg">
|
||||
<Smartphone className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 uppercase text-sm tracking-tight mb-1">Mobile POS</h4>
|
||||
<p className="text-zinc-500 text-xs">Orders and payments right at the table.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-zinc-950 flex items-center justify-center text-white shrink-0 shadow-lg">
|
||||
<CreditCard className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 uppercase text-sm tracking-tight mb-1">Integrated Payments</h4>
|
||||
<p className="text-zinc-500 text-xs">Supports Chip, Pin, NFC, and QR.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-zinc-950 flex items-center justify-center text-white shrink-0 shadow-lg">
|
||||
<Printer className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 uppercase text-sm tracking-tight mb-1">Smart Printing</h4>
|
||||
<p className="text-zinc-500 text-xs">Zero-config kitchen and receipt routing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-zinc-950 flex items-center justify-center text-white shrink-0 shadow-lg">
|
||||
<Wifi className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 uppercase text-sm tracking-tight mb-1">Offline Mode</h4>
|
||||
<p className="text-zinc-500 text-xs">Keep selling even when WiFi goes down.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ x: 10 }}
|
||||
className="flex items-center gap-3 text-red-600 font-black uppercase tracking-widest text-sm pt-6 group transition-all"
|
||||
>
|
||||
View Compatible Hardware
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: DARK STATS (TRANSACTION SPEED) */}
|
||||
<section className="py-32 bg-zinc-950 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,#ef444422,transparent_100%)]" />
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="max-w-3xl mb-24">
|
||||
<h2 className="text-5xl md:text-7xl font-black mb-8 leading-[0.9] uppercase tracking-tighter">
|
||||
Built for the <span className="text-red-500">Rush Hour</span>
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-xl font-medium leading-relaxed">
|
||||
When the queue is out the door, your POS shouldn't be the bottleneck. Dine360 is optimized for millisecond response times and high-concurrency environments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 border-t border-zinc-900 pt-16">
|
||||
{[
|
||||
{ val: '2.4s', label: 'AVG. Checkout Time', sub: 'Faster than competitors' },
|
||||
{ val: '100%', label: 'Offline Resiliency', sub: 'No lost transactions' },
|
||||
{ val: '0ms', label: 'Payment Latency', sub: 'Instant authorization' },
|
||||
{ val: '2k+', label: 'Daily TX/Terminal', sub: 'Enterprise stability' }
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="space-y-4 group cursor-default">
|
||||
<div className="text-5xl font-black text-white group-hover:text-red-500 transition-colors duration-500 tracking-tighter uppercase">{stat.val}</div>
|
||||
<div className="space-y-1 border-l-2 border-red-600 pl-4">
|
||||
<div className="text-sm font-black uppercase tracking-widest">{stat.label}</div>
|
||||
<div className="text-zinc-500 text-xs font-bold">{stat.sub}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: POS CATEGORY GRID */}
|
||||
<section className="bg-white py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8 px-4">
|
||||
<div className="max-w-2xl">
|
||||
<span className="text-red-600 font-black uppercase tracking-widest text-sm mb-4 block underline decoration-4 underline-offset-8">INTELLIGENT WORKFLOWS</span>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-zinc-950 uppercase tracking-tighter leading-tight">One System, <br/> Every Vertical</h2>
|
||||
</div>
|
||||
<p className="text-zinc-500 font-medium max-w-sm">
|
||||
Tailor the interface for Fine Dining, QSR, Bar, or Bakery with one-click workspace templates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 px-4">
|
||||
{[
|
||||
{
|
||||
title: "Table & Floor Management",
|
||||
desc: "Real-time table status with visual floor plans and split-bill intelligence.",
|
||||
icon: <LayoutDashboard className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: "KDS Integration",
|
||||
desc: "Orders sent instantly to kitchen screens with prep-time tracking.",
|
||||
icon: <Clock className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: "Staff Commission",
|
||||
desc: "Automatic tip pooling and performance tracking built into checkout.",
|
||||
icon: <Users className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: "Inventory Deduct",
|
||||
desc: "Real-time stock reduction for every button press at the POS.",
|
||||
icon: <Database className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: "Advanced Reporting",
|
||||
desc: "Deep-dive sales analytics and tax reports generated with one tap.",
|
||||
icon: <BarChart3 className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: "Customer Loyalty",
|
||||
desc: "Assign points and redeem rewards directly from the transaction screen.",
|
||||
icon: <Target className="w-8 h-8" />
|
||||
}
|
||||
].map((item, i) => (
|
||||
<div key={i} className="p-10 bg-zinc-50 rounded-3xl border border-transparent hover:border-zinc-200 transition-all group">
|
||||
<div className="w-16 h-16 bg-white rounded-2xl shadow-sm flex items-center justify-center text-zinc-950 mb-8 group-hover:bg-red-600 group-hover:text-white transition-all transform group-hover:-translate-y-2">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-zinc-950 mb-4 uppercase tracking-tight">{item.title}</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed font-medium">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: PAYMENT ECOSYSTEM (Orbital Integration) */}
|
||||
<section className="py-32 px-6 bg-zinc-50 border-t border-zinc-100 overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="space-y-10">
|
||||
<h2 className="text-5xl md:text-6xl font-black text-zinc-950 uppercase tracking-tighter leading-[0.9]">
|
||||
Accept Every <br/> <span className="text-red-500 underline decoration-8 decoration-red-600/10">Payment Type</span>
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-6 p-6 bg-white rounded-2xl shadow-sm border border-zinc-100">
|
||||
<div className="w-16 h-16 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center shrink-0">
|
||||
<CreditCard className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-black text-zinc-900 uppercase tracking-tight">Contactless & EMV</h4>
|
||||
<p className="text-sm text-zinc-500 font-medium">Full support for Visa, Mastercard, AMEX, and Interac.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 p-6 bg-white rounded-2xl shadow-sm border border-zinc-100">
|
||||
<div className="w-16 h-16 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center shrink-0">
|
||||
<Receipt className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-black text-zinc-900 uppercase tracking-tight">Digital Wallets</h4>
|
||||
<p className="text-sm text-zinc-500 font-medium">Apple Pay, Google Pay, and Samsung Pay integrated.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="bg-zinc-950 text-white px-8 py-5 rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-red-600 transition-all flex items-center gap-3">
|
||||
Talk to an Expert
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="w-full aspect-square bg-white rounded-full border border-zinc-200 p-20 relative flex items-center justify-center shadow-inner">
|
||||
<div className="absolute inset-0 opacity-40 bg-[radial-gradient(#ef4444_1px,transparent_1px)] bg-[size:30px_30px] rounded-full"></div>
|
||||
|
||||
{/* Central Terminal */}
|
||||
<div className="relative z-10 w-48 h-48 bg-zinc-950 rounded-3xl shadow-3xl rotate-12 flex items-center justify-center p-8 border-4 border-zinc-800">
|
||||
<div className="w-full text-center space-y-2">
|
||||
<div className="text-red-600 font-black text-xl italic tracking-tighter uppercase italic">D360</div>
|
||||
<div className="h-1 bg-zinc-800 w-1/2 mx-auto"></div>
|
||||
<div className="text-[8px] text-zinc-600 uppercase font-black">Ready to Swipe</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Method Orbits */}
|
||||
<div className="absolute top-10 left-1' w-20 h-20 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 border border-zinc-100 -rotate-12">
|
||||
<CreditCard className="w-10 h-10 text-zinc-950" />
|
||||
</div>
|
||||
<div className="absolute bottom-1/4 right-0 w-20 h-20 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 border border-zinc-100 rotate-12">
|
||||
<Smartphone className="w-10 h-10 text-red-600" />
|
||||
</div>
|
||||
<div className="absolute top-1/2 -left-4 w-20 h-20 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 border border-zinc-100 -rotate-3">
|
||||
<Printer className="w-10 h-10 text-zinc-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-32 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute bottom-0 right-0 w-full h-[500px] bg-red-600/10 blur-[200px] pointer-events-none rounded-full translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="max-w-4xl mx-auto text-center relative z-10">
|
||||
<span className="text-red-600 font-black uppercase tracking-widest text-sm mb-6 block">NO-RISK SETUP</span>
|
||||
<h2 className="text-5xl md:text-7xl font-black mb-10 uppercase tracking-tighter leading-tight">Elevate Your Checkout Experience.</h2>
|
||||
<p className="text-zinc-400 text-xl mb-12 max-w-2xl mx-auto font-medium leading-relaxed">
|
||||
Hardware bundles start from $0 upfront. Experience the power of Dine360 POS
|
||||
in your restaurant today with our 30-day money-back guarantee.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-6">
|
||||
<button className="w-full sm:w-auto bg-red-600 text-white px-12 py-5 rounded-full font-black text-lg hover:bg-red-700 transition-all shadow-2xl shadow-red-600/30 active:scale-95 uppercase tracking-widest">
|
||||
Get Started Now
|
||||
</button>
|
||||
<button className="w-full sm:w-auto bg-transparent border-2 border-zinc-800 text-white px-12 py-5 rounded-full font-black text-lg hover:bg-zinc-900 transition-all uppercase tracking-widest text-sm">
|
||||
View Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default POSPage;
|
||||
313
src/app/features/promotion-management/page.tsx
Normal file
313
src/app/features/promotion-management/page.tsx
Normal file
@ -0,0 +1,313 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
Tag,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
Gift,
|
||||
Zap,
|
||||
Ticket,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
Users,
|
||||
CalendarCheck,
|
||||
QrCode,
|
||||
Percent,
|
||||
Tags,
|
||||
ClipboardList,
|
||||
Truck
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const PromotionManagementPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: PURCHASE MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">PURCHASE MANAGEMENT</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Simplify supplier management and purchasing with a structured system that keeps your restaurant stocked and organized.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Users className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Vendor Management</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Maintain a centralized database of suppliers, pricing agreements, and contact details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<ClipboardList className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Purchase Order Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Create and track purchase orders easily to ensure supplies arrive on time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Layers className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Automatic Stock Updates</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Inventory updates automatically when goods are received from suppliers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
SUPPLY MANAGEMENT
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Keep Your Restaurant Stocked <br/> Without the Chaos.
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 Purchase Management helps restaurants streamline procurement by organizing supplier information and automating purchase order tracking. This ensures your kitchen always has the ingredients it needs to operate efficiently.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Vendor database management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Purchase order tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Delivery recording</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Inventory synchronization</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: SUPPLIER CONTROL */}
|
||||
<section className="bg-zinc-900 text-white py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||
<div className="order-2 md:order-1 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-l from-red-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">
|
||||
<div className="flex justify-between items-end mb-6">
|
||||
<div>
|
||||
<div className="text-zinc-500 text-sm mb-1 uppercase tracking-wider">Purchase Flow</div>
|
||||
<div className="text-3xl font-bold text-white">SMART ORDERS</div>
|
||||
</div>
|
||||
<div className="h-12 w-24 flex items-end space-x-1">
|
||||
<div className="w-1/4 h-1/2 bg-zinc-800 rounded-sm"></div>
|
||||
<div className="w-1/4 h-2/3 bg-zinc-800 rounded-sm"></div>
|
||||
<div className="w-1/4 h-3/4 bg-zinc-700 rounded-sm"></div>
|
||||
<div className="w-1/4 h-full bg-red-600 rounded-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4 pt-6 border-t border-zinc-800">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-zinc-300">Supplier Records</span>
|
||||
<span className="text-red-500 font-bold">Centralized Vendor Database</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-zinc-300">Stock Sync</span>
|
||||
<span className="text-red-500 font-bold">Instant Inventory Updates</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="order-1 md:order-2">
|
||||
<div className="inline-flex items-center space-x-2 bg-zinc-800 rounded-full px-4 py-2 mb-8 border border-zinc-700">
|
||||
<span className="w-2 h-2 rounded-full bg-red-600 animate-pulse"></span>
|
||||
<span className="text-sm font-medium text-zinc-300">Built for Reliable Supply Chains</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
|
||||
SUPPLIER CONTROL
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-lg leading-relaxed mb-10">
|
||||
Ensure your restaurant never runs out of critical ingredients with organized purchasing workflows. Automated requests and vendor management keep your operations smooth.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 border-t border-zinc-800 pt-10">
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">100%</div>
|
||||
<div className="text-zinc-500 text-sm">Order Accuracy</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">Live</div>
|
||||
<div className="text-zinc-500 text-sm">Stock Sync</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">24/7</div>
|
||||
<div className="text-zinc-500 text-sm">Vendor Tracking</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: Everything You Need to Manage Purchases */}
|
||||
<section className="bg-zinc-50 py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-4xl font-bold text-zinc-900 mb-6 uppercase tracking-tight">Everything You Need to Manage Purchases</h2>
|
||||
<p className="text-xl text-zinc-500">
|
||||
Our purchase management tools help restaurants maintain strong supplier relationships and control procurement costs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
icon: <Users className="w-6 h-6" />,
|
||||
title: "Supplier Management",
|
||||
desc: "Maintain supplier contact details and pricing information in a unified dashboard."
|
||||
},
|
||||
{
|
||||
icon: <ClipboardList className="w-6 h-6" />,
|
||||
title: "Purchase Orders",
|
||||
desc: "Generate and track purchase orders easily with automated status updates."
|
||||
},
|
||||
{
|
||||
icon: <Truck className="w-6 h-6" />,
|
||||
title: "Delivery Tracking",
|
||||
desc: "Record incoming shipments and update inventory instantly upon arrival."
|
||||
},
|
||||
{
|
||||
icon: <TrendingUp className="w-6 h-6" />,
|
||||
title: "Procurement Reports",
|
||||
desc: "Analyze purchasing trends and supplier performance to optimize your costs."
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: Works Seamlessly With Your Restaurant System */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8 uppercase tracking-tight">Works Seamlessly With Your Restaurant System</h2>
|
||||
<div className="max-w-2xl mx-auto grid grid-cols-2 gap-6 text-left mb-12">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-red-600" />
|
||||
<span className="text-zinc-300">Inventory stock updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-red-600" />
|
||||
<span className="text-zinc-300">POS ingredient consumption</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-red-600" />
|
||||
<span className="text-zinc-300">Supplier database integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-red-600" />
|
||||
<span className="text-zinc-300">Financial and reporting tools</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromotionManagementPage;
|
||||
330
src/app/features/promotions/page.tsx
Normal file
330
src/app/features/promotions/page.tsx
Normal file
@ -0,0 +1,330 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
Megaphone,
|
||||
CheckCircle,
|
||||
TicketPercent,
|
||||
Clock,
|
||||
LineChart,
|
||||
Zap,
|
||||
Target,
|
||||
BarChart3,
|
||||
Users,
|
||||
LayoutDashboard,
|
||||
Gift,
|
||||
MousePointer2,
|
||||
Calendar,
|
||||
Sparkles,
|
||||
Layers,
|
||||
ArrowUpRight
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const PromotionsPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: PROMOTIONS MANAGEMENT */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">PROMOTIONS MANAGEMENT</span>
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Smart Promotions & Offers System</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Boost customer engagement and increase sales with powerful promotion tools that let you create, manage, and track offers effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Layout */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Target className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Create Targeted Offers</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Design discounts, combo deals, and special promotions tailored to your customers and business goals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Automated Campaigns</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Schedule and run promotions automatically based on time, events, or customer behavior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<LineChart className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Track Performance</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor how your offers perform in real time and optimize campaigns to maximize revenue.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
PROMOTION ENGINE
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Turn Every Offer Into a <br/> Growth Opportunity
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360’s promotions system helps restaurants attract more customers and increase repeat visits with smart, data-driven campaigns. Create offers that drive sales without adding operational complexity.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Discount and combo offer creation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Time and event-based promotions</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Customer-targeted campaigns</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Integration with POS and CRM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
REAL-TIME PERFORMANCE
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6"
|
||||
>
|
||||
Built to Maximize Revenue Impact
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Track how your promotions perform and make smarter decisions using real-time insights. Understand what works best and continuously improve your campaigns.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ value: "30%+", label: "Increase in Repeat Customers", icon: Users },
|
||||
{ value: "Real-Time", label: "Offer Performance Tracking", icon: BarChart3 },
|
||||
{ value: "Data-Driven", label: "Campaign Optimization", icon: Sparkles }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 + 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<stat.icon className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">{stat.value}</h3>
|
||||
<p className="text-zinc-400 font-medium">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SMART MARKETING TOOLS (Cards) */}
|
||||
<section className="bg-zinc-50 py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
SMART MARKETING TOOLS
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-zinc-950 mb-4">Launch and Manage Promotions with Ease</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg">
|
||||
Create impactful promotions that attract customers, increase order value, and drive long-term loyalty.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<TicketPercent className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Discount Management</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Create percentage or fixed discounts for specific items, categories, or orders.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Layers className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Combo & Bundle Offers</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Design combo deals and meal bundles to increase average order value.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Calendar className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Scheduled Campaigns</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Run promotions automatically during peak hours, weekends, or special events.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Users className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Customer Targeting</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Offer personalized promotions based on customer behavior and purchase history.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360 Promotions integrates with your entire platform to ensure every campaign runs smoothly and delivers results.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS Billing & Discounts Sync</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">CRM Customer Data Integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Sales Analytics Tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Loyalty & Rewards Programs</span>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PromotionsPage;
|
||||
281
src/app/features/qr-code-menu/page.tsx
Normal file
281
src/app/features/qr-code-menu/page.tsx
Normal file
@ -0,0 +1,281 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
QrCode,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
Smartphone,
|
||||
Camera,
|
||||
Zap,
|
||||
Sparkles,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
Users,
|
||||
CalendarCheck,
|
||||
Percent,
|
||||
Tags
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const QRCodeMenuPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* DESIGN FROM IMAGE SECTION */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">QR Code Menu</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Transform your dining experience with contactless, dynamic QR code menus that are easy to update and a delight for guests to use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Camera className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Visual Feast</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Showcase high-resolution dish photography. Increase average order value by 20% with enticing visuals that paper menus can't provide.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Instant Updates</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Change prices or out-of-stock items in seconds. Your digital menu is always accurate, eliminating guest frustration and staff confusion.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Sparkles className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Upsell AI</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Smart recommendations suggest pairings like "Add Extra Bacon" or "Pairs well with Malbec," driving higher ticket sizes automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
Contactless Dining
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Enhance Dining with <br/> Smart QR Menus.
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Give your customers a safe and modern way to browse your offerings. Our QR menus are fully responsive, support multiple languages, and can be updated in real-time from your Dine360 dashboard. Integrated ordering allows guests to pay right from their table, reducing staff workload.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time Updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Table Ordering</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Multi-language</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">High-res Images</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* STATS SECTION (Dark) */}
|
||||
<section className="bg-zinc-900 text-white py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center space-x-2 bg-zinc-800 rounded-full px-4 py-2 mb-8 border border-zinc-700">
|
||||
<span className="w-2 h-2 rounded-full bg-pink-500 animate-pulse"></span>
|
||||
<span className="text-sm font-medium text-zinc-300">Contactless & Safe</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
|
||||
Menus That Sell Themselves
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-lg leading-relaxed mb-10">
|
||||
Reduce staff workload and increase check sizes. Guests order faster and spend more when they can browse vivid photos and intuitive modifiers on their own phones.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 border-t border-zinc-800 pt-10">
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">+20%</div>
|
||||
<div className="text-zinc-500 text-sm">Avg Order Value</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">100%</div>
|
||||
<div className="text-zinc-500 text-sm">Contactless</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">0s</div>
|
||||
<div className="text-zinc-500 text-sm">Update Delay</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DETAILED FEATURE (Light) */}
|
||||
<section className="bg-zinc-50 py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-4xl font-bold text-zinc-900 mb-6">Visual Menu Engineering</h2>
|
||||
<p className="text-xl text-zinc-500">
|
||||
Forget PDF uploads. Build a digital storefront that guides guests to your highest margin items with smart recommendations and mouth-watering imagery.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
{[
|
||||
{
|
||||
icon: <Sparkles className="w-6 h-6" />,
|
||||
title: "Smart Upselling",
|
||||
desc: "Algorithmically suggest pairings (wine with steak, sides with burgers) at the exact moment a guest is most likely to say yes."
|
||||
},
|
||||
{
|
||||
icon: <Camera className="w-6 h-6" />,
|
||||
title: "High-Res Imagery",
|
||||
desc: "A picture is worth a thousand calories. Professional food photography integration increases conversion rates on appetizers and desserts."
|
||||
},
|
||||
{
|
||||
icon: <TrendingUp className="w-6 h-6" />,
|
||||
title: "Dynamic Pricing",
|
||||
desc: "Subtly adjust prices for Happy Hour or special events instantly without needing to reprint a single sheet of paper."
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-zinc-400 leading-relaxed">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Update Your Menu?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to manage their QR menus with
|
||||
precision and style.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QRCodeMenuPage;
|
||||
348
src/app/features/restaurant-website/page.tsx
Normal file
348
src/app/features/restaurant-website/page.tsx
Normal file
@ -0,0 +1,348 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
Globe,
|
||||
CheckCircle,
|
||||
ShoppingCart,
|
||||
Smartphone,
|
||||
Zap,
|
||||
Clock,
|
||||
Layout,
|
||||
MousePointer2,
|
||||
Settings,
|
||||
CreditCard
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const RestaurantWebsitePage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: ONLINE PRESENCE */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">ONLINE PRESENCE</span>
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Website & Online Ordering System</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Grow your restaurant beyond dine-in with a powerful website and online ordering system that helps you attract customers, take orders directly, and increase revenue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Layout */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Card 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Globe className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Custom Restaurant Website</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Get a modern, mobile-friendly website that showcases your menu, brand, and offerings to attract more customers online.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<ShoppingCart className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Direct Online Orders</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Accept orders directly from your website without relying on third-party platforms, giving you full control over your revenue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<MousePointer2 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Seamless Ordering Experience</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Provide customers with a smooth and fast ordering journey from browsing to checkout.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SECTION 2: ONLINE ORDERING SYSTEM */}
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center px-6 mb-24">
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
ONLINE ORDERING SYSTEM
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Turn Your Website <br/> Into a Sales Engine
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 helps you build a complete online presence with an integrated ordering system. Customers can browse your menu, place orders, and make payments — all from your website.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Custom website with branding</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Direct online ordering system</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Integrated payment gateway</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time order synchronization</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-500 font-bold uppercase tracking-widest text-sm"
|
||||
>
|
||||
REAL-TIME PERFORMANCE
|
||||
</motion.span>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-bold mt-3 mb-6"
|
||||
>
|
||||
Built for Digital Growth
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-zinc-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Capture more customers online and increase your sales with a system designed to handle high order volumes efficiently.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ value: "2X", label: "Increase in Direct Orders", icon: Zap },
|
||||
{ value: "24/7", label: "Online Order Availability", icon: Clock },
|
||||
{ value: "Instant", label: "Order Sync to Kitchen", icon: Smartphone }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 + 0.3 }}
|
||||
className="bg-zinc-800/50 border border-zinc-700/50 p-8 rounded-2xl text-center group hover:border-red-600/50 hover:bg-zinc-800 transition-all duration-300"
|
||||
>
|
||||
<div className="w-14 h-14 mx-auto bg-zinc-900 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 border border-zinc-700 group-hover:border-red-500/30">
|
||||
<stat.icon className="w-7 h-7 text-zinc-400 group-hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-white mb-2 group-hover:text-red-500 transition-colors">{stat.value}</h3>
|
||||
<p className="text-zinc-400 font-medium">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SMART ONLINE OPERATIONS (Cards) */}
|
||||
<section className="bg-zinc-50 py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-2 block">
|
||||
SMART ONLINE OPERATIONS
|
||||
</span>
|
||||
<h2 className="text-3xl font-bold text-zinc-950 mb-4">Everything You Need to Sell Online</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg">
|
||||
Manage your online presence and orders effortlessly while delivering a seamless experience to your customers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Layout className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Branded Website</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Showcase your restaurant with a fully customized website that reflects your brand.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<ShoppingCart className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Online Ordering System</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Allow customers to place orders directly from your website.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Settings className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Menu Management</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Update your menu in real time across your website and POS.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
<Clock className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">Order Tracking</h3>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Track online orders from placement to preparation and delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION LIST */}
|
||||
<section className="py-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 order-2 lg:order-1">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950">
|
||||
Works Seamlessly With <br/> <span className="text-red-600">Your Restaurant System</span>
|
||||
</h2>
|
||||
<p className="text-zinc-600 text-lg leading-relaxed">
|
||||
Dine360’s online ordering system integrates with your entire platform to ensure smooth operations and real-time updates.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">POS Order Synchronization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Kitchen Display System (KDS) Integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">Inventory Stock Updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-zinc-50 border border-zinc-100">
|
||||
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="font-semibold text-zinc-800">CRM Customer Data Tracking</span>
|
||||
</div>
|
||||
</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 text-center leading-none">ONLINE<br/>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">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Take Your Restaurant Online?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to grow their digital presence and increase direct orders.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RestaurantWebsitePage;
|
||||
358
src/app/features/table-reservation/page.tsx
Normal file
358
src/app/features/table-reservation/page.tsx
Normal file
@ -0,0 +1,358 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
Users,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
Layout,
|
||||
UserCheck,
|
||||
Zap,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
CalendarCheck,
|
||||
QrCode,
|
||||
Percent,
|
||||
Tags
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const TableReservationPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: HERO/OVERVIEW */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">TABLE RESERVATION</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Experience a smarter table reservation system that keeps your dining floor organized even during peak hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Speed Seating */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Layout className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Speed Seating</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Manage table assignments instantly with a visual floor layout designed for busy restaurants.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Reservation Tracking */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<CalendarCheck className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Reservation Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Keep all reservations organized and avoid double bookings with a real-time reservation calendar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Guest Flow Control */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Users className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Guest Flow Control</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Reduce waiting times and optimize seating to increase table turnover.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
TABLE RESERVATION
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Master Your Restaurant Seating
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Give your host team complete control over reservations, walk-ins, and table assignments. Dine360 provides a digital floor layout so your team always knows which tables are available, reserved, or occupied.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Real-time table status</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Reservation scheduling</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Waitlist management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">POS integration</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More →
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: FLOOR MANAGEMENT (Stats) */}
|
||||
<section className="bg-zinc-900 text-white py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
||||
<div className="order-2 md:order-1 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-600/10 to-transparent rounded-3xl blur-2xl"></div>
|
||||
<div className="relative bg-zinc-950 border border-zinc-800 rounded-3xl p-8 shadow-2xl">
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="w-12 h-12 bg-zinc-800 rounded-full flex items-center justify-center">
|
||||
<Layout className="text-red-500 w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-zinc-400">Section Visibility</div>
|
||||
<div className="text-xl font-bold">Optimized Layout</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-zinc-900 rounded-lg border border-zinc-800">
|
||||
<span className="text-zinc-400">Active Tables</span>
|
||||
<span className="text-white font-mono">24/30</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-zinc-900 rounded-lg border border-zinc-800">
|
||||
<span className="text-zinc-400">Queue Status</span>
|
||||
<span className="text-red-500 font-mono">Live Sync</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="order-1 md:order-2">
|
||||
<div className="inline-flex items-center space-x-2 bg-zinc-800 rounded-full px-4 py-2 mb-8 border border-zinc-700">
|
||||
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
|
||||
<span className="text-sm font-medium text-zinc-300">Section 3: FLOOR MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
|
||||
Built for Busy Dining Rooms
|
||||
</h2>
|
||||
<p className="text-zinc-400 text-lg leading-relaxed mb-10">
|
||||
Never lose track of your tables. Our intelligent system ensures hosts can seat guests quickly and manage reservations without confusion.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 border-t border-zinc-800 pt-10">
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">99.99%</div>
|
||||
<div className="text-zinc-500 text-sm">Reservation Sync Reliability</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">Instant</div>
|
||||
<div className="text-zinc-500 text-sm">Table Status Updates</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-bold text-white mb-2">Live View</div>
|
||||
<div className="text-zinc-500 text-sm">Floor Layout Monitoring</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: DETAILED FEATURES (Light) */}
|
||||
<section className="bg-zinc-50 py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-4xl font-bold text-zinc-900 mb-6">Everything You Need to Manage Tables</h2>
|
||||
<p className="text-xl text-zinc-500">
|
||||
Our reservation system gives your staff complete visibility into table availability and guest flow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
icon: <LayoutGrid className="w-6 h-6" />,
|
||||
title: "Table Layout Management",
|
||||
desc: "Visualize your entire restaurant floor and assign tables quickly."
|
||||
},
|
||||
{
|
||||
icon: <CalendarCheck className="w-6 h-6" />,
|
||||
title: "Reservation Calendar",
|
||||
desc: "Manage upcoming reservations and guest bookings effortlessly."
|
||||
},
|
||||
{
|
||||
icon: <Users className="w-6 h-6" />,
|
||||
title: "Waitlist Management",
|
||||
desc: "Handle walk-in guests and reduce waiting times during peak hours."
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
title: "Table Status Updates",
|
||||
desc: "Instantly update table availability when guests arrive or leave."
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-950 p-8 rounded-2xl shadow-sm border border-zinc-800 hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-red-600/10 rounded-xl flex items-center justify-center text-red-600 mb-6">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: INTEGRATION */}
|
||||
<section className="py-32 px-6 bg-white border-t border-zinc-100">
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-8">Works Seamlessly With Your Restaurant System</h2>
|
||||
<p className="text-lg text-zinc-600 mb-10 leading-relaxed">
|
||||
Dine360 Table Reservation integrates with your entire restaurant workflow to ensure smooth service.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"POS billing sync",
|
||||
"Customer profile integration",
|
||||
"Order management connection",
|
||||
"Reservation notifications"
|
||||
].map((item, idx) => (
|
||||
<li key={idx} className="flex items-center gap-4 text-zinc-700 font-bold">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-600"></span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
{/* Decorative background */}
|
||||
<div className="absolute inset-0 bg-red-600/5 blur-3xl rounded-full scale-110 group-hover:bg-red-600/10 transition-colors"></div>
|
||||
|
||||
<div className="relative bg-zinc-950 rounded-[40px] p-8 md:p-12 border border-zinc-800 shadow-2xl overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-red-600/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||
|
||||
<div className="space-y-6 relative z-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-white font-black uppercase tracking-widest text-xs">System Status</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span className="text-zinc-400 text-[10px] font-bold">Synchronized</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-2 w-full bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-red-600 w-full animate-[progress_2s_ease-in-out]"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-zinc-900 border border-zinc-800 p-4 rounded-2xl">
|
||||
<div className="text-zinc-500 text-[10px] font-bold uppercase mb-1">POS Link</div>
|
||||
<div className="text-white font-bold text-sm">Active</div>
|
||||
</div>
|
||||
<div className="bg-zinc-900 border border-zinc-800 p-4 rounded-2xl">
|
||||
<div className="text-zinc-500 text-[10px] font-bold uppercase mb-1">CRM Sync</div>
|
||||
<div className="text-white font-bold text-sm">Encrypted</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-red-600/5 border border-red-600/20 rounded-2xl text-center">
|
||||
<div className="text-red-500 text-[10px] font-bold uppercase tracking-widest mb-1">Reservation Alerts</div>
|
||||
<div className="text-white font-bold">Push Notifications Enabled</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Optimize Your Seating?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to manage their reservations with
|
||||
precision and style.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Start Free Trial
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableReservationPage;
|
||||
247
src/app/features/team-communication/page.tsx
Normal file
247
src/app/features/team-communication/page.tsx
Normal file
@ -0,0 +1,247 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Users,
|
||||
MessageCircle,
|
||||
Zap,
|
||||
Clock,
|
||||
LayoutDashboard,
|
||||
ShieldCheck,
|
||||
Smartphone,
|
||||
Calendar,
|
||||
Bell,
|
||||
Search,
|
||||
CheckCircle2,
|
||||
Lock,
|
||||
Flag
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const TeamCommunicationPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: TEAM HUB HERO */}
|
||||
<section className="py-24 px-6 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-30 -z-10"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-sm mb-4 block">Unified Team HUB</span>
|
||||
<h1 className="text-5xl md:text-6xl font-black text-zinc-950 mb-6 uppercase tracking-tighter leading-[0.9]">Connect Your Staff <br/> Like Never Before</h1>
|
||||
<div className="w-24 h-2 bg-red-600 mx-auto mb-8"></div>
|
||||
<p className="text-gray-500 max-w-3xl mx-auto text-xl leading-relaxed">
|
||||
Eliminate chaos and miscommunication. Dine360 Team Communication brings your front-of-house, kitchen, and management together in one real-time workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Core Feature Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
|
||||
<div className="p-10 rounded-3xl border border-zinc-200 bg-white shadow-sm hover:shadow-xl transition-all group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-zinc-950 flex items-center justify-center mb-6 text-white group-hover:bg-red-600 transition-colors">
|
||||
<MessageCircle className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-950 mb-4 uppercase tracking-tight">Instant Messaging</h3>
|
||||
<p className="text-zinc-500 leading-relaxed text-sm">
|
||||
Direct and group chats for shifts, kitchen stations, and emergency alerts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-10 rounded-3xl border border-zinc-200 bg-white shadow-sm hover:shadow-xl transition-all group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-zinc-950 flex items-center justify-center mb-6 text-white group-hover:bg-red-600 transition-colors">
|
||||
<Flag className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-950 mb-4 uppercase tracking-tight">Priority Tasks</h3>
|
||||
<p className="text-zinc-500 leading-relaxed text-sm">
|
||||
Assign side-work and opening duties with real-time completion tracking.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-10 rounded-3xl border border-zinc-200 bg-white shadow-sm hover:shadow-xl transition-all group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-zinc-950 flex items-center justify-center mb-6 text-white group-hover:bg-red-600 transition-colors">
|
||||
<Bell className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-zinc-950 mb-4 uppercase tracking-tight">Smart Alerts</h3>
|
||||
<p className="text-zinc-500 leading-relaxed text-sm">
|
||||
Automated notifications for stockouts, long wait times, or VIP arrivals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 2: STAFF MOBILE INTERFACE (Split) */}
|
||||
<section className="py-32 px-6 bg-zinc-50">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Right Content */}
|
||||
<div className="space-y-8">
|
||||
<span className="inline-block px-5 py-2 bg-red-600 text-white rounded-full text-xs font-black uppercase tracking-widest">FLAWLESS COORDINATION</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-zinc-950 leading-[0.9] uppercase tracking-tighter">Your Team, <br/> Syncronized.</h2>
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
The front-of-house doesn't need to yell for the manager. The kitchen doesn't need to search for a server. Dine360 provides a silent, high-speed communication layer that keeps your restaurant calm and efficient.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 pt-4">
|
||||
{[
|
||||
{ title: "Role-Based Channels", desc: "Separate streams for servers, chefs, and management." },
|
||||
{ title: "Task Heartbeat", desc: "Automated check-ins for critical opening/closing procedures." },
|
||||
{ title: "Broadcast Mode", desc: "One-way announcements for the entire restaurant staff." }
|
||||
].map((feat, i) => (
|
||||
<div key={i} className="flex items-center gap-4 group">
|
||||
<div className="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="font-black text-zinc-950 uppercase text-sm tracking-tight">{feat.title}:</span>
|
||||
<span className="text-zinc-500 text-sm ml-2">{feat.desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-3 text-zinc-950 font-black uppercase tracking-[0.2em] text-xs hover:text-red-600 transition-colors pt-6">
|
||||
Explore Enterprise Comms
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: METRICS (Stats) */}
|
||||
<section className="py-32 bg-zinc-950 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-red-600/5 blur-[120px] rounded-full translate-y-2/3"></div>
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div className="text-center mb-24">
|
||||
<h2 className="text-4xl md:text-6xl font-black uppercase tracking-tighter mb-6">Efficiency Measured In Seconds</h2>
|
||||
<p className="text-zinc-400 max-w-2xl mx-auto text-lg">Communication isn't just nice—it's profitable. Faster response times lead to higher table turnover and better reviews.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-12">
|
||||
{[
|
||||
{ label: "FASTER MANAGER RESPONSES", val: "-40%", desc: "Mobile ping-to-presence tracking" },
|
||||
{ label: "WASTE REDUCTION", val: "15%", desc: "Instant stock-out reporting to FOH" },
|
||||
{ label: "STAFF RETENTION", val: "+22%", desc: "Clearer expectations and support" }
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center p-12 bg-zinc-900 border border-zinc-800 rounded-[30px] hover:border-red-600/30 transition-all group">
|
||||
<div className="text-5xl font-black text-red-600 mb-4 group-hover:scale-110 transition-transform">{stat.val}</div>
|
||||
<div className="text-xs font-black uppercase tracking-[0.3em] mb-4 text-zinc-300">{stat.label}</div>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: SECURITY & PERMISSIONS */}
|
||||
<section className="py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-4xl md:text-5xl font-black text-zinc-950 uppercase tracking-tighter leading-tight">Enterprise Scale <br/> <span className="text-red-600">Privacy First</span></h2>
|
||||
<p className="text-lg text-zinc-500 leading-relaxed">Dine360 Team communication is built for enterprise security. Control exactly who can see what, when they can be contacted, and keep your business data private.</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4 p-6 bg-zinc-50 rounded-2xl border border-zinc-100 items-center">
|
||||
<Lock className="w-8 h-8 text-zinc-950 shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-black text-sm uppercase tracking-tight">Encrypted Storage</h4>
|
||||
<p className="text-xs text-zinc-500">All messages and logs are stored with bank-grade encryption.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 p-6 bg-zinc-50 rounded-2xl border border-zinc-100 items-center">
|
||||
<Smartphone className="w-8 h-8 text-zinc-950 shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-black text-sm uppercase tracking-tight">Bring Your Own Device (BYOD)</h4>
|
||||
<p className="text-xs text-zinc-500">Native apps for iOS, Android, and web. No proprietary hardware needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-100 h-[500px] rounded-[40px] relative overflow-hidden border border-zinc-200 shadow-inner flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-white opacity-20 bg-[radial-gradient(#000_1px,transparent_1px)] bg-[size:20px_20px]"></div>
|
||||
|
||||
{/* Abstract Security Graphic */}
|
||||
<div className="relative w-64 h-64">
|
||||
<div className="absolute inset-0 bg-red-600/10 rounded-full animate-ping"></div>
|
||||
<div className="absolute inset-4 bg-zinc-950 rounded-full flex items-center justify-center shadow-2xl">
|
||||
<ShieldCheck className="w-24 h-24 text-red-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-red-600 py-32 px-6 text-white text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="max-w-4xl mx-auto relative z-10">
|
||||
<h2 className="text-5xl md:text-7xl font-black uppercase tracking-tighter mb-10 leading-[0.85]">Ready to Bridge <br/> The Communication Gap?</h2>
|
||||
<p className="text-red-100 text-xl mb-12 max-w-2xl mx-auto font-medium">Equip your staff with the tools they need to succeed. Real-time collaboration is just one click away.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-red-600 px-12 py-5 rounded-full font-black text-lg uppercase tracking-widest hover:bg-zinc-100 transition-colors shadow-xl">
|
||||
Get Started Free
|
||||
</button>
|
||||
<button className="bg-transparent border-2 border-white text-white px-12 py-5 rounded-full font-black text-lg uppercase tracking-widest hover:bg-white/10 transition-colors">
|
||||
Talk to Sales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeamCommunicationPage;
|
||||
324
src/app/features/uber-integration/page.tsx
Normal file
324
src/app/features/uber-integration/page.tsx
Normal file
@ -0,0 +1,324 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
Megaphone,
|
||||
Rocket,
|
||||
ClipboardList,
|
||||
CheckCircle,
|
||||
Menu,
|
||||
Clock,
|
||||
Layers,
|
||||
Search,
|
||||
TrendingUp,
|
||||
ClipboardCheck,
|
||||
Bike,
|
||||
Zap,
|
||||
Smartphone,
|
||||
Globe,
|
||||
LayoutGrid,
|
||||
WifiOff,
|
||||
Trash2,
|
||||
Users,
|
||||
CalendarCheck,
|
||||
QrCode,
|
||||
Percent,
|
||||
Tags,
|
||||
Navigation,
|
||||
MapPin,
|
||||
Car,
|
||||
PackageCheck,
|
||||
MonitorPlay,
|
||||
Receipt,
|
||||
Headphones,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
import FeatureQuickNav from '@/components/FeatureQuickNav';
|
||||
|
||||
const UberIntegrationPage = () => {
|
||||
return (
|
||||
<div className="bg-white text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
{/* SECTION 1: DELIVERY INTEGRATION */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center mb-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">DELIVERY INTEGRATION</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Connect your restaurant with delivery platforms and manage all incoming orders from one centralized system.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Columns Layout with Bordered Cards */}
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-32 px-4">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<LayoutGrid className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Unified Order Dashboard</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
View and manage all delivery orders directly within Dine360 without switching between apps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<Zap className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Automatic Order Sync</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Delivery orders appear instantly in the POS and kitchen display, ensuring faster preparation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="flex flex-col items-center p-10 rounded-2xl border border-zinc-800 bg-zinc-950 transition-all duration-300 hover:border-red-600/30 hover:shadow-xl hover:shadow-red-600/5 group">
|
||||
<div className="w-16 h-16 rounded-2xl bg-red-600/10 flex items-center justify-center mb-6 text-red-600 transition-colors group-hover:bg-red-600 group-hover:text-white">
|
||||
<BarChart3 className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-4">Delivery Performance Tracking</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm">
|
||||
Monitor delivery order volumes, revenue, and performance from one dashboard.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
DELIVERY PLATFORM INTEGRATION
|
||||
</span>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-zinc-950 leading-tight">
|
||||
Manage All Delivery <br/> Orders in One Place.
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-zinc-600 leading-relaxed">
|
||||
Dine360 integrates with delivery platforms like Uber to bring every online order directly into your restaurant system. This eliminates manual order entry and ensures the kitchen receives orders instantly.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Uber order integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Automatic order synchronization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Delivery order tracking</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-5 h-5 rounded-full bg-red-600/10 flex items-center justify-center text-red-600">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-700">Unified reporting dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="flex items-center gap-2 text-zinc-950 font-bold hover:text-red-600 transition-all group pt-6">
|
||||
Learn More
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 3: DELIVERY OPERATIONS */}
|
||||
<section className="bg-zinc-950 py-24 text-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="text-4xl font-bold mb-6 tracking-tight uppercase">OPTIMIZE YOUR DELIVERY OPERATIONS</h2>
|
||||
<div className="w-20 h-1.5 bg-red-600 mb-8"></div>
|
||||
<p className="text-zinc-400 text-lg mb-8 leading-relaxed">
|
||||
Dine360 provides the tools you need to streamline delivery workflows and improve order accuracy. Take full control of your online business with features designed for high-volume delivery operations.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
"Faster order preparation and dispatch",
|
||||
"Reduced manual errors and missing tickets",
|
||||
"Seamless coordination with delivery partners",
|
||||
"Real-time updates for kitchen and staff"
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-4 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-red-600/10 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-xl font-medium text-zinc-200">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-red-600/10 blur-[120px] rounded-full"></div>
|
||||
<div className="relative grid grid-cols-2 gap-6">
|
||||
{/* Stat Card 1 */}
|
||||
<div className="p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">100%</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Auto-sync accuracy</div>
|
||||
</div>
|
||||
{/* Stat Card 2 */}
|
||||
<div className="p-8 mt-6 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">5min</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Faster prep time</div>
|
||||
</div>
|
||||
{/* Stat Card 3 */}
|
||||
<div className="p-8 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">30%</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Revenue growth</div>
|
||||
</div>
|
||||
{/* Stat Card 4 */}
|
||||
<div className="p-8 mt-6 rounded-3xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm hover:border-red-600/50 transition-colors group">
|
||||
<div className="text-4xl font-bold text-red-600 mb-2 group-hover:scale-110 transition-transform inline-block">0</div>
|
||||
<div className="text-zinc-400 text-sm font-medium">Missed orders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 4: EVERYTHING YOU NEED FOR ONLINE DELIVERY */}
|
||||
<section className="py-24 px-6 bg-zinc-50">
|
||||
<div className="max-w-7xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-950 mb-4 uppercase tracking-tight">Everything You Need for Online Delivery</h2>
|
||||
<div className="w-20 h-1 bg-red-600 mx-auto mb-6"></div>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
Our delivery integration tools help restaurants manage online orders without operational confusion.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-2 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "Order Synchronization",
|
||||
desc: "Delivery platform orders sync instantly with POS and kitchen.",
|
||||
icon: RefreshCw
|
||||
},
|
||||
{
|
||||
title: "Centralized Dashboard",
|
||||
desc: "Monitor all delivery orders from one screen.",
|
||||
icon: MonitorPlay
|
||||
},
|
||||
{
|
||||
title: "Performance Insights",
|
||||
desc: "Analyze delivery sales trends and revenue growth.",
|
||||
icon: BarChart3
|
||||
},
|
||||
{
|
||||
title: "Kitchen Coordination",
|
||||
desc: "Send delivery orders directly to the kitchen display system.",
|
||||
icon: LayoutGrid
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow border border-zinc-100 group text-center flex flex-col items-center">
|
||||
<div className="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center text-red-600 mb-6 group-hover:bg-red-600 group-hover:text-white transition-colors">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">{feature.title}</h3>
|
||||
<p className="text-zinc-600 leading-relaxed text-sm">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION 5: WORKS SEAMLESSLY WITH YOUR RESTAURANT SYSTEM */}
|
||||
<section className="py-24 px-6 bg-white">
|
||||
<div className="max-w-5xl mx-auto flex flex-col items-center">
|
||||
<div className="w-16 h-16 bg-red-600 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-red-200">
|
||||
<Zap className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-zinc-950 text-center mb-6 leading-tight">
|
||||
Works Seamlessly With <br/> Your Restaurant System
|
||||
</h2>
|
||||
<p className="text-gray-500 text-lg md:text-xl text-center mb-12 max-w-3xl leading-relaxed">
|
||||
Dine360 delivery integration connects with the rest of your platform to ensure smooth order handling.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{[
|
||||
"POS order synchronization",
|
||||
"Kitchen display system routing",
|
||||
"Sales analytics reporting",
|
||||
"Customer order history tracking"
|
||||
].map((service, idx) => (
|
||||
<div key={idx} className="px-6 py-3 bg-zinc-50 rounded-full border border-zinc-200 text-zinc-700 font-bold hover:border-red-600 hover:text-red-600 transition-colors">
|
||||
{service}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUICK NAV */}
|
||||
<FeatureQuickNav />
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="bg-zinc-950 py-24 px-6 text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full opacity-10 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-red-600 blur-[150px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-8">Ready to Boost Your Delivery?</h2>
|
||||
<p className="text-zinc-400 text-lg mb-10 max-w-2xl mx-auto">
|
||||
Join hundreds of restaurants that use Dine360 to dominate the delivery market.
|
||||
</p>
|
||||
<button className="bg-red-600 text-white px-10 py-4 rounded-full font-bold text-lg hover:bg-red-700 transition-all shadow-xl shadow-red-600/20 active:scale-95">
|
||||
Contact Us
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UberIntegrationPage;
|
||||
38
src/app/globals.css
Normal file
38
src/app/globals.css
Normal file
@ -0,0 +1,38 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ffffff;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-brand-red: #dc2626;
|
||||
--color-brand-cream: #f9f9f5;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #3f3f46; /* zinc-700 */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #52525b; /* zinc-600 */
|
||||
}
|
||||
8
src/app/layout.js
Normal file
8
src/app/layout.js
Normal file
@ -0,0 +1,8 @@
|
||||
export const metadata = {
|
||||
title: {
|
||||
default: "Dine360 - Restaurant POS System",
|
||||
template: "%s | Dine360",
|
||||
},
|
||||
description:
|
||||
"All-in-one restaurant POS system with QR menu, billing, CRM, and order management.",
|
||||
};
|
||||
34
src/app/layout.tsx
Normal file
34
src/app/layout.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "dine360 - Complete Restaurant Management System",
|
||||
description: "Built for Growth - The Complete Restaurant Management System with 24/7 Expert Support",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
5
src/app/page.js
Normal file
5
src/app/page.js
Normal file
@ -0,0 +1,5 @@
|
||||
export const metadata = {
|
||||
title: "Restaurant POS System with QR Menu",
|
||||
description:
|
||||
"Manage billing, orders, and customers with Dine360's restaurant POS system.",
|
||||
};
|
||||
27
src/app/page.tsx
Normal file
27
src/app/page.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import HeroSection from "@/components/HeroSection";
|
||||
import VideoSection from "@/components/VideoSection";
|
||||
import HighlightsSection from "@/components/HighlightsSection";
|
||||
import Testimonials from "@/components/Testimonials";
|
||||
import FeaturesSection from "@/components/FeaturesSection";
|
||||
import FAQ from "@/components/FAQ";
|
||||
import ContactSection from "@/components/ContactSection";
|
||||
import Footer from "@/components/Footer";
|
||||
import ComparisonSection from "@/components/ComparisonSection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="relative min-h-screen font-sans bg-black text-white selection:bg-red-600 selection:text-white">
|
||||
<Navbar />
|
||||
<HeroSection />
|
||||
<VideoSection />
|
||||
<ComparisonSection />
|
||||
<FeaturesSection />
|
||||
<HighlightsSection />
|
||||
<Testimonials />
|
||||
<FAQ />
|
||||
{/* <ContactSection /> */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
242
src/app/pricing/page.tsx
Normal file
242
src/app/pricing/page.tsx
Normal file
@ -0,0 +1,242 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Check, Info, HelpCircle, Rocket, ShieldCheck, Zap } from 'lucide-react'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
const PricingPage = () => {
|
||||
const [isYearly, setIsYearly] = useState(false)
|
||||
const [selectedPlan, setSelectedPlan] = useState<number | null>(1) // Default to Business Plan
|
||||
|
||||
const plans = [
|
||||
{
|
||||
id: 0,
|
||||
name: "Starter Plan",
|
||||
desc: "Perfect for small cafés and quick-service outlets.",
|
||||
monthlyPrice: 1999,
|
||||
features: [
|
||||
{ label: "3 User Accounts", icon: Check },
|
||||
{ label: "1 Branch Access", icon: Check },
|
||||
{ label: "Basic Sales Reporting", icon: Check },
|
||||
{ label: "POS & Order Management", icon: Check },
|
||||
{ label: "Table Management", icon: Check },
|
||||
],
|
||||
cta: "Start 7-Day Free Trial →",
|
||||
highlight: false,
|
||||
userCost: 499
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "Business Plan",
|
||||
desc: "Ideal for growing restaurants and multi-outlet operators.",
|
||||
monthlyPrice: 4999,
|
||||
features: [
|
||||
{ label: "10 User Accounts", icon: Check },
|
||||
{ label: "Up to 5 Branches", icon: Check },
|
||||
{ label: "Advanced Analytics & Reports", icon: Check },
|
||||
{ label: "Inventory Management", icon: Check },
|
||||
{ label: "Kitchen Display System", icon: Check },
|
||||
{ label: "CRM & Customer Insights", icon: Check },
|
||||
],
|
||||
cta: "Choose This Plan →",
|
||||
highlight: true,
|
||||
userCost: 399
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Enterprise Plan",
|
||||
desc: "Comprehensive solution for large chains and franchise networks.",
|
||||
monthlyPrice: 9999,
|
||||
features: [
|
||||
{ label: "Unlimited Users", icon: Check },
|
||||
{ label: "Unlimited Branches", icon: Check },
|
||||
{ label: "Full Analytics & Dashboard", icon: Check },
|
||||
{ label: "Priority 24/7 Support", icon: Check },
|
||||
{ label: "API & 3rd-Party Integrations", icon: Check },
|
||||
{ label: "Dedicated Account Manager", icon: Check },
|
||||
],
|
||||
cta: "Choose This Plan →",
|
||||
highlight: false,
|
||||
userCost: 0
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="bg-slate-50 min-h-screen text-zinc-900 font-sans selection:bg-red-600 selection:text-white pt-28">
|
||||
<Navbar />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-16 lg:py-24">
|
||||
<div className="text-center mb-24 space-y-6">
|
||||
<div className="inline-block px-5 py-2 bg-red-100 text-red-700 rounded-full text-xs font-bold uppercase tracking-widest mb-2 border border-red-200">
|
||||
Transparent Pricing
|
||||
</div>
|
||||
<h1 className="text-5xl lg:text-7xl font-black tracking-tight text-zinc-900 leading-tight">
|
||||
Simple Plans for Every <span className="text-red-600">Restaurant</span>
|
||||
</h1>
|
||||
<p className="text-zinc-600 max-w-3xl mx-auto text-xl font-medium leading-relaxed">
|
||||
Affordable, scalable restaurant management tools designed to grow with your business — whether you run one outlet or many.
|
||||
</p>
|
||||
|
||||
{/* Billing Toggle */}
|
||||
<div className="flex items-center justify-center gap-6 mt-12">
|
||||
<span className={`text-sm font-bold uppercase tracking-widest ${!isYearly ? 'text-zinc-950' : 'text-zinc-400'}`}>Monthly</span>
|
||||
<button
|
||||
onClick={() => setIsYearly(!isYearly)}
|
||||
className="relative w-14 h-8 bg-white rounded-full p-1.5 transition-all duration-300 focus:outline-none border-2 border-zinc-200 shadow-sm"
|
||||
>
|
||||
<div className={`w-4 h-4 bg-red-600 rounded-full shadow-md transform transition-transform duration-300 ${isYearly ? 'translate-x-6' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
<span className={`text-sm font-bold uppercase tracking-widest ${isYearly ? 'text-zinc-950' : 'text-zinc-400'}`}>
|
||||
Yearly <span className="text-red-700 text-xs ml-2 bg-red-100 px-3 py-1 rounded-full border border-red-200 font-black">Save 25%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{plans.map((plan) => (
|
||||
<PricingCard
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
isYearly={isYearly}
|
||||
isSelected={selectedPlan === plan.id}
|
||||
onClick={() => setSelectedPlan(plan.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* FAQ Preview or Trust Section */}
|
||||
<section className="mt-20 pt-12 border-t border-zinc-200 grid md:grid-cols-3 gap-12">
|
||||
<div className="flex flex-col items-center text-center space-y-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white shadow-md flex items-center justify-center text-red-600 border border-zinc-100">
|
||||
<ShieldCheck className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900">Secure Transactions</h3>
|
||||
<p className="text-sm text-zinc-500 font-medium">Compliant with Indian payment standards.</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center space-y-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white shadow-md flex items-center justify-center text-red-600 border border-zinc-100">
|
||||
<Zap className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900">Local Setup</h3>
|
||||
<p className="text-sm text-zinc-500 font-medium">Quick implementation by our local experts.</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center space-y-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white shadow-md flex items-center justify-center text-red-600 border border-zinc-100">
|
||||
<HelpCircle className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900">Support in Hindi/English</h3>
|
||||
<p className="text-sm text-zinc-500 font-medium">Available during your peak business hours.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PricingCard = ({ plan, isYearly, isSelected, onClick }: { plan: any, isYearly: boolean, isSelected: boolean, onClick: () => void }) => {
|
||||
const [extraUsers, setExtraUsers] = useState(5)
|
||||
const [isCrmEnabled, setIsCrmEnabled] = useState(false)
|
||||
|
||||
const price = isYearly ? Math.floor(plan.monthlyPrice * 0.75) : plan.monthlyPrice
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`bg-white rounded-[40px] p-8 border-2 transition-all duration-500 relative flex flex-col cursor-pointer ${
|
||||
isSelected
|
||||
? 'border-red-600 -translate-y-2'
|
||||
: 'border-transparent shadow-[0_12px_40px_-12px_rgba(0,0,0,0.05)] hover:border-zinc-100'
|
||||
}`}
|
||||
>
|
||||
{plan.highlight && (
|
||||
<div className={`absolute -top-4 left-1/2 -translate-x-1/2 text-white text-[9px] font-black px-6 py-2 rounded-full uppercase tracking-[0.2em] shadow-xl transition-all duration-500 ${isSelected ? 'bg-red-600' : 'bg-zinc-800'}`}>
|
||||
Recommended
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-6 text-center">
|
||||
<h3 className="text-xl font-black text-zinc-900 mb-2">{plan.name}</h3>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed font-semibold px-2">{plan.desc}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 flex flex-col items-center gap-1">
|
||||
<div className="flex items-baseline text-red-600">
|
||||
<span className="text-4xl font-black">₹{price.toLocaleString('en-IN')}</span>
|
||||
<span className="text-zinc-400 text-xs font-bold ml-1.5 uppercase tracking-widest">/mo</span>
|
||||
</div>
|
||||
{isYearly && <span className="text-[10px] text-zinc-300 font-bold italic line-through">₹{plan.monthlyPrice.toLocaleString('en-IN')}</span>}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-8 flex-grow px-1">
|
||||
{plan.features.map((feature: any, fIdx: number) => (
|
||||
<li key={fIdx} className="flex items-center gap-4 text-zinc-700 group">
|
||||
<div className={`p-1 rounded-lg transition-colors ${isSelected ? 'bg-red-50 text-red-600' : 'bg-zinc-100 text-zinc-500 group-hover:bg-red-50 group-hover:text-red-600'}`}>
|
||||
<feature.icon className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-sm font-bold">{feature.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="pt-8 border-t border-zinc-100 mb-8 space-y-8">
|
||||
{plan.userCost > 0 ? (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400">Add-On: Users</span>
|
||||
<span className="bg-red-50 px-3 py-1 rounded-lg border border-red-100 text-red-600 text-xs font-black">+{extraUsers}</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="50"
|
||||
value={extraUsers}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
setExtraUsers(parseInt(e.target.value))
|
||||
}}
|
||||
className="w-full h-1 bg-zinc-100 rounded-lg appearance-none cursor-pointer accent-red-600"
|
||||
/>
|
||||
<div className="flex justify-between text-[9px] font-black text-zinc-400 mt-2 px-1 uppercase italic">
|
||||
<span className="underline decoration-red-600/30">₹{plan.userCost}/user</span>
|
||||
<span className="text-zinc-900">Total: ₹{(extraUsers * plan.userCost).toLocaleString('en-IN')}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.15em] text-zinc-400 text-center italic">Custom Integrations & White Labeling Available</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{plan.name !== "Enterprise Plan" && (
|
||||
<div className="flex justify-between items-center group cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsCrmEnabled(!isCrmEnabled)
|
||||
}}>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 group-hover:text-zinc-600 transition-colors">
|
||||
WhatsApp Integration <span className="text-red-500/60 ml-1">· ₹999</span>
|
||||
</span>
|
||||
<button
|
||||
className={`relative w-9 h-5 rounded-full transition-all duration-500 ${isCrmEnabled ? 'bg-red-600' : 'bg-zinc-200'}`}
|
||||
>
|
||||
<div className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow-md transition-transform duration-500 ${isCrmEnabled ? 'translate-x-4' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button className={`w-full py-4 rounded-[22px] font-black text-xs tracking-[0.2em] uppercase transition-all duration-500 active:scale-[0.98] ${
|
||||
isSelected
|
||||
? 'bg-red-600 text-white hover:bg-red-700'
|
||||
: 'bg-zinc-900 text-white hover:bg-black'
|
||||
}`}>
|
||||
{plan.cta}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PricingPage
|
||||
109
src/app/pricing/page01.tsx
Normal file
109
src/app/pricing/page01.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Check, ArrowRight } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const PricingPageVersionTwo = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#FDFCF8] text-black selection:bg-red-600 selection:text-white pt-24">
|
||||
<Navbar />
|
||||
|
||||
<main className="max-w-6xl mx-auto px-4 py-16 text-center relative overflow-hidden">
|
||||
{/* Decorative Background Text "PRICING" */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-12 select-none pointer-events-none opacity-[0.03] text-[20vw] font-black whitespace-nowrap tracking-tighter uppercase italic">
|
||||
PRICING
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="relative mb-16">
|
||||
<div className="flex items-center justify-center gap-4 mb-8">
|
||||
<div className="h-[2px] w-8 bg-brand-red"></div>
|
||||
<span className="text-brand-red font-bold uppercase tracking-[0.2em] text-xs">Transparent Pricing</span>
|
||||
<div className="h-[2px] w-8 bg-brand-red"></div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-6xl md:text-8xl font-serif font-bold leading-[1.1] mb-6 tracking-tight">
|
||||
Simple Plans for<br />
|
||||
<span className="text-brand-red italic underline decoration-brand-red/20 underline-offset-8">Every Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-500 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed font-medium">
|
||||
Affordable, scalable restaurant management tools designed to grow with your business — whether you run one outlet or many.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing Card */}
|
||||
<div className="max-w-md mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-[40px] p-8 md:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100 text-left relative"
|
||||
>
|
||||
<div className="mb-10">
|
||||
<span className="text-brand-red font-bold uppercase tracking-widest text-xs mb-4 block">Starter</span>
|
||||
<h2 className="text-4xl font-serif font-bold mb-3">Single Outlet</h2>
|
||||
<p className="text-gray-500 text-sm leading-relaxed max-w-[260px]">
|
||||
Perfect for independent restaurants getting started with smart POS.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-px bg-gray-100 mb-10"></div>
|
||||
|
||||
<div className="mb-10">
|
||||
<span className="text-gray-400 font-bold uppercase tracking-[0.15em] text-[10px] mb-4 block">Starting at</span>
|
||||
<div className="flex items-start">
|
||||
<span className="text-3xl font-serif font-bold mt-1">$</span>
|
||||
<span className="text-8xl font-serif font-black tracking-tighter leading-none">200</span>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium text-sm mt-4">
|
||||
per month · flat fee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-5 mb-12">
|
||||
{[
|
||||
"Unlimited tablets — no extra charge",
|
||||
"Unlimited staff accounts",
|
||||
"Use your own hardware",
|
||||
"Core POS & order management"
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<div className="bg-[#FFF1F1] p-1 rounded-full">
|
||||
<Check size={14} className="text-brand-red stroke-[3]" />
|
||||
</div>
|
||||
<span className="text-gray-700 font-medium text-base">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<button className="w-full bg-white border-2 border-black text-black font-bold py-6 rounded-full hover:bg-black hover:text-white transition-all duration-300 shadow-xl hover:shadow-2xl">
|
||||
Get Started
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Feature List Bottom */}
|
||||
<div className="max-w-4xl mx-auto flex flex-wrap justify-center items-center gap-x-12 gap-y-6">
|
||||
{[
|
||||
"No hardware costs",
|
||||
"No per-tablet fees",
|
||||
"No per-user charges",
|
||||
"Cancel anytime"
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3 group">
|
||||
<div className="w-2 h-2 rounded-full bg-brand-red group-hover:scale-125 transition-transform"></div>
|
||||
<span className="text-gray-500 font-bold text-sm tracking-tight">{item}</span>
|
||||
{idx < 3 && <div className="hidden lg:block w-px h-10 bg-gray-200 ml-8"></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingPageVersionTwo;
|
||||
337
src/app/privacy/page.tsx
Normal file
337
src/app/privacy/page.tsx
Normal file
@ -0,0 +1,337 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Check, Shield, Lock, Cloud, UserCheck, Globe, Mail } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const PrivacyPage = () => {
|
||||
const [activeSection, setActiveSection] = useState(1);
|
||||
|
||||
const sections = [
|
||||
{ id: 1, title: '1. Information We Collect' },
|
||||
{ id: 2, title: '2. How We Use Information' },
|
||||
{ id: 3, title: '3. Data Storage & Security' },
|
||||
{ id: 4, title: '4. Data Sharing' },
|
||||
{ id: 5, title: '5. Third-Party Services' },
|
||||
{ id: 6, title: '6. Data Retention' },
|
||||
{ id: 7, title: '7. Your Rights' },
|
||||
{ id: 8, title: '8. Cookies & Tracking' },
|
||||
{ id: 9, title: '9. Children’s Privacy' },
|
||||
{ id: 10, title: '10. International Transfers' },
|
||||
{ id: 11, title: '11. Changes to Policy' },
|
||||
{ id: 12, title: '12. Contact us' },
|
||||
];
|
||||
|
||||
const sidebarVariants = {
|
||||
hidden: { opacity: 0, x: -20 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
|
||||
};
|
||||
|
||||
const contentVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-black font-sans">
|
||||
<Navbar />
|
||||
|
||||
<main className="container mx-auto px-6 pt-32 pb-20">
|
||||
<div className="flex flex-col lg:flex-row gap-12 max-w-7xl mx-auto">
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
<motion.aside
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={sidebarVariants}
|
||||
className="lg:w-1/4"
|
||||
>
|
||||
<div className="sticky top-32 bg-black p-8 -ml-10 mr-1 rounded-2xl shadow-xl border border-zinc-800">
|
||||
<h2 className="text-zinc-500 uppercase tracking-widest text-xs font-bold mb-6 italic">Navigation</h2>
|
||||
<ul className="space-y-4 max-h-[calc(100vh-300px)] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{sections.map((section) => (
|
||||
<li key={section.id}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection(section.id);
|
||||
document.getElementById(`section-${section.id}`)?.scrollIntoView({ behavior: 'smooth' });
|
||||
}}
|
||||
className={`text-left w-full flex items-center gap-3 transition-colors duration-300 relative ${
|
||||
activeSection === section.id
|
||||
? 'text-white font-extrabold'
|
||||
: 'text-zinc-400 hover:text-white font-medium'
|
||||
}`}
|
||||
>
|
||||
<div className="w-1.5 h-1.5 flex-shrink-0">
|
||||
{activeSection === section.id && (
|
||||
<motion.div
|
||||
layoutId="activeIndicator"
|
||||
className="w-1.5 h-1.5 rounded-full bg-brand-red"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="truncate">
|
||||
{section.title}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.aside>
|
||||
|
||||
{/* Content Area */}
|
||||
<motion.section
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={contentVariants}
|
||||
className="lg:w-3/4 space-y-10"
|
||||
>
|
||||
<header className="space-y-3">
|
||||
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter text-black">
|
||||
Privacy <span className="text-brand-red">Policy</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div className="space-y-10 max-w-3xl">
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-500 font-medium text-sm">Effective Date: March 30, 2026</p>
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
At Dine360, we are committed to protecting your privacy and ensuring the security of your data. This Privacy Policy explains how we collect, use, store, and protect your information when you use our platform and services.
|
||||
By using Dine360, you agree to the practices described in this Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. INFORMATION WE COLLECT */}
|
||||
<div id="section-1" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
1. INFORMATION WE COLLECT
|
||||
</h2>
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-zinc-900">a) Business & Account Information</h3>
|
||||
<ul className="space-y-1.5 text-zinc-600 text-base list-disc pl-6">
|
||||
<li>Name, email address, phone number</li>
|
||||
<li>Business name, address, and details</li>
|
||||
<li>Login credentials</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-zinc-900">b) Operational Data</h3>
|
||||
<ul className="space-y-1.5 text-zinc-600 text-base list-disc pl-6">
|
||||
<li>Orders, billing, and transaction data</li>
|
||||
<li>Inventory and product data</li>
|
||||
<li>Customer information entered into the system</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-zinc-900">c) Device & Usage Information</h3>
|
||||
<ul className="space-y-1.5 text-zinc-600 text-base list-disc pl-6">
|
||||
<li>IP address</li>
|
||||
<li>Browser type and device details</li>
|
||||
<li>Usage activity within the platform</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-zinc-900">d) Payment Information</h3>
|
||||
<p className="text-zinc-600 text-base italic">
|
||||
Payment details are processed via secure third-party payment providers. Dine360 does not store sensitive payment card details.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. HOW WE USE YOUR INFORMATION */}
|
||||
<div id="section-2" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
2. HOW WE USE YOUR INFORMATION
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{[
|
||||
'Provide and operate Dine360 services',
|
||||
'Process transactions and manage orders',
|
||||
'Improve system performance and user experience',
|
||||
'Provide customer support',
|
||||
'Send service updates, alerts, and notifications',
|
||||
'Ensure security and prevent fraud'
|
||||
].map((item, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-3 bg-zinc-50 rounded-xl border border-zinc-100">
|
||||
<Check className="text-brand-red w-4 h-4 mt-1 flex-shrink-0" />
|
||||
<span className="text-zinc-700 font-medium text-sm">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. DATA STORAGE & SECURITY */}
|
||||
<div id="section-3" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
3. DATA STORAGE & SECURITY
|
||||
</h2>
|
||||
<div className="space-y-4 text-zinc-600 text-base">
|
||||
<p>We implement industry-standard security measures, including:</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<li className="flex items-center gap-3 text-sm"><Cloud className="text-brand-red w-4 h-4"/> Secure cloud infrastructure</li>
|
||||
<li className="flex items-center gap-3 text-sm"><Lock className="text-brand-red w-4 h-4"/> Data encryption</li>
|
||||
<li className="flex items-center gap-3 text-sm"><Shield className="text-brand-red w-4 h-4"/> Access control</li>
|
||||
<li className="flex items-center gap-3 text-sm"><UserCheck className="text-brand-red w-4 h-4"/> User authentication</li>
|
||||
</ul>
|
||||
<p className="italic bg-zinc-50 p-3 rounded-xl border-l-4 border-zinc-300 text-sm">
|
||||
While we strive to protect your data, no system is completely secure. Users are responsible for safeguarding their account credentials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. DATA SHARING */}
|
||||
<div id="section-4" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
4. DATA SHARING
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p className="font-bold text-black italic text-sm">We do not sell your data.</p>
|
||||
<p>We may share your data only with:</p>
|
||||
<ul className="space-y-1.5 list-disc pl-6">
|
||||
<li>Trusted third-party service providers (e.g., payment gateways, integrations)</li>
|
||||
<li>Delivery platforms and APIs (if enabled by you)</li>
|
||||
<li>Legal authorities when required by law</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 5. THIRD-PARTY SERVICES */}
|
||||
<div id="section-5" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
5. THIRD-PARTY SERVICES
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>Dine360 may integrate with third-party services such as:</p>
|
||||
<ul className="flex flex-wrap gap-2">
|
||||
{['Payment providers', 'Delivery platforms', 'External APIs'].map((tag) => (
|
||||
<span key={tag} className="px-3 py-1.5 bg-zinc-100 rounded-full text-zinc-800 text-xs font-semibold border border-zinc-200">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-zinc-500 italic text-sm">These services operate independently, and their privacy practices are governed by their own policies.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6. DATA RETENTION */}
|
||||
<div id="section-6" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
6. DATA RETENTION
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We retain your data:</p>
|
||||
<ul className="space-y-1.5 list-disc pl-6">
|
||||
<li>As long as your account is active</li>
|
||||
<li>As required for legal, regulatory, or operational purposes</li>
|
||||
</ul>
|
||||
<p>You may request deletion of your data by contacting us.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 7. YOUR RIGHTS */}
|
||||
<div id="section-7" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
7. YOUR RIGHTS
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>Depending on applicable laws, you may have the right to:</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<li className="flex items-center gap-3 font-medium text-black text-sm">Access your data</li>
|
||||
<li className="flex items-center gap-3 font-medium text-black text-sm">Correct inaccurate information</li>
|
||||
<li className="flex items-center gap-3 font-medium text-black text-sm">Request deletion</li>
|
||||
<li className="flex items-center gap-3 font-medium text-black text-sm">Restrict or object to processing</li>
|
||||
</ul>
|
||||
<p>To exercise these rights, contact us at the details below.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 8. COOKIES & TRACKING */}
|
||||
<div id="section-8" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
8. COOKIES & TRACKING
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We may use cookies and similar technologies to:</p>
|
||||
<ul className="space-y-1.5 list-disc pl-6">
|
||||
<li>Improve user experience</li>
|
||||
<li>Analyze usage patterns</li>
|
||||
<li>Enhance platform performance</li>
|
||||
</ul>
|
||||
<p className="text-zinc-500 italic text-sm">You can control cookie settings through your browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 9. CHILDREN’S PRIVACY */}
|
||||
<div id="section-9" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
9. CHILDREN’S PRIVACY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>Dine360 is not intended for use by individuals under the age of 18.</p>
|
||||
<p>We do not knowingly collect personal data from children.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 10. INTERNATIONAL DATA TRANSFERS */}
|
||||
<div id="section-10" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
10. INTERNATIONAL DATA TRANSFERS
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>If you access Dine360 from outside India, your data may be processed and stored in locations where our servers are hosted.</p>
|
||||
<p className="font-semibold text-black italic text-sm">By using our services, you consent to such transfers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 11. CHANGES TO THIS POLICY */}
|
||||
<div id="section-11" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
11. CHANGES TO THIS POLICY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We may update this Privacy Policy from time to time.</p>
|
||||
<p>Changes will be posted on this page with an updated effective date.</p>
|
||||
<p className="font-semibold text-black italic text-sm">Continued use of Dine360 means you accept the updated policy.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 12. CONTACT US */}
|
||||
<div id="section-12" className="space-y-5 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
12. CONTACT US
|
||||
</h2>
|
||||
<div className="space-y-4 text-zinc-600 text-base bg-zinc-50 p-5 rounded-2xl border border-zinc-200">
|
||||
<p>If you have any questions about this Privacy Policy or your data, contact us:</p>
|
||||
<div className="space-y-1.5">
|
||||
<p className="flex items-center gap-3">
|
||||
<Mail className="text-brand-red w-4 h-4" />
|
||||
<strong>Email:</strong>
|
||||
<a href="mailto:support@dine360ads.com" className="text-brand-red hover:underline ml-1">support@dine360ads.com</a>
|
||||
</p>
|
||||
<p className="flex items-center gap-3">
|
||||
<Globe className="text-brand-red w-4 h-4" />
|
||||
<strong>Website:</strong>
|
||||
<a href="https://dine360ads.com" target="_blank" rel="noopener noreferrer" className="text-brand-red hover:underline ml-1">https://dine360ads.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrivacyPage;
|
||||
0
src/app/privacy/page.tsx.tmp
Normal file
0
src/app/privacy/page.tsx.tmp
Normal file
549
src/app/restaurant-types/bakery/page.tsx
Normal file
549
src/app/restaurant-types/bakery/page.tsx
Normal file
@ -0,0 +1,549 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const BakeryPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/women/${10 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
GROW YOUR BAKERY BUSINESS SMARTER
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Manage Your Bakery <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Operations Effortlessly</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Dine360 helps you handle counter sales, custom cake orders, and operations from one powerful platform. Built for modern bakeries to manage daily sales effortlessly.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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[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">
|
||||
<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>
|
||||
</div>
|
||||
</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[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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR BAKERIES</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Bakery Operations <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Bakeries manage a mix of walk-in customers, pre-orders, and custom cake requests. Dine360 simplifies everything — from billing to order tracking and stock management — so you can focus on baking.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Serve customers quickly at the counter." },
|
||||
{ label: "Reduced Order Errors", value: "30%", desc: "Track custom and bulk orders accurately." },
|
||||
{ label: "Inventory Control", value: "100%", desc: "Monitor ingredients and stock in real time." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
BAKERY PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Smooth Production & Sales Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Bakeries require coordination between sales and production. Dine360 ensures every order is tracked from placement to delivery.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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="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" />
|
||||
</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>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Manage baking schedules and order priorities effortlessly.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
</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="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" />
|
||||
</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>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure every bakery order is delivered correctly and billed accurately.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
POS Built for Bakery Counters
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle counter sales quickly and efficiently with specialized bakery billing.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast billing for walk-in customers",
|
||||
"Accept multiple payment methods",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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={CARD_IMAGES[0]} alt="Bakery POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Custom & Bulk Orders
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep track of all bakery orders, advance bookings, and custom cake requests with ease.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track custom cake orders",
|
||||
"Manage advance bookings",
|
||||
"Monitor order status and production"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Counter/Service 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]">
|
||||
<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="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">SERVICE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Handle High Customer Flow
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure smooth service during peak hours with optimized queue management and fast takeaways.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage customer queues efficiently",
|
||||
"Track takeaway orders instantly",
|
||||
"Improve service speed at counter"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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={CARD_IMAGES[3]} alt="Bakery Flow" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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] 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="QR Menu" 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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Showcase Your Bakery Menu
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Let customers explore your cakes, pastries, and combos easily through a digital menu.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access for customers",
|
||||
"Highlight cakes, pastries, and daily combos",
|
||||
"Update menu items and prices 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch 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" />
|
||||
<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="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">MULTI LOCATION BAKERIES</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Expand Your Bakery Business
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Manage multiple bakery outlets with centralized control and real-time monitoring.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Central Sales", desc: "Monitor sales across all locations instantly" },
|
||||
{ title: "Central Menu", desc: "Update bakery menus centrally for all branches" },
|
||||
{ title: "Analytics", desc: "Track performance and detailed bakery analytics" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm tracking-wide">{item.title}</h4>
|
||||
<p className="text-zinc-500 text-xs leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-6">
|
||||
<Link href="/contact" className="inline-flex items-center gap-2 text-white font-bold hover:text-red-500 transition-colors group">
|
||||
Scale Your Business <Zap className="w-4 h-4 group-hover:animate-pulse" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full hidden lg:block">
|
||||
<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>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ */}
|
||||
<FAQ />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BakeryPage
|
||||
541
src/app/restaurant-types/bistro/page.tsx
Normal file
541
src/app/restaurant-types/bistro/page.tsx
Normal file
@ -0,0 +1,541 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const BistroPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${30 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
Run Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Bistro with <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Ease & Precision</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver a warm, intimate dining experience while managing operations effortlessly with a system built for modern bistros. Dine360 helps you manage orders, tables, and service flow — all from one powerful platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">80%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">25%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR BISTROS</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Bistro Operations <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Bistros are known for their cozy ambiance, curated menus, and personalized service. Managing this experience while keeping operations smooth can be challenging. Dine360 simplifies your workflow — helping you manage orders, seating, and billing efficiently so you can focus on delivering exceptional dining experiences.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "80%", desc: "Serve guests smoothly without delays." },
|
||||
{ label: "Improved Table Turnover", value: "25%", desc: "Optimize seating without compromising experience." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Reliable and flexible billing options." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
BISTRO PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Intimate Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Bistros require a balance of service speed and personalized attention. Dine360 ensures smooth coordination between staff, kitchen, and guests.
|
||||
</motion.p>
|
||||
</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-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" />
|
||||
</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">Seamless Order Taking</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take orders quickly while maintaining a personal touch.</p>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Kitchen Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly routed to the kitchen for efficient preparation.</p>
|
||||
</div>
|
||||
</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="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">
|
||||
<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">Enhanced Guest Experience</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce wait times while maintaining service quality.</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<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">Ensure error-free billing for a smooth checkout.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
POS Built for Cozy Dining Spaces
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle orders efficiently with a POS system designed for bistros.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Quick order entry",
|
||||
"Accept multiple payment methods",
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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="Bistro POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Keep Orders Organized
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track every order from table to kitchen effortlessly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Modify orders instantly",
|
||||
"Ensure smooth order flow"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage Seating with Ease
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Organize tables and reservations to enhance guest experience.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Track table availability", desc: "Monitor floor status in real-time." },
|
||||
{ title: "Manage reservations", desc: "Handle bookings and walk-ins effortlessly." },
|
||||
{ title: "Improve seating flow", desc: "Enhance guest comfort and turnover." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Modern Guests
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Offer a convenient and elegant menu experience.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight signature dishes",
|
||||
"Update menu instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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 BISTROS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Expand Your Bistro Brand
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Grow your business while maintaining consistency across locations.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across branches",
|
||||
"Manage menus centrally",
|
||||
"Track performance and insights"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials
|
||||
title="Testimonials"
|
||||
subtitle="What Bistro Owners Say About Dine360"
|
||||
/>
|
||||
|
||||
<FAQ
|
||||
title="Answers To Common Questions"
|
||||
subtitle="Frequently Asked Questions"
|
||||
description="Everything you need to know about Dine360 for bistros."
|
||||
questions={[
|
||||
{
|
||||
question: "Is Dine360 suitable for bistros?",
|
||||
answer: "Yes. It is designed to support smaller, experience-focused restaurants like bistros."
|
||||
},
|
||||
{
|
||||
question: "Can it handle reservations and table management?",
|
||||
answer: "Yes. Dine360 provides easy table and reservation management."
|
||||
},
|
||||
{
|
||||
question: "Does it support dine-in and takeaway?",
|
||||
answer: "Yes. It supports dine-in, takeaway, and delivery orders."
|
||||
},
|
||||
{
|
||||
question: "Can I track sales and performance?",
|
||||
answer: "Yes. The platform provides real-time analytics and reports."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BistroPage
|
||||
517
src/app/restaurant-types/buffet/page.tsx
Normal file
517
src/app/restaurant-types/buffet/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const BuffetPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
BUFFET RESTAURANT
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Simplify Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Buffet Restaurant Operations</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve large numbers of guests efficiently while maintaining smooth service with a system designed for buffet-style restaurants.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">Table Turnover</p>
|
||||
<p className="text-white font-bold text-2xl">35%</p>
|
||||
</div>
|
||||
</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" />
|
||||
<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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Buffet Restaurant with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Dine360 simplifies buffet operations by streamlining billing, seating management, and service coordination so your team can focus on delivering great dining experiences.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Guest Processing", value: "90%", desc: "Reduce waiting times during busy hours." },
|
||||
{ label: "Improved Table Turnover", value: "35%", desc: "Serve more guests efficiently." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Reliable and flexible payment processing." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
BUFFET RESTAURANT PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Efficient Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Dine360 ensures that billing, seating, and service operations run smoothly even during peak hours.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Faster Guest Check-In</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle guest entry and billing quickly with a streamlined POS system.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Dining Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Efficient table management helps maintain a steady flow of guests.</p>
|
||||
</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="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" />
|
||||
</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">Reduced Waiting Lines</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart queue management ensures customers are seated quickly.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated billing ensures every guest is charged correctly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast Billing for Buffet Restaurants
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Process guest billing quickly and keep operations running smoothly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast guest billing and checkout",
|
||||
"Accept multiple payment methods",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Simplify Order Handling
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage special orders, beverages, and add-ons efficiently.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track additional orders in real time",
|
||||
"Modify orders instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage High Guest Volume Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep track of tables and guest seating even during busy hours.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Monitor availability", desc: "Check table status instantly" },
|
||||
{ title: "Group seating", desc: "Manage large group seating easily" },
|
||||
{ title: "Improve flow", desc: "Better guest flow during peak times" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Offer Digital Menu Access
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Let guests view buffet menus, beverage options, and specials instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Easy QR code menu access",
|
||||
"Update menu instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Buffet Locations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your buffet brand while maintaining centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus from one dashboard",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuffetPage
|
||||
518
src/app/restaurant-types/cafe-bistro/page.tsx
Normal file
518
src/app/restaurant-types/cafe-bistro/page.tsx
Normal file
@ -0,0 +1,518 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const CafeBistroPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/women/${30 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
CAFÉ & COFFEE SHOP
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Power Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Café & Coffee Shop</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve customers faster, manage orders effortlessly, and keep your café running smoothly with a system designed for modern cafés. Dine360 helps you manage billing, table orders, takeaway requests, and daily operations from one easy platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">85% Faster</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">30% Higher</p>
|
||||
</div>
|
||||
</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[3]} 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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR CAFÉS</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Café Operations <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Cafés handle a mix of dine-in guests, takeaway orders, and quick service. Dine360 helps cafés streamline orders, manage tables, track sales, and deliver better customer experiences.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Handle coffee rush hours smoothly." },
|
||||
{ label: "Higher Customer Turnover", value: "30%", desc: "Serve more customers without long wait times." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Reliable and flexible payment processing." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
CAFÉ PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Smooth Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Cafés require fast service and a relaxed dining experience. Dine360 ensures orders move smoothly from the counter to preparation.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<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[2]} 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">
|
||||
<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">Quick Order Taking</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take orders quickly during busy morning and evening rush hours.</p>
|
||||
</div>
|
||||
</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="Coffee 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"><Coffee className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Efficient Coffee Preparation</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders reach the preparation station instantly for faster service.</p>
|
||||
</div>
|
||||
</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[0]} 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">
|
||||
<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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Faster Customer Turnover</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce waiting time and keep tables moving.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Avoid billing mistakes with automated order tracking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast POS Built for Café Service
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Process orders quickly with a POS system designed for quick-service cafés.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Quick billing for dine-in and takeaway",
|
||||
"Accept multiple payment methods",
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Order Smoothly
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track café orders efficiently and ensure quick preparation.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Modify or update orders instantly",
|
||||
"Handle takeaway and dine-in orders"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-[3.5rem] 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-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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Organize Your Seating Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep track of table availability and manage customer seating easily.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Table Status", desc: "Monitor table status instantly" },
|
||||
{ title: "Dine-in", desc: "Handle dine-in orders efficiently" },
|
||||
{ title: "Seating Flow", desc: "Improve seating flow during busy hours" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Easy Ordering
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse your café menu instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight daily specials and combos",
|
||||
"Update menu items easily"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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 CAFÉS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Café Locations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your café brand while maintaining full control over operations.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus centrally",
|
||||
"Track branch performance"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CafeBistroPage
|
||||
517
src/app/restaurant-types/cafeteria/page.tsx
Normal file
517
src/app/restaurant-types/cafeteria/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const CafeteriaPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
CAFETERIA OPERATIONS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Run Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Cafeteria Operations Efficiently</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve large numbers of customers quickly with a system designed for cafeterias, food courts, and institutional dining. Dine360 helps cafeterias manage billing, order flow, seating, and daily operations from one powerful platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR HIGH-VOLUME DINING</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Cafeteria Operations with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Cafeterias often serve hundreds of customers daily, especially in schools, offices, hospitals, and food courts. Managing queues, billing, and food service efficiently is critical. Dine360 simplifies cafeteria operations by streamlining orders, billing, seating, and kitchen coordination.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Service Speed", value: "90%", desc: "Process large numbers of orders quickly." },
|
||||
{ label: "Improved Queue Management", value: "40%", desc: "Reduce long waiting lines during busy hours." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Reliable billing with multiple payment options." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
CAFETERIA PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The High-Volume Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Cafeterias require quick service and efficient customer flow. Dine360 ensures orders move smoothly from billing to preparation and delivery.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Fast Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Serve large numbers of customers quickly during peak hours.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Kitchen Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly communicated to the kitchen or service counter.</p>
|
||||
</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="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" />
|
||||
</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">Reduced Waiting Lines</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart queue management helps keep service flowing smoothly during busy hours.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated billing ensures every order is processed correctly and efficiently.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast Billing for Busy Cafeterias
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle large volumes of transactions quickly with a POS system designed for cafeteria environments.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Rapid order entry for high guest turnover",
|
||||
"Multiple payment options for flexibility",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep track of customer orders and ensure smooth food preparation even during the busiest hours.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order queues in real time",
|
||||
"Monitor preparation status for every station",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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="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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Organize Seating and Service
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Manage seating arrangements and customer flow easily across large dining areas.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Track Availability", desc: "Monitor table status in real time" },
|
||||
{ title: "Handle Groups", desc: "Organize large group seating with ease" },
|
||||
{ title: "Improve Efficiency", desc: "Streamline service for faster turnover" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Offer a Digital Menu Experience
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse menus instantly with QR codes from their own devices.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Quick menu access without waiting",
|
||||
"Update menu items and prices anytime",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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 CAFETERIAS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Cafeteria Locations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple cafeteria outlets with centralized control and unified reporting.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across all locations",
|
||||
"Manage menus and prices centrally",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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 Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CafeteriaPage
|
||||
517
src/app/restaurant-types/casual-dining/page.tsx
Normal file
517
src/app/restaurant-types/casual-dining/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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 } 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",
|
||||
]
|
||||
|
||||
const CasualDiningPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
CASUAL DINING
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Take Control of Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Casual Dining Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver consistent service, efficient table management, and better guest experiences with a system built for modern casual dining restaurants.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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>
|
||||
<p className="text-white font-bold text-2xl">+90%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">+30%</p>
|
||||
</div>
|
||||
</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" />
|
||||
<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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">EFFORTLESS SERVICE, BETTER EXPERIENCES</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Casual Dining Restaurant with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Platform</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Dine360 helps casual dining restaurants improve service speed, manage seating efficiently, and ensure every guest enjoys a smooth dining experience.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Service Efficiency", value: "90%", desc: "Improve coordination between staff and kitchen operations." },
|
||||
{ label: "Revenue Growth", value: "30%", desc: "Serve more guests with optimized table turnover." },
|
||||
{ label: "Secure Payments", value: "100%", desc: "Safe and reliable payment processing system." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
CASUAL DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Service Efficiency Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Transform restaurant operations with tools that ensure seamless communication between the dining floor and kitchen.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Faster Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Serve guests faster with automated order routing between staff and kitchen.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Order Syncing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders update instantly across POS, kitchen displays, and staff devices.</p>
|
||||
</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="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" />
|
||||
</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">Zero Service Delays</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart queue management ensures smooth service flow during busy hours.</p>
|
||||
</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="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" />
|
||||
</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 Order Delivery</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Real-time order validation prevents mistakes and improves guest satisfaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast, Reliable, and Built <br /> for Busy Restaurants
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle dine-in orders quickly with an intuitive POS system designed for casual dining environments.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Process orders within seconds",
|
||||
"Track table orders in real time",
|
||||
"Accept multiple payment methods"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Like a Pro
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure every order is tracked, updated, and delivered smoothly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order progress from kitchen to table",
|
||||
"Make quick changes to orders",
|
||||
"Monitor order preparation 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table & Reservation 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" />
|
||||
<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="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 & RESERVATION</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Your Seating
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Manage reservations and walk-ins efficiently with visual table management tools.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Graphical Layout", desc: "Interactive floor plan management" },
|
||||
{ title: "Real-time Tracker", desc: "Check table availability instantly" },
|
||||
{ title: "Easy Reservation", desc: "Manage reservations with ease" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Instant Menu Access
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow guests to browse your menu directly from their phones.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Contactless menu browsing",
|
||||
"Update menu instantly",
|
||||
"Highlight daily specials"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Branch
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Centralize operations across multiple restaurant locations.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor branch performance",
|
||||
"Manage menus across locations",
|
||||
"Track sales 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CasualDiningPage
|
||||
547
src/app/restaurant-types/coffee-house/page.tsx
Normal file
547
src/app/restaurant-types/coffee-house/page.tsx
Normal file
@ -0,0 +1,547 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, 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",
|
||||
]
|
||||
|
||||
const CoffeeHousePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
COFFEE HOUSE OPERATIONS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Power Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Coffee House Operations</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve great coffee faster while managing orders, tables, and daily operations effortlessly with a system built for coffee houses.
|
||||
Dine360 helps coffee houses streamline billing, manage orders, and deliver smooth customer service from one unified platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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>
|
||||
<p className="text-white font-bold text-2xl">85% Faster</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">+30%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Intro Section / Stats */}
|
||||
<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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR COFFEE HOUSES</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Coffee House Operations <br className="hidden md:block" />
|
||||
With <span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Coffee houses experience busy mornings, steady daytime traffic, and customers looking for quick service and comfortable seating.
|
||||
Dine360 helps coffee houses manage orders, seating, billing, and operations efficiently — allowing staff to focus on serving great coffee and creating a welcoming atmosphere.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Serve customers quickly during morning rush hours." },
|
||||
{ label: "Higher Customer Turnover", value: "30%", desc: "Reduce wait times and increase service efficiency." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Fast and reliable billing for every order." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
COFFEE HOUSE PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Smooth Coffee Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Coffee houses require fast service and organized operations.
|
||||
Dine360 ensures orders move quickly from counter to preparation, improving customer satisfaction.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Quick Coffee Orders</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take and process coffee orders instantly during busy periods.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Efficient Preparation Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders reach the barista station immediately for faster preparation.</p>
|
||||
</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="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" />
|
||||
</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">Reduced Customer Wait Time</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Efficient order management keeps service smooth.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated billing ensures every order is processed correctly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast POS for Coffee Service
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Process coffee and snack orders quickly with an intuitive POS system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Quick billing for coffee and snacks",
|
||||
"Accept multiple payment methods",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-12 items-center">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Order Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep track of orders and preparation status in real time.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order progress",
|
||||
"Modify orders instantly",
|
||||
"Manage takeaway and dine-in orders"
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex gap-4 items-center">
|
||||
<div className="w-6 h-6 rounded-full bg-red-50 flex items-center justify-center text-red-600">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-zinc-700 font-medium">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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] text-white overflow-hidden relative">
|
||||
<div className="absolute top-0 right-0 w-full h-full bg-linear-to-bl from-red-600/10 to-transparent opacity-50" />
|
||||
<div className="relative z-10 grid lg:grid-cols-2 gap-12 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="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">TABLE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold leading-tight">Organize Seating for Guests</h2>
|
||||
<p className="text-zinc-400 text-lg">Manage seating and table availability smoothly.</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ icon: Layout, title: "Track table availability", desc: "Real-time floor plan updates." },
|
||||
{ icon: Users, title: "Manage dine-in customers", desc: "Efficient queue and seating flow." },
|
||||
{ icon: TrendingUp, title: "Improve seating flow", desc: "Maximize your coffee shop's capacity." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="bg-white/5 p-6 rounded-[2rem] border border-white/10 hover:bg-white/10 transition-colors group">
|
||||
<div className="w-12 h-12 rounded-2xl bg-red-600/20 flex items-center justify-center text-red-500 mb-4 group-hover:scale-110 transition-transform">
|
||||
<item.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="font-bold mb-2">{item.title}</h3>
|
||||
<p className="text-zinc-400 text-sm">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-4 flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-12 items-center">
|
||||
<div className="relative h-[450px] w-full flex items-center justify-center">
|
||||
<div className="absolute w-72 h-72 bg-red-100 rounded-full blur-3xl" />
|
||||
<motion.div
|
||||
className="relative w-64 h-[500px] bg-zinc-900 rounded-[3rem] border-8 border-zinc-800 shadow-2xl overflow-hidden p-2"
|
||||
initial={{ rotate: -5 }}
|
||||
whileInView={{ rotate: 0 }}
|
||||
>
|
||||
<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>
|
||||
<div className="w-full space-y-3">
|
||||
<div className="h-4 bg-zinc-100 rounded-full w-3/4 mx-auto" />
|
||||
<div className="h-3 bg-zinc-100 rounded-full w-1/2 mx-auto" />
|
||||
<div className="h-40 bg-zinc-50 rounded-2xl w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-zinc-900 leading-tight">Digital Menu for Easy Ordering</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed max-w-xl">
|
||||
Allow customers to browse your coffee menu instantly using QR codes.
|
||||
</p>
|
||||
<div className="space-y-4 mt-2">
|
||||
{[
|
||||
{ title: "Quick menu access", icon: Check },
|
||||
{ title: "Highlight coffee specials and combos", icon: Check },
|
||||
{ title: "Update menu items easily", icon: Check }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex gap-4 items-center">
|
||||
<div className="w-6 h-6 rounded-full bg-red-50 flex items-center justify-center text-red-600">
|
||||
<item.icon className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-zinc-800 font-bold">{item.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-4 flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50 rounded-[3rem]">
|
||||
<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="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 COFFEE HOUSES</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-zinc-900 leading-tight">Manage Multiple Coffee Shop Locations</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your coffee house brand while maintaining centralized control.
|
||||
</p>
|
||||
<div className="grid gap-4 mt-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus centrally",
|
||||
"Track branch performance"
|
||||
].map((point, i) => (
|
||||
<div key={i} className="flex items-center gap-4 bg-white p-5 rounded-2xl shadow-sm border border-zinc-100">
|
||||
<div className="w-10 h-10 bg-zinc-900 rounded-xl flex items-center justify-center text-white">
|
||||
<Store className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-zinc-900 font-bold">{point}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-4 flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials
|
||||
title="What Coffee House Owners Say About Dine360"
|
||||
subtitle="Testimonials"
|
||||
/>
|
||||
|
||||
{/* FAQ Sección */}
|
||||
<FAQ
|
||||
title="Frequently Asked Questions"
|
||||
subtitle="Answers To Common Questions"
|
||||
questions={[
|
||||
{
|
||||
question: "Is Dine360 suitable for coffee houses?",
|
||||
answer: "Yes. Dine360 is designed for fast service environments like coffee houses and cafés."
|
||||
},
|
||||
{
|
||||
question: "Can the POS handle takeaway orders?",
|
||||
answer: "Yes. The system supports takeaway, dine-in, and delivery orders."
|
||||
},
|
||||
{
|
||||
question: "Does Dine360 work on tablets and POS devices?",
|
||||
answer: "Yes. The platform works on POS terminals, tablets, and desktops."
|
||||
},
|
||||
{
|
||||
question: "Can I track sales and daily reports?",
|
||||
answer: "Yes. Dine360 provides real-time sales analytics and performance reports."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoffeeHousePage
|
||||
|
||||
430
src/app/restaurant-types/concession/page.tsx
Normal file
430
src/app/restaurant-types/concession/page.tsx
Normal file
@ -0,0 +1,430 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const ConcessionPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 20}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Join 2,460+ Restaurants</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-600" />
|
||||
CONCESSION OPERATIONS
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Power Your <br />
|
||||
<span className="italic font-serif font-light text-red-600">Concession Stand Operations</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve customers faster and manage high-volume snack sales with a system built for concession stands. Dine360 helps you handle quick orders, fast billing, and peak-hour rush - all from one simple platform.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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 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" />
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Intro Section - Stats Layout */}
|
||||
<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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="flex items-center justify-center gap-2 mb-6">
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR QUICK SERVICE</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight">
|
||||
Transform Your Concession Stand <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }} className="text-base text-zinc-600 max-w-2xl mx-auto">
|
||||
Concession stands operate in high-pressure environments like stadiums, cinemas, and events where speed is everything. Dine360 helps you process orders quickly, reduce queues, and manage sales efficiently - ensuring customers get served fast without delays.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
|
||||
{[
|
||||
{ label: "Faster Billing Speed", value: "95%", desc: "Handle large crowds quickly during peak times." },
|
||||
{ label: "Reduced Queue Time", value: "40%", desc: "Keep lines moving smoothly." },
|
||||
{ label: "Reliable Payment Processing", value: "100%", desc: "Accept payments securely and instantly." }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 20 }} 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">
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
QUICK SERVICE PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The High-Speed Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Concession stands rely on speed and efficiency. Dine360 ensures orders are processed instantly, helping you serve more customers in less time.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<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="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" />
|
||||
</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">Rapid Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take and complete orders within seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Service Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Keep operations running smoothly during peak crowds.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="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" />
|
||||
</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">Shorter Customer Lines</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Efficient systems reduce waiting time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure every order is processed correctly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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-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">POS SYSTEM</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Ultra-Fast POS for <br /> Concession Stands
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle high-speed transactions with a POS system built for quick service.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Lightning-fast billing",
|
||||
"Multiple payment methods",
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage High Volume Orders
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep track of all orders even during busy events.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order queues",
|
||||
"Monitor order status",
|
||||
"Ensure quick delivery"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Flow Section (Service Management) */}
|
||||
<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-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-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">SERVICE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Handle Peak Crowds with Ease
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Maintain smooth service during high-traffic events.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Queues", desc: "Manage long queues" },
|
||||
{ title: "Timelines", desc: "Track preparation time" },
|
||||
{ title: "Speed", desc: "Improve service speed" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Faster Ordering
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse your menu instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight combos and offers",
|
||||
"Update menu anytime"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Location Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<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-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 STANDS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Concession Points
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple stands across venues with centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus centrally",
|
||||
"Track performance in real time"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConcessionPage
|
||||
541
src/app/restaurant-types/contemporary-casual/page.tsx
Normal file
541
src/app/restaurant-types/contemporary-casual/page.tsx
Normal file
@ -0,0 +1,541 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const ContemporaryCasualPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
Elevate Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Contemporary Casual <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver modern dining experiences with smooth operations using a system built for contemporary casual restaurants. Dine360 helps you manage orders, tables, payments, and customer experience — all from one smart platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR MODERN DINING</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Contemporary Casual Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Contemporary casual restaurants blend quality dining with efficient service. Managing both speed and experience can be challenging without the right system. Dine360 helps streamline operations, enhance service flow, and provide insights — so you can focus on delivering a modern dining experience.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Serve guests quickly without compromising quality." },
|
||||
{ label: "Improved Service Efficiency", value: "35%", desc: "Optimize staff and table management." },
|
||||
{ label: "Secure & Scalable System", value: "100%", desc: "Reliable operations with cloud-based control." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
MODERN DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Balanced Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Contemporary casual restaurants require both speed and presentation. Dine360 ensures smooth coordination between front-of-house and kitchen operations.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Efficient Order Handling</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take and manage orders seamlessly across tables and takeaway.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smart Kitchen Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly routed for faster and organized preparation.</p>
|
||||
</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="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" />
|
||||
</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">Smooth Guest Experience</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delays and enhance service quality.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated billing ensures a seamless checkout experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Modern POS for Modern Dining
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Deliver quick and accurate billing with a POS system built for contemporary restaurants.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast order entry",
|
||||
"Multiple payment options",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Seamlessly
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep operations smooth across dine-in and takeaway orders.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order status in real time",
|
||||
"Modify orders instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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="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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Table Service
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Enhance guest experience with efficient table management.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Monitor table availability", desc: "Real-time updates on dining room status." },
|
||||
{ title: "Manage reservations", desc: "Handle bookings and walk-ins effortlessly." },
|
||||
{ title: "Improve seating flow", desc: "Optimize turn times for higher revenue." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Modern Guests
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Offer a seamless menu experience with QR-based access.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Easy menu browsing",
|
||||
"Highlight specials and signature dishes",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Scale Your Restaurant Brand
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your restaurant while maintaining consistent service quality.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor performance across locations",
|
||||
"Manage menus centrally",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials
|
||||
title="Testimonials"
|
||||
subtitle="What Restaurant Owners Say About Dine360"
|
||||
/>
|
||||
|
||||
<FAQ
|
||||
title="Answers To Common Questions"
|
||||
subtitle="Frequently Asked Questions"
|
||||
description="Everything you need to know about Dine360 for contemporary casual restaurants."
|
||||
questions={[
|
||||
{
|
||||
question: "Is Dine360 suitable for contemporary casual restaurants?",
|
||||
answer: "Yes. It is designed to support modern dining environments that require both speed and service quality."
|
||||
},
|
||||
{
|
||||
question: "Can it handle dine-in and takeaway orders?",
|
||||
answer: "Yes. Dine360 supports multiple order types seamlessly."
|
||||
},
|
||||
{
|
||||
question: "Does it support reservations and table management?",
|
||||
answer: "Yes. You can manage reservations, seating, and table flow easily."
|
||||
},
|
||||
{
|
||||
question: "Can I track performance and analytics?",
|
||||
answer: "Yes. The platform provides real-time insights and reports."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContemporaryCasualPage
|
||||
519
src/app/restaurant-types/delivery-only/page.tsx
Normal file
519
src/app/restaurant-types/delivery-only/page.tsx
Normal file
@ -0,0 +1,519 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const DeliveryOnlyPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${60 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
DELIVERY-ONLY OPERATIONS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Run Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Delivery-Only Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Manage online orders, delivery flow, and kitchen operations effortlessly with a system built for delivery-first restaurants. Dine360 helps you control everything from one dashboard — faster, smarter, and fully digital.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-center"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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>
|
||||
<p className="text-white font-bold text-2xl">3X Faster</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">+40%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">100% Cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Delivery-Only Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Delivery-only restaurants operate entirely on online orders, making speed, accuracy, and coordination critical. Dine360 simplifies everything — bringing all your operations into one centralized system so you can scale without chaos.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "3X", desc: "Handle high delivery volumes with ease." },
|
||||
{ label: "Improved Operational Efficiency", value: "40%", desc: "Reduce manual work and errors." },
|
||||
{ label: "Cloud-Based Control", value: "100%", desc: "Manage your business from anywhere." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
DELIVERY PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Seamless Delivery Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Delivery-only restaurants rely on fast and accurate operations. Dine360 ensures every order moves smoothly from placement to dispatch.
|
||||
</motion.p>
|
||||
</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="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>
|
||||
</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">Centralized Order Dashboard</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">All orders from delivery platforms are managed in one place.</p>
|
||||
</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="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>
|
||||
</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">Automated Kitchen Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly routed for preparation.</p>
|
||||
</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="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>
|
||||
</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 Order Dispatch</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delays and improve delivery speed.</p>
|
||||
</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="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>
|
||||
</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 Order Handling</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Minimize errors and ensure correct delivery.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
DIGITAL POS
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Without a Storefront
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Control all your delivery orders from one POS system. Handle platforms, tracking, and payments seamlessly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Handle orders from multiple platforms",
|
||||
"Real-time order tracking",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Control Every Order Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track and manage orders across all channels from once place.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Manage high order volumes",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Your Delivery Operations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Ensure smooth coordination between kitchen and delivery for faster fulfillment.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Prep Tracking", desc: "Track order preparation time across stations" },
|
||||
{ title: "Timeline Control", desc: "Manage delivery timelines for high consistency" },
|
||||
{ title: "Fulfillment Speed", desc: "Improve fulfillment speed with smart tools" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Your Menu Across Platforms
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Keep your menu consistent across all delivery apps with centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Update menu items instantly",
|
||||
"Sync menus across platforms",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Run Multiple Brands from One Kitchen
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple delivery brands efficiently and track performance for each.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage multiple virtual brands",
|
||||
"Track performance per brand",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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-Brand Management" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeliveryOnlyPage
|
||||
517
src/app/restaurant-types/destination/page.tsx
Normal file
517
src/app/restaurant-types/destination/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
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",
|
||||
]
|
||||
|
||||
const DestinationPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
Elevate Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Destination Restaurant <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Experience</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver unforgettable dining experiences while managing operations seamlessly with a system built for high-end destination restaurants. Dine360 helps you manage reservations, service flow, and guest experiences — all from one powerful platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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 shrink-0"
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">90%</p>
|
||||
</div>
|
||||
</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 shrink-0"
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Image src={CARD_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>
|
||||
<p className="text-white font-bold text-2xl">35%</p>
|
||||
</div>
|
||||
</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 shrink-0"
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR DESTINATION DINING</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Destination Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Destination restaurants are about more than just food — they offer a complete experience that draws customers from afar. Managing reservations, guest flow, and service quality is critical. Dine360 helps you deliver exceptional service while maintaining full operational control.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Enhanced Guest Experience", value: "90%", desc: "Deliver smooth, premium dining service." },
|
||||
{ label: "Improved Reservation Efficiency", value: "35%", desc: "Manage bookings and seating effortlessly." },
|
||||
{ label: "Secure & Scalable Platform", value: "100%", desc: "Reliable operations for high-end dining." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
DESTINATION DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Premium Experience Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Destination restaurants require precision, planning, and flawless execution. Dine360 ensures every part of your service runs smoothly.
|
||||
</motion.p>
|
||||
</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-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" />
|
||||
</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">Advanced Reservation Management</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle bookings and guest flow efficiently.</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<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>
|
||||
</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="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>
|
||||
<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>
|
||||
</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="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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Premium POS for Fine Dining Experiences
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Deliver fast and accurate billing while maintaining a premium experience.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Quick and accurate order entry",
|
||||
"Multiple payment options",
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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="Premium POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Order with Precision
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure every order is handled perfectly from table to kitchen.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Real-time order tracking",
|
||||
"Easy modifications",
|
||||
"Smooth order flow"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Seating & Reservations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Deliver a seamless guest experience with smart table management.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Reservation scheduling", desc: "Handle bookings and guest flow efficiently." },
|
||||
{ title: "Table allocation optimization", desc: "Maximize dining room potential." },
|
||||
{ title: "Manage VIP seating", desc: "Personalize experience for priority guests." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Modern Menu for Premium Guests
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Offer a seamless and elegant menu experience.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR-based digital menu",
|
||||
"Highlight signature dishes and specials",
|
||||
"Instant menu updates"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Expand Your Destination Brand
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage multiple high-end locations with centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor performance across locations",
|
||||
"Maintain consistent service quality",
|
||||
"Centralized reporting and analytics"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
|
||||
<FAQ />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DestinationPage
|
||||
430
src/app/restaurant-types/digital-only/page.tsx
Normal file
430
src/app/restaurant-types/digital-only/page.tsx
Normal file
@ -0,0 +1,430 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const DigitalOnlyPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/women/${i + 40}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Join 2,460+ Restaurants</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-600" />
|
||||
DIGITAL-ONLY OPERATIONS
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Run Your <br />
|
||||
<span className="italic font-serif font-light text-red-600">Digital-Only Restaurant</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Operate your restaurant entirely online with a system built for delivery-first, app-driven businesses. Dine360 helps you manage orders, brands, and performance from one centralized platform.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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 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" />
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Intro Section - Stats Layout */}
|
||||
<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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="flex items-center justify-center gap-2 mb-6">
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR DIGITAL RESTAURANTS</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight">
|
||||
Transform Your Digital-Only Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }} className="text-base text-zinc-600 max-w-2xl mx-auto">
|
||||
Digital-only restaurants operate without a physical dine-in space, relying entirely on online orders and delivery platforms. Dine360 brings everything together <EFBFBD> helping you control orders, optimize operations, and scale your digital restaurant with ease.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "3X", desc: "Handle high online order volumes effortlessly." },
|
||||
{ label: "Improved Operational Efficiency", value: "40%", desc: "Manage multiple platforms from one dashboard." },
|
||||
{ label: "Cloud-Based Control", value: "100%", desc: "Run your restaurant from anywhere." }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 20 }} 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">
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
DIGITAL RESTAURANT PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Online Order Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Digital-only restaurants depend on speed, accuracy, and integration. Dine360 ensures all orders are managed seamlessly across platforms.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<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-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" />
|
||||
</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"><Smartphone className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Centralized Order Management</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">All online orders are handled in one dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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-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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Automated Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are routed instantly for preparation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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-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" />
|
||||
</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">Faster Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delays and improve delivery time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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-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" />
|
||||
</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 Order Handling</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Minimize errors with automated systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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-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 POS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders <br /> Without a Counter
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle all online and delivery orders from one POS system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage orders from multiple platforms",
|
||||
"Real-time order tracking",
|
||||
"Secure online payments"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[3]} alt="Digital POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Control Every Online Order
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track and manage orders from all channels efficiently.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Manage high order volumes",
|
||||
"Reduce order errors"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Flow Section (Delivery Management) */}
|
||||
<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-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-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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Delivery Operations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Ensure smooth delivery flow and faster order processing.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Logistics", desc: "Track incoming delivery orders" },
|
||||
{ title: "Timelines", desc: "Manage preparation timelines" },
|
||||
{ title: "Efficiency", desc: "Improve delivery efficiency" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">DIGITAL MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Your Online Menu Easily
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Control your menu across all platforms from one place.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Update menu items instantly",
|
||||
"Sync menus across platforms",
|
||||
"Highlight offers and combos"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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-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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Run Multiple Brands from One System
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple virtual brands or kitchens with centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage multiple brands easily",
|
||||
"Track performance of each brand",
|
||||
"Monitor revenue and analytics"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DigitalOnlyPage
|
||||
515
src/app/restaurant-types/diner/page.tsx
Normal file
515
src/app/restaurant-types/diner/page.tsx
Normal file
@ -0,0 +1,515 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, 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",
|
||||
]
|
||||
|
||||
const DinerPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${50 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
Power Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Diner Operations <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Fast-Paced, All-Day Dining</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve customers quickly, manage tables efficiently, and keep your diner running smoothly with a system built for fast-paced, all-day dining. Dine360 helps diners handle orders, billing, and table service from one powerful platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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[3]} 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>
|
||||
<p className="text-white font-bold text-2xl">85%</p>
|
||||
</div>
|
||||
</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[4]} 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>
|
||||
<p className="text-white font-bold text-2xl">30%</p>
|
||||
</div>
|
||||
</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[0]} 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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Diner Operations With <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Diners operate all day with a mix of breakfast rush, lunch crowds, and late-night service. Managing orders, tables, and billing efficiently is key to keeping service smooth. Dine360 helps diners streamline operations, reduce delays, and improve customer experience — all from one centralized system.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Serve customers quickly during peak hours." },
|
||||
{ label: "Improved Table Turnover", value: "30%", desc: "Keep tables moving efficiently throughout the day." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Reliable billing with multiple payment options." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
DINER PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The All-Day Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Diners require consistent service throughout the day. Dine360 ensures smooth order flow from tables to the kitchen and back.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Quick Order Taking</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take orders instantly during breakfast, lunch, and dinner rush.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Efficient Kitchen Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are sent directly to the kitchen for faster preparation.</p>
|
||||
</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="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" />
|
||||
</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 Table Service</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Serve customers quickly and reduce waiting times.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated billing reduces errors and improves efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">POS SYSTEM</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Built for All-Day Service</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Handle continuous orders efficiently with a POS system designed for diners.</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast order entry",
|
||||
"Accept multiple payment methods",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed font-bold">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Manage Orders Seamlessly</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Keep track of every order from placement to delivery.</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Modify orders instantly",
|
||||
"Manage dine-in and takeaway orders"
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex gap-4 items-center">
|
||||
<div className="w-6 h-6 rounded-full bg-red-50 flex items-center justify-center text-red-600">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-zinc-700 font-bold">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">Organize Tables Efficiently</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">Manage seating and improve table turnover throughout the day.</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Track table availability", desc: "Real-time updates for high seating demand." },
|
||||
{ title: "Handle walk-ins", desc: "Manage queues and regular customers effortlessly." },
|
||||
{ title: "Improve service flow", desc: "Optimize seating during the all-day rush." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Digital Menu for Faster Ordering</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Allow customers to browse your diner menu instantly using QR codes.</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight daily specials",
|
||||
"Update menu items anytime"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed font-bold">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Manage Multiple Diner Locations</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Expand your diner business while maintaining full control.</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus centrally",
|
||||
"Track 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed font-bold">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
|
||||
<FAQ
|
||||
title="Frequently Asked Questions"
|
||||
subtitle="Answers To Common Questions"
|
||||
questions={[
|
||||
{
|
||||
question: "Is Dine360 suitable for diners?",
|
||||
answer: "Yes. Dine360 is designed for restaurants that operate throughout the day with continuous service."
|
||||
},
|
||||
{
|
||||
question: "Can it handle breakfast, lunch, and dinner orders?",
|
||||
answer: "Yes. The system supports all-day operations with real-time order tracking."
|
||||
},
|
||||
{
|
||||
question: "Does it support takeaway orders?",
|
||||
answer: "Yes. Dine360 supports dine-in, takeaway, and delivery."
|
||||
},
|
||||
{
|
||||
question: "Can I track daily sales performance?",
|
||||
answer: "Yes. The platform provides detailed real-time reports and analytics."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DinerPage
|
||||
|
||||
519
src/app/restaurant-types/family-style/page.tsx
Normal file
519
src/app/restaurant-types/family-style/page.tsx
Normal file
@ -0,0 +1,519 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, Users, Calendar, Menu, AreaChart } from 'lucide-react'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const FamilyStylePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${30 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
FAMILY STYLE RESTAURANT
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Simplify Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Family Style Restaurant Operations</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve large groups smoothly and deliver memorable dining experiences with a system built for busy family restaurants. Dine360 helps manage table seating, group orders, kitchen coordination, and billing from one unified platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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="Family 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">85%</p>
|
||||
</div>
|
||||
</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="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">Satisfaction</p>
|
||||
<p className="text-white font-bold text-2xl">+30%</p>
|
||||
</div>
|
||||
</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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR SHARED DINING</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Family Style Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Family restaurants handle large tables, shared dishes, and high guest turnover. Dine360 helps staff manage orders, seating, and service efficiently so every family dining experience runs smoothly.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Service Efficiency", value: "85%", desc: "Improve coordination between service staff and kitchen teams." },
|
||||
{ label: "Customer Satisfaction", value: "30%", desc: "Deliver better dining experiences with organized service." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Flexible billing with secure payment processing." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
FAMILY DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Shared Dining Efficiency Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Family-style restaurants require coordination for large tables and multiple dishes. Dine360 ensures smooth order management and efficient table service.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<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="Group Order" 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">Group Order Management</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle large family orders easily without confusion.</p>
|
||||
</div>
|
||||
</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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Kitchen Communication</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders move instantly from servers to the kitchen.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<div className="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center text-red-500 mb-4"><Users className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Table Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Manage large tables and seating arrangements efficiently.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Split bills easily between guests and families.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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-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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Designed for Busy <br /> Dining Rooms
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle large group orders easily with an intuitive POS system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Process large orders quickly",
|
||||
"Track orders by table",
|
||||
"Split bills between guests"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[4]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Large Orders Smoothly
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure every dish is delivered correctly and on time.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track table orders in real time",
|
||||
"Modify orders instantly",
|
||||
"Monitor kitchen preparation"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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 & RESERVATION</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage Large Tables Easily
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Organize seating and reservations efficiently.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Combine Tables", desc: "Combine tables for large groups" },
|
||||
{ title: "Availability", desc: "Track seating availability" },
|
||||
{ title: "Reservations", desc: "Manage reservations and walk-ins" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">DIGITAL MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Easy Menu Access for Guests
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse menu items instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Guests view menu via QR code",
|
||||
"Highlight family combos and specials",
|
||||
"Update menu instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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-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 RESTAURANTS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Locations Easily
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your restaurant brand while keeping operations centralized.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across locations",
|
||||
"Manage menus centrally",
|
||||
"Track branch performance"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FamilyStylePage
|
||||
517
src/app/restaurant-types/fast-casual/page.tsx
Normal file
517
src/app/restaurant-types/fast-casual/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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 } 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",
|
||||
]
|
||||
|
||||
const FastCasualPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
FAST CASUAL RESTAURANT
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Take Control of Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Fast Casual Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve customers faster, reduce queues, and keep orders flowing with a system designed for high-volume fast casual restaurants.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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[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">
|
||||
<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>
|
||||
</div>
|
||||
</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[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">
|
||||
<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>
|
||||
</div>
|
||||
</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[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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Fast Casual Restaurant with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Dine360 helps fast casual restaurants deliver quick service without compromising accuracy. Manage orders, kitchen workflows, and customer flow with tools designed for speed and efficiency.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Order Processing Efficiency", value: "90%", desc: "Process high-volume orders quickly during peak hours." },
|
||||
{ label: "Revenue Growth", value: "30%", desc: "Serve more customers with faster checkout and service." },
|
||||
{ label: "Secure Payment System", value: "100%", desc: "Fast and reliable payment processing for every transaction." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
FAST CASUAL PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Speed & Efficiency Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Fast casual restaurants thrive on speed. Dine360 ensures orders move instantly from counter to kitchen, eliminating delays and improving service flow.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Lightning Fast Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle large volumes of orders quickly with an intuitive POS system designed for speed.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Kitchen Communication</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly sent to the kitchen display system, reducing manual communication errors.</p>
|
||||
</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="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" />
|
||||
</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">Reduced Wait Times</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart queue management ensures faster order handling and shorter lines.</p>
|
||||
</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="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" />
|
||||
</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 Order Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated validation ensures every order is processed correctly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Fast, Reliable, and Built <br /> for Rush Hours
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle high-speed counter orders effortlessly with a POS system built for fast casual restaurants.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Process orders in seconds",
|
||||
"Track every order in real time",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Like a Pro
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure every order is tracked and prepared efficiently, even during peak hours.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order progress from kitchen to pickup",
|
||||
"Modify or duplicate orders instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Optimize Your Seating Flow
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Manage dine-in tables and quick seating arrangements efficiently.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Visual Flow", desc: "View table availability instantly" },
|
||||
{ title: "Omni-Order", desc: "Manage dine-in and takeaway orders" },
|
||||
{ title: "Smart Flow", desc: "Handle customer flow smoothly" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Instant Menu Access — Just Scan
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Let customers browse your menu instantly using QR codes, reducing queues and improving service speed.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Browse menu directly from smartphones",
|
||||
"Update menu instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Location with Ease
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Scale your fast casual restaurant brand across multiple locations with centralized control.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"View real-time sales reports for each branch",
|
||||
"Update menus across locations instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FastCasualPage
|
||||
518
src/app/restaurant-types/fast-food/page.tsx
Normal file
518
src/app/restaurant-types/fast-food/page.tsx
Normal file
@ -0,0 +1,518 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, Calendar, Menu, AreaChart, RefreshCw } from 'lucide-react'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const FastFoodPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${80 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
FAST FOOD RESTAURANT
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Power Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Fast Food Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Serve customers faster, reduce queues, and manage high-volume orders with a system built for fast food operations. Dine360 helps fast food restaurants handle orders, payments, and kitchen coordination efficiently.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">95%</p>
|
||||
</div>
|
||||
</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[2]} 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>
|
||||
<p className="text-white font-bold text-2xl">40% Faster</p>
|
||||
</div>
|
||||
</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[3]} 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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR SPEED</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Fast Food Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Fast food restaurants require speed, efficiency, and accuracy. Dine360 helps manage orders quickly while keeping kitchen operations organized.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Order Processing Speed", value: "95%", desc: "Handle high customer volumes efficiently." },
|
||||
{ label: "Faster Service", value: "40%", desc: "Reduce customer waiting time." },
|
||||
{ label: "Secure Payments", value: "100%", desc: "Reliable and fast billing system." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
FAST FOOD PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The High-Speed Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Fast food operations rely on quick order processing and efficient kitchen coordination. Dine360 ensures orders move instantly from counter to kitchen.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<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="Order Processing" 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">Lightning Fast Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle large volumes of orders quickly during peak hours.</p>
|
||||
</div>
|
||||
</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 Sync" 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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Kitchen Sync</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are sent directly to the kitchen display system.</p>
|
||||
</div>
|
||||
</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[2]} alt="Queues" 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"><Users className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Shorter Customer Queues</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart order routing reduces waiting lines.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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 Order Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce mistakes with automated order validation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Built for Speed
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Process counter orders instantly with a POS system designed for fast food restaurants.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Rapid order entry",
|
||||
"Multiple payment options",
|
||||
"Real-time order tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Handle High Order Volumes
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage dine-in, takeaway, and delivery orders effortlessly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order queues",
|
||||
"Monitor preparation time",
|
||||
"Manage order priority"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Flow Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3.5rem] 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-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">SERVICE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Improve Customer Flow
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Ensure smooth service during busy hours.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Queues", desc: "Manage order queues efficiently" },
|
||||
{ title: "Pickups", desc: "Track pickup orders accurately" },
|
||||
{ title: "Waiting Time", desc: "Monitor customer waiting time" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Instant Menu Access
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse menus easily.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight combos and deals",
|
||||
"Update menu instantly"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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 RESTAURANTS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Scale Your Fast Food Brand
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage multiple restaurant locations from one dashboard.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor branch performance",
|
||||
"Update menus across locations",
|
||||
"Track sales and analytics"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FastFoodPage
|
||||
223
src/app/restaurant-types/fine-dine/page.tsx
Normal file
223
src/app/restaurant-types/fine-dine/page.tsx
Normal file
@ -0,0 +1,223 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const FineDiningPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 text-nowrap">
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative border border-zinc-100">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 20}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-[10px] font-bold bg-zinc-100 px-3 py-1.5 rounded-full tracking-tighter border border-zinc-200 uppercase">PREMIUM CHOICE OF 850+ ESTABLISHMENTS</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-[0.3em] uppercase text-[10px]">
|
||||
<div className="h-[1px] w-8 bg-red-600" />
|
||||
FINE DINING ELEVATION
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-6xl font-bold tracking-tight text-zinc-900 leading-[0.95]">
|
||||
ELEVATE YOUR <br />
|
||||
<span className="italic font-serif font-light text-red-600">GUEST EXPERIENCE</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-500 max-w-lg leading-relaxed text-wrap font-medium">
|
||||
Dine360 provides the precision and sophistication required for high-end dining, from flawless reservations to elite table service.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-2 group/btn">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-black text-white px-10 py-4 rounded-xl font-bold text-sm uppercase tracking-widest transition-all shadow-xl shadow-red-600/10 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="border-2 border-zinc-900 hover:bg-zinc-900 hover:text-white text-zinc-900 px-10 py-[14px] rounded-xl font-bold text-sm uppercase tracking-widest transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[600px] w-full flex items-center justify-center lg:justify-end" style={{ perspective: '1200px' }}>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-tr from-red-50/50 to-transparent rounded-full blur-3xl -z-10" />
|
||||
<div className="relative w-full h-full max-w-md mx-auto lg:mr-0 flex items-center justify-center">
|
||||
<motion.div className="w-80 h-[500px] bg-white rounded-[3rem] shadow-2xl overflow-hidden border-8 border-white z-20 relative" initial={{ opacity: 0, scale: 0.9, rotateY: -10 }} animate={{ opacity: 1, scale: 1, rotateY: 0 }} transition={{ duration: 1 }}>
|
||||
<Image src={CARD_IMAGES[2]} alt="Fine Dining" fill className="object-cover" />
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-10 flex flex-col justify-end text-white text-nowrap">
|
||||
<Award className="w-10 h-10 text-red-500 mb-4" />
|
||||
<p className="text-[10px] text-red-500 font-bold tracking-[0.2em] mb-1">MEMBER STATUS</p>
|
||||
<p className="text-2xl font-bold">Platinum Tier</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="absolute top-1/2 -left-12 -translate-y-1/2 h-[400px] w-64 bg-zinc-100 rounded-[2.5rem] -z-10 opacity-50 border border-zinc-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* POS Section */}
|
||||
<section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="relative h-[550px] w-full bg-zinc-50 rounded-[3rem] overflow-hidden">
|
||||
<Image src={CARD_IMAGES[0]} alt="Luxe POS" fill className="object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent p-12 flex flex-col justify-end text-white text-nowrap">
|
||||
<Smartphone className="w-10 h-10 text-red-500 mb-6" />
|
||||
<h3 className="text-4xl font-bold mb-4">Precision and Luxury in Every Order</h3>
|
||||
<p className="text-zinc-300 max-w-sm text-wrap text-lg leading-relaxed">Tailored for fine dining, our POS ensures a sophisticated ordering experience without compromising on speed or accuracy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="space-y-4">
|
||||
<span className="text-red-600 font-extrabold uppercase tracking-widest text-[10px] bg-red-50 px-3 py-1.5 rounded-full border border-red-100">POS SECTION</span>
|
||||
<h2 className="text-5xl font-bold uppercase tracking-tight">POS System</h2>
|
||||
</div>
|
||||
<div className="grid gap-8">
|
||||
{[
|
||||
"Process high-end orders seamlessly",
|
||||
"Support for complex menu modifiers",
|
||||
"Monitor table status from any system"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-6 group">
|
||||
<div className="h-12 w-12 rounded-2xl bg-zinc-950 flex items-center justify-center text-white group-hover:bg-red-600 transition-all shadow-lg"><Check className="w-6 h-6" /></div>
|
||||
<p className="font-bold text-zinc-900 text-xl tracking-tight">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex bg-zinc-950 text-white px-12 py-4 rounded-xl font-bold hover:bg-red-600 transition-all w-fit uppercase text-xs tracking-[0.2em] shadow-xl">Inquire Now</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Order Management Section */}
|
||||
<section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-950 rounded-[4rem] text-white">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="space-y-4">
|
||||
<span className="text-red-500 font-bold uppercase tracking-widest text-xs">ORDER MANAGEMENT SECTION</span>
|
||||
<h2 className="text-5xl font-bold uppercase">Order Clarity</h2>
|
||||
<h3 className="text-3xl text-zinc-400 font-light tracking-tight italic">Deliver Every Dish Perfectly</h3>
|
||||
<p className="text-zinc-500 max-w-md leading-relaxed">Maintain elite standards by tracking every detail of the guest journey from kitchen preparation to final presentation.</p>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
{[
|
||||
"Custom dish modifications for premium clients",
|
||||
"Track VIP orders in real time",
|
||||
"Coordinate with the kitchen effortlessly"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-5 border-l-2 border-red-600/30 pl-6 py-2 hover:border-red-600 transition-all">
|
||||
<p className="text-zinc-200 font-bold text-lg tracking-tight whitespace-nowrap">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="bg-red-600 text-white px-10 py-4 rounded-xl font-bold hover:bg-white hover:text-black transition-all w-fit uppercase text-xs tracking-widest">Connect With Us</Link>
|
||||
</div>
|
||||
<div className="relative h-[450px] w-full rounded-3xl overflow-hidden border-8 border-zinc-900 shadow-2xl">
|
||||
<Image src={CARD_IMAGES[3]} alt="Elite Order Tech" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-28 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-20 text-nowrap">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs tracking-tighter bg-red-50 px-4 py-2 rounded-full">TABLE & RESERVATION SECTION</span>
|
||||
<h2 className="text-5xl font-bold mt-6 uppercase tracking-tighter">Sophisticated Seating</h2>
|
||||
<p className="text-zinc-500 mt-6 text-xl max-w-2xl mx-auto text-wrap font-medium">Coordinate elite reservations and maintain exclusive guest experiences with visual floor management.</p>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-3 gap-10 text-nowrap">
|
||||
{[
|
||||
{ title: "Floor Mastery", desc: "Interactive, high-res layouts", icon: Layout },
|
||||
{ title: "Guest Profiling", desc: "Track preferences and VIP history", icon: Users },
|
||||
{ title: "Smart Scheduling", desc: "Automate complex seating logic", icon: Calendar }
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-50 p-12 rounded-[3.5rem] border border-zinc-100 hover:border-red-100 transition-all flex flex-col items-center">
|
||||
<div className="h-20 w-20 rounded-3xl bg-white shadow-xl flex items-center justify-center text-red-600 mb-8"><feature.icon className="w-10 h-10" /></div>
|
||||
<h4 className="text-2xl font-bold mb-4">{feature.title}</h4>
|
||||
<p className="text-zinc-500 mb-10 text-wrap text-center font-medium leading-relaxed">{feature.desc}</p>
|
||||
<Link href="/contact" className="text-red-600 font-extrabold text-sm uppercase tracking-widest hover:tracking-[0.3em] transition-all">Learn More</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital Menu Section */}
|
||||
<section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto border-t border-zinc-100">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div className="relative h-[650px] w-full rounded-[4rem] overflow-hidden shadow-2xl border-4 border-white group">
|
||||
<Image src={CARD_IMAGES[1]} alt="Luxury Digital Menu" fill className="object-cover group-hover:scale-105 transition-transform duration-1000" />
|
||||
<div className="absolute inset-x-8 bottom-8 p-10 bg-black/80 backdrop-blur-md rounded-[2.5rem] border border-white/10 text-white">
|
||||
<p className="text-red-500 font-bold uppercase tracking-widest text-[10px] mb-2">DYNAMIC PRESENTATION</p>
|
||||
<h4 className="text-2xl font-bold mb-2">Interactive Wine Lists</h4>
|
||||
<p className="text-zinc-400 text-sm leading-relaxed">Showcase your curated selection with high-resolution imagery and tasting notes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="space-y-4">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs border-b border-red-600">QR CODE MENU SECTION</span>
|
||||
<h2 className="text-5xl font-bold uppercase tracking-tighter leading-none">THE QR EXPERIENCE</h2>
|
||||
<h3 className="text-2xl text-zinc-500 italic">Elegance in Digital Form</h3>
|
||||
<p className="text-zinc-600 max-w-sm leading-relaxed font-medium">Allow discerning guests to explore your culinary artistry on their terms with our high-end digital menus.</p>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
{[
|
||||
"Bespoke digital menu designs",
|
||||
"Manage premium specials instantly",
|
||||
"Offer detailed culinary storytelling"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-6 p-6 bg-zinc-50 rounded-3xl border border-zinc-100 hover:bg-white hover:shadow-xl transition-all">
|
||||
<div className="h-8 w-8 rounded-full bg-zinc-900 flex items-center justify-center text-white font-bold"><Check className="w-5 h-5" /></div>
|
||||
<p className="font-bold text-zinc-700 tracking-tight text-lg">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="bg-zinc-950 text-white px-12 py-5 rounded-2xl font-bold hover:bg-red-600 transition-all text-center uppercase tracking-widest text-xs">Transform Your Menu</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Brand Section */}
|
||||
<section className="py-28 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="flex flex-col items-center text-center gap-6 mb-20">
|
||||
<span className="text-red-600 font-black uppercase tracking-widest text-[10px] bg-red-50 px-4 py-2 rounded-full border border-red-100">MULTI BRAND SECTION</span>
|
||||
<h2 className="text-5xl md:text-6xl font-bold uppercase tracking-tighter">Excellence Scaled</h2>
|
||||
<h3 className="text-3xl text-zinc-400 font-extralight max-w-2xl leading-none">Intelligence for Fine Dining Groups</h3>
|
||||
<p className="text-zinc-500 max-w-2xl px-4 text-xl font-medium mt-4">Gain a unified view of your elite portfolio with centralized analytics and performance tracking across every location.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-10">
|
||||
{[
|
||||
{ tag: "ANALYTICS", val: "Portfolio Insights", desc: "Consolidated performance data", icon: AreaChart },
|
||||
{ tag: "DESIGN", val: "Brand Cohesion", desc: "Manage menu standards globally", icon: Menu },
|
||||
{ tag: "KPI", val: "Elite Performance", desc: "High-level goal tracking", icon: Target }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} whileHover={{ y: -12 }} className="bg-white p-14 rounded-[4rem] shadow-2xl shadow-zinc-200/50 border border-zinc-100 text-center flex flex-col items-center group">
|
||||
<div className="h-24 w-24 bg-zinc-50 rounded-[2rem] flex items-center justify-center text-zinc-900 group-hover:bg-red-600 group-hover:text-white transition-all shadow-xl shadow-zinc-100 mb-8"><stat.icon className="w-10 h-10" /></div>
|
||||
<p className="text-red-600 font-bold uppercase text-[10px] mb-4 tracking-[0.3em]">{stat.tag}</p>
|
||||
<h4 className="text-2xl font-bold mb-4">{stat.val}</h4>
|
||||
<p className="text-zinc-500 mb-10 font-medium">{stat.desc}</p>
|
||||
<Link href="/contact" className="mt-auto bg-zinc-950 text-white px-10 py-3 rounded-xl font-bold hover:bg-red-600 transition-all text-xs tracking-widest uppercase shadow-lg group-hover:shadow-red-600/20">Executive View</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FineDiningPage
|
||||
625
src/app/restaurant-types/fine-dining/page.tsx
Normal file
625
src/app/restaurant-types/fine-dining/page.tsx
Normal file
@ -0,0 +1,625 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, ShoppingCart, Package, QrCode, BookOpen, Tag } from 'lucide-react'
|
||||
|
||||
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",
|
||||
"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",
|
||||
]
|
||||
|
||||
const FineDinePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${10 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
Take Control of Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Fine Dining Experience <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Precision Dining, Elevated</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver flawless service and elegant dining operations with a smart system built for high-end restaurants. A powerful cloud-based platform designed to manage reservations, kitchen coordination, guest preferences, and service flow — all from one place.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Reserve Your Demo
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Start Free Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500" />
|
||||
<span className="text-xs font-semibold text-zinc-500">Fine Dining POS with Multi-Branch Management</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-red-300" />
|
||||
<span className="text-xs font-semibold text-zinc-500">Trusted by hospitality innovators</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="Fine 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">Covers</p>
|
||||
<p className="text-white font-bold text-2xl">+85%</p>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-16 text-red-500/90">
|
||||
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" className="w-full h-full">
|
||||
<path fill="currentColor" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</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="Gourmet" 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">Satisfaction</p>
|
||||
<p className="text-white font-bold text-2xl">5 Stars</p>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-16 text-orange-500/90">
|
||||
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" className="w-full h-full">
|
||||
<path fill="currentColor" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</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="Plated 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">
|
||||
<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">100%</p>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-16 text-red-500/90">
|
||||
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" className="w-full h-full">
|
||||
<path fill="currentColor" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">EFFORTLESS SERVICE, PREMIUM EXPERIENCES</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Elevate Your Restaurant with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Fine Dining Management Platform</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Designed for restaurants where service, precision, and guest satisfaction matter most. Dine360 helps fine dining establishments manage reservations, kitchen coordination, guest experiences, and operations with precision and efficiency.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative flex justify-center items-center min-h-[600px]">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-5xl h-full -z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, rotate: -15, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, rotate: -5, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute top-10 left-1/4 w-[500px] h-[500px] bg-red-100/50 rounded-[4rem] -rotate-12"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, rotate: 15, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, rotate: 5, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute bottom-10 right-1/4 w-[400px] h-[400px] bg-zinc-200/50 rounded-[4rem] rotate-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-4xl flex justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 100 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative w-64 h-[500px] bg-zinc-900 rounded-[3rem] border-[8px] border-zinc-800 shadow-2xl overflow-hidden flex flex-col"
|
||||
>
|
||||
<div className="h-6 w-full flex justify-between px-6 pt-2">
|
||||
<div className="text-[10px] text-zinc-400">9:41</div>
|
||||
<div className="flex gap-1.5 h-2 items-center">
|
||||
<div className="w-3 h-2 bg-zinc-600 rounded-full" />
|
||||
<div className="w-4 h-2 bg-zinc-600 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 flex-1 flex flex-col pt-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-red-500 mb-4 mx-auto flex items-center justify-center text-white font-bold text-xl">M</div>
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-white font-bold text-lg">Fine Dine Hub</h3>
|
||||
<p className="text-zinc-500 text-[10px]">Multi-Branch Operations Active</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-10 w-full bg-zinc-800/50 rounded-xl animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: -100 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.3 }} className="absolute -left-12 top-20 bg-white p-5 rounded-2xl shadow-xl border border-zinc-100 max-w-[220px]">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-red-50 rounded-lg text-red-600"><TrendingUp className="w-5 h-5" /></div>
|
||||
<span className="text-lg font-bold text-zinc-900">90%</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-zinc-800 mb-1">Service Efficiency</p>
|
||||
<p className="text-[11px] text-zinc-500 leading-relaxed">Optimize service flow and improve staff coordination during peak dining hours.</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, y: 100 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.4 }} className="absolute -bottom-6 left-1/2 -translate-x-1/2 bg-white p-5 rounded-2xl shadow-xl border border-zinc-100 w-full max-w-[280px] z-20">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center text-red-600"><Check className="w-6 h-6" /></div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl font-bold text-zinc-900">100%</span>
|
||||
<span className="text-[10px] bg-red-100 text-red-600 px-2 py-0.5 rounded-full font-bold">LIVE</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-zinc-800">Secure Payments</p>
|
||||
<p className="text-[11px] text-zinc-500 mt-1">A reliable and secure billing system designed for premium dining environments.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: 100 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.5 }} className="absolute -right-12 top-48 bg-white p-5 rounded-2xl shadow-xl border border-zinc-100 max-w-[220px]">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-orange-50 rounded-lg text-orange-600"><TrendingUp className="w-5 h-5" /></div>
|
||||
<span className="text-lg">30%</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-zinc-800 mb-1">Guest Satisfaction Increase</p>
|
||||
<p className="text-[11px] text-zinc-500">Enhance customer experiences through faster service and personalized guest management.</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div animate={{ y: [0, -10, 0] }} transition={{ repeat: Infinity, duration: 4 }} className="absolute -left-24 top-1/2 w-16 h-16 bg-white rounded-full shadow-lg flex flex-col items-center justify-center border border-zinc-100">
|
||||
<Layout className="w-6 h-6 text-red-500" />
|
||||
<span className="text-[8px] font-bold text-zinc-400 mt-1">Dashboard</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div animate={{ y: [0, 10, 0] }} transition={{ repeat: Infinity, duration: 3.5, delay: 0.5 }} className="absolute -right-24 top-20 w-16 h-16 bg-white rounded-full shadow-lg flex flex-col items-center justify-center border border-zinc-100">
|
||||
<Smartphone className="w-6 h-6 text-zinc-800" />
|
||||
<span className="text-[8px] font-bold text-zinc-400 mt-1">App</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div animate={{ y: [0, -15, 0] }} transition={{ repeat: Infinity, duration: 5, delay: 1 }} className="absolute -right-10 -bottom-10 w-20 h-20 bg-zinc-900 rounded-full shadow-2xl flex flex-col items-center justify-center border border-zinc-800">
|
||||
<Dot className="w-10 h-10 text-red-500 animate-pulse" />
|
||||
<span className="text-[8px] font-bold text-zinc-400 -mt-2">Live Cloud</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* All-in-One Banner */}
|
||||
<section className="py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="bg-zinc-900 rounded-[2.5rem] p-10 md:p-14 text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-400 font-bold tracking-widest uppercase text-xs">DINE360 PERFORMANCE</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
|
||||
The Fine Dining Experience Engine
|
||||
</h2>
|
||||
<p className="text-zinc-400 max-w-2xl mx-auto text-sm leading-relaxed">
|
||||
Transform elegant dining operations with intelligent systems designed for precision service and seamless coordination.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
Dine360 Challenging
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Performance Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
From reservation to final course, Menumium orchestrates every element of fine dining with the precision your guests expect.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">3X Faster Table Turnover</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Smart table management helps restaurants serve more guests while maintaining premium dining standards.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Kitchen Communication</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders flow instantly from service staff to the kitchen, ensuring every dish is prepared accurately and efficiently.</p>
|
||||
</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="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" />
|
||||
</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">Seamless Service Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Prevent delays and miscommunication with intelligent order routing and real-time service monitoring.</p>
|
||||
</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="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" />
|
||||
</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">Precision Order Accuracy</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Every order is verified and synchronized across devices, eliminating mistakes and improving guest satisfaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Elegant Service, <br /> Powerful Operations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Deliver high-end dining service with a fast, intuitive point-of-sale system built for professional restaurant environments.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Process orders quickly with minimal staff effort",
|
||||
"Track every order from table to kitchen",
|
||||
"Support multiple payment methods 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Fine Dining Orders <br /> With Precision
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track and manage every order across tables, courses, and kitchen stations to deliver perfect dining experiences.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor course progression from starter to dessert",
|
||||
"Adjust orders instantly without disrupting kitchen flow",
|
||||
"Track table service progress 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table & Reservation 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" />
|
||||
<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="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 & RESERVATION</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Perfect Your Seating Experience
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Manage reservations and seating layouts effortlessly with tools designed for premium restaurants.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Visual Layout", desc: "Visual table layout management" },
|
||||
{ title: "Real-time Tracking", desc: "Real-time reservation tracking" },
|
||||
{ title: "VIP Management", desc: "Manage VIP guests and special requests" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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="Reservation System" fill className="object-cover rounded-[1.5rem]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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="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]" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Elegant Digital Menus <br /> For Modern Dining
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Provide guests with beautifully designed digital menus that showcase dishes, wines, and specials.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Guests can browse menus directly from their phones",
|
||||
"Update menus instantly across locations",
|
||||
"Highlight chef specials and seasonal dishes"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Location <br /> With Confidence
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple fine dining restaurants with a centralized management system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"View performance reports across locations",
|
||||
"Manage menus and pricing centrally",
|
||||
"Monitor service quality across branches"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FineDinePage
|
||||
518
src/app/restaurant-types/food-truck/page.tsx
Normal file
518
src/app/restaurant-types/food-truck/page.tsx
Normal file
@ -0,0 +1,518 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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, 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",
|
||||
]
|
||||
|
||||
const FoodTruckPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${40 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
MOBILE FOOD BUSINESS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Power Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Food Truck, Cart, or Street Food Stand</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Run your mobile food business smoothly with a system designed for fast, flexible, and on-the-go operations. Dine360 helps food trucks and street vendors manage orders, payments, and daily sales from one easy platform.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Content - Cards */}
|
||||
<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
|
||||
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="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>
|
||||
<p className="text-white font-bold text-2xl">80% Faster</p>
|
||||
</div>
|
||||
</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[2]} 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>
|
||||
<p className="text-white font-bold text-2xl">35% Higher</p>
|
||||
</div>
|
||||
</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[3]} 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>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR MOBILE FOOD BUSINESSES</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Food Truck Operations <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Food trucks and street food stands operate in fast-paced environments where speed and accuracy matter the most. Dine360 provides a simple yet powerful platform to handle orders, payments, and daily operations.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "80%", desc: "Serve customers quickly during busy hours." },
|
||||
{ label: "Higher Daily Sales", value: "35%", desc: "Reduce queues and increase order flow." },
|
||||
{ label: "Secure Payment Processing", value: "100%", desc: "Accept multiple payment methods safely." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
MOBILE FOOD PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Fast Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Food trucks thrive on speed and efficiency. Dine360 ensures orders move quickly from customers to preparation.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<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="Order Taking" 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">Fast Order Taking</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Take orders quickly with a simple POS interface designed for fast service.</p>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Kitchen Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders instantly reach the preparation station, reducing confusion.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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">Shorter Customer Wait Times</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Efficient order management keeps lines moving.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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 Order Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce mistakes and ensure customers receive the correct orders.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Simple POS Built for Food Trucks
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Process orders quickly and keep track of daily sales with an easy-to-use POS system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast order entry",
|
||||
"Accept card, cash, and digital payments",
|
||||
"Real-time sales tracking"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</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 }}
|
||||
>
|
||||
<div className="flex flex-col h-full relative">
|
||||
<Image src={CARD_IMAGES[1]} alt="POS System" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<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">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Keep Orders Organized
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage multiple orders during busy hours without delays.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order status easily",
|
||||
"Modify orders instantly",
|
||||
"Manage order queues efficiently"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Flow Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-900 rounded-[3.5rem] 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-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">SERVICE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Handle High Customer Flow
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep service smooth during busy periods and events.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Queues", desc: "Manage long customer queues" },
|
||||
{ title: "Pickups", desc: "Track takeaway orders" },
|
||||
{ title: "Prep Time", desc: "Monitor preparation times" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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-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" />
|
||||
</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">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Faster Ordering
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse your menu instantly using QR codes.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Easy menu browsing",
|
||||
"Update menu anytime",
|
||||
"Highlight special deals and combos"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Location Section */}
|
||||
<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-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 BUSINESS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Expand Your Food Business
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
If you operate multiple food trucks or stands, Dine360 helps you manage everything from one place.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales from multiple locations",
|
||||
"Track performance across trucks",
|
||||
"Manage menus centrally"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FoodTruckPage
|
||||
225
src/app/restaurant-types/full-service/page.tsx
Normal file
225
src/app/restaurant-types/full-service/page.tsx
Normal file
@ -0,0 +1,225 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
import FAQ from '@/components/FAQ'
|
||||
import { Check, Star, Zap, Clock, Target, Utensils, Users, Layout, Smartphone, Calendar, Menu, AreaChart } 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-1552566626-52f8b828add9?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-1550966841-3ee7adac1668?auto=format&fit=crop&q=80&w=600",
|
||||
]
|
||||
|
||||
const FullServicePage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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">
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/women/${i + 30}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full tracking-tight">Choice of 2,460+ Full-Service Dining</span>
|
||||
</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-600" />
|
||||
FULL-SERVICE RESTAURANTS
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Scale Your <br />
|
||||
<span className="italic font-serif font-light text-red-600 text-nowrap">Service Performance</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed text-wrap">
|
||||
Dine360 unifies your table service, reservations, and kitchen operations to deliver a premium dining experience.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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[1]} alt="Elegant Service" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-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 Experience</p>
|
||||
<p className="text-white font-bold text-2xl">90% Satisfaction</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="Dine-in Floor" fill className="object-cover" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-2/5 bg-gradient-to-t from-zinc-950/90 via-zinc-950/40 to-transparent p-4 flex flex-col justify-end text-white text-nowrap">
|
||||
<p className="text-[10px] text-red-400 font-medium tracking-wide uppercase mb-0.5">Turnover Speed</p>
|
||||
<p className="text-white font-bold text-2xl">30% Improvement</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* POS Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto border-t border-zinc-100">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[450px] w-full bg-zinc-50 rounded-[2.5rem] overflow-hidden shadow-2xl group">
|
||||
<Image src={CARD_IMAGES[3]} alt="Service POS" fill className="object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-12 flex flex-col justify-end text-white">
|
||||
<Smartphone className="w-12 h-12 text-red-500 mb-6" />
|
||||
<h3 className="text-3xl font-bold mb-4">POS Built for Seamless Dining</h3>
|
||||
<p className="text-zinc-200 max-w-sm">Manage tables and counter sales efficiently.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="space-y-2">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs">POS SECTION</span>
|
||||
<h2 className="text-4xl font-bold uppercase">POS System</h2>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
{[
|
||||
"Handle table and counter orders quickly",
|
||||
"Accept multiple payment methods",
|
||||
"Real-time sales tracking"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 group">
|
||||
<div className="h-10 w-10 rounded-full bg-red-50 flex items-center justify-center text-red-600 group-hover:bg-red-600 group-hover:text-white transition-all"><Check className="w-5 h-5" /></div>
|
||||
<p className="font-semibold text-zinc-700 text-lg tracking-tight">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex bg-red-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-black transition-all w-fit uppercase text-sm tracking-wider">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Order Management Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-950 rounded-[3rem] text-white overflow-hidden relative">
|
||||
<div className="absolute bottom-0 left-0 w-1/3 h-full bg-red-600/5 blur-[120px]" />
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center relative z-10">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="space-y-2">
|
||||
<span className="text-red-500 font-bold uppercase tracking-widest text-xs">ORDER MANAGEMENT SECTION</span>
|
||||
<h2 className="text-4xl font-bold uppercase">Order Management</h2>
|
||||
<h3 className="text-2xl text-zinc-400 font-medium tracking-tight">Track Every Dine-In Order</h3>
|
||||
<p className="text-zinc-500 italic max-w-sm">Keep service smooth from table to kitchen.</p>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
{[
|
||||
"Monitor table status in real time",
|
||||
"Handle multiple order types seamlessly",
|
||||
"Reduce errors and improve kitchen flow"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 group">
|
||||
<div className="h-6 w-6 rounded-full bg-red-600/20 text-red-500 flex items-center justify-center font-bold text-sm"></div>
|
||||
<p className="text-zinc-300 font-medium">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="bg-white text-black px-8 py-3 rounded-xl font-bold hover:bg-zinc-200 transition-all w-fit">Get Started</Link>
|
||||
</div>
|
||||
<div className="relative h-[400px] w-full rounded-2xl overflow-hidden border border-zinc-800 shadow-xl">
|
||||
<Image src={CARD_IMAGES[2]} alt="Table Logic" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table Management Section */}
|
||||
<section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs tracking-tighter">TABLE / SERVICE SECTION</span>
|
||||
<h2 className="text-4xl font-bold mt-2 uppercase">Table Seating & Reservation</h2>
|
||||
<p className="text-zinc-500 mt-4 text-xl font-medium italic max-w-2xl mx-auto">Master Your Floor Management: Organize reservations and walk-ins effortlessly.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8 text-center text-nowrap">
|
||||
{[
|
||||
{ title: "Floor Mastery", desc: "Manage table availability and seating flow", icon: Calendar },
|
||||
{ title: "Waitlist Sync", desc: "Track reservations and walk-ins easily", icon: Users },
|
||||
{ title: "Turnover Control", desc: "Increase efficiency and seating turnover", icon: Zap }
|
||||
].map((feature, i) => (
|
||||
<div key={i} className="bg-zinc-50 p-10 rounded-[2.5rem] border border-zinc-100 hover:border-red-200 hover:shadow-xl hover:shadow-red-600/5 transition-all">
|
||||
<div className="h-14 w-14 rounded-2xl bg-white shadow-sm flex items-center justify-center text-red-600 mx-auto mb-6"><feature.icon className="w-7 h-7" /></div>
|
||||
<h4 className="text-xl font-bold mb-3">{feature.title}</h4>
|
||||
<p className="text-zinc-500 mb-6 text-wrap">{feature.desc}</p>
|
||||
<Link href="/contact" className="text-red-600 font-bold hover:underline">Get Started </Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital Menu Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto border-y border-zinc-100 mb-20">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative h-[550px] w-full rounded-[2.5rem] overflow-hidden border-2 border-zinc-100 group shadow-2xl">
|
||||
<Image src={CARD_IMAGES[1]} alt="Digital Menu" fill className="object-cover group-hover:scale-105 transition-all duration-1000" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="space-y-2">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs">DIGITAL MENU SECTION</span>
|
||||
<h2 className="text-4xl font-bold">QR MENU</h2>
|
||||
<h3 className="text-2xl text-zinc-600">Elevate Your Dining Experience</h3>
|
||||
<p className="text-zinc-500 italic max-w-sm">Offer a modern digital menu built for full-service dining.</p>
|
||||
</div>
|
||||
<div className="grid gap-6">
|
||||
{[
|
||||
"QR code menu access for diners",
|
||||
"Highlight signature dishes and pairings",
|
||||
"Instant menu updates across platforms"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 bg-zinc-50 p-5 rounded-2xl border border-zinc-100 hover:border-red-100 transition-all">
|
||||
<div className="h-6 w-6 rounded-full bg-red-600 flex items-center justify-center text-white"><Check className="w-4 h-4" /></div>
|
||||
<p className="font-bold text-zinc-700 tracking-tight">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="bg-black text-white px-10 py-4 rounded-2xl font-bold hover:bg-zinc-900 transition-all text-center">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch Section */}
|
||||
<section className="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto rounded-[3.5rem] bg-zinc-50">
|
||||
<div className="flex flex-col items-center text-center gap-6 mb-16">
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-xs">MULTI-BRANCH SECTION</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold uppercase">Scale Your Service Brand</h2>
|
||||
<h3 className="text-2xl text-zinc-600 font-light max-w-xl">Manage Multiple Locations with Centralized Control</h3>
|
||||
<p className="text-zinc-500 italic max-w-2xl px-4 text-wrap">Monitor sales across locations and handle menus centrally. Track performance and insights from one dashboard.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ tag: "Revenue", val: "Global Reporting", desc: "Monitor sales across locations", icon: AreaChart },
|
||||
{ tag: "Operation", val: "Centralized Menus", desc: "Manage menus centrally", icon: Menu },
|
||||
{ tag: "Synergy", val: "Brand Analytics", desc: "Track performance and insights", icon: Target }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} whileHover={{ y: -8 }} className="bg-white p-10 rounded-[2.5rem] shadow-xl shadow-zinc-200/50 border border-zinc-100 text-center flex flex-col items-center">
|
||||
<div className="h-16 w-16 bg-red-50 rounded-2xl flex items-center justify-center text-red-600 mb-6"><stat.icon className="w-8 h-8" /></div>
|
||||
<p className="text-red-600 font-bold uppercase text-[10px] mb-2 tracking-[0.2em]">{stat.tag}</p>
|
||||
<h4 className="text-xl font-bold mb-2">{stat.val}</h4>
|
||||
<p className="text-zinc-500 mb-8 text-sm">{stat.desc}</p>
|
||||
<Link href="/contact" className="mt-auto bg-red-600 text-white px-8 py-2.5 rounded-xl font-bold hover:bg-black transition-all">Get Started</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FullServicePage
|
||||
519
src/app/restaurant-types/ghost-kitchen/page.tsx
Normal file
519
src/app/restaurant-types/ghost-kitchen/page.tsx
Normal file
@ -0,0 +1,519 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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'
|
||||
|
||||
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",
|
||||
]
|
||||
|
||||
const GhostKitchenPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${60 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
GHOST KITCHEN OPERATIONS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Take Control of Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Ghost Kitchen Operations</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Run delivery-only restaurants efficiently with a system designed for modern cloud kitchens. Dine360 helps you manage delivery orders, kitchen workflows, and multiple virtual brands from one powerful dashboard.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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>
|
||||
<p className="text-white font-bold text-2xl">3X Faster</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">+40%</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">100% Cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Ghost Kitchen with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Platform</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Ghost kitchens require speed, coordination, and centralized control. Dine360 helps virtual restaurants manage delivery orders, kitchen operations, and multiple brands without operational chaos.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "3X", desc: "Handle high delivery volumes without delays." },
|
||||
{ label: "Operational Efficiency", value: "40%", desc: "Manage multiple delivery brands from one kitchen." },
|
||||
{ label: "Cloud-Based System", value: "100%", desc: "Control your kitchen operations from anywhere." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
GHOST KITCHEN PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Delivery Efficiency Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Ghost kitchens operate at high speed with multiple delivery platforms. Dine360 connects all your orders into one system, helping you manage everything seamlessly.
|
||||
</motion.p>
|
||||
</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="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>
|
||||
</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">Centralized Delivery Orders</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders from delivery platforms are consolidated into a single dashboard.</p>
|
||||
</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="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>
|
||||
</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">Smart Kitchen Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated order routing ensures the kitchen handles orders efficiently.</p>
|
||||
</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="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>
|
||||
</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 Order Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Minimize preparation delays with real-time kitchen tracking.</p>
|
||||
</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="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>
|
||||
</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 Order Handling</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delivery mistakes with automated validation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
DELIVERY POS
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Delivery Order <br /> From One Dashboard
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle delivery and pickup orders quickly with a POS system built for cloud kitchens.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage orders from multiple delivery apps",
|
||||
"Track order preparation in real time",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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[0]} alt="Delivery POS" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Streamline Delivery Orders
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage delivery orders smoothly from preparation to dispatch.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order status in real time",
|
||||
"Monitor kitchen preparation time",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage Delivery Flow Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep delivery operations organized and efficient even during busy hours.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "App Tracking", desc: "Track incoming orders from multiple platforms" },
|
||||
{ title: "Prep Monitoring", desc: "Monitor order queues and preparation times" },
|
||||
{ title: "Smart Routing", desc: "Reduce delivery delays with smart order routing" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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="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]" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Virtual Brands
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple restaurant brands from one kitchen using centralized menu management.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage different brand menus easily",
|
||||
"Update menu items instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Kitchen Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<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="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 KITCHENS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Expand Your Virtual Restaurant Network
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Scale your ghost kitchen business across multiple locations with centralized management.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor kitchen performance in real time",
|
||||
"Manage multiple locations easily",
|
||||
"Track delivery performance and revenue"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GhostKitchenPage
|
||||
517
src/app/restaurant-types/ghost-restaurant/page.tsx
Normal file
517
src/app/restaurant-types/ghost-restaurant/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
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 } 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",
|
||||
]
|
||||
|
||||
const GhostKitchenPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
GHOST RESTAURANT
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Take Control of Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Ghost Kitchen Operations</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Run delivery-only restaurants efficiently with a system designed for modern cloud kitchens. Manage brands and workflows from one place.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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[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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] 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" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Ghost Kitchen with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Platform</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Ghost kitchens require speed, coordination, and centralized control. Dine360 helps virtual restaurants manage delivery orders, kitchen operations, and multiple brands without operational chaos.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "3X", desc: "Handle high delivery volumes without delays." },
|
||||
{ label: "Operational Efficiency", value: "40%", desc: "Manage multiple delivery brands from one kitchen." },
|
||||
{ label: "Cloud-Based System", value: "100%", desc: "Control your kitchen operations from anywhere." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
GHOST KITCHEN PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Delivery Efficiency Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Ghost kitchens operate at high speed with multiple delivery platforms. Dine360 connects all your orders into one system, helping you manage everything seamlessly.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Centralized Delivery Orders</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders from delivery platforms are consolidated into a single dashboard.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smart Kitchen Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated order routing ensures the kitchen handles orders efficiently.</p>
|
||||
</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="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" />
|
||||
</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 Order Fulfillment</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Minimize preparation delays with real-time kitchen tracking.</p>
|
||||
</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="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" />
|
||||
</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 Order Handling</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delivery mistakes with automated validation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Delivery 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]">
|
||||
<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="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">
|
||||
DELIVERY POS
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Every Delivery Order <br /> From One Dashboard
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle delivery and pickup orders quickly with a POS system built for cloud kitchens.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage orders from multiple delivery apps",
|
||||
"Track order preparation in real time",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Streamline Delivery Orders
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage delivery orders smoothly from preparation to dispatch.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order status in real time",
|
||||
"Monitor kitchen preparation time",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage Delivery Flow Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep delivery operations organized and efficient even during busy hours.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Platform Sync", desc: "Track incoming orders from multiple platforms" },
|
||||
{ title: "Queue Monitor", desc: "Monitor order queues and preparation times" },
|
||||
{ title: "Smart Routing", desc: "Reduce delivery delays with smart order routing" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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>
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Virtual Brands
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Operate multiple restaurant brands from one kitchen using centralized menu management.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Manage different brand menus easily",
|
||||
"Update menu items instantly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Location Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50/50 rounded-[3rem]">
|
||||
<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-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 KITCHENS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Expand Your Virtual Restaurant Network
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Scale your ghost kitchen business across multiple locations with centralized management.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor kitchen performance in real time",
|
||||
"Manage multiple locations easily",
|
||||
"Track delivery performance and revenue"
|
||||
].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GhostKitchenPage
|
||||
380
src/app/restaurant-types/mongolian-bbq/page.tsx
Normal file
380
src/app/restaurant-types/mongolian-bbq/page.tsx
Normal file
@ -0,0 +1,380 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const MongolianBBQPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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">
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 48}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">Join 2,460+ Restaurants</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-600" />
|
||||
Power Your Mongolian Barbecue Experience
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Scale Your <br />
|
||||
<span className="italic font-serif font-light text-red-600">Mongolian Barbecue Experience</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Manage high-volume, customizable dining with a system built for Mongolian barbecue restaurants. Dine360 helps you handle guest flow, orders, and billing while delivering a smooth and engaging dining experience.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50 rounded-4xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16 text-zinc-900">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="flex items-center justify-center gap-2 mb-6">
|
||||
<div className="h-px w-8 bg-red-600" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs text-nowrap">BUILT FOR INTERACTIVE DINING</span>
|
||||
<div className="h-px w-8 bg-red-600" />
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-3xl md:text-5xl font-bold mb-6 leading-tight">
|
||||
Transform Your <span className="text-red-600 font-serif italic">Mongolian Barbecue Restaurant</span> with Dine360 Software.
|
||||
</motion.h2>
|
||||
<p className="text-base text-zinc-600 max-w-2xl mx-auto">
|
||||
Mongolian barbecue restaurants offer a unique, customizable dining experience where guests build their own meals. Managing crowd flow, billing, and kitchen coordination is essential. Dine360 simplifies operations by streamlining guest management, order tracking, and service flow - ensuring a seamless experience for every customer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Guest Processing", value: "90%", desc: "Handle high customer volumes efficiently." },
|
||||
{ label: "Improved Service Flow", value: "35%", desc: "Reduce congestion and waiting time." },
|
||||
{ label: "Accurate Billing", value: "100%", desc: "Ensure every guest is billed correctly." }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }} className="bg-white p-8 rounded-[2.5rem] border border-zinc-100/50 text-center shadow-sm">
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
INTERACTIVE DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Custom Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Mongolian barbecue restaurants require smooth coordination between guest flow, food stations, and service. Dine360 ensures efficient operations from entry to checkout.
|
||||
</motion.p>
|
||||
</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-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" />
|
||||
</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">Smooth Guest Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Manage entry, seating, and movement efficiently.</p>
|
||||
</div>
|
||||
</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="Cooking 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"><RefreshCw className="w-5 h-5" /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Organized Cooking Workflow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Coordinate orders with cooking stations effectively.</p>
|
||||
</div>
|
||||
</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[3]} alt="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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce waiting times and keep lines moving.</p>
|
||||
</div>
|
||||
</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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Track meals and ensure precise billing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">POS SYSTEM</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Fast POS for High-Volume Dining</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Process guest billing quickly and efficiently.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Quick billing for multiple guests", "Support for buffet or per-bowl pricing", "Multiple payment options"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</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 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Manage Orders and Custom Meals</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Track custom orders and ensure smooth preparation.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Monitor order flow", "Handle custom meal requests", "Track preparation progress"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">Manage Seating and Guest Flow</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">Handle large crowds and table turnover efficiently.</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Track Table Availability", desc: "Check table status instantly" },
|
||||
{ title: "Manage Group Seating", desc: "Organize large party seating easily" },
|
||||
{ title: "Optimize Guest Movement", desc: "Speed up table turnovers" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">Get Started</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" 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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Digital Menu for Easy Selection</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Allow guests to explore ingredients and options easily.</p>
|
||||
<ul className="space-y-4">
|
||||
{["QR code menu access", "Display ingredients and combos", "Update menu instantly"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI LOCATION RESTAURANTS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Expand Your Mongolian BBQ Brand</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Manage multiple locations with centralized control.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Monitor performance across outlets", "Manage menus centrally", "Track sales and analytics"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
<FAQ
|
||||
title="Common Questions"
|
||||
subtitle="Frequently Asked Questions"
|
||||
description="Everything you need to know about Dine360 for Mongolian barbecue restaurants."
|
||||
questions={[
|
||||
{ question: "Is Dine360 suitable for Mongolian barbecue restaurants?", answer: "Yes. Dine360 is designed for high-volume, customizable dining environments." },
|
||||
{ question: "Can it handle buffet or custom pricing models?", answer: "Yes. The system supports flexible pricing structures." },
|
||||
{ question: "Does it help manage guest flow?", answer: "Yes. Dine360 helps organize seating and service flow efficiently." },
|
||||
{ question: "Can I track sales and performance?", answer: "Yes. The platform provides real-time analytics and reporting." }
|
||||
]}
|
||||
/>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MongolianBBQPage
|
||||
684
src/app/restaurant-types/page.tsx
Normal file
684
src/app/restaurant-types/page.tsx
Normal file
@ -0,0 +1,684 @@
|
||||
'use client'
|
||||
|
||||
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 { motion, AnimatePresence } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
import Testimonials from '@/components/Testimonials'
|
||||
|
||||
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",
|
||||
icon: Gem,
|
||||
description: "Elevate premium dining with reservation accuracy, table layout control, and detailed performance analytics.",
|
||||
angle: 270,
|
||||
href: "/restaurant-types/fine-dine",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
]
|
||||
|
||||
const HERO_IMAGES = [
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&q=80&w=800",
|
||||
alt: "Fine Dining",
|
||||
label: "Full Service"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&q=80&w=800",
|
||||
alt: "Fast Food",
|
||||
label: "Fast Food"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800",
|
||||
alt: "Cafe Bistro",
|
||||
label: "Cafe & Bistro"
|
||||
},
|
||||
{
|
||||
src: "https://images.unsplash.com/photo-1567521464027-f127ff144326?auto=format&fit=crop&q=80&w=800",
|
||||
alt: "Ghost Kitchen",
|
||||
label: "Ghost Kitchen"
|
||||
}
|
||||
]
|
||||
|
||||
const SEO_TAGS = [
|
||||
"Menumium Restaurant Software for Every Type of Restaurant",
|
||||
"Smart Operations With Menumium Restaurant Software Features",
|
||||
"Manage Orders to Operations with Menumium"
|
||||
]
|
||||
|
||||
const RESTAURANT_TYPE_EMOJIS: Record<string, string> = {
|
||||
"Fast Food": "🍟",
|
||||
"Food Truck": "🚚",
|
||||
"Cafe & Bistro": "☕",
|
||||
"Ghost Kitchen": "🧑🍳",
|
||||
"Full Service": "🍽️",
|
||||
"Bakery": "🥐",
|
||||
"Fine Dine": "🛎️",
|
||||
"Family Style": "🧑🤝🧑",
|
||||
}
|
||||
|
||||
const RestaurantTypesPage = () => {
|
||||
const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
|
||||
const [hoveredCardIdx, setHoveredCardIdx] = useState<number | null>(null)
|
||||
return (
|
||||
<div className="min-h-screen bg-black font-sans selection:bg-red-600 selection:text-white">
|
||||
<Navbar />
|
||||
|
||||
<main>
|
||||
|
||||
{/* ─── HERO SECTION ─────────────────────────────────────────────── */}
|
||||
<section className="relative min-h-screen flex items-center pt-28 pb-16 px-6 overflow-hidden">
|
||||
|
||||
{/* Background noise/grid */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff06_1px,transparent_1px),linear-gradient(to_bottom,#ffffff06_1px,transparent_1px)] bg-size-[64px_64px]" />
|
||||
<div className="absolute top-0 left-0 w-150 h-150 bg-red-600/10 rounded-full blur-[120px] -translate-x-1/3 -translate-y-1/3" />
|
||||
<div className="absolute bottom-0 right-0 w-100 h-100 bg-red-900/10 rounded-full blur-[100px] translate-x-1/4 translate-y-1/4" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
||||
|
||||
{/* LEFT — Typography */}
|
||||
<div className="flex flex-col gap-7">
|
||||
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex items-center gap-2 w-fit"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
|
||||
<span className="text-red-500 font-bold tracking-[0.22em] uppercase text-xs">
|
||||
YOUR RESTAURANT’S BEST PARTNER
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Heading */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-[clamp(2.6rem,6vw,5.5rem)] font-black text-white leading-[1.02] tracking-tight"
|
||||
>
|
||||
All-In-One
|
||||
<br />
|
||||
Solution For
|
||||
<br />
|
||||
<span className="text-red-600 italic font-serif font-light">Every Type</span>
|
||||
<br />
|
||||
of Restaurant
|
||||
</motion.h1>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-base lg:text-lg text-gray-400 leading-relaxed max-w-lg font-medium"
|
||||
>
|
||||
One powerful platform built to handle orders, billing, reservations, kitchen coordination, inventory, and analytics — all in one seamless system. Dine360 simplifies operations so you can focus on delivering exceptional dining experiences.
|
||||
</motion.p>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-3"
|
||||
>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full font-bold text-base transition-all shadow-lg shadow-red-600/25 active:scale-95"
|
||||
>
|
||||
Start Free Now →
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 border border-white/20 hover:border-white/50 text-white px-8 py-4 rounded-full font-bold text-base transition-all hover:bg-white/5 active:scale-95"
|
||||
>
|
||||
Book a Demo
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* SEO Tag Pills */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.7, delay: 0.5 }}
|
||||
className="flex flex-wrap gap-2 pt-2"
|
||||
>
|
||||
{SEO_TAGS.map((tag, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-[10px] font-semibold text-gray-500 border border-white/8 px-3 py-1.5 rounded-full bg-white/3 leading-tight"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT — Image Grid */}
|
||||
<div className="relative grid grid-cols-2 gap-3 h-130 lg:h-140">
|
||||
{/* Col 1 — tall + short */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
className="relative flex-2 rounded-2xl overflow-hidden border border-white/8 group"
|
||||
>
|
||||
<Image
|
||||
src={HERO_IMAGES[0].src}
|
||||
alt={HERO_IMAGES[0].alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
|
||||
<div className="absolute bottom-3 left-3 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-500" />
|
||||
<span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[0].label}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.35 }}
|
||||
className="relative flex-1 rounded-2xl overflow-hidden border border-white/8 group"
|
||||
>
|
||||
<Image
|
||||
src={HERO_IMAGES[1].src}
|
||||
alt={HERO_IMAGES[1].alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
|
||||
<div className="absolute bottom-3 left-3 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-500" />
|
||||
<span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[1].label}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Col 2 — short + tall (offset) */}
|
||||
<div className="flex flex-col gap-3 pt-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.45 }}
|
||||
className="relative flex-1 rounded-2xl overflow-hidden border border-white/8 group"
|
||||
>
|
||||
<Image
|
||||
src={HERO_IMAGES[2].src}
|
||||
alt={HERO_IMAGES[2].alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
|
||||
<div className="absolute bottom-3 left-3 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-500" />
|
||||
<span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[2].label}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.55 }}
|
||||
className="relative flex-2 rounded-2xl overflow-hidden border border-white/8 group"
|
||||
>
|
||||
<Image
|
||||
src={HERO_IMAGES[3].src}
|
||||
alt={HERO_IMAGES[3].alt}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/10 to-transparent" />
|
||||
<div className="absolute bottom-3 left-3 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-500" />
|
||||
<span className="text-white text-[11px] font-bold tracking-wide">{HERO_IMAGES[3].label}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Floating stat badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
className="absolute -left-4 bottom-16 bg-red-600 text-white px-4 py-3 rounded-2xl shadow-2xl shadow-red-600/40 z-10"
|
||||
>
|
||||
<p className="text-[10px] font-bold opacity-80 uppercase tracking-wide">Restaurants Served</p>
|
||||
<p className="text-2xl font-black leading-tight">2,460+</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── PERFORMANCE JOURNEY ───────────────────────────────────── */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white text-zinc-900">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-600 font-bold uppercase tracking-[0.2em] text-[10px] mb-3"
|
||||
>
|
||||
DINE360 PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-3xl md:text-4xl font-black text-zinc-900 mb-4"
|
||||
>
|
||||
The Performance Journey
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-zinc-600 max-w-2xl mx-auto text-sm leading-relaxed"
|
||||
>
|
||||
Transforming restaurant operations with intelligent automation and real-time control. Dine360 is built to increase speed, accuracy, and operational efficiency at every stage of service.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
|
||||
{/* Step 1: Left */}
|
||||
<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-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" />
|
||||
</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-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
|
||||
<Zap className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">3X Faster Order Processing</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed font-medium">
|
||||
Accelerate billing, kitchen coordination, and service delivery with an optimized order flow. Dine360 reduces processing time so your team serves more customers without increasing pressure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2: Right */}
|
||||
<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-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" />
|
||||
</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-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
|
||||
<RefreshCw className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Instant Order Syncing</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed font-medium">
|
||||
Eliminate communication gaps between counter, kitchen, and delivery. Orders are updated in real time across all connected devices — ensuring everyone works from the same source of truth.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 3: Left */}
|
||||
<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-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" />
|
||||
</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-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
|
||||
<Clock className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Zero Order Delays</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed font-medium">
|
||||
Keep service running smoothly even during peak hours. Smart queue management and live status tracking prevent bottlenecks before they happen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 4: Right */}
|
||||
<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-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" />
|
||||
</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-100 rounded-xl flex items-center justify-center text-red-600 mb-4">
|
||||
<Target className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">100% Order Accuracy</h3>
|
||||
<p className="text-zinc-600 text-sm leading-relaxed font-medium">
|
||||
Reduce costly mistakes with live validation, confirmation prompts, and structured order workflows. Deliver exactly what was ordered — every single time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── RESTAURANT TYPES RADIAL ──────────────────────────────────── */}
|
||||
<section className="py-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-zinc-500 font-bold uppercase tracking-[0.2em] text-[10px] mb-3"
|
||||
>
|
||||
DINE360 FOR EVERYONE
|
||||
</motion.div>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-4xl md:text-5xl font-black text-white mb-4"
|
||||
>
|
||||
Built for All Restaurant Types
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-zinc-400 max-w-xl mx-auto text-sm leading-relaxed"
|
||||
>
|
||||
No matter your service style or scale, Dine360 adapts to your operations — delivering speed, control, and growth across every format.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Radial Diagram */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.92 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-210 h-210 max-w-[min(840px,92vw)] max-h-[min(840px,92vw)]">
|
||||
|
||||
{/* SVG dashed lines — start from inner circle edge so nothing drawn inside */}
|
||||
<svg
|
||||
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
|
||||
const r = 210
|
||||
const rInner = 90
|
||||
const x1 = 290 + rInner * Math.sin(rad)
|
||||
const y1 = 290 - rInner * Math.cos(rad)
|
||||
const x2 = 290 + r * Math.sin(rad)
|
||||
const y2 = 290 - r * Math.cos(rad)
|
||||
const isHovered = hoveredIdx === idx
|
||||
const anyHovered = hoveredIdx !== null
|
||||
return (
|
||||
<line
|
||||
key={idx}
|
||||
x1={x1} y1={y1}
|
||||
x2={x2} y2={y2}
|
||||
stroke="#dc2626"
|
||||
strokeWidth={1.2}
|
||||
strokeDasharray="5 5"
|
||||
opacity={anyHovered ? (isHovered ? 0.7 : 0.1) : 0.7}
|
||||
style={{ transition: 'opacity 0.4s' }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
|
||||
{/* Center Circle */}
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div
|
||||
className="w-72 h-72 rounded-full border-2 border-red-600 flex flex-col items-center justify-center text-center px-7 overflow-hidden"
|
||||
style={{ background: 'radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%)' }}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{hoveredIdx === null ? (
|
||||
<motion.div
|
||||
key="default"
|
||||
initial={{ opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -6 }}
|
||||
transition={{ duration: 0.22 }}
|
||||
className="flex flex-col items-center gap-3"
|
||||
>
|
||||
<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">
|
||||
One system. Unlimited possibilities. From small independent outlets to multi-branch operations, Dine360 powers modern restaurant performance.
|
||||
</span>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key={`hovered-${hoveredIdx}`}
|
||||
initial={{ opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -6 }}
|
||||
transition={{ duration: 0.22 }}
|
||||
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}
|
||||
</span>
|
||||
<span className="text-white text-sm leading-snug font-semibold">
|
||||
{RESTAURANT_TYPES[hoveredIdx].description}
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nodes */}
|
||||
{RESTAURANT_TYPES.map((type, idx) => {
|
||||
const rad = (type.angle * Math.PI) / 180
|
||||
const r = 210
|
||||
const cx = 290 + r * Math.sin(rad)
|
||||
const cy = 290 - r * Math.cos(rad)
|
||||
const isHovered = hoveredIdx === idx
|
||||
const anyHovered = hoveredIdx !== null
|
||||
return (
|
||||
<Link
|
||||
key={idx}
|
||||
href={type.href}
|
||||
className="absolute flex flex-col items-center gap-2 cursor-pointer"
|
||||
style={{
|
||||
left: `${(cx / 580) * 100}%`,
|
||||
top: `${(cy / 580) * 100}%`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
onMouseEnter={() => setHoveredIdx(idx)}
|
||||
onMouseLeave={() => setHoveredIdx(null)}
|
||||
>
|
||||
<div
|
||||
className="w-16 h-16 rounded-full border flex items-center justify-center transition-all duration-300"
|
||||
style={{
|
||||
background: isHovered ? '#dc2626' : '#18181b',
|
||||
borderColor: isHovered ? '#dc2626' : anyHovered ? '#3f3f46' : '#3f3f46',
|
||||
transform: isHovered ? 'scale(1.15)' : 'scale(1)',
|
||||
opacity: anyHovered && !isHovered ? 0.4 : 1,
|
||||
boxShadow: isHovered ? '0 0 24px rgba(220,38,38,0.5)' : 'none',
|
||||
}}
|
||||
>
|
||||
<type.icon
|
||||
className="w-7 h-7 transition-colors duration-300"
|
||||
style={{ color: isHovered ? '#fff' : '#a1a1aa' }}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="text-xs font-bold uppercase tracking-widest whitespace-nowrap transition-all duration-300"
|
||||
style={{
|
||||
color: isHovered ? '#ffffff' : anyHovered ? '#52525b' : '#e4e4e7',
|
||||
}}
|
||||
>
|
||||
{type.label}
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</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">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</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
|
||||
|
||||
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',
|
||||
}}
|
||||
>
|
||||
Learn More →
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── TESTIMONIALS ─────────────────────────────────────────────── */}
|
||||
<Testimonials />
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RestaurantTypesPage
|
||||
541
src/app/restaurant-types/pop-up/page.tsx
Normal file
541
src/app/restaurant-types/pop-up/page.tsx
Normal file
@ -0,0 +1,541 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const PopUpPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
Run Your
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Pop-Up Restaurant <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">with Ease</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Launch, manage, and scale your pop-up restaurant effortlessly with a system built for flexible, temporary, and event-based dining. Dine360 helps you handle orders, payments, and operations quickly — wherever your pop-up is.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="Pop-Up Setup" 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>
|
||||
<p className="text-white font-bold text-2xl">Instantly</p>
|
||||
</div>
|
||||
</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="Flexible 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>
|
||||
<p className="text-white font-bold text-2xl">90%</p>
|
||||
</div>
|
||||
</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="On-the-go 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">Flexibility</p>
|
||||
<p className="text-white font-bold text-2xl">100%</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR FLEXIBLE DINING</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Pop-Up Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Pop-up restaurants thrive on flexibility, speed, and unique customer experiences. Whether you’re hosting events, seasonal concepts, or temporary dining spaces — managing operations efficiently is critical. Dine360 gives you a powerful, easy-to-set-up system that lets you focus on delivering great food while we handle the operations.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Setup Time", value: "90%", desc: "Get your system running instantly for any event." },
|
||||
{ label: "Improved Order Efficiency", value: "40%", desc: "Handle high volumes smoothly during peak hours." },
|
||||
{ label: "Cloud-Based Flexibility", value: "100%", desc: "Operate from anywhere with complete control." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
POP-UP PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Flexible Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Pop-up restaurants require quick setup and smooth execution. Dine360 ensures your operations run seamlessly from start to finish.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Quick Setup & Launch</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Start accepting orders within minutes — no complex setup required.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Order Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders move instantly from customers to preparation.</p>
|
||||
</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="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" />
|
||||
</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">Efficient Event Operations</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Handle busy crowds and peak hours without chaos.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Process payments quickly and reduce errors.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
POS Built for On-the-Go Restaurants
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Run your pop-up anywhere with a fast, flexible POS system.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Works on tablets and portable devices",
|
||||
"Quick order entry",
|
||||
"Accept multiple payment methods"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Orders Anywhere
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track and handle orders efficiently during events and temporary setups.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Modify orders instantly",
|
||||
"Handle dine-in and takeaway"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table Management Section (Service Management for Pop-Up) */}
|
||||
<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="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-px 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">SERVICE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Handle Event Crowds Smoothly
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Ensure fast service even during high-traffic pop-up events.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Manage customer queues", desc: "Keep the line moving during busy event hours." },
|
||||
{ title: "Track preparation time", desc: "Monitor kitchen performance in real-time." },
|
||||
{ title: "Reduce waiting time", desc: "Optimize service flow for maximum efficiency." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Quick Access
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse your menu instantly.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Easy menu updates",
|
||||
"Highlight special event menus"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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 POP-UPS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Run Multiple Pop-Up Events
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Manage multiple pop-up locations or events from one dashboard.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track performance across events",
|
||||
"Manage menus centrally",
|
||||
"Monitor 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials
|
||||
title="Testimonials"
|
||||
subtitle="What Pop-Up Restaurant Owners Say About Dine360"
|
||||
/>
|
||||
|
||||
<FAQ
|
||||
title="Answers To Common Questions"
|
||||
subtitle="Frequently Asked Questions"
|
||||
description="Everything you need to know about Dine360 for pop-up restaurants."
|
||||
questions={[
|
||||
{
|
||||
question: "Is Dine360 suitable for pop-up restaurants?",
|
||||
answer: "Yes. Dine360 is designed for flexible setups and temporary restaurant operations."
|
||||
},
|
||||
{
|
||||
question: "Can I use it for events and short-term setups?",
|
||||
answer: "Yes. The system can be set up quickly and used for any event."
|
||||
},
|
||||
{
|
||||
question: "Does it work on mobile devices?",
|
||||
answer: "Yes. Dine360 works on tablets, POS systems, and desktops."
|
||||
},
|
||||
{
|
||||
question: "Can I track sales for each event?",
|
||||
answer: "Yes. You can monitor sales and performance for every pop-up location."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopUpPage
|
||||
517
src/app/restaurant-types/pub/page.tsx
Normal file
517
src/app/restaurant-types/pub/page.tsx
Normal file
@ -0,0 +1,517 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const PubPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${20 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-500" />
|
||||
PUBS & BARS
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Run Your <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Pub & Bar Operations Smarter</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Manage drink orders, tables, and fast-paced service with a system built for pubs and bars. Dine360 helps you handle orders, track sales, manage tables, and keep service running smoothly — even during the busiest nights.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</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="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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR PUBS & BARS</span>
|
||||
<div className="h-px w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Pub Operations with <br className="hidden md:block" />
|
||||
<span className="text-red-600">Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Pubs and bars experience fast-paced environments where quick service and accurate billing are essential. Dine360 helps pub owners manage orders, track drinks and food sales, monitor tables, and deliver a smooth customer experience.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Faster Order Processing", value: "85%", desc: "Serve customers quickly during busy evenings." },
|
||||
{ label: "Higher Sales Efficiency", value: "30%", desc: "Improve service speed and customer turnover." },
|
||||
{ label: "Secure Payment Processing", value: "100%", desc: "Reliable and safe transactions for every bill." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
PUB PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Night Service Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Pub environments require fast order processing and efficient service flow. Dine360 ensures orders move instantly from staff to the bar or kitchen.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</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">Quick Drink Order Processing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Process drink and food orders quickly during peak hours.</p>
|
||||
</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="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" />
|
||||
</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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Smooth Bar & Kitchen Coordination</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are instantly routed to the bar counter or kitchen.</p>
|
||||
</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="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" />
|
||||
</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 Table Service</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Staff can manage multiple tables efficiently without delays.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Automated order tracking reduces billing mistakes and speeds up checkouts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Built for Busy Pub Nights
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle drink and food orders quickly with a POS system designed for nightlife venues.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast order entry for drinks and food",
|
||||
"Accept cash, card, and digital payments",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Keep Orders Flowing Smoothly
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Track every order from the bar or kitchen to the table without any hiccups.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor order status in real time",
|
||||
"Modify orders easily on the fly",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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="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-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Manage Tables Efficiently
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">
|
||||
Keep track of customer tables and improve service flow even during the rush.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Monitor Seating", desc: "Real-time table availability tracking" },
|
||||
{ title: "Manage Groups", desc: "Handle large reservations with ease" },
|
||||
{ title: "Track Orders", desc: "Follow every table order instantly" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">
|
||||
Get Started
|
||||
</Link>
|
||||
</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="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 order-1 lg:order-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px 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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Faster Ordering
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Allow customers to browse drinks and menu items easily from their own devices.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"QR code menu access",
|
||||
"Highlight drinks and specials",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-px 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 PUBS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Multiple Pub Locations
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Expand your pub business with centralized management for every branch.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Monitor sales across all locations",
|
||||
"Track performance of each pub",
|
||||
"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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<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 Management" fill className="object-cover rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQ />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PubPage
|
||||
380
src/app/restaurant-types/teppanyaki/page.tsx
Normal file
380
src/app/restaurant-types/teppanyaki/page.tsx
Normal file
@ -0,0 +1,380 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const TeppanyakiPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-zinc-900">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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">
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image src={`https://randomuser.me/api/portraits/thumb/men/${i + 50}.jpg`} alt="User" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">Join 2,460+ Restaurants</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 text-red-600 font-bold tracking-widest uppercase text-xs">
|
||||
<div className="h-px w-6 bg-red-600" />
|
||||
Power Your Teppanyaki Grill Experience
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Deliver <br />
|
||||
<span className="italic font-serif font-light text-red-600">High-Energy Dining</span>
|
||||
</h1>
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Deliver high-energy, interactive dining while managing operations seamlessly with a system built for hibachi-style restaurants. Dine360 helps you coordinate tables, chef service, and guest experience - all from one powerful platform.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-nowrap text-center">Start Today</Link>
|
||||
<Link href="/contact" className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-nowrap text-center">Book A Demo</Link>
|
||||
</div>
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-50 rounded-4xl">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16 text-zinc-900">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="flex items-center justify-center gap-2 mb-6">
|
||||
<div className="h-px w-8 bg-red-600" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs text-nowrap">BUILT FOR LIVE DINING EXPERIENCES</span>
|
||||
<div className="h-px w-8 bg-red-600" />
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-3xl md:text-5xl font-bold mb-6 leading-tight">
|
||||
Transform Your <span className="text-red-600 font-serif italic">Teppanyaki Grill</span> With Dine360 Restaurant Software
|
||||
</motion.h2>
|
||||
<p className="text-base text-zinc-600 max-w-2xl mx-auto">
|
||||
Teppanyaki restaurants offer a unique dining experience where chefs cook live at the table. Managing seating, group timing, and order coordination is essential. Dine360 helps streamline table management, group bookings, and service flow - ensuring every guest enjoys a smooth and memorable experience.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Better Table Coordination", value: "85%", desc: "Manage group seating and chef schedules efficiently." },
|
||||
{ label: "Improved Service Timing", value: "30%", desc: "Reduce delays between seating and service." },
|
||||
{ label: "Accurate Billing System", value: "100%", desc: "Handle group billing and split payments easily." }
|
||||
].map((stat, i) => (
|
||||
<motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }} className="bg-white p-8 rounded-[2.5rem] border border-zinc-100/50 text-center shadow-sm">
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
HIBACHI DINING PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
The Interactive Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Teppanyaki dining depends on timing, coordination, and guest experience. Dine360 ensures smooth communication between front-of-house and chefs.
|
||||
</motion.p>
|
||||
</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-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" />
|
||||
</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">Group Seating Management</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Organize guests into shared tables efficiently.</p>
|
||||
</div>
|
||||
</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="Service Timing" 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>
|
||||
<h3 className="text-xl font-bold text-zinc-900 mb-3">Coordinated Service Timing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Ensure chefs begin service at the right time for each table.</p>
|
||||
</div>
|
||||
</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[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">
|
||||
<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">Smooth Order Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders are managed and communicated clearly to chefs.</p>
|
||||
</div>
|
||||
</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" />
|
||||
</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 Group Billing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Split bills easily across multiple guests.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">POS SYSTEM</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">POS Built for Interactive Dining</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Handle group orders and billing effortlessly with a POS system designed for hibachi-style restaurants.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Fast group order entry", "Split billing options", "Multiple payment methods"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</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 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" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">ORDER MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Manage Orders with Precision</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Ensure every guest order is tracked and delivered perfectly.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Real-time order tracking", "Easy order modifications", "Smooth communication with chefs"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold tracking-wider uppercase text-xs">TABLE MANAGEMENT</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">Optimize Shared Seating</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed">Efficiently manage shared tables and group reservations.</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4">
|
||||
{[
|
||||
{ title: "Combine guests into shared tables", desc: "Maximize grill efficiency" },
|
||||
{ title: "Manage reservation timing", desc: "Sync with chef schedules" },
|
||||
{ title: "Optimize table turnover", desc: "Keep the dining area flowing" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-500 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all w-fit mt-4 active:scale-95 shadow-xl shadow-red-600/20">Get Started</Link>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&q=80&w=800" 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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">QR MENU</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Digital Menu for Guests</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Provide easy access to menus and combo options.</p>
|
||||
<ul className="space-y-4">
|
||||
{["QR code menu access", "Highlight set menus and combos", "Update menu instantly"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-zinc-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-0.5 w-10 bg-red-600 relative">
|
||||
<div className="absolute -right-1 -top-1 w-2 h-2 bg-red-600 rounded-full" />
|
||||
</div>
|
||||
<span className="text-red-500 font-bold tracking-wider uppercase text-xs">MULTI LOCATION RESTAURANTS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">Scale Your Teppanyaki Brand</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">Manage multiple locations while maintaining consistent service quality.</p>
|
||||
<ul className="space-y-4">
|
||||
{["Monitor performance across branches", "Manage menus centrally", "Track sales and analytics"].map((point, i) => (
|
||||
<li key={i} className="flex gap-3 items-start group">
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">Get Started</Link>
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Testimonials />
|
||||
<FAQ
|
||||
title="Common Questions"
|
||||
subtitle="Frequently Asked Questions"
|
||||
description="Everything you need to know about Dine360 for Teppanyaki or hibachi restaurants."
|
||||
questions={[
|
||||
{ question: "Is Dine360 suitable for Teppanyaki or hibachi restaurants?", answer: "Yes. Dine360 is designed to support group seating, live cooking coordination, and interactive dining experiences." },
|
||||
{ question: "Can it handle group bookings and shared tables?", answer: "Yes. The system allows easy management of shared seating and group reservations." },
|
||||
{ question: "Does it support split billing?", answer: "Yes. Bills can be split easily among multiple guests." },
|
||||
{ question: "Can I track performance and sales?", answer: "Yes. Dine360 provides real-time analytics and reporting." }
|
||||
]}
|
||||
/>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TeppanyakiPage
|
||||
551
src/app/restaurant-types/theme/page.tsx
Normal file
551
src/app/restaurant-types/theme/page.tsx
Normal file
@ -0,0 +1,551 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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",
|
||||
]
|
||||
|
||||
const ThemeRestaurantPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<main 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 */}
|
||||
<div className="flex flex-col gap-6 z-10">
|
||||
<div className="flex -space-x-2 overflow-hidden items-center mb-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-zinc-200 overflow-hidden relative">
|
||||
<Image
|
||||
src={`https://randomuser.me/api/portraits/thumb/men/${70 + i}.jpg`}
|
||||
alt="User"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="ml-3 text-zinc-600 text-xs font-medium bg-zinc-100 px-2.5 py-1 rounded-full">
|
||||
Join 2,460+ Restaurants
|
||||
</span>
|
||||
</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" />
|
||||
BRING YOUR THEME RESTAURANT TO LIFE
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-zinc-900 leading-[1.1]">
|
||||
Manage Your Theme <br />
|
||||
<span className="italic font-serif font-light text-zinc-800">Experiences Seamlessly</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-zinc-600 max-w-lg leading-relaxed">
|
||||
Create unforgettable dining experiences while managing operations with a system built for theme-based restaurants. Dine360 helps you manage orders, tables, and guest flow effortlessly.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center mt-1">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-red-600 hover:bg-red-700 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95 text-center"
|
||||
>
|
||||
Start Today
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-black hover:bg-zinc-900 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all active:scale-95 text-center"
|
||||
>
|
||||
Book A Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-zinc-100 mt-4 flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-2">Trusted by Industry Leaders</span>
|
||||
<div className="flex items-center gap-6 grayscale opacity-60">
|
||||
<span className="text-sm font-bold text-zinc-400">UberEats</span>
|
||||
<span className="text-sm font-bold text-zinc-400">DoorDash</span>
|
||||
<span className="text-sm font-bold text-zinc-400">GrubHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</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 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="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>
|
||||
<p className="text-white font-bold text-2xl">85% Improved</p>
|
||||
</div>
|
||||
</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="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>
|
||||
<p className="text-white font-bold text-2xl">+30% Higher</p>
|
||||
</div>
|
||||
</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[4]} 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>
|
||||
<p className="text-white font-bold text-2xl">100% Seamless</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<div className="text-center max-w-4xl mx-auto mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center justify-center gap-2 mb-6"
|
||||
>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
<span className="text-red-600 font-bold tracking-widest uppercase text-xs">BUILT FOR EXPERIENCE-DRIVEN DINING</span>
|
||||
<div className="h-[1px] w-8 bg-red-500" />
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-3xl md:text-5xl font-bold text-zinc-900 mb-6 leading-tight"
|
||||
>
|
||||
Transform Your Theme Restaurant <br className="hidden md:block" />
|
||||
<span className="text-red-600">With Dine360 Restaurant Software</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-base text-zinc-600 max-w-2xl mx-auto"
|
||||
>
|
||||
Theme restaurants go beyond food — they create immersive environments that transport guests into unique worlds. Dine360 helps streamline operations so your team can focus on delivering memories.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{[
|
||||
{ label: "Improved Service Flow", value: "85%", desc: "Keep operations smooth without breaking the experience." },
|
||||
{ label: "Higher Guest Satisfaction", value: "30%", desc: "Deliver consistent and engaging service." },
|
||||
{ label: "Seamless Billing Experience", value: "100%", desc: "Fast and accurate checkout for every guest." }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<p className="text-zinc-500 text-sm">{stat.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Journey Section */}
|
||||
<section className="py-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto bg-white">
|
||||
<div className="text-center mb-16">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-zinc-400 font-bold uppercase tracking-[0.2em] text-[10px] mb-3">
|
||||
EXPERIENCE PERFORMANCE
|
||||
</motion.div>
|
||||
<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl md:text-4xl font-bold text-zinc-900 mb-4 text-nowrap">
|
||||
The Immersive Dining Journey
|
||||
</motion.h2>
|
||||
<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} className="text-zinc-500 max-w-2xl mx-auto text-sm">
|
||||
Theme restaurants require perfect coordination between service and storytelling. Dine360 ensures everything runs smoothly behind the scenes.
|
||||
</motion.p>
|
||||
</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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
|
||||
<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">Smooth Order Flow</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Orders move seamlessly from table to kitchen.</p>
|
||||
</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="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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 p-6 md:px-12 relative z-10 text-nowrap">
|
||||
<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 text-nowrap">Coordinated Service Timing</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium text-nowrap">Ensure dishes arrive at the right time during the experience.</p>
|
||||
</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="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" />
|
||||
</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 text-nowrap">Enhanced Guest Experience</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Reduce delays and maintain full immersion for every guest.</p>
|
||||
</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="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" />
|
||||
</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</h3>
|
||||
<p className="text-zinc-800 text-sm leading-relaxed font-medium">Provide a smooth and professional checkout experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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]">
|
||||
<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="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">
|
||||
POS SYSTEM
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
POS Designed for Themed Dining
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Handle orders efficiently without interrupting the immersive guest experience.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Fast order entry for high guest turnover",
|
||||
"Multiple secure payment options",
|
||||
"Real-time sales tracking and reporting"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed text-nowrap">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 text-nowrap">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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={CARD_IMAGES[0]} alt="Theme POS" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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" />
|
||||
</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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Keep Orders Perfectly Timed
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Ensure every order aligns with your service flow and themed presentation.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Track order status in real time",
|
||||
"Modify orders instantly from table-side",
|
||||
"Ensure smooth coordination with the kitchen"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 text-nowrap">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Table Management 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]">
|
||||
<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="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">
|
||||
TABLE MANAGEMENT
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Manage Seating & Guest Flow
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Organize tables and reservations effectively to maximize immersion and turnover.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Real-time track table availability",
|
||||
"Manage specialized themed seating areas",
|
||||
"Handle high-volume reservations and walk-ins"
|
||||
].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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 text-nowrap">
|
||||
<Link href="/contact" className="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all shadow-lg shadow-red-600/20 active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] 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={CARD_IMAGES[3]} alt="Table Management" fill className="object-cover rounded-2xl" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Digital 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] 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="QR Menu" 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="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>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-zinc-900 leading-tight">
|
||||
Digital Menu for Modern Guests
|
||||
</h2>
|
||||
<p className="text-base text-zinc-600 leading-relaxed">
|
||||
Provide an interactive and convenient menu experience that complements your theme.
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
"Instant QR code menu access",
|
||||
"Highlight themed dishes and specials",
|
||||
"Real-time menu and price 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">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span className="text-zinc-600 text-sm leading-relaxed">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-4 text-nowrap">
|
||||
<Link href="/contact" className="inline-flex items-center bg-black hover:bg-zinc-900 text-white px-8 py-3.5 rounded-xl font-bold text-base transition-all active:scale-95">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Branch 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" />
|
||||
<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="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">MULTI LOCATION RESTAURANTS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white leading-tight">
|
||||
Expand Your Theme Concept
|
||||
</h2>
|
||||
<p className="text-base text-zinc-400 leading-relaxed text-nowrap">
|
||||
Scale your themed restaurant brand while maintaining operational consistency.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-6 mt-4 text-nowrap">
|
||||
{[
|
||||
{ title: "Central Monitoring", desc: "Monitor performance across all locations" },
|
||||
{ title: "Global Menus", desc: "Manage menus centrally for consistency" },
|
||||
{ title: "Brand Experience", desc: "Maintain consistent host experiences" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-500">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
<h4 className="text-white font-bold text-sm tracking-wide">{item.title}</h4>
|
||||
<p className="text-zinc-500 text-xs leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-6 text-nowrap">
|
||||
<Link href="/contact" className="inline-flex items-center gap-2 text-white font-bold hover:text-red-500 transition-colors group">
|
||||
Scale Your Concept <Zap className="w-4 h-4 group-hover:animate-pulse" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-[400px] w-full hidden lg:block">
|
||||
<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>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* FAQ */}
|
||||
<FAQ />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeRestaurantPage
|
||||
109
src/app/temppricing/page.tsx
Normal file
109
src/app/temppricing/page.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Check, ArrowRight } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const PricingPageVersionTwo = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#FDFCF8] text-black selection:bg-red-600 selection:text-white pt-20">
|
||||
<Navbar />
|
||||
|
||||
<main className="max-w-6xl mx-auto px-4 py-8 text-center relative overflow-hidden">
|
||||
{/* Decorative Background Text "PRICING" */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-16 select-none pointer-events-none opacity-[0.03] text-[15vw] font-black whitespace-nowrap tracking-tighter uppercase italic">
|
||||
PRICING
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="relative mb-10">
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<div className="h-[2px] w-8 bg-brand-red"></div>
|
||||
<span className="text-brand-red font-bold uppercase tracking-[0.2em] text-xs">Transparent Pricing</span>
|
||||
<div className="h-[2px] w-8 bg-brand-red"></div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-serif font-bold leading-[1.1] mb-4 tracking-tight">
|
||||
Simple Plans for<br />
|
||||
<span className="text-brand-red italic underline decoration-brand-red/20 underline-offset-8">Every Restaurant</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-500 text-base md:text-lg max-w-2xl mx-auto leading-relaxed font-medium">
|
||||
Affordable, scalable restaurant management tools designed to grow with your business — whether you run one outlet or many.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pricing Card */}
|
||||
<div className="max-w-md mx-auto mb-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-[32px] p-6 md:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100 text-left relative"
|
||||
>
|
||||
<div className="mb-8">
|
||||
<span className="text-brand-red font-bold uppercase tracking-widest text-xs mb-3 block">Starter</span>
|
||||
<h2 className="text-3xl font-serif font-bold mb-2">Single Outlet</h2>
|
||||
<p className="text-gray-500 text-sm leading-relaxed max-w-[260px]">
|
||||
Perfect for independent restaurants getting started with smart POS.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-px bg-gray-100 mb-8"></div>
|
||||
|
||||
<div className="mb-8">
|
||||
<span className="text-gray-400 font-bold uppercase tracking-[0.15em] text-[10px] mb-3 block">Starting at</span>
|
||||
<div className="flex items-start">
|
||||
<span className="text-2xl font-serif font-bold mt-1">$</span>
|
||||
<span className="text-6xl md:text-7xl font-serif font-black tracking-tighter leading-none">200</span>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium text-xs mt-3">
|
||||
per month · flat fee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4 mb-10">
|
||||
{[
|
||||
"Unlimited tablets — no extra charge",
|
||||
"Unlimited staff accounts",
|
||||
"Use your own hardware",
|
||||
"Core POS & order management"
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<div className="bg-[#FFF1F1] p-1 rounded-full">
|
||||
<Check size={12} className="text-brand-red stroke-[3]" />
|
||||
</div>
|
||||
<span className="text-gray-700 font-medium text-sm md:text-base">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<button className="w-full bg-white border-2 border-black text-black font-bold py-5 rounded-full hover:bg-black hover:text-white transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
Get Started
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Feature List Bottom */}
|
||||
<div className="max-w-4xl mx-auto flex flex-wrap justify-center items-center gap-x-8 gap-y-4">
|
||||
{[
|
||||
"No hardware costs",
|
||||
"No per-tablet fees",
|
||||
"No per-user charges",
|
||||
"Cancel anytime"
|
||||
].map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3 group">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-brand-red group-hover:scale-125 transition-transform"></div>
|
||||
<span className="text-gray-400 font-bold text-xs tracking-tight">{item}</span>
|
||||
{idx < 3 && <div className="hidden lg:block w-px h-6 bg-gray-200 ml-4"></div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingPageVersionTwo;
|
||||
359
src/app/terms/page.tsx
Normal file
359
src/app/terms/page.tsx
Normal file
@ -0,0 +1,359 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Check, X, ChevronRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
const TermsPage = () => {
|
||||
const [activeSection, setActiveSection] = useState(1);
|
||||
|
||||
const sections = [
|
||||
{ id: 1, title: '1. Definitions' },
|
||||
{ id: 2, title: '2. Acceptance' },
|
||||
{ id: 3, title: '3. Services' },
|
||||
{ id: 4, title: '4. User Responsibilities' },
|
||||
{ id: 5, title: '5. Account Security' },
|
||||
{ id: 6, title: '6. Payment' },
|
||||
{ id: 7, title: '7. Data & Privacy' },
|
||||
{ id: 8, title: '8. Third-Party' },
|
||||
{ id: 9, title: '9. Availability' },
|
||||
{ id: 10, title: '10. Intellectual Property' },
|
||||
{ id: 11, title: '11. Liability' },
|
||||
{ id: 12, title: '12. Termination' },
|
||||
{ id: 13, title: '13. Changes' },
|
||||
{ id: 14, title: '14. Governing Law' },
|
||||
{ id: 15, title: '15. Contact Us' },
|
||||
];
|
||||
|
||||
const sidebarVariants = {
|
||||
hidden: { opacity: 0, x: -20 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
|
||||
};
|
||||
|
||||
const contentVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-black font-sans">
|
||||
<Navbar />
|
||||
|
||||
<main className="container mx-auto px-6 pt-32 pb-20">
|
||||
<div className="flex flex-col lg:flex-row gap-12 max-w-7xl mx-auto">
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
<motion.aside
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={sidebarVariants}
|
||||
className="lg:w-1/4"
|
||||
>
|
||||
<div className="sticky top-32 bg-black p-8 -ml-10 mr-1 rounded-2xl shadow-xl border border-zinc-800">
|
||||
<h2 className="text-zinc-500 uppercase tracking-widest text-xs font-bold mb-6 italic">Navigation</h2>
|
||||
<ul className="space-y-4 max-h-[calc(100vh-300px)] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{sections.map((section) => (
|
||||
<li key={section.id}>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection(section.id);
|
||||
document.getElementById(`section-${section.id}`)?.scrollIntoView({ behavior: 'smooth' });
|
||||
}}
|
||||
className={`text-left w-full flex items-center gap-3 transition-colors duration-300 relative ${
|
||||
activeSection === section.id
|
||||
? 'text-white font-extrabold'
|
||||
: 'text-zinc-400 hover:text-white font-medium'
|
||||
}`}
|
||||
>
|
||||
<div className="w-1.5 h-1.5 flex-shrink-0">
|
||||
{activeSection === section.id && (
|
||||
<motion.div
|
||||
layoutId="activeIndicator"
|
||||
className="w-1.5 h-1.5 rounded-full bg-brand-red"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="truncate">
|
||||
{section.title}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.aside>
|
||||
|
||||
{/* Content Area */}
|
||||
<motion.section
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={contentVariants}
|
||||
className="lg:w-3/4 space-y-10"
|
||||
>
|
||||
<header className="space-y-3">
|
||||
<h2 className="text-zinc-500 text-lg font-medium tracking-tight">Dine 360</h2>
|
||||
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter text-black">
|
||||
Terms & <span className="text-brand-red">Conditions</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<div className="space-y-10 max-w-3xl">
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-500 font-medium text-sm">Effective Date: March 30, 2026</p>
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
Welcome to Dine360. These Terms & Conditions (“Terms”) govern your access to and use of our platform, services, and website.
|
||||
By accessing or using Dine360, you agree to comply with and be bound by these Terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 1. DEFINITIONS */}
|
||||
<div id="section-1" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
1. DEFINITIONS
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
<strong>“Dine360”</strong> refers to our restaurant management platform, including all software, services, and related features.
|
||||
</p>
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
<strong>“User” / “You”</strong> refers to any individual or business using our services.
|
||||
</p>
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
<strong>“Services”</strong> include POS, KDS, inventory, CRM, online ordering, and all features provided by Dine360.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. ACCEPTANCE OF TERMS */}
|
||||
<div id="section-2" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
2. ACCEPTANCE OF TERMS
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
By creating an account, accessing, or using Dine360, you confirm that:
|
||||
</p>
|
||||
<ul className="space-y-2 text-zinc-600 text-base list-disc pl-6">
|
||||
<li>You are legally capable of entering into a binding agreement</li>
|
||||
<li>You agree to these Terms and our Privacy Policy</li>
|
||||
<li>You will comply with all applicable laws and regulations</li>
|
||||
</ul>
|
||||
<p className="text-zinc-600 leading-relaxed text-base font-medium">
|
||||
If you do not agree, you must not use the platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. SERVICES PROVIDED */}
|
||||
<div id="section-3" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
3. SERVICES PROVIDED
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-600 leading-relaxed text-base">
|
||||
Dine360 provides restaurant management tools including but not limited to:
|
||||
</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{[
|
||||
'Point of Sale (POS)',
|
||||
'Kitchen Display System (KDS)',
|
||||
'Inventory & Purchase Management',
|
||||
'CRM & Customer Data',
|
||||
'Online Ordering & Website Integration',
|
||||
'Analytics & Business Dashboard'
|
||||
].map((service, index) => (
|
||||
<li key={index} className="flex items-center gap-3 text-zinc-600 italic text-sm">
|
||||
<Check className="text-brand-red w-5 h-5 flex-shrink-0" />
|
||||
<span>{service}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-zinc-500 text-sm italic">
|
||||
We reserve the right to modify, update, or discontinue features at any time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. USER RESPONSIBILITIES */}
|
||||
<div id="section-4" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
4. USER RESPONSIBILITIES
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>You agree to:</p>
|
||||
<ul className="space-y-2 list-disc pl-6">
|
||||
<li>Provide accurate and complete information</li>
|
||||
<li>Maintain confidentiality of your login credentials</li>
|
||||
<li>Use the platform only for lawful business purposes</li>
|
||||
<li>Not misuse, copy, or attempt to reverse engineer the software</li>
|
||||
</ul>
|
||||
<p className="font-semibold text-black">
|
||||
You are responsible for all activity under your account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 5. ACCOUNT SECURITY */}
|
||||
<div id="section-5" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
5. ACCOUNT SECURITY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>You are responsible for safeguarding your account credentials.</p>
|
||||
<p>Notify us immediately of unauthorized access.</p>
|
||||
<p className="italic text-sm">Dine360 is not liable for losses caused by unauthorized use.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6. PAYMENT & SUBSCRIPTIONS */}
|
||||
<div id="section-6" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
6. PAYMENT & SUBSCRIPTIONS
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<ul className="space-y-2 list-disc pl-6">
|
||||
<li>Dine360 may offer paid subscription plans</li>
|
||||
<li>Payments must be made as per the selected plan</li>
|
||||
<li>Failure to pay may result in suspension or termination of services</li>
|
||||
<li>All fees are non-refundable unless stated otherwise</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 7. DATA & PRIVACY */}
|
||||
<div id="section-7" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
7. DATA & PRIVACY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>You retain ownership of your business data.</p>
|
||||
<p>By using Dine360, you grant us permission to process data to provide services.</p>
|
||||
<p>We implement security measures to protect your data.</p>
|
||||
<p>Refer to our <Link href="/privacy" className="text-brand-red hover:underline">Privacy Policy</Link> for detailed information.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 8. THIRD-PARTY INTEGRATIONS */}
|
||||
<div id="section-8" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
8. THIRD-PARTY INTEGRATIONS
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>Dine360 may integrate with third-party services such as:</p>
|
||||
<ul className="space-y-2 list-disc pl-6">
|
||||
<li>Payment gateways</li>
|
||||
<li>Delivery platforms (e.g., Uber, etc.)</li>
|
||||
<li>External APIs</li>
|
||||
</ul>
|
||||
<p className="text-zinc-500 italic text-sm">We are not responsible for the performance or reliability of third-party services.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 9. SYSTEM AVAILABILITY */}
|
||||
<div id="section-9" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
9. SYSTEM AVAILABILITY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We strive to provide uninterrupted service. However, we do not guarantee 100% uptime.</p>
|
||||
<p>Maintenance, updates, or technical issues may cause temporary interruptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 10. INTELLECTUAL PROPERTY */}
|
||||
<div id="section-10" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
10. INTELLECTUAL PROPERTY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>All content, software, and technology provided by Dine360 are owned by us, including:</p>
|
||||
<ul className="grid grid-cols-2 gap-2 font-semibold text-black text-sm">
|
||||
<li>• Software code</li>
|
||||
<li>• Branding</li>
|
||||
<li>• Designs</li>
|
||||
<li>• Documentation</li>
|
||||
</ul>
|
||||
<p className="italic text-sm">You may not copy, reproduce, or distribute any part without permission.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 11. LIMITATION OF LIABILITY */}
|
||||
<div id="section-11" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
11. LIMITATION OF LIABILITY
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>To the fullest extent permitted by law:</p>
|
||||
<ul className="space-y-2 list-disc pl-6 font-medium text-sm">
|
||||
<li>Dine360 is not liable for indirect or consequential damages</li>
|
||||
<li>We are not responsible for loss of profits, data, or business interruption</li>
|
||||
<li>Our total liability is limited to the amount paid by you for our services</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 12. TERMINATION */}
|
||||
<div id="section-12" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
12. TERMINATION
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We reserve the right to:</p>
|
||||
<ul className="space-y-2 list-disc pl-6">
|
||||
<li>Suspend or terminate your account for violation of these Terms</li>
|
||||
<li>Restrict access without prior notice</li>
|
||||
</ul>
|
||||
<p>You may terminate your account at any time by contacting support.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 13. CHANGES TO TERMS */}
|
||||
<div id="section-13" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
13. CHANGES TO TERMS
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>We may update these Terms from time to time.</p>
|
||||
<p>Changes will be effective upon posting on our website.</p>
|
||||
<p className="font-semibold text-black italic text-sm">Continued use of the platform constitutes acceptance of updated Terms.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 14. GOVERNING LAW */}
|
||||
<div id="section-14" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
14. GOVERNING LAW
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base">
|
||||
<p>These Terms shall be governed by and interpreted in accordance with the laws of <strong>India</strong>.</p>
|
||||
<p>Any disputes will be subject to the jurisdiction of courts in <strong>Tamil Nadu, India</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 15. CONTACT US */}
|
||||
<div id="section-15" className="space-y-4 scroll-mt-32">
|
||||
<h2 className="text-2xl font-bold flex items-center gap-4 text-black border-l-4 border-brand-red pl-4">
|
||||
15. CONTACT US
|
||||
</h2>
|
||||
<div className="space-y-3 text-zinc-600 text-base bg-zinc-50 p-5 rounded-2xl border border-zinc-200">
|
||||
<p>If you have any questions about these Terms, please contact us:</p>
|
||||
<div className="space-y-1">
|
||||
<p><strong>Email:</strong> <a href="mailto:support@dine360ads.com" className="text-brand-red hover:underline">support@dine360ads.com</a></p>
|
||||
<p><strong>Website:</strong> <a href="https://dine360ads.com" target="_blank" rel="noopener noreferrer" className="text-brand-red hover:underline">https://dine360ads.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermsPage;
|
||||
BIN
src/assets/img/dine360.jpeg
Normal file
BIN
src/assets/img/dine360.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
138
src/components/ComparisonSection.tsx
Normal file
138
src/components/ComparisonSection.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Check, X, ArrowRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const ComparisonSection = () => {
|
||||
const comparisonData = [
|
||||
{
|
||||
feature: "Hardware Cost",
|
||||
dine360: "$0",
|
||||
dine360Sub: "(Use your own)",
|
||||
others: "$2,000 – $5,000",
|
||||
othersSub: ""
|
||||
},
|
||||
{
|
||||
feature: "Monthly License",
|
||||
dine360: "1 Flat Fee",
|
||||
dine360Sub: "",
|
||||
others: "$150+ / mo",
|
||||
othersSub: ""
|
||||
},
|
||||
{
|
||||
feature: "Extra Tablet Fee",
|
||||
dine360: "$0",
|
||||
dine360Sub: "",
|
||||
others: "$50 / mo per tablet",
|
||||
othersSub: ""
|
||||
},
|
||||
{
|
||||
feature: "Employee Fee",
|
||||
dine360: "$0",
|
||||
dine360Sub: "",
|
||||
others: "$20 / mo per user",
|
||||
othersSub: ""
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="comparison" className="py-12 md:py-16 bg-[#F8F9FA] overflow-hidden">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<div className="mb-10">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="h-0.5 w-6 bg-brand-red"></div>
|
||||
<span className="text-brand-red font-bold uppercase tracking-widest text-xs">Dine 360 vs. Legacy POS</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-black mb-4 leading-tight">
|
||||
Why <span className="text-brand-red italic">Dine 360</span> wins<br className="hidden sm:block" />
|
||||
every single time.
|
||||
</h2>
|
||||
<p className="text-gray-600 text-base md:text-lg max-w-xl leading-relaxed">
|
||||
No hidden fees. No hardware trap. Just one flat price that makes luxury POS vendors very uncomfortable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Table Container */}
|
||||
<div className="bg-[#1A1A1A] rounded-2xl md:rounded-[24px] overflow-hidden shadow-xl border border-white/5">
|
||||
<div className="grid grid-cols-12 relative">
|
||||
|
||||
{/* Table Header */}
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-[#e2dede]">
|
||||
<span className="text-gray-900 font-bold uppercase tracking-widest text-[10px] md:text-xs">Feature</span>
|
||||
</div>
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-brand-red text-center">
|
||||
<span className="text-white font-black uppercase tracking-widest text-[10px] md:text-sm">Dine 360</span>
|
||||
</div>
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-[#1A1A1A] text-center border-l border-white/5">
|
||||
<span className="text-gray-100 font-bold uppercase tracking-widest text-[10px] md:text-sm">Others</span>
|
||||
</div>
|
||||
|
||||
{/* Comparison Rows */}
|
||||
{comparisonData.map((item, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{/* Feature Name */}
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-white border-b border-gray-100">
|
||||
<span className="text-gray-800 font-bold text-sm md:text-base">{item.feature}</span>
|
||||
</div>
|
||||
|
||||
{/* Dine 360 Value */}
|
||||
<div className="col-span-4 p-4 md:p-6 flex flex-col items-center justify-center bg-[#FFF1F1] border-b border-brand-red/10 relative">
|
||||
<div className="bg-brand-red text-white font-bold py-1.5 px-4 rounded-full shadow-md text-sm md:text-base">
|
||||
{item.dine360}
|
||||
</div>
|
||||
{item.dine360Sub && (
|
||||
<span className="text-brand-red font-semibold text-[10px] mt-1 uppercase tracking-tight hidden md:block">{item.dine360Sub}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Others Value */}
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-white border-b border-gray-100 border-l border-gray-100 text-center">
|
||||
<div className="bg-red-50 text-brand-red/70 font-bold py-1.5 px-4 rounded-full border border-brand-red/10 text-sm md:text-base">
|
||||
{item.others}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Always Included Row */}
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center bg-[#e2dede]">
|
||||
<span className="text-gray-900 font-medium text-[10px] md:text-sm">Use your own hardware</span>
|
||||
</div>
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-brand-red text-center">
|
||||
<div className="flex items-center gap-2 text-white font-bold">
|
||||
<Check size={18} className="stroke-[3]" />
|
||||
<span className="uppercase text-[10px] md:text-xs hidden sm:inline">Always included</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-4 p-4 md:p-6 flex items-center justify-center bg-[#1A1A1A] text-center border-l border-white/5">
|
||||
<div className="flex items-center gap-2 text-gray-100 font-bold">
|
||||
<X size={18} className="stroke-[3]" />
|
||||
<span className="uppercase text-[10px] md:text-xs hidden sm:inline">Not available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Text & CTA */}
|
||||
<div className="mt-8 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<p className="text-gray-600 text-base font-medium">
|
||||
<span className="font-bold text-black uppercase">Stop overpaying.</span> Switch to Dine 360 and <br className="hidden md:block" />
|
||||
keep every dollar where it belongs.
|
||||
</p>
|
||||
<Link
|
||||
href="/temppricing"
|
||||
className="group relative inline-flex items-center gap-3 bg-brand-red text-white font-bold py-4 px-8 rounded-xl hover:bg-brand-red/90 transition-all shadow-lg overflow-hidden"
|
||||
>
|
||||
<span className="relative z-10">Get Started Free</span>
|
||||
<ArrowRight size={20} className="relative z-10 group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default ComparisonSection;
|
||||
141
src/components/ContactSection.tsx
Normal file
141
src/components/ContactSection.tsx
Normal file
@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Utensils, Play, ArrowRight } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const ContactSection = () => {
|
||||
return (
|
||||
<section className="relative w-full min-h-[600px] lg:h-[800px] bg-black overflow-hidden">
|
||||
|
||||
{/* 1. Background Image (Bartender) */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=2670&auto=format&fit=crop"
|
||||
alt="Bartender mixing drink"
|
||||
fill
|
||||
className="object-cover object-center opacity-90"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. Red Curved Background */}
|
||||
<div className="absolute top-0 left-0 h-full w-full lg:w-[65%] z-10 pointer-events-none">
|
||||
<div className="absolute inset-0 bg-[#E60023]"
|
||||
style={{
|
||||
clipPath: "ellipse(70% 100% at 15% 50%)"
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#E60023] lg:hidden block" style={{ clipPath: "none" }}></div>
|
||||
</div>
|
||||
|
||||
{/* 3. Floating Assets (Leaves/Tomatoes) */}
|
||||
<div className="absolute inset-0 z-20 pointer-events-none overflow-hidden">
|
||||
<motion.div
|
||||
animate={{ y: [0, -20, 0], rotate: [0, 10, 0] }}
|
||||
transition={{ duration: 5, repeat: Infinity }}
|
||||
className="absolute top-20 left-10 w-24 h-24"
|
||||
>
|
||||
<Image src="https://png.pngtree.com/png-vector/20230303/ourmid/pngtree-fresh-organic-basil-leaf-isolated-on-transparent-background-png-image_6630043.png" width={80} height={80} alt="Leaf" className="opacity-80" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [0, 20, 0], rotate: [0, -10, 0] }}
|
||||
transition={{ duration: 7, repeat: Infinity }}
|
||||
className="absolute bottom-40 left-10 w-20 h-20"
|
||||
>
|
||||
<Image src="https://png.pngtree.com/png-vector/20230303/ourmid/pngtree-fresh-organic-basil-leaf-isolated-on-transparent-background-png-image_6630043.png" width={60} height={60} alt="Leaf" className="opacity-80 scale-x-[-1]" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.1, 1] }}
|
||||
transition={{ duration: 4, repeat: Infinity }}
|
||||
className="absolute top-[40%] left-[5%] w-16 h-16"
|
||||
>
|
||||
<Image src="https://purepng.com/public/uploads/large/purepng.com-fresh-cherry-tomatovegetables-tomatofresh-red-cherry-tomato-941524712071z6n59.png" width={50} height={50} alt="Tomato" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 4. Content */}
|
||||
<div className="relative z-30 h-full w-full container mx-auto px-6 py-20 flex flex-col lg:flex-row items-center">
|
||||
|
||||
{/* Left: Form */}
|
||||
<div className="w-full lg:w-1/2 text-white">
|
||||
<div className="max-w-xl">
|
||||
{/* Badge */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="text-2xl">🍕</span>
|
||||
<span className="font-bold tracking-[0.2em] uppercase text-sm">Contact Us</span>
|
||||
<span className="text-2xl">🍕</span>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<h2 className="text-5xl lg:text-7xl font-bold mb-12 leading-tight">
|
||||
Meet Our <br /> Expert Chefe
|
||||
</h2>
|
||||
|
||||
{/* Form */}
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Select Date*</label>
|
||||
<input type="date" className="w-full p-4 bg-white text-gray-400 rounded-md focus:outline-none" defaultValue="dd-mm-yyyy" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Select Time*</label>
|
||||
<input type="time" className="w-full p-4 bg-white text-gray-400 rounded-md focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Type Of Service*</label>
|
||||
<input type="text" placeholder="Total Guests" className="w-full p-4 bg-white text-gray-800 rounded-md focus:outline-none" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Your Message</label>
|
||||
<textarea placeholder="Write your message here..." className="w-full p-4 bg-white text-gray-800 rounded-md focus:outline-none min-h-[150px]" />
|
||||
</div>
|
||||
|
||||
<button className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-md font-bold flex items-center gap-2 transition-all uppercase tracking-wide">
|
||||
Book A Table
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Video Badge */}
|
||||
<div className="hidden lg:flex w-1/2 justify-center items-center">
|
||||
<div className="relative w-48 h-48 group cursor-pointer">
|
||||
{/* Rotating Text Border */}
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 10, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<svg viewBox="0 0 100 100" className="w-full h-full">
|
||||
<path id="circlePath" d="M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0" fill="transparent" />
|
||||
<text className="text-[10px] fill-white font-bold uppercase tracking-[0.2em]">
|
||||
<textPath href="#circlePath">
|
||||
Play Video • Play Video • Play Video •
|
||||
</textPath>
|
||||
</text>
|
||||
</svg>
|
||||
</motion.div>
|
||||
|
||||
{/* Play Button */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-black group-hover:scale-110 transition-transform">
|
||||
<Play className="w-6 h-6 fill-black" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactSection;
|
||||
183
src/components/FAQ.tsx
Normal file
183
src/components/FAQ.tsx
Normal file
@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const faqCategories = ["General"];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
category: "General",
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, you can try Dine360 before committing."
|
||||
},
|
||||
{
|
||||
category: "General",
|
||||
question: "Is training included?",
|
||||
answer: "Yes. Our onboarding team guides you step by step."
|
||||
},
|
||||
{
|
||||
category: "General",
|
||||
question: "Does it work on tablets and desktops?",
|
||||
answer: "Yes, Dine360 works across devices."
|
||||
},
|
||||
{
|
||||
category: "General",
|
||||
question: "Is data secure?",
|
||||
answer: "Yes, all data is encrypted and cloud-backed."
|
||||
}
|
||||
];
|
||||
|
||||
const FAQItem = ({ question, answer, isOpen, onClick }: { question: string, answer: string, isOpen: boolean, onClick: () => void }) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={false}
|
||||
className={`rounded-2xl overflow-hidden mb-4 transition-all duration-300 ${
|
||||
isOpen ? 'bg-black shadow-xl' : 'bg-black/90 hover:bg-black'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="w-full flex items-center justify-between p-5 text-left"
|
||||
>
|
||||
<span
|
||||
className={`font-bold text-base md:text-lg transition-colors duration-200 ${
|
||||
isOpen ? 'text-red-500' : 'text-white'
|
||||
}`}
|
||||
>
|
||||
{question}
|
||||
</span>
|
||||
<div
|
||||
className={`p-1.5 rounded-full flex-shrink-0 ml-4 transition-all duration-300 ${
|
||||
isOpen ? 'bg-red-600 text-white' : 'bg-white/10 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{isOpen ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
>
|
||||
<div className="px-5 pb-6 text-gray-300 text-sm md:text-base leading-relaxed">
|
||||
{answer}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
interface FAQProps {
|
||||
questions?: { question: string; answer: string }[];
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const FAQ = ({ questions, title, subtitle, description }: FAQProps) => {
|
||||
// Use provided questions or fallback to static ones
|
||||
const displayFaqs = questions || faqs;
|
||||
|
||||
// Default to the first available category so content actually renders
|
||||
const [activeCategory, setActiveCategory] = useState(faqCategories[0]);
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0); // First item open by default
|
||||
|
||||
const filteredFaqs = questions
|
||||
? questions
|
||||
: (activeCategory ? faqs.filter(faq => faq.category === activeCategory) : faqs);
|
||||
|
||||
return (
|
||||
<section className="relative w-full bg-brand-cream flex flex-col items-center pb-20 lg:pb-32 pt-10">
|
||||
|
||||
{/* Top Header Section */}
|
||||
<div className="relative w-full flex flex-col items-center px-4 mb-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-10 text-center max-w-3xl mx-auto"
|
||||
>
|
||||
<motion.h3
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-600 text-4xl font-serif italic mb-4 block"
|
||||
>
|
||||
{title || "AnswersToCommonQuestions"}
|
||||
</motion.h3>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-6xl font-serif font-black text-black mt-2 mb-6 uppercase"
|
||||
>
|
||||
{subtitle || "Frequently Asked Questions"}
|
||||
</motion.h2>
|
||||
<p className="text-gray-500 text-lg md:text-xl max-w-2xl mx-auto">
|
||||
{description || "Everything you need to know about Odoo restaurant management system to get started."}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Tabs - Hidden for single category or custom questions */}
|
||||
{!questions && faqCategories.length > 1 && (
|
||||
<div className="relative z-10 flex flex-wrap justify-center gap-2 md:gap-4 px-4 mb-12">
|
||||
{faqCategories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => {
|
||||
setActiveCategory(category);
|
||||
setOpenIndex(null);
|
||||
}}
|
||||
className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 ${
|
||||
activeCategory === category
|
||||
? 'bg-red-600 text-white shadow-lg shadow-red-600/30'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* FAQ List */}
|
||||
<div className="relative z-10 w-full max-w-3xl mx-auto px-4">
|
||||
<motion.div
|
||||
layout
|
||||
className="space-y-4"
|
||||
>
|
||||
{filteredFaqs.map((faq, index) => (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.05 }}
|
||||
key={`${activeCategory}-${index}`}
|
||||
>
|
||||
<FAQItem
|
||||
question={faq.question}
|
||||
answer={faq.answer}
|
||||
isOpen={openIndex === index}
|
||||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQ;
|
||||
57
src/components/FeatureQuickNav.tsx
Normal file
57
src/components/FeatureQuickNav.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Monitor,
|
||||
BookOpen,
|
||||
ClipboardList,
|
||||
Globe,
|
||||
Users,
|
||||
QrCode,
|
||||
Tag,
|
||||
Layers
|
||||
} from 'lucide-react';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'POS', href: '/features/pos-management', 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: 'TABLES', href: '/features/table-reservation', icon: Users, color: 'bg-purple-400' },
|
||||
{ name: 'WEBSITE', href: '/features/restaurant-website', icon: Globe, color: 'bg-emerald-500' },
|
||||
{ name: 'QR CODE', href: '/features/qr-code-menu', icon: QrCode, color: 'bg-sky-500' },
|
||||
{ name: 'PROMO', href: '/features/promotion-management', icon: Tag, color: 'bg-orange-500' },
|
||||
{ name: 'STOCK', href: '/features/inventory-management', icon: Layers, color: 'bg-purple-500' },
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<span className="text-[10px] font-black tracking-widest uppercase text-zinc-400 group-hover:text-zinc-900 transition-colors">
|
||||
{item.name}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureQuickNav;
|
||||
236
src/components/FeaturesSection.tsx
Normal file
236
src/components/FeaturesSection.tsx
Normal file
@ -0,0 +1,236 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
|
||||
const features = [
|
||||
{
|
||||
category: "POS",
|
||||
title: "Smart POS System",
|
||||
description: "Running your restaurant is now easier with a multi-functional POS system. It helps you manage every part of the counter experience.",
|
||||
points: [
|
||||
"Lightning-fast billing",
|
||||
"Dine-in, takeaway & delivery support",
|
||||
"Split bills & multiple payment methods",
|
||||
"Real-time sales reports"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1556742044-3c52d6e88c62?q=80&w=2070",
|
||||
link: "/features/pos-management"
|
||||
},
|
||||
{
|
||||
category: "Order Management",
|
||||
title: "Order Management",
|
||||
description: "Ensure every order is tracked, updated, and handled swiftly. No delays. No mistakes. Just smooth operations.",
|
||||
points: [
|
||||
"Track all orders in one dashboard",
|
||||
"Kitchen display integration",
|
||||
"Reduce human errors",
|
||||
"Improve preparation time"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?q=80&w=2070",
|
||||
link: "/features/order-management"
|
||||
},
|
||||
{
|
||||
category: "Table & Reservation",
|
||||
title: "Table & Reservation Management",
|
||||
description: "Take charge of your floor’s seating and reservations with a smart, easy-to-use system that saves time and increases efficiency.",
|
||||
points: [
|
||||
"Digital table layout",
|
||||
"Pre-booking system",
|
||||
"Walk-in management",
|
||||
"Reduce waiting chaos"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2070",
|
||||
link: "/features/table-reservation"
|
||||
},
|
||||
{
|
||||
category: "QR Code Menu",
|
||||
title: "QR Code Menu",
|
||||
description: "Simplify your ordering process and watch your sales grow with our effective QR code menu features.",
|
||||
points: [
|
||||
"Contactless digital menu",
|
||||
"Easy updates",
|
||||
"No reprinting costs",
|
||||
"Faster ordering experience"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1513151233558-d860c5398176?q=80&w=2144",
|
||||
link: "/features/qr-code-menu"
|
||||
},
|
||||
{
|
||||
category: "Inventory Management",
|
||||
title: "Inventory Management",
|
||||
description: "Maximize efficiency with a system that simplifies the complexities of inventory management.",
|
||||
points: [
|
||||
"Real-time stock tracking",
|
||||
"Low-stock alerts",
|
||||
"Ingredient-level tracking",
|
||||
"Reduce wastage & theft"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=2074",
|
||||
link: "/features/inventory-management"
|
||||
},
|
||||
{
|
||||
category: "Multi-Branch Control",
|
||||
title: "Multi-Branch Control",
|
||||
description: "Manage your restaurant empire from a single location with centralized branch management tools.",
|
||||
points: [
|
||||
"Manage multiple outlets from one dashboard",
|
||||
"Centralized reporting",
|
||||
"Branch performance comparison"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1546241072-48010ad2862c?q=80&w=1974",
|
||||
link: "/features/multi-menu-management"
|
||||
},
|
||||
{
|
||||
category: "Promotions",
|
||||
title: "Marketing & Promotions",
|
||||
description: "Boost your sales with targeted marketing campaigns and automated promotional tools designed for restaurants.",
|
||||
points: [
|
||||
"Create custom discount codes",
|
||||
"Schedule happy hour deals",
|
||||
"Automated SMS/Email marketing",
|
||||
"Track campaign performance"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=2074",
|
||||
link: "/features/promotions"
|
||||
},
|
||||
{
|
||||
category: "Website & Ordering",
|
||||
title: "Website & Online Ordering",
|
||||
description: "Take direct orders from your own branded website and reduce dependency on expensive third-party apps.",
|
||||
points: [
|
||||
"Custom branded restaurant website",
|
||||
"Direct commission-free ordering",
|
||||
"Real-time menu sync",
|
||||
"Mobile-optimized experience"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072",
|
||||
link: "/features/restaurant-website"
|
||||
},
|
||||
{
|
||||
category: "Business Dashboard",
|
||||
title: "Advanced Business Dashboard",
|
||||
description: "Make data-driven decisions with a comprehensive dashboard that gives you a 360-degree view of your business.",
|
||||
points: [
|
||||
"Real-time revenue tracking",
|
||||
"Sales trends & analytics",
|
||||
"Staff performance metrics",
|
||||
"Exportable financial reports"
|
||||
],
|
||||
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2026",
|
||||
link: "/features/business-dashboard"
|
||||
}
|
||||
];
|
||||
|
||||
const FeaturesSection = () => {
|
||||
return (
|
||||
<section id="features" className="py-24 px-6 bg-white relative overflow-hidden">
|
||||
{/* Decorative Background Elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-10">
|
||||
<div className="absolute top-20 left-10 w-64 h-64 bg-red-600/10 blur-[100px] rounded-full"></div>
|
||||
<div className="absolute bottom-20 right-10 w-96 h-96 bg-red-800/10 blur-[120px] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto relative z-10">
|
||||
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-20 max-w-5xl mx-auto"
|
||||
>
|
||||
<span className="text-red-500 font-script text-3xl md:text-4xl mb-4 block italic">The Complete Restaurant Toolkit</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-black mb-4 leading-tight uppercase">
|
||||
Reimagine Restaurant Management
|
||||
</h2>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-extrabold text-red-600 mb-8 leading-tight uppercase">
|
||||
with Powerful Features
|
||||
</h2>
|
||||
<p className="text-gray-600 text-lg md:text-xl max-w-3xl mx-auto">
|
||||
Our restaurant management platform offers powerful tools to automate operations, improve workflows, and ensure a better dining experience for your customers.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="flex flex-col gap-24">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className={`flex flex-col lg:flex-row items-center gap-10 ${index % 2 !== 0 ? 'lg:flex-row-reverse' : ''}`}
|
||||
>
|
||||
|
||||
{/* Image Side */}
|
||||
<div className="w-full lg:w-1/2 relative group">
|
||||
<div className="absolute -inset-6 bg-red-600/10 rounded-[4rem] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||
<div className="relative h-[450px] w-full rounded-[4rem] rounded-tr-2xl rounded-bl-2xl overflow-hidden border-2 border-zinc-200 bg-white shadow-xl transition-all duration-500 group-hover:shadow-2xl group-hover:-translate-y-2">
|
||||
{/* Placeholder image overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent z-10"></div>
|
||||
<Image
|
||||
src={feature.image}
|
||||
alt={feature.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Corner Decorations */}
|
||||
<div className="absolute top-4 left-4 z-20">
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{[...Array(9)].map((_, i) => (
|
||||
<div key={i} className="w-1 h-1 bg-white/50 rounded-full"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text Side */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="bg-zinc-50 border border-zinc-100 p-8 md:p-12 rounded-3xl hover:border-red-600/30 transition-colors duration-300">
|
||||
<span className="text-red-600 font-bold tracking-wider text-sm uppercase mb-3 block">{feature.category}</span>
|
||||
<h3 className="text-3xl font-bold text-zinc-900 mb-4">
|
||||
{feature.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600 mb-8 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
{feature.points.map((point, i) => (
|
||||
<motion.li
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 + (i * 0.1) }}
|
||||
key={i}
|
||||
className="flex items-start gap-3 group/item"
|
||||
>
|
||||
<span className="mt-1.5 w-2 h-2 rounded-full bg-red-600 group-hover/item:scale-150 transition-transform"></span>
|
||||
<span className="text-gray-700 text-sm md:text-base">{point}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link href={feature.link} className="inline-block bg-red-600 text-white px-8 py-3 rounded-full font-bold hover:bg-red-700 transition-all shadow-lg shadow-red-600/20 transform hover:-translate-y-1">
|
||||
Get Started Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesSection;
|
||||
317
src/components/Footer.tsx
Normal file
317
src/components/Footer.tsx
Normal file
@ -0,0 +1,317 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
MapPin, Mail, Phone, Facebook, Instagram, Linkedin, Youtube,
|
||||
ChevronsRight, ArrowRight, ArrowUp
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Footer = () => {
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { x: -20, opacity: 0 },
|
||||
visible: {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
transition: { duration: 0.5 }
|
||||
}
|
||||
};
|
||||
|
||||
const links = [
|
||||
{ name: "About Us", href: "/about" },
|
||||
{ name: "Pricing", href: "/temppricing" },
|
||||
{ name: "Our Blogs", href: "/blog" },
|
||||
{ name: "FAQ'S", href: "/faq" },
|
||||
{ name: "Contact Us", href: "/contact" }
|
||||
];
|
||||
|
||||
const featureLinks = [
|
||||
{ name: "Kitchen Management", href: "/features/kitchen-management" },
|
||||
{ name: "Table Reservation", href: "/features/table-reservation" },
|
||||
{ name: "CRM", href: "/features/loyalty-management" },
|
||||
{ name: "Sales", href: "/features/order-management" },
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
const restaurantTypeLinks = [
|
||||
{ name: "Fine Dining", href: "/restaurant-types/fine-dining" },
|
||||
{ name: "Casual Dining", href: "/restaurant-types/casual-dining" },
|
||||
{ name: "Fast Casual Restaurant", href: "/restaurant-types/fast-casual" },
|
||||
{ name: "Ghost Restaurant", href: "/restaurant-types/ghost-kitchen" },
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="relative bg-black pt-40 md:pt-24 pb-0 mt-20 md:mt-0 text-white overflow-visible">
|
||||
|
||||
{/* Floating Info Section (Brand Red Bar) */}
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-6xl z-40">
|
||||
<div className="bg-brand-red rounded-xl p-8 md:px-12 shadow-2xl flex flex-col md:flex-row justify-between items-center gap-6 relative overflow-hidden">
|
||||
{/* Texture/Pattern Overlay */}
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none"
|
||||
style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '20px 20px' }} />
|
||||
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center text-brand-red shrink-0">
|
||||
<MapPin size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-bold uppercase text-sm mb-1 text-black/80">Address</h5>
|
||||
<p className="font-semibold text-black text-sm leading-tight">Dine360 Headquarters, Toronto,<br/>Ontario, Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center text-brand-red shrink-0">
|
||||
<Mail size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-bold uppercase text-sm mb-1 text-black/80">Email Us</h5>
|
||||
<p className="font-semibold text-black text-sm leading-tight">
|
||||
sales@dine360ads.com<br/>
|
||||
support@dine360ads.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center text-brand-red shrink-0">
|
||||
<Phone size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-bold uppercase text-sm mb-1 text-black/80">Sales & Support</h5>
|
||||
<p className="font-semibold text-black text-sm leading-tight">
|
||||
+1 647 360-2507
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Decor */}
|
||||
<div className="absolute top-40 left-0 w-64 h-64 pointer-events-none opacity-40 mix-blend-overlay">
|
||||
{/* <Image src="https://cdn-icons-png.flaticon.com/512/753/753839.png" width={300} height={300} alt="Lettuce" className="rotate-45" /> */}
|
||||
</div>
|
||||
<div className="absolute top-20 right-0 w-48 h-48 pointer-events-none opacity-20">
|
||||
{/* <Image src="https://images.unsplash.com/photo-1543353071-10c8ba85a904?q=80&w=1000&auto=format&fit=crop" width={200} height={200} alt="Ingredients" className="object-contain" /> */}
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 pt-16 pb-24 relative z-10">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12"
|
||||
>
|
||||
{/* Column 1: Brand */}
|
||||
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-4">
|
||||
<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>
|
||||
<div className="h-1.5 w-20 bg-brand-red mt-2"></div>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-gray-400 text-base leading-relaxed max-w-sm">
|
||||
Proudly serving independent restaurants in Toronto (GTA), Hamilton, and Kitchener-Waterloo. Providing comprehensive solutions for the modern restaurant industry.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ Icon: Facebook, href: "#" },
|
||||
{ Icon: Instagram, href: "https://www.instagram.com/dine360.ca/" },
|
||||
{ Icon: Linkedin, href: "https://www.linkedin.com/company/dine-360/" },
|
||||
{ Icon: Youtube, href: "#" }
|
||||
].map((social, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 bg-white/10 hover:bg-brand-red transition-all duration-300 rounded-lg flex items-center justify-center text-white hover:-translate-y-1"
|
||||
>
|
||||
<social.Icon size={18} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Column 2: Quick Links */}
|
||||
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-2">
|
||||
<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>
|
||||
</div>
|
||||
<ul className="space-y-4 pt-4">
|
||||
{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" />
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Column 3: Features */}
|
||||
<motion.div variants={itemVariants} className="space-y-6 lg:col-span-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>
|
||||
</motion.div>
|
||||
|
||||
</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>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<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
|
||||
</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>
|
||||
<Link href="/privacy" className="text-white hover:bg-black bg-brand-red transition-all text-sm px-6 py-2.5 mr-15 font-bold rounded-lg shadow-sm border-1 border-white">Privacy Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back to Top Button */}
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 right-8 bg-brand-red p-3 rounded-full shadow-lg z-50 hover:bg-brand-red/90 transition-transform hover:-translate-y-1 animate-bounce"
|
||||
aria-label="Back to top"
|
||||
>
|
||||
<ArrowUp size={24} className="text-white" />
|
||||
</button>
|
||||
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
128
src/components/HeroSection.tsx
Normal file
128
src/components/HeroSection.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
const slides = [
|
||||
{
|
||||
tag: "Trusted by Growing Restaurants & Food Brands",
|
||||
title: "Run Your Entire Restaurant\nFrom One Smart System",
|
||||
description: "POS, Orders, Reservations, QR Menu, Inventory & Multi-Branch Control — All in One Powerful Platform Built for Modern Restaurants.",
|
||||
image: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=2070"
|
||||
},
|
||||
{
|
||||
tag: "Next-Gen Analytics",
|
||||
title: "The Local POS\nThat Saves You 50%.",
|
||||
description: "No per-tablet fees. No per-employee fees. Use the hardware you already own.",
|
||||
image: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2070"
|
||||
},
|
||||
{
|
||||
tag: "Seamless Integration",
|
||||
title: "Operations Mastered\nIn One Dashboard",
|
||||
description: "Connect your kitchen, floor, and online presence. Real-time syncing ensures your business never misses a beat.",
|
||||
image: "https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=2070"
|
||||
}
|
||||
];
|
||||
|
||||
const HeroSection = () => {
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrent((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[100vh] lg:min-h-screen flex flex-col items-center justify-center pt-32 pb-24 px-6 overflow-hidden bg-black text-white">
|
||||
{/* Background Images with Fade Transition (Crossfade) */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
key={`bg-${current}`}
|
||||
initial={{ opacity: 0, scale: 1.1 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 1.5, ease: "easeOut" }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/65 z-10" />
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url('${slides[current].image}')` }}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto w-full px-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.4fr,0.6fr] gap-12 items-center">
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={`content-${current}`}
|
||||
initial={{ x: -40, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: 40, opacity: 0 }}
|
||||
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="flex flex-col items-start"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="bg-red-600/10 border border-red-600/30 text-red-500 px-4 py-1.5 rounded-full text-xs md:text-sm font-bold tracking-widest uppercase mb-8 backdrop-blur-sm"
|
||||
>
|
||||
{slides[current].tag}
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter mb-8 leading-[1.05] uppercase whitespace-pre-line">
|
||||
{slides[current].title}
|
||||
</h1>
|
||||
|
||||
<p className="max-w-2xl text-lg md:text-xl text-gray-300 mb-12 leading-relaxed font-medium">
|
||||
{slides[current].description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-start gap-6 w-full">
|
||||
<button className="w-full sm:w-auto bg-red-600 text-white px-10 py-4 rounded-full font-black text-lg hover:bg-red-700 transition-all shadow-[0_0_30px_rgba(220,38,38,0.4)] hover:scale-105 active:scale-95">
|
||||
Get My 60-Second Audit
|
||||
</button>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=hipB2vhwj_Y"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full sm:w-auto flex items-center justify-center gap-3 border-2 border-white/20 text-white px-10 py-4 rounded-full font-black text-lg hover:bg-white hover:text-black transition-all duration-500 ease-in-out hover:scale-105 active:scale-95 bg-white/5 backdrop-blur-sm"
|
||||
>
|
||||
<div className="w-6 h-6 bg-red-600 rounded-full flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
||||
</div>
|
||||
WATCH VIDEO
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
{/* Right side empty as requested */}
|
||||
<div className="hidden lg:block"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide Indicators (Aligned to the left of the max-w-7xl content) */}
|
||||
<div className="absolute bottom-12 left-0 w-full z-20">
|
||||
<div className="max-w-7xl mx-auto px-10 flex gap-3">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrent(index)}
|
||||
className={`h-1.5 transition-all duration-500 rounded-full ${current === index ? 'w-16 bg-red-600' : 'w-8 bg-white/20 hover:bg-white/40'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
140
src/components/HighlightsSection.tsx
Normal file
140
src/components/HighlightsSection.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const HighlightsSection = () => {
|
||||
const highlights = [
|
||||
{
|
||||
title: "24/7 Dedicated Support",
|
||||
description: "Our team is always available to help you resolve any issues instantly, day or night."
|
||||
},
|
||||
{
|
||||
title: "Easy Setup & Training",
|
||||
description: "Get up and running in hours, not weeks. We provide hands-on training for your entire staff."
|
||||
},
|
||||
{
|
||||
title: "Secure Cloud Storage",
|
||||
description: "Your data is protected with bank-level encryption and automatically backed up in real-time."
|
||||
},
|
||||
{
|
||||
title: "Regular Feature Updates",
|
||||
description: "Stay ahead of the competition with constant improvements and new features added monthly."
|
||||
},
|
||||
{
|
||||
title: "Transparent Pricing",
|
||||
description: "No complex tiers. One simple price for all the features you need to grow your business."
|
||||
},
|
||||
{
|
||||
title: "No Hidden Fees",
|
||||
description: "Experience total peace of mind with zero setup costs, zero maintenance fees, and no surprises."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-black py-10 lg:py-16 px-6 overflow-hidden relative">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
|
||||
|
||||
{/* Left Column: Phone Mockup */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8, x: -50 }}
|
||||
whileInView={{ opacity: 1, scale: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
className="relative flex justify-center lg:justify-end lg:-translate-x-32 order-last lg:order-first transition-transform duration-500"
|
||||
>
|
||||
{/* Main Phone Frame */}
|
||||
<div className="relative w-[300px] h-[600px] bg-black border-[14px] border-gray-800 rounded-[3rem] shadow-2xl overflow-hidden ring-1 ring-gray-700/50">
|
||||
{/* Screen Content */}
|
||||
<div className="absolute inset-0 bg-gray-900">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1000"
|
||||
alt="App Interface"
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
/>
|
||||
|
||||
{/* Overlay UI Mockup Elements */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex flex-col justify-end p-6">
|
||||
<motion.div
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.5 }}
|
||||
className="bg-white/10 backdrop-blur-md p-4 rounded-xl border border-white/10 mb-4"
|
||||
>
|
||||
<div className="h-2 w-20 bg-red-600 rounded mb-2"></div>
|
||||
<div className="h-2 w-32 bg-gray-400/50 rounded"></div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ y: 20, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.7, duration: 0.5 }}
|
||||
className="bg-white/10 backdrop-blur-md p-4 rounded-xl border border-white/10"
|
||||
>
|
||||
<div className="h-2 w-16 bg-red-600 rounded mb-2"></div>
|
||||
<div className="h-2 w-24 bg-gray-400/50 rounded"></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notch / Camera / Home Button Details */}
|
||||
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-6 bg-gray-800 rounded-b-xl z-20"></div>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements behind phone */}
|
||||
<div className="absolute -z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-red-600/20 rounded-full blur-[100px]"></div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Column: Text Content */}
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-red-600 font-bold tracking-wide uppercase text-sm md:text-base mb-4"
|
||||
>
|
||||
Why Choose Dine360?
|
||||
</motion.h2>
|
||||
<motion.h3
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-1.5xl md:text-5xl font-bold text-white mb-12"
|
||||
>
|
||||
We don’t just give software. <br/> We give operational control.
|
||||
</motion.h3>
|
||||
|
||||
<div className="space-y-8 w-full">
|
||||
{highlights.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 + (index * 0.1) }}
|
||||
className="flex gap-6 group"
|
||||
>
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-10 h-10 rounded-full border border-red-600 flex items-center justify-center text-red-600 font-bold group-hover:bg-red-600 group-hover:text-white transition-all duration-300 shadow-[0_0_15px_rgba(220,38,38,0.3)]">
|
||||
{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h4 className="text-xl font-bold text-white mb-2 group-hover:text-red-500 transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-400 leading-relaxed text-sm md:text-base">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HighlightsSection;
|
||||
113
src/components/MarketValuationSection.tsx
Normal file
113
src/components/MarketValuationSection.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { TrendingUp, Target, BarChart3, Globe2 } from 'lucide-react';
|
||||
|
||||
const MarketValuationSection = () => {
|
||||
return (
|
||||
<section className="py-24 px-6 lg:px-8 bg-zinc-50 border-y border-zinc-100">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
{/* Header Area */}
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-end justify-between gap-8 mb-16">
|
||||
<div className="max-w-3xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-rose-600 font-bold tracking-[0.2em] uppercase text-xs mb-4 flex items-center gap-3">
|
||||
<span className="w-10 h-[1px] bg-rose-600"></span>
|
||||
MARKET VALUATION SECTION
|
||||
</h2>
|
||||
<h3 className="text-4xl lg:text-5xl font-black text-zinc-900 tracking-tight leading-none mb-8">
|
||||
DATA DRIVEN INSIGHTS
|
||||
</h3>
|
||||
<p className="text-zinc-800 text-lg leading-relaxed max-w-2xl">
|
||||
The restaurant industry is rapidly evolving with the adoption of digital tools and automation.
|
||||
Restaurants worldwide are investing in smart management systems to improve efficiency,
|
||||
reduce operational complexity, and deliver better customer experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="hidden lg:block bg-white p-6 rounded-2xl border border-zinc-200 shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Globe2 className="text-rose-600 w-5 h-5" />
|
||||
<span className="font-bold text-xl text-zinc-900">2026 OUTLOOK</span>
|
||||
</div>
|
||||
<p className="text-zinc-400 text-[10px] uppercase tracking-widest font-bold">Industry Evolution</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Content Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
{/* Item 1 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="group p-10 rounded-3xl bg-white border-2 border-zinc-200 hover:border-rose-400 transition-all duration-300"
|
||||
>
|
||||
<div className="w-12 h-12 bg-rose-50 rounded-xl flex items-center justify-center mb-8 group-hover:bg-rose-600 transition-colors">
|
||||
<TrendingUp className="w-6 h-6 text-rose-600 group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-zinc-900 mb-4">Market Growth</h4>
|
||||
<p className="text-zinc-800 leading-relaxed text-sm">
|
||||
Dine360 is positioned at the center of this transformation — providing modern restaurant management solutions designed for the next generation of dining businesses.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Item 2 - Featured */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="p-10 rounded-3xl bg-zinc-900 text-white shadow-2xl border-2 border-rose-500/30 relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10">
|
||||
<BarChart3 className="w-24 h-24" />
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-rose-600 rounded-xl flex items-center justify-center mb-8">
|
||||
<BarChart3 className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold mb-4">Adaptation</h4>
|
||||
<p className="text-zinc-100 leading-relaxed text-sm">
|
||||
Our platform helps restaurants adapt to changing customer expectations while maintaining operational control and scalability.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Item 3 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="group p-10 rounded-3xl bg-white border-2 border-zinc-200 hover:border-rose-400 transition-all duration-300"
|
||||
>
|
||||
<div className="w-12 h-12 bg-rose-50 rounded-xl flex items-center justify-center mb-8 group-hover:bg-rose-600 transition-colors">
|
||||
<Target className="w-6 h-6 text-rose-600 group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-zinc-900 mb-4">Scalability</h4>
|
||||
<p className="text-zinc-800 leading-relaxed text-sm">
|
||||
Maintain full control over your operations as you scale, using data-driven insights to optimize every aspect of your restaurant.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketValuationSection;
|
||||
370
src/components/Navbar.tsx
Normal file
370
src/components/Navbar.tsx
Normal file
@ -0,0 +1,370 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Logo from '@/assets/img/dine360.jpeg';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Monitor,
|
||||
BookOpen,
|
||||
ClipboardList,
|
||||
Globe,
|
||||
Users,
|
||||
QrCode,
|
||||
Tag,
|
||||
Layers,
|
||||
ChevronDown,
|
||||
ArrowRight,
|
||||
Utensils,
|
||||
Coffee,
|
||||
Truck,
|
||||
Smartphone,
|
||||
ChefHat,
|
||||
FileText,
|
||||
Info,
|
||||
HelpCircle,
|
||||
Phone,
|
||||
Menu,
|
||||
X,
|
||||
Plus,
|
||||
Minus,
|
||||
LayoutDashboard,
|
||||
Megaphone,
|
||||
Layout,
|
||||
MessageSquare,
|
||||
Network,
|
||||
CreditCard
|
||||
} from 'lucide-react';
|
||||
|
||||
const Navbar = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [activeAccordion, setActiveAccordion] = useState<string | null>(null);
|
||||
|
||||
const scrollToComparison = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
// If we're not on the home page, let the default Link behavior handle the navigation
|
||||
if (window.location.pathname !== '/') {
|
||||
setIsMobileMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
const element = document.getElementById('comparison');
|
||||
if (element) {
|
||||
const offset = 80; // Navbar height
|
||||
const bodyRect = document.body.getBoundingClientRect().top;
|
||||
const elementRect = element.getBoundingClientRect().top;
|
||||
const elementPosition = elementRect - bodyRect;
|
||||
const offsetPosition = elementPosition - offset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
setIsMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
const featureItems = [
|
||||
{ name: 'Kitchen Management', href: '/features/kitchen-management', icon: Monitor },
|
||||
{ name: 'Table Reservation', href: '/features/table-reservation', icon: Users },
|
||||
{ name: 'CRM', href: '/features/loyalty-management', icon: Users },
|
||||
{ name: 'Sales', href: '/features/order-management', icon: ClipboardList },
|
||||
{ name: 'Inventory', href: '/features/inventory-management', icon: Layers },
|
||||
{ name: 'Purchase', href: '/features/promotion-management', icon: Tag },
|
||||
{ name: 'Uber Integration', href: '/features/uber-integration', icon: Globe },
|
||||
{ name: 'Invoicing', href: '/features/invoicing', icon: FileText },
|
||||
{ name: 'POS', href: '/features/pos', icon: CreditCard },
|
||||
{ name: 'Promotions', href: '/features/promotions', icon: Megaphone },
|
||||
{ name: 'Website & Online Ordering', href: '/features/restaurant-website', icon: Layout },
|
||||
{ name: 'Business Dashboard', href: '/features/business-dashboard', icon: LayoutDashboard },
|
||||
{ name: 'Multi-Branch Management', href: '/features/multi-menu-management', icon: Network },
|
||||
{ name: 'Team Communication', href: '/features/team-communication', icon: MessageSquare },
|
||||
];
|
||||
|
||||
const restaurantTypes = [
|
||||
{ name: 'Fine Dining', href: '/restaurant-types/fine-dining', icon: Utensils },
|
||||
{ name: 'Casual Dining', href: '/restaurant-types/casual-dining', icon: Utensils },
|
||||
{ name: 'Fast Casual Restaurant', href: '/restaurant-types/fast-casual', icon: Utensils },
|
||||
{ name: 'Ghost Restaurant', href: '/restaurant-types/ghost-kitchen', icon: Smartphone },
|
||||
{ name: 'Family Style Restaurant', href: '/restaurant-types/family-style', icon: Users },
|
||||
{ name: 'Fast Food Restaurant', href: '/restaurant-types/fast-food', icon: Utensils },
|
||||
{ name: 'Food Truck, Cart, or Stand', href: '/restaurant-types/food-truck', icon: Truck },
|
||||
{ name: 'Cafe', href: '/restaurant-types/cafe-bistro', icon: Coffee },
|
||||
{ name: 'Buffet Restaurant', href: '/restaurant-types/buffet', icon: Utensils },
|
||||
{ name: 'Pub', href: '/restaurant-types/pub', icon: Coffee },
|
||||
{ name: 'Cafeteria', href: '/restaurant-types/cafeteria', icon: Utensils },
|
||||
{ name: 'Coffee House', href: '/restaurant-types/coffee-house', icon: Coffee },
|
||||
{ name: 'Diner', href: '/restaurant-types/diner', icon: Utensils },
|
||||
{ name: 'Pop-Up Restaurant', href: '/restaurant-types/pop-up', icon: Utensils },
|
||||
{ name: 'Contemporary Casual Restaurant', href: '/restaurant-types/contemporary-casual', icon: Utensils },
|
||||
{ name: 'Bistro', href: '/restaurant-types/bistro', icon: Coffee },
|
||||
{ name: 'Destination Restaurant', href: '/restaurant-types/destination', icon: Globe },
|
||||
{ name: 'Teppanyaki Grill', href: '/restaurant-types/teppanyaki', icon: Utensils },
|
||||
{ name: 'Mongolian Barbecue', href: '/restaurant-types/mongolian-bbq', icon: Utensils },
|
||||
{ name: 'Concession Stand', href: '/restaurant-types/concession', icon: Utensils },
|
||||
{ name: 'Digital-Only Restaurant', href: '/restaurant-types/digital-only', icon: Smartphone },
|
||||
{ name: 'Theme Restaurant', href: '/restaurant-types/theme', icon: Utensils },
|
||||
{ name: 'Bakery', href: '/restaurant-types/bakery', icon: Coffee },
|
||||
{ name: 'Delivery-Only Restaurant', href: '/restaurant-types/delivery-only', icon: Truck },
|
||||
];
|
||||
|
||||
const resourceItems = [
|
||||
{ name: 'Blog', href: '/blog', icon: FileText },
|
||||
{ name: 'About Us', href: '/about', icon: Info },
|
||||
{ name: 'FAQ', href: '/faq', icon: HelpCircle },
|
||||
{ name: 'Contact Us', href: '/contact', icon: Phone },
|
||||
];
|
||||
|
||||
// Lock body scroll when mobile menu is open
|
||||
useEffect(() => {
|
||||
if (isMobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
}, [isMobileMenuOpen]);
|
||||
|
||||
const toggleAccordion = (name: string) => {
|
||||
setActiveAccordion(activeAccordion === name ? null : name);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.nav
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-4 bg-white border-b border-zinc-100 shadow-sm backdrop-blur-lg"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/" className="pl-5 flex items-center gap-2">
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="Dine360 Logo"
|
||||
width={120}
|
||||
height={40}
|
||||
className="h-10 w-auto"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-10 text-base font-medium text-zinc-700">
|
||||
<Link href="/" className="hover:text-red-500 transition-colors">Home</Link>
|
||||
<div className="relative group py-4">
|
||||
<Link href="/features" className="hover:text-red-500 transition-colors flex items-center gap-1">
|
||||
Features
|
||||
<ChevronDown className="w-4 h-4 transition-transform group-hover:rotate-180" />
|
||||
</Link>
|
||||
|
||||
<div className="absolute top-full left-1/2 -translate-x-[42%] pt-2 hidden group-hover:block w-[1200px]">
|
||||
<div className="bg-white rounded-2xl shadow-2xl border border-zinc-100 overflow-hidden px-8 py-6 grid grid-cols-4 gap-x-6 gap-y-1">
|
||||
<div className="space-y-1">
|
||||
{featureItems.slice(0, 4).map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between p-3.5 rounded-xl hover:bg-zinc-100 transition-all group/item border border-transparent hover:border-zinc-200"
|
||||
>
|
||||
<div className="flex items-center gap-3.5 overflow-hidden">
|
||||
<span className="text-red-600 bg-red-50 w-9 h-9 flex items-center justify-center rounded-lg group-hover/item:bg-red-600 group-hover/item:text-white transition-all shadow-sm">
|
||||
<item.icon className="w-4.5 h-4.5" />
|
||||
</span>
|
||||
<span className="font-semibold text-zinc-800 text-sm">{item.name}</span>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-zinc-400 opacity-0 group-hover/item:opacity-100 transition-all -translate-x-2 group-hover/item:translate-x-0 shrink-0" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{featureItems.slice(4, 8).map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between p-3.5 rounded-xl hover:bg-zinc-100 transition-all group/item border border-transparent hover:border-zinc-200"
|
||||
>
|
||||
<div className="flex items-center gap-3.5 overflow-hidden">
|
||||
<span className="text-red-600 bg-red-50 w-9 h-9 flex items-center justify-center rounded-lg group-hover/item:bg-red-600 group-hover/item:text-white transition-all shadow-sm">
|
||||
<item.icon className="w-4.5 h-4.5" />
|
||||
</span>
|
||||
<span className="font-semibold text-zinc-800 text-sm">{item.name}</span>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-zinc-400 opacity-0 group-hover/item:opacity-100 transition-all -translate-x-2 group-hover/item:translate-x-0 shrink-0" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{featureItems.slice(8, 12).map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between p-3.5 rounded-xl hover:bg-zinc-100 transition-all group/item border border-transparent hover:border-zinc-200"
|
||||
>
|
||||
<div className="flex items-center gap-3.5 overflow-hidden">
|
||||
<span className="text-red-600 bg-red-50 w-9 h-9 flex items-center justify-center rounded-lg group-hover/item:bg-red-600 group-hover/item:text-white transition-all shadow-sm">
|
||||
<item.icon className="w-4.5 h-4.5" />
|
||||
</span>
|
||||
<span className="font-semibold text-zinc-800 text-sm">{item.name}</span>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-zinc-400 opacity-0 group-hover/item:opacity-100 transition-all -translate-x-2 group-hover/item:translate-x-0 shrink-0" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{featureItems.slice(12, 14).map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center justify-between p-3.5 rounded-xl hover:bg-zinc-100 transition-all group/item border border-transparent hover:border-zinc-200"
|
||||
>
|
||||
<div className="flex items-center gap-3.5 overflow-hidden">
|
||||
<span className="text-red-600 bg-red-50 w-9 h-9 flex items-center justify-center rounded-lg group-hover/item:bg-red-600 group-hover/item:text-white transition-all shadow-sm">
|
||||
<item.icon className="w-4.5 h-4.5" />
|
||||
</span>
|
||||
<span className="font-semibold text-zinc-800 text-sm">{item.name}</span>
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-zinc-400 opacity-0 group-hover/item:opacity-100 transition-all -translate-x-2 group-hover/item:translate-x-0 shrink-0" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-span-4 mt-4 pt-4 border-t border-zinc-100 flex justify-center">
|
||||
<Link
|
||||
href="/features"
|
||||
className="flex items-center gap-2 px-8 py-3 rounded-xl bg-red-50 hover:bg-red-100 text-red-700 transition-colors group/view-all font-semibold text-sm"
|
||||
>
|
||||
View All Features
|
||||
<ArrowRight className="w-5 h-5 transition-transform group-hover/view-all:translate-x-1" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href="/temppricing" className="hover:text-red-500 transition-colors">Pricing</Link>
|
||||
<Link
|
||||
href="/#comparison"
|
||||
onClick={scrollToComparison}
|
||||
className="hover:text-red-500 transition-colors"
|
||||
>
|
||||
Comparison
|
||||
</Link>
|
||||
<Link href="/contact" className="hover:text-red-500 transition-colors">Contact</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 px-0 md:px-5">
|
||||
<Link href="/contact" className="hidden sm:block bg-red-600 text-white px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-red-700 transition-colors font-bold shadow-lg shadow-red-600/20 text-xs md:text-sm">
|
||||
Start Now
|
||||
</Link>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden p-2 text-zinc-600 hover:text-red-600 transition-colors"
|
||||
>
|
||||
{isMobileMenuOpen ? <X className="w-7 h-7" /> : <Menu className="w-7 h-7" />}
|
||||
</button>
|
||||
</div>
|
||||
</motion.nav>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[70] md:hidden"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: '100%' }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: '100%' }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 bottom-0 w-[85%] max-w-[400px] bg-white z-[80] md:hidden shadow-2xl flex flex-col"
|
||||
>
|
||||
<div className="p-6 flex items-center justify-between border-b border-zinc-100">
|
||||
<Image src={Logo} alt="Logo" width={100} height={30} className="h-8 w-auto" />
|
||||
<button onClick={() => setIsMobileMenuOpen(false)} className="p-2 text-zinc-500">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-2">
|
||||
<Link href="/" onClick={() => setIsMobileMenuOpen(false)} className="block py-3 text-lg font-bold text-zinc-800 border-b border-zinc-50">Home</Link>
|
||||
{/* Features Mobile Accordion */}
|
||||
<div className="py-3 border-b border-zinc-50">
|
||||
<button
|
||||
onClick={() => toggleAccordion('features')}
|
||||
className="flex items-center justify-between w-full text-lg font-bold text-zinc-800"
|
||||
>
|
||||
Features
|
||||
<ChevronDown className={`w-5 h-5 transition-transform ${activeAccordion === 'features' ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{activeAccordion === 'features' && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-2 pt-4">
|
||||
{featureItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="flex items-center gap-3 p-3 rounded-lg hover:bg-zinc-50 transition-colors"
|
||||
>
|
||||
<span className="text-red-600 bg-red-50 p-2 rounded-md">
|
||||
<item.icon className="w-4 h-4" />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-zinc-700">{item.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/features"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-red-50 text-red-700 hover:bg-red-100 transition-colors font-semibold text-sm mt-2"
|
||||
>
|
||||
View All Features
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<Link href="/temppricing" onClick={() => setIsMobileMenuOpen(false)} className="block py-3 text-lg font-bold text-zinc-800 border-b border-zinc-50">Pricing</Link>
|
||||
<Link
|
||||
href="/#comparison"
|
||||
onClick={scrollToComparison}
|
||||
className="block py-3 text-lg font-bold text-zinc-800 border-b border-zinc-50"
|
||||
>
|
||||
Comparison
|
||||
</Link>
|
||||
<Link href="/contact" onClick={() => setIsMobileMenuOpen(false)} className="block py-3 text-lg font-bold text-zinc-800 border-b border-zinc-50">Contact</Link>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<Link
|
||||
href="/contact"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block w-full text-center bg-red-600 text-white py-4 rounded-xl font-bold shadow-lg shadow-red-600/30"
|
||||
>
|
||||
Start Now
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
213
src/components/Testimonials.tsx
Normal file
213
src/components/Testimonials.tsx
Normal file
@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import { ArrowLeft, ArrowRight, Star, Quote } from 'lucide-react';
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Rajesh Kumar",
|
||||
role: "Owner, Urban Bites – Chennai",
|
||||
quote: "“Peak hours used to feel chaotic. With Dine360, billing is faster, kitchen sync is smooth, and we’ve reduced order mistakes drastically. It’s like having full control over the entire floor.”",
|
||||
rating: 5,
|
||||
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Emily Carter",
|
||||
role: "Founder, Brew & Bean Café",
|
||||
quote: "“We switched from spreadsheets and manual tracking to Dine360. Now inventory, sales, and reservations are all connected. It saves us hours every week and gives us clear performance insights.”",
|
||||
rating: 5,
|
||||
avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Michael Tan",
|
||||
role: "Operations Head, Spice Route Group (3 Branches)",
|
||||
quote: "“Managing multiple outlets was stressful before. With centralized reporting and branch-wise dashboards, we finally have clarity. Dine360 made scaling much easier.”",
|
||||
rating: 5,
|
||||
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=200&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Anita Sharma",
|
||||
role: "Owner, Sweet Cravings Bakery",
|
||||
quote: "“The inventory tracking feature alone paid for itself. We’ve cut down wastage and improved stock planning significantly. It’s simple, reliable, and built for real restaurant challenges.”",
|
||||
rating: 5,
|
||||
avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "David Morales",
|
||||
role: "Founder, QuickBite Food Truck",
|
||||
quote: "“Running a mobile operation needs speed and flexibility. Dine360 works perfectly on tablets and keeps everything synced — even when we’re on the move.”",
|
||||
rating: 5,
|
||||
avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop"
|
||||
}
|
||||
];
|
||||
|
||||
interface TestimonialsProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
const Testimonials = ({ title, subtitle }: TestimonialsProps) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
// Auto-slide functionality
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
handleNext();
|
||||
}, 5000); // Change every 5 seconds
|
||||
return () => clearInterval(timer);
|
||||
}, [currentIndex]);
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentIndex((prev) => (prev + 1) % testimonials.length);
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative w-full bg-brand-cream py-32 lg:py-32 overflow-hidden flex items-center justify-center text-black">
|
||||
|
||||
{/* Background Paper Texture Overlay (Optional) */}
|
||||
<div className="absolute inset-0 opacity-40 mix-blend-multiply z-0 pointer-events-none" />
|
||||
|
||||
<div className="container mx-auto px-6 max-w-7xl relative z-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
{/* Left Column: Chef Image */}
|
||||
<div className="relative flex justify-center lg:justify-start">
|
||||
{/* Pattern */}
|
||||
<div className="absolute top-20 right-10 grid grid-cols-5 gap-2 opacity-30 text-black">
|
||||
{[...Array(20)].map((_, i) => <span key={i} className="text-xs">+</span>)}
|
||||
</div>
|
||||
|
||||
{/* Main Image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative w-[300px] md:w-[450px] h-[400px] md:h-[600px] z-10"
|
||||
>
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?q=80&w=1000&auto=format&fit=crop"
|
||||
alt="Happy Chef"
|
||||
fill
|
||||
className="object-cover rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating Tomatoes Bottom Left */}
|
||||
{/* <motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute bottom-0 left-0 w-32 h-32 md:w-48 md:h-48 z-20"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1592924357228-91a4daadcfea?q=80&w=600&auto=format&fit=crop"
|
||||
alt="Tomatoes"
|
||||
className="object-contain w-full h-full rounded-full border-4 border-white shadow-lg"
|
||||
/>
|
||||
</motion.div> */}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Right Column: Content */}
|
||||
<div className="relative space-y-8">
|
||||
|
||||
{/* Header */}
|
||||
<div>
|
||||
<motion.h3
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-brand-red text-4xl font-serif italic"
|
||||
>
|
||||
{title || "Testimonials"}
|
||||
</motion.h3>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl md:text-5xl font-serif font-black text-black mt-2"
|
||||
>
|
||||
{subtitle || "What Clients Say About Dine360"}
|
||||
</motion.h2>
|
||||
</div>
|
||||
|
||||
{/* Quote Icon */}
|
||||
<div className="w-16 h-16 rounded-full bg-brand-red flex items-center justify-center text-white text-3xl font-serif mt-6 shadow-lg shadow-brand-red/30">
|
||||
<Quote className="w-8 h-8 fill-current" />
|
||||
</div>
|
||||
|
||||
{/* Animated Testimonial Content */}
|
||||
<div className="h-[250px] md:h-[200px] relative">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<p className="text-gray-600 text-lg leading-relaxed italic mb-8">
|
||||
"{testimonials[currentIndex].quote}"
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-brand-red">
|
||||
<Image
|
||||
src={testimonials[currentIndex].avatar}
|
||||
alt={testimonials[currentIndex].name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex gap-1 text-brand-red mb-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${i < testimonials[currentIndex].rating ? 'fill-current' : 'text-gray-300'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<h4 className="font-bold text-black text-lg">{testimonials[currentIndex].name}</h4>
|
||||
<span className="text-sm text-gray-500">{testimonials[currentIndex].role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<div className="flex gap-4 mt-8">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center text-black hover:bg-black hover:text-white hover:border-black transition-all"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center text-black hover:bg-black hover:text-white hover:border-black transition-all"
|
||||
>
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
68
src/components/VideoSection.tsx
Normal file
68
src/components/VideoSection.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const VideoSection = () => {
|
||||
return (
|
||||
<section className="py-24 bg-black relative overflow-hidden px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-3xl md:text-5xl font-bold text-white mb-4 uppercase"
|
||||
>
|
||||
See It In Action
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-gray-400 max-w-2xl mx-auto text-lg"
|
||||
>
|
||||
Discover how Odoo Restaurant management system can transform your business operations and elevate customer experience.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative group cursor-pointer rounded-3xl overflow-hidden border border-white/10 shadow-2xl bg-gray-900 aspect-video"
|
||||
>
|
||||
{/* Continuous Loop Side (Muted) */}
|
||||
<iframe
|
||||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||
src="https://www.youtube.com/embed/hipB2vhwj_Y?autoplay=1&mute=1&loop=1&playlist=hipB2vhwj_Y&controls=0&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3&disablekb=1"
|
||||
title="Restaurant Management Advertisement"
|
||||
allow="autoplay; encrypted-media"
|
||||
style={{ border: 0 }}
|
||||
></iframe>
|
||||
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition-all duration-500 z-10" />
|
||||
|
||||
{/* Centered Watch Button on Hover */}
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-500 z-20 scale-90 group-hover:scale-100">
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=hipB2vhwj_Y"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group/btn flex items-center flex-col gap-4"
|
||||
>
|
||||
<div className="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center text-white shadow-2xl shadow-red-600/40 group-hover/btn:bg-red-700 transition-all">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
|
||||
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-white font-bold tracking-widest text-lg uppercase">Watch Full Movie</span>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoSection;
|
||||
34
tsconfig.json
Normal file
34
tsconfig.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user