ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity
5502d8a675
www_aibox/templates/partials/home/bento.html
sasha-astiadi 40e8971ca1 edit text colior
2025-02-18 22:40:40 +08:00

115 lines
8.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class=" py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<span class="text-base/7 font-light text-black tracking-wide">CONCEPT</span>
<p class="mt-2 max-w-lg text-4xl font-medium tracking-tight text-pretty text-black sm:text-5xl">Value Propositions</p>
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-3">
<!-- row1 2col -->
<div class="relative lg:col-span-3">
<div class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left" src="/images/freezone2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">NEXT-GEN BUSINESS</h3>
<p class="mt-1 lg:text-2xl text-xl font-normal tracking-normal text-black">Digital Freezone</p>
<!-- row1 2col -->
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">A future-focused ecosystem with streamlined business processes, decentralized systems, and global connectivity.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
</div>
<!-- row1- 2 column -->
<div class="relative lg:col-span-3">
<div class="absolute inset-px rounded-lg bg-white lg:rounded-tr-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left lg:object-right" src="images/dc2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">SUSTAINABLE CLOUD & AI INFRASTRUCTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">DataCenter City</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Zanzibar’s largest, most sustainable data center, equipped with Threefold Nodes and co-owned AI integrated with city services.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5 "></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover object-left" src="images/bot2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">SECURE AI & DIGITAL IDENTITY</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Digital Hero</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Private, secure communication and transactions with efficient AI assisted collaboration and full control of your own data and digital identity.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5"></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover" src="/images/startup1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">STARTUP GROWTH & INNOVATION HUB</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Venture Creator</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Empowers startups with strategic guidance, funding support, global networking, talent acquisition, and operational resources.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px bg-white/5 "></div>
<div class="relative flex h-full flex-col overflow-hidden ">
<img class="h-80 object-cover" src="/images/eco3.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">SUSTAINABLE FUTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Regenerative Living</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Tech-driven sustainable living powered by clean energy, organic food, and a resilient, collaborative community with global impact.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5 lg:rounded-bl-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
<img class="h-80 object-cover object-left" src="/images/zone2.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">DECENTRALIZED ECONOMY</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Digital Assets</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Tokenized assets drive fair trade, sustainable economies, and stability with resilient digital currencies.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
<img class="h-80 object-cover" src="/images/zone1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">LEGAL AUTONOMY </h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Autonomous Zone</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Enjoy legal independence, data ownership, and secure connections in a future-focused global ecosystem.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
</div>
<!-- row2 - 3col -->
<div class="relative lg:col-span-2">
<div class="absolute inset-px rounded-lg bg-white/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
<div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
<img class="h-80 object-cover" src="/images/home1.jpg" alt="">
<div class="p-10 pt-4">
<h3 class="text-base/7 font-light text-black tracking-wide">AI-POWERED INFRASTRUCTURE</h3>
<p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-black">Augmented Intelligence</p>
<p class="mt-2 max-w-lg lg:text-md text-sm font-light text-black">Homes power Zanzibar’s data center, with co-owned AI integrated into services and generating citizen income.</p>
</div>
</div>
<div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
</div>
</div>
</div>
</div>
View Git Blame Copy Permalink