add bg video_

src/app/(main)/page.jsx

@@ -1,3 +1,4 @@
+import { Homepage } from '@/components/Homepage'
 import { Hero } from '@/components/Hero'
 import { Newsletter } from '@/components/Newsletter'
 import { Schedule } from '@/components/Schedule'
@@ -7,6 +8,7 @@ import { Sponsors } from '@/components/Sponsors'
 export default function Home() {
   return (
     <>
+      <Homepage />
       <Hero />
       <Speakers />
       <Schedule />

src/components/BackgroundVideo.jsx

@@ -0,0 +1,20 @@
+'use client'; // Ensure this is a Client Component if using React hooks or state
+
+import React from 'react';
+import clsx from 'clsx'
+
+
+export function BackgroundVideo({ className }) {
+  return (
+    <video
+      autoPlay
+      loop
+      muted
+      playsInline
+      className={`absolute inset-0 w-full h-full object-cover ${className}`}
+    >
+      <source src="/video/ourverse.mp4" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  );
+}

src/components/Gradient.jsx

@@ -0,0 +1,15 @@
+// src/components/Gradient.jsx
+import React from 'react';
+
+export function Gradient({ children, className = '' }) {
+  return (
+    <div
+      className={`relative ${className}`}
+      style={{
+        background: 'linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(253,253,253,0) 100%)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Homepage.jsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/Button';
+import { Container } from '@/components/Container';
+import { Gradient } from '@/components/Gradient';
+
+export function Homepage() {
+  return (
+    <Gradient className="py-36 mb-20">
+      <Container>
+        {/* Background Video */}
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="absolute inset-0 w-full h-full object-cover -z-10"
+        >
+          <source src="/videos/ourverse.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+
+        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
+          <h1 className="font-display text-5xl font-bold tracking-tighter text-blue-600 sm:text-7xl">
+            <span className="sr-only">OurVerse - </span>A design conference for the dark side.
+          </h1>
+          <div className="mt-6 mb-12 space-y-6 font-display text-2xl tracking-tight text-blue-900">
+            <p>ok</p>
+            <p>ok</p>
+          </div>
+          <Button href="#" className="mt-10 w-30">
+            Sign Up
+          </Button>
+        </div>
+      </Container>
+    </Gradient>
+  );
+}