Baristro Coffee & Brunch.

Overview

Baristro is a contemporary coffee shop & bistro in Bayamón, Puerto Rico, focused on brunch, breakfast, and specialty coffee. They needed a digital presence that felt warm and premium—and turned visits into calls, menu views, or inquiries.

I built a one-page Astro landing with React islands, optimized for local SEO (es-PR), mobile performance, and a clear journey: value proposition → hours → menu → contact.

Challenge

A local hospitality business lives on organic search (“brunch Bayamón”) and immediate action (call, open menu, find the spot). A slow or generic site loses that intent.

We had to balance a premium food brand (photography, motion, type) with Core Web Vitals, accessibility, and a maintainable static deploy on shared hosting.

Approach

I prioritized a static architecture, structured local SEO, and a single-page conversion flow:

• One-page landing with anchors (#horarios, #menu, #contacto) and persistent CTAs (phone + menu).
• Schema.org Restaurant markup with address, geo, hours, social profiles, and cuisine types.
• LCP image preload (bgHero.webp) and WebP assets for mobile speed.
• React islands only where interaction matters (nav, gallery, animated text, menu).
• Accessibility: skip link, ARIA roles, contrast, and visible focus rings on key controls.

Solution

The final landing pairs brunch atmosphere with a direct, local-first experience:

• Full-bleed hero with local headline, menu/call CTAs, and EST. 2026 brand storytelling.
• Value section focused on breakfast, brunch, and specialty coffee.
• Clear hours block (weekdays vs. weekend) to reduce operational friction.
• Menu section with visual storytelling and access to the full menu.
• Contact area with details, embedded map, and a multi-intent form.

Results

• Indexable presence with on-page SEO and structured data ready for local discovery.
• Smooth mobile experience via Astro static HTML and selective hydration.
• Unified digital channel: phone, email, menu, map, and form in one flow.
• Cohesive visual identity (logo, WebP photography, gold accent, controlled motion).
• Foundation ready for local campaigns and reputation surfaces.

Tech stack

Learnings

• For local hospitality, hours + location + call CTA matter more than decorative sections.
• Astro + React islands deliver premium motion without sacrificing hero LCP.
• Well-formed Restaurant schema helps search engines and AI assistants understand the business.