Avalonia/samples/ControlCatalog/Pages/NavigationPage/PulseProfileView.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.PulseProfileView">

  <ScrollViewer VerticalScrollBarVisibility="Auto">
    <StackPanel Spacing="0">

      <!-- Profile Header -->
      <StackPanel HorizontalAlignment="Center" Spacing="8" Margin="16,28,16,24">
        <Border Width="80" Height="80" CornerRadius="40" ClipToBounds="True"
                BorderBrush="#256af4" BorderThickness="3"
                HorizontalAlignment="Center">
          <Border.Background>
            <ImageBrush Source="avares://ControlCatalog/Assets/Pulse/profile_avatar.jpg"
                        Stretch="UniformToFill"/>
          </Border.Background>
        </Border>
        <TextBlock Text="Alex Johnson" FontSize="20" FontWeight="Bold" Foreground="White"
                   HorizontalAlignment="Center"/>
        <TextBlock Text="Member since Jan 2023" FontSize="12" Foreground="#94a3b8"
                   HorizontalAlignment="Center"/>
      </StackPanel>

      <!-- Stats Grid -->
      <UniformGrid Columns="3" Margin="16,0,16,24">
        <Border CornerRadius="12" Background="#1a1a1a" Padding="12,16" Margin="4">
          <StackPanel HorizontalAlignment="Center" Spacing="4">
            <TextBlock Text="148" FontSize="22" FontWeight="Bold" Foreground="#256af4"
                       HorizontalAlignment="Center"/>
            <TextBlock Text="Workouts" FontSize="11" Foreground="#94a3b8"
                       HorizontalAlignment="Center"/>
          </StackPanel>
        </Border>
        <Border CornerRadius="12" Background="#1a1a1a" Padding="12,16" Margin="4">
          <StackPanel HorizontalAlignment="Center" Spacing="4">
            <TextBlock Text="62h" FontSize="22" FontWeight="Bold" Foreground="#10b981"
                       HorizontalAlignment="Center"/>
            <TextBlock Text="Total Time" FontSize="11" Foreground="#94a3b8"
                       HorizontalAlignment="Center"/>
          </StackPanel>
        </Border>
        <Border CornerRadius="12" Background="#1a1a1a" Padding="12,16" Margin="4">
          <StackPanel HorizontalAlignment="Center" Spacing="4">
            <TextBlock Text="45.2K" FontSize="22" FontWeight="Bold" Foreground="#f97316"
                       HorizontalAlignment="Center"/>
            <TextBlock Text="Calories" FontSize="11" Foreground="#94a3b8"
                       HorizontalAlignment="Center"/>
          </StackPanel>
        </Border>
      </UniformGrid>

      <!-- Achievements -->
      <TextBlock Text="Achievements" FontSize="18" FontWeight="Bold" Foreground="White"
                 Margin="16,0,16,12"/>

      <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
                    Margin="0,0,0,24">
        <StackPanel Orientation="Horizontal" Spacing="12" Margin="16,0">
          <!-- Early Bird -->
          <Border Width="120" CornerRadius="16" Background="#1a1a1a" Padding="12,16">
            <StackPanel HorizontalAlignment="Center" Spacing="8">
              <Border Width="44" Height="44" CornerRadius="22"
                      Background="#1Af59e0b" HorizontalAlignment="Center">
                <PathIcon Data="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                          Width="20" Height="20" Foreground="#f59e0b"/>
              </Border>
              <TextBlock Text="Early Bird" FontSize="12" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
              <TextBlock Text="30 morning&#xA;workouts" FontSize="10" Foreground="#94a3b8"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
            </StackPanel>
          </Border>
          <!-- Iron Will -->
          <Border Width="120" CornerRadius="16" Background="#1a1a1a" Padding="12,16">
            <StackPanel HorizontalAlignment="Center" Spacing="8">
              <Border Width="44" Height="44" CornerRadius="22"
                      Background="#1A256af4" HorizontalAlignment="Center">
                <PathIcon Data="M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"
                          Width="20" Height="20" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="Iron Will" FontSize="12" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
              <TextBlock Text="100 workout&#xA;milestone" FontSize="10" Foreground="#94a3b8"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
            </StackPanel>
          </Border>
          <!-- Consistent -->
          <Border Width="120" CornerRadius="16" Background="#1a1a1a" Padding="12,16">
            <StackPanel HorizontalAlignment="Center" Spacing="8">
              <Border Width="44" Height="44" CornerRadius="22"
                      Background="#1Aef4444" HorizontalAlignment="Center">
                <PathIcon Data="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"
                          Width="20" Height="20" Foreground="#ef4444"/>
              </Border>
              <TextBlock Text="Consistent" FontSize="12" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
              <TextBlock Text="30-day&#xA;streak" FontSize="10" Foreground="#94a3b8"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
            </StackPanel>
          </Border>
          <!-- Marathon (locked) -->
          <Border Width="120" CornerRadius="16" Background="#1a1a1a" Padding="12,16"
                  Opacity="0.5">
            <StackPanel HorizontalAlignment="Center" Spacing="8">
              <Border Width="44" Height="44" CornerRadius="22"
                      Background="#1Aa855f7" HorizontalAlignment="Center">
                <PathIcon Data="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
                          Width="20" Height="20" Foreground="#a855f7"/>
              </Border>
              <TextBlock Text="Marathon" FontSize="12" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
              <TextBlock Text="10 hours in&#xA;a week" FontSize="10" Foreground="#94a3b8"
                         HorizontalAlignment="Center" TextAlignment="Center"/>
            </StackPanel>
          </Border>
        </StackPanel>
      </ScrollViewer>

      <!-- Settings -->
      <TextBlock Text="Settings" FontSize="18" FontWeight="Bold" Foreground="White"
                 Margin="16,0,16,12"/>

      <!-- Personal Info -->
      <Border CornerRadius="12" Background="#1a1a1a" Padding="14,12" Margin="16,0,16,8">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="36" Height="36" CornerRadius="10"
                  Background="#1A256af4" VerticalAlignment="Center">
            <PathIcon Data="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                      Width="16" Height="16" Foreground="#256af4"/>
          </Border>
          <TextBlock Grid.Column="1" Text="Personal Info" FontSize="14" FontWeight="Medium"
                     Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="14" Height="14" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Workout Preferences -->
      <Border CornerRadius="12" Background="#1a1a1a" Padding="14,12" Margin="16,0,16,8">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="36" Height="36" CornerRadius="10"
                  Background="#1A256af4" VerticalAlignment="Center">
            <PathIcon Data="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
                      Width="16" Height="16" Foreground="#256af4"/>
          </Border>
          <TextBlock Grid.Column="1" Text="Workout Preferences" FontSize="14" FontWeight="Medium"
                     Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="14" Height="14" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Notifications -->
      <Border CornerRadius="12" Background="#1a1a1a" Padding="14,12" Margin="16,0,16,8">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="36" Height="36" CornerRadius="10"
                  Background="#1A256af4" VerticalAlignment="Center">
            <PathIcon Data="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
                      Width="16" Height="16" Foreground="#256af4"/>
          </Border>
          <TextBlock Grid.Column="1" Text="Notifications" FontSize="14" FontWeight="Medium"
                     Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="14" Height="14" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Connected Apps -->
      <Border CornerRadius="12" Background="#1a1a1a" Padding="14,12" Margin="16,0,16,8">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="36" Height="36" CornerRadius="10"
                  Background="#1A256af4" VerticalAlignment="Center">
            <PathIcon Data="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
                      Width="16" Height="16" Foreground="#256af4"/>
          </Border>
          <TextBlock Grid.Column="1" Text="Connected Apps" FontSize="14" FontWeight="Medium"
                     Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="14" Height="14" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Help & Support -->
      <Border CornerRadius="12" Background="#1a1a1a" Padding="14,12" Margin="16,0,16,8">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="36" Height="36" CornerRadius="10"
                  Background="#1A256af4" VerticalAlignment="Center">
            <PathIcon Data="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
                      Width="16" Height="16" Foreground="#256af4"/>
          </Border>
          <TextBlock Grid.Column="1" Text="Help &amp; Support" FontSize="14" FontWeight="Medium"
                     Foreground="White" VerticalAlignment="Center" Margin="12,0,0,0"/>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="14" Height="14" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <Border Height="16"/>

    </StackPanel>
  </ScrollViewer>
</UserControl>