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

80
src/components/Experience.astro
View File

@@ -1,64 +1,44 @@
---
import type { Translations } from '../i18n/translations'
export interface Props {
t: Translations['experience']
}
const { t } = Astro.props
const images = ["/assets/exp-card-1.png", "/assets/exp-card-2.png", "/assets/exp-card-3.png"]
const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
---
<section id="experience" 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-center justify-center w-full max-w-[1008px] mx-auto px-4 lg:px-0">
<p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
A Cleaner, More Comfortable Messaging Experience
<section id="experience" class="experience">
<div class="experience__inner">
<p class="experience__title">
{t.title}
</p>
<div class="flex flex-col items-start w-full">
<!-- 3 cards row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
<!-- Card 1: Clear Interface -->
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] w-full">
<div class="relative h-[232px] shrink-0 w-full">
<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] items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] w-full">
<div class="bg-[#ffeddf] flex flex-col items-start w-full">
<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 class="experience__body">
<div class="experience__grid">
{t.cards.map((card, index) => (
<div class="experience-card">
<div class={`experience-card__media ${index > 0 ? 'experience-card__media--tinted' : ''}`}>
<div class="experience-card__media-crop">
<img
alt={card.alt}
class={`experience-card__image ${imageClasses[index]}`}
src={images[index]}
/>
</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] items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] w-full">
<div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip w-full">
<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 class="experience-card__copy">
<p class="experience-card__title">{card.title}</p>
<p class="experience-card__description">{card.desc}</p>
</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 class="experience__caption">
{t.caption}
</p>
</div>
</div>