feat: new docs structure (1/n)

components/DocCard/DocCard.tsx

@@ -0,0 +1,46 @@
+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) => {
+  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 ? (
+          <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,20 @@
+import DocCard from './DocCard';
+
+const DocCardsGrid = ({ data = [] }) => {
+  if (!Array.isArray(data)) {
+    console.error("Expected an array for data but received:", data);
+    return null;
+  }
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+        {data.map((doc) => (
+          <DocCard key={doc.id} doc={doc} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DocCardsGrid;

data/advancedData.ts

@@ -0,0 +1,83 @@
+export const advancedData = [
+  {
+    id: 1,
+    name: "foo",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 2,
+    name: "bar",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 3,
+    name: "baz",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 4,
+    name: "foo",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 5,
+    name: "bar",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 6,
+    name: "baz",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 7,
+    name: "foo",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 8,
+    name: "bar",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 9,
+    name: "baz",
+    link: "#",
+    'short-description': "Learn how to.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+];

data/beginnerData.ts

@@ -0,0 +1,83 @@
+export const beginnerData = [
+  {
+    id: 1,
+    name: "1. Overview",
+    link: "/start/overview",
+    'short-description': "Learn about the basics of the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 2,
+    name: "2. Connect to Sei",
+    link: "/start/user-quickstart",
+    'short-description': "Quickly get started with the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 3,
+    name: "3. Installing seid CLI",
+    link: "/build/installing-seid",
+    'short-description': "Set up the seid CLI to interact with the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 4,
+    name: "4. Setting Up Local Chains",
+    link: "/start/dev-chains",
+    'short-description': "Instructions on setting up local chains for development.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 5,
+    name: "5. Understanding Token Standards",
+    link: "/start/dev-token-standards",
+    'short-description': "Dive into token standards on the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 6,
+    name: "6. Understanding Gas",
+    link: "/start/dev-gas",
+    'short-description': "Learn about gas and how it works in Sei.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 7,
+    name: "7. Deploying Your First Smart Contract",
+    link: "/start/dev-smart-contracts",
+    'short-description': "Step-by-step guide to deploying a smart contract.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 8,
+    name: "8. Building a Simple Frontend",
+    link: "/build/building-a-frontend",
+    'short-description': "Learn how to build a simple frontend for your dApp.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 9,
+    name: "9. Testing and Debugging Smart Contracts",
+    link: "/start/dev-testing-debugging",
+    'short-description': "Learn how to test and debug your smart contracts.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  }
+];

data/docsData.ts

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

data/intermediateData.ts

@@ -0,0 +1,83 @@
+export const intermediateData = [
+  {
+    id: 1,
+    name: "1. Working with EVM Contracts",
+    link: "/build/evm-general",
+    'short-description': "Discover how to interact with EVM contracts on the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 2,
+    name: "2. Working with CosmWasm Contracts",
+    link: "/build/cosmwasm-general",
+    'short-description': "Learn how to work with CosmWasm contracts on the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 3,
+    name: "3. Setting Up Multi-Sig Accounts",
+    link: "/build/multi-sig-accounts",
+    'short-description': "Learn how to set up multi-sig accounts for secure operations.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 4,
+    name: "4. Achieving Interoperability Between VMs",
+    link: "/start/dev-interoperability",
+    'short-description': "Guide to interoperability between VMs on the Sei Network.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 5,
+    name: "5. Interoperability with IBC",
+    link: "/build/ibc-protocol",
+    'short-description': "Learn how to achieve interoperability with the IBC protocol.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 6,
+    name: "6. Managing Transactions",
+    link: "/start/dev-transactions",
+    'short-description': "Learn about managing and optimizing transactions.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 7,
+    name: "7. Configuring a Node",
+    link: "/node/node-configuration",
+    'short-description': "Instructions on setting up and configuring a developer node.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 8,
+    name: "8. Advanced Querying and State Management",
+    link: "/start/dev-querying-state",
+    'short-description': "Guide to querying and managing state efficiently.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  },
+  {
+    id: 9,
+    name: "9. Deploying and Testing Smart Contracts",
+    link: "/build/smart-contract-deployment-testing",
+    'short-description': "Learn how to deploy and test smart contracts effectively.",
+    logo: {
+      url: "/assets/sei_symbol_gradient.png",
+    },
+  }
+];