معرفی قالب آنتارس

سایت نمایشگاه خودرو آنتارس یک پروژه کامل فرانت‌اند است که شامل صفحات اصلی، رزرو، پرداخت، بلاگ و مقالات تخصصی می‌باشد. این سایت با هدف ارائه خدمات خرید، فروش و اجاره خودروهای لوکس طراحی شده و دارای قابلیت‌های تعاملی متعددی مانند تغییر تم دارک/لایت، ترجمه دو زبانه فارسی و انگلیسی، احراز هویت با کد یکبارمصرف، فرم رزرو چندمرحله‌ای، فیلتر و جستجوی پیشرفته محصولات، گالری تصاویر حرفه‌ای، صفحه پرداخت شبیه‌سازی شده، وبلاگ با مقالات داینامیک، سیستم علاقه‌مندی خودروها، فرم مشاوره تخصصی، نمایش موقعیت مکانی شعب، دکمه اسکرول به بالا و منوی همبرگری برای موبایل می‌باشد. پروژه شامل فایل‌های HTML، CSS و JavaScript به همراه منابع تصویری و فونت‌های اختصاصی است.

—————————————————————————————

جزئیات محصول:

فایل‌های اصلی پروژه شامل index.html (صفحه اصلی)، reservation.html (صفحه رزرو)، payment.html (صفحه پرداخت)، payment-success.html (صفحه پرداخت موفق)، payment-failed.html (صفحه پرداخت ناموفق)، blog.html (صفحه مجله) و blog-post.html (صفحه مقالات) می‌باشند. همچنین نسخه‌های دارک تم (dark) و لایت تم (light) به صورت جداگانه پیاده‌سازی شده‌اند.

فایل‌های CSS شامل style.css (استایل اصلی لایت تم)، style-dark.css (استایل دارک تم)، reservation.css، reservation-dark.css، payment.css، payment-dark.css، payment-success.css، payment-success-dark.css، payment-failed.css، payment-failed-dark.css، blog.css و blog-dark.css می‌باشند. فایل‌های JavaScript شامل script.js (کنترل‌کننده اصلی با سیستم تم، ترجمه، OTP و رندر داینامیک)، reservation.js (فرم رزرو ۴ مرحله‌ای با انتخاب خودرو و آپشن‌های ویژه)، payment.js (پرداخت و ذخیره اطلاعات در localStorage)، payment-success.js (نمایش اطلاعات رزرو و کد پیگیری)، payment-failed.js (نمایش اطلاعات رزرو و پیام خطا)، blog.js (مدیریت مقالات با فیلتر، جستجو و صفحه‌بندی)، main.js (داده‌های ایستا شامل فرآیند، خودروها، نظرات، امکانات، گالری، سوالات متداول، تیم و مقالات) و main-dark.js (نسخه دارک تم) می‌باشند.

ساختار پوشه‌ها شامل assets/image (تصاویر گالری، محصولات، تیم، کاربران، هیرو و لوکیشن)، assets/fonts (فونت پیدا و آیکون‌های فونت‌awesome)، assets/css (استایل‌ها) و assets/js (اسکریپت‌ها) می‌باشد.

✅ تغییر تم دارک و لایت با ذخیره در مرورگر
✅ تغییر زبان فارسی و انگلیسی تمام محتوای سایت
✅ ثبت‌نام و ورود با کد تأیید موبایل (OTP)
✅ رزرو خودرو در چهار مرحله شامل انتخاب خودرو و آپشن
✅ فیلتر و جستجوی هوشمند محصولات با بارگذاری تدریجی
✅ گالری تصاویر حرفه‌ای با قابلیت بزرگنمایی
✅ سیستم نظرات و امتیازدهی کاربران
✅ مقالات تخصصی و بخش رسانه
✅ فرم مشاوره تخصصی رایگان
✅ نمایش موقعیت شعب با نقشه
✅ طراحی واکنش‌گرا و سازگار با موبایل
✅ منوی همبرگری برای دستگاه‌های همراه
✅ دکمه اسکرول به بالا
✅ مودال شناور مشاوره فوری
✅ انیمیشن اسکرول با ScrollReveal
✅ آمار شمارنده با انیمیشن
✅ سوالات متداول با قابلیت باز و بسته شدن
✅ ناوگان خودروهای لوکس در صفحه اصلی
✅ سیستم علاقه‌مندی (لایک) خودروها
✅ دکمه مشاهده و رزرو برای هر خودرو
✅ خدمات اختصاصی انتارس (۱۲ سرویس)
✅ مزایای انتخاب انتارس (۹ مزیت)
✅ تیم حرفه‌ای انتارس (۸ عضو)
✅ اینفوگرافیک مزایا
✅ خبرنامه طلایی
✅ خدمات ویژه مشتریان VIP
✅ سوالات سریع
✅ برندهای همکار (۱۰ برند)
✅ فرم تماس در فوتر
✅ صفحه پرداخت موفق با کد پیگیری
✅ صفحه پرداخت ناموفق با راهنمایی خطا
✅ ذخیره اطلاعات رزرو در localStorage
✅ شبیه‌سازی پرداخت با ۹۰٪ شانس موفقیت
✅ کد تأیید ۶ رقمی با اعتبار ۵ دقیقه

—————————————————————————————

ویژگی‌های محصول:

—————————————————————————————

🔹 تغییر تم دارک/لایت

دکمه ماه و خورشید در هدر سایت قرار دارد. با کلیک، کلاس data-theme روی body تغییر می‌کند و تمام رنگ‌های سایت بین دو حالت تیره و روشن جابه‌جا می‌شود. انتخاب کاربر در localStorage ذخیره می‌گردد.

—————————————————————————————

🔹 ترجمه دو زبانه فارسی/انگلیسی

دکمه کره زمین در هدر، فایل translations را فعال می‌کند. تمام المان‌های دارای ویژگی data-key، متن خود را از شیء translations می‌خوانند و بین فارسی و انگلیسی تغییر می‌دهند. این ترجمه شامل منوها، دکمه‌ها، عنوان‌ها، توضیحات و محتوای داینامیک می‌شود.

—————————————————————————————

🔹 احراز هویت با کد یکبارمصرف (OTP)

کاربر شماره موبایل را وارد می‌کند. سیستم یک کد ۶ رقمی تصادفی تولید می‌کند و در alert نمایش می‌دهد. کد به مدت ۵ دقیقه اعتبار دارد. پس از تأیید کد، اطلاعات کاربر در localStorage ذخیره می‌شود. امکان ورود با گوگل (دمو) نیز وجود دارد.

—————————————————————————————

🔹 رزرو خودرو در ۴ مرحله

مرحله ۱: انتخاب مکان و تاریخ تحویل/بازگشت، ساعت، تعداد مسافران و نوع خودرو
مرحله ۲: انتخاب خودرو از لیست carsData با قابلیت جستجو
مرحله ۳: تکمیل اطلاعات شخصی و انتخاب ۸ آپشن ویژه (راننده حرفه‌ای، تحویل در فرودگاه، صندلی کودک VIP، بسته پذیرایی لوکس، GPS حرفه‌ای، اینترنت نامحدود، بیمه تکمیلی ویژه، عکاسی حرفه‌ای)
مرحله ۴: مشاهده خلاصه رزرو، پذیرش قوانین و هدایت به صفحه پرداخت
پس از تأیید، اطلاعات در localStorage ذخیره می‌شود.

—————————————————————————————

🔹 فیلتر و بارگذاری تدریجی محصولات

۲۴ خودرو در products ذخیره شده‌اند. فیلتر بر اساس دسته‌بندی (اسپرت، شاسی‌بلند، سدان، الکتریکی) کار می‌کند. دکمه Load More هر بار ۸ محصول جدید نمایش می‌دهد.

—————————————————————————————

🔹 گالری تصاویر با آیکون ذره‌بین

۴۰ تصویر در gallery ذخیره شده‌اند. روی هر تصویر هاور کنید، آیکون ذره‌بین نمایش داده می‌شود. با کلیک، لایت‌باکس باز شده و تصویر در ابعاد بزرگ نمایش داده می‌شود.

—————————————————————————————

🔹 صفحه پرداخت شبیه‌سازی شده

اطلاعات رزرو از localStorage خوانده می‌شود. کاربر شماره کارت ۱۶ رقمی، CVV و تاریخ انقضا را وارد می‌کند. با ۹۰٪ شانس موفقیت، به payment-success.html هدایت می‌شود و کد پیگیری تصادفی تولید می‌گردد. در صورت失敗، به payment-failed.html هدایت می‌شود.

—————————————————————————————

🔹 وبلاگ با مقالات داینامیک

۹ مقاله در blogPostsData ذخیره شده‌اند. فیلتر بر اساس دسته‌بندی (راهنما، مقایسه، بیمه، سفر، تکنولوژی) کار می‌کند. جستجو بر اساس عنوان، خلاصه یا تگ انجام می‌شود. صفحه‌بندی هر صفحه ۶ مقاله نمایش می‌دهد. هر مقاله دارای صفحه جداگانه با محتوای کامل، تگ‌ها و دکمه اشتراک‌گذاری است.

—————————————————————————————

🔹 سیستم علاقه‌مندی (لایک) خودروها

در صفحه اصلی، هر کارت خودرو دکمه قلب دارد. با کلیک، آیکون قرمز شده و id خودرو در likedCars ذخیره می‌شود. پس از رفرش، وضعیت لایک حفظ می‌گردد.

—————————————————————————————

🔹 فرم مشاوره تخصصی رایگان

فرم شامل نام، نام خانوادگی، شهر، استان، شماره تماس و متن پیام است. اعتبارسنجی ساده انجام می‌شود و پیام موفقیت با alert نمایش داده می‌شود.

—————————————————————————————

🔹 نمایش موقعیت مکانی شعب

دو شعبه (ولیعصر و سعادت‌آباد) با آدرس، شماره تماس، ساعات کاری و امکانات (پارکینگ، کافی‌شاپ) نمایش داده شده‌اند. نقشه به صورت تصویر ثابت (location.png) قرار دارد.

—————————————————————————————

🔹 دکمه اسکرول به بالا و مشاوره شناور

دو دکمه شناور در پایین صفحه: یکی برای بازگشت به بالا (فقط در اسکرول بیشتر از ۳۰۰ پیکسل نمایش داده می‌شود) و دیگری برای باز کردن مودال مشاوره فوری.

—————————————————————————————

🔹 منوی همبرگری برای موبایل

در عرض کمتر از ۱۲۸۵ پیکسل، منوی اصلی مخفی شده و دکمه همبرگری نمایش داده می‌شود. با کلیک، منوی عمودی باز می‌گردد.

—————————————————————————————

🔹 انیمیشن اسکرول با ScrollReveal

تمام المان‌های سایت هنگام اسکرول با انیمیشن ظاهر می‌شوند. از کتابخانه ScrollReveal برای این کار استفاده شده است.

—————————————————————————————

🔹 آمار شمارنده (Counter)

در بخش آمار، اعداد با انیمیشن از صفر به مقدار نهایی می‌رسند (۱۵,۰۰۰ مشتری، ۵۰۰ خودرو، ۶۰ شعبه، ۲۴ ساعت پشتیبانی).

—————————————————————————————

🔹 سوالات متداول (FAQ) با قابلیت باز و بسته شدن

۱۲ سوال در faqData ذخیره شده است. با کلیک روی هر سوال، پاسخ آن با انیمیشن نمایش داده می‌شود.

—————————————————————————————

🔹 ناوگان خودروهای لوکس در صفحه اصلی

۱۲ خودرو در carsData ذخیره شده است. هر خودرو دارای نام، سال، قیمت، تصویر و توضیحات می‌باشد. دکمه‌های رزرو، مشاهده و لایک برای هر خودرو تعبیه شده است.

—————————————————————————————

🔹 نظرات مشتریان

۱۲ نظر در reviewsData ذخیره شده است. هر نظر شامل نام، تصویر پروفایل، خودروی خریداری شده، امتیاز ستاره و متن نظر می‌باشد.

—————————————————————————————

🔹 خدمات اختصاصی انتارس

۱۲ سرویس در servicesData ذخیره شده است. هر سرویس شامل آیکون، عنوان و توضیحات می‌باشد.

—————————————————————————————

🔹 مزایای انتخاب انتارس

۹ مزیت در benefitsData ذخیره شده است. هر مزیت شامل آیکون، عنوان و توضیحات می‌باشد. برخی مزایا به صورت بزرگ (large) نمایش داده می‌شوند.

—————————————————————————————

🔹 تیم حرفه‌ای انتارس

۸ عضو تیم در teamData ذخیره شده است. هر عضو شامل نام، سمت، تصویر و لینک شبکه‌های اجتماعی می‌باشد.

—————————————————————————————

🔹 اینفوگرافیک مزایا

۸ آیتم در infographicItems ذخیره شده است. شامل مزایایی مانند “۹۸٪ رضایت مشتریان”، “میانگین سن خودرو: ۱.۵ سال”، “پاسخگویی کمتر از ۳۰ ثانیه” و غیره.

—————————————————————————————

🔹 خبرنامه طلایی

فرم عضویت در خبرنامه با قابلیت وارد کردن ایمیل و دکمه عضویت. شامل سه ویژگی: تخفیف ۲۰٪ اولین اجاره، اطلاع از خودروهای جدید، دعوت به رویدادهای ویژه.

—————————————————————————————

🔹 خدمات ویژه مشتریان VIP

۴ خدمت در vipData ذخیره شده است: تخفیف تولد، تحویل فرودگاهی، آپگرید رایگان، پشتیبان اختصاصی.

—————————————————————————————

🔹 سوالات سریع

۶ سوال پرتکرار در quickQuestionsList ذخیره شده است. با کلیک روی هر سوال، پیام هشدار نمایش داده می‌شود که پاسخ در بخش سوالات متداول موجود است.

—————————————————————————————

🔹 برندهای همکار

۱۰ برند در brandsData ذخیره شده است. هر برند شامل نام و آیکون می‌باشد. برندها در یک نوار افقی (مارکی) نمایش داده می‌شوند.

—————————————————————————————

🔹 فرم تماس در فوتر

تمامی حقوق محفوظ است. شماره تماس، ایمیل و آدرس در فوتر نمایش داده شده است. دکمه‌های شبکه‌های اجتماعی نیز در فوتر قرار دارد.