👔 feat: add title and additional attributes to card

app/(session)/(main)/layout.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <div className="max-w-400 mx-auto relative">
+    <div className="max-w-396 mx-auto relative">
       <Navbar />
       <div className="pt-16">{children}</div>
     </div>

app/globals.css

@@ -146,3 +146,54 @@
   border-radius: 9px;
   border: 3px none #000000;
 }
+
+@keyframes aircraft-strobe {
+  /* Kedipan 1: Agak lambat/lama */
+  0%,
+  20% {
+    opacity: 1;
+  }
+
+  /* Jeda singkat */
+  35% {
+    opacity: 0;
+  }
+
+  /* Kedipan 2: Cepat */
+  40% {
+    opacity: 1;
+  }
+  43% {
+    opacity: 0;
+  }
+
+  /* Jeda sangat singkat */
+  48% {
+    opacity: 0;
+  }
+
+  /* Kedipan 3: Cepat */
+  53% {
+    opacity: 1;
+  }
+  56% {
+    opacity: 0;
+  }
+
+  /* Jeda panjang sebelum mengulang loop (gelap) */
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Class untuk diterapkan ke elemen */
+.blink-strobe {
+  animation: aircraft-strobe 2s linear infinite;
+}
+
+.hide-scrollbar {
+  scrollbar-width: none; /* Firefox */
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome, Edge, Safari */
+}

features/home/actions/getRecommenationAnime.ts

@@ -121,7 +121,8 @@ export const getRecommendationAnimeAction = async (): Promise<
       thumbnail_url: "https://myanimelist.net/images/anime/1046/122722.jpg",
     },
     {
-      title: "Mobile Suit Gundam: The Origin",
+      title:
+        "Mobile Suit Gundam: The Origin (lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua)",
       rating: 8.42,
       type: "OVA",
       status: "finished",

features/home/sections/Recommendation/components/Card.tsx

@@ -1,14 +1,24 @@
 import { RecommendationAnime } from "@/features/home/actions/getRecommenationAnime";
 import { Icon } from "@iconify/react";
-import { StarOff } from "lucide-react";
 
 const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
   return (
     <div>
       <div className="w-64 h-88 rounded-lg overflow-hidden relative">
-        <div className="absolute right-2 top-2 bg-amber-400 text-neutral-950 font-semibold flex gap-0.5 items-center py-1 px-2 rounded">
+        {data.status === "airing" && (
+          <div className="absolute top-2 left-2 bg-neutral-800 flex items-center gap-0.5 px-2 py-1 rounded-full">
+            <Icon
+              icon="icon-park-outline:dot"
+              className="h-auto w-4 text-red-500 blink-strobe"
+            />
+            <span className="text-xs font-medium">Airing</span>
+          </div>
+        )}
+        <div className="absolute right-2 top-2 bg-amber-400 text-neutral-950 flex items-center py-1 px-1.5 rounded">
           <Icon icon="material-symbols:star-rounded" className="h-auto w-4" />
-          <span className="text-sm tracking-tight">{data.rating ?? "N/A"}</span>
+          <span className="text-xs tracking-tight font-medium">
+            {data.rating ?? "N/A"}
+          </span>
         </div>
         <img
           className="w-full h-full object-cover"
@@ -17,6 +27,12 @@ const AnimeRecommendationCard = ({ data }: { data: RecommendationAnime }) => {
           draggable={false}
         />
       </div>
+      <div className="mt-3 px-1 mb-1">
+        <h3 className=" font-semibold mt-1 line-clamp-1">{data.title}</h3>
+        <div className="flex gap-2 text-sm text-neutral-400 mt-0.5">
+          <span>{data.release_year}</span>
+        </div>
+      </div>
     </div>
   );
 };

features/home/sections/Recommendation/main.tsx

@@ -5,7 +5,7 @@ const RecommendationMain = async () => {
   const data = async () => await getRecommendationAnimeAction();
   const result = await data();
   return (
-    <div className="flex gap-2 w-full overflow-x-scroll py-2 my-2">
+    <div className="flex gap-2 w-full overflow-x-scroll py-2 my-2 hide-scrollbar">
       {result.map((item, index) => (
         <AnimeRecommendationCard data={item} key={index} />
       ))}

features/home/sections/Recommendation/wrapper.tsx

@@ -1,15 +1,15 @@
 import { Suspense } from "react";
 import RecommendationMain from "./main";
 import RecommendationSkeleton from "./skeleton";
-import { getRecommendationAnimeAction } from "../../actions/getRecommenationAnime";
 
 const Recommendation = async () => {
   return (
     <div className="mt-12">
-      <h1 className="text-2xl text-neutral-100 font-semibold w-fit">
+      <div>
+        <h1 className="text-[26px] text-neutral-100 font-semibold w-fit tracking-tight">
           Maybe You Like
-        <div className="w-full h-0.5 bg-primary -mt-1.5" />
         </h1>
+      </div>
       <Suspense fallback={<RecommendationSkeleton />}>
         <RecommendationMain />
       </Suspense>