Issue#2641. Added E-book section

docusaurus.config.js

@@ -207,6 +207,10 @@ const config = {
             to: "/blogs",
             html: '<span class="nav-emoji">📰</span> Blogs',
           },
+          {
+            to: "/ebooks",
+            html: '<span class="nav-emoji">📚</span> E-books',
+          },
 
           {
             type: "dropdown",

src/database/ebooks/index.tsx

@@ -0,0 +1,40 @@
+interface Book {
+    id: number;
+    title: string;
+    image: string;
+    description: string;
+    link: string;
+  }
+
+  const books: Book[] = [
+    {
+      id: 1,
+      title: 'Programming in C',
+      image: 'https://cdn.geekboots.com/geek/c-language-popularity-meta-1656157189121.jpg',
+      description: 'C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instructions.',
+      link: 'https://drive.google.com/file/d/1B36OGR_QVEFnJvcH3NiBa0tcBaa2po6W/view?usp=drive_link',
+    },
+    {
+      id: 2,
+      title: 'Programming in C++',
+      image: 'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230703144619/CPP-Language.png',
+      description: 'C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation.',
+      link: 'https://drive.google.com/file/d/1asF5MoWe2o5eDAG3o_OeA_f5vf9AKKy9/view?usp=drive_link',
+    },
+    {
+      id: 3,
+      title: 'Programming in Java',
+      image: 'https://1.bp.blogspot.com/-bIgZGyzK51I/XyzniiD0JYI/AAAAAAAH7W0/dFGu48SV2I4Yg9--YNhAZ4Z6RiNbcWbuwCLcBGAsYHQ/s1600/java.jpg',
+      description: 'Java is a class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible. It is a general-purpose programming language intended to let application developers write once, run anywhere (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.',
+      link: 'https://drive.google.com/file/d/1Yzw0HDlQ4dECk04hb-1P81xR5dwEBM_k/view?usp=drive_link',
+    },
+    {
+      id: 4,
+      title: 'Programming in Python',
+      image: 'https://1.bp.blogspot.com/-WFlTDRQ5nZI/XqMED_-aV8I/AAAAAAAB1NM/X4mEmbLbylYotlO25v8f6v4RM2zQobmVgCLcBGAsYHQ/s1600/image2%2B-%2B2020-04-24T172119.147.jpg',
+      description: 'Python is an interpreted high-level general-purpose programming language. Python\'s design philosophy emphasizes code readability with its notable use of significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.',
+      link: 'https://drive.google.com/file/d/1NTzQFX47JqjQtFUMMscL264wqpUwIwGT/view?usp=drive_link',
+    },
+  ];
+
+  export default books;

src/pages/ebooks/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./style.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import books from "../../database/ebooks";
+
+export default function Blogs() {
+  const { siteConfig } = useDocusaurusContext();
+
+  return (
+    <Layout
+      title={`Blogs from ${siteConfig.title}`}
+      description="Welcome to CodeHarborHub Blog. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
+    >
+      <section className="blog-page margin-top--lg margin-bottom--lg">
+        <div className="blog-header">
+          <h1 className="TitleText">Welcome to CodeHarborHub E-Books </h1>
+          <p className="SubTitleText">
+            Learn the basics to advanced concepts of web development. html, css,
+            javascript, react, node.js, DSA, and many more from our E-Book collection.
+          </p>
+        </div>
+        <div className="card-container">
+          {books.map((book) => (
+            <div key={book.id} className="card">
+              <img src={book.image} alt={book.title} />
+              <h2>{book.title}</h2>
+              <p>{book.description}</p>
+              <Link to={book.link} className="read-more">
+                Link to the PDF
+              </Link>
+            </div>
+          ))}
+        </div>
+      </section>
+    </Layout>
+  );
+}

src/pages/ebooks/style.css

@@ -0,0 +1,68 @@
+.blog-page {
+    margin: 2rem 1rem;
+  }
+  .blog-page .blog-header {  
+    text-align: center;
+    margin: 1rem 0;
+  }
+
+  .blog-page .blog-header .TitleText {
+    background: linear-gradient(
+      90deg,
+      rgb(152 0 255) 0%,
+      rgb(246 41 41) 50%,
+      rgb(255 169 8) 100%
+    );
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .blog-page .blog-header .SubTitleText {
+    font-size: 1rem;
+    margin: 1rem 0;
+  }
+
+  /* .blog-page .blog-header::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #dddddd4c;
+    margin: 1rem 0;
+  } */
+
+  .blog-page .card-container {
+    margin-top: 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+
+  .blog-page .card-container .card {
+    border: 1px solid #dddddd4a;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .blog-page .card-container .card img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+    margin-bottom: 0.8rem;
+  }
+
+  .blog-page .card-container .card h2 {
+    font-size: 1.2rem;
+    margin-top: 0.5rem 0;
+    padding: 0 0.5rem;
+  }
+
+  .blog-page .card-container .card p {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    padding: 0 0.5rem;
+  }
+
+  .blog-page .card-container .card .read-more {
+    padding: 0.5rem;
+  }