update styles for consistency

Signed-off-by: rishichawda <[email protected]>

Author: rishichawda

src/pages/bits/[slug].astro

@@ -50,60 +50,79 @@ function formatDate(date: Date): string {
 		keywords: bit.data.tags?.join(', ') || bit.data.title,
 	}}
 >
-	<main class="min-h-screen bg-gradient-to-br from-brand-50/30 via-white to-brand-100/40">
-		<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20">
-			{/* Back Button */}
-			<a
-				href="/bits/"
-				class="group inline-flex items-center px-6 py-3 bg-white/90 backdrop-blur-sm border border-brand-200/50 rounded-xl text-brand-700 hover:text-brand-600 hover:bg-white hover:shadow-lg transition-all duration-300 font-['Montserrat_Variable'] text-sm font-medium mb-8"
+	<main class="flex flex-col mx-auto items-center">
+		<a
+			href="/bits/"
+			class="group inline-flex items-center px-6 py-3 bg-white/90 backdrop-blur-sm border border-brand-200/50 rounded-xl text-brand-700 hover:text-brand-600 hover:bg-white hover:shadow-lg transition-all duration-300 font-['Montserrat_Variable'] text-sm font-medium mt-10"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4 mr-2 group-hover:-translate-x-1 transition-transform duration-300"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4 mr-2 group-hover:-translate-x-1 transition-transform duration-300"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-					stroke-width="2"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M10 19l-7-7m0 0l7-7m-7 7h18"
-					></path>
-				</svg>
-				Back to bits
-			</a>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M10 19l-7-7m0 0l7-7m-7 7h18"
+				></path>
+			</svg>
+			Back to bits
+		</a>
 
-			{/* Bit Content */}
-			<article class="bg-white rounded-2xl shadow-lg border border-brand-100/50 p-8 sm:p-10 lg:p-12 mb-12">
-				{/* Date */}
-				<p class="font-['Montserrat_Variable'] text-brand-500 mb-4 text-sm font-medium uppercase tracking-wider">
-					{formatDate(bit.data.date)}
-				</p>
-				
-				{/* Title */}
-				<h1 class="text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 mb-6 font-['Red_Hat_Display_Variable'] leading-tight">
+		<article class="max-w-[90%] flex flex-col mx-auto items-center pt-8">
+			<div class="inline-flex flex-col justify-start items-center gap-2.5 mb-4">
+				<h1 class="justify-start text-black text-3xl md:text-4xl text-center font-semibold font-['Red_Hat_Display_Variable'] leading-tight mb-2">
 					{bit.data.title}
 				</h1>
-				
-				{/* Tags */}
-				{bit.data.tags && bit.data.tags.length > 0 && (
-					<div class="flex flex-wrap gap-2 mb-8 pb-8 border-b border-gray-200">
-						{bit.data.tags.map((tag) => (
-							<span class="text-sm font-['Montserrat_Variable'] text-brand-600 bg-brand-100/50 px-3 py-1.5 rounded-full">
-								{tag}
-							</span>
+			</div>
+			
+			<div class="inline-flex items-center gap-3 mb-8 flex-wrap justify-center">
+				<div class="inline-flex items-center gap-1.5 px-3 py-1 bg-gray-100 rounded-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-3.5 w-3.5 text-gray-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						></path>
+					</svg>
+					<small class="text-gray-700 text-xs font-medium font-['Montserrat_Variable'] leading-tight">
+						{formatDate(bit.data.date)}
+					</small>
+				</div>
+			</div>
+
+		{bit.data.tags && bit.data.tags.length > 0 && (
+			<div class="w-full md:max-w-[790px] mb-10">
+				<div class="inline-flex w-full px-2 justify-center items-center">
+					<div class="inline-flex justify-center items-center gap-2 flex-wrap">
+						{bit.data.tags.map((tag: string) => (
+							<div class="px-3 py-1 bg-brand-500 rounded-md inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
+								<span class="justify-start bg-brand-500 text-white text-xs font-medium font-['Montserrat_Variable'] leading-tight">
+									{tag}
+								</span>
+							</div>
 						))}
 					</div>
-				)}
-				
-				{/* Content */}
+				</div>
+			</div>
+		)}			<div class="mb-20 font-['Montserrat_Variable'] max-w-full lg:flex lg:flex-row lg:gap-4">
 				<Prose>
 					<Content components={{ a: ExternalLink }} />
 				</Prose>
-			</article>
+			</div>
+		</article>
 
-			{/* Navigation */}
+		<div class="max-w-[90%] mx-auto mb-12">
 			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 				{prevBit ? (
 					<a