Merge version_15_1783200690750 into main

Merge version_15_1783200690750 into main

src/App.tsx

@@ -143,10 +143,10 @@ function useRenderProbe() {
 }
 
 // Selection bridge: Alt+click on a `[data-webild-section]` block posts the
-// section name to the parent (Webild editor) so the next /edit request can
+// section name to the parent (VisionWeb editor) so the next /edit request can
-// be scoped surgically. Sandbox-only — the Webild editor is the parent;
+// be scoped surgically. Sandbox-only — the VisionWeb editor is the parent;
 // public visitors hitting the deployed site never trigger this.
-function useWebildSelectionBridge() {
+function useVisionWebSelectionBridge() {
   useEffect(() => {
     if (typeof window === 'undefined') return
     if (window.parent === window) return
@@ -203,7 +203,7 @@ function useExternalLinksNewTab() {
 }
 
 function App() {
-  useWebildSelectionBridge()
+  useVisionWebSelectionBridge()
   useExternalLinksNewTab()
   useRenderProbe()
   return (

src/components/Layout.tsx

@@ -53,7 +53,7 @@ export default function Layout() {
                     ],
                   },
                 ]}
-                copyright="© 2026 Webild. All rights reserved."
+                copyright="© 2026 VisionWeb. All rights reserved."
                 links={[
                   { label: "Privacy Policy", href: "#" },
                   { label: "Terms of Service", href: "#" },

src/index.css

@@ -1,4 +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');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
 /* Web Agency - Dark Monochrome */
 @import "tailwindcss";
 @import "./styles/masks.css";
@@ -96,7 +96,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Open Sans', sans-serif;
+  --font-sans: 'Inter', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -145,7 +145,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Inter', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -158,7 +158,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter', sans-serif;
+  font-family: 'DM Sans', sans-serif;
 }
 
 .card {

src/pages/HomePage.tsx

@@ -27,16 +27,16 @@ export default function HomePage() {
             primaryButton={{ text: "Start Project", href: "#contact" }}
             secondaryButton={{ text: "View Work", href: "#work" }}
             leftItems={[
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=1" },
             ]}
             rightItems={[
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=1" },
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=1" },
             ]}
           />
         </div>
@@ -87,21 +87,21 @@ export default function HomePage() {
               {
                 title: "Vitality Wellness",
                 description: "Health & wellbeing platform",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=1",
                 buttonIcon: ArrowUpRight,
                 buttonHref: "#",
               },
               {
                 title: "Mailflow AI",
                 description: "AI-powered email marketing platform",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=1",
                 buttonIcon: ArrowUpRight,
                 buttonHref: "#",
               },
               {
                 title: "Kinetic Studios",
                 description: "Motion graphics & visual effects",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp",
+                imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=1",
                 buttonIcon: ArrowUpRight,
                 buttonHref: "#",
               },
@@ -113,7 +113,7 @@ export default function HomePage() {
           <FeaturesBorderGlow
             textAnimation="fade-blur"
             tag="Our Promise"
-            title="Why Brands Choose Webild"
+            title="Why business owner Choose VisionWeb"
             description="We deliver results that speak for themselves."
             features={[
               {
@@ -138,16 +138,16 @@ export default function HomePage() {
         <div id="testimonials" data-section="testimonials">
           <TestimonialTrustCard
             textAnimation="fade-blur"
-            quote="Webild completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
+            quote="VisionWeb completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
             rating={5}
             author="— Maria Santos, CEO at Luxuria Travel"
             avatars={[
-              { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp" },
+              { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1" },
-              { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
+              { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=1" },
-              { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
+              { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=1" },
-              { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg" },
+              { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=1" },
-              { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg" },
+              { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=1" },
-              { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg" },
+              { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=1" },
             ]}
           />
         </div>
@@ -157,7 +157,7 @@ export default function HomePage() {
             textAnimation="fade-blur"
             tag="Results"
             title="Trusted by Industry Leaders"
-            description="Years of experience building digital products that drive real results."
+            description="Years of experience gorwth businesses."
             metrics={[
               {
                 value: "100+",
@@ -173,14 +173,14 @@ export default function HomePage() {
                 value: "99%",
                 title: "Client Satisfaction",
                 features: [
-                  "On-time delivery",
+                  " delivery in 24h",
                   "Clear communication",
                   "Post-launch support",
                   "Ongoing partnerships",
                 ],
               },
               {
-                value: "8+",
+                value: "5+",
                 title: "Years Experience",
                 features: [
                   "Industry expertise",
@@ -201,19 +201,19 @@ export default function HomePage() {
             description="The creative minds behind your next project."
             members={[
               {
-                name: "Sarah Miller",
+                name: "Nedine Soltani",
                 role: "Lead Developer",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp",
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2",
               },
               {
-                name: "Valentina Reyes",
+                name: "Yahya Sahraoui",
                 role: "Creative Director",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp",
+                imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=1",
               },
               {
-                name: "Carlos Mendoza",
+                name: "Nader amri",
                 role: "UX Designer",
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp",
+                imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=1",
               },
             ]}
           />
@@ -256,6 +256,7 @@ export default function HomePage() {
             tag="Get in Touch"
             title="Ready to Transform Your Digital Presence?"
             description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
+            email="visionweb.tn@gmail.com"
             inputPlaceholder="Enter your email"
             buttonText="Start Your Project"
           />

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactCenter
+                textAnimation="fade-blur"
+                tag="Get in Touch"
+                title="Ready to Transform Your Digital Presence?"
+                description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
+                inputPlaceholder="Enter your email"
+                buttonText="Start Your Project"
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from "@/components/sections/faq/FaqSimple";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+              <FaqSimple
+                textAnimation="fade-blur"
+                tag="FAQ"
+                title="Frequently Asked Questions"
+                description="Everything you need to know about working with us."
+                items={[
+                  {
+                    question: "How long does a typical project take?",
+                    answer: "Most projects are completed within 2-4 weeks depending on scope and complexity. We'll provide a detailed timeline during our initial consultation.",
+                  },
+                  {
+                    question: "What is your pricing structure?",
+                    answer: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support.",
+                  },
+                  {
+                    question: "Do you offer ongoing maintenance?",
+                    answer: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best.",
+                  },
+                  {
+                    question: "Can you redesign my existing website?",
+                    answer: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings.",
+                  },
+                  {
+                    question: "What technologies do you use?",
+                    answer: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites.",
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitVerticalMarqueeTall from "@/components/sections/hero/HeroSplitVerticalMarqueeTall";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+              <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."
+                primaryButton={{ text: "Start Project", href: "#contact" }}
+                secondaryButton={{ text: "View Work", href: "#work" }}
+                leftItems={[
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp?_wi=2" },
+                ]}
+                rightItems={[
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=2" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp?_wi=2" },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,50 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+              <MetricsFeatureCards
+                textAnimation="fade-blur"
+                tag="Results"
+                title="Trusted by Industry Leaders"
+                description="Years of experience gorwth businesses."
+                metrics={[
+                  {
+                    value: "100+",
+                    title: "Projects Delivered",
+                    features: [
+                      "E-commerce platforms",
+                      "Corporate websites",
+                      "SaaS applications",
+                      "Mobile-first designs",
+                    ],
+                  },
+                  {
+                    value: "99%",
+                    title: "Client Satisfaction",
+                    features: [
+                      " delivery in 24h",
+                      "Clear communication",
+                      "Post-launch support",
+                      "Ongoing partnerships",
+                    ],
+                  },
+                  {
+                    value: "5+",
+                    title: "Years Experience",
+                    features: [
+                      "Industry expertise",
+                      "Award-winning work",
+                      "Global clientele",
+                      "Proven methodology",
+                    ],
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Promise.tsx

@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "promise" section.
+
+import React from 'react';
+import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function PromiseSection(): React.JSX.Element {
+  return (
+    <div id="promise" data-section="promise">
+              <FeaturesBorderGlow
+                textAnimation="fade-blur"
+                tag="Our Promise"
+                title="Why business owner Choose VisionWeb"
+                description="We deliver results that speak for themselves."
+                features={[
+                  {
+                    icon: Monitor,
+                    title: "Responsive Design",
+                    description: "Pixel-perfect websites that look stunning on every screen size and device.",
+                  },
+                  {
+                    icon: Zap,
+                    title: "Fast Turnaround",
+                    description: "From concept to launch in record time without sacrificing quality.",
+                  },
+                  {
+                    icon: Shield,
+                    title: "Secure Hosting",
+                    description: "Enterprise-grade security and 99.9% uptime for your website.",
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,46 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+              <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."
+                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",
+                  },
+                  {
+                    title: "SEO Optimization",
+                    description: "We optimize your website to rank higher on search engines and drive organic traffic.",
+                    bentoComponent: "animated-bar-chart",
+                  },
+                  {
+                    title: "Branding",
+                    description: "Build a memorable brand identity that resonates with your audience.",
+                    bentoComponent: "orbiting-icons",
+                    centerIcon: Sparkles,
+                    orbitIcons: [Palette, Layers, PenTool, Code],
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Team.tsx

@@ -0,0 +1,35 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamStackedCards from "@/components/sections/team/TeamStackedCards";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+              <TeamStackedCards
+                textAnimation="fade-blur"
+                tag="Team"
+                title="The Team Behind the Work"
+                description="The creative minds behind your next project."
+                members={[
+                  {
+                    name: "Nedine Soltani",
+                    role: "Lead Developer",
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=1",
+                  },
+                  {
+                    name: "Yahya Sahraoui",
+                    role: "Creative Director",
+                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172732979-6cqr1t3h.png?_wi=2",
+                  },
+                  {
+                    name: "Nader amri",
+                    role: "UX Designer",
+                    imageSrc: "https://storage.googleapis.com/webild/users/user_3G2Ozqag2ovb8not76KWtboL8LU/uploaded-1783172630842-tmba3pi4.png?_wi=2",
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+              <TestimonialTrustCard
+                textAnimation="fade-blur"
+                quote="VisionWeb completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate."
+                rating={5}
+                author="— Maria Santos, CEO at Luxuria Travel"
+                avatars={[
+                  { name: "Maria Santos", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp?_wi=2" },
+                  { name: "James Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp?_wi=2" },
+                  { name: "Sofia Reyes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp?_wi=2" },
+                  { name: "David Kim", imageSrc: "https://randomuser.me/api/portraits/men/32.jpg?_wi=2" },
+                  { name: "Emma Wilson", imageSrc: "https://randomuser.me/api/portraits/women/44.jpg?_wi=2" },
+                  { name: "Alex Thompson", imageSrc: "https://randomuser.me/api/portraits/men/67.jpg?_wi=2" },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Work.tsx

@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "work" section.
+
+import React from 'react';
+import FeaturesMediaCarousel from "@/components/sections/features/FeaturesMediaCarousel";
+import { Monitor, Zap, Shield, ArrowUpRight, Code, Palette, Layers, PenTool, Sparkles } from "lucide-react";
+
+export default function WorkSection(): React.JSX.Element {
+  return (
+    <div id="work" data-section="work">
+              <FeaturesMediaCarousel
+                textAnimation="fade-blur"
+                tag="Our Work"
+                title="Work We're Proud Of"
+                description="A selection of projects we've crafted for clients across industries."
+                items={[
+                  {
+                    title: "Vitality Wellness",
+                    description: "Health & wellbeing platform",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew1.webp?_wi=2",
+                    buttonIcon: ArrowUpRight,
+                    buttonHref: "#",
+                  },
+                  {
+                    title: "Mailflow AI",
+                    description: "AI-powered email marketing platform",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew2.webp?_wi=2",
+                    buttonIcon: ArrowUpRight,
+                    buttonHref: "#",
+                  },
+                  {
+                    title: "Kinetic Studios",
+                    description: "Motion graphics & visual effects",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/web-agency-2/projectnew3.webp?_wi=2",
+                    buttonIcon: ArrowUpRight,
+                    buttonHref: "#",
+                  },
+                ]}
+              />
+            </div>
+  );
+}