ourworld_web/www_ourverse_new
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit color

Browse Source
This commit is contained in:
sasha-astiadi
2024-09-16 17:10:20 +02:00
parent 383a0ceb19
commit 6f9c79e0c4
29 changed files with 607 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Communhero.jsx
View File

@@ -16,47 +16,46 @@ const supportLinks = [
href: '#',
icon: NewspaperIcon,
},
{
name: 'Media Inquiries',
href: '#',
icon: NewspaperIcon,
},
]
export default function Communhero() {
return (
<div className="bg-white mb-32">
{/* 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.
<div className="relative isolate overflow-hidden bg-purple-900 py-24 sm:py-32">
{/* Background image with lower z-index */}
<img
alt=""
src="/images/bgimage2.jpg"
className="absolute inset-0 -z-20 h-full w-full object-cover object-right md:object-center"
/>
{/* Gradient overlay with a slightly higher z-index */}
<div className="absolute inset-0 bg-gradient-to-r from-[#443b62] to-white/0 -z-10"></div>
{/* Content container with a higher z-index */}
<div className="relative z-10 mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="mt-2 text-3xl font-semibold tracking-tight text-white sm:text-4xl">
Exploring Impactful Use Cases from Real-life Applications
</h2>
<p className="mt-6 text-lg leading-8 text-purple-50">
Discover how OurVerse uniquely addresses challenges and fosters innovation in education, healthcare, environmental conservation,
and economic empowerment with specific, real-world applications of our technology.
</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>
))}
<section aria-labelledby="contact-heading" className="relative z-10 mx-auto max-w-2xl px-6 lg:mx-20">
<div className="flex flex-wrap justify-start gap-x-10 gap-y-6 leading-7">
{supportLinks.map((link, index) => (
<div className="px-0 pb-8 pt-16" key={index}>
<div className="relative top-0 left-0 -translate-y-1/2 rounded-xl social-gradient p-5 shadow-lg">
<link.icon aria-hidden="true" className="h-4 w-4 text-white" />
</div>
</div>
</section>
))}
</div>
</section>
</div>
)
}