54 lines
4.5 KiB
HTML
54 lines
4.5 KiB
HTML
<div class="relative bg-white/5">
|
||
<main>
|
||
<div class="relative isolate">
|
||
<div class="overflow-hidden">
|
||
<div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
|
||
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
|
||
<div class="relative lg:hidden pb-4">
|
||
<img src="/images/people_1.jpg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
<div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
|
||
<h2 class="text-base/7 font-light text-white tracking-wide">PARTICIPATE</h2>
|
||
<h1 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Become a Part of the Movement</h1>
|
||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Find out how you can join CyberCity and be part of the future. Whether you're looking to invest, launch your business, become a digital citizen, or move into the heart of innovation, now is your chance to be among the first pioneers shaping this groundbreaking ecosystem.</p>
|
||
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Be the First to Shape the Future – Join Us Now!</p>
|
||
<div class="mt-10 flex items-center gap-x-6">
|
||
<a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
|
||
</div>
|
||
</div>
|
||
<div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
|
||
<div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
|
||
<div class="relative hidden lg:block">
|
||
<img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
|
||
<div class="relative hidden lg:block">
|
||
<img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
<div class="relative hidden lg:block">
|
||
<img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
</div>
|
||
<div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
|
||
<div class="relative hidden lg:block">
|
||
<img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
<div class="relative hidden lg:block">
|
||
<img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
|
||
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|