`SETUP.md`

135 lines
# Quick Setup Guide for Angel's Flowers Website

## Step 1: Install Dependencies

```bash
cd /root/WebsitesMisc/angelsflowers
npm install
```

This will install:
- Next.js 14
- React 18
- TypeScript
- Tailwind CSS
- React Icons

## Step 2: Start Development Server

```bash
npm run dev
```

The website will be available at [http://localhost:3000](http://localhost:3000)

## Step 3: Customize Content

### Update Business Information

1. **Phone Number** (appears throughout the site):
   - `/components/Navbar.tsx` - Line with phone number
   - `/components/Footer.tsx` - Contact info section
   - `/app/contact/page.tsx` - Contact details

2. **Address**:
   - `/components/Footer.tsx` - Footer address
   - `/app/contact/page.tsx` - Contact page address

3. **Business Hours**:
   - `/components/Footer.tsx` - Footer hours
   - `/app/contact/page.tsx` - Contact page hours

4. **Email**:
   - `/components/Footer.tsx` - Footer email
   - `/app/contact/page.tsx` - Contact form

### Add Real Images

Replace placeholder images with your flower photos:

1. Create an images folder:
   ```bash
   mkdir -p public/images
   ```

2. Add your images to `public/images/`

3. Update image URLs in:
   - `/app/page.tsx` - Homepage hero and featured flowers
   - `/app/flowers/page.tsx` - Product catalog
   - `/app/about/page.tsx` - Family photos

### Recommended Image Sizes

- Hero images: 2000x1200px (landscape)
- Product photos: 800x800px (square)
- Portrait photos: 600x800px
- Optimize all images for web (WebP format recommended)

## Step 4: Build for Production

```bash
npm run build
npm start
```

## Step 5: Deploy

### Option A: Vercel (Recommended)

1. Install Vercel CLI:
   ```bash
   npm i -g vercel
   ```

2. Deploy:
   ```bash
   vercel
   ```

3. Follow the prompts

### Option B: Netlify

1. Push code to GitHub
2. Connect repository to Netlify
3. Build settings:
   - Build command: `npm run build`
   - Publish directory: `.next`

## Troubleshooting

### Port already in use
```bash
# Kill process on port 3000
lsof -ti:3000 | xargs kill -9
npm run dev
```

### Clear cache and reinstall
```bash
rm -rf node_modules .next
npm install
npm run dev
```

### TypeScript errors
The project uses TypeScript for type safety. If you see errors:
- Make sure all dependencies are installed
- Run `npm run build` to check for issues
- Check that Node.js version is 18 or higher

## Next Steps

1. Add Google Maps integration to contact page
2. Set up contact form backend (Formspree, EmailJS, or custom API)
3. Add Google Analytics for tracking
4. Set up social media accounts and update links
5. Consider adding e-commerce functionality (Shopify, Stripe)

## Need Help?

- Next.js docs: https://nextjs.org/docs
- Tailwind CSS docs: https://tailwindcss.com/docs
- React Icons: https://react-icons.github.io/react-icons/