hero and features

src/components/features.astro

@@ -0,0 +1,55 @@
+---
+const features = [
+  {
+    title: "Bring Your Own Framework",
+    description:
+      "Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.",
+  },
+  {
+    title: "100% Static HTML, No JS",
+    description:
+      "Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.",
+  },
+  {
+    title: "On-Demand Components",
+    description:
+      "Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.",
+  },
+  {
+    title: "Broad Integration",
+    description:
+      "Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.",
+  },
+  {
+    title: "SEO Enabled",
+    description:
+      "Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.",
+  },
+  {
+    title: "Community",
+    description:
+      "Astro is an open source project powered by hundreds of contributors making thousands of individual contributions.",
+  },
+];
+---
+
+<div>
+  <h2 class="text-2xl lg:text-5xl font-bold lg:tracking-tight">
+    Everything you need to start a website
+  </h2>
+  <p class="text-lg mt-4 text-slate-600">
+    Astro comes batteries included. It takes the best parts of state-of-the-art
+    tools and adds its own innovations.
+  </p>
+</div>
+
+<div class="grid sm:grid-cols-2 md:grid-cols-3 mt-10 gap-16">
+  {
+    features.map((item) => (
+      <div>
+        <h3 class="font-semibold text-lg">{item.title}</h3>{" "}
+        <p class="text-slate-500 mt-2 leading-relaxed">{item.description}</p>
+      </div>
+    ))
+  }
+</div>

src/components/hero.astro

@@ -1,10 +1,18 @@
 ---
 import { Image } from "@astrojs/image/components";
-import heroImage from "assets/hero.avif";
+import heroImage from "assets/hero.png";
 import Link from "@components/ui/link.astro";
 ---
 
-<main class="grid lg:grid-cols-2 place-items-center py-24">
+<main class="grid lg:grid-cols-2 place-items-center py-8">
+  <div class="py-6 md:order-1">
+    <Image
+      src={heroImage}
+      alt="Astronaut in the air"
+      loading="eager"
+      format="avif"
+    />
+  </div>
   <div>
     <h1 class="text-4xl lg:text-7xl font-bold lg:tracking-tight">
       Marketing website done with Astro
@@ -14,8 +22,8 @@ import Link from "@components/ui/link.astro";
       pages.<wbr /> Built with Astro.build, TailwindCSS & Alpine.js. You can quickly
       create any website with this starter.
     </p>
-    <div class="mt-6 flex gap-3">
-      <Link href="#">Get Started</Link>
+    <div class="mt-6 flex flex-col sm:flex-row gap-3">
+      <Link href="#" class="">Get Started</Link>
       <Link
         size="lg"
         style="outline"
@@ -24,7 +32,4 @@ import Link from "@components/ui/link.astro";
       >
     </div>
   </div>
-  <div>
-    <!-- <Image src={heroImage} alt="Astronaut in the air" /> -->
-  </div>
 </main>

src/components/navbar/navbar.astro

@@ -100,7 +100,7 @@ const menuitems = [
     <div>
       <div class="hidden lg:flex items-center gap-4">
         <a href="#">Log in</a>
-        <Link href="#">Sign up</Link>
+        <Link href="#" size="md">Sign up</Link>
       </div>
     </div>
   </header>

src/components/ui/button.astro

@@ -1,9 +1,29 @@
 ---
-const { ...rest } = Astro.props;
+const {
+  size = "lg",
+  style = "primary",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const sizes = {
+  lg: "px-5 py-2.5",
+};
+
+const styles = {
+  outline: "border-2 border-black hover:bg-black text-black hover:text-white",
+  primary:
+    "bg-black text-white hover:bg-slate-900  border-2 border-transparent",
+};
 ---
 
 <button
   {...rest}
-  class="bg-black text-white px-5 rounded py-3 hover:bg-slate-700 focus-visible:ring"
+  class:list={[
+    "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    sizes[size],
+    styles[style],
+    className,
+  ]}
   ><slot />
 </button>

src/components/ui/link.astro

@@ -1,4 +1,12 @@
 ---
+interface Props {
+  href: string;
+  size?: string;
+  style?: string;
+  class?: string;
+  [x: string]: any;
+}
+
 const {
   href,
   size = "lg",
@@ -9,6 +17,7 @@ const {
 
 const sizes = {
   lg: "px-5 py-2.5",
+  md: "px-4 py-2",
 };
 
 const styles = {
@@ -22,7 +31,7 @@ const styles = {
   href={href}
   {...rest}
   class:list={[
-    "  rounded  transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    "  rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
     sizes[size],
     styles[style],
     className,

src/layouts/Layout.astro

@@ -1,11 +1,18 @@
 ---
+import { getImage } from "@astrojs/image";
 import Navbar from "@components/navbar/navbar.astro";
-
 import "@fontsource/inter/variable.css";
 
 export interface Props {
   title: string;
 }
+const { src } = await getImage({
+  src: "../../assets/hero.png",
+  width: 800,
+  height: 742,
+  format: "avif",
+});
+console.log(src);
 
 const { title } = Astro.props;
 ---
@@ -17,6 +24,8 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
+
+    <link rel="preload" as="image" href={src} alt="Hero" />
     <title>{title} {title && "|"} Astro Ship</title>
   </head>
   <body>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Card from "@components/Card.astro";
 import Container from "@components/container.astro";
+import Features from "@components/features.astro";
 import Hero from "@components/hero.astro";
 import Layout from "@layouts/Layout.astro";
 ---
@@ -8,5 +9,6 @@ import Layout from "@layouts/Layout.astro";
 <Layout title="">
   <Container>
     <Hero />
+    <Features />
   </Container>
 </Layout>

tsconfig.json

@@ -15,6 +15,9 @@
       "@layouts/*": [
         "layouts/*"
       ],
+      "@assets/*": [
+        "assets/*"
+      ],
     }
   }
 }