ok

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>
+  )
+}