jeffemmett
/
xhivart-mirror
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Jeff Emmett 2026-01-25 22:50:18 +01:00
parent 7a2c174c24
commit c93279fe35
1 changed files with 53 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/page.tsx
View File

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