mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

hero section

Browse Source
This commit is contained in:
Surjith S M
2022-11-03 21:47:36 +05:30
parent ee30a40c17
commit f6f484e67d
13 changed files with 294 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
README.md
View File

@@ -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:
| 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 |
TailwindCSS & Alpine.js are already configured in this repo, so you can start using them without any installation.
## 👀 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).

5
astro.config.mjs
View File

@@ -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()]
});

2
package.json
View File

@@ -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",

47
pnpm-lock.yaml generated
View File

@@ -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'}

BIN
src/assets/hero.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

30
src/components/hero.astro Normal file
View File

@@ -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>

52
src/components/navbar/dropdown.astro
View File

@@ -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>

76
src/components/navbar/navbar.astro
View File

@@ -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>

9
src/components/ui/button.astro Normal file
View File

@@ -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>

31
src/components/ui/link.astro Normal file
View File

@@ -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>

10
src/layouts/Layout.astro
View File

@@ -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>

80
src/pages/index.astro
View File

@@ -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>

11
tailwind.config.cjs
View File

@@ -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: [],
}
};