AstroPie
AstroPie is a free theme for the Astro framework, designed to provide a beautiful and functional starting point for your next restaurant or bistro website. Whether you're running an Italian restaurant, a cozy bistro, or any other type of dining establishment, AstroPie has you covered with its clean design and easy-to-use components.
🌟 About AstroPie
AstroPie is perfect for restaurant owners, developers, and designers who want to quickly set up a stylish and responsive website. It leverages modern web technologies to ensure a smooth and performant user experience.
🛠️ Technologies Used
- Astro: The core framework for building fast, content-focused websites.
- TailwindCSS: A utility-first CSS framework for rapid UI development.
- Alpine.js: A lightweight JavaScript framework for adding interactivity.
- Swiper: A modern slider library for creating responsive sliders.
- GLightbox: A pure JavaScript lightbox for displaying images and videos.
🚀 Installation and Deployment
To get started with AstroPie, follow these steps:
-
Clone AstroPie:
git clone https://github.com/wpinfusion/AstroPie.git
2. **Install Dependencies**:
```shell
npm install
-
Run Development Server:
npm run dev
4. **Build for Production**:
```shell
npm run build
📂 Project Structure
Inside of your AstroPie project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/
│ ├── components/
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ ├── index.astro
│ │ ├── about-us.astro
│ │ ├── menu.astro
│ │ ├── gallery.astro
│ │ ├── contact.astro
│ │ └── book.astro
│ └── styles/
└── package.json📄 Premade Pages
- Home: index.astro
- About Us: about-us.astro
- Menu: menu.astro
- Gallery: gallery.astro
- Contact: contact.astro
- Book a Table: book.astro
🧩 Available Components
- Article: Article.astro
- Badge: Badge.astro
- Button: Button.astro
- ButtonCallUs: ButtonCallUs.astro
- Card: Card.astro
- Footer: Footer.astro
- FormBook: FormBook.astro
- FormContact: FormContact.astro
- Grid: Grid.astro
- Header: Header.astro
- Heading: Heading.astro
- Hero: Hero.astro
- Menu: Menu.astro
- ReviewSlider: ReviewSlider.astro
- Section: Section.astro
- WideImage: WideImage.astro
📚 Component Documentation
Article
A component for displaying articles.
<Article contain={true}>
<h1>Title</h1>
<p>Content goes here...</p>
</Article>Badge
A component for displaying badges.
<Badge color="green" title="New" />Button
A component for displaying buttons.
<Button color="green" url="/contact">Contact Us</Button>ButtonCallUs
A component for displaying a call-to-action button.
<ButtonCallUs />
