From 56dc21fc77f4b8ecddd9bb240fd0f227aa2ad111 Mon Sep 17 00:00:00 2001
From: MacRimi <123239993+MacRimi@users.noreply.github.com>
Date: Sat, 15 Feb 2025 11:35:50 +0100
Subject: [PATCH] Update page.tsx

---
 web/app/guides/[slug]/page.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/app/guides/[slug]/page.tsx b/web/app/guides/[slug]/page.tsx
index cad2a64..0a5a2e6 100644
--- a/web/app/guides/[slug]/page.tsx
+++ b/web/app/guides/[slug]/page.tsx
@@ -38,9 +38,7 @@ export async function generateStaticParams() {
 }
 
 function wrapCodeBlocksWithCopyable(content: string) {
-  // Reemplazar los bloques de código con el componente CopyableCode
   const codeBlockRegex = /<pre><code>([\s\S]*?)<\/code><\/pre>/g
-
   return content.replace(codeBlockRegex, (match, code) => {
     return `<CopyableCode code={\`${code.replace(/`/g, "\\`")}\`} />`
   })
@@ -51,13 +49,23 @@ export default async function GuidePage({ params }: { params: { slug: string } }
   guideContent = wrapCodeBlocksWithCopyable(guideContent)
 
   return (
-    <div className="min-h-screen bg-white text-gray-900">
-      <div className="container mx-auto px-4 py-16 max-w-3xl">
+    <div className="min-h-screen bg-white">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-gray-900">
         <div
-          className="prose max-w-none"
+          className="prose prose-gray max-w-none
+            [&>h1]:text-3xl [&>h1]:sm:text-4xl [&>h1]:font-bold [&>h1]:mb-6
+            [&>h2]:text-2xl [&>h2]:font-semibold [&>h2]:mt-8 [&>h2]:mb-4
+            [&>h3]:text-xl [&>h3]:font-medium [&>h3]:mt-6 [&>h3]:mb-3
+            [&>p]:mb-4 [&>p]:text-gray-600
+            [&>ul]:list-disc [&>ul]:pl-5 [&>ul]:mb-4
+            [&>ul>li]:text-gray-600 [&>ul>li]:mb-2
+            [&>ol]:list-decimal [&>ol]:pl-5 [&>ol]:mb-4
+            [&>ol>li]:text-gray-600 [&>ol>li]:mb-2
+            [&>a]:text-blue-600 [&>a:hover]:underline"
           dangerouslySetInnerHTML={{ __html: guideContent }}
         />
       </div>
     </div>
   )
 }
+