Update home slider

client/src/app/components/DarkModeSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
-import styles from '../styles/DarkModeSwitch.module.css';
+import styles from '../../styles/DarkModeSwitch.module.css';
 
 interface Props {
   toggleDarkMode: () => void;

client/src/pages/index.tsx

@@ -1,55 +1,53 @@
 import { Box, Typography } from '@mui/material';
 import Slider from 'react-slick';
 import Image from 'next/image';
+import styles from '../styles/HomePage.module.css';
+
+const images = [
+  {
+    src: '/images/snow1.jpg',
+    alt: 'snow1'
+  },
+  {
+    src: '/images/snow2.jpg',
+    alt: 'snow2'
+  },
+  {
+    src: '/images/snow3.jpg',
+    alt: 'snow3'
+  },
+  {
+    src: '/images/snow4.jpg',
+    alt: 'snow4'
+  }
+];
 
 export default function HomePage() {
   return (
-    <>
+    <div className={styles.HomePage}>
       <Slider
         arrows={false}
         dots
         infinite
-        speed={500}
+        speed={1500}
         slidesToShow={1}
         slidesToScroll={1}
+        className={styles.Slider}
+        autoplay
+        autoplaySpeed={2500}
       >
-        <>
-          <Box display="flex" justifyContent="center">
-            <Image
-              src="/images/hero1.jpg"
-              alt="hero"
-              width={800}
-              height={400}
-            />
-          </Box>
-        </>
-
-        <>
-          <Box display="flex" justifyContent="center">
-            <Image
-              src="/images/hero2.jpg"
-              alt="hero"
-              width={800}
-              height={400}
-            />
-          </Box>
-        </>
-
-        <>
-          <Box display="flex" justifyContent="center">
-            <Image
-              src="/images/hero3.jpg"
-              alt="hero"
-              width={800}
-              height={400}
-            />
-          </Box>
-        </>
+        {images.map(img => (
+          <div key={img.alt} className={styles.ImageContainer}>
+            <Image className={styles.Image} src={img.src} alt={img.alt} fill />
+          </div>
+        ))}
       </Slider>
 
       <Box display="flex" justifyContent="center" sx={{ p: 4, mt: 2 }}>
-        <Typography variant="h1">Welcome to the shop!</Typography>
+        <Typography variant="h1" fontSize={60}>
+          Welcome to the shop!
+        </Typography>
       </Box>
-    </>
+    </div>
   );
 }

client/src/styles/HomePage.module.css

@@ -0,0 +1,16 @@
+.HomePage {
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.Slider .ImageContainer {
+  height: 465px;
+  position: relative;
+}
+
+.Slider .ImageContainer img {
+  max-width: 2000px;
+  margin: 0 auto;
+  object-fit: cover;
+}