168 lines
9.8 KiB
TypeScript
168 lines
9.8 KiB
TypeScript
import Head from 'next/head';
|
||
import Link from 'next/link';
|
||
import type { ReactElement } from 'react';
|
||
import React from 'react';
|
||
|
||
import BaseButton from '../components/BaseButton';
|
||
import CardBox from '../components/CardBox';
|
||
import LayoutGuest from '../layouts/Guest';
|
||
import { getPageTitle } from '../config';
|
||
|
||
const highlights = [
|
||
{
|
||
title: 'كاشير سريع',
|
||
text: 'بحث فوري عن المنتجات، إضافة للفاتورة بضغطة واحدة، وحساب مباشر للإجمالي.',
|
||
},
|
||
{
|
||
title: 'تسعير حسب الدولار',
|
||
text: 'حفظ سعر الدولار اليومي وتطبيق تحديث جماعي على أسعار البيع مع إمكانية الرجوع.',
|
||
},
|
||
{
|
||
title: 'تقارير يومية',
|
||
text: 'متابعة مبيعات اليوم، الأرباح، وعدد الفواتير مع تفاصيل واضحة لكل فاتورة.',
|
||
},
|
||
];
|
||
|
||
const quickLinks = [
|
||
{ href: '/login', label: 'تسجيل الدخول' },
|
||
{ href: '/dashboard', label: 'واجهة الإدارة' },
|
||
{ href: '/cashier', label: 'شاشة الكاشير' },
|
||
{ href: '/products/products-list', label: 'المنتجات' },
|
||
];
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>{getPageTitle('نظام إدارة محل منظفات')}</title>
|
||
</Head>
|
||
<div className="app-rtl min-h-screen bg-[radial-gradient(circle_at_top,_rgba(16,185,129,0.16),_transparent_32%),radial-gradient(circle_at_bottom_left,_rgba(14,165,233,0.16),_transparent_28%),linear-gradient(180deg,#f8fafc_0%,#ffffff_65%)]" dir="rtl">
|
||
<header className="sticky top-0 z-20 border-b border-white/70 bg-white/80 backdrop-blur-xl">
|
||
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-4">
|
||
<div>
|
||
<div className="text-xl font-extrabold text-slate-900">منظفات برو</div>
|
||
<div className="text-sm text-slate-500">منصة عربية حديثة لإدارة المبيعات والمخزون</div>
|
||
</div>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
{quickLinks.map((link) => (
|
||
<Link
|
||
key={link.href}
|
||
href={link.href}
|
||
className="rounded-full px-4 py-2 text-sm font-bold text-slate-700 transition hover:bg-slate-100 hover:text-emerald-700"
|
||
>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="mx-auto flex max-w-7xl flex-col gap-10 px-6 py-10 lg:py-16">
|
||
<section className="grid gap-8 lg:grid-cols-[1.1fr,0.9fr] lg:items-center">
|
||
<div className="space-y-6">
|
||
<span className="inline-flex rounded-full border border-emerald-100 bg-emerald-50 px-4 py-2 text-sm font-bold text-emerald-700">
|
||
موقع تعريفي + نظام كاشير عربي متعدد العملاء
|
||
</span>
|
||
<div className="space-y-4">
|
||
<h1 className="text-4xl font-extrabold leading-tight text-slate-950 lg:text-6xl">
|
||
إدارة مبيعات محل المنظفات بشكل أسرع وأوضح وأجمل
|
||
</h1>
|
||
<p className="max-w-2xl text-lg leading-8 text-slate-600">
|
||
واجهة عربية بالكامل، تصميم مريح للعين، شاشة كاشير مناسبة للمحل التجاري، وتسعير ذكي حسب الدولار مع تقارير يومية وأرباح دقيقة.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<BaseButton href="/login" color="success" label="ابدأ من لوحة الإدارة" className="!px-6 !py-3 text-base font-bold" />
|
||
<BaseButton href="/cashier" color="info" label="جرّب شاشة الكاشير" className="!px-6 !py-3 text-base font-bold" />
|
||
</div>
|
||
<div className="grid gap-4 sm:grid-cols-3">
|
||
<div className="rounded-3xl border border-white bg-white/90 p-5 shadow-lg shadow-emerald-100/70">
|
||
<div className="text-sm font-bold text-slate-500">اللغة والاتجاه</div>
|
||
<div className="mt-2 text-2xl font-extrabold text-slate-900">عربي + RTL</div>
|
||
</div>
|
||
<div className="rounded-3xl border border-white bg-white/90 p-5 shadow-lg shadow-sky-100/70">
|
||
<div className="text-sm font-bold text-slate-500">التوسع</div>
|
||
<div className="mt-2 text-2xl font-extrabold text-slate-900">+200 منتج</div>
|
||
</div>
|
||
<div className="rounded-3xl border border-white bg-white/90 p-5 shadow-lg shadow-slate-100/80">
|
||
<div className="text-sm font-bold text-slate-500">المستخدمون</div>
|
||
<div className="mt-2 text-2xl font-extrabold text-slate-900">عدة عملاء</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CardBox className="border-0 bg-slate-950 text-white shadow-2xl shadow-sky-100/60">
|
||
<div className="space-y-5 p-2">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="text-sm font-bold text-slate-400">المشهد الأول في النظام</div>
|
||
<div className="mt-1 text-2xl font-extrabold">شاشة كاشير عصرية للمحل</div>
|
||
</div>
|
||
<span className="rounded-full bg-white/10 px-3 py-1 text-xs font-bold text-sky-200">MVP جاهز</span>
|
||
</div>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<div className="rounded-3xl bg-white/5 p-4 ring-1 ring-white/10">
|
||
<div className="text-sm text-slate-400">بحث فوري</div>
|
||
<div className="mt-2 text-lg font-bold">اقتراحات مباشرة بدون إعادة تحميل</div>
|
||
</div>
|
||
<div className="rounded-3xl bg-white/5 p-4 ring-1 ring-white/10">
|
||
<div className="text-sm text-slate-400">فاتورة سريعة</div>
|
||
<div className="mt-2 text-lg font-bold">إجمالي وربح وعدد قطع في نفس اللحظة</div>
|
||
</div>
|
||
<div className="rounded-3xl bg-white/5 p-4 ring-1 ring-white/10">
|
||
<div className="text-sm text-slate-400">سعر الدولار</div>
|
||
<div className="mt-2 text-lg font-bold">حفظ السعر اليومي + تطبيق جماعي + استرجاع</div>
|
||
</div>
|
||
<div className="rounded-3xl bg-white/5 p-4 ring-1 ring-white/10">
|
||
<div className="text-sm text-slate-400">تقارير اليوم</div>
|
||
<div className="mt-2 text-lg font-bold">مبيعات وأرباح وفواتير اليوم من نفس الشاشة</div>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-[28px] bg-gradient-to-l from-emerald-500 to-sky-500 p-5 text-slate-950">
|
||
<div className="text-sm font-bold">الوصول السريع</div>
|
||
<div className="mt-2 text-2xl font-extrabold">لوحة الإدارة ما زالت متاحة بالكامل</div>
|
||
<p className="mt-2 text-sm leading-7 text-slate-900/80">
|
||
من هنا يمكنك دخول الواجهة الإدارية الحالية لإدارة المنتجات، الأقسام، المحلات، الفواتير، والمستخدمين بدون حذف أي شيء من البنية الجاهزة.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardBox>
|
||
</section>
|
||
|
||
<section className="grid gap-4 lg:grid-cols-3">
|
||
{highlights.map((item) => (
|
||
<CardBox key={item.title} className="border-0 bg-white/90 shadow-lg shadow-slate-100/80">
|
||
<div className="space-y-3">
|
||
<div className="inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">ميزة أساسية</div>
|
||
<h2 className="text-2xl font-extrabold text-slate-900">{item.title}</h2>
|
||
<p className="leading-8 text-slate-600">{item.text}</p>
|
||
</div>
|
||
</CardBox>
|
||
))}
|
||
</section>
|
||
|
||
<section className="rounded-[32px] border border-slate-100 bg-white/90 p-8 shadow-xl shadow-slate-100/80">
|
||
<div className="grid gap-6 lg:grid-cols-[1fr,auto] lg:items-center">
|
||
<div>
|
||
<div className="text-sm font-bold text-emerald-600">ماذا ستجد الآن؟</div>
|
||
<h2 className="mt-2 text-3xl font-extrabold text-slate-950">أول شريحة MVP تعمل من البداية للنهاية</h2>
|
||
<p className="mt-3 max-w-3xl text-lg leading-8 text-slate-600">
|
||
صفحة عامة جميلة، رابط مباشر للوحة الإدارة، وشاشة كاشير عربية تجمع البيع السريع مع تقرير اليوم وأدوات تحديث الأسعار حسب الدولار.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
<BaseButton href="/dashboard" color="info" label="فتح واجهة الإدارة" className="!px-6 !py-3 text-base font-bold" />
|
||
<BaseButton href="/sales_invoices/sales_invoices-list" color="success" label="عرض الفواتير" className="!px-6 !py-3 text-base font-bold" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
HomePage.getLayout = function getLayout(page: ReactElement) {
|
||
return <LayoutGuest>{page}</LayoutGuest>;
|
||
};
|