Merge pull request #6 from anubhav1206/main

Made UI improvements #1
ayush-raj13 · Oct 6, 2023 · 6f6c06b · 6f6c06b
2 parents 7f90135 + 8f34cb8
commit 6f6c06b
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 103 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Sidebar from './components/Sidebar';
 import Route from './components/Route';
 import HomePage from './pages/homePage';
@@ -6,10 +7,13 @@ import FlipkartScraperPage from './pages/flipkartScraperPage';
 import VideoDownloaderPage from './pages/videoDownloaderPage';
 
 function App() {
-  return(
-    <div className="container mx-auto grid grid-cols-6 gap-4 mt-4">
+  return (
+    <div className="container mx-auto mt-4">
+      {/* Sidebar */}
       <Sidebar />
-      <div className="col-span-5">
+
+      {/* Content */}
+      <div className="mx-2"> {/* Adjust the margin-left to match your Sidebar width */}
         <Route path="/">
           <HomePage />
         </Route>
@@ -24,7 +28,7 @@ function App() {
         </Route>
       </div>
     </div>
-  )
+  );
 }
 
 export default App;
diff --git a/client/src/components/Link.js b/client/src/components/Link.js
@@ -1,3 +1,4 @@
+import { Children } from "react";
 import useNavigation from "../hooks/use-navigation";
 import classNames from "classnames";
 
@@ -15,7 +16,15 @@ function Link({ to, children, className, activeClassName }) {
     };
 
     return (
-        <a className={classes} href={to} onClick={handleClick}>{children}</a>
+
+        <a href={to}  onClick={handleClick} className="relative inline-block text-lg group">
+        <span class="relative z-10 block px-3 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
+        <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
+        <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
+        <span class="relative text-base">{children}</span>
+        </span>
+        <span class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0" data-rounded="rounded-lg"></span>
+      </a>
     );
 }
 

diff --git a/client/src/components/Sidebar.js b/client/src/components/Sidebar.js
@@ -1,6 +1,6 @@
 import Link from './Link';
 
-function Sidebar() {
+function Navbar() {
   const links = [
     { label: 'Home', path: '/' },
     { label: 'Summarizer', path: '/text-summarizer' },
@@ -13,19 +13,26 @@ function Sidebar() {
       <Link
         key={link.label}
         to={link.path}
-        className="mb-3"
-        activeClassName="font-bold border-l-4 border-blue-500 pl-2"
+        className="mr-4 text-gray-600 hover:text-gray-900 transition duration-300 ease-in-out"
+        activeClassName="font-bold text-blue-500"
       >
         {link.label}
       </Link>
     );
   });
 
   return (
-    <div className="sticky top-0 overflow-y-scroll flex flex-col items-start">
-      {renderedLinks}
-    </div>
+    <nav className="bg-white shadow-lg p-4">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="text-[30px] font-semibold ">
+        <span class="magic"><span class="magic-text">WebScrapideo</span></span>
+        </div>
+        <div className="flex space-x-4">
+          {renderedLinks}
+        </div>
+      </div>
+    </nav>
   );
 }
 
-export default Sidebar;
+export default Navbar;
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,3 +1,80 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+*{
+    font-family: 'Poppins', sans-serif;
+
+}
+:root {  
+    --color1: #6267f1;
+    --color2: #457def;
+    --color3: #179ee9;
+    --color4: #0fabca;
+    --color5: #0fafb2;
+    --color6: #10b78d;
+
+    /* --red: #F31559;
+    --magenta: #FF52A2;
+    --orange: #FFB07F;
+
+    --green: #1A5D1A;
+    
+    --blue: #78C1F3; */
+  }
+
+  @keyframes background-pan {
+    from {
+      background-position: 0% center;
+    }
+
+    to {
+      background-position: -200% center;
+    }
+  }
+
+  @keyframes scale {
+    from, to {
+      transform: scale(0);
+    }
+
+    50% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(180deg);
+    }
+  }
+  div > .magic {
+    display: inline-block;
+    position: relative;
+  }
+  div > .magic > .magic-text {
+    animation: background-pan 3s linear infinite;
+    background: linear-gradient(
+      to right,
+      var(--color1),
+      var(--color2),
+      var(--color3),
+      var(--color4),
+      var(--color5),
+      var(--color6),
+      var(--color6),
+      var(--color5),
+      var(--color4),
+      var(--color3),
+      var(--color2),
+      var(--color1)
+    );
+    background-size: 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    white-space: nowrap;
+  }