عمل موقع هويه بصريه لشركه AL-Bar

مشروع واجهة ويب حديث مبني باستخدام React + TypeScript + Vite، ومجهّز كقالب قوي لعرض منتجات شركة بنظام SPA. التصميم نظيف وسريع، مع اعتماد Tailwind CSS بإعدادات مخصصة ودعم أنيميشنات خفيفة.

المشروع جاهز تمامًا للتطوير أو التخصيص، وقابل للتوسّع لأي موقع شركة أو منتج.

التقنيات المستخدمة

Vite للتطوير والبناء (dev / build / preview)

React + TypeScript

Tailwind CSS + إضافات (tailwindcss-animate)

shadcn/ui مع Radix UI

react-query لإدارة البيانات

react-hook-form + zod للتحقق من النماذج

إعدادات مطور جاهزة: ESLint, إعداد TypeScript نظيف، React SWC plugin

الصفحات الجاهزة

داخل src/pages:

الصفحة الرئيسية

المنتجات

معرض الصور

من نحن

تواصل معنا

تسجيل الدخول

صفحة الخطأ 404

المكوّنات الجاهزة

المشروع يحتوي مكتبة UI كاملة داخل src/components/ui تشمل:

Buttons – Dialogs – Toasts – Tooltips – Dropdown menus – Carousel – Tables – Forms – Pagination – Sidebar – Tabs – Avatar – Badge – Calendar…

مبنية على Radix UI ومتوافقة بالكامل مع Tailwind، مع دعم كامل لخصائص الوصول (Accessibility).

ميزات التفاعل وتجربة المستخدم

Toasts و Dialogs ومكونات تفاعلية جاهزة

Carousel بـ embla-carousel

حقول OTP

Date Picker

Charts بـ Recharts

Panels قابلة للسحب وتغيير الحجم

دعم Dark Mode

Skeletons وحالات تحميل جاهزة

مميزات قوية

بنية TypeScript منظمة وقابلة للتوسّع.

مكونات تفاعلية متقدمة جاهزة للاستخدام.

سهولة إضافة صفحات جديدة أو تخصيص التصميم.