Modification slider mobile

Bacati · Sep 30, 2024 · 5969fdd · 5969fdd
1 parent a0ed8c6
commit 5969fdd
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 34 deletions.
diff --git a/public/images/slide.png b/public/images/slide.png
diff --git a/src/assets/pages/404/styles/style.scss b/src/assets/pages/404/styles/style.scss
@@ -12,6 +12,7 @@ body{
     background: linear-gradient(90deg, rgba(255, 219, 102, 1) 0%, rgba(204, 112, 19, 1) 100%);
 }
 .card {
+	height: 29rem;
     transition: transform 0.3s;
 }
 nav a:hover {
@@ -115,7 +116,6 @@ details[open] .cheSum{
 		overflow-y: auto;
 		display: flex;
 	}
-
 }
 	.carousel-item{
 	transition: all 0.5s ease-in-out;

diff --git a/src/components/global/Cards.astro b/src/components/global/Cards.astro
@@ -3,7 +3,7 @@ const { title, description, price, imageSrc, lien, logo } = Astro.props;
 import { Eye } from 'lucide-astro';
 ---
 
-<div class="bg-white flex flex-col justify-center items-center w-96 p-6 rounded-3xl shadow-lg card slide">
+<div class="bg-white flex flex-col justify-center items-center w-80 lg:w-96 p-6 rounded-3xl shadow-lg card slide">
   <div class="flex justify-between items-center w-full">
     <p class="font-bold text-3xl">{title}</p>
     <img class="w-1/4" src={logo}>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,7 +2,7 @@
 import MainLayout from 'layouts/MainLayout.astro';
 import { generateProductData, fastProducts } from 'libs/configurations';
 import { config } from 'libs/donner';
-import { ChevronDown, Quote } from 'lucide-astro';
+import { ChevronDown, Hand, MoveLeft, MoveRight, Quote } from 'lucide-astro';
 import moi from '/public/images/moi.jpg';
 import ProductCard from 'components/global/Cards.astro';
 import Picture from 'components/global/Picture.astro';
@@ -23,50 +23,64 @@ import Picture from 'components/global/Picture.astro';
       </p>
     </div>
     <div class="gradient w-full h-2"></div>
-    <div class="flex justify-center gap-3 mt-16 w-4/5 mx-auto">
+    <div class="flex justify-center gap-1 lg:gap-3 mt-16 w-full mx-2 lg:w-4/5 lg:mx-auto">
       <div class="slider flex items-center overflow-hidden">
         <div class="slide-track gap-4">
           {generateProductData(config).map(product => (
-            <ProductCard
-              title={product.title}
-              logo={`/images/${product.logo}`}
-              description={product.description}
-              price={product.price}
-              imageSrc={product.imageSrc}
-              lien={product.link}
-            />
+              <div>
+                  <ProductCard
+                    title={product.title}
+                    logo={`/images/${product.logo}`}
+                    description={product.description}
+                    price={product.price}
+                    imageSrc={product.imageSrc}
+                    lien={product.link}
+                  />
+              </div>
           ))}
           {fastProducts.map(product => (
-            <ProductCard
-              title={product.title}
-              description={product.description}
-              price={product.price}
-              imageSrc={product.imageSrc}
-              lien={product.link}
-            />
+            <div>
+				<ProductCard
+				title={product.title}
+				description={product.description}
+				price={product.price}
+				imageSrc={product.imageSrc}
+				lien={product.link}
+				/>
+            </div>
           ))}
           {generateProductData(config).map(product => (
-            <ProductCard
-              title={product.title}
-              logo={`/images/${product.logo}`}
-              description={product.description}
-              price={product.price}
-              imageSrc={product.imageSrc}
-              lien={product.link}
-            />
+            <div>
+				<ProductCard
+				title={product.title}
+				logo={`/images/${product.logo}`}
+				description={product.description}
+				price={product.price}
+				imageSrc={product.imageSrc}
+				lien={product.link}
+				/>
+            </div>
           ))}
 		  {fastProducts.map(product => (
-            <ProductCard
-              title={product.title}
-              description={product.description}
-              price={product.price}
-              imageSrc={product.imageSrc}
-              lien={product.link}
-            />
+            <div>
+				<ProductCard
+				title={product.title}
+				description={product.description}
+				price={product.price}
+				imageSrc={product.imageSrc}
+				lien={product.link}
+				/>
+            </div>
           ))}
         </div>
       </div>
     </div>
+	<div class="flex justify-center mt-2 md:hidden">
+		<!-- <MoveLeft />
+		<Hand />
+		<MoveRight />-->
+		<img src="/images/slide.png" class="w-10" alt="">
+	</div>
     <div class="w-full flex justify-center py-8">
       <div class="w-11/12 lg:w-4/5 rounded-2xl bg flex gap-2 items-center py-4 justify-center lg:p-20 flex-col lg:flex-row">
         <Picture class="w-5/6 md:w-3/6" src={moi} loading="lazy"></Picture>