From dd85495c7b636b0685295faad3897dbc4f8267c4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Mar 2026 03:19:07 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 337 ++++++++++++++++++-----------------------------
 1 file changed, 130 insertions(+), 207 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d6e60a..5762a84 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -27,220 +27,143 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "الرئيسية",
-          id: "home",
-        },
-        {
-          name: "من نحن",
-          id: "about",
-        },
-        {
-          name: "خدماتنا",
-          id: "services",
-        },
-        {
-          name: "مشاريعنا",
-          id: "projects",
-        },
-        {
-          name: "اتصل بنا",
-          id: "contact",
-        },
-      ]}
-      brandName="شركة الأساس العريض للمقاولات"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "الرئيسية", id: "home" },
+              { name: "من نحن", id: "about" },
+              { name: "خدماتنا", id: "services" },
+              { name: "مشاريعنا", id: "projects" },
+              { name: "اتصل بنا", id: "contact" },
+            ]}
+            brandName="شركة الأساس العريض للمقاولات"
+          />
+        </div>
 
-  <div id="home" data-section="home">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="نبني المستقبل.. لأساسٍ عريض"
-      description="شريكك الرائد في المقاولات والبنية التحتية في المملكة، نصنع التميز منذ 2004 بدقة متناهية وطموح يعانق الرؤية 2030."
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png",
-          alt: "construction",
-        },
-      ]}
-      buttons={[
-        {
-          text: "استعرض مشاريعنا",
-          href: "#projects",
-        },
-      ]}
-    />
-  </div>
+        <div id="home" data-section="home">
+            <HeroCentered
+            background={{
+              variant: "gradient-bars"}}
+            title="نبني المستقبل.. لأساسٍ عريض"
+            description="شريكك الرائد في المقاولات والبنية التحتية في المملكة، نصنع التميز منذ 2004 بدقة متناهية وطموح يعانق الرؤية 2030."
+            avatars={[
+              {
+                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png",                alt: "construction"},
+            ]}
+            buttons={[
+              {
+                text: "استعرض مشاريعنا",                href: "#projects"},
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={true}
-      title="منذ 2004.. نصنع التغيير"
-      description={[
-        "تأسست شركة الأساس العريض لتكون علامة فارقة في قطاع المقاولات السعودي.",
-        "أكثر من 2200 مشروع حكومي ناجح بامتياز.",
-        "فخورون بحصولنا على جائزة الشريك الأول من الشركة السعودية للكهرباء.",
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+            <TextSplitAbout
+            useInvertedBackground={true}
+            title="منذ 2004.. نصنع التغيير"
+            description={[
+              "تأسست شركة الأساس العريض لتكون علامة فارقة في قطاع المقاولات السعودي.",              "أكثر من 2200 مشروع حكومي ناجح بامتياز.",              "فخورون بحصولنا على جائزة الشريك الأول من الشركة السعودية للكهرباء."]}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "إنشاءات عامة",
-          description: "تنفيذ المشاريع الإنشائية بكفاءة هندسية عالية.",
-          bentoComponent: "reveal-icon",
-          icon: Building,
-        },
-        {
-          title: "البنية التحتية",
-          description: "تطوير الشبكات والأنظمة التحتية الأساسية.",
-          bentoComponent: "reveal-icon",
-          icon: Zap,
-        },
-        {
-          title: "الكهروميكانيكا",
-          description: "حلول كهربائية وميكانيكية متقدمة.",
-          bentoComponent: "reveal-icon",
-          icon: Settings,
-        },
-        {
-          title: "أعمال الطرق",
-          description: "بناء وتعبيد الطرق وفقاً لأعلى المقاييس.",
-          bentoComponent: "reveal-icon",
-          icon: Building2,
-        },
-      ]}
-      title="حلول متكاملة للبنية التحتية"
-      description="نقدم نطاقاً واسعاً من الخدمات التخصصية بأعلى معايير الجودة العالمية."
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureBento
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "إنشاءات عامة",                description: "تنفيذ المشاريع الإنشائية بكفاءة هندسية عالية.",                bentoComponent: "reveal-icon",                icon: Building,
+              },
+              {
+                title: "البنية التحتية",                description: "تطوير الشبكات والأنظمة التحتية الأساسية.",                bentoComponent: "reveal-icon",                icon: Zap,
+              },
+              {
+                title: "الكهروميكانيكا",                description: "حلول كهربائية وميكانيكية متقدمة.",                bentoComponent: "reveal-icon",                icon: Settings,
+              },
+              {
+                title: "أعمال الطرق",                description: "بناء وتعبيد الطرق وفقاً لأعلى المقاييس.",                bentoComponent: "reveal-icon",                icon: Building2,
+              },
+            ]}
+            title="حلول متكاملة للبنية التحتية"
+            description="نقدم نطاقاً واسعاً من الخدمات التخصصية بأعلى معايير الجودة العالمية."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTen
-      animationType="slide-up"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "1",
-          title: "قيمة المشاريع",
-          subtitle: "3.5+ مليار ريال",
-          category: "النمو",
-          value: "3.5B",
-        },
-        {
-          id: "2",
-          title: "المشاريع الحكومية",
-          subtitle: "2,200+ مشروع",
-          category: "التميز",
-          value: "2200",
-        },
-        {
-          id: "3",
-          title: "فريق العمل",
-          subtitle: "1,200+ موظف",
-          category: "الخبرة",
-          value: "1200",
-        },
-      ]}
-      title="أرقام تتحدث عن إنجازاتنا"
-      description="ثقة عملائنا هي الوقود الذي يدفعنا للمزيد من النجاح."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+            <MetricCardTen
+            animationType="slide-up"
+            textboxLayout="centered"
+            useInvertedBackground={true}
+            metrics={[
+              {
+                id: "1",                title: "قيمة المشاريع",                subtitle: "3.5+ مليار ريال",                category: "النمو",                value: "3.5B"},
+              {
+                id: "2",                title: "المشاريع الحكومية",                subtitle: "2,200+ مشروع",                category: "التميز",                value: "2200"},
+              {
+                id: "3",                title: "فريق العمل",                subtitle: "1,200+ موظف",                category: "الخبرة",                value: "1200"},
+            ]}
+            title="أرقام تتحدث عن إنجازاتنا"
+            description="ثقة عملائنا هي الوقود الذي يدفعنا للمزيد من النجاح."
+          />
+        </div>
 
-  <div id="projects" data-section="projects">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "مشروع العقد الموحد",
-          price: "400M SAR",
-          variant: "Riyadh",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "المسار الرياضي",
-          price: "17M SAR",
-          variant: "Riyadh",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png?_wi=2",
-        },
-        {
-          id: "p3",
-          name: "مشروع الجنادرية",
-          price: "12M SAR",
-          variant: "Riyadh",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png?_wi=3",
-        },
-      ]}
-      title="معرض مشاريعنا"
-      description="استكشف قائمة بمشاريعنا الكبرى التي ساهمت في نهضة الوطن."
-    />
-  </div>
+        <div id="projects" data-section="projects">
+            <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "p1",                name: "مشروع العقد الموحد",                price: "400M SAR",                variant: "Riyadh",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"},
+              {
+                id: "p2",                name: "المسار الرياضي",                price: "17M SAR",                variant: "Riyadh",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"},
+              {
+                id: "p3",                name: "مشروع الجنادرية",                price: "12M SAR",                variant: "Riyadh",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B8QPuiHapMltQpEaCiadHhovcl/aerial-view-of-modern-saudi-infrastructu-1774581512617-772fa861.png"},
+            ]}
+            title="معرض مشاريعنا"
+            description="استكشف قائمة بمشاريعنا الكبرى التي ساهمت في نهضة الوطن."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "radial-gradient",
-      }}
-      text="هل لديك مشروع طموح؟ نحن هنا لنجعل المستحيل واقعاً."
-      buttons={[
-        {
-          text: "تواصل معنا الآن",
-          href: "mailto:info@asas.sa",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactText
+            useInvertedBackground={true}
+            background={{
+              variant: "radial-gradient"}}
+            text="هل لديك مشروع طموح؟ نحن هنا لنجعل المستحيل واقعاً."
+            buttons={[
+              {
+                text: "تواصل معنا الآن",                href: "mailto:info@asas.sa"},
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="الأساس العريض"
-      columns={[
-        {
-          title: "خدماتنا",
-          items: [
-            {
-              label: "البنية التحتية",
-              href: "#services",
-            },
-            {
-              label: "المقاولات",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "عن الشركة",
-          items: [
-            {
-              label: "رؤيتنا",
-              href: "#about",
-            },
-            {
-              label: "الشهادات",
-              href: "#iso",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 جميع الحقوق محفوظة لشركة الأساس العريض للمقاولات"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+            logoText="الأساس العريض"
+            columns={[
+              {
+                title: "خدماتنا",                items: [
+                  {
+                    label: "البنية التحتية",                    href: "#services"},
+                  {
+                    label: "المقاولات",                    href: "#services"},
+                ],
+              },
+              {
+                title: "عن الشركة",                items: [
+                  {
+                    label: "رؤيتنا",                    href: "#about"},
+                  {
+                    label: "الشهادات",                    href: "#iso"},
+                ],
+              },
+            ]}
+            copyrightText="© 2025 جميع الحقوق محفوظة لشركة الأساس العريض للمقاولات"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );