From e3e279746af8c7fa1023c23b9b9d555378506e51 Mon Sep 17 00:00:00 2001 From: Eason WaveKat Date: Thu, 30 Jul 2026 22:49:32 +1200 Subject: [PATCH 1/4] feat(voice): redesign overview into pro landing page Replace the framed screenshot carousel with a split hero (copy left, bare floating app window right) and three feature spotlight rows, each pairing a headline capability (call flows, hold/transfer, AI assistant) with the screenshot that shows it. The remaining nine features become a three-column card grid; steps, who-it's-for, CTA, and FAQ get a consistent visual refresh. The page body now lives in a shared VoiceOverview component fed localized copy from each of the nine locale pages, so the structure can no longer drift between locales. All localized strings are moved verbatim; the only new string per locale is the flow-answering screenshot alt, taken from the already-translated call-flow blog post. ProductCarousel is now unused and removed. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XSfX4qXFsWBYgWJ4ko6KcU --- src/components/ProductCarousel.astro | 146 ------------- src/components/VoiceOverview.astro | 307 +++++++++++++++++++++++++++ src/pages/de/voice/index.astro | 218 +++++-------------- src/pages/es/voice/index.astro | 217 ++++--------------- src/pages/fr/voice/index.astro | 217 ++++--------------- src/pages/it/voice/index.astro | 218 +++++-------------- src/pages/ja/voice/index.astro | 218 +++++-------------- src/pages/ko/voice/index.astro | 218 +++++-------------- src/pages/voice/index.astro | 218 ++++--------------- src/pages/zh-hant/voice/index.astro | 214 ++++--------------- src/pages/zh/voice/index.astro | 225 +++++--------------- 11 files changed, 738 insertions(+), 1678 deletions(-) delete mode 100644 src/components/ProductCarousel.astro create mode 100644 src/components/VoiceOverview.astro diff --git a/src/components/ProductCarousel.astro b/src/components/ProductCarousel.astro deleted file mode 100644 index 1a22998..0000000 --- a/src/components/ProductCarousel.astro +++ /dev/null @@ -1,146 +0,0 @@ ---- -// A single, big image at a time with dot indicators to switch between them -// (a "carousel" — click a dot, an arrow, or swipe). Reused across the Voice -// overview page in every locale; only `shots` (alt/caption text) and -// `imgCode` change per locale. -import { ChevronLeft, ChevronRight } from '@lucide/astro'; - -interface Shot { - scene: string; - alt: string; - caption: string; -} - -interface Props { - imgCode: string; - shots: Shot[]; - // Outer frame — a border, a surface background, inset padding, and a - // shadow — around the image. On by default; pass `framed={false}` for a - // bare screenshot (rounded corners only, flush to the edge) when the - // shot's own chrome is enough. - framed?: boolean; -} - -const { imgCode, shots, framed = true } = Astro.props; ---- - -
-
-
- {shots.map((shot, i) => ( - {shot.alt} - ))} - {shots.length > 1 && ( - <> - - - - )} -
-
- -

s.caption))} - aria-live="polite" - > - {shots[0].caption} -

- - {shots.length > 1 && ( -
- {shots.map((_, i) => ( -
- )} -
- - diff --git a/src/components/VoiceOverview.astro b/src/components/VoiceOverview.astro new file mode 100644 index 0000000..1aa30cf --- /dev/null +++ b/src/components/VoiceOverview.astro @@ -0,0 +1,307 @@ +--- +// The entire body of the WaveKat Voice overview page, shared by every locale. +// All copy arrives as props from the per-locale page (copy lives in the page, +// structure lives here — restyling once restyles all nine locales). The +// product screenshots have a transparent background with a baked-in window +// shadow, so they render as bare floating windows — no frame box around them. +import { ArrowRight } from '@lucide/astro'; +import VoiceDownload from './VoiceDownload.astro'; +import TalkCTA from './TalkCTA.astro'; + +interface LinkTo { + href: string; + label: string; +} + +interface Spotlight { + icon: any; + title: string; + body: string; + scene: string; + alt: string; + link?: LinkTo; +} + +interface Feature { + icon: any; + title: string; + body: string; +} + +interface Step { + n: string; + title: string; + body: string; +} + +interface Faq { + q: string; + a: string; + link?: LinkTo; +} + +interface DownloadInfo { + version: string; + arch: string; +} + +interface Props { + /** Language code of the app screenshots (/screenshots//.webp). */ + imgCode: string; + badge: string; + h1Lines: string[]; + h1Accent: string; + intro: string; + installHref: string; + installLabel: string; + changelogHref: string; + changelogTitle: string; + freeLabel: string; + heroAlt: string; + headingFeatures: string; + headingHow: string; + headingWho: string; + headingFaq: string; + spotlights: Spotlight[]; + features: Feature[]; + steps: Step[]; + whoTitle: string; + whoBody: string; + whoHref: string; + ctaTitle: string; + ctaBody: string; + faqs: Faq[]; + macDownload: DownloadInfo; + linuxDownload: DownloadInfo; +} + +const { + imgCode, + badge, + h1Lines, + h1Accent, + intro, + installHref, + installLabel, + changelogHref, + changelogTitle, + freeLabel, + heroAlt, + headingFeatures, + headingHow, + headingWho, + headingFaq, + spotlights, + features, + steps, + whoTitle, + whoBody, + whoHref, + ctaTitle, + ctaBody, + faqs, + macDownload, + linuxDownload, +} = Astro.props; +--- + + +
+ + + +
+
+
+ + + {badge} + +
+

+ {h1Lines.map((line) => ( + <> + {line}
+ + ))} + {h1Accent} +

+

+ {intro} +

+ +
+ + + {installLabel} + + +
+
+

macOS 12+ · {macDownload.arch} · v{macDownload.version} · {freeLabel}

+ +
+
+ + +
+ + {heroAlt} +
+
+
+ + +
+

{headingFeatures}

+ +
+ {spotlights.map((s, i) => ( +
+
+ + + +

{s.title}

+

{s.body}

+ {s.link && ( + + {s.link.label} + + + )} +
+
+ + {s.alt} +
+
+ ))} +
+ +
+ {features.map((f) => ( +
+ + + +

{f.title}

+

{f.body}

+
+ ))} +
+
+ + +
+

{headingHow}

+
    + {steps.map((s) => ( +
  1. + + {s.n.padStart(2, '0')} +

    {s.title}

    +

    {s.body}

    +
    2. + ))} +
+
+ + +
+

{headingWho}

+ +
+ {whoTitle} +

{whoBody}

+
+ + +
+ + +
+
+ +
+

{ctaTitle}

+

+ {ctaBody} +

+
+ +
+
+
+
+ + +
+

{headingFaq}

+
+ {faqs.map((f) => ( +
+ + {f.q} + + +

+ {f.a} + {f.link && ( + + {f.link.label} + + + )} +

+
+ ))} +
+
+ + diff --git a/src/pages/de/voice/index.astro b/src/pages/de/voice/index.astro index 3d7d556..66bb0c0 100644 --- a/src/pages/de/voice/index.astro +++ b/src/pages/de/voice/index.astro @@ -7,46 +7,55 @@ // and the language switcher are wired automatically in Base/Header from the // route registry in src/lib/i18n.ts — this page declares no i18n props. import Voice from '../../../layouts/Voice.astro'; -import TalkCTA from '../../../components/TalkCTA.astro'; +import VoiceOverview from '../../../components/VoiceOverview.astro'; import { PhoneCall, PhoneForwarded, PhoneIncoming, MousePointerClick, + AudioLines, Mic, FileText, - AudioLines, Terminal, Server, Cloud, Languages, Lock, - ArrowRight, } from '@lucide/astro'; -import VoiceDownload from '../../../components/VoiceDownload.astro'; -import ProductCarousel from '../../../components/ProductCarousel.astro'; import { getMacDownload, getLinuxDownload } from '../../../lib/voice-download'; const macDownload = await getMacDownload(); const linuxDownload = await getLinuxDownload(); + // Locale code for the per-language app screenshots (/screenshots//.webp). const imgCode = 'de'; -const productShots = [ +// The three headline capabilities, each shown next to the screenshot that +// proves it. The rest of the features render as a grid below. +const spotlights = [ { - scene: 'in-call', - alt: 'WaveKat Voice auf dem Desktop während eines laufenden Anrufs — das Wählfeld und die Anrufsteuerung, mit dem Live-Transkript, das daneben mitläuft.', - caption: 'Ein laufender Anruf — die Anrufsteuerung links, das Transkript, das sich rechts von selbst schreibt.', + icon: PhoneIncoming, + title: 'Nimmt ab, wenn Sie nicht können', + body: 'Weisen Sie Ihrer Leitung einen Anrufablauf zu, und WaveKat Voice nimmt für Sie ab — Begrüßung, Öffnungszeiten, Telefonmenü, Anrufbeantworter oder Weiterleitung. Die Arbeit einer automatischen Telefonzentrale, auf Ihrem eigenen Computer. Sie sehen jeden Schritt live und können den Anruf mitten in der Nachricht übernehmen.', + scene: 'flow-answering', + alt: 'WaveKat Voice unter Ubuntu — ein Anruf, den ein Ablauf annimmt: „Empfang nimmt an" mit „Nimmt eine Nachricht auf…" und dem Namen des Anrufers.', + link: { href: '/de/blog/answer-calls-with-a-call-flow/', label: 'So funktioniert es' }, }, { + icon: PhoneForwarded, + title: 'Halten, wechseln und weiterleiten', + body: 'Legen Sie einen Anrufer in die Warteschleife, nehmen Sie eine zweite Leitung an und wechseln Sie zwischen beiden — leiten Sie ihn dann direkt weiter oder erst nach einem kurzen Wort unter vier Augen. Was in der Warteschleife passiert, bleibt aus der Aufzeichnung und dem Transkript heraus.', scene: 'in-call-transfer', alt: 'WaveKat Voice auf dem Desktop mitten in einer Weiterleitung mit Rückfrage — der Anrufer wird gehalten, daneben die Schaltfläche Weiterleitung abschließen.', - caption: 'Ein Anruf wird weitergeleitet, nachdem man kurz mit der Gegenseite gesprochen hat.', + link: { href: '/de/blog/hold-switch-and-transfer-calls/', label: 'So funktioniert es' }, }, { + icon: Terminal, + title: 'Einen KI-Assistenten wählen lassen', + body: 'Schalten Sie die Automatisierung ein, und ein Kommandozeilenwerkzeug — oder ein KI-Assistent wie Claude — kann Anrufe für Sie tätigen, darauf warten und sie beenden. Es bedient das Wählfeld; sprechen tun Sie. Standardmäßig ausgeschaltet, bis Sie es aktivieren.', scene: 'settings-automation-agents', alt: 'WaveKat Voice, Einstellungen → Automatisierung — KI-Assistenten wie Claude und Cursor werden mit einer Ein-Klick-Schaltfläche „Verbinden“ angebunden.', - caption: 'Einen KI-Assistenten verbinden, der Anrufe tätigt — mit einem Klick.', + link: { href: '/de/blog/place-calls-from-the-command-line/', label: 'So funktioniert es' }, }, ]; @@ -56,16 +65,6 @@ const features = [ title: 'Anrufe direkt vom Desktop', body: 'Nehmen Sie Anrufe entgegen und tätigen Sie sie direkt von Ihrem Computer aus — kein Tischtelefon, keine zusätzliche Hardware, kein Browser-Tab, das Sie im Auge behalten müssen. Es wartet unauffällig im Hintergrund, bis das Telefon klingelt.', }, - { - icon: PhoneIncoming, - title: 'Nimmt ab, wenn Sie nicht können', - body: 'Weisen Sie Ihrer Leitung einen Anrufablauf zu, und WaveKat Voice nimmt für Sie ab — Begrüßung, Öffnungszeiten, Telefonmenü, Anrufbeantworter oder Weiterleitung. Die Arbeit einer automatischen Telefonzentrale, auf Ihrem eigenen Computer. Sie sehen jeden Schritt live und können den Anruf mitten in der Nachricht übernehmen.', - }, - { - icon: PhoneForwarded, - title: 'Halten, wechseln und weiterleiten', - body: 'Legen Sie einen Anrufer in die Warteschleife, nehmen Sie eine zweite Leitung an und wechseln Sie zwischen beiden — leiten Sie ihn dann direkt weiter oder erst nach einem kurzen Wort unter vier Augen. Was in der Warteschleife passiert, bleibt aus der Aufzeichnung und dem Transkript heraus.', - }, { icon: Mic, title: 'Jeder Anruf aufgezeichnet', @@ -81,11 +80,6 @@ const features = [ title: 'Anrufe in HD', body: 'Wenn Ihr Anbieter es unterstützt, handelt WaveKat Voice den Opus-Codec aus — für breitbandige, gestochen klare HD-Sprache — und fällt von selbst auf Standardqualität zurück, wenn das nicht möglich ist. Es gibt nichts einzuschalten.', }, - { - icon: Terminal, - title: 'Einen KI-Assistenten wählen lassen', - body: 'Schalten Sie die Automatisierung ein, und ein Kommandozeilenwerkzeug — oder ein KI-Assistent wie Claude — kann Anrufe für Sie tätigen, darauf warten und sie beenden. Es bedient das Wählfeld; sprechen tun Sie. Standardmäßig ausgeschaltet, bis Sie es aktivieren.', - }, { icon: MousePointerClick, title: 'Nummer anklicken und anrufen', @@ -245,150 +239,34 @@ const faqSchema = { title="WaveKat Voice — Ihr Geschäftstelefon, auf Ihrem Desktop" description="WaveKat Voice ist eine Desktop-App für Mac und Linux, die Ihren Computer zu Ihrem Geschäftstelefon macht — Anrufe entgegennehmen und tätigen, wobei jeder Anruf für Sie aufgezeichnet und mitgeschrieben wird. Kostenlose öffentliche Beta." > - -
- - - -
- - - kostenlose öffentliche Beta - -
-

- Ihre Geschäftsnummer,
auf Ihrem Desktop.
- Aufgezeichnet und transkribiert. -

-

- WaveKat Voice ist eine Telefon-App für Ihren Computer. Verbinden Sie den Telefonanbieter, den Sie bereits nutzen, und - nehmen Sie Anrufe direkt von Ihrem Desktop aus entgegen und tätigen Sie sie — wobei jedes Gespräch automatisch für Sie aufgezeichnet und - mitgeschrieben wird und nichts Ihren Computer verlässt, es sei denn, Sie möchten es. -

- -
- - - Installationsdetails - - -
-
-

macOS 12+ · {macDownload.arch} · v{macDownload.version} · kostenlos während der Beta

- -
-
- - -
- -
- - -
-

Was es kann

-
- {features.map((f) => ( -
- - - - {f.title} -

{f.body}

-
- ))} -
-
- - -
-

So funktioniert es

-
    - {steps.map((s) => ( -
  1. - - {s.n} - -
    - {s.title} -

    {s.body}

    -
    -
    2. - ))} -
-
- - -
-

Für wen es gedacht ist

- - Unternehmen, die vom Telefon leben -

- Praxen, Salons, Handwerk, Kanzleien, Restaurants, Hausverwaltungen — alle, für die ein Anruf - ein Kunde ist. Sehen Sie, wo WaveKat Voice passt. -

- - wavekat.com/voice/use-cases → - - -
- - -
-
-

Bereit, es auszuprobieren?

-

- Kostenlos während der öffentlichen Beta. In einer Minute installiert, Nummer verbinden, und Ihren nächsten Anruf nehmen Sie vom Desktop aus entgegen. -

-
- -
-
-
- - -
-

Fragen & Antworten

-
- {faqs.map((f) => ( -
- - {f.q} - - -

- {f.a} - {f.link && ( - - {f.link.label} - - - )} -

-
- ))} -
-
- - +