/**
* Design Philosophy: Mediterranean Modernism with Organic Elements
* - Flowing, wave-like forms reflecting water and Ibiza's coastline
* - Contrast-rich color palette with deep azure blue and warm terracotta
* - Asymmetric layouts with diagonal cuts and overlapping layers
* - Generous whitespace conveying luxury and exclusivity
*/
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Check, Globe, Mail, Phone } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";
import BeforeAfterGallery from "@/components/BeforeAfterGallery";
type Language = "de" | "en";
export default function Home() {
const [lang, setLang] = useState<Language>("de");
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
message: "",
});
const content = {
de: {
nav: {
home: "Start",
benefits: "Vorteile",
technology: "Technologie",
gallery: "Galerie",
about: "Über Uns",
contact: "Kontakt",
},
hero: {
headline: "Ibiza's Pool-Revolution",
subheadline: "Makellose Epoxidharz-Beschichtungen",
description:
"Verwandeln Sie Ihren alten Pool in ein luxuriöses, nahtloses Meisterwerk. Langlebig, UV-beständig und direkt auf alten Fliesen anwendbar. Professionelle Technologie für Ibizas exklusive Pools.",
cta: "Jetzt kostenloses Angebot anfordern",
},
benefits: {
headline: "Warum Epoxidharz die beste Wahl für Ihren Pool auf Ibiza ist",
items: [
{
title: "Absolute Langlebigkeit",
description:
"Unsere Epoxidharz-Beschichtung ist extrem widerstandsfähig gegen mechanische Belastungen und Chemikalien. Kein Vergleich zu herkömmlichen Folien, die reißen oder ausbleichen.",
},
{
title: "Nahtlose Perfektion",
description:
"Genießen Sie eine glatte, fugenlose Oberfläche ohne Falten. Das Ergebnis ist ein ästhetisch ansprechendes Becken, das sich luxuriös anfühlt und leicht zu reinigen ist.",
},
{
title: "UV- & Hitzeresistent",
description:
"Speziell für das intensive Sonnenlicht Ibizas entwickelt. Unsere Epoxidharz-Beschichtung garantiert brillante Farben und einen langanhaltenden UV-Schutz ohne Vergilben. Wählen Sie aus über 12 verschiedenen Farbtönen.",
},
{
title: "Sanierung auf Fliesen",
description:
"Die Revolution für Poolbesitzer: Wir können unsere Beschichtung direkt auf Ihre alten, unansehnlichen Fliesen auftragen. Das spart Zeit, Schmutz und erhebliche Kosten.",
},
{
title: "100% Osmoseschutz",
description:
"Durch die extrem geringe Wasseraufnahme des Epoxidharzes wird die gefürchtete Blasenbildung (Osmose) effektiv verhindert. Ihr Pool bleibt dauerhaft geschützt.",
},
{
title: "Individuelle Farbwelten",
description:
"Wählen Sie aus über 15 brillanten RAL-Farbtönen – von klassischem Türkis und Hellblau bis zu modernen Grautönen, Beige, Schwarz oder Weiß. WO-WE Qualitätsprodukt SL450.",
},
],
},
technology: {
headline: "Professionelle Beschichtung in 3 Schritten",
layers: [
{
number: "01",
title: "Oberfläche Anrauen",
description:
"Die Betonoberfläche wird mechanisch aufgeraut, um optimale Haftung zu gewährleisten. Alle losen Teile und Verunreinigungen werden entfernt.",
},
{
number: "02",
title: "Primer-Grundierung",
description:
"Eine spezielle Grundierung dringt tief in den Beton ein und schafft die perfekte Basis für die Epoxidharz-Beschichtung. Sie versiegelt den Untergrund und verhindert Feuchtigkeit.",
},
{
number: "03",
title: "Epoxidharz-Beschichtung",
description:
"Die hochwertige Epoxidharz-Beschichtung wird in mehreren Lagen aufgetragen. Verfügbar in über 12 brillanten Farben – von klassischem Türkis bis zu modernen Grautönen.",
},
],
},
about: {
headline: "Ihre Experten für Poolbeschichtungen auf Ibiza",
description:
"Mit jahrelanger Erfahrung in der Anwendung von Epoxidharz-Systemen bringen wir eine bewährte und innovative Technologie nach Ibiza. Unser Ziel ist es, Poolbesitzern eine hochwertige, langlebige und ästhetisch überlegene Alternative zu herkömmlichen Sanierungsmethoden zu bieten. Wir stehen für Qualität, Zuverlässigkeit und erstklassigen Service.",
},
contact: {
headline: "Starten Sie Ihr Pool-Upgrade",
description:
"Bereit, Ihrem Pool neues Leben einzuhauchen? Kontaktieren Sie uns für eine unverbindliche Beratung und ein maßgeschneidertes Angebot.",
form: {
name: "Name",
email: "E-Mail",
phone: "Telefon",
message: "Nachricht",
submit: "Anfrage senden",
success: "Vielen Dank! Wir melden uns bald bei Ihnen.",
},
},
},
en: {
nav: {
home: "Home",
benefits: "Benefits",
technology: "Technology",
gallery: "Gallery",
about: "About",
contact: "Contact",
},
hero: {
headline: "Ibiza's Pool Revolution",
subheadline: "Flawless Epoxy Coatings",
description:
"Transform your old pool into a luxurious, seamless masterpiece. Durable, UV-resistant, and applied directly over old tiles. Professional technology for Ibiza's exclusive pools.",
cta: "Request a Free Quote Now",
},
benefits: {
headline: "Why Epoxy Resin is the Best Choice for Your Pool in Ibiza",
items: [
{
title: "Absolute Durability",
description:
"Our epoxy resin coating is extremely resistant to mechanical stress and chemicals. No comparison to conventional liners that tear or fade.",
},
{
title: "Seamless Perfection",
description:
"Enjoy a smooth, jointless surface without wrinkles. The result is an aesthetically pleasing pool that feels luxurious and is easy to clean.",
},
{
title: "UV & Heat Resistant",
description:
"Specially developed for the intense sunlight of Ibiza. Our epoxy resin coating guarantees brilliant colors and long-lasting UV protection without yellowing. Choose from over 12 different color shades."
},
{
title: "Renovation on Tiles",
description:
"The revolution for pool owners: We can apply our coating directly onto your old, unsightly tiles. This saves time, dirt, and significant costs.",
},
{
title: "100% Osmosis Protection",
description:
"The extremely low water absorption of the epoxy resin effectively prevents the dreaded blistering (osmosis). Your pool remains permanently protected.",
},
{
title: "Custom Color Worlds",
description:
"Choose from over 15 brilliant RAL colors – from classic turquoise and light blue to modern gray tones, beige, black or white. WO-WE quality product SL450.",
},
],
},
technology: {
headline: "Professional Coating in 3 Steps",
layers: [
{
number: "01",
title: "Surface Roughening",
description:
"The concrete surface is mechanically roughened to ensure optimal adhesion. All loose parts and contaminants are removed.",
},
{
number: "02",
title: "Primer Coating",
description:
"A special primer penetrates deep into the concrete and creates the perfect base for the epoxy coating. It seals the substrate and prevents moisture.",
},
{
number: "03",
title: "Epoxy Resin Coating",
description:
"The high-quality epoxy resin coating is applied in multiple layers. Available in over 12 brilliant colors – from classic turquoise to modern gray tones.",
},
],
},
about: {
headline: "Your Experts for Pool Coatings in Ibiza",
description:
"With years of experience in applying epoxy resin systems, we bring a proven and innovative technology to Ibiza. Our goal is to offer pool owners a high-quality, durable, and aesthetically superior alternative to traditional renovation methods. We stand for quality, reliability, and first-class service.",
},
contact: {
headline: "Start Your Pool Upgrade",
description:
"Ready to breathe new life into your pool? Contact us for a non-binding consultation and a tailor-made offer.",
form: {
name: "Name",
email: "Email",
phone: "Phone",
message: "Message",
submit: "Send Inquiry",
success: "Thank you! We'll get back to you soon.",
},
},
},
};
const t = content[lang];
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
toast.success(t.contact.form.success);
setFormData({ name: "", email: "", phone: "", message: "" });
};
const scrollToSection = (id: string) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
return (
<div className="min-h-screen">
{/* Navigation */}
<nav className="fixed top-0 left-0 right-0 z-50 glass-card border-b">
<div className="container flex items-center justify-between h-20">
<div className="flex items-center gap-2">
<div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<span className="text-primary-foreground font-display font-bold text-lg">E</span>
</div>
<span className="font-display font-bold text-xl">Epoxi Ibiza</span>
</div>
<div className="hidden md:flex items-center gap-8">
<button
onClick={() => scrollToSection("home")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.home}
</button>
<button
onClick={() => scrollToSection("benefits")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.benefits}
</button>
<button
onClick={() => scrollToSection("technology")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.technology}
</button>
<button
onClick={() => scrollToSection("gallery")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.gallery}
</button>
<button
onClick={() => scrollToSection("about")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.about}
</button>
<button
onClick={() => scrollToSection("contact")}
className="text-sm font-medium hover:text-primary transition-colors"
>
{t.nav.contact}
</button>
</div>
<Button
variant="outline"
size="sm"
onClick={() => setLang(lang === "de" ? "en" : "de")}
className="gap-2"
>
<Globe className="w-4 h-4" />
{lang === "de" ? "EN" : "DE"}
</Button>
</div>
</nav>
{/* Hero Section */}
<section
id="home"
className="relative min-h-screen flex items-center pt-20"
style={{
backgroundImage:
"url('https://files.manuscdn.com/user_upload_by_module/session_file/310519663126333189/kGckqwsqGCaZMtIN.png')",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="absolute inset-0 bg-gradient-to-r from-background/95 via-background/70 to-transparent" />
<div className="container relative z-10">
<div className="max-w-2xl">
<h1 className="font-display font-bold text-5xl md:text-7xl mb-4 animate-fade-up text-foreground">
{t.hero.headline}
</h1>
<p className="font-display text-2xl md:text-3xl mb-6 text-primary animate-fade-up animation-delay-200">
{t.hero.subheadline}
</p>
<p className="text-lg md:text-xl mb-8 leading-relaxed animate-fade-up animation-delay-400 text-foreground">
{t.hero.description}
</p>
<Button
size="lg"
onClick={() => scrollToSection("contact")}
className="text-lg px-8 py-6 animate-fade-up animation-delay-600"
>
{t.hero.cta}
</Button>
</div>
</div>
{/* Wave Divider */}
<div className="wave-divider">
<svg
viewBox="0 0 1200 120"
preserveAspectRatio="none"
className="fill-background"
>
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" />
</svg>
</div>
</section>
{/* Benefits Section */}
<section id="benefits" className="py-24 bg-background">
<div className="container">
<h2 className="font-display font-bold text-4xl md:text-5xl text-center mb-16 text-foreground">
{t.benefits.headline}
</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{t.benefits.items.map((item, index) => (
<Card
key={index}
className="p-8 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border-2"
>
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<Check className="w-6 h-6 text-primary" />
</div>
<h3 className="font-display font-semibold text-2xl mb-4 text-foreground">
{item.title}
</h3>
<p className="text-muted-foreground leading-relaxed">{item.description}</p>
</Card>
))}
</div>
</div>
</section>
{/* Technology Section */}
<section id="technology" className="py-24 bg-muted/30 relative">
<div className="container">
<h2 className="font-display font-bold text-4xl md:text-5xl text-center mb-16 text-foreground">
{t.technology.headline}
</h2>
<div className="grid md:grid-cols-3 gap-12 max-w-6xl mx-auto">
{t.technology.layers.map((layer, index) => (
<div key={index} className="relative">
<div className="text-8xl font-display font-bold text-primary/10 absolute -top-8 -left-4">
{layer.number}
</div>
<div className="relative z-10">
<h3 className="font-display font-semibold text-2xl mb-4 text-foreground">
{layer.title}
</h3>
<p className="text-muted-foreground leading-relaxed">{layer.description}</p>
</div>
</div>
))}
</div>