v1 homepage

AppShell.xaml

@@ -12,10 +12,13 @@
             Title="Home"
             ContentTemplate="{DataTemplate local:MainPage}"
             Route="MainPage" />
-
         <ShellContent
             Title="Login Page"
             ContentTemplate="{DataTemplate views:LoginPage}"
             Route="LoginPage" />
+        <ShellContent
+            Title="Home Page"
+            ContentTemplate="{DataTemplate views:HomePage}"
+            Route="HomePage" />
     </TabBar>
 </Shell>

MainPage.cs

@@ -1,15 +0,0 @@
-namespace ShoopNCook;
-
-public class MainPage : ContentPage
-{
-	public MainPage()
-	{
-		Content = new VerticalStackLayout
-		{
-			Children = {
-				new Label { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, Text = "Welcome to .NET MAUI!"
-				}
-			}
-		};
-	}
-}

Resources/AppIcon/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"/></svg>

Resources/AppIcon/sort.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M120 816v-60h240v60H120Zm0-210v-60h480v60H120Zm0-210v-60h720v60H120Z"/></svg>

Resources/AppIcon/syncalt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M271 936 80 745l192-192 42 42-120 120h649v60H194l119 119-42 42Zm418-337-42-42 119-119H117v-60h649L646 258l42-42 192 192-191 191Z"/></svg>

ShoopNCook.csproj

@@ -62,7 +62,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
-	  <Folder Include="Views\" />
+	  <MauiXaml Update="Views\HomePage.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	</ItemGroup>
 
 </Project>

Views/HomePage.xaml

@@ -0,0 +1,181 @@
+<?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="ShoopNCook.Views.HomePage"
+             Title="HomePage">
+
+    <ScrollView>
+        <StackLayout>
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+                <Frame BackgroundColor="Pink"
+                       CornerRadius="5"
+                       HeightRequest="40"
+                       WidthRequest="40"
+                       Grid.Column="0"
+                       Margin="10">
+                    <Image Source="../Ressources/AppIcon/sort.svg"
+                           HeightRequest="20"
+                           WidthRequest="20"
+                           Aspect="AspectFit"
+                           VerticalOptions="Center"
+                           HorizontalOptions="Center"/>
+                </Frame>
+                <Image Source="../Ressources/AppIcon/account.svg"
+                       HeightRequest="40"
+                       WidthRequest="40"
+                       Grid.Column="2"
+                       Margin="10"/>
+                <SearchBar Placeholder="Search here ..."
+                           PlaceholderColor="Gray"
+                           HeightRequest="40"
+                           BackgroundColor="White"
+                           TextColor="Black"
+                           FontSize="14"
+                           Grid.Column="1"
+                           Margin="10,0,10,0"
+                           VerticalOptions="Center"/>
+                <Frame BackgroundColor="Pink"
+                       CornerRadius="5"
+                       HeightRequest="40"
+                       WidthRequest="40"
+                       Grid.Column="1"
+                       Margin="0,0,10,0"
+                       HorizontalOptions="End">
+                    <Image Source="../Ressources/AppIcon/syncalt.svg"
+                           HeightRequest="20"
+                           WidthRequest="20"
+                           Aspect="AspectFit"
+                           VerticalOptions="Center"
+                           HorizontalOptions="Center"/>         
+                </Frame>
+            </Grid>
+            <StackLayout Orientation="Horizontal"
+                         Margin="10,20,10,10">
+                <Label Text="Popular recipe"
+                       FontSize="18"
+                       FontAttributes="Bold"
+                       HorizontalOptions="StartAndExpand"/>
+                <Button Text="Show All"
+                        BackgroundColor="Transparent"
+                        TextColor="Pink"
+                        FontSize="14"
+                        FontAttributes="Bold"
+                        HorizontalOptions="End"/>
+            </StackLayout>
+            <ScrollView Margin="10,0,10,10">
+                <StackLayout>
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+
+                        <!-- Mettez ici le même composant recette que vous avez déjà créé -->
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,10,10"
+                     Grid.Row="0"
+                     Grid.Column="0"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,0,10"
+                     Grid.Row="0"
+                     Grid.Column="1"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,10,10"
+                     Grid.Row="1"
+                     Grid.Column="0"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,0,10"
+                     Grid.Row="1"
+                     Grid.Column="1"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,10,10"
+                     Grid.Row="2"
+                     Grid.Column="0"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"
+                     Margin="0,0,0,10"
+                     Grid.Row="2"
+                     Grid.Column="1"/>
+                    </Grid>
+                </StackLayout>
+            </ScrollView>
+            <StackLayout Orientation="Horizontal"
+                         Margin="10,20,10,10">
+                <Label Text="Recommended for you"
+                       FontSize="18"
+                       FontAttributes="Bold"
+                       HorizontalOptions="StartAndExpand"/>
+                <Button Text="Show All"
+                        BackgroundColor="Transparent"
+                        TextColor="Pink"
+                        FontSize="14"
+                        FontAttributes="Bold"
+                        HorizontalOptions="End"/>
+            </StackLayout>
+            <Label Text="Recommended for you"
+       Margin="10,20,0,0"
+       FontSize="Title"
+       FontAttributes="Bold"/>
+
+            <Button Text="Show all"
+        Margin="0,20,10,0"
+        FontAttributes="Bold"
+        FontSize="Medium"
+        TextColor="Gray"
+        BackgroundColor="White"
+        HorizontalOptions="End"/>
+
+            <ScrollView Margin="10,0,10,10">
+                <StackLayout>
+                    <Grid ColumnSpacing="10"
+                    RowSpacing="10"
+                    HorizontalOptions="FillAndExpand"
+                    VerticalOptions="FillAndExpand"
+                    Margin="0,0,0,10"
+                    RowDefinitions="2"
+                    ColumnDefinitions="2">
+
+                        <!-- Mettez ici le même composant recette que vous avez déjà créé -->
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"/>
+
+                        <BoxView BackgroundColor="LightBlue"
+                     HeightRequest="120"
+                     WidthRequest="150"/>
+                    </Grid>
+                </StackLayout>
+            </ScrollView>
+</ContentPage>

Views/HomePage.xaml.cs

@@ -0,0 +1,9 @@
+namespace ShoopNCook.Views;
+
+public partial class HomePage : ContentPage
+{
+	public HomePage()
+	{
+		InitializeComponent();
+	}
+}