feat: Revamp the website with modern design (#721)

* "Redesign of buttons, correction of bad practices. A more modern view of the website." Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * "Responsive size in mobile header buttons and minor changes" Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * "Completely removed scaling on hover" Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * chore(maven): bump commons-io:commons-io from 2.17.0 to 2.18.0 (#722) Bumps commons-io:commons-io from 2.17.0 to 2.18.0. --- updated-dependencies: - dependency-name: commons-io:commons-io dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(maven): bump org.openrewrite.recipe:rewrite-recommendations from 1.12.0 to 1.13.0 (#723) * Overflow-hidden corrected Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * Lint error corrected Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * "Updated styles and layout for Header and MainSection components" Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> * chore: Formatted the files using prettier Signed-off-by: Saptarshi Sarkar <saptarshi.programmer@gmail.com> --------- Signed-off-by: FabrizioJordan <dev.fjordan@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: Saptarshi Sarkar <saptarshi.programmer@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Saptarshi Sarkar <saptarshi.programmer@gmail.com> Co-authored-by: FabrizioJordan <dev.fjordan@gmail.com>
SaptarshiSarkar12 · Nov 28, 2024 · 5d1035f · 5d1035f
1 parent 8dcee60
commit 5d1035f
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 51 deletions.
diff --git a/Website/app/Contribute.js b/Website/app/Contribute.js
@@ -19,13 +19,13 @@ export default function Contribute({ props }) {
   return (
     <div
       id="contribute"
-      className="md:grid md:grid-cols-2 justify-center bg-var select-none text-white pb-5"
+      className="flex flex-col justify-center items-center gap-12 py-12 px-4  bg-var select-none text-white"
     >
-      <div className="md:pr-8 mb-2">
-        <h2 className="text-3xl mb-3 sm:text-4xl font-bold lg:mt-16 md:mt-10 sm:pt-10 sm:mb-10 xs:p-5 text-center">
+      <div className="flex flex-col gap-4">
+        <h2 className="text-3xl sm:text-4xl font-bold text-center">
           More Information About Drifty
         </h2>
-        <p className="text-2xl text-center ml-5 mr-5 font-sans mb-8 leading-normal xs:px-4">
+        <p className="max-w-2xl text-xl lg:text-2xl text-center font-sans leading-normal">
           It is available both in CLI (Command Line Interface) and GUI
           (Graphical User Interface) mode for all the major platforms like
           Windows, Linux and MacOS. We believe in team work. Any contribution
@@ -52,18 +52,18 @@ export default function Contribute({ props }) {
           and completed.
         </p>
       </div>
-      <div className="ml-2">
-        <h2 className="text-3xl mb-3 sm:text-4xl font-bold lg:mt-16 md:mt-10 sm:pt-10 sm:mb-10 xs:p-5 text-center">
+      <div className="flex flex-col gap-8">
+        <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-center">
           Be a part of Drifty Family!
         </h2>
-        <div className="flex items-center justify-center gap-[2em] flex-wrap rounded-full space-x-0 gap-y-4 justify-items-center xs:pb-5 pr-1">
+        <div className="flex items-center justify-center gap-[2em] flex-wrap rounded-full gap-y-4 justify-items-center xs:pb-5 pr-1">
           {props.contrib.map((item, index) => {
             if (index < 7 && item.type === "User") {
               // We are using 7 instead of 6 because we are not counting the dependabot
               return (
                 <a href={item.html_url} key={index}>
                   <Image
-                    className="rounded-full hover:transition ease-in-out hover:-translate-y-1 hover:scale-110 delay-150 duration-300"
+                    className="rounded-full border-2 border-transparent hover:transition ease-in-out hover:border-[#ffffff70] delay-150 duration-300"
                     width={64}
                     height={64}
                     src={item.avatar_url + ".webp&s=77"}
@@ -77,27 +77,27 @@ export default function Contribute({ props }) {
             href="https://github.com/SaptarshiSarkar12/Drifty/graphs/contributors"
             target="_blank"
           >
-            <div className="gap-1 rounded-full h-16 w-16 text-xl font-semibold flex items-center justify-center border-2 md:border-white text-center   hover:text-black xs:transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
+            <div className="py-2 px-3.5 gap-1 rounded-full h-16 w-16 text-xl font-semibold flex items-center justify-center text-center xs:transition ease-in-out delay-150 bg-blue-500 hover:bg-[#2e51ab] duration-300">
               {totalNoOfContributors - 6}+
             </div>
           </a>
         </div>
-        <div className="flex items-center justify-center flex-wrap text-lg font-semibold pr-3 gap-6 mt-4">
+        <div className="flex items-center justify-center flex-wrap text-lg font-semibold gap-6">
           <a
-            className="rounded-lg xs:p-[3px] sm:p-1 w-auto lg:w-48 border-2 md:border-white text-center hover:text-black xs:transition ease-in-out delay-100 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
+            className="py-2 px-3.5 rounded-lg w-auto text-center xs:transition ease-in-out delay-100 bg-blue-500 hover:bg-[#2e51ab] duration-300"
             href="https://github.com/SaptarshiSarkar12/Drifty"
           >
             <i aria-hidden="true" className="fab fa-github p-2"></i>Contribute
           </a>
           <a
-            className="rounded-lg xs:p-[3px] sm:p-1 w-auto lg:w-48 border-2 md:border-white text-center hover:text-black xs:transition ease-in-out delay-100 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
+            className="py-2 px-3.5 rounded-lg w-auto text-center xs:transition ease-in-out delay-100 bg-blue-500 hover:bg-[#2e51ab] duration-300"
             href="https://github.com/SaptarshiSarkar12/Drifty/stargazers"
           >
             <i aria-hidden="true" className="fa fa-regular fa-star p-2"></i>
             Stars : {values[0]}
           </a>
           <a
-            className="rounded-lg xs:p-[3px] sm:p-1 w-auto lg:w-48 border-2 md:border-white text-center hover:text-black xs:transition ease-in-out delay-100 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
+            className="py-2 px-3.5 rounded-lg w-auto text-center xs:transition ease-in-out delay-100 bg-blue-500 hover:bg-[#2e51ab] duration-300"
             href="https://github.com/SaptarshiSarkar12/Drifty/network/members"
           >
             <i

diff --git a/Website/app/Demo.js b/Website/app/Demo.js
@@ -9,11 +9,11 @@ function classNames(...classes) {
 export default function Demo() {
   const tabs = ["Drifty CLI", "Drifty GUI"];
   return (
-    <div id="demo" className="bg-bottom">
+    <div id="demo" className="bg-bottom flex flex-col gap-4">
       <h1 className="select-none text-center font-extrabold text-4xl pt-6">
         Demonstration of Drifty
       </h1>
-      <p className="select-none text-center text-black text-2xl py-3">
+      <p className="select-none text-center text-black text-2xl">
         Here is a quick demo of Drifty
       </p>
       <div className={"text-center select-none"}>
@@ -25,10 +25,10 @@ export default function Demo() {
                   classNames(
                     "w-36 rounded-full py-2.5 font-extrabold text-blue-700",
                     "ring-blue ring-opacity-60 ring-offset-2 ring-offset-bottom focus:outline-none focus:ring-2",
-                    "hover:-translate-y-1 hover:scale-110 duration-200",
+                    "hover:bg-[#004f6a]  duration-200",
                     selected
                       ? "text-white bg-blue-600 shadow"
-                      : "hover:bg-gray-700/[0.12]",
+                      : "hover:bg-[#3741514f]",
                   )
                 }
                 key={tab}

diff --git a/Website/app/Footer.js b/Website/app/Footer.js
@@ -79,7 +79,7 @@ export default function Footer() {
 
   return (
     <div className="select-none">
-      <footer className="p-4 bg-bottom sm:p-6">
+      <footer className="bg-bottom p-4 sm:p-6 sm:pt-12">
         <div className="md:flex md:justify-between">
           <div className="mb-6 md:mb-0">
             <a
@@ -99,12 +99,12 @@ export default function Footer() {
             </a>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-2">
-            <div>
-              <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">
+            <div className="flex flex-col gap-6 items-start justify-center">
+              <h2 className="text-sm font-semibold text-gray-900 uppercase">
                 Follow us
               </h2>
-              <ul className="text-gray-600 dark:text-gray-500">
-                <li className="mb-4">
+              <ul className="text-gray-600 dark:text-gray-500 flex flex-col gap-4">
+                <li className="">
                   <a
                     href="https://github.com/SaptarshiSarkar12"
                     className="hover:text-github-color"
@@ -122,12 +122,12 @@ export default function Footer() {
                 </li>
               </ul>
             </div>
-            <div>
-              <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase">
+            <div className="flex flex-col gap-6 items-start justify-center">
+              <h2 className="text-sm font-semibold text-gray-900 uppercase">
                 Legal
               </h2>
-              <ul className="text-gray-600 dark:text-gray-500">
-                <li className="mb-4">
+              <ul className="text-gray-600 dark:text-gray-500 flex flex-col gap-4">
+                <li className="">
                   <a
                     href="https://raw.githubusercontent.com/SaptarshiSarkar12/Drifty/master/Privacy%20Policy.txt"
                     className="hover:text-gray-800"
@@ -161,7 +161,7 @@ export default function Footer() {
               <a
                 key={index}
                 href={href}
-                className="text-gray-500 hover:text-github-color hover:transition ease-in-out duration-300 delay-100 hover:-translate-y-1 hover:scale-110"
+                className="text-gray-500 hover:text-github-color hover:transition ease-in-out duration-300 delay-100"
               >
                 {icon}
                 <span className="sr-only">{label}</span>

diff --git a/Website/app/Header.js b/Website/app/Header.js
@@ -10,7 +10,7 @@ function NavLink({ to, children, cn, setOpen }) {
     <Link
       scroll={false}
       href={to}
-      className={`text-gray-900 hover:text-black ${cn}`}
+      className={`text-gray-900 ${cn}`}
       onClick={() => {
         setOpen(false);
       }}
@@ -23,7 +23,7 @@ function NavLink({ to, children, cn, setOpen }) {
 function MobileNav({ open, setOpen }) {
   return (
     <div
-      className={`fixed z-10 top-0 left-0 h-screen w-screen bg-top transform ${
+      className={`fixed z-10 top-0 left-0 h-screen w-screen flex flex-col gap-12 pt-16 bg-top transform ${
         !open && "-translate-x-full"
       } transition-transform duration-300 ease-in-out filter drop-shadow-md`}
     >
@@ -39,24 +39,24 @@ function MobileNav({ open, setOpen }) {
         </Link>
       </div>
       {/* Mobile Nav */}
-      <div className="flex flex-col pt-12 justify-items-center items-center z-50">
+      <div className="flex flex-col gap-12 justify-items-center items-center z-50">
         <NavLink
           to="/about"
-          cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          cn="flex py-2.5 px-3.5 text-white rounded-lg hover:bg-[#004f6a7d] duration-500 font-semibold text-xl"
           setOpen={setOpen}
         >
           <button>About</button>
         </NavLink>
         <NavLink
           to="/download"
-          cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          cn="flex py-2.5 px-3.5 text-white rounded-lg hover:bg-[#004f6a7d] duration-500 font-semibold text-xl"
           setOpen={setOpen}
         >
           <button>Download</button>
         </NavLink>
         <NavLink
           to="/contact"
-          cn="text-2xl font-bold my-6 text-white hover:text-blue-700 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 z-50"
+          cn="flex py-2.5 px-3.5 text-white rounded-lg hover:bg-[#004f6a7d] duration-500 font-semibold text-xl"
           setOpen={setOpen}
         >
           <button>Contact</button>
@@ -66,15 +66,15 @@ function MobileNav({ open, setOpen }) {
           <a href="https://discord.gg/DeT4jXPfkG" target="_blank">
             <i
               className={
-                "fab fa-discord text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-violet-600 z-50"
+                "fab fa-discord text-3xl text-white mx-4 hover:transition hover:ease-in-out delay-75 duration-300 hover:text-violet-600 z-50"
               }
             ></i>
           </a>
 
           <a href="https://github.com/SaptarshiSarkar12/Drifty" target="_blank">
             <i
               className={
-                "fab fa-github text-4xl text-white mx-8 hover:transition hover:ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-black z-50"
+                "fab fa-github text-3xl text-white mx-4 hover:transition hover:ease-in-out delay-75 duration-300 hover:text-black z-50"
               }
             ></i>
           </a>
@@ -116,7 +116,7 @@ export default function Header({ props }) {
         <div className="flex items-center lg:pl-20 mb-3 w-full">
           <Link className="font-semibold" href="/">
             <Image
-              className="w-16"
+              className="w-12 lg:w-16"
               src="Drifty1024Thinner1Px.png"
               alt="Logo Of Drifty"
               width={300}
@@ -151,39 +151,39 @@ export default function Header({ props }) {
         </div>
 
         {/* Desktop Navbar buttons */}
-        <div className="hidden md:flex mr-20 ">
-          <NavLink to="/#" cn="mx-4 flex" setOpen={setOpen}>
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
+        <div className="hidden md:flex gap-4 lg:gap-8 justify-center items-center pr-4 lg:pr-8">
+          <NavLink to="/#" cn="flex" setOpen={setOpen}>
+            <button className="py-2 px-3.5 text-white hover:bg-[#004f6a7d] hover:transition rounded-lg font-bold tracking-wider text-base lg:text-lg duration-300">
               HOME
             </button>
           </NavLink>
-          <NavLink to="/about" cn="mx-4 flex" setOpen={setOpen}>
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
+          <NavLink to="/about" cn="flex" setOpen={setOpen}>
+            <button className="py-2 px-3.5 text-white hover:bg-[#004f6a7d] hover:transition rounded-lg font-bold tracking-wider text-base lg:text-lg duration-300">
               ABOUT
             </button>
           </NavLink>
-          <NavLink to="/download" cn="mx-4 flex" setOpen={setOpen}>
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
+          <NavLink to="/download" cn="flex" setOpen={setOpen}>
+            <button className="py-2 px-3.5 text-white hover:bg-[#004f6a7d] hover:transition rounded-lg font-bold tracking-wider text-base lg:text-lg duration-300">
               DOWNLOAD
             </button>
           </NavLink>
-          <NavLink to="/contact" cn="mx-4 flex" setOpen={setOpen}>
-            <button className="text-white hover:transition text-xl hover:scale-105 duration-300 font-extrabold">
+          <NavLink to="/contact" cn="flex" setOpen={setOpen}>
+            <button className="py-2 px-3.5 text-white hover:bg-[#004f6a7d] hover:transition rounded-lg font-bold tracking-wider text-base lg:text-lg duration-300">
               CONTACT
             </button>
           </NavLink>
           <a href="https://discord.gg/DeT4jXPfkG" target="_blank">
             <i
               className={
-                "fab fa-discord text-4xl text-white mx-8 hover:scale-110 duration-100 hover:text-violet-700"
+                "fab fa-discord text-2xl text-white mx-4 duration-100 hover:text-violet-700"
               }
             ></i>
           </a>
 
           <a href="https://github.com/SaptarshiSarkar12/Drifty" target="_blank">
             <i
               className={
-                "fab fa-github text-4xl text-white mx-8 hover:scale-110 duration-100 hover:text-black"
+                "fab fa-github text-2xl text-white mx-4 duration-100 hover:text-black"
               }
             ></i>
           </a>

diff --git a/Website/app/MainSection.js b/Website/app/MainSection.js
@@ -7,7 +7,7 @@ export default function MainSection() {
       <div className="lg:w-1/2">
         <div className="lg:flex lg:flex-col text-white px-4 py-4 sm:pl-[5rem] md:text">
           <div className="flex lg:ml-4 lg:items-center border-b-4 pb-3 gap-2 ">
-            <h1 className="lg:text-8xl xs:text-7xl font-bold">Drifty</h1>
+            <h1 className="text-6xl lg:text-7xl font-bold">Drifty</h1>
           </div>
           <p className="text-lg lg:text-2xl lg:ml-4 md:pr-20 font-sans my-4 xs:pb-2">
             Drifty is an Open-Source interactive File Downloader system built
@@ -19,14 +19,14 @@ export default function MainSection() {
 
           <div className="flex space-x-2 justify-start lg:ml-4 lg:mt-2 lg:mb-8">
             <Link
-              className="border-2 px-3 py-2 text-white rounded hover:border-[#191B33] hover:bg-[#191B33] hover:scale-105 duration-500 text-sm lg:text-base"
+              className="px-3 py-2 bg-[#035792] text-white rounded-lg hover:border-[#191B33] hover:bg-[#191B33] duration-500 text-sm md:text-base xl:text-xl"
               href={"/download"}
               role="button"
             >
               Download
             </Link>
             <Link
-              className="border-2 px-3 py-2 text-white rounded hover:border-[#191B33] hover:bg-[#191B33] hover:scale-105 duration-500 text-sm lg:text-base"
+              className="px-3 py-2 bg-[#1d356333] text-white rounded-lg hover:border-[#191B33] hover:bg-[#004f6a7d] duration-500 text-sm md:text-base xl:text-xl"
               href={"/#demo"}
               role="button"
             >

diff --git a/Website/app/layout.js b/Website/app/layout.js
@@ -23,7 +23,7 @@ export const viewport = {
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className="scroll-smooth">
+    <html lang="en" className="scroll-smooth overflow-x-hidden">
       <head>
         <script
           src="https://kit.fontawesome.com/d93986da58.js"