بلاکها (Blocks)
قالبهای آماده و کامل صفحات SaaS — کپی، paste، و شروع کنید
معرفی
بلاکها صفحات کامل و آمادهی استفاده هستند که از کامپوننتهای دیزاین سیستم پرتو ساخته شدهاند. هر بلاک یک الگوی رایج SaaS را پوشش میدهد و میتوانید آن را مستقیماً در پروژه خود کپی و سفارشیسازی کنید.
هدف: بدون طراح، خروجی حرفهای داشته باشید.
داشبورد
یک layout کامل SaaS با سایدبار، نوار بالا، کارتهای متریک، و ناحیه محتوا.
کامپوننتهای استفادهشده:
AppBar · Sidebar · SidebarInset · PageHeader · MetricCard · Card · Badge · Button
کد کامل: الگوی پوسته برنامه + الگوی ترکیب داشبورد
تنظیمات
صفحه تنظیمات با سایدبار ناوبری، فرمها، و toggle ها.
کامپوننتهای استفادهشده:
AppBar · Sidebar · Card · Input · Label · Switch · Separator · Button
ورود (Auth)
صفحه ورود با فرم ایمیل/رمز عبور و ورود اجتماعی.
ورود به پارتو
برای دسترسی به داشبورد وارد حساب خود شوید
حساب ندارید؟
کامپوننتهای استفادهشده:
Card · Input · Label · Button · Separator
ثبتنام (Signup)
صفحه ثبتنام با فرم نام، ایمیل، رمز عبور، تأیید رمز، ورود اجتماعی و تیک قوانین.
ساخت حساب کاربری
برای شروع رصد شبکههای اجتماعی، ثبتنام کنید
قبلاً حساب دارید؟
کامپوننتهای استفادهشده:
Card · Input · Label · Button · Checkbox · Separator
بازیابی رمز عبور (Forgot Password)
صفحه فراموشی رمز عبور — ورود ایمیل و ارسال لینک بازیابی.
بازیابی رمز عبور
ایمیل خود را وارد کنید تا لینک بازیابی برایتان ارسال شود
کامپوننتهای استفادهشده:
Card · Input · Label · Button
تأیید کد (OTP Verification)
صفحه تأیید کد ۶ رقمی با تایمر ارسال مجدد.
تأیید شماره تماس
کد ۶ رقمی ارسالشده به شماره ۰۹۱۲***۴۵۶۷ را وارد کنید
ارسال مجدد کد تا 00:47
شماره اشتباه است؟
کامپوننتهای استفادهشده:
Card · InputOTP · Button
جدول داده (Data Table)
صفحه کامل لیست اینفلوئنسرها با جستجو، فیلتر، مرتبسازی، انتخاب ردیف و صفحهبندی.
اینفلوئنسرها
لیست اینفلوئنسرهای شناساییشده در کمپین برند
فهرست اینفلوئنسرها
| اینفلوئنسر | پلتفرم | دنبالکنندگان | نرخ تعامل | دستهبندی | احساسات | |
|---|---|---|---|---|---|---|
سا سارا احمدی | ۲۴۵K | ۴.۸٪ | ماکرو | مثبت | ||
عر علی رضایی | YouTube | ۱.۲M | ۳.۲٪ | مگا | خنثی | |
مح مریم حسینی | X | ۸۷K | ۶.۱٪ | میکرو | مثبت | |
نص نیلوفر صادقی | TikTok | ۵۶۰K | ۷.۹٪ | ماکرو | مثبت | |
ام امیر محمدی | Telegram | ۳۲K | ۲.۴٪ | میکرو | منفی | |
زک زهرا کریمی | ۸K | ۹.۳٪ | نانو | مثبت |
کامپوننتهای استفادهشده:
PageHeader · DataTable · FilterBar · SearchInput · Select · Badge · Avatar · SocialPlatformBadge · Button
جزئیات اینفلوئنسر (Detail Page)
صفحه پروفایل اینفلوئنسر با بخش هیرو، کارتهای متریک، و محتوای تبی (پستها، جمعیتشناسی، اشارهها).
سارا احمدی
ماکروInstagramتولیدکننده محتوا در حوزه فناوری و بررسی محصولات دیجیتال. فعال در حوزه افکارسنجی برندها.
دنبالکنندگان
نرخ تعامل
میانگین بازدید
اشارهها
بررسی محصول جدید دیجیکالا — واقعاً ارزش خرید داره؟
مقایسه اسنپ و تپسی از نظر تجربه کاربری
تأثیر شبکههای اجتماعی بر تصمیم خرید مصرفکننده
کامپوننتهای استفادهشده:
Avatar · Badge · MetricCard · SocialPlatformBadge · Tabs · Progress · Card · Button
تحلیل کمپین (Analytics)
صفحه تحلیل با انتخابگر بازه زمانی، کارتهای KPI، نمودار خطی، نمودار میلهای، و مقایسه دورهای.
تحلیل کمپین
عملکرد کمپین «بازاریابی بهار ۱۴۰۵» در شبکههای اجتماعی
نرخ تعامل
کل ذکرها
اینفلوئنسرهای فعال
بازدید کل
روند تعامل و ذکرها
ماهانهتوزیع احساسات
ذکرها به تفکیک پلتفرم
مقایسه با دوره قبل
کامپوننتهای استفادهشده:
PageHeader · PeriodSelector · MetricCard · PartoLineChart · PartoBarChart · SentimentDistribution · Card · Badge
ساخت گزارش (Report Builder)
صفحه ساخت گزارش با پنل فیلترها، انتخاب بخشها، پیشنمایش و دکمههای خروجی (PDF, CSV, Excel).
ساخت گزارش
گزارش سفارشی از عملکرد برند در شبکههای اجتماعی بسازید
تنظیمات گزارش
پیشنمایش گزارش
گزارش عملکرد برند دیجیکالا
بازه: ۱ فروردین ۱۴۰۵ — ۳۱ فروردین ۱۴۰۵
خلاصه اجرایی
تحلیل نرخ تعامل
تحلیل احساسات
لیست اینفلوئنسرها
کامپوننتهای استفادهشده:
PageHeader · Card · DateRangePicker · Select · Checkbox · Skeleton · Button · Badge
آنبوردینگ (Onboarding Wizard)
ویزارد چند مرحلهای آنبوردینگ: خوشآمدگویی، انتخاب پلتفرم، تنظیم کلیدواژهها و تأیید نهایی.
خوشآمدید
پلتفرمها
کلیدواژهها
تأیید
به پارتو خوش آمدید!
در چند مرحله ساده، رصد شبکههای اجتماعی برند خود را راهاندازی کنید. این فرآیند کمتر از ۲ دقیقه زمان میبرد.
کامپوننتهای استفادهشده:
Card · Stepper · Step · Input · Checkbox · TagInput · Badge · Button
پروفایل کاربر (Profile)
صفحه مدیریت حساب با آپلود آواتار، فرم اطلاعات شخصی، تغییر رمز عبور و ناحیه خطر.
حساب کاربری
مدیریت اطلاعات شخصی و تنظیمات حساب
تصویر پروفایل
تصویر خود را بارگذاری کنید. حداکثر ۲ مگابایت.
JPG, PNG یا GIF — حداکثر ۲MB
اطلاعات شخصی
نام و اطلاعات تماس خود را بهروزرسانی کنید
تغییر رمز عبور
رمز عبور خود را بهروزرسانی کنید
ناحیه خطر
حذف حساب کاربری غیرقابل بازگشت است. لطفاً با دقت عمل کنید.
حذف حساب کاربری
تمام دادهها و گزارشهای شما حذف خواهد شد
کامپوننتهای استفادهشده:
PageHeader · Avatar · Card · Input · Label · Button · Separator
مدیریت تیم (Team Management)
صفحه مدیریت تیم با فرم دعوت، لیست اعضا با نقشها، و دعوتهای در انتظار.
مدیریت تیم
اعضای تیم خود را مدیریت و دعوت کنید
دعوت عضو جدید
ایمیل کاربر و نقش مورد نظر را وارد کنید
اعضای تیم
4 عضوسارا احمدی
sara@example.com
علی رضایی
ali@example.com
مریم حسینی
maryam@example.com
امیر محمدی
amir@example.com
دعوتهای در انتظار
2 دعوتnilofar@example.com
ارسالشده ۲ روز پیش · ویرایشگر
zahra@example.com
ارسالشده ۵ روز پیش · مشاهدهکننده
کامپوننتهای استفادهشده:
PageHeader · Avatar · Badge · Card · Input · Select · Button
اشتراک و صورتحساب (Billing)
صفحه اشتراک با پلان فعلی، نوارهای مصرف، روش پرداخت و تاریخچه فاکتورها.
اشتراک و صورتحساب
مدیریت پلان، پرداخت و فاکتورها
پلان حرفهای
۴,۹۰۰,۰۰۰ تومان / ماهانه
روش پرداخت
کارت بانکی متصل به حساب شما
بانک ملت
•••• •••• •••• ۴۵۶۷
تاریخچه فاکتورها
INV-1404
۱ فروردین ۱۴۰۵
INV-1403
۱ اسفند ۱۴۰۴
INV-1402
۱ بهمن ۱۴۰۴
INV-1401
۱ دی ۱۴۰۴
کامپوننتهای استفادهشده:
PageHeader · Card · Progress · Badge · Button
تنظیمات اعلانها (Notifications)
صفحه تنظیمات اعلانها با toggleهای گروهبندیشده (ایمیل، پوش، درونبرنامه) برای هر نوع رویداد.
تنظیمات اعلانها
مشخص کنید چه اعلانهایی و از چه طریقی دریافت کنید
اشارهها و ذکرها
ذکر جدید برند
وقتی نام برند شما در شبکه اجتماعی ذکر شود
ذکر منفی
وقتی ذکر منفی جدیدی شناسایی شود
افزایش ناگهانی ذکرها
وقتی تعداد ذکرها بهطور غیرعادی افزایش یابد
گزارشها
گزارش هفتگی
خلاصه هفتگی عملکرد برند
گزارش ماهانه
گزارش تحلیلی ماهانه
اینفلوئنسرها
اینفلوئنسر جدید
وقتی اینفلوئنسر جدیدی شناسایی شود
تغییر نرخ تعامل
وقتی نرخ تعامل اینفلوئنسر تغییر قابلتوجهی داشته باشد
کامپوننتهای استفادهشده:
PageHeader · Card · Switch · Separator
صفحه ۴۰۴ (Not Found)
صفحه «یافت نشد» با آیکون، جستجو و دکمه بازگشت.
۴۰۴
صفحه مورد نظر یافت نشد
ممکن است آدرس اشتباه باشد یا صفحه حذف شده باشد. میتوانید جستجو کنید یا به صفحه اصلی بازگردید.
کامپوننتهای استفادهشده:
Button · SearchInput
صفحه خطای سرور (500)
صفحه خطای سرور با دکمه تلاش مجدد و تماس با پشتیبانی.
۵۰۰
خطایی رخ داده است
متأسفیم، مشکلی در سرور به وجود آمده است. تیم فنی ما در حال بررسی است. لطفاً دوباره تلاش کنید.
کد خطا: ERR_500_INTERNAL
کامپوننتهای استفادهشده:
Button
صفحه تعمیرات (Maintenance)
صفحه اعلام تعمیرات با نوار پیشرفت، زمان تخمینی و فرم اطلاعرسانی ایمیل.
در حال بهروزرسانی هستیم
سامانه پارتو در حال ارتقا و بهبود است. این فرآیند بهزودی تکمیل میشود. از صبر شما متشکریم.
۶۵٪ تکمیل شده
کامپوننتهای استفادهشده:
Button · Input · Label · Progress
داشبورد خالی (Empty Dashboard)
صفحه اولین ورود کاربر با پیام خوشآمدگویی و چکلیست راهاندازی تعاملی.
به پارتو خوش آمدید!
برای شروع رصد برند خود، مراحل زیر را تکمیل کنید
اتصال شبکههای اجتماعی
حداقل یک پلتفرم متصل کنید
تنظیم کلیدواژهها
کلمات کلیدی برای رصد برند
دعوت اعضای تیم
همکاران خود را به پارتو دعوت کنید
3 مرحله باقیمانده
کامپوننتهای استفادهشده:
Card · Checkbox · Badge · Button
فید فعالیتها (Activity Feed)
فید زمانبندی رویدادهای برند — ذکرها، تغییر احساسات، رشد دنبالکنندگان و نرخ تعامل.
فید فعالیتها
رویدادهای اخیر برند در شبکههای اجتماعی
برند دیجیکالا رو در استوری خودش تگ کرده و تجربه خریدش رو به اشتراک گذاشته
۵ دقیقه پیش
احساسات منفی شناسایی شد: «خدمات پس از فروش واقعاً ضعیف شده»
۱۲ دقیقه پیش
از مرز ۱۰۰K دنبالکننده عبور کرد — ارتقا به دسته ماکرو
۴۵ دقیقه پیش
ویدیوی بررسی محصول جدید را منتشر کرد — ۲۴K بازدید در ۶ ساعت
۱ ساعت پیش
نرخ تعامل کانال از ۲.۴٪ به ۵.۱٪ افزایش یافت
۲ ساعت پیش
هشتگ #دیجیکالا در ترندهای امروز قرار گرفت با ۳.۲K توییت
۳ ساعت پیش
کامپوننتهای استفادهشده:
PageHeader · Avatar · Badge · SentimentBadge · SocialPlatformBadge · Card · Button
صندوق پیامها (Inbox)
لیست-جزئیات پیامها با لیست کناری، نمایش پیام انتخابشده و فرم پاسخ.
صندوق پیامها
مدیریت پیامها و کامنتهای اینفلوئنسرها
سارا احمدی
سلام! محصول جدیدتون عالی بود. امکان همکاری هست؟
کامپوننتهای استفادهشده:
PageHeader · Avatar · Badge · SocialPlatformBadge · Card · Textarea · Button · Separator
مقایسه اینفلوئنسرها (Comparison)
مقایسه جانبهبهجانبه دو اینفلوئنسر با کارتهای پروفایل، جدول شاخصها و نشانگر برنده.
مقایسه اینفلوئنسرها
مقایسه عملکرد دو اینفلوئنسر در شبکههای اجتماعی
سارا احمدی
علی رضایی
مقایسه شاخصها
۴
شاخص برتر سارا احمدی
۲
شاخص برتر علی رضایی
کامپوننتهای استفادهشده:
Avatar · Badge · SocialPlatformBadge · Card · PageHeader
نحوه استفاده
۱. بلاک مورد نظر را انتخاب کنید ۲. کد را از صفحه الگوی مربوطه کپی کنید ۳. در پروژه خود paste کنید ۴. دادهها و متنها را سفارشیسازی کنید
نکته
بلاکها از کامپوننتهای رسمی DS ساخته شدهاند — هر تغییری در تم یا توکنها خودکار در بلاکها اعمال میشود.