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

@@ -17,17 +17,17 @@ export default function ServicesSection(): React.JSX.Element {
                   {
                     title: "Web Development",
                     description: "Custom-built websites that are fast, responsive, and designed to convert.",
-                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782901900913-q8rxwg0e.png",
+                    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.",
-                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782901900915-br5zx734.png",
+                    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.",
-                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782901900916-cu84sd9r.png",
+                    image: "https://storage.googleapis.com/webild/users/user_3FtXGZmo2q34ph3RhCNPCt0XPUG/uploaded-1782903703654-bv6ksmeq.png",
                   },
                 ]}
               />