image positioning

pages/index.js

@@ -59,20 +59,22 @@ export default function Home() {
         headbold="What level of  hiker are you?"
         headtext="Determining what level of hiker you are can be an important tool when planning future hikes. This hiking level guide will help you plan hikes according to different hike ratings set by various websites like All Trails and Modern Hiker. What type of hiker are you – novice, moderate, advanced moderate, expert, or expert backpacker? "
         headbottom="read more"
+        image="01.png"
       />
       <Element
         headtop="Hiking Essentials"
         headbold="Picking the right Hiking Gear!"
         headtext="The nice thing about beginning hiking is that you don’t really need any special gear, you can probably get away with things you already have.
 Let’s start with clothing. A typical mistake hiking beginners make is wearing jeans and regular clothes, which will get heavy and chafe wif they get sweaty or wet. "
         headbottom="read more"
-        left='"01.png"'
+        left='""'
       />
       <Element
         headtop="where you go is the key"
         headbold="Understand Your Map & Timing"
         headtext="To start, print out the hiking guide and map. If it’s raining, throw them in a Zip-Lock bag. Read over the guide, study the map, and have a good idea of what to expect. I like to know what my next landmark is as I hike. For example, I’ll read the guide and know that say, in a mile, I make a right turn at the junction.."
         headbottom="read more"
+        image="copy.png"
       />
     </>
   );

pages/main.tsx

@@ -7,6 +7,7 @@ export interface ElementProps {
   headtext: string;
   headbottom: string;
   left: boolean;
+image: string
 }
 
 export function Element({
@@ -15,14 +16,15 @@ export function Element({
   headtext,
   headbottom,
   left,
+  image,
 }: ElementProps) {
   return (
     <main className={styles.main}>
       <section className={styles.main_content}>
         <article className={styles.main_content1}>
           {left && (
             <figure className={styles.content_sideimg}>
-              <img src="01.png" alt="" width="400px" />
+              <img src="01 (1).png" alt="" width="400px" />
             </figure>
           )}
           <div className={styles.content_text}>
@@ -44,7 +46,7 @@ export function Element({
           </div>
           {!left && (
             <figure className={styles.content_sideimg}>
-              <img src="01.png" alt="" width="400px" />
+              <img src={image} alt="" width="400px" />
             </figure>
           )}
         </article>