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

69
src/components/Hero.astro
View File

@@ -1,57 +1,56 @@
---
import type { Translations } from '../i18n/translations'
export interface Props {
t: Translations['hero']
}
const { t } = Astro.props
const heroBg = "/assets/hero-bg.png";
const phoneMockup = "/assets/hero-phone.png";
---
<section id="hero" class="relative w-full flex items-start justify-center min-h-[600px] lg:h-[891px] overflow-hidden">
<img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />
<section id="hero" class="hero">
<img alt="" class="hero__bg" src={heroBg} />
<div class="relative flex flex-col-reverse lg:flex-row gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0 h-full">
<!-- Phone mockup -->
<div class="hidden lg: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 class="hero__inner">
<div class="hero__phone-column">
<div class="hero__phone-frame">
<div class="hero__phone-crop">
<img alt={t.phoneAlt} class="hero__phone" src={phoneMockup} />
</div>
</div>
</div>
<!-- Hero copy -->
<div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-full lg:w-[660px] py-8 lg:py-[80px]">
<!-- 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">✦&nbsp; Available on iOS and Android</p>
<div class="hero__content">
<div class="hero__badge">
<p class="hero__badge-text">{t.badge}</p>
</div>
<div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
<div class="font-bold text-[#2e2a28] text-[40px] md:text-[56px] lg: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 class="hero__copy">
<div class="hero__title">
<p class="hero__title-line">{t.titleLine1}</p>
<p class="hero__title-line">{t.titleLine2}</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 class="hero__description">
{t.description}
</p>
<div class="flex flex-wrap 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>
<div class="hero__actions">
<a href="#download" class="hero__button hero__button--primary">
<span class="hero__button-label">{t.download}</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 href="#features" class="hero__button hero__button--secondary">
<span class="hero__button-label">{t.explore}</span>
</a>
</div>
</div>
<!-- Tags -->
<div class="flex flex-wrap 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 class="hero__tags">
{t.tags.map(tag => (
<div class="hero__tag">
<span class="hero__tag-text">{tag}</span>
</div>
))}
</div>
</div>
</div>