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

Favicon and Icons

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:

Dashboard Pages

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:

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: