slicing layout

frontend/src/App.js

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import "./index.css";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Tentang from "./components/Tentang";
+import KategoriRating from "./components/KategoriRating";
 import PopUp from "./components/PopUp";
 
 const questions = [
@@ -78,10 +81,14 @@ const App = () => {
     };
 
     return (
-        <div className="flex items-center justify-center min-h-screen bg-gray-100 relative">
+        <div>
-            <div className="w-full max-w-lg bg-white p-6 rounded-lg shadow-md text-center relative">
+            <Header/>
-                <h1 className="text-2xl font-bold">Rating Umur Game</h1>
+                <div className="h-screen w-full bg-cover bg-center bg-no-repeat bg-black bg-opacity-50 flex items-center justify-center" 
-
+                        style={{ backgroundImage: "url('/images/bgwebrating.png')", backgroundSize: "105%" }}>
+                    <div className={`w-full max-w-lg p-6 text-center relative ${step > 0 || rating ? 'bg-white rounded-lg shadow-md' : ''}`}>
+                        {step === 0 && !rating && (
+                            <h1 className="text-6xl text-white text-2xl text-left font-bold ">Rating Umur Game</h1>
+                        )}
                         {/* Tombol kembali hanya muncul saat berada di pertanyaan */}
                         {step > 0 && step <= questions.length && (
                         <div className="absolute top-4 right-4 flex space-x-2">
@@ -107,15 +114,14 @@ const App = () => {
                         </div>
                         )}
 
-
                         {!rating && step === 0 && (
                         <>
-                        <p className="mt-4">Masukkan nama game:</p>
+                            <p className="mt-4 text-left text-white">Masukkan nama game:</p>
                             <input 
                             type="text" 
                             value={gameName} 
                             onChange={(e) => setGameName(e.target.value)} 
-                            className="border border-gray-600 bg-gray-100 p-2 w-full mt-2 focus:bg-gray-200 focus:border-black rounded mt-6"
+                            className="border border-gray-600 bg-gray-100 p-2 w-full mt-2 focus:bg-gray-200 focus:border-black rounded mt-1"
                             />
                             <button 
                             onClick={checkGame} 
@@ -224,6 +230,10 @@ const App = () => {
                         />
                     </div>
                  </div>
+                <Tentang />
+                <KategoriRating />
+            <Footer />
+        </div>
     );
 };
 

frontend/src/components/Footer.js

@@ -0,0 +1,30 @@
+import react from "react";
+
+const Footer = () => {
+    return (
+        <div className="bg-black p-4 text-center text-white">
+          <p>&copy; 2023 Rating Umur Game. All rights reserved.</p>
+          <p>
+            Developed by <a href="#" className="text-white hover:text-white">Dimas Adi</a>
+          </p>
+          <ul className="flex justify-center mb-4">
+            <li className="mr-4">
+              <a href="#" className="text-white hover:text-white">
+                <i className="fab fa-facebook-f"></i>
+              </a>
+            </li>
+            <li className="mr-4">
+              <a href="#" className="text-white hover:text-white">
+                <i className="fab fa-twitter"></i>
+              </a>
+            </li>
+            <li>
+              <a href="#" className="text-white hover:text-white">
+                <i className="fab fa-instagram"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      );
+    };
+export default Footer;

frontend/src/components/Header.js

@@ -0,0 +1,30 @@
+import react from "react";
+
+const Header = () => {
+    return (
+        <div className="bg-yellow-500 text-white p-4 flex justify-between">
+          <h1 className="text-3xl font-bold"></h1>
+          <nav>
+            <ul className="flex justify-end">
+              <li className="mr-4">
+                <a href="#" className="text-white hover:text-gray-300">
+                  Beranda
+                </a>
+              </li>
+              <li className="mr-4">
+                <a href="#" className="text-white hover:text-gray-300">
+                  Tentang
+                </a>
+              </li>
+              <li>
+                <a href="#" className="text-white hover:text-gray-300">
+                  Kontak
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      );
+    };
+    
+export default Header;

frontend/src/components/KategoriRating.js

@@ -0,0 +1,12 @@
+import react from "react";
+
+const KategoriRating = () => {
+    return (
+        <div className="bg-yellow-500 w-full h-[400px] mt-10 mb-10 p-10">   
+        
+            <h1 className="text-1xl text-left ">Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu</h1>
+        </div>
+    );
+};
+
+export default KategoriRating

frontend/src/components/Tentang.js

@@ -0,0 +1,12 @@
+import react from "react";
+
+const Tentang = () => {
+    return (
+        <div className="bg-[#BBBBBB] mb-8 p-5 text-black text-center w-full h-[230px]">    
+            <h1 className="text-3xl font-bold mt-4">Tentang</h1>
+            <h1 className="text-1xl mb-4">Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu</h1>
+        </div>
+    );
+};
+
+export default Tentang;