LogoA Template
icon of AstroPie

AstroPie

AstroPie is a free restaurant theme for Astro sites, offering a clean design and easy-to-use components for a stylish website.

Introduction

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:

  1. Clone AstroPie:

     

git clone https://github.com/wpinfusion/AstroPie.git


2.  **Install Dependencies**:

```shell
npm install
  1. 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 />
A template
Copy badages awards

Newsletter For Templates

Join the Community For Templates

Subscribe to Templates newsletter for the latest news and updates