Merge version_2_1782035333806 into main #3

Merged
bender merged 1 commits from version_2_1782035333806 into main 2026-06-21 09:52:21 +00:00
9 changed files with 356 additions and 294 deletions

View File

@@ -4,74 +4,71 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import { Outlet } from 'react-router-dom';
import { StyleProvider } from "@/components/ui/StyleProvider";
import { useEffect, useState } from 'react';
export default function Layout() {
const navItems = [
{
"name": "الرئيسية", "href": "/"
},
{
"name": "خدماتنا", "href": "#services"
},
{
"name": "فريقنا", "href": "#team"
},
{
"name": "تواصل معنا", "href": "#contact"
},
{
"name": "Hero", "href": "#hero"
},
{
"name": "Features", "href": "#features"
},
{
"name": "Metrics", "href": "#metrics"
}
];
const [locale, setLocale] = useState('en');
useEffect(() => {
const savedLocale = localStorage.getItem('locale') || 'en';
setLocale(savedLocale);
document.documentElement.dir = savedLocale === 'ar' ? 'rtl' : 'ltr';
document.documentElement.lang = savedLocale;
}, []);
useEffect(() => {
const handleLangToggle = (e: MouseEvent) => {
const target = e.target as HTMLElement;
const link = target.closest('a');
if (link && link.getAttribute('href') === '#toggle-lang') {
e.preventDefault();
const newLocale = locale === 'en' ? 'ar' : 'en';
localStorage.setItem('locale', newLocale);
setLocale(newLocale);
document.documentElement.dir = newLocale === 'ar' ? 'rtl' : 'ltr';
document.documentElement.lang = newLocale;
window.dispatchEvent(new Event('storage'));
}
};
document.addEventListener('click', handleLangToggle);
return () => document.removeEventListener('click', handleLangToggle);
}, [locale]);
const navItems = locale === 'en' ? [
{ "name": "Home", "href": "/" },
{ "name": "Services", "href": "#services" },
{ "name": "Team", "href": "#team" },
{ "name": "Contact", "href": "#contact" }
] : [
{ "name": "الرئيسية", "href": "/" },
{ "name": "خدماتنا", "href": "#services" },
{ "name": "فريقنا", "href": "#team" },
{ "name": "تواصل معنا", "href": "#contact" }
];
return (
<StyleProvider buttonVariant="expand" siteBackground="noiseGradient" heroBackground="horizonGlow">
<SiteBackgroundSlot />
<SectionErrorBoundary name="navbar">
<NavbarCentered
logo="Innovation Makers"
ctaButton={{
text: "English", href: "/en"}}
navItems={navItems} />
logo={locale === 'en' ? "Innovation Makers" : "صُنّاع الابتكار"}
ctaButton={{
text: locale === 'en' ? "ع" : "EN",
href: "#toggle-lang"
}}
navItems={navItems}
/>
</SectionErrorBoundary>
<main className="flex-grow">
<Outlet />
</main>
<SectionErrorBoundary name="footer">
<FooterSimple
brand="Brand"
copyright="© 2026 Brand. All rights reserved."
columns={[
{
title: "Product", items: [
{
label: "Features", href: "#features"},
{
label: "Pricing", href: "#pricing"},
],
},
{
title: "Company", items: [
{
label: "About", href: "#about"},
{
label: "Contact", href: "#contact"},
],
},
]}
links={[
{
label: "Privacy", href: "#"},
{
label: "Terms", href: "#"},
]}
/>
brand={locale === 'en' ? "Innovation Makers" : "صُنّاع الابتكار"}
copyright={locale === 'en' ? "© 2026 Innovation Makers. All rights reserved." : "© 2026 صُنّاع الابتكار. جميع الحقوق محفوظة."}
columns={[]}
links={[]}
/>
</SectionErrorBoundary>
</StyleProvider>
);

View File

@@ -7,7 +7,7 @@ import Button from "@/components/ui/Button";
interface NavbarCenteredProps {
logo: string;
navItems: { name: string; href: string }[];
ctaButton: { text: string; href: string };
ctaButton: { text: string; href: string; onClick?: (e: any) => void };
}
const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {

View File

@@ -5,15 +5,15 @@
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f8f5ffe6;
--primary-cta: #c89bff;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #f8f5ffe6;
--accent: #737373;
--background-accent: #737373;
--background: #ffffff;
--card: #f5f5f5;
--foreground: #0a0a0a;
--primary-cta: #F7BA33;
--primary-cta-text: #ffffff;
--secondary-cta: #CD1C58;
--secondary-cta-text: #ffffff;
--accent: #7A3C94;
--background-accent: #7A3C94;
/* @layout/border-radius/rounded */
--radius: 0.5rem;

View File

@@ -1,239 +1,27 @@
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import FeaturesSection from './HomePage/sections/Features';
import TeamSection from './HomePage/sections/Team';
import MetricsSection from './HomePage/sections/Metrics';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplitVerticalMarquee
tag="صُنّاع الابتكار"
title="الابتكار صناعةٌ... ونحن صُنّاعها"
description="نحن نساعد المنظمات في المملكة على تحويل الابتكار من شعارٍ عابر إلى ممارسةٍ يوميةٍ مُستدامة."
primaryButton={{
text: "اكتشف منهجيتنا",
href: "#methodology",
}}
secondaryButton={{
text: "تواصل معنا",
href: "#contact",
}}
leftItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/clockwork-victorian-clock-time-rustic_1112-989.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100251.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/business-elements-symbols-metaphors-25-flat-color-icon-pack-including-conversation-popup-chess-message-poker_1142-24867.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cellphone-editorial-data-digital-modern-green_1421-358.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917886.jpg",
},
]}
rightItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037176.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/rough-metallic-surface-texture_23-2148953963.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/defocused-metallic-strings-patterned-background_53876-139797.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/business-idea-concept-with-wooden-blocks-with-icon-message-bubble-wooden-human-figure-top-view_176474-10385.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-big-blue-metal-bridge-sunny-day_181624-2755.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/halves-rings-geometric-shapes-background_23-2148772513.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesArrowCards
tag="خدماتنا"
title="مجالات خبرتنا في الابتكار"
description="نقدم حلولاً متكاملة لدعم رحلة التحول الابتكاري في مؤسستك."
items={[
{
title: "استراتيجيات الابتكار",
tags: [
"استراتيجية",
"تخطيط",
],
imageSrc: "http://img.b2bpic.net/free-photo/rocket-launch-spaceship-icon-innovation_53876-123956.jpg",
},
{
title: "تصميم تجربة العميل",
tags: [
"تجربة",
"تصميم",
],
imageSrc: "http://img.b2bpic.net/free-photo/creative-light-bulb-icon-isolated_53876-15094.jpg",
},
{
title: "تحليل البيانات الضخمة",
tags: [
"بيانات",
"ذكاء",
],
imageSrc: "http://img.b2bpic.net/free-photo/pie-chart-with-green-arrow-icon_23-2152012415.jpg",
},
{
title: "إدارة التغيير المؤسسي",
tags: [
"تغيير",
"ثقافة",
],
imageSrc: "http://img.b2bpic.net/free-photo/pink-brain-creative-ideas-icon_53876-71318.jpg",
},
{
title: "تطوير المنتجات الرقمية",
tags: [
"رقمي",
"تقنية",
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212564.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamStackedCards
tag="فريقنا"
title="العقول خلف الابتكار"
description="نخبة من الخبراء والاستشاريين يعملون بشغف لتحقيق رؤيتكم."
members={[
{
name: "أحمد السعد",
role: "الرئيس التنفيذي",
imageSrc: "http://img.b2bpic.net/free-vector/business-designs-collection_1209-114.jpg",
},
{
name: "سارة العتيبي",
role: "مديرة الابتكار",
imageSrc: "http://img.b2bpic.net/free-photo/content-service-internet-online-editorial-connection_1421-361.jpg",
},
{
name: "خالد المنصور",
role: "خبير التحول الرقمي",
imageSrc: "http://img.b2bpic.net/free-photo/friends-holding-up-thought-bubbles-with-social-media-concept-icons_53876-24718.jpg",
},
{
name: "نورة خالد",
role: "مصممة تجربة المستخدم",
imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-with-creative-inspiration-speech-bubbles_53876-65655.jpg",
},
{
name: "عمر عبدالله",
role: "مستشار استراتيجي",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745044.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TeamSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="الأرقام"
title="أثرنا في الميدان"
description="نحن نقيس نجاحنا بنجاح شركائنا في المملكة."
metrics={[
{
value: "150+",
title: "مشروع ابتكاري",
description: "تم تنفيذه بنجاح عبر القطاعات",
imageSrc: "http://img.b2bpic.net/free-photo/lot-hexagons_1048-2461.jpg",
},
{
value: "45",
title: "منظمة شريكة",
description: "ثقتكم هي وقودنا للاستمرار",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-metal-grille-background_1048-14124.jpg",
},
{
value: "12",
title: "عاماً من الخبرة",
description: "تراكم معرفي متخصص",
imageSrc: "http://img.b2bpic.net/free-photo/gears-cogwheels_1112-923.jpg",
},
{
value: "98%",
title: "معدل الرضا",
description: "نتائج ملموسة لشركائنا",
imageSrc: "http://img.b2bpic.net/free-photo/texture-time-steam-mechanical-background_1112-990.jpg",
},
{
value: "300+",
title: "خبير مُدرب",
description: "رفع كفاءة الكوادر الوطنية",
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301593.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactSplitForm
tag="تواصل معنا"
title="ابدأ رحلة الابتكار اليوم"
description="فريقنا جاهز لمناقشة تحدياتكم وتصميم الحلول المناسبة."
inputs={[
{
name: "name",
type: "text",
placeholder: "الاسم الكامل",
required: true,
},
{
name: "email",
type: "email",
placeholder: "البريد الإلكتروني",
required: true,
},
{
name: "company",
type: "text",
placeholder: "اسم المنظمة",
required: false,
},
]}
textarea={{
name: "message",
placeholder: "كيف يمكننا مساعدتكم؟",
rows: 4,
required: true,
}}
buttonText="إرسال الطلب"
imageSrc="http://img.b2bpic.net/free-photo/blue-light-lines-dots-from-fiber-optic-wires-dark-background-computer-communications-idea-selective-focus-blur-dark-background_166373-1651.jpg"
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,48 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactSplitForm
tag="تواصل معنا"
title="ابدأ رحلة الابتكار اليوم"
description="فريقنا جاهز لمناقشة تحدياتكم وتصميم الحلول المناسبة."
inputs={[
{
name: "name",
type: "text",
placeholder: "الاسم الكامل",
required: true,
},
{
name: "email",
type: "email",
placeholder: "البريد الإلكتروني",
required: true,
},
{
name: "company",
type: "text",
placeholder: "اسم المنظمة",
required: false,
},
]}
textarea={{
name: "message",
placeholder: "كيف يمكننا مساعدتكم؟",
rows: 4,
required: true,
}}
buttonText="إرسال الطلب"
imageSrc="http://img.b2bpic.net/free-photo/blue-light-lines-dots-from-fiber-optic-wires-dark-background-computer-communications-idea-selective-focus-blur-dark-background_166373-1651.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,62 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesArrowCards from '@/components/sections/features/FeaturesArrowCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesArrowCards
tag="خدماتنا"
title="مجالات خبرتنا في الابتكار"
description="نقدم حلولاً متكاملة لدعم رحلة التحول الابتكاري في مؤسستك."
items={[
{
title: "استراتيجيات الابتكار",
tags: [
"استراتيجية",
"تخطيط",
],
imageSrc: "http://img.b2bpic.net/free-photo/rocket-launch-spaceship-icon-innovation_53876-123956.jpg",
},
{
title: "تصميم تجربة العميل",
tags: [
"تجربة",
"تصميم",
],
imageSrc: "http://img.b2bpic.net/free-photo/creative-light-bulb-icon-isolated_53876-15094.jpg",
},
{
title: "تحليل البيانات الضخمة",
tags: [
"بيانات",
"ذكاء",
],
imageSrc: "http://img.b2bpic.net/free-photo/pie-chart-with-green-arrow-icon_23-2152012415.jpg",
},
{
title: "إدارة التغيير المؤسسي",
tags: [
"تغيير",
"ثقافة",
],
imageSrc: "http://img.b2bpic.net/free-photo/pink-brain-creative-ideas-icon_53876-71318.jpg",
},
{
title: "تطوير المنتجات الرقمية",
tags: [
"رقمي",
"تقنية",
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212564.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,68 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplitVerticalMarquee
tag="صُنّاع الابتكار"
title="الابتكار صناعةٌ... ونحن صُنّاعها"
description="نحن نساعد المنظمات في المملكة على تحويل الابتكار من شعارٍ عابر إلى ممارسةٍ يوميةٍ مُستدامة."
primaryButton={{
text: "اكتشف منهجيتنا",
href: "#methodology",
}}
secondaryButton={{
text: "تواصل معنا",
href: "#contact",
}}
leftItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/clockwork-victorian-clock-time-rustic_1112-989.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-100251.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/business-elements-symbols-metaphors-25-flat-color-icon-pack-including-conversation-popup-chess-message-poker_1142-24867.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/cellphone-editorial-data-digital-modern-green_1421-358.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917886.jpg",
},
]}
rightItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037176.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/rough-metallic-surface-texture_23-2148953963.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/defocused-metallic-strings-patterned-background_53876-139797.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/business-idea-concept-with-wooden-blocks-with-icon-message-bubble-wooden-human-figure-top-view_176474-10385.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-big-blue-metal-bridge-sunny-day_181624-2755.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/halves-rings-geometric-shapes-background_23-2148772513.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,52 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="الأرقام"
title="أثرنا في الميدان"
description="نحن نقيس نجاحنا بنجاح شركائنا في المملكة."
metrics={[
{
value: "150+",
title: "مشروع ابتكاري",
description: "تم تنفيذه بنجاح عبر القطاعات",
imageSrc: "http://img.b2bpic.net/free-photo/lot-hexagons_1048-2461.jpg",
},
{
value: "45",
title: "منظمة شريكة",
description: "ثقتكم هي وقودنا للاستمرار",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-metal-grille-background_1048-14124.jpg",
},
{
value: "12",
title: "عاماً من الخبرة",
description: "تراكم معرفي متخصص",
imageSrc: "http://img.b2bpic.net/free-photo/gears-cogwheels_1112-923.jpg",
},
{
value: "98%",
title: "معدل الرضا",
description: "نتائج ملموسة لشركائنا",
imageSrc: "http://img.b2bpic.net/free-photo/texture-time-steam-mechanical-background_1112-990.jpg",
},
{
value: "300+",
title: "خبير مُدرب",
description: "رفع كفاءة الكوادر الوطنية",
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301593.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,47 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "team" section.
import React from 'react';
import TeamStackedCards from '@/components/sections/team/TeamStackedCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TeamSection(): React.JSX.Element {
return (
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamStackedCards
tag="فريقنا"
title="العقول خلف الابتكار"
description="نخبة من الخبراء والاستشاريين يعملون بشغف لتحقيق رؤيتكم."
members={[
{
name: "أحمد السعد",
role: "الرئيس التنفيذي",
imageSrc: "http://img.b2bpic.net/free-vector/business-designs-collection_1209-114.jpg",
},
{
name: "سارة العتيبي",
role: "مديرة الابتكار",
imageSrc: "http://img.b2bpic.net/free-photo/content-service-internet-online-editorial-connection_1421-361.jpg",
},
{
name: "خالد المنصور",
role: "خبير التحول الرقمي",
imageSrc: "http://img.b2bpic.net/free-photo/friends-holding-up-thought-bubbles-with-social-media-concept-icons_53876-24718.jpg",
},
{
name: "نورة خالد",
role: "مصممة تجربة المستخدم",
imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-with-creative-inspiration-speech-bubbles_53876-65655.jpg",
},
{
name: "عمر عبدالله",
role: "مستشار استراتيجي",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745044.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}