├── .gitignore ├── .npmrc ├── .prettierignore ├── .vscode ├── extensions.json └── launch.json ├── LICENCE.md ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── prettier.config.cjs ├── public ├── cover.webp ├── darkfavicon.svg ├── favicon.svg ├── og.png └── product-screenshot.webp ├── src ├── components │ ├── AboutSection.astro │ ├── AppFooter.astro │ ├── AppHeader.astro │ ├── BaseHead.astro │ ├── BentoGrid.astro │ ├── Blog.astro │ ├── BrandIcon.astro │ ├── BrandLogo.astro │ ├── CallToAction.astro │ ├── Container.astro │ ├── Frame.astro │ ├── HeroSection.astro │ ├── SpeedSection.astro │ ├── Stats.astro │ └── Testimonials.astro ├── consts.ts ├── env.d.ts ├── layouts │ └── Layout.astro ├── lib │ └── utils.ts └── pages │ └── index.astro ├── tailwind.config.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | 5 | # dependencies 6 | node_modules/ 7 | 8 | # logs 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | pnpm-debug.log* 13 | 14 | 15 | # environment variables 16 | .env 17 | .env.production 18 | 19 | # macOS-specific files 20 | .DS_Store 21 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Expose Astro dependencies for `pnpm` users 2 | shamefully-hoist=true 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.mdx 2 | **/generated/ 3 | src/samples/ 4 | **/snippet.* 5 | /dist 6 | /node_modules 7 | /public -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENCE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Tailus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Atom 2 | 3 | Modern free Tailwind CSS, Astro landing page template for startups | built with Tailus Themer 4 | 5 | ![Tailus Atom cover](./public/cover.webp) 6 | 7 | ## 🚀 Project Structure 8 | 9 | Inside of your Astro project, you'll see the following folders and files: 10 | 11 | ``` 12 | / 13 | ├── public/ 14 | │ └── favicon.svg 15 | ├── src/ 16 | │ ├── components/ 17 | │ │ └── Card.astro 18 | │ ├── layouts/ 19 | │ │ └── Layout.astro 20 | │ └── pages/ 21 | │ └── index.astro 22 | └── package.json 23 | ``` 24 | 25 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 26 | 27 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. 28 | 29 | Any static assets, like images, can be placed in the `public/` directory. 30 | 31 | ## 🧞 Commands 32 | 33 | All commands are run from the root of the project, from a terminal: 34 | 35 | | Command | Action | 36 | | :--------------------- | :------------------------------------------------- | 37 | | `npm install` | Installs dependencies | 38 | | `npm run dev` | Starts local dev server at `localhost:3000` | 39 | | `npm run build` | Build your production site to `./dist/` | 40 | | `npm run preview` | Preview your build locally, before deploying | 41 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` | 42 | | `npm run astro --help` | Get help using the Astro CLI | 43 | 44 | ## 👀 Want to learn more? 45 | 46 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). 47 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | 3 | import tailwind from "@astrojs/tailwind"; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | integrations: [tailwind()], 8 | site: 'https://atom.tailus.io' 9 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom", 3 | "description": "Modern free Tailwind CSS, Astro landing page template for startups | built with Tailus Themer", 4 | "version": "0.0.2", 5 | "private": false, 6 | "type": "module", 7 | "scripts": { 8 | "dev": "astro dev", 9 | "start": "astro dev", 10 | "build": "astro build", 11 | "preview": "astro preview", 12 | "astro": "astro" 13 | }, 14 | "dependencies": { 15 | "@tailus/themer": "^0.0.5", 16 | "@tailus/themer-button": "^0.0.7", 17 | "@tailus/themer-card": "^0.0.1", 18 | "@tailus/themer-progress": "^0.0.1", 19 | "astro": "^4.5.12", 20 | "astro-font": "^0.0.72", 21 | "clsx": "^2.1.0", 22 | "tailwind-merge": "^2.2.2", 23 | "tailwindcss": "^3.4.3" 24 | }, 25 | "devDependencies": { 26 | "@astrojs/tailwind": "^5.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /prettier.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 1000, 3 | tabWidth: 4, 4 | 5 | plugins: [require("prettier-plugin-tailwindcss")], 6 | tailwindConfig: "./tailwind.config.cjs", 7 | }; 8 | -------------------------------------------------------------------------------- /public/cover.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tailus-UI/atom-astro/764b5c885054f68f173608ac483208a0de85f917/public/cover.webp -------------------------------------------------------------------------------- /public/darkfavicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tailus-UI/atom-astro/764b5c885054f68f173608ac483208a0de85f917/public/og.png -------------------------------------------------------------------------------- /public/product-screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tailus-UI/atom-astro/764b5c885054f68f173608ac483208a0de85f917/public/product-screenshot.webp -------------------------------------------------------------------------------- /src/components/AboutSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./Container.astro"; 3 | --- 4 | 5 |
6 | 7 |
8 |
9 | tailus product screenshot 10 |
11 |
12 |
13 |
14 |

A technology-first approach to payments and finance

15 |
16 |
17 |

Natus ad ipsum pariatur autem, fugit laborum in atque amet obcaecati? Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

18 |

Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

19 |
20 |
21 | 22 |
-------------------------------------------------------------------------------- /src/components/AppFooter.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BrandIcon from "./BrandIcon.astro"; 3 | import Container from "./Container.astro"; 4 | 5 | type Link = { 6 | title: string; 7 | url: string; 8 | }; 9 | 10 | const internalLinks = [ 11 | { title: "Home", url: "#" }, 12 | { title: "About", url: "#" }, 13 | { title: "Guide", url: "#" }, 14 | { title: "Blocks", url: "#" }, 15 | { title: "Contact", url: "#" }, 16 | { title: "Terms of Use", url: "#" }, 17 | ]; 18 | 19 | const externalLinks = [ 20 | { title: "Github", url: "#" }, 21 | { title: "Twitter", url: "#" }, 22 | { title: "YouTube", url: "#" }, 23 | { title: "Facebook", url: "#" }, 24 | { title: "Medium", url: "#" }, 25 | { title: "Pintrest", url: "#" }, 26 | { title: "Patreon", url: "#" }, 27 | { title: "Instagram", url: "#" }, 28 | ]; 29 | --- 30 | 31 | -------------------------------------------------------------------------------- /src/components/AppHeader.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BrandLogo from "./BrandLogo.astro"; 3 | import Container from "./Container.astro"; 4 | import { button, ghostButton, outlinedButton } from "@tailus/themer-button" 5 | import {cn} from "@lib/utils" 6 | import Frame from "./Frame.astro"; 7 | 8 | const links = [ 9 | { 10 | to: "/#home", 11 | label: "Product", 12 | }, 13 | { 14 | to: "/#features", 15 | label: "Features", 16 | }, 17 | { 18 | to: "/#solution", 19 | label: "Solution", 20 | }, 21 | { 22 | to: "/#reviews", 23 | label: "Reviews", 24 | }, 25 | ]; 26 | --- 27 |
28 | 75 |
-------------------------------------------------------------------------------- /src/components/BaseHead.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { 3 | SITE_TITLE, 4 | SITE_DESCRIPTION, 5 | SITE_IMAGE, 6 | } from "../consts" 7 | export interface Props { 8 | title?: string; 9 | description?: string; 10 | image?: string; 11 | url? : string; 12 | } 13 | 14 | const { title=SITE_TITLE, description=SITE_DESCRIPTION, image = SITE_IMAGE } = Astro.props; 15 | --- 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {title} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/components/BentoGrid.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { cn } from "@lib/utils"; 3 | import Container from "./Container.astro"; 4 | import {softGradientVariant as card} from "@tailus/themer-card" 5 | --- 6 | 7 |
8 | 9 |
10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |

Data Visualization

32 |

Quam quasi impedit voluptatum a reiciendis tempora atque aspernatur voluptatibus nostru.

33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |
63 |

Easy Integration

64 |

Quam quasi impedit voluptatum a reiciendis tempora atque aspernatur voluptatibus nostru.

65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
91 |
92 |
93 |

Real Time Insights

94 |

Quam quasi impedit voluptatum a reiciendis tempora atque aspernatur voluptatibus nostru.

95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |

Easy to customize

129 |

Quam quasi impedit voluptatum a reiciendis tempora atque aspernatur voluptatibus nostru.

130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 |

Loved by the Community

171 |

Supported by a network of early advocates, contributors, and champions.

172 |
173 |
174 |
175 |
176 | 177 |
-------------------------------------------------------------------------------- /src/components/Blog.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./Container.astro" 3 | 4 | --- 5 | 6 |
7 | 8 |
9 |

Latest Articles

10 |

11 | Quam hic dolore cumque voluptate rerum beatae et quae, tempore sunt, debitis dolorum officia 12 | aliquid explicabo? Excepturi, voluptate? 13 |

14 |
15 |
16 |
17 |
18 | art cover 20 |
21 |
22 |

23 | De fuga fugiat lorem ispum laboriosam expedita. 24 |

25 |

26 | Voluptates harum aliquam totam, doloribus eum impedit atque! Temporibus... 27 |

28 | 29 | Read more 30 | 31 |
32 | 33 |
34 |
35 |
36 | art cover 38 |
39 |
40 |

41 | De fuga fugiat lorem ispum laboriosam expedita. 42 |

43 |

44 | Voluptates harum aliquam totam, doloribus eum impedit atque! Temporibus... 45 |

46 | 47 | Read more 48 | 49 |
50 | 51 |
52 |
53 |
54 | art cover 56 |
57 |
58 |

59 | De fuga fugiat lorem ispum laboriosam expedita. 60 |

61 |

62 | Voluptates harum aliquam totam, doloribus eum impedit atque! Temporibus... 63 |

64 | 65 | Read more 66 | 67 |
68 | 69 |
70 |
71 | 72 |
-------------------------------------------------------------------------------- /src/components/BrandIcon.astro: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/BrandLogo.astro: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/CallToAction.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./Container.astro" 3 | import Frame from "./Frame.astro" 4 | import { cn } from "@lib/utils" 5 | import {button} from "@tailus/themer-button" 6 | --- 7 | 8 |
9 |
13 | 14 |
15 |
16 |

Get Started now

17 |

18 | Be part of millions people around the world using tailus in modern UIS. 19 |

20 |
21 | 22 | 23 | Start Building 24 | 25 | 26 |
27 |
28 |
29 | 30 |
-------------------------------------------------------------------------------- /src/components/Container.astro: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /src/components/Frame.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 13 |
-------------------------------------------------------------------------------- /src/components/HeroSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { cn } from "@lib/utils" 3 | import Container from "./Container.astro" 4 | import {button} from "@tailus/themer-button" 5 | import Frame from "./Frame.astro" 6 | --- 7 | 8 |
9 |
13 | 14 |
15 |
16 |

Turn your web visits into recuring incomes.

17 |

Odio incidunt nam itaque sed eius modi error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!

18 |
19 | 20 | 21 | Start Building 22 | 23 | 24 |
25 |
26 |
27 | 28 |

Project Insights

29 |

Some text here

30 |
31 |
32 | 33 |

Easy Integration

34 |

Some text here

35 |
36 |
37 | 38 |

The most loved

39 |

Some text here

40 |
41 |
42 |
43 |
44 | 45 |
-------------------------------------------------------------------------------- /src/components/SpeedSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { cn } from "@lib/utils"; 3 | import Container from "./Container.astro"; 4 | import {progress} from "@tailus/themer-progress" 5 | --- 6 | 7 |
8 | 9 |
10 |

Faster than any alternative

11 |

Harum quae dolore orrupti aut temporibus ariatur.

12 |
13 |
14 |
15 |
16 |

17 | Islands optimize your website 18 | like no other web framework can. 19 |

20 |
21 |
22 |
23 |
24 |
25 |
26 |
Astro 98%
27 |
28 |
29 |
30 |
31 |
32 |
Gatsby 68%
33 |
34 |
35 |
36 |
37 |
38 |
Next.js 63%
39 |
40 |
41 |
42 |
43 |
44 |
WordPress 58%
45 |
46 |
47 |
48 |
49 |
50 |
Nuxt 54%
51 |
52 |
53 |
54 |
55 |
56 |
57 |

Development is carried out by passionate developers

58 |
59 |
60 |

Natus ad ipsum pariatur autem, fugit laborum in atque amet obcaecati? Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

61 |

Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

62 |
63 |
64 | 65 |
-------------------------------------------------------------------------------- /src/components/Stats.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./Container.astro"; 3 | --- 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

Make work flow across teams while connecting back to company goals

22 |
23 |
24 |

Natus ad ipsum pariatur autem, fugit laborum in atque amet obcaecati? Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

25 |

Nisi minima aspernatur, quidem nulla cupiditate nam consequatur eligendi magni adipisci.

26 |
27 |
28 | 29 |
30 | -------------------------------------------------------------------------------- /src/components/Testimonials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "./Container.astro" 3 | import { softVariant as card } from "@tailus/themer-card"; 4 | import { cn } from "@lib/utils"; 5 | --- 6 | 7 |
8 | 9 |
10 |

Loved by the Community

11 |

Harum quae dolore orrupti aut temporibus ariatur.

12 |
13 |
14 |
15 |
16 |
17 | 18 | John Doe 19 | 20 |
21 |

Jonathan Yombo

22 | Software Ingeneer 23 |
24 |

25 | Tailus is really extraordinary and very practical, no need to break your head. A real gold mine. 26 |

27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 | 35 | John Doe 36 | 37 |
38 |

Yves Kalume

39 | GDE - Android 40 |
41 |

42 | With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus. 43 |

44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 | 52 | John Doe 53 | 54 |
55 |

Yucel Faruksahan

56 | Tailkits Creator 57 |
58 |

59 | Great work on tailfolio template. This is one of the best personal website that I have seen so far :) 60 |

61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 | 69 | John Doe 70 | 71 |
72 |

Anonymous author

73 | Doing something 74 |
75 |

76 | I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page. 77 |

78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 | 88 | John Doe 89 | 90 |
91 |

Shekinah Tshiokufila

92 | Senior Software Ingeneer 93 |
94 |

95 | Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder. 96 |

97 |
98 |
99 |
100 |
101 | 102 | 103 |
104 |
105 | 106 | John Doe 107 | 108 |
109 |

Oketa Fred

110 | Fullstack Developer 111 |
112 |

113 | I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze. 114 |

115 |
116 |
117 |
118 |
119 | 120 | 121 |
122 |
123 | 124 | John Doe 125 | 126 |
127 |

Zeki

128 | Founder of ChatExtend 129 |
130 |

131 | Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly. 132 |

133 |
134 |
135 |
136 |
137 | 138 |
139 |
140 | 141 | John Doe 142 | 143 |
144 |

Joseph Kitheka

145 | Fullstack Developer 146 |
147 |

148 | Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development! 149 |

150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 | 159 | John Doe 160 | 161 |
162 |

Khatab Wedaa

163 | MerakiUI Creator 164 |
165 |

166 | Tailus is an elegant, clean, and responsive tailwind css components it's very helpfull to start fast with your project. 167 |

168 |
169 |
170 |
171 |
172 |
173 |
174 | 175 | John Doe 176 | 177 |
178 |

Rodrigo Aguilar

179 | TailwindAwesome Creator 180 |
181 |

182 | I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time. 183 |

184 |
185 |
186 |
187 |
188 |
189 |
190 | 191 | John Doe 192 | 193 |
194 |

Eric Ampire

195 | Mobile Engineer at @BRPNews • @GoogleDevExpert for Android 196 |
197 |

198 | Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website. 199 |

200 |
201 |
202 |
203 |
204 |
205 |
206 | 207 | John Doe 208 | 209 |
210 |

Roland Tubonge

211 | Software Engineer 212 |
213 |

214 | Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced! 215 |

216 |
217 |
218 |
219 |
220 |
221 |
222 | 223 |
-------------------------------------------------------------------------------- /src/consts.ts: -------------------------------------------------------------------------------- 1 | export const SITE_TITLE = 'Atom - A Tailus template'; 2 | export const SITE_DESCRIPTION = 'Modern free Tailwind CSS, Astro landing page template for startups | built with Tailus Themer'; 3 | export const SITE_URL = 'https://atom.tailus.io'; 4 | export const SITE_IMAGE = '/og.png'; -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BaseHead from "@components/BaseHead.astro"; 3 | import AppFooter from "../components/AppFooter.astro"; 4 | import AppHeader from "../components/AppHeader.astro"; 5 | --- 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | /** 5 | * Tailwind CSS classnames merge. 6 | * The function resolves conflicting Tailwind CSS classnames and merges them into one 7 | * @param { string | string[] } inputs - Tailwind CSS classnames 8 | * @returns { string } - Merged Tailwind CSS classnames 9 | * @example cn("text-red-500", "text-center", "text-cyan-500") // => "text-center text-cyan-500" 10 | */ 11 | export function cn(...inputs: ClassValue[]) { 12 | return twMerge(clsx(inputs)); 13 | } -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Stats from '../components/Stats.astro'; 3 | import HeroSection from '../components/HeroSection.astro'; 4 | import Layout from '../layouts/Layout.astro'; 5 | import Testimonials from '../components/Testimonials.astro'; 6 | import CallToAction from '../components/CallToAction.astro'; 7 | import BentoGrid from '@components/BentoGrid.astro'; 8 | import SpeedSection from '@components/SpeedSection.astro'; 9 | import AboutSection from '@components/AboutSection.astro'; 10 | --- 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | import themer from "@tailus/themer"; 3 | 4 | module.exports = { 5 | content: [ 6 | './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', 7 | "./node_modules/@tailus/themer-**/dist/**/*.{js,ts}" 8 | ], 9 | plugins: [ 10 | themer({ 11 | palette: { 12 | extend: "oz", 13 | }, 14 | radius: "smoothest", 15 | background: "light", 16 | border: "light", 17 | padding: "large" 18 | }) 19 | ], 20 | }; 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | /* Paths */ 5 | "baseUrl": "./src", 6 | "paths": { 7 | "@components/*": ["components/*"], 8 | "@layouts/*": ["layouts/*"], 9 | "@lib/*": ["lib/*"] 10 | } 11 | }, 12 | } 13 | --------------------------------------------------------------------------------