LANDING_PAGE_COMPONENT.md

This document provides comprehensive documentation for the LandingPage component, which serves as the main entry point and homepage for the Aitana AI platform.

Overview

The LandingPage component (src/components/LandingPage.tsx) is a React functional component that provides the primary user interface for both authenticated and unauthenticated users. It features a tabbed interface that adapts based on user authentication state and serves as the central hub for accessing assistants, templates, and platform features.

Key Features

Dynamic User Experience

  • Authentication-aware UI: Displays different content and actions based on user login state
  • Adaptive tab navigation: Shows relevant tabs for logged-in vs logged-out users
  • Smart default tab selection: Automatically selects appropriate starting tab based on user state

Core Functionality

  • Assistant Management: Browse user’s personal assistants and public assistants
  • Template Selection: Explore and select from available assistant templates
  • Tool Discovery: Interactive preview of available AI tools and capabilities
  • Navigation Hub: Quick access to major platform features (admin, create, feed, multi-chat)

Props Interface

interface LandingPageProps {
  userState: UserState;
  currentUser: User | null;
  onShowLogin: () => void;
  onLogout: () => void;
  // Assistants & Templates
  userAssistants: AssistantDisplay[];
  publicAssistants: AssistantDisplay[];
  templates: Template[];
  // Handlers
  onViewAssistant: (assistant: AssistantDisplay) => void;
  onCreateAssistant: (templateId: string) => void;
}

Required Props

  • userState (UserState): Current authentication state of the user
  • currentUser (User | null): Firebase user object or null if not authenticated
  • onShowLogin (() => void): Callback to trigger login dialog
  • onLogout (() => void): Callback to handle user logout
  • userAssistants (AssistantDisplay[]): Array of assistants owned/accessible by the user
  • publicAssistants (AssistantDisplay[]): Array of publicly available assistants
  • templates (Template[]): Array of assistant templates available for creation
  • onViewAssistant ((assistant: AssistantDisplay) => void): Callback when user selects an assistant
  • onCreateAssistant ((templateId: string) => void): Callback when user creates assistant from template

Tab Structure

The component uses a responsive tab interface with three main sections:

1. Welcome Tab (welcome)

  • Available to: All users (logged-in and logged-out)
  • Purpose: Introduction to the Aitana platform and core features
  • Content:
    • Platform overview and description
    • Welcome assistant card (if available)
    • Account creation/assistant creation card
    • Platform branding and hero section
// Welcome assistant detection
const welcomeAssistant = useMemo(() => {
  return publicAssistants.find(a => a.name === 'Welcome to Aitana');
}, [publicAssistants]);

2. Explore Tools Tab (features)

  • Available to: All users
  • Purpose: Interactive demonstration of available AI tools
  • Content:
    • ToolSelector component with read-only tool preview
    • Default tools: preview, highlights, plots, alerts, tooltips, file-browser, Google Search, vertex_search
    • Call-to-action for tool configuration (requires login)
// Read-only tools for demo
const readOnlySelectedTools = useMemo(() => [
  'preview', 'highlights', 'plots', 'alerts', 'tooltips', 'file-browser', 
  'Google Search_retrieval', 'vertex_search'
], []);

3. Dynamic Third Tab

For Logged-Out Users: Templates Tab (templates)

  • Purpose: Preview available assistant templates
  • Content:
    • EmissaryChoose component for template selection
    • Public assistants section
    • Sign-in prompts and calls-to-action

For Logged-In Users: My Assistants Tab (my-assistants)

  • Purpose: Access personal and public assistants
  • Content:
    • User’s personal assistants via EmissaryListCompact
    • Navigation buttons (Feed, Multi-Chat, View All)
    • Public assistants section
    • Empty state with assistant creation prompt

State Management

Tab State Logic

The component manages active tab state with smart defaults:

// Initialize activeTab based on userState
const [activeTab, setActiveTab] = useState(() =>
  userState === 'not-logged-in' ? 'welcome' : 'my-assistants'
);

// Effect to update active tab on login/logout
useEffect(() => {
  const newDefaultTab = userState === 'not-logged-in' ? 'welcome' : 'my-assistants';
  const oldDefaultTab = userState !== 'not-logged-in' ? 'welcome' : 'my-assistants';
  if (activeTab === oldDefaultTab) {
    setActiveTab(newDefaultTab);
  }
}, [userState]);

Template Selection

const [selectedTemplate, setSelectedTemplate] = useState<string>('');

const handleTemplateSelect = (templateId: string) => {
  setSelectedTemplate(templateId);
};

const handleContinueWithTemplate = () => {
  if (userState !== 'not-logged-in' && onCreateAssistant && selectedTemplate) {
    onCreateAssistant(selectedTemplate);
  } else if (userState === 'not-logged-in') {
    onShowLogin();
  }
};

Component Integration

Child Components Used

  • EmissaryListCompact: Displays lists of assistants in compact card format
  • EmissaryChoose: Template selection interface for assistant creation
  • ToolSelector: Interactive tool configuration and preview interface
  • Radix UI Components: Button, Card, Tabs, Avatar for consistent UI elements

The component includes navigation to key platform areas:

  • Create Assistant: /create route
  • Admin Panel: /admin route
  • Feed: /feed route
  • Multi-Chat: /multi-chat route
  • View All Assistants: /list route

Authentication States

Logged-Out User Experience

{userState === 'not-logged-in' ? (
  <Button size="lg" onClick={onShowLogin}>Sign In / Sign Up</Button>
) : (
  // Logged-in actions
)}
  • Primary CTA: “Sign In / Sign Up” button
  • Templates tab for preview
  • Limited functionality with login prompts
  • Public assistants accessible for trial

Logged-In User Experience

{userState !== 'not-logged-in' && (
  // My assistants tab and features
)}
  • Full access to personal assistants
  • Assistant creation capabilities
  • Admin and management tools access
  • Enhanced navigation options

Responsive Design

The component implements responsive design patterns:

  • Mobile-first approach: Responsive grid layouts and flexible spacing
  • Adaptive button layouts: Flex-wrap for action buttons on smaller screens
  • Responsive typography: Scalable text sizes across device types
  • Touch-friendly interactions: Appropriate touch targets for mobile devices

Empty States

No Personal Assistants

{userAssistants && userAssistants.length > 0 ? (
  <EmissaryListCompact /* ... */ />
) : (
  <div className="text-center py-8">
    <p className="text-muted-foreground mb-4">No assistants found for your account.</p>
    <Button onClick={() => setActiveTab('templates')}>
      Create Your First Assistant
    </Button>
  </div>
)}

No Welcome Assistant Available

The component gracefully handles missing welcome assistant with fallback content.

Usage Example

import LandingPage from '@/components/LandingPage';

function HomePage() {
  const { userState, currentUser } = useAuth();
  const { userAssistants, publicAssistants, templates } = useAssistants();

  return (
    <LandingPage
      userState={userState}
      currentUser={currentUser}
      onShowLogin={() => setShowLogin(true)}
      onLogout={handleLogout}
      userAssistants={userAssistants}
      publicAssistants={publicAssistants}
      templates={templates}
      onViewAssistant={handleViewAssistant}
      onCreateAssistant={handleCreateAssistant}
    />
  );
}

Accessibility Features

  • Semantic HTML: Proper use of headings, buttons, and navigation elements
  • Keyboard Navigation: Full keyboard accessibility for tab switching
  • Screen Reader Support: Descriptive alt text and ARIA labels
  • Focus Management: Logical focus order and visible focus indicators

Performance Considerations

  • Memoized Computations: useMemo for derived state like welcomeAssistant and readOnlySelectedTools
  • Conditional Rendering: Efficient rendering based on authentication state
  • Optimized Re-renders: Strategic use of useState and useEffect for state management

File Location

  • Component: src/components/LandingPage.tsx
  • Documentation: docs/features/LANDING_PAGE_COMPONENT.md

Dependencies

  • React: Core React hooks (useState, useEffect, useMemo)
  • Next.js: Link component for client-side navigation
  • Lucide React: Icons for UI elements
  • Radix UI: Base UI components (Button, Card, Tabs, Avatar)
  • Firebase: Authentication types and user management
  • TypeScript: Type definitions for props and state