Initial commit
This commit is contained in:
ourworld_web
143
templates/partials/home/farmers.html
Normal file
143
templates/partials/home/farmers.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<div class="bg-transparent py-24 pb-6">
|
||||
<div class="mx-auto max-w-8xl px-6 lg:max-w-8xl lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
|
||||
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">
|
||||
Unique Value Proposition</h2>
|
||||
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
|
||||
CyberCity Zanzibar is a city that combines sustainable living, streamlined business processes, cutting-edge datacenters, venture creation, and secure digital tools that empower citizens, businesses, and investors.
|
||||
</p>
|
||||
</div>
|
||||
<section class="pb-32 bg-transparent">
|
||||
<div class="max-w-6xl mx-2 md:mx-10 lg:mx-10 xl:mx-auto">
|
||||
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl class="grid max-w-xl grid-cols-1 gap-x-4 gap-y-4 lg:max-w-none lg:grid-cols-4">
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/digital.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl font-semibold tracking-tight text-white rounded-2xl">
|
||||
Digital Freezone
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">.</p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/datacenter.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Datacenter City
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/twin.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Digital Hero
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/startup.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Venture Creator
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/eco.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Regenerative Living
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Sovereign Zone
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/ai.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Augmented Intelligence
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
|
||||
<p class="mt-6">
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<!-- concept -->
|
||||
<div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
|
||||
<div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
|
||||
<dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
|
||||
Digital Assets
|
||||
</dt>
|
||||
<dd class="relative z-10 mt-4 flex flex-auto flex-col">
|
||||
<p class="flex-auto leading-normal font-light text-gray-200 text-md">
|
||||
|
||||
</p>
|
||||
<p class="mt-6"></p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.6s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user