Setup container system for all pages with max-width constraint while maintaining full-width backgrounds

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

app/assets/stylesheets/theme.css

@@ -169,7 +169,6 @@ p {
   cursor: pointer;
   border-radius: var(--radius-lg);
   transition: all var(--duration-normal) var(--ease-out);
-  text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
 }

app/views/components/_header.html.erb

@@ -63,11 +63,11 @@
           </div>
         <% else %>
           <%= link_to new_user_session_path,
-              class: "text-gray-700 hover:text-brand-primary px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200" do %>
+              class: "text-gray-700 hover:text-brand-primary px-6 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap" do %>
             Se connecter
           <% end %>
           <%= link_to new_user_registration_path,
-              class: "bg-gray-900 text-white font-semibold py-2 px-6 rounded-full hover:bg-gray-800 transition-colors duration-200 shadow-lg hover:shadow-xl" do %>
+              class: "bg-gray-900 text-white font-semibold py-2 px-8 rounded-full hover:bg-gray-800 transition-colors duration-200 shadow-lg hover:shadow-xl whitespace-nowrap" do %>
             S'inscrire
           <% end %>
         <% end %>

app/views/events/index.html.erb

@@ -1,4 +1,4 @@
-<div class="container mx-auto px-4 py-8">
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   <!-- Breadcrumb -->
     <!-- Breadcrumb -->
     <%= render 'components/breadcrumb', crumbs: [

app/views/layouts/application.html.erb

@@ -64,7 +64,7 @@
       </main>
 
       <footer class="bg-gray-900 text-white py-16">
-        <div class="container mx-auto px-4">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <%= render "components/footer" %>
         </div>
       </footer>

app/views/pages/dashboard.html.erb

@@ -1,4 +1,4 @@
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   <!-- Page Header -->
   <div class="mb-8">
     <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">

app/views/pages/home.html.erb

@@ -1,11 +1,11 @@
 <% content_for :title, "Aperonight - Découvrez les meilleurs événements après-travail" %>
 
 <!-- Hero Section -->
-<section class="relative bg-gradient-primary min-h-screen flex items-center overflow-hidden">
+<section class="relative bg-gradient-primary flex items-center overflow-hidden">
   <!-- Background overlay -->
   <div class="absolute inset-0 bg-black bg-opacity-30 z-10"></div>
 
-  <div class="relative z-20 container mx-auto px-4 py-16 lg:py-24">
+  <div class="relative z-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
       <!-- Hero Content -->
       <div class="text-center lg:text-left text-white">
@@ -68,7 +68,7 @@
 
 <!-- Featured Events Section -->
 <section class="py-16 bg-white">
-  <div class="container mx-auto px-4">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Section Header -->
     <div class="text-center mb-12">
       <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
@@ -173,7 +173,7 @@
 
 <!-- Site Metrics Section -->
 <section class="py-16 bg-gray-50">
-  <div class="container mx-auto px-4">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-12">
       <h2 class="text-3xl font-bold text-gray-900 mb-4">
         LA PLATEFORME DE RÉFÉRENCE
@@ -220,7 +220,7 @@
   <!-- Background decoration -->
   <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
 
-  <div class="relative container mx-auto px-4 text-center">
+  <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
     <h2 class="text-3xl lg:text-4xl font-bold text-white mb-6">
       Prêt à découvrir votre prochain événement ?
     </h2>

app/views/promoter/events/index.html.erb

@@ -1,6 +1,6 @@
 <% content_for(:title, "Mes événements") %>
 
-<div class="container py-8">
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   <div class="mb-8 flex items-center justify-between">
     <div>
       <h1 class="text-3xl font-bold text-gray-900 mb-2">Mes événements</h1>

app/views/promoter/events/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for(:title, @event.name) %>
 
-<div class="container py-8">
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   <!-- Header with actions -->
   <div class="mb-8">
     <div class="flex items-center justify-between">

app/views/promoter/ticket_types/index.html.erb

@@ -1,6 +1,6 @@
 <% content_for(:title, "Types de billets - #{@event.name}") %>
 
-<div class="container py-8">
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   <div class="mb-8">
     <div class="flex items-center space-x-4 mb-4">
       <%= link_to promoter_event_path(@event), class: "text-gray-400 hover:text-gray-600 transition-colors" do %>