add event page

src/app/events/versefest/page.jsx

@@ -1,14 +1,16 @@
-import { Hero } from '@/components/Hero'
+import { Event1 } from '@/components/Event1'
 import { Header } from '@/components/Header'
 import { Newsletter } from '@/components/Newsletter'
 import { Schedule } from '@/components/Schedule'
 import { Speakers } from '@/components/Speakers'
+import { Sponsors } from '@/components/Sponsors'
 
-export default function metafest() {
+export default function versefest() {
   return (
     <>
-        <Header />
-      <Hero />
+      <Header />
+      <Event1 />
+      <Sponsors />
       <Speakers />
       <Schedule />
       <Newsletter />

src/components/Event1.jsx

@@ -0,0 +1,48 @@
+import { BackgroundImage } from '@/components/BackgroundImage'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { RocketLaunchIcon, } from '@heroicons/react/20/solid'
+import { CalendarIcon, MapPinIcon, TicketIcon} from '@heroicons/react/24/outline'
+
+export function Event1() {
+  return (
+    <div className="relative lg:py-12 mt-20 pb-12">
+      <BackgroundImage className="-bottom-14 -top-20" />
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
+          <h1 className="font-display text-3xl font-semibold tracking-tighter text-blue-700 sm:text-7xl">
+            VerseFest 2024
+          </h1>
+          <h2 className="lg:mt-4 mt-2 font-display lg:text-2xl font-normal tracking-tighter text-blue-600 text-xl">
+          <CalendarIcon className="h-8 w-8 mx-0.2 inline-block -mt-0.5" /> OCT 24-26 • 12 PM - 6 PM UTC 
+          </h2>
+          <h2 className="lg:mt-0 mt-0 font-display lg:text-2xl font-normal tracking-tighter text-blue-600 text-xl">
+          <MapPinIcon className="h-8 w-8 mx-0.2 inline-block -mt-0.5" /> OURWORLD METAVERSE
+          </h2>
+          <div className="mt-6 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-blue-900">
+            <p>
+            Get ready to step into the future with <span className='font-semibold text-blue-700'>VerseFest 2024 by OurVerse!</span>  
+            </p>
+            <p>
+            This groundbreaking free virtual event is designed to unite freelancers, 
+            entrepreneurs, startups, investors, gamers, and Web3 enthusiasts from every corner of the globe. <br></br>
+            Over three exciting days, you’ll immerse yourself in an innovative metaverse, discover the latest trends in technology, 
+            and connect with like-minded pioneers.
+            </p>
+            <p>
+            VerseFest isn’t just another online conference—it’s a fully interactive experience that redefines what’s possible in the digital realm. From engaging talks and hands-on demos to networking opportunities in stunning virtual environments, VerseFest 2024 is where the world comes together to explore the next frontier.
+            </p>
+          </div>
+          <div className="mt-10 pb-8 flex items-center gap-x-6">
+            <a
+              href="#"
+              className="rounded-xl bg-blue-700 px-6 py-3.5 lg:max-w-4xl max-w-2xl text-base tracking-tight font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            >
+              Get Your Ticket  <TicketIcon className="h-5 w-5 mx-0.3 inline-block -mt-0.5" />
+            </a>
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}

src/components/Homepage.jsx

@@ -5,7 +5,7 @@ import { ChevronRightIcon } from '@heroicons/react/20/solid'
 
 export function Homepage() {
   return (
-    <Gradient className="pt-24 pb-24">
+    <Gradient className="pt-24 pb-12">
       <Container>
         {/* Background Video */}
         <video
@@ -25,8 +25,8 @@ export function Homepage() {
                     <span className="rounded-full bg-blue-700/10 px-3 py-1 text-sm font-semibold leading-6 text-blue-700 ring-1 ring-inset ring-indigo-600/10">
                       What's new
                     </span>
-                    <a href="/events/metafest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-blue-600 hover:text-blue-900">
-                    <span className="underline">Announcing MetaFest 2024</span>
+                    <a href="/events/versefest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-blue-600 hover:text-blue-900">
+                    <span className="underline">Announcing: VerseFest 2024</span>
                     <ChevronRightIcon className="h-5 w-5 text-blue-700" aria-hidden="true" />
                   </a>
                   </div>

src/components/Speakers.jsx

@@ -29,7 +29,7 @@ import waylonHydenImage from '@/images/avatars/waylon-hyden.jpg'
 const days = [
   {
     name: 'Opening Day',
-    date: 'April 4',
+    date: 'Oct 24',
     dateTime: '2022-04-04',
     speakers: [
       {
@@ -66,7 +66,7 @@ const days = [
   },
   {
     name: 'Speakers & Workshops',
-    date: 'April 5',
+    date: 'Oct 25',
     dateTime: '2022-04-05',
     speakers: [
       {
@@ -103,7 +103,7 @@ const days = [
   },
   {
     name: 'Interviews',
-    date: 'April 6',
+    date: 'Oct 26',
     dateTime: '2022-04-06',
     speakers: [
       {
@@ -181,7 +181,7 @@ export function Speakers() {
     <section
       id="speakers"
       aria-labelledby="speakers-title"
-      className="py-20 sm:py-32"
+      className="py-20 lg:py-24"
     >
       <ImageClipPaths id={id} />
       <Container>
@@ -193,8 +193,7 @@ export function Speakers() {
             Speakers
           </h2>
           <p className="mt-4 font-display text-2xl tracking-tight text-blue-900">
-            Learn from the experts on the cutting-edge of deception at the most
-            sinister companies.
+          Get ready to be inspired by some of the industry leaders and innovators who are shaping the future of the metaverse, Web3, AI, and more.
           </p>
         </div>
         <TabGroup

src/components/Sponsors.jsx

@@ -10,16 +10,19 @@ const sponsors = [
   { name: 'Tuple', logo: logoTuple },
   { name: 'StaticKit', logo: logoStaticKit },
   { name: 'Mirage', logo: logoMirage },
+  { name: 'Transistor', logo: logoTransistor },
+  { name: 'Tuple', logo: logoTuple },
+  { name: 'StaticKit', logo: logoStaticKit },
+  // Add more sponsors if needed
 ]
 
 export function Sponsors() {
   return (
-    <section id="sponsors" aria-label="Sponsors" className="mb-4">
-      <Container>
-        <div className="grid grid-cols-2 mt-4 lg:mt-0 lg:gap-y-1 gap-y-1
-         gap-x-2 md:grid-cols-4 lg:grid-cols-4 place-items-center">
-          {sponsors.map((sponsor) => (
-            <div key={sponsor.name} className="flex items-center justify-center lg:h-40 lg:w-40 h-25 w-25">
+    <section id="sponsors" aria-label="Sponsors" className="mb-4 overflow-hidden">
+      <Container className="mt-2 pt-2">
+        <div className="animate-slide flex space-x-8 items-center lg:h-40 h-25">
+          {sponsors.concat(sponsors).map((sponsor, index) => (
+            <div key={index} className="flex items-center justify-center lg:h-40 lg:w-40 h-25 w-25">
               <Image 
                 src={sponsor.logo} 
                 alt={sponsor.name} 

src/styles/tailwind.css

@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@keyframes slide {
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+  
+  .animate-slide {
+    display: flex;
+    width: max-content;
+    animation: slide 15s linear infinite;
+  }
+