Add all images from xhivart.ch and update page to display them

Images downloaded from original site:
- Hero: Main background image
- Art Gallery: 24+ visionary artworks (Goddess, Mujer Medicina, Shiva,
  Twin Flames, Soul Agreement, Madre, etc.)
- About: 5 portrait photos and Pachamama artwork
- Services: Crystal therapy, Temazcal, Deep integration photos
- Re Evolution Art: Event photos, DJ Xhiva, tribal nights, logo
- Icons: Navigation/footer decorative elements

Updated page.tsx:
- Added new GallerySection with interactive grid of artworks
- Hero section now uses background image with gradient overlay
- Services section shows photos above each service card
- Re Evolution Art section displays event photos and logo
- About section shows portrait with additional photo grid
- All images use Next.js Image component for optimization

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 // Navigation Component
 function Navigation() {
@@ -68,8 +69,20 @@ function Navigation() {
 // Hero Section
 function HeroSection() {
   return (
-    <section className="min-h-screen hero-gradient flex flex-col items-center justify-center text-center px-6 pt-20">
+    <section className="min-h-screen relative flex flex-col items-center justify-center text-center px-6 pt-20">
-      <div className="max-w-4xl mx-auto">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="/images/hero/hero-main.jpg"
+          alt="Ximena Xaguar"
+          fill
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-[var(--bg-cream)]/90 via-[var(--bg-cream)]/70 to-[var(--bg-cream)]/90" />
+      </div>
+
+      <div className="max-w-4xl mx-auto relative z-10">
         <p className="font-sans-alt text-xs tracking-[0.3em] text-[var(--text-muted)] mb-6 fade-in">
           MULTIDISCIPLINARY VISIONARY ARTIST
         </p>
@@ -92,7 +105,7 @@ function HeroSection() {
       </div>
 
       {/* Scroll indicator */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce opacity-50">
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce opacity-50 z-10">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
           <path d="M12 5v14M5 12l7 7 7-7"/>
         </svg>
@@ -107,9 +120,14 @@ function RitualArtSection() {
     <section id="art" className="section bg-white">
       <div className="max-w-6xl mx-auto">
         <div className="grid md:grid-cols-2 gap-12 items-center">
-          {/* Image placeholder */}
+          {/* Featured Art Image */}
-          <div className="img-placeholder aspect-[3/4] rounded-2xl">
+          <div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl">
-            <span>Visionary Art</span>
+            <Image
+              src="/images/art/featured.jpg"
+              alt="Visionary Art by Ximena Xaguar"
+              fill
+              className="object-cover"
+            />
           </div>
 
           <div className="text-center md:text-left">
@@ -129,7 +147,7 @@ function RitualArtSection() {
               into living images. These artworks are not objects. They are portals. Allies for
               emotional integration, transformation, spiritual insight and energetic coherence.
             </p>
-            <Link href="#" className="btn-outline">
+            <Link href="#gallery" className="btn-outline">
               Enter the Gallery
             </Link>
           </div>
@@ -139,6 +157,61 @@ function RitualArtSection() {
   );
 }
 
+// Art Gallery Section
+function GallerySection() {
+  const artworks = [
+    { src: '/images/art/goddess.webp', title: 'Goddess' },
+    { src: '/images/art/mujer-medicina.webp', title: 'Mujer Medicina' },
+    { src: '/images/art/shiva-main.webp', title: 'Shiva' },
+    { src: '/images/art/twin-flames.webp', title: 'Twin Flames' },
+    { src: '/images/art/soul-agreement.webp', title: 'Soul Agreement' },
+    { src: '/images/art/madre.webp', title: 'Madre' },
+    { src: '/images/art/warmy-munachi.webp', title: 'Warmy Munachi' },
+    { src: '/images/art/mi-uma.webp', title: 'Mi Uma' },
+    { src: '/images/art/re-evolucion-arte.webp', title: 'Re Evolución Arte' },
+    { src: '/images/art/mujer-ser.webp', title: 'Mujer Ser' },
+    { src: '/images/art/mural-bio-centro.webp', title: 'Mural Bio Centro Guembe' },
+    { src: '/images/art/arte-parque.webp', title: 'Arte Parque' },
+  ];
+
+  return (
+    <section id="gallery" className="section bg-[var(--bg-cream)]">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <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">
+            Visionary Artworks
+          </h2>
+          <div className="divider"></div>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {artworks.map((artwork, index) => (
+            <div
+              key={index}
+              className="relative aspect-square rounded-lg overflow-hidden group cursor-pointer"
+            >
+              <Image
+                src={artwork.src}
+                alt={artwork.title}
+                fill
+                className="object-cover transition-transform duration-500 group-hover:scale-110"
+              />
+              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-end justify-center pb-4">
+                <span className="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 font-sans-alt text-xs tracking-widest">
+                  {artwork.title}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 // Services Section
 function ServicesSection() {
   const services = [
@@ -148,6 +221,7 @@ function ServicesSection() {
       duration: 'Crystal reading / 1 hour',
       description: 'One-to-one sessions supporting nervous system regulation and emotional integration through crystal energetic work, elemental somatic presence and intuitive mapping addressing emotional, physical, mental and spiritual coherence.',
       color: 'lavender',
+      image: '/images/services/crystal-therapy.webp',
     },
     {
       title: 'Temazcal',
@@ -155,6 +229,7 @@ function ServicesSection() {
       duration: 'Fire - Earth - Water - Air',
       description: 'Sweatlodge ceremonies guided for 15+ years, rooted in Native American ancestral tradition. Working with four elements and four bodies (physical, emotional, mental, spiritual) within a contained ritual space supporting purification, closure and renewal.',
       color: 'mint',
+      image: '/images/services/temazcal.jpg',
     },
     {
       title: 'Deep Integration',
@@ -162,6 +237,7 @@ function ServicesSection() {
       duration: '2 Hours',
       description: 'Tailored container for life transitions, post-ceremonial integration or emotional transformation combining somatic work, crystal mapping, astrological and ritual guidance supporting embodiment of insight and conscious transformation.',
       color: 'rose',
+      image: '/images/services/deep-integration.webp',
     },
   ];
 
@@ -185,17 +261,27 @@ function ServicesSection() {
 
         <div className="grid md:grid-cols-3 gap-8">
           {services.map((service, index) => (
-            <div key={index} className={`service-card ${service.color}`}>
+            <div key={index} className="group">
-              <h3 className="text-2xl font-light mb-2">{service.title}</h3>
+              <div className="relative aspect-[4/3] rounded-t-xl overflow-hidden">
-              <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-1">
+                <Image
-                {service.subtitle}
+                  src={service.image}
-              </p>
+                  alt={service.title}
-              <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)] mb-6">
+                  fill
-                {service.duration}
+                  className="object-cover transition-transform duration-500 group-hover:scale-105"
-              </p>
+                />
-              <p className="text-sm leading-relaxed opacity-80">
+              </div>
-                {service.description}
+              <div className={`service-card ${service.color} rounded-t-none`}>
-              </p>
+                <h3 className="text-2xl font-light mb-2">{service.title}</h3>
+                <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-1">
+                  {service.subtitle}
+                </p>
+                <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)] mb-6">
+                  {service.duration}
+                </p>
+                <p className="text-sm leading-relaxed opacity-80">
+                  {service.description}
+                </p>
+              </div>
             </div>
           ))}
         </div>
@@ -216,18 +302,22 @@ function ReEvolutionSection() {
     {
       title: 'Tribal Nights',
       description: 'A signature event weaving ritual, dance and immersive art into one transformative experience.',
+      image: '/images/reevolution/tribal-night.jpg',
     },
     {
       title: 'Tribal Experience',
       description: 'Group immersion exploring the unconscious through shamanic journeying, art alchemy and embodied movement.',
+      image: '/images/reevolution/event-2.jpg',
     },
     {
       title: 'Visionary Art Week Zürich',
       description: 'Curated week featuring international artists, performances, live music, talks and workshops.',
+      image: '/images/reevolution/event-3.jpg',
     },
     {
       title: 'Future Gatherings',
       description: 'Experimental experiences weaving DJ sets with expanded states of presence.',
+      image: '/images/reevolution/dj-xhiva.jpg',
     },
   ];
 
@@ -235,6 +325,15 @@ function ReEvolutionSection() {
     <section id="reevolution" className="section dark-section">
       <div className="max-w-6xl mx-auto">
         <div className="text-center mb-16">
+          {/* Logo */}
+          <div className="relative w-32 h-32 mx-auto mb-6">
+            <Image
+              src="/images/reevolution/logo.png"
+              alt="Re Evolution Art Logo"
+              fill
+              className="object-contain"
+            />
+          </div>
           <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
             CULTURAL PLATFORM
           </p>
@@ -252,7 +351,15 @@ function ReEvolutionSection() {
 
         <div className="grid md:grid-cols-2 gap-6">
           {events.map((event, index) => (
-            <div key={index} className="event-card">
+            <div key={index} className="event-card group overflow-hidden">
+              <div className="relative aspect-video rounded-lg overflow-hidden mb-4">
+                <Image
+                  src={event.image}
+                  alt={event.title}
+                  fill
+                  className="object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+              </div>
               <h3 className="text-xl font-light mb-3 text-[var(--accent-gold)]">
                 {event.title}
               </h3>
@@ -327,7 +434,7 @@ function AboutSection() {
     <section id="about" className="section">
       <div className="max-w-6xl mx-auto">
         <div className="grid md:grid-cols-2 gap-12 items-center">
-          <div className="text-center md:text-left">
+          <div className="text-center md:text-left order-2 md:order-1">
             <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
               THE ARTIST
             </p>
@@ -348,9 +455,50 @@ function AboutSection() {
             </Link>
           </div>
 
-          {/* Image placeholder */}
+          {/* Portrait */}
-          <div className="img-placeholder aspect-square rounded-2xl">
+          <div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl order-1 md:order-2">
-            <span>Portrait</span>
+            <Image
+              src="/images/about/portrait-1.jpg"
+              alt="Ximena Xaguar"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        {/* Additional Photos */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
+          <div className="relative aspect-square rounded-lg overflow-hidden">
+            <Image
+              src="/images/about/portrait-2.jpg"
+              alt="Ximena Xaguar"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <div className="relative aspect-square rounded-lg overflow-hidden">
+            <Image
+              src="/images/about/portrait-3.jpg"
+              alt="Ximena Xaguar"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <div className="relative aspect-square rounded-lg overflow-hidden">
+            <Image
+              src="/images/about/portrait-4.jpg"
+              alt="Ximena Xaguar"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <div className="relative aspect-square rounded-lg overflow-hidden">
+            <Image
+              src="/images/about/pachamama.jpg"
+              alt="Pachamama Art"
+              fill
+              className="object-cover"
+            />
           </div>
         </div>
       </div>
@@ -473,6 +621,7 @@ function Footer() {
             <h4 className="font-sans-alt text-xs tracking-widest mb-4">EXPLORE</h4>
             <div className="flex flex-col gap-2">
               <Link href="#art" className="footer-link">Art</Link>
+              <Link href="#gallery" className="footer-link">Gallery</Link>
               <Link href="#about" className="footer-link">About</Link>
               <Link href="#services" className="footer-link">Services</Link>
               <Link href="#reevolution" className="footer-link">Re Evolution Art</Link>
@@ -511,6 +660,7 @@ export default function Home() {
       <main>
         <HeroSection />
         <RitualArtSection />
+        <GallerySection />
         <ServicesSection />
         <ReEvolutionSection />
         <TestimonialsSection />