Move content of assets folder to public folder

src/components/Header.tsx

@@ -1,5 +1,4 @@
 import { FaGithub } from "react-icons/fa6";
-import logo from "../assets/images/logo.png";
 import { GoMute, GoUnmute } from "react-icons/go";
 import { Link } from "react-router-dom";
 
@@ -13,7 +12,7 @@ const Header = ({ mute, handleMuteButton }: Props) => {
     <div className="flex justify-between items-center mx-4 sm:mx-10 gap-4 sm:gap-10 pt-4">
       <div className="rounded-md">
         <Link to="/">
-          <img src={logo} alt="logo" className="w-24 sm:w-20" />
+          <img src="/images/logo.png" alt="logo" className="w-24 sm:w-20" />
         </Link>
         <span className="font-semibold absolute left-1/2 transform -translate-x-1/2 translate-y-10 invisible group-hover:visible bg-white text-black text-sm tracking-widest rounded-md py-1 px-2 whitespace-nowrap">
           Logo

src/hooks/useTicTacToe.ts

@@ -3,16 +3,11 @@ import { useState, useEffect } from "react";
 // @ts-ignore
 import useSound from "use-sound";
 
-import noteHigh from "../assets/audio/note-high.mp3";
-import noteLow from "../assets/audio/note-low.mp3";
-import gameOverSound from "../assets/audio/game-over.mp3";
-import gameOverTieSound from "../assets/audio/game-over-tie.mp3";
-
 import { checkForWinner } from "../utils/tictactok";
 
 /**
  * Custom hook for managing Tic-Tac-Toe game state.
- * 
+ *
  * @param {boolean} mute - Whether to mute game sounds.
  * @param {boolean} isTwoPlayerMode - If true, enables two-player mode; otherwise, one-player mode with a computer.
  * @param {(board: string[]) => number} computerMove - Function to determine computer's move based on current board state.
@@ -36,10 +31,10 @@ export const useTicTacToe = (
   const [ties, setTies] = useState(0);
 
   const soundSettings = { volume: mute ? 0 : 1 };
-  const [playHighNote] = useSound(noteHigh, soundSettings);
-  const [playLowNote] = useSound(noteLow, soundSettings);
-  const [playGameOver] = useSound(gameOverSound, soundSettings);
-  const [playGameOverTie] = useSound(gameOverTieSound, soundSettings);
+  const [playHighNote] = useSound("/audio/note-high.mp3", soundSettings);
+  const [playLowNote] = useSound("/audio/note-low.mp3", soundSettings);
+  const [playGameOver] = useSound("/audio/game-over.mp3", soundSettings);
+  const [playGameOverTie] = useSound("/audio/game-over-tie.mp3", soundSettings);
 
   useEffect(() => {
     if (!isTwoPlayerMode && !isPlayerOneTurn && !gameOver) {
@@ -62,7 +57,7 @@ export const useTicTacToe = (
 
   /**
    * Handles a player's move by updating the board and checking for a winner.
-   * 
+   *
    * @param {number} index - The index of the clicked cell on the board.
    */
   const handleCellClick = (index: number) => {

src/index.css

@@ -5,7 +5,7 @@
 @font-face {
     font-family: 'Woff';
     src: local('Woff'),
-        url('./assets/fonts/font.woff2') format("woff2");
+        url('/fonts/font.woff2') format("woff2");
 }
 
 * {

src/pages/Developer.tsx

@@ -1,6 +1,5 @@
 import Header from "../components/Header";
 import { FaFacebook, FaTwitter, FaLinkedin, FaGithub } from "react-icons/fa";
-import susheel from "../assets/images/susheel.jpeg";
 
 const Developer = () => {
   return (
@@ -18,7 +17,7 @@ const Developer = () => {
             id="developer-image"
           >
             <img
-              src={susheel}
+              src="/images/susheel.jpeg"
               alt="Profile"
               className="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover"
             />

src/pages/FAQ.tsx

@@ -1,18 +1,24 @@
-import React, { useState } from "react";
-
+import React, { useEffect, useState } from "react";
 
 import Header from "../components/Header";
 
 import { FAQQuestionAnswer } from "../types/types";
 
-import { faq_data } from "../assets/json/FAQ.json";
-
 const FAQ: React.FC = () => {
-  const [faq] = useState<FAQQuestionAnswer[]>(faq_data);
+  const [faq, setFaq] = useState<FAQQuestionAnswer[]>([]);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [currentPage, setCurrentPage] = useState<number>(1);
   const itemsPerPage = 5;
 
+  useEffect(() => {
+    fetch("/json/FAQ.json")
+      .then((response) => response.json())
+      .then((data) => {
+        setFaq(data);
+      })
+      .catch((error) => console.error("Error loading FAQ data:", error));
+  }, []);
+
   const toggleAnswer = (index: number) => {
     setActiveIndex(activeIndex === index ? null : index);
   };
@@ -33,7 +39,7 @@ const FAQ: React.FC = () => {
       <Header
         mute={false}
         handleMuteButton={(value: boolean) => {
-          console.log(value)
+          console.log(value);
         }}
       />
       <div className="mt-[1rem]">