Loading template
A Next.js template for wedding planners, venues and event studios, with arch-shaped photos and calm scroll animation.
Eventra Studio is a Next.js template for wedding planners, venues and event studios. It pairs Cinzel serif headings with arch-shaped photos, sage buttons and deep forest green sections, so the site feels calm and formal.
It is built with Next.js 16 (App Router), React 19, Tailwind CSS v4, GSAP and Lenis, in TypeScript. Every page is prerendered at build time, and the text lives in typed data files and Markdown.
Home: intro cover, hero with rotating words and a countdown, services, video moments, venues, a scroll-driven showcase, gallery, testimonials, contact and a call to action.
About: studio story, partner logos and reasons to choose the studio.
Services: service cards, animated stats and testimonials.
Service Details: one template used by 8 included services, with a photo glimpse section.
Venues: 9 venue cards with location tags.
Venue Details: description, photos, address, contacts and a comment form. All venue cards link to this one page.
Gallery: five photo tabs (Ceremony, Portraits, Decor, Family & Friends, Candid Moments) and scrolling photo tickers.
Sponsors: logo grids with hover fills.
Blog: post cards read from Markdown files.
Blog Post: one template used by 12 included articles, with related posts and a comment form.
Contact: contact details and an enquiry form.
404: a styled error page.
Intro and page transitions: a cover animation on the home page and animated panels between pages.
Smooth scrolling: Lenis, tied into GSAP ScrollTrigger.
Scroll animation: element reveals and a showcase section scrubbed by scroll.
Countdown: a running countdown in the hero. The demo timer loops.
Video player: the Moments section plays a video on click.
Gallery tabs: switch photo sets without leaving the page.
Testimonial slider: previous and next controls with animated photos and quotes.
Animated numbers: stat counters built with number-flow.
Reduced motion: the animation is skipped when a visitor asks for reduced motion.
Mobile menu: a drawer navigation for small screens.
Server components: pages render on the server; client code is used only for animation and interactive parts.
Site name, logo text, footer copy and the form endpoint are in src/data/site.ts. Navigation and social links are in src/data/navigation.ts and src/data/social.ts, and each page's text and images are in its own file in src/data/. Colours are tokens in src/styles/variable.css, and fonts are loaded in src/utils/font.ts.
Add a Markdown file to src/data/blog/ or src/data/services/ and the page is built for you, with its own route and sitemap entry. Every page has its own title, description and Open Graph share image, set in src/utils/generateMetaData.ts.
Images: the download has placeholder images at the exact demo sizes, and a blank placeholder video. The demo photos are not included.
Forms: front-end only. Set forms.action in src/data/site.ts to your form endpoint. While it is empty, forms show the success state without sending anything.
Prerendered: every route is built as static HTML at build time.
Hosting: Vercel, any Node host, or Cloudflare Workers through OpenNext (wrangler.jsonc is included).
Requirements: Node.js 20.9 or newer. npm and Bun both work.