vision: Mobile optimized

clients/apps/web/src/app/(main)/vision/page.tsx

@@ -10,7 +10,7 @@ import { TeamSection } from '@/components/Vision/sections/TeamSection'
 import { UsageBasedSection } from '@/components/Vision/sections/UsageBasedSection'
 import { useArrowFocus } from '@/components/Vision/useArrowFocus'
 import { AnimatePresence, motion } from 'framer-motion'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import {
   PitchNavigation,
   sections,
@@ -27,26 +27,6 @@ export default function PitchPage() {
       setIndex(Math.max(0, Math.min(number, sections.length - 1))),
   })
 
-  const activeSection = useMemo(() => {
-    switch (index) {
-      case 0:
-      default:
-        return <IndexSection />
-      case 1:
-        return <UsageBasedSection />
-      case 2:
-        return <EntitlementsSection />
-      case 3:
-        return <DNASection />
-      case 4:
-        return <OpenSourceSection />
-      case 5:
-        return <TeamSection />
-      case 6:
-        return <InvestorsSection />
-    }
-  }, [index])
-
   return (
     <div className="flex h-full flex-col justify-between gap-y-12 text-sm">
       <div className="relative flex flex-grow flex-col gap-y-16">
@@ -64,7 +44,13 @@ export default function PitchPage() {
             exit={{ opacity: 0 }}
             transition={{ duration: 0.06, repeat: 2 }}
           >
-            {activeSection}
+            <IndexSection active={index == 0} />
+            <UsageBasedSection active={index == 1} />
+            <EntitlementsSection active={index == 2}/>
+            <DNASection active={index == 3} />
+            <OpenSourceSection active={index == 4} />
+            <TeamSection active={index == 5} />
+            <InvestorsSection active={index == 6} />
           </motion.div>
         </AnimatePresence>
       </div>

clients/apps/web/src/components/Vision/Section.tsx

@@ -1,4 +1,7 @@
+import { twMerge } from 'tailwind-merge'
+
 export interface SectionProps {
+  active: boolean
   header: {
     index: string
     name: string
@@ -8,9 +11,14 @@ export interface SectionProps {
   context?: React.ReactNode
 }
 
-export const Section = ({ header, title, children, context }: SectionProps) => {
+export const Section = ({ active, header, title, children, context }: SectionProps) => {
+  let desktopClasses = "md:hidden"
+  if (active) {
+    desktopClasses = "md:flex-row md:gap-x-32"
+  }
+
   return (
-    <div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32">
+    <div className={twMerge(desktopClasses, "flex flex-col gap-y-16 mb-16")}>
       <div className="flex max-w-lg flex-col gap-y-8">
         <div className="flex flex-row items-center gap-x-4">
           <span className="bg-polar-200 px-1 py-0.5 text-sm leading-none text-black">

clients/apps/web/src/components/Vision/sections/DNASection.tsx

@@ -6,9 +6,10 @@ import { Console } from '../Console'
 import { Grid } from '../Grid'
 import { Section } from '../Section'
 
-export const DNASection = () => {
+export const DNASection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '03', name: 'Less code and accounting' }}
       title="Painless to integrate. Zero headaches to run."
       context={

clients/apps/web/src/components/Vision/sections/EntitlementsSection.tsx

@@ -2,9 +2,10 @@ import { Console } from '../Console'
 import { Grid } from '../Grid'
 import { Section } from '../Section'
 
-export const EntitlementsSection = () => {
+export const EntitlementsSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '02', name: 'Automated Entitlements' }}
       title="Going for features vs. settling for flags."
       context={

clients/apps/web/src/components/Vision/sections/IndexSection.tsx

@@ -1,9 +1,10 @@
 import { Console } from '../Console'
 import { Section } from '../Section'
 
-export const IndexSection = () => {
+export const IndexSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '00', name: 'Index' }}
       title="Payments for developers is a mess, again"
       context={

clients/apps/web/src/components/Vision/sections/InvestorsSection.tsx

@@ -1,9 +1,10 @@
 import { Grid } from '../Grid'
 import { Section } from '../Section'
 
-export const InvestorsSection = () => {
+export const InvestorsSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '06', name: 'Investors' }}
       title="Investors, Angels & Advisors"
       context={

clients/apps/web/src/components/Vision/sections/OpenSourceSection.tsx

@@ -2,9 +2,10 @@ import { Console } from '../Console'
 import { Link } from '../Link'
 import { Section } from '../Section'
 
-export const OpenSourceSection = () => {
+export const OpenSourceSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '04', name: 'Polar is 100% Open Source' }}
       title="Building the future, together"
       context={

clients/apps/web/src/components/Vision/sections/TeamSection.tsx

@@ -22,9 +22,10 @@ const team = [
   },
 ]
 
-export const TeamSection = () => {
+export const TeamSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '05', name: 'Team' }}
       title="Small team, big ambition"
       context={

clients/apps/web/src/components/Vision/sections/UsageBasedSection.tsx

@@ -1,9 +1,10 @@
 import { Console } from '../Console'
 import { Section } from '../Section'
 
-export const UsageBasedSection = () => {
+export const UsageBasedSection = ({ active }: { active: boolean }) => {
   return (
     <Section
+      active={active}
       header={{ index: '01', name: 'The Future is Usage & Success Based' }}
       title="Next-Gen AI without Last-Gen Pricing"
       context={