menambahakan fitur autocmplate

dan juga menambahkan pemanis bg2

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect  } from "react";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Tentang from "./components/Tentang";
@@ -32,6 +32,7 @@ const ratingDescriptions = {
 
 const App = () => {
     const [gameName, setGameName] = useState("");
+    const [suggestions, setSuggestions] = useState([]);
     const [step, setStep] = useState(0);
     const [answers, setAnswers] = useState([]);
     const [rating, setRating] = useState(null);
@@ -39,6 +40,22 @@ const App = () => {
     const [isConfirmPopupOpen, setIsConfirmPopupOpen] = useState(false);
     const [selectedOption, setSelectedOption] = useState("");
 
+    useEffect(() => {
+        if (gameName.length > 1) {
+            fetch(`http://127.0.0.1:5000/autocomplete?query=${gameName}`)
+                .then(res => res.json())
+                .then(data => setSuggestions(data.slice(0, 4)))
+                .catch(err => console.error("Error fetching autocomplete:", err));
+        } else {
+            setSuggestions([]);
+        }
+    }, [gameName]);
+
+    const handleSelectGame = (selectedGame) => {
+        setGameName(selectedGame);
+        setSuggestions([]);
+    };
+
     const checkGame = async () => {
         const response = await fetch("http://127.0.0.1:5000/check_game", {
             method: "POST",
@@ -122,6 +139,19 @@ const App = () => {
                             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-1"
                             />
+                            {suggestions.length > 0 && (
+                                <ul className="border border-gray-600 bg-gray-100 w-full mt-2 focus:bg-gray-200 focus:border-black rounded text-left">
+                                    {suggestions.map((suggestion, index) => (
+                                        <li 
+                                            key={index} 
+                                            className="p-2 cursor-pointer hover:bg-gray-300"
+                                            onClick={() => handleSelectGame(suggestion)}
+                                        >
+                                            {suggestion}
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
                             <button 
                             onClick={checkGame} 
                             className="bg-blue-500 text-white px-4 py-2 rounded mt-4"

frontend/src/components/KategoriRating.js

@@ -18,19 +18,31 @@ const KategoriRating = () => {
     setCurrentIndex((prevIndex) => (prevIndex - 1 + cards.length) % cards.length);
   };
   return (
-    <div className="bg-yellow-500 mt-[90px] mb-10 w-full h-[400px] flex items-center p-10 relative">
+    <div className="relative mt-[90px] mb-10 w-full h-[500px] flex items-center p-10">
+        <div 
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: "url('/images/bg2.jpg')" }}
+        ></div>
+        <div className="absolute inset-0 bg-yellow-500 opacity-85"></div>
+
+        {/* Konten utama */}
+        <div className="relative flex w-full h-full items-center justify-between p-10">
           {/* Teks di sebelah kiri */}
           <div className="w-1/2 pr-5">
-        <p className="text-black text-3xl">
+            <p className="text-black text-bold text-3xl">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
-          turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec
+              molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla
-          fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus
+              accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
-          elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus.
+              Maecenas eget condimentum velit, sit amet feugiat lectusLorem ipsum dolor 
-          Class aptent taciti sociosqu ad litora torquent per conubia.
+              sit amet, consectetur adipiscing elit. Etiam eu turpismolestie, dictum est 
+              a, mattis tellus. Sed dignissim, metus nec fringillaaccumsan, risus sem 
+              sollicitudin lacus,ut interdum tellus elit sed risus.amet feugiat
+               
             </p>
           </div>
+
           {/* Kotak putih sejajar kiri-kanan dengan efek flip */}
-      <div className="w-1/2 flex flex-col items-end gap-5">
+          <div className="w-1/2 flex flex-col items-end gap-5 relative">
             <div className="flex gap-5 overflow-hidden w-[500px]">
               {cards.slice(currentIndex, currentIndex + 2).map((card, index) => (
                 <FlipCard key={index} imageUrl={card.imageUrl} text={card.text} />
@@ -42,6 +54,8 @@ const KategoriRating = () => {
             </div>
           </div>
         </div>
+      </div>
+
   );
 };