## Frontend Customization Guide

Frontend Customization: Learn how to customize LogoAIpro's frontend, including branding, styling, components, layouts, and configuration options. The frontend is built with Next.js 15, Tailwind CSS, Shadcn UI, and TypeScript.

##
Frontend Architecture

### Project Structure

The frontend follows Next.js 15 App Router structure. All code is located in the project root:

    logoai-pro/
    ├── package.json              # Dependencies and scripts
    ├── tsconfig.json            # TypeScript configuration
    ├── next.config.ts           # Next.js configuration
    ├── tailwind.config.ts       # Tailwind CSS configuration
    ├── app/                     # Next.js App Router pages
    │   ├── page.tsx             # Homepage (/)
    │   ├── layout.tsx           # Root layout
    │   ├── dashboard/           # Dashboard pages
    │   │   ├── page.tsx         # Dashboard home
    │   │   ├── credits/         # Credits page
    │   │   ├── generate/        # Logo generation page
    │   │   └── my-designs/      # User's generated logos
    │   ├── generate/             # Logo generation flow
    │   ├── history/              # Logo history
    │   └── api/                  # API route handlers
    ├── components/               # Reusable React components
    │   ├── dashboard/           # Dashboard components
    │   │   ├── sidebar.tsx
    │   │   └── topbar.tsx
    │   ├── landing/             # Landing page components
    │   │   ├── navbar.tsx
    │   │   ├── hero.tsx
    │   │   ├── features.tsx
    │   │   └── footer.tsx
    │   └── ui/                  # Shadcn UI components
    ├── constants/               # Configuration data
    │   └── data.ts              # App configuration
    ├── db/                      # Database schema
    ├── lib/                     # Utility functions
    └── public/                  # Static assets
        ├── favicon.ico
        └── ...

##
Branding & Visual Customization

### 1. Logo and Images

Update your branding assets:

#### Logo

- Header Logo: Update in navigation components
- File Location: Replace logo image in `public/` directory
- Favicon: Update `app/favicon.ico` and `app/icon.tsx`

#### Favicon and Icons

- Replace `app/favicon.ico` with your favicon
- Update `app/icon.tsx` for app icons
- Update `app/apple-icon.tsx` for iOS devices

### 2. Site Metadata

Update site metadata in `app/layout.tsx`:

    export const metadata: Metadata = {
      title: 'LogoAIpro - AI-Powered Logo Generation',
      description: 'Create professional, unique brand identities in seconds with cutting-edge AI technology.',
      keywords: ['AI logo', 'logo generator', 'brand identity', 'AI design', 'logo AI'],
      authors: [{ name: 'Your Name' }],
      openGraph: {
        title: 'LogoAIpro',
        description: 'AI-Powered Logo Generation',
        type: 'website',
        images: ['/opengraph-image.png'],
      },
    };

##
Color Scheme & Theme

### Tailwind CSS Configuration

The theme is configured in `tailwind.config.ts`. Customize colors, fonts, and component styles:

    import type { Config } from "tailwindcss";

    const config: Config = {
      theme: {
        extend: {
          colors: {
            primary: {
              DEFAULT: "#your-primary-color",
              // ... customize brand colors
            },
          },
        },
      },
    };

    export default config;

### CSS Variables

The theme uses CSS variables for consistent styling. Update in `app/globals.css`:

    :root {
      --primary: #your-primary-color;
      --secondary: #your-secondary-color;
      --background: #your-background-color;
      --foreground: #your-foreground-color;
      /* ... more variables */
    }

## 📄 Key Pages Customization

### Homepage (`app/page.tsx`)

Customize the homepage sections:

- Hero Section: Update headline, description, and CTA
- Features Section: Modify feature cards
- Pricing Section: Customize pricing display

### Dashboard Pages

- Dashboard Home: `app/dashboard/page.tsx`
- Logo Generation: `app/dashboard/generate/page.tsx`
- My Designs: `app/dashboard/my-designs/page.tsx`
- Credits: `app/dashboard/credits/page.tsx`

##
Configuration Files

### Credit Packages Configuration

Credit packages are configured in your pricing configuration file:

    export const creditPackages = [
      {
        name: "Basic Pack",
        credits: 50,
        price: "$9.99",
        pricePerCredit: "$0.20 per credit",
        description: "Perfect for testing and small projects.",
      },
      // ... more plans
    ];

##
Responsive Design

### Mobile-First Approach

LogoAIpro is fully responsive and mobile-optimized:

- Breakpoints: Uses Tailwind's default breakpoints:
  - `sm`: 640px
  - `md`: 768px
  - `lg`: 1024px
  - `xl`: 1280px
- Responsive Classes: Use Tailwind responsive prefixes:

      <div className="text-lg md:text-xl lg:text-2xl">
      <div className="p-4 md:p-6 lg:p-8">

##
Build and Deployment

### Development

    # Install dependencies
    npm install

    # Start development server
    npm run dev

    # Application runs on http://localhost:3000
    # API routes available at http://localhost:3000/api

### Production Build

    # Build for production
    npm run build

    # Start production server
    npm run start

    # Or deploy to Vercel/AWS EC2
    # See deployment guides for details

Next Steps:

- Configure Pricing & Credits
- Complete Environment Variables Setup
- Learn how users interact with the UI