feat: almoust finished

Author: PabloXT14

src/components/ProductSkeleton/styles.ts

@@ -10,7 +10,7 @@ const skeletonAnimation = keyframes({
 });
 
 export const ProductSkeletonContainer = styled("div", {
-  width: "100%",
+  width: '100%',
   height: "70vh",
   display: "grid",
   gridTemplateRows: "1fr 2rem",

src/components/Slider/styles.ts

@@ -3,8 +3,18 @@ import { Swiper } from 'swiper/react';
 
 
 export const SliderContainer = styled(Swiper, {
+  '.swiper-wrapper': {
+    display: 'flex',
+    gap: 1, // só para o ProductSkeleton aparecer
+  },
+
+  ".swiper-slide": {
+    maxWidth: 696,
+  },
+
   '.swiper-button-prev': {
-    color: '$white'
+    // backgroundColor: 'red',
+    color: '$white',
   },
   '.swiper-button-next': {
     color: '$white',

src/styles/pages/home.ts

@@ -5,19 +5,7 @@ export const HomeContainer = styled("main", {
   width: '100%',
   maxWidth: 'calc(100vw - ((100vw - 1180px) / 2))', // 1180 + ((largura da tela - 1180) / 2)
   marginLeft: 'auto',
-  // minHeight: 'calc(2rem - 100vh)',
   marginBottom: '1rem',
-  // overflow: 'hidden',
-})
-
-export const SliderContainer = styled("div", {
-  position: "relative",
-  display: "flex",
-  gap: "3rem",
-  margin: "0 auto",
-  ".embla__slide": {
-    
-  }
 });
 
 export const Product = styled("div", {
@@ -85,27 +73,3 @@ export const ProductFooter = styled("footer", {
     lineHeight: '140%',
   },
 });
-
-
-export const ArrowButton = styled("button", {
-  position: 'absolute',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  color: '$white',
-  zIndex: 999,
-  backgroundColor: 'transparent',
-  border: 'none',
-  outline: 'none',
-
-  variants: {
-    direction: {
-      left: {
-        left: 0,
-      },
-
-      right: {
-        right: 0,
-      }
-    }
-  }
-})