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>
This commit is contained in:
TerryM
93
src/components/AppPreview.astro
Normal file
93
src/components/AppPreview.astro
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
const slides = [
|
||||
"/assets/preview-phone.png",
|
||||
"/assets/preview-phone.png",
|
||||
"/assets/preview-phone.png",
|
||||
]
|
||||
---
|
||||
|
||||
<section class="bg-[#fef0eb] w-full flex flex-col gap-[60px] items-center pt-[120px] px-[130px] overflow-hidden">
|
||||
<!-- Heading -->
|
||||
<div class="flex flex-col gap-[40px] items-start overflow-clip w-[940px]">
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
|
||||
A Familiar App Experience, Reimagined with a Modern Look
|
||||
</p>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
|
||||
TalkPro keeps the communication experience familiar while refining the visual layer with updated icons, colors, spacing, and interface details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Carousel -->
|
||||
<div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">
|
||||
|
||||
<!-- Left phone -->
|
||||
<div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
|
||||
<img id="phone-left" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[slides.length - 1]} />
|
||||
</div>
|
||||
|
||||
<!-- Prev button -->
|
||||
<div class="flex items-end self-stretch shrink-0">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<button id="btn-prev" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
|
||||
<img alt="Previous" class="block size-[24px]" src="/assets/preview-arrow-left.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center phone -->
|
||||
<div class="relative h-[542px] w-[459px] shrink-0 overflow-hidden pointer-events-none">
|
||||
<img id="phone-center" alt="TalkPro app preview" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[0]} />
|
||||
</div>
|
||||
|
||||
<!-- Next button -->
|
||||
<div class="flex items-end self-stretch shrink-0">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<button id="btn-next" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
|
||||
<img alt="Next" class="block size-[24px] rotate-180" src="/assets/preview-arrow-right.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right phone -->
|
||||
<div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
|
||||
<img id="phone-right" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[1]} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const slides: string[] = (window as any).__carouselSlides || [];
|
||||
|
||||
// Read slides injected via data attribute
|
||||
const carousel = document.getElementById('carousel')!;
|
||||
const allSlides: string[] = JSON.parse(carousel.dataset.slides || '[]');
|
||||
|
||||
const leftImg = document.getElementById('phone-left') as HTMLImageElement;
|
||||
const centerImg = document.getElementById('phone-center') as HTMLImageElement;
|
||||
const rightImg = document.getElementById('phone-right') as HTMLImageElement;
|
||||
const btnPrev = document.getElementById('btn-prev')!;
|
||||
const btnNext = document.getElementById('btn-next')!;
|
||||
|
||||
let current = 0;
|
||||
|
||||
function mod(n: number, m: number) { return ((n % m) + m) % m; }
|
||||
|
||||
function transition(next: number) {
|
||||
[leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '0');
|
||||
setTimeout(() => {
|
||||
current = mod(next, allSlides.length);
|
||||
leftImg.src = allSlides[mod(current - 1, allSlides.length)];
|
||||
centerImg.src = allSlides[current];
|
||||
rightImg.src = allSlides[mod(current + 1, allSlides.length)];
|
||||
[leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '1');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
btnPrev.addEventListener('click', () => transition(current - 1));
|
||||
btnNext.addEventListener('click', () => transition(current + 1));
|
||||
</script>
|
||||
|
||||
<script define:vars={{ slides }}>
|
||||
document.getElementById('carousel').dataset.slides = JSON.stringify(slides);
|
||||
</script>
|
||||
@@ -1,44 +1,66 @@
|
||||
---
|
||||
const halftone = "/assets/core-halftone-bg.png";
|
||||
const iconPrivate = "/assets/core-icon-private.png";
|
||||
const iconGroups = "/assets/core-icon-groups.png";
|
||||
const iconChannels = "/assets/core-icon-channels.png";
|
||||
const iconVoice = "/assets/core-icon-voice.png";
|
||||
const iconVideo = "/assets/core-icon-video.png";
|
||||
const iconMedia = "/assets/core-icon-media.png";
|
||||
|
||||
const cards = [
|
||||
{ img: '/assets/icon-messaging.png', title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
|
||||
{ img: '/assets/icon-groups.png', title: 'Group Chats', desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
|
||||
{ img: '/assets/icon-channels.png', title: 'Channels', desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
|
||||
{ img: '/assets/icon-voice.png', title: 'Voice Calls', desc: 'Talk in real time whenever messages are not enough.' },
|
||||
{ img: '/assets/icon-video.png', title: 'Video Calls', desc: 'Connect face-to-face with a simple and reliable video call experience.' },
|
||||
{ img: '/assets/icon-media.png', title: 'Media Sharing', desc: 'Share photos, videos, files, and updates in your conversations.' },
|
||||
{ img: iconPrivate, title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
|
||||
{ img: iconGroups, title: 'Group Chats', desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
|
||||
{ img: iconChannels, title: 'Channels', desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
|
||||
{ img: iconVoice, title: 'Voice Calls', desc: 'Talk in real time whenever messages are not enough.' },
|
||||
{ img: iconVideo, title: 'Video Calls', desc: 'Connect face-to-face with a simple and reliable video call experience.' },
|
||||
{ img: iconMedia, title: 'Media Sharing', desc: 'Share photos, videos, files, and updates in your conversations.' },
|
||||
]
|
||||
const rows = [cards.slice(0, 3), cards.slice(3)]
|
||||
---
|
||||
|
||||
<section class="flex flex-col items-center px-[130px] py-[110px] max-w-[1440px] mx-auto">
|
||||
<div class="flex flex-col items-center pb-[60px] w-full">
|
||||
<p class="font-bold text-brand text-[13px] tracking-[-0.04px]">CORE SYSTEM</p>
|
||||
<div class="h-[15px]"></div>
|
||||
<div class="font-bold text-text-primary text-[52px] text-center tracking-[-1.16px] leading-[0.96]">
|
||||
<p>Built for how modern</p>
|
||||
<p>communication actually works.</p>
|
||||
<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-[120px] overflow-hidden">
|
||||
<!-- Background halftone -->
|
||||
<img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[1319px] w-[2363px] object-cover pointer-events-none opacity-20" src={halftone} />
|
||||
|
||||
<!-- Section header -->
|
||||
<div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip px-[180px] w-[1280px]">
|
||||
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
|
||||
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">CORE FEATURES</span>
|
||||
</div>
|
||||
<div class="h-5"></div>
|
||||
<p class="text-text-secondary text-[18px] font-normal leading-[1.5] text-center tracking-[-0.26px] max-w-[900px]">
|
||||
Different identities, different conversations, and different privacy levels should not be forced into one flat interface. Talk Pro lets them exist in order inside one platform.
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
|
||||
Different identities, different conversations, and different privacy levels should not be forced into one flat interface. TalkPro lets them exist in order inside one platform.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-[22px] w-[1280px]">
|
||||
{rows.map((row) => (
|
||||
<div class="flex gap-[22px]">
|
||||
{row.map((card) => (
|
||||
<div class="flex-1 flex flex-col items-center bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8">
|
||||
<div class="size-[240px] shrink-0 overflow-hidden rounded-2xl">
|
||||
<img src={card.img} alt={card.title} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="h-[22px]"></div>
|
||||
<p class="font-bold text-text-primary text-[25px] tracking-[-0.5px] w-full">{card.title}</p>
|
||||
<div class="h-[14px]"></div>
|
||||
<p class="text-text-secondary text-[15px] font-normal leading-[1.5] tracking-[-0.13px] w-full">{card.desc}</p>
|
||||
<!-- Card grid -->
|
||||
<div class="relative flex flex-col gap-[22px] items-start w-[1280px]">
|
||||
<!-- Row 1 -->
|
||||
<div class="flex gap-[22px] items-start w-full">
|
||||
{cards.slice(0, 3).map(card => (
|
||||
<div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
|
||||
<div class="relative shrink-0 size-[160px] overflow-hidden">
|
||||
<img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div class="flex flex-col gap-[12px] items-start text-center w-full">
|
||||
<p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
|
||||
<p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="flex gap-[22px] items-center w-full">
|
||||
{cards.slice(3).map(card => (
|
||||
<div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
|
||||
<div class="relative shrink-0 size-[160px] overflow-hidden">
|
||||
<img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
|
||||
</div>
|
||||
<div class="flex flex-col gap-[12px] items-start text-center w-full">
|
||||
<p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
|
||||
<p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,39 +1,59 @@
|
||||
---
|
||||
const bgPattern = "/assets/cta-bg-pattern.png";
|
||||
const talkproLogo = "/assets/cta-talkpro-logo.png";
|
||||
const androidIcon = "/assets/cta-android-icon.svg";
|
||||
const appleIcon = "/assets/cta-apple-icon.svg";
|
||||
const phoneArt = "/assets/cta-phone-art.png";
|
||||
---
|
||||
|
||||
<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
|
||||
<div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
|
||||
<p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
|
||||
<div class="h-[15px]"></div>
|
||||
<div class="font-bold text-text-primary text-[44px] text-center tracking-[-2.2px] leading-[1.04] max-w-[1076px]">
|
||||
<p>Start with one conversation.</p>
|
||||
<p>Build your own communication space.</p>
|
||||
</div>
|
||||
<div class="h-5"></div>
|
||||
<p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
|
||||
Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
|
||||
</p>
|
||||
<div class="h-8"></div>
|
||||
<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden h-[600px]">
|
||||
<!-- Background pattern -->
|
||||
<img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[923px] w-full max-w-[1920px] pointer-events-none" src={bgPattern} />
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<!-- Android badge -->
|
||||
<div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
|
||||
<img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
|
||||
<div class="flex flex-col gap-[3px]">
|
||||
<p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
|
||||
<p class="font-bold text-white text-[15px]">Download APK</p>
|
||||
</div>
|
||||
<div class="relative flex items-center w-[1280px]">
|
||||
<!-- Left: download panel -->
|
||||
<div class="flex flex-1 flex-col gap-[36px] items-start justify-center min-w-0 overflow-clip">
|
||||
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
|
||||
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">DOWNLOAD</span>
|
||||
</div>
|
||||
|
||||
<!-- iOS badge -->
|
||||
<div class="bg-[rgba(18,18,18,0.94)] border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
|
||||
<div class="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
|
||||
<img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
|
||||
<div class="flex flex-col gap-[16px] items-start w-full">
|
||||
<div class="flex gap-[20px] items-start shrink-0">
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] whitespace-nowrap">Download</p>
|
||||
<div class="relative shrink-0 h-[72px] w-[188px]">
|
||||
<img alt="TalkPro" class="absolute inset-0 block max-w-none size-full" src={talkproLogo} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[3px]">
|
||||
<p class="font-bold text-[#ccc] text-[11px] tracking-[0.66px]">IOS</p>
|
||||
<p class="font-bold text-white text-[15px]">Coming on App Store</p>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] max-w-[542px]">
|
||||
Download TalkPro and experience a cleaner, simpler, and more modern way to stay connected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Store badges -->
|
||||
<div class="flex gap-[16px] items-center overflow-clip shrink-0">
|
||||
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
|
||||
<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>
|
||||
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Right: phone art -->
|
||||
<div class="relative shrink-0 h-[510px] w-[418px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="TalkPro on phone" class="absolute h-[136.1%] left-[3.8%] max-w-none top-[-18.05%] w-[92.43%]" src={phoneArt} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
65
src/components/Experience.astro
Normal file
65
src/components/Experience.astro
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
---
|
||||
|
||||
<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
|
||||
<div class="flex flex-col gap-[40px] items-center justify-center w-[1008px]">
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
|
||||
A Cleaner, More Comfortable Messaging Experience
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col items-start w-full">
|
||||
<!-- 3 cards row -->
|
||||
<div class="flex gap-[24px] h-[477px] items-center w-full shrink-0">
|
||||
|
||||
<!-- Card 1: Clear Interface -->
|
||||
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
|
||||
<div class="relative h-[232px] shrink-0 w-[320px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="Clear interface screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-58.58%] w-full" src="/assets/exp-card-1.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Clear Interface</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A clean layout that makes conversations easy to follow.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Smooth Navigation -->
|
||||
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
|
||||
<div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-[320px]">
|
||||
<div class="relative h-[232px] shrink-0 w-full">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="Smooth navigation screenshot" class="absolute h-[411.28%] left-[-5.95%] max-w-none top-[-335.6%] w-[137.79%]" src="/assets/exp-card-2.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Smooth Navigation</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Move between chats, groups, and channels with familiar controls.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Refined Visual Design -->
|
||||
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
|
||||
<div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-[320px]">
|
||||
<div class="flex-1 min-h-0 relative w-full">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="Refined visual design screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-99.23%] w-full" src="/assets/exp-card-3.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Refined Visual Design</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Modern icons, colors, and interface details create a more polished experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer caption -->
|
||||
<p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full mt-0">
|
||||
TalkPro is designed with clarity in mind. Every screen is built to help users focus on their conversations, reduce distractions, and move naturally between chats, groups, channels, and calls.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,42 +1,65 @@
|
||||
---
|
||||
const columns: Record<string, string[]> = {
|
||||
Product: ['Features', 'Product', 'Download'],
|
||||
Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
|
||||
Company: ['About', 'Support', 'Contact'],
|
||||
}
|
||||
const logoFull = "/assets/footer-logo.png";
|
||||
const androidIcon = "/assets/footer-android-icon.svg";
|
||||
const appleIcon = "/assets/footer-apple-icon.svg";
|
||||
---
|
||||
|
||||
<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>
|
||||
<footer class="bg-[#fef0eb] w-full flex flex-col items-center justify-center py-[120px]">
|
||||
<div class="flex flex-col gap-[36px] items-start w-[1280px]">
|
||||
<!-- Top row -->
|
||||
<div class="flex items-start justify-between w-full">
|
||||
<!-- 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 -->
|
||||
<div class="flex gap-[16px] items-center overflow-clip shrink-0">
|
||||
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
|
||||
<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>
|
||||
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
<!-- Divider -->
|
||||
<div class="w-full h-px bg-[#e3d9d1]"></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>
|
||||
<!-- 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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,28 +1,41 @@
|
||||
---
|
||||
const logoIcon = "/assets/header-logo-icon.png";
|
||||
const logoWordmark = "/assets/header-logo-wordmark.svg";
|
||||
const globeIcon = "/assets/header-globe.svg";
|
||||
---
|
||||
|
||||
<header class="fixed top-0 left-0 w-full h-[78px] bg-[rgba(248,243,238,0.84)] border-b border-border-light backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
<div class="w-[1280px] flex items-center">
|
||||
<div class="flex-1">
|
||||
<a href="/" class="flex items-center gap-2 w-fit">
|
||||
<img src="/assets/logo-icon.png" alt="Talk Pro icon" class="h-[42px] w-[53px] object-cover" />
|
||||
<img src="/assets/logo-wordmark.png" alt="Talk Pro" class="h-6" />
|
||||
<header class="bg-white border-b border-[#e3d9d1] w-full flex items-center justify-center h-[72px] sticky top-0 z-50">
|
||||
<div class="flex items-center w-[1280px]">
|
||||
<!-- Logo -->
|
||||
<div class="flex flex-1 items-center min-w-0">
|
||||
<a href="/" class="relative h-[42px] w-[143px] shrink-0 block">
|
||||
<div class="absolute h-[42px] left-0 top-0 w-[53px] overflow-hidden">
|
||||
<img alt="TalkPro icon" class="absolute h-[126.98%] left-0 max-w-none top-[-13.49%] w-full" src={logoIcon} />
|
||||
</div>
|
||||
<div class="absolute inset-[26.97%_0_7.92%_45.45%]">
|
||||
<img alt="TalkPro" class="absolute block inset-0 max-w-none size-full" src={logoWordmark} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center gap-7 font-bold text-[14px] text-text-secondary tracking-[-0.09px]">
|
||||
<a href="#" class="hover:text-text-primary transition-colors">Home</a>
|
||||
<a href="#" class="hover:text-text-primary transition-colors">Features</a>
|
||||
<a href="#" class="hover:text-text-primary transition-colors">Product</a>
|
||||
<a href="#" class="hover:text-text-primary transition-colors">Privacy</a>
|
||||
<a href="#" class="hover:text-text-primary transition-colors">About</a>
|
||||
<!-- Nav -->
|
||||
<nav class="flex items-center gap-[32px] shrink-0">
|
||||
<a href="#" class="font-semibold text-[14px] text-[#f28a4b] tracking-[-0.09px] whitespace-nowrap leading-normal">Home</a>
|
||||
<a href="#features" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Features</a>
|
||||
<a href="#experience" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Experience</a>
|
||||
<a href="#use-cases" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Use Cases</a>
|
||||
<a href="#reliability" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Reliability</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1 flex justify-end">
|
||||
<button class="bg-brand text-white font-bold text-[14px] px-[22px] py-[13px] rounded-[17px] hover:opacity-90 transition-opacity">
|
||||
Download
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-1 gap-[12px] items-center justify-end min-w-0">
|
||||
<button class="border border-[rgba(46,42,40,0.3)] flex gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
|
||||
<img alt="Language" class="block size-[26px] object-contain" src={globeIcon} />
|
||||
<span class="font-semibold text-[14px] text-[#2e2a28] tracking-[-0.09px] whitespace-nowrap leading-[14px]">EN</span>
|
||||
</button>
|
||||
<a href="#download" class="bg-[#f28a4b] flex items-center justify-center px-[22px] py-[13px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
|
||||
<span class="font-bold text-[14px] text-white leading-normal whitespace-nowrap">Download</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-[78px]"></div>
|
||||
|
||||
@@ -1,82 +1,58 @@
|
||||
---
|
||||
const floatCards = [
|
||||
{
|
||||
icon: '☷',
|
||||
title: 'Work / Private / Protected',
|
||||
desc: 'One account, multiple communication worlds.',
|
||||
pos: 'left-[-40px] top-[75.5px]',
|
||||
},
|
||||
{
|
||||
icon: '✦',
|
||||
title: 'AI Summary Ready',
|
||||
desc: 'Long conversations and group highlights organized automatically.',
|
||||
pos: 'left-[180px] top-[270px]',
|
||||
},
|
||||
{
|
||||
icon: '◌',
|
||||
title: 'Protected Hidden Space',
|
||||
desc: 'When privacy needs more, enter a protected space.',
|
||||
pos: 'left-[20px] top-[540px]',
|
||||
},
|
||||
]
|
||||
const heroBg = "/assets/hero-bg.png";
|
||||
const phoneMockup = "/assets/hero-phone.png";
|
||||
---
|
||||
|
||||
<section class="relative w-full overflow-hidden">
|
||||
<img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />
|
||||
<section class="relative w-full flex items-start justify-center h-[891px] overflow-hidden">
|
||||
<img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />
|
||||
|
||||
<div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
|
||||
<!-- Left column -->
|
||||
<div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
|
||||
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦ Available on iOS and Android</p>
|
||||
<div class="relative flex gap-[40px] items-start w-[1280px] h-full">
|
||||
<!-- Phone mockup -->
|
||||
<div class="flex flex-1 items-center min-w-0 pt-[60px] h-full">
|
||||
<div class="relative w-full" style="aspect-ratio: 673/1108;">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
|
||||
</div>
|
||||
|
||||
<div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
|
||||
<p>One User.</p>
|
||||
<p>Multiple Worlds.</p>
|
||||
</div>
|
||||
|
||||
<p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
|
||||
Talk Pro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, Talk Pro helps people stay connected in one familiar experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-[14px]">
|
||||
<button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
|
||||
Download Talk Pro ↓
|
||||
</button>
|
||||
<button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
|
||||
Explore Features →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-[10px]">
|
||||
{['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
|
||||
<div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
|
||||
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone mockup -->
|
||||
<div class="relative h-[690px] w-[430px] shrink-0">
|
||||
<div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
|
||||
<img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
|
||||
<!-- Hero copy -->
|
||||
<div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-[660px]">
|
||||
<!-- Pill -->
|
||||
<div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
|
||||
<p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦ Available on iOS and Android</p>
|
||||
</div>
|
||||
|
||||
{floatCards.map((card) => (
|
||||
<div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
|
||||
<div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
|
||||
<span class="text-brand font-bold text-[18px]">{card.icon}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
|
||||
<p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
|
||||
<div class="font-bold text-[#2e2a28] text-[72px] tracking-[-1.61px] w-full">
|
||||
<p class="leading-[1.1] mb-0">A Modern Way to</p>
|
||||
<p class="leading-[1.1]">Stay Connected</p>
|
||||
</div>
|
||||
))}
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
|
||||
TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
|
||||
</p>
|
||||
<div class="flex gap-[14px] items-center overflow-clip shrink-0">
|
||||
<a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
|
||||
<span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro ↓</span>
|
||||
</a>
|
||||
<a href="#features" class="bg-[rgba(255,255,255,0.55)] border border-[#e3d9d1] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-white transition-colors">
|
||||
<span class="font-bold text-[#2e2a28] text-[15px] tracking-[-0.13px] leading-normal">Explore Features →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="flex gap-[10px] items-center overflow-clip shrink-0">
|
||||
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
|
||||
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
|
||||
</div>
|
||||
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
|
||||
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">AI Native Messaging</span>
|
||||
</div>
|
||||
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
|
||||
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Adaptive Privacy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
96
src/components/Trust.astro
Normal file
96
src/components/Trust.astro
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
---
|
||||
|
||||
<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center p-[120px]">
|
||||
<div class="flex flex-col gap-[40px] items-start w-[1280px]">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
|
||||
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
|
||||
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">RELIABILITY</span>
|
||||
</div>
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
|
||||
TalkPro is designed with a privacy-conscious approach and a focus on dependable communication. The app keeps the user experience simple while supporting the core communication features people expect from a modern messaging platform.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 4-column feature row -->
|
||||
<div class="flex gap-[24px] items-center justify-center w-full">
|
||||
|
||||
<!-- Card 1: Privacy-Conscious Design -->
|
||||
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
|
||||
<div class="relative shrink-0 size-[128px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="" class="absolute h-[174.55%] left-[-31.48%] max-w-none top-[7.04%] w-[312.73%]" src="/assets/trust-icon-sprite.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[8px] items-start w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Privacy-Conscious Design</p>
|
||||
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Built with careful consideration for user communication and data handling.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="relative h-[118px] shrink-0 w-0">
|
||||
<div class="absolute inset-[0_-0.5px]">
|
||||
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Minimal and Focused -->
|
||||
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
|
||||
<div class="relative shrink-0 size-[128px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="" class="absolute h-[187.32%] left-[-164.72%] max-w-none top-[3.1%] w-[335.61%]" src="/assets/trust-icon-sprite.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[8px] items-start w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Minimal and Focused</p>
|
||||
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Designed around essential messaging features without unnecessary complexity.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="relative h-[118px] shrink-0 w-0">
|
||||
<div class="absolute inset-[0_-0.5px]">
|
||||
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Reliable Experience -->
|
||||
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
|
||||
<div class="relative shrink-0 size-[128px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="" class="absolute h-[211.46%] left-[-187.93%] max-w-none top-[-105.62%] w-[378.86%]" src="/assets/trust-icon-sprite.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[8px] items-start w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Reliable Experience</p>
|
||||
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Focused on providing a stable and familiar communication experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="relative h-[118px] shrink-0 w-0">
|
||||
<div class="absolute inset-[0_-0.5px]">
|
||||
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4: Continuous Improvement -->
|
||||
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
|
||||
<div class="relative shrink-0 size-[128px]">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<img alt="" class="absolute left-[4.14%] max-w-none size-full top-0" src="/assets/trust-icon-improvement.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[8px] items-start w-full">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Continuous Improvement</p>
|
||||
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">TalkPro will continue to improve its interface, features, and overall user experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,31 +1,39 @@
|
||||
---
|
||||
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.' },
|
||||
const rows = [
|
||||
{ title: 'Personal Conversations', desc: 'Message friends, family, and close contacts in a simple private chat experience.' },
|
||||
{ title: 'Communities', desc: 'Join group conversations and stay active in shared interest spaces.' },
|
||||
{ title: 'Teams and Projects', desc: 'Coordinate discussions, updates, and quick decisions in group chats.' },
|
||||
{ title: 'News and Updates', desc: 'Follow channels for announcements, information, and community content.' },
|
||||
]
|
||||
---
|
||||
|
||||
<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>
|
||||
<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center px-[130px] py-[120px]">
|
||||
<div class="flex gap-[40px] items-center w-[1280px]">
|
||||
<!-- Left: heading -->
|
||||
<div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-[540px]">
|
||||
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
|
||||
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">USE CASES</span>
|
||||
</div>
|
||||
))}
|
||||
<p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
|
||||
Made for Personal, Social, and Community Communication
|
||||
</p>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
|
||||
With separate spaces for every context, TalkPro keeps your personal, social, and professional communications distinct and organized.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: rows -->
|
||||
<div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
|
||||
{rows.map(row => (
|
||||
<div class="bg-[#faede8] flex h-[120px] items-center overflow-clip w-full shrink-0">
|
||||
<div class="bg-[#f08458] flex h-full items-center px-[36px] py-[24px] shrink-0 w-[300px]">
|
||||
<p class="flex-1 font-semibold text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
|
||||
</div>
|
||||
<div class="bg-white flex flex-1 h-full items-center min-w-0 px-[36px] py-[24px]">
|
||||
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
89
src/components/WhyTalkPro.astro
Normal file
89
src/components/WhyTalkPro.astro
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
const underline = "/assets/why-underline.svg";
|
||||
const iconSimple = "/assets/why-icon-simple.svg";
|
||||
const iconFamiliar = "/assets/why-icon-familiar.svg";
|
||||
const iconConn = "/assets/why-icon-connected.svg";
|
||||
const iconModern = "/assets/why-icon-modern.svg";
|
||||
---
|
||||
|
||||
<section class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
|
||||
<div class="flex flex-col gap-[40px] items-start w-[1280px]">
|
||||
|
||||
<!-- Header row -->
|
||||
<div class="flex gap-[36px] items-start overflow-clip w-full">
|
||||
<!-- Left: pill + heading + description -->
|
||||
<div class="flex flex-1 flex-col gap-[36px] items-start min-w-0">
|
||||
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
|
||||
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">WHY TALKPRO</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[24px] items-start w-full">
|
||||
<div class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] w-full">
|
||||
<p class="leading-[1.2] mb-0">Designed for the Way</p>
|
||||
<p class="leading-[1.2]">People Communicate Today</p>
|
||||
</div>
|
||||
<!-- Underline decoration -->
|
||||
<div class="relative h-0 w-[295.5px] shrink-0">
|
||||
<div class="absolute inset-[-0.5px_0]">
|
||||
<img alt="" class="block max-w-none size-full" src={underline} />
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
|
||||
Communication today happens across personal conversations, communities, work groups, and content channels. TalkPro brings these essential communication experiences together in a simple and familiar interface, making it easier for users to connect, share, and stay updated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: illustration -->
|
||||
<div class="relative shrink-0 size-[480px]">
|
||||
<img alt="People communicating with TalkPro" class="absolute inset-0 size-full object-contain" src="/assets/why-illustration.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2×2 card grid -->
|
||||
<div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
|
||||
<!-- Row 1 -->
|
||||
<div class="flex gap-[24px] items-center w-full">
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block size-[44px]" src={iconSimple} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="flex gap-[24px] items-center w-full">
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block size-[44px]" src={iconConn} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@@ -2,8 +2,12 @@
|
||||
import Base from '../layouts/Base.astro'
|
||||
import Header from '../components/Header.astro'
|
||||
import Hero from '../components/Hero.astro'
|
||||
import WhyTalkPro from '../components/WhyTalkPro.astro'
|
||||
import CoreSystem from '../components/CoreSystem.astro'
|
||||
import Experience from '../components/Experience.astro'
|
||||
import UseCases from '../components/UseCases.astro'
|
||||
import Trust from '../components/Trust.astro'
|
||||
import AppPreview from '../components/AppPreview.astro'
|
||||
import DownloadCTA from '../components/DownloadCTA.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
---
|
||||
@@ -11,8 +15,12 @@ import Footer from '../components/Footer.astro'
|
||||
<Base>
|
||||
<Header />
|
||||
<Hero />
|
||||
<WhyTalkPro />
|
||||
<CoreSystem />
|
||||
<Experience />
|
||||
<UseCases />
|
||||
<Trust />
|
||||
<AppPreview />
|
||||
<DownloadCTA />
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
Reference in New Issue
Block a user