hero section

src/components/hero.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from "@astrojs/image/components";
+import heroImage from "assets/hero.avif";
+import Link from "@components/ui/link.astro";
+---
+
+<main class="grid lg:grid-cols-2 place-items-center py-24">
+  <div>
+    <h1 class="text-4xl lg:text-7xl font-bold lg:tracking-tight">
+      Marketing website done with Astro
+    </h1>
+    <p class="text-lg mt-4 text-slate-600 max-w-xl">
+      Astroship is a starter template for startups, marketing websites & landing
+      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>
+      <Link
+        size="lg"
+        style="outline"
+        href="https://github.com/surjithctly/astroship"
+        target="_blank">View Repo</Link
+      >
+    </div>
+  </div>
+  <div>
+    <!-- <Image src={heroImage} alt="Astronaut in the air" /> -->
+  </div>
+</main>

src/components/navbar/dropdown.astro

@@ -1,32 +1,42 @@
 ---
-const { title, children } = Astro.props;
+const { title, lastItem, children } = Astro.props;
 ---
 
-<div @click.away="open = false" class="relative" x-data="{ open: false }">
-  <button @click="open = !open" class="flex">
+<li @click.away="open = false" class="relative" x-data="{ open: false }">
+  <button
+    @click="open = !open"
+    class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
     <span>{title}</span>
     <svg
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      :class="{'rotate-180': open, 'rotate-0': !open}"
-      class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
-      ><path
-        fill-rule="evenodd"
-        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-        clip-rule="evenodd"></path>
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="3"
+      stroke="currentColor"
+      class="w-3 h-3 mt-0.5"
+      :class="{'rotate-180': open, 'rotate-0': !open}">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
     </svg>
   </button>
   <div
+    x-cloak
     x-show="open"
-    x-transition:enter="transition ease-out duration-100"
-    x-transition:enter-start="transform lg:opacity-0 lg:scale-95"
-    x-transition:enter-end="transform lg:opacity-100 lg:scale-100"
-    x-transition:leave="transition ease-in duration-75"
-    x-transition:leave-start="transform lg:opacity-100 lg:scale-100"
-    x-transition:leave-end="transform lg:opacity-0 lg:scale-95"
-    class="lg:absolute lg:right-0 w-full mt-2 origin-top-right lg:w-48">
-    <div class="px-2 py-2 lg:bg-white lg:rounded-md lg:shadow">
-      {children.map((item) => <div>{item.title}</div>)}
+    class:list={[
+      "lg:absolute  w-full  lg:w-48",
+      lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left",
+    ]}>
+    <div
+      class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col">
+      {
+        children.map((item) => (
+          <a href={item.path} class="py-1 text-gray-600 hover:text-gray-900">
+            {item.title}
+          </a>
+        ))
+      }
     </div>
   </div>
-</div>
+</li>

src/components/navbar/navbar.astro

@@ -1,5 +1,6 @@
 ---
 import Container from "@components/container.astro";
+import Link from "@components/ui/link.astro";
 import Dropdown from "./dropdown.astro";
 
 const menuitems = [
@@ -25,41 +26,23 @@ const menuitems = [
     path: "/blog",
   },
   {
-    title: "Resources",
-    path: "#",
-    children: [
-      { title: "Action", path: "#" },
-      { title: "Another action", path: "#" },
-      { title: "Dropdown Submenu", path: "#" },
-    ],
+    title: "Contact",
+    path: "/contact",
   },
 ];
 ---
 
 <Container>
   <header
-    class="flex justify-between my-5"
+    class="flex flex-col lg:flex-row justify-between items-center my-5"
     x-data="{ open: false }"
     x-init="$watch('open', value => console.log(value))">
-    <div>Astroship</div>
-    <nav
-      class="lg:block"
-      :class="{ 'block': open, 'hidden': !open }"
-      x-show.transition="true">
-      <ul class="flex flex-col lg:flex-row gap-3">
-        {
-          menuitems.map((item) => (
-            <li>
-              {item.children && (
-                <Dropdown title={item.title} children={item.children} />
-              )}
-              {!item.children && <a href={item.path}>{item.title}</a>}
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
-    <div>
+    <div class="flex w-full lg:w-auto items-center justify-between">
+      <a href="/" class="text-lg"
+        ><span class="font-bold text-slate-800">Astro</span><span
+          class="text-slate-500">ship</span
+        >
+      </a>
       <div class="block lg:hidden">
         <button @click="open = !open" class="text-gray-800">
           <svg
@@ -69,6 +52,7 @@ const menuitems = [
             xmlns="http://www.w3.org/2000/svg">
             <title>Menu</title>
             <path
+              x-cloak
               x-show="open"
               fill-rule="evenodd"
               clip-rule="evenodd"
@@ -81,7 +65,43 @@ const menuitems = [
             ></path>
           </svg>
         </button>
-      </div> login
+      </div>
+    </div>
+    <nav
+      class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0"
+      :class="{ 'block': open, 'hidden': !open }"
+      x-transition>
+      <ul class="flex flex-col lg:flex-row lg:gap-3">
+        {
+          menuitems.map((item, index) => (
+            <>
+              {item.children && (
+                <Dropdown
+                  title={item.title}
+                  children={item.children}
+                  lastItem={index === menuitems.length - 1}
+                />
+              )}
+
+              {!item.children && (
+                <li>
+                  <a
+                    href={item.path}
+                    class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+                    {item.title}
+                  </a>
+                </li>
+              )}
+            </>
+          ))
+        }
+      </ul>
+    </nav>
+    <div>
+      <div class="hidden lg:flex items-center gap-4">
+        <a href="#">Log in</a>
+        <Link href="#">Sign up</Link>
+      </div>
     </div>
   </header>
 </Container>

src/components/ui/button.astro

@@ -0,0 +1,9 @@
+---
+const { ...rest } = Astro.props;
+---
+
+<button
+  {...rest}
+  class="bg-black text-white px-5 rounded py-3 hover:bg-slate-700 focus-visible:ring"
+  ><slot />
+</button>

src/components/ui/link.astro

@@ -0,0 +1,31 @@
+---
+const {
+  href,
+  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",
+};
+---
+
+<a
+  href={href}
+  {...rest}
+  class:list={[
+    "  rounded  transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    sizes[size],
+    styles[style],
+    className,
+  ]}
+  ><slot />
+</a>

src/layouts/Layout.astro

@@ -1,6 +1,8 @@
 ---
 import Navbar from "@components/navbar/navbar.astro";
 
+import "@fontsource/inter/variable.css";
+
 export interface Props {
   title: string;
 }
@@ -21,11 +23,15 @@ const { title } = Astro.props;
     <Navbar />
     <slot />
     <style is:global>
-      // Improve Page speed
-      // https://css-tricks.com/almanac/properties/c/content-visibility/
+      /* Improve Page speed */
+      /* https://css-tricks.com/almanac/properties/c/content-visibility/ */
       img {
         content-visibility: auto;
       }
+      /* Avoid Alpine.js Hidden Element Flash */
+      [x-cloak] {
+        display: none;
+      }
     </style>
   </body>
 </html>

src/pages/index.astro

@@ -1,82 +1,12 @@
 ---
 import Card from "@components/Card.astro";
+import Container from "@components/container.astro";
+import Hero from "@components/hero.astro";
 import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout title="">
-  <main>
-    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <p class="instructions">
-      To get started, open the directory <code>src/pages</code> in your project.<br
-      />
-      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-    </p>
-    <ul role="list" class="link-card-grid">
-      <Card
-        href="https://docs.astro.build/"
-        title="Documentation"
-        body="Learn how Astro works and explore the official API docs."
-      />
-      <Card
-        href="https://astro.build/integrations/"
-        title="Integrations"
-        body="Supercharge your project with new frameworks and libraries."
-      />
-      <Card
-        href="https://astro.build/themes/"
-        title="Themes"
-        body="Explore a galaxy of community-built starter themes."
-      />
-      <Card
-        href="https://astro.build/chat/"
-        title="Community"
-        body="Come say hi to our amazing Discord community. ❤️"
-      />
-    </ul>
-  </main>
+  <Container>
+    <Hero />
+  </Container>
 </Layout>
-
-<style>
-  main {
-    margin: auto;
-    padding: 1.5rem;
-    max-width: 60ch;
-  }
-  h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0;
-  }
-  .text-gradient {
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-  }
-  .instructions {
-    line-height: 1.6;
-    margin: 1rem 0;
-    border: 1px solid rgba(var(--accent), 25%);
-    background-color: white;
-    padding: 1rem;
-    border-radius: 0.4rem;
-  }
-  .instructions code {
-    font-size: 0.875em;
-    font-weight: bold;
-    background: rgba(var(--accent), 12%);
-    color: rgb(var(--accent));
-    border-radius: 4px;
-    padding: 0.3em 0.45em;
-  }
-  .instructions strong {
-    color: rgb(var(--accent));
-  }
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 1rem;
-    padding: 0;
-  }
-</style>