AstroPie

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

3. 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 />