init homepage

components/DocCard/DocCard.tsx

@@ -0,0 +1,47 @@
+import { ExternalLinkIcon } from 'lucide-react';
+import Image from 'next/image';
+
+interface DocCardProps {
+  doc: {
+    name: string;
+    logo: {
+      url: string;
+      alt: string;
+    };
+    link: string;
+    'short-description': string;
+  };
+}
+
+const DocCard = ({ doc }: DocCardProps) => {
+  if (!doc) return null;
+  const { name, logo, link, 'short-description': shortDescription } = doc;
+
+  return (
+    <div className="group flex flex-col bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
+      <div className="relative w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+        {logo?.url ? (
+          <Image src={logo.url} alt={logo.alt} layout="fill" objectFit="cover" className="transition-all duration-300 ease-in-out group-hover:scale-110" />
+        ) : (
+          <span className="text-gray-400">No image available</span>
+        )}
+      </div>
+      <div className="p-4 flex flex-col flex-grow">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{name}</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{shortDescription}</p>
+        <div className="mt-auto">
+          <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 dark:text-blue-400 inline-flex items-center font-medium hover:underline"
+          >
+            Learn more <ExternalLinkIcon className="ml-2 w-4 h-4" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocCard;

components/DocCard/DocCardsGrid.tsx

@@ -0,0 +1,16 @@
+import { docsData } from '../../data/docsData';
+import DocCard from './DocCard';
+
+const DocCardsGrid = () => {
+  return (
+    <div className="container mx-auto px-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+        {docsData.map((doc) => (
+          <DocCard key={doc.id} doc={doc} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DocCardsGrid;

data/docsData.ts

@@ -0,0 +1,38 @@
+export const docsData = [
+  {
+    id: 1,
+    name: "foo",
+    link: "/docs/deploy-contract",
+    'short-description': "Learn how to.",
+  },
+  {
+    id: 2,
+    name: "bar",
+    link: "/docs/setup-node",
+    'short-description': "Learn how to.",
+  },
+  {
+    id: 3,
+    name: "baz",
+    link: "/docs/stake-tokens",
+    'short-description': "Learn how to.",
+  },
+  {
+    id: 4,
+    name: "foo",
+    link: "/docs/deploy-contract",
+    'short-description': "Learn how to.",
+  },
+  {
+    id: 5,
+    name: "bar",
+    link: "/docs/setup-node",
+    'short-description': "Learn how to.",
+  },
+  {
+    id: 6,
+    name: "baz",
+    link: "/docs/stake-tokens",
+    'short-description': "Learn how to.",
+  },
+];

pages/_meta.json

@@ -1,4 +1,5 @@
 {
+	"index": "Home",
 	"start": {
 	  "title": "Getting Started",
 	  "type": "page"
@@ -23,4 +24,5 @@
 	  "title": "Reference",
 	  "type": "page"
 	}
-}
+  }
+

pages/index.mdx

@@ -0,0 +1,7 @@
+import DocCardsGrid from "../components/DocCard/DocCardsGrid";
+
+# Welcome to Sei Network
+
+<br /><br />
+
+<DocCardsGrid />

pages/start/_meta.json

@@ -3,7 +3,7 @@
     "type": "separator",
     "title": "Introduction"
   },
-  "index": "Overview",
+  "overview": "Overview",
   "user-quickstart": "Quickstart",
 
   "-- Core Setup": {