├── .gitignore ├── .netlify └── v1 │ └── config.json ├── .temp.1743940048195.config.mjs ├── .vscode ├── extensions.json └── launch.json ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public └── favicon.svg ├── src ├── assets │ ├── cta.svg │ ├── hero.svg │ ├── hiw.svg │ ├── logo-dark.svg │ ├── object-one.svg │ ├── object-three.svg │ ├── object-two.svg │ └── start.svg ├── components │ ├── Features.astro │ ├── FinalCta.astro │ ├── Footer.astro │ ├── Header.astro │ ├── Hero.astro │ └── HowToUse.astro ├── demo │ ├── attribute.md │ ├── brew-thumbnail.png │ ├── landing-02.png │ ├── landing.png │ └── score.png ├── env.d.ts ├── layouts │ └── Layout.astro └── pages │ └── index.astro └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | Archive.zip 23 | -------------------------------------------------------------------------------- /.netlify/v1/config.json: -------------------------------------------------------------------------------- 1 | {"images":{"remote_images":[]},"headers":[{"for":"/_astro/*","values":{"Cache-Control":"public, max-age=31536000, immutable"}}]} -------------------------------------------------------------------------------- /.temp.1743940048195.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | 3 | import netlify from "@astrojs/netlify/functions"; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | output: "server", 8 | adapter: netlify() 9 | }); -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | ![basics](./src/demo/brew-thumbnail.png) 3 | 4 | 5 | ## About 6 | Astrobrew is a free and open-source elegant landing page for Micro SaaS products built with Astro & Skeleton CSS 7 | 8 | ### Live demo 9 | (https://brew.indiebold.com/) 10 | 11 | ### Upgrade to Astrobrew Pro version 12 | (https://brewpro.indiebold.com/) 13 | 14 | 15 | ## 🚀 Project Structure 16 | 17 | Inside of your Astro project, you'll see the following folders and files: 18 | 19 | ``` 20 | / 21 | ├── public/ 22 | │ └── favicon.svg 23 | ├── src/ 24 | │ ├── components/ 25 | │ │ └── Features.astro 26 | └── FinalCta.astro 27 | └── Footer.astro 28 | └── Header.astro 29 | └── Hero.astro 30 | └── HowToUse.astro 31 | │ ├── layouts/ 32 | │ │ └── Layout.astro 33 | │ └── pages/ 34 | │ └── index.astro 35 | └── package.json 36 | ``` 37 | 38 | ## Score 39 | ![basics](./src/demo/score.png) 40 | 41 | 42 | ## 🧞 Commands 43 | 44 | All commands are run from the root of the project, from a terminal: 45 | 46 | | Command | Action | 47 | | :------------------------ | :----------------------------------------------- | 48 | | `npm install` | Installs dependencies | 49 | | `npm run dev` | Starts local dev server at `localhost:3000` | 50 | | `npm run build` | Build your production site to `./dist/` | 51 | | `npm run preview` | Preview your build locally, before deploying | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ## 👀 Curious to Explore More? 59 | 60 | Check out [LAB-CH3](https://github.com/LaB-CH3) for a growing collection of current and future templates. 61 | 62 | If you’ve found this helpful, consider fueling my creativity! 63 | [![Buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/d2OuR1c) -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | 3 | import netlify from "@astrojs/netlify"; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | output: "server", 8 | adapter: netlify() 9 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astrobrew", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/netlify": "^6.2.5", 14 | "astro": "^5.6.1" 15 | }, 16 | "devDependencies": { 17 | "sass": "^1.63.6" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/logo-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/start.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/Features.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import FeatureOne from '../assets/object-one.svg' 3 | import FeatureTwo from '../assets/object-two.svg' 4 | import FeatureThree from '../assets/object-three.svg' 5 | --- 6 | 7 | 8 | 9 |
10 |
11 | 12 |
13 |
14 |
15 | Prospect 16 |
17 |

Learning

18 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere velit ullam maxime veritatis, possimus.

19 |
20 |
21 |
22 | Marketing 23 |
24 |

Support

25 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere velit ullam maxime veritatis, possimus.

26 |
27 |
28 |
29 | Automation 30 |
31 |

Insights

32 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere velit ullam maxime veritatis, possimus.

33 |
34 |
35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/FinalCta.astro: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 |
7 |
8 |
9 | 10 |
11 |
12 |
13 |

"I’ve been a happy Astrobrew customer since 2018. Then and now, Plutio has helped me keep my projects organized and effortless. My clients love it too - they feel more important and involved than ever before."

14 |

Claire Rick, Lead Developer @Slack

15 |
16 |
17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Start from '../assets/start.svg' 3 | const creator = `https://instagram.com/codetonero/` 4 | const links = [ 5 | { title: 'Help', link: creator }, 6 | { title: 'FAQ', link: creator }, 7 | { title: 'Privacy', link: creator }, 8 | { title: 'Discord', link: creator }, 9 | ] 10 | --- 11 | 12 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Logo from '../assets/logo-dark.svg' 3 | --- 4 | 5 | 6 |
7 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/Hero.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Showcase from '../assets/hero.svg' 3 | --- 4 | 5 | 6 |
7 |
8 |
9 |
10 |
11 |

Learn faster with your best language tutor

12 |
13 |

Astrobrew is a free and open-source elegant landing page for Micro SaaS products built with Astro & Skeleton CSS

14 | Get started for free 15 |
16 |
17 |
18 |
19 | Hero illustrator 20 |
21 |
22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /src/components/HowToUse.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Showcase from '../assets/hiw.svg' 3 | const features = ['Find your tutor', 'Choose your subject', 'Start learning'] 4 | --- 5 | 6 | 7 |
8 |
9 |
10 |
11 | Showcase mockup 12 |
13 |
14 |

Spark growth and engagement

15 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

16 |
    17 | {features.map((el, index) => ( 18 |
  1. {index + 1} {el}
    2. 19 | ))} 20 |
21 |
22 | Register for free 23 |
24 | 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /src/demo/attribute.md: -------------------------------------------------------------------------------- 1 | IU images: https://www.figma.com/design/ErP8XlNA9yfou5Tu4T1OJw/Online-Learning-Landing-Page-(Community)?node-id=1-3&node-type=frame&t=KKGlCFGgEFwND4Do-0 2 | 3 | Skeleton CSS: http://getskeleton.com/ 4 | 5 | Logos: https://logoipsum.com/ 6 | 7 | 3D Vectors: https://www.figma.com/file/J1JH96aLA7BH5ZhnVOwqJn/Nikuu-3d-Illustration-Pack-by-Paperpillar-(Community)?type=design&node-id=0%3A1&mode=design&t=BeChE1usiIPzpjGN-1 8 | 9 | Fonts (Ubuntu, sans-serif): https://fonts.google.com/ -------------------------------------------------------------------------------- /src/demo/brew-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LaB-CH3/astrobrew/2650efb22d5ad2af193b581327d5337d42a143f6/src/demo/brew-thumbnail.png -------------------------------------------------------------------------------- /src/demo/landing-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LaB-CH3/astrobrew/2650efb22d5ad2af193b581327d5337d42a143f6/src/demo/landing-02.png -------------------------------------------------------------------------------- /src/demo/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LaB-CH3/astrobrew/2650efb22d5ad2af193b581327d5337d42a143f6/src/demo/landing.png -------------------------------------------------------------------------------- /src/demo/score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LaB-CH3/astrobrew/2650efb22d5ad2af193b581327d5337d42a143f6/src/demo/score.png -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string; 4 | } 5 | 6 | const { title } = Astro.props; 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {title} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 102 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../layouts/Layout.astro'; 3 | import Header from '../components/Header.astro'; 4 | import Hero from '../components/Hero.astro'; 5 | import Features from '../components/Features.astro'; 6 | import HowToUse from '../components/HowToUse.astro'; 7 | import FinalCta from '../components/FinalCta.astro' 8 | import Footer from '../components/Footer.astro' 9 | --- 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |