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.
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.
- 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.
To get started with AstroPie, follow these steps:
-
Clone AstroPie:
git clone https://github.com/wpinfusion/AstroPie.git
-
Install Dependencies:
npm install
-
Run Development Server:
npm run dev
-
Build for Production:
npm run build
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
- Home: index.astro
- About Us: about-us.astro
- Menu: menu.astro
- Gallery: gallery.astro
- Contact: contact.astro
- Book a Table: book.astro
- 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
A component for displaying articles.
<Article contain={true}>
<h1>Title</h1>
<p>Content goes here...</p>
</Article>A component for displaying badges.
<Badge color="green" title="New" />A component for displaying buttons.
<Button color="green" url="/contact">Contact Us</Button>A component for displaying a call-to-action button.
<ButtonCallUs />A component for displaying cards.
<Card>
<h2>Card Title</h2>
<p>Card content goes here...</p>
</Card>A component for displaying the footer.
<Footer />A component for displaying a booking form.
<FormBook />A component for displaying a contact form.
<FormContact />A component for displaying a grid layout.
<Grid>
<div slot="grid-content-1">Content 1</div>
<div slot="grid-content-2">Content 2</div>
<div slot="grid-content-3">Content 3</div>
</Grid>A component for displaying the header.
<Header />A component for displaying headings.
<Heading>
<h1 slot="heading-title">Title</h1>
<p slot="heading-content">Content goes here...</p>
</Heading>A component for displaying the hero section.
<Hero>
<div slot="hero-content-left">Left Content</div>
<div slot="hero-content-right">Right Content</div>
</Hero>A component for displaying a menu.
<Menu />A component for displaying a review slider.
<ReviewSlider />A component for displaying a section.
<Section>
<p>Section content goes here...</p>
</Section>A component for displaying a wide image.
<WideImage src={importedImage} alt="alt description" />If you have any questions or need help with AstroPie, feel free to reach out to me at [email protected], or open an issue on the AstroPie GitHub repository