Bento is a creative-studio Astro 7 theme designed for design agencies, branding studios, and multidisciplinary creative teams. It combines a warm, doodle-accented visual language, MDX-powered content collections for services, projects, and blog posts, and a full set of interactive Alpine.js components — perfect for winning new clients while giving your team a site that's genuinely easy to keep updated.
Bento isn't just a landing page — it's a complete content system 🎨. Services, case studies, and blog articles are all driven by simple MDX files, so adding a new project or publishing a new article is as easy as dropping in a new file with front matter. Pagination, category filtering, featured items, and related-content sections are all wired up and update automatically as your content grows.
Perfect for: 🎨 Design Agencies | 🏢 Branding Studios | 🖌️ Creative Freelancers | 🚀 Digital Product Studios | 📣 Marketing & Content Teams |
✨ Key Features:
- 🖍️ Doodle-Accented Design System – Hand-drawn underlines, quote marks, and badges layered over a clean grid for a warm, human feel
- 📂 MDX-Driven Content Collections – Services, projects, and blog posts all managed as simple Markdown/MDX files with type-safe front matter
- 🎨 Built with Tailwind CSS – Fully customizable colors, typography, and spacing tokens for your own brand
- ⚡ Alpine.js Interactivity – Mega menus, testimonial and service carousels, FAQ accordions, category filters, and 3D tilt cards
- 📱 Mobile-Optimized – Fully responsive navigation, grids, and carousels tuned for every screen size
- 🖼️ Lightbox Galleries – GLightbox-powered project and service galleries with zoom and touch navigation, lazy-loaded only where needed
- 🔢 Pagination & Filtering – Numbered pagination for blog and category archives, plus live category filters on the projects page
- 📊 Animated Counters & Scroll Reveals – Stat counters and section reveals that trigger as visitors scroll
- 💬 Client Testimonials & Case Studies – Dedicated testimonial carousels and full project case-study templates with results metrics
- 🔗 Working Social Share – Article pages ship with real share-intent links (X, LinkedIn, Facebook) and a working copy-link button
- 🛠️ Reusable Component Library – A consistent Button, Badge, Doodle, and layout-section system shared across every page
📂 Template Includes:
- 🏠 Homepage – Hero, core services carousel, about, selected projects, trusted brands, testimonials, process, insights, and CTA
- 🛠️ Services – Filterable services grid pulled from content collections
- 🧩 Service Detail – Overview, capabilities, process, deliverables, gallery, and FAQ for each service
- 📊 Projects – Category-filtered project grid with a featured case study banner
- 📁 Project Detail – Challenge/approach/creative/solution narrative, gallery, results metrics, and client testimonial
- 👥 About – Team, philosophy, capabilities, and company story
- ✍️ Blog – Featured article banner, paginated article grid, and category archives
- 📝 Blog Detail – Full article layout with author meta, tags, related insights, and working social share
- 📩 Contact – Contact form, office info cards, map, office hours, and social links
- ❓ FAQs – Category-tabbed accordion of frequently asked questions
- 🔒 Privacy Policy, 📜 Terms of Service & 🍪 Cookie Policy – Standard legal pages with a sticky table of contents
- 🚫 404 Page – On-brand not-found page with search and quick links
🚀 Why Choose Bento?
- 🎨 Studio-Ready – Designed specifically for creative agencies and branding studios, not a generic SaaS template
- 📚 Content-First – Every major content type lives in a content collection, so growth doesn't mean touching component code
- 🌍 Fully Responsive – Consistent, polished layouts on every device
- ⚙️ Easy to Customize – Centralized data files for text and settings, Tailwind tokens for styling
- 👩💻 Developer-Friendly – Clean, typed Astro components with a clear, documented folder structure
⚡ Quick Setup:
- 📥 Download & unzip the template
- 🔧 Run: npm install
- 🚀 Start dev server: npm run dev
- 🛠️ Build for production: npm run build
🛠️ Tech Stack:
- 🚀 Astro 7 – Content-driven static site framework
- 🎨 Tailwind CSS – Utility-first styling
- ⚡ Alpine.js – Lightweight interactivity
- 📄 MDX & Astro Content Collections – Type-safe, file-based content for services, projects, and blog
- 🖼️ astro-icon (Bootstrap Icons) – Consistent, tree-shaken icon system
- 🔍 GLightbox – Lazy-loaded lightbox galleries with zoom and touch support
🚀 Ready to Launch Your Studio's New Site?
Get Bento and give your creative studio a home as considered as the work you ship for clients!
