feat: HeroSection component

2026-05-28 22:29:36 +07:00
parent 50a4e63e2a
commit 1de59aba84
1 changed files with 61 additions and 0 deletions
@@ -0,0 +1,61 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { getAssetUrl } from '@/lib/directus'
+import type { Article } from '@/lib/types'
+
+interface Props {
+  article: Article
+}
+
+export default function HeroSection({ article }: Props) {
+  const href = `/${article.category.slug}/${article.slug}`
+
+  return (
+    <section className="max-w-[1200px] mx-auto px-6 pt-10 pb-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-0 bg-bg-card border border-border rounded-lg overflow-hidden">
+        <div className="relative aspect-video lg:aspect-auto lg:min-h-[320px] bg-bg-elevated">
+          {article.featured_image ? (
+            <Image
+              src={getAssetUrl(article.featured_image, { width: 900, quality: 85 })}
+              alt={article.title}
+              fill
+              priority
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 50vw"
+            />
+          ) : (
+            <div className="absolute inset-0 bg-bg-elevated" />
+          )}
+        </div>
+
+        <div className="p-8 flex flex-col justify-center">
+          <div className="flex items-center gap-2 mb-4">
+            <span className="bg-violet text-white text-[9px] font-bold uppercase tracking-widest px-2 py-1 rounded">
+              Featured
+            </span>
+            <span className="text-[10px] font-semibold text-text-muted uppercase tracking-widest">
+              {article.category.name}
+            </span>
+          </div>
+
+          <h1 className="text-2xl lg:text-3xl font-bold text-text-primary leading-snug mb-4">
+            {article.title}
+          </h1>
+
+          {article.excerpt && (
+            <p className="text-sm text-text-secondary leading-relaxed mb-6">
+              {article.excerpt}
+            </p>
+          )}
+
+          <Link
+            href={href}
+            className="self-start inline-flex items-center gap-2 bg-accent text-black text-sm font-semibold px-5 py-2.5 rounded-sm hover:bg-accent-hover transition-colors"
+          >
+            Read article →
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}