hero section

README.md

@@ -1,49 +1,94 @@
-# Welcome to [Astro](https://astro.build)
+# Astroship Starter Template 🛸
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+Astroship is a starter template for startups, marketing websites & landing pages. Built with Astro, TailwindCSS & Alpine.js
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+[Image]
 
-![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
+## Installation
 
+If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a `git clone` to clone it to your local system.
 
-## 🚀 Project Structure
+Alternatively, you can clone the project directly from this repo to your local system.
+
+### 1. Clone the repo
+
+```bash
+git clone https://github.com/surjithctly/astroship.git myProjectName
+# or
+git clone https://github.com/surjithctly/astroship.git .
+```
+
+The `.` will clone it to the current directory so make sure you are inside your project folder first.
+
+### 2. Install Dependencies
+
+```bash
+npm install
+# or
+yarn install
+# or (recommended)
+pnpm install
+```
+
+### 3. Start development Server
+
+```bash
+npm run dev
+# or
+yarn dev
+# or (recommended)
+pnpm dev
+```
+
+### Preview & Build
+
+```bash
+npm run preview
+npm run build
+# or
+yarn preview
+yarn build
+# or (recommended)
+pnpm preview
+pnpm build
+```
+
+We recommend using [pnpm](https://pnpm.io/) so save disk space on your computer.
+
+### Other Commands
+
+```bash
+pnpm astro ...
+pnpm astro add
+pnpm astro --help
+```
+
+## Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
 
 ```
 /
 ├── public/
-│   └── favicon.svg
+│   └── ...
 ├── src/
 │   ├── components/
-│   │   └── Card.astro
+│   │   └── ...
 │   ├── layouts/
-│   │   └── Layout.astro
+│   │   └── ...
 │   └── pages/
-│       └── index.astro
+│       └── ...
 └── package.json
 ```
 
 Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
 Any static assets, like images, can be placed in the `public/` directory.
 
-## 🧞 Commands
+## TailwindCSS & Alpine.js
 
-All commands are run from the root of the project, from a terminal:
+TailwindCSS & Alpine.js are already configured in this repo, so you can start using them without any installation.
-
-| Command                | Action                                             |
-| :--------------------- | :------------------------------------------------- |
-| `npm install`          | Installs dependencies                              |
-| `npm run dev`          | Starts local dev server at `localhost:3000`        |
-| `npm run build`        | Build your production site to `./dist/`            |
-| `npm run preview`      | Preview your build locally, before deploying       |
-| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
-| `npm run astro --help` | Get help using the Astro CLI                       |
 
 ## 👀 Want to learn more?
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+Feel free to check out [Astro Documentation](https://docs.astro.build) or jump into our [Discord Chat](https://web3templates.com/discord).

astro.config.mjs

@@ -6,7 +6,10 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 import alpinejs from "@astrojs/alpinejs";
 
+// https://astro.build/config
+import image from "@astrojs/image";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), alpinejs()]
+  integrations: [tailwind(), alpinejs(), image()]
 });

package.json

@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "@astrojs/alpinejs": "^0.1.2",
+    "@astrojs/image": "^0.11.0",
     "@astrojs/tailwind": "^2.1.1",
+    "@fontsource/inter": "^4.5.14",
     "@types/alpinejs": "^3.0.0",
     "alpinejs": "^3.0.0",
     "astro": "^1.6.0",

pnpm-lock.yaml

@@ -2,7 +2,9 @@ lockfileVersion: 5.4
 
 specifiers:
   '@astrojs/alpinejs': ^0.1.2
+  '@astrojs/image': ^0.11.0
   '@astrojs/tailwind': ^2.1.1
+  '@fontsource/inter': ^4.5.14
   '@types/alpinejs': ^3.0.0
   alpinejs: ^3.0.0
   astro: ^1.6.0
@@ -10,7 +12,9 @@ specifiers:
 
 dependencies:
   '@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq
+  '@astrojs/image': 0.11.0
   '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1
+  '@fontsource/inter': 4.5.14
   '@types/alpinejs': 3.7.1
   alpinejs: 3.10.5
   astro: 1.6.2
@@ -18,6 +22,10 @@ dependencies:
 
 packages:
 
+  /@altano/tiny-async-pool/1.0.2:
+    resolution: {integrity: sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw==}
+    dev: false
+
   /@ampproject/remapping/2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
     engines: {node: '>=6.0.0'}
@@ -44,6 +52,23 @@ packages:
     resolution: {integrity: sha512-D4qKnSQcOF32LgskeGnzq35N30yrITgrSaQrt/EIPU6ItcgcUr/K1BG07JCZdc+4mbfWF6RFQc7yPP9pS8Sg8w==}
     dev: false
 
+  /@astrojs/image/0.11.0:
+    resolution: {integrity: sha512-cWmqig0t4ndb+4v4YwuKJObpU9zWOVsNdEmvoEPPJUgtrrJzaxJYSRBe+pbvjP0xe+cQIk6fOKAq5lchK8VBzQ==}
+    peerDependencies:
+      sharp: '>=0.31.0'
+    peerDependenciesMeta:
+      sharp:
+        optional: true
+    dependencies:
+      '@altano/tiny-async-pool': 1.0.2
+      http-cache-semantics: 4.1.0
+      image-size: 1.0.2
+      kleur: 4.1.5
+      magic-string: 0.25.9
+      mime: 3.0.0
+      slash: 4.0.0
+    dev: false
+
   /@astrojs/language-server/0.26.2:
     resolution: {integrity: sha512-9nkfdd6CMXLDIJojnwbYu5XrYfOI+g63JlktOlpFCwFjFNpm1u0e/+pXXmj6Zs+PkSTo0kV1UM77dRKRS5OC1Q==}
     hasBin: true
@@ -420,6 +445,10 @@ packages:
     dev: false
     optional: true
 
+  /@fontsource/inter/4.5.14:
+    resolution: {integrity: sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==}
+    dev: false
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -1980,6 +2009,10 @@ packages:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
     dev: false
 
+  /http-cache-semantics/4.1.0:
+    resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
+    dev: false
+
   /human-signals/3.0.1:
     resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
     engines: {node: '>=12.20.0'}
@@ -1989,6 +2022,14 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
 
+  /image-size/1.0.2:
+    resolution: {integrity: sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      queue: 6.0.2
+    dev: false
+
   /import-meta-resolve/2.1.0:
     resolution: {integrity: sha512-yG9pxkWJVTy4cmRsNWE3ztFdtFuYIV8G4N+cbCkO8b+qngkLyIUhxQFuZ0qJm67+0nUOxjMPT7nfksPKza1v2g==}
     dev: false
@@ -3040,6 +3081,12 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: false
 
+  /queue/6.0.2:
+    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
+    dependencies:
+      inherits: 2.0.4
+    dev: false
+
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}

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 }">
+<li @click.away="open = false" class="relative" x-data="{ open: false }">
-  <button @click="open = !open" class="flex">
+  <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"
+      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
+      fill="none"
-      :class="{'rotate-180': open, 'rotate-0': !open}"
+      viewBox="0 0 24 24"
-      class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+      stroke-width="3"
-      ><path
+      stroke="currentColor"
-        fill-rule="evenodd"
+      class="w-3 h-3 mt-0.5"
-        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"
+      :class="{'rotate-180': open, 'rotate-0': !open}">
-        clip-rule="evenodd"></path>
+      <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"
+    class:list={[
-    x-transition:enter-start="transform lg:opacity-0 lg:scale-95"
+      "lg:absolute  w-full  lg:w-48",
-    x-transition:enter-end="transform lg:opacity-100 lg:scale-100"
+      lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left",
-    x-transition:leave="transition ease-in duration-75"
+    ]}>
-    x-transition:leave-start="transform lg:opacity-100 lg:scale-100"
+    <div
-    x-transition:leave-end="transform lg:opacity-0 lg:scale-95"
+      class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col">
-    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) => (
-      {children.map((item) => <div>{item.title}</div>)}
+          <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",
+    title: "Contact",
-    path: "#",
+    path: "/contact",
-    children: [
-      { title: "Action", path: "#" },
-      { title: "Another action", path: "#" },
-      { title: "Dropdown Submenu", path: "#" },
-    ],
   },
 ];
 ---
 
 <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>
+    <div class="flex w-full lg:w-auto items-center justify-between">
-    <nav
+      <a href="/" class="text-lg"
-      class="lg:block"
+        ><span class="font-bold text-slate-800">Astro</span><span
-      :class="{ 'block': open, 'hidden': !open }"
+          class="text-slate-500">ship</span
-      x-show.transition="true">
+        >
-      <ul class="flex flex-col lg:flex-row gap-3">
+      </a>
-        {
-          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="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
+      /* Improve Page speed */
-      // https://css-tricks.com/almanac/properties/c/content-visibility/
+      /* 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>
+  <Container>
-    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
+    <Hero />
-    <p class="instructions">
+  </Container>
-      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>
 </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>

tailwind.config.cjs

@@ -1,8 +1,13 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-		extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+      },
+    },
   },
   plugins: [],
-}
+};