Business Directory Template

A modern, responsive business directory template inspired by beautynailhairsalons.com. Built with React 19, Tailwind CSS 4, and Google Maps integration.

Features

Hierarchical URL Structure

• Homepage (/) - Hero section, search, featured businesses, categories
• Countries (/countries) - World map with all countries listed
• Country (/:countryCode) - Cities within a country (e.g., /za for South Africa)
• City (/:countryCode/:citySlug) - Businesses in a city (e.g., /za/johannesburg)
• Business (/:countryCode/:citySlug/:businessId/:businessSlug) - Full business detail page

Core Components

• Header - Logo, navigation, search bar, theme toggle
• Footer - Quick links, categories, contact info
• BusinessCard - Business listing with image, rating, category, description
• CountryCard - Country with business count
• CityCard - City with business count
• AlphabetFilter - A-Z filtering for countries and cities
• Breadcrumb - Navigation trail

Interactive Features

• Google Maps Integration - Interactive maps on all pages with markers
• Theme Toggle - Dark/Light mode support
• Category Filtering - Filter businesses by category
• Search - Search across businesses, countries, cities
• Responsive Design - Mobile-first approach

Design System

Dark Atlas Interface

• Primary Color: Electric Cyan (#00E5CC)
• Accent Color: Amber Gold (#F5A623)
• Background: Deep slate (#0F1419)
• Cards: Glass morphism with frosted backgrounds
• Typography: Outfit (headings) + Inter (body)

Color Tokens (OKLCH)

--primary: oklch(0.85 0.18 180);        /* Electric Cyan */
--primary-foreground: oklch(0.15 0.02 180);
--accent: oklch(0.75 0.16 70);          /* Amber Gold */
--background: oklch(0.15 0.02 250);     /* Deep Slate */
--card: oklch(0.18 0.02 250);           /* Card Background */

File Structure

client/
├── public/
│   └── images/           # Static images
├── src/
│   ├── components/
│   │   ├── ui/           # shadcn/ui components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── BusinessCard.tsx
│   │   ├── CountryCard.tsx
│   │   ├── CityCard.tsx
│   │   ├── AlphabetFilter.tsx
│   │   ├── Breadcrumb.tsx
│   │   └── Map.tsx       # Google Maps integration
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── Countries.tsx
│   │   ├── Country.tsx
│   │   ├── City.tsx
│   │   └── Business.tsx
│   ├── lib/
│   │   ├── types.ts      # TypeScript interfaces
│   │   ├── data.ts       # Mock data
│   │   └── utils.ts      # Utility functions
│   ├── App.tsx           # Routes & layout
│   ├── main.tsx          # Entry point
│   └── index.css         # Global styles & theme
└── index.html

Data Types

Business

interface Business {
  id: string;
  name: string;
  slug: string;
  category: string;
  description: string;
  address: string;
  city: string;
  citySlug: string;
  country: string;
  countryCode: string;
  phone: string;
  email: string;
  website: string;
  rating: number;
  reviewCount: number;
  image: string;
  coordinates: { lat: number; lng: number };
  hours: BusinessHours[];
  posts: BusinessPost[];
}

Country

interface Country {
  code: string;
  name: string;
  businessCount: number;
  coordinates: { lat: number; lng: number };
}

City

interface City {
  slug: string;
  name: string;
  countryCode: string;
  businessCount: number;
  coordinates: { lat: number; lng: number };
}

Customization

Adding New Countries

Edit client/src/lib/data.ts and add to the COUNTRIES array:

{
  code: 'xx',
  name: 'Country Name',
  businessCount: 1000,
  coordinates: { lat: 0, lng: 0 }
}

Adding New Cities

Add to the CITIES array:

{
  slug: 'city-name',
  name: 'City Name',
  countryCode: 'xx',
  businessCount: 100,
  coordinates: { lat: 0, lng: 0 }
}

Adding New Businesses

Add to the BUSINESSES array with all required fields.

Changing Categories

Edit the CATEGORIES array in data.ts:

export const CATEGORIES = [
  'Beauty Salon',
  'Hair Salon',
  'Nail Salon',
  // Add more categories
];

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Deployment

The template is designed to work as a static site or with a backend. For static deployment:

1. Run pnpm build
2. Deploy the dist folder to any static hosting (Vercel, Netlify, etc.)

Backend Integration

To connect to a real backend:

1. Replace mock data in data.ts with API calls
2. Use React Query or SWR for data fetching
3. Update the data types to match your API schema

Example API integration:

// In a page component
const { data: businesses } = useQuery({
  queryKey: ['businesses', citySlug],
  queryFn: () => fetch(`/api/businesses?city=${citySlug}`).then(r => r.json())
});

License

MIT License - Feel free to use this template for your own projects.