`QUICKSTART.md`

193 lines
# Angel's Flowers - Quick Start Guide

## Get Running in 3 Steps

### Step 1: Install Dependencies (2-3 minutes)

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

This installs Next.js, React, TypeScript, Tailwind CSS, and all dependencies.

### Step 2: Start the Development Server (10 seconds)

```bash
npm run dev
```

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

### Step 3: Explore the Site

You now have a fully functional website with:
- Homepage with hero and featured flowers
- Complete flowers catalog (14+ products)
- About page with family story
- Contact page with form and info

## What You'll See

### Homepage (/)
- Beautiful hero section
- "Why Choose Us" features
- Featured flower collections
- Family story preview
- Call-to-action sections

### Flowers Page (/flowers)
- 14 different flower products
- Ecuadorian roses collection
- Mixed arrangements
- Special occasion flowers
- Detailed product cards with pricing

### About Page (/about)
- Family origin story
- Company timeline (1995-2025)
- Core values
- Ecuador connection explanation
- Team member profiles

### Contact Page (/contact)
- Working contact form
- Business information
- Map section
- FAQ section
- Social media links

## Site Features

### Design
- Professional, modern design
- Warm color scheme (pink/rose primary, green accents)
- Elegant typography (Playfair Display + Inter)
- High-quality placeholder images

### Responsive
- Mobile-first design
- Works on phones, tablets, desktops
- Touch-friendly navigation
- Mobile hamburger menu

### Performance
- Fast loading with Next.js
- Optimized fonts
- Image optimization ready
- Code splitting

### SEO
- Proper meta tags
- Semantic HTML
- Sitemap included
- robots.txt configured

## Next Steps After Running

### 1. Customize Content
See `SETUP.md` for detailed customization instructions.

Quick updates needed:
- Phone number: Search for `(323) 123-4567` and replace
- Email: Search for `info@angelsflowers.com` and replace
- Address: Update in Footer and Contact page

### 2. Add Real Images
- Create folder: `mkdir -p public/images`
- Add your flower photos
- Update image URLs in components

### 3. Configure Integrations
- Google Maps API (for contact page map)
- Contact form backend (Formspree, EmailJS, or custom)
- Google Analytics (optional)

## File Structure Overview

```
/root/WebsitesMisc/angelsflowers/
├── app/
│   ├── page.tsx                 # Homepage
│   ├── flowers/page.tsx         # Flowers catalog
│   ├── about/page.tsx           # Our story
│   ├── contact/page.tsx         # Contact page
│   ├── layout.tsx               # Site layout
│   └── globals.css              # Styles
├── components/
│   ├── Navbar.tsx               # Navigation
│   └── Footer.tsx               # Footer
├── package.json                 # Dependencies
└── tailwind.config.js           # Design system
```

## Development Commands

```bash
# Start development server (with hot reload)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint
```

## Deployment

### Quick Deploy to Vercel (Recommended)
```bash
npm i -g vercel
vercel
```

### Or Deploy to Netlify
1. Push code to GitHub
2. Connect to Netlify
3. Deploy automatically

## Troubleshooting

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

### Installation Issues?
```bash
# Clear and reinstall
rm -rf node_modules
npm install
```

### Need Help?
- Check `README.md` for full documentation
- Check `SETUP.md` for detailed setup
- Check `PROJECT_SUMMARY.md` for complete overview

## Technologies Used

- **Next.js 14**: React framework with App Router
- **React 18**: UI library
- **TypeScript**: Type-safe JavaScript
- **Tailwind CSS**: Utility-first styling
- **React Icons**: Icon library

## Contact & Support

Built for Angel's Flowers - East Los Angeles

For technical questions, see documentation files or Next.js docs:
- https://nextjs.org/docs
- https://tailwindcss.com/docs

---

**Ready to go!** Just run `npm install` and `npm run dev` to see your site.