Merge version_2 into main #8

Merged
bender merged 2 commits from version_2 into main 2026-03-04 00:19:32 +00:00
2 changed files with 213 additions and 125 deletions

View File

@@ -1,15 +1,14 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "./styles/variables.css";
import "./styles/base.css";
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import './styles/variables.css';
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: "Serenity Reiki - Energy Healing & Wellness", description: "Certified reiki healing sessions to restore balance, release stress, and promote deep wellness."};
title: 'Serenity Reiki - English & French',
description: 'Experience certified reiki healing in a peaceful sanctuary. Découvrez la guérison reiki certifiée dans un sanctuaire paisible.',
};
export default function RootLayout({
children,
@@ -18,16 +17,8 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.variable}>
<body className={inter.className}>
{children}
<script
async
src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"
></script>
<script
async
src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"
></script>
<script
dangerouslySetInnerHTML={{

View File

@@ -1,204 +1,301 @@
"use client";
import { useEffect, useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import { PricingCardThree } from "@/components/sections/pricing/PricingCardThree";
import { TestimonialCardSixteen } from "@/components/sections/testimonial/TestimonialCardSixteen";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { ArrowRight, CheckCircle, Zap, Users, TrendingUp, Award } from "lucide-react";
import { BookOpen, Heart, Shield, Sparkles, Wifi, Zap } from "lucide-react";
const plan = {
theme: {
defaultButtonVariant: "text-stagger" as const,
defaultTextAnimation: "entrance-slide" as const,
borderRadius: "rounded" as const,
contentWidth: "medium" as const,
sizing: "medium" as const,
background: "circleGradient" as const,
cardStyle: "glass-elevated" as const,
primaryButtonStyle: "gradient" as const,
secondaryButtonStyle: "glass" as const,
headingFontWeight: "normal" as const,
},
nav: {
type Language = "en" | "fr";
const translations = {
en: {
navItems: [
{ name: "Home", id: "/" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "contact" }
],
button: { text: "Get Started", href: "contact" },
},
bookButton: "Book Your Session", heroTitle: "Restore Balance", heroDescription: "Experience certified reiki healing in a peaceful sanctuary. Release stress, pain, and emotional blocks through ancient Japanese energy work.", learnMore: "Learn More", aboutTitle: "About Your Healer", aboutDesc1: "With over 15 years of dedicated practice, I am a certified reiki master trained in traditional Japanese techniques and modern energy healing. My mission is to create a sanctuary where stress dissolves, chronic pain finds relief, and emotional blocks transform into healing pathways.", aboutDesc2: "I believe in the profound connection between body, mind, and spirit. Each session is personalized to your unique energy needs, combining reiki with intuitive guidance to support your journey toward wholeness and balance.", aboutDesc3: "My clients consistently report reduced anxiety, improved sleep, relief from chronic pain, and a renewed sense of peace and purpose. I'm honored to walk alongside you on your healing journey.", credentials: "Certifications & Credentials", servicesTitle: "Healing Modalities", servicesDesc: "Explore the transformative reiki services designed to restore your energy and promote deep wellness.", service1: "Traditional Japanese Reiki", service1Desc: "Authentic reiki energy work addressing root imbalances and chakra alignment for holistic healing.", service2: "Chakra Balancing", service2Desc: "Targeted energy work to harmonize your seven chakras, promoting emotional and physical wellness.", service3: "Crystal Energy Reiki", service3Desc: "Enhanced reiki sessions incorporating crystalline vibrations to amplify healing and transformation.", service4: "Trauma Release Work", service4Desc: "Specialized sessions for releasing emotional trauma, held patterns, and energetic blocks with compassion.", service5: "Distant Healing Sessions", service5Desc: "Receive transformative reiki energy from the comfort of your home through powerful distance healing.", service6: "Integration Coaching", service6Desc: "Post-session guidance to integrate healing insights and sustain your wellness journey with practical tools.", pricingTitle: "Healing Sessions & Pricing", pricingDesc: "Choose the perfect reiki session to support your wellness journey. All sessions include personalized consultation and integration guidance.", session30: "30-Minute Session", session60: "60-Minute Session", session90: "90-Minute Deep Healing", sessionMonthly: "Monthly Wellness Package", bookNow: "Book Now", subscribe: "Subscribe Now", mostPopular: "Most Popular", testimonialTitle: "Healing Stories from Our Community", testimonialDesc: "Discover how reiki has transformed the lives of professionals seeking peace, pain relief, and spiritual reconnection.", contactTitle: "Ready to begin your healing journey? Let's restore your energy and bring peace back into your life.", schedule: "Schedule a Session", sendMessage: "Send a Message", footerBrand: "Serenity Reiki", footerCopyright: "© 2025 Serenity Reiki | Certified Energy Healing"},
fr: {
navItems: [
{ name: "À propos", id: "about" },
{ name: "Services", id: "services" },
{ name: "Témoignages", id: "testimonials" },
{ name: "Tarifs", id: "pricing" },
{ name: "Contact", id: "contact" }
],
bookButton: "Réserver une session", heroTitle: "Restaurez l'équilibre", heroDescription: "Expérience de guérison reiki certifiée dans un sanctuaire paisible. Libérez le stress, la douleur et les blocages émotionnels à travers le travail énergétique japonais ancien.", learnMore: "En savoir plus", aboutTitle: "À propos de votre guérisseur", aboutDesc1: "Avec plus de 15 ans de pratique dédiée, je suis un maître reiki certifié formé aux techniques japonaises traditionnelles et à la guérison énergétique moderne. Ma mission est de créer un sanctuaire où le stress se dissout, la douleur chronique trouve un soulagement et les blocages émotionnels se transforment en chemins de guérison.", aboutDesc2: "Je crois en la connexion profonde entre le corps, l'esprit et l'âme. Chaque session est personnalisée selon vos besoins énergétiques uniques, combinant le reiki avec des conseils intuitifs pour soutenir votre chemin vers l'intégrité et l'équilibre.", aboutDesc3: "Mes clients signalent régulièrement une réduction de l'anxiété, une amélioration du sommeil, un soulagement de la douleur chronique et une paix et un but renouvelés. C'est un honneur de vous accompagner dans votre chemin de guérison.", credentials: "Certifications et références", servicesTitle: "Modalités de guérison", servicesDesc: "Explorez les services reiki transformationnels conçus pour restaurer votre énergie et promouvoir le bien-être profond.", service1: "Reiki japonais traditionnel", service1Desc: "Travail énergétique reiki authentique abordant les déséquilibres racinaires et l'alignement des chakras pour une guérison holistique.", service2: "Équilibrage des chakras", service2Desc: "Travail énergétique ciblé pour harmoniser vos sept chakras, favorisant le bien-être émotionnel et physique.", service3: "Reiki à énergie cristalline", service3Desc: "Sessions reiki améliorées incorporant des vibrations cristallines pour amplifier la guérison et la transformation.", service4: "Travail de libération des traumatismes", service4Desc: "Sessions spécialisées pour libérer les traumatismes émotionnels, les schémas retenus et les blocages énergétiques avec compassion.", service5: "Sessions de guérison à distance", service5Desc: "Recevez une énergie reiki transformationnelle depuis le confort de votre maison grâce à une puissante guérison à distance.", service6: "Coaching d'intégration", service6Desc: "Conseils post-session pour intégrer les insights de guérison et maintenir votre parcours de bien-être avec des outils pratiques.", pricingTitle: "Sessions de guérison et tarifs", pricingDesc: "Choisissez la session reiki parfaite pour soutenir votre parcours de bien-être. Toutes les sessions incluent une consultation personnalisée et des conseils d'intégration.", session30: "Session de 30 minutes", session60: "Session de 60 minutes", session90: "Guérison profonde de 90 minutes", sessionMonthly: "Package de bien-être mensuel", bookNow: "Réserver maintenant", subscribe: "S'abonner", mostPopular: "Plus populaire", testimonialTitle: "Histoires de guérison de notre communauté", testimonialDesc: "Découvrez comment le reiki a transformé la vie de professionnels cherchant la paix, le soulagement de la douleur et la reconnexion spirituelle.", contactTitle: "Prêt à commencer votre parcours de guérison? Restaurons votre énergie et ramenons la paix dans votre vie.", schedule: "Planifier une session", sendMessage: "Envoyer un message", footerBrand: "Serenity Reiki", footerCopyright: "© 2025 Serenity Reiki | Guérison énergétique certifiée"}
};
export default function Home() {
export default function LandingPage() {
const [language, setLanguage] = useState<Language>("en");
const [mounted, setMounted] = useState(false);
useEffect(() => {
// Detect OS language on mount
const detectedLang = navigator.language.startsWith("fr") ? "fr" : "en";
setLanguage(detectedLang);
setMounted(true);
}, []);
if (!mounted) return null;
const t = translations[language];
const toggleLanguage = () => {
setLanguage(language === "en" ? "fr" : "en");
};
return (
<ThemeProvider
defaultButtonVariant={plan.theme.defaultButtonVariant}
defaultTextAnimation={plan.theme.defaultTextAnimation}
borderRadius={plan.theme.borderRadius}
contentWidth={plan.theme.contentWidth}
sizing={plan.theme.sizing}
background={plan.theme.background}
cardStyle={plan.theme.cardStyle}
primaryButtonStyle={plan.theme.primaryButtonStyle}
secondaryButtonStyle={plan.theme.secondaryButtonStyle}
headingFontWeight={plan.theme.headingFontWeight}
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="fluid"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div className="fixed top-4 right-4 z-50">
<button
onClick={toggleLanguage}
className="px-4 py-2 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:bg-primary-cta/90 transition-all duration-300"
aria-label={language === "en" ? "Switch to French" : "Passer à l'anglais"}
>
{language === "en" ? "🇫🇷 FR" : "🇬🇧 EN"}
</button>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
button={plan.nav.button}
brandName="Webild"
brandName="Serenity Reiki"
navItems={t.navItems}
button={{ text: t.bookButton, href: "#pricing" }}
className="bg-background border border-accent/20"
buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text transition-all duration-300"
buttonTextClassName="font-semibold text-sm"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Webild"
description="Build amazing digital experiences with our components and tools."
background={{ variant: "plain" }}
mediaAnimation="slide-up"
logoText={t.heroTitle}
description={t.heroDescription}
buttons={[
{ text: "Get Started", href: "contact" },
{ text: "Learn More", href: "services" },
{ text: t.bookButton, href: "#pricing" },
{ text: t.learnMore, href: "#about" }
]}
background={{ variant: "plain" }}
imageSrc="http://img.b2bpic.net/free-photo/crop-woman-meditating-home_23-2147802469.jpg"
imageAlt={language === "en" ? "Peaceful reiki healing sanctuary with soft lighting" : "Sanctuaire de guérison reiki paisible avec éclairage doux"}
frameStyle="card"
mediaAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Why Choose Us"
title={t.aboutTitle}
description={[
"We provide the most comprehensive and easy-to-use tools for building beautiful digital experiences.", "Our team is dedicated to helping you succeed with world-class support and documentation."]}
useInvertedBackground={false}
buttons={[
{ text: "Learn More", href: "services" },
{ text: "Contact Us", href: "contact" },
t.aboutDesc1,
t.aboutDesc2,
t.aboutDesc3
]}
buttons={[{ text: t.credentials, href: "#" }]}
showBorder={true}
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentySix
title="Our Services"
description="Comprehensive solutions tailored to your needs."
title={t.servicesTitle}
description={t.servicesDesc}
features={[
{
title: "Design Systems", description: "Build consistent, scalable design systems for your applications.", buttonIcon: Zap,
buttonHref: "contact"},
title: t.service1,
description: t.service1Desc,
imageSrc: "http://img.b2bpic.net/free-photo/spiritual-young-man-woman-practicing-yoga-indoors_23-2149163327.jpg", imageAlt: language === "en" ? "Practitioner performing traditional reiki energy healing" : "Praticien effectuant une guérison énergétique reiki traditionnelle", buttonIcon: Sparkles
},
{
title: "Component Library", description: "Pre-built, customizable components to accelerate development.", buttonIcon: CheckCircle,
buttonHref: "contact"},
title: t.service2,
description: t.service2Desc,
imageSrc: "http://img.b2bpic.net/free-photo/spiritual-young-man-woman-practicing-yoga-indoors_23-2149163336.jpg", imageAlt: language === "en" ? "Chakra energy alignment visualization" : "Visualisation de l'alignement de l'énergie des chakras", buttonIcon: Heart
},
{
title: "Documentation", description: "Comprehensive guides and API documentation for easy integration.", buttonIcon: Award,
buttonHref: "contact"},
title: t.service3,
description: t.service3Desc,
imageSrc: "http://img.b2bpic.net/free-photo/colorful-crystals-flowers-assortment_23-2149324181.jpg", imageAlt: language === "en" ? "Healing crystals arranged for reiki energy work" : "Cristaux de guérison arrangés pour le travail énergétique reiki", buttonIcon: Zap
},
{
title: t.service4,
description: t.service4Desc,
imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-is-doing-yoga-outdoors-stretching-park-sunrise-brunette-white-t-shirt_1157-39675.jpg", imageAlt: language === "en" ? "Peaceful healing environment for trauma release" : "Environnement de guérison paisible pour la libération des traumatismes", buttonIcon: Shield
},
{
title: t.service5,
description: t.service5Desc,
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-yoga-mat_23-2148898576.jpg", imageAlt: language === "en" ? "Remote reiki healing session setup" : "Configuration de session de guérison reiki à distance", buttonIcon: Wifi
},
{
title: t.service6,
description: t.service6Desc,
imageSrc: "http://img.b2bpic.net/free-photo/i-always-feel-relieved-after-session-with-you_637285-9953.jpg", imageAlt: language === "en" ? "One-on-one healing integration session" : "Session d'intégration de guérison individuelle", buttonIcon: BookOpen
}
]}
textboxLayout="default"
useInvertedBackground={false}
tag={language === "en" ? "Holistic Services" : "Services holistiques"}
tagAnimation="slide-up"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title={t.pricingTitle}
description={t.pricingDesc}
plans={[
{
id: "starter", name: "Starter", price: "$29", badge: "Popular", badgeIcon: TrendingUp,
buttons: [{ text: "Get Started", href: "contact" }],
features: ["Basic components", "Community support", "1 project"],
id: "1", price: "$75", name: t.session30,
buttons: [
{ text: t.bookNow, href: "#contact" },
{ text: t.learnMore, href: "#" }
],
features: [
language === "en" ? "Introductory reiki session" : "Session reiki d'introduction", language === "en" ? "Energy assessment" : "Évaluation énergétique", language === "en" ? "Chakra clearing" : "Nettoyage des chakras", language === "en" ? "Ideal for first-time clients" : "Idéal pour les nouveaux clients"
]
},
{
id: "pro", name: "Pro", price: "$99", buttons: [{ text: "Get Started", href: "contact" }],
features: ["All components", "Priority support", "Unlimited projects"],
id: "2", badge: t.mostPopular,
badgeIcon: Heart,
price: "$120", name: t.session60,
buttons: [
{ text: t.bookNow, href: "#contact" },
{ text: t.learnMore, href: "#" }
],
features: [
language === "en" ? "Full-spectrum reiki healing" : "Guérison reiki à spectre complet", language === "en" ? "Deep chakra balancing" : "Équilibrage profond des chakras", language === "en" ? "Energy cord clearing" : "Nettoyage des cordes énergétiques", language === "en" ? "Integration guidance" : "Conseils d'intégration"
]
},
{
id: "enterprise", name: "Enterprise", price: "Custom", buttons: [{ text: "Contact Sales", href: "contact" }],
features: ["Everything in Pro", "Dedicated support", "Custom solutions"],
id: "3", price: "$180", name: t.session90,
buttons: [
{ text: t.bookNow, href: "#contact" },
{ text: t.learnMore, href: "#" }
],
features: [
language === "en" ? "Comprehensive energy work" : "Travail énergétique complet", language === "en" ? "Trauma release session" : "Session de libération des traumatismes", language === "en" ? "Crystal energy integration" : "Intégration de l'énergie cristalline", language === "en" ? "Extended guidance" : "Conseils étendus"
]
},
{
id: "4", price: "$300/mo", name: t.sessionMonthly,
buttons: [
{ text: t.subscribe, href: "#contact" },
{ text: t.learnMore, href: "#" }
],
features: [
language === "en" ? "4 monthly sessions (60 min each)" : "4 sessions mensuelles (60 min chacune)", language === "en" ? "Priority scheduling" : "Planification prioritaire", language === "en" ? "Personalized healing plan" : "Plan de guérison personnalisé", language === "en" ? "Monthly integration check-ins" : "Vérifications d'intégration mensuelles"
]
}
]}
title="Pricing Plans"
description="Choose the plan that fits your needs."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
tag={language === "en" ? "Transparent Pricing" : "Tarification transparente"}
tagAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title={t.testimonialTitle}
description={t.testimonialDesc}
testimonials={[
{
id: "1", name: "Sarah Mitchell", role: "CEO", company: "TechFlow Inc", rating: 5,
id: "1", name: "Sarah Mitchell", role: language === "en" ? "Executive Director" : "Directrice exécutive", company: "Tech Innovation Lab", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg"
},
{
id: "2", name: "John Davis", role: "Designer", company: "Creative Studio", rating: 5,
id: "2", name: "James Chen", role: language === "en" ? "Yoga Instructor" : "Instructeur de yoga", company: "Wellness Center", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-gym_23-2150007196.jpg"
},
{
id: "3", name: "Emma Wilson", role: "Developer", company: "Dev Solutions", rating: 5,
id: "3", name: "Emily Rodriguez", role: language === "en" ? "Life Coach" : "Coach de vie", company: "Transformation Coaching", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-businesswoman-looking-camera-with-arms-crossed-portrait_1163-4337.jpg"
},
{
id: "4", name: "Michael Thompson", role: language === "en" ? "Corporate Wellness Manager" : "Gestionnaire du bien-être d'entreprise", company: "Fortune 500 Company", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
}
]}
kpiItems={[
{ value: "10k+", description: "Active Users", icon: Users },
{ value: "500+", description: "Projects Built", icon: TrendingUp },
{ value: "99.9%", description: "Uptime", icon: Award },
{ value: "500+", label: language === "en" ? "Clients healed" : "Clients guéris" },
{ value: "98%", label: language === "en" ? "Client satisfaction rate" : "Taux de satisfaction client" },
{ value: "15+", label: language === "en" ? "Years of practice" : "Années de pratique" }
]}
title="Loved by Users"
description="See what our customers have to say about Webild."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
tag={language === "en" ? "Client Stories" : "Histoires de clients"}
tagAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to build something amazing? Let's get started."
text={t.contactTitle}
animationType="reveal-blur"
buttons={[
{ text: t.schedule, href: "#pricing" },
{ text: t.sendMessage, href: "#" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
buttons={[
{ text: "Contact Us", href: "contact" },
{ text: "Learn More", href: "services" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText={t.footerBrand}
copyrightText={t.footerCopyright}
columns={[
{
title: "Product", items: [
{ label: "Components", href: "services" },
{ label: "Documentation", href: "services" },
{ label: "Pricing", href: "pricing" },
],
title: language === "en" ? "Services" : "Services", items: [
{ label: t.service1, href: "#services" },
{ label: t.service2, href: "#services" },
{ label: t.service3, href: "#services" },
{ label: t.service5, href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About", href: "about" },
{ label: "Blog", href: "services" },
{ label: "Contact", href: "contact" },
],
title: language === "en" ? "About" : "À propos", items: [
{ label: language === "en" ? "Meet Your Healer" : "Rencontrez votre guérisseur", href: "#about" },
{ label: t.credentials, href: "#" },
{ label: language === "en" ? "Healing Philosophy" : "Philosophie de guérison", href: "#" },
{ label: t.testimonialTitle, href: "#testimonials" }
]
},
{
title: "Resources", items: [
{ label: "Documentation", href: "services" },
{ label: "Support", href: "contact" },
{ label: "Community", href: "services" },
],
},
title: language === "en" ? "Connect" : "Connecter", items: [
{ label: language === "en" ? "Book a Session" : "Réserver une session", href: "#pricing" },
{ label: language === "en" ? "Email" : "E-mail", href: "#" },
{ label: language === "en" ? "Privacy Policy" : "Politique de confidentialité", href: "#" },
{ label: language === "en" ? "Contact" : "Contact", href: "#contact" }
]
}
]}
logoText="Webild"
copyrightText="© 2025 Webild. All rights reserved."
/>
</div>
</ThemeProvider>