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

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

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

      <!-- Title -->
      <TextBlock Text="My Workouts" FontSize="24" FontWeight="Bold" Foreground="White"
                 Margin="16,20,16,4"/>
      <TextBlock Text="Stay consistent, stay strong" FontSize="13" Foreground="#94a3b8"
                 Margin="16,0,16,20"/>

      <!-- This Week card -->
      <Border CornerRadius="16" Padding="20" Margin="16,0,16,20">
        <Border.Background>
          <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
            <GradientStop Color="#256af4" Offset="0"/>
            <GradientStop Color="#1d3fd4" Offset="1"/>
          </LinearGradientBrush>
        </Border.Background>
        <StackPanel Spacing="16">
          <!-- Week header -->
          <Grid ColumnDefinitions="*,Auto">
            <TextBlock Text="This Week" FontSize="16" FontWeight="Bold" Foreground="White"/>
            <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="4"
                        VerticalAlignment="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="14" Height="14" Foreground="#f97316"/>
              <TextBlock Text="5 Day Streak" FontSize="12" FontWeight="SemiBold"
                         Foreground="White" Opacity="0.85"/>
            </StackPanel>
          </Grid>

          <!-- Days row -->
          <UniformGrid Columns="7">
            <!-- Monday: completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="White"
                      HorizontalAlignment="Center">
                <PathIcon Data="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
                          Width="14" Height="14" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="M" FontSize="10" FontWeight="SemiBold" Foreground="White"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Tuesday: completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="White"
                      HorizontalAlignment="Center">
                <PathIcon Data="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
                          Width="14" Height="14" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="T" FontSize="10" FontWeight="SemiBold" Foreground="White"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Wednesday: completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="White"
                      HorizontalAlignment="Center">
                <PathIcon Data="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
                          Width="14" Height="14" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="W" FontSize="10" FontWeight="SemiBold" Foreground="White"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Thursday: completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="White"
                      HorizontalAlignment="Center">
                <PathIcon Data="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
                          Width="14" Height="14" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="T" FontSize="10" FontWeight="SemiBold" Foreground="White"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Friday: completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="White"
                      HorizontalAlignment="Center">
                <PathIcon Data="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
                          Width="14" Height="14" Foreground="#256af4"/>
              </Border>
              <TextBlock Text="F" FontSize="10" FontWeight="SemiBold" Foreground="White"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Saturday: not completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="#33FFFFFF"
                      HorizontalAlignment="Center"/>
              <TextBlock Text="S" FontSize="10" FontWeight="SemiBold" Foreground="#99FFFFFF"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <!-- Sunday: not completed -->
            <StackPanel HorizontalAlignment="Center" Spacing="6">
              <Border Width="32" Height="32" CornerRadius="16" Background="#33FFFFFF"
                      HorizontalAlignment="Center"/>
              <TextBlock Text="S" FontSize="10" FontWeight="SemiBold" Foreground="#99FFFFFF"
                         HorizontalAlignment="Center"/>
            </StackPanel>
          </UniformGrid>

          <!-- Week stats -->
          <Grid ColumnDefinitions="*,*,*" Margin="0,4,0,0">
            <StackPanel HorizontalAlignment="Center" Spacing="2">
              <TextBlock Text="5" FontSize="18" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center"/>
              <TextBlock Text="Workouts" FontSize="10" Foreground="#B2FFFFFF"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <StackPanel Grid.Column="1" HorizontalAlignment="Center" Spacing="2">
              <TextBlock Text="3.5h" FontSize="18" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center"/>
              <TextBlock Text="Duration" FontSize="10" Foreground="#B2FFFFFF"
                         HorizontalAlignment="Center"/>
            </StackPanel>
            <StackPanel Grid.Column="2" HorizontalAlignment="Center" Spacing="2">
              <TextBlock Text="2,150" FontSize="18" FontWeight="Bold" Foreground="White"
                         HorizontalAlignment="Center"/>
              <TextBlock Text="Calories" FontSize="10" Foreground="#B2FFFFFF"
                         HorizontalAlignment="Center"/>
            </StackPanel>
          </Grid>
        </StackPanel>
      </Border>

      <!-- Today's Plan header -->
      <Grid ColumnDefinitions="*,Auto" Margin="16,0,16,12">
        <TextBlock Text="Today's Plan" FontSize="18" FontWeight="Bold" Foreground="White"/>
        <TextBlock Grid.Column="1" Text="Edit" FontSize="12" FontWeight="SemiBold"
                   Foreground="#256af4" VerticalAlignment="Center"/>
      </Grid>

      <!-- Upper Body Strength (active) -->
      <Border CornerRadius="16" Background="#1a1a1a" Padding="14" Margin="16,0,16,10"
              BorderBrush="#33256af4" BorderThickness="1">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="44" Height="44" CornerRadius="12"
                  Background="#1A256af4" VerticalAlignment="Center" Margin="0,0,12,0">
            <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>
          <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
            <TextBlock Text="Upper Body Strength" FontSize="14" FontWeight="Bold" Foreground="White"/>
            <TextBlock Text="Chest, Shoulders, Triceps" FontSize="11" Foreground="#94a3b8"/>
            <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,4,0,0">
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 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.2 3.2.8-1.3-4.5-2.7V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="45 min" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="9:00 AM" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
            </StackPanel>
          </StackPanel>
          <Border Grid.Column="2" CornerRadius="8" Background="#256af4"
                  Padding="12,8" VerticalAlignment="Center">
            <TextBlock Text="Start" FontSize="11" FontWeight="Bold" Foreground="White"/>
          </Border>
        </Grid>
      </Border>

      <!-- HIIT Cardio -->
      <Border CornerRadius="16" Background="#1a1a1a" Padding="14" Margin="16,0,16,10">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="44" Height="44" CornerRadius="12"
                  Background="#1Af97316" VerticalAlignment="Center" Margin="0,0,12,0">
            <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="#f97316"/>
          </Border>
          <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
            <TextBlock Text="HIIT Cardio" FontSize="14" FontWeight="Bold" Foreground="White"/>
            <TextBlock Text="Full Body Burn" FontSize="11" Foreground="#94a3b8"/>
            <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,4,0,0">
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 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.2 3.2.8-1.3-4.5-2.7V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="25 min" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="5:30 PM" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
            </StackPanel>
          </StackPanel>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="16" Height="16" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Upcoming header -->
      <TextBlock Text="Upcoming" FontSize="18" FontWeight="Bold" Foreground="White"
                 Margin="16,20,16,12"/>

      <!-- Yoga & Recovery -->
      <Border CornerRadius="16" Background="#1a1a1a" Padding="14" Margin="16,0,16,10">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="44" Height="44" CornerRadius="12"
                  Background="#1A10b981" VerticalAlignment="Center" Margin="0,0,12,0">
            <PathIcon Data="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"
                      Width="20" Height="20" Foreground="#10b981"/>
          </Border>
          <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
            <TextBlock Text="Yoga &amp; Recovery" FontSize="14" FontWeight="Bold" Foreground="White"/>
            <TextBlock Text="Flexibility, Core" FontSize="11" Foreground="#94a3b8"/>
            <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,4,0,0">
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 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.2 3.2.8-1.3-4.5-2.7V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="30 min" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="Tomorrow" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
            </StackPanel>
          </StackPanel>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="16" Height="16" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Leg Day -->
      <Border CornerRadius="16" Background="#1a1a1a" Padding="14" Margin="16,0,16,10">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="44" Height="44" CornerRadius="12"
                  Background="#1Aa855f7" VerticalAlignment="Center" Margin="0,0,12,0">
            <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>
          <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
            <TextBlock Text="Leg Day" FontSize="14" FontWeight="Bold" Foreground="White"/>
            <TextBlock Text="Quads, Glutes, Hamstrings" FontSize="11" Foreground="#94a3b8"/>
            <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,4,0,0">
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 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.2 3.2.8-1.3-4.5-2.7V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="50 min" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="Wednesday" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
            </StackPanel>
          </StackPanel>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="16" Height="16" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <!-- Core Destroyer -->
      <Border CornerRadius="16" Background="#1a1a1a" Padding="14" Margin="16,0,16,10">
        <Grid ColumnDefinitions="Auto,*,Auto">
          <Border Width="44" Height="44" CornerRadius="12"
                  Background="#1Aef4444" VerticalAlignment="Center" Margin="0,0,12,0">
            <PathIcon Data="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      Width="20" Height="20" Foreground="#ef4444"/>
          </Border>
          <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
            <TextBlock Text="Core Destroyer" FontSize="14" FontWeight="Bold" Foreground="White"/>
            <TextBlock Text="Abs, Obliques, Lower Back" FontSize="11" Foreground="#94a3b8"/>
            <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,4,0,0">
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 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.2 3.2.8-1.3-4.5-2.7V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="20 min" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Spacing="4">
                <Path Data="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"
                      Fill="#64748b" Stretch="Uniform" Width="12" Height="12" VerticalAlignment="Center"/>
                <TextBlock Text="Thursday" FontSize="11" Foreground="#94a3b8"/>
              </StackPanel>
            </StackPanel>
          </StackPanel>
          <PathIcon Grid.Column="2" Data="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                    Width="16" Height="16" Foreground="#64748b" VerticalAlignment="Center"/>
        </Grid>
      </Border>

      <Border Height="16"/>

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