365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Run prettier in all files

Browse Source
This commit is contained in:
prototypa
2022-08-10 18:40:54 -04:00
parent 7d1a1ca31b
commit 3bb66c7060
22 changed files with 925 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/astro/hero/HeroWithImage.astro
View File

@@ -1,31 +1,46 @@
---
import { Picture } from '@astrojs/image/components';
const { } = Astro.props;
import { Picture } from "@astrojs/image/components";
const {} = Astro.props;
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
<div class="text-center pb-12 md:pb-16">
<h1 class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 ">
<h1
class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4"
>
Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> +
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Tailwind</span>
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>Astro
</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>Tailwind
</span>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
A template to make your website using Astro + Tailwind CSS. Ready to start a new project and designed taking
into account best practices for SEO, great page speed, accessibility, dark mode, image
A template to make your website using Astro + Tailwind CSS. Ready to
start a new project and designed taking into account best practices
for SEO, great page speed, accessibility, dark mode, image
optimization and automatic sitemap generation.
</p>
<div class="max-w-xs max-w-none flex justify-center ">
<div class="max-w-xs max-w-none flex justify-center">
<div>
<a class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0" href="#0">Get
started</a>
<a
class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0"
href="#0"
>Get started
</a>
</div>
<div>
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
href="#0">Learn more</a>
<a
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
href="#0"
>Learn more
</a>
</div>
</div>
</div>
@@ -33,11 +48,17 @@ const { } = Astro.props;
<div>
<div class="relative flex justify-center mb-8">
<div class="flex flex-col justify-center">
<Picture src={import('~/assets/hero-astro.jpg')} class="mx-auto rounded-md" widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 768px" alt="Hero Image" aspectRatio="16:9" />
<Picture
src={import("~/assets/hero-astro.jpg")}
class="mx-auto rounded-md"
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
</div>
</div>
</div>
</div>
</div>
</section>
</section>