Catalyst Café

A modern, responsive frontend application built for a boutique café portfolio project emphasizing warm aesthetics, clean code, and user conversion.

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Animations: Motion (framer-motion updated)
• Icons: Lucide-react

How to Customize Images

This project uses placeholder images from Unsplash (via picsum.photos) to demonstrate the layout. To use this for your portfolio or actual production, you should replace the image sources.

1. Hero Image

• File: app/page.tsx
• Search for the <Image> component in the Hero Section.
• Replace src="https://picsum.photos/seed/cafehero/1920/1080" with your high-quality imagery (e.g., from Unsplash.com). We recommend a dark, high-contrast image (like a pouring coffee or a cozy warmly lit scene) for the best text readability against the white text.

2. "Our Vibe" Interior Image

• File: app/page.tsx
• Search for the <Image> component in the Our Vibe Section.
• Replace src="https://picsum.photos/seed/cafeinterior/800/1200" with a photo of the restaurant interior. A warm, wide-angle interior shot works best here.

3. Menu Highlights Images

• In app/page.tsx, look for the signatureDishes array at the top of the file.
• Update the image property for each item in the array. We recommend maintaining a consistent aspect ratio (e.g., 600x400 or 1:1) for all menu photos.

const signatureDishes = [
  {
    name: "Colombo Spiced Benedict",
    description: "...",
    price: "LKR 1,800",
    image: "/your-local-image-path.jpg" // OR an absolute URL to a CDN
  },
  // ...
]

Adding Your Own Local Images

You can add your own images by:

1. Placing them in the public/ folder of this project (e.g., public/hero.jpg).
2. Then, referencing them with a leading slash in the src attribute (e.g., src="/hero.jpg").
3. If you use external imagery via links beyond picsum.photos, remember to update next.config.ts's images.remotePatterns array to whitelist the new domains (like images.unsplash.com or an S3 bucket).

Editing the Google Map

The footer includes a Google Maps iframe currently pointing to Colombo, Sri Lanka. To update this:

1. Go to Google Maps.
2. Search for your location.
3. Click "Share" > "Embed a map".
4. Copy the src URL from the provided iframe code and replace the src attribute on the <iframe> tag inside the Footer Section.

WhatsApp Link

Update the "Chat on WhatsApp" URL inside the Footer Section from https://wa.me/94701234567 to your actual WhatsApp business number.