From 6d78be67c8f39179c98bb5850a1c5239520bc804 Mon Sep 17 00:00:00 2001
From: Emil Widlund <hello@emilwidlund.com>
Date: Fri, 17 Jan 2025 14:13:11 +0100
Subject: [PATCH] polish vision

---
 clients/apps/web/src/app/{ => (main)}/vision/layout.tsx    | 2 +-
 clients/apps/web/src/app/{ => (main)}/vision/page.tsx      | 7 +++++--
 clients/apps/web/src/components/Vision/Button.tsx          | 2 +-
 clients/apps/web/src/components/Vision/Console.tsx         | 7 ++++---
 clients/apps/web/src/components/Vision/Link.tsx            | 2 +-
 clients/apps/web/src/components/Vision/Navigation.tsx      | 4 ++--
 .../src/components/Vision/sections/OpenSourceSection.tsx   | 3 ++-
 .../web/src/components/Vision/sections/SevenLOCSection.tsx | 2 +-
 clients/apps/web/src/styles/globals.scss                   | 7 +++----
 9 files changed, 20 insertions(+), 16 deletions(-)
 rename clients/apps/web/src/app/{ => (main)}/vision/layout.tsx (67%)
 rename clients/apps/web/src/app/{ => (main)}/vision/page.tsx (92%)

diff --git a/clients/apps/web/src/app/vision/layout.tsx b/clients/apps/web/src/app/(main)/vision/layout.tsx
similarity index 67%
rename from clients/apps/web/src/app/vision/layout.tsx
rename to clients/apps/web/src/app/(main)/vision/layout.tsx
index 4e3827fed2..e79a894567 100644
--- a/clients/apps/web/src/app/vision/layout.tsx
+++ b/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>
   )
diff --git a/clients/apps/web/src/app/vision/page.tsx b/clients/apps/web/src/app/(main)/vision/page.tsx
similarity index 92%
rename from clients/apps/web/src/app/vision/page.tsx
rename to clients/apps/web/src/app/(main)/vision/page.tsx
index 7bd3baa5d1..44fa16ca90 100644
--- a/clients/apps/web/src/app/vision/page.tsx
+++ b/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 }}
diff --git a/clients/apps/web/src/components/Vision/Button.tsx b/clients/apps/web/src/components/Vision/Button.tsx
index b658c8987f..6350cb5dba 100644
--- a/clients/apps/web/src/components/Vision/Button.tsx
+++ b/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,
       )}
diff --git a/clients/apps/web/src/components/Vision/Console.tsx b/clients/apps/web/src/components/Vision/Console.tsx
index aac8adf913..bea497c028 100644
--- a/clients/apps/web/src/components/Vision/Console.tsx
+++ b/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>
diff --git a/clients/apps/web/src/components/Vision/Link.tsx b/clients/apps/web/src/components/Vision/Link.tsx
index 45ae23b7a2..951f8f6ac6 100644
--- a/clients/apps/web/src/components/Vision/Link.tsx
+++ b/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,
       )}
diff --git a/clients/apps/web/src/components/Vision/Navigation.tsx b/clients/apps/web/src/components/Vision/Navigation.tsx
index 7e55e9368d..b10f9ae252 100644
--- a/clients/apps/web/src/components/Vision/Navigation.tsx
+++ b/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 }}
diff --git a/clients/apps/web/src/components/Vision/sections/OpenSourceSection.tsx b/clients/apps/web/src/components/Vision/sections/OpenSourceSection.tsx
index a99c718bd7..e73cacdd2e 100644
--- a/clients/apps/web/src/components/Vision/sections/OpenSourceSection.tsx
+++ b/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 git@github.com:polarsource/polar.git"
           output="Cloning Polar..."
         />
       }
diff --git a/clients/apps/web/src/components/Vision/sections/SevenLOCSection.tsx b/clients/apps/web/src/components/Vision/sections/SevenLOCSection.tsx
index 40567e7692..7cf5fde41b 100644
--- a/clients/apps/web/src/components/Vision/sections/SevenLOCSection.tsx
+++ b/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
diff --git a/clients/apps/web/src/styles/globals.scss b/clients/apps/web/src/styles/globals.scss
index aa1c0b0c99..a285ec6e63 100644
--- a/clients/apps/web/src/styles/globals.scss
+++ b/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 {