add mobile layout

polarsource · Jan 16, 2025 · de8add6 · de8add6
1 parent fa8908b
commit de8add6
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>