A modern, responsive website template for green energy companies built with Astro and TailwindCSS. This template provides a complete solution for renewable energy businesses to showcase their services, innovations, and environmental impact.
- 🎨 Modern Design: Clean, professional design optimized for green energy companies
- 📱 Fully Responsive: Mobile-first approach ensuring perfect display on all devices
- ⚡ Lightning Fast: Built with Astro for optimal performance and SEO
- 🎯 Conversion Focused: Strategic call-to-action placements throughout the site
- ♿ Accessible: Following web accessibility best practices
- 🌙 Theme Support: Built-in theme switching capabilities
- 📧 Contact Forms: Ready-to-use contact and newsletter signup forms
- 🔧 Easy Customization: Well-structured components for easy modification
- Hero Section: Eye-catching landing area with compelling headline
- Key Services: Overview of main green energy services
- Latest Innovations: Showcase of cutting-edge technology and solutions
- Customer Testimonials: Social proof from satisfied clients
- Environmental Impact: Data-driven impact visualization
- Featured Projects: Case studies and success stories
- Get Involved: Call-to-action section for user engagement
- Astro - Static site generator
- TailwindCSS - Utility-first CSS framework
- TypeScript - Type safety and better development experience
You can get started with this template in two ways:
For the best development experience, especially on Windows, clone directly into a dev container:
- Open VS Code
- Use Command Palette (
Ctrl+Shift+P/Cmd+Shift+P) - Run: "Dev Containers: Clone Repository in Container Volume..."
- Enter repository URL:
https://github.com/vbartalis/energy-template.git - Wait for container setup (automatic dependency installation)
- Start development
npm run dev
This approach ensures:
- ✅ Optimal file system performance
- ✅ Fast live reloading on all platforms
- ✅ Pre-configured development environment
- ✅ No local Node.js installation required
- Node.js 20.11.0 or higher
- npm or yarn package manager
💡 Tip: This project uses Volta for Node.js version management. If you have Volta installed, it will automatically use the correct Node.js version (20.11.0) when you enter the project directory.
-
Clone the repository
git clone https://github.com/vbartalis/energy-template.git cd energy-template -
Install dependencies
npm install
Note: If using Volta, the correct Node.js version will be automatically selected.
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:4321to see your site
npm run buildnpm run preview/
├── public/
│ └── style/
│ └── custom.css
├── src/
│ ├── components/
│ │ ├── blocks/
│ │ ├── sections/
│ │ │ ├── cta/
│ │ │ ├── environment/
│ │ │ ├── featured/
│ │ │ ├── hero/
│ │ │ ├── innovations/
│ │ │ ├── services/
│ │ │ └── testimonials/
│ │ └── shared/
│ ├── layouts/
│ │ ├── Footer.astro
│ │ ├── Layout.astro
│ │ └── Navbar.astro
│ └── pages/
│ └── index.astro
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json
Modify the TailwindCSS configuration in tailwind.config.mjs to match your brand colors.
Update the data files in each section folder (src/components/sections/*/data.ts) to customize:
- Service offerings
- Company information
- Testimonials
- Project showcases
Replace images in the assets folders within each section to match your brand and projects.
| Command | Description |
|---|---|
npm run dev |
Start development server with host binding |
npm run start |
Start development server |
npm run build |
Build for production with type checking |
npm run preview |
Preview production build |
npm run astro |
Run Astro CLI commands |
Contributions are welcome! Feel free to:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to the Astro team for creating an amazing static site generator
- TailwindCSS for the utility-first CSS framework
- The open-source community for inspiration and best practices
Vilmos Bartalis - @vbartalis
Project Link: https://github.com/vbartalis/energy-template
npm create astro@latest -- --template blog🧑🚀 Seasoned astronaut? Delete this file. Have fun!
Features:
- ✅ Minimal styling (make it your own!)
- ✅ 100/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
Inside of your Astro project, you'll see the following folders and files:
├── public/
├── src/
│ ├── components/
│ ├── content/
│ ├── layouts/
│ └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.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.
The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.
Any static assets, like images, can be placed in the public/ directory.
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:4321 |
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 check |
npm run astro -- --help |
Get help using the Astro CLI |
Check out our documentation or jump into our Discord server.
This theme is based off of the lovely Bear Blog.