`README.md`

136 lines
# Angel's Flowers - Premium Ecuadorian Flowers

A modern, professional website for Angel's Flowers - a family-run flower shop in East Los Angeles specializing in premium Ecuadorian roses and arrangements.

## Features

- **Modern Tech Stack**: Built with Next.js 14, React 18, TypeScript, and Tailwind CSS
- **Responsive Design**: Mobile-first approach ensuring perfect display on all devices
- **SEO Optimized**: Proper meta tags, semantic HTML, and optimized content
- **Fast Performance**: Optimized images, code splitting, and modern best practices
- **Accessible**: WCAG compliant with proper ARIA labels and keyboard navigation
- **Professional Design**: Elegant color scheme inspired by Ecuadorian flowers

## Pages

1. **Homepage** - Hero section, featured flowers, family story preview, and CTAs
2. **Flowers** - Complete catalog organized by category (roses, mixed arrangements, special occasions)
3. **About/Our Story** - Family history, timeline, values, and Ecuadorian connection
4. **Contact** - Contact form, business information, map, and FAQs

## Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn

### Installation

1. Install dependencies:
```bash
npm install
```

2. Run the development server:
```bash
npm run dev
```

3. Open [http://localhost:3000](http://localhost:3000) in your browser

### Build for Production

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

## Project Structure

```
angelsflowers/
├── app/                    # Next.js app directory
│   ├── about/             # About page
│   ├── contact/           # Contact page
│   ├── flowers/           # Flowers catalog page
│   ├── layout.tsx         # Root layout with Navbar/Footer
│   ├── page.tsx           # Homepage
│   └── globals.css        # Global styles
├── components/            # Reusable components
│   ├── Navbar.tsx        # Navigation component
│   └── Footer.tsx        # Footer component
├── public/               # Static assets (add images here)
└── package.json          # Dependencies
```

## Customization

### Colors

The color scheme is defined in `tailwind.config.js`:
- **Primary**: Pink/rose tones (customizable)
- **Accent**: Green tones for foliage
- **Warm**: Yellow tones for highlights

### Images

Replace placeholder images with real flower photos:
1. Add high-quality images to `/public/images/`
2. Update image URLs in page components
3. Optimize images for web (recommended: WebP format, max 500KB per image)

### Content

Update business information in:
- `/components/Footer.tsx` - Hours, address, contact info
- `/app/contact/page.tsx` - Contact details, map coordinates
- `/components/Navbar.tsx` - Phone number

## Performance Optimizations

- Image optimization with Next.js Image component
- Code splitting and lazy loading
- CSS optimization with Tailwind's purge
- Font optimization with next/font

## Deployment

### Recommended Platforms

1. **Vercel** (Easiest - made by Next.js creators)
   ```bash
   npm i -g vercel
   vercel
   ```

2. **Netlify**
   - Connect GitHub repository
   - Build command: `npm run build`
   - Publish directory: `.next`

3. **Traditional Hosting**
   ```bash
   npm run build
   # Upload .next, public, and package.json
   # Run: npm start
   ```

## Browser Support

- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers (iOS Safari, Chrome Mobile)

## License

Copyright 2025 Angel's Flowers. All rights reserved.

## Support

For questions or issues, contact the development team or refer to Next.js documentation:
- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://react.dev)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)