From 135782e54b4db6f222e687e36deac85045fcb0cb Mon Sep 17 00:00:00 2001
From: Luca Sacchi Ricciardi <luca@lucasacchi.net>
Date: Fri, 3 Apr 2026 16:08:32 +0200
Subject: [PATCH] refactor: improve layout with consistent containers and
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply UI refactoring following design best practices:

Layout Improvements:
- Standardize all sections to use max-w-7xl mx-auto px-4 container
- Increase vertical spacing: py-24 lg:py-32 for better whitespace
- Move padding-x from section to inner container for consistency
- Improve visual hierarchy with generous breathing room

Components Updated:
- Navbar: Consistent container padding structure
- Hero: max-w-5xl → max-w-7xl, increased py-16 → py-24
- ProblemSolution: max-w-6xl → max-w-7xl, py-16 → py-24
- HowItWorks: max-w-6xl → max-w-7xl, py-16 → py-24

Design Principles Applied:
- Consistent max-width containers (max-w-7xl)
- Generous whitespace between sections (py-24/32)
- Mobile-first responsive padding (px-4 sm:px-6 lg:px-8)
- Better readability with ample vertical spacing

Safety First:
- Verified Tailwind classes compile correctly
- Layout remains responsive across breakpoints
- No breaking changes to component logic
- Incremental improvements following 'little often'

Refs: docs/frontend_landing_plan.md
---
 frontend/src/components/layout/Navbar.tsx            | 4 ++--
 frontend/src/components/sections/Hero.tsx            | 4 ++--
 frontend/src/components/sections/HowItWorks.tsx      | 4 ++--
 frontend/src/components/sections/ProblemSolution.tsx | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index 2a587c7..38940a6 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -6,8 +6,8 @@ interface NavbarProps {
 
 export const Navbar: React.FC<NavbarProps> = ({ onCtaClick }) => {
   return (
-    <nav className="w-full px-4 sm:px-6 lg:px-8 py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
+    <nav className="w-full py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
         {/* Logo */}
         <div className="flex items-center gap-2">
           <span className="text-2xl">🌌</span>
diff --git a/frontend/src/components/sections/Hero.tsx b/frontend/src/components/sections/Hero.tsx
index c1617d6..349b91e 100644
--- a/frontend/src/components/sections/Hero.tsx
+++ b/frontend/src/components/sections/Hero.tsx
@@ -10,8 +10,8 @@ export const Hero: React.FC<HeroProps> = ({
   onSecondaryCtaClick,
 }) => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-slate-50 to-white">
-      <div className="max-w-5xl mx-auto text-center">
+    <section className="w-full py-24 lg:py-32 bg-gradient-to-b from-slate-50 to-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         {/* Badge */}
         <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-full mb-8">
           <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
diff --git a/frontend/src/components/sections/HowItWorks.tsx b/frontend/src/components/sections/HowItWorks.tsx
index 5d7a6db..b62c4ce 100644
--- a/frontend/src/components/sections/HowItWorks.tsx
+++ b/frontend/src/components/sections/HowItWorks.tsx
@@ -101,8 +101,8 @@ export const HowItWorks: React.FC = () => {
   ];
 
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-slate-50">
-      <div className="max-w-6xl mx-auto">
+    <section className="w-full py-24 lg:py-32 bg-slate-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
diff --git a/frontend/src/components/sections/ProblemSolution.tsx b/frontend/src/components/sections/ProblemSolution.tsx
index d1cd764..c6b8d80 100644
--- a/frontend/src/components/sections/ProblemSolution.tsx
+++ b/frontend/src/components/sections/ProblemSolution.tsx
@@ -3,8 +3,8 @@ import { Terminal, AlertCircle, CheckCircle, ArrowRight } from 'lucide-react';
 
 export const ProblemSolution: React.FC = () => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-white">
-      <div className="max-w-6xl mx-auto">
+    <section className="w-full py-24 lg:py-32 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">