fix: center text content across all pages for optimal readability

- Fix homepage, pricing, features, and blog pages text alignment
- Replace problematic 'prose max-w-none' with centered prose classes
- Update all main content sections to use consistent container classes
- Add new prose-centered and prose-main-content CSS classes
- Ensure optimal reading width (max-w-4xl) with proper centering
- Standardize container usage across pricing page sections

Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: starbops

assets/css/custom.css

@@ -10,6 +10,16 @@
     @apply max-w-4xl mx-auto;
   }
 
+  /* Centered prose content with optimal reading width */
+  .prose-centered {
+    @apply max-w-4xl mx-auto text-left;
+  }
+  
+  /* Prose content specifically for main content sections */
+  .prose-main-content {
+    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16;
+  }
+  
   /* Ensure optimal reading line length for different screen sizes */
   .prose-content {
     @apply max-w-prose mx-auto px-4 sm:px-6 lg:px-8;

layouts/_default/features.html

@@ -212,8 +212,8 @@ <h3 class="text-xl font-heading font-bold text-gray-900">{{ .title }}</h3>
 {{ end }}
 
 {{/* Main Content */}}
-<div class="container mx-auto px-4 py-16">
-    <div class="prose max-w-none">
+<div class="container-consistent">
+    <div class="prose prose-main-content">
         {{ .Content }}
     </div>
 </div>

layouts/_default/pricing.html

@@ -3,14 +3,14 @@
 {{/* Hero Section */}}
 {{ with .Params.hero }}
 {{ if .enable }}
-<section class="section bg-gradient-to-b from-blue-50 to-white">
-    <div class="container">
-        <div class="text-center max-w-4xl mx-auto">
-            <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold text-gray-900 mb-6 leading-tight">
+<section class="section-content bg-gradient-to-b from-blue-50 to-white">
+    <div class="container-consistent">
+        <div class="text-center reading-width-wide">
+            <h1 class="responsive-title">
                 {{ .title | markdownify }}
             </h1>
             {{ with .subtitle }}
-            <p class="text-xl text-gray-600 leading-relaxed">
+            <p class="responsive-subtitle">
                 {{ . }}
             </p>
             {{ end }}
@@ -23,8 +23,8 @@ <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold text-gray-900
 {{/* Pricing Tiers */}}
 {{ with .Params.pricing_tiers }}
 {{ if .enable }}
-<section class="section bg-white">
-    <div class="container">
+<section class="section-content bg-white">
+    <div class="container-consistent">
         {{ with .tiers }}
         <div class="grid gap-8 lg:grid-cols-4">
             {{ range $tier := . }}
@@ -100,7 +100,7 @@ <h4 class="text-sm font-semibold text-gray-900 mb-3">Overage Pricing:</h4>
 {{ with .Params.feature_comparison }}
 {{ if .enable }}
 <section class="section bg-gray-50">
-    <div class="container">
+    <div class="container-consistent">
         <div class="text-center mb-16">
             <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                 {{ .title | markdownify }}
@@ -211,8 +211,8 @@ <h3 class="text-xl font-heading font-bold text-gray-900 mb-6 border-b border-gra
 {{/* FAQ Section */}}
 {{ with .Params.faq }}
 {{ if .enable }}
-<section class="section bg-white">
-    <div class="container">
+<section class="section-content bg-white">
+    <div class="container-consistent">
         <div class="text-center mb-16">
             <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                 {{ .title | markdownify }}
@@ -242,8 +242,8 @@ <h3 class="text-lg font-semibold text-gray-900 mb-3">{{ .question }}</h3>
 {{ end }}
 
 {{/* Main Content */}}
-<div class="container mx-auto px-4 py-16">
-    <div class="prose max-w-none">
+<div class="container-consistent">
+    <div class="prose prose-main-content">
         {{ .Content }}
     </div>
 </div>

layouts/_default/single.html

@@ -31,7 +31,7 @@ <h1 class="responsive-title mb-4">{{ .Title }}</h1>
             {{ end }}
 
             <!-- Content with optimal reading width -->
-            <div class="prose prose-lg reading-width-wide">
+            <div class="prose prose-lg prose-centered">
                 {{ .Content }}
             </div>
         </article>

layouts/index.html

@@ -50,8 +50,8 @@
 {{ end }}
 
 {{/* Main Content */}}
-<div class="container mx-auto px-4 py-16">
-    <div class="prose max-w-none">
+<div class="container-consistent">
+    <div class="prose prose-main-content">
         {{ .Content }}
     </div>
 </div>