Add some content

bugbakery · Nov 18, 2023 · 5ef5b8f · 5ef5b8f
1 parent cfb91a5
commit 5ef5b8f
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 32 deletions.
diff --git 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
@@ -1,9 +1,48 @@
+import Image from 'next/image';
+
 import { Page } from '../components/Page';
+import AppPreviewSrc from '../assets/app-preview.png';
+
+function Hero() {
+  return (
+    <div className="flex flex-col md:flex-row gap-10 items-center my-6 sm:my-12">
+      <div className="text-center md:text-left items-center md:items-start flex flex-col">
+        <h1 className="text-[calc(min(50px,10vw_+_3px))] md:text-[calc(min(60px,3.8vw_+_12px))] font-semibold mb-6 leading-tight">
+          Transcriptions
+          <br />
+          for everyone.
+        </h1>
+        <p className="text-lg leading-6 mb-6 max-w-sm">
+          We offer an open source tool for automatic transcriptions with word-level time alignment
+          and collaborative editing.
+        </p>
+
+        <p className="text-lg leading-6 mb-6 max-w-sm">
+          Perfect for interviews, podcasts, video subtitles or voice recordings.
+        </p>
+
+        <a
+          href="https://transcribee.net/signup"
+          className="inline-block bg-black hover:bg-gray-700 text-white px-4 py-2 rounded-md"
+        >
+          Get started for free →
+        </a>
+      </div>
+      <div className="flex items-center flex-grow w-full">
+        <Image
+          src={AppPreviewSrc}
+          alt="Overview of the transcribee application"
+          className="rounded-md w-full aspect-[3/2] border border-1 border-gray-300 shadow-[0px_4px_20px_rgba(0,0,0,0.15)]"
+        />
+      </div>
+    </div>
+  );
+}
 
 export default function HomePage() {
   return (
     <Page>
-      <h1>Home Page</h1>
+      <Hero />
     </Page>
   );
 }
diff --git a/src/assets/app-preview.png b/src/assets/app-preview.png
diff --git 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;
+}) => (
   <li>
-    <Link href={href} className="text-gray-500 hover:text-black hover:underline">
+    <Link href={href} className={clsx('text-gray-500 hover:text-black hover:underline', className)}>
       {children}
     </Link>
   </li>
 );
 
-export function Page({ children }: { children: React.ReactNode }) {
+function MainNav() {
+  return (
+    <>
+      <ul className="flex gap-8 items-center">
+        <li>
+          <Link href="/" className="flex items-center font-bold text-lg mr-8">
+            <Image src={LogoSrc} className="w-8 mr-3" alt="transcribee logo" /> transcribee
+          </Link>
+        </li>
+        <NavLink className="hidden md:block" href="/">
+          Product
+        </NavLink>
+        <NavLink className="hidden md:block" href="/pricing">
+          Pricing
+        </NavLink>
+      </ul>
+      <ul className="hidden md:flex gap-2.5 items-center">
+        <li>
+          <a
+            href="https://transcribee.net/signup"
+            className="block px-4 py-2 rounded-md hover:bg-gray-200"
+          >
+            Sign Up
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://transcribee.net/login"
+            className="block px-4 py-2 bg-black hover:bg-gray-700 text-white rounded-md"
+          >
+            Sign In
+          </a>
+        </li>
+      </ul>
+    </>
+  );
+}
+
+function SidebarNavButton() {
+  return (
+    <label
+      htmlFor="menu-checkbox"
+      className="w-5 h-5 md:hidden flex items-center justify-center opacity-60 hover:opacity-100 cursor-pointer"
+    >
+      <FaBars className="w-full h-full" />
+    </label>
+  );
+}
+
+function SidebarMenu() {
   return (
     <>
-      <nav className="flex justify-between max-w-6xl mx-auto my-4 px-4">
-        <ul className="flex gap-8 items-center">
-          <li>
-            <Link href="/" className="flex items-center font-bold text-lg mr-8">
-              <Image src={LogoSrc} className="w-8 mr-3" alt="transcribee logo" /> transcribee
-            </Link>
-          </li>
+      <input type="checkbox" name="" id="menu-checkbox" className="peer opacity-0 w-0 h-0" />
+      <label
+        htmlFor="menu-checkbox"
+        className="fixed top-0 bottom-0 left-0 w-full pointer-events-none peer-checked:pointer-events-auto bg-black peer-checked:w-full opacity-0 peer-checked:opacity-50 transition-opacity duration-300"
+      />
+      <div className="fixed flex flex-col right-0 top-0 bottom-0 bg-white p-4 shadow-lg border border-1 border-gray-200 transition-all duration-300 translate-x-[calc(100%+20px)] invisible peer-checked:visible peer-checked:translate-x-0 w-full sm:w-80">
+        <label
+          htmlFor="menu-checkbox"
+          className="block mt-1 w-5 h-5 self-end opacity-60 hover:opacity-100 cursor-pointer"
+        >
+          <AiOutlineClose className="w-full h-full" />
+        </label>
+
+        <ul className="flex flex-col gap-2">
           <NavLink href="/">Product</NavLink>
           <NavLink href="/pricing">Pricing</NavLink>
         </ul>
-        <ul className="flex gap-2.5 items-center">
-          <li>
-            <a
-              href="https://transcribee.net/signup"
-              className="block px-4 py-2 rounded-md hover:bg-gray-200"
-            >
-              Sign Up
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://transcribee.net/login"
-              className="block px-4 py-2 bg-black hover:bg-gray-700 text-white rounded-md"
-            >
-              Sign In
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div className="max-w-6xl mx-auto px-4">{children}</div>
+      </div>
+    </>
+  );
+}
+
+function Navbar() {
+  return (
+    <nav className="flex justify-between items-center max-w-7xl mx-auto my-4 px-4">
+      <MainNav />
+      <SidebarNavButton />
+      <SidebarMenu />
+    </nav>
+  );
+}
+
+export function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <div className="max-w-7xl mx-auto px-4">{children}</div>
     </>
   );
 }