Skip to content

Commit

Permalink
refactor: Improve UI consistency in Header and About components
Browse files Browse the repository at this point in the history
  • Loading branch information
@preston176
preston176 committed Jul 11, 2024
1 parent af10d99 commit 225a5e1
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 28 deletions.
49 changes: 24 additions & 25 deletions src/Components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/About.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
{
Expand Down
9 changes: 7 additions & 2 deletions src/Pages/AiServices.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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]`}>
Expand All @@ -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>
))
Expand Down

0 comments on commit 225a5e1

Please sign in to comment.