Initial xhivart.ch mirror site implementation
Complete single-page application mirroring xhivart.ch content: - Hero section with Ximena Xaguar branding - Ritual Art Alchemy section - Services section (Crystal Therapy, Temazcal, Deep Integration) - Re Evolution Art cultural platform section - Testimonials section - About section - Contact form - Responsive navigation with mobile menu - Footer with social links Styling: - Custom CSS variables for brand colors - Elegant typography with Cormorant Garamond and Montserrat - Glassmorphism navigation - Fade-in animations - Service cards with accent colors Deployment: - Docker configuration with standalone output - docker-compose.yml for Traefik integration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8a19a9d94d
commit
d5efb63145
|
|
@ -0,0 +1,45 @@
|
|||
FROM node:20-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
# Build the application
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
RUN npm run build
|
||||
|
||||
# Production image
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
# Set the correct permission for prerender cache
|
||||
RUN mkdir .next
|
||||
RUN chown nextjs:nodejs .next
|
||||
|
||||
# Copy standalone output
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
services:
|
||||
xhivart-mirror:
|
||||
build: .
|
||||
container_name: xhivart-mirror
|
||||
restart: always
|
||||
networks:
|
||||
- traefik-public
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.xhivart-mirror.rule=Host(`xhivart.jeffemmett.com`)"
|
||||
- "traefik.http.routers.xhivart-mirror.entrypoints=web"
|
||||
- "traefik.http.services.xhivart-mirror.loadbalancer.server.port=3000"
|
||||
- "traefik.docker.network=traefik-public"
|
||||
|
||||
networks:
|
||||
traefik-public:
|
||||
external: true
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: "standalone",
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,289 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--bg-cream: #faf8f5;
|
||||
--bg-dark: #1a1a1a;
|
||||
--bg-darker: #0f0f0f;
|
||||
--text-dark: #2d2d2d;
|
||||
--text-light: #f5f5f5;
|
||||
--text-muted: #6b6b6b;
|
||||
--accent-gold: #c9a962;
|
||||
--accent-lavender: #d4c4e8;
|
||||
--accent-pink: #e8c4d4;
|
||||
--accent-mint: #c4e8d4;
|
||||
--accent-rose: #e8d4c4;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: var(--bg-cream);
|
||||
color: var(--text-dark);
|
||||
font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-cormorant), 'Cormorant Garamond', Georgia, serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.font-sans-alt {
|
||||
font-family: var(--font-montserrat), 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav-link {
|
||||
font-family: var(--font-montserrat), 'Montserrat', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
transition: color 0.3s ease;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* Elegant button styles */
|
||||
.btn-outline {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
border: 1px solid var(--text-dark);
|
||||
border-radius: 50px;
|
||||
font-family: var(--font-montserrat), 'Montserrat', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--text-dark);
|
||||
color: var(--bg-cream);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
border-color: var(--text-light);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background: var(--text-light);
|
||||
color: var(--bg-dark);
|
||||
}
|
||||
|
||||
.btn-filled {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
background: var(--text-dark);
|
||||
border: 1px solid var(--text-dark);
|
||||
border-radius: 50px;
|
||||
font-family: var(--font-montserrat), 'Montserrat', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: var(--bg-cream);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-filled:hover {
|
||||
background: transparent;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* Service cards */
|
||||
.service-card {
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.service-card.lavender { background: var(--accent-lavender); }
|
||||
.service-card.pink { background: var(--accent-pink); }
|
||||
.service-card.mint { background: var(--accent-mint); }
|
||||
.service-card.rose { background: var(--accent-rose); }
|
||||
|
||||
/* Section spacing */
|
||||
.section {
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding: 8rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Decorative elements */
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: var(--accent-gold);
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.divider-wide {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Image placeholder */
|
||||
.img-placeholder {
|
||||
background: linear-gradient(135deg, var(--accent-lavender) 0%, var(--accent-pink) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-dark);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Testimonial */
|
||||
.testimonial {
|
||||
font-style: italic;
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
background: white;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer-link {
|
||||
font-family: var(--font-montserrat), 'Montserrat', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-light);
|
||||
text-decoration: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hero section */
|
||||
.hero-gradient {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--bg-cream) 0%,
|
||||
rgba(212, 196, 232, 0.2) 50%,
|
||||
var(--bg-cream) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Dark sections */
|
||||
.dark-section {
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.darker-section {
|
||||
background: var(--bg-darker);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(40px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 1s ease forwards;
|
||||
}
|
||||
|
||||
/* Staggered animations */
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
.stagger-2 { animation-delay: 0.2s; }
|
||||
.stagger-3 { animation-delay: 0.3s; }
|
||||
.stagger-4 { animation-delay: 0.4s; }
|
||||
|
||||
/* Quote styling */
|
||||
.quote-mark {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
color: var(--accent-gold);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Glassmorphism effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--bg-cream);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* Event cards */
|
||||
.event-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--accent-gold);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Cormorant_Garamond, Montserrat } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const cormorant = Cormorant_Garamond({
|
||||
variable: "--font-cormorant",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const montserrat = Montserrat({
|
||||
variable: "--font-montserrat",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "XHIVA ART | Ximena Xaguar - Visionary Artist",
|
||||
description: "Multidisciplinary visionary artist working at the intersection of art, ritual and embodied presence. Crystal therapy, Temazcal ceremonies, and transformative art experiences.",
|
||||
keywords: ["visionary art", "crystal therapy", "temazcal", "ritual healing", "Ximena Xaguar", "Re Evolution Art"],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
@ -25,7 +28,7 @@ export default function RootLayout({
|
|||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`${cormorant.variable} ${montserrat.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
|
|
|||
577
src/app/page.tsx
577
src/app/page.tsx
|
|
@ -1,65 +1,524 @@
|
|||
import Image from "next/image";
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
// Navigation Component
|
||||
function Navigation() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
<>
|
||||
<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"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<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>
|
||||
</main>
|
||||
</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 hero-gradient flex flex-col items-center justify-center text-center px-6 pt-20">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<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-12 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">
|
||||
<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">
|
||||
<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">
|
||||
{/* Image placeholder */}
|
||||
<div className="img-placeholder aspect-[3/4] rounded-2xl">
|
||||
<span>Visionary Art</span>
|
||||
</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:mx-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">
|
||||
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="#" className="btn-outline">
|
||||
Enter the Gallery
|
||||
</Link>
|
||||
</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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="services" className="section">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<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">
|
||||
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={`service-card ${service.color}`}>
|
||||
<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 className="text-center mt-12">
|
||||
<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.',
|
||||
},
|
||||
{
|
||||
title: 'Tribal Experience',
|
||||
description: 'Group immersion exploring the unconscious through shamanic journeying, art alchemy and embodied movement.',
|
||||
},
|
||||
{
|
||||
title: 'Visionary Art Week Zürich',
|
||||
description: 'Curated week featuring international artists, performances, live music, talks and workshops.',
|
||||
},
|
||||
{
|
||||
title: 'Future Gatherings',
|
||||
description: 'Experimental experiences weaving DJ sets with expanded states of presence.',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="reevolution" className="section dark-section">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<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">
|
||||
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">
|
||||
<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="text-center mt-12">
|
||||
<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-16">
|
||||
<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">
|
||||
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">
|
||||
<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:mx-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">
|
||||
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>
|
||||
|
||||
{/* Image placeholder */}
|
||||
<div className="img-placeholder aspect-square rounded-2xl">
|
||||
<span>Portrait</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Work With Me Section
|
||||
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">
|
||||
<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 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>
|
||||
|
||||
{/* 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">
|
||||
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="#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 />
|
||||
<ServicesSection />
|
||||
<ReEvolutionSection />
|
||||
<TestimonialsSection />
|
||||
<AboutSection />
|
||||
<WorkWithMeSection />
|
||||
<ContactSection />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue