Updated Routing Mechanism

CHANGELOG.md

@@ -1,29 +1,21 @@
-## [0.2.1](https://github.com/FrancescoXX/rustcrab/compare/v0.2.0...v0.2.1) (2024-10-01)
+# 0.3.0 (2024-10-07)
 
 
 ### Bug Fixes
 
-* [#157](https://github.com/FrancescoXX/rustcrab/issues/157) ([#158](https://github.com/FrancescoXX/rustcrab/issues/158)) ([d951365](https://github.com/FrancescoXX/rustcrab/commit/d9513656f3e903f581d2ae323fc1244f1e60d9dd))
-
-
-
-# [0.2.0](https://github.com/FrancescoXX/rustcrab/compare/f72bc7bec3740e3fdc462a456d84a04320606345...v0.2.0) (2024-08-30)
-
-
-### Bug Fixes
-
-* [#26](https://github.com/FrancescoXX/rustcrab/issues/26) ([b4046b4](https://github.com/FrancescoXX/rustcrab/commit/b4046b495d4d1ea86422dae75715740c374c8b84))
-* [#32](https://github.com/FrancescoXX/rustcrab/issues/32) ([f72bc7b](https://github.com/FrancescoXX/rustcrab/commit/f72bc7bec3740e3fdc462a456d84a04320606345))
-* [#97](https://github.com/FrancescoXX/rustcrab/issues/97) footer over cookie consent form ([635fc01](https://github.com/FrancescoXX/rustcrab/commit/635fc011d02025d2df1b329e15dff3e8a7c8c4e6))
-* [#97](https://github.com/FrancescoXX/rustcrab/issues/97) footer over cookie consent form ([3050aa0](https://github.com/FrancescoXX/rustcrab/commit/3050aa02950cf9bbf4028cae9d59fc4d8222e6df))
+* [#157](https://github.com/shivankurchavan/rustcrab/issues/157) ([#158](https://github.com/shivankurchavan/rustcrab/issues/158)) ([d951365](https://github.com/shivankurchavan/rustcrab/commit/d9513656f3e903f581d2ae323fc1244f1e60d9dd))
+* [#26](https://github.com/shivankurchavan/rustcrab/issues/26) ([b4046b4](https://github.com/shivankurchavan/rustcrab/commit/b4046b495d4d1ea86422dae75715740c374c8b84))
+* [#32](https://github.com/shivankurchavan/rustcrab/issues/32) ([f72bc7b](https://github.com/shivankurchavan/rustcrab/commit/f72bc7bec3740e3fdc462a456d84a04320606345))
+* [#97](https://github.com/shivankurchavan/rustcrab/issues/97) footer over cookie consent form ([635fc01](https://github.com/shivankurchavan/rustcrab/commit/635fc011d02025d2df1b329e15dff3e8a7c8c4e6))
+* [#97](https://github.com/shivankurchavan/rustcrab/issues/97) footer over cookie consent form ([3050aa0](https://github.com/shivankurchavan/rustcrab/commit/3050aa02950cf9bbf4028cae9d59fc4d8222e6df))
 
 
 ### Features
 
-* add books section ([ad0034a](https://github.com/FrancescoXX/rustcrab/commit/ad0034af577289812c27cfacc5c591782394696d))
-* add people section ([b31d2be](https://github.com/FrancescoXX/rustcrab/commit/b31d2becc0f123bd8f26f22a76954b4a4784fdc3))
-* add projects section ([a5647aa](https://github.com/FrancescoXX/rustcrab/commit/a5647aad1b989566b3f4516f297c7872de93f516))
-* lessons complete ([1a7c7c5](https://github.com/FrancescoXX/rustcrab/commit/1a7c7c5f773905cf9790e6686c408704540d11e6))
+* add books section ([ad0034a](https://github.com/shivankurchavan/rustcrab/commit/ad0034af577289812c27cfacc5c591782394696d))
+* add people section ([b31d2be](https://github.com/shivankurchavan/rustcrab/commit/b31d2becc0f123bd8f26f22a76954b4a4784fdc3))
+* add projects section ([a5647aa](https://github.com/shivankurchavan/rustcrab/commit/a5647aad1b989566b3f4516f297c7872de93f516))
+* lessons complete ([1a7c7c5](https://github.com/shivankurchavan/rustcrab/commit/1a7c7c5f773905cf9790e6686c408704540d11e6))
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rustcrab",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

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

@@ -7,11 +7,12 @@ interface MenuObject {
 }
 
 const menuItems = [
-  { items: "Books", link: "/#books" },
+  { items: "Books", link: "/books" },
   { items: "Projects", link: "/#projects" },
-  { items: "Lessons", link: "/#lessons" },
-  { items: "Dev Tools", link: "/#dev_tools" },
-  { items: "DSA Example", link: "/#dsas" },
+  { items: "Lessons", link: "/lessons" },
+  { items: "Dev Tools", link: "/devtools" },
+  { items: "DSA Example", link: "/dsas" },
+  { items: "Blockchains", link: "/blockchain" },
 ];
 
 

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/",
+    }
+  ];
+