added blockchain page

src/app/blockchain/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowRight, Search } from "lucide-react";
+import { blockchains } from "@/data/blockchains";
+import Card from "@/components/Card";
+
+export default function Blockchains() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredBlockchains, setFilteredBlockchains] = useState(blockchains);
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const term = event.target.value.toLowerCase();
+    setSearchTerm(term);
+    const filtered = blockchains.filter(
+      (blockchain) =>
+        blockchain.title.toLowerCase().includes(term) ||
+        blockchain.description.toLowerCase().includes(term),
+    );
+    setFilteredBlockchains(filtered);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 dark:bg-black">
+      <div className="container mx-auto px-4 py-12">
+        <h1 className="text-4xl font-bold mb-8 text-center text-gray-800 dark:text-white">
+          Blockchains that use Rust
+        </h1>
+
+        <div className="mb-8 max-w-md mx-auto">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search Blockchains..."
+              value={searchTerm}
+              onChange={handleSearch}
+              className="w-full p-3 pl-10 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-red-500"
+            />
+            <Search
+              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+              size={20}
+            />
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-2 w-full gap-5">
+          {filteredBlockchains.map((blockchain, index) => (
+            <Card item={blockchain} key={index} />
+          ))}
+        </div>
+
+        {filteredBlockchains.length === 0 && (
+          <p className="text-center text-gray-600 dark:text-gray-400 mt-8">
+            No Blockchains found matching your search.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -7,6 +7,7 @@ import ProjectsSection from "../components/ProjectsSection";
 import SubstackCustom from "../components/SubstackCustom";
 import DSAToolSection from "@/components/DSASection";
 import LessonSection from "@/components/LessonSection";
+import BlockchainSection from "@/components/BlockchainSection";
 
 export default function Home() {
   return (
@@ -59,6 +60,9 @@ export default function Home() {
       <div id='dsas' className='min-h-dvh'>
         <DSAToolSection />
       </div>
+      <div id='blockchains' className='min-h-dvh'>
+        <BlockchainSection />
+      </div>
       <div id='projects' className='min-h-dvh'>
         <ProjectsSection />
       </div>

src/components/BlockchainSection.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { blockchains } from "@/data/blockchains";
+import Card from "./Card";
+
+export default function BlockchainsSection() {
+  return (
+    <section className="py-16 w-full rounded-md my-4">
+    <div className="container mx-auto px-4">
+      <h2 className="text-4xl font-bold mb-8 text-center text-current">
+      Blockchains that use Rust
+      </h2>
+        <div className="grid md:grid-cols-2 w-full gap-5">
+          {blockchains.slice(0, 3).map((blockchain, index) => (
+            <Card item={blockchain} key={index} />
+          ))}
+        </div>
+      </div>
+      <div className="mt-12 text-center">
+        <Link href="/blockchain">
+          <button className="bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+            See More Blockchains
+          </button>
+        </Link>
+      </div>
+    </section>
+  );
+}

src/components/navbar/MobileNav.tsx

@@ -15,7 +15,8 @@ export const menuItems: menuObject[] = [
   { items: 'Projects', link: '/#projects' },
   { items: 'Dev Tools', link: '/#dev_tools' },
   { items: 'Lesson', link: '/#lessons' },
-  { items: 'DSA', link: '/#dsas' }
+  { items: 'DSA', link: '/#dsas' },
+  { items: "Blockchains", link: "/#blockchains" },
 ];
 
 const MobileNav: React.FC = () => {

src/components/navbar/Navbar.tsx

@@ -12,6 +12,7 @@ const menuItems = [
   { items: "Lessons", link: "/#lessons" },
   { items: "Dev Tools", link: "/#dev_tools" },
   { items: "DSA Example", link: "/#dsas" },
+  { items: "Blockchains", link: "/#blockchains" },
 ];
 
 

src/data/blockchains.ts

@@ -0,0 +1,16 @@
+export interface Blockchains {
+    title: string;
+    description: string;
+    cover: string;
+    link: string;
+  }
+
+  export const blockchains: Array<Blockchains> = [
+    {
+      title: "Solana",
+      description: "Solana is a high-performance blockchain platform designed for decentralized applications and crypto transactions, known for its fast transaction speeds and low costs.",
+      cover: "/covers/solana-sol-logo.png",
+      link: "https://solana.com/",
+    }
+  ];
+