ok banget

src/pages/WelcomePage.js

@@ -1,5 +1,5 @@
 // WelcomePage.js
-import React from "react";
+import React,{useRef} from "react";
 import "./WelcomePage.css";
 
 const WelcomePage = ({
@@ -9,7 +9,12 @@ const WelcomePage = ({
   welcomingText,
   backgroundColor,
   textColor,
+  onImageChange
 }) => {
+  const fileInputRef = useRef(null);
+  const handleImageClick = () => {
+    fileInputRef.current.click();
+  };
   return (
     <div
       className={`welcome-page ${isFullscreen ? "fullscreen" : ""}`} // Corrected the className syntax
@@ -19,11 +24,20 @@ const WelcomePage = ({
     >
       <div
         style={{
-          backgroundColor: image ? "transparent" : "black",
+          backgroundColor: image ? "transparent" : "black",position:'relative'
         }}
         className="image-container"
       >
-        {image && <img src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
+        {!isFullscreen &&
+        <div onClick={handleImageClick} style={{width: '100%', height: '100%', position:'absolute'}}>
+          <h1 style={{textAlign:'left'}}>
+            {image ? "Click To Change Image" : "Click To Add Image"}
+          </h1>
+          <input 
+            ref={fileInputRef} style={{display: 'none', width:'100%', height: '100%'}}type="file" accept="image/*" onChange={onImageChange} />
+        </div>
+        }
+        {image && <img  src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
       </div>
       <h1 className="welcoming-text" style={{ color: textColor }}>
         {welcomingText}