style: update documentation layout and improve component styles

- Adjusted layout to use max-width of `screen-2xl` for better responsiveness.
- Enhanced text clarity by updating font sizes and margins in various sections.
- Refined button styles for a more cohesive design and improved hover effects.
- Removed unnecessary whitespace for cleaner code and improved readability.

Author: BunsDev

packages/docs/app/page.tsx

@@ -7,7 +7,7 @@ function CodeWindow({ filename, children }: { filename: string; children: React.
     <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/20">
       {/* Glow effect */}
       <div className="absolute -inset-1 bg-gradient-to-r from-violet-600/20 via-purple-600/20 to-fuchsia-600/20 rounded-2xl blur-xl opacity-50" />
-      
+
       <div className="relative bg-[#1a1b26] rounded-2xl overflow-hidden border border-white/10">
         {/* Window chrome */}
         <div className="flex items-center gap-3 px-4 py-3 bg-[#16161e] border-b border-white/5">
@@ -18,7 +18,7 @@ function CodeWindow({ filename, children }: { filename: string; children: React.
           </div>
           <span className="text-sm font-medium text-zinc-400">{filename}</span>
         </div>
-        
+
         {/* Code content */}
         <div className="p-5 font-mono text-[13px] leading-6 overflow-x-auto">
           {children}
@@ -173,57 +173,52 @@ export default function HomePage() {
           <div className="absolute top-40 right-1/4 w-[400px] h-[400px] bg-gradient-to-br from-primary/30 to-primary/15 rounded-full blur-3xl animate-float" style={{ animationDelay: '2s' }} />
           <div className="absolute -bottom-20 left-1/3 w-[600px] h-[300px] bg-gradient-to-br from-primary/15 to-primary/5 rounded-full blur-3xl animate-float" style={{ animationDelay: '4s' }} />
         </div>
-        
+
         <div className="container py-24 md:py-32 lg:py-40">
-          <div className="mx-auto max-w-4xl text-center">
+          <div className="mx-auto max-w-screen-2xl text-center">
             {/* Glass badge */}
             <div className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm text-muted-foreground mb-8 bg-background/60 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg">
               <Sparkles className="h-4 w-4 text-violet-500" />
               <span>Block-based markdown for the modern web</span>
             </div>
-            
+
             <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
               Parse, create &{' '}
               <span className="relative inline-block">
                 <span className="text-primary">
                   serialize
                 </span>
                 <svg className="absolute -bottom-2 left-0 w-full" viewBox="0 0 200 8" fill="none">
-                  <path d="M1 5.5Q50 1 100 5.5T199 5.5" stroke="currentColor" className="text-primary" strokeWidth="2" strokeLinecap="round"/>
+                  <path d="M1 5.5Q50 1 100 5.5T199 5.5" stroke="currentColor" className="text-primary" strokeWidth="2" strokeLinecap="round" />
                 </svg>
               </span>
               <br />
               markdown with ease
             </h1>
-            
-            <p className="mt-8 text-lg text-muted-foreground md:text-xl max-w-2xl mx-auto leading-relaxed">
-              A clean, block-based API for working with markdown. 
-              Zero dependencies. Full TypeScript support. Built for modern frameworks.
+
+            <p className="mt-8 text-lg text-muted-foreground md:text-xl max-w-4xl mx-auto leading-relaxed">
+              Block-based API for working with markdown.
+              Zero dependencies. TypeScript support. Built for modern frameworks.
             </p>
-            
-            {/* CTA buttons - Glassmorphic */}
+
+            {/* CTA buttons */}
             <div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link
                 href="/docs"
-                className="group relative inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium overflow-hidden transition-all duration-300 hover:scale-105 bg-primary text-primary-foreground shadow-lg hover:shadow-xl"
+                className="inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-600/25 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-300 hover:scale-105"
               >
-                {/* Glow effect */}
-                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary/80 blur-xl" />
-                {/* Content */}
-                <span className="relative flex items-center">
-                  Get Started
-                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </span>
+                Get Started
+                <ArrowRight className="ml-2 h-4 w-4" />
               </Link>
-              
+
               <Link
                 href="https://github.com/BunsDev/create-markdown"
-                className="group inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium bg-background/60 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg hover:bg-background/80 hover:border-white/30 hover:shadow-xl transition-all duration-300"
+                className="inline-flex items-center justify-center rounded-xl px-8 py-4 text-sm font-medium bg-zinc-800 hover:bg-zinc-700 text-white border border-zinc-700 hover:border-zinc-600 shadow-lg transition-all duration-300"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <svg className="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
                 </svg>
                 View on GitHub
               </Link>
@@ -236,14 +231,14 @@ export default function HomePage() {
       <section className="relative py-20 md:py-28 overflow-hidden">
         {/* Background gradient */}
         <div className="absolute inset-0 bg-gradient-to-b from-muted/50 via-muted/30 to-transparent" />
-        
+
         <div className="container relative">
-          <div className="mx-auto max-w-4xl">
+          <div className="mx-auto max-w-screen-2xl">
             <div className="text-center mb-14">
               <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
                 Simple, intuitive API
               </h2>
-              <p className="mt-4 text-muted-foreground text-lg max-w-xl mx-auto">
+              <p className="mt-4 text-muted-foreground text-lg max-w-screen-2xl mx-auto">
                 Parse markdown to blocks, manipulate them, and serialize back to markdown.
               </p>
             </div>
@@ -255,19 +250,19 @@ export default function HomePage() {
       {/* Bento Grid - Code Examples */}
       <section className="py-20 md:py-28">
         <div className="container">
-          <div className="mx-auto max-w-6xl">
+          <div className="mx-auto max-w-screen-2xl">
             <div className="text-center mb-14">
               <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                The complete workflow
+                Complete Workflow
               </h2>
               <p className="mt-4 text-muted-foreground text-lg">
                 From parsing to creation to serialization — all with type safety.
               </p>
             </div>
-            
+
             {/* Bento Grid */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-min">
-              
+
               {/* Parse - Large card spanning 2 rows on lg */}
               <div className="lg:row-span-2 group">
                 <div className="h-full rounded-3xl bg-gradient-to-br from-violet-500/10 to-purple-600/5 border border-white/10 p-6 transition-all duration-300 hover:border-violet-500/30 hover:shadow-lg hover:shadow-violet-500/10">
@@ -286,7 +281,7 @@ export default function HomePage() {
                   <ParseCodeBlock />
                 </div>
               </div>
-              
+
               {/* Create - Regular card */}
               <div className="group">
                 <div className="h-full rounded-3xl bg-gradient-to-br from-blue-500/10 to-cyan-500/5 border border-white/10 p-6 transition-all duration-300 hover:border-blue-500/30 hover:shadow-lg hover:shadow-blue-500/10">
@@ -305,7 +300,7 @@ export default function HomePage() {
                   <CreateCodeBlock />
                 </div>
               </div>
-              
+
               {/* Serialize - Regular card */}
               <div className="group">
                 <div className="h-full rounded-3xl bg-gradient-to-br from-emerald-500/10 to-green-500/5 border border-white/10 p-6 transition-all duration-300 hover:border-emerald-500/30 hover:shadow-lg hover:shadow-emerald-500/10">
@@ -324,7 +319,7 @@ export default function HomePage() {
                   <SerializeCodeBlock />
                 </div>
               </div>
-              
+
               {/* Feature highlights - spans 2 columns */}
               <div className="md:col-span-2 group">
                 <div className="h-full rounded-3xl bg-gradient-to-r from-amber-500/10 via-orange-500/5 to-rose-500/10 border border-white/10 p-6 transition-all duration-300 hover:border-amber-500/30">
@@ -359,7 +354,7 @@ export default function HomePage() {
                   </div>
                 </div>
               </div>
-              
+
             </div>
           </div>
         </div>
@@ -368,14 +363,14 @@ export default function HomePage() {
       {/* Features Grid - Glassmorphic */}
       <section className="py-20 md:py-28">
         <div className="container">
-          <div className="mx-auto max-w-5xl">
+          <div className="mx-auto max-w-screen-2xl">
             <h2 className="text-center text-3xl font-bold tracking-tight sm:text-4xl">
               Everything you need
             </h2>
             <p className="mt-4 text-center text-muted-foreground text-lg">
               A complete toolkit for working with markdown in modern applications.
             </p>
-            
+
             <div className="mt-14 grid gap-6 sm:grid-cols-2">
               {features.map((feature) => (
                 <div
@@ -384,10 +379,10 @@ export default function HomePage() {
                 >
                   {/* Glass background */}
                   <div className="absolute inset-0 bg-background/60 dark:bg-background/40 backdrop-blur-xl border border-white/20 dark:border-white/10 rounded-2xl" />
-                  
+
                   {/* Gradient hover effect */}
                   <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl`} />
-                  
+
                   {/* Content */}
                   <div className="relative">
                     <div className={`h-12 w-12 rounded-xl bg-gradient-to-br ${feature.gradient} backdrop-blur-sm border border-white/20 flex items-center justify-center shadow-lg`}>
@@ -398,7 +393,7 @@ export default function HomePage() {
                       {feature.description}
                     </p>
                   </div>
-                  
+
                   {/* Inner ring */}
                   <div className="absolute inset-0 pointer-events-none rounded-2xl ring-1 ring-inset ring-white/10" />
                 </div>
@@ -412,30 +407,30 @@ export default function HomePage() {
       <section className="relative py-20 md:py-28 overflow-hidden">
         {/* Background gradient */}
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-muted/30 to-muted/50" />
-        
+
         <div className="container relative">
-          <div className="mx-auto max-w-2xl text-center">
+          <div className="mx-auto max-w-screen-2xl text-center">
             <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
               Ready to get started?
             </h2>
             <p className="mt-4 text-muted-foreground text-lg">
               Install create-markdown and start building in minutes.
             </p>
-            
+
             {/* Glassmorphic install command */}
             <div className="mt-10 inline-block rounded-2xl overflow-hidden">
               <div className="relative">
                 {/* Gradient border */}
                 <div className="absolute -inset-[1px] bg-primary rounded-2xl opacity-30" />
-                
+
                 <div className="relative bg-background/80 dark:bg-card/80 backdrop-blur-xl border border-white/10 rounded-2xl px-8 py-4">
                   <code className="font-mono text-sm sm:text-base text-primary font-medium">
                     bun add create-markdown
                   </code>
                 </div>
               </div>
             </div>
-            
+
             <div className="mt-10">
               <Link
                 href="/docs"
@@ -455,7 +450,7 @@ export default function HomePage() {
       {/* Footer - Glassmorphic */}
       <footer className="relative border-t border-white/10 py-10">
         <div className="absolute inset-0 bg-background/50 backdrop-blur-xl" />
-        
+
         <div className="container relative">
           <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
             <p className="text-sm text-muted-foreground">