ourworld_web/www_zola_template
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update about2

Browse Source
This commit is contained in:
ehab-hassan
2025-05-20 17:09:57 +03:00
parent 5d119e779f
commit 5e20eb96ec
7 changed files with 175 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/shortcodes/cta.html
View File

@@ -8,19 +8,21 @@
{% set image_alt = image_alt | default(value="") %}
<div class="fade-in lg:pt-12">
<div class="mx-auto max-w-7xl py-12">
<div class="container mx-auto lg:max-w-7xl py-12">
<div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="text-4xl font-normal tracking-tight text-white lg:text-5xl">{{ title }}</h2>
<p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="{{ button_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>
<a href="{{ button_link }}" class="rounded-2xl bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>
<a href="{{ button_link2 }}" class="text-sm/6 font-semibold text-white hover:text-gray-100">{{ button_text2 }} <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative mt-16 h-80 lg:mt-8">
<img class="absolute top-0 left-0 w-[25rem] lg:w-[45rem] max-w-none rounded-2xl ring-1 ring-white/10" src="{{ image_src }}" alt="{{ image_alt }}" width="1824" height="1080">
<div class="relative mt-16 h-auto lg:mt-8">
<img class="block w-full max-w-full h-auto rounded-2xl ring-1 ring-white/10 lg:w-[45rem]" src="{{ image_src }}" alt="{{ image_alt }}">
</div>
</div>
</div>
</div>

59
templates/shortcodes/desciption_blockquote.html Normal file
View File

@@ -0,0 +1,59 @@
{% set title = title | default(value="") %}
{% set description_1 = description_1 | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set description_3 = description_3 | default(value="") %}
{% set description_4 = description_4 | default(value="") %}
<div class="lg:py-24 py-12relative bg-white isolate overflow-hidden py-12">
<div class="mx-auto container lg:max-w-7xl px-4">
<div>
<h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight l">{{ title }}
</h2>
</div>
<div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content -->
<div class="lg:col-span-6">
<div class="mx-auto max-w-2xl lg:mx-0">
<p class="fade-in mt-2 text-lg lg:text-xl font-light text-black">
{{ description_1 }}
<br><br>
{{ description_2 }}
<br><br>
</p>
</div>
</div>
<!-- Right Blockquote -->
<div class="lg:col-span-6">
<figure class=" mt-2 pl-8">
<blockquote class=" text-black fade-in px-6">
<p class="text-md leading-normal font-normal">{{ description_3 }}
<br><br>
{{ description_4 }}</p>
</blockquote>
<br>
<div class="mx-4">
<p class="fade-in mx-auto text-xl font-semibold tracking-tight lg:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
Decentralized. Scalable. Intelligent.
</p>
</div>
</figure>
</div>
</div>
</div>
</div>
<style>
.blockquote::before {
content: open-quote;
font-size: 4rem;
position: absolute;
top: -1rem;
left: -1rem;
color: #8d1212;
}
</style>

2
templates/shortcodes/hero_right_img.html
View File

@@ -7,7 +7,7 @@
<div class=" fade-in">
<div class="relative isolate">
<div class="container mx-auto max-w-7xl lg:py-24 py-12 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
<div class="container mx-auto max-w-7xl lg:pb-24 pb-12 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
<div class="my-6 lg:my-16 sm:mt-24 lg:flex lg:justify-center lg:w-1/2 lg:order-2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}"
alt="{{ image_alt }}">

42
templates/shortcodes/text_left_img.html Normal file
View File

@@ -0,0 +1,42 @@
{% set title = title | default(value="") %}
{% set subheader = subheader | default(value="") %}
{% set subtitle = subtitle | default(value="") %}
{% set description = description | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
<div class="lg:py-24 py-12 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto">
<div class="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">
<div class="lg:order-2 mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}"
alt="{{ image_alt }}">
</div>
<div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
<p class="text-base mt-4 font-light tracking-wide">{{ subheader }}</p>
<h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
<h3 class="font-light lg:text-3xl text-xl">
{{ subtitle }}
</h3>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in">
{{ description }}
</p>
<p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in">
{{ description_2 }}
</p>
{% if button_link %}
<div class="mt-6 flex">
<a href="{{ button_link }}" class="rounded-2xl bg-black border border-white px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">{{ button_text }}</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>

13
templates/shortcodes/text_right_img.html
View File

@@ -8,12 +8,16 @@
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
<div class="py-24 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto px-6 lg:px-8">
<div class="lg:py-24 py-12 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto">
<div class="relative isolate">
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">
<div class="mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}"
alt="{{ image_alt }}">
</div>
<div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
<p class="text-base font-light tracking-wide">{{ subheader }}</p>
<p class="text-base font-light tracking-wide mt-4">{{ subheader }}</p>
<h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
<h3 class="font-light lg:text-3xl text-xl">
{{ subtitle }}
@@ -31,10 +35,7 @@
{% endif %}
</div>
<div class="lg:order-first mt-6 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}"
alt="{{ image_alt }}">
</div>
</div>
</div>