From de8add6d07de803d466c5b7491bc558081d89101 Mon Sep 17 00:00:00 2001
From: Emil Widlund <hello@emilwidlund.com>
Date: Thu, 16 Jan 2025 18:21:37 +0100
Subject: [PATCH] add mobile layout

---
 clients/apps/web/src/app/pitch/layout.tsx     |  2 +-
 clients/apps/web/src/app/pitch/page.tsx       |  4 ++--
 .../apps/web/src/components/Pitch/Footer.tsx  |  4 +++-
 .../web/src/components/Pitch/Navigation.tsx   | 22 ++++++++++++++-----
 .../Pitch/sections/IndexSection.tsx           |  4 ++--
 .../Pitch/sections/InvestorsSection.tsx       |  2 +-
 .../src/components/Pitch/sections/Polar20.tsx |  2 +-
 .../components/Pitch/sections/TeamSection.tsx |  2 +-
 .../Pitch/sections/UsageBasedSection.tsx      |  2 +-
 .../components/Pitch/sections/WhySection.tsx  |  2 +-
 10 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/clients/apps/web/src/app/pitch/layout.tsx b/clients/apps/web/src/app/pitch/layout.tsx
index f1ad519303..4e3827fed2 100644
--- a/clients/apps/web/src/app/pitch/layout.tsx
+++ b/clients/apps/web/src/app/pitch/layout.tsx
@@ -4,7 +4,7 @@ export default function PitchLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="bg-polar-900 text-polar-100 flex h-screen w-screen flex-col overflow-auto p-12 font-mono text-sm">
+    <div className="bg-polar-900 text-polar-100 flex h-full min-h-screen w-full flex-col overflow-auto p-4 font-mono text-sm md:h-screen md:w-screen md:p-12">
       {children}
     </div>
   )
diff --git a/clients/apps/web/src/app/pitch/page.tsx b/clients/apps/web/src/app/pitch/page.tsx
index 7addd630cf..9963ca2343 100644
--- a/clients/apps/web/src/app/pitch/page.tsx
+++ b/clients/apps/web/src/app/pitch/page.tsx
@@ -45,8 +45,8 @@ export default function PitchPage() {
 
   return (
     <div className="flex h-full flex-col justify-between gap-y-12 text-sm">
-      <div className="flex flex-grow flex-col gap-y-32">
-        <PitchNavigation activeIndex={index} />
+      <div className="flex flex-grow flex-col gap-y-16 md:gap-y-32">
+        <PitchNavigation activeIndex={index} setIndex={setIndex} />
         <AnimatePresence key={index}>
           <motion.div
             initial={{ opacity: 0 }}
diff --git a/clients/apps/web/src/components/Pitch/Footer.tsx b/clients/apps/web/src/components/Pitch/Footer.tsx
index 4ae5eb4b45..b6f4c677c4 100644
--- a/clients/apps/web/src/components/Pitch/Footer.tsx
+++ b/clients/apps/web/src/components/Pitch/Footer.tsx
@@ -5,7 +5,9 @@ import { sections } from './Navigation'
 
 export const Footer = ({ className }: { className?: string }) => {
   return (
-    <div className={twMerge('flex flex-row gap-x-8 text-xs', className)}>
+    <div
+      className={twMerge('hidden flex-row gap-x-8 text-xs md:flex', className)}
+    >
       <NavigationLegend />
       <SectionsLegend />
       <OpenSourceLegend />
diff --git a/clients/apps/web/src/components/Pitch/Navigation.tsx b/clients/apps/web/src/components/Pitch/Navigation.tsx
index 75c59b8520..bbce74fb31 100644
--- a/clients/apps/web/src/components/Pitch/Navigation.tsx
+++ b/clients/apps/web/src/components/Pitch/Navigation.tsx
@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge'
+
 export const sections = [
   {
     title: '00. Index',
@@ -29,17 +31,25 @@ export const sections = [
   },
 ]
 
-export const PitchNavigation = ({ activeIndex }: { activeIndex: number }) => {
+export const PitchNavigation = ({
+  activeIndex,
+  setIndex,
+}: {
+  activeIndex: number
+  setIndex: (index: number) => void
+}) => {
   return (
-    <div className="flex flex-row gap-x-16 text-xs">
+    <div className="flex flex-col gap-y-8 text-xs md:flex-row md:gap-x-16">
       <span>Polar Software Inc.</span>
-      <ul className="flex flex-row gap-x-8">
+      <ul className="flex flex-col gap-y-2 md:flex-row md:gap-x-8">
         {sections.map((section, index) => (
           <li
             key={index}
-            className={
-              index === activeIndex ? 'bg-polar-200 px-1 text-black' : ''
-            }
+            onClick={() => setIndex(index)}
+            className={twMerge(
+              'hover:bg-polar-200 cursor-pointer px-1 hover:text-black',
+              index === activeIndex ? 'bg-polar-200 text-black' : '',
+            )}
           >
             {section.title}
           </li>
diff --git a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
index 71bb36c5f8..c897554b7e 100644
--- a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
@@ -3,7 +3,7 @@ import { Link } from '../Link'
 
 export const IndexSection = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">00. Index</h1>
         <h1 className="text-4xl">Integrating payments is a mess</h1>
@@ -23,7 +23,7 @@ export const IndexSection = () => {
       </div>
 
       <Console
-        className="w-full max-w-lg"
+        className="aspect-video w-full max-w-lg"
         input="polar-init"
         output="Initializing seed round..."
       />
diff --git a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
index ea16d2ef7b..82a71e8018 100644
--- a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
@@ -2,7 +2,7 @@ import { Link } from '../Link'
 
 export const InvestorsSection = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">06. Investors</h1>
         <h1 className="text-4xl">Our Angels</h1>
diff --git a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
index a69b5d4678..4f282469b5 100644
--- a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx
@@ -2,7 +2,7 @@ import { Link } from '../Link'
 
 export const Polar20Section = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">03. Polar 2.0</h1>
         <h1 className="text-4xl">The future of payments is usage based</h1>
diff --git a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
index 086a273e53..06add32b9f 100644
--- a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx
@@ -21,7 +21,7 @@ const team = [
 
 export const TeamSection = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">05. Team</h1>
         <h1 className="text-4xl">We are hiring</h1>
diff --git a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
index e23e4679c1..7c2ddc985b 100644
--- a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx
@@ -4,7 +4,7 @@ import { Link } from '../Link'
 
 export const UsageBasedSection = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">01. Usage Based</h1>
         <h1 className="text-4xl">The future of payments is usage based</h1>
diff --git a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
index 131e21f60d..712ab0a841 100644
--- a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
+++ b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx
@@ -2,7 +2,7 @@ import { Link } from '../Link'
 
 export const WhySection = () => {
   return (
-    <div className="flex flex-row gap-x-32">
+    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
       <div className="flex max-w-lg flex-col gap-y-8">
         <h1 className="text-lg">02. Why Polar</h1>
         <h1 className="text-4xl">Why</h1>