chore: remove styled and refactor products page

next.config.js

@@ -1,4 +1,3 @@
-const million = require("million/compiler");
 const bundleAnalyzer = require("@next/bundle-analyzer");
 const nextTranslate = require("next-translate-plugin");
 
@@ -61,4 +60,4 @@ const baseConfig = nextTranslate({
   },
 });
 
-module.exports = million.next(withBundleAnalyzer(baseConfig), { auto: true });
+module.exports = withBundleAnalyzer(baseConfig);

src/components/cardSwiper/index.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/sass.scss";
+
 .wrapper {
   position: relative;
 }
@@ -15,3 +17,47 @@
   top: 50%;
   transform: translateY(-50%);
 }
+
+.boxCss {
+  :global {
+    .swiper-slide.scale {
+      align-self: center;
+      flex-shrink: 0;
+      text-align: center;
+      transform: scale(0.8) !important;
+      transition: 300ms;
+      width: auto;
+    }
+
+    .swiper-slide-active.scale {
+      transform: scale(1) !important;
+    }
+
+    .c-next.swiper-button-disabled,
+    .c-prev.swiper-button-disabled {
+      display: none;
+    }
+
+    .c-next,
+    .c-prev {
+      display: none;
+    }
+
+    @include down-tablet {
+      .c-next,
+      .c-prev {
+        display: block;
+      }
+
+      .swiper-container {
+        padding: 0 40px;
+      }
+    }
+  }
+}
+
+.slide {
+  @include down-laptop {
+    width: 100%;
+  }
+}

src/components/cardSwiper/index.tsx

@@ -1,12 +1,11 @@
-import { Stack, useTheme } from "@mui/material";
+import { Stack } from "@mui/material";
 import Image from "next/legacy/image";
 import type { CSSProperties } from "react";
 import SwiperCore, { Navigation } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper.min.css";
 
 import Arrow, { Direction } from "../arrow";
-import { BoxCSS } from "./BoxCSS";
 import * as styles from "./index.module.scss";
 
 SwiperCore.use([Navigation]);
@@ -17,63 +16,53 @@ type Props = {
   style?: CSSProperties;
 };
 
-const CardSwiper = ({ className, imagesList, style }: Props) => {
-  const theme = useTheme();
-
-  return (
-    <BoxCSS>
-      <div className={styles.wrapper}>
-        <Swiper
-          breakpoints={{
-            1025: {
-              initialSlide: 1,
-              slidesPerView: 3,
-              spaceBetween: -80,
-            },
-            375: {
-              initialSlide: 0,
-              slidesPerView: 1,
-              spaceBetween: -30,
-            },
-          }}
-          centeredSlides
-          className={["scale", className || ""].join(" ")}
-          initialSlide={1}
-          navigation={{
-            nextEl: ".c-next", // 下一个箭头的类名或DOM元素
-            prevEl: ".c-prev", // 上一个箭头的类名或DOM元素
-          }}
-          slidesPerView={3}
-          spaceBetween={-80}
-          style={{
-            ...style,
-          }}
-        >
-          {imagesList.map((item, index) => (
-            <SwiperSlide className="scale" key={index}>
-              <Stack
-                sx={{
-                  [theme.breakpoints.down("laptop")]: {
-                    width: "100%",
-                  },
-                }}
-              >
-                {item && <Image alt="" src={item} />}
-              </Stack>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-        <Arrow
-          className={["c-next", styles.next].join(" ")}
-          direction={Direction.Right}
-        />
-        <Arrow
-          className={["c-prev", styles.prev].join(" ")}
-          direction={Direction.Left}
-        />
-      </div>
-    </BoxCSS>
-  );
-};
+const CardSwiper = ({ className, imagesList, style }: Props) => (
+  <div className={styles.boxCss}>
+    <div className={styles.wrapper}>
+      <Swiper
+        breakpoints={{
+          1025: {
+            initialSlide: 1,
+            slidesPerView: 3,
+            spaceBetween: -80,
+          },
+          375: {
+            initialSlide: 0,
+            slidesPerView: 1,
+            spaceBetween: -30,
+          },
+        }}
+        centeredSlides
+        className={["scale", className || ""].join(" ")}
+        initialSlide={1}
+        navigation={{
+          nextEl: ".c-next", // 下一个箭头的类名或DOM元素
+          prevEl: ".c-prev", // 上一个箭头的类名或DOM元素
+        }}
+        slidesPerView={3}
+        spaceBetween={-80}
+        style={{
+          ...style,
+        }}
+      >
+        {imagesList.map((item, index) => (
+          <SwiperSlide className="scale" key={index}>
+            <Stack className={styles.slide}>
+              {item && <Image alt="" src={item} />}
+            </Stack>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <Arrow
+        className={["c-next", styles.next].join(" ")}
+        direction={Direction.Right}
+      />
+      <Arrow
+        className={["c-prev", styles.prev].join(" ")}
+        direction={Direction.Left}
+      />
+    </div>
+  </div>
+);
 
 export default CardSwiper;

src/components/carousel/index.module.scss

@@ -95,3 +95,51 @@ $avater-shadow:
     margin: 0 -16px;
   }
 }
+
+.boxCss {
+  :global {
+    .swiper-container {
+      padding: 40px;
+    }
+
+    .swiper-wrapper {
+      align-items: stretch;
+    }
+
+    .swiper-slide {
+      height: auto;
+      transform: scale(0.8) !important;
+      transition: 300ms;
+      width: 100%;
+    }
+
+    .swiper-slide-active {
+      transform: scale(1) !important;
+    }
+
+    .c-next.swiper-button-disabled,
+    .c-prev.swiper-button-disabled {
+      display: none;
+    }
+
+    .c-next,
+    .c-prev {
+      display: none;
+    }
+
+    @media screen and (max-width: 1025px) {
+      .c-next,
+      .c-prev {
+        display: block;
+      }
+
+      .swiper-container {
+        padding: 30px 32px;
+      }
+
+      .swiper-wrapper {
+        align-items: flex-start;
+      }
+    }
+  }
+}

src/components/carousel/index.tsx

@@ -6,7 +6,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper.min.css";
 
 import Arrow, { Direction } from "../arrow";
-import { BoxCSS } from "./BoxCSS";
 import * as styles from "./index.module.scss";
 
 SwiperCore.use([Navigation]);
@@ -62,7 +61,7 @@ const Carousel = ({ personList }: CarouselProps) => {
   }
 
   return (
-    <BoxCSS>
+    <div className={styles.boxCss}>
       <div className={styles.wrapper}>
         <Swiper
           breakpoints={{
@@ -110,7 +109,7 @@ const Carousel = ({ personList }: CarouselProps) => {
           role="button"
         />
       </div>
-    </BoxCSS>
+    </div>
   );
 };
 

src/components/contact-form/index.module.scss

@@ -19,3 +19,8 @@
 .select {
   color: $color-grey-2;
 }
+
+.label {
+  font-size: 16px;
+  font-weight: 590;
+}