diff --git a/next.config.js b/next.config.js
index dc29843..4c5db23 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
+ images: { unoptimized: true },
};
module.exports = nextConfig;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 889884b..6a90adc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,48 @@
+import Image from 'next/image';
+
import { Page } from '../components/Page';
+import AppPreviewSrc from '../assets/app-preview.png';
+
+function Hero() {
+ return (
+
+
+
+ Transcriptions
+
+ for everyone.
+
+
+ We offer an open source tool for automatic transcriptions with word-level time alignment
+ and collaborative editing.
+
+
+
+ Perfect for interviews, podcasts, video subtitles or voice recordings.
+
+
+
+ Get started for free →
+
+
+
+
+
+
+ );
+}
export default function HomePage() {
return (
- Home Page
+
);
}
diff --git a/src/assets/app-preview.png b/src/assets/app-preview.png
new file mode 100644
index 0000000..ee32a37
Binary files /dev/null and b/src/assets/app-preview.png differ
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 3a9b17c..06f8d8a 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -1,49 +1,116 @@
import Link from 'next/link';
+import Image from 'next/image';
+import clsx from 'clsx';
+import { FaBars } from 'react-icons/fa';
+import { AiOutlineClose } from 'react-icons/ai';
import LogoSrc from '../assets/transcribee-logo.svg';
-import Image from 'next/image';
-const NavLink = ({ children, href }: { children: React.ReactNode; href: string }) => (
+const NavLink = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => (
-
+
{children}
);
-export function Page({ children }: { children: React.ReactNode }) {
+function MainNav() {
+ return (
+ <>
+
+ -
+
+ transcribee
+
+
+
+ Product
+
+
+ Pricing
+
+
+
+ >
+ );
+}
+
+function SidebarNavButton() {
+ return (
+
+ );
+}
+
+function SidebarMenu() {
return (
<>
-