From 0dd76f2e6261595e9659907f53a6f23e39c68a2e Mon Sep 17 00:00:00 2001 From: Emil Widlund Date: Thu, 16 Jan 2025 23:41:51 +0100 Subject: [PATCH] more pitch adjustments --- clients/apps/web/src/app/pitch/page.tsx | 4 +- .../apps/web/src/components/Pitch/Chart.tsx | 68 +-------------- .../apps/web/src/components/Pitch/Console.tsx | 26 +++--- .../apps/web/src/components/Pitch/Footer.tsx | 6 +- .../apps/web/src/components/Pitch/Section.tsx | 27 ++++++ .../Pitch/sections/IndexSection.tsx | 47 +++++----- .../Pitch/sections/InvestorsSection.tsx | 35 ++++---- .../src/components/Pitch/sections/Polar20.tsx | 53 ++++++++---- .../components/Pitch/sections/TeamSection.tsx | 53 +++++++----- .../Pitch/sections/UsageBasedSection.tsx | 86 +++++++++---------- .../components/Pitch/sections/WhySection.tsx | 35 ++++---- 11 files changed, 209 insertions(+), 231 deletions(-) create mode 100644 clients/apps/web/src/components/Pitch/Section.tsx diff --git a/clients/apps/web/src/app/pitch/page.tsx b/clients/apps/web/src/app/pitch/page.tsx index 9963ca2343..dd7a6b93b2 100644 --- a/clients/apps/web/src/app/pitch/page.tsx +++ b/clients/apps/web/src/app/pitch/page.tsx @@ -45,14 +45,14 @@ export default function PitchPage() { return (
-
+
{getActiveSection()} diff --git a/clients/apps/web/src/components/Pitch/Chart.tsx b/clients/apps/web/src/components/Pitch/Chart.tsx index f1636ba76c..991e13acf4 100644 --- a/clients/apps/web/src/components/Pitch/Chart.tsx +++ b/clients/apps/web/src/components/Pitch/Chart.tsx @@ -5,72 +5,6 @@ import * as d3 from 'd3' import { GeistMono } from 'geist/font/mono' import { useCallback, useEffect, useMemo, useState } from 'react' -const primaryColor = 'rgb(0 98 255)' -const primaryColorFaded = 'rgba(0, 98, 255, 0.3)' -const gradientId = 'chart-gradient' -const createAreaGradient = (id: string) => { - // Create a element - const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs') - - // Create a element - const linearGradient = document.createElementNS( - 'http://www.w3.org/2000/svg', - 'linearGradient', - ) - linearGradient.setAttribute('id', id) - linearGradient.setAttribute('gradientTransform', 'rotate(90)') - - // Create the first element - const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop') - stop1.setAttribute('offset', '0%') - stop1.setAttribute('stop-color', primaryColorFaded) - stop1.setAttribute('stop-opacity', '0.5') - - // Create the second element - const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop') - stop2.setAttribute('offset', '100%') - stop2.setAttribute('stop-color', primaryColorFaded) - stop2.setAttribute('stop-opacity', '0') - - // Append the elements to the element - linearGradient.appendChild(stop1) - linearGradient.appendChild(stop2) - - // Append the element to the element - defs.appendChild(linearGradient) - - return defs -} - -class Callback extends Plot.Dot { - private callbackFunction: (index: number | undefined) => void - - public constructor( - data: Plot.Data, - options: Plot.DotOptions, - callbackFunction: (data: any) => void, - ) { - // @ts-ignore - super(data, options) - this.callbackFunction = callbackFunction - } - - // @ts-ignore - public render( - index: number[], - _scales: Plot.ScaleFunctions, - _values: Plot.ChannelValues, - _dimensions: Plot.Dimensions, - _context: Plot.Context, - _next?: Plot.RenderFunction, - ): SVGElement | null { - if (index.length) { - this.callbackFunction(index[0]) - } - return null - } -} - const getTicks = (timestamps: Date[], maxTicks: number = 10): Date[] => { const step = Math.ceil(timestamps.length / maxTicks) return timestamps.filter((_, index) => index % step === 0) @@ -172,7 +106,6 @@ export const Chart: React.FC = ({ width, height, marks: [ - () => createAreaGradient(gradientId), Plot.axisX({ tickFormat: getTickFormat(interval, ticks), ticks, @@ -191,6 +124,7 @@ export const Chart: React.FC = ({ y: metric.slug, stroke: 'currentColor', strokeWidth: 1, + marker: 'circle-fill', }), Plot.ruleX(data, { x: 'timestamp', diff --git a/clients/apps/web/src/components/Pitch/Console.tsx b/clients/apps/web/src/components/Pitch/Console.tsx index 7120ccab14..c23b654e29 100644 --- a/clients/apps/web/src/components/Pitch/Console.tsx +++ b/clients/apps/web/src/components/Pitch/Console.tsx @@ -2,23 +2,25 @@ import { twMerge } from 'tailwind-merge' export interface ConsoleProps { className?: string + title?: string input?: string output?: string } -export const Console = ({ className, input, output }: ConsoleProps) => { +export const Console = ({ className, title, input, output }: ConsoleProps) => { return ( -
-
- Polar VM -
-
- 
-          {'$ ' + input}
-          {output}
-
+
+
+
+
+ {title ?? 'Polar VM'} +
+
+ 
+            {input}
+            {output}
+
+
) diff --git a/clients/apps/web/src/components/Pitch/Footer.tsx b/clients/apps/web/src/components/Pitch/Footer.tsx index b6f4c677c4..1560ee4e5f 100644 --- a/clients/apps/web/src/components/Pitch/Footer.tsx +++ b/clients/apps/web/src/components/Pitch/Footer.tsx @@ -6,7 +6,7 @@ import { sections } from './Navigation' export const Footer = ({ className }: { className?: string }) => { return (
@@ -71,7 +71,7 @@ const OpenSourceLegend = () => { const ContactUsLegend = () => { useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === 'm') { + if (event.key === 'c') { window.open('mailto:birk@polar.sh', '_blank') } } @@ -86,7 +86,7 @@ const ContactUsLegend = () => { return (
- +
Contact Us
diff --git a/clients/apps/web/src/components/Pitch/Section.tsx b/clients/apps/web/src/components/Pitch/Section.tsx new file mode 100644 index 0000000000..3b72ed0066 --- /dev/null +++ b/clients/apps/web/src/components/Pitch/Section.tsx @@ -0,0 +1,27 @@ +export interface SectionProps { + header: { + index: string + name: string + } + title: string + children: React.ReactNode + context?: React.ReactNode +} + +export const Section = ({ header, title, children, context }: SectionProps) => { + return ( +
+
+
+ + {header.index}. + +

{header.name}

+
+

{title}

+ {children} +
+ {context} +
+ ) +} diff --git a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx index c897554b7e..b2eda36b8e 100644 --- a/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx +++ b/clients/apps/web/src/components/Pitch/sections/IndexSection.tsx @@ -1,32 +1,29 @@ import { Console } from '../Console' import { Link } from '../Link' +import { Section } from '../Section' export const IndexSection = () => { return ( -
-
-

00. Index

-

Integrating payments is a mess

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- What we are building → -
- - -
+
+ } + > +

+ What used to be a simple way to pay for things has become a complex + mess. +

+

+ Software as a Service (SaaS) has become the norm, but the underlying + payment infrastructure has not evolved. +

+ What we are building → +
) } diff --git a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx index 82a71e8018..48f1d3d139 100644 --- a/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx +++ b/clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx @@ -1,25 +1,22 @@ import { Link } from '../Link' +import { Section } from '../Section' export const InvestorsSection = () => { return ( -
-
-

06. Investors

-

Our Angels

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- Why → -
-
+
+

+ What used to be a simple way to pay for things has become a complex + mess. +

+

+ Software as a Service (SaaS) has become the norm, but the underlying + payment infrastructure has not evolved. +

+

+ This is why we are building Polar 2.0, payment infrastructure for the + 21st century. +

+ Why → +
) } diff --git a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx index 4f282469b5..91038c4004 100644 --- a/clients/apps/web/src/components/Pitch/sections/Polar20.tsx +++ b/clients/apps/web/src/components/Pitch/sections/Polar20.tsx @@ -1,25 +1,40 @@ +import { Console } from '../Console' import { Link } from '../Link' +import { Section } from '../Section' export const Polar20Section = () => { return ( -
-
-

03. Polar 2.0

-

The future of payments is usage based

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- Why → -
-
+
req.headers.get('X-Polar-Customer-Id')) + .model(openai('gpt-4o')) + .increment('gpt-4o-inputs', ctx => ctx.usage.inputTokens) + .increment('gpt-4o-outputs', ctx => ctx.usage.completionTokens) + .handler((req, res, model) => /** Use model... */)`} + /> + } + > +

+ What used to be a simple way to pay for things has become a complex + mess. +

+

+ Software as a Service (SaaS) has become the norm, but the underlying + payment infrastructure has not evolved. +

+

+ This is why we are building Polar 2.0, payment infrastructure for the + 21st century. +

+ Why → +
) } diff --git a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx index 06add32b9f..fe8266be2b 100644 --- a/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx +++ b/clients/apps/web/src/components/Pitch/sections/TeamSection.tsx @@ -1,5 +1,6 @@ import Image from 'next/image' import { Link } from '../Link' +import { Section } from '../Section' const team = [ { @@ -21,30 +22,32 @@ const team = [ export const TeamSection = () => { return ( -
-
-

05. Team

-

We are hiring

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- Join Us → -
-
+
+

+ Are you passionate about building the future of payment infrastructure? + Get in touch. +

+
    +
  • + You are passionate about building great user experiences and products. +
    • +
  • + You're humble and eager to constantly learn and improve based on + feedback from customers and peers or new insights, technical trends + and tools. +
    • +
  • + You're autonomous and don't hesitate to roll up your sleeves + to get stuff done vs. waiting on instructions, guidance or permission. +
    • +
+ Join Us → +
{team.map((profile) => ( ))}
-
+ ) } @@ -56,8 +59,14 @@ interface ProfileProps { const Profile = ({ name, title, image }: ProfileProps) => { return ( -
- {name} +
+ {name}

{name}

{title}

diff --git a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx index 7c2ddc985b..3439800871 100644 --- a/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx +++ b/clients/apps/web/src/components/Pitch/sections/UsageBasedSection.tsx @@ -1,53 +1,53 @@ import { MetricType } from '@polar-sh/sdk' import { Chart } from '../Chart' import { Link } from '../Link' +import { Section } from '../Section' export const UsageBasedSection = () => { return ( -
-
-

01. Usage Based

-

The future of payments is usage based

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- Why → -
- { - const getLastMonthValues = () => { - const values = [] - for (let i = 31; i >= 0; i--) { - values.push({ - timestamp: new Date( - new Date().setDate(new Date().getDate() - i), - ), - value: Math.floor(Math.random() * 500), - }) +
{ + const getLastMonthValues = () => { + const values = [] + for (let i = 0; i <= 31; i++) { + values.push({ + timestamp: new Date( + new Date().setDate(new Date().getDate() + i), + ), + value: Math.floor(Math.exp(i / 5)), // Exponential growth + }) + } + return values } - return values - } - return getLastMonthValues() - })(), - ]} - interval="day" - metric={{ - slug: 'value', - display_name: 'Value', - type: MetricType.SCALAR, - }} - /> -
+ return getLastMonthValues() + })(), + ]} + interval="day" + metric={{ + slug: 'value', + display_name: 'Value', + type: MetricType.SCALAR, + }} + /> + } + > +

+ In a world where Artificial Intelligence is becoming more and more + prevalent, the intelligence we consume will be charged based on usage. + It's time for payment infrastructure, built for the 21st century. +

+

+ We believe that the future of payments is usage based, and we are + committed to build the gold standard for adapters that sits in between + artificial intelligence and the world. +

+ Why → + ) } diff --git a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx index 712ab0a841..d3882bdc8c 100644 --- a/clients/apps/web/src/components/Pitch/sections/WhySection.tsx +++ b/clients/apps/web/src/components/Pitch/sections/WhySection.tsx @@ -1,25 +1,22 @@ import { Link } from '../Link' +import { Section } from '../Section' export const WhySection = () => { return ( -
-
-

02. Why Polar

-

Why

-

- What used to be a simple way to pay for things has become a complex - mess. -

-

- Software as a Service (SaaS) has become the norm, but the underlying - payment infrastructure has not evolved. -

-

- This is why we are building Polar 2.0, payment infrastructure for the - 21st century. -

- Why → -
-
+
+

+ What used to be a simple way to pay for things has become a complex + mess. +

+

+ Software as a Service (SaaS) has become the norm, but the underlying + payment infrastructure has not evolved. +

+

+ This is why we are building Polar 2.0, payment infrastructure for the + 21st century. +

+ Why → +
) }