Artemis/src/Artemis.UI/Views/MainView.xaml

<UserControl x:Class="Artemis.UI.Views.MainView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:viewModels="clr-namespace:Artemis.UI.ViewModels"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" 
             d:DesignHeight="574.026" 
             d:DesignWidth="1029.87" 
             d:DataContext="{d:DesignInstance viewModels:MainViewModel,
             IsDesignTimeCreatable=True}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
                <!-- throw in some extra colour for our floating action button -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Green.Named.Primary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Margin="16">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="/Resources/logo-512.png" Stretch="Uniform" Width="100" Height="100" />
            <StackPanel Grid.Column="1" Margin="24 0 0 0" VerticalAlignment="Center">
                <TextBlock Style="{StaticResource MaterialDesignDisplay1TextBlock}" TextWrapping="Wrap">Welcome to Artemis, RGB on steroids.</TextBlock>
                <Button Style="{StaticResource MaterialDesignFlatButton}"
                        Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Binoculars" />
                        <TextBlock Margin="8 0 0 0">EXPLORE</TextBlock>
                    </StackPanel>
                </Button>
            </StackPanel>
        </Grid>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Bottom"
                      Margin="0 0 0 32">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <materialDesign:Card Width="420" Margin="8 2 4 16" Height="Auto">
                        <Grid VerticalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="155" />
                                <RowDefinition Height="95" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <materialDesign:PackIcon Kind="Discord" Width="140" Height="140" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <StackPanel Grid.Column="1">
                                <TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="16 16 16 8">Have a chat</TextBlock>
                                <TextBlock TextWrapping="Wrap" Margin="16 0 16 8" Foreground="{DynamicResource MaterialDesignBodyLight}"
                                           VerticalAlignment="Top"><Run Text="If you need help, have some feedback or have any other questions feel free to contact us through any of the following channels"/><Run Text=". "/></TextBlock>
                            </StackPanel>
                            <Border Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
                                <DockPanel>
                                    <Grid Margin="8">
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
                                            x:Name="GitHubButton" Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis">
                                            <StackPanel Orientation="Horizontal">
                                                <materialDesign:PackIcon Kind="GithubCircle" />
                                                <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">GitHub</TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
                                            x:Name="TwitterButton" Command="{Binding OpenUrl}" CommandParameter="https://twitter.com/spoinkynl">
                                            <StackPanel Orientation="Horizontal">
                                                <materialDesign:PackIcon Kind="Twitter" />
                                                <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Twitter</TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Grid.Row="1" Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Left"
                                            x:Name="DiscordButton" Command="{Binding OpenUrl}" CommandParameter="https://discordapp.com/invite/S3MVaC9">
                                            <StackPanel Orientation="Horizontal">
                                                <materialDesign:PackIcon Kind="Discord" />
                                                <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Discord</TextBlock>
                                            </StackPanel>
                                        </Button>
                                        <Button Grid.Row="1" Style="{DynamicResource MaterialDesignFlatButton}" HorizontalAlignment="Right"
                                            x:Name="MailButton" Command="{Binding OpenUrl}" CommandParameter="mailto:spoinky.nl@gmail.com">
                                            <StackPanel Orientation="Horizontal">
                                                <materialDesign:PackIcon Kind="Email" />
                                                <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">E-mail</TextBlock>
                                            </StackPanel>
                                        </Button>
                                    </Grid>
                                </DockPanel>
                            </Border>
                        </Grid>
                    </materialDesign:Card>
                    <materialDesign:Card Width="420" Margin="8 2 4 16" Height="Auto">
                        <Grid VerticalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="155" />
                                <RowDefinition Height="95" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <materialDesign:PackIcon Kind="GithubCircle" Width="160" Height="160" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <StackPanel Grid.Column="1">
                                <TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" Margin="16 16 16 8">Open Source</TextBlock>
                                <TextBlock TextWrapping="Wrap" Margin="16 0 16 8" Foreground="{DynamicResource MaterialDesignBodyLight}"
                                           VerticalAlignment="Top"><Run Text="This project is completely open source. If you like it and want to say thanks you could hit the GitHub Star button, tweet or post about it"/><Run Text=". You can also make your own modules!"/></TextBlock>
                            </StackPanel>
                            <Border Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
                                <DockPanel>
                                    <Button Style="{DynamicResource MaterialDesignFlatButton}" 
                                            DockPanel.Dock="Right"
                                            x:Name="DonateButton" Command="{Binding OpenUrl}" CommandParameter="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=VQBAEJYUFLU4J">
                                        <StackPanel Orientation="Horizontal">
                                            <materialDesign:PackIcon Kind="Gift" />
                                            <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Donate</TextBlock>
                                        </StackPanel>
                                    </Button>
                                    <TextBlock Foreground="{DynamicResource MaterialDesignBodyLight}" TextWrapping="Wrap" Margin="16" VerticalAlignment="Center"><Run Text="Feel like you want to make a donation? It would be gratefully received. Click the button to donate via "/><Run Text="Paypal"/><Run Text="."/></TextBlock>
                                </DockPanel>
                            </Border>
                        </Grid>
                    </materialDesign:Card>
                </StackPanel>
            </Grid>
        </ScrollViewer>
        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
                                 HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                 Margin="32" Grid.Row="1">
            <StackPanel>
                <Button ToolTip="GitHub" Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis">
                    <materialDesign:PackIcon Kind="GithubCircle" Height="20" Width="20" />
                </Button>
                <Button ToolTip="Twitter" Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis"
                        Background="{DynamicResource PrimaryHueMidBrush}"
                        Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
                    <materialDesign:PackIcon Kind="Twitter" />
                </Button>
                <Button ToolTip="Chat" Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis">
                    <!-- mix up the colours by brinking in a named palette (see merged dictionaries at top) -->
                    <Button.Background>
                        <SolidColorBrush Color="{StaticResource GreenPrimary500}" />
                    </Button.Background>
                    <Button.Foreground>
                        <SolidColorBrush Color="{StaticResource GreenPrimary500Foreground}" />
                    </Button.Foreground>
                    <materialDesign:PackIcon Kind="Message" />
                </Button>
                <Button ToolTip="Email" Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis"
                        Background="{DynamicResource SecondaryAccentBrush}"
                        Foreground="{DynamicResource SecondaryAccentForegroundBrush}"
                        >
                    <materialDesign:PackIcon Kind="Email" />
                </Button>
                <Button ToolTip="Feel like you want to make a donation?  It would be gratefully received.  Click the button to donate via Pledgie." 
                    Command="{Binding OpenUrl}" CommandParameter="https://github.com/SpoinkyNL/Artemis">
                    <Button.Background>
                        <SolidColorBrush Color="{StaticResource GreenPrimary200}" />
                    </Button.Background>
                    <Button.Foreground>
                        <SolidColorBrush Color="{StaticResource GreenPrimary200Foreground}" />
                    </Button.Foreground>
                    <materialDesign:PackIcon Kind="Gift" />
                </Button>
            </StackPanel>
        </materialDesign:PopupBox>
    </Grid>
</UserControl>