وب
تندم — لندینگپیج SaaS
لندینگپیج تیره و مدرن برای یک محصول SaaS، با شبکهی بنتو، جدول قیمت و فرم خبرنامهی فعال
calendar_today
تاریخ انجام۱۴۰۵
timer
مدت زمانحدود چهار روز
person
نقش منطراح و توسعهدهنده فرانتاند
business
کارفرماپروژه شخصی
درباره پروژه
یک لندینگپیج کامل به سبک محصولات SaaS آمریکایی، برای یک ابزار مدیریت وظایف تیمی. محصول فرضی است و تمام نامها، نقلقولها و آمارها نمایشیاند؛ هدف من تمرین طراحی و پیادهسازی یک صفحهی فروش بود که از بالا تا پایین کاربر را جلو ببرد. پسزمینهی گرادیانی تیره، ماکآپ متحرک محصول، شبکهی بنتوی ششکاشی و جدول قیمت با کلید ماهانه/سالانه، همه با انیمیشنهای وابسته به اسکرول ساخته شدهاند.
تصاویر پروژه
تکنولوژیهای استفاده شده
codeNext.js 15
codeReact 19
codeTypeScript
codeTailwind CSS v4
codeMotion
ویژگیهای کلیدی
check_circleنوار ناوبری چسبان با کشوی موبایل
check_circleبخش معرفی با ماکآپ متحرک رابط کاربری محصول
check_circleنوار لوگوی بیپایان و بخش آمار
check_circleشبکهی بنتوی ششکاشی برای معرفی قابلیتها، همراه با نمودار و ریزرابطها
check_circleجدول قیمت سهپلانه با کلید تغییر صورتحساب ماهانه/سالانه
check_circleبخش نظرات و آکاردئون سوالات متداول
check_circleفرم خبرنامه با مسیر API واقعی: اعتبارسنجی و یکدستسازی ایمیل، حذف تکراریها و محدودیت پنج درخواست در دقیقه برای هر IP
check_circleتمام متنها، پلانها و نظرات در یک فایل محتوا جدا شدهاند
چالشها
extensionاجرای انیمیشنهای وابسته به اسکرول در یک صفحهی بلند، بدون اینکه پیمایش کند شود
extensionطراحی شبکهی بنتو به شکلی که در همهی اندازههای صفحه منظم بماند
extensionطراحی مسیر API به گونهای که در صورت شکست نوشتن، خطای تمیز و قابلفهم به کاربر برگرداند