This commit is contained in:
2026-05-13 21:17:36 +03:00
parent e43b94ba20
commit 3a6ab777c9
49 changed files with 9247 additions and 210 deletions

View File

@@ -0,0 +1,155 @@
<section>
<!-- Container -->
<div class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
<div class="text-center mb-12">
<!-- Title -->
<h2 class="mb-4 mt-6 text-3xl font-bold md:text-5xl">
The latest and greatest news
</h2>
<p class="text-gray-500 mt-2">
Lorem ipsum dolor sit amet elit ut aliquam
</p>
<!-- Buttons -->
<div class="my-10 md:my-20 flex flex-col md:flex-row justify-center gap-3">
<button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
Engaging Articles
</button>
<button class="px-4 py-2 bg-black text-white font-semibold rounded-full">
Product Updates
</button>
<button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
Reflex Workflows
</button>
<button class="px-4 py-2 bg-gray-100 font-semibold rounded-full">
Artificial Intelligence
</button>
</div>
</div>
<!-- Blog Content -->
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- Blog Item -->
<div class=" bg-gray-50 rounded-lg overflow-hidden">
<div class="relative h-80">
<img class="h-80 w-full object-cover" src="<?= image() ?>" alt="" />
<a class="absolute bottom-5 right-5 btn btn-secondary ">
Product Updates
</a>
</div>
<div class="p-4 flex justify-between items-center">
<div>
<h2 class="text-lg font-semibold mt-2">
Here is the title for this News
</h2>
<p>Lorem ipsum dolor sit amet elit ut aliquam</p>
</div>
<button class="cursor-pointer h-14 w-14">
<svg class="h-14 w-14" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.0001 52.5001C42.4265 52.5001 52.5001 42.4265 52.5001 30.0001C52.5001 17.5736 42.4265 7.5 30.0001 7.5C17.5736 7.5 7.5 17.5736 7.5 30.0001C7.5 42.4265 17.5736 52.5001 30.0001 52.5001Z" fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path d="M31.4297 37.9454L39.375 30L31.4297 22.0547" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.625 30H39.3751" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<!-- Blog Item -->
<div class="relative bg-gray-50 rounded-lg overflow-hidden">
<div class="relative h-80">
<img class="h-80 w-full object-cover" src="<?= image() ?>" alt="" />
<a class="absolute bottom-5 right-5 btn btn-secondary ">
Product Updates
</a>
</div>
<div class="p-4 flex justify-between items-center">
<div>
<h2 class="text-lg font-semibold mt-2">
Here is the title for this News
</h2>
<p>Lorem ipsum dolor sit amet elit ut aliquam</p>
</div>
<button class="cursor-pointer h-14 w-14">
<svg class="h-14 w-14" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.0001 52.5001C42.4265 52.5001 52.5001 42.4265 52.5001 30.0001C52.5001 17.5736 42.4265 7.5 30.0001 7.5C17.5736 7.5 7.5 17.5736 7.5 30.0001C7.5 42.4265 17.5736 52.5001 30.0001 52.5001Z" fill="black" stroke="black" stroke-width="2" stroke-miterlimit="10" />
<path d="M31.4297 37.9454L39.375 30L31.4297 22.0547" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.625 30H39.3751" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Blog Item -->
<div class="bg-gray-50 rounded-lg overflow-hidden">
<div class="relative h-72">
<img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
<a class="absolute bottom-5 right-5 btn btn-secondary ">
Product Updates
</a>
</div>
<div class="p-4">
<h2 class="text-lg font-semibold mt-2">
Here is the title for this News
</h2>
<p class="text-gray-500">
We make every expression of Hero Spirits with precision and
passion
</p>
</div>
</div>
<!-- Blog Item -->
<div class=" bg-gray-50 rounded-lg overflow-hidden">
<div class="relative h-72">
<img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
<a class="absolute bottom-5 right-5 btn btn-secondary ">
Product Updates
</a>
</div>
<div class="p-4">
<h2 class="text-lg font-semibold mt-2">
Here is the title for this News
</h2>
<p class="text-gray-500">
We make every expression of Hero Spirits with precision and
passion
</p>
</div>
</div>
<!-- Blog Item -->
<div class="bg-gray-50 rounded-lg overflow-hidden">
<div class="relative h-72">
<img class="h-72 w-full object-cover" src="<?= image() ?>" alt="" />
<a class="absolute bottom-5 right-5 btn btn-secondary ">
Product Updates
</a>
</div>
<div class="p-4">
<h2 class="text-lg font-semibold mt-2">
Here is the title for this News
</h2>
<p class="text-gray-500">
We make every expression of Hero Spirits with precision and
passion
</p>
</div>
</div>
</div>
<!-- Button -->
<div class="mt-10 md:mt-20 text-center">
<button class="px-6 py-2 bg-black text-white rounded-lg">
Load More
</button>
</div>
</div>
</div>
</section>