Bento - Agency Website Template (Next.js + Sanity)

Bento comes with Home, About, Works, Team, Blog and Contact pages, all designed and ready to fill with your content. Each page is built from sections such as heroes, statements, team grids, testimonials, awards and calls to action. Launch a complete agency website in an afternoon instead of designing it from scratch.

Every page is a list of sections you can add, remove and reorder in Sanity Studio, without touching code. Choose from 13 ready-made sections, and use options such as title sizes, card styles and layouts to get more variety from each one. Each field explains where it appears on the page, so you and your clients always know what you're editing.

Blog posts, projects, team members, testimonials and FAQs each have their own list in the Studio. Write an item once and show it on as many pages as you like, in any order. Leave a section's list empty and it automatically shows every item, so new content appears without extra work.

Lenis smooth scrolling, synced with GSAP ScrollTrigger, gives the whole site a fluid, premium feel. Big statement headings light up word by word as you scroll, and photos fan out or slide into place. Every animation follows the visitor's scroll and runs smoothly in both directions.

The menu opens with a panel that wipes in from the left, followed by links that slide in one after another. Closing plays the animation in reverse, so the whole interaction feels deliberate and polished. It's keyboard-friendly, closes with the Escape key and fits any screen height.

Any hero section can play a short, muted, looping video behind the headline. The background image shows while the video loads, so the page never looks empty. The video only plays while it's on screen, which keeps the page fast and saves your visitors' data.

Bento includes a CLAUDE.md guide that explains the project to AI coding assistants. With Claude Code, run `/build-section` with a Figma link to turn a design into a new editable section that follows the template's conventions. It's a fast way to grow the site while keeping the code consistent.

Run `npm run seed` to import every demo page, post, project and image into your own Sanity project. The README walks you through installing, connecting Sanity, importing the demo and deploying to Vercel step by step. You'll have a working copy of the live demo running in minutes.