32 lines
1.5 KiB
Plaintext
32 lines
1.5 KiB
Plaintext
|
---
|
||
|
|
const cases = [
|
||
|
|
{ title: 'Work Identity', desc: 'Keep work communication clear, organized, and easier to review.' },
|
||
|
|
{ title: 'Private Identity', desc: 'Keep personal conversations natural, focused, and separate from work noise.' },
|
||
|
|
{ title: 'Protected Space', desc: 'Some conversations are not only private. They require stronger boundaries and another layer of protection.' },
|
||
|
|
]
|
||
|
|
---
|
||
|
|
|
||
|
|
<section class="flex flex-col items-center bg-surface px-[130px] py-[110px] w-full">
|
||
|
|
<div class="flex flex-col items-center pb-[60px] max-w-[1180px] w-full">
|
||
|
|
<p class="font-bold text-brand text-[13px] tracking-[2.86px]">USE CASES</p>
|
||
|
|
<div class="h-[15px]"></div>
|
||
|
|
<p class="font-bold text-text-primary text-[52px] text-center tracking-[-2.6px] leading-[1.04]">
|
||
|
|
Designed for the worlds you already live in.
|
||
|
|
</p>
|
||
|
|
<div class="h-5"></div>
|
||
|
|
<p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[900px]">
|
||
|
|
Work, private life, and protected conversations should not interfere with each other inside one identity.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex gap-[22px]">
|
||
|
|
{cases.map((c) => (
|
||
|
|
<div class="bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8 h-[245px] w-[378px] flex flex-col">
|
||
|
|
<p class="font-bold text-text-primary text-[25px] tracking-[-0.75px]">{c.title}</p>
|
||
|
|
<div class="h-4"></div>
|
||
|
|
<p class="text-text-secondary text-[15px] font-normal leading-[1.72]">{c.desc}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|