refactor: move images from public to assets folder

index.html

@@ -8,7 +8,7 @@
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="./images/favicon-32x32.png"
+      href="./src/assets/images/favicon-32x32.png"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/App.tsx

@@ -1,17 +1,20 @@
 import AppHeader from "./components/appHeader/AppHeader";
 import MainSection from "./components/mainSection/MainSection";
 
+import MobileHeroImg from "./assets/images/image-hero-mobile.jpg";
+import DesktopHeroImg from "./assets/images/image-hero-desktop.jpg";
+
 const App = () => {
   return (
     <div className="relative">
       <img
         className="tablet:hidden"
-        src="./images/image-hero-mobile.jpg"
+        src={MobileHeroImg}
         title="mobile hero image"
       />
       <img
         className="hidden tablet:block"
-        src="./images/image-hero-desktop.jpg"
+        src={DesktopHeroImg}
         title="desktop hero image"
       />
 

src/components/appHeader/AppHeader.tsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import Navbar from "./Navbar";
 
+import HamburgerMenuIcon from "../../assets/images/icon-hamburger.svg";
+import CloseMenuIcon from "../../assets/images/icon-close-menu.svg";
+
 const AppHeader = () => {
   const [showMobileNav, setShowMobileNav] = useState(false);
 
@@ -9,10 +12,10 @@ const AppHeader = () => {
     let alt;
 
     if (showMobileNav) {
-      src = "./images/icon-close-menu.svg";
+      src = CloseMenuIcon;
       alt = "close nav menu icon";
     } else {
-      src = "./images/icon-hamburger.svg";
+      src = HamburgerMenuIcon;
       alt = "open nav menu icon";
     }
     return (

src/components/mainSection/CallToAction.tsx

@@ -4,6 +4,8 @@ import { inventoryStockType } from "./MainSection";
 import PledgeModal from "./pledgeModal/PledgeModal";
 
 import { PledgeRewards } from "../../constants/enums";
+import MasterCraftLogo from "../../assets/images/logo-mastercraft.svg";
+import BookmarkIcon from "../../assets/images/icon-bookmark.svg";
 
 type CallToActionProps = {
   inventoryStock: inventoryStockType;
@@ -20,7 +22,7 @@ const CallToAction = ({ inventoryStock, makePledgeFor }: CallToActionProps) => {
       tablet:pt-[3.75rem] tablet:px-11"
     >
       <img
-        src="./images/logo-mastercraft.svg"
+        src={MasterCraftLogo}
         title="mastercraft logo"
         className="absolute top-[-28px]"
       />
@@ -48,7 +50,7 @@ const CallToAction = ({ inventoryStock, makePledgeFor }: CallToActionProps) => {
             {isBookmarked ? "Bookmarked" : "Bookmark"}
           </div>
           <img
-            src="./images/icon-bookmark.svg"
+            src={BookmarkIcon}
             title="bookmark icon"
             className="block tablet:absolute tablet:top-0"
           />

src/components/mainSection/pledgeModal/PledgeConfirmationModal.tsx

@@ -1,4 +1,5 @@
 import { HashLoader } from "react-spinners";
+import CheckmarkIcon from "../../../assets/images/icon-check.svg";
 
 type PledgeConfirmationProps = {
   isLoading: boolean;
@@ -19,7 +20,7 @@ const PledgeConfirmationModal = ({
         ) : (
           <>
             <div className="flex flex-col gap-y-5 items-center">
-              <img src="./images/icon-check.svg" alt="check logo" />
+              <img src={CheckmarkIcon} alt="check logo" />
               <p className="text-4 font-bold">Thanks for your support!</p>
               <p className="leading-6 text-5 text-neutral-2">
                 Your pledge brings us one step closer to sharing Mastercraft

src/components/mainSection/pledgeModal/PledgeModal.tsx

@@ -5,6 +5,7 @@ import PledgeConfirmationModal from "./PledgeConfirmationModal";
 import PledgeModalOption from "./PledgeModalOption";
 
 import { PledgeRewards, pledgeOptions } from "../../../constants/enums";
+import CloseModalIcon from "../../../assets/images/icon-close-modal.svg";
 
 type PledgeModalProps = {
   defaultSelected?: PledgeRewards;
@@ -60,10 +61,7 @@ const PledgeModal = ({
             <div className="flex items-center justify-between">
               <h2 className="text-4 font-bold">Back this project</h2>
               <button type="button" onClick={closeModal}>
-                <img
-                  src="./images/icon-close-modal.svg"
-                  alt="close modal icon"
-                />
+                <img src={CloseModalIcon} alt="close modal icon" />
               </button>
             </div>