ok

src/app/features/page.jsx

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

src/components/Build.jsx

@@ -49,10 +49,9 @@ import {
   
   export default function Build() {
     return (
-      <div className="bg-white lg:py-20 py-24">
+      <div className="bg-gradient-to-b from-purple-50/80 to-purple-50/10  lg:pt-16 lg:pb-24 pt-24 pb-24">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-4xl sm:text-center">
-            <h2 className="text-base font-medium font-mono leading-7 text-purple-600">Get Started</h2>
             <p className="mt-2 font-display text-4xl font-semibold tracking-tighter font-gradient sm:text-5xl">Build Your Own Verse</p>
             <p className="mt-6 font-display text-2xl tracking-tight text-purple-900">
             Create and customize your virtual world with powerful tools and resources that make building and managing your digital space easy and intuitive.
@@ -89,14 +88,6 @@ import {
               </div>
             ))}
           </dl>
-          <div className="mt-16 flex items-center justify-center gap-x-6">
-            <a
-              href="#"
-              className="rounded-2xl btn-gradient px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
-            >
-              Build Your Own Verse Now  <RocketLaunchIcon className="h-4 w-4 inline-block -mt-0.5" />
-            </a>
-          </div>
         </div>
       </div>
     )

src/components/Collaborate.jsx

@@ -26,12 +26,11 @@ const features = [
 
 export default function Collaborate() {
   return (
-    <div className="overflow-hidden bg-white lg:pt-16 lg:pb-16 py-8">
+    <div className="overflow-hidden bg-gradient-to-b from-purple-50/70 to-purple-50/5 lg:pt-24 lg:pb-16 py-8">
       <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 text-3xl font-semibold tracking-tighter font-gradient  sm:text-4xl">Creative Collaboration</p>
               <p className="mt-6 text-lg leading-8 text-purple-900">
               Empower your team to create and innovate together in an immersive virtual environment.
@@ -49,6 +48,7 @@ export default function Collaborate() {
               </dl>
             </div>
           </div>
+          
           <div className="flex items-start justify-end lg:order-first">
             <img
               alt="Product screenshot"

src/components/Communicate.jsx

@@ -26,12 +26,11 @@ const features = [
 
 export default function Communicate() {
   return (
-    <div className="overflow-hidden bg-white lg:pt-24 lg:pb-16 py-20 lg:mt-12 mt-8">
+    <div className="overflow-hidden bg-gradient-to-b from-purple-50/10 to-purple-50/80  lg:pt-24 lg:pb-16 py-20 lg:mt-12 mt-8">
       <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:pr-8 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 text-3xl font-semibold tracking-tighter font-gradient sm:text-4xl">Advanced Communication</p>
               <p className="mt-6 text-lg leading-8 text-purple-900">
               Elevate your virtual interactions with cutting-edge communication features 

src/components/Crm.jsx

@@ -0,0 +1,93 @@
+import {
+    ArrowPathIcon,
+    CloudArrowUpIcon,
+    Cog6ToothIcon,
+    FingerPrintIcon,
+    LockClosedIcon,
+    ServerIcon,
+    CubeIcon,
+    DocumentMagnifyingGlassIcon,
+    CpuChipIcon,
+    ShieldCheckIcon,
+    FilmIcon,
+    GlobeAltIcon,
+    RocketLaunchIcon,
+  } from '@heroicons/react/20/solid'
+  
+  const features = [
+    {
+      name: 'Unified Contact Management.',
+      description: 'Centralize all your customer interactions for a streamlined and organized approach to managing relationships.',
+      icon: CubeIcon,
+    },
+    {
+      name: 'Task & Activity Scheduling.',
+      description: 'Stay on top of your responsibilities with tools to create tasks, schedule virtual meetings, and set reminders.',
+      icon: DocumentMagnifyingGlassIcon,
+    },
+    {
+      name: 'Complete Digital Management.',
+      description: 'From to-do lists to virtual meeting coordination, manage every aspect of your business operations digitally.',
+      icon: CpuChipIcon,
+    },
+    {
+      name: 'Enhanced Team Collaboration.',
+      description: 'Facilitate better teamwork by sharing contacts, tasks, and notes across your team.',
+      icon: ShieldCheckIcon,
+    },
+    {
+      name: 'Automated Workflows.',
+      description: 'Set up automated workflows to streamline repetitive tasks, allowing your team to enhance productivity.',
+      icon: FilmIcon,
+    },
+    {
+      name: 'Real-Time Analytics & Reporting.',
+      description: 'Gain valuable insights into customer behaviors with real-time analytics and reporting tools. ',
+      icon: GlobeAltIcon,
+    },
+  ]
+  
+  export default function Crm() {
+    return (
+      <div className="bg-white lg:py-20 py-24">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-4xl sm:text-center">
+
+            <p className="mt-2 font-display text-4xl font-semibold tracking-tighter font-gradient sm:text-5xl">
+            Integrated CRM</p>
+            <p className="mt-6 font-display text-2xl tracking-tight text-purple-900">
+            Manage customer interactions, tasks, and meetings seamlessly in one platform, helping your business transition smoothly to the digital landscape.
+            </p>
+          </div>
+        </div>
+        <div className="relative overflow-hidden pt-16">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <img
+            alt="App screenshot"
+            src="/images/crm.png"
+            width={2432}
+            height={1442}
+            
+          />
+          <div aria-hidden="true" className="relative">
+            <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
+          </div>
+        </div>
+        </div>
+        <div className="mx-auto lg:mt-16 max-w-7xl px-6 mt-20 md:mt-24 lg:px-8">
+          <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-purple-900 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative pl-9">
+                <dt className="inline font-semibold text-purple-700">
+                  <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-purple-700" />
+                  {feature.name}
+                </dt>{' '}
+                <dd className="inline">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    )
+  }
+  

src/components/Eventmgmt.jsx

@@ -0,0 +1,64 @@
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+
+const features = [
+  {
+    name: 'Customizable Event Spaces.',
+    description:
+      'Personalize your event venues to suit any occasion, offering a dynamic, immersive environment.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Real-Time Organization Tools.',
+    description: 'Keep events running smoothly with real-time notifications, and easy-to-use planning features.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Virtual Networking Lounges.',
+    description: 'Facilitate meaningful connections with virtual networking spaces.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Comprehensive Analytics.',
+    description: 'Track attendee engagement, event performance, and key insights with in-depth analytics.',
+    icon: ServerIcon,
+  },
+]
+
+export default function Eventmgmt() {
+  return (
+    <div className="overflow-hidden bg-gradient-to-b from-purple-50/80 to-purple-50/10  lg:pt-16 lg:pb-16 py-8">
+      <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">
+              <p className="mt-2 text-3xl font-semibold tracking-tighter font-gradient  sm:text-4xl">Event Management</p>
+              <p className="mt-6 text-lg leading-8 text-purple-900">
+              Host and manage tailored events with versatile venues, real-time updates, and powerful engagement tools to ensure a seamless and memorable experience.
+              </p>
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-purple-900 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <dt className="inline font-semibold text-purple-700">
+                      <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-purple-700" />
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:order-first">
+            <img
+              alt="Product screenshot"
+              src="/images/collaborate.jpg"
+              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/Featurehero.jsx

@@ -0,0 +1,29 @@
+import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/20/solid'
+
+export default function Featurehero() {
+  return (
+    <div className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
+      <img
+        alt=""
+        src="/images/bgimage.jpg"
+        className="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center"
+      />
+
+      {/* Gradient Overlay from left to right */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#443b62] to-white/0 -z-10"></div>
+
+      <div className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
+      <div className="absolute inset-0 bg-gradient-to-b from-[#938dc3] via-[#b5b1d7] to-white"></div>
+      </div>
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="lg:text-6xl font-semibold tracking-tight text-white text-4xl">The Future of Collaboration</h2>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+          Unlock the future of communication and collaboration inside immersive virtual environments.
+           OurVerse offers cutting-edge tools designed to bring your events, meetings, and creative projects to life in new and exciting ways.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/FeaturesHome.jsx

@@ -1,9 +1,10 @@
 import {
-  BoltIcon,
   ChatBubbleBottomCenterTextIcon,
-  EnvelopeIcon,
-  GlobeAltIcon,
-  ScaleIcon,
+  UserGroupIcon,
+  SquaresPlusIcon,
+  VideoCameraIcon,
+  CalendarIcon,
+
 } from '@heroicons/react/24/outline'
 
 const transferFeatures = [
@@ -12,21 +13,21 @@ const transferFeatures = [
     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,
+    icon: UserGroupIcon,
   },
   {
     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,
+    icon: VideoCameraIcon,
+  },
+  {
+    id: 3,
+    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: SquaresPlusIcon,
   },
 ]
 const communicationFeatures = [
@@ -42,7 +43,14 @@ const communicationFeatures = [
     name: 'Event Management',
     description:
       'Host customized events with dynamic spaces, real-time updates, virtual networking lounges, live streaming, and analytics.',
-    icon: EnvelopeIcon,
+    icon: CalendarIcon,
+  },
+  {
+    id: 3,
+    name: 'Integrated CRM',
+    description:
+      'Manage customer and user interactions within one unified platform designed to support your business’s digital transformation.',
+    icon: CalendarIcon,
   },
 ]
 
@@ -74,17 +82,18 @@ export default function Featureshome() {
         </svg>
 
         <div className="relative">
-          <h2 className="text-center text-3xl font-bold leading-8 tracking-tight font-gradient sm:text-4xl">
+          <h2 className="text-center lg:text-4xl font-bold leading-8 tracking-tight font-gradient text-2xl">
           The Future of Communication and Collaboration
           </h2>
-          <p className="mx-auto mt-4 max-w-3xl text-center text-xl text-gray-500">
+          <p className="mx-auto mt-4 max-w-3xl text-center text-xl text-purple-700">
           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>
+            <h2 className="text-base  font-medium font-mono leading-7 text-purple-700">Features</h2>
+            <h3 className="text-2xl font-bold tracking-tight text-purple-700 sm:text-3xl">Collaboration & Creation Tools</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>
@@ -93,10 +102,10 @@ export default function Featureshome() {
               {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">
+                    <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-purple-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>
+                    <p className="ml-16 text-lg font-semibold leading-6 text-purple-700">{item.name}</p>
                   </dt>
                   <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
                 </div>
@@ -161,25 +170,31 @@ export default function Featureshome() {
         <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">
+                      <div className="absolute flex h-12 w-12 items-center justify-center rounded-xl bg-purple-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>
+                      <p className="ml-16 text-lg font-semibold leading-6 text-purple-700">{item.name}</p>
                     </dt>
                     <dd className="ml-16 mt-2 text-base text-gray-500">{item.description}</dd>
                   </div>
                 ))}
+                <div className="mt-6">
+                  <a
+                    href="/features"
+                    className="inline-flex rounded-2xl px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm btn-gradient"
+                  >
+                    Explore Features
+                  </a>
+                </div>
               </dl>
             </div>
+            
 
             <div className="relative -mx-4 mt-10 lg:col-start-1 lg:mt-0">
               <svg
@@ -206,7 +221,7 @@ export default function Featureshome() {
               </svg>
               <img
                 alt=""
-                src="/images/feature2.png"
+                src="/images/feature2a.png"
                 width={490}
                 className="relative mx-auto"
               />

src/components/Studio.jsx

@@ -0,0 +1,63 @@
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, VideoCameraIcon, MicrophoneIcon, UserGroupIcon, ComputerDesktopIcon, } from '@heroicons/react/20/solid'
+
+const features = [
+  {
+    name: 'Virtual Multi-Cam Switching.',
+    description:
+      'Immersive, lifelike meetings with our state-of-the-art holographic conferencing technology.',
+    icon: VideoCameraIcon,
+  },
+  {
+    name: 'Integrated Studio Tools.',
+    description: 'High-quality voice and video chat, ensuring clear and reliable communication.',
+    icon: MicrophoneIcon,
+  },
+  {
+    name: 'High-Quality Broadcasting.',
+    description: 'Effortlessly share files, screens, and presentations with integrated tools.',
+    icon: ComputerDesktopIcon,
+  },
+  {
+    name: 'Customizable Virtual Environments.',
+    description: 'Design and personalize your virtual studio space to match your brand or event theme.',
+    icon: UserGroupIcon,
+  },
+]
+
+export default function Studio() {
+  return (
+    <div className="overflow-hidden  bg-gradient-to-b from-purple-50/5 to-purple-50/80 lg:pt-12 lg:pb-16 py-20 lg:mt-12 mt-8">
+      <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:pr-8 lg:pt-4">
+            <div className="lg:max-w-lg">
+              <p className="mt-2 text-3xl font-semibold tracking-tighter font-gradient sm:text-4xl">OurVerse Studio</p>
+              <p className="mt-6 text-lg leading-8 text-purple-900">
+              Elevate your virtual interactions with cutting-edge communication features 
+              designed to keep you connected and engaged.
+              </p>
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-purple-900 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-purple-700" />
+                    <dt className="inline font-semibold text-purple-700">
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <img
+            alt="Product screenshot"
+            src="/images/communicate.jpg"
+            width={2432}
+            height={1442}
+            className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Usecases.jsx

@@ -56,7 +56,7 @@ const links = [
                 </a>
               ))}
             </div>
-            <dl className="mt-16 grid grid-cols-1 gap-8 lg:mt-10 grid-cols-2 lg:grid-cols-4">
+            <dl className="mt-16 grid gap-8 lg:mt-10 grid-cols-2 lg:grid-cols-4">
               {stats.map((stat) => (
                 <div key={stat.name} className="flex flex-col-reverse">
                   <dt className="text-base leading-7 text-gray-300">{stat.name}</dt>

src/components/page.jsx

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