Merge branch 'main' into fix/broken-links-in-docs

components/components.module.css

@@ -183,3 +183,17 @@
   font-weight: 400;
   line-height: 20px;
 }
+
+.mainTitleHeading {
+  color: var(--Indigo-Indigo-900---Fetch-navy, #000d3d);
+  font-family: Lexend;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: -0.24px;
+}
+
+:is(html[class~="dark"] .mainTitleHeading) {
+  color: #e9e9ea;
+}

components/feature-guide-tabs.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./tab.module.css";
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 export const GuideBox = ({
   content,
@@ -42,6 +43,50 @@ export const GuideBox = ({
   );
 };
 
+const FeaturedGuidesTab = ({
+  item,
+}: {
+  item: { type: string; title: string; path: string; label: string };
+}) => {
+  return (
+    <div className={styles.featuredGuidesTab}>
+      <div className=" nx-flex nx-flex-col">
+        <span className={styles.tabHeading}>{item.type}</span>
+        <span>{item.title}</span>
+      </div>
+      <div className={styles.featuredGuidesTablabel}>{item.label}</div>
+    </div>
+  );
+};
+
+export const FeaturedGuides = ({
+  featuredGuidesData,
+}: {
+  featuredGuidesData: {
+    type: string;
+    title: string;
+    path: string;
+    label: string;
+  }[];
+}) => {
+  return (
+    <div className={styles.featureBox}>
+      <div className={styles.featureGuideHeading}>Featured guides</div>
+      <div className="nx-grid nx-w-full nx-grid-cols-2 nx-gap-y-3 nx-gap-x-6">
+        {featuredGuidesData?.map((item, index) => (
+          <Link
+            key={index}
+            className="nx-text-blue-500 nx-w-full"
+            href={item.path}
+          >
+            <FeaturedGuidesTab item={item} />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 export const FeatureGuideTabs = ({ centerMode }: { centerMode?: boolean }) => {
   const [activeTab, setActiveTab] = useState(0);
   const [isMobile, setIsMobile] = useState(false);

components/guide-mdx.tsx

@@ -20,6 +20,10 @@ interface GuideCategory {
 
 interface GuidesData {
   content: GuideCategory[];
+  components?: {
+    featuredGuides?: ReactNode;
+  };
+  mainHeading?: string;
 }
 
 const pathLabels = new Map<RegExp, string>([
@@ -37,7 +41,7 @@ const getPathLabel = (path: string): string => {
   return "";
 };
 
-const SectionHeading = ({
+export const SectionHeading = ({
   heading,
   icon,
 }: {
@@ -145,7 +149,7 @@ const SearchInput = ({
   </div>
 );
 
-const GuidesMdx = ({ content }: GuidesData) => {
+const GuidesMdx = ({ content, components, mainHeading }: GuidesData) => {
   const [filterState, setFilterState] = useState({
     value: "All Types",
     inputVal: "",
@@ -214,7 +218,11 @@ const GuidesMdx = ({ content }: GuidesData) => {
           onInputChange={onInputChange}
         />
       </div>
+      {components && components.featuredGuides}
       <div>
+        <span className={styles.mainTitleHeading}>
+          {mainHeading && mainHeading}
+        </span>
         <GridBox>
           {filteredContent.map((items, index) => (
             <div

components/tab.module.css

@@ -8,6 +8,22 @@
   background-color: #2c2e38;
 }
 
+.featureBox {
+  display: flex;
+  padding: 32px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--32, 32px);
+  align-self: stretch;
+  border-radius: 12px;
+  background: #f3f5f8;
+  margin-block: 48px;
+}
+
+:is(html[class~="dark"] .featureBox) {
+  background-color: #242630;
+}
+
 .hoverGuideBox {
   padding: 24px;
   border-radius: 16px;
@@ -99,3 +115,110 @@
   color: #fff;
   opacity: 0.6;
 }
+
+.featureGuideHeading {
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: -0.24px;
+}
+
+:is(html[class~="dark"] .featureGuideHeading) {
+  color: #e9e9ea;
+}
+
+.featuredGuidesTab {
+  display: flex;
+  padding: 16px 16px 16px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid #dce2ea;
+  background: #fff;
+  backdrop-filter: blur(35px);
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%; /* 25.6px */
+  letter-spacing: -0.32px;
+}
+
+.featuredGuidesTab:hover {
+  background-color: #efebff;
+  color: #5f38fb;
+  border: 1px solid transparent;
+}
+
+:is(html[class~="dark"] .featuredGuidesTab) {
+  background-color: #2c2e38;
+  border: none;
+  color: #e9e9ea;
+}
+
+:is(html[class~="dark"] .featuredGuidesTab:hover) {
+  color: #cfc3fe;
+}
+
+:is(html[class~="dark"] .featuredGuidesTab:hover) {
+  border-radius: 8px;
+  background: rgba(95, 56, 251, 0.2);
+  backdrop-filter: blur(35px);
+}
+
+.featuredGuidesTablabel {
+  display: flex;
+  height: 24px;
+  padding: 2px 8px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 4px;
+  background: #e8ecf1;
+  color: #556578;
+  text-align: center;
+  font-family: Lexend;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+.tabHeading {
+  color: #8a9fb8;
+  font-family: Lexend;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -0.24px;
+  text-transform: uppercase;
+}
+
+:is(html[class~="dark"] .tabHeading) {
+  color: #a6a7ab;
+}
+
+.tabSubHeading {
+  color: #000d3d;
+  font-family: Lexend;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  letter-spacing: -0.32px;
+}
+
+:is(html[class~="dark"] .tabSubHeading) {
+  color: #e9e9ea;
+}
+
+:is(html[class~="dark"] .tabSubHeading:hover) {
+  color: #cfc3fe;
+}