tampilan card

2026-06-04 19:32:40 +07:00
parent c1b7f8cb23
commit afe7dcce3a
11 changed files with 238 additions and 210 deletions
@@ -267,20 +267,45 @@ export default function ProjectCarousel() {
                          (e.target as HTMLImageElement).src = 'https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN';
                        }}
                      />
-                      <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/80 to-transparent p-5 flex flex-col justify-end">
-                        <h4 className="text-lg font-bold font-display text-white leading-snug mb-1">
-                          {project.title}
+                      
+                      {/* Tag at top-left, raised like achievements, max 2 tags then (..) */}
+                      {project.category && project.category.length > 0 && (
+                        <div className="absolute top-3 left-3 flex flex-wrap gap-1.5 z-20">
+                          {project.category.slice(0, 2).map((cat, i) => (
+                            <span
+                              key={i}
+                              className="bg-white/95 backdrop-blur text-primary-navy font-bold px-2.5 py-1 rounded shadow-sm flex items-center gap-1 text-[10px] uppercase tracking-wider"
+                            >
+                              <Tag size={10} className="text-primary-gold" />
+                              {cat}
+                            </span>
+                          ))}
+                          {project.category.length > 2 && (
+                            <span className="bg-white/95 backdrop-blur text-primary-navy font-bold px-2 py-1 rounded shadow-sm flex items-center gap-1 text-[10px]">
+                              (..)
+                            </span>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Title block — inline background follows text width */}
+                      <div className="absolute bottom-3 left-3 z-20 max-w-[85%]">
+                        <h4
+                          className="text-sm font-bold font-display text-slate-900 leading-snug"
+                          style={{ display: 'inline' }}
+                        >
+                          <span
+                            className="bg-white/55 backdrop-blur-sm px-2 py-0.5 rounded"
+                            style={{
+                              boxDecorationBreak: 'clone',
+                              WebkitBoxDecorationBreak: 'clone',
+                              lineHeight: '1.9',
+                              textShadow: '0 0 8px rgba(255,255,255,0.8)',
+                            }}
+                          >
+                            {project.title}
+                          </span>
                        </h4>
-                        {project.category && project.category.length > 0 && (
-                          <div className="flex flex-wrap gap-2 mt-1">
-                            {project.category.map((cat, i) => (
-                              <span key={i} className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider bg-black/30 px-2 py-1 rounded backdrop-blur-sm">
-                                <Tag size={10} />
-                                {cat}
-                              </span>
-                            ))}
-                          </div>
-                        )}
                      </div>
                    </div>