MATIH Platform is in active MVP development. Documentation reflects current implementation status.
15. Workbench Architecture
Onboarding UI
Welcome Page

Welcome Page

The Welcome Page is the first screen new users see when accessing the MATIH platform for the first time. It introduces the platform value proposition, highlights key capabilities, and invites users to begin the onboarding wizard.


Page Layout

The Welcome Page (WelcomePage.tsx) is divided into three sections:

SectionContent
HeroPlatform name, tagline, and primary call-to-action
Feature HighlightsThree key capability cards with descriptions
Getting StartedBegin wizard button and skip option

Hero Section

The hero section displays:

  • Platform logo and name
  • Tagline: "From Intent to Insights -- ask questions in natural language, get data answers instantly"
  • Brief description of what the platform does (2-3 sentences)
  • Animated data visualization background

Feature Highlights

Three capability cards summarize the core platform features:

FeatureTitleDescription
Conversational AnalyticsAsk questions in plain EnglishThe AI understands your data schema and generates accurate SQL queries automatically
Interactive DashboardsBuild and share visual dashboardsCreate charts, tables, and KPI cards from your query results with drag-and-drop
ML IntegrationTrain and deploy ML modelsBuild predictive models from your data using conversational commands

Call-to-Action

Two options are presented:

ActionButtonDescription
Start SetupPrimary buttonBegins the onboarding wizard at persona selection
Skip for NowText linkSkips onboarding and goes directly to the default workbench

Animation

The welcome page includes a subtle animated demonstration:

const WelcomeAnimation = () => {
  return (
    <div className="animate-fade-in">
      <TypewriterText
        text="What were our top products by revenue last quarter?"
        speed={50}
      />
      <AnimatedChart data={sampleData} delay={2000} />
    </div>
  );
};

Responsive Design

BreakpointLayout
Desktop (1024px+)Side-by-side hero and animation
Tablet (768px-1023px)Stacked with reduced animation
Mobile (below 768px)Simplified with text-only hero

Localization

The welcome page supports internationalization through the shared i18n system:

LanguageStatus
EnglishComplete
SpanishPlanned
FrenchPlanned
GermanPlanned
JapanesePlanned

Analytics

The welcome page tracks onboarding funnel metrics:

EventDescription
onboarding.welcome.viewUser viewed the welcome page
onboarding.welcome.startUser clicked "Start Setup"
onboarding.welcome.skipUser clicked "Skip for Now"
onboarding.welcome.time_spentDuration on the welcome page