Brands carousel

package.json

@@ -12,6 +12,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.0.1",
     "react-image-gallery": "^1.3.0"
   },

src/app/page.tsx

@@ -1,12 +1,14 @@
 import Banner from "@/components/Banner";
 import Categories from "@/components/Categories";
 import Blog from "@/components/Blog";
+import BrandsCarousel from "@/components/BrandsCarousel";
 
 export default function Home() {
   return (
     <main>
       <Banner />
       <Categories />
+      <BrandsCarousel />
       <Blog />
     </main>
   );

src/components/BrandsCarousel/BrandCard.tsx

@@ -0,0 +1,25 @@
+import { Brand } from "@/types";
+import Image from "next/image";
+import Link from "next/link";
+
+interface BrandCardProps {
+  brand: Brand;
+}
+
+export const BrandCard = ({ brand }: BrandCardProps) => {
+  return (
+    <Link
+      className="flex items-center justify-center cursor-pointer w-max ms:m-6 mx-1 hover:scale-125 transition-all"
+      href={"https://shop.actualizatucarro.com/"}
+      target="_blank"
+    >
+      <Image
+        src={brand.image}
+        width={100}
+        height={100}
+        alt={brand.name}
+        className="w-auto h-auto"
+      />
+    </Link>
+  );
+};

src/components/BrandsCarousel/Carousel.tsx

@@ -0,0 +1,23 @@
+"use client";
+import Marquee from "react-fast-marquee";
+
+import { BrandCard } from "./BrandCard";
+
+import { Brand } from "@/types";
+
+interface CarouselProps {
+  brands: Brand[];
+}
+
+export const Carousel = ({ brands }: CarouselProps) => {
+
+  return (
+    <div className="flex items-center justify-between gap-x-1 ms:gap-x-2 px-2 group">
+      <Marquee direction={'left'} pauseOnHover speed={40} gradient gradientWidth={100}>
+        {brands.map((brand, i) => (
+          <BrandCard brand={brand} key={i} />
+        ))}
+      </Marquee>
+    </div>
+  );
+};

src/components/BrandsCarousel/index.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+import { Carousel } from "./Carousel";
+import { BRANDS } from "@/utils/constants";
+
+const BrandsCarousel: FC = () => {
+
+  return (
+    <section className="max-w-f-hd mx-auto mb-4 h-max">
+      <Carousel brands={BRANDS}/>
+    </section>
+  );
+};
+export default BrandsCarousel;

src/types.d.ts

@@ -0,0 +1,4 @@
+export interface Brand {
+  image: string;
+  name: string;
+}

src/utils/constants.ts

@@ -40,3 +40,105 @@ export const CATEGORIES = [
     name: "Stops",
   },
 ];
+export const BRANDS = [
+  {
+    name: "Audi",
+    image: "/images/brands/audi-logo.webp"
+  },
+  {
+    name: "BMW",
+    image: "/images/brands/bmw-logo.webp"
+  },
+  {
+    name: "Chevrolet",
+    image: "/images/brands/chevrolet-logo.webp"
+  },
+  {
+    name: "Dodge",
+    image: "/images/brands/dodge-logo.webp"
+  },
+  {
+    name: "Ferrari",
+    image: "/images/brands/ferrari-logo.webp"
+  },
+  {
+    name: "Ford",
+    image: "/images/brands/ford-logo.webp"
+  },
+  {
+    name: "Honda",
+    image: "/images/brands/honda-logo.webp"
+  },
+  {
+    name: "Hyundai",
+    image: "/images/brands/hyundai-logo.webp"
+  },
+  {
+    name: "Jeep",
+    image: "/images/brands/jeep-logo.webp"
+  },
+  {
+    name: "Kia",
+    image: "/images/brands/kia-logo.webp"
+  },
+  {
+    name: "Lamborghini",
+    image: "/images/brands/lamborghini-logo.webp"
+  },
+  {
+    name: "Land Rover",
+    image: "/images/brands/land-rover-logo.webp"
+  },
+  {
+    name: "Lexus",
+    image: "/images/brands/lexus-logo.webp"
+  },
+  {
+    name: "Mazda",
+    image: "/images/brands/mazda-logo.webp"
+  },
+  {
+    name: "Mercedes Benz",
+    image: "/images/brands/mercedes-benz-logo.webp"
+  },
+  {
+    name: "Mini",
+    image: "/images/brands/mini-logo.webp"
+  },
+  {
+    name: "Mitsubishi",
+    image: "/images/brands/mitsubishi-logo.webp"
+  },
+  {
+    name: "Nissan",
+    image: "/images/brands/nissan-logo.webp"
+  },
+  {
+    name: "Porsche",
+    image: "/images/brands/porsche-logo.webp"
+  },
+  {
+    name: "RAM",
+    image: "/images/brands/ram-logo.webp"
+  },
+  {
+    name: "Subaru",
+    image: "/images/brands/subaru-logo.webp"
+  },
+  {
+    name: "Tesla",
+    image: "/images/brands/tesla-logo.webp"
+  },
+  {
+    name: "Toyota",
+    image: "/images/brands/toyota-logo.webp"
+  },
+  {
+    name: "Volkswagen",
+    image: "/images/brands/volkswagen-logo.webp"
+  },
+  {
+    name: "Volvo",
+    image: "/images/brands/volvo-logo.webp"
+  },
+]