Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -5,12 +5,13 @@ import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Award, Clock, Headphones, ShieldCheck, Zap } from "lucide-react";
+import { Award, Clock, Headphones, ShieldCheck, Zap, Briefcase, BarChart3, Target } from "lucide-react";
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 
 export default function LandingPage() {
   return (
@@ -40,19 +41,16 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+      <HeroBillboard
       background={{ variant: "gradient-bars" }}
       title="الوسيط رقم 1 في الشرق الأوسط"
       description="وسطاء العراب: الأمان، الثقة، والسرعة في إتمام صفقاتك بكل احترافية."
       tag="خدمة وساطة موثوقة"
-      mediaItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/stock-data-office-computer-screen_482257-119275.jpg?_wi=1", imageAlt: "financial dashboard dark mode" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/suit-tie-formalwear-tailormade-business_53876-13785.jpg?_wi=1", imageAlt: "financial dashboard dark mode" }
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="أكثر من 90 ألف عملية ناجحة"
       tagIcon={ShieldCheck}
+      buttons={[{ text: "ابدأ الآن", href: "#contact" }]}
+      imageSrc="http://img.b2bpic.net/free-photo/stock-data-office-computer-screen_482257-119275.jpg?_wi=1"
+      imageAlt="financial dashboard dark mode"
+      mediaAnimation="slide-up"
     />
   </div>
 
@@ -73,6 +71,23 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="features-bento" data-section="features-bento">
+      <FeatureBento
+        title="مزايا متكاملة"
+        description="نظام وساطة عصري يجمع بين الكفاءة والأمان التقني."
+        features={[
+            { title: "أمان رقمي", description: "تشفير عالي المستوى لكافة العمليات.", bentoComponent: 'reveal-icon', icon: ShieldCheck },
+            { title: "تقارير لحظية", description: "متابعة مباشرة لحالة المعاملة.", bentoComponent: 'reveal-icon', icon: BarChart3 },
+            { title: "دعم سريع", description: "استجابة فورية عبر فريقنا المتخصص.", bentoComponent: 'reveal-icon', icon: Headphones },
+            { title: "خبرة واسعة", description: "سنوات من العمل في مجال الوساطة.", bentoComponent: 'reveal-icon', icon: Briefcase },
+            { title: "إنجاز فوري", description: "تقنيات تسرع عملية إتمام صفقاتك.", bentoComponent: 'reveal-icon', icon: Target }
+        ]}
+        animationType="blur-reveal"
+        textboxLayout="default"
+        useInvertedBackground={false}
+      />
+  </div>
+
   <div id="steps" data-section="steps">
       <MetricCardFourteen
       useInvertedBackground={false}