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

fix(style): Seperate CSS style to src\styles

Browse Source
This commit is contained in:
SeekingGamer
2026-05-13 13:46:21 +08:00
parent 93049e9044
commit dbda554d28
13 changed files with 472 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/WhyTalkPro.astro
View File

@@ -1,83 +1,61 @@
---
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";
import type { Translations } from '../i18n/translations'
export interface Props {
t: Translations['why']
}
const { t } = Astro.props
const underline = "/assets/why-underline.svg";
const icons = [
"/assets/why-icon-simple.svg",
"/assets/why-icon-familiar.svg",
"/assets/why-icon-connected.svg",
"/assets/why-icon-modern.svg",
]
const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-card__icon--square', 'why-card__icon--modern']
---
<section class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
<div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">
<!-- Header row -->
<div class="flex flex-col lg:flex-row 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>
<section class="why">
<div class="why__inner">
<div class="why__intro">
<div class="why__copy">
<div class="section-eyebrow">
<span class="section-eyebrow__text">{t.eyebrow}</span>
</div>
<div class="flex flex-col gap-[24px] items-start w-full">
<div class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg: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 class="why__text">
<div class="why__title">
<p class="why__title-line">{t.titleLine1}</p>
<p class="why__title-line">{t.titleLine2}</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 class="why__underline">
<div class="why__underline-frame">
<img alt="" class="why__underline-image" 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 class="why__description">
{t.description}
</p>
</div>
</div>
<!-- Right: illustration -->
<div class="hidden lg:block 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 class="why__illustration">
<img alt={t.illustrationAlt} class="why__illustration-image" src="/assets/why-illustration.png" />
</div>
</div>
<!-- 2×2 card grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
<div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
<img alt="" class="block size-[44px]" src={iconSimple} />
<div class="why__grid">
{t.cards.map((card, index) => (
<div class="why-card">
<div class="why-card__icon-frame">
<img alt="" class={`why-card__icon ${iconClasses[index]}`} src={icons[index]} />
</div>
<div class="why-card__copy">
<p class="why-card__title">{card.title}</p>
<p class="why-card__description">{card.desc}</p>
</div>
</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 gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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 class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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 gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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>
</section>