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,