diff --git a/src/components/AppPreview.astro b/src/components/AppPreview.astro index 5d8139e..9486a8a 100644 --- a/src/components/AppPreview.astro +++ b/src/components/AppPreview.astro @@ -1,11 +1,4 @@ --- -import type { Translations } from '../i18n/translations' - -export interface Props { - t: Translations['preview'] -} - -const { t } = Astro.props const slides = [ "/assets/preview-phone.png", "/assets/preview-phone.png", @@ -13,56 +6,68 @@ const slides = [ ] --- -
-
-

- {t.title} +

+ +
+

+ A Familiar App Experience, Reimagined with a Modern Look

-

- {t.description} +

+ TalkPro keeps the communication experience familiar while refining the visual layer with updated icons, colors, spacing, and interface details.

-
-
- + +
diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 9ba8664..54ae3d9 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -1,56 +1,57 @@ --- -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"; --- -
- +
+ -
-
-
-
- {t.phoneAlt} +
+ + -
-
-

{t.badge}

+ +
+ +
+

✦  Available on iOS and Android

-
-
-

{t.titleLine1}

-

{t.titleLine2}

+
+
+

A Modern Way to

+

Stay Connected

-

- {t.description} +

+ 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.

-
- - {t.download} +
+ + Download TalkPro ↓ - - {t.explore} + + Explore Features →
-
- {t.tags.map(tag => ( -
- {tag} -
- ))} + +
+
+ Identity Layer +
+
+ AI Native Messaging +
+
+ Adaptive Privacy +
diff --git a/src/components/Trust.astro b/src/components/Trust.astro index 463ca91..26a8c40 100644 --- a/src/components/Trust.astro +++ b/src/components/Trust.astro @@ -1,58 +1,96 @@ --- -import type { Translations } from '../i18n/translations' - -export interface Props { - t: Translations['trust'] -} - -const { t } = Astro.props -const iconClasses = [ - 'trust-card__icon--one', - 'trust-card__icon--two', - 'trust-card__icon--three', - 'trust-card__icon--four', -] --- -
-
-
-
- {t.eyebrow} +
+
+ + +
+
+ RELIABILITY
-

{t.title}

-

- {t.description} +

Built with User Trust in Mind

+

+ 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.

-
- {t.cards.map((card, index) => ( - <> -
-
-
- -
-
-
-

{card.title}

-

{card.desc}

-
+ +
+ + +
+
+
+
- {index < t.cards.length - 1 && ( -
-
- -
-
- )} - - ))} +
+
+

Privacy-Conscious Design

+

Built with careful consideration for user communication and data handling.

+
+
+ + + + + +
+
+
+ +
+
+
+

Minimal and Focused

+

Designed around essential messaging features without unnecessary complexity.

+
+
+ + + + + +
+
+
+ +
+
+
+

Reliable Experience

+

Focused on providing a stable and familiar communication experience.

+
+
+ + + + + +
+
+
+ +
+
+
+

Continuous Improvement

+

TalkPro will continue to improve its interface, features, and overall user experience.

+
+
+
diff --git a/src/components/UseCases.astro b/src/components/UseCases.astro index 2b1a17f..aa2dc7c 100644 --- a/src/components/UseCases.astro +++ b/src/components/UseCases.astro @@ -1,35 +1,36 @@ --- -import type { Translations } from '../i18n/translations' - -export interface Props { - t: Translations['useCases'] -} - -const { t } = Astro.props +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.' }, +] --- -
-
-
-
- {t.eyebrow} +
+
+ +
+
+ USE CASES
-

- {t.title} +

+ Made for Personal, Social, and Community Communication

-

- {t.description} +

+ With separate spaces for every context, TalkPro keeps your personal, social, and professional communications distinct and organized.

-
- {t.rows.map(row => ( -
-
-

{row.title}

+ +
+ {rows.map(row => ( +
+
+

{row.title}

-
-

{row.desc}

+
+

{row.desc}

))} diff --git a/src/components/WhyTalkPro.astro b/src/components/WhyTalkPro.astro index 4e8d8a7..03af9b3 100644 --- a/src/components/WhyTalkPro.astro +++ b/src/components/WhyTalkPro.astro @@ -1,61 +1,83 @@ --- -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'] +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"; --- -
-
-
-
-
- {t.eyebrow} +
+
+ + +
+ +
+
+ WHY TALKPRO
-
-
-

{t.titleLine1}

-

{t.titleLine2}

+
+
+

Designed for the Way

+

People Communicate Today

-
-
- + + -

- {t.description} +

+ 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.

-
- {t.illustrationAlt} + +
-
- {t.cards.map((card, index) => ( -
-
- -
-
-

{card.title}

-

{card.desc}

-
+ +
+
+
+
- ))} +
+

Simple

+

An easy-to-use experience designed for everyday communication.

+
+
+
+
+ +
+
+

Familiar

+

A messaging structure that feels natural from the first use.

+
+
+
+
+ +
+
+

Connected

+

Private chats, groups, channels, voice, and video in one app.

+
+
+
+
+ +
+
+

Modern

+

A refined interface with clean visuals and smooth interaction.

+
+
+
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index b22b4f8..4b30717 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -3,23 +3,16 @@ import '../styles/global.css' export interface Props { title?: string - description?: string - lang?: string } - -const { - title = 'Talk Pro - One User. Multiple Worlds.', - description = 'Talk Pro is a modern messaging app for private chats, group conversations, channels, voice and video calls.', - lang = 'en', -} = Astro.props +const { title = 'Talk Pro — One User. Multiple Worlds.' } = Astro.props --- - + - + {title} @@ -32,6 +25,7 @@ const { const header = document.getElementById('site-header'); const getOffset = () => header ? header.offsetHeight : 0; + // Smooth scroll with header offset document.querySelectorAll('a[href^="#"]').forEach(link => { link.addEventListener('click', e => { const href = link.getAttribute('href'); @@ -44,6 +38,7 @@ const { }); }); + // Active nav highlighting via IntersectionObserver const navLinks = document.querySelectorAll('[data-nav-link]'); const sections = Array.from(navLinks) .map(l => document.querySelector(l.getAttribute('href') ?? '')) @@ -57,7 +52,8 @@ const { if (!visible) return; navLinks.forEach(link => { const active = link.getAttribute('href') === `#${visible.target.id}`; - link.classList.toggle('is-active', active); + link.classList.toggle('!text-[#f28a4b]', active); + link.classList.toggle('text-[#7a726d]', !active); }); }, { rootMargin: '-30% 0px -60% 0px', threshold: 0 }); sections.forEach(s => observer.observe(s)); diff --git a/src/pages/index.astro b/src/pages/index.astro index e9a1bc5..bebd4ce 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,21 +10,17 @@ import Trust from '../components/Trust.astro' import AppPreview from '../components/AppPreview.astro' import DownloadCTA from '../components/DownloadCTA.astro' import Footer from '../components/Footer.astro' -import { defaultLang, getTranslations } from '../i18n/translations' - -const lang = defaultLang -const t = getTranslations(lang) --- - -
- - - - - - - - -