Skip to content

Commit d8d51f7

Browse files
alex-beckettalex-beckett
authored
Merge pull request #95 from celestiaorg/jcs/links
docs: fix link to quickstart
2 parents 1dabfc9 + a68f4a9 commit d8d51f7

File tree

1 file changed

+153
-132
lines changed

1 file changed

+153
-132
lines changed

‎src/app/build/page.js

+153-132
Original file line numberDiff line numberDiff line change
@@ -15,141 +15,162 @@ import seo from "@/data/build/seo";
1515
export const metadata = Meta(seo);
1616

1717
export default async function Build() {
18-
const integrationRow1 = [
19-
{
20-
title: "Documentation",
21-
description: "Documentation for the Celestia network.",
22-
url: "https://docs.celestia.org/",
23-
},
24-
{
25-
title: "Pay for blobspace",
26-
description: "Overview of paying for blob transactions and Celestia’s fee market.",
27-
url: "https://docs.celestia.org/learn/paying-for-blobspace/",
28-
},
29-
{
30-
title: "Blob tutorial",
31-
description: "Learn how to publish and retrieve transaction data from Celestia.",
32-
url: "https://docs.celestia.org/developers/node-tutorial/",
33-
},
34-
];
18+
const integrationRow1 = [
19+
{
20+
title: "Documentation",
21+
description: "Documentation for the Celestia network.",
22+
url: "https://docs.celestia.org/",
23+
},
24+
{
25+
title: "Pay for blobspace",
26+
description:
27+
"Overview of paying for blob transactions and Celestia’s fee market.",
28+
url: "https://docs.celestia.org/learn/paying-for-blobspace/",
29+
},
30+
{
31+
title: "Blob tutorial",
32+
description:
33+
"Learn how to publish and retrieve transaction data from Celestia.",
34+
url: "https://docs.celestia.org/how-to-guides/quick-start/",
35+
},
36+
];
3537

36-
const integrationRow2 = [
37-
{
38-
title: "Blobstream",
39-
description: "Use Celestia as the DA layer for your Ethereum L2.",
40-
url: "https://docs.celestia.org/developers/blobstream/",
41-
},
42-
{
43-
title: "Node API",
44-
description: "Use the celestia-node API to publish and retrieve transactions from Celestia.",
45-
url: "https://node-rpc-docs.celestia.org/?version=v0.12.0/",
46-
},
47-
];
38+
const integrationRow2 = [
39+
{
40+
title: "Blobstream",
41+
description: "Use Celestia as the DA layer for your Ethereum L2.",
42+
url: "https://docs.celestia.org/developers/blobstream/",
43+
},
44+
{
45+
title: "Node API",
46+
description:
47+
"Use the celestia-node API to publish and retrieve transactions from Celestia.",
48+
url: "https://node-rpc-docs.celestia.org/?version=v0.12.0/",
49+
},
50+
];
4851

49-
return (
50-
<>
51-
<SecondaryHero
52-
title={"Build whatever"}
53-
buttons={[
54-
{
55-
text: "Build",
56-
url: "#frameworks",
57-
iconDirection: "down-right",
58-
},
59-
{
60-
text: "Integrate",
61-
url: "#integration",
62-
iconDirection: "down-right",
63-
},
64-
{
65-
text: "Deploy",
66-
url: "#rollups",
67-
iconDirection: "down-right",
68-
},
69-
]}
70-
videos={{
71-
src: {
72-
xl: "/videos/hero/blob-desktop_xl.mp4",
73-
lg: "/videos/hero/blob-desktop_lg.mp4",
74-
sm: "/videos/hero/blob-mobile_sm.mp4",
75-
},
76-
poster: {
77-
lg: "/videos/hero/blob-desktop_xl_poster.jpg",
78-
sm: "/videos/hero/blob-mobile_sm_poster.jpg",
79-
},
80-
}}
81-
/>
52+
return (
53+
<>
54+
<SecondaryHero
55+
title={"Build whatever"}
56+
buttons={[
57+
{
58+
text: "Build",
59+
url: "#frameworks",
60+
iconDirection: "down-right",
61+
},
62+
{
63+
text: "Integrate",
64+
url: "#integration",
65+
iconDirection: "down-right",
66+
},
67+
{
68+
text: "Deploy",
69+
url: "#rollups",
70+
iconDirection: "down-right",
71+
},
72+
]}
73+
videos={{
74+
src: {
75+
xl: "/videos/hero/blob-desktop_xl.mp4",
76+
lg: "/videos/hero/blob-desktop_lg.mp4",
77+
sm: "/videos/hero/blob-mobile_sm.mp4",
78+
},
79+
poster: {
80+
lg: "/videos/hero/blob-desktop_xl_poster.jpg",
81+
sm: "/videos/hero/blob-mobile_sm_poster.jpg",
82+
},
83+
}}
84+
/>
8285

83-
<ProjectFilter
84-
id={"frameworks"}
85-
title={"Choose a framework"}
86-
description={"Get started quickly by using Celestia with leading rollup frameworks."}
87-
filters={getFilterOptions(frameworks, "categories")}
88-
filterTarget={"categories"}
89-
items={frameworks}
90-
/>
91-
<section id={"integration"} className='text-white bg-black'>
92-
<Container size={"lg"} className={"py-10 lg:py-24"} padding={false}>
93-
<Row className={"mb-6 lg:mb-16 px-4 md:px-10"}>
94-
<Col width={60}>
95-
<Display size={"sm"} tag={"h2"} className={"mb-4 lg:mb-6"}>
96-
Developer resources
97-
</Display>
98-
</Col>
99-
<Col width={40} className='lg:flex'></Col>
100-
</Row>
101-
{/* Mobile overflow scroll layout */}
102-
<div className='block md:hidden'>
103-
<Row>
104-
<Col width={100}>
105-
<div className='flex w-auto gap-4 px-4 mb-4 mr-4 overflow-x-scroll no-scrollbar'>
106-
{[...integrationRow1, ...integrationRow2].map((card, index) => (
107-
<VerticalTitleCard
108-
dark
109-
key={index}
110-
verticalTitle={card.title}
111-
description={card.description}
112-
url={card.url}
113-
/>
114-
))}
115-
</div>
116-
</Col>
117-
</Row>
118-
</div>
119-
{/* Desktop grid layout */}
120-
<div className='hidden px-4 md:block md:px-10'>
121-
<Row>
122-
<Col width={100}>
123-
<div className='grid w-full grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-3'>
124-
{integrationRow1.map((card, index) => (
125-
<VerticalTitleCard dark key={index} title={card.title} description={card.description} url={card.url} />
126-
))}
127-
</div>
128-
</Col>
129-
</Row>
130-
<Row>
131-
<Col width={100}>
132-
<div className='grid w-full grid-cols-1 gap-4 mb-4 md:grid-cols-2'>
133-
{integrationRow2.map((card, index) => (
134-
<VerticalTitleCard dark key={index} title={card.title} description={card.description} url={card.url} />
135-
))}
136-
</div>
137-
</Col>
138-
</Row>
139-
</div>
140-
</Container>
141-
</section>
86+
<ProjectFilter
87+
id={"frameworks"}
88+
title={"Choose a framework"}
89+
description={
90+
"Get started quickly by using Celestia with leading rollup frameworks."
91+
}
92+
filters={getFilterOptions(frameworks, "categories")}
93+
filterTarget={"categories"}
94+
items={frameworks}
95+
/>
96+
<section id={"integration"} className="text-white bg-black">
97+
<Container size={"lg"} className={"py-10 lg:py-24"} padding={false}>
98+
<Row className={"mb-6 lg:mb-16 px-4 md:px-10"}>
99+
<Col width={60}>
100+
<Display size={"sm"} tag={"h2"} className={"mb-4 lg:mb-6"}>
101+
Developer resources
102+
</Display>
103+
</Col>
104+
<Col width={40} className="lg:flex"></Col>
105+
</Row>
106+
{/* Mobile overflow scroll layout */}
107+
<div className="block md:hidden">
108+
<Row>
109+
<Col width={100}>
110+
<div className="flex w-auto gap-4 px-4 mb-4 mr-4 overflow-x-scroll no-scrollbar">
111+
{[...integrationRow1, ...integrationRow2].map(
112+
(card, index) => (
113+
<VerticalTitleCard
114+
dark
115+
key={index}
116+
verticalTitle={card.title}
117+
description={card.description}
118+
url={card.url}
119+
/>
120+
),
121+
)}
122+
</div>
123+
</Col>
124+
</Row>
125+
</div>
126+
{/* Desktop grid layout */}
127+
<div className="hidden px-4 md:block md:px-10">
128+
<Row>
129+
<Col width={100}>
130+
<div className="grid w-full grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-3">
131+
{integrationRow1.map((card, index) => (
132+
<VerticalTitleCard
133+
dark
134+
key={index}
135+
title={card.title}
136+
description={card.description}
137+
url={card.url}
138+
/>
139+
))}
140+
</div>
141+
</Col>
142+
</Row>
143+
<Row>
144+
<Col width={100}>
145+
<div className="grid w-full grid-cols-1 gap-4 mb-4 md:grid-cols-2">
146+
{integrationRow2.map((card, index) => (
147+
<VerticalTitleCard
148+
dark
149+
key={index}
150+
title={card.title}
151+
description={card.description}
152+
url={card.url}
153+
/>
154+
))}
155+
</div>
156+
</Col>
157+
</Row>
158+
</div>
159+
</Container>
160+
</section>
142161

143-
<ProjectFilter
144-
id={"rollups"}
145-
title={"Rollups-as-a-Service"}
146-
description={"Deploy end-to-end on managed infrastructure using a Rollup-as-a-Service provider."}
147-
filters={getFilterOptions(rollups, "categories")}
148-
filterTarget={"categories"}
149-
items={rollups}
150-
/>
162+
<ProjectFilter
163+
id={"rollups"}
164+
title={"Rollups-as-a-Service"}
165+
description={
166+
"Deploy end-to-end on managed infrastructure using a Rollup-as-a-Service provider."
167+
}
168+
filters={getFilterOptions(rollups, "categories")}
169+
filterTarget={"categories"}
170+
items={rollups}
171+
/>
151172

152-
<GetInTouch />
153-
</>
154-
);
173+
<GetInTouch />
174+
</>
175+
);
155176
}

0 commit comments

Comments
 (0)