# Public Assets Directory

This directory contains static files that are served directly by Next.js at the root URL.

## Directory Structure

```
public/
├── images/          # Image assets (logos, icons, photos)
├── fonts/           # Custom font files
├── favicon.ico      # Website favicon
├── manifest.json    # PWA manifest
├── robots.txt       # Search engine crawling rules
└── sitemap.xml      # SEO sitemap
```

## Usage

### Images

Place images in `/public/images/` and reference them in your components:

```tsx
// In any component
<img src="/images/logo.png" alt="Logo" />

// Or with Next.js Image component
import Image from 'next/image'

<Image 
  src="/images/hero.jpg" 
  alt="Hero" 
  width={1200} 
  height={600}
/>
```

### Fonts

Place custom fonts in `/public/fonts/` and reference in your CSS:

```css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2'),
       url('/fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
```

### Favicon

Replace `favicon.ico` with your own favicon. Supported formats:
- `.ico` (recommended for broad compatibility)
- `.png` or `.svg` (modern browsers)

### Manifest (PWA)

Edit `manifest.json` to customize your Progressive Web App settings:
- App name and description
- Theme colors
- App icons
- Display mode

**Update icons:**
- Create 192x192px icon → `/images/icon-192.png`
- Create 512x512px icon → `/images/icon-512.png`

### Robots.txt

Edit `robots.txt` to control search engine crawling:
- Allow/disallow specific paths
- Update sitemap URL with your domain

### Sitemap.xml

Update `sitemap.xml` with your actual pages:
- Replace `your-domain.com` with your actual domain
- Add/remove URLs as needed
- Update lastmod dates
- Set appropriate priorities

## Best Practices

### Images
- ✅ Use WebP format for better compression
- ✅ Optimize images before upload (TinyPNG, ImageOptim)
- ✅ Use descriptive filenames: `hero-banner.jpg` not `img1.jpg`
- ✅ Keep images under 500KB when possible

### Fonts
- ✅ Use WOFF2 format for best compression
- ✅ Subset fonts to include only needed characters
- ✅ Limit to 2-3 font families maximum

### File Organization
```
images/
  ├── logos/
  │   ├── logo.svg
  │   └── logo-white.svg
  ├── icons/
  │   ├── icon-192.png
  │   └── icon-512.png
  └── content/
      ├── hero-banner.jpg
      └── about-team.jpg
```

## Accessing Static Files

All files in `public/` are accessible at the root URL:

- `/public/images/logo.png` → `https://yourdomain.com/images/logo.png`
- `/public/robots.txt` → `https://yourdomain.com/robots.txt`
- `/public/manifest.json` → `https://yourdomain.com/manifest.json`

## SEO & Performance

### For Better SEO:
1. Update `robots.txt` with your actual domain
2. Customize `sitemap.xml` with all your pages
3. Add Open Graph images to `/images/`
4. Create proper favicons for all devices

### For Better Performance:
1. Optimize all images before uploading
2. Use Next.js `<Image>` component for automatic optimization
3. Enable caching headers in production
4. Use SVG for logos and icons when possible

## Production Deployment

The `public/` folder is automatically included in your Docker image and deployed with your application. No additional configuration needed!

## Notes

- ⚠️ Don't put sensitive files here - they're publicly accessible!
- ⚠️ File names are case-sensitive on Linux servers
- ⚠️ Avoid spaces in filenames - use hyphens instead
- ✅ This directory is included in your Git repository
- ✅ Works seamlessly with Coolify deployment