Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
93049e904479615e5898236bb2f2baba15c798e0
talk-pro/src/components/Footer.astro

66 lines
4.0 KiB
Plaintext
Raw Normal View History

feat: add Footer component
2026-05-12 16:34:58 +08:00
---
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
const logoFull = "/assets/footer-logo.png";
const androidIcon = "/assets/footer-android-icon.svg";
const appleIcon = "/assets/footer-apple-icon.svg";
feat: add Footer component
2026-05-12 16:34:58 +08:00
---
fix: ensure layout works at 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:45:23 +08:00
<footer class="bg-[#fef0eb] w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
<div class="flex flex-col gap-[36px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<!-- Top row -->
fix: ensure layout works at 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:45:23 +08:00
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-10 lg:gap-0 w-full">
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<!-- Brand col -->
<div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0">
<div class="relative h-[64px] w-[220px]">
<img alt="TalkPro" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={logoFull} />
</div>
<p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] leading-[1.5] max-w-[320px]">
TalkPro is a modern communication app designed for messaging, group conversations, channels, voice calls, and video calls.
</p>
<!-- Store badges -->
fix: responsive layout for 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) - Footer/DownloadCTA: responsive padding and container widths Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 18:35:29 +08:00
<div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0 w-full">
fix: ensure layout works at 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:45:23 +08:00
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
<div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
<p class="font-semibold text-[#ffd6bc] text-[11px] tracking-[0.05px] leading-normal">ANDROID</p>
<p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">APK Coming Soon</p>
</div>
</div>
fix: ensure layout works at 360px minimum viewport width - Store badges: w-full on mobile, sm:w-[260px] on larger screens - AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:45:23 +08:00
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<div class="bg-[#151515] flex items-center justify-center rounded-[12px] shrink-0 size-[44px]">
<img alt="Apple" class="block h-[27px] w-[22px]" src={appleIcon} />
</div>
<div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
<p class="font-semibold text-[#ccc] text-[11px] tracking-[0.05px] leading-normal">IOS</p>
<p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">Coming on App Store</p>
</div>
</div>
</div>
feat: add Footer component
2026-05-12 16:34:58 +08:00
</div>
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<!-- Link cols -->
<div class="flex gap-[32px] items-center leading-normal shrink-0">
<div class="flex flex-col gap-[24px] items-start overflow-clip w-[160px]">
<a href="#download" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">Download</a>
<a href="#features" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">Features</a>
<a href="#" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">About</a>
</div>
<div class="flex flex-col gap-[24px] items-start overflow-clip w-[160px]">
<p class="font-medium text-[#4a4a4a] text-[14px] whitespace-nowrap">Contact</p>
<p class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap">email@hotmail.com</p>
<p class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap">+01 123 45562334</p>
</div>
feat: add Footer component
2026-05-12 16:34:58 +08:00
</div>
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
</div>
feat: add Footer component
2026-05-12 16:34:58 +08:00
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<!-- Divider -->
<div class="w-full h-px bg-[#e3d9d1]"></div>
feat: add Footer component
2026-05-12 16:34:58 +08:00
feat: rebuild landing page from new Figma design (node 9505:537) Complete redesign with 9 sections matching the updated 1920px layout: - Header: sticky nav with globe/language toggle and Download CTA - Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected" - WhyTalkPro: 2x2 card grid with SVG icons and illustration - CoreSystem: halftone bg, 6-card feature grid with 3D icons - Experience: 3 vertical screenshot cards with exact Figma clip positions - UseCases: split layout with 4 orange-header rows - Trust: 4-column reliability features with sprite clipping and SVG dividers - AppPreview: interactive phone carousel with prev/next fade transition - DownloadCTA: polka-dot bg, TalkPro logo script, store badges - Footer: logo, description, store badges, link columns All 35 Figma assets downloaded locally (SVGs correctly named .svg). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-12 17:14:50 +08:00
<!-- Bottom row -->
<div class="flex gap-[20px] items-center overflow-clip w-full">
<p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">© 2026 TalkPro. All rights reserved.</p>
<div class="flex-1 min-w-0"></div>
<p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Terms of Use · Privacy Policy · Support</p>
</div>
feat: add Footer component
2026-05-12 16:34:58 +08:00
</div>
</footer>
Reference in New Issue Copy Permalink