ourworld_web/www_circl
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add pricing

Browse Source
This commit is contained in:
sasha-astiadi
2025-05-07 14:44:33 +02:00
parent 6bf2f73b8f
commit 047ae36fdd
3 changed files with 459 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/index.html
View File

@@ -220,9 +220,190 @@
</div>
</section>
<!-- Home Section 8 -->
<div class="bg-BLACK py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-5xl text-center">
<h2 class="connector-text">PRICING</h2>
<p class="hero-heading-2 fade-up">Choose the Perfect Plan for Your Needs</p>
</div>
<p class="mx-auto mt-6 max-w-2xl text-center text-lg font-extralight fade-up text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience and needs.</p>
<div class="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div class="grid grid-cols-2 gap-x-1 rounded-full bg-white p-1 text-center text-xs/5 font-semibold text-black">
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="monthly" class="sr-only">
<span>Monthly</span>
</label>
<!-- Checked: "bg-indigo-500" -->
<label class="cursor-pointer rounded-full px-2.5 py-1">
<input type="radio" name="frequency" value="annually" class="sr-only">
<span>Annually</span>
</label>
</div>
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-300">The essentials to provide your best work for your team.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$7.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
</p>
<a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited circls
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 20 collaborators per circl
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
200GB decentralized storage
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domain integration
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Shared inboxes / project workspace
</li>
</ul>
</div>
<div class="rounded-3xl bg-white/5 p-8 ring-2 ring-indigo-500 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
<p class="rounded-full bg-indigo-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
</div>
<p class="mt-4 text-sm/6 text-gray-300">A plan that scales with your rapidly growing business.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$12.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
</p>
<a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-indigo-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited Circls
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 50 collaborators per circl
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
500GB decentralized storage
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domain integration
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Shared inboxes / project workspace
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3>
</div>
<p class="mt-4 text-sm/6 text-gray-300">Dedicated infrastructure for your business with FreeZone access included.</p>
<p class="mt-6 flex items-baseline gap-x-1">
<!-- Price, update based on frequency toggle state -->
<span class="text-4xl font-semibold tracking-tight text-white">$24.99</span>
<!-- Payment frequency, update based on frequency toggle state -->
<span class="text-sm/6 font-semibold text-gray-300">/ user / month</span>
</p>
<a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
<ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Digital FreeZone Access
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Unlimited Circls
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Up to 100 collaborators per Circl
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
1TB decentralized storage
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Custom domain integration
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Shared inboxes / project workspace
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Integrated Financial System
</li>
<li class="flex gap-x-3">
<svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
</svg>
Legal Recognition for Digital Organizations
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<div class="container mx-auto px-4">

2
src/input.css
View File

@@ -190,6 +190,6 @@
}
.connector-text {
@apply text-white text-lg md:text-xl font-medium tracking-wider mb-4;
@apply text-white text-base md:text-lg font-medium tracking-wider mb-4;
}
}