create footer and implement bottom butoms b00tc4mp#99

staff/tatiana-garcia/project/app/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "08fb5e56",
+  "configHash": "99c78be0",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "062eacc2",
+  "optimized": {},
+  "chunks": {}
+}

staff/tatiana-garcia/project/app/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

staff/tatiana-garcia/project/app/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}

staff/tatiana-garcia/project/app/index.jsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 
 import App from './view/App'
 
-//import './index.css'
+import './index.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(<Router><App /></Router>)

staff/tatiana-garcia/project/app/package.json

@@ -15,6 +15,7 @@
     "com": "file:../com",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
@@ -32,4 +33,4 @@
     "tailwindcss": "^3.4.9",
     "vite": "^5.4.0"
   }
-}
+}

staff/tatiana-garcia/project/app/view/home/Footer.jsx

@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import { FaUser } from 'react-icons/fa'
+import { RiHomeHeartFill } from 'react-icons/ri'
+import { GiPawHeart } from 'react-icons/gi'
+import { MdOutlineMail } from "react-icons/md"
+
+import Button from '../library/Button'
+import Container from '../library/Container'
+
+export default function Footer({ onHomeClick, onPetsittersClick, onContactClick, onLoginClick }) {
+    const [activeTab, setActiveTab] = useState('home')
+
+    const handleTabClick = (tabName, clickHandler) => {
+        setActiveTab(tabName)
+        clickHandler()
+    }
+
+    return <footer className="fixed items-center bottom-0 left-0 w-full flex justify-evenly shadow-[0_-1px_1px] bg-white">
+        <Container>
+            <Button onClick={() => handleTabClick('home', onHomeClick)} className={`bg-transparent border-transparent rounded-lg border border-solid p-1 ${activeTab === 'home' ? 'text-purple-500' : 'text-dimgray'}`}>
+                <RiHomeHeartFill size={24} />
+            </Button>
+
+            <Button onClick={() => handleTabClick('petsitters', onPetsittersClick)} className={`bg-transparent border-transparent rounded-lg border border-solid p-1 ${activeTab === 'petsitters' ? 'text-purple-500' : 'text-dimgray'}`}>
+                <GiPawHeart size={24} />
+            </Button>
+
+            <Button onClick={() => handleTabClick('contact', onContactClick)} className={`bg-transparent border-transparent rounded-lg border border-solid p-1 ${activeTab === 'contact' ? 'text-purple-500' : 'text-dimgray'}`}>
+                <MdOutlineMail size={24} />
+            </Button>
+
+            <Button onClick={() => handleTabClick('login', onLoginClick)} className={`bg-transparent border-transparent rounded-lg border border-solid p-1 ${activeTab === 'login' ? 'text-purple-500' : 'text-dimgray'}`}>
+                <FaUser size={24} />
+            </Button>
+        </Container>
+    </footer>
+}

staff/tatiana-garcia/project/app/view/home/Header.jsx

@@ -2,7 +2,6 @@ import logic from '../../logic/index.js'
 
 import Container from '../library/Container.jsx'
 import Button from '../library/Button.jsx'
-import Paragraph from '../library/Paragraph.jsx'
 
 export default function Header({ onLogout }) {
     const handleLogoutClick = () => {
@@ -19,7 +18,6 @@ export default function Header({ onLogout }) {
 
     return <header>
         <Container>
-            <Paragraph>hola mundo</Paragraph>
 
             <Button onClick={handleLogoutClick}>Logout</Button>
         </Container>

staff/tatiana-garcia/project/app/view/home/index.jsx

@@ -1,13 +1,27 @@
+import { Routes, Route, useNavigate } from 'react-router-dom'
+
 import Header from './Header'
 import Heading from '../library/Heading'
+import Footer from './Footer'
 
 export default function Home({ onLogout }) {
+    const navigate = useNavigate()
+
+    const handleHome = () => navigate('/')
+
+    const handlePetsitters = () => navigate('/petsitters')
+
+    const handleContact = () => navigate('/contact')
+
+    const hadleLogin = () => navigate('/login')
 
     return <>
         <Header onLogout={onLogout}></Header>
 
-        <main>
+        <main className='bg-teal-100 h-screen'>
             <Heading>Exoticus</Heading>
         </main>
+
+        <Footer onHomeClick={handleHome} onPetsittersClick={handlePetsitters} onContactClick={handleContact} onLoginClick={hadleLogin} />
     </>
 }