# Project Summary
**GrillMaster Pro** is a premium e-commerce platform dedicated to high-end BBQ and grilling equipment, specifically targeting outdoor cooking enthusiasts, particularly men aged 35 and older. The website features a curated selection of products, including ceramic grills, gas and charcoal BBQs, smoker boxes, premium knives, cast iron cookware, and wood and charcoal. The platform is designed with a focus on SEO and compliance with Google Ads standards, ensuring a professional appearance with clear navigation and a user-friendly layout. Recent updates have introduced a blog section for sharing tips and recipes, as well as essential legal pages such as Privacy Policy and Terms of Service.

# Project Module Description
The project consists of several functional modules:
- **Header**: Contains navigation links and a search bar.
- **Hero Section**: Displays a prominent image with a tagline and calls to action.
- **Category Grid**: Showcases product categories with images and descriptions.
- **Product Cards**: Lists top-rated products with details and reviews.
- **Blog Section**: Features articles with tips and recipes for BBQ enthusiasts.
- **Trust Banner**: Displays trust signals such as warranty and support information.
- **Footer**: Contains links to policies, contact information, and social media.
- **Pages**: Includes Product Catalog, Product Detail, Shopping Cart, About Us, Contact, Blog, Blog Detail, Privacy Policy, and Terms of Service pages.

# Directory Tree
```
app/
└── frontend/
    ├── README.md                     # Project overview and setup instructions
    ├── components.json               # Component structure and details
    ├── eslint.config.js              # ESLint configuration for code quality
    ├── index.html                    # Main HTML file
    ├── package.json                  # Project dependencies and scripts
    ├── postcss.config.js             # PostCSS configuration for CSS processing
    ├── public/
    │   ├── favicon.svg               # Website favicon
    │   └── robots.txt                # Instructions for web crawlers
    ├── seo-scripts/
    │   ├── build.js                  # Build script for SEO assets
    │   ├── convert-blog-to-html.js   # Script to convert blog posts
    │   └── generate-sitemap.js       # Sitemap generation script
    ├── site.config.json              # Configuration for site settings
    ├── src/
    │   ├── App.css                   # Main CSS styles
    │   ├── App.tsx                   # Main application component
    │   ├── components/                # Reusable components
    │   ├── hooks/                     # Custom hooks
    │   ├── lib/                       # Utility functions and API calls
    │   ├── pages/                    # Page components including Products, ProductDetail, Cart, About, Contact, Blog, BlogPost, PrivacyPolicy, Terms
    │   ├── vite-env.d.ts             # TypeScript definitions
    │   ├── tailwind.config.ts         # Tailwind CSS configuration
    │   ├── tsconfig.*.json            # TypeScript configuration files
    │   └── vite.config.ts             # Vite configuration for build process
    └── uploads/                      # Uploaded assets
```

# File Description Inventory
- **README.md**: Overview and setup instructions for the project.
- **components.json**: Documentation for component structure.
- **eslint.config.js**: Configuration file for ESLint to enforce coding standards.
- **index.html**: Entry point of the application.
- **package.json**: Lists dependencies and scripts for building and running the project.
- **postcss.config.js**: Configuration for PostCSS to enhance CSS processing.
- **public/**: Contains static assets like favicon and robots.txt.
- **seo-scripts/**: Scripts for SEO-related tasks such as generating sitemaps.
- **site.config.json**: Configuration settings for the site.
- **src/**: Contains the main application code including styles, components, and pages.
- **uploads/**: Directory for uploaded images and assets.

# Technology Stack
- **React**: Frontend library for building user interfaces.
- **TypeScript**: For type safety and enhanced development experience.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Vite**: Build tool for fast development and optimized production builds.
- **PostCSS**: Tool for transforming CSS with JavaScript plugins.
- **ESLint**: Tool for identifying and fixing problems in JavaScript code.

# Usage
To get started with the project, follow these steps:
1. Install dependencies:
   ```
   pnpm install
   ```
2. Build the project:
   ```
   pnpm run build
   ```
3. Run the development server:
   ```
   pnpm run dev
   ```
