diff --git a/artifacts/ehsan-poc/src/App.tsx b/artifacts/ehsan-poc/src/App.tsx index be9e3e2..ca028f6 100644 --- a/artifacts/ehsan-poc/src/App.tsx +++ b/artifacts/ehsan-poc/src/App.tsx @@ -10,6 +10,7 @@ import { ComponentType } from "react"; // Page imports import Home from "./pages/home"; +import About from "./pages/about"; import RequestSupport from "./pages/request"; import Opportunities from "./pages/opportunities"; import Donate from "./pages/donate"; @@ -34,6 +35,7 @@ function Router() { + diff --git a/artifacts/ehsan-poc/src/components/layout/Header.tsx b/artifacts/ehsan-poc/src/components/layout/Header.tsx index 0d8f844..1f72deb 100644 --- a/artifacts/ehsan-poc/src/components/layout/Header.tsx +++ b/artifacts/ehsan-poc/src/components/layout/Header.tsx @@ -21,6 +21,8 @@ import { MessageSquare, TrendingUp, HeartHandshake, + Info, + Users, } from "lucide-react"; import ehsanLogo from "../../assets/ehsan-logo.png"; @@ -30,8 +32,11 @@ export function Header() { const [location, setLocation] = useLocation(); const [mobileOpen, setMobileOpen] = useState(false); const [servicesOpen, setServicesOpen] = useState(false); + const [aboutOpen, setAboutOpen] = useState(false); const servicesTriggerRef = useRef(null); const servicesPanelRef = useRef(null); + const aboutTriggerRef = useRef(null); + const aboutPanelRef = useRef(null); const toggleLanguage = () => setLanguage(language === "ar" ? "en" : "ar"); @@ -42,6 +47,11 @@ export function Header() { setLocation(path); }; + const handleAboutClick = (path: string) => { + setAboutOpen(false); + setLocation(path); + }; + useEffect(() => { if (!servicesOpen) return; const onPointerDown = (e: MouseEvent) => { @@ -65,6 +75,29 @@ export function Header() { }; }, [servicesOpen]); + useEffect(() => { + if (!aboutOpen) return; + const onPointerDown = (e: MouseEvent) => { + const target = e.target as Node; + if ( + aboutPanelRef.current?.contains(target) || + aboutTriggerRef.current?.contains(target) + ) { + return; + } + setAboutOpen(false); + }; + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") setAboutOpen(false); + }; + document.addEventListener("mousedown", onPointerDown); + document.addEventListener("keydown", onKeyDown); + return () => { + document.removeEventListener("mousedown", onPointerDown); + document.removeEventListener("keydown", onKeyDown); + }; + }, [aboutOpen]); + const services = [ { key: "ghiras", label: t.serviceItems.ghiras, icon: Sprout }, { key: "zakat", label: t.serviceItems.zakat, icon: HandCoins }, @@ -133,9 +166,25 @@ export function Header() { /> - + {t.nav.baraem} @@ -250,6 +299,41 @@ export function Header() { )} + {/* About dropdown (desktop) */} + {aboutOpen && ( + + )} + {/* Mobile nav panel */} {mobileOpen && (
@@ -299,6 +383,27 @@ export function Header() { > {t.nav.requestSupport} +
+

+ {t.nav.about} +

+ setMobileOpen(false)} + className="flex w-full items-center gap-2 text-start px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted" + > + + {t.about.whoWeAre} + + setMobileOpen(false)} + className="flex w-full items-center gap-2 text-start px-3 py-2 rounded-md text-sm font-medium text-foreground hover:bg-muted" + > + + {t.about.committees} + +
{isAuthenticated ? ( <> diff --git a/artifacts/ehsan-poc/src/lib/i18n/translations.ts b/artifacts/ehsan-poc/src/lib/i18n/translations.ts index 86c3283..cef5f96 100644 --- a/artifacts/ehsan-poc/src/lib/i18n/translations.ts +++ b/artifacts/ehsan-poc/src/lib/i18n/translations.ts @@ -43,6 +43,73 @@ export const en = { whatsappLog: "WhatsApp Log", quickDonate: "Quick Donate", }, + about: { + pageTitle: "About EHSAN", + whoWeAre: "Who We Are", + committees: "Committees", + introTitle: "About EHSAN", + intro: + "EHSAN was established by Royal Order No. (48019) dated 13/08/1441 AH to harness data and artificial intelligence to maximize the impact and sustainability of developmental projects and services, by delivering advanced technical solutions and building an effective ecosystem through partnerships with the governmental, private, and non-profit sectors, with the aim of strengthening the Kingdom of Saudi Arabia's leading role in developmental and charitable work, and raising the contribution of the non-profit sector to the gross domestic product.", + tabVisionMission: "Vision & Mission", + tabGoalsPillars: "Goals & Pillars", + tabAdvantagesDomains: "Advantages & Domains", + visionTitle: "Our Vision", + visionText: + "To be the trusted national platform that empowers charitable and developmental work and enhances its sustainability, contributing to a higher quality of life.", + missionTitle: "Our Mission", + missionText: + "To provide a trusted national platform that facilitates giving and connects donors with those in need transparently and efficiently through advanced technical solutions.", + goalsTitle: "Goals", + goals: [ + "Strengthen trust in charitable work through transparency and governance.", + "Facilitate the efficient delivery of donations to their beneficiaries.", + "Raise the contribution of the non-profit sector to the gross domestic product.", + "Empower charitable entities with advanced technical solutions.", + ], + pillarsTitle: "Pillars", + pillars: [ + "Transparency and reliability.", + "Technical innovation and artificial intelligence.", + "Effective partnerships.", + "Sustainability.", + ], + advantagesTitle: "Advantages", + advantages: [ + "A unified, accredited national donation platform.", + "Safe and trusted donations.", + "A wide variety of giving options.", + "Tracking the impact of your donation.", + ], + domainsTitle: "Domains", + domains: [ + "Humanitarian and social aid.", + "Health.", + "Education.", + "Housing.", + "Endowments.", + ], + committeesTitle: "Committees", + committeesIntro: + "EHSAN's work is overseen by a set of specialized committees that ensure governance, transparency, and Sharia compliance.", + committeeItems: [ + { + name: "Supervisory Committee", + desc: "Oversees the platform's operations and strategic direction.", + }, + { + name: "Executive Committee", + desc: "Follows up on the execution of operational plans and initiatives.", + }, + { + name: "Audit & Governance Committee", + desc: "Ensures commitment to governance and transparency.", + }, + { + name: "Sharia Committee", + desc: "Verifies that operations comply with Islamic rulings.", + }, + ], + }, serviceItems: { ghiras: "Ghiras", zakat: "Zakat", @@ -265,6 +332,73 @@ export const ar = { whatsappLog: "سجل واتساب", quickDonate: "تبرع سريع", }, + about: { + pageTitle: "عن إحسان", + whoWeAre: "من نحن", + committees: "اللجان", + introTitle: "نبذة عن إحسان", + intro: + "جاءت منصة إحسان الصادرة بالأمر السامي رقم (48019) وتاريخه (1441/08/13هـ) لتعمل على استثمار البيانات والذكاء الاصطناعي لتعظيم أثر المشاريع والخدمات التنموية واستدامتها، من خلال تقديم الحلول التقنية المتقدمة وبناء منظومة فاعلة عبر الشراكات مع القطاعات الحكومية والخاصة وغير الربحية، بهدف تعزيز دور المملكة العربية السعودية الريادي في الأعمال التنموية والخيرية، ورفع مساهمة القطاع غير الربحي في إجمالي الناتج المحلي.", + tabVisionMission: "الرؤية والرسالة", + tabGoalsPillars: "الأهداف والركائز", + tabAdvantagesDomains: "المزايا والمجالات", + visionTitle: "رؤيتنا", + visionText: + "أن تكون إحسان المنصة الوطنية الموثوقة التي تمكّن العمل الخيري والتنموي وتعزز استدامته بما يسهم في رفع جودة الحياة.", + missionTitle: "رسالتنا", + missionText: + "توفير منصة وطنية موثوقة تسهّل التبرع وتربط المتبرعين بالمحتاجين بشفافية وكفاءة عبر حلول تقنية متقدمة.", + goalsTitle: "الأهداف", + goals: [ + "تعزيز الثقة في العمل الخيري عبر الشفافية والحوكمة.", + "تسهيل وصول التبرعات إلى مستحقيها بكفاءة.", + "رفع مساهمة القطاع غير الربحي في إجمالي الناتج المحلي.", + "تمكين الجهات الخيرية بالحلول التقنية المتقدمة.", + ], + pillarsTitle: "الركائز", + pillars: [ + "الشفافية والموثوقية.", + "الابتكار التقني والذكاء الاصطناعي.", + "الشراكات الفاعلة.", + "الاستدامة.", + ], + advantagesTitle: "المزايا", + advantages: [ + "منصة وطنية موحدة ومعتمدة للتبرع.", + "تبرع آمن وموثوق.", + "تنوع في أوجه التبرع.", + "متابعة أثر التبرع.", + ], + domainsTitle: "المجالات", + domains: [ + "المساعدات الإنسانية والاجتماعية.", + "الصحة.", + "التعليم.", + "الإسكان.", + "الأوقاف.", + ], + committeesTitle: "اللجان", + committeesIntro: + "يشرف على أعمال منصة إحسان مجموعة من اللجان المتخصصة التي تضمن الحوكمة والشفافية والتوافق الشرعي.", + committeeItems: [ + { + name: "اللجنة الإشرافية", + desc: "الإشراف على أعمال المنصة وتوجهاتها الاستراتيجية.", + }, + { + name: "اللجنة التنفيذية", + desc: "متابعة تنفيذ الخطط والمبادرات التشغيلية.", + }, + { + name: "لجنة المراجعة والحوكمة", + desc: "ضمان الالتزام بالحوكمة والشفافية.", + }, + { + name: "اللجنة الشرعية", + desc: "التأكد من توافق الأعمال مع الأحكام الشرعية.", + }, + ], + }, serviceItems: { ghiras: "غراس", zakat: "الزكاة", diff --git a/artifacts/ehsan-poc/src/pages/about.tsx b/artifacts/ehsan-poc/src/pages/about.tsx new file mode 100644 index 0000000..576a0a6 --- /dev/null +++ b/artifacts/ehsan-poc/src/pages/about.tsx @@ -0,0 +1,165 @@ +import { useState } from "react"; +import { useParams, Link } from "wouter"; +import { useLanguage } from "../contexts/LanguageContext"; +import { Reveal } from "../components/Reveal"; +import { Card, CardContent } from "@/components/ui/card"; +import { Users, Info, Check, Building2 } from "lucide-react"; + +type TabKey = "visionMission" | "goalsPillars" | "advantagesDomains"; + +function ListBlock({ title, items }: { title: string; items: string[] }) { + return ( +
+

{title}

+
    + {items.map((item, i) => ( +
  • + + {item} +
    • + ))} +
+
+ ); +} + +function StatementBlock({ title, text }: { title: string; text: string }) { + return ( +
+

{title}

+

{text}

+
+ ); +} + +export default function About() { + const { t } = useLanguage(); + const params = useParams<{ section?: string }>(); + const isCommittees = params.section === "committees"; + const [tab, setTab] = useState("visionMission"); + + const tabs: { key: TabKey; label: string }[] = [ + { key: "visionMission", label: t.about.tabVisionMission }, + { key: "goalsPillars", label: t.about.tabGoalsPillars }, + { key: "advantagesDomains", label: t.about.tabAdvantagesDomains }, + ]; + + return ( +
+ {/* Section toggle: Who we are / Committees */} +
+
+ + + {t.about.whoWeAre} + + + + {t.about.committees} + +
+
+ + {isCommittees ? ( + +

{t.about.committeesTitle}

+

+ {t.about.committeesIntro} +

+
+ {t.about.committeeItems.map((c, i) => ( + + + +
+ +
+
+

{c.name}

+

{c.desc}

+
+ + + + ))} +
+ + ) : ( + <> + {/* Intro green panel */} + +
+

{t.about.introTitle}

+

+ {t.about.intro} +

+
+ + + {/* Tabs */} + +
+
+ {tabs.map((tb) => ( + + ))} +
+
+ + + {/* Tab content */} + +
+ {tab === "visionMission" && ( + <> + + + + )} + {tab === "goalsPillars" && ( + <> + + + + )} + {tab === "advantagesDomains" && ( + <> + + + + )} +
+ + + )} +
+ ); +}