blog ui fixes

apps/web/src/app/blog/[slug]/page.tsx

@@ -88,18 +88,17 @@ function PostHeader({ post }: { post: Post }) {
 	});
 
 	return (
-		<>
+		<div className="flex flex-col items-center justify-center gap-8">
-			{post.coverImage && <PostCoverImage post={post} />}
 			<PostMeta date={formattedDate} publishedAt={post.publishedAt} />
 			<PostTitle title={post.title} />
-			<PostAuthor author={post.authors[0]} />
+			{post.coverImage && <PostCoverImage post={post} />}
-		</>
+		</div>
 	);
 }
 
 function PostCoverImage({ post }: { post: Post }) {
 	return (
-		<div className="relative aspect-video overflow-hidden rounded-lg">
+		<div className="relative aspect-video overflow-hidden rounded-lg w-full mt-4">
 			<Image
 				src={post.coverImage}
 				alt={post.title}
@@ -121,31 +120,13 @@ function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
 
 function PostTitle({ title }: { title: string }) {
 	return (
-		<h1 className="text-5xl font-bold tracking-tight md:text-4xl">{title}</h1>
+		<h1 className="text-5xl font-bold tracking-tight md:text-4xl text-center">{title}</h1>
-	);
-}
-
-function PostAuthor({ author }: { author?: Author }) {
-	if (!author) return null;
-
-	return (
-		<div className="flex items-center justify-center gap-2">
-			<Image
-				src={author.image}
-				alt={author.name}
-				width={36}
-				height={36}
-				loading="eager"
-				className="aspect-square size-8 shrink-0 rounded-full"
-			/>
-			<p className="text-muted-foreground">{author.name}</p>
-		</div>
 	);
 }
 
 function PostContent({ html }: { html: string }) {
 	return (
-		<section className="pt-8">
+		<section className="">
 			<Prose html={html} />
 		</section>
 	);

apps/web/src/components/ui/prose.tsx

@@ -10,7 +10,7 @@ function Prose({ children, html, className }: ProseProps) {
 	return (
 		<article
 			className={cn(
-				"prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify dark:prose-invert mx-auto max-w-none",
+				"prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:first:mt-0 dark:prose-invert mx-auto max-w-none px-2",
 				className,
 			)}
 		>