├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── assets │ ├── about.webp │ ├── hero.webp │ ├── logo-inverted.svg │ ├── logo.svg │ ├── team-1.webp │ ├── team-2.webp │ ├── team-3.webp │ ├── testimonial-1.webp │ ├── testimonial-2.webp │ └── testimonial-3.webp ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico └── site.webmanifest ├── src ├── components │ ├── about │ │ ├── Heading.astro │ │ ├── Mission.astro │ │ ├── Team.astro │ │ └── Values.astro │ ├── contact │ │ ├── ContactForm.astro │ │ └── ContactInfo.astro │ ├── home │ │ ├── About.astro │ │ ├── Cta.astro │ │ ├── Expertise.astro │ │ ├── Hero.astro │ │ ├── Services.astro │ │ └── Testimonials.astro │ ├── layout │ │ ├── Footer.astro │ │ └── Header.astro │ └── pricing │ │ ├── Cta.astro │ │ ├── Faq.astro │ │ ├── Heading.astro │ │ └── PricingTable.astro ├── env.d.ts ├── layouts │ └── Layout.astro └── pages │ ├── 404.astro │ ├── about.astro │ ├── contact.astro │ ├── index.astro │ ├── pricing.astro │ ├── privacy.astro │ └── styleguide.astro ├── tailwind.config.cjs └── 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 | 23 | # vscode folder 24 | .vscode 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5", 5 | "semi": true, 6 | "printWidth": 100, 7 | "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"] 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 m6v3l9 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stone: Astro Theme 2 | 3 | Stone is a free and open-source Astro theme specially designed for Business, Marketing, SaaS and Startup websites. 4 | 5 | ## Key Features: 6 | 7 | - **Built with Tailwind CSS & Alpine.js** 8 | - **5+ Pages** 9 | - **15+ Sections** 10 | - Clean & Modern Design 11 | - Fully Responsive 12 | - Dark & Light Mode 13 | - Fast & Performant 14 | - Super Lightweight 15 | - View Transitions (experimental) 16 | - **Prettier** Code Formatter 17 | - **Google Fonts** 18 | - **Remix Icons** 19 | - Free Updates 20 | 21 | ## Getting Started 22 | 23 | ### Requirements 24 | 25 | - Basic knowledge of Astro, HTML and CSS. 26 | - Text editor (We recommend Visual Studio Code) 27 | - Node.js 18 or higher. 28 | 29 | ### Install dependencies 30 | 31 | Navigate to your project folder and install its dependencies: 32 | 33 | ``` 34 | npm install 35 | ``` 36 | 37 | ### Start 38 | 39 | Once the installation is done, you can now run your app: 40 | 41 | ``` 42 | npm run dev 43 | ``` 44 | 45 | This runs the app in development mode. Open http://localhost:3000 to view it in the browser. 46 | 47 | ### Build 48 | 49 | ``` 50 | npm run build 51 | ``` 52 | 53 | This builds the app for production to the `./dist/` folder. 54 | 55 | ## Project Structure 56 | 57 | Inside the project, you'll see the following folders and files: 58 | 59 | ``` 60 | / 61 | ├── public/ 62 | ├── src/ 63 | │ ├── components/ 64 | │ ├── layouts/ 65 | │ └── pages/ 66 | ├── .prettierrc 67 | ├── astro.config.mjs 68 | ├── package-lock.json 69 | ├── package.json 70 | ├── README.md 71 | ├── tailwind.config.cjs 72 | └── tsconfig.json 73 | ``` 74 | 75 | - `public/*` - Any static assets (images, fonts, icons, ...) 76 | - `src/*` - Project source code (components, pages, ...) 77 | - `src/components/*` - Reusable Astro components used to build pages. 78 | - `src/layouts/*` - Astro components that define the UI structure shared by one or more pages.. 79 | - `src/pages/*` - Astro components used to create new pages on your site. Each page is exposed as a route based on its file name. 80 | - `.prettierrc` - Prettier configuration file. 81 | - `astro.config.mjs` - Astro configuration file. 82 | - `package.json` - File used by JavaScript package managers to manage your dependencies. It also defines the scripts that are commonly used to run Astro. 83 | - `tailwind.config.cjs` - Tailwind configuration file. The theme section is where you define your color palette and fonts. 84 | - `tsconfig.json` - TypeScript configuration file. 85 | 86 | ## Deployment 87 | 88 | Ready to build and deploy your site? Follow the [official documentation](https://docs.astro.build/en/guides/deploy/). 89 | 90 | ## Support 91 | 92 | If you have any questions or suggestions do not hesitate to contact me. 93 | 94 | ## License 95 | 96 | This project is licensed under the terms of the MIT license. 97 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import tailwind from '@astrojs/tailwind'; 3 | import compress from 'astro-compress'; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | experimental: { 8 | viewTransitions: true, 9 | }, 10 | integrations: [tailwind(), compress()], 11 | }); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-theme-stone", 3 | "type": "module", 4 | "version": "1.0.0", 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 | "@alpinejs/collapse": "3.12.3", 14 | "@astrojs/tailwind": "4.0.0", 15 | "@fontsource/inter": "5.0.8", 16 | "@types/alpinejs": "3.7.2", 17 | "alpinejs": "3.12.3", 18 | "astro": "2.10.13", 19 | "astro-compress": "2.0.14", 20 | "prettier": "3.0.2", 21 | "prettier-plugin-astro": "0.12.0", 22 | "prettier-plugin-tailwindcss": "0.5.3", 23 | "tailwindcss": "3.3.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/assets/about.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/about.webp -------------------------------------------------------------------------------- /public/assets/hero.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/hero.webp -------------------------------------------------------------------------------- /public/assets/logo-inverted.svg: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/assets/team-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/team-1.webp -------------------------------------------------------------------------------- /public/assets/team-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/team-2.webp -------------------------------------------------------------------------------- /public/assets/team-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/team-3.webp -------------------------------------------------------------------------------- /public/assets/testimonial-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/testimonial-1.webp -------------------------------------------------------------------------------- /public/assets/testimonial-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/testimonial-2.webp -------------------------------------------------------------------------------- /public/assets/testimonial-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/assets/testimonial-3.webp -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m6v3l9/astro-theme-stone/0fafbf273e2e021f9227c6ba86c1b68d5b1c3935/public/favicon.ico -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#FFFFFF", 17 | "background_color": "#FFFFFF", 18 | "display": "standalone" 19 | } -------------------------------------------------------------------------------- /src/components/about/Heading.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

About

5 |

6 | We build products for developers and designers. 7 |

8 |
9 |
10 |
11 | -------------------------------------------------------------------------------- /src/components/about/Mission.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const stats = [ 3 | { 4 | name: 'Years', 5 | value: '9', 6 | }, 7 | { 8 | name: 'Experts', 9 | value: '15', 10 | }, 11 | { 12 | name: 'Projects', 13 | value: '122', 14 | }, 15 | { 16 | name: 'Awards', 17 | value: "'9'", 18 | }, 19 | ]; 20 | --- 21 | 22 |
23 |
24 |
25 | Our experts working together 32 |
33 | 34 |
35 |

Our mission

36 |
37 |

38 | Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed 39 | consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. 40 | Cursus faucibus nunc nisl netus morbi vel porttitor vitae ut. Amet vitae fames 41 | senectus vitae. 42 |

43 |

44 | Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem 45 | nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet 46 | quam urna. Sollicitudin tristique eros erat odio sed vitae, consequat turpis 47 | elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat 48 | donec laoreet quam urna. 49 |

50 |

51 | Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. 52 | Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum 53 | consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim 54 | fermentum lacus in. Viverra. 55 |

56 |
57 |
58 | 59 | 60 |
61 | { 62 | stats.map((stat) => ( 63 |
64 |
{stat.name}
65 |
{stat.value}
66 |
67 | )) 68 | } 69 |
70 |
71 |
72 |
73 |
74 | -------------------------------------------------------------------------------- /src/components/about/Team.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const team = [ 3 | { 4 | name: 'Floyd Lowe', 5 | image: '/assets/team-1.webp', 6 | job: 'Senior Designer', 7 | }, 8 | { 9 | name: 'Emma Dorsey', 10 | image: '/assets/team-2.webp', 11 | job: 'Principal Designer', 12 | }, 13 | { 14 | name: 'Emily Mitchell', 15 | image: '/assets/team-3.webp', 16 | job: 'Senior Developer', 17 | }, 18 | ]; 19 | --- 20 | 21 |
22 |
23 |
24 |

Meet our team

25 |
    26 | { 27 | team.map((item) => ( 28 |
  • 29 |
    30 | {item.name} 31 |
    32 |

    {item.name}

    33 |

    {item.job}

    34 |
    35 |
    36 |
    • 37 | )) 38 | } 39 |
40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /src/components/about/Values.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const values = [ 3 | [ 4 | { 5 | ref: '01', 6 | name: 'Excellence', 7 | description: 8 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 9 | }, 10 | { 11 | ref: '02', 12 | name: 'Innovation', 13 | description: 14 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 15 | }, 16 | ], 17 | [ 18 | { 19 | ref: '03', 20 | name: 'Teamwork', 21 | description: 22 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 23 | }, 24 | { 25 | ref: '04', 26 | name: 'Respect', 27 | description: 28 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 29 | }, 30 | ], 31 | ]; 32 | --- 33 | 34 |
35 |
36 |
37 |

Our Values

38 |
39 | { 40 | values.map((column, index) => ( 41 |
42 | {column.map((value) => ( 43 |
44 |

{value.ref}

45 |
46 |

{value.name}

47 |

48 | {value.description} 49 |

50 |
51 |
52 | ))} 53 |
54 | )) 55 | } 56 |
57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /src/components/contact/ContactForm.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Let's work together

6 |

7 | We'd love to learn more about you and what we can build together. 8 |

9 |
10 |
11 | 12 |
13 | 14 | 22 |
23 | 24 | 25 |
26 | 27 | 35 |
36 | 37 | 38 |
39 | 40 | 46 |
47 | 48 |
49 | 55 |
56 |
57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /src/components/contact/ContactInfo.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
Postal address
7 |
8 | 19 |
20 |

742 Evergreen Terrace

21 |

Springfield, OR 12345

22 |
23 |
24 |
25 | 26 | 27 |
28 |
Phone number
29 |
30 | 41 |

+1 (555) 123-4567

42 |
43 |
44 | 45 | 46 |
47 |
Email
48 |
49 | 60 |

support@example.com

61 |
62 |
63 |
64 |
65 |
66 | -------------------------------------------------------------------------------- /src/components/home/About.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

About

5 |
6 |

7 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis 8 | suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet 9 | consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor 10 | cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. 11 | Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. 12 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis 13 | suscipit eaque, iste dolor cupiditate. 14 |

15 | 19 | Read about us 20 | 21 |
22 |
23 |
24 |
25 | -------------------------------------------------------------------------------- /src/components/home/Cta.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
6 |
7 |

8 | Let's make something amazing together 9 |

10 |

11 | Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing 12 | sagittis vel nulla nec. 13 |

14 |
15 | 19 | Contact us 20 | 21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /src/components/home/Expertise.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const features = [ 3 | { 4 | id: 'expertise-1', 5 | name: 'Digital Experience Platforms', 6 | description: 7 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 8 | }, 9 | { 10 | id: 'expertise-2', 11 | name: 'Web & Mobile Development', 12 | description: 13 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 14 | }, 15 | { 16 | id: 'expertise-3', 17 | name: 'Serverless Computing Platforms', 18 | description: 19 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 20 | }, 21 | { 22 | id: 'expertise-4', 23 | name: 'Build & Test Automation Tools', 24 | description: 25 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 26 | }, 27 | { 28 | id: 'expertise-5', 29 | name: 'Artificial Intelligence', 30 | description: 31 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 32 | }, 33 | { 34 | id: 'expertise-6', 35 | name: 'Full project support', 36 | description: 37 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 38 | }, 39 | ]; 40 | --- 41 | 42 |
43 |
44 |
45 |

Expertise

46 |
47 |
51 | { 52 | features.map((feature, index) => ( 53 |
58 |
63 | 87 |
88 |
89 |

90 | {feature.description} 91 |

92 |
93 |
94 | )) 95 | } 96 |
97 |
98 |
99 |
100 |
101 | -------------------------------------------------------------------------------- /src/components/home/Hero.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

7 | We design and build your next digital experience 8 |

9 |

10 | Anim aute id magna aliqua ad ad non deserunt sunt. 11 |

12 |
13 | 17 | Get started 18 | 19 |
20 | Hero picture 27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /src/components/home/Services.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const services = [ 3 | { 4 | step: '01', 5 | name: 'Design', 6 | description: 7 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 8 | }, 9 | { 10 | step: '02', 11 | name: 'Develop', 12 | description: 13 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 14 | }, 15 | { 16 | step: '03', 17 | name: 'Maintain', 18 | description: 19 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.', 20 | }, 21 | ]; 22 | --- 23 | 24 |
25 |
26 |
27 |

Services

28 |
29 | { 30 | services.map((service) => ( 31 |
32 |

{service.step}

33 |
34 |

{service.name}

35 |

36 | {service.description} 37 |

38 |
39 |
40 | )) 41 | } 42 |
43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /src/components/home/Testimonials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const testimonials = [ 3 | { 4 | name: 'Rebecca Hayes', 5 | description: 'Designer', 6 | image: '/assets/testimonial-1.webp', 7 | message: 8 | '“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”', 9 | }, 10 | { 11 | name: 'Rosa Spencer', 12 | description: 'Team Leader', 13 | image: '/assets/testimonial-2.webp', 14 | message: 15 | '“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”', 16 | }, 17 | { 18 | name: 'Christina Upton', 19 | description: 'Manager', 20 | image: '/assets/testimonial-3.webp', 21 | message: 22 | '“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”', 23 | }, 24 | ]; 25 | --- 26 | 27 |
28 |
29 |
30 |

31 | Trusted by the largest companies in the world 32 |

33 |
36 | { 37 | testimonials.map((testimonial) => ( 38 |
39 |
40 | {[...Array(3)].map(() => ( 41 | 50 | ))} 51 |
52 |
53 |

{testimonial.message}

54 |
55 |
56 | 57 |
58 |
{testimonial.name}
59 |
60 | {testimonial.description} 61 |
62 |
63 |
64 |
65 | )) 66 | } 67 |
68 |
69 |
70 |
71 | -------------------------------------------------------------------------------- /src/components/layout/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const bottomLinks = [ 3 | { 4 | header: 'Social', 5 | links: [ 6 | { 7 | name: 'Github', 8 | href: 'https://github.com/', 9 | isExternal: true, 10 | }, 11 | { 12 | name: 'Twitter', 13 | href: 'https://twitter.com/', 14 | isExternal: true, 15 | }, 16 | { 17 | name: 'Instagram', 18 | href: 'https://instagram.com/', 19 | isExternal: true, 20 | }, 21 | { 22 | name: 'Facebook', 23 | href: 'https://facebook.com/', 24 | isExternal: true, 25 | }, 26 | ], 27 | }, 28 | { 29 | header: 'Company', 30 | links: [ 31 | { 32 | name: 'Home', 33 | href: '/', 34 | isExternal: false, 35 | }, 36 | { 37 | name: 'About', 38 | href: '/about', 39 | isExternal: false, 40 | }, 41 | { 42 | name: 'Pricing', 43 | href: '/pricing', 44 | isExternal: false, 45 | }, 46 | { 47 | name: 'Contact', 48 | href: '/contact', 49 | isExternal: false, 50 | }, 51 | ], 52 | }, 53 | { 54 | header: 'Legal', 55 | links: [ 56 | { 57 | name: 'Privacy', 58 | href: '/privacy', 59 | isExternal: false, 60 | }, 61 | { 62 | name: '404', 63 | href: '/404', 64 | isExternal: false, 65 | }, 66 | { 67 | name: 'Styleguide', 68 | href: '/styleguide', 69 | isExternal: false, 70 | }, 71 | ], 72 | }, 73 | ]; 74 | --- 75 | 76 | 136 | -------------------------------------------------------------------------------- /src/components/layout/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const links = [ 3 | { 4 | ref: '01', 5 | name: 'Home', 6 | href: '/', 7 | }, 8 | { 9 | ref: '02', 10 | name: 'About', 11 | href: '/about', 12 | }, 13 | { 14 | ref: '03', 15 | name: 'Pricing', 16 | href: '/pricing', 17 | }, 18 | { 19 | ref: '04', 20 | name: 'Contact', 21 | href: '/contact', 22 | }, 23 | ]; 24 | --- 25 | 26 |
31 |
34 | 35 |
36 | 40 | Stone 41 | Stone 48 | 49 |
50 | 51 | 52 |
53 | 54 | 88 | 89 | 90 | 125 |
126 |
127 | 128 | 129 |
137 |
138 | 148 | 149 | 150 | 176 |
177 |
178 |
179 | -------------------------------------------------------------------------------- /src/components/pricing/Cta.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
6 |
7 |

Still have questions?

8 |

9 | Please describe your case to receive the most accurate advice. 10 |

11 |
12 | 16 | Contact Us 17 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /src/components/pricing/Faq.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const questions = [ 3 | { 4 | id: 'faq-1', 5 | title: 'How do I know which pricing plan is right for me?', 6 | answer: 7 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 8 | }, 9 | { 10 | id: 'faq-2', 11 | title: 'How can I upgrade, downgrade, or cancel my plan?', 12 | answer: 13 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 14 | }, 15 | { 16 | id: 'faq-3', 17 | title: "What does 'lifetime access' mean exactly?", 18 | answer: 19 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 20 | }, 21 | { 22 | id: 'faq-4', 23 | title: "What does 'free updates' mean exactly?", 24 | answer: 25 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 26 | }, 27 | { 28 | id: 'faq-5', 29 | title: 'Do you offer a free trial?', 30 | answer: 31 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 32 | }, 33 | { 34 | id: 'faq-6', 35 | title: 'How can I request support?', 36 | answer: 37 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.', 38 | }, 39 | ]; 40 | --- 41 | 42 |
43 |
44 |
45 |
46 |

Frequently asked questions

47 |
48 |
49 |
53 | { 54 | questions.map((question, index) => ( 55 |
60 |
65 | 89 |
90 |
91 |

92 | {question.answer} 93 |

94 |
95 |
96 | )) 97 | } 98 |
99 |
100 |
101 |
102 |
103 | -------------------------------------------------------------------------------- /src/components/pricing/Heading.astro: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Pricing

5 |

6 | Choose the plan that best suits your needs. 7 |

8 |
9 |
10 |
11 | -------------------------------------------------------------------------------- /src/components/pricing/PricingTable.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const pricing = [ 3 | { 4 | name: 'Basic', 5 | description: 'For development, staging, and small production projects.', 6 | periodicity: '/month', 7 | price: '$10', 8 | action: 'Buy Now', 9 | features: ['5 Seats', '1,000 Projects', 'Lifetime access', 'Community Support'], 10 | }, 11 | { 12 | name: 'Pro', 13 | description: 'For high-scale and mission critical projects.', 14 | isFlagged: true, 15 | periodicity: '/month', 16 | price: '$25', 17 | action: 'Buy Now', 18 | features: ['10 Seats', '10,000 Projects', 'Lifetime access', 'Email Support', 'Free updates'], 19 | }, 20 | { 21 | name: 'Team', 22 | description: 'For teams with more security, support, and performance needs.', 23 | periodicity: '', 24 | price: 'Custom', 25 | action: 'Buy Now', 26 | features: [ 27 | 'Unlimited Seats', 28 | 'Unlimited Projects', 29 | 'Lifetime access', 30 | 'Email and Chat Support', 31 | 'High-Performance', 32 | 'Free updates', 33 | ], 34 | }, 35 | ]; 36 | --- 37 | 38 |
39 |
40 |
41 | { 42 | pricing.map((item) => ( 43 |
49 |
50 |

{item.name}

51 |

52 | {item.price} 53 | 54 | {item.periodicity} 55 | 56 |

57 |

{item.description}

58 | 59 |
    60 | {item.features.map((feature) => ( 61 |
  • 62 | 71 | {feature} 72 |
    • 73 | ))} 74 |
75 |
76 | 80 | Buy now 81 | 82 |
83 | )) 84 | } 85 |
86 |
87 |
88 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import '@fontsource/inter/latin-400.css'; 3 | import '@fontsource/inter/latin-500.css'; 4 | import { ViewTransitions } from 'astro:transitions'; 5 | import Footer from '../components/layout/Footer.astro'; 6 | import Header from '../components/layout/Header.astro'; 7 | 8 | interface Props { 9 | description: string; 10 | title: string; 11 | } 12 | 13 | const { description, title } = Astro.props; 14 | --- 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {title} 28 | 29 | 30 | 33 |
34 |
35 | 36 |
37 |