915 lines
36 KiB
TypeScript
915 lines
36 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
// Navigation Component
|
|
function Navigation() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<nav className="fixed top-0 left-0 right-0 z-50 glass">
|
|
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<Link href="/" className="text-2xl font-light tracking-widest">
|
|
XHIVA ART
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<Link href="/" className="nav-link">Home</Link>
|
|
<Link href="#art" className="nav-link">Art</Link>
|
|
<Link href="#about" className="nav-link">About</Link>
|
|
<Link href="#services" className="nav-link">Services</Link>
|
|
<Link href="#reevolution" className="nav-link">Re Evolution Art</Link>
|
|
<Link href="#contact" className="nav-link">Contact</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden p-2"
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
aria-label="Open menu"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<line x1="3" y1="6" x2="21" y2="6"/>
|
|
<line x1="3" y1="12" x2="21" y2="12"/>
|
|
<line x1="3" y1="18" x2="21" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="mobile-menu">
|
|
<button
|
|
className="absolute top-6 right-6 p-2"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
aria-label="Close menu"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
<Link href="/" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Home</Link>
|
|
<Link href="#art" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Art</Link>
|
|
<Link href="#about" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>About</Link>
|
|
<Link href="#services" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Services</Link>
|
|
<Link href="#reevolution" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Re Evolution Art</Link>
|
|
<Link href="#contact" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Contact</Link>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Hero Section
|
|
function HeroSection() {
|
|
return (
|
|
<section className="min-h-screen relative flex flex-col items-center justify-center text-center px-6 pt-20">
|
|
{/* 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>
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-light tracking-wider mb-8 fade-in stagger-1">
|
|
XIMENA XAGUAR
|
|
</h1>
|
|
<div className="divider fade-in stagger-2"></div>
|
|
<p className="text-lg md:text-xl max-w-2xl mx-auto mb-16 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 items-center fade-in stagger-3">
|
|
<Link href="#art" className="btn-outline">
|
|
Explore Art & Ritual Sessions
|
|
</Link>
|
|
<Link href="#reevolution" className="btn-filled">
|
|
Discover Re Evolution Art
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<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>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Ritual Art Alchemy Section
|
|
function RitualArtSection() {
|
|
return (
|
|
<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">
|
|
{/* Featured Art Image */}
|
|
<div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl">
|
|
<Image
|
|
src="/images/art/featured.jpg?v=2"
|
|
alt="Visionary Art by Ximena Xaguar"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
|
|
VISUAL ALCHEMY
|
|
</p>
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6">
|
|
Ritual Art Alchemy
|
|
</h2>
|
|
<div className="divider"></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-12 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>
|
|
<div className="pt-2">
|
|
<Link href="#gallery" className="btn-outline">
|
|
Enter the Gallery
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Art Gallery Section
|
|
function GallerySection() {
|
|
const artworks = [
|
|
{ src: '/images/art/goddess.webp?v=2', 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' },
|
|
{ src: '/images/art/rainbow-tara.webp', title: 'Rainbow Tara' },
|
|
{ src: '/images/art/female-fire.webp', title: 'Female Fire' },
|
|
{ src: '/images/art/trinidad.webp', title: 'Trinidad' },
|
|
{ src: '/images/art/tantra.webp', title: 'Tantra' },
|
|
{ src: '/images/art/amazonas.webp', title: 'Amazonas' },
|
|
{ src: '/images/art/mujer-jaguar.webp', title: 'Mujer Jaguar' },
|
|
{ src: '/images/art/coming-from-the-darkness.webp', title: 'Coming from the Darkness' },
|
|
{ src: '/images/art/white-tara.webp', title: 'White Tara' },
|
|
{ src: '/images/art/aya.webp', title: 'Aya' },
|
|
{ src: '/images/art/pacha.webp', title: 'Pacha' },
|
|
{ src: '/images/art/pacha-detalle.webp', title: 'Pacha (Detalle)' },
|
|
{ src: '/images/art/warmy-arkanum.webp', title: 'Warmy Arkanum' },
|
|
{ src: '/images/art/sacro.webp', title: 'Sacro' },
|
|
{ src: '/images/art/inti-om.webp', title: 'Inti Om' },
|
|
{ src: '/images/art/totem-astral.webp', title: 'Totem Astral' },
|
|
{ src: '/images/art/ayahuaska.webp', title: 'Ayahuaska' },
|
|
{ src: '/images/art/sabiduria-ancestral.webp', title: 'Sabiduría Ancestral' },
|
|
{ src: '/images/art/amor-astral.webp', title: 'Amor Astral' },
|
|
{ src: '/images/art/escencia-mistica.webp', title: 'Escencia Mística' },
|
|
{ src: '/images/art/raiz.webp', title: 'Raíz' },
|
|
{ src: '/images/art/uni-verso.webp', title: 'Uni Verso' },
|
|
{ src: '/images/art/wayra.webp', title: 'Wayra' },
|
|
{ src: '/images/art/la-illimani.webp', title: 'La Illimani' },
|
|
];
|
|
|
|
return (
|
|
<section id="gallery" className="section bg-[var(--bg-cream)]">
|
|
<div className="max-w-7xl mx-auto">
|
|
<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-6">
|
|
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 = [
|
|
{
|
|
title: 'Crystal Therapy',
|
|
subtitle: 'Nervous System Alignment',
|
|
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',
|
|
subtitle: 'Medicine of the Four Elements',
|
|
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',
|
|
subtitle: 'Transformation Session',
|
|
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',
|
|
},
|
|
{
|
|
title: 'Soul Portrait',
|
|
subtitle: 'Art Alchemy',
|
|
duration: 'Group Workshops · TRIBAL Experience',
|
|
description: 'Weaving visionary art with therapeutic process through guided creative immersion. In group workshop settings, participants access deeper self-expression, emotional release and soul integration.',
|
|
color: 'pink',
|
|
image: '/images/art/soul-agreement.webp',
|
|
highlighted: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="services" className="section">
|
|
<div className="max-w-6xl mx-auto">
|
|
<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-6">
|
|
Ritual Healing & Integration
|
|
</h2>
|
|
<div className="divider"></div>
|
|
<p className="text-lg max-w-2xl mx-auto opacity-80">
|
|
Decades of embodied practice since 2009. Current focus is integration and embodiment—
|
|
supporting people to anchor insight, develop inner coherence and regulate nervous systems
|
|
within deep transformation processes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{services.map((service, index) => (
|
|
<div key={index} className={`group ${service.highlighted ? 'ring-2 ring-[var(--accent-gold)] rounded-xl' : ''}`}>
|
|
<div className="relative aspect-[4/3] rounded-t-xl overflow-hidden">
|
|
<Image
|
|
src={service.image}
|
|
alt={service.title}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div className={`service-card ${service.color} rounded-t-none`}>
|
|
<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>
|
|
|
|
<div className="flex justify-center mt-20">
|
|
<a href="https://booking.xhiva.art" target="_blank" rel="noopener noreferrer" className="btn-outline">
|
|
Book a Session
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Re Evolution Art Section
|
|
function ReEvolutionSection() {
|
|
const events = [
|
|
{
|
|
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',
|
|
objectPosition: 'center top',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="reevolution" className="section dark-section">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
{/* Logo */}
|
|
<div className="relative w-full max-w-96 aspect-[3/2] mx-auto mb-2 overflow-hidden">
|
|
<Image
|
|
src="/images/reevolution/logo.png"
|
|
alt="Re Evolution Art Logo"
|
|
fill
|
|
className="object-contain object-center scale-150"
|
|
/>
|
|
</div>
|
|
<p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
|
|
CULTURAL PLATFORM
|
|
</p>
|
|
<h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl md:text-5xl mb-6">
|
|
Re Evolution Art
|
|
</h2>
|
|
<div className="divider"></div>
|
|
<p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg max-w-3xl mx-auto opacity-80">
|
|
A visionary cultural platform based in Switzerland and rooted in Bolivia. Through exhibitions,
|
|
immersive gatherings, TRIBAL events and collaborative projects, we bring together artists,
|
|
ritualists, musicians and independent creators engaged in inner work and cultural dialogue.
|
|
We bridge ancestral memory with contemporary expression.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{events.map((event, index) => (
|
|
<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"
|
|
style={event.objectPosition ? { objectPosition: event.objectPosition } : undefined}
|
|
/>
|
|
</div>
|
|
<h3 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-xl mb-3 text-[var(--accent-gold)]">
|
|
{event.title}
|
|
</h3>
|
|
<p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-70 leading-relaxed">
|
|
{event.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="flex justify-center gap-6 mt-16">
|
|
<a
|
|
href="https://www.instagram.com/reevolutionart"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-outline btn-outline-light"
|
|
style={{ fontFamily: "'Narrenschiff', sans-serif" }}
|
|
>
|
|
Instagram
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/groups/383432167715274/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-outline btn-outline-light"
|
|
style={{ fontFamily: "'Narrenschiff', sans-serif" }}
|
|
>
|
|
Facebook Community
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Testimonials Section
|
|
function TestimonialsSection() {
|
|
const testimonials = [
|
|
{
|
|
quote: "The crystal healing session created an immediate connection and brought my soul forth. I deeply appreciate the support through the process.",
|
|
author: "Dieter Katterbach",
|
|
},
|
|
{
|
|
quote: "The sweat lodge ceremony was powerfully moving, highlighting the integration of healing, compassion and authentic expression.",
|
|
author: "Kermit Goodman",
|
|
},
|
|
{
|
|
quote: "The experience was powerfully transformative — it changed my understanding of ceremony itself.",
|
|
author: "Verana Bailowitz",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="section bg-white">
|
|
<div className="max-w-6xl mx-auto">
|
|
<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-6">
|
|
Words of Gratitude
|
|
</h2>
|
|
<div className="divider"></div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{testimonials.map((testimonial, index) => (
|
|
<div key={index} className="testimonial-card">
|
|
<span className="quote-mark">"</span>
|
|
<p className="testimonial mb-6">
|
|
{testimonial.quote}
|
|
</p>
|
|
<p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)]">
|
|
— {testimonial.author}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// About Section
|
|
function AboutSection() {
|
|
return (
|
|
<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 order-2 md:order-1">
|
|
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
|
|
THE ARTIST
|
|
</p>
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6">
|
|
About Ximena
|
|
</h2>
|
|
<div className="divider"></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-12 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>
|
|
<div className="pt-2">
|
|
<Link href="#contact" className="btn-outline">
|
|
Connect
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Portrait */}
|
|
<div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl order-1 md:order-2">
|
|
<Image
|
|
src="/images/about/portrait-1.jpg"
|
|
alt="Ximena Xaguar"
|
|
fill
|
|
className="object-cover object-[30%_center]"
|
|
/>
|
|
</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>
|
|
|
|
{/* Process & Studio Photos */}
|
|
<div className="mt-16 text-center">
|
|
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
|
|
THE PROCESS
|
|
</p>
|
|
<h3 className="text-3xl md:text-4xl font-light mb-6">
|
|
Art in Motion
|
|
</h3>
|
|
<div className="divider"></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-8">
|
|
{[
|
|
{ src: '/images/about/portrait-artist-1.webp', alt: 'Ximena in studio' },
|
|
{ src: '/images/about/portrait-artist-2.webp', alt: 'Ximena Quinteros - XHIVA ART' },
|
|
{ src: '/images/about/painting-process.webp', alt: 'Painting process' },
|
|
{ src: '/images/about/process-1.webp', alt: 'Creative process' },
|
|
{ src: '/images/about/process-2.webp', alt: 'Studio work' },
|
|
{ src: '/images/about/process-3.webp', alt: 'Art in progress' },
|
|
{ src: '/images/about/process-4.webp', alt: 'Working on art' },
|
|
{ src: '/images/about/process-5.webp', alt: 'Art creation' },
|
|
{ src: '/images/about/process-6.webp', alt: 'Artistic process' },
|
|
{ src: '/images/about/process-7.webp', alt: 'Art studio' },
|
|
].map((photo, index) => (
|
|
<div key={index} className="relative aspect-square rounded-lg overflow-hidden group">
|
|
<Image
|
|
src={photo.src}
|
|
alt={photo.alt}
|
|
fill
|
|
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Work With Me Section
|
|
function WorkWithMeSection() {
|
|
return (
|
|
<section className="section relative overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/images/art/wayra-bg.webp"
|
|
alt="Wayra"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/70" />
|
|
</div>
|
|
|
|
<div className="max-w-3xl mx-auto relative z-10">
|
|
<div className="text-center">
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6 text-[var(--text-light)]">
|
|
Work With Me
|
|
</h2>
|
|
<div className="divider"></div>
|
|
<p className="text-lg leading-relaxed mb-16 opacity-80 max-w-2xl mx-auto text-[var(--text-light)]">
|
|
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">
|
|
<a href="https://booking.xhiva.art" target="_blank" rel="noopener noreferrer" className="btn-outline btn-outline-light">
|
|
Book a Session
|
|
</a>
|
|
<Link href="#contact" className="btn-filled" style={{ background: 'var(--accent-gold)', borderColor: 'var(--accent-gold)' }}>
|
|
Contact Me
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Contact Section
|
|
function ContactSection() {
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
const [errorMessage, setErrorMessage] = useState('');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!name.trim() || !email.trim() || !message.trim()) {
|
|
setStatus('error');
|
|
setErrorMessage('Please fill in all fields.');
|
|
return;
|
|
}
|
|
|
|
setStatus('loading');
|
|
setErrorMessage('');
|
|
|
|
try {
|
|
const res = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: name.trim(), email: email.trim(), message: message.trim() }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
throw new Error(data.error || 'Something went wrong');
|
|
}
|
|
|
|
setStatus('success');
|
|
setName('');
|
|
setEmail('');
|
|
setMessage('');
|
|
} catch (err) {
|
|
setStatus('error');
|
|
setErrorMessage(err instanceof Error ? err.message : 'Failed to send message. Please try again.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="section bg-white">
|
|
<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>
|
|
|
|
{status === 'success' ? (
|
|
<div className="max-w-lg mx-auto text-center py-12">
|
|
<div className="text-5xl mb-6 text-[var(--accent-gold)]">✓</div>
|
|
<h3 className="text-2xl font-light mb-4">Message Sent</h3>
|
|
<p className="text-lg opacity-80 mb-8">
|
|
Thank you for reaching out. I will get back to you soon.
|
|
</p>
|
|
<button
|
|
onClick={() => setStatus('idle')}
|
|
className="btn-outline"
|
|
>
|
|
Send Another Message
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="max-w-lg mx-auto text-left">
|
|
<div className="mb-6">
|
|
<label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="name">
|
|
NAME
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors"
|
|
placeholder="Your name"
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="email">
|
|
EMAIL
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors"
|
|
placeholder="your@email.com"
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="message">
|
|
MESSAGE
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
rows={5}
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors resize-none"
|
|
placeholder="How can I support your journey?"
|
|
disabled={status === 'loading'}
|
|
/>
|
|
</div>
|
|
|
|
{status === 'error' && errorMessage && (
|
|
<p className="text-red-600 text-sm mb-4 font-sans-alt">{errorMessage}</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="btn-filled w-full mt-4"
|
|
disabled={status === 'loading'}
|
|
style={status === 'loading' ? { opacity: 0.7, cursor: 'not-allowed' } : undefined}
|
|
>
|
|
{status === 'loading' ? 'Sending...' : 'Send Message'}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Social Connect Section
|
|
function SocialSection() {
|
|
const instagramPosts = [
|
|
{ image: '/images/art/soul-agreement.webp', alt: 'Soul Agreement' },
|
|
{ image: '/images/art/goddess.webp?v=2', alt: 'Goddess' },
|
|
{ image: '/images/art/twin-flames.webp', alt: 'Twin Flames' },
|
|
{ image: '/images/art/featured.jpg?v=2', alt: 'Featured Art' },
|
|
{ image: '/images/about/portrait-1.jpg', alt: 'Portrait' },
|
|
{ image: '/images/reevolution/dj-xhiva.jpg', alt: 'DJ XHIVA' },
|
|
];
|
|
|
|
return (
|
|
<section className="section bg-[var(--bg-cream)]">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
|
|
FOLLOW THE JOURNEY
|
|
</p>
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6">
|
|
Connect on Socials
|
|
</h2>
|
|
<div className="divider"></div>
|
|
</div>
|
|
|
|
{/* Image Grid */}
|
|
<a
|
|
href="https://www.instagram.com/xhiva_art"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-10 group"
|
|
>
|
|
{instagramPosts.map((post, index) => (
|
|
<div key={index} className="relative aspect-square overflow-hidden rounded-lg">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.alt}
|
|
fill
|
|
className="object-cover transition-all duration-500 group-hover:brightness-90"
|
|
style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
|
|
/>
|
|
</div>
|
|
))}
|
|
</a>
|
|
|
|
{/* Social Buttons */}
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<a
|
|
href="https://www.instagram.com/xhiva_art"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-filled"
|
|
>
|
|
Follow @xhiva_art on Instagram
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/XimenaXhivart"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-outline"
|
|
>
|
|
Follow on Facebook
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Footer
|
|
function Footer() {
|
|
return (
|
|
<footer className="dark-section py-16 px-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid md:grid-cols-4 gap-12 mb-12">
|
|
{/* Brand */}
|
|
<div className="md:col-span-2">
|
|
<h3 className="text-2xl font-light tracking-widest mb-4">XHIVA ART</h3>
|
|
<p className="text-sm opacity-70 leading-relaxed mb-6">
|
|
Visionary Art · Ritual Healing · Cultural and Artistic Experiences
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connect */}
|
|
<div>
|
|
<h4 className="font-sans-alt text-xs tracking-widest mb-4">CONNECT</h4>
|
|
<div className="flex flex-col gap-2">
|
|
<Link href="#contact" className="footer-link">Contact</Link>
|
|
<a href="https://instagram.com/ximena_xaguar" target="_blank" rel="noopener noreferrer" className="footer-link">
|
|
@ximena_xaguar
|
|
</a>
|
|
<a href="https://www.facebook.com/XimenaXhivart" target="_blank" rel="noopener noreferrer" className="footer-link">
|
|
Facebook
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Copyright */}
|
|
<div className="border-t border-white/10 pt-8 text-center">
|
|
<p className="font-sans-alt text-xs tracking-widest opacity-50">
|
|
© {new Date().getFullYear()} XHIVA ART. ALL RIGHTS RESERVED.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
// Main Page Component
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Navigation />
|
|
<main>
|
|
<HeroSection />
|
|
<RitualArtSection />
|
|
<GallerySection />
|
|
<ServicesSection />
|
|
<ReEvolutionSection />
|
|
<TestimonialsSection />
|
|
<AboutSection />
|
|
<WorkWithMeSection />
|
|
<ContactSection />
|
|
<SocialSection />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|