Style featured items carousel

src/components/carousel/CarouselItem.tsx

@@ -1,70 +1,34 @@
 import type { Content } from "@prisma/client";
 import Link from "next/link";
 
-import {
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Typography,
-} from "@mui/material";
-
 interface ICarouselItemProps {
   content: Content;
   onClick: () => void;
 }
 
 export default function CarouselItem({ content, onClick }: ICarouselItemProps) {
   return (
-    <Card
-      sx={{ width: 300, height: 400, marginTop: "3rem" }}
+    <div
       onClick={onClick}
-      style={{
-        cursor: "pointer",
-      }}
+      className="h-full w-[200px] cursor-pointer sm:w-[300px] md:w-[400px] lg:w-[500px]"
     >
-      <CardMedia
-        sx={{ height: 250 }}
-        image={content.imgURL}
-        title={content.title}
-      />
-      <CardContent>
-        <Typography
-          variant="h5"
-          component="div"
-          gutterBottom
-          className="-webkit-box overflow-hidden text-ellipsis"
-          style={{
-            display: "-webkit-box",
-            WebkitLineClamp: 1,
-            WebkitBoxOrient: "vertical",
-          }}
-        >
-          {content.title}
-        </Typography>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          className="-webkit-box overflow-hidden text-ellipsis"
-          style={{
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical",
-          }}
-        >
-          {content.caption}
-        </Typography>
-      </CardContent>
-      <CardActions
+      <img
+        src={content.imgURL}
+        alt={content.title}
+        onClick={onClick}
+        className="h-[85%] w-full"
         style={{
-          padding: "0 0 0.5rem",
+          objectFit: "cover",
         }}
-      >
-        <Link href={`/pieces/${content.id}`}>
-          <Button size="small">View</Button>
-        </Link>
-      </CardActions>
-    </Card>
+      />
+      <Link href={`/pieces/${content.id}`}>
+        <p className="-webkit-box line-clamp-1 overflow-hidden text-ellipsis text-[2.5rem] font-medium text-white">
+          {content.title}
+        </p>
+      </Link>
+      <p className="-webkit-box line-clamp-2 overflow-hidden text-ellipsis text-[1rem] font-normal text-white">
+        {content.caption}
+      </p>
+    </div>
   );
 }

src/components/carousel/FeaturedCarousel.tsx

@@ -28,7 +28,7 @@ export default function FeaturedCarousel({ data }: IFeaturedCarouselProps) {
     };
   });
   return (
-    <div className="m-auto h-96 w-5/6">
+    <div className="m-auto flex h-[85%] w-[90vw] items-center">
       <Carousel
         // eslint-disable-next-line
         // @ts-ignore

src/components/sections/FeaturedContent.tsx

@@ -20,7 +20,9 @@ export default function FeaturedContent() {
   }
   return (
     <>
-      <h1 className="text-center text-2xl font-bold lowercase">Featured</h1>
+      <p className="relative left-[3%] top-[-35%] hidden w-0 text-6xl font-normal lowercase text-white lg:block xl:left-[7%]">
+        Featured:
+      </p>
       <FeaturedCarousel data={featuredContent} />
     </>
   );

src/pages/index.tsx

@@ -35,11 +35,14 @@ const Home: NextPage = () => {
           </div>
         </section>
 
-        <section id="featured-content" className="mb-10">
+        <section
+          id="featured-content"
+          className="flex h-[80vh] items-center bg-zinc-800"
+        >
           <FeaturedContent />
         </section>
 
-        <section id="about">
+        <section id="about" className="mt-10">
           <About />
         </section>