Update src/pages/HomePage.tsx

Merge version_18_1782904102945 into main

src/pages/HomePage.tsx

@@ -18,7 +18,8 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
-import MediaCarouselSection from './HomePage/sections/MediaCarousel';export default function HomePage(): React.JSX.Element {
+import MediaCarouselSection from './HomePage/sections/MediaCarousel';
+import BentoFeaturesSection from './HomePage/sections/BentoFeatures';export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="aurora" heroBackground="lightRaysCorner" buttonVariant="stagger">
         <SiteBackgroundSlot />
@@ -27,6 +28,7 @@ import MediaCarouselSection from './HomePage/sections/MediaCarousel';export defa
 
         <HeroSection />
       <MediaCarouselSection />
+      <BentoFeaturesSection />
 
         <ServicesSection />
 

src/pages/HomePage/sections/BentoFeatures.tsx

@@ -0,0 +1,92 @@
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Tag from "@/components/ui/Tag";
+
+export default function BentoFeaturesSection() {
+  return (
+    <section className="relative w-full py-24 bg-background" data-webild-section="bento-features" id="bento-features">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Features" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Advanced Neck Therapy"
+            variant="slide-up"
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-4"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Experience the next level of relaxation with our state-of-the-art neck massager.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <ScrollReveal variant="fade" delay={0.2} className="lg:col-span-2">
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col md:flex-row">
+              <div className="p-8 flex-1 flex flex-col justify-center">
+                <h3 className="text-2xl font-bold text-foreground mb-2">Deep Tissue Relief</h3>
+                <p className="text-accent">Targeted pulse technology reaches deep muscle layers to alleviate tension and promote relaxation.</p>
+              </div>
+              <div className="flex-1 min-h-[300px] relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038231-5ykedq2f.png" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.3}>
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col">
+              <div className="h-48 relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038233-cchs5lwi.png" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+              <div className="p-6 flex-1 flex flex-col justify-center">
+                <h3 className="text-xl font-bold text-foreground mb-2">Ergonomic Design</h3>
+                <p className="text-accent text-sm">Perfectly contours to your neck for maximum comfort during extended use.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.4}>
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col">
+              <div className="h-48 relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038234-evwt682d.png?_wi=1" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+              <div className="p-6 flex-1 flex flex-col justify-center">
+                <h3 className="text-xl font-bold text-foreground mb-2">Sleek Aesthetics</h3>
+                <p className="text-accent text-sm">Modern design that looks as good as it feels, blending seamlessly into your lifestyle.</p>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="fade" delay={0.5} className="lg:col-span-2">
+            <div className="card h-full rounded-lg overflow-hidden flex flex-col md:flex-row-reverse">
+              <div className="p-8 flex-1 flex flex-col justify-center">
+                <h3 className="text-2xl font-bold text-foreground mb-2">Portable Comfort</h3>
+                <p className="text-accent">Take your relaxation anywhere you go with our lightweight and travel-friendly design.</p>
+              </div>
+              <div className="flex-1 min-h-[300px] relative">
+                <ImageOrVideo 
+                  imageSrc="https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782904038234-evwt682d.png?_wi=2" 
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/MediaCarousel.tsx

@@ -16,8 +16,8 @@ export default function MediaCarouselSection() {
     <section id="media-carousel" data-webild-section="media-carousel" className="relative w-full py-24 bg-background">
       <div className="w-content-width mx-auto">
         <div className="mb-12 text-center">
-          <TextAnimation variant="fade-blur" tag="h2" className="text-4xl md:text-5xl font-bold text-foreground mb-4" text="Product Gallery" gradientText={false} />
-          <TextAnimation variant="fade-blur" tag="p" className="text-lg text-accent" text="Take a closer look at our product." gradientText={false} />
+          <TextAnimation variant="fade-blur" tag="h2" className="text-4xl md:text-5xl font-bold text-foreground mb-4" text="مصمم ليكون جزءًا من يومك" gradientText={false} />
+          <TextAnimation variant="fade-blur" tag="p" className="text-lg text-accent" text="سواءًا كنت تلعب او تقرا او تسوق او مسترخي" gradientText={false} />
         </div>
         <ScrollReveal variant="slide-up">
           <Carousel className="w-full">

src/pages/HomePage/sections/Services.tsx

@@ -11,33 +11,23 @@ export default function ServicesSection(): React.JSX.Element {
               <FeaturesBento
                 textAnimation="fade-blur"
                 tag="Services"
-                title="Services That Drive Results"
-                description="We offer a full suite of digital services to help your brand stand out online."
+                title="وش يساعدك فيه رَوّق؟"
+                description="فيه كثير علامات اجهاد و إرهاق الي تعودنا اننا نتجاهلها حتى صارت جزء مننا"
                 features={[
                   {
                     title: "Web Development",
                     description: "Custom-built websites that are fast, responsive, and designed to convert.",
-                    bentoComponent: "checklist-timeline",
-                    heading: "Project Timeline",
-                    subheading: "Week 1-2",
-                    checklistItems: [
-                      { label: "Discovery & Strategy", detail: "Day 1-3" },
-                      { label: "Design & Prototype", detail: "Day 4-7" },
-                      { label: "Development & Launch", detail: "Day 8-14" },
-                    ],
-                    completedLabel: "Live",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703652-iz2msjpg.png",
                   },
                   {
                     title: "SEO Optimization",
                     description: "We optimize your website to rank higher on search engines and drive organic traffic.",
-                    bentoComponent: "animated-bar-chart",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703653-1jqzp5px.png",
                   },
                   {
                     title: "Branding",
                     description: "Build a memorable brand identity that resonates with your audience.",
-                    bentoComponent: "orbiting-icons",
-                    centerIcon: Sparkles,
-                    orbitIcons: [Palette, Layers, PenTool, Code],
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703654-bv6ksmeq.png",
                   },
                 ]}
               />