change background video

src/pages/Home.jsx

@@ -71,25 +71,25 @@ const Home = () => {
     <div className="min-h-screen">
       {/* Hero Section */}
       <HeroSection
-        subtitle="Built for Everyone by Everyone, Everywhere"
+  subtitle="Built for Everyone by Everyone, Everywhere"
-        title={
+  title={
-          <span>
+    <span>
-            <span className="hero-text-gradient">ThreeFold</span>
+      <span className="hero-text-gradient">ThreeFold</span>
-          </span>
+    </span>
-        }
+  }
-        description="ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people."
+  description="ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people."
-        showVideo={true}
+  showVideo={true}
-        videoEmbed={
+  videoEmbed={
-          <iframe
+    <video
-            src="https://player.vimeo.com/video/1106821376?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&background=1&muted=1&loop=1"
+      src="/src/assets/bg_video.mp4"
-            frameBorder="0"
+      autoPlay
-            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
+      muted
-            referrerPolicy="strict-origin-when-cross-origin"
+      loop
-            style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover"}}
+      playsInline
-            title="ThreeFold Grid"
+      className="absolute top-0 left-0 w-full h-full object-cover"
-          />
+    />
-        }
+  }
-      />
+/>
 
       {/* What is ThreeFold Section */}
       <Section background="gradient" padding="xlarge">