Merge pull request #42 from saadgibawa/main

Added Gallery Page for Mobile

Frontend/src/Components/GalleryModule/Gallery.jsx

@@ -42,7 +42,7 @@ const Gallery = () => {
                         <Route path="mobile" element={<Mobile />} />
                         <Route path="tablet" element={<Tablet />} />
                         <Route path="desktop" element={<Desktop />} />
-                        <Route path="" element={<Navigate to="desktop" replace />} />
+                        <Route path="" element={<Navigate to="mobile" replace />} />
                     </Routes>
                 </div>
             </div>

Frontend/src/Components/GalleryModule/MobileSection/ImgCardsMobile/ImgCard.jsx

@@ -0,0 +1,31 @@
+import Save from "/Save.svg";
+import Heart from "/Heart.svg";
+import DownloadBtn from "/DownloadButton.svg";
+import Style from "./ImgCard.module.css";
+
+const ImgCard = ({ imageSrc }) => {
+    return (
+        <div className={Style.imgCard}>
+            <div className={Style.icons}>
+                <img src={Save} alt="Save" className={Style.save} />
+                <img src={Heart} alt="Heart" className={Style.heart} />
+            </div>
+
+            <div className={Style.imageContainer}>
+                <img src={imageSrc} alt="img" className={Style.image} />
+
+                <span className={Style.username}>@Img User1</span>
+            </div>
+
+            <div className={Style.bottomBar}>
+                <img
+                    src={DownloadBtn}
+                    alt="Download Button"
+                    className={Style.downloadBtn}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ImgCard;

Frontend/src/Components/GalleryModule/MobileSection/ImgCardsMobile/ImgCard.module.css

@@ -0,0 +1,76 @@
+.imageContainer {
+    position: relative; 
+    display: inline-block;
+    width: 100%; 
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.image {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.icons {
+    display: flex;
+    position: absolute;
+    margin: 0.9%;
+    justify-content: end;
+    align-items: center;
+    gap: 7vw;
+    opacity: 50%;
+    z-index: 10;
+}
+
+.heart, .save {
+    transition: transform 0.2s ease;
+    cursor: pointer;
+    width: 1.8vw;
+}
+
+.downloadBtn {
+    transition: transform 0.2s ease;
+    cursor: pointer;
+    width: 80%;  
+}
+
+.heart:hover, .save:hover, .downloadBtn:hover {
+    transform: scale(1.1);
+}
+
+.bottomBar {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.userInfo {
+    display: flex;
+    position: relative;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.username {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 10;
+    font-size: 0.9vw; 
+    color: #808080;
+}
+
+/* Media query for responsiveness */
+@media (max-width: 768px) {
+    .icons {
+        gap: 4vw;  /* Adjust the gap for smaller screens */
+    }
+    .heart, .save {
+        width: 8 vw; /* Adjust the icon size for smaller screens */
+    }
+}

Frontend/src/Components/GalleryModule/MobileSection/Mobile.jsx

@@ -1,10 +1,36 @@
+import ImgCard from "./ImgCardsMobile/ImgCard";
+import img1 from "./MobileAssets/mobile_wallpaper1.png";
+import img2 from "./MobileAssets/mobile_wallpaper2.png";
+import img3 from "./MobileAssets/mobile_wallpaper3.png";
+import img4 from "./MobileAssets/mobile_wallpaper4.png";
+import img5 from "./MobileAssets/mobile_wallpaper5.png";
+import img6 from "./MobileAssets/mobile_wallpaper6.png";
+import img7 from "./MobileAssets/mobile_wallpaper7.png";
+import img8 from "./MobileAssets/mobile_wallpaper8.png";
+import img9 from "./MobileAssets/mobile_wallpaper9.png";
+import img10 from "./MobileAssets/mobile_wallpaper10.png";
 import Styles from "./Mobile.module.css";
 
 const Mobile = () => {
     return (
-        <div className={Styles.gallery}>
-            <h2>Mobile Devices</h2>
+        <div className={Styles.MobileGrid}>
+            <div className={Styles.imgCards}>
+                <ImgCard imageSrc={img1} />
+                <ImgCard imageSrc={img2} />
+                <ImgCard imageSrc={img3} />
+                <ImgCard imageSrc={img4} />
+                <ImgCard imageSrc={img5} />
+            </div>
+            <div className={Styles.imgCards}>
+                <ImgCard imageSrc={img6} />
+                <ImgCard imageSrc={img7} />
+                <ImgCard imageSrc={img8} />
+                <ImgCard imageSrc={img9} />
+                <ImgCard imageSrc={img10} />
+            </div>
+
         </div>
+
     );
 };
 export default Mobile;

Frontend/src/Components/GalleryModule/MobileSection/Mobile.module.css

@@ -17,5 +17,5 @@ body {
     display: flex;
     justify-content: space-around;
     margin-bottom: 3%;
-    gap: 3.5%;
+    gap: 5%;
 }