From b3d366883788fdaac22a691d6cebdb1100d66d76 Mon Sep 17 00:00:00 2001 From: Jaro Habiger Date: Tue, 28 Nov 2023 00:36:34 +0100 Subject: [PATCH] add pricing page --- src/app/layout.tsx | 14 +++-- src/app/page.tsx | 58 +++++++++++-------- src/app/pricing/page.tsx | 118 +++++++++++++++++++++++++++++++++++++-- src/components/Page.tsx | 76 +++++++++++++++---------- 4 files changed, 205 insertions(+), 61 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9119728..3514d5e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,13 +2,19 @@ import { Metadata } from 'next'; import './globals.css'; export const metadata: Metadata = { - title: { absolute: "transcribee – The open source automatic transcription tool", template: "%s — transcribee" }, + title: { + absolute: 'transcribee – The open source automatic transcription tool', + template: '%s — transcribee', + }, openGraph: { - title: { absolute: "transcribee – The open source automatic transcription tool", template: "%s — transcribee" }, + title: { + absolute: 'transcribee – The open source automatic transcription tool', + template: '%s — transcribee', + }, description: 'The open source automatic transcription tool', - siteName: "transcribee", + siteName: 'transcribee', }, -} +}; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 5de3878..bfe40f3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,8 +9,6 @@ import ExportSrc from '../assets/export.png'; import CorrectSrc from '../assets/correct.png'; import clsx from 'clsx'; - - export default function HomePage() { return ( @@ -18,24 +16,27 @@ export default function HomePage() { - transcribee uses the open source Whisper machine-learning (ML) model to create high quality automated transcriptions. + 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. + 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. + 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. + 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 (
@@ -89,7 +91,19 @@ function Hero() { ); } -function Block({ children, heading, imageSrc, imageAlt, imageOnRight = false }: { children: ReactNode, heading: ReactNode, imageSrc: StaticImageData, imageAlt: string, imageOnRight?: boolean }) { +function Block({ + children, + heading, + imageSrc, + imageAlt, + imageOnRight = false, +}: { + children: ReactNode; + heading: ReactNode; + imageSrc: StaticImageData; + imageAlt: string; + imageOnRight?: boolean; +}) { return (
@@ -99,17 +113,15 @@ function Block({ children, heading, imageSrc, imageAlt, imageOnRight = false }: className="rounded-md w-[530px] shadow-[0px_1px_15px_rgba(0,0,0,0.1)]" />
-
-

- {heading} -

-

- {children} -

+
+

{heading}

+

{children}

- ) + ); } diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx index 3cdd190..a6861e8 100644 --- a/src/app/pricing/page.tsx +++ b/src/app/pricing/page.tsx @@ -1,17 +1,127 @@ +import React, { ComponentProps, ReactNode } from 'react'; import { Metadata } from 'next'; import { Page } from '../../components/Page'; +import clsx from 'clsx'; +import Link from 'next/link'; export const metadata: Metadata = { title: 'Pricing', openGraph: { - title: 'Pricing' - } -} + title: 'Pricing', + }, +}; export default function PricingPage() { return ( -

Pricing

+

Pricing

+

Predictable and Fair

+

+ Simple, yet affordable pricing model. Completely usage based. No monthly fees. No surprises. +

+
+ + +

students and teachers only

+
+

3 hours free each month

+
+

$0.5/hour for lower quality transcripts

+ + + +

commercial use

+
+

3 hours free each month

+
+

$2.5/hour for lower quality transcripts

+ + +
+ +
+

You want a custom instance for your university or enterprise?

+
+

You have special needs?

+
+

You need custom features?

+
+ +
+ +
+
+

Host it yourself

+

+ transcribee is 100% open source software. You can setup your own instance.{' '} + No license costs apply. +

+
+
+

Non-profits

+

+ You’re making the world a better place?{' '} + + Contact us + + , we’ll see how we can support you. +

+
+
); } + +function PricingCard({ + children, + title, + buttonText, + buttonUrl, + className, +}: { + children: ReactNode; + title: string; + buttonText: string; + buttonUrl: string; + className?: string; +}) { + return ( +
+

{title}

+ {children} + + ); +} + +function Price({ price }: { price: number }) { + return ( +
+ € + {price} + /hour +

of transcribed audio

+
+ ); +} diff --git a/src/components/Page.tsx b/src/components/Page.tsx index 340684f..b2d0794 100644 --- a/src/components/Page.tsx +++ b/src/components/Page.tsx @@ -18,7 +18,11 @@ const NavLink = ({ className?: string; } & ComponentProps) => (
  • - + {children}
    • @@ -73,7 +77,12 @@ function SidebarMenu() { - +