finlion-website/cline_docs/memoryBank.md

# FinLion Website - AI Assistant Memory Bank

## IMPORTANT: User Profile & Expectations

**USER: Eliza**
- **Experience Level**: Novice web developer, NOT interested in learning web development
- **Role**: Project owner and content provider
- **Expectation**: AI assistant (Cline) handles ALL technical work
- **User Interaction**: Provides content, approves changes, makes high-level requests only
- **NO USER EDUCATION**: Do not teach or explain technical concepts unless specifically asked

## AI Assistant Responsibilities

### What I (AI) Do Autonomously:
1. ✅ **Edit/Create/Delete Files**: All code changes without user intervention
2. ✅ **Git Operations**: Pull, commit, push using Eliza's credentials
3. ✅ **Local Testing**: Test changes before deployment
4. ✅ **Troubleshooting**: Debug and fix issues independently
5. ✅ **Documentation**: Update memory bank after significant changes
6. ✅ **Dependencies**: Install and manage npm/pnpm packages

### What User Does:
1. 📝 **Content Requests**: "Update homepage", "Add new service"
2. ✅ **Approve Actions**: Review and approve proposed changes
3. 📦 **Provide Assets**: Supply images, text, content when needed
4. 🎯 **Strategic Decisions**: Final say on design/content direction

## Critical Credentials & Access

### Git Access (Eliza's Account)
- **Repository**: https://gitea.sigd.net/chaulmark/finlion-website
- **Username**: `eliza`
- **Token**: `3dba996c9eca5b6267f7cd1b0996a94aac1ac0d5` (created 3/5/2026)
- **Local Path**: `/Users/Eliza/Writing_Project/FinLion`
- **Remote**: Configured with authentication on 3/13/2026

### Git Configuration
- **User Name**: eliza
- **User Email**: eliza@gitea.sigd.net
- **Branch**: main
- **Status**: Working tree clean, up to date with origin/main

## AI Workflow for Changes

### Standard Change Process (I Handle Everything)
1. **User Request**: User says "Update homepage" or "Add service"
2. **Pull Latest**: `git pull` to ensure working with latest code
3. **Make Changes**: Edit necessary files (no user involvement)
4. **Test Locally**: Run `pnpm dev` to verify changes work
5. **Commit & Push**: 
   ```bash
   git add .
   git commit -m "Descriptive message"
   git push
   ```
6. **Report**: Tell user "Done! Changes pushed to repository"

### Git Commands I Use (User Never Runs These)
```bash
# Start every task
git pull

# After making changes
git add .
git commit -m "Clear description of what changed"
git push

# Check what changed (for my reference)
git status
git diff
git log --oneline -15
```

## Token Management (If Needed)

### When Token Expires:
**What I Tell User**: "Your Git access token has expired. Please generate a new one:"

**User Steps** (only these 3):
1. Go to https://gitea.sigd.net
2. Settings → Applications → Access Tokens → Generate New Token
3. Copy the new token and give it to me

**What I Do**: Update the git remote configuration with new token
```bash
git remote set-url origin https://eliza:NEW_TOKEN@gitea.sigd.net/chaulmark/finlion-website.git
git pull
```

## Website Technical Stack

### Frontend Technologies
- **React**: 19.0.0 - Core UI framework
- **Next.js**: 15.0.4 - React framework with App Router
- **TypeScript**: Latest - Type safety and enhanced development
- **Tailwind CSS**: Latest - Utility-first CSS framework
- **Framer Motion**: Latest - Animations and micro-interactions

### Backend Technologies
- **Next.js API Routes**: Built-in API endpoints
- **Nodemailer**: Email service integration
- **Upstash Redis**: Rate limiting and caching

### Development Tools
- **pnpm**: 9.14.2 - Package manager
- **Docker**: Containerization for development and production
- **ESLint**: Code quality enforcement

### Architecture
- **Next.js App Router**: Modern routing system
- **Server-Side Rendering**: For better SEO and performance
- **API Routes**: Backend functionality within Next.js
- **Component-Based**: Reusable React components

## Website Components (What I Manage)

### Pages (src/app/)
1. **page.tsx** (root): Homepage/landing page
2. **about/page.tsx**: About page
3. **services/page.tsx**: Services showcase
4. **contact/page.tsx**: Contact form

### Key Components (src/components/)

#### Layout Components (components/layout/)
- **Header.tsx**: Site header with branding
- **Navigation.tsx**: Main navigation menu
- **Footer.tsx**: Site footer with links and info

#### Home Components (components/home/)
- **Hero.tsx**: Homepage hero section
- **Services.tsx**: Services overview on homepage

#### Shared Components (components/shared/)
- **Toast.tsx**: Notification system

#### UI Components (components/ui/)
- **Button.tsx**: Reusable button component

#### Other Components
- **Modal.tsx**: Modal dialog component
- **ServiceCard.tsx**: Service display card

### API Routes (src/app/api/)
- **contact/route.ts**: Contact form submission endpoint with rate limiting

### Key Features I Maintain

#### Contact Form (contact/page.tsx + api/contact/route.ts)
- Professional contact form with validation
- Rate-limited API endpoint for security
- Email integration via Nodemailer
- Success/error notifications

**When User Says**: "Fix contact form" or "Email not working"

**What I Do**:
1. Check `.env` file for email configuration
2. Verify API route is working
3. Test form submission locally
4. Fix any issues in contact form or API
5. Test email delivery
6. Commit and push changes

#### Services Page (services/page.tsx)
- Service cards displaying offerings
- Responsive layout
- Professional design

**When User Says**: "Add new service" or "Update service"

**What I Do**:
1. Open `src/data/services.ts` or `src/app/services/page.tsx`
2. Add/update service information
3. Ensure proper formatting and styling
4. Test locally to verify appearance
5. Commit: "Add/Update service: [Service Name]"
6. Push changes

## Environment Variables (.env)

**Critical**: Never commit this file!

```env
# Email Configuration
SMTP_HOST=your-smtp-host
SMTP_PORT=your-smtp-port
SMTP_USER=your-smtp-user
SMTP_PASS=your-smtp-password
FROM_EMAIL=your-from-email
TO_EMAIL=your-to-email

# Redis Configuration (for rate limiting)
UPSTASH_REDIS_REST_URL=your-redis-url
UPSTASH_REDIS_REST_TOKEN=your-redis-token
```

## Development Commands

### Local Development
```bash
# Install dependencies
pnpm install

# Start development server (port 3000)
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint
```

### Docker Commands
```bash
# Development with Docker
docker compose -f docker-compose.dev.yml up

# Production with Docker
docker compose up --build -d

# View logs
docker logs finlion-web
```

## Task Execution Patterns (AI Internal Process)

### Task: "Update Homepage Content"
```
1. User Request: "Change the hero text on homepage"
2. I pull latest: git pull
3. I identify correct file: src/components/home/Hero.tsx or src/app/page.tsx
4. I make the content changes
5. I test locally: pnpm dev (verify changes look good)
6. I commit: "Update homepage: change hero text"
7. I push: git push
8. I report: "Done! Homepage updated and pushed to repository"
```

### Task: "Add New Service"
```
1. User Request: "Add [Service Name] to services page"
2. User provides: Service description, details
3. I pull latest: git pull
4. I open src/data/services.ts or relevant file
5. I add the new service entry
6. I test locally: pnpm dev (verify service displays correctly)
7. I commit: "Add new service: [Service Name]"
8. I push: git push
9. I report: "Done! New service added to services page"
```

### Task: "Fix Contact Form"
```
1. User reports: "Contact form not working"
2. I pull latest: git pull
3. I diagnose issue:
   - Check src/app/contact/page.tsx (frontend)
   - Check src/app/api/contact/route.ts (backend)
   - Verify .env email configuration
4. I fix the problem
5. I test locally: pnpm dev, submit test form
6. I commit: "Fix contact form: [description of fix]"
7. I push: git push
8. I report: "Fixed! Contact form is working now. [Brief explanation]"
```

### Task: "Update Styling/Design"
```
1. User Request: "Change button color" or "Update layout"
2. I pull latest: git pull
3. I identify correct component or style file
4. I make styling changes (Tailwind CSS classes)
5. I test locally: pnpm dev (verify visual changes)
6. I commit: "Update styling: [description]"
7. I push: git push
8. I report: "Done! Design changes applied"
```

### Task: "Install New Package/Dependency"
```
1. User Request: "Add animation library" or "Need new feature"
2. I pull latest: git pull
3. I install package: pnpm add [package-name]
4. I implement the feature using the package
5. I test locally: pnpm dev
6. I commit: "Add [package-name] and implement [feature]"
7. I push: git push
8. I report: "Done! [Feature] added and working"
```

## Critical Files I Work With

### Main Code Files
- `src/app/page.tsx` - Homepage
- `src/app/about/page.tsx` - About page
- `src/app/services/page.tsx` - Services page
- `src/app/contact/page.tsx` - Contact page
- `src/app/layout.tsx` - Root layout (affects all pages)
- `src/app/api/contact/route.ts` - Contact form API endpoint
- `src/data/services.ts` - Services data
- `src/components/` - All React components
- `.env` - Environment variables (SECRETS - never commit!)
- `.env.example` - Environment variable template

### Configuration Files
- `package.json` - Dependencies and scripts
- `next.config.ts` - Next.js configuration
- `tailwind.config.ts` - Tailwind CSS configuration
- `tsconfig.json` - TypeScript configuration
- `docker-compose.yml` - Production Docker setup
- `docker-compose.dev.yml` - Development Docker setup

### Asset Directories
- `public/` - Static assets (images, icons, etc.)
- `public/images/` - Image files
- `src/styles/globals.css` - Global CSS styles

## Project Structure
```
/Users/Eliza/Writing_Project/FinLion/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── page.tsx           # Homepage
│   │   ├── layout.tsx         # Root layout
│   │   ├── about/             # About page
│   │   ├── services/          # Services page
│   │   ├── contact/           # Contact page
│   │   └── api/               # API routes
│   ├── components/            # React components
│   │   ├── home/             # Home-specific components
│   │   ├── layout/           # Layout components
│   │   ├── shared/           # Shared/reusable components
│   │   └── ui/               # UI components
│   ├── data/                 # Data files
│   ├── lib/                  # Utility functions
│   ├── styles/               # CSS/styling files
│   └── types/                # TypeScript type definitions
├── public/                    # Static assets
│   └── images/               # Image files
├── cline_docs/               # Documentation (this file)
├── .env                      # Environment variables (SECRET)
├── .env.example              # Env template
├── package.json              # Dependencies
├── pnpm-lock.yaml            # Lock file
├── next.config.ts            # Next.js config
├── tailwind.config.ts        # Tailwind config
├── tsconfig.json             # TypeScript config
├── docker-compose.yml        # Production Docker
└── docker-compose.dev.yml    # Development Docker
```

## Common Issues & AI Solutions

### Issue: "Contact form not working"
**What I Do**: Check API route, verify .env email settings, test form submission, fix and push changes

### Issue: "Page not displaying correctly"
**What I Do**: Check component files, verify Tailwind classes, test responsive design, fix and push

### Issue: "Dependencies issue"
**What I Do**: Run `pnpm install`, check for version conflicts, update dependencies if needed, test and push

### Issue: "Build errors"
**What I Do**: Run `pnpm build` locally, identify errors, fix TypeScript/import issues, verify build succeeds, push

### Issue: "Images not loading"
**What I Do**: Check public/ directory, verify file paths, ensure proper Next.js Image component usage, fix and push

### Issue: "Git token expired"
**What I Tell User**: "Please generate new token at gitea.sigd.net → Settings → Applications → Access Tokens"
**What I Do**: Update git remote with new token when provided

## Communication Style

### Good Responses (User-Friendly):
✅ "Done! I've updated the homepage hero text. Changes are pushed to the repository."
✅ "Fixed the contact form - it was a configuration issue. Email now works properly!"
✅ "I've added the new service to your services page. It's ready for deployment."

### Bad Responses (Too Technical):
❌ "I updated the Hero.tsx component in src/components/home/ directory..."
❌ "The SMTP_PORT environment variable was incorrectly set to 465..."
❌ "I modified the ServiceCard props interface to accept a new type..."

**Rule**: Report WHAT was done and RESULTS, not HOW it was done technically

## Quick Reference

### User Says → AI Does
- "Update [page] content" → Edit page file, test locally, commit, push
- "Add new service" → Edit services data/page, test, commit, push
- "Fix contact form" → Diagnose, fix API/form/env, test, commit, push
- "Change styling" → Update Tailwind classes, test, commit, push
- "Add feature" → Install packages if needed, implement, test, commit, push
- "Images not working" → Check paths, fix issues, commit, push

### AI Never Asks User To:
- ❌ Run git commands
- ❌ Edit code files
- ❌ Install dependencies
- ❌ Run development server
- ❌ Debug code
- ❌ Configure Docker

### AI Always:
- ✅ Pull before starting work
- ✅ Test locally when possible
- ✅ Commit with clear messages
- ✅ Push to Git repository
- ✅ Report completion simply
- ✅ Update this memory bank after significant changes

## Recent History (Reference Only)
- **March 13, 2026**:
  - Cloned repository from Gitea
  - Configured Git authentication with Eliza's credentials
  - Set up git user configuration (eliza / eliza@gitea.sigd.net)
  - Created comprehensive memory bank based on DeafGain template
  - Repository status: Working tree clean, up to date with origin/main
  - Ready for development work

## Status
🟢 **System Ready** - Repository cloned, git configured, ready for development
🤖 **AI Assistant Ready** - Waiting for user requests to make changes, add content, or fix issues
📝 **Next Steps**: User to provide content requests or development tasks