Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Footer component

Browse Source
This commit is contained in:
TerryM
2026-05-12 16:34:58 +08:00
parent a573a1e571
commit a071a85121
2 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Footer.astro Normal file
View File

@@ -0,0 +1,42 @@
---
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>

2
src/pages/index.astro
View File

@@ -5,6 +5,7 @@ import Hero from '../components/Hero.astro'
import CoreSystem from '../components/CoreSystem.astro' import CoreSystem from '../components/CoreSystem.astro'
import UseCases from '../components/UseCases.astro' import UseCases from '../components/UseCases.astro'
import DownloadCTA from '../components/DownloadCTA.astro' import DownloadCTA from '../components/DownloadCTA.astro'
import Footer from '../components/Footer.astro'
--- ---
<Base> <Base>
@@ -13,4 +14,5 @@ import DownloadCTA from '../components/DownloadCTA.astro'
<CoreSystem /> <CoreSystem />
<UseCases /> <UseCases />
<DownloadCTA /> <DownloadCTA />
<Footer />
</Base> </Base>