localcitywalksnew Cursor Rules

# PROJECT OVERVIEW

About LocalCityWalks

LocalCityWalks was created out of a simple idea: travel deserves to be more personal, more meaningful, and more connected to the places we visit.

We focus on cities that don’t always make the top of the list. Not the capitals or postcard hotspots, but the smaller, lesser-known places full of local charm that hold real character-quiet squares, layered histories, and stories worth sharing. These are the places where walking still makes sense, where you can feel the rhythm of a place in just a few steps.

All LocalCityWalks are led by trusted local guides. No big groups. No buses. No umbrellas to follow. Just small, personal tours,-more like spending time with a local friend than joining a tour group.

We believe in keeping things simple:

Leave nothing but footsteps

Small groups are more human.

Local guides know best.

And every city has something worth seeing, if you know where to look.
Every city has its story

Discovering should be fun and engaging
Stories
Anecdotes
We believe in human connection and exchange, human touch - its not one-way, its a dialogue. This is what makes every tour unique and personal.

# PERSONALITY

You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- Follow the user’s requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.

### Coding Environment

The user asks questions about the following coding languages:

- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS

### Code Implementation Guidelines

Follow these rules when you write code:

- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting

- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling

- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization

- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions

- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

# PROJECT SITEMAP

## File Structure Overview

```
localcitywalks/
├── app/                              # Next.js App Router
│   ├── [lang]/                       # Internationalization (i18n) setup
│   │   └── dictionaries/             # Translation files (empty)
│   ├── favicon.ico                   # Site favicon
│   ├── globals.css                   # Global styles and Tailwind imports
│   ├── layout.tsx                    # Root layout with metadata, analytics, fonts
│   ├── page.tsx                      # Homepage with hero, about, cities sections
│   ├── robots.txt                    # SEO robots file
│   └── sitemap.ts                    # Dynamic sitemap generation
├── components/                       # React components
│   ├── cards/                        # Card components
│   │   └── CityCard.tsx              # City showcase cards with tour request modals
│   ├── forms/                        # Form components
│   │   ├── ContactForm.tsx           # General contact form
│   │   └── TourRequestForm.tsx       # Detailed tour booking form
│   ├── home/                         # Homepage sections
│   │   ├── AboutUs.tsx               # About section with features and stats
│   │   └── Cities.tsx                # Cities showcase section
│   ├── shared/                       # Shared layout components
│   │   ├── Footer.tsx                # Site footer
│   │   ├── Header.tsx                # Desktop navigation header
│   │   └── MobileHeader.tsx          # Mobile navigation header
│   └── ui/                           # Shadcn UI components
│       ├── button.tsx                # Button component variants
│       ├── calendar.tsx              # Calendar picker component
│       ├── card.tsx                  # Card container component
│       ├── checkbox.tsx              # Checkbox input component
│       ├── date-picker.tsx           # Date selection component
│       ├── dialog.tsx                # Modal dialog component
│       ├── duration-selector.tsx     # Tour duration picker
│       ├── form.tsx                  # Form wrapper with validation
│       ├── input.tsx                 # Text input component
│       ├── label.tsx                 # Form label component
│       ├── participant-counter.tsx   # Counter for tour participants
│       ├── popover.tsx               # Popover component
│       ├── select.tsx                # Select dropdown component
│       ├── separator.tsx             # Visual separator component
│       ├── sheet.tsx                 # Side sheet component
│       ├── sonner.tsx                # Toast notification component
│       ├── textarea.tsx              # Textarea input component
│       └── time-selector.tsx         # Time selection component
├── constants/                        # Application constants
│   └── index.ts                      # Field names, types, navigation links
├── lib/                              # Utility libraries
│   ├── nodemailer/                   # Email functionality
│   │   └── index.ts                  # Email sending functions (contact & tour requests)
│   ├── utils.ts                      # Utility functions (cn, etc.)
│   └── validation.ts                 # Zod schemas for form validation
├── public/                           # Static assets
│   ├── apple-touch-icon.png          # iOS app icon
│   ├── check.svg                     # Checkmark icon
│   ├── guide.png                     # Guide image for social media
│   ├── guiding.jpg                   # Tour guide images
│   ├── guiding1.jpg                  # Tour guide images
│   ├── guiding2.jpg                  # Tour guide images
│   ├── guiding3.jpg                  # Tour guide images
│   ├── guiding4.png                  # Tour guide images
│   ├── icon.png                      # Site icon
│   ├── lcw-logo-email.png            # Email signature logo
│   ├── localguides-avatars.png       # Guide avatars showcase
│   ├── logo-icon.svg                 # Main logo icon
│   ├── logo-long-dark.svg            # Dark theme logo
│   ├── logo-long-white.png           # White logo (PNG)
│   ├── logo-long-white.svg           # White logo (SVG)
│   └── logo-short-transparant.png    # Short transparent logo
├── types/                            # TypeScript type definitions (empty)
├── components.json                   # Shadcn UI configuration
├── DESIGN_SYSTEM.md                  # Design system documentation
├── eslint.config.mjs                 # ESLint configuration
├── next-env.d.ts                     # Next.js TypeScript definitions
├── next.config.ts                    # Next.js configuration
├── package-lock.json                 # NPM lock file
├── package.json                      # Project dependencies and scripts
├── postcss.config.mjs                # PostCSS configuration
├── README.md                         # Project documentation
└── tsconfig.json                     # TypeScript configuration
```

## Component Architecture

### Page Structure

- **Homepage (`app/page.tsx`)**: Landing page with hero, contact form, about section, and cities showcase
- **Layout (`app/layout.tsx`)**: Root layout with metadata, analytics, fonts, and global providers

### Form Components

- **ContactForm**: General inquiries with subject categories
- **TourRequestForm**: Detailed tour booking with participant counts, scheduling, and preferences

### UI Components (Shadcn-based)

- **Form Controls**: Input, textarea, select, checkbox, date-picker, time-selector, duration-selector
- **Layout**: Button, card, dialog, popover, sheet, separator
- **Feedback**: Sonner toast notifications

### Data Flow

- **Validation**: Zod schemas in `lib/validation.ts`
- **Email**: Nodemailer integration in `lib/nodemailer/index.ts`
- **Styling**: Tailwind CSS with custom color scheme (tangerine, grapefruit, nightsky)

## Current Features

- ✅ Responsive landing page with hero section
- ✅ City showcase with 19 European cities
- ✅ Tour request system with detailed forms
- ✅ Contact form for general inquiries
- ✅ Email integration for form submissions
- ✅ SEO optimization (meta tags, sitemap, robots.txt)
- ✅ Analytics setup (Google Analytics, GTM)
- ✅ Mobile-first responsive design
- ✅ Form validation with Zod
- ✅ Toast notifications
- 🔄 Internationalization setup (structure ready, not implemented)
- 🔄 Navigation system (NAV_LINKS empty, needs implementation)

## Key Dependencies

- **Framework**: Next.js 15, React 19
- **Styling**: Tailwind CSS, Shadcn UI
- **Forms**: React Hook Form, Zod validation
- **Email**: Nodemailer
- **Notifications**: Sonner
- **Icons**: Lucide React
- **Date Handling**: date-fns, react-day-picker