New startup window.

2026-03-05 10:12:03 +01:00
parent d45d3faa89
commit db5ecd60e4
46 changed files with 1857 additions and 234 deletions
@@ -0,0 +1,9 @@
+using Wino.Mail.WinUI;
+using Wino.Mail.ViewModels;
+
+namespace Wino.Views.Abstract;
+
+public abstract class WelcomePageV2Abstract : BasePage<WelcomePageV2ViewModel>
+{
+
+}
@@ -10,45 +10,57 @@

    <ScrollViewer>
        <StackPanel
-            MaxWidth="1040"
-            Padding="24,20,24,24"
-            Spacing="16">
+            MaxWidth="860"
+            Padding="36,28,36,36"
+            HorizontalAlignment="Center"
+            Spacing="24">
+
+            <!--  Page Header  -->
            <StackPanel Spacing="4">
                <TextBlock
-                    FontSize="30"
+                    FontSize="28"
                    FontWeight="SemiBold"
                    Text="{x:Bind ViewModel.PageTitle, Mode=OneWay}" />
                <TextBlock
-                    Opacity="0.85"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Style="{StaticResource BodyTextBlockStyle}"
                    Text="{x:Bind ViewModel.SubtitleText, Mode=OneWay}"
                    TextWrapping="WrapWholeWords" />
                <TextBlock
-                    Opacity="0.85"
+                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                    Style="{StaticResource CaptionTextBlockStyle}"
                    Text="{x:Bind ViewModel.ProviderHint, Mode=OneWay}"
-                    TextWrapping="WrapWholeWords" />
+                    TextWrapping="WrapWholeWords"
+                    Visibility="{x:Bind ViewModel.HasProviderHint, Mode=OneWay}" />
            </StackPanel>

+            <!--  Setup Mode Selector  -->
            <SelectorBar x:Name="SetupModeSelector" SelectionChanged="OnSetupModeSelectionChanged">
                <SelectorBarItem Icon="Library" Text="{x:Bind ViewModel.BasicTabText, Mode=OneWay}" />
                <SelectorBarItem Icon="Setting" Text="{x:Bind ViewModel.AdvancedTabText, Mode=OneWay}" />
            </SelectorBar>

+            <!--  Basic Setup Card  -->
            <Border
-                Padding="16"
+                Padding="20"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
-                CornerRadius="12"
+                CornerRadius="8"
                Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsAdvancedSetupSelected), Mode=OneWay}">
-                <StackPanel Spacing="12">
-                    <TextBlock
-                        FontSize="19"
-                        FontWeight="SemiBold"
-                        Text="{x:Bind ViewModel.BasicSectionTitleText, Mode=OneWay}" />
-                    <TextBlock
-                        Opacity="0.75"
-                        Text="{x:Bind ViewModel.BasicSectionDescriptionText, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
+                <StackPanel Spacing="16">
+                    <StackPanel Spacing="2">
+                        <TextBlock
+                            FontSize="16"
+                            FontWeight="SemiBold"
+                            Text="{x:Bind ViewModel.BasicSectionTitleText, Mode=OneWay}" />
+                        <TextBlock
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Style="{StaticResource CaptionTextBlockStyle}"
+                            Text="{x:Bind ViewModel.BasicSectionDescriptionText, Mode=OneWay}"
+                            TextWrapping="WrapWholeWords" />
+                    </StackPanel>
+
                    <Grid ColumnSpacing="12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
@@ -65,103 +77,166 @@
                            PlaceholderText="{x:Bind ViewModel.EmailAddressPlaceholderText, Mode=OneWay}"
                            Text="{x:Bind ViewModel.EmailAddress, Mode=TwoWay}" />
                    </Grid>
-                    <PasswordBox Header="{x:Bind ViewModel.PasswordHeaderText, Mode=OneWay}" Password="{x:Bind ViewModel.Password, Mode=TwoWay}" />
-                    <CheckBox Content="{x:Bind ViewModel.EnableCalendarSupportText, Mode=OneWay}" IsChecked="{x:Bind ViewModel.IsCalendarSupportEnabled, Mode=TwoWay}" />
+
+                    <PasswordBox
+                        Header="{x:Bind ViewModel.PasswordHeaderText, Mode=OneWay}"
+                        Password="{x:Bind ViewModel.Password, Mode=TwoWay}" />
+
+                    <CheckBox
+                        Content="{x:Bind ViewModel.EnableCalendarSupportText, Mode=OneWay}"
+                        IsChecked="{x:Bind ViewModel.IsCalendarSupportEnabled, Mode=TwoWay}" />
+
                    <Button
                        HorizontalAlignment="Left"
                        Command="{x:Bind ViewModel.AutoDiscoverSettingsCommand}"
-                        Content="{x:Bind ViewModel.AutoDiscoverButtonText, Mode=OneWay}" />
+                        Content="{x:Bind ViewModel.AutoDiscoverButtonText, Mode=OneWay}"
+                        Style="{ThemeResource AccentButtonStyle}" />
                </StackPanel>
            </Border>

+            <!--  Advanced Setup Card  -->
            <Border
-                Padding="16"
+                Padding="20"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
-                CornerRadius="12"
+                CornerRadius="8"
                Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsBasicSetupSelected), Mode=OneWay}">
-                <StackPanel Spacing="14">
-                    <TextBlock
-                        FontSize="19"
-                        FontWeight="SemiBold"
-                        Text="{x:Bind ViewModel.AdvancedSectionTitleText, Mode=OneWay}" />
-                    <TextBlock
-                        Opacity="0.75"
-                        Text="{x:Bind ViewModel.AdvancedSectionDescriptionText, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
+                <StackPanel Spacing="20">
+                    <StackPanel Spacing="2">
+                        <TextBlock
+                            FontSize="16"
+                            FontWeight="SemiBold"
+                            Text="{x:Bind ViewModel.AdvancedSectionTitleText, Mode=OneWay}" />
+                        <TextBlock
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Style="{StaticResource CaptionTextBlockStyle}"
+                            Text="{x:Bind ViewModel.AdvancedSectionDescriptionText, Mode=OneWay}"
+                            TextWrapping="WrapWholeWords" />
+                    </StackPanel>

-                    <Grid ColumnSpacing="18">
+                    <Grid ColumnSpacing="24">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

-                        <StackPanel Spacing="8">
-                            <TextBlock FontWeight="SemiBold" Text="{x:Bind ViewModel.IncomingSectionTitleText, Mode=OneWay}" />
-                            <TextBox Header="{x:Bind ViewModel.IncomingServerHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.IncomingServer, Mode=TwoWay}" />
-                            <TextBox Header="{x:Bind ViewModel.PortHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.IncomingServerPort, Mode=TwoWay}" />
-                            <TextBox Header="{x:Bind ViewModel.IncomingUsernameHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.IncomingServerUsername, Mode=TwoWay}" />
-                            <PasswordBox Header="{x:Bind ViewModel.IncomingPasswordHeaderText, Mode=OneWay}" Password="{x:Bind ViewModel.IncomingServerPassword, Mode=TwoWay}" />
-                            <ComboBox
-                                Header="{x:Bind ViewModel.ConnectionSecurityHeaderText, Mode=OneWay}"
-                                ItemsSource="{x:Bind ViewModel.AvailableConnectionSecurityDisplayNames}"
-                                SelectedIndex="{x:Bind ViewModel.SelectedIncomingServerConnectionSecurityIndex, Mode=TwoWay}" />
-                            <ComboBox
-                                Header="{x:Bind ViewModel.AuthenticationMethodHeaderText, Mode=OneWay}"
-                                ItemsSource="{x:Bind ViewModel.AvailableAuthenticationMethodDisplayNames}"
-                                SelectedIndex="{x:Bind ViewModel.SelectedIncomingServerAuthenticationMethodIndex, Mode=TwoWay}" />
-                        </StackPanel>
+                        <!--  Incoming (IMAP) Settings  -->
+                        <Border
+                            Padding="16"
+                            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                            CornerRadius="6">
+                            <StackPanel Spacing="10">
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon FontSize="14" Glyph="&#xE896;" />
+                                    <TextBlock FontWeight="SemiBold" Text="{x:Bind ViewModel.IncomingSectionTitleText, Mode=OneWay}" />
+                                </StackPanel>
+                                <TextBox
+                                    Header="{x:Bind ViewModel.IncomingServerHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.IncomingServer, Mode=TwoWay}" />
+                                <TextBox
+                                    Header="{x:Bind ViewModel.PortHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.IncomingServerPort, Mode=TwoWay}" />
+                                <TextBox
+                                    Header="{x:Bind ViewModel.IncomingUsernameHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.IncomingServerUsername, Mode=TwoWay}" />
+                                <PasswordBox
+                                    Header="{x:Bind ViewModel.IncomingPasswordHeaderText, Mode=OneWay}"
+                                    Password="{x:Bind ViewModel.IncomingServerPassword, Mode=TwoWay}" />
+                                <ComboBox
+                                    HorizontalAlignment="Stretch"
+                                    Header="{x:Bind ViewModel.ConnectionSecurityHeaderText, Mode=OneWay}"
+                                    ItemsSource="{x:Bind ViewModel.AvailableConnectionSecurityDisplayNames}"
+                                    SelectedIndex="{x:Bind ViewModel.SelectedIncomingServerConnectionSecurityIndex, Mode=TwoWay}" />
+                                <ComboBox
+                                    HorizontalAlignment="Stretch"
+                                    Header="{x:Bind ViewModel.AuthenticationMethodHeaderText, Mode=OneWay}"
+                                    ItemsSource="{x:Bind ViewModel.AvailableAuthenticationMethodDisplayNames}"
+                                    SelectedIndex="{x:Bind ViewModel.SelectedIncomingServerAuthenticationMethodIndex, Mode=TwoWay}" />
+                            </StackPanel>
+                        </Border>

-                        <StackPanel Grid.Column="1" Spacing="8">
-                            <TextBlock FontWeight="SemiBold" Text="{x:Bind ViewModel.OutgoingSectionTitleText, Mode=OneWay}" />
-                            <TextBox Header="{x:Bind ViewModel.OutgoingServerHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.OutgoingServer, Mode=TwoWay}" />
-                            <TextBox Header="{x:Bind ViewModel.PortHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.OutgoingServerPort, Mode=TwoWay}" />
-                            <TextBox Header="{x:Bind ViewModel.OutgoingUsernameHeaderText, Mode=OneWay}" Text="{x:Bind ViewModel.OutgoingServerUsername, Mode=TwoWay}" />
-                            <PasswordBox Header="{x:Bind ViewModel.OutgoingPasswordHeaderText, Mode=OneWay}" Password="{x:Bind ViewModel.OutgoingServerPassword, Mode=TwoWay}" />
-                            <ComboBox
-                                Header="{x:Bind ViewModel.ConnectionSecurityHeaderText, Mode=OneWay}"
-                                ItemsSource="{x:Bind ViewModel.AvailableConnectionSecurityDisplayNames}"
-                                SelectedIndex="{x:Bind ViewModel.SelectedOutgoingServerConnectionSecurityIndex, Mode=TwoWay}" />
-                            <ComboBox
-                                Header="{x:Bind ViewModel.AuthenticationMethodHeaderText, Mode=OneWay}"
-                                ItemsSource="{x:Bind ViewModel.AvailableAuthenticationMethodDisplayNames}"
-                                SelectedIndex="{x:Bind ViewModel.SelectedOutgoingServerAuthenticationMethodIndex, Mode=TwoWay}" />
-                        </StackPanel>
+                        <!--  Outgoing (SMTP) Settings  -->
+                        <Border
+                            Grid.Column="1"
+                            Padding="16"
+                            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                            CornerRadius="6">
+                            <StackPanel Spacing="10">
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon FontSize="14" Glyph="&#xE898;" />
+                                    <TextBlock FontWeight="SemiBold" Text="{x:Bind ViewModel.OutgoingSectionTitleText, Mode=OneWay}" />
+                                </StackPanel>
+                                <TextBox
+                                    Header="{x:Bind ViewModel.OutgoingServerHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.OutgoingServer, Mode=TwoWay}" />
+                                <TextBox
+                                    Header="{x:Bind ViewModel.PortHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.OutgoingServerPort, Mode=TwoWay}" />
+                                <TextBox
+                                    Header="{x:Bind ViewModel.OutgoingUsernameHeaderText, Mode=OneWay}"
+                                    Text="{x:Bind ViewModel.OutgoingServerUsername, Mode=TwoWay}" />
+                                <PasswordBox
+                                    Header="{x:Bind ViewModel.OutgoingPasswordHeaderText, Mode=OneWay}"
+                                    Password="{x:Bind ViewModel.OutgoingServerPassword, Mode=TwoWay}" />
+                                <ComboBox
+                                    HorizontalAlignment="Stretch"
+                                    Header="{x:Bind ViewModel.ConnectionSecurityHeaderText, Mode=OneWay}"
+                                    ItemsSource="{x:Bind ViewModel.AvailableConnectionSecurityDisplayNames}"
+                                    SelectedIndex="{x:Bind ViewModel.SelectedOutgoingServerConnectionSecurityIndex, Mode=TwoWay}" />
+                                <ComboBox
+                                    HorizontalAlignment="Stretch"
+                                    Header="{x:Bind ViewModel.AuthenticationMethodHeaderText, Mode=OneWay}"
+                                    ItemsSource="{x:Bind ViewModel.AvailableAuthenticationMethodDisplayNames}"
+                                    SelectedIndex="{x:Bind ViewModel.SelectedOutgoingServerAuthenticationMethodIndex, Mode=TwoWay}" />
+                            </StackPanel>
+                        </Border>
                    </Grid>
                </StackPanel>
            </Border>

+            <!--  Calendar Settings Card  -->
            <Border
-                Padding="16"
+                Padding="20"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
-                CornerRadius="12">
-                <StackPanel Spacing="12">
-                    <TextBlock
-                        FontSize="19"
-                        FontWeight="SemiBold"
-                        Text="{x:Bind ViewModel.CalendarSectionTitleText, Mode=OneWay}" />
-                    <TextBlock
-                        Opacity="0.75"
-                        Text="{x:Bind ViewModel.CalendarSectionDescriptionText, Mode=OneWay}"
-                        TextWrapping="WrapWholeWords" />
+                CornerRadius="8">
+                <StackPanel Spacing="16">
+                    <StackPanel Spacing="2">
+                        <StackPanel Orientation="Horizontal" Spacing="8">
+                            <FontIcon FontSize="16" Glyph="&#xE787;" />
+                            <TextBlock
+                                FontSize="16"
+                                FontWeight="SemiBold"
+                                Text="{x:Bind ViewModel.CalendarSectionTitleText, Mode=OneWay}" />
+                        </StackPanel>
+                        <TextBlock
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Style="{StaticResource CaptionTextBlockStyle}"
+                            Text="{x:Bind ViewModel.CalendarSectionDescriptionText, Mode=OneWay}"
+                            TextWrapping="WrapWholeWords" />
+                    </StackPanel>
+
                    <ComboBox
+                        HorizontalAlignment="Stretch"
                        Header="{x:Bind ViewModel.CalendarModeHeaderText, Mode=OneWay}"
                        IsEnabled="{x:Bind ViewModel.IsCalendarModeSelectionVisible, Mode=OneWay}"
                        ItemsSource="{x:Bind ViewModel.AvailableCalendarSupportModeTitles}"
                        SelectedIndex="{x:Bind ViewModel.SelectedCalendarSupportModeIndex, Mode=TwoWay}" />
+
                    <TextBlock
-                        Opacity="0.8"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind ViewModel.SelectedCalendarSupportDescription, Mode=OneWay}"
                        TextWrapping="WrapWholeWords" />
-                    <Button
-                        HorizontalAlignment="Left"
+
+                    <HyperlinkButton
                        Command="{x:Bind ViewModel.ShowLocalCalendarExplanationCommand}"
                        Content="{x:Bind ViewModel.LocalCalendarLearnMoreText, Mode=OneWay}"
                        IsEnabled="{x:Bind ViewModel.IsLocalCalendarModeSelected, Mode=OneWay}" />
-                    <Grid ColumnSpacing="12">
+
+                    <Grid ColumnSpacing="12" Visibility="{x:Bind ViewModel.IsCalDavSettingsVisible, Mode=OneWay}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*" />
                            <ColumnDefinition Width="*" />
@@ -169,22 +244,22 @@
                        <TextBox
                            Grid.Column="0"
                            Header="{x:Bind ViewModel.CalDavServiceUrlHeaderText, Mode=OneWay}"
-                            IsEnabled="{x:Bind ViewModel.IsCalDavSettingsVisible, Mode=OneWay}"
                            Text="{x:Bind ViewModel.CalDavServiceUrl, Mode=TwoWay}" />
                        <TextBox
                            Grid.Column="1"
                            Header="{x:Bind ViewModel.CalDavUsernameHeaderText, Mode=OneWay}"
-                            IsEnabled="{x:Bind ViewModel.IsCalDavSettingsVisible, Mode=OneWay}"
                            Text="{x:Bind ViewModel.CalDavUsername, Mode=TwoWay}" />
                    </Grid>
+
                    <PasswordBox
                        Header="{x:Bind ViewModel.CalDavPasswordHeaderText, Mode=OneWay}"
-                        IsEnabled="{x:Bind ViewModel.IsCalDavSettingsVisible, Mode=OneWay}"
-                        Password="{x:Bind ViewModel.CalDavPassword, Mode=TwoWay}" />
+                        Password="{x:Bind ViewModel.CalDavPassword, Mode=TwoWay}"
+                        Visibility="{x:Bind ViewModel.IsCalDavSettingsVisible, Mode=OneWay}" />
                </StackPanel>
            </Border>

-            <Grid ColumnSpacing="8">
+            <!--  Action Bar  -->
+            <Grid Margin="0,4,0,0" ColumnSpacing="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
@@ -5,20 +5,110 @@
    xmlns:abstract="using:Wino.Views.Abstract"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:localControls="using:Wino.Mail.WinUI.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

-    <Border Style="{StaticResource PageRootBorderStyle}">
-        <Grid Padding="15">
-            <ScrollViewer>
-                <controls:MarkdownTextBlock
-                    Margin="0,0,16,0"
-                    CharacterSpacing="12"
-                    Config="{x:Bind _config, Mode=OneTime}"
-                    FontSize="16"
-                    Text="{x:Bind ViewModel.CurrentVersionNotes, Mode=OneWay}" />
-            </ScrollViewer>
+    <Grid Padding="32,24" RowSpacing="16">
+        <Grid.RowDefinitions>
+            <!--  Header  -->
+            <RowDefinition Height="Auto" />
+            <!--  CTA Button  -->
+            <RowDefinition Height="Auto" />
+            <!--  Segmented Tabs + FlipView content  -->
+            <RowDefinition Height="*" />
+            <!--  Footer  -->
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <!--  Header  -->
+        <StackPanel Grid.Row="0" Spacing="4">
+            <TextBlock
+                FontSize="28"
+                FontWeight="SemiBold"
+                Text="{x:Bind domain:Translator.WelcomeWindow_Title}" />
+            <TextBlock
+                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                Style="{StaticResource BodyTextBlockStyle}"
+                Text="{x:Bind domain:Translator.WelcomeWindow_Subtitle}"
+                TextWrapping="Wrap" />
+        </StackPanel>
+
+        <!--  Get Started CTA  -->
+        <Button
+            Grid.Row="1"
+            Padding="24,12"
+            HorizontalAlignment="Stretch"
+            Command="{x:Bind ViewModel.NavigateManageAccountsCommand}"
+            Style="{StaticResource AccentButtonStyle}">
+            <StackPanel Spacing="4">
+                <TextBlock
+                    FontSize="14"
+                    FontWeight="SemiBold"
+                    HorizontalTextAlignment="Center"
+                    Text="{x:Bind domain:Translator.WelcomeWindow_GetStartedButton}" />
+                <TextBlock
+                    FontSize="12"
+                    Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                    Opacity="0.8"
+                    Text="{x:Bind domain:Translator.WelcomeWindow_GetStartedDescription}" />
+            </StackPanel>
+        </Button>
+
+        <!--  Tabs + Content  -->
+        <Grid Grid.Row="2" RowSpacing="12">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <!--  Segmented Control  -->
+            <controls:Segmented
+                x:Name="TabSegmented"
+                HorizontalAlignment="Center"
+                SelectionChanged="OnTabSelectionChanged">
+                <controls:SegmentedItem Content="{x:Bind domain:Translator.WelcomeWindow_FeaturesTab}" />
+                <controls:SegmentedItem Content="{x:Bind domain:Translator.WelcomeWindow_WhatsNewTab}" />
+            </controls:Segmented>
+
+            <!--  Features FlipView  -->
+            <localControls:UpdateNotesFlipViewControl
+                x:Name="FeaturesFlipView"
+                Grid.Row="1"
+                Sections="{x:Bind ViewModel.FeatureSections, Mode=OneWay}"
+                Visibility="Visible" />
+
+            <!--  What's New FlipView  -->
+            <localControls:UpdateNotesFlipViewControl
+                x:Name="WhatsNewFlipView"
+                Grid.Row="1"
+                Sections="{x:Bind ViewModel.UpdateSections, Mode=OneWay}"
+                Visibility="Collapsed" />
        </Grid>
-    </Border>
+
+        <!--  Footer  -->
+        <Grid Grid.Row="3" Padding="0,8,0,0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <TextBlock
+                VerticalAlignment="Center"
+                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                Style="{StaticResource CaptionTextBlockStyle}"
+                Text="{x:Bind ViewModel.VersionDisplay, Mode=OneWay}" />
+
+            <StackPanel
+                Grid.Column="1"
+                Orientation="Horizontal"
+                Spacing="8">
+                <HyperlinkButton Content="{x:Bind domain:Translator.SettingsAboutGithub_Title}" NavigateUri="{x:Bind ViewModel.GitHubUrl, Mode=OneWay}" />
+                <HyperlinkButton Content="{x:Bind domain:Translator.SettingsPaypal_Title}" NavigateUri="{x:Bind ViewModel.PaypalUrl, Mode=OneWay}" />
+            </StackPanel>
+        </Grid>
+    </Grid>

 </abstract:WelcomePageAbstract>
@@ -1,3 +1,5 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
 using CommunityToolkit.WinUI.Controls;
 using Wino.Views.Abstract;

@@ -5,12 +7,19 @@ namespace Wino.Views;

 public sealed partial class WelcomePage : WelcomePageAbstract
 {
-    private readonly MarkdownConfig _config;
-
    public WelcomePage()
    {
        InitializeComponent();
+    }

-        _config = new MarkdownConfig();
+    private void OnTabSelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        if (sender is not Segmented segmented)
+            return;
+
+        bool isFeaturesTab = segmented.SelectedIndex == 0;
+
+        FeaturesFlipView.Visibility = isFeaturesTab ? Visibility.Visible : Visibility.Collapsed;
+        WhatsNewFlipView.Visibility = isFeaturesTab ? Visibility.Collapsed : Visibility.Visible;
    }
 }
@@ -0,0 +1,152 @@
+<abstract:WelcomePageV2Abstract
+    x:Class="Wino.Views.WelcomePageV2"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:abstract="using:Wino.Views.Abstract"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:models="using:Wino.Core.Domain.Models.Updates"
+    mc:Ignorable="d">
+
+    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+        <Grid
+            MaxWidth="900"
+            Margin="0,48,0,40"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            RowSpacing="32">
+
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+
+            <!--  Brand  -->
+            <StackPanel HorizontalAlignment="Center" Spacing="4">
+                <Image
+                    Width="128"
+                    Height="128"
+                    Margin="0,0,0,12"
+                    HorizontalAlignment="Center"
+                    Source="ms-appx:///Assets/AppEntries/MailAssets/Square150x150Logo.scale-100.png"
+                    Stretch="Uniform" />
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    FontSize="28"
+                    FontWeight="SemiBold"
+                    Text="{x:Bind domain:Translator.WelcomeWindow_Title}" />
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Style="{StaticResource BodyTextBlockStyle}"
+                    Text="{x:Bind domain:Translator.WelcomeWindow_AppDescription}" />
+            </StackPanel>
+
+            <!--  FlipView  -->
+            <Grid
+                Grid.Row="1"
+                MaxHeight="300"
+                VerticalAlignment="Center">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+
+                <Border
+                    Padding="0"
+                    VerticalAlignment="Center"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="12">
+                    <FlipView
+                        x:Name="UpdateFlipView"
+                        MinHeight="200"
+                        Background="Transparent"
+                        ItemsSource="{x:Bind ViewModel.UpdateSections, Mode=OneWay}"
+                        SelectionChanged="OnFlipViewSelectionChanged">
+                        <FlipView.ItemTemplate>
+                            <DataTemplate x:DataType="models:UpdateNoteSection">
+                                <Grid Padding="48,40" ColumnSpacing="40">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="200" />
+                                        <ColumnDefinition Width="*" />
+                                    </Grid.ColumnDefinitions>
+
+                                    <!--  Illustration  -->
+                                    <Border Height="160" CornerRadius="8">
+                                        <Image
+                                            Width="{x:Bind ActualImageWidth, Mode=OneTime}"
+                                            Height="{x:Bind ActualImageHeight, Mode=OneTime}"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            Source="{x:Bind ImageUrl, Mode=OneTime}"
+                                            Stretch="Uniform" />
+                                    </Border>
+
+                                    <!--  Content  -->
+                                    <StackPanel
+                                        Grid.Column="1"
+                                        VerticalAlignment="Center"
+                                        Spacing="8">
+                                        <controls:MarkdownTextBlock Text="{x:Bind Title, Mode=OneTime}" />
+                                        <controls:MarkdownTextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind Description, Mode=OneTime}" />
+                                    </StackPanel>
+                                </Grid>
+                            </DataTemplate>
+                        </FlipView.ItemTemplate>
+                    </FlipView>
+                </Border>
+
+                <!--  PipsPager  -->
+                <PipsPager
+                    x:Name="FlipViewPager"
+                    Grid.Row="1"
+                    Margin="0,16,0,0"
+                    HorizontalAlignment="Center"
+                    NumberOfPages="{x:Bind ViewModel.UpdateSections.Count, Mode=OneWay}"
+                    SelectedIndexChanged="OnPipsPagerSelectedIndexChanged"
+                    SelectedPageIndex="0" />
+            </Grid>
+
+            <!--  Divider  -->
+            <Border
+                Grid.Row="2"
+                Height="1"
+                HorizontalAlignment="Stretch"
+                Background="{ThemeResource DividerStrokeColorDefaultBrush}" />
+
+            <!--  Get Started  -->
+            <StackPanel
+                Grid.Row="3"
+                MaxWidth="600"
+                HorizontalAlignment="Center"
+                Spacing="8">
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Style="{StaticResource BodyTextBlockStyle}"
+                    Text="{x:Bind domain:Translator.WelcomeWindow_GetStartedDescription}" />
+
+                <Button
+                    MinWidth="240"
+                    Padding="12,10"
+                    HorizontalAlignment="Center"
+                    Command="{x:Bind ViewModel.GetStartedCommand}"
+                    Style="{StaticResource AccentButtonStyle}">
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        FontSize="14"
+                        FontWeight="SemiBold"
+                        Text="{x:Bind domain:Translator.WelcomeWindow_GetStartedButton}" />
+                </Button>
+            </StackPanel>
+
+        </Grid>
+    </ScrollViewer>
+
+</abstract:WelcomePageV2Abstract>
@@ -0,0 +1,22 @@
+using Microsoft.UI.Xaml.Controls;
+using Wino.Views.Abstract;
+
+namespace Wino.Views;
+
+public sealed partial class WelcomePageV2 : WelcomePageV2Abstract
+{
+    public WelcomePageV2()
+    {
+        InitializeComponent();
+    }
+
+    private void OnFlipViewSelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        FlipViewPager.SelectedPageIndex = UpdateFlipView.SelectedIndex;
+    }
+
+    private void OnPipsPagerSelectedIndexChanged(PipsPager sender, PipsPagerSelectedIndexChangedEventArgs args)
+    {
+        UpdateFlipView.SelectedIndex = sender.SelectedPageIndex;
+    }
+}