Merge pull request #1350 from CodeHarborHub/dev-3

new code added

Author: ajay-dhangar

docusaurus.config.js

@@ -187,7 +187,11 @@ const config = {
             type: "dropdown",
             html: '<span class="nav-emoji">🔗</span> More',
             position: "left",
-            items: [
+            items: [              
+              {
+                html: '<span class="nav-emoji">🌍</span> Web Dev',
+                to: "/web-dev/",
+              },
               {
                 html: '<span class="nav-emoji"> 📊</span> Quiz',
                 to: "https://quiz-app-ajay-dhangar.vercel.app/",
@@ -502,6 +506,22 @@ const config = {
         showLastUpdateTime: true,
       },
     ],
+
+    [
+      "@docusaurus/plugin-content-docs",
+      /** @type {import('@docusaurus/plugin-content-docs').Options} */
+      {
+        id: "web-dev",
+        path: "web-dev",
+        routeBasePath: "web-dev",
+        // editUrl: "#",
+        sidebarPath: require.resolve("./sidebarsWebDev.js"),
+        remarkPlugins: [[npm2yarn, { sync: true }], remarkMath, rehypeKatex],
+        showLastUpdateAuthor: true,
+        showLastUpdateTime: true,
+      },
+    ],
+
     [
       "@docusaurus/plugin-content-docs",
       /** @type {import('@docusaurus/plugin-content-docs').Options} */

sidebarsWebDev.js

@@ -1,48 +1,8 @@
 module.exports = {
-  sidebarsWebDev: [
+  codeharborhub: [
     {
-      type: "category",
-      label: "Web Dev",
-      link: {
-        type: "doc",
-        id: "all-web-dev",
-      },
-      collapsible: true,
-      collapsed: false,
-      items: [
-        {
-          type: "category",
-          label: "HTML",
-          link: {
-            type: "doc",
-            id: "html/welcome-html",
-          },
-          collapsible: true,
-          collapsed: true,
-          items: [
-            {
-              type: "autogenerated",
-              dirName: "html",
-            },
-          ],
-        },
-        {
-          type: "category",
-          label: "JavaScript",
-          link: {
-            type: "doc",
-            id: "javascript/welcome-js",
-          },
-          collapsible: true,
-          collapsed: true,
-          items: [
-            {
-              type: "autogenerated",
-              dirName: "javascript",
-            },
-          ],
-        },
-      ],
+      type: "autogenerated",
+      dirName: ".",
     },
   ],
-};
+};

src/database/sponsors/index.tsx

@@ -18,6 +18,15 @@ const sponsors: Sponsor[] = [
 //     twitter: "https://x.com/CodesWithAjay",
 //     instagram: "https://www.instagram.com/_ajay.dhangar",
 //   },
+
+  {
+    name: "Narendra Dhangar",
+    image: "/sponsors/narendra-dhangar.jpg",
+    description: "B.Tech (CSE) Student",
+    github: "https://github.com/narendra-dhangar",
+    linkedin: "https://www.linkedin.com/in/narendra-dhangar-7a32aa283/",
+    instagram: "https://www.instagram.com/narendra_dh._05/",
+  },
   {
     name: "MOHD ARIF",
     image: "https://github.com/mrmohdarif.png",

src/pages/our-sponsors/Sponsors.css

@@ -20,7 +20,7 @@
 
 .sponsor-page .sponsors-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 1rem;
     margin-top: 2rem;
 }
@@ -30,7 +30,7 @@
     border-radius: 8px;
     padding: 16px;
     text-align: center;
-    width: 200px;    
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 .sponsor-page .sponsor-card img {
@@ -85,8 +85,43 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border: 1px dashed #ddd;
+    background-color: #f0f0f0;
+    border: 2px dashed #007bff;
+    color: #007bff;
+    position: relative;
+    overflow: hidden;
+}
+
+.sponsor-page .sponsor-card.empty-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.178);
+    transition: left 0.3s ease-in-out;
+}
+
+.sponsor-page .sponsor-card.empty-card:hover::before {
+    left: 100%;
+}
+
+.sponsor-page .sponsor-card.empty-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.sponsor-page .sponsor-card.empty-card h3 {
+    margin: 0;
+    font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
 
+.sponsor-page .sponsor-card.empty-card .join-icon {
+    font-size: 1.5em;
 }
 
 .sponsor-page .scanner-popup {

src/pages/our-sponsors/index.tsx

@@ -3,6 +3,7 @@ import SponsorCard from "./SponsorCard";
 import "./Sponsors.css";
 import Layout from "@theme/Layout";
 import sponsors from "../../database/sponsors";
+import { FaPlusCircle } from 'react-icons/fa';
 
 const OurSponsors: React.FC = () => {
   const [showScanner, setShowScanner] = useState(false);
@@ -25,10 +26,8 @@ const OurSponsors: React.FC = () => {
           <p>
             Help CodeHarborHub grow and support open-source projects by donating
             today. Your contribution enables us to share valuable resources and
-            knowledge on our website. 
-
+            knowledge on our website.
             <br />
-            
             Thank you for your support!
           </p>
         </div>
@@ -37,7 +36,10 @@ const OurSponsors: React.FC = () => {
             <SponsorCard key={sponsor.name} {...sponsor} />
           ))}
           <div className="sponsor-card empty-card" onClick={handleJoinSponsor}>
-            <h3>Join as a Sponsor</h3>
+            <h3>
+              <FaPlusCircle className="join-icon" />
+              Join as a Sponsor
+            </h3>
           </div>
         </div>
         {showScanner && (