Aplicar estructura Tailwind CSS Plus: contenedores consistentes y espaciado mejorado

Author: NeftaliYagua

index.html

@@ -2,7 +2,8 @@
 layout: page
 title: "Inicio"
 ---
-<div class="bg-gradient-to-br from-stone-900 via-stone-800 to-stone-900 jumbotron px-20 py-20 flex overflow-hidden relative">
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 -mt-8 -mb-8">
+<div class="bg-gradient-to-br from-stone-900 via-stone-800 to-stone-900 rounded-2xl px-8 sm:px-12 lg:px-20 py-16 sm:py-20 lg:py-24 flex overflow-hidden relative">
   <div class="absolute inset-0 opacity-10">
     <div class="absolute inset-0" style="background-image: url('/assets/img/pattern.png'); background-repeat: repeat;"></div>
   </div>
@@ -37,9 +38,10 @@ <h1 class="text-6xl font-bold mb-6 mt-2 leading-tight">
       <img src="/images/hero-thumb.png" class="w-full max-w-lg drop-shadow-2xl" />
   </div>
 </div>
+</div>
 
-<section class="bg-white dark:bg-gray-900 py-16">
-    <div class="max-w-screen-xl px-4 mx-auto">
+<section class="bg-white dark:bg-gray-900 py-16 sm:py-20 lg:py-24">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-12">
         <h2 class="text-4xl font-bold text-stone-800 mb-4">Casa de Software desde 2004</h2>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto">
@@ -72,8 +74,8 @@ <h3 class="text-2xl font-bold text-stone-900 mb-3">Comunidad Global</h3>
     </div>
   </section>
 
-  <section class="bg-stone-50 py-16">
-    <div class="max-w-screen-xl px-4 mx-auto">
+  <section class="bg-stone-50 py-16 sm:py-20 lg:py-24 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl">
       <div class="text-center mb-12">
         <h2 class="text-4xl font-bold text-stone-900 mb-6">Nuestro Ecosistema</h2>
         <p class="text-xl text-stone-800 max-w-3xl mx-auto mb-8">