Skip to content

Commit f51b39d

Browse files
KianNHKianNH
committed
wip
1 parent 723956e commit f51b39d

File tree

1 file changed

+182
-93
lines changed

1 file changed

+182
-93
lines changed

‎src/components/homepage/OfferingsTabs.tsx‎

Lines changed: 182 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,60 @@
11
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
22
import MapImg from "~/assets/network-map.png";
33

4+
type CardPanelProps = {
5+
panel: {
6+
heading: string;
7+
cards: {
8+
label: string;
9+
description: string;
10+
cta: {
11+
primary: {
12+
label: string;
13+
href: string;
14+
};
15+
secondary: {
16+
label: string;
17+
href: string;
18+
};
19+
};
20+
}[];
21+
};
22+
};
23+
424
const tabs = ["Overview", "Connect & Protect", "Build"];
525

6-
const connectCards = [
7-
{
8-
label: "For websites & web apps",
9-
description: "DNS, CDN, L7 DDoS protection, WAF, and more.",
10-
cta: {
11-
primary: {
12-
label: "Proxy your domain",
13-
href: "/fundamentals/setup/manage-domains/connect-your-domain/",
14-
},
15-
secondary: {
16-
label: "All application services",
17-
href: "/products/?product-group=Analytics%2CApplication+performance%2CApplication+security%2CCloudflare+essentials",
18-
},
19-
},
20-
},
21-
{
22-
label: "For internal networking & Zero Trust security",
23-
description: "Access, Gateway, Tunnels, CASB, and more.",
24-
cta: {
25-
primary: {
26-
label: "Set up Zero Trust",
27-
href: "/cloudflare-one/setup/",
28-
},
29-
secondary: {
30-
label: "All Zero Trust services",
31-
href: "/products/?product-group=Cloudflare+One",
32-
},
33-
},
34-
},
35-
{
36-
label: "For public, private, and hybrid networks",
37-
description: "L3 DDoS protection, firewall, interconnects, and more.",
38-
cta: {
39-
primary: {
40-
label: "Onramp your network",
41-
href: "/TODO/",
42-
},
43-
secondary: {
44-
label: "All network services",
45-
href: "/products/?product-group=Network+security",
46-
},
47-
},
48-
},
49-
{
50-
label: "For personal devices and home networks",
51-
description: "1.1.1.1, WARP client, and Radar.",
52-
cta: {
53-
primary: {
54-
label: "Download WARP",
55-
href: "/warp-client/get-started/",
56-
},
57-
secondary: {
58-
label: "All consumer services",
59-
href: "/products/?product-group=Consumer+services",
60-
},
61-
},
62-
},
63-
] as const;
26+
function CardPanel({ panel }: CardPanelProps) {
27+
return (
28+
<div className="flex flex-col gap-4 p-6">
29+
<p className="text-center text-xl font-semibold">{panel.heading}</p>
30+
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
31+
{panel.cards.map((card) => (
32+
<div
33+
key={card.label}
34+
className="flex flex-col items-center gap-4 rounded border p-6 shadow-sm"
35+
>
36+
<div className="text-center">
37+
<p className="font-semibold">{card.label}</p>
38+
<p>{card.description}</p>
39+
</div>
40+
<a
41+
href={card.cta.primary.href}
42+
className="mt-auto block min-w-16 text-nowrap rounded border border-cl1-brand-orange px-6 text-black no-underline"
43+
>
44+
{card.cta.primary.label}
45+
</a>
46+
<a
47+
href={card.cta.secondary.href}
48+
className="block min-w-16 text-nowrap px-6 text-black no-underline"
49+
>
50+
{card.cta.secondary.label}
51+
</a>
52+
</div>
53+
))}
54+
</div>
55+
</div>
56+
);
57+
}
6458

6559
function OverviewPanel() {
6660
return (
@@ -96,42 +90,137 @@ function OverviewPanel() {
9690
}
9791

9892
function ConnectPanel() {
99-
return (
100-
<div className="flex flex-col gap-4 p-6">
101-
<p className="text-center text-xl font-semibold">
102-
Secure and accelerate anything connected to Cloudflare.
103-
</p>
104-
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
105-
{connectCards.map((card) => (
106-
<div
107-
key={card.label}
108-
className="flex flex-col items-center gap-4 rounded border p-6 shadow-sm"
109-
>
110-
<div className="text-center">
111-
<p className="font-semibold">{card.label}</p>
112-
<p>{card.description}</p>
113-
</div>
114-
<a
115-
href={card.cta.primary.href}
116-
className="mt-auto block min-w-16 text-nowrap rounded border border-cl1-brand-orange px-6 text-black no-underline"
117-
>
118-
{card.cta.primary.label}
119-
</a>
120-
<a
121-
href={card.cta.secondary.href}
122-
className="block min-w-16 text-nowrap px-6 text-black no-underline"
123-
>
124-
{card.cta.secondary.label}
125-
</a>
126-
</div>
127-
))}
128-
</div>
129-
</div>
130-
);
93+
const panel = {
94+
heading: "Secure and accelerate anything connected to Cloudflare.",
95+
cards: [
96+
{
97+
label: "For websites & web apps",
98+
description: "DNS, CDN, L7 DDoS protection, WAF, and more.",
99+
cta: {
100+
primary: {
101+
label: "Proxy your domain",
102+
href: "/fundamentals/setup/manage-domains/connect-your-domain/",
103+
},
104+
secondary: {
105+
label: "All application services",
106+
href: "/products/?product-group=Analytics%2CApplication+performance%2CApplication+security%2CCloudflare+essentials",
107+
},
108+
},
109+
},
110+
{
111+
label: "For internal networking & Zero Trust security",
112+
description: "Access, Gateway, Tunnels, CASB, and more.",
113+
cta: {
114+
primary: {
115+
label: "Set up Zero Trust",
116+
href: "/cloudflare-one/setup/",
117+
},
118+
secondary: {
119+
label: "All Zero Trust services",
120+
href: "/products/?product-group=Cloudflare+One",
121+
},
122+
},
123+
},
124+
{
125+
label: "For public, private, and hybrid networks",
126+
description: "L3 DDoS protection, firewall, interconnects, and more.",
127+
cta: {
128+
primary: {
129+
label: "Onramp your network",
130+
href: "/TODO/",
131+
},
132+
secondary: {
133+
label: "All network services",
134+
href: "/products/?product-group=Network+security",
135+
},
136+
},
137+
},
138+
{
139+
label: "For personal devices and home networks",
140+
description: "1.1.1.1, WARP client, and Radar.",
141+
cta: {
142+
primary: {
143+
label: "Download WARP",
144+
href: "/warp-client/get-started/",
145+
},
146+
secondary: {
147+
label: "All consumer services",
148+
href: "/products/?product-group=Consumer+services",
149+
},
150+
},
151+
},
152+
],
153+
};
154+
155+
return CardPanel({ panel });
131156
}
132157

133158
function BuildPanel() {
134-
return <p>BuildPanel</p>;
159+
const panel = {
160+
heading:
161+
"Build fast, secure, and global apps on Cloudflare's developer platform.",
162+
cards: [
163+
{
164+
label: "Serverless compute",
165+
description:
166+
"Workers & Pages, Wrangler, Workers for Platforms, and more.",
167+
cta: {
168+
primary: {
169+
label: "Try Workers",
170+
href: "/workers/get-started/",
171+
},
172+
secondary: {
173+
label: "All developer services",
174+
href: "/products/?product-group=Developer+platforms",
175+
},
176+
},
177+
},
178+
{
179+
label: "AI inference",
180+
description: "Workers AI, AI Gateway, and Vectorize.",
181+
cta: {
182+
primary: {
183+
label: "Try Workers AI",
184+
href: "/workers-ai/",
185+
},
186+
secondary: {
187+
label: "All AI services",
188+
href: "/products/?product-group=AI",
189+
},
190+
},
191+
},
192+
{
193+
label: "Storage & databases",
194+
description: "R2, D1, KV, Durable Objects, and more.",
195+
cta: {
196+
primary: {
197+
label: "Try R2 object storage",
198+
href: "/r2/get-started/",
199+
},
200+
secondary: {
201+
label: "All storage services",
202+
href: "/products/?product-group=Storage",
203+
},
204+
},
205+
},
206+
{
207+
label: "Media & real-time",
208+
description: "Image Optimization, Stream, and Calls.",
209+
cta: {
210+
primary: {
211+
label: "Try Images",
212+
href: "/images/",
213+
},
214+
secondary: {
215+
label: "All media services",
216+
href: "/products/?product-group=Media",
217+
},
218+
},
219+
},
220+
],
221+
};
222+
223+
return CardPanel({ panel });
135224
}
136225

137226
const panels = [OverviewPanel, ConnectPanel, BuildPanel];
@@ -153,10 +242,10 @@ export default function OfferingsTabs() {
153242
))}
154243
</TabList>
155244

156-
{panels.map((Panel) => (
245+
{panels.map((Panel, idx) => (
157246
<TabPanel>
158247
<div className="border">
159-
<Panel />
248+
<Panel key={idx} />
160249
</div>
161250
</TabPanel>
162251
))}

0 commit comments

Comments
 (0)