Final Commit

src/App.xaml

@@ -10,7 +10,8 @@
         <Color x:Key="FrameBackgroundColor">#F1EFF0</Color>
         <Color x:Key="ButtonBackgroundColor">#eb5757</Color>
         <Color x:Key="BorderColor">Transparent</Color>
-        <Color x:Key="LightTextColor">#ffe2e2</Color>
+        <Color x:Key="LightBorderColor">#d5d5d5</Color>
+        <Color x:Key="LightTextColor">#d5d5d5</Color>
         <Color x:Key="DarkTextColor">#252525</Color>
 
         <!-- Content Page Style -->
@@ -79,7 +80,7 @@
             <Setter Property="FontSize" Value="22" />
             <Setter Property="HeightRequest" Value="52" />
             <Setter Property="Padding" Value="64,0" />
-            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+            <Setter Property="TextColor" Value="White" />
             <Setter Property="FontFamily" Value="MediumFont" />
             <Setter Property="CornerRadius" Value="26" />
             <Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" />
@@ -93,25 +94,18 @@
             <Setter Property="LineBreakMode" Value="TailTruncation" />
             <Setter Property="FontAutoScalingEnabled" Value="False" />
             <Setter Property="FontFamily" Value="BoldFont" />
-            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
         </Style>
 
         <Style TargetType="Label" x:Key="BaseMediumLabeltyle">
             <Setter Property="LineBreakMode" Value="TailTruncation" />
             <Setter Property="FontAutoScalingEnabled" Value="False" />
             <Setter Property="FontFamily" Value="MediumFont" />
-            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
         </Style>
 
         <Style TargetType="Label" x:Key="BaseRegularLabeltyle">
             <Setter Property="LineBreakMode" Value="TailTruncation" />
             <Setter Property="FontAutoScalingEnabled" Value="False" />
             <Setter Property="FontFamily" Value="RegularFont" />
-            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
-        </Style>
-
-         <Style TargetType="Label" x:Key="SectionHeaderTextStyle" BasedOn="{StaticResource BaseBoldLabeltyle}">
-            <Setter Property="FontSize" Value="22" />
         </Style>
 
         <Style TargetType="Label" x:Key="IntroPageHeaderStyle" BasedOn="{StaticResource BaseBoldLabeltyle}">
@@ -125,6 +119,61 @@
             <Setter Property="TextColor" Value="{StaticResource DarkTextColor}" />
         </Style>
 
+        <Style TargetType="Label" x:Key="PageHeaderStyle" BasedOn="{StaticResource BaseBoldLabeltyle}">
+            <Setter Property="FontSize" Value="32" />
+            <Setter Property="TextColor" Value="White" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="PageHeaderSubtitleStyle" BasedOn="{StaticResource BaseMediumLabeltyle}">
+            <Setter Property="FontSize" Value="14" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="PageSubHeaderStyle" BasedOn="{StaticResource BaseMediumLabeltyle}">
+            <Setter Property="FontSize" Value="20" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="FeaturedPlanetHeaderStyle" BasedOn="{StaticResource BaseMediumLabeltyle}">
+            <Setter Property="FontSize" Value="22" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="FeaturedPlanetHeaderSubtitleStyle" BasedOn="{StaticResource BaseRegularLabeltyle}">
+            <Setter Property="FontSize" Value="14" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="AllPlanetHeaderStyle" BasedOn="{StaticResource BaseMediumLabeltyle}">
+            <Setter Property="FontSize" Value="18" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="AllPlanetHeaderSubtitleStyle" BasedOn="{StaticResource BaseRegularLabeltyle}">
+            <Setter Property="FontSize" Value="12" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="MenuLabelStyle" BasedOn="{StaticResource BaseRegularLabeltyle}">
+            <Setter Property="FontSize" Value="14" />
+            <Setter Property="TextColor" Value="#CCCCCC" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="PlanetHeaderStyle" BasedOn="{StaticResource BaseBoldLabeltyle}">
+            <Setter Property="FontSize" Value="48" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="PlanetHeaderSubtitleStyle" BasedOn="{StaticResource BaseRegularLabeltyle}">
+            <Setter Property="FontSize" Value="22" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
+        <Style TargetType="Label" x:Key="PlanetDetailsTextStyle" BasedOn="{StaticResource BaseRegularLabeltyle}">
+            <Setter Property="FontSize" Value="16" />
+            <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
+        </Style>
+
     </Application.Resources>
 </Application>
 

src/App.xaml.cs

@@ -6,7 +6,7 @@ public App()
 	{
 		InitializeComponent();
 
-		MainPage = new NavigationPage(new StartPage());
-	}
+        MainPage = new NavigationPage(new StartPage());
+    }
 }
 

src/GlobalUsings.cs

@@ -11,4 +11,5 @@
 global using global::Microsoft.Maui.LifecycleEvents;
 
 global using MauiPlanets.Views;
-global using MauiPlanets.Models;
+global using MauiPlanets.Models;
+global using MauiPlanets.Services;

src/MauiPlanets.csproj

@@ -48,6 +48,8 @@
 	  <None Remove="Resources\Fonts\Montserrat-Bold.ttf" />
 	  <None Remove="Resources\Fonts\Montserrat-Medium.ttf" />
 	  <None Remove="Resources\Fonts\Montserrat-SemiBold.ttf" />
+	  <None Remove="Microsoft.Maui.Extensions" />
+	  <None Remove="Microsoft.Maui.Dependencies" />
 	</ItemGroup>
 	<ItemGroup>
 	  <Folder Include="Models\" />
@@ -72,4 +74,8 @@
 	  <MauiFont Include="Resources\Fonts\Montserrat-Medium.ttf" />
 	  <MauiFont Include="Resources\Fonts\Montserrat-SemiBold.ttf" />
 	</ItemGroup>
+	<ItemGroup>
+	  <PackageReference Include="Microsoft.Maui.Extensions" Version="6.0.408" />
+	  <PackageReference Include="Microsoft.Maui.Dependencies" Version="6.0.408" />
+	</ItemGroup>
 </Project>

src/Models/Planet.cs

@@ -1,6 +1,6 @@
 namespace MauiPlanets.Models;
 
-internal class Planet
+public class Planet
 {
     public string Name { get; set; }
     public string Subtitle { get; set; }
@@ -9,4 +9,22 @@ internal class Planet
     public Color AccentColorStart { get; set; }
     public Color AccentColorEnd { get; set; }
     public List<string> Images { get; set; }
-}
+
+    // Background
+    public Brush Background
+    {
+        get
+        {
+            var gradientStops = new GradientStopCollection();
+            gradientStops.Add(new GradientStop(AccentColorStart, 0.0f));
+            gradientStops.Add(new GradientStop(AccentColorEnd, 1.0f));
+
+            var bgBrush = new LinearGradientBrush(
+                gradientStops,
+                new Point(0.0, 0.0),
+                new Point(1.0, 1.0));
+
+            return bgBrush;
+        }
+    }    
+}

src/Services/PlanetsService.cs

@@ -9,9 +9,9 @@ internal static class PlanetsService
 			Name = "Mercury",
 			Subtitle = "The smallest planet",
 			HeroImage = "mercury.png",
-			Description = "Mercury is the first of the four terrestrial planets. This means it is a planet made mostly of rock. The planets closest to the Sun—Venus, Earth, and Mars—are the other three.\n\nMercury is the smallest of the terrestrial planets. It has an iron core that accounts for about 3/4 of its diameter. Most of the rest of the planet is made up of a rocky crust.",
-			AccentColorStart = null,
-			AccentColorEnd = null,
+			Description = "Mercury is the first of the four terrestrial planets. This means it is a planet made mostly of rock. The planets closest to the Sun—Venus, Earth, and Mars—are the other three.",
+			AccentColorStart = Color.FromArgb("#353535"),
+			AccentColorEnd = Color.FromArgb("#8d9098"),
 			Images = new()
             {
                 "https://cdn.theatlantic.com/thumbor/D15rQggf6357X1-u6VpTD2N1yQE=/0x27:1041x613/976x549/media/img/mt/2017/04/MercuryImage/original.jpg",
@@ -24,9 +24,9 @@ internal static class PlanetsService
             Name = "Venus",
             Subtitle = "The pressure cooker",
             HeroImage = "venus.png",
-            Description = "Of all the planets, Venus is the one most similar to Earth. In fact, Venus is often called Earth's “sister” planet. As similar as it is in some ways, however, it is also very different in others.\n\nEarth and Venus are similar in size. The two planets are very close to each other as they orbit the Sun; because of this, Venus is the most visible planet in the night sky. Both planets are relatively young, judging from the lack of craters on their surfaces.",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "Of all the planets, Venus is the one most similar to Earth. In fact, Venus is often called Earth's “sister” planet. As similar as it is in some ways, however, it is also very different in others.",
+            AccentColorStart = Color.FromArgb("#a6393b"),
+            AccentColorEnd = Color.FromArgb("#d17f21"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/143_Venus-800x600.jpg",
@@ -40,9 +40,9 @@ internal static class PlanetsService
             Name = "Earth",
             Subtitle = "The cradle of life",
             HeroImage = "earth.png",
-            Description = "The Earth is the only planet known where life exists. Almost 1.5 million species of animals and plants have been discovered so far, and many more have yet to be found. While other planets may have small amounts of ice or steam, the Earth is 2/3 water. Earth has perfect conditions for a breathable atmosphere.\n\nEarth is the largest of the terrestrial planets and the fifth largest in the solar system. It is believed to be about 4.5 billion years old, which makes it very young compared to other celestial bodies!",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "The Earth is the only planet known where life exists. Almost 1.5 million species of animals and plants have been discovered so far, and many more have yet to be found. While other planets may have small amounts of ice or steam, the Earth is 2/3 water. Earth has perfect conditions for a breathable atmosphere.",
+            AccentColorStart = Color.FromArgb("#0e3d68"),
+            AccentColorEnd = Color.FromArgb("#2e97c7"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/68_epicearthmoonstill_800.png",
@@ -55,9 +55,9 @@ internal static class PlanetsService
             Name = "Mars",
             Subtitle = "The red beauty",
             HeroImage = "mars.png",
-            Description = "No planet has sparked the imaginations of humans as much as Mars. It may be the reddish color of Mars, or the fact that it can often be easily seen in the night sky, that has caused people to wonder about this close neighbor of ours. Tales of “Martians” invading Earth have been around for well over fifty years. But is it likely that any kind of life really does exist on Mars?\n\nScientists aren't sure. Life as we know it couldn't survive there. Even so, there is evidence that there may be water on Mars. The presence of methane, which may be given off by organisms, provides another clue.",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "No planet has sparked the imaginations of humans as much as Mars. It may be the reddish color of Mars, or the fact that it can often be easily seen in the night sky, that has caused people to wonder about this close neighbor of ours. Tales of “Martians” invading Earth have been around for well over fifty years. But is it likely that any kind of life really does exist on Mars?",
+            AccentColorStart = Color.FromArgb("#a23036"),
+            AccentColorEnd = Color.FromArgb("#eb3333"),
             Images = new()
             {
                 "https://researchfdi.com/wp-content/uploads/2021/10/8944_1-PIA24546-1280.jpeg",
@@ -71,8 +71,8 @@ internal static class PlanetsService
             Subtitle = "The gas giant",
             HeroImage = "jupiter.png",
             Description = "The planet Jupiter is the first of the gas giant planets. Made mostly of gas, they include Jupiter, Saturn, Uranus, and Neptune.\n\nJupiter is first among the planets in terms of size and mass. Its diameter is 11 times bigger than Earth, and its mass is 2.5 times greater than all the other planets combined. The “Great Red Spot” on Jupiter is actually a raging storm.",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            AccentColorStart = Color.FromArgb("#9d4a40"),
+            AccentColorEnd = Color.FromArgb("#cd8026"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/11_Full_Jupiter-800.jpg",
@@ -85,9 +85,9 @@ internal static class PlanetsService
             Name = "Saturn",
             Subtitle = "The ring planet",
             HeroImage = "saturn.png",
-            Description = "Most people know about the rings around Saturn, because they are the brightest and most colorful. These rings are made mainly out of ice particles orbiting the planet. While the rings themselves seem big, the particles are very small, usually no more than 10 feet (3 meters) wide.\n\nSaturn is the second largest planet. It is the farthest planet from the Earth that can be seen without a telescope. It appears flat at the poles because its great rotational speed makes the middle of the planet bulge.",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "Most people know about the rings around Saturn, because they are the brightest and most colorful. These rings are made mainly out of ice particles orbiting the planet. While the rings themselves seem big, the particles are very small, usually no more than 10 feet (3 meters) wide.",
+            AccentColorStart = Color.FromArgb("#996237"),
+            AccentColorEnd = Color.FromArgb("#c6502f"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/151_saturn_carousel_1.jpg",
@@ -101,9 +101,9 @@ internal static class PlanetsService
             Name = "Uranus",
             Subtitle = "The cold ball",
             HeroImage = "uranus.png",
-            Description = "Uranus is the first planet so far away from the Earth that it can only be seen with the use of a telescope. When it was first discovered in 1781, scientists didn't know what they had found. As astronomers studied the object more closely, they discovered that it had a circular orbit around the Sun. They had found the seventh planet.\n\nUranus is so far from the Sun that it takes 84 years to complete an orbit of the Sun. It is the only planet that spins on its side, so each pole is tilted away from the Sun for half its orbit. That means each night and day lasts an amazing 42 years. Imagine staying awake that long! Of course, you'd also get a lot of time to catch up on your sleep!",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "Uranus is the first planet so far away from the Earth that it can only be seen with the use of a telescope. When it was first discovered in 1781, scientists didn't know what they had found. As astronomers studied the object more closely, they discovered that it had a circular orbit around the Sun. They had found the seventh planet.",
+            AccentColorStart = Color.FromArgb("#9d4a40"),
+            AccentColorEnd = Color.FromArgb("#996237"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/88_carousel_uranus.jpg",
@@ -116,9 +116,9 @@ internal static class PlanetsService
             Name = "Neptune",
             Subtitle = "Eighth & fathest-away",
             HeroImage = "neptune.png",
-            Description = "Imagine being so good at math that you could figure out the location of a planet you had never even seen! That is what John C. Adams did in 1843 when he discovered Neptune.\n\nNeptune was named after the Roman god of the sea because it is so far out in the deep “sea” of space. The name also fits because Neptune appears to be a beautiful bright blue because of the methane clouds that surround it. It is the most distant planet from the Sun. It takes a very long time—165 years—to orbit the Sun. Neptune has made only one trip around the Sun since it was discovered.",
-            AccentColorStart = null,
-            AccentColorEnd = null,
+            Description = "Imagine being so good at math that you could figure out the location of a planet you had never even seen! That is what John C. Adams did in 1843 when he discovered Neptune.",
+            AccentColorStart = Color.FromArgb("#0c293d"),
+            AccentColorEnd = Color.FromArgb("#26abe0"),
             Images = new()
             {
                 "https://solarsystem.nasa.gov/system/feature_items/images/82_carousel_neptune_1.jpg",