Merge version_23_1782904713195 into main

Merge version_23_1782904713195 into main

src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
 /* Web Agency - Dark Monochrome */
 @import "tailwindcss";
 @import "./styles/masks.css";
@@ -5,15 +6,15 @@
 
 :root {
   /* Dark theme with monochrome accents */
-  --background: #0a0a0a;
-  --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
-  --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #434343;
+  --background: #f5faff;
+  --card: #ffffff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001122;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
 
   /* @layout/border-radius/soft */
   --radius: 1.5rem;
@@ -95,7 +96,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: "Inter", sans-serif;
+  --font-sans: 'Open Sans', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -144,7 +145,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: "Inter", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -157,7 +158,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
 }
 
 .card {

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/Hero.tsx

@@ -10,8 +10,8 @@ export default function HeroSection(): React.JSX.Element {
               <HeroSplitVerticalMarqueeTall
                 textAnimation="fade-blur"
                 tag="Award-Winning Agency"
-                title="We Build Digital Experiences"
-                description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
+                title="رَوّق"
+                description="نؤمن أن الراحة ليست رفاهية، بل جزء أساسي من يوم متوازن. لذلك صُمم رَوِّق ليكون رفيقك اليومي في العمل، والدراسة، والتنقل، وأوقات الاسترخاء، بتجربة مريحة تجمع بين البساطة والتقنية الحديثة لتمنحك شعورًا أكبر بالراحة أينما كنت"
                 primaryButton={{ text: "Start Project", href: "#contact" }}
                 secondaryButton={{ text: "View Work", href: "#work" }}
                 leftItems={[

src/pages/HomePage/sections/MediaCarousel.tsx

@@ -8,15 +8,16 @@ export default function MediaCarouselSection() {
   const images = [
     "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092527-2qlsj3la.png",
     "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092529-kmn0xb0w.png",
-    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092530-w252bepw.png"
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782898092530-w252bepw.png",
+    "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782899518735-tk0yrtfa.png"
   ];
 
   return (
     <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",
                   },
                 ]}
               />