Merge pull request #255 from Actualiza-Tu-Carro/237-landingfine

landing corregida
Dium-dev · Jan 12, 2024 · 07b2435 · 07b2435
2 parents 699b402 + 87dc22f
commit 07b2435
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 44 deletions.
diff --git a/src/components/cards/reviewsCard.tsx b/src/components/cards/reviewsCard.tsx
@@ -35,7 +35,7 @@ const Reviews: React.FC<ReviewsProps> = ({
   };
 
   return (  // cambio de 320 a 1920 max
-    <div className="flex flex-col max-w-[1920px] bg-white m-5 p-4 lg:shadow-md rounded-lg h-72 justify-around dark:bg-primary-dm mt-10"> 
+    <div className="flex flex-col max-w-[1920px] bg-white m-5 p-4 lg:shadow-md rounded-lg h-72 justify-around dark:bg-primary-dm mt-12"> 
       <div>
         <Icon icon="quotationMarks" />
       </div>

diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx
@@ -8,10 +8,10 @@ export function TopSellers() {
   const products = productos.slice(0, 10);
 
   return (
-    <div className="mb-10 w-full mt-10">
-      <div className="grid place-content-center bg-[#13131D] text-white border-b-4 border-b-[#ff0000] py-5 mb-6 dark:border-t-4 dark:border-t-[#ff0000]">
-        <h2 className="text-2xl">Los más vendidos</h2> 
-      </div>
+    <div className="mb-14 w-full mt-12">
+      <div className="grid place-content-center bg-[#13131D] text-white border-b-4 border-b-[#ff0000] py-5 mb-8 dark:border-t-4 dark:border-t-[#ff0000]">
+        <h2 className="text-2xl mt-1 ">Los más vendidos</h2> 
+     </div>
       <Carousel>
         {products.map((producto: ProductsProps) => {
           const { title, id, price, image } = producto;

diff --git a/src/components/containerCards/containerCardsBrands.tsx b/src/components/containerCards/containerCardsBrands.tsx
@@ -171,44 +171,45 @@ const ContainerCardsBrands: React.FC = () => {
     }
   };
 
+
   return (
-    <div className="flex flex-col items-center justify-between mb-3 mt-1 w-full flex-nowrap overflow-hidden max-w-[1920px] mx-auto">
-      <div className="flex items-center justify-center w-full max-w-f-hd py-2 gap-1 relative">
+    <div className="flex flex-col items-center justify-between mb-7 w-full flex-nowrap overflow-hidden max-w-[1920px] mx-auto">
+    <div className="flex items-center justify-center w-full max-w-f-hd py-1 gap-1 relative">
+      <button
+        onClick={handlePrevClick}
+        className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-1 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
+      >
+        <BsChevronCompactLeft onClick={prevSlide} size="100%" />
+      </button>
+      <Ticker duration={70}>
+        {imagesBrands.map((brand, index) => (
+          <div
+            key={index}
+            onClick={() => handleClick(brand.name)}
+            className="brand-link relative w-32 h-32 sm:w-40 sm:h-40 m-2 flex items-center"
+            aria-hidden="true"
+          >
+            <Link href={`/products?brand=${brand.name}`} key={index}>
+              <Image
+                src={brand.image}
+                alt={brand.name}
+                className="brand-image object-contain w-full h-full m-2 max-h-[100px] max-w-[100px] hover:scale-110 ${!isHovering && 'hover:stop-autoplay'}`;"
+                width={300}
+                height={300}
+              />
+            </Link>
+          </div>
+        ))}
+        </Ticker>
         <button
-          onClick={handlePrevClick}
-          className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-2 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
-        >
-          <BsChevronCompactLeft onClick={prevSlide} size="100%" />
+        onClick={handleNextClick}
+        className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-2 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
+      >
+        <BsChevronCompactRight onClick={nextSlide} size="100%" />
         </button>
-        <Ticker duration={70}>
-          {imagesBrands.map((brand, index) => (
-            <div
-              key={index}
-              onClick={() => handleClick(brand.name)}
-              className="brand-link relative w-32 h-32 sm:w-40 sm:h-40 m-2 flex items-center"
-              aria-hidden="true"
-            >
-              <Link href={`/products?brand=${brand.name}`} key={index}>
-                <Image
-                  src={brand.image}
-                  alt={brand.name}
-                  className="brand-image object-contain w-full h-full m-2 max-h-[100px] max-w-[100px] hover:scale-110 ${!isHovering && 'hover:stop-autoplay'}`;"
-                  width={300}
-                  height={300}
-                />
-              </Link>
-            </div>
-          ))}
-          </Ticker>
-          <button
-          onClick={handleNextClick}
-          className="w-10 h-10 apect-square rounded-full flex items-center justify-center p-2 bg-white text-[#000] shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg transition-all cursor-pointer"
-        >
-          <BsChevronCompactRight onClick={nextSlide} size="100%" />
-          </button>
-      </div>
     </div>
-  );
+  </div>
+);
 };
 
-export default ContainerCardsBrands;
+export default ContainerCardsBrands;
diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx
@@ -12,7 +12,7 @@ const PaymentMethod: React.FC<PaymentMethodProps> = ({
   description
 }) => {
   return (
-    <div className="flex flex-col items-center mr-5 ml-5 mb-1 mt-1">
+    <div className="flex flex-col items-center mr-5 ml-5 mb-1 mt-3">
         <div className="h-[100px] w-[100px]">
           <Icon icon={imageSrc}/>          
         </div>

diff --git a/src/components/paymentMethod/paymentMethodsList.tsx b/src/components/paymentMethod/paymentMethodsList.tsx
@@ -4,7 +4,7 @@ import PaymentMethod from './payMethod';
 const PaymentMethodsComponent: React.FC = () => {
   return (
     <>
-          <div className="py-4 flex flex-wrap justify-evenly items-center max-w-[1920px] mx-auto mt-2 mb-7">
+          <div className="py-4 flex flex-wrap justify-evenly items-center max-w-[1920px] mx-auto mt-4 mb-12">
             <PaymentMethod
               imageSrc='CardCredit'
               title="Todos los medios de pago"

diff --git a/src/store/productStore.ts b/src/store/productStore.ts
@@ -22,8 +22,9 @@ type Brand = {
 };
 
 type BrandStore = {
-  Brand: Brand;
-  setBrand: (brand: Brand) => void;
+  setBrand: any;
+  selectedBrand: string;
+  setSelectedBrand: (brand: string) => void;
 };
 
 export const useBrandStore = create<BrandStore>((set) => ({