معرفی قالب Novira
Novira چیست؟
Novira (نوویرا) یک قالب فرانتاند استاتیک برای فروشگاه اینترنتی است. تمام صفحات با HTML، CSS و JavaScript ساخته شدهاند و بدون سرور بکاند یا دیتابیس قابل اجرا هستند.
قالب برای زبان فارسی و چیدمان RTL (راستبهچپ) طراحی شده و شامل صفحات اصلی فروشگاه، سوپرمارکت آنلاین، پوشاک، فرایند خرید، پنل کاربری، بلاگ و احراز هویت است.
دو نسخه از یک قالب
بسته Novira شامل دو پیادهسازی از یک طراحی است:
| نسخه | توضیح |
|---|---|
| HTML | فایلهای آماده HTML، CSS و JS با Alpine.js؛ بدون npm و بدون مرحله بیلد. کافی است روی هاست کپی شوند. |
| Next.js | همان قالب بهصورت اپلیکیشن React با App Router و TypeScript؛ آماده اتصال به API واقعی. |
ظاهر، رنگها و صفحات هر دو نسخه یکسان است و فایلهای novira-*.css بین آنها مشترکاند. تفاوت در ساختار پروژه و روش اجراست.
فصلهای ۱ تا ۱۲ نسخه HTML را توضیح میدهند. برای نسخه Next.js به فصل ۱۳ و فصل ۱۴ بروید.
برای چه کسانی مناسب است؟
- طراحان و توسعهدهندگان فرانتاند که به یک UI آماده نیاز دارند
- آژانسهایی که قالب را بهعنوان پایه پروژه مشتری استفاده میکنند
- تیمهایی که قصد تبدیل UI به WordPress، Laravel، React یا هر CMS/فریمورک دیگری را دارند
- کسبوکارهایی که ابتدا یک دمو یا لندینگ میخواهند و بعداً بکاند اضافه میکنند
آنچه در بسته قالب هست
| بخش | توضیح |
|---|---|
| ۳۳+ صفحه HTML | فروشگاه، خرید، پروفایل، بلاگ، FAQ، ورود و ... |
| ۱۴ فایل CSS | استایل پایه و ماژولهای صفحه (novira*.css) |
| ۱۴ فایل JS | هسته Alpine.js و ماژولهای صفحه (novira*.js) |
| تصاویر دمو | بنرها، محصولات، اسکرینشاتها در assets/images/ |
| اسنیپتها | قطعات HTML قابل کپی (_header-snippet.html و ...) |
| مستندات | پوشه help/ (همین مجموعه) |
| نسخه Next.js | پروژه کامل React با App Router و TypeScript |
آنچه در بسته نیست
- API یا بکاند (PHP، Node، Laravel و ...)
- دیتابیس و مدیریت محتوای واقعی
- درگاه پرداخت زنده
- احراز هویت سرور-ساید
- سیستم مدیریت سفارش واقعی
دادههای محصول، سبد خرید و کاربر در JavaScript بهصورت mock (نمونه) پیادهسازی شدهاند تا UI کامل نمایش داده شود.
ویژگیهای کلیدی UI
- هدر چندردیفه با مگامنو و جستجو
- صفحه اصلی با استوری، پیشنهاد شگفتانگیز، اسلایدر محصولات و مجله
- مارکتهای عمودی: بازار (
bazaar.html)، سوپرمارکت (fresh.html) و پوشاک (fashion.html) با تم جدا - فرایند خرید: سبد → انتخاب زمان ارسال → پرداخت
- پنل کاربری با ۹ بخش (سفارشها، پلاس، لیستها، پیامها و ...)
- ویجت پشتیبانی شناور
- صفحه FAQ با جستجو و آکوردئون
- طراحی ریسپانسیو با منوی موبایل و دراور
پیشنیازها
- آشنایی پایه با HTML و CSS
- آشنایی مقدماتی با JavaScript (برای شخصیسازی دادهها)
- برای استقرار: دسترسی FTP یا File Manager هاست
نیازی به نصب Node.js، Composer یا دیتابیس برای اجرای قالب نیست.
گام بعدی
- شروع سریع برای اجرای قالب در کمتر از ۵ دقیقه
- نصب روی هاست برای استقرار نسخه HTML
- راهنمای نسخه Next.js اگر با React کار میکنید