mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

change hero image to Picture. fixes #5

Browse Source
This commit is contained in:
Surjith S M
2023-01-04 19:04:27 +05:30
parent fa8e040690
commit fa8574e1a0
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/hero.astro
View File

@@ -1,15 +1,18 @@
--- ---
import { Image } from "@astrojs/image/components"; import { Picture } from "@astrojs/image/components";
import heroImage from "assets/hero.png"; import heroImage from "assets/hero.png";
import Link from "@components/ui/link.astro"; import Link from "@components/ui/link.astro";
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
--- ---
<main class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-8"> <main class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:py-24">
<div class="py-6 md:order-1 hidden md:block"> <div class="py-6 md:order-1 hidden md:block">
<Image <Picture
src={heroImage} src={heroImage}
alt="Astronaut in the air" alt="Astronaut in the air"
widths={[200, 400, 600]}
aspectRatio="4:3"
sizes="(max-width: 800px) 100vw, 620px"
loading="eager" loading="eager"
format="avif" format="avif"
/> />
@@ -33,8 +36,8 @@ import { Icon } from "astro-icon";
rel="noopener"> rel="noopener">
<Icon class="text-white w-5 h-5" name="bx:bxs-cloud-download" /> <Icon class="text-white w-5 h-5" name="bx:bxs-cloud-download" />
Download for Free</Link Download for Free
> </Link>
<Link <Link
size="lg" size="lg"
style="outline" style="outline"
@@ -43,8 +46,8 @@ import { Icon } from "astro-icon";
class="flex gap-1 items-center justify-center" class="flex gap-1 items-center justify-center"
target="_blank"> target="_blank">
<Icon class="text-black w-4 h-4" name="bx:bxl-github" /> <Icon class="text-black w-4 h-4" name="bx:bxl-github" />
Github Repo</Link Github Repo
> </Link>
</div> </div>
</div> </div>
</main> </main>