mirror of
https://github.com/zen-browser/astro-site-test.git
synced 2025-07-07 17:55:31 +02:00
61 lines
1.4 KiB
Text
61 lines
1.4 KiB
Text
---
|
|
// src/components/hero.astro
|
|
import DownloadIcon from "./icons/download-icon.astro";
|
|
import browserImage from "@/assets/Redrawn_v1_Barebones.png";
|
|
import "@fontsource/dm-sans/700.css";
|
|
import { Image } from "astro:assets";
|
|
import Download from "./download.astro";
|
|
---
|
|
|
|
<section id="hero">
|
|
<h2>Stay focused, browse faster</h2>
|
|
<p class="description">
|
|
Zen is beautifully designed, privacy-focused, and packed with features. We
|
|
care about your experience, not your data.
|
|
</p>
|
|
<div class="download">
|
|
<Download><DownloadIcon /> Download Zen</Download>
|
|
<p>Available on Windows, Mac, and Linux</p>
|
|
</div>
|
|
<div class="hero__image">
|
|
<Image src={browserImage} alt="Zen Logo" />
|
|
<figcaption>
|
|
Your experience using Zen may change over time, as new features are added,
|
|
improved and adjusted with upstream Firefox updates. User discretion is
|
|
advised.
|
|
</figcaption>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
@tailwind base;
|
|
@layer base {
|
|
section {
|
|
@apply section flex flex-col items-center gap-md py-20;
|
|
}
|
|
|
|
h2 {
|
|
@apply drop-shadow-md md:text-center;
|
|
}
|
|
|
|
.download {
|
|
@apply center flex flex-col gap-sm;
|
|
}
|
|
|
|
.download p {
|
|
@apply text-muted/95;
|
|
}
|
|
|
|
.hero__image {
|
|
@apply flex flex-1 flex-col gap-4;
|
|
}
|
|
|
|
img {
|
|
@apply w-full rounded-lg;
|
|
}
|
|
|
|
figcaption {
|
|
@apply text-muted/95;
|
|
}
|
|
}
|
|
</style>
|