Addded src folder

Author: JayeshYadav99

Website/src/App.css

@@ -0,0 +1,26 @@
+import "./App.css";
+import Navbar from "./componets/Navbar";
+import Footer from "./componets/Footer";
+import FoldersComponent from "./componets/NewFolder";
+import React, { useState, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./Pages/Home";
+
+function App() {
+  return (
+    <div>
+      {/* <FoldersComponent/> */}
+      <Navbar />
+
+      <Routes>
+        <Route exact path="/" element={<Home />}></Route>
+        <Route exact path="/Update" element={<FoldersComponent />}></Route>
+      </Routes>
+
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
+//

Website/src/App.jsx

@@ -0,0 +1,63 @@
+import Searchbar from "../componets/Searchbar";
+
+import HeroSec from "../componets/HeroSec";
+import Card from "../componets/Card";
+
+import FoldersComponent from "../componets/NewFolder";
+import React, { useState, useEffect } from "react";
+
+function Home() {
+  //https://github.com/avinashkranjan/Pentesting-and-Hacking-Scripts/tree/master/403Bypas
+  const [folders, setfolders] = useState([]);
+  useEffect(() => {
+    const fetchFolders = async () => {
+      try {
+        const response = await fetch(
+          "https://server-2h82.onrender.com/api/folder"
+        );
+        const data = await response.json();
+        const folderdata = await data.folders;
+
+        setfolders(folderdata);
+      } catch (error) {
+        console.error("Error fetching folders:", error);
+      }
+    };
+
+    fetchFolders();
+  }, []);
+
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const foldersWithKeys = folders.map((folder, index) => ({
+    ...folder,
+    key: index.toString(),
+  }));
+
+  const filteredFolders = foldersWithKeys.filter(
+    (folder) =>
+      folder.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
+      !folder.name.toLowerCase().endsWith("md") &&
+      !folder.name.toLowerCase().endsWith("yml") &&
+      folder.name.toLowerCase() !== "license"
+  );
+
+  return (
+    <div>
+      <HeroSec searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+
+      <div className="grid grid-cols-3 p-8 gap-4 justify-center ">
+        {filteredFolders.map((folder, index) => (
+          <Card
+            key={folder.key}
+            folderName={folder.name}
+            description={folder.description}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Home;
+//

Website/src/Image/empty-folder.png

@@ -0,0 +1,44 @@
+import React from "react";
+import './Card.scss';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export default function Card({ folderName, description }) {
+  const truncatedDescription =
+    description.length > 120
+      ? description.substring(0, 120) + "..."
+      : description;
+  return (
+    <div >
+      <div >
+        <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" id="box">
+          <a href="#">
+            <h1 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white text-wrap">
+              {folderName}
+            </h1>
+          </a>
+          <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+            {truncatedDescription}
+          </p>
+          <a
+            href={`https://github.com/thinkswell/javascript-mini-projects/tree/master/${folderName}`}
+            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            View More
+            <svg
+              aria-hidden="true"
+              class="w-4 h-4 ml-2 -mr-1"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

Website/src/Image/h2.png

@@ -0,0 +1,37 @@
+
+  
+  #box {
+    --border-size: 3px;
+    --border-angle: 0turn;
+
+    background-image: conic-gradient(
+        from var(--border-angle),
+        #213,
+        #112 50%,
+        #213
+      ),
+      conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
+    background-size: calc(100% - (var(--border-size) * 2))
+        calc(100% - (var(--border-size) * 2)),
+      cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+  
+    animation: bg-spin 3s linear infinite;
+    @keyframes bg-spin {
+      to {
+        --border-angle: 1turn;
+      }
+    }
+  
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+  
+  @property --border-angle {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 0turn;
+  }
+  

Website/src/Image/hacker.png

@@ -0,0 +1,57 @@
+import React from "react";
+import icon from "../Image/javascript.png";
+
+export default function Footer() {
+  return (
+    <div>
+      <footer class="bg-white rounded-lg shadow dark:bg-gray-900 m-4">
+        <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+          <div class="sm:flex sm:items-center sm:justify-between">
+            <a
+              href="https://github.com/thinkswell/javascript-mini-projects"
+              class="flex items-center mb-4 sm:mb-0"
+            >
+              <img src={icon} class="h-8 mr-3" alt="hacker Logo" />
+              <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              Javascript Mini-Projects
+              </span>
+            </a>
+            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
+              <li>
+                <a href="#" class="mr-4 hover:underline md:mr-6 ">
+                  About
+                </a>
+              </li>
+              <li>
+                <a href="#" class="mr-4 hover:underline md:mr-6">
+                  Privacy Policy
+                </a>
+              </li>
+              <li>
+                <a href="#" class="mr-4 hover:underline md:mr-6 ">
+                  Licensing
+                </a>
+              </li>
+              <li>
+                <a href="#" class="hover:underline">
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
+          <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+          <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
+            © 2023
+            <a
+              href="https://github.com/avinashkranjan/Pentesting-and-Hacking-Scripts"
+              class="hover:underline"
+            >
+              Pentesting-and-Hacking-Scripts™
+            </a>
+            . All Rights Reserved.
+          </span>
+        </div>
+      </footer>
+    </div>
+  );
+}