deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(index): update index page

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-04-06 22:01:00 +02:00
parent 0ac917b6c6
commit 665da2a1a6
3 changed files with 122 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.astro/icon.d.ts vendored
View File

@ -1,5 +1,5 @@
// Automatically generated by astro-icon // Automatically generated by astro-icon
// b5656b180e17d605a43b549d7b16b9fe1f88ab935972b5d2c4a0adc596506799 // 48d58aa18c5f482b943e0f1d0ff058b64ec1be14a4656942f69a2d128b6234bb
declare module 'virtual:astro-icon' { declare module 'virtual:astro-icon' {
export type Icon = export type Icon =
@ -219,9 +219,6 @@ declare module 'virtual:astro-icon' {
| "line-md:external-link" | "line-md:external-link"
| "line-md:external-link-rounded" | "line-md:external-link-rounded"
| "line-md:facebook" | "line-md:facebook"
| "line-md:filter"
| "line-md:filter-filled"
| "line-md:filter-twotone"
| "line-md:fork-left" | "line-md:fork-left"
| "line-md:gauge" | "line-md:gauge"
| "line-md:gauge-empty" | "line-md:gauge-empty"
@ -440,7 +437,6 @@ declare module 'virtual:astro-icon' {
| "line-md:round-360" | "line-md:round-360"
| "line-md:round-ramp-left" | "line-md:round-ramp-left"
| "line-md:roundabout-left" | "line-md:roundabout-left"
| "line-md:rss"
| "line-md:search" | "line-md:search"
| "line-md:search-filled" | "line-md:search-filled"
| "line-md:search-twotone" | "line-md:search-twotone"

2
.astro/types.d.ts vendored
View File

@ -223,5 +223,5 @@ declare module 'astro:content' {
type AnyEntryMap = ContentEntryMap & DataEntryMap; type AnyEntryMap = ContentEntryMap & DataEntryMap;
export type ContentConfig = typeof import("../src/content/config.js"); export type ContentConfig = typeof import("./../src/content/config.js");
} }

106
src/pages/index.astro
View File

@ -14,21 +14,20 @@ import index5 from '@/assets/images/index-5.png';
<BaseLayout <BaseLayout
title="Astro Deploy" title="Astro Deploy"
description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development."> description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
<div class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8"> <header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200"> <Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
Deploy Your Deploy Your
<span <span
class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200"> class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
Astro.js Astro.js
</span> </span>
Site!</Heading Site!
> </Heading>
<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400"> <p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
Supercharge your website with the Astro Deploy boilerplate with Docker support for Supercharge your website with the Astro Deploy boilerplate with Docker support for
out-of-this-world web experiences. Launch today! out-of-this-world web experiences. Launch today!
</p> </p>
<div class="mt-8 grid w-full gap-3 sm:inline-flex sm:justify-center"> <div class="mt-8 flex justify-center">
<a <a
href="https://github.com/deployn/astro-deploy" href="https://github.com/deployn/astro-deploy"
class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800"> class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
@ -36,8 +35,9 @@ import index5 from '@/assets/images/index-5.png';
<Icon name="line-md:chevron-right" class="size-3" /> <Icon name="line-md:chevron-right" class="size-3" />
</a> </a>
</div> </div>
</div> </header>
<div
<section
class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16"> class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
<Heading <Heading
level={2} level={2}
@ -48,17 +48,18 @@ import index5 from '@/assets/images/index-5.png';
Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
experiences. experiences.
</p> </p>
</div> </section>
<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"> <section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
<div class="lg:flex-1"> <div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div class="flex items-center justify-center">
<Image <Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg" class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index1} src={index1}
alt="Abstract Tech" alt="Abstract Tech"
/> />
</div> </div>
<div class="flex flex-col gap-y-4 lg:flex-1"> <div class="flex flex-col gap-y-4">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left"> <h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Revolutionize Website Development Revolutionize Website Development
</h2> </h2>
@ -67,87 +68,97 @@ import index5 from '@/assets/images/index-5.png';
</p> </p>
</div> </div>
</div> </div>
<div </section>
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"> <section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div class="flex items-center justify-center lg:order-2">
<Image <Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg" class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index2} src={index2}
alt="Abstract Tech" alt="Abstract Tech"
/> />
</div> </div>
<div class="flex flex-col gap-y-4 lg:flex-1"> <div class="flex flex-col gap-y-4 lg:order-1">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left"> <h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Accelerate Website Development with Astro Deploy Accelerate Website Development with Astro Deploy
</h2> </h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300"> <p class="text-lg text-zinc-800 dark:text-zinc-300">
Astro Deploy expedites website development with pre-configured Astro.js boilerplate, Docker, Astro Deploy expedites website development with pre-configured Astro.js boilerplate,
and Tailwind CSS, enabling businesses to launch their online presence swiftly and engage Docker, and Tailwind CSS, enabling businesses to launch their online presence swiftly and
customers effectively. engage customers effectively.
</p> </p>
</div> </div>
</div> </div>
<div </section>
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"> <section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div class="flex items-center justify-center">
<Image <Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg" class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index3} src={index3}
alt="Abstract Tech" alt="Abstract Tech"
/> />
</div> </div>
<div class="flex flex-col gap-y-4 lg:flex-1"> <div class="flex flex-col gap-y-4">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left"> <h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Docker Integration Docker Integration
</h2> </h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300"> <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. The Docker integration ensures smooth deployment and scalability of your Astro.js 4
Embrace containerization technology to streamline your development process and enhance project. Embrace containerization technology to streamline your development process and
efficiency. enhance efficiency.
</p> </p>
</div> </div>
</div> </div>
<div </section>
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"> <section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div class="flex items-center justify-center lg:order-2">
<Image <Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg" class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index4} src={index4}
alt="Abstract Tech" alt="Abstract Tech"
/> />
</div> </div>
<div class="flex flex-col gap-y-4 lg:flex-1"> <div class="flex flex-col gap-y-4 lg:order-1">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left"> <h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
Tailwind CSS Styling Tailwind CSS Styling
</h2> </h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300"> <p class="text-lg text-zinc-800 dark:text-zinc-300">
Utilizing the power of Tailwind CSS, crafting visually appealing designs that are responsive Utilizing the power of Tailwind CSS, crafting visually appealing designs that are
and user-friendly. Bring your vision to life with customizable styles that reflect your responsive and user-friendly. Bring your vision to life with customizable styles that
brand identity. reflect your brand identity.
</p> </p>
</div> </div>
</div> </div>
<div </section>
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"> <section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div class="flex items-center justify-center">
<Image <Image
class="mx-auto max-h-96 w-full rounded-xl shadow-lg" class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
src={index5} src={index5}
alt="Abstract Tech" alt="Abstract Tech"
/> />
</div> </div>
<div class="flex flex-col gap-y-4 lg:flex-1"> <div class="flex flex-col gap-y-4">
<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left"> <h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
MDX Blog Setup MDX Blog Setup
</h2> </h2>
<p class="text-lg text-zinc-800 dark:text-zinc-300"> <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 Enhance your website's content management capabilities with MDX Blog integration. Set up
MDX-powered blog for seamless content creation and management, empowering you to engage your an MDX-powered blog for seamless content creation and management, empowering you to engage
audience effectively. your audience effectively.
</p> </p>
</div> </div>
</div> </div>
<div class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl"> </section>
<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
<div <div
class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2"> class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">
</div> </div>
@ -157,19 +168,20 @@ import index5 from '@/assets/images/index-5.png';
<div <div
class="absolute -left-6 top-2 size-16 rotate-45 -skew-y-3 bg-primary-600 transition-all duration-500 hover:rounded-3xl xl:top-12"> class="absolute -left-6 top-2 size-16 rotate-45 -skew-y-3 bg-primary-600 transition-all duration-500 hover:rounded-3xl xl:top-12">
</div> </div>
<div class="relative flex flex-col items-center space-y-8 md:flex-row md:space-y-0">
<div class="py-5 text-center md:w-7/12 md:p-5 md:text-left"> <div class="relative flex flex-col items-center gap-8 md:flex-row md:gap-16">
<div class="text-center md:w-7/12 md:text-left">
<h2 class="mb-4 text-4xl font-black text-white">Deploy your site</h2> <h2 class="mb-4 text-4xl font-black text-white">Deploy your site</h2>
<h3 class="text-xl leading-relaxed text-gray-300">Start building amazing sites, today.</h3> <p class="text-xl leading-relaxed text-gray-300">Start building amazing sites, today.</p>
</div> </div>
<div class="grow md:p-5 md:text-center"> <div class="flex justify-center md:w-5/12">
<a <a
href="https://github.com/deployn/astro-deploy" href="https://github.com/deployn/astro-deploy"
class="inline-flex items-center justify-center space-x-2 rounded-full border border-primary-700 bg-primary-700 px-8 py-4 font-semibold leading-6 text-white hover:border-primary-600 hover:bg-primary-600 hover:text-white focus:ring focus:ring-primary-400 focus:ring-opacity-50 active:border-primary-700 active:bg-primary-700"> class="inline-flex items-center justify-center gap-2 rounded-full border border-primary-700 bg-primary-700 px-8 py-4 font-semibold leading-6 text-white hover:border-primary-600 hover:bg-primary-600 focus:ring focus:ring-primary-400 focus:ring-opacity-50 active:border-primary-700 active:bg-primary-700">
<span>Get Started</span> <span>Get Started</span>
<Icon name="line-md:chevron-right" class="size-3" /> <Icon name="line-md:chevron-right" class="size-3" />
</a> </a>
</div> </div>
</div> </div>
</div> </section>
</BaseLayout> </BaseLayout>