# 🚀 Setup Guide - Twoja Łódka

## Phase 1 ✅ COMPLETE - Project Setup

The project structure has been created with all necessary files and dependencies installed.

### What's Ready:
- ✅ Next.js 14 with TypeScript
- ✅ TailwindCSS configured
- ✅ Framer Motion for animations
- ✅ All components created
- ✅ All pages created
- ✅ Sample boat data
- ✅ Responsive design
- ✅ Mobile menu

## 📸 CRITICAL: Add Main Hero Image

**Before you can run the site, you need to add the main hero image.**

### Option 1: Use Your Own Image

1. Find or take an aerial photo of a sailboat (drone view)
2. Resize it to 2560x1440px (or similar 16:9 ratio)
3. Save it as: `public/images/main_image.jpg`

### Option 2: Download a Free Stock Photo

Visit one of these sites and search for "sailboat aerial view" or "yacht from above":

- **Unsplash**: https://unsplash.com/s/photos/sailboat-aerial
- **Pexels**: https://www.pexels.com/search/yacht%20aerial/
- **Pixabay**: https://pixabay.com/images/search/sailing%20boat%20drone/

Download a high-resolution image and save as `public/images/main_image.jpg`

### Option 3: Temporary Placeholder

If you want to test without a real image first:

1. Create a simple blue gradient image
2. Or use any boat photo temporarily
3. Save as `public/images/main_image.jpg`

## 🎯 Start Development Server

Once you have the image in place:

```bash
cd /Users/luka/Documents/twojalodka.pl
npm run dev
```

Open your browser to: **http://localhost:3000**

## 🎨 Adjust Hotspot Positions

After you see your image on the homepage:

1. Open `components/hero/BoatHero.tsx`
2. Find the `hotspots` array (lines 10-46)
3. Adjust the `position` values to match your boat image:

```typescript
position: { 
  x: 35,    // Distance from left (%)
  y: 60,    // Distance from top (%)
  width: 30,  // Hotspot width (%)
  height: 25  // Hotspot height (%)
}
```

### Hotspot Placement Guide:

Based on your aerial boat image, place hotspots on:

- **Stern/Cockpit** (back of boat) → Sklep
- **Bow** (front of boat) → Wynajem  
- **Cabin entrance** (middle) → Wyposażenie
- **Side deck** (left/right) → Serwis
- **Mast area** (top center) → Blog

### Testing Hotspots:

1. Hover over different parts of the boat image
2. You should see:
   - White border around the area
   - Pulsing white dot in center
   - Label below the hotspot
   - Info card at bottom of screen
3. Click to navigate to that section

## 📱 Test Responsive Design

1. **Desktop** (>768px): Interactive hotspots
2. **Mobile** (<768px): CTA buttons at bottom

Test by resizing your browser window.

## 🖼️ Add Boat Photos (Optional)

To show real boat images in the shop:

1. Create folder: `public/images/boats/`
2. Add these images:
   - `etap-22.jpg`
   - `antila-24.jpg`
   - `maxus-26.jpg`
   - `sasanka-620.jpg`
   - `delphia-24.jpg`
   - `twister-800.jpg`

Or update the boat data in `data/boats.ts` to match your image names.

## 🔧 Common Issues

### Issue: "Image not found" error

**Solution:**
- Ensure `main_image.jpg` exists in `public/images/`
- Check filename is exactly `main_image.jpg` (lowercase)
- Restart dev server: `Ctrl+C` then `npm run dev`

### Issue: Hotspots not visible

**Solution:**
- They're hidden on mobile - test on desktop or resize window
- Check browser console for errors
- Verify Framer Motion is installed: `npm list framer-motion`

### Issue: TypeScript errors

**Solution:**
```bash
npm run lint
```
Fix any errors shown, then restart dev server.

### Issue: Styles not loading

**Solution:**
```bash
# Rebuild Tailwind
rm -rf .next
npm run dev
```

## 📋 Checklist Before Testing

- [ ] Dependencies installed (`npm install` completed)
- [ ] Main image added (`public/images/main_image.jpg`)
- [ ] Dev server running (`npm run dev`)
- [ ] Browser open to `http://localhost:3000`
- [ ] No console errors in browser dev tools

## 🎉 What to Test

### Homepage:
- [ ] Hero image loads
- [ ] Title and subtitle visible
- [ ] Hotspots appear on hover (desktop)
- [ ] Clicking hotspot navigates to page
- [ ] Mobile buttons work (on mobile)
- [ ] Header navigation works
- [ ] Smooth animations

### Navigation:
- [ ] All menu links work
- [ ] Mobile menu opens/closes
- [ ] Header changes on scroll

### Shop Page:
- [ ] Boat cards display (with or without images)
- [ ] Clicking boat opens detail page
- [ ] Back button works on detail page

### Other Pages:
- [ ] Wynajem page loads
- [ ] Wyposażenie page loads
- [ ] Serwis page loads
- [ ] Blog page loads
- [ ] Kontakt page loads

## 🚀 Next Steps After Testing

1. **Customize Colors**
   - Edit `tailwind.config.ts`
   - Change blue-950 to your brand color

2. **Update Content**
   - Edit boat data in `data/boats.ts`
   - Update text in page files
   - Add your contact information

3. **Add Real Images**
   - Replace placeholder boat images
   - Add blog post images
   - Optimize images for web

4. **Implement Forms**
   - Contact form submission
   - Booking form functionality
   - Form validation

5. **Deploy**
   - Push to GitHub
   - Deploy to Vercel
   - Configure domain

## 📞 Need Help?

### Documentation:
- Next.js: https://nextjs.org/docs
- Tailwind: https://tailwindcss.com/docs
- Framer Motion: https://www.framer.com/motion/

### Quick Commands:
```bash
# Start dev server
npm run dev

# Build for production
npm run build

# Run production build
npm start

# Check for errors
npm run lint

# Install missing dependency
npm install <package-name>
```

## 🎯 Current Status

**✅ Phase 1 Complete:** Project setup and structure
**✅ Phase 2 Complete:** All components and pages
**⏳ Phase 3 Pending:** Add images and test
**⏳ Phase 4 Pending:** Customize and deploy

---

**You're ready to go! Add the main image and start the dev server.** 🚀