feat(docs): enhance Flare launch page with new protocols and tags

Author: fassko

docs/1-intro.mdx

@@ -30,6 +30,7 @@ keywords:
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import DocCard from "@theme/DocCard";
+import CopyButton from "@site/src/components/CopyButton";
 
 Start building on Flare, the interoperable EVM L1 engineered for a data-rich, interconnected future.
 Flare Developer Hub is your central resource, containing the tutorials, SDKs, and API documentation you need to succeed.
@@ -64,12 +65,12 @@ Dive in to Flare's enshrined data, fast finality, and soon, verifiable compute w
   </div>
 </div>
 
-| Network      | Flare Mainnet                                                                  | Flare Testnet Coston2                                                              |
-| :----------- | :----------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- |
-| **RPC**      | `https://flare-api.flare.network/ext/C/rpc`                                    | `https://coston2-api.flare.network/ext/C/rpc`                                      |
-| **Chain ID** | `14`                                                                           | `114`                                                                              |
-| **Explorer** | [`https://flare-explorer.flare.network`](https://flare-explorer.flare.network) | [`https://coston2-explorer.flare.network`](https://coston2-explorer.flare.network) |
-| **Faucet**   | N/A                                                                            | Request C2FLR from the [Coston2 Faucet](https://faucet.flare.network/coston2)      |
+| Network      | Flare Mainnet                                                                                                        | Flare Testnet Coston2                                                                                                    |
+| :----------- | :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- |
+| **RPC**      | <code>flare-api.flare.network/ext/C/rpc</code> <CopyButton textToCopy="https://flare-api.flare.network/ext/C/rpc" /> | <code>coston2-api.flare.network/ext/C/rpc</code> <CopyButton textToCopy="https://coston2-api.flare.network/ext/C/rpc" /> |
+| **Chain ID** | <code>14</code> <CopyButton textToCopy="14" />                                                                       | <code>114</code> <CopyButton textToCopy="114" />                                                                         |
+| **Explorer** | [`https://flare-explorer.flare.network`](https://flare-explorer.flare.network)                                       | [`https://coston2-explorer.flare.network`](https://coston2-explorer.flare.network)                                       |
+| **Faucet**   | N/A                                                                                                                  | Request C2FLR, FXRP and USDT0 from the [Coston2 Faucet](https://faucet.flare.network/coston2)                            |
 
 Additional configuration and API resources are detailed on the [Network](/network/overview) page.
 
@@ -78,25 +79,24 @@ Additional configuration and API resources are detailed on the [Network](/networ
 <div className="row">
   <div className="col col--6 margin-bottom--lg">
     <DocCard
+      tag="New"
       item={{
         type: "link",
-        label: "Flare Time Series Oracle (FTSOv2)",
-        href: "/ftso/getting-started",
-        description:
-          "Easily integrate fast, secure, and decentralized price feeds.",
+        label: "Flare Smart Accounts",
+        href: "/smart-accounts/overview",
+        description: "Account abstraction for XRPL users on Flare.",
         docId: undefined,
       }}
     />
   </div>
   <div className="col col--6 margin-bottom--lg">
     <DocCard
-      tag="Coming Soon"
+      tag="New"
       item={{
         type: "link",
-        label: "Flare Data Connector (FDC)",
-        href: "/fdc/getting-started",
-        description:
-          "Reliably access external blockchain events and real-world APIs.",
+        label: "FXRP",
+        href: "/fxrp/overview",
+        description: "Use XRP on Flare via trustless FAssets.",
         docId: undefined,
       }}
     />
@@ -112,6 +112,30 @@ Additional configuration and API resources are detailed on the [Network](/networ
       }}
     />
   </div>
+  <div className="col col--6 margin-bottom--lg">
+    <DocCard
+      item={{
+        type: "link",
+        label: "Flare Time Series Oracle (FTSOv2)",
+        href: "/ftso/getting-started",
+        description:
+          "Easily integrate fast, secure, and decentralized price feeds.",
+        docId: undefined,
+      }}
+    />
+  </div>
+  <div className="col col--6 margin-bottom--lg">
+    <DocCard
+      item={{
+        type: "link",
+        label: "Flare Data Connector (FDC)",
+        href: "/fdc/getting-started",
+        description:
+          "Reliably access external blockchain events and real-world APIs.",
+        docId: undefined,
+      }}
+    />
+  </div>
   <div className="col col--6 margin-bottom--lg">
     <DocCard
       item={{

src/theme/DocCard/index.tsx

@@ -55,13 +55,16 @@ function CardLayout({
   href,
   title,
   description,
+  tag,
 }: {
   href: string;
   title: string;
   description?: string;
+  tag?: string;
 }): JSX.Element {
   return (
     <CardContainer href={href}>
+      {tag && <span className={styles.cardTag}>{tag}</span>}
       <div className={styles.cardHeader}>
         <Heading
           as="h2"
@@ -117,21 +120,31 @@ function CardCategory({
   );
 }
 
-function CardLink({ item }: { item: PropSidebarItemLink }): JSX.Element {
+function CardLink({
+  item,
+  tag,
+}: {
+  item: PropSidebarItemLink;
+  tag?: string;
+}): JSX.Element {
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
       href={item.href}
       title={item.label}
       description={item.description ?? doc?.description}
+      tag={tag}
     />
   );
 }
 
-export default function DocCard({ item }: Props): JSX.Element {
+export default function DocCard({
+  item,
+  tag,
+}: Props & { tag?: string }): JSX.Element {
   switch (item.type) {
     case "link":
-      return <CardLink item={item} />;
+      return <CardLink item={item} tag={tag} />;
     case "category":
       return <CardCategory item={item} />;
     default:

src/theme/DocCard/styles.module.css

@@ -2,6 +2,8 @@
   --ifm-link-color: var(--ifm-color-emphasis-800);
   --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
+  position: relative;
+  overflow: visible;
   transition: all var(--ifm-transition-fast) ease;
   transition-property: border, box-shadow;
   color: var(--ifm-color-primary);
@@ -45,6 +47,24 @@
   justify-content: space-between;
 }
 
+.cardTag {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-font-color-base-inverse);
+}
+[data-theme="dark"] .cardTag {
+  background-color: var(--ifm-color-primary);
+  color: #ffffff;
+}
+
 .cardArrow {
   color: #000000;
 }