# Pennyzo Web

A modern React TypeScript web application for Pennyzo, built with Tailwind CSS and custom branding.

## Features

- React 18 with TypeScript for type safety
- Tailwind CSS with custom color palette
- Responsive design with mobile-first approach
- Sticky navigation header
- Custom brand colors: deep-navy, brass, off-white, light-gray

## Getting Started

1. Install dependencies:

   ```bash
   npm install
   ```

2. Start the development server:

   ```bash
   npm run dev
   ```

3. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Custom Colors

The project includes a custom Tailwind color palette:

- `deep-navy`: #0A192F
- `brass`: #D4AF37
- `off-white`: #F8F8F8
- `light-gray`: #CCD6F6

## Project Structure

```
src/
├── components/
│   ├── Header.tsx          # Main navigation header
│   ├── HeroSection.tsx     # Hero section with CTA
│   ├── FeaturesSection.tsx # Features grid with cards
│   ├── WhyPennyzoSection.tsx # Benefits section
│   └── Footer.tsx          # Footer with links and contact info
├── App.tsx                 # Main application component
├── index.tsx              # Application entry point
└── index.css              # Tailwind CSS imports
```

## Available Scripts

- `npm run dev` - Runs the app in development mode with Vite
- `npm run build` - Builds the app for production
- `npm run preview` - Preview the production build locally