From 104553eb9a0567357f57080b5ef14f0e1f9a380f Mon Sep 17 00:00:00 2001
From: Jorge Celaya <jcelaya775@gmail.com>
Date: Fri, 21 Jan 2022 01:09:15 -0600
Subject: [PATCH] added footer and enhancements

---
 components/Footer.js  | 40 ++++++++++++++++++++++++++++++
 components/Navbar.js  | 57 ++++++-------------------------------------
 components/Sidebar.js |  4 +--
 pages/index.js        | 34 ++++++--------------------
 4 files changed, 58 insertions(+), 77 deletions(-)
 create mode 100644 components/Footer.js

diff --git a/components/Footer.js b/components/Footer.js
new file mode 100644
index 0000000..1f861ca
--- /dev/null
+++ b/components/Footer.js
@@ -0,0 +1,40 @@
+import React from 'react'
+
+export default function Footer() {
+  return (
+    <div className='bg-zinc-900 text-[#f0f0f0] h-80'>
+      <div className='container mx-auto py-24 text-center grid grid-cols-3'>
+        <ul>
+          <li>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>
+              Projects
+            </h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>
+              Projects
+            </h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Home</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>
+              Projects
+            </h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>Skills</h3>
+            <h3 className='hover:font-semibold hover:cursor-pointer'>About</h3>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Navbar.js b/components/Navbar.js
index 753c9bd..dbb7c3b 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -3,10 +3,6 @@ import Sidebar from './Sidebar'
 import Link from 'next/link'
 import Switch from './Switch'
 import { useSelector, useDispatch } from 'react-redux'
-import { WiDaySunny } from 'react-icons/wi'
-import { MdNightlightRound } from 'react-icons/md'
-import { FaBeer } from 'react-icons/fa'
-import { CgLogOff } from 'react-icons/cg'
 import { MdOutlineClose } from 'react-icons/md'
 
 export default function Navbar() {
@@ -16,50 +12,13 @@ export default function Navbar() {
 
   useEffect(() => {
     const burger = burgerRef.current
-
-    burger.addEventListener('mouseenter', mouseEnter)
     burger.addEventListener('click', burgerClick)
-    burger.addEventListener('mouseleave', mouseLeave)
 
     return () => {
-      burger.removeEventListener('mouseenter', mouseEnter)
       burger.removeEventListener('click', burgerClick)
-      burger.removeEventListener('mouseleave', mouseLeave)
     }
   }, [])
 
-  const mouseEnter = (event) => {
-    event.preventDefault()
-
-    console.log(sidebar)
-
-    // if (!sidebar) {
-    //   const [b1, b2, b3] = document.querySelectorAll('.block')
-
-    //   b1.classList.remove('w-5')
-    //   b1.classList.add('w-8')
-    //   b3.classList.remove('w-8')
-    //   b3.classList.add('w-5')
-    // }
-  }
-
-  const mouseLeave = (event) => {
-    event.preventDefault()
-
-    console.log(sidebar)
-
-    // if (!sidebar) {
-    //   console.log('mouse leave on burger')
-    //   // if sidebar not enabled -> animate burger
-    //   const [b1, b2, b3] = document.querySelectorAll('.block')
-
-    //   b1.classList.remove('w-8')
-    //   b1.classList.add('w-5')
-    //   b3.classList.remove('w-5')
-    //   b3.classList.add('w-8')
-    // }
-  }
-
   const burgerClick = (event) => {
     event.preventDefault()
     const burger = burgerRef.current
@@ -70,7 +29,7 @@ export default function Navbar() {
   return (
     <div>
       <div className='ease-in duration-500'>{sidebar && <Sidebar />}</div>
-      <div className='relative z-20 w-full h-16 bg-blue-500 drop-shadow-2xl flex justify-center items-center px-10'>
+      <div className='relative z-20 w-full h-16 bg-zinc-900 drop-shadow-2xl flex justify-center items-center px-10'>
         {/* Navbar items */}
         <div className='container flex justify-center items-center lg:max-w-screen-2xl sm:max-w-screen-md max-w-xs'>
           {/* Hamburger and Logo Container */}
@@ -83,14 +42,14 @@ export default function Navbar() {
                 ref={burgerRef}
                 className='space-y-2 rounded-md p-6 hover:cursor-pointer group'
               >
-                <span className='block w-5 group-hover:w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
-                <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
                 <span className='block w-8 group-hover:w-5 h-[0.20rem] bg-white ease-out duration-500'></span>
+                <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
+                <span className='block w-5 group-hover:w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
               </div>
             ) : (
               <div
                 ref={burgerRef}
-                className='p-6 ease-out hover:cursor-pointer hover:animate-spin-slow delay-1000 duration-800'
+                className='p-6 ease-out hover:cursor-pointer hover:animate-spin-slow duration-500'
               >
                 <MdOutlineClose id='exit' className='text-white w-10 h-10' />
               </div>
@@ -101,22 +60,22 @@ export default function Navbar() {
           {/* Links */}
           <div className='container flex justify-center font-prompt text-white md:visible invisible'>
             <Link href='#' passHref>
-              <a className='link px-4 py-2 text-lg  duration-500 ease-in-out hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
+              <a className='link px-4 py-2 text-lg  duration-500 ease-in-out hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
                 Home
               </a>
             </Link>
             <Link href='#' passHref>
-              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
+              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
                 About
               </a>
             </Link>
             <Link href='#' passHref>
-              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
+              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
                 Projects
               </a>
             </Link>
             <Link href='#' passHref>
-              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-slate-600 hover:bg-opacity-50 hover:to-transparent rounded-md'>
+              <a className='link px-4 py-2 text-lg  duration-500 hover:bg-zinc-100 hover:bg-opacity-10 hover:to-transparent rounded-md'>
                 Testimonials
               </a>
             </Link>
diff --git a/components/Sidebar.js b/components/Sidebar.js
index 4fd4b00..6a825f4 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -14,13 +14,13 @@ export default function Sidebar() {
   return (
     <div
       id='wrapper'
-      className='absolute ease-in-out duration-500 z-10 py-32 h-full max-w-screen-sm w-[100%] bg-zinc-900 '
+      className='absolute ease-in-out duration-500 z-10 py-32 h-full max-w-screen-sm w-[100%] bg-zinc-900 bg-opacity-95 backdrop-blur-lg'
     >
       <div className='flex flex-col justify-start items-start pl-[15%] text-white text-4xl font-robo'>
         {items.map((item, key) => (
           <h1
             key={key}
-            className='py-2 hover:font-bold hover:decoration-slice hover:cursor-pointer'
+            className='py-2 ease-in-out hover:font-semibold duration-100 hover:decoration-slice hover:cursor-pointer'
           >
             {item}
           </h1>
diff --git a/pages/index.js b/pages/index.js
index d7b3a7d..fb29487 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,35 +1,16 @@
 import { useSelector } from 'react-redux'
 import Navbar from '../components/Navbar'
 import Card from '../components/Card'
-import Button from '@mui/material/Button'
 import Image from 'next/image'
+import Footer from '../components/Footer'
 import styled, { css } from 'styled-components'
 import img from '../images/hero.jpg'
-import { current } from '@reduxjs/toolkit'
-import Accordion from '../components/Accordion'
-
-// const Button = styled.button`
-//   background: transparent;
-//   border-radius: 3px;
-//   border: 2px solid palevioletred;
-//   color: palevioletred;
-//   margin: 0.5em 1em;
-//   padding: 0.25em 1em;
-
-//   ${(props) =>
-//     props.primary &&
-//     css`=
-//       background: palevioletred;
-//       color: white;
-//     `}
-// `
 
 export default function Home() {
   const theme = useSelector((state) => state.theme.value)
 
   return (
     <div>
-      {/* // bg-[#001325] */}
       <Navbar />
       {/* Hero */}
       <div className='bg-slate-100'>
@@ -46,32 +27,33 @@ export default function Home() {
               help.
             </h1>
 
-            {/* Buttons */}
             <button
               type='button'
               className='btn w-fit gradient-blue gradient-hover ease-out duration-500'
             >
               Contact Us
             </button>
-            {/* end Buttons */}
           </div>
 
-          {/* Image */}
           <div className='rounded-md'>
             <Image src={img} passHref />
           </div>
-          {/* end Image */}
-          {/* end Hero */}
         </div>
       </div>
+      {/* end Hero */}
 
       {/* Content */}
-      <div className='container mx-auto max-w-lg mt-56 px-10 grid gap-6 grid-cols-1 md:grid-cols-2 md:max-w-screen-lg lg:grid-cols-3'>
+      <div className='container mx-auto max-w-lg my-56 px-10 grid gap-6 grid-cols-1 md:grid-cols-2 md:max-w-screen-lg lg:grid-cols-3'>
         <Card text={'Greetings'} />
         <Card text={'Hello'} />
         <Card text={'World'} />
         <Card text={'Goodbye'} />
+        <Card text={'Seeyah'} />
+        <Card text={'Tomrrow'} />
       </div>
+      {/* end Content */}
+
+      <Footer />
     </div>
   )
 }