From c93279fe3522772ae328b5a2ffa7820062c93af4 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 25 Jan 2026 22:50:18 +0100
Subject: [PATCH] Fix spacing and centering throughout the site

- Standardize section header spacing (mb-12 after headers)
- Fix divider alignment (ml-0 instead of mx-0 for left-aligned text)
- Add proper button centering with flex justify-center items-center
- Increase spacing between content and CTAs (mb-10, mb-12, mb-14)
- Wrap buttons in proper centering containers
- Consistent heading margins (mb-6 before dividers)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/page.tsx | 98 ++++++++++++++++++++++++++----------------------
 1 file changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ba248e5..588bf30 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -90,11 +90,11 @@ function HeroSection() {
           XIMENA XAGUAR
         </h1>
         <div className="divider fade-in stagger-2"></div>
-        <p className="text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed opacity-80 fade-in stagger-2">
+        <p className="text-lg md:text-xl max-w-2xl mx-auto mb-14 leading-relaxed opacity-80 fade-in stagger-2">
           Working at the intersection of art, ritual and embodied presence, creating experiences
           that support clarity, integration, exploration and transformation.
         </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center fade-in stagger-3">
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center fade-in stagger-3">
           <Link href="#art" className="btn-outline">
             Explore Art & Ritual Sessions
           </Link>
@@ -137,19 +137,21 @@ function RitualArtSection() {
             <h2 className="text-4xl md:text-5xl font-light mb-6">
               Ritual Art Alchemy
             </h2>
-            <div className="divider md:mx-0"></div>
+            <div className="divider md:ml-0"></div>
             <p className="text-lg leading-relaxed mb-6 opacity-80">
               My art is my ritual — a journey of transformation. Each painting emerges from
               cycles of death and rebirth, shadow work, intuitive vision and ancestral memory.
             </p>
-            <p className="text-lg leading-relaxed mb-8 opacity-80">
+            <p className="text-lg leading-relaxed mb-10 opacity-80">
               Through symbolic language and universal cosmovision, I translate inner processes
               into living images. These artworks are not objects. They are portals. Allies for
               emotional integration, transformation, spiritual insight and energetic coherence.
             </p>
-            <Link href="#gallery" className="btn-outline">
-              Enter the Gallery
-            </Link>
+            <div className="md:text-left">
+              <Link href="#gallery" className="btn-outline">
+                Enter the Gallery
+              </Link>
+            </div>
           </div>
         </div>
       </div>
@@ -177,11 +179,11 @@ function GallerySection() {
   return (
     <section id="gallery" className="section bg-[var(--bg-cream)]">
       <div className="max-w-7xl mx-auto">
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
             GALLERY
           </p>
-          <h2 className="text-4xl md:text-5xl font-light mb-4">
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
             Visionary Artworks
           </h2>
           <div className="divider"></div>
@@ -244,11 +246,11 @@ function ServicesSection() {
   return (
     <section id="services" className="section">
       <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
             OFFERINGS
           </p>
-          <h2 className="text-4xl md:text-5xl font-light mb-4">
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
             Ritual Healing & Integration
           </h2>
           <div className="divider"></div>
@@ -286,7 +288,7 @@ function ServicesSection() {
           ))}
         </div>
 
-        <div className="text-center mt-12">
+        <div className="flex justify-center mt-16">
           <Link href="#contact" className="btn-outline">
             Book a Session
           </Link>
@@ -324,7 +326,7 @@ function ReEvolutionSection() {
   return (
     <section id="reevolution" className="section dark-section">
       <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           {/* Logo */}
           <div className="relative w-32 h-32 mx-auto mb-6">
             <Image
@@ -337,7 +339,7 @@ function ReEvolutionSection() {
           <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
             CULTURAL PLATFORM
           </p>
-          <h2 className="text-4xl md:text-5xl font-light mb-4">
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
             Re Evolution Art
           </h2>
           <div className="divider"></div>
@@ -370,7 +372,7 @@ function ReEvolutionSection() {
           ))}
         </div>
 
-        <div className="text-center mt-12">
+        <div className="flex justify-center mt-16">
           <Link href="#" className="btn-outline btn-outline-light">
             Explore Events
           </Link>
@@ -400,11 +402,11 @@ function TestimonialsSection() {
   return (
     <section className="section bg-white">
       <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
             TESTIMONIALS
           </p>
-          <h2 className="text-4xl md:text-5xl font-light mb-4">
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
             Words of Gratitude
           </h2>
           <div className="divider"></div>
@@ -441,18 +443,20 @@ function AboutSection() {
             <h2 className="text-4xl md:text-5xl font-light mb-6">
               About Ximena
             </h2>
-            <div className="divider md:mx-0"></div>
+            <div className="divider md:ml-0"></div>
             <p className="text-lg leading-relaxed mb-6 opacity-80">
               Years dedicated to work in Bolivia, Peru and Switzerland shaped this path through
               emotional integration, somatic healing and ceremonial support.
             </p>
-            <p className="text-lg leading-relaxed mb-8 opacity-80">
+            <p className="text-lg leading-relaxed mb-10 opacity-80">
               A beautiful, talented artist rooted in ancestral culture and land connection —
               healer, visionary artist, mother and friend — providing deep support through inner work.
             </p>
-            <Link href="#contact" className="btn-outline">
-              Connect
-            </Link>
+            <div className="md:text-left">
+              <Link href="#contact" className="btn-outline">
+                Connect
+              </Link>
+            </div>
           </div>
 
           {/* Portrait */}
@@ -510,16 +514,18 @@ function AboutSection() {
 function WorkWithMeSection() {
   return (
     <section className="section darker-section">
-      <div className="max-w-3xl mx-auto text-center">
-        <h2 className="text-4xl md:text-5xl font-light mb-6">
-          Work With Me
-        </h2>
-        <div className="divider"></div>
-        <p className="text-lg leading-relaxed mb-10 opacity-80">
-          This work is for those ready to meet themselves honestly with courage,
-          sensitivity and presence.
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+      <div className="max-w-3xl mx-auto">
+        <div className="text-center">
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
+            Work With Me
+          </h2>
+          <div className="divider"></div>
+          <p className="text-lg leading-relaxed mb-12 opacity-80 max-w-2xl mx-auto">
+            This work is for those ready to meet themselves honestly with courage,
+            sensitivity and presence.
+          </p>
+        </div>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
           <Link href="#contact" className="btn-outline btn-outline-light">
             Book a Session
           </Link>
@@ -536,18 +542,20 @@ function WorkWithMeSection() {
 function ContactSection() {
   return (
     <section id="contact" className="section bg-white">
-      <div className="max-w-4xl mx-auto text-center">
-        <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
-          GET IN TOUCH
-        </p>
-        <h2 className="text-4xl md:text-5xl font-light mb-6">
-          Begin Your Journey
-        </h2>
-        <div className="divider"></div>
-        <p className="text-lg leading-relaxed mb-10 opacity-80 max-w-2xl mx-auto">
-          For inquiries about sessions, art commissions, or event collaborations,
-          please reach out through the form below or connect on social media.
-        </p>
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center">
+          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
+            GET IN TOUCH
+          </p>
+          <h2 className="text-4xl md:text-5xl font-light mb-6">
+            Begin Your Journey
+          </h2>
+          <div className="divider"></div>
+          <p className="text-lg leading-relaxed mb-12 opacity-80 max-w-2xl mx-auto">
+            For inquiries about sessions, art commissions, or event collaborations,
+            please reach out through the form below or connect on social media.
+          </p>
+        </div>
 
         {/* Contact Form */}
         <form className="max-w-lg mx-auto text-left">
@@ -584,7 +592,7 @@ function ContactSection() {
               placeholder="How can I support your journey?"
             />
           </div>
-          <button type="submit" className="btn-filled w-full">
+          <button type="submit" className="btn-filled w-full mt-2">
             Send Message
           </button>
         </form>