Hospitality & Restaurant Design Portfolio Website Template

Quick summary

Convene is a single-page horizontal scroll template for convention center design firms. It unfolds a five-phase design journey across full-viewport panels, from site analysis to a completed venue. The visual language draws from architectural drafting, using warm parchment, graphite, and red-pencil accents to give every section the weight of a real blueprint.

Who this template is for

This template is built for architecture and design firms that specialize in large-scale gathering spaces. It speaks directly to firms pitching high-stakes, long-cycle clients who need more than a digital brochure.

• Convention center architects presenting to municipal authorities and civic venue directors
• Design practices targeting hotel group development teams or university facilities boards
• Firms showcasing end-to-end convention center design expertise across multiple venue typologies

What problem this template solves

Most architecture firm pages treat every project the same. They rely on static image grids that do not communicate the depth of a firm's process or the scale of its work. Decision-makers in the municipal and hospitality sectors need to feel that scope before they schedule a conversation.

• A static portfolio page cannot communicate crowd-flow thinking, acoustic engineering, or the phased complexity of venue design
• Generic layouts fail to differentiate a specialist convention center firm from a general practice
• Clients with large capital budgets need evidence of rigor, not just photography

What you get with this template

You get a fully structured, desktop-first landing page that turns the design process itself into the pitch. Every panel is a persuasion stage. The template ships with a defined section architecture, a complete visual identity system, and two conversion paths built into the layout.

• Five horizontal scroll panels covering site analysis, programming, massing, cross-section, and completed venue
• A monumental hero section with a letterpress-style headline, founding year, and project count
• Two call to action placements: a red-pencil "Explore Our Venues" button and a margin-note-style capabilities brief link

Feature list

The template includes the following built-in capabilities:

Horizontal Scroll Navigation with Panel Progress Indicator

Each lateral panel fills the full viewport, simulating the experience of unrolling a blueprint. A panel progress indicator keeps visitors oriented as they move through the five design phases.

GSAP ScrollTrigger Animation Engine

The horizontal scroll is powered by a client-side GSAP ScrollTrigger setup. Parallax layers, image reveal overlays, and ink-bleed text entrance animations run across each phase transition to deepen the tactile illusion.

Monumental Letterpress Hero Section

The hero opens on a parchment-white void with a single serif headline set in a large, letterspaced style and given an ink-bleed texture. A thin graphite rule and a founding stats line anchor the grandeur in evidence.

Dual Conversion Path Layout

The template places "Explore Our Venues" as a red-pencil-styled annotation in the header margin and again as a full-width button on the final panel. A secondary text link, styled as a margin note, captures higher-intent visitors for a capabilities brief download.

Three-Track Client Typology Section

A dedicated section presents three client tracks: Municipal, Hospitality, and University. Each track carries capacity specifications and is visually separated to help different decision-makers self-identify quickly.

Asymmetric Venue Grid with Annotation Overlays

Completed venue imagery is arranged in an asymmetric grid with red-pencil annotation overlays. This section bridges the hand-drawn process aesthetic with finished photography of live venues.

Page sections overview

Design & branding system

The template uses an Ink and Paper theme built on the Cloud Canvas color system. Every design decision references the aesthetic of a senior architect's drafting desk at golden hour.

• Unbleached parchment (#F5F0E8) as the background, architectural graphite (#3B3B3B) for body text, and construction-line blue (#A8C4D8) for section dividers
• Red-pencil markup (#C75233) reserved exclusively for interactive hotspots and call-to-action elements
• Fraunces serif for headlines and DM Sans for body text and interface elements, creating a contrast between monumental and practical

Mobile & speed optimization

This template is built desktop-first. The horizontal scroll experience and blueprint-scale typography are designed for large monitors, which align with the browsing habits of the template's primary audience.

• Server Components handle static content sections, while Client Components manage the GSAP scroll engine
• The horizontal scroll, parallax layers, and magnetic call to action button are optimized for desktop interaction
• Mobile layout considerations are present in the build, though the full immersive experience is intended for desktop viewing

How this template helps you convert

The horizontal journey is the persuasion engine. By the time a visitor reaches the final panel, they have watched a convention center materialize from a single pencil stroke. The template removes friction and replaces it with earned curiosity.

1. The five-phase process scroll builds credibility incrementally, so the call to action arrives after the firm's expertise is already demonstrated through the visual narrative
2. Two conversion paths serve different intent levels: the portfolio link captures browsers, and the capabilities brief link captures decision-makers ready to share contact information

Other information about this template

This template is built for the convention center design niche within the broader architecture and design category. It sits at the intersection of hospitality and restaurant design subcategory conventions and large-scale civic venue work.

• The social proof anchors in the hero are drawn from firm-level data: 47 completed venues, 2.3 million seats delivered, and a founding year of 1994
• Ambient sound design, including pencil-on-paper and drafting compass audio cues, is included to deepen the tactile quality of the scroll experience
• The template uses a Click-Through landing page direction, meaning no form appears on the page itself; conversion happens downstream in the portfolio
• The footer follows Pattern 1 (Linear Single-Row), keeping the page close without adding visual weight
• The template is built with Next.js conventions using Server and Client Component separation for the scroll engine

Show more