Updated directory structure

src/App.jsx

@@ -1,9 +1,9 @@
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 import './style.css';
 import Loader from './components/Loader.jsx';
-const Header = lazy(() => import('./components/Header.jsx'));
-const MainSection = lazy(() => import('./components/MainSection.jsx'));
-const Footer = lazy(() => import('./components/Footer.jsx'));
+const Header = lazy(() => import('./components/header/Header.jsx'));
+const MainSection = lazy(() => import('./components/main/MainSection.jsx'));
+const Footer = lazy(() => import('./components/footer/Footer.jsx'));
 
 export default function App() {
 

src/components/Footer.jsx → src/components/footer/Footer.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import xDark from '../images/x-twitter-dark.svg';
-import xLight from '../images/x-twitter-light.svg';
-import linkedinDark from '../images/linkedin-dark.svg';
-import linkedinLight from '../images/linkedin-light.svg';
-import githubDark from '../images/github-dark.svg';
-import githubLight from '../images/github-light.svg';
+import xDark from '../../images/x-twitter-dark.svg';
+import xLight from '../../images/x-twitter-light.svg';
+import linkedinDark from '../../images/linkedin-dark.svg';
+import linkedinLight from '../../images/linkedin-light.svg';
+import githubDark from '../../images/github-dark.svg';
+import githubLight from '../../images/github-light.svg';
 
 export default function Footer({ theme }) {
 

src/components/Header.jsx → src/components/header/Header.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import photo from '../images/photo.jpeg';
-import iconSun from '../images/icon-sun.svg';
-import iconMoon from '../images/icon-moon.svg';
+import photo from '../../images/photo.jpeg';
+import iconSun from '../../images/icon-sun.svg';
+import iconMoon from '../../images/icon-moon.svg';
 
 export default function Header({theme, changeTheme}) {
 

src/components/History.jsx → src/components/history/History.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 import { Link } from 'react-router-dom';
 
 export default function History() {

src/components/MainSection.jsx → src/components/main/MainSection.jsx

@@ -1,17 +1,17 @@
 import React, { Suspense, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import searchDark from '../images/search-dark.svg';
-import searchLight from '../images/search-light.svg';
-import historyDark from '../images/clock-rotate-left-dark.svg';
-import historyLight from '../images/clock-rotate-left-light.svg';
-import houseDark from '../images/house-dark.svg';
-import houseLight from '../images/house-light.svg';
-import xMarkDark from '../images/xmark-dark.svg';
-import xMarkLight from '../images/xmark-light.svg';
-import { WordDataContextProvider } from '../contexts/WordDataContext.jsx';
+import searchDark from '../../images/search-dark.svg';
+import searchLight from '../../images/search-light.svg';
+import historyDark from '../../images/clock-rotate-left-dark.svg';
+import historyLight from '../../images/clock-rotate-left-light.svg';
+import houseDark from '../../images/house-dark.svg';
+import houseLight from '../../images/house-light.svg';
+import xMarkDark from '../../images/xmark-dark.svg';
+import xMarkLight from '../../images/xmark-light.svg';
+import { WordDataContextProvider } from '../../contexts/WordDataContext.jsx';
 import NavLinks from './NavLinks.jsx';
-import Loader from './Loader.jsx';
+import Loader from '../Loader.jsx';
 
 export default function MainSection({ theme, userData, setUserData }) {
 

src/components/NavLinks.jsx → src/components/main/NavLinks.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 
 export default function NavLinks() {
 

src/components/Input.jsx → src/components/search/Input.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext.jsx';
+import { useWordDataContext } from '../../contexts/WordDataContext.jsx';
 
 export default function Input() {
 

src/components/Search.jsx → src/components/search/Search.jsx

@@ -1,10 +1,10 @@
 import React, { lazy, Suspense, useCallback, useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext.jsx';
+import { useWordDataContext } from '../../contexts/WordDataContext.jsx';
 const Input = lazy(() => import('./Input.jsx'));
 const WordResult = lazy(() => import('./WordResult.jsx'));
-const NotFoundError = lazy(() => import('./NotFoundError.jsx'));
-import Loader from './Loader.jsx';
+const NotFoundError = lazy(() => import('../error/NotFoundError.jsx'));
+import Loader from '../Loader.jsx';
 
 export default function Search() {
 

src/components/WelcomeScreen.jsx → src/components/welcomeScreen/WelcomeScreen.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { useWordDataContext } from '../contexts/WordDataContext';
+import { useWordDataContext } from '../../contexts/WordDataContext';
 
 export default function WelcomeScreen() {
 
@@ -9,7 +9,7 @@ export default function WelcomeScreen() {
     // Home state is active when this component is rendered.
     useEffect(() => {
         setHomeLinkActive(true);
-    })
+    });
 
     // Array of objects for initial word cards.
     const wordCards = [

src/main.jsx

@@ -2,9 +2,9 @@ import React, { lazy } from 'react';
 import ReactDOM from 'react-dom/client';
 import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
 import App from './App.jsx';
-const History = lazy(() => import('./components/History.jsx'));
-const WelcomeScreen = lazy(() => import('./components/WelcomeScreen.jsx'));
-const Search = lazy(() => import('./components/Search.jsx'));
+const History = lazy(() => import('./components/history/History.jsx'));
+const WelcomeScreen = lazy(() => import('./components/welcomeScreen/WelcomeScreen.jsx'));
+const Search = lazy(() => import('./components/search/Search.jsx'));
 
 const router = createBrowserRouter(
   createRoutesFromElements(