import { useEffect, useRef, useState } from "react"; import { motion, useScroll, useTransform, useMotionValue, useSpring } from "framer-motion"; /* ───────────────────────────────────────────── GLOBAL STYLES injected into ───────────────────────────────────────────── */ const GlobalStyles = () => ( ); /* ───────────────────────────────────────────── DESIGN TOKENS ───────────────────────────────────────────── */ const T = { bgPrimary: "#0D0A0E", bgCard: "#120E05", bgLight: "#FAF6EE", gold: "#C9A227", goldLight: "#F0C84A", goldPale: "#FDE68A", textWarm: "#D4B896", textLight: "#FAF6EE", }; /* ───────────────────────────────────────────── FADE-IN WRAPPER ───────────────────────────────────────────── */ const FadeIn = ({ children, delay = 0, duration = 0.7, x = 0, y = 30, className = "" }) => ( {children} ); /* ───────────────────────────────────────────── MAGNET COMPONENT ───────────────────────────────────────────── */ const Magnet = ({ children, padding = 120, strength = 3 }) => { const ref = useRef(null); const [active, setActive] = useState(false); const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, { stiffness: 200, damping: 20 }); const sy = useSpring(y, { stiffness: 200, damping: 20 }); useEffect(() => { const el = ref.current; if (!el) return; const handleMove = (e) => { const rect = el.getBoundingClientRect(); const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2; const dx = e.clientX - cx; const dy = e.clientY - cy; const dist = Math.sqrt(dx * dx + dy * dy); const threshold = Math.max(rect.width, rect.height) / 2 + padding; if (dist < threshold) { setActive(true); x.set(dx / strength); y.set(dy / strength); } else { setActive(false); x.set(0); y.set(0); } }; window.addEventListener("mousemove", handleMove); return () => window.removeEventListener("mousemove", handleMove); }, [padding, strength, x, y]); return ( {children} ); }; /* ───────────────────────────────────────────── CTA BUTTON ───────────────────────────────────────────── */ const CTAButton = () => ( أريد أن أنضم ); /* ───────────────────────────────────────────── GHOST BUTTON ───────────────────────────────────────────── */ const GhostButton = ({ label = "اكتشف المزيد" }) => ( {label} ); /* ───────────────────────────────────────────── ANIMATED TEXT (character scroll reveal) ───────────────────────────────────────────── */ const AnimatedText = ({ text, style = {}, className = "" }) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start 0.85", "end 0.15"], }); const chars = text.split(""); return (

{chars.map((char, i) => { const start = i / chars.length; const end = (i + 1) / chars.length; return ( ); })}

); }; const AnimatedChar = ({ char, progress, start, end }) => { const opacity = useTransform(progress, [start, end], [0.15, 1]); return ( {char} ); }; /* ───────────────────────────────────────────── GOLDEN ORB DECORATION ───────────────────────────────────────────── */ const GoldenOrb = ({ size = 300, opacity = 0.15, style = {} }) => (
); /* ───────────────────────────────────────────── SECTION 1 — HERO ───────────────────────────────────────────── */ const HeroSection = () => (
{/* Ambient glow */}
{/* NAVBAR */} {/* HERO HEADING */}

عـــدد محـــدود

جـــدًا

{/* BOTTOM BAR */}

في زمن يزدحم بالضجيج والحلول السريعة… تنفتح هذه المساحة كـ همسة خاصة لمن يشعر أن الوقت قد حان.

{/* CENTERED ORB / LOGO */}
النسبة الذهبية
); /* helper for inline clamp in JS */ const clampVal = (min, max) => `clamp(${min}px, ${(min + max) / 2 / 10}vw, ${max}px)`; /* ───────────────────────────────────────────── SECTION 2 — MARQUEE ───────────────────────────────────────────── */ const MARQUEE_GIFS = [ "https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif", "https://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif", "https://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif", "https://motionsites.ai/assets/hero-stellar-ai-v2-preview-DjvxjG3C.gif", "https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif", "https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif", "https://motionsites.ai/assets/hero-vitara-preview-Cjz2QYyU.gif", "https://motionsites.ai/assets/hero-terra-preview-BFjrCr7T.gif", "https://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif", "https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif", "https://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif", "https://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif", "https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif", "https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif", "https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif", "https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif", "https://motionsites.ai/assets/hero-planet-orbit-preview-DWAP8Z1P.gif", "https://motionsites.ai/assets/hero-new-era-preview-CocuDUm9.gif", "https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif", "https://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif", "https://motionsites.ai/assets/hero-celestia-preview-0yO3jXO8.gif", ]; const MarqueeSection = () => { const sectionRef = useRef(null); const [offset, setOffset] = useState(200); useEffect(() => { const handleScroll = () => { if (!sectionRef.current) return; const rect = sectionRef.current.getBoundingClientRect(); const sectionTop = window.scrollY + rect.top; const val = (window.scrollY - sectionTop + window.innerHeight) * 0.3; setOffset(val); }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); const row1 = [...MARQUEE_GIFS.slice(0, 11), ...MARQUEE_GIFS.slice(0, 11), ...MARQUEE_GIFS.slice(0, 11)]; const row2 = [...MARQUEE_GIFS.slice(11), ...MARQUEE_GIFS.slice(11), ...MARQUEE_GIFS.slice(11)]; return (
{[{ imgs: row1, dir: 1 }, { imgs: row2, dir: -1 }].map(({ imgs, dir }, ri) => (
{imgs.map((src, i) => ( ))}
))}
); }; /* ───────────────────────────────────────────── SECTION 3 — ABOUT "لمن هذه المساحة؟" ───────────────────────────────────────────── */ const AboutSection = () => { const logoSrc = "https://anfaloulmi.com/wp-content/uploads/2025/06/cropped-Artboard-28-270x270.png"; const decorStyle = (extra = {}) => ({ position: "absolute", pointerEvents: "none", opacity: 0.2, ...extra, }); return (
{/* Decorative corners */}
{/* Ambient glow */} {/* Content */}

لمن هذه المساحة؟

); }; /* ───────────────────────────────────────────── SECTION 4 — WHAT HAPPENS "ماذا يحدث؟" ───────────────────────────────────────────── */ const principles = [ { num: "01", name: "لا وعود", desc: "دخول صامت نحو الجذر، نحو المكان الذي لم يُقترب منه من قبل. لا خرائط جاهزة، لا حلول منسوخة.", }, { num: "02", name: "أنفال ترى", desc: "لا تُملي… بل ترى. لا تُرشِد… بل تلتقط. تُحاورك حيث لا تقدر حتى نفسك أن تختبئ.", }, { num: "03", name: "حضور كامل", desc: "ليس بالضغط، بل بالحضور. بهدوء وصدق وشفافية كاملة — هذه هي الأداة الوحيدة.", }, { num: "04", name: "عودة إلى الجذر", desc: "أن تعود بصمت إلى مكانك الصحيح… داخلك. لا إلى دور تؤديه، بل إلى ذاتك الأعمق.", }, ]; const WhatHappensSection = () => (

ماذا يحدث؟

{principles.map((item, i) => (
{/* Number */} {item.num} {/* Text */}

{item.name}

{item.desc}

))}
); /* ───────────────────────────────────────────── SECTION 5 — INTENTION CARDS (STACKING SCROLL) ───────────────────────────────────────────── */ const intentions = [ { num: "01", cat: "تحرر", title: "الانكشاف", desc: "أن ينكشف ما يستحق أن يُرى. أن تتحرر من الدور لا من الحياة.", gradA: "linear-gradient(135deg, #1A1208, #2D1F04)", gradB: "linear-gradient(180deg, #2D1F04, #1A0E00)", }, { num: "02", cat: "حضور", title: "النافذة", desc: "أن تُفتح نافذة بينك وبينك… ليس بالضغط، بل بالحضور الكامل.", gradA: "linear-gradient(135deg, #120C1A, #2A1040)", gradB: "linear-gradient(180deg, #200D2E, #0D0A0E)", }, { num: "03", cat: "عودة", title: "الصمت", desc: "أن تعود بصمت إلى مكانك الصحيح… داخلك. لا بالضغط، بل بالمعرفة.", gradA: "linear-gradient(135deg, #0A1A10, #0D2A18)", gradB: "linear-gradient(180deg, #0D2218, #0D0A0E)", }, ]; const IntentionCard = ({ item, index, progress }) => { const targetScale = 1 - (intentions.length - 1 - index) * 0.035; const scale = useTransform(progress, [index / intentions.length, 1], [1, targetScale]); return (
{/* Top row */}
{item.num}

{item.cat}

{item.title}

{/* Image grid */}
{/* Right col — 40% */}

{item.desc.split(".")[0]}.

{/* Left col — 60% */}

{item.desc}

); }; const IntentionSection = () => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] }); return (

ما النية؟

{intentions.map((item, i) => ( ))}
); }; /* ───────────────────────────────────────────── SECTION 6 — CTA + FOOTER ───────────────────────────────────────────── */ const CTASection = () => (
{/* Large glow */} {/* Exclusive badge */}
عدد محدود جدًا

هذه المساحة لا تُكرر. ولا تُفتح لأي أحد.

بل تُستشعر وتُمنح. بهدوء… وصدق… وشفافية كاملة.

{/* Divider */}
{/* Footer */}
أكاديمية النسبة الذهبية {/* Social icons using text */}
{[ { label: "Facebook", href: "https://www.facebook.com/oulmi.anfal/" }, { label: "Instagram", href: "https://instagram.com/anfaloulmi" }, { label: "Telegram", href: "https://t.me/anfaloulmi" }, { label: "YouTube", href: "https://www.youtube.com/@anfaloulmi7345" }, ].map((s) => ( e.target.style.opacity = "1"} onMouseLeave={e => e.target.style.opacity = "0.8"} > {s.label} ))}

© 2026 أكاديمية النسبة الذهبية. جميع الحقوق محفوظة.

); /* ───────────────────────────────────────────── ROOT APP ───────────────────────────────────────────── */ export default function App() { return ( <>
); }