wip

Author: KianNH

package-lock.json

@@ -92,6 +92,7 @@
 		"react-icons": "5.5.0",
 		"react-instantsearch": "7.15.4",
 		"react-markdown": "10.0.1",
+		"react-tabs": "6.1.0",
 		"redirects-in-workers": "0.0.5",
 		"rehype": "13.0.2",
 		"rehype-autolink-headings": "7.1.0",

package.json

@@ -6,7 +6,7 @@ const changelogs = await getChangelogs({}).then((arr) => arr.slice(0, 5));
 ---
 
 <h2>Documentation changelog</h2>
-<div class="h-[28rem] w-3/4 overflow-y-scroll rounded border px-6 py-4">
+<div class="h-[28rem] w-3/5 overflow-y-scroll rounded border px-6 py-4">
 	<ul class="overflow-y-scroll pl-0">
 		{
 			changelogs.map(async (changelog) => {

src/assets/network-map.svg

@@ -0,0 +1,125 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import MapSvg from "~/assets/network-map.svg?raw";
+
+const tabs = ["Overview", "Connect & Protect", "Build"];
+
+const connectCards = [
+	{
+		label: "For websites & web apps",
+		description: "DNS, CDN, L7 DDoS protection, WAF, and more.",
+		cta: {
+			primary: {
+				label: "Proxy your domain",
+				href: "/fundamentals/setup/manage-domains/connect-your-domain/",
+			},
+			secondary: {
+				label: "All application services",
+				href: "/products/?product-group=Analytics%2CApplication+performance%2CApplication+security%2CCloudflare+essentials",
+			},
+		},
+	},
+	{
+		label: "For internal networking & Zero Trust security",
+		description: "Access, Gateway, Tunnels, CASB, and more.",
+		cta: {
+			primary: {
+				label: "Set up Zero Trust",
+				href: "/cloudflare-one/setup/",
+			},
+			secondary: {
+				label: "All Zero Trust services",
+				href: "/products/?product-group=Cloudflare+One",
+			},
+		},
+	},
+	{
+		label: "For public, private, and hybrid networks",
+		description: "L3 DDoS protection, firewall, interconnects, and more.",
+		cta: {
+			primary: {
+				label: "Onramp your network",
+				href: "/TODO/",
+			},
+			secondary: {
+				label: "All network services",
+				href: "/products/?product-group=Network+security",
+			},
+		},
+	},
+	{
+		label: "For personal devices and home networks",
+		description: "1.1.1.1, WARP client, and Radar.",
+		cta: {
+			primary: {
+				label: "Download WARP",
+				href: "/warp-client/get-started/",
+			},
+			secondary: {
+				label: "All consumer services",
+				href: "/products/?product-group=Consumer+services",
+			},
+		},
+	},
+] as const;
+
+export default function OfferingsTabs() {
+	return (
+		<Tabs className="not-content w-full shadow-md">
+			<TabList className="grid list-none grid-cols-3 gap-2 pl-0 text-center">
+				{tabs.map((tab, index) => (
+					<Tab
+						key={index}
+						className="h-14 rounded-t border-l border-r border-t p-4 font-semibold"
+					>
+						{tab}
+					</Tab>
+				))}
+			</TabList>
+
+			<TabPanel>
+				<div className="flex items-center justify-center gap-6">
+					<div dangerouslySetInnerHTML={{ __html: MapSvg }} />
+					<div>
+						<div>
+							<p className="text-xl font-semibold">What is Cloudflare?</p>
+							<p>
+								Connect to or build on top of Cloudflare’s global network to
+								speed up and protect your apps, employees, and networks.
+							</p>
+						</div>
+						<div className="flex gap-4">
+							<a href="https://dash.cloudflare.com/login">Sign up</a>
+							<a href="/fundamentals/">Learn more</a>
+						</div>
+					</div>
+				</div>
+			</TabPanel>
+			<TabPanel className="p-6">
+				<div className="flex flex-col gap-4">
+					<p className="text-center text-xl font-semibold">
+						Secure and accelerate anything connected to Cloudflare.
+					</p>
+					<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+						{connectCards.map((card) => (
+							<div className="flex flex-col items-center gap-4 rounded border p-6 shadow-sm">
+								<div className="text-center">
+									<p className="font-semibold">{card.label}</p>
+									<p>{card.description}</p>
+								</div>
+								<a className="mt-auto block min-w-16 text-nowrap rounded border border-cl1-brand-orange px-6">
+									Proxy your domain
+								</a>
+								<a className="block min-w-16 text-nowrap px-6">
+									All application services
+								</a>
+							</div>
+						))}
+					</div>
+				</div>
+			</TabPanel>
+			<TabPanel>
+				<p>Content for Tab 3</p>
+			</TabPanel>
+		</Tabs>
+	);
+}

src/components/homepage/Changelog.astro

@@ -9,6 +9,7 @@ import GetStarted from "~/components/homepage/GetStarted.astro";
 import BuildWithCloudflare from "~/components/homepage/BuildWithCloudflare.astro";
 import BottomLinks from "~/components/homepage/BottomLinks.astro";
 import Offerings from "~/components/homepage/Offerings.astro";
+import OfferingsTabs from "~/components/homepage/OfferingsTabs.tsx";
 import Changelog from "~/components/homepage/Changelog.astro";
 
 const props = {
@@ -29,7 +30,7 @@ const props = {
 			<TopCards />
 		</div>
 		<div class="flex flex-col items-center justify-center gap-10">
-			<Offerings />
+			<OfferingsTabs client:load />
 		</div>
 		<div class="flex flex-col items-center justify-center gap-10">
 			<GetStarted />