- اجزاء
- جدول قیمت گذاری
ساده
نمونه کداقتصادی
برای افرادی که در حال شروع کار در زمینه صرفه جویی در آب هستند
1,200,000 تومان
/ ماهانه
- کتاب الکترونیکی رایگان
- دسترسی رایگان به انجمن ها
- نکات مبتدیان
پیشنهادی
برای صرفه جویی در آب با تجربه که می خواهند محدودیت های خود را پشت سر بگذارند
2,900,000 تومان
/ ماهانه
- کتاب الکترونیکی رایگان
- دسترسی رایگان به انجمن ها
- نکات صرفه جویی پیشرفته
حرفه ای
برای همه حرفه ای هایی که می خواهند دیگران را نیز آموزش دهند
7,900,000 تومان
/ ماهانه
- دسترسی به تمامی کتاب ها
- موضوعات نامحدود
- نکات مبتدیان
<!-- basic -->
<div class="max-w-[320px] md:max-w-[990px] mx-auto">
<!-- beginner savers -->
<div class="md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Beginner Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px]">For people who are starting out in the water saving business</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$19</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Free water saving e-book
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> دسترسی رایگان به انجمن ها
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Beginners tips
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
<!-- advanced savers -->
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Advanced Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px] ">For experienced water savers who'd like to push their limits</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$29</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Free water saving e-book
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> دسترسی رایگان به انجمن ها
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> نکات صرفه جویی پیشرفته
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
<!-- pro savers -->
<div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
<h3 class="text-xl lg:text-2xl">Pro Savers</h3>
<div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
<p class="text-[15px] ">For all the professionals who'd like to educate others, too</p>
<div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$79</strong> / monthly</div>
<ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
<li class="flex justify-center items-center">
<svg> ... </svg> Access to all books
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Unlimited board topics
</li>
<li class="flex justify-center items-center">
<svg> ... </svg> Beginners tips
</li>
</ul>
<a href="#" target="_self" class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50">Buy Now</a>
</div>
</div>
</div>
تغییر وضعیت
نمونه کد
ماهانه
سالانه
سرور ابری
cPanel/WHM گنجانده شده است. Intel Xeon E3 با 2 گیگابایت رم تضمینی.
2,500,000 تومان / ماهانه
ویژگی های هاست ابری
- یک دامنه
- 50 گیگابایت SSD
- 1 ترابایت پهنای باند وِیژه
محبوبترین
سرور مجازی
cPanel/WHM گنجانده شده است. Intel Xeon E3 با 2 گیگابایت رم تضمینی.
7,000,000 تومان / ماهانه
ویژگی های سرور مجازی
- 5 دامنه
- 100 گیگاباید SSD
- 2 ترابایت پهنای باند ویژه
سرور اختصاصی
cPanel/WHM گنجانده شده است. اینتل Xeon E5 با 8 گیگابایت رم تضمینی.
11,500,000 تومان / ماهانه
ویژگی های سرور اختصاصی
- دامنه نامحدود
- 1 ترابایت SSD
- 5 ترابایت پهنای باند ویژه
<!-- toggle -->
<div class="max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark">
<!-- switch -->
<div class="mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base">
<span :class="!yearlyPrice ? 'text-primary' : 'text-white-dark'">Monthly</span>
<label class="w-12 h-6 relative mb-0 cursor-pointer">
<input id="custom_switch_checkbox1" type="checkbox" class="custom_switch absolute ltr:left-0 rtl:right-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer peer" x-model="yearlyPrice" />
<span for="custom_switch_checkbox1" class="outline_checkbox bg-icon border-2 border-[#ebedf2] dark:border-white-dark block h-full rounded-full before:absolute before:left-1 before:bg-[#ebedf2] dark:before:bg-white-dark before:bottom-1 before:w-4 before:h-4 before:rounded-full before:bg-[url('../images/close.svg')] before:bg-no-repeat before:bg-center peer-checked:before:left-7 peer-checked:before:bg-[url('../images/checked.svg')] peer-checked:border-primary peer-checked:before:bg-primary before:transition-all before:duration-300"></span>
</label>
<span class="relative" :class="yearlyPrice ? 'text-primary' : 'text-white-dark'">Yearly <span class="badge bg-success rounded-full absolute ltr:left-full rtl:right-full whitespace-nowrap ltr:ml-2 rtl:mr-2 my-auto hidden">20% Off</span></span>
</div>
<!-- cloud hosting -->
<div class="md:flex space-y-4 md:space-y-0 mt-5 md:mt-16 text-white-dark">
<div class="p-4 lg:p-9 border ltr:md:border-r-0 rtl:md:border-l-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-r-none rtl:md:rounded-l-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]">
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Cloud Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$25</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">ویژگی های هاست ابری</strong>
<ul class="space-y-3">
<li>Single Domain</li>
<li>50 GB SSD</li>
<li>1 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-dark block w-full">Buy Now</button>
</div>
<!-- vps hosting -->
<div class="relative p-4 pt-14 lg:p-9 border border-[#e0e6ed] dark:border-[#1b2e4b] transition-all duration-300 rounded-t-md">
<div class="absolute top-0 md:-top-[30px] inset-x-0 bg-primary text-white h-10 flex items-center justify-center text-base rounded-t-md">محبوبترین</div>
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">VPS Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-primary text-xl lg:text-4xl">$70</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">VPS Hosting Features</strong>
<ul class="space-y-3">
<li>5 Domains</li>
<li>100 GB SSD</li>
<li>2 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-primary block w-full">Buy Now</button>
</div>
<!-- business hosting -->
<div class="p-4 lg:p-9 border ltr:md:border-l-0 rtl:md:border-r-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-l-none rtl:md:rounded-r-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]">
<h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Business Hosting</h3>
<p>cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.</p>
<div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$115</strong> / monthly</div>
<div class="mb-6">
<strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Business Hosting Features</strong>
<ul class="space-y-3">
<li>Unlimited Domains</li>
<li>1 TB SSD</li>
<li>5 TB Premium Bandwidth</li>
</ul>
</div>
<button type="button" class="btn btn-dark block w-full">Buy Now</button>
</div>
</div>
</div>
متحرک
نمونه کد
4,9 ت
فریلنسر
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
- تالار گفتمان پشتیبانی
- هاست رایگان
- ۲ ساعت پشتیبانی
- 5 گیگابایت فضای ذخیره سازی
8,9 ت
مشاغل کوچک
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
- تماس های نامحدود
- هاست رایگان
- 10 ساعت پشتیبانی
- 10 گیگابایت فضای ذخیره سازی
12,9 ت
مشاغل بزرگ
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.
- تماس های نامحدود
- هاست رایگان
- ساعت پشتیبانی نامحدود
- 1 ترابایت فضای ذخیره سازی
<!-- animated -->
<div class="max-w-[1140px] mx-auto mt-20 dark:text-white-dark">
<!-- freelancer -->
<div class="md:flex justify-between space-y-14 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$49</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Freelancer</h3>
<p class="text-[15px] ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Support forum</li>
<li>Free hosting</li>
<li>2 hours of support</li>
<li>5GB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary block">Buy Now</a>
</div>
</div>
<!-- small business -->
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$89</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Small business</h3>
<p class="text-[15px] ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Unlimited calls</li>
<li>Free hosting</li>
<li>10 hours of support</li>
<li>10GB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary block">Buy Now</a>
</div>
</div>
<!-- larger business -->
<div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
<div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
<span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$129</span>
<h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Larger business</h3>
<p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="p-5">
<ul class="space-y-2.5 mb-5 font-semibold">
<li>Unlimited calls</li>
<li>Free hosting</li>
<li>Unlimited hours of support</li>
<li>1TB of storage space</li>
</ul>
<a href="#" target="_self" class="btn btn-primary block">Buy Now</a>
</div>
</div>
</div>
</div>
© روشاک