Finished visual appearance of app

MAUI_Weather/MVVM/Views/WeatherView.xaml

@@ -11,15 +11,59 @@
             <Frame/>
             <SearchBar Placeholder="Search" VerticalOptions="Center"/>
         </Grid>
-        <!--  -->
+        <!-- Title -->
         <VerticalStackLayout Grid.Row="1" Style="{StaticResource MainStackLayout}">
             <Label Text="Rome" Style="{StaticResource Title}"/>
             <Label Text="November 2077"/>
         </VerticalStackLayout>
+        <!-- Weather Preview Anim -->
         <skia:SKLottieView
             Grid.Row="2"
             RepeatCount="-1"
             Source="storm.json"/>
+        <!-- Weather Information -->
+        <Grid Grid.Row="3" ColumnDefinitions="*,*,*">
+            <VerticalStackLayout HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Temp" />
+                <Label Style="{StaticResource WeatherValue}" Text="60" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="1" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Wind" />
+                <Label Style="{StaticResource WeatherValue}" Text="10mph" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="2" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Weather" />
+                <Label Style="{StaticResource WeatherValue}" Text="Sunny" />
+            </VerticalStackLayout>
+        </Grid>
+        <!-- Weather Forecast -->
+        <CollectionView Grid.Row="4" HorizontalOptions="Center">
+            <CollectionView.ItemsSource>
+                <x:Array Type="{x:Type x:String}">
+                    <x:String>1</x:String>
+                    <x:String>2</x:String>
+                    <x:String>3</x:String>
+                    <x:String>4</x:String>
+                    <x:String>5</x:String>
+                </x:Array>
+            </CollectionView.ItemsSource>
+            <CollectionView.ItemsLayout>
+                <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal"/>
+            </CollectionView.ItemsLayout>
+            <CollectionView.ItemTemplate>
+                <DataTemplate>
+                    <Frame Style="{StaticResource Card}">
+                        <VerticalStackLayout Spacing="5" VerticalOptions="Center">
+                            <skia:SKLottieView IsAnimationEnabled="False" HeightRequest="50" WidthRequest="50" Source="mist.json"/>
+                            <Label Text="Date" TextColor="{StaticResource Yellow100Accent}"/>
+                            <Label Text="Temp"/>
+                            <Label Text="Sunny"/>
+                        </VerticalStackLayout>
+                    </Frame>
+                </DataTemplate>
+            </CollectionView.ItemTemplate>
+        </CollectionView>
+        
 
     </Grid>
 </ContentPage>

MAUI_Weather/Resources/Styles/AppStyles.xaml

@@ -23,4 +23,22 @@
         <Setter Property="FontSize" Value="Large"/>
     </Style>
 
+    <Style x:Key="WeatherTitle" TargetType="Label">
+        <Setter Property="FontFamily" Value="RubikLight"/>
+    </Style>
+
+    <Style x:Key="WeatherValue" TargetType="Label">
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+
+    <Style x:Key="Card" TargetType="Frame">
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Cardblue}"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+        <Setter Property="CornerRadius" Value="25"/>
+        <Setter Property="HeightRequest" Value="150"/>
+        <Setter Property="WidthRequest" Value="150"/>
+        <Setter Property="Opacity" Value=".1"/>
+    </Style>
+
 </ResourceDictionary>

MAUI_Weather/Resources/Styles/Colors.xaml

@@ -8,6 +8,7 @@
     https://colorhunt.co/palette/0c134f1d267d5c469cd4adfc
     -->
     <Color x:Key="Darkblue">#0c134f</Color>
+    <Color x:Key="Cardblue">#1d267d</Color>
     <Color x:Key="Lightpurple">#d4adfc</Color>
     
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->