43 lines
1.6 KiB
Plaintext
43 lines
1.6 KiB
Plaintext
|
---
|
||
|
|
const columns: Record<string, string[]> = {
|
||
|
|
Product: ['Features', 'Product', 'Download'],
|
||
|
|
Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
|
||
|
|
Company: ['About', 'Support', 'Contact'],
|
||
|
|
}
|
||
|
|
---
|
||
|
|
|
||
|
|
<footer class="bg-surface-footer px-[130px] pt-[58px] pb-[30px] w-full">
|
||
|
|
<div class="flex gap-[42px] items-start max-w-[1180px]">
|
||
|
|
<!-- Brand -->
|
||
|
|
<div class="flex flex-col gap-[14px] w-[280px]">
|
||
|
|
<div class="bg-brand rounded-[12px] size-9"></div>
|
||
|
|
<p class="font-bold text-text-primary text-[18px] tracking-[-0.54px]">Talk Pro</p>
|
||
|
|
<div class="text-text-secondary text-[14px] font-normal leading-[1.7]">
|
||
|
|
<p>Designed for modern communication,</p>
|
||
|
|
<p>privacy, and intelligent connection.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
|
||
|
|
{Object.entries(columns).map(([heading, items]) => (
|
||
|
|
<div class="flex flex-col gap-3">
|
||
|
|
<p class="font-bold text-text-primary text-[15px]">{heading}</p>
|
||
|
|
{items.map((item) => (
|
||
|
|
<a href="#" class="text-text-secondary text-[14px] font-normal hover:text-text-primary transition-colors whitespace-nowrap">{item}</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="h-11"></div>
|
||
|
|
<div class="max-w-[1180px] border-t border-border-light"></div>
|
||
|
|
<div class="h-6"></div>
|
||
|
|
|
||
|
|
<div class="flex items-center gap-5 max-w-[1180px]">
|
||
|
|
<p class="text-text-secondary text-[14px] font-normal">© 2026 Talk Pro. All rights reserved.</p>
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
<p class="text-text-secondary text-[14px] font-normal">Terms of Use · Privacy Policy · Support</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|