Website Opportunity Engine

A production-quality Next.js 14 + Tailwind CSS frontend for a conversion-first landing page system designed for local businesses.

Features

• Next.js 14 with TypeScript support
• Tailwind CSS 3.3 with custom brand color palette
• Fully Responsive mobile-first design
• Real Demo Data for coffee shops and bike shops
• High Performance with Next.js Image optimization
• Conversion-Focused design patterns
• Accessible with semantic HTML and ARIA labels
• Production-Ready with no stubs or placeholders

Project Structure

/web
├── package.json                 # Dependencies & scripts
├── next.config.js              # Image domains configuration
├── tailwind.config.ts          # Theme customization
├── postcss.config.js           # PostCSS setup
├── tsconfig.json               # TypeScript configuration
├── src/
│   ├── types/
│   │   └── websiteEngine.ts    # Complete type definitions
│   ├── data/
│   │   ├── coffeeShopDemo.ts   # Coalfire Coffee Co.
│   │   └── bikeShopDemo.ts     # Velocity Cycles
│   ├── components/website-engine/
│   │   ├── HeroSection.tsx     # Hero with mosaic layout
│   │   ├── TrustStrip.tsx      # Rating & badges
│   │   ├── FeatureCards.tsx    # Features showcase
│   │   ├── MenuHighlights.tsx  # Menu/Services grid
│   │   ├── ReviewSection.tsx   # Testimonials
│   │   ├── GallerySection.tsx  # Gallery grid
│   │   ├── LocationSection.tsx # Location & hours
│   │   ├── FinalCTA.tsx        # Call-to-action
│   │   └── WebsiteEngine.tsx   # Master orchestrator
│   └── app/
│       ├── layout.tsx          # Root layout
│       ├── page.tsx            # Home redirect
│       ├── globals.css         # Global styles
│       └── demo/
│           ├── coffee-shop/    # Coffee shop demo
│           └── bike-shop/      # Bike shop demo

Installation

1. Navigate to the web directory:

   cd /sessions/gallant-nifty-galileo/mnt/website-opportunity-engine/web

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to:

   • http://localhost:3000/demo/coffee-shop - Coalfire Coffee Co. demo
   • http://localhost:3000/demo/bike-shop - Velocity Cycles demo

Building for Production

npm run build
npm start

Demo Data

Coalfire Coffee Co.

• Premium specialty coffee shop in Melbourne
• 6 menu items with pricing and badges
• 3 customer testimonials
• 6 gallery images
• Complete location & hours information

Velocity Cycles

• Expert bike shop in Melbourne
• 6 services with pricing
• 3 customer testimonials
• 6 gallery images
• Complete location & hours information

Key Components

HeroSection

• Full viewport height on mobile (min-h-screen)
• 90vh on desktop
• Mobile: Single image full-bleed
• Desktop: 3-image mosaic layout (60% main + 2 stacked right)
• Dark gradient overlay
• Rating badge with stars
• CTA buttons (primary + secondary)
• Scroll indicator animation

TrustStrip

• Horizontal scrollable strip
• Large rating display
• Trust badges with icons
• Dark background (stone-900)
• Responsive layout

FeatureCards

• Grid layout: 1 col mobile, 2-4 cols desktop
• Image at top with hover effects
• Title and description
• Card shadows and hover transitions

MenuHighlights

• 2 cols mobile, 3 cols desktop
• Optional images per item
• Badges (popular, bestseller, new, seasonal)
• Price display in brand color
• Works for both menu items and services

ReviewSection

• 1 col mobile, 3 cols desktop
• Quote with decorative quote mark
• Star ratings
• Customer avatars
• Role/title display

GallerySection

• Responsive grid with span support
• 2 cols mobile, 3 cols desktop
• Support for wide/tall spanning items
• Hover brightness effect
• Light background

LocationSection

• 2-column layout: map + info
• Stacked on mobile
• Opening hours with today highlight
• Amenities badges
• CTA buttons (Get Directions, Call, WhatsApp)
• Google Maps integration

FinalCTA

• Dark background with decorative elements
• Centered headline and subheadline
• Flexible CTA buttons
• Blurred background decorations

Customization

Colors

Edit tailwind.config.ts to customize the brand palette:

colors: {
  brand: {
    primary: '#2C1810',      // Coffee brown
    secondary: '#6F4E37',    // Medium brown
    accent: '#C49A6C',       // Warm tan
    light: '#F5F0E8',        // Off-white
  },
}

Creating New Demo Sites

1. Create a new data file in src/data/
2. Follow the BusinessData TypeScript interface
3. Create a new page in src/app/demo/[category]/page.tsx
4. Import data and render <WebsiteEngine data={yourData} />

TypeScript Support

All components are fully typed with no any types. Key interfaces:

• BusinessData - Complete business information
• HeroData - Hero section configuration
• MenuItem - Menu item or service
• Review - Customer testimonial
• LocationInfo - Business location details
• CTAConfig - Call-to-action configuration

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Performance

• Next.js Image optimization
• Tailwind CSS purging (production)
• No external dependencies beyond React & Next.js
• Font optimization with next/font
• Responsive images with srcset

Accessibility

• Semantic HTML (section, nav, article, etc.)
• Alt text on all images
• Focus-visible states on interactive elements
• Reduced motion preferences honored
• Proper heading hierarchy

Development Notes

• Uses 'use client' only where needed (scroll listeners)
• Mobile-first responsive design approach
• All colors from Tailwind palette (no inline hex)
• Custom scrollbar styling
• Smooth scroll behavior enabled