Update src/app/page.tsx

src/app/page.tsx

@@ -11,7 +11,8 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { BookOpen, Globe, Users } from "lucide-react";
+import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
+import { BookOpen, Globe, Users, Target, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,22 +32,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "الرئيسية", id: "hero" },
-          name: "الرئيسية",
+        { name: "الخدمات", id: "features" },
-          id: "hero",
+        { name: "تطور الشخصيات", id: "character-arcs" },
-        },
+        { name: "تطور القصة", id: "story-development" },
-        {
+        { name: "تواصل معنا", id: "contact" },
-          name: "الخدمات",
-          id: "features",
-        },
-        {
-          name: "الأسئلة الشائعة",
-          id: "faq",
-        },
-        {
-          name: "تواصل معنا",
-          id: "contact",
-        },
       ]}
       brandName="مساعدك الإلكتروني"
     />
@@ -54,273 +44,69 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
+      background={{ variant: "rotated-rays-animated-grid" }}
-        variant: "rotated-rays-animated-grid",
-      }}
       title="مساعدك الإلكتروني الذكي"
       description="حلول برمجية ذكية لترجمة وتطوير مهاراتك الدراسية وحل جميع استفساراتك اليومية بسرعة."
-      carouselItems={[
+      carouselItems={Array.from({length: 6}).map((_, i) => ({ id: `${i+1}`, imageSrc: "http://img.b2bpic.net/free-photo/digital-world-map-hologram-blue-background_1379-900.jpg" }))}
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-world-map-hologram-blue-background_1379-900.jpg",
-          imageAlt: "ai assistant tech abstract",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100372.jpg",
-          imageAlt: "ai translation concept",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-portrait-young-girl-with-high-tech_23-2151133554.jpg",
-          imageAlt: "smart education ai interface",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-neon-colors-futuristic-technology_23-2151672037.jpg",
-          imageAlt: "ai brain reasoning tech",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/manager-wakes-up-employee-after-falling-asleep-table-desk_482257-77539.jpg",
-          imageAlt: "tech startup office dark",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-staff-gathers-examines-monthly-revenue-balance_482257-130896.jpg",
-          imageAlt: "analytical data dashboard",
-        },
-      ]}
-      buttons={[
-        {
-          text: "ابدأ الآن",
-          href: "#contact",
-        },
-        {
-          text: "تعرف على المزيد",
-          href: "#about",
-        },
-      ]}
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="character-arcs" data-section="character-arcs">
-      <MediaAbout
+      <FeatureCardTwelve
-      useInvertedBackground={false}
+        animationType="slide-up"
-      title="لماذا مساعدك الإلكتروني؟"
+        title="تطور الشخصيات"
-      description="نقدم تقنيات الذكاء الاصطناعي الأحدث لضمان جودة عالية في التعليم والترجمة وحل المهام اليومية بكفاءة."
+        description="تابع رحلة نمو الشخصيات الرئيسية عبر فصول القصة وتطوراتها النفسية."
-      imageSrc="http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370114.jpg"
+        textboxLayout="split"
-      imageAlt="human ai synergy"
+        features={[
-    />
+            { id: "c1", label: "الشخصية 1", title: "البطل", items: ["البداية في القرية", "مواجهة التحدي", "النضج الكامل"] },
+            { id: "c2", label: "الشخصية 2", title: "المساعد", items: ["دعم البطل", "اكتشاف القدرات", "الاستقلال الذاتي"] }
+        ]}
+      />
+  </div>
+
+  <div id="story-development" data-section="story-development">
+      <TimelineProcessFlow
+        title="مسار تطور القصة"
+        description="أهم المحطات والتحولات في الحبكة الروائية والجانب الفلسفي."
+        textboxLayout="split"
+        animationType="slide-up"
+        items={[
+            { content: "البداية والتمهيد", media: <Target className="w-12 h-12" />, reverse: false },
+            { content: "تصاعد الأحداث", media: <Zap className="w-12 h-12" />, reverse: true },
+            { content: "النهاية والنتائج", media: <Globe className="w-12 h-12" />, reverse: false }
+        ]}
+      />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwelve
       animationType="slide-up"
       textboxLayout="split"
-      useInvertedBackground={false}
       features={[
-        {
+        { id: "f1", label: "الترجمة", title: "ترجمة فورية", items: ["دعم لغات متعددة", "دقة لغوية عالية"] },
-          id: "f1",
+        { id: "f2", label: "التعليم", title: "دعم تعليمي", items: ["شروحات مبسطة", "تلخيص المواد"] },
-          label: "الترجمة",
+        { id: "f3", label: "ذكاء", title: "حلول ذكية", items: ["إجابات دقيقة", "حل المشكلات"] },
-          title: "ترجمة فورية",
-          items: [
-            "دعم لغات متعددة",
-            "دقة لغوية عالية",
-            "ترجمة الجمل المعقدة",
-          ],
-        },
-        {
-          id: "f2",
-          label: "التعليم",
-          title: "دعم تعليمي",
-          items: [
-            "شروحات مبسطة",
-            "تلخيص المواد الدراسية",
-            "دعم حل المسائل",
-          ],
-        },
-        {
-          id: "f3",
-          label: "ذكاء",
-          title: "حلول ذكية",
-          items: [
-            "إجابات دقيقة",
-            "حل المشكلات المعقدة",
-            "دعم فني على مدار الساعة",
-          ],
-        },
       ]}
       title="خدماتنا الذكية"
-      description="نحن هنا لتبسيط حياتك اليومية من خلال حلول تقنية متطورة."
+      description="نحن هنا لتبسيط حياتك اليومية."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          title: "مستخدم نشط",
-          value: "50,000+",
-          icon: Users,
-        },
-        {
-          id: "m2",
-          title: "عملية ترجمة",
-          value: "1M+",
-          icon: Globe,
-        },
-        {
-          id: "m3",
-          title: "استشارة تعليمية",
-          value: "200k+",
-          icon: BookOpen,
-        },
-      ]}
-      title="أرقامنا في سطور"
-      description="نفتخر بما حققناه من إنجازات في خدمة آلاف المستخدمين يومياً."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="لقد غير هذا الموقع أسلوبي الدراسي تماماً! المساعدة التعليمية دقيقة جداً ومفيدة."
-      rating={5}
-      author="سارة محمود"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",
-          alt: "Sarah",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cheerful-businesswoman-with-hands-crossed_1098-20032.jpg",
-          alt: "Ali",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
-          alt: "Omar",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-it-professional-silicon-valley-company-office-developing-software-apps-happy_482257-136225.jpg",
-          alt: "Layla",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-senior-man-using-tablet-with-headphones-dark-background_613910-38.jpg",
-          alt: "Ahmed",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "هل الخدمة مجانية؟",
-          content: "نعم، نقدم باقات مجانية ومدفوعة تناسب الجميع.",
-        },
-        {
-          id: "q2",
-          title: "كيف أبدأ؟",
-          content: "فقط اضغط على زر ابدأ في أي خدمة وسنساعدك فوراً.",
-        },
-        {
-          id: "q3",
-          title: "هل البيانات آمنة؟",
-          content: "نحن نطبق أعلى معايير الأمان لحماية خصوصيتك.",
-        },
-        {
-          id: "q4",
-          title: "ما هي اللغات المدعومة؟",
-          content: "ندعم أكثر من 50 لغة عالمية بدقة عالية.",
-        },
-        {
-          id: "q5",
-          title: "هل هناك تطبيق للهاتف؟",
-          content: "نعم، يمكنك الوصول لمساعدك عبر متصفح هاتفك أو تطبيقنا.",
-        },
-      ]}
-      title="الأسئلة الشائعة"
-      description="كل ما تحتاج لمعرفته عن خدماتنا."
-      faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/ai-cloud-concept-with-lit-brain_23-2149739755.jpg"
-      imageAlt="Ai cloud concept with lit brain"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
       title="تواصل معنا"
-      description="هل لديك استفسار آخر؟ أرسل لنا رسالة وسنرد عليك في أقرب وقت."
+      description="هل لديك استفسار آخر؟ أرسل لنا رسالة."
-      inputs={[
+      inputs={[{ name: "name", type: "text", placeholder: "الاسم الكامل" }, { name: "email", type: "email", placeholder: "البريد الإلكتروني" }]}
-        {
-          name: "name",
-          type: "text",
-          placeholder: "الاسم الكامل",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "البريد الإلكتروني",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "رسالتك...",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/man-having-gaming-session-with-friends-communicating-online_482257-77061.jpg"
-      imageAlt="digital communication office"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
-      columns={[
+      columns={[{ items: [{ label: "الرئيسية", href: "#hero" }, { label: "الخدمات", href: "#features" }] }]}
-        {
-          items: [
-            {
-              label: "الرئيسية",
-              href: "#hero",
-            },
-            {
-              label: "الخدمات",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "الخصوصية",
-              href: "#",
-            },
-            {
-              label: "الشروط",
-              href: "#",
-            },
-          ],
-        },
-      ]}
       logoText="مساعدك الذكي"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}