☕ منوی دیجیتال کافه

یک اپلیکیشن منوی موبایل‌محور برای کافه‌ها، ساخته‌شده با React + TypeScript + Tailwind CSS.

---

📸 ویژگی‌ها

• موبایل‌محور — طراحی شده برای نمایش روی گوشی
• RTL کامل — پشتیبانی کامل از زبان فارسی و چیدمان راست‌به‌چپ
• فونت Dana — فونت فارسی حرفه‌ای با تمام وزن‌ها
• سبد خرید — افزودن، کم کردن و حذف آیتم با انیمیشن
• جستجو و فیلتر — جستجوی real-time و فیلتر بر اساس دسته‌بندی
• بازه ساعتی هوشمند — وضعیت باز/بسته بودن کافه به‌صورت خودکار بر اساس ساعت واقعی
• هدر sticky — کارت اطلاعات کافه هنگام اسکرول به بالای صفحه فیکس می‌شود
• اعداد فارسی — تمام اعداد به‌صورت خودکار فارسی نمایش داده می‌شوند
• نوتیفیکیشن — toast های زیبا با آیکون‌های لوسید هنگام افزودن/حذف آیتم
• نقشه — نمایش موقعیت کافه با OpenStreetMap
• انیمیشن — انیمیشن‌های روان با Framer Motion

---

🗂️ ساختار پروژه

src/
├── main.tsx                  ← نقطه ورود
├── App.tsx                   ← کامپوننت ریشه + تنظیمات Toast
│
├── types/
│   └── index.ts              ← تایپ‌های TypeScript
│
├── data/
│   └── cafeData.ts           ← ✏️ تمام دیتای قابل ویرایش اینجاست
│
├── utils/
│   ├── helpers.ts            ← تبدیل اعداد فارسی، بررسی ساعت، فرمت قیمت
│   └── toastHelpers.tsx      ← توابع نمایش نوتیفیکیشن
│
├── pages/
│   └── MenuPage.tsx          ← صفحه اصلی منو
│
└── components/
    ├── CafeInfoCard.tsx      ← کارت اطلاعات کافه (sticky)
    ├── CategoryFilter.tsx    ← فیلتر دسته‌بندی با fade
    ├── MenuItemCard.tsx      ← کارت هر آیتم منو
    ├── CartDrawer.tsx        ← bottom sheet سبد خرید
    ├── FloatingCartButton.tsx ← دکمه شناور سبد
    ├── AboutSection.tsx      ← بخش درباره ما، نقشه، شبکه‌های اجتماعی
    └── BadgeChip.tsx         ← تگ پرفروش/جدید/ویژه

---

⚙️ نصب و راه‌اندازی

پیش‌نیاز: Node.js نسخه ۱۸ یا بالاتر

# ۱. نصب وابستگی‌ها
npm install

# ۲. اجرای محیط توسعه
npm run dev

# ۳. بیلد برای پروداکشن
npm run build

---

📦 وابستگی‌های اصلی

پکیج	نسخه	کاربرد
react	^18	فریم‌ورک اصلی
framer-motion	^11	انیمیشن‌ها
react-hot-toast	^2.4	نوتیفیکیشن
lucide-react	^0.447	آیکون‌ها
tailwindcss	^3.4	استایل‌دهی

---

✏️ راهنمای سفارشی‌سازی

تمام تنظیمات کافه در یک فایل متمرکز شده‌اند:

src/data/cafeData.ts

اطلاعات کافه:

export const CAFE_INFO = {
  name: "نام کافه",
  tagline: "توضیح کوتاه...",
  address: "آدرس",
  openHours: { from: 16, to: 22 }, // ساعت باز بودن (۰ تا ۲۳)
  phone: "شماره تماس",
  socials: {
    whatsapp: "https://wa.me/...",
    instagram: "https://instagram.com/...",
    telegram: "https://t.me/...",
  },
  mapEmbed: "لینک embed نقشه OpenStreetMap",
  heroImage: "لینک تصویر هدر",
  hiringBanner: true, // نمایش/مخفی کردن بنر استخدام
};

افزودن آیتم جدید به منو:

{
  id: 11,                            // شناسه یکتا
  category: "نوشیدنی سرد",           // باید با یکی از CATEGORIES مطابقت داشته باشد
  name: "نام آیتم",
  description: "توضیحات...",
  price: 150,                        // قیمت به هزار تومان
  image: "لینک تصویر",
  badge: "جدید",                     // یا null برای بدون تگ
  addons: ["افزودنی ۱ +۱۰", "افزودنی ۲ +۲۰"],
}

تگ‌های موجود برای badge: "پرفروش" | "جدید" | "ویژه" | "پرطرفدار" | null

افزودن دسته‌بندی جدید:

export const CATEGORIES = [
  "همه",
  "نوشیدنی سرد",
  "نوشیدنی گرم",
  "شیرینی‌ها",
  "ساندویچ",
  "دسته جدید", // ← اینجا اضافه کنید
];

---

🗺️ دریافت لینک نقشه

۱. به openstreetmap.org بروید
۲. موقعیت کافه را پیدا کنید
۳. از منوی Share گزینه HTML را انتخاب کنید
۴. لینک src تگ <iframe> را در mapEmbed قرار دهید

---

🎨 رنگ‌بندی

رنگ اصلی پروژه قابل تغییر است. عبارت #2d6a4f را در فایل‌های کامپوننت با رنگ دلخواه جایگزین کنید:

متغیر	مقدار	کاربرد
رنگ اصلی	#2d6a4f	دکمه‌ها، بوردرها، قیمت
رنگ تیره	#1b4332	hover دکمه‌ها
رنگ کارت	#1b2a1e	کارت اطلاعات کافه

---

📱 فونت Dana

فایل‌های فونت باید در مسیر زیر قرار داشته باشند:

src/assets/fonts/Dana/
├── Dana-Hairline.ttf
├── Dana-Thin.ttf
├── Dana-UltraLight.ttf
├── Dana-Light.ttf
├── Dana-Regular.ttf
├── Dana-Medium.ttf
├── Dana-DemiBold.ttf
├── Dana-Bold.ttf
└── Dana-ExtraBold.ttf

---