update vision

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

@@ -6,7 +6,10 @@ import { sections } from './Navigation'
 export const Footer = ({ className }: { className?: string }) => {
   return (
     <div
-      className={twMerge('hidden flex-row gap-x-12 text-xs md:flex', className)}
+      className={twMerge(
+        'fixed bottom-0 left-0 right-0 hidden flex-row gap-x-12 p-12 text-xs md:flex',
+        className,
+      )}
     >
       <NavigationLegend />
       <SectionsLegend />

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

@@ -1,3 +1,7 @@
+import GoIcon from '@/components/Icons/frameworks/go'
+import NodeJsIcon from '@/components/Icons/frameworks/nodejs'
+import PhpIcon from '@/components/Icons/frameworks/php'
+import PythonIcon from '@/components/Icons/frameworks/python'
 import { Console } from '../Console'
 import { Grid } from '../Grid'
 import { Section } from '../Section'
@@ -9,31 +13,37 @@ export const DNASection = () => {
       title="Developer Experience as Polar DNA"
       context={
         <div className="flex flex-col gap-y-8">
-          <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
-                  key="a"
-                  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"
-                >
-                  TypeScript SDK
-                </span>,
-                <span key="b">Python SDK</span>,
-                <span key="c">Go SDK</span>,
-                <span key="c">PHP SDK</span>,
-              ]}
-            />
-          </div>
           <Grid
-            className="grid-cols-2 text-xs md:grid-cols-4"
+            className="relative z-10 grid-cols-2 text-xs md:grid-cols-4"
+            items={[
+              <span
+                key="a"
+                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"
+              >
+                <NodeJsIcon />
+              </span>,
+              <span
+                key="b"
+                className="absolute inset-0 flex flex-col items-center justify-center"
+              >
+                <PythonIcon />
+              </span>,
+              <span
+                key="c"
+                className="absolute inset-0 flex flex-col items-center justify-center"
+              >
+                <GoIcon />
+              </span>,
+              <span
+                key="c"
+                className="absolute inset-0 flex flex-col items-center justify-center"
+              >
+                <PhpIcon />
+              </span>,
+            ]}
+          />
+          <Grid
+            className="grid-cols-2 text-xs md:grid-cols-4 [&>*]:aspect-auto"
             items={[
               <span key="e">@polar-sh/nextjs</span>,
               <span key="f">@polar-sh/fastify</span>,

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

@@ -1,6 +1,5 @@
 import { Console } from '../Console'
 import { Grid } from '../Grid'
-import { Link } from '../Link'
 import { Section } from '../Section'
 
 export const EntitlementsSection = () => {
@@ -29,8 +28,8 @@ export const EntitlementsSection = () => {
                 </span>,
                 <span key="a">License Keys</span>,
                 <span key="b">Digital Downloads</span>,
-                <span key="c">GitHub Repository Access</span>,
-                <span key="e">Discord Server Invites</span>,
+                <span key="c">GitHub & Discord Access</span>,
+                <span key="e">Credits</span>,
               ]}
             />
           </div>
@@ -54,18 +53,23 @@ export const POST = Webhooks({
       }
     >
       <p>
-        What used to be a simple way to pay for things has become a complex
-        mess.
+        Building SaaS products is all about granting and revoking access to your
+        customers. With Polar Entitlements, we want to offer a best-in-class API
+        to manage your customers&apos; access to anything.
       </p>
+      <ul>
+        <li>- License Keys</li>
+        <li>- Digital Downloads</li>
+        <li>- GitHub & Discord Access</li>
+        <li>- Credits</li>
+        <li>- Custom Entitlements</li>
+      </ul>
       <p>
-        Software as a Service (SaaS) has become the norm, but the underlying
-        payment infrastructure has not evolved.
+        We want to encourage our community to build custom entitlements that can
+        be used with ease. Want to grant access to a Slack channel when a
+        customer purchases something? There would be a Slack Entitlement
+        Strategy for that.
       </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/IndexSection.tsx

@@ -1,5 +1,4 @@
 import { Console } from '../Console'
-import { Link } from '../Link'
 import { Section } from '../Section'
 
 export const IndexSection = () => {
@@ -30,7 +29,6 @@ export const IndexSection = () => {
         Software as a Service (SaaS) has become the norm, but the underlying
         payment infrastructure has not evolved.
       </p>
-      <Link href="/pitch/what">What we are building →</Link>
     </Section>
   )
 }

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

@@ -1,5 +1,4 @@
 import { Grid } from '../Grid'
-import { Link } from '../Link'
 import { Section } from '../Section'
 
 export const InvestorsSection = () => {
@@ -94,7 +93,6 @@ export const InvestorsSection = () => {
         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/OpenSourceSection.tsx

@@ -24,7 +24,9 @@ export const OpenSourceSection = () => {
         Software as a Service (SaaS) has become the norm, but the underlying
         payment infrastructure has not evolved.
       </p>
-      <Link href="/pitch/what">What we are building →</Link>
+      <Link href="https://github.com/polarsource/polar" target="_blank">
+        Polar on GitHub →
+      </Link>
     </Section>
   )
 }

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

@@ -125,7 +125,7 @@ export const TeamSection = () => {
           to get stuff done vs. waiting on instructions, guidance or permission.
         </li>
       </ul>
-      <Link href="/pitch/what">Join Us →</Link>
+      <Link href="mailto:[email protected]">Join Us →</Link>
     </Section>
   )
 }

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

@@ -1,5 +1,4 @@
 import { Console } from '../Console'
-import { Link } from '../Link'
 import { Section } from '../Section'
 
 export const UsageBasedSection = () => {
@@ -43,7 +42,6 @@ export const POST = Usage()
         committed to build the gold standard for adapters that sits in between
         artificial intelligence and the world.
       </p>
-      <Link href="/pitch/what">Why →</Link>
     </Section>
   )
 }