restructuring_plan.md

Champion Electrical - Project Restructuring Plan

Key Legend

• [ ] To Do
• [x] Done
• [-] Skipped / Not Applicable

Goal:

Organize the project files into a standard Next.js (App Router) structure and create necessary configuration files to enable the development server to run correctly.

Current State:

• Project root: C:\Projects\Champion-Electrical
• package.json, pnpm-lock.yaml, and node_modules exist in the root.
• Core application files (layout.tsx, page.tsx, globals.css) and components (Header.tsx, etc.) are incorrectly located directly in the root.
• Essential configuration files (next.config.mjs, tsconfig.json, tailwind.config.ts, postcss.config.js) are missing.
• The champion-electrical-export directory appears to be an incomplete/outdated export and should be ignored for core development.

Action Steps:

[x] 1. Create Configuration Files

Create the following files in the project root (C:\Projects\Champion-Electrical) with the standard content below:

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // Add any other necessary Next.js configurations here
  // For App Router, ensure experimental.appDir is not needed (it's default in newer versions)
};

export default nextConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", // Include if using pages dir eventually
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // Add custom theme extensions from globals.css if needed, e.g.:
      colors: {
        'primary-blue': '#2A4D69',
        'primary-blue-light': '#3A6389',
        'primary-blue-dark': '#1A3D59',
        'accent-gold': '#C8A951',
        'accent-gold-light': '#D8B961',
        'accent-gold-dark': '#B89941',
        'background-light': '#F8F5F0',
        'background-off-white': '#F5F2EA',
        'text-dark': '#333333',
        'text-medium': '#555555',
        'text-light': '#777777',
      },
      fontFamily: {
        sans: ['Lato', 'sans-serif'], // Ensure 'Lato' matches globals.css import/usage
        serif: ['Playfair Display', 'serif'], // Ensure 'Playfair Display' matches globals.css
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      // Add other extensions like spacing, keyframes etc. if defined
    },
  },
  plugins: [],
};
export default config;

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

[x] 2. Create Directory Structure

Create the following directory structure within the project root:

src/
├── app/
├── components/
└── lib/

[x] 3. Move Existing Files

Move the following files from the project root to their correct locations:

• layout.tsx -> src/app/layout.tsx
• page.tsx -> src/app/page.tsx
• globals.css -> src/app/globals.css
• Header.tsx -> src/components/Header.tsx
• Footer.tsx -> src/components/Footer.tsx
• ZipCodeValidator.tsx-> src/components/ZipCodeValidator.tsx
• CustomIcons.tsx -> src/components/CustomIcons.tsx
• PremiumElements.tsx -> src/components/PremiumElements.tsx
• supabaseClient.ts -> src/lib/supabaseClient.ts
• emailService.ts -> src/lib/emailService.ts

(Note: This list is based on files identified in the root. Double-check if other relevant .tsx or .ts files exist in the root that should also be moved, e.g., specific page components that might belong under src/app/ subdirectories as per the documentation).

[x] 4. Update Import Paths (Potential Follow-up)

After moving the files, import paths within these files (and potentially others not moved yet) might be broken. For example, Header.tsx might import CustomIcons.tsx. These paths will need to be updated relative to the new file locations (e.g., changing import CustomIcons from './CustomIcons' to import CustomIcons from './CustomIcons' if they are in the same directory, or using alias paths like import CustomIcons from '@/components/CustomIcons' if the tsconfig.json paths are set up).

Next Steps After Restructuring:

1. Run pnpm dev: Attempt to start the development server from the root directory (C:\Projects\Champion-Electrical).
2. Debug Errors: Address any errors that occur during startup or runtime. Common issues might include:
   • Incorrect import paths (fix as described in Step 4 above).
   • Missing packages (install using pnpm add <package-name> and add to package.json).
   • TypeScript errors (adjust types or code as needed).
   • Tailwind CSS class issues (ensure tailwind.config.ts includes all necessary paths and theme customizations).
3. Verify Functionality: Once the server runs, test the landing page flow and core site navigation.
4. Supabase Table: Remember to create the leads table in the Supabase project as outlined in the documentation.md file, including defining columns and configuring Row Level Security (RLS).
5. Email Service: Plan and implement the email sending logic in src/lib/emailService.ts.

Completion Summary (April 28, 2025)

This restructuring plan is now complete. The project files were organized into the standard Next.js App Router structure (src/app, src/components, src/hooks, src/lib). Necessary configuration files (next.config.mjs, tsconfig.json, tailwind.config.ts, postcss.config.js) were created.

During the process, we identified multiple potential codebase versions:

1. Files initially in the root.
2. An export in champion-electrical-export/.
3. An unpacked archive in contents of a zip archive found/.

After comparison and investigation, the version backed up to archive_20250428_133909/ was identified as the most recent stable version containing the correct styling (gold accents, etc.) and page structure (excluding the blog). This version was restored.

The hooks directory, missing from the restored version, was copied from the unpacked archive (contents of a zip archive found/.../src/hooks).

Recent Changes/Fixes Applied:

• The frosted-glass style for the header was adjusted in globals.css (increased background opacity to 95%) to improve text contrast on scroll.
• The link on the lead thank-you page (src/app/thank-you/lead/page.tsx) was corrected to point to /core-site.

Next Steps (Reflected in todo.md):

• Implement the Supabase backend logic for lead capture (table creation, RLS, form submission handling).
• Implement the email notification service (emailService.ts).
• Create the missing blog section (src/app/core-site/blog).
• Continue with general testing and other items outlined in todo.md.