# Welcome Route Setup - ManaCore Web

## ✅ Files Created

1. **`/src/lib/config/apps.ts`** - App configuration system
2. **`/src/routes/welcome/+page.svelte`** - Welcome page component
3. **`/src/routes/auth/callback/+page.svelte`** - Auth callback handler

## 🚀 How to Test

### 1. Access Welcome Page Directly

Open your browser and navigate to:

```
http://localhost:5173/welcome?appName=memoro
```

Try different apps:
- `?appName=memoro` - Blue theme, voice memo features
- `?appName=manadeck` - Purple theme, flashcard features
- `?appName=storyteller` - Amber theme, writing features
- `?appName=manacore` - Indigo theme, account management
- No parameter - Default Mana platform overview

### 2. Test Email Verification Flow

To test the full flow, you need to configure Supabase email templates:

**In Supabase Dashboard > Authentication > Email Templates:**

```html
<h2>Confirm your signup</h2>
<p>Follow this link to confirm your user:</p>
<p><a href="{{ .ConfirmationURL }}&appName=memoro">Confirm your email</a></p>
```

Then:
1. Register a new account
2. Check email for confirmation link
3. Click link → Should redirect to welcome page with Memoro branding
4. Click "Get Started" → Dashboard

## 🎨 Supported Apps

| App Name | Theme Color | Features |
|----------|-------------|----------|
| `memoro` | Blue #3B82F6 | Voice memos, AI transcription |
| `manadeck` | Purple #8B5CF6 | Flashcards, spaced repetition |
| `storyteller` | Amber #F59E0B | Creative writing, AI assistant |
| `manacore` | Indigo #6366F1 | Account management, SSO |
| (none) | Indigo #6366F1 | Platform overview |

## 📝 Adding New Apps

Edit `/src/lib/config/apps.ts`:

```typescript
export const appConfigs: Record<string, AppConfig> = {
  // ... existing apps

  mynewapp: {
    name: 'mynewapp',
    displayName: 'My New App',
    tagline: 'Your tagline here',
    description: 'What your app does',
    logoEmoji: '🚀',
    primaryColor: '#FF6B6B',
    accentColor: '#FF8E8E',
    features: [
      {
        icon: '✨',
        title: 'Feature Name',
        description: 'Feature description',
        color: '#FF6B6B'
      }
      // Add 4-6 features
    ],
    dashboardRoute: '/dashboard'
  }
};
```

## 🔧 Customization

### Change Colors

Colors are in the app config. Each app has:
- `primaryColor` - Main brand color (headers, buttons)
- `accentColor` - Secondary color
- Feature-specific colors for each feature card

### Add Custom Instructions

Edit `/src/routes/welcome/+page.svelte` around line 125:

```svelte
{:else if appConfig.name === 'mynewapp'}
  <div class="flex items-start gap-3">
    <div class="mt-1 text-xl">🎯</div>
    <div>
      <h4>First Step</h4>
      <p>Instructions for your app...</p>
    </div>
  </div>
```

## 🐛 Troubleshooting

**Issue: 404 Error on /welcome**
- Solution: Refresh the dev server (files created while server running)

**Issue: Page shows Mana branding instead of app branding**
- Solution: Check appName parameter in URL is correct
- Verify app exists in `apps.ts` config

**Issue: localStorage not persisting**
- Solution: Check browser console for errors
- Clear localStorage and try again

## 📚 Next Steps

1. Configure Supabase email templates to include `&appName=memoro`
2. Test registration flow end-to-end
3. Customize colors and features per app
4. Add more apps to the config as needed

## 🎉 Usage Summary

**Direct Access:**
```
http://localhost:5173/welcome?appName=memoro
```

**From Email Verification:**
```
User registers → Email sent with appName
→ Click confirmation link
→ /auth/callback processes
→ Redirects to /welcome?appName=memoro
→ Beautiful welcome page shows
→ User clicks "Get Started"
→ Dashboard
```

That's it! The welcome route is ready to use. 🚀