-
-
Notifications
You must be signed in to change notification settings - Fork 175
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
de8add6
commit 0dd76f2
Showing
11 changed files
with
209 additions
and
231 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ import { sections } from './Navigation' | |
export const Footer = ({ className }: { className?: string }) => { | ||
return ( | ||
<div | ||
className={twMerge('hidden flex-row gap-x-8 text-xs md:flex', className)} | ||
className={twMerge('hidden flex-row gap-x-12 text-xs md:flex', className)} | ||
> | ||
<NavigationLegend /> | ||
<SectionsLegend /> | ||
|
@@ -71,7 +71,7 @@ const OpenSourceLegend = () => { | |
const ContactUsLegend = () => { | ||
useEffect(() => { | ||
const handleKeyDown = (event: KeyboardEvent) => { | ||
if (event.key === 'm') { | ||
if (event.key === 'c') { | ||
window.open('mailto:[email protected]', '_blank') | ||
} | ||
} | ||
|
@@ -86,7 +86,7 @@ const ContactUsLegend = () => { | |
return ( | ||
<div className="flex flex-col gap-y-2"> | ||
<div className="flex flex-row gap-x-2"> | ||
<Button variant="icon">M</Button> | ||
<Button variant="icon">C</Button> | ||
</div> | ||
<span>Contact Us</span> | ||
</div> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32"> | ||
<div className="flex max-w-lg flex-col gap-y-8"> | ||
<div className="flex flex-row items-center gap-x-4"> | ||
<span className="bg-polar-200 px-1 py-0.5 text-sm leading-none text-black"> | ||
{header.index}. | ||
</span> | ||
<h1 className="text-lg">{header.name}</h1> | ||
</div> | ||
<h1 className="text-balance text-4xl leading-normal">{title}</h1> | ||
{children} | ||
</div> | ||
{context} | ||
</div> | ||
) | ||
} |
47 changes: 22 additions & 25 deletions
47
clients/apps/web/src/components/Pitch/sections/IndexSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,29 @@ | ||
import { Console } from '../Console' | ||
import { Link } from '../Link' | ||
import { Section } from '../Section' | ||
|
||
export const IndexSection = () => { | ||
return ( | ||
<div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32"> | ||
<div className="flex max-w-lg flex-col gap-y-8"> | ||
<h1 className="text-lg">00. Index</h1> | ||
<h1 className="text-4xl">Integrating payments is a mess</h1> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</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">What we are building →</Link> | ||
</div> | ||
|
||
<Console | ||
className="aspect-video w-full max-w-lg" | ||
input="polar-init" | ||
output="Initializing seed round..." | ||
/> | ||
</div> | ||
<Section | ||
header={{ index: '00', name: 'Index' }} | ||
title="Integrating payments is a mess" | ||
context={ | ||
<Console | ||
className="flex aspect-video max-w-lg flex-grow" | ||
input="$ polar-init" | ||
output="Initializing seed round..." | ||
/> | ||
} | ||
> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</p> | ||
<p> | ||
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> | ||
) | ||
} |
35 changes: 16 additions & 19 deletions
35
clients/apps/web/src/components/Pitch/sections/InvestorsSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,22 @@ | ||
import { Link } from '../Link' | ||
import { Section } from '../Section' | ||
|
||
export const InvestorsSection = () => { | ||
return ( | ||
<div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32"> | ||
<div className="flex max-w-lg flex-col gap-y-8"> | ||
<h1 className="text-lg">06. Investors</h1> | ||
<h1 className="text-4xl">Our Angels</h1> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</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> | ||
</div> | ||
</div> | ||
<Section header={{ index: '06', name: 'Investors' }} title="Our Angels"> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</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> | ||
) | ||
} |
53 changes: 34 additions & 19 deletions
53
clients/apps/web/src/components/Pitch/sections/Polar20.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,40 @@ | ||
import { Console } from '../Console' | ||
import { Link } from '../Link' | ||
import { Section } from '../Section' | ||
|
||
export const Polar20Section = () => { | ||
return ( | ||
<div className="flex flex-col gap-y-16 md:flex-row md:gap-x-32"> | ||
<div className="flex max-w-lg flex-col gap-y-8"> | ||
<h1 className="text-lg">03. Polar 2.0</h1> | ||
<h1 className="text-4xl">The future of payments is usage based</h1> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</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> | ||
</div> | ||
</div> | ||
<Section | ||
header={{ index: '03', name: 'Polar 2.0' }} | ||
title="The future of payments is usage based" | ||
context={ | ||
<Console | ||
title="NextJS Adapter" | ||
input={`import { Usage } from '@polar-sh/nextjs' | ||
import { openai } from '@ai-sdk/openai' | ||
export const POST = Usage() | ||
.customer(req => 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... */)`} | ||
/> | ||
} | ||
> | ||
<p> | ||
What used to be a simple way to pay for things has become a complex | ||
mess. | ||
</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> | ||
) | ||
} |
Oops, something went wrong.