MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Coffeeffee_MAUI.MainPage"
             xmlns:icons="clr-namespace:Coffeeffee_MAUI.Styles"
             xmlns:local="clr-namespace:Coffeeffee_MAUI.Controls"
             xmlns:models="clr-namespace:Coffeeffee_MAUI.Models"
             BackgroundColor="{StaticResource green}"
             NavigationPage.HasNavigationBar="False">
    
    <Grid Grid.RowDefinitions="120,*,64,100"
          ColumnDefinitions="*,*,*">

        <Label Text="All Products" Grid.ColumnSpan="2" VerticalOptions="Center" FontFamily="JosefinSansBold"
               TextColor="#FFFFFF" FontSize="32" Margin="32,0,0,0" />

        <Button BackgroundColor="#FFFFFF" FontFamily="Icons" HeightRequest="52" WidthRequest="52" HorizontalOptions="End"
                VerticalOptions="Center" Grid.Column="2" CornerRadius="8" Margin="0,0,32,0"
                Text="{x:Static icons:Icons.IconShopping}" TextColor="{StaticResource green}" FontSize="20"/>

        <Label Margin="32,0" Grid.ColumnSpan="3" Grid.Row="2" FontSize="16"
               HorizontalTextAlignment="Center" HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand">
            <Label.FormattedText>
                <FormattedString>
                    <Span TextColor="#FFFFFF" Text="Use your voucher code &amp; Get 25% off now. Follow us on Instagram &amp;" FontFamily="JosefinSansRegular"  LineHeight="1.4" />
                    <Span TextColor="#000000" Text=" Get your offer voucher code from here !!!" FontFamily="JosefinSansRegular"  LineHeight="1.4" />
                </FormattedString>
            </Label.FormattedText>
        </Label>

        <BoxView Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="4" VerticalOptions="End" BackgroundColor="#ffffff" Margin="0,0,0,-40" HeightRequest="40" />


        <Grid Grid.Row="3" Grid.ColumnSpan="3">
            <Path Fill="#FFFFFF" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="UniformToFill" 
                  Data="M615.59,178.35c-86.88,0-129.26-89.18-129.26-89.18S435.14,14,375,14,263.63,89.17,263.63,89.17s-42.2,89.18-129.26,89.18S0,0,0,0V200H750V0S702.61,178.35,615.59,178.35Z" />
        </Grid>

        <CarouselView ItemsSource="{Binding .}" Grid.Row="1" Grid.ColumnSpan="3" PeekAreaInsets="32,0,96,0"
                      HorizontalScrollBarVisibility="Never">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" ItemSpacing="24" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate x:DataType="models:Coffee">
                    <Frame HasShadow="False" IsClippedToBounds="True" Padding="20" CornerRadius="20" BackgroundColor="{StaticResource white}">
                        <Grid RowSpacing="16">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="48" />
                                <RowDefinition Height="48" />
                                <RowDefinition Height="48" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Image Margin="-24,-24,-24,0" Source="{Binding Image}" Grid.ColumnSpan="2" Aspect="AspectFill">                                   
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Image_Tapped" />
                                </Image.GestureRecognizers>
                            </Image>
                            <Label Style="{StaticResource product_title}" Grid.ColumnSpan="2" Grid.Row="1" Text="{Binding Title}" />
                            <Label Grid.Row="2" FontFamily="JosefinSansBold" FontSize="40" TextColor="{StaticResource green}" Text="{Binding Price, StringFormat='${0}'}" />

                            <local:Stepper Grid.Row="2" Grid.Column="1" WidthRequest="120" HorizontalOptions="Start" />

                            <Button Grid.Row="3" Grid.ColumnSpan="2" FontSize="18" Text="Add To Cart" BackgroundColor="{StaticResource brown}" TextColor="{StaticResource white}" FontFamily="JosefinSansBold" />
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>


        <Button Grid.Row="3" Margin="20,0,0,0" FontFamily="Icons" BackgroundColor="#FFFFFF" HeightRequest="48" WidthRequest="48"
                TextColor="{StaticResource green}" Text="{x:Static icons:Icons.IconCoffeeBeans}"
                HorizontalOptions="Center" VerticalOptions="Center" FontSize="20" Grid.Column="0" CornerRadius="24" />

        <Button Grid.Row="3" FontFamily="Icons" BackgroundColor="#FFFFFF" HeightRequest="64" WidthRequest="64"
                TextColor="{StaticResource green}" Text="{x:Static icons:Icons.IconPaw}"
                HorizontalOptions="Center" VerticalOptions="Center" FontSize="24" Grid.Column="1" CornerRadius="32" />

        <Button Grid.Row="3" Margin="0,0,20,0" FontFamily="Icons" BackgroundColor="#FFFFFF" HeightRequest="48" WidthRequest="48"
                TextColor="{StaticResource green}" Text="{x:Static icons:Icons.IconBuyMeACoffee}"
                HorizontalOptions="Center" VerticalOptions="Center" FontSize="20" Grid.Column="2" CornerRadius="24" />

    </Grid>
</ContentPage>