fix: temp fix footer on both menu

ridhoperdana · Dec 17, 2024 · 690f39e · 690f39e
1 parent 16c1b4a
commit 690f39e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/src/AnimalFacts.jsx b/src/AnimalFacts.jsx
@@ -445,12 +445,19 @@ const AnimalFacts = ({ IsMenuOpen }) => {
             {/* Animal Placeholder */}
             <div
                 id="book-content"
-                className="flex flex-col items-center w-full mb-8"
+                className="flex flex-col items-center w-full"
                 style={{ paddingBottom: '160px' }} // Adjusted bottom padding for the floating section height
             >
                 {randomizedImageUploader.map((animal) => (
                     <Card key={animal.id} animal={animal} cardId={animal.id} />
                 ))}
+                {/* Footer Section */}
+                <footer className="w-full bg-gray-800 text-white text-center py-4 mt-8 p-4">
+                    <p className='text-sm'>
+                        Semua audio diambil dari <a href="https://pixabay.com" className="underline">Pixabay</a> dan gambar hewan dihasilkan oleh AI.
+                    </p>
+                    <p className='text-sm'>Web dibuat oleh <a href="https://ridho.work" className="underline">Ridho Perdana</a></p>
+                </footer>
             </div>
 
             <div

diff --git a/src/AnimalStory.jsx b/src/AnimalStory.jsx
@@ -3,17 +3,38 @@ import React from 'react';
 
 const AnimalStory = () => {
     return (
-        <div style={{
-            backgroundImage: 'url("/background.jpg")',
-            backgroundRepeat: 'repeat',
-            backgroundSize: 'auto',
-        }} className="p-8">
-            <h2 className="text-2xl font-bold mb-4">Cerita Hewan</h2>
-            <p className="text-gray-700">
-                Yuk baca cerita hewan yang terus update setiap hari!
-            </p>
+        <div
+            style={{
+                backgroundImage: 'url("/background.jpg")',
+                backgroundRepeat: 'repeat',
+                backgroundSize: 'auto',
+            }}
+            className="flex flex-col min-h-screen"
+        >
+            <div className="flex-grow p-8">
+                <h2 className="text-2xl font-bold mb-4">Cerita Hewan</h2>
+                <p className="text-gray-700">
+                    Yuk baca cerita hewan yang terus update setiap hari!
+                </p>
+            </div>
+
+            <footer className="w-full bg-gray-800 text-white text-center py-4 p-4">
+                <p className="text-sm">
+                    Semua audio diambil dari{' '}
+                    <a href="https://pixabay.com" className="underline">
+                        Pixabay
+                    </a>{' '}
+                    dan gambar hewan dihasilkan oleh AI.
+                </p>
+                <p className="text-sm">
+                    Web dibuat oleh{' '}
+                    <a href="https://ridho.work" className="underline">
+                        Ridho Perdana
+                    </a>
+                </p>
+            </footer>
         </div>
     );
 };
 
-export default AnimalStory;
+export default AnimalStory;
diff --git a/src/App.jsx b/src/App.jsx
@@ -51,13 +51,6 @@ const App = () => {
                     <Route path="/" element={<AnimalFacts isMenuOpen={isMenuOpen} IsMenuOpen={isMenuOpen} />} />
                     <Route path="/story" element={<AnimalStory />} />
                 </Routes>
-                {/* Footer Section */}
-                <footer className="w-full bg-gray-800 text-white text-center py-4 mt-8 p-4">
-                    <p className='text-sm'>
-                        Semua audio diambil dari <a href="https://pixabay.com" className="underline">Pixabay</a> dan gambar hewan dihasilkan oleh AI.
-                    </p>
-                    <p className='text-sm'>Web dibuat oleh <a href="https://ridho.work" className="underline">Ridho Perdana</a></p>
-                </footer>
             </div>
     );
 };