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>
This commit is contained in:
parent
7a2c174c24
commit
c93279fe35
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue