From 5cb3b909be9dee5c03912a2a0faae4a79db8e4d8 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Sun, 15 Mar 2026 21:11:20 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=94=20feat:=20add=20title=20and=20addi?=
 =?UTF-8?q?tional=20attributes=20to=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(session)/(main)/layout.tsx               |  2 +-
 app/globals.css                               | 51 +++++++++++++++++++
 .../home/actions/getRecommenationAnime.ts     |  3 +-
 .../Recommendation/components/Card.tsx        | 22 ++++++--
 .../home/sections/Recommendation/main.tsx     |  2 +-
 .../home/sections/Recommendation/wrapper.tsx  | 10 ++--
 6 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/app/(session)/(main)/layout.tsx b/app/(session)/(main)/layout.tsx
index fb2280e..5b83505 100644
--- a/app/(session)/(main)/layout.tsx
+++ b/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>
diff --git a/app/globals.css b/app/globals.css
index d5c556e..4998592 100644
--- a/app/globals.css
+++ b/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 */
+}
diff --git a/features/home/actions/getRecommenationAnime.ts b/features/home/actions/getRecommenationAnime.ts
index fbe220b..a05b646 100644
--- a/features/home/actions/getRecommenationAnime.ts
+++ b/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",
diff --git a/features/home/sections/Recommendation/components/Card.tsx b/features/home/sections/Recommendation/components/Card.tsx
index d7708d0..d4662c4 100644
--- a/features/home/sections/Recommendation/components/Card.tsx
+++ b/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>
   );
 };
diff --git a/features/home/sections/Recommendation/main.tsx b/features/home/sections/Recommendation/main.tsx
index f7ef6e2..430821c 100644
--- a/features/home/sections/Recommendation/main.tsx
+++ b/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} />
       ))}
diff --git a/features/home/sections/Recommendation/wrapper.tsx b/features/home/sections/Recommendation/wrapper.tsx
index 923b533..caf67b2 100644
--- a/features/home/sections/Recommendation/wrapper.tsx
+++ b/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">
-        Maybe You Like
-        <div className="w-full h-0.5 bg-primary -mt-1.5" />
-      </h1>
+      <div>
+        <h1 className="text-[26px] text-neutral-100 font-semibold w-fit tracking-tight">
+          Maybe You Like
+        </h1>
+      </div>
       <Suspense fallback={<RecommendationSkeleton />}>
         <RecommendationMain />
       </Suspense>