ourworld_web/www_circl
20
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
dist/output.css vendored
View File

@ -921,6 +921,18 @@ body:is(.dark *) {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
@ -961,6 +973,10 @@ body:is(.dark *) {
top: 50%;
}
.isolate {
isolation: isolate;
}
.z-10 {
z-index: 10;
}
@ -1004,14 +1020,38 @@ body:is(.dark *) {
margin-right: 1rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
.flex {
display: flex;
}
@ -1068,6 +1108,10 @@ body:is(.dark *) {
width: 0.75rem;
}
.w-5 {
width: 1.25rem;
}
.w-auto {
width: auto;
}
@ -1080,6 +1124,10 @@ body:is(.dark *) {
width: 100vw;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
@ -1088,6 +1136,14 @@ body:is(.dark *) {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-md {
max-width: 28rem;
}
@ -1100,6 +1156,10 @@ body:is(.dark *) {
max-width: 36rem;
}
.flex-none {
flex: none;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1114,10 +1174,18 @@ body:is(.dark *) {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
@ -1126,6 +1194,10 @@ body:is(.dark *) {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.justify-center {
justify-content: center;
}
@ -1142,12 +1214,33 @@ body:is(.dark *) {
gap: 2rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-x-4 {
-moz-column-gap: 1rem;
column-gap: 1rem;
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@ -1158,6 +1251,14 @@ body:is(.dark *) {
overflow: hidden;
}
.text-pretty {
text-wrap: pretty;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-full {
border-radius: 9999px;
}
@ -1166,16 +1267,33 @@ body:is(.dark *) {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
background-color: rgb(255 255 255 / 0.05);
}
.bg-opacity-0 {
--tw-bg-opacity: 0;
}
@ -1239,6 +1357,24 @@ body:is(.dark *) {
object-fit: cover;
}
.p-1 {
padding: 0.25rem;
}
.p-8 {
padding: 2rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -1249,11 +1385,21 @@ body:is(.dark *) {
padding-right: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
@ -1282,10 +1428,34 @@ body:is(.dark *) {
line-height: 2.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-lg\/8 {
font-size: 1.125rem;
line-height: 2rem;
}
.text-sm\/6 {
font-size: 0.875rem;
line-height: 1.5rem;
}
.text-xs\/5 {
font-size: 0.75rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
.font-extralight {
font-weight: 200;
}
.font-medium {
font-weight: 500;
}
@ -1294,6 +1464,20 @@ body:is(.dark *) {
font-weight: 600;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@ -1328,6 +1512,27 @@ body:is(.dark *) {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-indigo-500 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
--tw-ring-color: rgb(255 255 255 / 0.1);
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1399,17 +1604,17 @@ body:is(.dark *) {
.connector-text {
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
letter-spacing: 0.05em;
--tw-text-opacity: 1;
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
.connector-text {
font-size: 1.25rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
}
@ -1420,6 +1625,15 @@ body:is(.dark *) {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover {
background-color: rgb(255 255 255 / 0.2);
}
.hover\:text-gray-300:hover {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@ -1430,6 +1644,34 @@ body:is(.dark *) {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus-visible\:outline-2:focus-visible {
outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:outline-indigo-500:focus-visible {
outline-color: #6366f1;
}
.focus-visible\:outline-white:focus-visible {
outline-color: #fff;
}
@media (min-width: 640px) {
.sm\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.sm\:text-xl\/8 {
font-size: 1.25rem;
line-height: 2rem;
}
}
@media (min-width: 768px) {
.md\:block {
display: block;
@ -1449,6 +1691,11 @@ body:is(.dark *) {
}
@media (min-width: 1024px) {
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:mt-4 {
margin-top: 1rem;
}
@ -1457,7 +1704,30 @@ body:is(.dark *) {
height: 1.5rem;
}
.lg\:max-w-none {
max-width: none;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:pt-12 {
padding-top: 3rem;
}
}
@media (min-width: 1280px) {
.xl\:mt-10 {
margin-top: 2.5rem;
}
.xl\:p-10 {
padding: 2.5rem;
}
}

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;
}
}