polish vision

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

@@ -4,7 +4,7 @@ export default function PitchLayout({
   children: React.ReactNode
 }) {
   return (
-    <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">
+    <div className="bg-polar-900 text-polar-100 flex h-full min-h-screen w-full flex-col p-4 font-mono text-sm md:h-screen md:w-screen md:p-12">
       {children}
     </div>
   )

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

@@ -11,7 +11,10 @@ import { UsageBasedSection } from '@/components/Vision/sections/UsageBasedSectio
 import { useArrowFocus } from '@/components/Vision/useArrowFocus'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useMemo, useState } from 'react'
-import { PitchNavigation, sections } from '../../components/Vision/Navigation'
+import {
+  PitchNavigation,
+  sections,
+} from '../../../components/Vision/Navigation'
 
 export default function PitchPage() {
   const [index, setIndex] = useState(0)
@@ -50,7 +53,7 @@ export default function PitchPage() {
         <PitchNavigation activeIndex={index} setIndex={setIndex} />
         <AnimatePresence key={index}>
           <motion.div
-            className="bg-polar-900 absolute bottom-0 left-0 right-0 z-20 h-1/2"
+            className="bg-polar-900 pointer-events-none absolute bottom-0 left-0 right-0 z-20 h-3/4"
             initial={{ opacity: 1 }}
             animate={{ opacity: 0 }}
             transition={{ duration: 0.07, delay: 0.06 }}

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

@@ -17,7 +17,7 @@ export const Button = ({
   return (
     <button
       className={twMerge(
-        'border-polar-200 hover:bg-polar-200 flex flex-col items-center justify-center border-[0.5px] border-b-2 font-mono leading-none focus-within:bg-white focus-within:text-black focus-within:outline-none hover:text-black',
+        'border-polar-200 hover:bg-polar-200 flex cursor-default flex-col items-center justify-center border-[0.5px] border-b-2 font-mono leading-none focus-within:bg-white focus-within:text-black focus-within:outline-none hover:text-black',
         variant === 'primary' ? primaryClassName : iconClassName,
         className,
       )}

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

@@ -12,10 +12,11 @@ export const Console = ({ className, title, input, output }: ConsoleProps) => {
     <div className={twMerge('relative flex flex-col', className)}>
       <div className="border-polar-600 absolute right-2 top-2 h-full w-full transform border md:right-6 md:top-6"></div>
       <div className="border-polar-200 bg-polar-900 relative h-full w-full border-2">
-        <div className="bg-polar-200 flex flex-row justify-between px-3 py-1 text-xs text-black">
-          <span className="font-bold">{title ?? 'Polar VM'}</span>
+        <div className="bg-polar-200 flex flex-row justify-between px-2 py-1 text-xs text-black">
+          <span className="font-bold">{title ?? 'Terminal'}</span>
+          <span className="h-0.5 w-2 self-end bg-black" />
         </div>
-        <div className="flex flex-col p-4 font-mono text-sm">
+        <div className="flex flex-col overflow-auto p-4 font-mono text-sm">
           <pre className="flex flex-col gap-y-2">
             <code>{input}</code>
             <code className="text-polar-500">{output}</code>

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

@@ -14,7 +14,7 @@ export const Link = ({ variant = 'primary', ...props }: LinkProps) => {
     <NextLink
       {...props}
       className={twMerge(
-        'border-polar-200 focus-within:bg-polar-200 hover:bg-polar-200 flex w-fit flex-row gap-x-1 py-[1px] font-mono focus-within:text-black focus-within:outline-none hover:text-black',
+        'border-polar-200 focus-within:bg-polar-200 hover:bg-polar-200 flex w-fit cursor-default flex-row gap-x-1 py-[1px] font-mono focus-within:text-black focus-within:outline-none hover:text-black',
         variant === 'primary' ? primaryClassName : ghostClassName,
         props.className,
       )}

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

@@ -11,7 +11,7 @@ export const sections = [
     href: '/pitch/what',
   },
   {
-    title: '02. 7 LOC',
+    title: '02. Adapters',
     href: '/pitch/why',
   },
   {
@@ -49,7 +49,7 @@ export const PitchNavigation = ({
               key={index}
               onClick={() => setIndex(index)}
               className={twMerge(
-                'hover:bg-polar-200 cursor-pointer px-1 hover:text-black',
+                'hover:bg-polar-200 cursor-default px-1 hover:text-black',
                 index === activeIndex ? 'bg-polar-200 text-black' : '',
               )}
               initial={{ opacity: 0 }}

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

@@ -10,7 +10,8 @@ export const OpenSourceSection = () => {
       context={
         <Console
           className="flex aspect-video max-w-lg flex-grow"
-          input="$ git clone https://github.com/polarsource/polar"
+          title="zsh"
+          input="~/ % git clone [email protected]:polarsource/polar.git"
           output="Cloning Polar..."
         />
       }

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

@@ -3,7 +3,7 @@ import { Section } from '../Section'
 
 export const SevenLOCSection = () => {
   return (
-    <Section header={{ index: '02', name: '7 LOC' }} title="7 Lines of Code">
+    <Section header={{ index: '02', name: 'Adapters' }} title="7 Lines of Code">
       <p>
         Polar aims to be the simplest way to integrate payments into your
         software. This should be a breeze. That&apos;s why we restrict the code

clients/apps/web/src/styles/globals.scss

@@ -15,13 +15,12 @@
 }
 
 @media (prefers-color-scheme: light) {
-  img[src$="#gh-dark-mode-only"],
-  img[src$="#only-dark"] {
-      display: none;
+  img[src$='#gh-dark-mode-only'],
+  img[src$='#only-dark'] {
+    display: none;
   }
 }
 
-
 /* Dark mode */
 
 #polar-bg-gradient {