Merge version_2 into main #1
239
src/app/page.tsx
239
src/app/page.tsx
@@ -9,7 +9,7 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
import { Award, Star, Users, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,34 +17,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Preise",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Academy",
|
||||
id: "academy",
|
||||
},
|
||||
{
|
||||
name: "Über uns",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Preise", id: "pricing" },
|
||||
{ name: "Academy", id: "academy" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="Casablanca Cosmetics"
|
||||
/>
|
||||
@@ -52,139 +40,63 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "glowing-orb",
|
||||
}}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
logoText="CASABLANCA COSMETICS"
|
||||
description="Gelsenkirchens exklusivstes Atelier für Ästhetik & Glow. Wo High-End Expertise auf herzliche Gastfreundschaft trifft."
|
||||
description="Cinematische Ästhetik in Gelsenkirchen. Wir veredeln Ihre natürliche Schönheit mit flüssigem Gold & High-End Präzision."
|
||||
buttons={[
|
||||
{
|
||||
text: "TERMIN BUCHEN",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "PREISLISTE ANSEHEN",
|
||||
href: "#pricing",
|
||||
},
|
||||
{ text: "Termin Buchen", href: "#contact" },
|
||||
{ text: "Preisliste", href: "#pricing" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-white-fog-darkness_23-2148101927.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://images.unsplash.com/photo-1596462502278-27bfdc403348?q=80&w=1200&auto=format&fit=crop"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split-description"
|
||||
title="Exklusive Beauty Services"
|
||||
description="Liquid Gold Standard für Ihre Hautpflege & Permanent Make-Up."
|
||||
plans={[
|
||||
{
|
||||
id: "pm",
|
||||
name: "Permanent Make-Up",
|
||||
price: "ab 170€",
|
||||
buttons: [
|
||||
{
|
||||
text: "Anfragen",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Microblading: 199€",
|
||||
"Powderbrows: 199€",
|
||||
"Kombibrows: 299€",
|
||||
"Lippen: 299€",
|
||||
"Lidstrich: 170€-300€",
|
||||
],
|
||||
id: "pm", badge: "Signature", name: "Permanent Make-Up", price: "ab 170€", buttons: [{ text: "Buchen", href: "#contact" }],
|
||||
features: ["Microblading", "Powderbrows", "Kombibrows", "Lippen Pigmentierung", "Lidstrich"]
|
||||
},
|
||||
{
|
||||
id: "skin",
|
||||
name: "Skin Clinic",
|
||||
price: "ab 60€",
|
||||
buttons: [
|
||||
{
|
||||
text: "Anfragen",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Hydrafacial: 120€",
|
||||
"Microneedling RF: 200€",
|
||||
"Green Peel: 80€-150€",
|
||||
"BioRePeel: 145€",
|
||||
"Basis: 60€",
|
||||
],
|
||||
id: "skin", badge: "Gold Tier", name: "Skin Clinic", price: "ab 60€", buttons: [{ text: "Buchen", href: "#contact" }],
|
||||
features: ["Hydrafacial", "Microneedling RF", "BioRePeel", "Tiefenreinigung"]
|
||||
},
|
||||
{
|
||||
id: "laser",
|
||||
name: "Laser (Haarentfernung)",
|
||||
price: "ab 50€",
|
||||
buttons: [
|
||||
{
|
||||
text: "Anfragen",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Ganzkörper: 250€",
|
||||
"Beine: 99€",
|
||||
"Rücken: 99€",
|
||||
"Brust/Bauch: 110€",
|
||||
"Gesicht: 50€-60€",
|
||||
],
|
||||
},
|
||||
id: "laser", badge: "Pro", name: "Laser Studio", price: "ab 50€", buttons: [{ text: "Buchen", href: "#contact" }],
|
||||
features: ["Ganzkörper", "Beine & Rücken", "Gesicht", "Präzisions-Laser"]
|
||||
}
|
||||
]}
|
||||
title="Unsere Dienstleistungen"
|
||||
description="Premium Behandlungen in Gelsenkirchen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="academy" data-section="academy">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Pro Academy"
|
||||
description="Werde selbst zum Beauty-Experten. Lerne von den Besten in NRW mit offizieller Zertifizierung in Microblading, Lashes und PMU."
|
||||
title="Casablanca Pro Academy"
|
||||
description="Lernen Sie die Kunst der High-End Ästhetik. Zertifizierte Masterclasses für Microblading, Lash-Art & PMU direkt in Gelsenkirchen."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "a1",
|
||||
title: "Microblading Masterclass",
|
||||
content: "Lerne die Kunst des manuellen Härchenzeichnens.",
|
||||
},
|
||||
{
|
||||
id: "a2",
|
||||
title: "Lash Lifting Training",
|
||||
content: "Perfekte Schwünge und professionelle Färbetechniken.",
|
||||
},
|
||||
{
|
||||
id: "a3",
|
||||
title: "PMU Zertifizierung",
|
||||
content: "Sicherheit und Präzision in der Pigmentierung.",
|
||||
},
|
||||
{ id: "a1", title: "PMU Masterclass", content: "Von den Grundlagen bis zur High-End Pigmentierung." },
|
||||
{ id: "a2", title: "Laser Zertifizierung", content: "Sichere Anwendung modernster Laser-Technologien." },
|
||||
{ id: "a3", title: "Business-Setup", content: "Wie Sie ein profitables Beauty-Atelier aufbauen." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/outdoor-portrait-woman-white-wedding-dress-sitting-near-blue-swimming-pool-with-flowers-orchid_343596-191.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://images.unsplash.com/photo-1560066984-138dadb4c035?q=80&w=800&auto=format&fit=crop"
|
||||
mediaPosition="right"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Expertise mit Herzlichkeit"
|
||||
title="Vertrauen in Qualität"
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
label: "Google Reviews",
|
||||
value: "5.0 ★",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Zufriedene Kunden",
|
||||
value: "133+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Professionalität",
|
||||
value: "Top",
|
||||
},
|
||||
{ icon: Star, label: "Google Reviews", value: "5.0 ★" },
|
||||
{ icon: Users, label: "Zufriedene Kunden", value: "500+" },
|
||||
{ icon: Award, label: "Zertifikate", value: "Expert" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -192,68 +104,37 @@ export default function LandingPage() {
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="JETZT TERMIN BUCHEN"
|
||||
description="Bismarckstraße 57, 45881 Gelsenkirchen. Kontaktieren Sie uns für Ihr individuelles Beratungsgespräch."
|
||||
title="Ihre Beratung"
|
||||
description="Bismarckstraße 57, Gelsenkirchen. Kontaktieren Sie uns für Ihr exklusives Treatment."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Ihr Name",
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Ihre Telefonnummer",
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Ihr Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Ihre E-Mail", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Ihr Wunschtermin oder Fragen",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-with-colorful-face-make-up_23-2149580853.jpg"
|
||||
textarea={{ name: "message", placeholder: "Ihr Anliegen", rows: 4 }}
|
||||
buttonText="Anfrage absenden"
|
||||
imageSrc="https://images.unsplash.com/photo-1612287230202-1ff6d8536bdf?q=80&w=800&auto=format&fit=crop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Casablanca Cosmetics",
|
||||
items: [
|
||||
{
|
||||
label: "Bismarckstraße 57",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "45881 Gelsenkirchen",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Tel: 0176 61853287",
|
||||
href: "tel:+4917661853287",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Öffnungszeiten",
|
||||
items: [
|
||||
{
|
||||
label: "Mo–Fr: 10:00 – 18:00",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sa: 10:00 – 15:00",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Preise", href: "#pricing" }, { label: "Academy", href: "#academy" }] },
|
||||
{ title: "Standort", items: [{ label: "Bismarckstraße 57, Gelsenkirchen" }, { label: "Tel: 0176 61853287" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Casablanca Cosmetics"
|
||||
bottomLeftText="© 2025 Casablanca Cosmetics"
|
||||
bottomRightText="Datenschutz | Impressum"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sticky WhatsApp Trigger */}
|
||||
<a
|
||||
href="https://wa.me/4917661853287"
|
||||
className="fixed bottom-8 right-8 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform"
|
||||
>
|
||||
<MessageCircle size={28} />
|
||||
</a>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--background: #000000;
|
||||
--card: #0a0a0a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #D4AF37;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #2a220a;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #D4AF37;
|
||||
--background-accent: #2a220a;
|
||||
--background-accent: #1a1a1a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user