new features page

src/app/(main)/page.jsx

@@ -1,11 +1,9 @@
 import { Homepage } from '@/components/Homepage'
 import { Hero } from '@/components/Hero'
 import Events from '@/components/Events'
-import  Communicate  from '@/components/Communicate'
-import Collaborate from '@/components/Collaborate'
-import Build from '@/components/Build'
 import { Product } from '@/components/Product'
-import { Speakers } from '@/components/Speakers'
+import Allfeatures from '@/components/Allfeatures'
+import Featureshome from '@/components/Featureshome'
 import { Sponsors } from '@/components/Sponsors'
 
 export default function Home() {
@@ -14,9 +12,7 @@ export default function Home() {
       <Homepage />
       <Sponsors />
       <Hero />
-      <Communicate />
-      <Collaborate />
-      <Build />
+      <Featureshome />
       <Product />
       <Events />
     </>

src/app/features/layout.jsx

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

src/app/features/page.jsx

@@ -0,0 +1,13 @@
+import  Communicate  from '@/components/Communicate'
+import Collaborate from '@/components/Collaborate'
+import Build from '@/components/Build'
+
+export default function features() {
+    return (
+      <>
+      <Communicate />
+      <Collaborate />
+      <Build />
+      </>
+  )
+}

src/components/Allfeatures.jsx

@@ -0,0 +1,97 @@
+"use client"; 
+
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+import { useState, useEffect } from 'react'
+
+const features = [
+  {
+    name: 'Advanced Communication.',
+    description:
+      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Creative Collaboration.',
+    description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Build Your Verse.',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Event Management.',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'OurVerse Studio.',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ServerIcon,
+  },
+
+]
+
+// List of carousel images
+const carouselImages = [
+  '/images/feature1.jpg',
+  '/images/feature2.jpg',
+  '/images/feature3.jpg',
+  '/images/feature4.jpg',
+  '/images/feature5.jpg',
+]
+
+export default function Example() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  // Autoplay logic to change image every 3 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) =>
+        prevIndex === carouselImages.length - 1 ? 0 : prevIndex + 1
+      )
+    }, 3000)
+
+    return () => clearInterval(interval) // Cleanup on unmount
+  }, [])
+
+  return (
+    <div className="overflow-hidden bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:ml-auto lg:pl-4 lg:pt-4">
+            <div className="lg:max-w-lg">
+              <h2 className="text-base font-medium font-mono leading-7 text-purple-600">Features</h2>
+              <p className="mt-2 font-display text-3xl font-semibold tracking-tighter font-gradient sm:text-5xl">The Future of Communication</p>
+              <p className="mt-6 text-lg leading-8 text-gray-600">
+              OurVerse offers cutting-edge tools designed to bring your events, meetings, and creative projects to life in new and exciting ways.
+              </p>
+              <dl className="mt-6 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <dt className="inline font-semibold text-gray-900">
+                      <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-indigo-600" />
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:order-first">
+            {/* Carousel */}
+            <img
+              alt="Product screenshot"
+              src={carouselImages[currentIndex]}
+              width={2432}
+              height={1442}
+              className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/FeaturesHome.jsx

@@ -0,0 +1,219 @@
+import {
+  BoltIcon,
+  ChatBubbleBottomCenterTextIcon,
+  EnvelopeIcon,
+  GlobeAltIcon,
+  ScaleIcon,
+} from '@heroicons/react/24/outline'
+
+const transferFeatures = [
+  {
+    id: 1,
+    name: 'Creative Collaboration',
+    description:
+      'Work on projects together with real-time collaboration in shared virtual spaces, interactive 3D whiteboards, and dynamic environments for live demos and workshops.',
+    icon: GlobeAltIcon,
+  },
+  {
+    id: 2,
+    name: 'Build Your Verse',
+    description:
+      'Design custom virtual environments using AI-powered tools, extensive 3D model and template libraries, and immersive animations to bring your virtual spaces to life.',
+    icon: ScaleIcon,
+  },
+  {
+    id: 3,
+    name: 'OurVerse Studio',
+    description:
+      'Create professional-grade live content with integrated virtual studio tools and multi-cam switching for high-quality broadcasting.',
+    icon: BoltIcon,
+  },
+]
+const communicationFeatures = [
+  {
+    id: 1,
+    name: 'Advanced Communication',
+    description:
+      'Connect through holograms, video and voice chat, and powerful sharing tools that elevate interaction and engagement.',
+    icon: ChatBubbleBottomCenterTextIcon,
+  },
+  {
+    id: 2,
+    name: 'Event Management',
+    description:
+      'Host customized events with dynamic spaces, real-time updates, virtual networking lounges, live streaming, and analytics.',
+    icon: EnvelopeIcon,
+  },
+]
+
+export default function Featureshome() {
+  return (
+    <div className="overflow-hidden py-16 lg:py-24">
+      <div className="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
+        <svg
+          fill="none"
+          width={404}
+          height={784}
+          viewBox="0 0 404 784"
+          aria-hidden="true"
+          className="absolute left-full hidden -translate-x-1/2 -translate-y-1/4 transform lg:block"
+        >
+          <defs>
+            <pattern
+              x={0}
+              y={0}
+              id="b1e6e422-73f8-40a6-b5d9-c8586e37e0e7"
+              width={20}
+              height={20}
+              patternUnits="userSpaceOnUse"
+            >
+              <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
+            </pattern>
+          </defs>
+          <rect fill="url(#b1e6e422-73f8-40a6-b5d9-c8586e37e0e7)" width={404} height={784} />
+        </svg>
+
+        <div className="relative">
+          <h2 className="text-center text-3xl font-bold leading-8 tracking-tight font-gradient sm:text-4xl">
+          The Future of Communication and Collaboration
+          </h2>
+          <p className="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-500">
+          OurVerse offers cutting-edge tools and immersive virtual environments designed to bring your events, meetings, and creative projects to life in new and exciting ways.
+          </p>
+        </div>
+
+        <div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
+          <div className="relative">
+            <h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Collaboration & Creation</h3>
+            <p className="mt-3 text-lg text-gray-500">
+            Transform how you and your team work together with our innovative, real-time creative tools.
+            </p>
+
+            <dl className="mt-10 space-y-10">
+              {transferFeatures.map((item) => (
+                <div key={item.id} className="relative">
+                  <dt>
+                    <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500 text-white">
+                      <item.icon aria-hidden="true" className="h-8 w-8" />
+                    </div>
+                    <p className="ml-16 text-lg font-medium leading-6 text-gray-900">{item.name}</p>
+                  </dt>
+                  <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+
+          <div aria-hidden="true" className="relative -mx-4 mt-10 lg:mt-0">
+            <svg
+              fill="none"
+              width={784}
+              height={404}
+              viewBox="0 0 784 404"
+              className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
+            >
+              <defs>
+                <pattern
+                  x={0}
+                  y={0}
+                  id="ca9667ae-9f92-4be7-abcb-9e3d727f2941"
+                  width={20}
+                  height={20}
+                  patternUnits="userSpaceOnUse"
+                >
+                  <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
+                </pattern>
+              </defs>
+              <rect fill="url(#ca9667ae-9f92-4be7-abcb-9e3d727f2941)" width={784} height={404} />
+            </svg>
+            <img
+              alt=""
+              src="/images/feature1.png"
+              width={490}
+              className="relative mx-auto"
+            />
+          </div>
+        </div>
+
+        <svg
+          fill="none"
+          width={404}
+          height={784}
+          viewBox="0 0 404 784"
+          aria-hidden="true"
+          className="absolute right-full hidden translate-x-1/2 translate-y-12 transform lg:block"
+        >
+          <defs>
+            <pattern
+              x={0}
+              y={0}
+              id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
+              width={20}
+              height={20}
+              patternUnits="userSpaceOnUse"
+            >
+              <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
+            </pattern>
+          </defs>
+          <rect fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" width={404} height={784} />
+        </svg>
+
+        <div className="relative mt-12 sm:mt-16 lg:mt-24">
+          <div className="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:items-center lg:gap-8">
+            <div className="lg:col-start-2">
+              <h3 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Events & Communication</h3>
+              <p className="mt-3 text-lg text-gray-500">
+              Host seamless virtual events and interact through holographic communication in a secure, immersive space.
+              </p>
+
+              <dl className="mt-10 space-y-10">
+                {communicationFeatures.map((item) => (
+                  <div key={item.id} className="relative">
+                    <dt>
+                      <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500 text-white">
+                        <item.icon aria-hidden="true" className="h-8 w-8" />
+                      </div>
+                      <p className="ml-16 text-lg font-medium leading-6 text-gray-900">{item.name}</p>
+                    </dt>
+                    <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+
+            <div className="relative -mx-4 mt-10 lg:col-start-1 lg:mt-0">
+              <svg
+                fill="none"
+                width={784}
+                height={404}
+                viewBox="0 0 784 404"
+                aria-hidden="true"
+                className="absolute left-1/2 -translate-x-1/2 translate-y-16 transform lg:hidden"
+              >
+                <defs>
+                  <pattern
+                    x={0}
+                    y={0}
+                    id="e80155a9-dfde-425a-b5ea-1f6fadd20131"
+                    width={20}
+                    height={20}
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <rect x={0} y={0} fill="currentColor" width={4} height={4} className="text-gray-200" />
+                  </pattern>
+                </defs>
+                <rect fill="url(#e80155a9-dfde-425a-b5ea-1f6fadd20131)" width={784} height={404} />
+              </svg>
+              <img
+                alt=""
+                src="/images/feature2.png"
+                width={490}
+                className="relative mx-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Header.jsx

@@ -9,7 +9,7 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 // Example navigation items
 const navigationItems = [
   { name: 'Home', href: '/' },
-  { name: 'Features', href: '#' },
+  { name: 'Features', href: 'features' },
   { name: 'Usecases', href: 'usecases' },
   { name: 'Community', href: 'community' },
 ];