homepage update (#5)

erujs · Mar 8, 2024 · 13f308c · 13f308c
1 parent 4f8d019
commit 13f308c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 43 deletions.
diff --git a/src/components/eru/eru.jsx b/src/components/eru/eru.jsx
@@ -1,7 +1,7 @@
 export const Eru = () => {
   return (
     <a href="https://github.com/Eru-js" target="_blank">
-      <div className="absolute top-4 right-4 p-2 cursor-pointer border border-solid border-1 border-black dark:border-white">
+      <div className="static md:absolute bottom-4 right-4 p-2 cursor-pointer border border-solid border-1 border-black dark:border-white transform hover:scale-105 transition-transform duration-300 ease-in-out">
         <code>dev with ♡ By Eru</code>
       </div>
     </a>

diff --git a/src/components/techstack/techstack.jsx b/src/components/techstack/techstack.jsx
diff --git a/src/pages/animal-list/animalList.jsx b/src/pages/animal-list/animalList.jsx
@@ -65,11 +65,11 @@ const AnimalList = () => {
                   null}
               </div>
             </div>
-            <div className="fixed bottom-0 z-10 w-full bg-teal">
+            <div className="fixed bottom-0 z-10 w-full bg-teal transition-all duration-300 ease-in-out">
               <Link to="/" className="flex-1">
                 <button
                   type="button"
-                  className="group h-16 w-full block hover:bg-red-400"
+                  className="group h-16 w-full block hover:bg-red-400 transition-all duration-300 ease-in-out"
                 >
                   <HomeIcon className="group-hover:hidden center w-6 h-6 mb-2 mx-auto" />
                   <p className="hidden group-hover:block text-teal-600 font-bold">HOME</p>

diff --git a/src/pages/animal/animal.jsx b/src/pages/animal/animal.jsx
@@ -72,11 +72,11 @@ const AnimalView = () => {
                 <div className="mt-4">{renderDetails()}</div>
               </div>
             </div>
-            <footer className="fixed bottom-0 z-10 w-full bg-teal flex h-16 items-center">
+            <footer className="fixed bottom-0 z-10 w-full bg-teal flex h-16 items-center transition-all duration-300 ease-in-out">
               <Link to="/" className="flex-1">
                 <button
                   type="button"
-                  className="group w-full block h-16 hover:bg-red-400"
+                  className="group w-full block h-16 hover:bg-red-400 transition-all duration-300 ease-in-out"
                 >
                   <HomeIcon className="group-hover:hidden center w-6 h-6 mb-2 mx-auto" />
                   <p className="hidden group-hover:block">HOME</p>
@@ -85,7 +85,7 @@ const AnimalView = () => {
               <Link to={'/' + animal} className="flex-1">
                 <button
                   type="button"
-                  className="group w-full block h-16 hover:bg-red-400"
+                  className="group w-full block h-16 hover:bg-red-400 transition-all duration-300 ease-in-out"
                 >
                   <ArrowUturnLeftIcon className="group-hover:hidden w-6 h-6 mb-2 mx-auto" />
                   <p className="hidden group-hover:block">BACK</p>

diff --git a/src/pages/home/home.jsx b/src/pages/home/home.jsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from 'react';
 import { AnimalContext } from '../../contexts/animalContext';
 import { Link } from 'react-router-dom';
 import { Eru } from '../../components/eru/eru';
-import { TechStack } from '../../components/techstack/techstack';
 import { Dog, Cat } from '../../components/svg/svg';
 
 const HomeView = () => {
@@ -14,29 +13,28 @@ const HomeView = () => {
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen p-8 md:p-16 bg-gradient-to-b from-red-400 to-teal-600">
-      <Eru />
-      <TechStack />
-      <div className="container text-gray text-center">
-        <h1 className="text-5xl font-bold mb-6 mt-16 md:mt-0">Welcome to Feles et Canes!</h1>
-        <div className='flex flex-col items-center'>
-          <p className='text-lg mb-4'>Discover adorable dogs and cats, each with delightful descriptions.</p>
-          <p className='text-lg mb-4'>Experience blazing speed – no ruff days here! Faster than a cat chasing a laser pointer!</p>
-          <p className='text-lg mb-4'>Enjoy sleek vibes with no hairballs – modern design as clean as a groomed furball.</p>
+      <div className="container text-gray text-center flex flex-col gap-8">
+        <h1 className="text-5xl font-bold">Welcome to Feles et Canes!</h1>
+        <p className="text-gray text-center font-bold">Choose an image to start your adventure:</p>
+        <div className="container">
+          <div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0">
+            <Link to={'/cat'} className="group flex flex-col items-center justify-between">
+              <Cat className={'w-[16rem] h-auto transform hover:scale-105 transition-transform duration-300 ease-in-out'} />
+              <p className="text-center mt-2 text-sm font-semibold text-gray-200 group-hover:text-teal-400">Meet the Feline Friends</p>
+            </Link>
+            <Link to={'/dog'} className="group flex flex-col items-center justify-between">
+              <Dog className={'w-[16rem] h-auto transform hover:scale-105 transition-transform duration-300 ease-in-out'} />
+              <p className="text-center mt-2 text-sm font-semibold text-gray-200 group-hover:text-teal-400">Explore the Canine Companions</p>
+            </Link>
+          </div>
         </div>
-      </div>
-      <div className="container py-4">
-        <p className="text-gray text-center text-lg mb-4">Choose an image to start your adventure:</p>
-        <div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0">
-          <Link to={'/cat'} className="group flex flex-col items-center justify-between">
-            <Cat className={'w-[16rem] h-auto transform hover:scale-105 transition-transform duration-300 ease-in-out'} />
-            <p className="text-center mt-2 text-sm font-semibold text-gray-200 group-hover:text-white">Meet the Feline Friends</p>
-          </Link>
-          <Link to={'/dog'} className="group flex flex-col items-center justify-between">
-            <Dog className={'w-[16rem] h-auto transform hover:scale-105 transition-transform duration-300 ease-in-out'} />
-            <p className="text-center mt-2 text-sm font-semibold text-gray-200 group-hover:text-white">Explore the Canine Companions</p>
-          </Link>
+        <div className='flex gap-2 flex-col mb-8 md:mb-0'>
+          <p className='font-bold'>Discover adorable dogs and cats, each with delightful descriptions.</p>
+          <p className='font-bold'>Experience blazing speed – no ruff days here! Faster than a cat chasing a laser pointer!</p>
+          <p className='font-bold'>Enjoy sleek vibes with no hairballs – modern design as clean as a groomed furball.</p>
         </div>
       </div>
+      <Eru />
     </div>
   );
 };