vision polish

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

@@ -1,11 +1,11 @@
 'use client'
 
 import { Footer } from '@/components/Vision/Footer'
+import { AdaptersSection } from '@/components/Vision/sections/AdaptersSection'
 import { IndexSection } from '@/components/Vision/sections/IndexSection'
 import { InvestorsSection } from '@/components/Vision/sections/InvestorsSection'
 import { OpenSourceSection } from '@/components/Vision/sections/OpenSourceSection'
 import { Polar20Section } from '@/components/Vision/sections/Polar20Section'
-import { SevenLOCSection } from '@/components/Vision/sections/SevenLOCSection'
 import { TeamSection } from '@/components/Vision/sections/TeamSection'
 import { UsageBasedSection } from '@/components/Vision/sections/UsageBasedSection'
 import { useArrowFocus } from '@/components/Vision/useArrowFocus'
@@ -35,7 +35,7 @@ export default function PitchPage() {
       case 1:
         return <UsageBasedSection />
       case 2:
-        return <SevenLOCSection />
+        return <AdaptersSection />
       case 3:
         return <Polar20Section />
       case 4:

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

@@ -10,11 +10,11 @@ export interface ConsoleProps {
 export const Console = ({ className, title, input, output }: ConsoleProps) => {
   return (
     <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-600 absolute left-2 top-2 h-full w-full transform border md:left-4 md:top-4" />
       <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-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" />
+          <span className="mb-1 h-0.5 w-2 self-end bg-black" />
         </div>
         <div className="flex flex-col overflow-auto p-4 font-mono text-sm">
           <pre className="flex flex-col gap-y-2">

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

@@ -0,0 +1,57 @@
+import { Grid } from '../Grid'
+import { Link } from '../Link'
+import { Section } from '../Section'
+
+export const AdaptersSection = () => {
+  return (
+    <Section
+      header={{ index: '02', name: 'Adapters' }}
+      title="The best DX in the industry"
+      context={
+        <div className="relative">
+          <div
+            className="absolute left-2 top-2 z-0 flex h-full w-full flex-col items-center justify-center text-black md:left-4 md:top-4"
+            style={{
+              background:
+                'repeating-linear-gradient(-45deg, transparent 0px, transparent 9px, hsl(233, 8%, 24%) 9px, hsl(233, 8%, 24%) 10px)',
+            }}
+          />
+          <Grid
+            className="relative z-10 grid-cols-2 text-xs md:grid-cols-4"
+            items={[
+              <span className="bg-polar-200 absolute bottom-2 right-2 flex h-full w-full flex-col items-center justify-center text-black md:bottom-4 md:right-4">
+                @polar-sh/nextjs
+              </span>,
+              <span>@polar-sh/astro</span>,
+              <span>@polar-sh/remix</span>,
+              <span>@polar-sh/fastify</span>,
+              <span>@polar-sh/elysia</span>,
+              <span>@polar-sh/hono</span>,
+              <span>@polar-sh/deno</span>,
+              <span>@polar-sh/sveltekit</span>,
+              <span>@polar-sh/express</span>,
+              <span>@polar-sh/nuxt</span>,
+              <span>@polar-sh/tanstack</span>,
+              <span>@polar-sh/koa</span>,
+            ]}
+          />
+        </div>
+      }
+    >
+      <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
+        you need to a maximum of 7 lines.
+      </p>
+      <p>
+        Software as a Service (SaaS) has become the norm, but the underlying
+        payment infrastructure has not evolved.
+      </p>
+      <p>
+        This is why we are building Polar 2.0, payment infrastructure for the
+        21st century.
+      </p>
+      <Link href="/pitch/what">Why →</Link>
+    </Section>
+  )
+}

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

@@ -14,13 +14,17 @@ export const InvestorsSection = () => {
             items={[
               <div
                 key="a"
-                className="bg-polar-200 absolute right-2 top-2 z-10 flex h-full w-full flex-col items-center justify-center p-6 text-black"
+                className="bg-polar-200 absolute bottom-2 right-2 z-10 flex h-full w-full flex-col items-center justify-center p-6 text-black md:bottom-4 md:right-4"
               >
                 <AbstractLogo />
               </div>,
               <div
                 key="b"
                 className="flex h-full flex-col items-center justify-center p-6"
+                style={{
+                  background:
+                    'repeating-linear-gradient(-45deg, transparent 0px, transparent 9px, hsl(233, 8%, 24%) 9px, hsl(233, 8%, 24%) 10px)',
+                }}
               >
                 <MischiefLogo />
               </div>,

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

@@ -22,7 +22,17 @@ const team = [
 
 export const TeamSection = () => {
   return (
-    <Section header={{ index: '05', name: 'Team' }} title="We are hiring">
+    <Section
+      header={{ index: '05', name: 'Team' }}
+      title="We are hiring"
+      context={
+        <div className="flex flex-col gap-y-12 md:flex-row md:gap-x-8">
+          {team.map((profile) => (
+            <Profile key={profile.name} {...profile} />
+          ))}
+        </div>
+      }
+    >
       <p>
         Are you passionate about building the future of payment infrastructure?
         Get in touch.
@@ -42,11 +52,6 @@ export const TeamSection = () => {
         </li>
       </ul>
       <Link href="/pitch/what">Join Us →</Link>
-      <div className="flex flex-col gap-y-12 md:flex-row md:gap-x-4">
-        {team.map((profile) => (
-          <Profile key={profile.name} {...profile} />
-        ))}
-      </div>
     </Section>
   )
 }