Merge bcb9528933 into fc53278c60

app/MindWork AI Studio/Assistants/I18N/allTexts.lua

@@ -6091,6 +6091,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T144565305"] = "The app requires minimal
 -- You only pay for what you use, which can be cheaper than monthly subscription services like ChatGPT Plus, especially if used infrequently. But beware, here be dragons: For extremely intensive usage, the API costs can be significantly higher. Unfortunately, providers currently do not offer a way to display current costs in the app. Therefore, check your account with the respective provider to see how your costs are developing. When available, use prepaid and set a cost limit.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T149711988"] = "You only pay for what you use, which can be cheaper than monthly subscription services like ChatGPT Plus, especially if used infrequently. But beware, here be dragons: For extremely intensive usage, the API costs can be significantly higher. Unfortunately, providers currently do not offer a way to display current costs in the app. Therefore, check your account with the respective provider to see how your costs are developing. When available, use prepaid and set a cost limit."
 
+-- Research
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1554954732"] = "Research"
+
 -- Version
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1573770551"] = "Version"
 
@@ -6100,12 +6103,18 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1614176092"] = "Assistants"
 -- We want to contribute to the democratization of AI. MindWork AI Studio runs even on low-cost hardware, including computers around 100 EUR such as Raspberry Pi. This makes the app and its full feature set accessible to people and families with limited budgets. You can start with local LLMs or use affordable cloud models.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1628689293"] = "We want to contribute to the democratization of AI. MindWork AI Studio runs even on low-cost hardware, including computers around 100 EUR such as Raspberry Pi. This makes the app and its full feature set accessible to people and families with limited budgets. You can start with local LLMs or use affordable cloud models."
 
+-- Analyze
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1684119411"] = "Analyze"
+
 -- Unrestricted usage
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1686815996"] = "Unrestricted usage"
 
 -- Introduction
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1702902297"] = "Introduction"
 
+-- Write
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1717336572"] = "Write"
+
 -- Vision
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1892426825"] = "Vision"
 
@@ -6139,18 +6148,36 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3723223888"] = "Flexibility"
 -- You are not tied to any single provider. Instead, you might choose the provider that best suits your needs. Right now, we support OpenAI (GPT5, o1, etc.), Perplexity, Mistral, Anthropic (Claude), Google Gemini, xAI (Grok), DeepSeek, Alibaba Cloud (Qwen), OpenRouter, Hugging Face, and self-hosted models using vLLM, llama.cpp, ollama, LM Studio, Groq, or Fireworks. For scientists and employees of research institutions, we also support Helmholtz and GWDG AI services. These are available through federated logins like eduGAIN to all 18 Helmholtz Centers, the Max Planck Society, most German, and many international universities.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3892227145"] = "You are not tied to any single provider. Instead, you might choose the provider that best suits your needs. Right now, we support OpenAI (GPT5, o1, etc.), Perplexity, Mistral, Anthropic (Claude), Google Gemini, xAI (Grok), DeepSeek, Alibaba Cloud (Qwen), OpenRouter, Hugging Face, and self-hosted models using vLLM, llama.cpp, ollama, LM Studio, Groq, or Fireworks. For scientists and employees of research institutions, we also support Helmholtz and GWDG AI services. These are available through federated logins like eduGAIN to all 18 Helmholtz Centers, the Max Planck Society, most German, and many international universities."
 
+-- Innovate
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3957848315"] = "Innovate"
+
 -- Privacy
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3959064551"] = "Privacy"
 
 -- You can control which providers receive your data using the provider confidence settings. For example, you can set different protection levels for writing emails compared to general chats, etc. Additionally, most providers guarantee that they won't use your data to train new AI systems.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T457410099"] = "You can control which providers receive your data using the provider confidence settings. For example, you can set different protection levels for writing emails compared to general chats, etc. Additionally, most providers guarantee that they won't use your data to train new AI systems."
 
+-- Plan
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T514547250"] = "Plan"
+
+-- Chat
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T578410699"] = "Chat"
+
 -- Free of charge
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T617579208"] = "Free of charge"
 
+-- Think
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T620705787"] = "Think"
+
+-- Learn
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T623175861"] = "Learn"
+
 -- Independence
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T649448159"] = "Independence"
 
+-- Develop
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T803454394"] = "Develop"
+
 -- No bloatware
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T858047957"] = "No bloatware"
 

app/MindWork AI Studio/Components/AssistantBlock.razor

@@ -3,7 +3,7 @@
 
 @if (this.IsVisible)
 {
-    <MudCard Outlined="@true" Style="@this.BlockStyle">
+    <MudCard Elevation="2" Style="@this.BlockStyle">
         <MudCardHeader>
             <CardHeaderContent>
                 <MudStack AlignItems="AlignItems.Center" Row="@true">
@@ -23,13 +23,13 @@
         </MudCardContent>
         <MudCardActions>
             <MudStack Row="@true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Style="width: 100%;">
-                <MudButtonGroup Variant="Variant.Outlined">
+                <MudButtonGroup OverrideStyles="false">
-                    <MudButton Size="Size.Large" Variant="Variant.Filled" StartIcon="@this.Icon" Color="Color.Default" Href="@this.Link" Disabled="@this.Disabled">
+                    <MudButton Size="Size.Large" Variant="Variant.Filled" StartIcon="@this.Icon" Color="Color.Primary" Href="@this.Link" Disabled="@this.Disabled">
                         @this.ButtonText
                     </MudButton>
                     @if (this.HasSettingsPanel)
                     {
-                        <MudIconButton Variant="Variant.Text" Icon="@Icons.Material.Filled.Settings" Color="Color.Default" OnClick="@this.OpenSettingsDialog"/>
+                        <MudIconButton Variant="Variant.Outlined" Icon="@Icons.Material.Filled.Settings" Color="Color.Primary" OnClick="@this.OpenSettingsDialog"/>
                     }
                 </MudButtonGroup>
                 @if (this.SecurityBadge is not null)

app/MindWork AI Studio/Components/AssistantBlock.razor.cs

@@ -50,13 +50,7 @@ public partial class AssistantBlock<TSettings> : MSGComponentBase where TSetting
         await this.DialogService.ShowAsync<TSettings>(T("Open Settings"), dialogParameters, DialogOptions.FULLSCREEN);
     }
 
-    private string BorderColor => this.SettingsManager.IsDarkMode switch
+    private string BlockStyle => "border-radius: 12px; max-width: 20em;";
-    {
-        true => this.ColorTheme.GetCurrentPalette(this.SettingsManager).GrayLight,
-        false => this.ColorTheme.GetCurrentPalette(this.SettingsManager).Primary.Value,
-    };
-
-    private string BlockStyle => $"border-width: 2px; border-color: {this.BorderColor}; border-radius: 12px; border-style: solid; max-width: 20em;";
 
     private bool IsVisible => this.SettingsManager.IsAssistantVisible(this.Component, assistantName: this.Name, requiredPreviewFeature: this.RequiredPreviewFeature);
 

app/MindWork AI Studio/Components/ChatComponent.razor

@@ -46,6 +46,7 @@
                 Placeholder="@this.ProviderPlaceholder"
                 Adornment="Adornment.End"
                 AdornmentIcon="@Icons.Material.Filled.Send"
+                AdornmentColor="Color.Primary"
                 OnAdornmentClick="() => this.SendMessage()"
                 Disabled="@this.IsInputForbidden()"
                 Immediate="@true"
@@ -54,7 +55,7 @@
                 Class="@this.UserInputClass"
                 Style="@this.UserInputStyle"/>
         </MudElement>
-        <MudToolBar WrapContent="true" Gutters="@false" Class="border border-solid rounded" Style="border-color: lightgrey; gap: 2px;">
+        <MudToolBar WrapContent="true" Gutters="@false" Style="gap: 2px;">
             
             @if (
                 this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES

app/MindWork AI Studio/Components/ExpansionPanel.razor

@@ -1,4 +1,4 @@
-<MudExpansionPanel Class="border-solid border rounded-lg" Expanded="@this.IsExpanded" MaxHeight="@this.MaxHeight" ExpandedChanged="async s => await this.ExpandedChanged(s)">
+<MudExpansionPanel Expanded="@this.IsExpanded" MaxHeight="@this.MaxHeight" ExpandedChanged="async s => await this.ExpandedChanged(s)">
     <TitleContent>
         <div class="d-flex align-center">
             <MudIcon Icon="@this.HeaderIcon" Size="@this.IconSize" Color="@this.IconColor" class="mr-3"/>

app/MindWork AI Studio/Components/InnerScrolling.razor

@@ -17,7 +17,7 @@
 
     @if (this.FooterContent is not null)
     {
-        <MudPaper Class="pa-3 mb-3 border-solid border rounded-lg">
+        <MudPaper Elevation="2" Class="pa-3 mb-3">
             @this.FooterContent
         </MudPaper>
     }

app/MindWork AI Studio/Layout/MainLayout.razor

@@ -6,7 +6,7 @@
 
 @inherits LayoutComponentBase
 
-<MudPaper Height="calc(100vh);" Elevation="0">
+<MudPaper Height="calc(100vh);" Elevation="0" Style="background-color: var(--mud-palette-background);">
     <MudLayout>
         @if (!this.performingUpdate)
         {

app/MindWork AI Studio/Pages/Assistants.razor

@@ -5,9 +5,9 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2 mr-3">
+    <div class="page-header-bar">
-        @T("Assistants")
+        <MudText Typo="Typo.h3">@T("Assistants")</MudText>
-    </MudText>
+    </div>
 
     <InnerScrolling>
 

app/MindWork AI Studio/Pages/Chat.razor

@@ -4,8 +4,8 @@
 
 <div class="inner-scrolling-context">
     
-    <MudStack Row="true" AlignItems="AlignItems.Center" Class="mb-2" StretchItems="StretchItems.Start">
+    <div class="page-header-bar">
-        <MudText Typo="Typo.h3">
+        <MudText Typo="Typo.h3" Style="flex-grow: 1;">
             @if (this.chatThread is not null && this.chatThread.WorkspaceId != Guid.Empty)
             {
                 @(T("Chat in Workspace") + $" \"{this.currentWorkspaceName}\"")
@@ -15,8 +15,7 @@
                 @T("Disappearing Chat")
             }
         </MudText>
-        
+        <MudToolBar WrapContent="false" Gutters="false" Style="background: transparent; min-height: 0; padding: 0;">
-        <MudToolBar WrapContent="false" Gutters="false">
             @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.DISABLE_WORKSPACES)
             {
                 <MudTooltip Text="@T("Configure your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
@@ -24,22 +23,22 @@
                 </MudTooltip>
             }
             <MudTooltip Text="@T("Show the chat options")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
-                <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Default" OnClick="@this.OpenChatSettingsDialog"/>
+                <MudIconButton Icon="@Icons.Material.Filled.Settings" OnClick="@this.OpenChatSettingsDialog"/>
             </MudTooltip>
         </MudToolBar>
-    </MudStack>
+    </div>
 
     <CascadingValue Value="Components.CHAT">
         <ProviderSelection @bind-ProviderSettings="@this.providerSettings"/>
     </CascadingValue>
     @if (this.AreWorkspacesVisible)
     {
-        <MudSplitter Dimension="@this.ReadSplitterPosition" DimensionChanged="this.SplitterChanged" EnableSlide="@this.AreWorkspacesVisible" EnableMargin="@false" StartContentStyle="margin-right: 1em;" BarStyle="" EndContentStyle="margin-left: 1em;">
+        <MudSplitter Dimension="@this.ReadSplitterPosition" DimensionChanged="this.SplitterChanged" EnableSlide="@this.AreWorkspacesVisible" EnableMargin="@false" StartContentStyle="margin-right: 1em;" BarStyle="cursor: col-resize;" EndContentStyle="margin-left: 1em;">
             <StartContent>
                 @if (this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR && this.SettingsManager.ConfigurationData.Workspace.IsSidebarVisible)
                 {
                     // Case: Sidebar can be toggled and is currently visible
-                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
+                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="mud-paper mud-elevation-2 rounded-lg mb-3" MinWidth="26em">
                         <HeaderContent>
                             <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap" Spacing="1" Class="mb-0 ms-6 mt-2">
                                 <MudText Typo="Typo.h6">
@@ -67,7 +66,7 @@
                 else
                 {
                     // Case: Sidebar is always visible
-                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
+                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="mud-paper mud-elevation-2 rounded-lg mb-3" MinWidth="26em">
                         <HeaderContent>
                             <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap" Class="d-flex mb-0 ms-6 mt-2">
                                 <MudText Typo="Typo.h6">
@@ -105,7 +104,7 @@
     {
         // Case: Sidebar can be toggled and is currently hidden
         <MudStack Row="@true" Style="width: 100%; overflow: hidden; height: 100%; flex-grow: 1; min-height: 0;">
-            <MudPaper Class="border border-solid rounded-lg mb-3 d-flex">
+            <MudPaper Elevation="2" Class="rounded-lg mb-3 d-flex">
                 <MudStack Row="false" AlignItems="AlignItems.Center" StretchItems="StretchItems.Middle" Wrap="Wrap.NoWrap">
                     <MudTooltip Text="@T("Show your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                         <MudIconButton Size="Size.Medium" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="@(() => this.ToggleWorkspaceSidebar())"/>

app/MindWork AI Studio/Pages/Home.razor

@@ -2,10 +2,20 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudImage Src="svg/banner.svg" Style="max-height: 16em; width: 100%; object-fit: cover;" />
+    <div class="banner-wrapper">
-    <MudText Typo="Typo.h3" Class="mt-2 mb-2">
+        <img src="@this.BannerBottomSrc" alt="" class="banner-img" />
-        @T("Let's get started")
+        <img src="@this.BannerTopSrc" @key="@this.bannerIndex" alt="" class="banner-img banner-img-top" />
-    </MudText>
+        <div class="banner-label" @key="@($"label-{this.bannerIndex}")">@this.BannerLabel</div>
+        <div class="banner-indicators">
+            @for (var i = 0; i < this.BannerTabLabels.Length; i++)
+            {
+                <span class="@(i == this.ActiveTabIndex ? "banner-indicator banner-indicator-active" : "banner-indicator")">@this.BannerTabLabels[i]</span>
+            }
+        </div>
+    </div>
+    <div class="page-header-bar">
+        <MudText Typo="Typo.h3">@T("Let's get started")</MudText>
+    </div>
 
     <InnerScrolling>
         <MudExpansionPanels @key="@this.expansionPanelsRenderKey" Class="mb-3" MultiExpansion="@false">

app/MindWork AI Studio/Pages/Home.razor.cs

@@ -16,8 +16,36 @@ public partial class Home : MSGComponentBase
     [Inject]
     private NavigationManager NavigationManager { get; init; } = null!;
     
+    private static readonly string[] BANNER_IMAGES = [
+        "svg/banner-analyze.svg",
+        "svg/banner-research.svg",
+        "svg/banner-learn.svg",
+        "svg/banner-think.svg",
+        "svg/banner-innovate.svg",
+        "svg/banner-develop.svg",
+        "svg/banner-plan.svg",
+        "svg/banner-write.svg",
+        "svg/banner-chat.svg",
+    ];
+
+    private string[] BannerTabLabels =>
+    [
+        T("Analyze"), T("Research"), T("Learn"), T("Think"), T("Innovate"),
+        T("Develop"), T("Plan"), T("Write"), T("Chat"),
+    ];
+
+    private string BannerLabel => this.BannerTabLabels[this.ActiveTabIndex];
+
+    private int bannerIndex = BANNER_IMAGES.Length - 1;
+    private PeriodicTimer? bannerTimer;
+    private CancellationTokenSource? bannerCts;
+
+    private string BannerBottomSrc => BANNER_IMAGES[this.bannerIndex % BANNER_IMAGES.Length];
+    private string BannerTopSrc => BANNER_IMAGES[(this.bannerIndex + 1) % BANNER_IMAGES.Length];
+    private int ActiveTabIndex => (this.bannerIndex + 1) % BANNER_IMAGES.Length;
+
     private string LastChangeContent { get; set; } = string.Empty;
-    
+
     private TextItem[] itemsAdvantages = [];
 
     private List<DataIntroduction> introductions = [];
@@ -42,6 +70,7 @@ public partial class Home : MSGComponentBase
         // Read the last change content asynchronously
         // without blocking the UI thread:
         _ = this.ReadLastChangeAsync();
+        _ = this.StartBannerCycleAsync();
     }
 
     protected override Task OnAfterRenderAsync(bool firstRender)
@@ -131,8 +160,31 @@ public partial class Home : MSGComponentBase
         return Task.CompletedTask;
     }
 
+    protected override void DisposeResources()
+    {
+        this.bannerCts?.Cancel();
+        this.bannerTimer?.Dispose();
+    }
+
     private static string IntroductionPanelId(DataIntroduction introduction) => $"introduction:{introduction.Id}";
 
+    private async Task StartBannerCycleAsync()
+    {
+        this.bannerCts?.Cancel();
+        this.bannerCts = new CancellationTokenSource();
+        this.bannerTimer?.Dispose();
+        this.bannerTimer = new PeriodicTimer(TimeSpan.FromSeconds(10));
+        try
+        {
+            while (await this.bannerTimer.WaitForNextTickAsync(this.bannerCts.Token))
+            {
+                this.bannerIndex++;
+                await this.InvokeAsync(this.StateHasChanged);
+            }
+        }
+        catch (OperationCanceledException) { }
+    }
+
     private async Task ReadLastChangeAsync()
     {
         var latest = Changelog.LOGS.MaxBy(n => n.Build);

app/MindWork AI Studio/Pages/Information.razor

@@ -3,9 +3,9 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2">
+    <div class="page-header-bar">
-        @T("Information about MindWork AI Studio")
+        <MudText Typo="Typo.h3">@T("Information about MindWork AI Studio")</MudText>
-    </MudText>
+    </div>
 
     <InnerScrolling>
         <MudExpansionPanels Class="mb-3" MultiExpansion="@false">

app/MindWork AI Studio/Pages/Plugins.razor

@@ -4,9 +4,9 @@
 @attribute [Route(Routes.PLUGINS)]
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2">
+    <div class="page-header-bar">
-        @T("Plugins")
+        <MudText Typo="Typo.h3">@T("Plugins")</MudText>
-    </MudText>
+    </div>
     
     <InnerScrolling>
         

app/MindWork AI Studio/Pages/Settings.razor

@@ -4,7 +4,9 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-12">@T("Settings")</MudText>
+    <div class="page-header-bar">
+        <MudText Typo="Typo.h3">@T("Settings")</MudText>
+    </div>
 
     <InnerScrolling>
         <MudExpansionPanels Class="mb-3" MultiExpansion="@false">

app/MindWork AI Studio/Pages/Supporters.razor

@@ -2,15 +2,15 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2">
+    <div class="page-header-bar">
-        @T("Supporters")
+        <MudText Typo="Typo.h3">@T("Supporters")</MudText>
-    </MudText>
+    </div>
     <InnerScrolling>
 
         <MudExpansionPanels>
             
             <ExpansionPanel HeaderText="@T("Financial Support")" IsExpanded="@true" HeaderIcon="@Icons.Material.Filled.AttachMoney">
-                <div class="border-solid border-2 rounded-lg pa-3 mb-6">
+                <MudPaper Elevation="2" Class="pa-3 mb-6">
                     <MudText Typo="Typo.h4" Class="mb-2">
                         @T("Our Titans")
                     </MudText>
@@ -28,11 +28,11 @@
                     <MudButton Href="https://github.com/sponsors/MindWorkAI" StartIcon="@Icons.Material.Filled.Business" Variant="Variant.Filled" Target="_blank">
                         @T("Become one of our titans")
                     </MudButton>
-                </div>
+                </MudPaper>
 
                 <MudGrid Justify="Justify.Center" Spacing="2" Style="width: 100%;" Class="ma-0">
                     <MudItem Class="pa-0 pr-2" xs="6">
-                        <MudPaper Elevation="3" Class="border-solid border rounded-lg pa-3">
+                        <MudPaper Elevation="3" Class="pa-3">
                             <MudText Typo="Typo.h4" Class="mb-3 d-flex align-center">
                                 <MudIcon Icon="@Icons.Material.Filled.People" Size="Size.Large" class="mr-2"/>
                                 @T("Individual Contributors")
@@ -61,7 +61,7 @@
                     </MudItem>
 
                     <MudItem xs="6" Class="pa-0 pl-2">
-                        <MudPaper Elevation="3" Class="border-solid border rounded-lg pa-3">
+                        <MudPaper Elevation="3" Class="pa-3">
                             <MudText Typo="Typo.h4" Class="mb-3 d-flex align-center">
                                 <MudIcon Icon="@Icons.Material.Filled.Business" Size="Size.Large" class="mr-2"/>
                                 @T("Business Contributors")
@@ -79,7 +79,7 @@
 
                 <MudGrid Justify="Justify.Center" Spacing="2" Style="width: 100%;" Class="ma-0">
                     <MudItem Class="pa-0 pr-2" xs="6">
-                        <MudPaper Elevation="3" Class="border-solid border rounded-lg pa-3">
+                        <MudPaper Elevation="3" Class="pa-3">
                             <MudText Typo="Typo.h4" Class="mb-3 d-flex align-center">
                                 <MudIcon Icon="@Icons.Material.Filled.Code" Size="Size.Large" class="mr-2"/>
                                 @T("Code Contributions")
@@ -95,7 +95,7 @@
                     </MudItem>
 
                     <MudItem Class="pa-0 pr-2" xs="6">
-                        <MudPaper Elevation="3" Class="border-solid border rounded-lg pa-3">
+                        <MudPaper Elevation="3" Class="pa-3">
                             <MudText Typo="Typo.h4" Class="mb-3 d-flex align-start">
                                 <MudIcon Icon="@Icons.Material.Filled.Image" Size="Size.Large" class="mr-2"/>
                                 @T("Moderation, Design, Wiki, and Documentation")

app/MindWork AI Studio/Pages/Writer.razor

@@ -2,9 +2,9 @@
 @inherits MSGComponentBase
 
 <div class="inner-scrolling-context">
-    <MudText Typo="Typo.h3" Class="mb-2">
+    <div class="page-header-bar">
-        @T("Writer")
+        <MudText Typo="Typo.h3">@T("Writer")</MudText>
-    </MudText>
+    </div>
     <PreviewExperimental ApplyInnerScrollingFix="true"/>
 
     <CascadingValue Value="Components.WRITER">

app/MindWork AI Studio/Plugins/languages/de-de-43065dbc-78d0-45b7-92be-f14c2926e2dc/plugin.lua

@@ -6162,6 +6162,33 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T873851215"] = "Das zeichnet MindWork AI
 -- The app is free to use, both for personal and commercial purposes.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T91074375"] = "Die App ist sowohl für private als auch für kommerzielle Zwecke kostenlos nutzbar."
 
+-- Analyze
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1684119411"] = "Analysieren"
+
+-- Research
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1554954732"] = "Recherchieren"
+
+-- Learn
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T623175861"] = "Lernen"
+
+-- Think
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T620705787"] = "Denken"
+
+-- Innovate
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3957848315"] = "Innovieren"
+
+-- Develop
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T803454394"] = "Entwickeln"
+
+-- Plan
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T514547250"] = "Planen"
+
+-- Write
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1717336572"] = "Schreiben"
+
+-- Chat
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T578410699"] = "Chat"
+
 -- Startup log file
 UI_TEXT_CONTENT["AISTUDIO::PAGES::INFORMATION::T1019424746"] = "Startprotokolldatei"
 

app/MindWork AI Studio/Plugins/languages/en-us-97dfb1ba-50c4-4440-8dfa-6575daf543c8/plugin.lua

@@ -6162,6 +6162,33 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T873851215"] = "Here's what makes MindWo
 -- The app is free to use, both for personal and commercial purposes.
 UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T91074375"] = "The app is free to use, both for personal and commercial purposes."
 
+-- Analyze
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1684119411"] = "Analyze"
+
+-- Research
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1554954732"] = "Research"
+
+-- Learn
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T623175861"] = "Learn"
+
+-- Think
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T620705787"] = "Think"
+
+-- Innovate
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T3957848315"] = "Innovate"
+
+-- Develop
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T803454394"] = "Develop"
+
+-- Plan
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T514547250"] = "Plan"
+
+-- Write
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T1717336572"] = "Write"
+
+-- Chat
+UI_TEXT_CONTENT["AISTUDIO::PAGES::HOME::T578410699"] = "Chat"
+
 -- Startup log file
 UI_TEXT_CONTENT["AISTUDIO::PAGES::INFORMATION::T1019424746"] = "Startup log file"
 

app/MindWork AI Studio/Program.cs

@@ -123,7 +123,23 @@ internal sealed class Program
 
         builder.Services.AddMemoryCache(); // Needed for the Markdown library
         builder.Services.AddMudMarkdownServices();
-        builder.Services.AddSingleton(new MudTheme());
+        builder.Services.AddSingleton(new MudTheme
+        {
+            PaletteLight = new PaletteLight
+            {
+                Background = "#F0F4F8",
+                Primary = "#4d9970",
+                PrimaryDarken = "#3d8960",
+                PrimaryLighten = "#6db990",
+            },
+            PaletteDark = new PaletteDark
+            {
+                Background = "#0c0c14",
+                Primary = "#4d9970",
+                PrimaryDarken = "#3d8960",
+                PrimaryLighten = "#6db990",
+            },
+        });
         builder.Services.AddSingleton(MessageBus.INSTANCE);
         builder.Services.AddSingleton(rust);
         builder.Services.AddMudMarkdownClipboardService<MarkdownClipboardService>();

app/MindWork AI Studio/wwwroot/app.css

@@ -38,6 +38,52 @@
     margin-top: 4px;
 }
 
+/* Navbar modernization — rounded pill, centered icon, green active state */
+.mud-nav-link {
+    border-radius: 8px !important;
+    margin: 2px 4px 2px -2px !important;
+}
+
+.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
+    border-inline-end: none !important;
+    background-color: var(--mud-palette-primary) !important;
+    color: white !important;
+}
+
+.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
+    background-color: var(--mud-palette-primary-darken) !important;
+}
+
+.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
+    color: white !important;
+}
+
+/* MUI-style elevation for expansion panels — replace border separators with shadows */
+.mud-expand-panel,
+.mud-expand-panel.mud-expand-panel-border,
+.mud-expand-panel:first-child,
+.mud-expand-panel:last-child {
+    border-bottom: none;
+    border-top: none;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    box-shadow: var(--mud-elevation-1);
+    transition: box-shadow 0.25s ease, margin 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.mud-expand-panel.mud-panel-expanded {
+    box-shadow: var(--mud-elevation-4);
+    margin: 12px 0;
+}
+
+.mud-expand-panel.mud-panel-expanded:first-child {
+    margin-top: 0;
+}
+
+.mud-expand-panel.mud-panel-expanded:last-child {
+    margin-bottom: 0;
+}
+
 .plugin-icon-container {
     width: var(--mud-icon-size-large);
     height: var(--mud-icon-size-large);
@@ -54,6 +100,7 @@
 
 :root {
     --confidence-color: #000000;
+    --mud-default-borderradius: 10px;
 }
 
 .confidence-icon {
@@ -192,3 +239,127 @@
     margin-left: 0 !important;
     margin-right: 0 !important;
 }
+
+.banner-wrapper {
+    display: grid;
+    width: calc(100% + 1em + 48px);
+    margin-left: calc(-1em - 24px);
+    margin-right: -24px;
+    position: relative;
+    background-color: #1a4d38;
+}
+
+.banner-img {
+    grid-area: 1 / 1;
+    width: 100%;
+    object-fit: cover;
+}
+
+.banner-img-top {
+    animation: banner-fadein 1.2s ease-in-out forwards;
+}
+
+.banner-indicators {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.35rem 1rem;
+    background: rgba(0, 0, 0, 0.68);
+    border-radius: 0 0 6px 6px;
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+@media (max-width: 820px) {
+    .banner-indicators {
+        display: none;
+    }
+}
+
+.banner-indicator {
+    font-size: 0.78rem;
+    color: rgba(255, 255, 255, 0.45);
+    letter-spacing: 0.03em;
+    transition: color 0.4s ease;
+    padding: 0 0.4rem;
+}
+
+.banner-indicator-active {
+    color: rgba(255, 255, 255, 0.95);
+    font-weight: 700;
+}
+
+.banner-label {
+    position: absolute;
+    left: 65%;
+    bottom: 2.4vw;
+    transform: translateX(-50%);
+    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
+    font-size: clamp(16px, 3.23vw, 62px);
+    font-weight: 600;
+    color: #f5e060;
+    text-shadow: 3px 4px 0 rgba(7, 26, 13, 0.40);
+    letter-spacing: -0.03em;
+    pointer-events: none;
+    white-space: nowrap;
+    user-select: none;
+    animation: banner-fadein 1.2s ease-in-out forwards;
+}
+
+/* Page header bar — primary-colored full-width banner replacing plain h3 titles */
+.page-header-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--mud-palette-primary);
+    padding: 10px 24px 10px calc(1em + 24px);
+    margin-left: calc(-1em - 24px);
+    margin-right: -24px;
+    margin-bottom: 16px;
+    color: white;
+}
+
+.page-header-bar .mud-typography {
+    color: white !important;
+}
+
+.page-header-bar .mud-icon-button,
+.page-header-bar .mud-icon-button .mud-icon-root {
+    color: white !important;
+}
+
+/* Splitter: thin bar, muted at rest → primary on hover.
+   Use .inner-scrolling-context path (3 class selectors) to beat MudBlazor's own thumb specificity. */
+.inner-scrolling-context > .mud-splitter > .mud-slider ::-webkit-slider-thumb {
+    width: 4px !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+    background-color: rgba(192, 192, 192, 0.35) !important;
+    box-shadow: none !important;
+    transition: background-color 0.2s ease !important;
+}
+
+.inner-scrolling-context > .mud-splitter > .mud-slider:hover ::-webkit-slider-thumb {
+    background-color: var(--mud-palette-primary) !important;
+}
+
+.inner-scrolling-context > .mud-splitter > .mud-slider ::-moz-range-thumb {
+    width: 4px !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+    background-color: rgba(192, 192, 192, 0.35) !important;
+    box-shadow: none !important;
+    transition: background-color 0.2s ease !important;
+}
+
+.inner-scrolling-context > .mud-splitter > .mud-slider:hover ::-moz-range-thumb {
+    background-color: var(--mud-palette-primary) !important;
+}
+
+@keyframes banner-fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}

app/MindWork AI Studio/wwwroot/svg/banner-analyze.svg

@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/>
+      <stop offset="60%" stop-color="#1a4d38"/>
+      <stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/>
+      <stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/>
+      <stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/>
+      <stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="lg" cx="36%" cy="30%" r="68%">
+      <stop offset="0%" stop-color="#b8ead0" stop-opacity="0.58"/>
+      <stop offset="100%" stop-color="#2d7a52" stop-opacity="0.74"/>
+    </radialGradient>
+    <clipPath id="lc">
+      <circle cx="560" cy="155" r="104"/>
+    </clipPath>
+  </defs>
+
+  <!-- Sky -->
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+
+  <!-- Sun -->
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+
+  <!-- Hills — three layers -->
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+
+  <!-- Clouds -->
+  <g opacity="0.30">
+    <ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/>
+    <ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/>
+    <ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/>
+  </g>
+  <g opacity="0.22">
+    <ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/>
+    <ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/>
+  </g>
+
+  <!-- Trees — left -->
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/>
+    <polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/>
+    <rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/>
+    <rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+
+  <!-- Trees — right -->
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/>
+    <polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/>
+    <rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/>
+    <rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+
+  <!-- Birds -->
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/>
+    <path d="M1476,46 Q1484,40 1492,46"/>
+    <path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Magnifying glass — shadow layer (like speech bubble shadow in icon) -->
+  <circle cx="568" cy="164" r="120" fill="#1a4a30" opacity="0.55"/>
+  <line x1="652" y1="238" x2="740" y2="314" stroke="#1a4a30" stroke-width="32" stroke-linecap="round" opacity="0.55"/>
+
+  <!-- Handle -->
+  <line x1="648" y1="232" x2="738" y2="310" stroke="#cce8da" stroke-width="30" stroke-linecap="round"/>
+  <line x1="648" y1="232" x2="738" y2="310" stroke="#e4f2ea" stroke-width="20" stroke-linecap="round"/>
+
+  <!-- Glass ring -->
+  <circle cx="560" cy="155" r="120" fill="none" stroke="#cce8da" stroke-width="30"/>
+  <circle cx="560" cy="155" r="120" fill="none" stroke="#e4f2ea" stroke-width="20"/>
+
+  <!-- Lens -->
+  <circle cx="560" cy="155" r="93" fill="url(#lg)"/>
+
+  <!-- Data chart inside lens -->
+  <g clip-path="url(#lc)" opacity="0.92">
+    <line x1="488" y1="216" x2="632" y2="216" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <line x1="488" y1="198" x2="632" y2="198" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <line x1="488" y1="180" x2="632" y2="180" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <line x1="488" y1="162" x2="632" y2="162" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <line x1="488" y1="144" x2="632" y2="144" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <line x1="488" y1="126" x2="632" y2="126" stroke="#5dba82" stroke-width="1" opacity="0.38"/>
+    <!-- Bars ascending -->
+    <rect x="496" y="200" width="16" height="16" rx="2" fill="#4d9970"/>
+    <rect x="518" y="182" width="16" height="34" rx="2" fill="#4d9970"/>
+    <rect x="540" y="160" width="16" height="56" rx="2" fill="#f5e060"/>
+    <rect x="562" y="170" width="16" height="46" rx="2" fill="#4d9970"/>
+    <rect x="584" y="140" width="16" height="76" rx="2" fill="#7bc49a"/>
+    <rect x="606" y="153" width="16" height="63" rx="2" fill="#4d9970"/>
+    <!-- Trend line -->
+    <polyline points="504,196 526,177 548,154 570,163 592,134 614,146"
+              fill="none" stroke="#f5e060" stroke-width="3.5"
+              stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="504" cy="196" r="5" fill="#f5e060"/>
+    <circle cx="526" cy="177" r="5" fill="#f5e060"/>
+    <circle cx="548" cy="154" r="5" fill="#f5e060"/>
+    <circle cx="570" cy="163" r="5" fill="#f5e060"/>
+    <circle cx="592" cy="134" r="5" fill="#f5e060"/>
+    <circle cx="614" cy="146" r="5" fill="#f5e060"/>
+    <!-- Baseline -->
+    <line x1="488" y1="216" x2="632" y2="216" stroke="#98c8a8" stroke-width="2.5"/>
+  </g>
+
+  <!-- Lens glare -->
+  <ellipse cx="520" cy="116" rx="26" ry="16" fill="white" opacity="0.17" transform="rotate(-22,520,116)"/>
+
+  <!-- Scattered data points in sky (between glass and text) -->
+  <g opacity="0.42">
+    <circle cx="840" cy="44" r="5.5" fill="#f5e060"/>
+    <circle cx="878" cy="26" r="4" fill="#98c8a8"/>
+    <circle cx="920" cy="50" r="5" fill="#f5e060"/>
+    <circle cx="962" cy="30" r="3.5" fill="#98c8a8"/>
+    <circle cx="1004" cy="18" r="5.5" fill="#f5e060"/>
+    <polyline points="840,44 878,26 920,50 962,30 1004,18"
+              fill="none" stroke="#f5e060" stroke-width="1.5"
+              stroke-dasharray="5,6" opacity="0.48"/>
+  </g>
+
+  <!-- AI Studio shadow -->
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <!-- AI Studio main -->
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-chat.svg

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Back speech bubble (AI / left-pointing tail) — shadow -->
+  <g transform="translate(8,10)" opacity="0.45">
+    <rect x="358" y="52" width="330" height="130" rx="24" fill="#1a4a30"/>
+    <polygon points="390,180 360,215 430,180" fill="#1a4a30"/>
+  </g>
+  <!-- Back speech bubble (AI message) -->
+  <rect x="350" y="44" width="330" height="130" rx="24" fill="#4d9970"/>
+  <polygon points="382,172 352,207 422,172" fill="#4d9970"/>
+  <!-- AI bubble text lines -->
+  <rect x="374" y="72" width="200" height="12" rx="5" fill="white" opacity="0.45"/>
+  <rect x="374" y="92" width="240" height="12" rx="5" fill="white" opacity="0.45"/>
+  <rect x="374" y="112" width="182" height="12" rx="5" fill="white" opacity="0.45"/>
+  <rect x="374" y="132" width="220" height="12" rx="5" fill="white" opacity="0.35"/>
+  <!-- Subtle AI badge -->
+  <rect x="628" y="58" width="36" height="20" rx="8" fill="white" opacity="0.2"/>
+  <text x="638" y="73" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="white" opacity="0.6">AI</text>
+
+  <!-- Front speech bubble (user / right-pointing tail) — shadow -->
+  <g transform="translate(8,10)" opacity="0.45">
+    <rect x="378" y="178" width="290" height="104" rx="22" fill="#1a4a30"/>
+    <polygon points="636,254 676,282 636,282" fill="#1a4a30"/>
+  </g>
+  <!-- Front speech bubble (user message) -->
+  <rect x="370" y="170" width="290" height="104" rx="22" fill="#ddf0e8"/>
+  <polygon points="628,246 668,274 628,274" fill="#ddf0e8"/>
+  <!-- User bubble text lines -->
+  <rect x="392" y="194" width="170" height="10" rx="4" fill="#4d9970" opacity="0.55"/>
+  <rect x="392" y="212" width="220" height="10" rx="4" fill="#4d9970" opacity="0.55"/>
+  <rect x="392" y="230" width="145" height="10" rx="4" fill="#4d9970" opacity="0.4"/>
+  <!-- Cursor line (typing indicator) -->
+  <rect x="392" y="248" width="55" height="10" rx="4" fill="#f5e060" opacity="0.7"/>
+  <rect x="452" y="250" width="3" height="8" rx="1" fill="#4d9970" opacity="0.85"/>
+
+  <!-- Dots typing indicator bubble (small) — shadow -->
+  <g transform="translate(6,8)" opacity="0.38">
+    <rect x="686" y="218" width="80" height="46" rx="18" fill="#1a4a30"/>
+    <polygon points="686,248 662,266 686,258" fill="#1a4a30"/>
+  </g>
+  <!-- Dots typing bubble -->
+  <rect x="680" y="210" width="80" height="46" rx="18" fill="#cce8da"/>
+  <polygon points="680,240 656,258 680,250" fill="#cce8da"/>
+  <!-- Three dots -->
+  <circle cx="700" cy="233" r="6" fill="#4d9970" opacity="0.6"/>
+  <circle cx="720" cy="233" r="6" fill="#4d9970" opacity="0.75"/>
+  <circle cx="740" cy="233" r="6" fill="#4d9970" opacity="0.5"/>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-develop.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="termclip">
+      <rect x="358" y="62" width="400" height="230" rx="16"/>
+    </clipPath>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Terminal window — shadow -->
+  <rect x="366" y="72" width="400" height="230" rx="16" fill="#1a4a30" opacity="0.52"/>
+
+  <!-- Terminal window frame -->
+  <rect x="358" y="62" width="400" height="230" rx="16" fill="#cce8da"/>
+
+  <!-- Title bar -->
+  <rect x="358" y="62" width="400" height="40" rx="16" fill="#ddf0e8"/>
+  <rect x="358" y="82" width="400" height="20" fill="#ddf0e8"/>
+  <!-- Window traffic lights -->
+  <circle cx="382" cy="82" r="8" fill="#e87060"/>
+  <circle cx="406" cy="82" r="8" fill="#f5c040"/>
+  <circle cx="430" cy="82" r="8" fill="#4d9970"/>
+  <!-- Title text area -->
+  <rect x="480" y="74" width="120" height="16" rx="6" fill="#b0d8c2" opacity="0.5"/>
+
+  <!-- Terminal interior -->
+  <rect x="358" y="102" width="400" height="190" fill="#0e2218" clip-path="url(#termclip)"/>
+
+  <!-- Single console.log line, centered vertically -->
+  <text y="197" font-family="'Courier New', Courier, monospace" font-size="20"><tspan x="375" fill="#7bc49a">console.log(</tspan><tspan fill="#f5e060">'Hello AI Studio'</tspan><tspan fill="#ddf0e8">);</tspan></text>
+
+  <!-- Cursor -->
+  <rect x="375" y="212" width="12" height="21" rx="2" fill="#4d9970" opacity="0.85"/>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-innovate.svg

@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="flame" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.95"/>
+      <stop offset="50%" stop-color="#f0a020" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#f08020" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Stars -->
+  <g fill="#f5e060" opacity="0.65">
+    <circle cx="340" cy="42" r="4.5"/>
+    <circle cx="378" cy="22" r="3"/>
+    <circle cx="418" cy="48" r="5"/>
+    <circle cx="458" cy="30" r="3.5"/>
+    <circle cx="498" cy="18" r="4"/>
+    <circle cx="538" cy="38" r="3"/>
+    <circle cx="430" cy="65" r="3"/>
+  </g>
+  <!-- Sparkle crosses -->
+  <g stroke="#f5e060" stroke-width="2" stroke-linecap="round" opacity="0.55">
+    <line x1="340" y1="38" x2="340" y2="46"/><line x1="336" y1="42" x2="344" y2="42"/>
+    <line x1="418" y1="43" x2="418" y2="53"/><line x1="413" y1="48" x2="423" y2="48"/>
+  </g>
+
+  <!-- Flame / exhaust — behind rocket, clipped to banner height -->
+  <ellipse cx="572" cy="290" rx="36" ry="45" fill="url(#flame)" opacity="0.82"/>
+  <ellipse cx="560" cy="290" rx="17" ry="28" fill="#f5e060" opacity="0.4"/>
+
+  <!-- Rocket — shadow (no nose cone, capsule shape) -->
+  <g transform="translate(8,10)" opacity="0.48">
+    <rect x="548" y="58" width="64" height="207" rx="32" fill="#1a4a30"/>
+    <path d="M548,232 L510,282 L548,267 Z" fill="#1a4a30"/>
+    <path d="M612,232 L650,282 L612,267 Z" fill="#1a4a30"/>
+  </g>
+  <!-- Rocket — capsule body -->
+  <rect x="540" y="50" width="64" height="215" rx="32" fill="#cce8da"/>
+  <!-- Upper cap (lighter shade) -->
+  <rect x="540" y="50" width="64" height="120" rx="32" fill="#ddf0e8"/>
+  <!-- Body sheen -->
+  <rect x="540" y="52" width="28" height="210" rx="26" fill="white" opacity="0.14"/>
+  <!-- Left fin -->
+  <path d="M540,230 L500,280 L540,265 Z" fill="#b8d8c8"/>
+  <!-- Right fin -->
+  <path d="M604,230 L644,280 L604,265 Z" fill="#b8d8c8"/>
+  <!-- Porthole window -->
+  <circle cx="572" cy="155" r="22" fill="#1a4d38"/>
+  <circle cx="572" cy="155" r="18" fill="#2d7a52"/>
+  <circle cx="572" cy="155" r="14" fill="#4d9970"/>
+  <ellipse cx="566" cy="149" rx="5" ry="4" fill="white" opacity="0.3"/>
+  <!-- Speed lines -->
+  <g stroke="#cce8da" stroke-width="3" stroke-linecap="round" opacity="0.35">
+    <line x1="520" y1="140" x2="470" y2="143"/>
+    <line x1="516" y1="160" x2="462" y2="163"/>
+    <line x1="520" y1="180" x2="468" y2="183"/>
+  </g>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-learn.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Puzzle pieces — shadow -->
+  <g transform="translate(8,10)" opacity="0.45" fill="#1a4a30">
+    <path d="M458,58 L558,58 L558,94 C580,94 580,126 558,126 L558,163 L524,163 C524,185 492,185 492,163 L458,163 Z"/>
+    <path d="M558,58 L658,58 L658,163 L624,163 C624,185 592,185 592,163 L558,163 L558,126 C536,126 536,94 558,94 Z"/>
+    <path d="M458,163 L492,163 C492,141 524,141 524,163 L558,163 L558,199 C580,199 580,231 558,231 L558,268 L458,268 Z"/>
+    <path d="M558,163 L592,163 C592,141 624,141 624,163 L658,163 L658,268 L558,268 L558,231 C536,231 536,199 558,199 Z"/>
+  </g>
+
+  <!-- Top-left piece (cream) -->
+  <path d="M458,58 L558,58 L558,94 C580,94 580,126 558,126 L558,163 L524,163 C524,185 492,185 492,163 L458,163 Z" fill="#ddf0e8"/>
+  <!-- Top-right piece (golden) -->
+  <path d="M558,58 L658,58 L658,163 L624,163 C624,185 592,185 592,163 L558,163 L558,126 C536,126 536,94 558,94 Z" fill="#f5e060"/>
+  <!-- Bottom-left piece (primary green) -->
+  <path d="M458,163 L492,163 C492,141 524,141 524,163 L558,163 L558,199 C580,199 580,231 558,231 L558,268 L458,268 Z" fill="#4d9970"/>
+  <!-- Bottom-right piece (medium green) -->
+  <path d="M558,163 L592,163 C592,141 624,141 624,163 L658,163 L658,268 L558,268 L558,231 C536,231 536,199 558,199 Z" fill="#cce8da"/>
+
+  <!-- Subtle inner highlights on each piece -->
+  <path d="M464,64 L552,64 L552,92 C562,92 574,99 574,110" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.25"/>
+  <path d="M564,64 L652,64 L652,90" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.18"/>
+  <path d="M464,169 L490,169 C499,152 516,147 526,158" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.22"/>
+  <path d="M564,169 L590,169 C599,152 616,147 626,158" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.18"/>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-plan.svg

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Clipboard / planner — shadow -->
+  <rect x="376" y="52" width="360" height="256" rx="18" fill="#1a4a30" opacity="0.50"/>
+
+  <!-- Clipboard body -->
+  <rect x="368" y="44" width="360" height="256" rx="18" fill="#ddf0e8"/>
+  <!-- Clip at top -->
+  <rect x="490" y="32" width="116" height="32" rx="10" fill="#cce8da"/>
+  <rect x="506" y="28" width="84" height="20" rx="8" fill="#b8d8c8"/>
+  <rect x="520" y="24" width="56" height="14" rx="6" fill="#a8c8b8"/>
+
+  <!-- Header bar -->
+  <rect x="368" y="44" width="360" height="44" rx="18" fill="#4d9970"/>
+  <rect x="368" y="64" width="360" height="24" fill="#4d9970"/>
+  <!-- Header title dots -->
+  <circle cx="394" cy="66" r="5" fill="white" opacity="0.6"/>
+  <rect x="412" y="58" width="120" height="16" rx="6" fill="white" opacity="0.3"/>
+
+  <!-- Calendar grid -->
+  <!-- Row labels -->
+  <g fill="#4d9970" font-family="Helvetica, Arial, sans-serif" font-size="11" opacity="0.7">
+    <text x="384" y="110">Mo</text><text x="432" y="110">Tu</text><text x="480" y="110">We</text>
+    <text x="528" y="110">Th</text><text x="576" y="110">Fr</text><text x="624" y="110">Sa</text><text x="672" y="110">Su</text>
+  </g>
+  <!-- Grid separator -->
+  <line x1="380" y1="116" x2="716" y2="116" stroke="#b0d8c2" stroke-width="1.5"/>
+
+  <!-- Calendar cells — 4 rows x 7 cols -->
+  <g fill="#e8f8f0">
+    <!-- Row 1 -->
+    <rect x="380" y="122" width="36" height="28" rx="5"/>
+    <rect x="428" y="122" width="36" height="28" rx="5"/>
+    <rect x="476" y="122" width="36" height="28" rx="5"/>
+    <rect x="524" y="122" width="36" height="28" rx="5"/>
+    <rect x="572" y="122" width="36" height="28" rx="5"/>
+    <rect x="620" y="122" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <rect x="668" y="122" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <!-- Row 2 -->
+    <rect x="380" y="158" width="36" height="28" rx="5"/>
+    <rect x="428" y="158" width="36" height="28" rx="5"/>
+    <rect x="476" y="158" width="36" height="28" rx="5"/>
+    <rect x="524" y="158" width="36" height="28" rx="5"/>
+    <rect x="572" y="158" width="36" height="28" rx="5"/>
+    <rect x="620" y="158" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <rect x="668" y="158" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <!-- Row 3 -->
+    <rect x="380" y="194" width="36" height="28" rx="5"/>
+    <rect x="428" y="194" width="36" height="28" rx="5"/>
+    <rect x="476" y="194" width="36" height="28" rx="5"/>
+    <rect x="524" y="194" width="36" height="28" rx="5"/>
+    <rect x="572" y="194" width="36" height="28" rx="5"/>
+    <rect x="620" y="194" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <rect x="668" y="194" width="36" height="28" rx="5" fill="#ddeee6"/>
+    <!-- Row 4 -->
+    <rect x="380" y="230" width="36" height="28" rx="5"/>
+    <rect x="428" y="230" width="36" height="28" rx="5"/>
+    <rect x="476" y="230" width="36" height="28" rx="5"/>
+    <rect x="524" y="230" width="36" height="28" rx="5" fill="#4d9970" opacity="0.8"/>
+  </g>
+
+  <!-- Highlighted / marked days -->
+  <rect x="476" y="158" width="36" height="28" rx="5" fill="#f5e060" opacity="0.85"/>
+  <rect x="428" y="194" width="36" height="28" rx="5" fill="#4d9970" opacity="0.7"/>
+  <rect x="572" y="122" width="36" height="28" rx="5" fill="#f5e060" opacity="0.65"/>
+
+  <!-- Day numbers (partial) -->
+  <g fill="#2d6448" font-family="Helvetica, Arial, sans-serif" font-size="13" font-weight="600">
+    <text x="393" y="141">1</text><text x="441" y="141">2</text><text x="489" y="141">3</text>
+    <text x="537" y="141">4</text><text x="582" y="141">5</text>
+    <text x="393" y="177">8</text><text x="441" y="177">9</text>
+    <text x="484" y="177" fill="#0e2218" font-weight="800">10</text>
+    <text x="535" y="177">11</text><text x="583" y="177">12</text>
+    <text x="393" y="213">15</text>
+    <text x="434" y="213" fill="white" font-weight="800">16</text>
+    <text x="489" y="213">17</text><text x="537" y="213">18</text><text x="585" y="213">19</text>
+    <text x="393" y="249">22</text><text x="441" y="249">23</text><text x="489" y="249">24</text>
+    <text x="534" y="249" fill="white" font-weight="800">25</text>
+  </g>
+
+  <!-- Checkmarks on selected days -->
+  <g stroke="#4d9970" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8">
+    <polyline points="486,170 492,176 504,161"/>
+  </g>
+  <g stroke="#0e2218" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.8">
+    <polyline points="438,207 444,213 456,198"/>
+  </g>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-research.svg

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Lab equipment — shadows -->
+  <g transform="translate(9,11)" opacity="0.44" fill="#1a4a30">
+    <!-- Erlenmeyer flask shadow -->
+    <path d="M444,62 L444,150 C432,172 360,224 355,280 L569,280 C564,224 492,172 480,150 L480,62 Z"/>
+    <rect x="436" y="48" width="48" height="18" rx="8"/>
+    <!-- Test tube shadow -->
+    <path d="M630,70 L630,238 A26,26 0 0 0 682,238 L682,70 Z"/>
+    <rect x="634" y="58" width="40" height="14" rx="6"/>
+  </g>
+
+  <!-- Erlenmeyer flask — glass body -->
+  <path d="M444,62 L444,150 C432,172 360,224 355,280 L569,280 C564,224 492,172 480,150 L480,62 Z"
+        fill="#ddf0e8"/>
+
+  <!-- Flask — liquid (green, lower ~38% of body) -->
+  <path d="M 378,228 C 366,250 358,266 355,280 L569,280 C566,266 558,250 546,228 Z"
+        fill="#4d9970" opacity="0.80"/>
+  <!-- Flask — liquid surface wave -->
+  <path d="M 375,230 Q 420,221 462,227 Q 504,233 548,226"
+        fill="none" stroke="#7bc49a" stroke-width="3" stroke-linecap="round" opacity="0.65"/>
+
+  <!-- Flask — glass highlight (left inner wall) -->
+  <line x1="452" y1="68" x2="452" y2="147" stroke="white" stroke-width="3.5" stroke-linecap="round" opacity="0.28"/>
+  <path d="M 368,238 C 362,256 357,270 355,280" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.20"/>
+
+  <!-- Flask — graduation marks on neck -->
+  <g stroke="#8ab8a0" stroke-width="2" stroke-linecap="round" opacity="0.55">
+    <line x1="462" y1="90" x2="477" y2="90"/>
+    <line x1="462" y1="110" x2="477" y2="110"/>
+    <line x1="462" y1="130" x2="477" y2="130"/>
+  </g>
+
+  <!-- Flask — neck opening rim -->
+  <ellipse cx="462" cy="62" rx="22" ry="6" fill="#cce8da" opacity="0.85"/>
+
+  <!-- Flask — cork stopper -->
+  <rect x="436" y="48" width="48" height="18" rx="8" fill="#c8a060" opacity="0.90"/>
+  <rect x="440" y="52" width="20" height="5" rx="3" fill="white" opacity="0.22"/>
+
+  <!-- Flask — bubbles in liquid and neck -->
+  <g fill="#7bc49a" opacity="0.58">
+    <circle cx="452" cy="216" r="4.5"/>
+    <circle cx="474" cy="202" r="5.5"/>
+    <circle cx="458" cy="186" r="3.5"/>
+    <circle cx="468" cy="170" r="4"/>
+    <circle cx="454" cy="155" r="3"/>
+    <circle cx="464" cy="135" r="4.5"/>
+    <circle cx="456" cy="112" r="3.5"/>
+  </g>
+
+  <!-- Test tube — glass body (rounded bottom via arc) -->
+  <path d="M630,70 L630,236 A26,26 0 0 0 682,236 L682,70 Z" fill="#e8f7f0"/>
+
+  <!-- Test tube — liquid (yellow, lower 55%) -->
+  <path d="M630,152 L630,236 A26,26 0 0 0 682,236 L682,152 Z" fill="#f5e060" opacity="0.82"/>
+  <!-- Liquid surface ellipse (gives cylindrical depth) -->
+  <ellipse cx="656" cy="152" rx="26" ry="7" fill="#f5e060" opacity="0.78"/>
+  <ellipse cx="656" cy="152" rx="26" ry="7" fill="none" stroke="#c8a000" stroke-width="1.5" opacity="0.35"/>
+
+  <!-- Test tube — glass highlight -->
+  <line x1="638" y1="76" x2="638" y2="230" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.28"/>
+
+  <!-- Test tube — graduation marks -->
+  <g stroke="#a0c8b0" stroke-width="2" stroke-linecap="round" opacity="0.50">
+    <line x1="673" y1="108" x2="682" y2="108"/>
+    <line x1="673" y1="128" x2="682" y2="128"/>
+    <line x1="673" y1="148" x2="682" y2="148"/>
+  </g>
+
+  <!-- Test tube — opening rim -->
+  <ellipse cx="656" cy="70" rx="26" ry="7" fill="#cce8da" opacity="0.80"/>
+
+  <!-- Test tube — cork -->
+  <rect x="634" y="58" width="40" height="14" rx="6" fill="#c8a060" opacity="0.90"/>
+  <rect x="637" y="62" width="16" height="4" rx="2" fill="white" opacity="0.22"/>
+
+  <!-- Test tube — bubbles in yellow liquid -->
+  <g fill="#f5e060" opacity="0.52">
+    <circle cx="648" cy="138" r="4"/>
+    <circle cx="664" cy="120" r="3.5"/>
+    <circle cx="650" cy="104" r="4.5"/>
+    <circle cx="662" cy="88" r="3"/>
+  </g>
+
+  <!-- Floating sparkles (decorative, suggest chemical reaction) -->
+  <g fill="#f5e060" opacity="0.55">
+    <circle cx="510" cy="42" r="3.5"/>
+    <circle cx="540" cy="22" r="2.5"/>
+    <circle cx="575" cy="38" r="4"/>
+    <circle cx="610" cy="18" r="3"/>
+    <circle cx="600" cy="48" r="2.5"/>
+  </g>
+  <g stroke="#f5e060" stroke-width="2" stroke-linecap="round" opacity="0.45">
+    <line x1="510" y1="38" x2="510" y2="46"/><line x1="506" y1="42" x2="514" y2="42"/>
+    <line x1="575" y1="33" x2="575" y2="43"/><line x1="570" y1="38" x2="580" y2="38"/>
+  </g>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-think.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="bulbglow" cx="50%" cy="45%" r="55%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#f5e060" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Lightbulb — glow -->
+  <circle cx="558" cy="100" r="108" fill="url(#bulbglow)"/>
+
+  <!-- Lightbulb — rays -->
+  <g stroke="#f5e060" stroke-width="4" stroke-linecap="round" opacity="0.5">
+    <line x1="558" y1="16" x2="558" y2="2"/>
+    <line x1="622" y1="36" x2="636" y2="22"/>
+    <line x1="662" y1="96" x2="679" y2="88"/>
+    <line x1="494" y1="36" x2="480" y2="22"/>
+    <line x1="454" y1="96" x2="437" y2="88"/>
+  </g>
+
+  <!-- Lightbulb — shadow -->
+  <g transform="translate(8,10)" opacity="0.45">
+    <path d="M 478,100 A 80,80 0 1 1 638,100 C 640,140 600,185 588,210 L 528,210 C 516,185 476,140 478,100 Z" fill="#1a4a30"/>
+    <rect x="520" y="210" width="76" height="18" rx="6" fill="#1a4a30"/>
+    <rect x="528" y="231" width="60" height="18" rx="6" fill="#1a4a30"/>
+    <rect x="536" y="252" width="44" height="18" rx="6" fill="#1a4a30"/>
+  </g>
+
+  <!-- Lightbulb — glass (dome on top, narrows to neck toward base) -->
+  <path d="M 478,100 A 80,80 0 1 1 638,100 C 640,140 600,185 588,210 L 528,210 C 516,185 476,140 478,100 Z"
+        fill="#f5e060" opacity="0.93"/>
+  <!-- Inner glow (lighter dome center) -->
+  <ellipse cx="558" cy="82" rx="55" ry="52" fill="#fff8c0" opacity="0.32"/>
+
+  <!-- Filament (inside the neck) -->
+  <path d="M 510,158 Q 524,138 540,158 Q 556,178 572,158 Q 588,138 606,158"
+        fill="none" stroke="#c8a000" stroke-width="5.5" stroke-linecap="round" opacity="0.72"/>
+
+  <!-- Socket bands (metal base, steps in toward bottom) -->
+  <rect x="520" y="210" width="76" height="18" rx="6" fill="#ddf0e8"/>
+  <rect x="528" y="231" width="60" height="18" rx="6" fill="#cce8da"/>
+  <rect x="536" y="252" width="44" height="18" rx="6" fill="#b8d8c8"/>
+
+  <!-- Glare on bulb (upper-left highlight) -->
+  <ellipse cx="506" cy="62" rx="30" ry="20" fill="white" opacity="0.22" transform="rotate(-18,506,62)"/>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

app/MindWork AI Studio/wwwroot/svg/banner-write.svg

@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="hidden" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1920 335">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2e7858"/><stop offset="60%" stop-color="#1a4d38"/><stop offset="100%" stop-color="#0e2e1e"/>
+    </linearGradient>
+    <linearGradient id="h1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e5c40"/><stop offset="100%" stop-color="#0f3020"/>
+    </linearGradient>
+    <linearGradient id="h2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#2d7a52"/><stop offset="100%" stop-color="#1a4a32"/>
+    </linearGradient>
+    <linearGradient id="h3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4d9970"/><stop offset="100%" stop-color="#2d6448"/>
+    </linearGradient>
+    <radialGradient id="sg" cx="86%" cy="14%" r="24%">
+      <stop offset="0%" stop-color="#f5e060" stop-opacity="0.65"/>
+      <stop offset="55%" stop-color="#f0c840" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#f0c840" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <rect width="1920" height="335" fill="url(#bg)"/>
+  <rect width="1920" height="335" fill="url(#sg)"/>
+  <circle cx="1655" cy="50" r="72" fill="#f5e060" opacity="0.16"/>
+  <circle cx="1655" cy="50" r="54" fill="#f5e060" opacity="0.32"/>
+  <circle cx="1655" cy="50" r="38" fill="#f5e060" opacity="0.96"/>
+  <path d="M0,232 Q480,145 960,185 Q1440,225 1920,168 L1920,335 L0,335 Z" fill="url(#h1)"/>
+  <path d="M0,266 Q310,205 625,246 Q940,287 1265,222 Q1590,157 1920,238 L1920,335 L0,335 Z" fill="url(#h2)"/>
+  <path d="M0,300 Q480,270 960,296 Q1440,322 1920,288 L1920,335 L0,335 Z" fill="url(#h3)"/>
+  <g opacity="0.30"><ellipse cx="245" cy="68" rx="64" ry="22" fill="#a8c8b8"/><ellipse cx="283" cy="57" rx="42" ry="23" fill="#c2deca"/><ellipse cx="208" cy="65" rx="33" ry="18" fill="#c2deca"/></g>
+  <g opacity="0.22"><ellipse cx="1340" cy="94" rx="70" ry="25" fill="#a8c8b8"/><ellipse cx="1382" cy="82" rx="46" ry="23" fill="#c2deca"/></g>
+  <g fill="#071a0d">
+    <polygon points="35,310 66,222 97,310"/><polygon points="39,285 66,214 93,285" opacity="0.72"/>
+    <rect x="62" y="308" width="9" height="20"/>
+    <polygon points="105,314 133,238 161,314"/><rect x="129" y="312" width="8" height="16"/>
+    <polygon points="168,306 193,242 218,306" opacity="0.82"/><rect x="189" y="304" width="7" height="18" opacity="0.82"/>
+    <polygon points="12,318 37,265 62,318" opacity="0.60"/>
+  </g>
+  <g fill="#071a0d">
+    <polygon points="1755,304 1786,218 1817,304"/><polygon points="1759,280 1786,210 1813,280" opacity="0.72"/>
+    <rect x="1782" y="302" width="9" height="20"/>
+    <polygon points="1821,310 1849,234 1877,310"/><rect x="1845" y="308" width="9" height="18"/>
+    <polygon points="1725,314 1751,250 1777,314" opacity="0.78"/><rect x="1747" y="312" width="7" height="15" opacity="0.78"/>
+    <polygon points="1885,316 1906,264 1927,316" opacity="0.55"/>
+  </g>
+  <g fill="none" stroke="#98c8a8" stroke-width="2.5" stroke-linecap="round" opacity="0.48">
+    <path d="M1450,60 Q1459,53 1468,60"/><path d="M1476,46 Q1484,40 1492,46"/><path d="M1428,74 Q1437,68 1446,74"/>
+  </g>
+
+  <!-- Open book — shadow -->
+  <rect x="400" y="76" width="348" height="228" rx="10" fill="#1a4a30" opacity="0.46"/>
+
+  <!-- Left cover (hardcover, binding visible at top/bottom) -->
+  <rect x="386" y="58" width="176" height="238" rx="12" fill="#4d9970"/>
+  <!-- Right cover -->
+  <rect x="554" y="58" width="176" height="238" rx="12" fill="#4d9970"/>
+
+  <!-- Spine band -->
+  <rect x="548" y="54" width="16" height="246" fill="#2d6848"/>
+  <!-- Spine highlight -->
+  <rect x="550" y="54" width="4" height="246" fill="white" opacity="0.16"/>
+
+  <!-- Page stack at top — left side (shows book has many pages) -->
+  <rect x="394" y="62" width="158" height="2.5" rx="1" fill="#b4d4c4"/>
+  <rect x="394" y="64.5" width="158" height="2" rx="1" fill="#c0dcc8"/>
+  <rect x="394" y="66.5" width="158" height="2" rx="1" fill="#cce4d2"/>
+  <!-- Page stack at top — right side -->
+  <rect x="560" y="62" width="162" height="2.5" rx="1" fill="#b4d4c4"/>
+  <rect x="560" y="64.5" width="162" height="2" rx="1" fill="#c0dcc8"/>
+  <rect x="560" y="66.5" width="162" height="2" rx="1" fill="#cce4d2"/>
+
+  <!-- Page stack at bottom — left side -->
+  <rect x="394" y="288" width="158" height="2" rx="1" fill="#cce4d2"/>
+  <rect x="394" y="290" width="158" height="2" rx="1" fill="#b4d4c4"/>
+  <rect x="394" y="292" width="158" height="2" rx="1" fill="#a4c4b4"/>
+  <!-- Page stack at bottom — right side -->
+  <rect x="560" y="288" width="162" height="2" rx="1" fill="#cce4d2"/>
+  <rect x="560" y="290" width="162" height="2" rx="1" fill="#b4d4c4"/>
+  <rect x="560" y="292" width="162" height="2" rx="1" fill="#a4c4b4"/>
+
+  <!-- Left page (paper) -->
+  <rect x="394" y="69" width="158" height="219" fill="#ddf0e8"/>
+  <!-- Right page (paper) -->
+  <rect x="560" y="69" width="162" height="219" fill="#ecf7f0"/>
+
+  <!-- Gutter shadow — left page (darkest at spine edge) -->
+  <rect x="535" y="69" width="17" height="219" fill="#0e2e1e" opacity="0.16"/>
+  <rect x="545" y="69" width="7" height="219" fill="#0e2e1e" opacity="0.14"/>
+  <!-- Gutter shadow — right page (darkest at spine edge) -->
+  <rect x="560" y="69" width="9" height="219" fill="#0e2e1e" opacity="0.18"/>
+  <rect x="569" y="69" width="7" height="219" fill="#0e2e1e" opacity="0.10"/>
+
+  <!-- Left page text lines -->
+  <g fill="#4d9970" opacity="0.36">
+    <rect x="413" y="90" width="118" height="7" rx="3"/>
+    <rect x="413" y="107" width="104" height="7" rx="3"/>
+    <rect x="413" y="124" width="126" height="7" rx="3"/>
+    <rect x="413" y="141" width="92" height="7" rx="3"/>
+    <rect x="413" y="158" width="116" height="7" rx="3"/>
+    <rect x="413" y="175" width="106" height="7" rx="3"/>
+    <rect x="413" y="192" width="120" height="7" rx="3"/>
+    <rect x="413" y="209" width="86" height="7" rx="3"/>
+    <rect x="413" y="226" width="112" height="7" rx="3"/>
+    <rect x="413" y="243" width="98" height="7" rx="3"/>
+    <rect x="413" y="260" width="114" height="7" rx="3"/>
+  </g>
+  <!-- Golden title line on left page -->
+  <rect x="413" y="90" width="118" height="7" rx="3" fill="#f5e060" opacity="0.65"/>
+
+  <!-- Right page text lines (pen is partway through the page) -->
+  <g fill="#4d9970" opacity="0.36">
+    <rect x="578" y="90" width="118" height="7" rx="3"/>
+    <rect x="578" y="107" width="105" height="7" rx="3"/>
+    <rect x="578" y="124" width="122" height="7" rx="3"/>
+    <rect x="578" y="141" width="94" height="7" rx="3"/>
+    <rect x="578" y="158" width="116" height="7" rx="3"/>
+    <rect x="578" y="175" width="76" height="7" rx="3"/>
+    <rect x="578" y="192" width="103" height="7" rx="3"/>
+  </g>
+  <!-- Partial current line (being written right now) -->
+  <rect x="578" y="209" width="62" height="7" rx="3" fill="#4d9970" opacity="0.42"/>
+
+  <!-- Pen shadow on right page -->
+  <g opacity="0.38">
+    <rect x="0" y="-5" width="152" height="10" rx="5" fill="#1a4a30" transform="translate(657,204) rotate(-35)"/>
+    <polygon points="0,-4 0,4 -16,0" fill="#1a4a30" transform="translate(657,204) rotate(-35)"/>
+  </g>
+
+  <!-- Pen body at -35°, nib tip landing at ≈(635,209) on the right-page writing line -->
+  <g transform="translate(650,199) rotate(-35)">
+    <!-- Main barrel -->
+    <rect x="0" y="-6" width="140" height="12" rx="6" fill="#cce8da"/>
+    <!-- Cap section (rear) -->
+    <rect x="116" y="-6" width="30" height="12" rx="6" fill="#b0d8c2"/>
+    <!-- Gold join band -->
+    <rect x="114" y="-6" width="7" height="12" fill="#f5e060" opacity="0.78"/>
+    <!-- Clip on cap -->
+    <rect x="124" y="-8" width="4" height="58" rx="2" fill="#a0c8b0"/>
+    <!-- Barrel sheen -->
+    <rect x="2" y="-6" width="110" height="4" rx="4" fill="white" opacity="0.22"/>
+    <!-- Nib section (front) -->
+    <rect x="0" y="-6" width="22" height="12" rx="6" fill="#b8d8c8"/>
+    <!-- Gold nib collar -->
+    <rect x="18" y="-6" width="7" height="12" fill="#f5e060" opacity="0.68"/>
+    <!-- Nib tip -->
+    <polygon points="0,-5 0,5 -18,0" fill="#a8c8b0"/>
+    <!-- Nib slit -->
+    <line x1="-1" y1="0" x2="-16" y2="0" stroke="#6a9880" stroke-width="1.5"/>
+  </g>
+  <!-- Ink trail from nib onto the writing line -->
+  <path d="M 594,213 Q 612,211 635,209" stroke="#4d9970" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.62"/>
+
+  <text x="1254" y="183" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#071a0d" opacity="0.42" letter-spacing="-3">AI Studio</text>
+  <text x="1248" y="176" font-family="Helvetica, 'Helvetica Neue', Arial, sans-serif"
+        font-size="128" font-weight="900" text-anchor="middle"
+        fill="#dff2e8" letter-spacing="-3">AI Studio</text>
+</svg>

runtime/ui/index.html

@@ -17,14 +17,37 @@
                 display: block;
             }
 
+            .container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 0;
+            }
+
+            p {
+                margin: 0;
+                font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+                font-size: 80px;
+                font-weight: 700;
+                letter-spacing: 0;
+                color: #333333;
+            }
+
             @media (prefers-color-scheme: dark) {
                 html, body {
                     background-color: #1a1a1a;
                 }
+
+                p {
+                    color: #cccccc;
+                }
             }
         </style>
     </head>
     <body>
-        <img src="icon.png" width="512" height="512" alt="The app logo">
+        <div class="container">
+            <img src="icon.png" width="512" height="512" alt="The app logo">
+            <p>MindWork AI Studio</p>
+        </div>
     </body>
 </html>