diff --git a/src/app/page.tsx b/src/app/page.tsx index 6a90adc..5de3878 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,61 @@ -import Image from 'next/image'; +import Image, { StaticImageData } from 'next/image'; import { Page } from '../components/Page'; +import { ReactNode } from 'react'; + import AppPreviewSrc from '../assets/app-preview.png'; +import WorkerPopupSrc from '../assets/worker_popup.png'; +import ExportSrc from '../assets/export.png'; +import CorrectSrc from '../assets/correct.png'; +import clsx from 'clsx'; + + + +export default function HomePage() { + return ( + + + + transcribee uses the open source Whisper machine-learning (ML) model to create high quality automated transcriptions. + + + Automatic transcripts can easily be manually corrected. Words that are likely not correct are highlighted for speedy corrections. + + + Completed documents can be exported as Text documents or for subtitle usage as WebVTT or SRT. + + + transcribee is open source and licensed under the AGPL-3.0 license. You can inspect the code, contribute to it and host your own instance. + + ); +} + function Hero() { return ( -
+

Transcriptions @@ -39,10 +89,27 @@ function Hero() { ); } -export default function HomePage() { +function Block({ children, heading, imageSrc, imageAlt, imageOnRight = false }: { children: ReactNode, heading: ReactNode, imageSrc: StaticImageData, imageAlt: string, imageOnRight?: boolean }) { return ( - - - - ); +
+
+ {imageAlt} +
+
+

+ {heading} +

+

+ {children} +

+
+
+ ) } diff --git a/src/assets/correct.png b/src/assets/correct.png new file mode 100644 index 0000000..86ff002 Binary files /dev/null and b/src/assets/correct.png differ diff --git a/src/assets/export.png b/src/assets/export.png new file mode 100644 index 0000000..f4aa4dd Binary files /dev/null and b/src/assets/export.png differ diff --git a/src/assets/worker_popup.png b/src/assets/worker_popup.png new file mode 100644 index 0000000..4dfc66e Binary files /dev/null and b/src/assets/worker_popup.png differ