Opis: Ten artykuł wyjaśnia, jak na podstawie zawartości tekstu stworzyć skuteczny, krótki opis (description), który podsumowuje główny temat, najważniejsze informacje oraz korzyści dla czytelnika, a jednocześnie zachęca do kliknięcia i dalszej lektury.

Analizując przesłany zrzut ekranu (referencję), widać wyraźnie, że design opiera się na dużym, czystym zdjęciu (banerze) z nałożonym gradientem. Wszystkie teksty są **wyrównane do lewej strony i do dołu**. 

Co najważniejsze: **wewnątrz banera nie ma informacji o autorze ani dacie**. Znajdują się tam tylko: Tytuł, Opis oraz "pastylki" (badges) z kategoriami i szacowanym czasem czytania.

Oto zaktualizowany komponent, który odwzorowuje ten układ z obrazka, usuwając autora z obrazka i grupując kategorie w formie "pastylek" pod opisem.

### 1. Zaktualizowany kod komponentu (Baner / Duża Karta)

```tsx
import Image from 'next/image'
import { isStaticExport, ROUTES } from '@/lib/env'
import { cn } from '@/lib/utils'
import type { BlogCategory, BlogPost } from '@/sanity/types'
import Img from '@/ui/img'
import SanityLink, { type SanityLinkType } from '@/ui/sanity-link'
// Usunięto Byline i Date - zgodnie z referencją przenosimy je poza ten komponent

export default function PostPreviewLarge({
	post,
	className,
}: { post: BlogPost } & React.ComponentProps<'article'>) {
	if (!post) return null

	const categories = (post.categories as unknown as BlogCategory[]) || []

	return (
		<article
			className={cn(
				'group relative w-full overflow-hidden rounded-3xl border border-white/10', // Zaokrąglone rogi jak na referencji
				className,
			)}
		>
			{/* Tło / Obrazek */}
			<figure className="aspect-[16/9] w-full bg-foreground/5 md:aspect-[21/9]">
				{post.metadata?.image ? (
					<Img
						className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
						image={post.metadata?.image}
						width={1200}
						alt={post.title ?? ''}
					/>
				) : (
					<Image
						src={
							isStaticExport
								? '/og-default.png'
								: `/api/og?slug=${ROUTES.blog}/${post.metadata?.slug?.current}&invert=1`
						}
						className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
						alt={post.title ?? ''}
						width={1200}
						height={630}
					/>
				)}
			</figure>

			{/* Gradient dla czytelności tekstu (od dołu i od lewej) */}
			<div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/30 to-transparent" />
			<div className="absolute inset-0 bg-linear-to-r from-black/50 via-transparent to-transparent" />

			{/* Kontent wyrównany do lewego dołu */}
			<div className="absolute inset-0 flex flex-col justify-end p-6 md:p-12 lg:p-16">
				<div className="flex max-w-4xl flex-col items-start gap-4">
					
					{/* Tytuł */}
					<SanityLink
						className="block font-manrope text-3xl leading-tight font-semibold tracking-tight text-white transition-colors group-hover:text-white/90 md:text-5xl lg:text-6xl"
						link={
							{ type: 'internal', internal: post } as unknown as SanityLinkType
						}
					>
						{post.title}
					</SanityLink>

					{/* Opis */}
					{post.metadata?.description && (
						<p className="max-w-3xl text-base leading-relaxed text-white/80 md:text-lg lg:text-xl">
							{post.metadata?.description}
						</p>
					)}

					{/* Tagi / Kategorie na samym dole */}
					{categories.length > 0 && (
						<div className="mt-4 flex flex-wrap items-center gap-3">
							{categories.map((category) => (
								<span
									key={category._id}
									className="rounded-full border border-white/30 bg-transparent px-4 py-1.5 text-xs font-medium tracking-wide text-white backdrop-blur-sm transition-colors hover:bg-white/10 md:text-sm"
								>
									{category.title}
								</span>
							))}
							
							{/* Miejsce na Read Time, jeśli masz go w danych (np. post.readTime). 
							    Zostawiam to zahardcodowane jako przykład zgodny z obrazkiem */}
							<span className="rounded-full border border-white/30 bg-transparent px-4 py-1.5 text-xs font-medium tracking-wide text-white backdrop-blur-sm md:text-sm">
								12 min read
							</span>
						</div>
					)}
				</div>
			</div>
		</article>
	)
}
```

---

### 2. Gotowy, szczegółowy prompt dla AI (do wklejenia w kolejnym kroku)

Ten prompt jest napisany tak, aby sztuczna inteligencja idealnie zrozumiała, jak zbudować układ widoczny **poniżej banera** na Twoim obrazku (treść artykułu z lewej, sidebar z autorem z prawej).

**Skopiuj poniższy tekst i wyślij go do AI (wraz z kodem pliku strony posta, np. `page.tsx` lub `PostLayout.tsx`):**

***

**PROMPT DO SKOPIOWANIA:**

```text
Mam projekt bloga w Next.js z użyciem Tailwind CSS i Sanity CMS. Właśnie zaktualizowałem komponent banera (Hero Section) posta na blogu. Zgodnie z nowym designem, z banera usunęliśmy informacje o autorze i dacie publikacji.

Teraz potrzebuję zbudować sekcję `<section className="post-content">`, która znajduje się bezpośrednio pod banerem. Chcę, aby layout tej sekcji dokładnie odwzorowywał nowoczesny, dwukolumnowy układ asymetryczny:

WYMAGANIA DOTYCZĄCE LAYOUTU (Tailwind CSS):
1. Kontener główny: Szerokość max-w-7xl, marginesy na auto (mx-auto), padding z góry (np. pt-12).
2. Układ siatki (Grid): Na desktopie (lg) podziel stronę na dwie kolumny. Lewa kolumna (treść artykułu) powinna zajmować około 65-70% szerokości (np. `lg:col-span-8`), a prawa kolumna (sidebar) około 30-35% (np. `lg:col-span-4`). Na urządzeniach mobilnych ma to być jedna kolumna (`flex-col` lub `grid-cols-1`).

LEWA KOLUMNA (Treść posta - Portable Text):
1. Zarezerwuj miejsce na wyrenderowanie treści z Sanity (np. `<PortableText value={post.body} />`).
2. Nadaj klasę `prose prose-lg` (z @tailwindcss/typography), aby odpowiednio sformatować tekst.
3. *Bonus*: Pierwsza litera pierwszego akapitu powinna mieć styl "Drop Cap" (duża litera na początku). Dodaj w CSS Tailwind klasę w stylu: `first-letter:text-5xl first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:mt-[-4px]`.

PRAWA KOLUMNA (Sidebar / Metadane):
Ma być przyklejona do góry podczas scrollowania (`sticky top-8`). Powinna zawierać następujące bloki oddzielone delikatnymi liniami (`border-b border-gray-200 pb-6 mb-6`):
1. Spis treści (Table of Contents - zostaw na to po prostu placeholder typu `<ul>` z kilkoma linkami wzorowanymi na designie: "Introduction", "How you work", "What's next").
2. Sekcja "Written by":
   - Mały, dyskretny nagłówek "Written by" (text-sm, text-gray-500).
   - Pod spodem komponent lub kod wyświetlający Autora z Sanity.
   - Układ flex: okrągły awatar autora (Image z Next.js, zaokrąglone rogi `rounded-full`, rozmiar ok. size-12).
   - Obok awatara: Imię i Nazwisko autora (font-semibold, text-gray-900) oraz jego rola/stanowisko pod spodem (text-sm, text-gray-500).
   - W danych z Sanity autor znajduje się pod `post.author.name`, `post.author.image` oraz (jeśli istnieje) `post.author.role`.
3. Informacje dodatkowe: Dodaj tutaj dyskretnie Datę Publikacji (`post.publishDate`) oraz Czas czytania (jeśli występuje w schemacie).

Zwróć mi kompletny kod w React/Next.js z Tailwind CSS, który mogę zaimplementować w pliku renderującym pojedynczego posta (np. `PostPage.tsx`). Zadbaj o doskonałą spójność wizualną (dobrze dobrane marginesy, czyste szarości z palety tailwinda).
```