Explore Endpoints landing page

src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx

@@ -1,13 +1,55 @@
 "use client";
 
-import { Routes } from "@/constants/routes";
 import { usePathname } from "next/navigation";
+import { Card, Icon, Text } from "@stellar/design-system";
+
+import { InfoCards } from "@/components/InfoCards";
+import { Routes } from "@/constants/routes";
+
+const infoCards = [
+  {
+    id: "soroban-rpc",
+    title: "RPC Endpoints",
+    description: "TODO: add text",
+    buttonLabel: "See docs",
+    buttonIcon: <Icon.LinkExternal01 />,
+    buttonAction: () =>
+      window.open("https://soroban.stellar.org/api/methods", "_blank"),
+  },
+  {
+    id: "horizon",
+    title: "Horizon Endpoints",
+    description: "TODO: add text",
+    buttonLabel: "Go to docs",
+    buttonIcon: <Icon.LinkExternal01 />,
+    buttonAction: () =>
+      window.open(
+        "https://developers.stellar.org/api/horizon/resources/",
+        "_blank",
+      ),
+  },
+];
 
 export default function ExploreEndpoints() {
   const pathname = usePathname();
 
   if (pathname === Routes.EXPLORE_ENDPOINTS) {
-    return <div>Endpoints landing</div>;
+    return (
+      <>
+        <Card>
+          <div className="CardText">
+            <Text size="lg" as="h1" weight="medium">
+              Endpoints
+            </Text>
+
+            <Text size="sm" as="p">
+              TODO: add text
+            </Text>
+          </div>
+        </Card>
+        <InfoCards infoCards={infoCards} />
+      </>
+    );
   }
 
   return renderPage(pathname);

src/app/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+import { Card, Link, Text, Icon } from "@stellar/design-system";
 
 import { NextLink } from "@/components/NextLink";
 import { LayoutContentContainer } from "@/components/layout/LayoutContentContainer";
+import { InfoCards } from "@/components/InfoCards";
 import { Routes } from "@/constants/routes";
 
 export default function Introduction() {
@@ -85,30 +86,7 @@ export default function Introduction() {
         </div>
       </Card>
 
-      <div className="IntroCards">
-        {infoCards.map((c) => (
-          <Card key={c.id}>
-            <Text size="md" as="h2" weight="medium">
-              {c.title}
-            </Text>
-
-            <Text size="sm" as="p">
-              {c.description}
-            </Text>
-
-            <div>
-              <Button
-                variant="secondary"
-                size="md"
-                icon={c.buttonIcon}
-                onClick={c.buttonAction}
-              >
-                {c.buttonLabel}
-              </Button>
-            </div>
-          </Card>
-        ))}
-      </div>
+      <InfoCards infoCards={infoCards} />
 
       {/* TODO: add TOS and Privacy */}
     </LayoutContentContainer>

src/components/InfoCards/index.tsx

@@ -0,0 +1,32 @@
+import { Button, Card, Text } from "@stellar/design-system";
+import { InfoCard } from "@/types/types";
+import "./styles.scss";
+
+export const InfoCards = ({ infoCards }: { infoCards: InfoCard[] }) => {
+  return (
+    <div className="InfoCards">
+      {infoCards.map((c) => (
+        <Card key={c.id}>
+          <Text size="md" as="h2" weight="medium">
+            {c.title}
+          </Text>
+
+          <Text size="sm" as="p">
+            {c.description}
+          </Text>
+
+          <div>
+            <Button
+              variant="secondary"
+              size="md"
+              icon={c.buttonIcon}
+              onClick={c.buttonAction}
+            >
+              {c.buttonLabel}
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};

src/components/InfoCards/styles.scss

@@ -0,0 +1,18 @@
+@use "../../styles/utils.scss" as *;
+
+.InfoCards {
+  display: grid;
+  gap: pxToRem(12px);
+  grid-template-columns: 1fr 1fr;
+
+  .Card {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(8px);
+    justify-content: space-between;
+
+    :nth-child(2) {
+      flex: 1;
+    }
+  }
+}

src/styles/globals.scss

@@ -299,20 +299,3 @@
     margin-bottom: 0 !important;
   }
 }
-
-.IntroCards {
-  display: grid;
-  gap: pxToRem(12px);
-  grid-template-columns: 1fr 1fr;
-
-  .Card {
-    display: flex;
-    flex-direction: column;
-    gap: pxToRem(8px);
-    justify-content: space-between;
-
-    :nth-child(2) {
-      flex: 1;
-    }
-  }
-}

src/types/types.ts

@@ -31,3 +31,12 @@ export type StatusPageScheduled = {
   components: StatusPageComponent[];
   incident_updates: StatusPageIncident[];
 };
+
+export type InfoCard = {
+  id: string;
+  title: string;
+  description: string;
+  buttonLabel: string;
+  buttonIcon?: React.ReactNode;
+  buttonAction: () => void;
+};