🪐 new features and bugs fixes

> fixed download buttons overlap issue \n> added a preloader on home page \n> added a feature that changes img on download and mirror page on each reload \n> took back the navbar logo as it was on v1

src/components/navbar/Navbar.jsx

@@ -46,16 +46,16 @@ const Navbar = () => {
 
     return (
         <>
-            <nav className='fixed z-50 w-screen h-[6vh] flex justify-between py-1 px-3 lg:px-7 shadow-md bg-black text-white'>
+            <nav className='fixed z-50 w-screen h-[6.5vh] flex justify-between py-2 px-3 lg:px-7 shadow-md bg-black text-white'>
                 {/* Logo */}
-                <NavLink to="/" className='flex justify-center w-fit lg:w-auto items-center gap-3 bg-gray-800 rounded-full px-3 pr-4'>
-                    <img className='w-[5vw] lg:w-[2vw] animate-pulse' src="/images/logos/scaledlogo.png" alt="ufolinux logo" />
-                    <p className='font-semibold text-orange-300'>UFO-LINUX</p>
+                <NavLink to="/" className='flex justify-center w-fit lg:w-auto items-center gap-2 rounded-full px-3 pr-4'>
+                    <img className='w-[5vw] lg:w-[2vw] navLogo' src="/images/logos/scaledlogo.png" alt="ufolinux logo" />
+                    <p className='font-semibold text-orange-300 navLogo'>UFO-LINUX</p>
                 </NavLink>
 
                 {/* Navlinks */}
                 <div className="font-semibold text-lg px-3 text-center hidden lg:flex justify-center items-center">
-                    <ul className='w-full flex justify-center items-center gap-7 *:text-center'>
+                    <ul className='w-full flex justify-center items-center gap-7 *:text-center hover:*:text-red-400'>
                         <li className={location.pathname === "/" ? 'text-red-400 underline underline-offset-8' : ''}>
                             <NavLink to="/">Home</NavLink>
                         </li>

src/index.css

@@ -2,23 +2,85 @@
 @tailwind components;
 @tailwind utilities;
 
-*{
+* {
   margin: 0;
   padding: 0;
   scroll-behavior: smooth;
   box-sizing: border-box;
 }
-body, html{
+
+body,
+html {
   overflow-x: hidden;
 }
 
+body {
+  cursor: url('https://ufolinux.tk/images/loaders/0.webp'), url('https://ufolinux.tk/images/logos/scaledlogo.png'), auto;
+}
+
 html::-webkit-scrollbar {
   width: 10px;
 }
+
 html::-webkit-scrollbar-thumb {
-  background-color: #4B5563;
+  background-color: #f87171;
   border-radius: 10px;
 }
+
 html::-webkit-scrollbar-track {
   background-color: #1F2937;
 }
+
+.navLogo {
+  animation: glowingLogo 2.5s linear infinite alternate-reverse;
+}
+
+@keyframes glowingLogo {
+  0% {
+    filter: drop-shadow(0.1rem 0.1rem 0.5rem red);
+  }
+
+  25% {
+    filter: drop-shadow(0.1rem 0.2rem 0.5rem blue);
+  }
+
+  50% {
+    filter: drop-shadow(0.1rem 0.1rem 0.5rem orange);
+  }
+
+  100% {
+    filter: drop-shadow(0.1rem 0.1rem 0.5rem purple);
+  }
+}
+
+
+.preloaderImg {
+  transform: translate(-1000%, -100%);
+  animation: teleport 3s ease-in-out 0.5s infinite alternate;
+}
+
+@keyframes teleport {
+  0% {
+    transform: translate(-800%, -100%);
+  }
+
+  10% {
+    transform: translate(-100%, -100%);
+  }
+
+  25% {
+    transform: translate(-100%, 100%);
+  }
+
+  50% {
+    transform: translate(100%, 100%);
+  }
+
+  75% {
+    transform: translate(100%, -100%);
+  }
+
+  100% {
+    transform: translate(3000%, -100%);
+  }
+}

src/screens/download/Download.jsx

@@ -1,16 +1,24 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { IoIosCloudDownload } from "react-icons/io";
 import { PiCoffeeFill } from "react-icons/pi";
 import Navbar from '../../components/navbar/Navbar';
 import Footer from '../../components/footer/Footer';
 
 const Download = () => {
+    const [imgSrc, setImgSrc] = useState('/images/loaders/5.webp');
+
+    useEffect(()=>{
+        const randomNumber = Math.floor(Math.random() * 12);
+        setImgSrc(`/images/loaders/${randomNumber}.webp`);
+    },[])
+
+
     return (
         <>
             <Navbar />
-            <div className='p-4 bg-black text-white py-14 h-full lg:h-screen pb-24'>
-                <img className=' size-60 m-auto animate-bounce my-12' src="/images/loaders/5.webp" alt="download ufolinux" />
-                <h2 className='flex items-center gap-2 text-2xl lg:text-3xl font-extrabold my-8'>Download UFO LINUX - Smooth & Reliable <PiCoffeeFill className='size-20 animate-pulse lg:size-auto' /></h2>
+            <div className='p-4 bg-black text-white py-14 h-full pb-24'>
+                <img className=' size-60 m-auto animate-bounce my-12' src={imgSrc} alt="download ufolinux" />
+                <h2 className='flex items-center gap-2 text-2xl lg:text-3xl font-extrabold my-8'>Download UFO LINUX - Smooth & Reliable <PiCoffeeFill className='size-20 animate-pulse lg:size-auto cursor-pointer' /></h2>
                 <h3 className='text-lg lg:text-xl my-3'>You can download the first release of live iso from below
                     Live ISO</h3>
                 <a href="https://files.martinvlba.eu/ufo/releases/development/ufolinux.iso" className=' w-fit'><p className='flex items-center font-bold text-md bg-white p-2 rounded-lg w-fit text-black gap-2 cursor-pointer hover:bg-teal-200'><IoIosCloudDownload /> Live ISO </p></a>

src/screens/home/Home.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { NavLink } from "react-router-dom";
 import Navbar from '../../components/navbar/Navbar';
 import Footer from '../../components/footer/Footer';
@@ -7,77 +7,96 @@ import { GiMirrorMirror, GiBlackHandShield } from "react-icons/gi";
 import { RiArrowUpWideFill } from "react-icons/ri";
 
 function Home() {
+    const [imgSrc, setImgSrc] = useState('/images/loaders/2.webp');
+    const [vidSrc, setVidSrc] = useState('/videos/invasion.mp4');
+    const [isPreloaderActive, setIsPreloaderActive] = useState(true);
+
     useEffect(() => {
-        const chngVid = document.getElementById("mob-desk");
         const screenWidth = window.innerWidth;
-
         if (screenWidth < 600) {
-            chngVid.setAttribute("src", "/videos/invasion-mobile.webm");
+            setVidSrc("/videos/invasion-mobile.webm");
         } else {
-            chngVid.setAttribute("src", "/videos/invasion.mp4");
+            setVidSrc("/videos/invasion.mp4");
         }
+    }, [isPreloaderActive]);
+
+    useEffect(() => {
+        const randomNumber = Math.floor(Math.random() * 12);
+        setImgSrc(`/images/loaders/${randomNumber}.webp`);
+        setTimeout(() => {
+            setIsPreloaderActive(false);
+        }, 3300);
     }, []);
+
     return (
-        <>
-            <Navbar />
-
-            {/* wrapper */}
-            <div className='flex flex-col w-full snap-both snap-mandatory *:snap-start *:text-white'>
-                {/* section 1 */}
-                <div className='fixed -z-10'>
-                    <video id="mob-desk" className='lg:w-screen h-screen lg:h-auto brightness-75 object-cover' autoPlay loop muted>
-                        {/* <source src="/videos/invasion-mobile.webm" type="video/webm" /> */}
-                        <source src="/videos/invasion.mp4" type="video/mp4" />
-                        Your browser does not support the video tag.
-                    </video>
-
-                    <div className='flex flex-col justify-center text-center items-center gap-5 absolute m-auto h-screen w-full top-0 left-0  *:w-fit *:font-bold'>
-                        <h1 className='text-3xl'>
-                            Welcome to Ufolinux
-                        </h1>
-                        <p className='text-lg lg:text-2xl'>The distribution made for everyday use</p>
-                    </div>
-                </div>
+        <> {
+            isPreloaderActive ?
+                < div className='absolute w-screen h-screen self-center top-0 left-0 duration-75 overflow-hidden bg-black z-50' >
+                    <img className='preloaderImg mt-[20rem] mb-[4rem] mx-auto h-[5rem] w-[5rem]' src={imgSrc} alt="Loading.." />
+                </div >
+                :
+                <>
+                    <Navbar />
+                    {/* wrapper */}
+                    <div className='flex flex-col w-full snap-both snap-mandatory *:snap-start *:text-white'>
+                        {/* section 1 */}
+                        <div className='fixed -z-10'>
+                            <video id="mob-desk" className='lg:w-screen h-screen lg:h-auto brightness-75 object-cover' autoPlay loop muted>
+                                {/* <source src="/videos/invasion-mobile.webm" type="video/webm" /> */}
+                                <source src={vidSrc} type="video/mp4" />
+                                Your browser does not support the video tag.
+                            </video>
 
-                {/* empty transparent block */}
-                <div className='w-full h-[95vh]'>
+                            <div className='flex flex-col justify-center text-center items-center gap-5 absolute m-auto h-screen w-full top-0 left-0  *:w-fit *:font-bold'>
+                                <h1 className='text-3xl'>
+                                    Welcome to Ufolinux
+                                </h1>
+                                <p className='text-lg lg:text-2xl'>The distribution made for everyday use</p>
+                            </div>
+                        </div>
 
-                </div>
+                        {/* empty transparent block */}
+                        <div className='w-full h-[95vh]'>
 
-                {/* section 2 */}
-                <div className='w-full h-full lg:h-[85vh] bg-gray-900 rounded-t-3xl shadow-2xl'>
-                    <RiArrowUpWideFill className='m-auto mt-2 animate-bounce' size={25} />
-                    <h2 className='w-fit m-auto text-2xl lg:text-4xl font-extrabold mt-10 tracking-wider'>What is UFOLINUX ?</h2>
-                    <hr className='w-1/2 m-auto border-b-2 border-red-600 my-6' />
-                    <div className='w-5/6 *:text-justify m-auto text-lg lg:text-xl bg-gray-800 rounded-3xl p-3 flex flex-col gap-5'>
-                        <p>UfoLinux or UfoOS is a GNU / Linux Operating System built completely from the scratch.</p>
+                        </div>
 
-                        <p>It led by a team of passionate individuals who thrive on pushing the limits of knowledge in this project.</p>
+                        {/* section 2 */}
+                        <div className='w-full h-full lg:h-[85vh] bg-gray-900 rounded-t-3xl shadow-2xl'>
+                            <RiArrowUpWideFill className='m-auto mt-2 animate-bounce' size={25} />
+                            <h2 className='w-fit m-auto text-2xl lg:text-4xl font-extrabold mt-10 tracking-wider'>What is UFOLINUX ?</h2>
+                            <hr className='w-1/2 m-auto border-b-2 border-red-600 my-6' />
+                            <div className='w-5/6 *:text-justify m-auto text-lg lg:text-xl bg-gray-800 rounded-3xl p-3 flex flex-col gap-5'>
+                                <p>UfoLinux or UfoOS is a GNU / Linux Operating System built completely from the scratch.</p>
 
-                        <p>This project was started on 11th april 2022 and it's still a long way to go.</p>
+                                <p>It led by a team of passionate individuals who thrive on pushing the limits of knowledge in this project.</p>
 
-                        <p>It uses fork of pacman package manager which is named as KEPLER.</p>
-                    </div>
-                    <div className='flex flex-col gap-4 lg:gap-0 lg:flex-row flex-nowrap justify-around items-center my-12 w-5/6 m-auto *:bg-gray-600 text-2xl font-bold *:w-full lg:*:w-auto *:text-center lg:*:text-start *:rounded-3xl *:p-3 *:px-5 *:shadow-md *:hover:shadow-xl hover:*:bg-orange-600 hover:*:-translate-y-2 *:transition-all *:flex *:items-center *:gap-2 hover:*:animate-pulse'>
-                        <NavLink to="/download" >
-                            <IoCloudDownloadSharp /> Download
-                        </NavLink>
-
-                        <NavLink to="/mirror" >
-                            <GiMirrorMirror /> Mirror List
-                        </NavLink>
-
-                        <NavLink to="/contributors" >
-                            <GiBlackHandShield /> Contributors
-                        </NavLink>
-                    </div>
-                </div>
+                                <p>This project was started on 11th april 2022 and it's still a long way to go.</p>
+
+                                <p>It uses fork of pacman package manager which is named as KEPLER.</p>
+                            </div>
+                            <div className='flex flex-col gap-4 lg:gap-0 lg:flex-row flex-nowrap justify-around items-center my-12 w-5/6 m-auto *:bg-gray-600 text-2xl font-bold *:w-full lg:*:w-auto *:text-center lg:*:text-start *:rounded-3xl *:p-3 *:px-5 *:shadow-md *:hover:shadow-xl hover:*:bg-orange-600 hover:*:-translate-y-2 *:transition-all *:flex *:items-center *:gap-2 hover:*:animate-pulse'>
+                                <NavLink to="/download" >
+                                    <IoCloudDownloadSharp /> Download
+                                </NavLink>
 
-                {/* footer */}
-                <Footer />
-            </div>
+                                <NavLink to="/mirror" >
+                                    <GiMirrorMirror /> Mirror List
+                                </NavLink>
 
+                                <NavLink to="/contributors" >
+                                    <GiBlackHandShield /> Contributors
+                                </NavLink>
+                            </div>
+                        </div>
+
+                        {/* footer */}
+                        <Footer />
+                    </div>
+
+                </>
+        }
         </>
+
     );
 }
 

src/screens/mirror/Mirror.jsx

@@ -1,16 +1,22 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Navbar from '../../components/navbar/Navbar';
 import Footer from '../../components/footer/Footer';
 import Code from '../../components/ui/Code';
 
 const Mirror = () => {
+  const [imgSrc, setImgSrc] = useState('/images/loaders/9.webp');
+
+  useEffect(()=>{
+      const randomNumber = Math.floor(Math.random() * 12);
+      setImgSrc(`/images/loaders/${randomNumber}.webp`);
+  },[])
 
   return (
     <>
       <Navbar />
 
       <div className='p-4 bg-black text-white py-14 h-full pb-24'>
-        <img className=' size-60 m-auto animate-pulse my-12' src="/images/loaders/9.webp" alt="download ufolinux" />
+        <img className=' size-60 m-auto animate-pulse my-12' src={imgSrc} alt="download ufolinux" />
         <h2 className='flex items-center gap-2 text-2xl lg:text-3xl font-extrabold my-8'>Mirrorlist for official packages</h2>
         <h3 className='text-lg lg:text-xl my-3 text-yellow-300'>Edit /etc/kepler.conf file and add these</h3>