feat module 5 : add store locator above footer section

src/pages/Home.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { Box, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import Grid from '@mui/material/Grid2';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
 import CarouselContainer from '../components/CarouselContainer'
 import ProductSelected from '../components/ProductSelected'
-import SocialMedia from '../components/SocialMedia'
+// import SocialMedia from '../components/SocialMedia'
 // import Feature from '../components/Feature'
-import { Link } from '@mui/material'
+// import { Link } from '@mui/material'
 import VideoAds from '../components/VideoAds'
 import ProductType from '../components/ProductType';
 // import NewsLetter from '../components/NewsLetter';
@@ -14,6 +15,25 @@ import AmberHomeWallpaper from "../assets/images/amberHomeWallpaper.webp";
 import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.webp";
 import AmberClothing from "../assets/images/MAINHEADER-13.webp"
 
+const stores = [
+  {
+    // name: "AMBER IOI STORE",
+    // address: "IOI City Mall",
+    name: "IOI CITY MALL",
+    address: "G-67 IOI CITY MALL, PUTRAJAYA",
+    image: "/AMBERIOISTORE.jpeg",
+    directionUrl: "https://www.google.com/maps/search/?api=1&query=IOI%20City%20Mall%20Putrajaya"
+  },
+  {
+    // name: "AMBER SWM STORE",
+    // address: "Wangsa Walk Mall",
+    name: "WANGSA WALK MALL",
+    address: "LOT G-77, WANGSA WALK MALL, KUALA LUMPUR",
+    image: "/AMBERSWMSTORE.jpeg",
+    directionUrl: "https://www.google.com/maps/search/?api=1&query=AMBER%20Wangsa%20Walk%20Mall"
+  }
+]
+
 const Home = () => {
 
   React.useEffect(()=>{
@@ -79,6 +99,148 @@ const Home = () => {
         {/*
         <Feature />
         */}
+
+        <Box id="find-us" sx={{ textAlign: "center", mt: 6 }}>
+          <Typography
+            component="a"
+            href="#find-us"
+            variant="body1"
+            sx={{
+              color: "inherit",
+              display: "inline-block",
+              fontWeight: "400",
+              fontSize: "1rem",
+              mb: 4,
+              letterSpacing: 0,
+              textDecoration: "none",
+              textTransform: "uppercase"
+            }}
+          >
+            FIND US
+          </Typography>
+
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              maxWidth: 1200,
+              mx: "auto"
+            }}
+          >
+            {stores.map(({ name, address, image, directionUrl }) => (
+              <Grid key={name} size={{ xs: 12, md: 6 }}>
+                <Box
+                  sx={{
+                    position: "relative",
+                    height: {
+                      xs: 280,
+                      sm: 360,
+                      md: 400
+                    },
+                    overflow: "hidden",
+                    borderRadius: "4px",
+                    textAlign: "left",
+                    "&:hover .store-image": {
+                      transform: "scale(1.06)"
+                    }
+                  }}
+                >
+                  <Box
+                    className="store-image"
+                    sx={{
+                      position: "absolute",
+                      inset: 0,
+                      backgroundImage: `url("${image}")`,
+                      backgroundSize: "cover",
+                      backgroundPosition: "center",
+                      transition: "transform 550ms ease",
+                      transform: "scale(1)"
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      inset: 0,
+                      background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%)"
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      left: {
+                        xs: 8,
+                        md: 9
+                      },
+                      right: {
+                        xs: 3,
+                        md: 4
+                      },
+                      bottom: {
+                        xs: 8,
+                        md: 9
+                      },
+                      color: "#FFF"
+                    }}
+                  >
+                    <Typography
+                      variant="h4"
+                      sx={{
+                        fontWeight: "700",
+                        mb: 0.5,
+                        textTransform: "uppercase",
+                        fontSize: {
+                          xs: "1.45rem",
+                          md: "1.65rem"
+                        },
+                        lineHeight: 1.1,
+                        textShadow: "0 1px 8px rgba(0,0,0,0.55)"
+                      }}
+                    >
+                      {name}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        fontWeight: "400",
+                        mb: 2,
+                        textTransform: "uppercase",
+                        fontSize: {
+                          xs: "0.8rem",
+                          md: "0.9rem"
+                        },
+                        textShadow: "0 1px 8px rgba(0,0,0,0.55)"
+                      }}
+                    >
+                      {address}
+                    </Typography>
+                    <Button
+                      href={directionUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      variant="contained"
+                      sx={{
+                        backgroundColor: "#000",
+                        color: "#FFF",
+                        textTransform: "none",
+                        borderRadius: "4px",
+                        minHeight: 38,
+                        px: 2,
+                        fontWeight: "700",
+                        fontSize: "0.875rem",
+                        "&:hover": {
+                          backgroundColor: "#222"
+                        }
+                      }}
+                      startIcon={<LocationOnIcon />}
+                    >
+                      Directions
+                    </Button>
+                  </Box>
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
       </Box>