@hutusi/amytis 1.5.5

package/src/components/SelectedBooksSection.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import Link from 'next/link';
+import CoverImage from './CoverImage';
+import { useLanguage } from './LanguageProvider';
+
+export interface BookItem {
+  slug: string;
+  title: string;
+  excerpt?: string;
+  coverImage?: string;
+  authors: string[];
+  chapterCount: number;
+  firstChapter?: string;
+}
+
+interface SelectedBooksSectionProps {
+  books: BookItem[];
+}
+
+export default function SelectedBooksSection({ books }: SelectedBooksSectionProps) {
+  const { t } = useLanguage();
+
+  if (books.length === 0) return null;
+
+  return (
+    <section className="mb-24">
+      <div className="flex items-center justify-between mb-12">
+        <h2 className="text-3xl font-serif font-bold text-heading">{t('selected_books')}</h2>
+        <Link href="/books" className="text-sm font-sans font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline hover:underline">
+          {t('all_books')} →
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {books.map(book => (
+          <Link key={book.slug} href={`/books/${book.slug}`} className="group block no-underline">
+            <div className="card-base h-full group flex flex-col p-0 overflow-hidden">
+              <div className="relative h-48 w-full overflow-hidden bg-muted/10">
+                <CoverImage
+                  src={book.coverImage}
+                  title={book.title}
+                  slug={book.slug}
+                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+              </div>
+              <div className="p-8 flex flex-col flex-1">
+                <span className="badge-accent mb-4 inline-block">
+                  {book.chapterCount} {t('chapters_count')}
+                </span>
+                <h3 className="mb-3 font-serif text-2xl font-bold text-heading group-hover:text-accent transition-colors">
+                  {book.title}
+                </h3>
+                {book.authors.length > 0 && (
+                  <p className="text-xs text-muted mb-3">
+                    {t('written_by')} {book.authors.slice(0, 3).join(', ')}
+                  </p>
+                )}
+                {book.excerpt && (
+                  <p className="text-muted font-serif italic leading-relaxed line-clamp-3">
+                    {book.excerpt}
+                  </p>
+                )}
+                {book.firstChapter && (
+                  <div className="mt-auto pt-6 border-t border-muted/10">
+                    <span className="text-sm font-sans font-bold text-accent flex items-center gap-1.5">
+                      {t('start_reading')}
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/SeriesCatalog.tsx

@@ -0,0 +1,112 @@
+import Link from 'next/link';
+import { PostData } from '@/lib/markdown';
+import CoverImage from './CoverImage';
+
+interface SeriesCatalogProps {
+  posts: PostData[];
+  startIndex?: number;
+  totalPosts?: number;
+}
+
+export default function SeriesCatalog({ posts, startIndex = 0, totalPosts }: SeriesCatalogProps) {
+  const total = totalPosts ?? posts.length;
+  return (
+    <div className="relative">
+      {/* Timeline connector line */}
+      <div className="absolute left-[19px] top-8 bottom-8 w-px bg-gradient-to-b from-accent/40 via-muted/20 to-muted/10 hidden md:block" />
+
+      <div className="space-y-6">
+        {posts.map((post, index) => (
+          <article key={post.slug} className="group relative">
+            <Link
+              href={`/posts/${post.slug}`}
+              className="block no-underline"
+            >
+              <div className="flex gap-6 md:gap-8">
+                {/* Left side: Number indicator */}
+                <div className="hidden md:flex flex-col items-center">
+                  <div className="relative z-10 flex h-10 w-10 items-center justify-center rounded-full bg-background border-2 border-muted/20 group-hover:border-accent/50 transition-colors">
+                    <span className="text-sm font-mono font-bold text-muted group-hover:text-accent transition-colors">
+                      {String(startIndex + index + 1).padStart(2, '0')}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Right side: Content card */}
+                <div className="flex-1 rounded-2xl border border-muted/20 bg-muted/5 overflow-hidden transition-all duration-300 group-hover:border-accent/30 group-hover:bg-muted/10 group-hover:shadow-lg group-hover:shadow-accent/5">
+                  <div className="flex flex-col sm:flex-row">
+                    {/* Thumbnail */}
+                    <div className="relative w-full sm:w-48 h-40 sm:h-auto flex-shrink-0 overflow-hidden bg-muted/10">
+                      <CoverImage
+                        src={post.coverImage}
+                        title={post.title}
+                        slug={post.slug}
+                        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      />
+                      {/* Mobile number badge */}
+                      <div className="absolute top-3 left-3 md:hidden flex h-8 w-8 items-center justify-center rounded-full bg-background/90 backdrop-blur border border-muted/20">
+                        <span className="text-xs font-mono font-bold text-muted">
+                          {String(startIndex + index + 1).padStart(2, '0')}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 p-5 sm:p-6 flex flex-col">
+                      {/* Meta info */}
+                      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-mono text-muted mb-3">
+                        <span>{post.date}</span>
+                        <span className="hidden sm:inline">•</span>
+                        <span className="text-accent/80">{post.readingTime}</span>
+                        {post.category && (
+                          <>
+                            <span className="hidden sm:inline">•</span>
+                            <span className="uppercase tracking-wider">{post.category}</span>
+                          </>
+                        )}
+                      </div>
+
+                      {/* Title */}
+                      <h3 className="font-serif text-xl font-bold text-heading mb-2 leading-snug group-hover:text-accent transition-colors line-clamp-2">
+                        {post.title}
+                      </h3>
+
+                      {/* Excerpt */}
+                      {post.excerpt && (
+                        <p className="text-sm text-muted leading-relaxed line-clamp-2 mb-4">
+                          {post.excerpt}
+                        </p>
+                      )}
+
+                      {/* Tags */}
+                      {post.tags && post.tags.length > 0 && (
+                        <div className="mt-auto flex flex-wrap gap-2">
+                          {post.tags.slice(0, 3).map(tag => (
+                            <span
+                              key={tag}
+                              className="text-xs px-2 py-0.5 rounded-full bg-muted/10 text-muted/70"
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+
+      {/* Series progress summary */}
+      <div className="mt-10 pt-8 border-t border-muted/10 text-center">
+        <p className="text-sm text-muted">
+          <span className="font-mono text-accent">{total}</span>
+          {total === 1 ? ' article' : ' articles'} in this series
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/SeriesList.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { PostData } from '@/lib/markdown';
+import { useLanguage } from './LanguageProvider';
+
+interface SeriesListProps {
+  seriesSlug: string;
+  seriesTitle: string;
+  posts: PostData[];
+  currentSlug: string;
+}
+
+export default function SeriesList({ seriesSlug, seriesTitle, posts, currentSlug }: SeriesListProps) {
+  const { t } = useLanguage();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!posts || posts.length === 0) return null;
+
+  const currentIndex = posts.findIndex(p => p.slug === currentSlug);
+  const prevPost = currentIndex > 0 ? posts[currentIndex - 1] : null;
+  const nextPost = currentIndex < posts.length - 1 ? posts[currentIndex + 1] : null;
+
+  return (
+    <div className="p-5 bg-muted/5 rounded-xl border border-muted/20">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <Link
+          href={`/series/${seriesSlug}`}
+          className="group flex items-center gap-2 no-underline"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent">
+            {t('series')}
+          </span>
+          <span className="text-[10px] text-muted">•</span>
+          <span className="text-sm font-serif font-bold text-heading group-hover:text-accent transition-colors">
+            {seriesTitle}
+          </span>
+        </Link>
+        <span className="text-xs font-mono text-muted bg-muted/10 px-2 py-0.5 rounded-full">
+          {currentIndex + 1}/{posts.length}
+        </span>
+      </div>
+
+      {/* Progress bar */}
+      <div className="h-1 bg-muted/10 rounded-full overflow-hidden mb-4">
+        <div
+          className="h-full bg-accent/60 rounded-full transition-all duration-500"
+          style={{ width: `${((currentIndex + 1) / posts.length) * 100}%` }}
+        />
+      </div>
+
+      {/* Prev / Next navigation */}
+      <div className="flex gap-3 mb-3">
+        {prevPost ? (
+          <Link
+            href={`/posts/${prevPost.slug}`}
+            className="flex-1 flex items-center gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group"
+          >
+            <svg className="w-4 h-4 flex-shrink-0 text-muted group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            <div className="min-w-0">
+              <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-0.5">{t('prev')}</span>
+              <span className="block text-sm text-foreground/80 group-hover:text-foreground truncate transition-colors">{prevPost.title}</span>
+            </div>
+          </Link>
+        ) : (
+          <div className="flex-1" />
+        )}
+        {nextPost ? (
+          <Link
+            href={`/posts/${nextPost.slug}`}
+            className="flex-1 flex items-center justify-end gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group text-right"
+          >
+            <div className="min-w-0">
+              <span className="block text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-0.5">{t('next')}</span>
+              <span className="block text-sm text-foreground/80 group-hover:text-foreground truncate transition-colors">{nextPost.title}</span>
+            </div>
+            <svg className="w-4 h-4 flex-shrink-0 text-muted group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </Link>
+        ) : (
+          <div className="flex-1" />
+        )}
+      </div>
+
+      {/* Toggle to expand full list */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-center gap-2 py-2 text-xs font-sans text-muted hover:text-accent transition-colors"
+      >
+        <span className="h-px flex-1 bg-muted/10" />
+        <span className="flex items-center gap-1">
+          {isExpanded ? t('hide') : t('all_posts')}
+          <svg
+            className={`w-3 h-3 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </span>
+        <span className="h-px flex-1 bg-muted/10" />
+      </button>
+
+      {/* Collapsible posts list */}
+      {isExpanded && (
+        <ol className="space-y-2 mt-3 animate-slide-down">
+          {posts.map((post, index) => {
+            const isCurrent = post.slug === currentSlug;
+            const isPast = index < currentIndex;
+
+            return (
+              <li key={post.slug}>
+                {isCurrent ? (
+                  <div className="flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-lg bg-accent/5">
+                    <span className="flex-shrink-0 w-5 h-5 rounded-full bg-accent text-white text-[10px] font-mono font-bold flex items-center justify-center">
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <span className="text-sm font-semibold text-accent truncate">
+                      {post.title}
+                    </span>
+                  </div>
+                ) : (
+                  <Link
+                    href={`/posts/${post.slug}`}
+                    className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-lg hover:bg-muted/5 no-underline transition-colors"
+                  >
+                    <span className={`flex-shrink-0 w-5 h-5 rounded-full text-[10px] font-mono font-bold flex items-center justify-center transition-colors ${
+                      isPast
+                        ? 'bg-accent/20 text-accent'
+                        : 'bg-muted/10 text-muted group-hover:bg-muted/20'
+                    }`}>
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <span className={`text-sm truncate transition-colors ${
+                      isPast
+                        ? 'text-foreground/70 group-hover:text-foreground'
+                        : 'text-muted group-hover:text-foreground'
+                    }`}>
+                      {post.title}
+                    </span>
+                  </Link>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      )}
+
+      {/* Footer */}
+      <div className="mt-4 pt-3 border-t border-muted/10">
+        <Link
+          href={`/series/${seriesSlug}`}
+          className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+        >
+          {t('view_full_series')}
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/components/SeriesSidebar.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { PostData } from '@/lib/markdown';
+import { useLanguage } from './LanguageProvider';
+
+interface SeriesSidebarProps {
+  seriesSlug: string;
+  seriesTitle: string;
+  posts: PostData[];
+  currentSlug: string;
+}
+
+export default function SeriesSidebar({ seriesSlug, seriesTitle, posts, currentSlug }: SeriesSidebarProps) {
+  const { t } = useLanguage();
+  const currentIndex = posts.findIndex(p => p.slug === currentSlug);
+  const currentItemRef = useRef<HTMLLIElement>(null);
+  const sidebarRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (currentItemRef.current && sidebarRef.current) {
+      const sidebar = sidebarRef.current;
+      const item = currentItemRef.current;
+      const itemTop = item.offsetTop;
+      const itemHeight = item.offsetHeight;
+      const sidebarHeight = sidebar.clientHeight;
+
+      // Scroll so the current item is roughly centered in the sidebar
+      sidebar.scrollTop = itemTop - sidebarHeight / 2 + itemHeight / 2;
+    }
+  }, [currentSlug]);
+
+  return (
+    <aside
+      ref={sidebarRef}
+      className="hidden lg:block sticky top-28 self-start max-h-[calc(100vh-8rem)] overflow-y-auto w-56 pr-4 scrollbar-hide"
+    >
+      {/* Series Header */}
+      <div className="mb-6 pb-4 border-b border-muted/10">
+        <Link
+          href={`/series/${seriesSlug}`}
+          className="group block no-underline"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent mb-2 block">
+            {t('series')}
+          </span>
+          <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
+            {seriesTitle}
+          </h3>
+        </Link>
+
+        {/* Progress indicator */}
+        <div className="mt-3 flex items-center gap-3">
+          <div className="flex-1 h-1 bg-muted/10 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-accent/60 rounded-full transition-all duration-500"
+              style={{ width: `${((currentIndex + 1) / posts.length) * 100}%` }}
+            />
+          </div>
+          <span className="text-xs font-mono text-muted whitespace-nowrap">
+            {currentIndex + 1}/{posts.length}
+          </span>
+        </div>
+      </div>
+
+      {/* Posts List */}
+      <nav aria-label="Series navigation">
+        <ul className="space-y-1 relative">
+          {/* Timeline connector line */}
+          <div className="absolute left-[11px] top-3 bottom-3 w-px bg-muted/15" />
+
+          {posts.map((post, index) => {
+            const isCurrent = post.slug === currentSlug;
+            const isPast = index < currentIndex;
+
+            return (
+              <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
+                <Link
+                  href={`/posts/${post.slug}`}
+                  className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
+                    isCurrent
+                      ? 'bg-accent/5'
+                      : 'hover:bg-muted/5'
+                  }`}
+                  aria-current={isCurrent ? 'page' : undefined}
+                >
+                  {/* Number indicator */}
+                  <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
+                    isCurrent
+                      ? 'bg-accent text-white shadow-sm shadow-accent/30'
+                      : isPast
+                        ? 'bg-accent/20 text-accent'
+                        : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
+                  }`}>
+                    {String(index + 1).padStart(2, '0')}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0 pt-0.5">
+                    <span className={`block text-sm leading-snug transition-colors ${
+                      isCurrent
+                        ? 'text-accent font-semibold'
+                        : isPast
+                          ? 'text-foreground/70 group-hover:text-foreground'
+                          : 'text-muted group-hover:text-foreground'
+                    }`}>
+                      {post.title}
+                    </span>
+                  </div>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+
+      {/* Footer link */}
+      <div className="mt-6 pt-4 border-t border-muted/10">
+        <Link
+          href={`/series/${seriesSlug}`}
+          className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+        >
+          {t('view_full_series')}
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+    </aside>
+  );
+}

package/src/components/SimpleLayoutHeader.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useLanguage } from './LanguageProvider';
+import { TranslationKey } from '@/i18n/translations';
+import { resolveLocaleValue } from '@/lib/i18n';
+
+interface SimpleLayoutHeaderProps {
+  title: string;
+  excerpt?: string;
+  titleKey?: TranslationKey;
+  subtitleKey?: TranslationKey;
+  titleOverride?: string | Record<string, string>;
+  subtitleOverride?: string | Record<string, string>;
+}
+
+export default function SimpleLayoutHeader({ title, excerpt, titleKey, subtitleKey, titleOverride, subtitleOverride }: SimpleLayoutHeaderProps) {
+  const { t, language } = useLanguage();
+
+  const displayTitle = titleOverride
+    ? resolveLocaleValue(titleOverride, language)
+    : titleKey
+      ? t(titleKey)
+      : title;
+  const displaySubtitle = subtitleOverride
+    ? resolveLocaleValue(subtitleOverride, language)
+    : subtitleKey
+      ? t(subtitleKey)
+      : excerpt;
+
+  return (
+    <header className="page-header">
+      <h1 className="page-title">{displayTitle}</h1>
+      {displaySubtitle && (
+        <p className="page-subtitle">{displaySubtitle}</p>
+      )}
+    </header>
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,131 @@
+interface SkeletonProps {
+  className?: string;
+  variant?: 'text' | 'circular' | 'rectangular';
+  width?: string;
+  height?: string;
+}
+
+/**
+ * Skeleton loading placeholder component.
+ * Use for content that is loading to improve perceived performance.
+ */
+export function Skeleton({
+  className = '',
+  variant = 'rectangular',
+  width,
+  height,
+}: SkeletonProps) {
+  const baseClasses = 'animate-pulse bg-muted/20';
+
+  const variantClasses = {
+    text: 'rounded',
+    circular: 'rounded-full',
+    rectangular: 'rounded-lg',
+  };
+
+  const style = {
+    width: width || undefined,
+    height: height || undefined,
+  };
+
+  return (
+    <div
+      className={`${baseClasses} ${variantClasses[variant]} ${className}`}
+      style={style}
+      aria-hidden="true"
+    />
+  );
+}
+
+/**
+ * Skeleton for a post card with image and text.
+ */
+export function PostCardSkeleton() {
+  return (
+    <div className="card-base p-0 overflow-hidden">
+      <Skeleton className="h-48 w-full rounded-none" />
+      <div className="p-6 space-y-4">
+        <Skeleton className="h-4 w-20" variant="text" />
+        <Skeleton className="h-6 w-3/4" variant="text" />
+        <Skeleton className="h-4 w-full" variant="text" />
+        <Skeleton className="h-4 w-2/3" variant="text" />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Skeleton for a post list item.
+ */
+export function PostListSkeleton() {
+  return (
+    <div className="py-8 border-b border-muted/10 flex gap-8">
+      <div className="flex-1 space-y-3">
+        <Skeleton className="h-3 w-24" variant="text" />
+        <Skeleton className="h-6 w-3/4" variant="text" />
+        <Skeleton className="h-4 w-full" variant="text" />
+        <Skeleton className="h-4 w-1/2" variant="text" />
+        <div className="flex gap-2 pt-2">
+          <Skeleton className="h-3 w-16" variant="text" />
+          <Skeleton className="h-3 w-12" variant="text" />
+        </div>
+      </div>
+      <Skeleton className="w-24 h-24 md:w-32 md:h-24 shrink-0 rounded-lg" />
+    </div>
+  );
+}
+
+/**
+ * Skeleton for a series card.
+ */
+export function SeriesCardSkeleton() {
+  return (
+    <div className="card-base p-0 overflow-hidden">
+      <Skeleton className="h-56 w-full rounded-none" />
+      <div className="p-8 space-y-4">
+        <Skeleton className="h-5 w-20 rounded-full" />
+        <Skeleton className="h-7 w-2/3" variant="text" />
+        <Skeleton className="h-4 w-full" variant="text" />
+        <div className="pt-6 border-t border-muted/10 space-y-2">
+          <div className="flex items-center gap-3">
+            <Skeleton className="w-6 h-6" variant="circular" />
+            <Skeleton className="h-4 w-32" variant="text" />
+          </div>
+          <div className="flex items-center gap-3">
+            <Skeleton className="w-6 h-6" variant="circular" />
+            <Skeleton className="h-4 w-40" variant="text" />
+          </div>
+          <div className="flex items-center gap-3">
+            <Skeleton className="w-6 h-6" variant="circular" />
+            <Skeleton className="h-4 w-28" variant="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Skeleton for featured story.
+ */
+export function FeaturedStorySkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
+      <Skeleton className="md:col-span-7 aspect-[16/9] rounded-2xl" />
+      <div className="md:col-span-5 space-y-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-3 w-20" variant="text" />
+          <Skeleton className="h-3 w-16" variant="text" />
+        </div>
+        <Skeleton className="h-10 w-full" variant="text" />
+        <Skeleton className="h-10 w-3/4" variant="text" />
+        <Skeleton className="h-4 w-full" variant="text" />
+        <Skeleton className="h-4 w-full" variant="text" />
+        <Skeleton className="h-4 w-2/3" variant="text" />
+        <Skeleton className="h-3 w-24 mt-4" variant="text" />
+      </div>
+    </div>
+  );
+}
+
+export default Skeleton;