chore(index): add more content and images

This commit is contained in:
Jewgeni Lewash 2024-03-08 22:53:34 +01:00
parent 8282b141b8
commit f4f9e71726
4 changed files with 63 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -6,6 +6,9 @@ import Heading from '@/components/ui/Heading.astro';
import index1 from '@/assets/images/index-1.png'; import index1 from '@/assets/images/index-1.png';
import index2 from '@/assets/images/index-2.png'; import index2 from '@/assets/images/index-2.png';
import index3 from '@/assets/images/index-3.png';
import index4 from '@/assets/images/index-4.png';
import index5 from '@/assets/images/index-5.png';
--- ---
<BaseLayout <BaseLayout
@ -84,6 +87,66 @@ import index2 from '@/assets/images/index-2.png';
</p> </p>
</div> </div>
</div> </div>
<div
class="mx-auto flex max-w-7xl flex-col items-center gap-x-12 gap-y-8 px-8 py-16 lg:flex-row lg:py-24">
<div class="lg:flex-1">
<Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index3}
alt="Abstract Tech"
/>
</div>
<div class="flex flex-col gap-y-4 lg:flex-1">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Docker Integration
</h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300">
Te Docker integration ensures smooth deployment and scalability of your Astro.js 4 project.
Embrace containerization technology to streamline your development process and enhance
efficiency.
</p>
</div>
</div>
<div
class="mx-auto flex max-w-7xl flex-col items-center gap-x-12 gap-y-8 px-8 py-16 lg:flex-row-reverse lg:py-24">
<div class="lg:flex-1">
<Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index4}
alt="Abstract Tech"
/>
</div>
<div class="flex flex-col gap-y-4 lg:flex-1">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Tailwind CSS Styling
</h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300">
Utilizing the power of Tailwind CSS, crafting visually appealing designs that are responsive
and user-friendly. Bring your vision to life with customizable styles that reflect your
brand identity.
</p>
</div>
</div>
<div
class="mx-auto flex max-w-7xl flex-col items-center gap-x-12 gap-y-8 px-8 py-16 lg:flex-row lg:py-24">
<div class="lg:flex-1">
<Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index5}
alt="Abstract Tech"
/>
</div>
<div class="flex flex-col gap-y-4 lg:flex-1">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
MDX Blog Setup
</h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300">
Enhance your website's content management capabilities with MDX Blog integration. Set up an
MDX-powered blog for seamless content creation and management, empowering you to engage your
audience effectively.
</p>
</div>
</div>
<div class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl"> <div class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
<div class="absolute inset-0 -mx-2 my-6 rotate-2 -skew-y-1 rounded bg-gray-800 lg:my-20"></div> <div class="absolute inset-0 -mx-2 my-6 rotate-2 -skew-y-1 rounded bg-gray-800 lg:my-20"></div>
<div <div