Skip to content

Commit db74c23

Browse files
glitch003glitch003
authored
Merge pull request #28 from LIT-Protocol/glitch003/oracle-reframe-prototypes
Reframe landing page around Read · Compute · Write (oracle / cross-chain TEE)
2 parents 5af57e7 + a54b440 commit db74c23

25 files changed

Lines changed: 1859 additions & 1065 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,4 @@ yarn-error.log*
3333
# typescript
3434
*.tsbuildinfo
3535
next-env.d.ts
36+
.gstack/

‎public/og-image.png‎

-629 KB
Binary file not shown.

‎public/twitter-image.png‎

-606 KB
Binary file not shown.

‎src/app/api/og/route.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { ImageResponse } from 'next/server';
2+
3+
export const runtime = 'edge';
4+
5+
export async function GET() {
6+
return new ImageResponse(
7+
(
8+
<div
9+
style={{
10+
width: '100%',
11+
height: '100%',
12+
display: 'flex',
13+
flexDirection: 'column',
14+
justifyContent: 'center',
15+
padding: '80px',
16+
background:
17+
'linear-gradient(135deg, #0a1226 0%, #1a2347 45%, #0e1a2e 100%)',
18+
color: 'white',
19+
position: 'relative',
20+
}}
21+
>
22+
<div
23+
style={{
24+
position: 'absolute',
25+
top: -200,
26+
right: -200,
27+
width: 700,
28+
height: 700,
29+
background:
30+
'radial-gradient(circle, rgba(167,243,208,0.18) 0%, transparent 65%)',
31+
display: 'flex',
32+
}}
33+
/>
34+
<div
35+
style={{
36+
position: 'absolute',
37+
bottom: -200,
38+
left: -200,
39+
width: 600,
40+
height: 600,
41+
background:
42+
'radial-gradient(circle, rgba(255,66,5,0.16) 0%, transparent 65%)',
43+
display: 'flex',
44+
}}
45+
/>
46+
47+
<div
48+
style={{
49+
display: 'flex',
50+
alignItems: 'center',
51+
gap: 14,
52+
fontSize: 24,
53+
color: 'rgba(255,255,255,0.65)',
54+
letterSpacing: '0.2em',
55+
marginBottom: 36,
56+
fontFamily: 'monospace',
57+
}}
58+
>
59+
<span
60+
style={{
61+
width: 10,
62+
height: 10,
63+
borderRadius: 999,
64+
background: '#a7f3d0',
65+
display: 'flex',
66+
}}
67+
/>
68+
LIT PROTOCOL · TEE-SECURED COMPUTE
69+
</div>
70+
71+
<div
72+
style={{
73+
display: 'flex',
74+
flexDirection: 'column',
75+
fontSize: 80,
76+
lineHeight: 1.05,
77+
fontWeight: 500,
78+
letterSpacing: '-0.02em',
79+
}}
80+
>
81+
<div style={{ display: 'flex' }}>Read anywhere.</div>
82+
<div style={{ display: 'flex' }}>
83+
<span style={{ color: '#a7f3d0' }}>Compute</span>
84+
<span style={{ marginLeft: '0.3em' }}>in a TEE.</span>
85+
</div>
86+
<div style={{ display: 'flex' }}>Write to any chain or API.</div>
87+
</div>
88+
89+
<div
90+
style={{
91+
display: 'flex',
92+
justifyContent: 'space-between',
93+
alignItems: 'center',
94+
marginTop: 56,
95+
color: 'rgba(255,255,255,0.55)',
96+
fontSize: 24,
97+
fontFamily: 'monospace',
98+
letterSpacing: '0.15em',
99+
}}
100+
>
101+
<span>litprotocol.com</span>
102+
<span>READ · COMPUTE · WRITE</span>
103+
</div>
104+
</div>
105+
),
106+
{
107+
width: 1200,
108+
height: 630,
109+
}
110+
);
111+
}

‎src/app/layout.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,35 @@ import {
1111
mantineHtmlProps,
1212
} from '@mantine/core';
1313

14+
const DESCRIPTION =
15+
'Read anywhere. Compute in a TEE. Write to any chain or API. Lit is a programmable runtime that pulls data from any source, runs your logic in a chain-secured TEE, and signs on any chain or API.';
16+
1417
export const metadata: Metadata = {
18+
metadataBase: new URL('https://litprotocol.com'),
1519
title: 'Lit Protocol',
16-
description:
17-
'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
20+
description: DESCRIPTION,
1821
openGraph: {
1922
title: 'Lit Protocol',
20-
description:
21-
'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
23+
description: DESCRIPTION,
2224
url: 'https://litprotocol.com',
2325
siteName: 'Lit Protocol',
2426
images: {
25-
url: '/og-image.png',
26-
alt: 'Description of Lit Protocol over a blue and orange gradient background',
27+
url: '/api/og',
28+
width: 1200,
29+
height: 630,
30+
alt: 'Lit Protocol — Read anywhere. Compute in a TEE. Write to any chain or API.',
2731
},
2832
},
2933
twitter: {
3034
card: 'summary_large_image',
3135
title: 'Lit Protocol',
32-
description:
33-
'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
36+
description: DESCRIPTION,
3437
creator: '@LitProtocol',
3538
images: {
36-
url: '/twitter-image.png',
37-
alt: 'Description of Lit Protocol over a blue and orange gradient background',
39+
url: '/api/og',
40+
width: 1200,
41+
height: 630,
42+
alt: 'Lit Protocol — Read anywhere. Compute in a TEE. Write to any chain or API.',
3843
},
3944
},
4045
};

‎src/app/prototypes/1/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Layout from '@/components/Layout/Layout';
2+
import Prototype1 from '@/components/Prototypes/Prototype1';
3+
4+
export default function Page() {
5+
return (
6+
<Layout>
7+
<Prototype1 />
8+
</Layout>
9+
);
10+
}

‎src/app/prototypes/2/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Layout from '@/components/Layout/Layout';
2+
import Prototype2 from '@/components/Prototypes/Prototype2';
3+
4+
export default function Page() {
5+
return (
6+
<Layout>
7+
<Prototype2 />
8+
</Layout>
9+
);
10+
}

‎src/app/prototypes/3/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Layout from '@/components/Layout/Layout';
2+
import Prototype3 from '@/components/Prototypes/Prototype3';
3+
4+
export default function Page() {
5+
return (
6+
<Layout>
7+
<Prototype3 />
8+
</Layout>
9+
);
10+
}

‎src/app/prototypes/page.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import Layout from '@/components/Layout/Layout';
2+
import Link from 'next/link';
3+
import { Container } from '@mantine/core';
4+
5+
const options = [
6+
{
7+
id: 1,
8+
label: 'Read. Compute. Write.',
9+
angle: 'Developer-forward',
10+
pitch:
11+
'Leads with the primitive: read anywhere, compute in a TEE, write to any chain or API. Hero is a real code snippet. For people who want to understand what it actually is in 30 seconds.',
12+
accent: 'text-mint-500',
13+
},
14+
{
15+
id: 2,
16+
label: 'The Programmable Oracle',
17+
angle: 'Infrastructure positioning',
18+
pitch:
19+
'Positions Lit against traditional oracles, bridges, and "trust me" backends. Leans hard on the chain-secured TEE story. For people evaluating infra and comparing options.',
20+
accent: 'text-lit-orange',
21+
},
22+
{
23+
id: 3,
24+
label: 'Cross-Chain, Cross-API',
25+
angle: 'Use-case forward',
26+
pitch:
27+
'Opens with the outcome: connect any chain to any API. Interactive flow viewer lets visitors click through 6 concrete patterns (rebalancer, agent, oracle, webhook bridges). For people who want to see "is this for me?".',
28+
accent: 'text-electric-blue-500',
29+
},
30+
];
31+
32+
export default function PrototypesIndex() {
33+
return (
34+
<Layout>
35+
<div className="bg-coal-950 text-off-white min-h-screen">
36+
<Container size="md" className="!py-24">
37+
<div className="mb-12">
38+
<span className="font-mono text-xs uppercase tracking-[0.2em] text-white/40">
39+
Landing page prototypes · for review
40+
</span>
41+
<h1 className="mt-4 !text-4xl md:!text-6xl font-medium leading-tight">
42+
Reorienting the site around{' '}
43+
<span className="text-mint-500">read · compute · write</span>.
44+
</h1>
45+
<p className="mt-6 text-white/70 max-w-2xl">
46+
Three different ways to frame Lit as the TEE-secured runtime for
47+
cross-chain and cross-API workflows. Each is a full landing page
48+
you can scroll. Switcher at the bottom of each lets you flip
49+
between them.
50+
</p>
51+
</div>
52+
53+
<div className="space-y-4">
54+
{options.map((o) => (
55+
<Link
56+
key={o.id}
57+
href={`/prototypes/${o.id}`}
58+
className="block border border-white/10 rounded-xl p-6 hover:border-white/30 hover:bg-white/[0.02] transition group"
59+
>
60+
<div className="flex items-baseline justify-between mb-2">
61+
<div className="flex items-baseline gap-4">
62+
<span className="font-mono text-xs text-white/40">
63+
0{o.id}
64+
</span>
65+
<span
66+
className={`font-mono text-xs uppercase tracking-widest ${o.accent}`}
67+
>
68+
{o.angle}
69+
</span>
70+
</div>
71+
<span className="text-white/30 group-hover:text-white transition">
72+
→
73+
</span>
74+
</div>
75+
<div className="text-3xl font-medium mb-2">{o.label}</div>
76+
<div className="text-white/60 text-sm max-w-2xl">{o.pitch}</div>
77+
</Link>
78+
))}
79+
</div>
80+
81+
<div className="mt-16 text-white/40 text-sm">
82+
↳ Once you pick a direction (or a remix), the existing{' '}
83+
<Link href="/" className="underline hover:text-white">
84+
homepage
85+
</Link>{' '}
86+
sections can be replaced wholesale.
87+
</div>
88+
</Container>
89+
</div>
90+
</Layout>
91+
);
92+
}

‎src/components/Footer/Footer.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
LINKEDIN_LINK,
1111
SPARK_LINK,
1212
TWITTER_LINK,
13-
WHITEPAPER_LINK,
1413
GALXE_LINK,
1514
GOVERNANCE_LINK,
1615
MICA_LINK,
@@ -66,14 +65,6 @@ const Footer = () => {
6665
>
6766
Docs
6867
</a>
69-
<a
70-
href={WHITEPAPER_LINK}
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
className={styles.footer__link}
74-
>
75-
Whitepaper
76-
</a>
7768
<a
7869
href={GITHUB_LINK}
7970
target="_blank"

0 commit comments

Comments
 (0)