astro-digital-agency-showcase Svelte Themes

Astro Digital Agency Showcase

šŸŒŒ Interactive Digital Agency Showcase built with Astro, React, Vue, Svelte, and Nano Stores.

#agency-theme#astro#astrojs#nanostores#netlify#netlify-deployment#react#reactjs#svelte#sveltejs
Demo Download

šŸŒŒ Astro Digital Agency Showcase

Interactive Multi-Framework Digital Agency Showcase.


An exploratory platform merging React, Vue, and Svelte within a single static Astro shell, orchestrating complex state sharing via Nano Stores. Enjoy zero-JS base loading, smooth custom Svelte cursors, Vue-driven multi-step forms, and dynamic React galleries all working in concert.

āœØ Highlights

  • Nano Stores Interop: Seamless cross-framework state sharing between React, Vue, and Svelte.
  • Svelte Engine: Drives high-performance micro-interactions like the custom cursor and hero animations.
  • Vue Engine: Handles the complex, reactive multi-step lead generation form.
  • React Engine: Manages the heavy lifting of the interactive portfolio gallery.
  • Astro Islands: Zero JavaScript by default; hydrated exactly when and where needed.

šŸ§­ Pages

  • / - Main landing page (Hero, Gallery, Quiz)
  • /robots.txt - Crawler rules generated dynamically
  • /sitemap-index.xml - Auto-generated sitemap

šŸ› ļø Tech Stack

Layer Technology
Framework Astro 6
Islands React, Vue, Svelte
State Nano Stores
Language TypeScript
Styling Tailwind CSS 4
SEO @astrojs/sitemap, canonical metadata, robots.txt
Hosting Static deployment ready (Netlify optimized)

šŸš€ Local Development

šŸ“¦ Install

npm install

ā–¶ļø Run dev server

npm run dev

šŸ—ļø Build

npm run build

šŸ“ Project Structure

astro-digital-agency-showcase/
ā”œā”€ā”€ public/
ā”‚   ā”œā”€ā”€ favicon.svg
ā”‚   ā””ā”€ā”€ og.svg
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/
ā”‚   ā”‚   ā”œā”€ā”€ react/
ā”‚   ā”‚   ā”‚   ā””ā”€ā”€ PortfolioGallery.tsx
ā”‚   ā”‚   ā”œā”€ā”€ svelte/
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ CustomCursor.svelte
ā”‚   ā”‚   ā”‚   ā””ā”€ā”€ HeroSection.svelte
ā”‚   ā”‚   ā””ā”€ā”€ vue/
ā”‚   ā”‚       ā””ā”€ā”€ LeadQuiz.vue
ā”‚   ā”œā”€ā”€ layouts/
ā”‚   ā”‚   ā””ā”€ā”€ Layout.astro
ā”‚   ā”œā”€ā”€ pages/
ā”‚   ā”‚   ā”œā”€ā”€ index.astro
ā”‚   ā”‚   ā””ā”€ā”€ robots.txt.ts
ā”‚   ā”œā”€ā”€ store/
ā”‚   ā”‚   ā””ā”€ā”€ index.ts
ā”‚   ā””ā”€ā”€ styles/
ā”‚       ā””ā”€ā”€ global.css
ā”œā”€ā”€ .gitignore
ā”œā”€ā”€ astro.config.mjs
ā”œā”€ā”€ LICENSE
ā”œā”€ā”€ netlify.toml
ā”œā”€ā”€ package-lock.json
ā”œā”€ā”€ package.json
ā”œā”€ā”€ README.md
ā””ā”€ā”€ tsconfig.json

šŸŒ Deployment

  1. Push your code to GitHub
  2. Connect repository to Netlify
  3. Build settings are auto-configured via netlify.toml
  4. Deploy

šŸ“„ License

MIT License. See LICENSE.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes