ok

src/app/(main)/page.jsx

@@ -1,6 +1,6 @@
 import { Homepage } from '@/components/Homepage'
 import { Hero } from '@/components/Hero'
-import Community from '@/components/Community'
+import Events from '@/components/Events'
 import  Communicate  from '@/components/Communicate'
 import Collaborate from '@/components/Collaborate'
 import Build from '@/components/Build'
@@ -18,7 +18,7 @@ export default function Home() {
       <Collaborate />
       <Build />
       <Product />
-      <Community />
+      <Events />
     </>
   )
 }

src/app/community/layout.jsx

@@ -0,0 +1,5 @@
+import { Layout } from '@/components/Layout'
+
+export default function MainLayout({ children }) {
+  return <Layout>{children}</Layout>
+}

src/app/community/page.jsx

@@ -0,0 +1,15 @@
+import Usecases from '@/components/Usecases'
+import Banner from '@/components/Banner'
+import Communhero from '@/components/Communhero'
+import Commevents from '@/components/Commevents'
+import Events from '@/components/Events'
+
+export default function community() {
+    return (
+      <>
+        <Communhero />
+        <Commevents />
+        <Events />
+        </>
+  )
+}

src/app/community/versefest/page.jsx

@@ -1,5 +1,4 @@
 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'
@@ -11,7 +10,6 @@ import FAQ from '@/components/FAQ'
 export default function versefest() {
   return (
     <>
-      <Header />
       <Event1 />
       <Sponsors />
       <Venue /> 

src/app/usecases/page.jsx

@@ -6,7 +6,6 @@ import FAQ from '@/components/FAQ'
 export default function usecases() {
     return (
       <>
-        <Banner />
         <Usecases />
         <Casestudies />
         <FAQ />

src/components/Commevents.jsx

@@ -0,0 +1,34 @@
+export default function Commevents() {
+    return (
+      <div className="bg-white">
+        <div className="mx-auto max-w-2xl px-4 py-32 mb-12 sm:px-6 lg:max-w-7xl">
+          <div className="relative overflow-hidden rounded-lg lg:h-96">
+            <div className="absolute inset-0">
+              <img
+                alt=""
+                src="/images/banner.jpg"
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
+            <div aria-hidden="true" className="relative h-96 w-full lg:hidden" />
+            <div aria-hidden="true" className="relative h-32 w-full lg:hidden" />
+            <div className="absolute inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-black bg-opacity-75 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
+              <div>
+                <h2 className="text-xl font-bold text-white">Workspace Collection</h2>
+                <p className="mt-1 text-sm text-gray-300">
+                  Upgrade your desk with objects that keep you organized and clear-minded.
+                </p>
+              </div>
+              <a
+                href="#"
+                className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md border border-white border-opacity-25 bg-white bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
+              >
+                View the collection
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  

src/components/Communhero.jsx

@@ -0,0 +1,62 @@
+import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/24/outline'
+
+const supportLinks = [
+  {
+    name: 'Sales',
+    href: '#',
+    icon: PhoneIcon,
+  },
+  {
+    name: 'Technical Support',
+    href: '#',
+    icon: LifebuoyIcon,
+  },
+  {
+    name: 'Media Inquiries',
+    href: '#',
+    icon: NewspaperIcon,
+  },
+  {
+    name: 'Media Inquiries',
+    href: '#',
+    icon: NewspaperIcon,
+  },
+]
+
+export default function Example() {
+  return (
+    <div className="bg-white">
+      {/* Header */}
+      <div className="relative bg-gray-800 pb-40">
+        <div className="absolute inset-0">
+          <img
+            alt=""
+            src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100"
+            className="h-full w-full object-cover"
+          />
+          <div aria-hidden="true" className="absolute inset-0 bg-gray-800 mix-blend-multiply" />
+        </div>
+        <div className="relative mx-auto max-w-7xl px-6 py-24  lg:px-8">
+          <h1 className="mt-8 text-3xl font-medium tracking-tight text-white lg:text-4xl">Community</h1>
+          <p className="mt-6 max-w-3xl text-xl text-gray-300">
+          Together we are shaping the future of immersive virtual environments, powered by cutting-edge technology and innovative collaborations. 
+          Join OurVerse and be a part of creating new realities.
+          </p>
+        </div>
+      </div>
+
+      {/* Overlapping cards */}
+      <section aria-labelledby="contact-heading" className="relative z-10 mx-auto -mt-60 max-w-2xl px-6 lg:mx-20">
+            <div className="flex flex-wrap justify-start gap-x-10 gap-y-6 leading-7">
+                {supportLinks.slice(0, 4).map((link, index) => ( // Assuming you only want to show 4 icons
+                <div key={link.name} className="px-0 pb-8 pt-16">
+                    <div className="relative top-0 left-0 -translate-y-1/2 rounded-xl bg-indigo-600 p-5 shadow-lg">
+                     <link.icon aria-hidden="true" className="h-4 w-4 text-white" />
+                    </div>
+                </div>
+             ))}
+            </div>
+        </section>
+    </div>
+  )
+}

src/components/Events.jsx

@@ -1,11 +1,11 @@
 const featuredPost = {
     id: 1,
     title: 'FutureFest 2024',
-    href: '#',
+    href: '/community/versefest',
     description:
       'Embrace the possibilities at FutureFest 2024, a landmark event that invites you to explore the converging worlds of technology, creativity, and sustainability.',
     date: 'Mar 16, 2020',
-    datetime: '2020-03-16',
+    datetime: '2024-03-16',
   }
   const posts = [
     {
@@ -29,18 +29,21 @@ const featuredPost = {
     // More posts...
   ]
   
-  export default function Example() {
+  export default function Events() {
     return (
       <div className="bg-white pt-12 pb-24">
+        
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
+          
           <article className="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
             <h2 className="text-base font-medium font-mono leading-7 text-blue-500">Community</h2>
+            <h1 className="mt-2 mb-6 text-3xl font-semibold tracking-tight text-blue-700 lg:text-4xl">Upcoming Events</h1> 
             <img
                 alt=""
                 src="/images/futurefest2.jpg"
                 className="mt-4 aspect-auto w-full rounded-2xl bg-gray-50 object-cover lg:aspect-auto lg:h-[20.5rem]"
               />
-            <h2 id="featured-post" className="mt-8 text-3xl font-medium tracking-tight text-blue-700 sm:text-4xl">
+            <h2 id="featured-post" className="mt-8 text-3xl font-medium tracking-tight text-blue-700 lg:text-4xl">
               {featuredPost.title}
             </h2>
             <time dateTime={featuredPost.datetime} className="mt-2 block text-sm leading-6 text-gray-600">

src/components/Header.jsx

@@ -11,7 +11,7 @@ const navigationItems = [
   { name: 'Home', href: '/' },
   { name: 'Features', href: '#' },
   { name: 'Usecases', href: 'usecases' },
-  { name: 'Community', href: '#' },
+  { name: 'Community', href: 'community' },
 ];
 
 export function Header() {

src/components/Layout.jsx

@@ -1,11 +1,13 @@
 import { Footer } from '@/components/Footer'
 import { Newsletter } from '@/components/Newsletter'
+import Banner from '@/components/Banner'
 import { Header } from '@/components/Header'
 
 export function Layout({ children, showFooter = true }) {
   return (
     <>
       <Header />
+      <Banner />
       <main className="flex-auto">{children}</main>
       <Newsletter />
       {showFooter && <Footer />}