snippet-labs · Hemangshu-Dey · May 25, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
diff --git a/client/index.html b/client/index.html
@@ -3,8 +3,13 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/svg+xml" href="/public//logos/__favicon.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- GOOGLE FONTS -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
+  <!-- APPLICATION TITLE -->
   <title>SNIPPETLABS | Offical page</title>
 </head>
 

diff --git a/client/public/logos/__favicon.png b/client/public/logos/__favicon.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,12 +1,37 @@
-import React from 'react';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+// COMPONENTS
+const Layout = lazy(() => import('./components/Layout/Layout'));
+// UTILS
+import Loader from './utils/Loader/Loader';
+// ICONS
+//STORE
+
+const Content: React.FC = () => {
+  // STATES
+  const location = useLocation();
+  const [isLoading, setIsLoading] = useState<boolean>(() => false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    const loadingTime = setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+
+    return () => clearTimeout(loadingTime);
+  }, [location.pathname]);
+  return isLoading ? <Loader /> : <Layout />;
+};
 
 const App: React.FC = () => {
   return (
-    <div>
-      <div className="flex items-center justify-center text-5xl">
-        SNIPPETLABS
-      </div>
-    </div>
+    <Suspense fallback={<Loader />}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/*" element={<Content />} />
+        </Routes>
+      </BrowserRouter>
+    </Suspense>
   );
 };
 

diff --git a/client/src/components/General/Footer/Footer.tsx b/client/src/components/General/Footer/Footer.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return <div></div>;
+};
+
+export default Footer;
diff --git a/client/src/components/General/NavigationBar/Navigation.styles.css b/client/src/components/General/NavigationBar/Navigation.styles.css
@@ -0,0 +1,23 @@
+/* Desktop and Mobile Navigation links */
+.DESKTOP-LINKS {
+  @apply font-semibold rounded-2xl bg-white/20 shadow-lg ring-2 ring-black/10 px-3 py-4;
+}
+.DESKTOP-LINKS-ACTIVE {
+  @apply text-black rounded-xl shadow-lg border-1 p-3;
+}
+.MOBILE-LINKS {
+  @apply font-semibold rounded-xl bg-white/20 shadow-lg ring-2 ring-black/10 p-2;
+}
+.MOBILE-LINKS-HOVER {
+  @apply font-semibold rounded-xl hover:bg-white/20 hover:shadow-lg hover:ring-2 hover:ring-black/10 p-2;
+}
+
+/* Button */
+.BUTTON {
+  @apply font-semibold rounded-2xl bg-white shadow-lg ring-2 px-4 py-4;
+}
+
+/* Border */
+.BORDER-LEFT-CORNER-3XL {
+  @apply border-l-3 border-white rounded-l-2xl;
+}
diff --git a/client/src/components/General/NavigationBar/NavigationBar.tsx b/client/src/components/General/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { NavLink, Link } from 'react-router-dom';
+
+// ICONS
+import { HiMenuAlt3, HiX } from 'react-icons/hi';
+// UTILS
+import Logo from '../../../utils/Logo/Logo';
+// DATA
+import NAVIGATION_LINKS from '../../../data/NavigationLinks/NavigationLinks';
+
+const NavigationBar: React.FC = () => {
+  // STATES
+  const [toggleSidebar, setToggleSidebar] = useState(() => false);
+
+  // STATE HANDLER FUNCTION
+  const handleOpenSidebar = () => {
+    setToggleSidebar(!toggleSidebar);
+  };
+  const handleCloseSidebar = () => {
+    setToggleSidebar(false);
+  };
+
+  // RENDER
+  return (
+    <>
+      <div className="FULL h-[9vh] BG-BLACK-PRIMARY FLEX-BETWEEN PADDING">
+        <Logo className="font-style-logo text-4xl TEXT-WHITE-PRIMARY" />
+        {/* Desktop Navigation Bar */}
+        <div className="hidden FLEX-CENTER-LG gap-4">
+          <div className="DESKTOP-LINKS">
+            <ul className="TEXT-COLOR-PRIMARY FLEX-CENTER gap-6">
+              {NAVIGATION_LINKS.map(({ name, path }, id) => (
+                <li key={id} className="GRAY-300 TEXT-WHITE-PRIMARY-HOVER">
+                  <NavLink
+                    to={path}
+                    className={({ isActive }) =>
+                      isActive ? 'DESKTOP-LINKS-ACTIVE BG-WHITE-PRIMARY' : ''
+                    }
+                  >
+                    {name}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <Link to="/contact-us" className="TEXT-BLACK-PRIMARY BUTTON POINTER">
+            Contract
+          </Link>
+        </div>
+        {/* Mobile Navigation Bar */}
+        <button
+          className="lg:hidden MOBILE-LINKS-HOVER POINTER"
+          onClick={handleOpenSidebar}
+        >
+          <HiMenuAlt3 size={30} className="TEXT-WHITE-PRIMARY" />
+        </button>
+      </div>
+
+      {/* Mobile Sidebar Toggle with Overlay */}
+      <div
+        className={`FIXED inset-0 z-50 lg:hidden transition-opacity D-300 EASE ${
+          toggleSidebar
+            ? 'opacity-100 pointer-events-auto'
+            : 'opacity-0 pointer-events-none'
+        }`}
+      >
+        {/* Backdrop */}
+        <div
+          className="ABSOLUTE inset-0 BG-BLACK-PRIMARY backdrop-blur-3xl transition-opacity D-300 EASE"
+          onClick={handleCloseSidebar}
+        />
+
+        {/* Sidebar */}
+        <div
+          className={`ABSOLUTE BORDER-LEFT-CORNER-3XL T0 R0 h-full w-80 max-w-[85vw] BG-BLACK-PRIMARY TEXT-WHITE-PRIMARY  TRANSFORM D-300 EASE ${
+            toggleSidebar ? 'translate-x-0' : 'translate-x-full'
+          }`}
+        >
+          {/* Sidebar Header */}
+          <div className="FLEX-BETWEEN PADDING h-[9vh] border-b border-gray-500">
+            <Logo className="font-style-logo text-3xl TEXT-WHITE-PRIMARY" />
+            <button
+              onClick={handleCloseSidebar}
+              className="TEXT-WHITE-PRIMARY POINTER p-2 WHITE-20-HOVER rounded-xl COLORS D-300"
+            >
+              <HiX size={30} />
+            </button>
+          </div>
+
+          {/* Sidebar Content */}
+          <div className="p-6">
+            {/* Navigation Links */}
+            <nav className="mb-8">
+              <ul className="space-y-4">
+                {NAVIGATION_LINKS.map(({ name, path }, id) => (
+                  <li key={id}>
+                    <NavLink
+                      to={path}
+                      onClick={handleCloseSidebar}
+                      className={({ isActive }) =>
+                        `BLOCK px-4 py-3 rounded-xl ALL D-300 ${
+                          isActive
+                            ? 'BG-WHITE-PRIMARY TEXT-BLACK-PRIMARY SEMIBOLD'
+                            : 'TEXT-WHITE-PRIMARY WHITE-20-HOVER'
+                        }`
+                      }
+                    >
+                      {name}
+                    </NavLink>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+
+            {/* Contact Button */}
+            <Link
+              to="/contact-us"
+              onClick={handleCloseSidebar}
+              className="BLOCK FULL CENTER TEXT-BLACK-PRIMARY BUTTON POINTER TRANSFROM D-300 hover:scale-105"
+            >
+              Contract
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NavigationBar;
diff --git a/client/src/components/Layout/Layout.tsx b/client/src/components/Layout/Layout.tsx
@@ -0,0 +1,25 @@
+import React, { Suspense } from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+// COMPONENTS
+import NavigationBar from '../General/NavigationBar/NavigationBar';
+import Footer from '../General/Footer/Footer';
+// UTILS
+import Loader from '../../utils/Loader/Loader';
+
+const Layout: React.FC = () => {
+  return (
+    <div>
+      <NavigationBar />
+      <Suspense fallback={<Loader />}>
+        <Routes>
+          <Route path="/" element={<></>} />
+        </Routes>
+      </Suspense>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/client/src/data/NavigationLinks/NavigationLinks.ts b/client/src/data/NavigationLinks/NavigationLinks.ts
@@ -0,0 +1,36 @@
+import type { NavigationLinkProps } from "./NavigationLinks.types";
+
+const NAVIGATION_LINKS: NavigationLinkProps[] = [
+    {
+        id: 1,
+        name: "Home",
+        path: "/"
+    },
+    {
+        id: 2,
+        name: "AboutUs",
+        path: "/about-us"
+    },
+    {
+        id: 3,
+        name: "TechStack",
+        path: "/tech-stack"
+    },
+    {
+        id: 4,
+        name: "Client",
+        path: "/client-projects"
+    },
+    {
+        id: 5,
+        name: "Products",
+        path: "/products"
+    },
+    {
+        id: 6,
+        name: "Team",
+        path: "/team"
+    }
+];
+
+export default NAVIGATION_LINKS;
diff --git a/client/src/data/NavigationLinks/NavigationLinks.types.ts b/client/src/data/NavigationLinks/NavigationLinks.types.ts
@@ -0,0 +1,5 @@
+export type NavigationLinkProps = {
+    id: number;
+    name: string;
+    path: string;
+}