ourworld_web/www_tf_demo
23
0
Fork 0
Code Pull Requests Activity

edit

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-14 04:37:19 +01:00
parent 49ed5bfbbc
commit 6c3d462f06
41 changed files with 384 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
templates/partials/hero.html
View File

@@ -1,26 +1,26 @@
<div class="relative isolate overflow-hidden h-screen bg-white">
<div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
<div class="text-center">
<img src="./images/logo.svg"
alt="Hero Image"
width="210"
height="210"
class="mx-auto rounded-md">
<p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
<div class="max-w-4xl">
<h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
<div class="relative bg-white">
<div class="mx-auto max-w-7xl">
<div class="relative z-10 lg:w-full lg:max-w-2xl">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="relative px-6 py-40 lg:px-8 lg:pr-0">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
<h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
<p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
<div class="mt-10 flex items-center gap-x-6 animate-fade-up">
<a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
<a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ODFZ OurWorld Digital FreeZone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
Get Started
</a>
<a href="/about" class="rounded-xl border border-gray-800 px-4 py-2.5 font-medium text-gray-900 bg-transparent shadow-sm hover:bg-blue-700 hover:text-blue-700 transition-all duration-300">
Learn More &#8594;
</a>
</div>
</div>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
<img class="aspect-[3/2] w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
</div>
@@ -31,26 +31,53 @@
height: 100%;
}
.relative.isolate.overflow-hidden.h-screen {
height: 100vh;
/* Background gradient */
.bg-gradient-bl {
background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
}
/* Fade-up animation for text */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
/* Fade-in animation for the image (GIF) */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Apply fade-up animation to text */
.animate-fade-up {
animation: fadeUp 1.5s ease-out forwards;
}
/* Apply fade-in animation to the GIF */
.animate-fade-in {
animation: fadeIn 2s ease-out forwards;
}
/* Responsive styles for smaller screens */
@media (max-width: 640px) {
h1 {
font-size: 2rem; /* Smaller font for mobile */
font-size: 2rem;
}
h2 {
font-size: 1.25rem; /* Smaller font for mobile */
}
p {
font-size: 1rem; /* Smaller font for mobile */
margin-left: 1rem; /* Margin left for mobile */
margin-right: 1rem; /* Margin right for mobile */
line-height: 1.5; /* Smaller line spacing */
font-size: 1rem;
margin-left: 1rem;
margin-right: 1rem;
line-height: 1.5;
}
}
</style>