Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
import React, { useState, useEffect } from “react”;
/* ==================================================================
HOUSE OF PEACE — English edition
——————————————————————
Two things live at the top of this file and nowhere else:
1. THEME — every colour used on the site
2. IMAGES — every image slot on the site
Change them here and the whole site follows.
================================================================== */
/* ——————————————————————
1. THEME
Colours read from the live site. Nothing invented.
—————————————————————— */
const THEME = {
brown: “#A1744C”, // main headings
tan: “#C6A480”, // eyebrows, buttons, rules
tanSoft: “#E3D2BE”, // hairlines, light fills
grey: “#7F7F7F”, // body copy
white: “#FFFFFF”, // page background
offWhite: “#FAF8F6”, // alternate section background
dark: “#3A3A3A”, // strong text where needed
// badge colours — these come from the courses plugin already on the site
featured: “#7DB442”,
special: “#E9A33C”,
isNew: “#5CB85C”,
hot: “#E74C3C”,
};
/* ——————————————————————
2. IMAGES
Every slot the site needs. Leave a value empty (“”) and a labelled
placeholder box appears in its place, with the size it expects.
Replace with your own uploaded files or a direct URL.
—————————————————————— */
const IMAGES = {
logo: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/Untitled-design-25.png”,
label: “Logo”,
size: “200 × 60”,
},
hero: {
src: encodeURI(
“https://houseofpeace.space/wp-content/uploads/2024/09/طريق-الإرتقاء-الروحي-2.png”
),
label: “Hero background”,
size: “1920 × 900”,
},
coach: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/IMG-20231216-WA0049-e1727516979443.jpg”,
label: “Coach portrait”,
size: “768 × 1153”,
},
instructor: {
src: “https://houseofpeace.space/wp-content/uploads/stm_lms_avatars/stm_lms_avatar2.jpg”,
label: “Instructor avatar”,
size: “100 × 100”,
},
story: {
src: “https://houseofpeace.space/wp-content/uploads/elementor/thumbs/20240119_151312-scaled-quro2x9c8z6ixkeno7c2uey179071uambac6jqzlog.jpg”,
label: “House of Peace photo”,
size: “800 × 600”,
},
band: {
src: encodeURI(
“https://houseofpeace.space/wp-content/uploads/2024/09/طريق-الإرتقاء-الروحي-4-1024×576.png”
),
label: “Closing banner background”,
size: “1600 × 700”,
},
course_maryam: {
src: “https://houseofpeace.space/wp-content/uploads/2024/10/download-12.jpeg”,
label: “Course cover — Maryam Consciousness”,
size: “768 × 432”,
},
course_stations: {
src: “https://houseofpeace.space/wp-content/uploads/2026/02/A_cinematic_ultrarealistic_2k_202602151037-1-768×429.jpeg”,
label: “Course cover — Stations of the Soul”,
size: “768 × 432”,
},
course_river: {
src: “https://houseofpeace.space/wp-content/uploads/2026/01/A_luxurious_cinematic_2k_202601101216-scaled.jpeg”,
label: “Course cover — River of Abundance”,
size: “768 × 432”,
},
course_energy: {
src: encodeURI(
“https://houseofpeace.space/wp-content/uploads/2024/09/طريق-الإرتقاء-الروحي-1-768×432.png”
),
label: “Course cover — Energy Healing”,
size: “768 × 432”,
},
course_ascent: {
src: encodeURI(
“https://houseofpeace.space/wp-content/uploads/2024/09/طريق-الإرتقاء-الروحي-768×432.png”
),
label: “Course cover — The Path of Ascent”,
size: “768 × 432”,
},
// “A method you will not find elsewhere”
benefit_1: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/3-1.png”,
label: “Icon — healing techniques”,
size: “75 × 75”,
},
// “A deeper line to yourself”
benefit_2: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/2-1.png”,
label: “Icon — spiritual connection”,
size: “75 × 75”,
},
// “Peace that holds up”
benefit_3: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/1-1.png”,
label: “Icon — inner peace”,
size: “75 × 75”,
},
// “People walking the same way”
benefit_4: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/5-1.png”,
label: “Icon — community”,
size: “75 × 75”,
},
// “Room for joy”
benefit_5: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/6-1.png”,
label: “Icon — freedom and joy”,
size: “75 × 75”,
},
// “Real change, guided”
benefit_6: {
src: “https://houseofpeace.space/wp-content/uploads/2024/09/4-1.png”,
label: “Icon — transformation”,
size: “75 × 75”,
},
testimonial_1: {
src: “https://houseofpeace.space/wp-content/uploads/elementor/thumbs/7-qufrc2w0f5x3sq5qme09u4u8bcxyegrofrgbovfx7s.png”,
label: “Photo — Lina Khaled”,
size: “100 × 100”,
},
testimonial_2: {
src: “https://houseofpeace.space/wp-content/uploads/elementor/thumbs/8-qufrcoiascqp7rac45coxhdtz7zebi5i6qghq8jv8o.png”,
label: “Photo — Oumaima Adel”,
size: “100 × 100”,
},
testimonial_3: {
src: “https://houseofpeace.space/wp-content/uploads/elementor/thumbs/9-qufrd3jptpbadiohobuq1dl7hdx9qnt7ksw9enxkh4.png”,
label: “Photo — Sara Mohamed”,
size: “100 × 100”,
},
};
/* ——————————————————————
Content
—————————————————————— */
const COURSES = [
{
slug: “maryam-consciousness”,
title: “Maryam Consciousness”,
category: “Spirituality”,
img: “course_maryam”,
badges: [
{ t: “Featured”, c: THEME.featured },
{ t: “Special”, c: THEME.special },
],
price: 5000,
was: 8000,
lectures: 28,
duration: “10 weeks”,
level: “All levels”,
students: 2209,
short:
“A ten-week passage into the balance between your feminine and masculine energies — femininity seen from an entirely different angle.”,
long: “Maryam Consciousness is the deepest work we teach. Over ten weeks you meet the feminine as a force rather than a role: receptive, sovereign, and whole. Week by week you unlearn the inherited fear around softness, restore the exchange between your feminine and masculine energies, and let your body come back into a rhythm it recognises. The work is slow on purpose. Nothing here is forced.”,
outcomes: [
“Recognise where your feminine energy has been shut down, and how to open it again without losing your ground”,
“Restore a working exchange between receiving and acting”,
“Meet the parts of your story you have been carrying for someone else”,
“Build a daily practice you will still be doing a year from now”,
],
modules: [
{ t: “Arrival”, d: “Meeting yourself where you actually are — the honest starting point.” },
{ t: “The inherited feminine”, d: “What you were taught about womanhood, and who taught it.” },
{ t: “The body remembers”, d: “Reading tension as information rather than a fault.” },
{ t: “Receiving”, d: “The practice most of us were never given permission for.” },
{ t: “The masculine within”, d: “Direction, boundaries, and holding your own weight.” },
{ t: “The exchange”, d: “Bringing both energies into a working relationship.” },
{ t: “Grief”, d: “Making room for what was never mourned.” },
{ t: “Sovereignty”, d: “Living from your own centre, not from anticipation.” },
{ t: “Integration”, d: “Turning ten weeks of work into an ordinary daily life.” },
{ t: “Continuing”, d: “Where the practice goes once the course ends.” },
],
},
{
slug: “stations-of-the-soul”,
title: “Stations of the Soul”,
category: “Spirituality”,
img: “course_stations”,
badges: [{ t: “Members only”, c: THEME.brown }],
price: 0,
was: null,
lectures: 64,
duration: “One month”,
level: “All levels”,
students: 750,
short:
“A month-long companion through Ramadan, moving from the scattered self to the station of serenity.”,
long: “Sixty-four short sessions holding Quranic wisdom alongside a plain psychological reading of the self. The journey follows the classical stations — the self that commands, the self that reproaches, the self that rests — and treats them as places you actually pass through rather than abstractions. Designed for the rhythm of Ramadan, but it holds up in any month you need it.”,
outcomes: [
“Name the state you are in instead of drowning in it”,
“Work with the classical stations of the self as a practical map”,
“Pair fasting with attention rather than exhaustion”,
“Leave the month with a settled nervous system, not a depleted one”,
],
modules: [
{ t: “The scattered self”, d: “Where the noise comes from, and why it is loudest at the start.” },
{ t: “The self that commands”, d: “Appetite, impulse, and the honest look at both.” },
{ t: “The self that reproaches”, d: “Guilt as a signal, not a sentence.” },
{ t: “The turning”, d: “The middle of the month, where most people quit.” },
{ t: “The inspired self”, d: “Clarity arriving after the noise thins out.” },
{ t: “The self at rest”, d: “Serenity as a station you can return to, not a mood.” },
],
},
{
slug: “river-of-abundance”,
title: “River of Abundance”,
category: “Consciousness”,
img: “course_river”,
badges: [
{ t: “New”, c: THEME.isNew },
{ t: “Members only”, c: THEME.brown },
],
price: 0,
was: null,
lectures: 28,
duration: “8 weeks”,
level: “All levels”,
students: 1135,
short:
“Healing money wounds, balancing feminine energy, and switching on the part of you that can hold wealth without flinching.”,
long: “Most of what we call a money problem is an old fear wearing a new suit. This programme works backwards from the symptom — the underearning, the overgiving, the account you avoid looking at — to the moment the belief was formed. Then it rebuilds the relationship from the ground up, so abundance stops being something you chase and becomes something you can stay in.”,
outcomes: [
“Trace your money patterns to the moment they were learned”,
“Break the loop of earning and immediately losing”,
“Ask, price, and receive without apologising”,
“Hold financial sovereignty as a steady state rather than a good month”,
],
modules: [
{ t: “The first wound”, d: “The earliest memory you have of money, and what it taught you.” },
{ t: “Overgiving”, d: “Generosity as a hiding place.” },
{ t: “The ceiling”, d: “Why the number stops where it stops.” },
{ t: “Receiving money”, d: “The physical practice of not flinching.” },
{ t: “Pricing yourself”, d: “Naming a figure and staying in the room.” },
{ t: “Sovereignty”, d: “Money as a relationship you maintain.” },
],
},
{
slug: “energy-healing-chakra-cleansing”,
title: “Energy Healing & Chakra Cleansing”,
category: “Spirituality”,
img: “course_energy”,
badges: [{ t: “Hot”, c: THEME.hot }],
price: 3997,
was: 5000,
lectures: 12,
duration: “3 weeks”,
level: “Beginner friendly”,
students: 880,
short: “The method itself: Kriya Yoga joined to chakra cleansing through the Divine Names.”,
long: “This is where the House of Peace method is taught directly. Kriya Yoga gives the breath and the discipline; the Divine Names give the cleansing its direction. Over three weeks you learn to read your own energy field, clear each centre in sequence, and hold a session for yourself from beginning to end. By the last week you are not following along — you are practising.”,
outcomes: [
“Read your own energy field and notice where it is holding”,
“Clear each of the seven centres in sequence”,
“Use the Divine Names as the working instrument of the cleansing”,
“Run a complete session for yourself, unaided”,
],
modules: [
{ t: “The field”, d: “What you are actually working with.” },
{ t: “Breath first”, d: “The Kriya foundation everything else sits on.” },
{ t: “The lower centres”, d: “Safety, appetite, will.” },
{ t: “The heart”, d: “The centre that decides whether the rest opens.” },
{ t: “The upper centres”, d: “Voice, sight, and the crown.” },
{ t: “A full session”, d: “Putting the sequence together, start to finish.” },
],
},
{
slug: “the-path-of-ascent”,
title: “The Path of Ascent”,
category: “Spirituality”,
img: “course_ascent”,
badges: [{ t: “New”, c: THEME.isNew }],
price: 2867,
was: 3000,
lectures: 10,
duration: “3 weeks”,
level: “Beginner friendly”,
students: 902,
short:
“Practices that raise the level of your attention and deepen the line between you and everything else.”,
long: “A short, steep course for people who already have a practice and want it to go further. Three weeks of concentrated technique — stillness, attention, and the deliberate widening of what you are able to perceive. It asks for twenty honest minutes a day and gives back a noticeably different quality of attention.”,
outcomes: [
“Hold stillness for longer without effort turning into strain”,
“Direct your attention rather than have it happen to you”,
“Deepen the connection between your ordinary self and your larger one”,
“Establish a practice that survives a bad week”,
],
modules: [
{ t: “Stillness”, d: “The unglamorous first requirement.” },
{ t: “Attention”, d: “Directing it on purpose.” },
{ t: “Widening”, d: “Perceiving more without grasping at it.” },
{ t: “Staying”, d: “What keeps the practice alive after week three.” },
],
},
];
const BENEFITS = [
{
img: “benefit_1”,
t: “A method you will not find elsewhere”,
d: “Kriya Yoga and energy cleansing through the Divine Names, developed over years of study and practice.”,
},
{
img: “benefit_2”,
t: “A deeper line to yourself”,
d: “Not self-improvement. A working connection to the part of you that was never damaged.”,
},
{
img: “benefit_3”,
t: “Peace that holds up”,
d: “Balance you can keep on an ordinary Tuesday, not only on a retreat.”,
},
{
img: “benefit_4”,
t: “People walking the same way”,
d: “A community of women at a similar frequency, which changes how fast the work moves.”,
},
{
img: “benefit_5”,
t: “Room for joy”,
d: “Lightness and freedom are not the reward at the end. They are part of the practice.”,
},
{
img: “benefit_6”,
t: “Real change, guided”,
d: “You are not doing this alone or guessing. There is someone ahead of you on the path.”,
},
];
const TESTIMONIALS = [
{
img: “testimonial_1”,
name: “Lina Khaled”,
text: “Being part of this community has been something I did not expect. The teaching goes deep and the people around you hold you while it does. It changed my personal growth, and it changed my ordinary days.”,
},
{
img: “testimonial_2”,
name: “Oumaima Adel”,
text: “El Khansaa’s way of working with energy and the chakras lifted my whole path. The blend of ancient practice and spiritual wisdom brought me to a balance I did not think was available to me.”,
},
{
img: “testimonial_3”,
name: “Sara Mohamed”,
text: “House of Peace genuinely changed my life. Through El Khansaa’s guidance I found inner peace and a much deeper connection to who I actually am. The courses are clarifying and they go all the way down.”,
},
];
const money = (n) => n.toLocaleString(“en-US”) + ” DH”;
/* ——————————————————————
Styles — every colour pulled from THEME
—————————————————————— */
const CSS = `
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap’);
*, *::before, *::after { box-sizing: border-box; }
.hop {
–brown:${THEME.brown};
–tan:${THEME.tan};
–tan-soft:${THEME.tanSoft};
–grey:${THEME.grey};
–white:${THEME.white};
–off:${THEME.offWhite};
–dark:${THEME.dark};
font-family:’Inter’,system-ui,sans-serif;
color:var(–grey);
background:var(–white);
line-height:1.75;
-webkit-font-smoothing:antialiased;
}
.hop h1,.hop h2,.hop h3,.hop h4,.hop .disp {
font-family:’Poppins’,system-ui,sans-serif;
color:var(–brown); font-weight:600; line-height:1.3; margin:0;
}
.hop p { margin:0 0 1rem; }
.hop button { font-family:inherit; cursor:pointer; }
.hop a { color:inherit; text-decoration:none; }
.hop img { display:block; max-width:100%; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.eyebrow { color:var(–tan); font-family:’Poppins’,sans-serif; font-weight:600; font-size:1rem; margin-bottom:.4rem; }
.rule { width:64px; height:2px; background:var(–tan); margin:1rem 0 1.6rem; border:0; }
.rule-c { margin-left:auto; margin-right:auto; }
.lede { font-size:1rem; color:var(–grey); max-width:60ch; }
/* placeholder slot */
.slot {
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:.35rem; text-align:center; padding:1rem;
background:var(–off); border:2px dashed var(–tan-soft); color:var(–tan);
font-family:’Poppins’,sans-serif; font-size:.78rem; font-weight:500;
width:100%; height:100%; min-height:80px;
}
.slot small { color:var(–grey); font-size:.7rem; font-weight:400; opacity:.8; }
/* buttons */
.btn {
display:inline-flex; align-items:center; justify-content:center;
padding:.85rem 2rem; border:none; border-radius:4px;
background:var(–tan); color:var(–white);
font-family:’Poppins’,sans-serif; font-size:.9rem; font-weight:500;
transition:background .25s ease;
}
.btn:hover { background:var(–brown); }
.btn-outline { background:transparent; color:var(–brown); border:1px solid var(–tan); }
.btn-outline:hover { background:var(–tan); color:var(–white); }
.btn-white { background:var(–white); color:var(–brown); }
.btn-white:hover { background:var(–tan); color:var(–white); }
/* nav */
.nav { position:sticky; top:0; z-index:60; background:var(–white); border-bottom:1px solid var(–tan-soft); }
.nav-in { display:flex; align-items:center; gap:2rem; height:78px; }
.nav-logo { height:44px; width:auto; }
.nav-logo-slot { width:150px; height:44px; }
.nav-links { display:flex; gap:2.2rem; margin-left:auto; }
.nav-link {
background:none; border:none; padding:.4rem 0; color:var(–grey);
font-family:’Poppins’,sans-serif; font-size:.92rem; font-weight:500;
border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.nav-link:hover { color:var(–brown); }
.nav-link.on { color:var(–brown); border-color:var(–tan); }
.nav-cta { margin-left:1.4rem; padding:.6rem 1.4rem; font-size:.85rem; }
.burger { display:none; margin-left:auto; background:none; border:none; color:var(–brown); font-size:1.5rem; padding:.2rem .4rem; }
.drawer { display:none; flex-direction:column; padding:.5rem 24px 1.2rem; background:var(–white); border-top:1px solid var(–tan-soft); }
.drawer .nav-link { text-align:left; padding:.8rem 0; border-bottom:1px solid var(–tan-soft); border-top:0; }
/* hero */
.hero { position:relative; background:var(–off); text-align:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-veil { position:absolute; inset:0; background:rgba(255,255,255,.86); }
.hero-in { position:relative; z-index:2; padding:7rem 0 7.5rem; }
.hero h1 { font-size:clamp(2rem,4.4vw,3.2rem); max-width:19ch; margin:0 auto 1.5rem; }
.hero-sub { font-size:1.12rem; max-width:60ch; margin:0 auto 2.4rem; }
/* sections */
.sec { padding:5.5rem 0; }
.sec-off { background:var(–off); }
.sec-head { text-align:center; margin-bottom:3.5rem; }
.sec-head h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); }
.sec-head p { max-width:58ch; margin:1rem auto 0; }
/* coach */
.coach { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.coach-rev { grid-template-columns:.9fr 1.1fr; }
.coach h2 { font-size:clamp(1.9rem,4vw,2.9rem); }
.coach-frame { border:1px solid var(–tan-soft); padding:8px; border-radius:4px; }
.coach-frame img, .coach-frame .slot { aspect-ratio:3/4; object-fit:cover; width:100%; }
/* course cards */
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.card {
background:var(–white); border:1px solid var(–tan-soft); border-radius:6px;
display:flex; flex-direction:column; overflow:hidden; text-align:left; padding:0;
transition:box-shadow .3s ease, transform .3s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:0 14px 32px -20px rgba(161,116,76,.55); }
.card-img { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(–off); }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-img img { transform:scale(1.05); }
.badges { position:absolute; top:10px; left:10px; display:flex; gap:.35rem; flex-wrap:wrap; }
.badge {
color:var(–white); font-family:’Poppins’,sans-serif; font-size:.62rem;
font-weight:600; letter-spacing:.05em; text-transform:uppercase;
padding:.28rem .6rem; border-radius:3px;
}
.card-body { padding:1.35rem 1.35rem 0; flex:1; }
.card-cat { color:var(–tan); font-family:’Poppins’,sans-serif; font-size:.75rem; font-weight:600; }
.card h3 { font-size:1.12rem; margin:.4rem 0 .6rem; }
.card p { font-size:.87rem; margin:0; line-height:1.65; }
.card-foot {
display:flex; align-items:center; justify-content:space-between; gap:.8rem;
padding:1.1rem 1.35rem; margin-top:1.2rem; border-top:1px solid var(–tan-soft);
}
.card-facts { font-size:.75rem; color:var(–grey); }
.price { font-family:’Poppins’,sans-serif; font-weight:600; color:var(–brown); font-size:1rem; white-space:nowrap; }
.price s { color:var(–grey); font-weight:400; font-size:.8rem; margin-right:.4rem; opacity:.75; }
.price.free { color:var(–tan); }
/* benefits */
.bgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem; }
.bcell { text-align:center; }
.bicon { width:64px; height:64px; margin:0 auto 1.1rem; }
.bicon img { width:100%; height:100%; object-fit:contain; }
.bcell h3 { font-size:1.08rem; margin-bottom:.5rem; }
.bcell p { font-size:.88rem; margin:0; }
/* testimonials */
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.tcard { background:var(–white); border:1px solid var(–tan-soft); border-radius:6px; padding:2rem; }
.tcard p { font-size:.92rem; font-style:italic; }
.tfoot { display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.tavatar { width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.tavatar img { width:100%; height:100%; object-fit:cover; }
.tfoot b { font-family:’Poppins’,sans-serif; font-weight:600; font-size:.95rem; color:var(–brown); }
/* band */
.band { position:relative; text-align:center; overflow:hidden; background:var(–off); }
.band-bg { position:absolute; inset:0; }
.band-bg img { width:100%; height:100%; object-fit:cover; }
.band-veil { position:absolute; inset:0; background:rgba(255,255,255,.88); }
.band-in { position:relative; z-index:2; padding:6rem 0; }
.band h2 { font-size:clamp(1.8rem,3.8vw,2.7rem); max-width:22ch; margin:0 auto 1.2rem; }
.band p { max-width:54ch; margin:0 auto 2rem; }
/* page header */
.phead { background:var(–off); padding:4.5rem 0 4rem; text-align:center; }
.phead h1 { font-size:clamp(2rem,4.4vw,3rem); margin-bottom:1rem; }
.phead p { max-width:58ch; margin:0 auto; }
.back { background:none; border:none; color:var(–tan); font-family:’Poppins’,sans-serif; font-size:.85rem; font-weight:500; padding:0 0 .8rem; }
.back:hover { color:var(–brown); }
/* filters */
.filters { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.8rem; }
.chip {
background:transparent; border:1px solid var(–tan-soft); color:var(–grey);
padding:.5rem 1.3rem; border-radius:99px;
font-family:’Poppins’,sans-serif; font-size:.85rem; font-weight:500; transition:all .2s;
}
.chip:hover { border-color:var(–tan); color:var(–brown); }
.chip.on { background:var(–tan); border-color:var(–tan); color:var(–white); }
/* course detail */
.cdetail { display:grid; grid-template-columns:1.55fr .75fr; gap:3.5rem; align-items:start; }
.cd-hero { aspect-ratio:16/9; border-radius:6px; overflow:hidden; margin-bottom:2.5rem; }
.cd-hero img { width:100%; height:100%; object-fit:cover; }
.buy { position:sticky; top:104px; border:1px solid var(–tan-soft); border-radius:6px; background:var(–white); padding:1.8rem; }
.buy .price { font-size:1.8rem; display:block; }
.buy-save { color:var(–tan); font-family:’Poppins’,sans-serif; font-size:.82rem; font-weight:600; margin-top:.2rem; }
.buy .btn { width:100%; margin-top:1.4rem; }
.buy ul { list-style:none; padding:0; margin:1.6rem 0 0; border-top:1px solid var(–tan-soft); }
.buy li { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; font-size:.85rem; border-bottom:1px solid var(–tan-soft); }
.buy li b { color:var(–brown); font-weight:500; }
.sub-h { font-size:1.4rem; margin:2.8rem 0 1.2rem; }
.mod { display:flex; gap:1.3rem; padding:1.25rem 0; border-bottom:1px solid var(–tan-soft); }
.mod-n { font-family:’Poppins’,sans-serif; font-weight:600; color:var(–tan); font-size:.95rem; min-width:2.2ch; }
.mod h4 { font-size:1.02rem; margin-bottom:.2rem; }
.mod p { font-size:.87rem; margin:0; }
.outcomes { list-style:none; padding:0; margin:0; }
.outcomes li { position:relative; padding:0 0 .8rem 1.6rem; font-size:.93rem; }
.outcomes li::before { content:’✓’; position:absolute; left:0; color:var(–tan); font-weight:700; }
.byline { display:flex; align-items:center; gap:1rem; margin-top:2.8rem; }
.byline .tavatar { width:56px; height:56px; }
/* about */
.prose { max-width:72ch; margin:0 auto; }
.prose h3 { font-size:1.35rem; margin:2.6rem 0 .8rem; }
.prose strong { color:var(–brown); font-weight:600; }
.pull {
border-left:3px solid var(–tan); padding:.5rem 0 .5rem 1.6rem; margin:2.4rem 0;
font-family:’Poppins’,sans-serif; font-size:1.15rem; line-height:1.6; color:var(–brown); font-weight:500;
}
.letter { background:var(–white); border:1px solid var(–tan-soft); border-radius:6px; padding:2.8rem; max-width:72ch; margin:0 auto; }
.letter .sig { text-align:right; font-family:’Poppins’,sans-serif; font-weight:600; color:var(–tan); margin-top:1.6rem; }
/* join */
.join { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; max-width:960px; margin:0 auto; }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-family:’Poppins’,sans-serif; font-size:.82rem; font-weight:500; color:var(–brown); margin-bottom:.45rem; }
.field input {
width:100%; padding:.8rem 1rem; border:1px solid var(–tan-soft); border-radius:4px;
background:var(–white); font-family:inherit; font-size:.95rem; color:var(–dark);
}
.field input:focus { outline:2px solid var(–tan); outline-offset:1px; border-color:transparent; }
.hint { font-size:.78rem; margin:.45rem 0 0; }
.switch { margin-top:1.4rem; font-size:.9rem; }
.switch button { background:none; border:none; color:var(–brown); font-weight:600; text-decoration:underline; padding:0; }
/* footer */
.foot { background:var(–off); border-top:1px solid var(–tan-soft); padding:4rem 0 1.8rem; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; margin-bottom:2.6rem; }
.foot h4 { font-size:.95rem; margin-bottom:1rem; }
.foot ul { list-style:none; padding:0; margin:0; }
.foot li { margin-bottom:.55rem; font-size:.9rem; }
.foot button { background:none; border:none; color:var(–grey); font-size:.9rem; padding:0; }
.foot button:hover { color:var(–brown); }
.foot-note { font-size:.9rem; max-width:38ch; }
.foot-bar { border-top:1px solid var(–tan-soft); padding-top:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }
/* responsive */
@media (max-width:1024px) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
.coach, .coach-rev { grid-template-columns:1fr; gap:2.5rem; }
.coach-frame { max-width:340px; }
.bgrid, .tgrid, .grid-3 { grid-template-columns:repeat(2,1fr); }
.cdetail { grid-template-columns:1fr; }
.buy { position:static; }
.join { grid-template-columns:1fr; gap:2.5rem; }
.foot-grid { grid-template-columns:1fr 1fr; }
.nav-links, .nav-cta { display:none; }
.burger { display:block; }
.drawer.open { display:flex; }
}
@media (max-width:620px) {
.sec { padding:3.8rem 0; }
.grid, .bgrid, .tgrid, .grid-3, .foot-grid { grid-template-columns:1fr; }
.letter { padding:1.6rem; }
}
@media (prefers-reduced-motion:reduce) {
.hop *, .hop *::before, .hop *::after { animation:none !important; transition:none !important; }
}
`;
/* ——————————————————————
Image slot — shows a labelled box when there is no image
—————————————————————— */
function Slot({ name, className = “”, style, round }) {
const cfg = IMAGES[name] || { src: “”, label: name, size: “” };
const [failed, setFailed] = useState(false);
if (!cfg.src || failed) {
return (
{cfg.label}
{cfg.size && {cfg.size}}
);
}
return (
setFailed(true)}
/>
);
}
function Price({ c }) {
if (c.price === 0) return
Free
;
return (
{c.was && {money(c.was)}}
{money(c.price)}
);
}
function CourseCard({ c, go }) {
return (
{c.badges.length > 0 && (
{c.badges.map((b) => (
{b.t}
))}
)}
{c.category}
{c.title}
{c.short}
{c.lectures} lessons · {c.duration}
);
}
/* ——————————————————————
Pages
—————————————————————— */
function Home({ go }) {
return (
<>
House of Peace Academy
Discover inner peace and self-realisation
Transform your life through courses that balance your energies, raise your awareness, and
walk with you on the journey back to yourself.
{/* coach */}
The coach
El Khansaa
A consciousness coach and bio-energy healer committed to guiding you toward inner peace
and self-realisation. Through years of practice and study under renowned spiritual
teachers in India and around the world, El Khansaa developed a healing method of her
own: Kriya Yoga joined to energy cleansing through the Divine Names.
Her approach is whole-person, and it starts with the balance between your feminine and
masculine energies — so you can rise spiritually and live a life that feels fuller and
far more connected.
{/* courses */}
Our most popular courses
{COURSES.slice(0, 4).map((c) => (
))}
{/* benefits */}
What joining House of Peace gives you
To be better than you were yesterday, you first have to arrive at yourself.
{BENEFITS.map((b) => (
{b.t}
{b.d}
))}
{/* testimonials */}
Testimonials
{TESTIMONIALS.map((t) => (
{t.text}
{t.name}
))}
{/* band */}
Begin your journey to inner peace today
Join House of Peace Academy and transform your life through our complete online courses.
Register now and take the first step toward a more balanced future.
Every programme is self-paced and taught in full. Start wherever the description makes
your stomach turn slightly — that is usually the right one.
{cats.map((c) => (
))}
{list.map((c) => (
))}
);
}
function CourseDetail({ slug, go }) {
const c = COURSES.find((x) => x.slug === slug) || COURSES[0];
useEffect(() => {
window.scrollTo(0, 0);
}, [slug]);
return (
<>
{c.title}
{c.short}
{c.long}
What you will walk away with
{c.outcomes.map((o) => (
{o}
))}
The curriculum
{c.modules.map((m, i) => (
{String(i + 1).padStart(2, “0”)}
{m.t}
{m.d}
))}
Taught by
El Khansaa Bensrhir
);
}
function About({ go }) {
return (
<>
About
My story
How a curiosity about the human soul turned into a method, and then into a house other
people could walk into.
My name is El Khansaa. I am a consciousness coach and a bio-energy
healer, and this is the road that led me to founding House of Peace.
Where it started
From the time I was small I was drawn to the questions nobody around me was asking — what
the soul actually is, and what sits inside us waiting to be used. I was born in Morocco,
in a household that held deep tradition and an open door to the wider world at the same
time. That combination gave me both the language for depth and the permission to go
looking.
Going looking
I followed it. My first real journey took me to Bali, where I learned{” “}
Kriya Yoga and the discipline of deep meditation. That is where I began
to understand energy not as an idea but as something you can feel move, and direct.
Along the way I studied with teachers from very different cultures and faiths. It taught
me something I have never let go of: spiritual wisdom does not belong to one culture, and
what is true about the human soul does not stop at a border or a language.
Every person carries a light that is theirs alone. My work is to help you see yours, and
then to use it.
Building the method
After years of study I needed what I had learned to sit properly inside my own heritage.
The idea of using the Divine Names to cleanse the chakras and settle the
energy landed in me with a certainty I could not argue with. So I built it: Kriya Yoga
and chakra cleansing, carried by the Names. It is the method every course here rests on.
A letter
My journey began in an enormous amount of lostness and grief. A body that peace had
never once touched. Eyes that could not settle, and a mind that would not stop asking:
is this me? Is this what I was given?
I was a dark cloud. She was the light that comes through a raining sky — carrying hope,
and healing, and something close to joy.
I went through a journey with her where I finally touched my own pain and held it. She
was a mirror. She showed me my soul and treated wounds she had no part in making. She
taught me life, and then she taught me how to live it.
She took the abandonment and gave me safety. She took the doubt and gave me certainty.
She received my joy and my tears with the same steadiness.
Through the energy sessions, through a calm smile, through the sound of her voice —
that is what made the version of me I live as now. The peaceful one. The one who loves
being alive.
Yes: peace has reached the edges of my body. My eyes carry light, and my thinking is
kinder than it has ever been. May this road be a gift that does not end.
— Yousra Bradi
The foundation
House of Peace
I built House of Peace as a place where spiritual learning and ordinary personal growth
could happen in the same room. Somewhere safe enough — and light enough — for people to
find out who they actually are, and to bring their lives back into balance.
If you are looking for a deeper understanding of yourself, for balance between your
feminine and masculine energies, for your spirit to sit at a higher level than it does
now, then this is an invitation. We can walk it together.
{mode === “in” ? “Welcome back” : “Create your account”}
{mode === “in”
? “Sign in to pick up where your practice left off.”
: “One account opens every course you enrol in, plus the two member programmes at no cost.”}
{sent ? (
Check your inbox
We sent a link to the address you entered. Open it and you are in.
) : (
{mode === “up” && (
)}
At least 8 characters, with one capital letter and one number.
{mode === “in” ? (
<>
No account yet?
) : (
<>
Already a member?
)}