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

fix(feat): Rearrange the element to fix the responsive layout

Browse Source
This commit is contained in:
SeekingGamer
2026-05-14 17:58:14 +08:00
parent c587df063b
commit a8474fd208
11 changed files with 768 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Footer.astro
View File

@@ -7,8 +7,6 @@ export interface Props {
const { t } = Astro.props
const logoFull = "/assets/footer-logo.png";
const androidIcon = "/assets/footer-android-icon.svg";
const appleIcon = "/assets/footer-apple-icon.svg";
---
<footer class="site-footer">
@@ -21,37 +19,6 @@ const appleIcon = "/assets/footer-apple-icon.svg";
<p class="site-footer__description">
{t.description}
</p>
<div class="store-badges">
<div class="store-badge store-badge--android">
<img alt="Android" class="store-badge__icon" src={androidIcon} />
<div class="store-badge__copy">
<p class="store-badge__platform">{t.android}</p>
<p class="store-badge__label">{t.androidCta}</p>
</div>
</div>
<div class="store-badge store-badge--ios">
<div class="store-badge__icon-frame">
<img alt="Apple" class="store-badge__apple-icon" src={appleIcon} />
</div>
<div class="store-badge__copy">
<p class="store-badge__platform">{t.ios}</p>
<p class="store-badge__label">{t.iosCta}</p>
</div>
</div>
</div>
</div>
<div class="site-footer__links">
<div class="site-footer__link-column">
<a href="#download" class="site-footer__link">{t.links.download}</a>
<a href="#features" class="site-footer__link">{t.links.features}</a>
<a href="#" class="site-footer__link">{t.links.about}</a>
</div>
<div class="site-footer__link-column">
<p class="site-footer__text site-footer__text--heading">{t.links.contact}</p>
<p class="site-footer__text">{t.email}</p>
<p class="site-footer__text">{t.phone}</p>
</div>
</div>
</div>

12
src/components/WhyTalkPro.astro
View File

@@ -40,7 +40,17 @@ const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-
</div>
<div class="why__illustration">
<img alt={t.illustrationAlt} class="why__illustration-image" src="/assets/why-illustration.png" />
<video
aria-label={t.illustrationAlt}
class="why__illustration-image"
autoplay
loop
muted
playsinline
preload="metadata"
>
<source src="/assets/why-illustration.mp4" type="video/mp4" />
</video>
</div>
</div>