pf2tw
This commit is contained in:
Çetin
@@ -7,101 +7,107 @@ import { RippleModule } from 'primeng/ripple';
|
||||
selector: 'pricing-widget',
|
||||
imports: [DividerModule, ButtonModule, RippleModule],
|
||||
template: `
|
||||
<div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
|
||||
<span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
<div id="pricing" class="py-6 px-6 lg:px-20 my-2 md:my-6">
|
||||
<div class="text-center mb-6">
|
||||
<div class="text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl">Matchless Pricing</div>
|
||||
<span class="text-muted-color text-2xl">Amet consectetur adipiscing elit...</span>
|
||||
</div>
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$0</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<div class="grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0">
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Free</div>
|
||||
<img src="/demo/images/landing/free.svg" class="w-10/12 mx-auto" alt="free" />
|
||||
<div class="my-8 flex flex-col items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$1</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Startup</div>
|
||||
<img src="/demo/images/landing/startup.svg" class="w-10/12 mx-auto" alt="startup" />
|
||||
<div class="my-8 flex flex-col items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
|
||||
<div class="my-5 text-center">
|
||||
<span class="text-5xl font-bold mr-2 text-900">$999</span>
|
||||
<span class="text-600">per month</span>
|
||||
<button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></button>
|
||||
<div class="col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0">
|
||||
<div class="p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all" style="border-radius: 10px">
|
||||
<div class="text-surface-900 dark:text-surface-0 text-center my-8 text-3xl">Enterprise</div>
|
||||
<img src="/demo/images/landing/enterprise.svg" class="w-10/12 mx-auto" alt="enterprise" />
|
||||
<div class="my-8 flex flex-col items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$5</span>
|
||||
<span class="text-surface-600 dark:text-surface-200">per month</span>
|
||||
</div>
|
||||
<button pButton pRipple label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
|
||||
</div>
|
||||
<p-divider class="w-full bg-surface-200"></p-divider>
|
||||
<ul class="my-5 list-none p-0 flex text-900 flex-column">
|
||||
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||
<span class="text-xl leading-normal">Responsive Layout</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||
<span class="text-xl leading-normal">Unlimited Push Messages</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||
<span class="text-xl leading-normal">50 Support Ticket</span>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||
<span class="text-xl line-height-3">Free Shipping</span>
|
||||
<span class="text-xl leading-normal">Free Shipping</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user