refactor: make slider of home page fullWidth

src/app/[locale]/(main)/(container)/layout.tsx

@@ -11,20 +11,21 @@ const Layout: FC<Layout> = async ({ children }) => {
   return (
     <>
       <MobileView>
-        <Box
+        <Container
+          maxWidth="xl"
           sx={{
+            mt: 3,
             paddingBottom: MOBILE_FOOTER_HEIGHT,
           }}
         >
           {children}
-        </Box>
+        </Container>
       </MobileView>
       <DesktopView>
         <Container
           maxWidth="xl"
           sx={{
             mt: 3,
-            pb: { xs: `${MOBILE_FOOTER_HEIGHT}px`, md: 0 },
             minHeight: '70vh',
           }}
         >

src/app/[locale]/(main)/(container)/(homepage)/components/MainCategories.tsx → src/app/[locale]/(main)/(homepage)/components/MainCategories.tsx

@@ -4,7 +4,7 @@ import { ChevronLeft } from '@mui/icons-material';
 import { Box, Grid, Link, Stack } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import React, { FC } from 'react';
-import Image from '../../../../../../components/common/Image';
+import Image from '@/components/common/Image';
 
 export interface IMainCategory {
   id: number | string;

src/app/[locale]/(main)/(homepage)/loading.tsx

@@ -0,0 +1,63 @@
+import { VariableProductItemSkeleton } from '@/components/VariableProductItem';
+import {
+  Card,
+  CardContent,
+  Container,
+  Grid,
+  Skeleton,
+  Stack,
+} from '@mui/material';
+
+const Loading = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Skeleton variant="rectangular" height={350} />
+      </Grid>
+
+      <Grid item xs={12}>
+        <Container maxWidth="xl">
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <Grid container spacing={2}>
+                {new Array(4).fill(1).map((item, index) => {
+                  return (
+                    <Grid key={index} item xs={12} md={6} lg={4} xl={3}>
+                      <Stack alignItems="end">
+                        <Skeleton
+                          width="100%"
+                          variant="rectangular"
+                          height={120}
+                        />
+                        <Skeleton variant="text" width={60} />
+                      </Stack>
+                    </Grid>
+                  );
+                })}
+              </Grid>
+            </Grid>
+            {new Array(3).fill(1).map((item) => (
+              <Grid item xs={12} key={item}>
+                <Card variant="outlined">
+                  <CardContent>
+                    <Grid container spacing={2}>
+                      {new Array(6).fill(1).map((item, index) => {
+                        return (
+                          <Grid key={index} item xs={12} md={6} lg={3} xl={2}>
+                            <VariableProductItemSkeleton />
+                          </Grid>
+                        );
+                      })}
+                    </Grid>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Loading;

src/app/[locale]/(main)/(container)/(homepage)/page.tsx → src/app/[locale]/(main)/(homepage)/page.tsx

@@ -14,7 +14,7 @@ import {
   menuOrderSortOptions,
   newestSortOption,
 } from '@/static/sortOptions';
-import { Grid } from '@mui/material';
+import { Container, Grid, Stack } from '@mui/material';
 import { getTranslations } from 'next-intl/server';
 import Header from './components/Header';
 import MainCategories from './components/MainCategories';
@@ -124,25 +124,31 @@ export default async function Home() {
           <MainSlider items={sliders} />
         </Grid>
         <Grid item xs={12}>
-          <MainCategories items={categories} />
-        </Grid>
-        <Grid item xs={12}>
-          <ProductsSlider
-            title={t('header.navigation.bestSelling')}
-            items={bestSellingProducts}
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <ProductsSlider
-            title={t('header.navigation.newest')}
-            items={latestProducts}
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <ProductsSlider
-            title={t('header.navigation.selectedProducts')}
-            items={menuOrderProducts}
-          />
+          <Container maxWidth="xl">
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <MainCategories items={categories} />
+              </Grid>
+              <Grid item xs={12}>
+                <ProductsSlider
+                  title={t('header.navigation.bestSelling')}
+                  items={bestSellingProducts}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <ProductsSlider
+                  title={t('header.navigation.newest')}
+                  items={latestProducts}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <ProductsSlider
+                  title={t('header.navigation.selectedProducts')}
+                  items={menuOrderProducts}
+                />
+              </Grid>
+            </Grid>
+          </Container>
         </Grid>
       </Grid>
     </>

src/app/[locale]/(main)/layout.tsx

@@ -1,4 +1,4 @@
-import { ISliderItem } from '@/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/types';
+import { ISliderItem } from '@/app/[locale]/(main)/(homepage)/components/MainSlider/types';
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
 import { DesktopHeader } from '@/components/Header/components';

src/components/Header/components/TopBanner.tsx

@@ -1,4 +1,4 @@
-import { ISliderItem } from '@/app/[locale]/(main)/(container)/(homepage)/components/MainSlider/types';
+import { ISliderItem } from '@/app/[locale]/(main)/(homepage)/components/MainSlider/types';
 import Image from 'next/image';
 import React, { FC } from 'react';