683 lines
26 KiB
TypeScript
683 lines
26 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
|
|
</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-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 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"
|
|
alt="Visionary Art by Ximena Xaguar"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center md:text-left">
|
|
<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 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-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>
|
|
<div className="md:text-left">
|
|
<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', 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-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',
|
|
},
|
|
];
|
|
|
|
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-3 gap-8">
|
|
{services.map((service, index) => (
|
|
<div key={index} className="group">
|
|
<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-16">
|
|
<Link href="#contact" className="btn-outline">
|
|
Book a Session
|
|
</Link>
|
|
</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',
|
|
},
|
|
];
|
|
|
|
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-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>
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6">
|
|
Re Evolution Art
|
|
</h2>
|
|
<div className="divider"></div>
|
|
<p 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"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-light mb-3 text-[var(--accent-gold)]">
|
|
{event.title}
|
|
</h3>
|
|
<p className="text-sm opacity-70 leading-relaxed">
|
|
{event.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-center mt-16">
|
|
<Link href="#" className="btn-outline btn-outline-light">
|
|
Explore Events
|
|
</Link>
|
|
</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 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>
|
|
<h2 className="text-4xl md:text-5xl font-light mb-6">
|
|
About Ximena
|
|
</h2>
|
|
<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-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>
|
|
<div className="md:text-left">
|
|
<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"
|
|
/>
|
|
</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>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Work With Me Section
|
|
function WorkWithMeSection() {
|
|
return (
|
|
<section className="section darker-section">
|
|
<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>
|
|
<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() {
|
|
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>
|
|
|
|
{/* Contact Form */}
|
|
<form 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"
|
|
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"
|
|
/>
|
|
</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"
|
|
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"
|
|
/>
|
|
</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}
|
|
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?"
|
|
/>
|
|
</div>
|
|
<button type="submit" className="btn-filled w-full mt-2">
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</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</h3>
|
|
<p className="text-sm opacity-70 leading-relaxed mb-6">
|
|
Visionary Art · Ritual Healing · Cultural and Artistic Experiences
|
|
</p>
|
|
{/* Social Links */}
|
|
<div className="flex gap-4">
|
|
<a href="https://instagram.com/xhiva_art" target="_blank" rel="noopener noreferrer" className="footer-link">
|
|
Instagram
|
|
</a>
|
|
<a href="https://instagram.com/reevolutionart" target="_blank" rel="noopener noreferrer" className="footer-link">
|
|
@reevolutionart
|
|
</a>
|
|
</div>
|
|
</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="#" className="footer-link">SoundCloud</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. 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 />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|