From 225a5e11a536c055bea187288b6c93dfa80f3a4f Mon Sep 17 00:00:00 2001
From: preston176 <prestonnyamweya@gmail.com>
Date: Thu, 11 Jul 2024 12:06:02 +0300
Subject: [PATCH] refactor: Improve UI consistency in Header and About
 components

---
 src/Components/Header/Header.jsx | 49 ++++++++++++++++----------------
 src/Pages/About.jsx              |  2 +-
 src/Pages/AiServices.jsx         |  9 ++++--
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
index 5a8d521..5dd2cd2 100644
--- a/src/Components/Header/Header.jsx
+++ b/src/Components/Header/Header.jsx
@@ -17,44 +17,46 @@ const Header = () => {
     };
 
     return (
-        <div className={`sticky top-0 left-0 w-full h-16 ${isDarkMode ? 'bg-black text-white' : 'bg-[#e1f0ff] text-black'} bg-opacity-85 border-b-2 border-[#101010] z-50 flex justify-center items-center `}>
-            <div className="md:flex items-center justify-between py-4 md:px-10 px-2 w-full max-w-7xl">
-                {/* img */}
+        <div className={`sticky top-0 left-0 w-full h-16 ${isDarkMode ? 'bg-black text-white' : 'bg-[#e1f0ff] text-black'} bg-opacity-85 border-b-2 border-[#101010] z-50 flex justify-center items-center`}>
+            <div className="flex items-center justify-between py-4 px-2 w-full max-w-7xl">
+                {/* Dark/Light mode toggle */}
                 <div className="font-bold text-2xl cursor-pointer flex items-center gap-1">
-
-                    {/* Conditionally render a dark or light mode icon based on the value of `isDarkMode`. */}
-                    {isDarkMode ? (<svg onClick={() => toggleTheme()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
-                        <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-                    </svg>)
-                        : (<svg onClick={() => toggleTheme()} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                    {isDarkMode ? (
+                        <svg onClick={toggleTheme} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                            <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+                        </svg>
+                    ) : (
+                        <svg onClick={toggleTheme} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
                         </svg>
-                        )
-                    }
-
+                    )}
                 </div>
-                <div className="font-bold text-2xl cursor-pointer flex items-center gap-1">
-                    <Link to="/"> <span className={`${isDarkMode ? "text-white" : "text-black"} text-primary transition ease-in-out delay-150`}>AI Gen</span></Link>
+
+                {/* Logo */}
+                <div className="flex-1 text-center">
+                    <Link to="/">
+                        <span className={`${isDarkMode ? 'text-white' : 'text-black'} text-2xl font-bold transition ease-in-out delay-150`}>AI Gen</span>
+                    </Link>
                 </div>
 
-                {/* md: mobile icons */}
+                {/* Mobile Menu Icon */}
                 <div
                     onClick={toggleMenu}
-                    className="w-7 h-7 right-8 top-6 cursor-pointer md:hidden text-black absolute"
+                    className="w-7 h-7 cursor-pointer md:hidden text-black absolute right-4"
                 >
-                    {open ? <XMarkIcon /> : <Bars3BottomRightIcon />}
+                    {open ? <XMarkIcon color={isDarkMode ? "white" : "black"} /> : <Bars3BottomRightIcon color={isDarkMode ? "white" : "black"} />}
                 </div>
 
-                {/* navbar */}
+                {/* Navbar */}
                 <ul
-                    className={`md:flex md:items-center md:pd-0 md:static md:z-auto left-0 w-full md:w-auto mt-4 md:pl-0 pl-9 bg-slate-400 sm:bg-transparent transition-all duration-500 ease-in-out mobile-menu ${open ? 'open' : ''}`}
+                    className={`md:flex md:items-center md:static absolute md:w-auto w-full md:bg-transparent bg-slate-400 transition-all duration-500 ease-in-out ${open ? 'top-16' : 'top-[-490px]'}`}
                 >
                     {links.map((item, index) => (
-                        <li key={index} className="md:ml-8 md:my-0 my:7 font-semibold">
+                        <li key={index} className="md:ml-8 md:my-0 my-7 font-semibold">
                             {item.link.startsWith('http') ? (
                                 <a
                                     href={item.link}
-                                    className={`text-black transition-all duration-500 hover:text-primary ${isDarkMode ? 'text-white' : 'text-black'}`}
+                                    className={`transition-all duration-500 hover:text-primary ${isDarkMode ? 'text-white' : 'text-black'}`}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                 >
@@ -63,10 +65,7 @@ const Header = () => {
                             ) : (
                                 <Link
                                     to={item.link}
-                                    activeClass="active"
-                                    smooth={true}
-                                    spy={true}
-                                    className={`text-black transition-all duration-500 hover:text-primary ${isDarkMode ? 'text-white' : 'text-black'}`}
+                                    className={`transition-all duration-500 hover:text-primary ${isDarkMode ? 'text-white' : 'text-black'}`}
                                 >
                                     {item.name}
                                 </Link>
diff --git a/src/Pages/About.jsx b/src/Pages/About.jsx
index 34ee163..dbd9d5f 100644
--- a/src/Pages/About.jsx
+++ b/src/Pages/About.jsx
@@ -29,7 +29,7 @@ const About = ({ isDarkMode }) => {
         <div className={`${isDarkMode ? "text-white" : "text-black"} text-gray-900`}>
             <h2 className='text-center font-bold text-2xl py-2'>About</h2>
             <p className={`${isDarkMode ? "text-white" : "text-black"} font-bold text-center text-lg`}>Welcome to this AI Gen Project! </p>
-            <p className='text-lg text-center py-2'>We are passionate about harnessing the power of AI to create innovative solutions for generating images, audio, and more. <br /> Our project leverages cutting-edge technology provided by OpenAI to enable users to explore the realm of artificial intelligence in creative ways.</p>
+            <p className='text-lg text-center py-2'>We are passionate about harnessing the power of AI to create innovative solutions for delivering a vast majority of services such as generating images, audio, and more. <br /> Our project leverages cutting-edge technology provided by OpenAI to enable users to explore the realm of artificial intelligence in creative ways.</p>
             <div className="models-used">
                 <h3 className="text-xl font-semibold mb-4 text-center">Models used:</h3>
                 {
diff --git a/src/Pages/AiServices.jsx b/src/Pages/AiServices.jsx
index b82cd62..652714b 100644
--- a/src/Pages/AiServices.jsx
+++ b/src/Pages/AiServices.jsx
@@ -11,7 +11,9 @@ const AiServices = ({ isDarkMode }) => {
         dark: "bg-[#111] shadow-gray-700",
         darkText: 'text-white',
         lightText: 'text-black',
-        light: 'bg-[#858585] shadow-gray-700 bg-opacity-10'
+        light: 'bg-[#858585] shadow-gray-700 bg-opacity-10',
+        darkBtn: 'bg-red-50 text-black p-4 rounded hover:bg-red-500 hover:text-white',
+        lightBtn: 'bg-red-500 text-white p-4 rounded hover:bg-red-400 hover:text-black',
     }
 
     const cards = [
@@ -62,7 +64,7 @@ const AiServices = ({ isDarkMode }) => {
             <div className='flex rounded-[3000px] items-center justify-between pt-8 py-4  sm:flex-row mobile:flex-col mobile:gap-5 '>
                 {
                     cards.map((card, index) => (
-                        <Link to={card.link}>
+                        <Link to={card.link} key={index}>
                             <div key={index} className={`${isDarkMode ? ThemeStyles.dark : ThemeStyles.light} flex flex-col justify-around items-center h-60 rounded-xl mobile:w-screen md:w-[320px] lg:w-[400px] hover:scale-110 hover:cursor-pointer transition-all ease-in-out duration-150`}>
                                 <h2 className="bg-gradient-to-r from-red-500 to-blue-500 text-transparent bg-clip-text laptop:text-[40px] font-mono p-4 md:text-[76px] sm:text-[46px] mobile:text-[28px] small_mobile:text-[25px] text-center">{card.title}</h2>
                                 <div className={`${isDarkMode ? ThemeStyles.darkText : ThemeStyles.lightText} flex justify-center items-center scale-[2]`}>
@@ -71,6 +73,9 @@ const AiServices = ({ isDarkMode }) => {
                                 <div className="">
                                     <h3 className={`${isDarkMode ? ThemeStyles.darkText : ThemeStyles.lightText} w-auto m-auto text-center`}>{card.description}</h3>
                                 </div>
+                                <div className="">
+                                    <Link to={card.link}>  <h3 className={`${isDarkMode ? ThemeStyles.darkBtn : ThemeStyles.lightBtn}' hover:scale-105 transition ease-in-out delay-50 hover:transition-all`}>Get Started</h3></Link>
+                                </div>
                             </div>
                         </Link>
                     ))