(#57) update the index page component

MiniSpace.Web/src/MiniSpace.Web/Pages/AboutApp.razor

@@ -1,4 +1,39 @@
-<div>
-    <h1>About MiniSpace</h1>
-    <p>MiniSpace is a dynamic social platform designed to connect people and communities. Discover, share, and interact with content that drives innovation and engagement.</p>
+@using MudBlazor
+
+<div class="about-video">
+    <video autoplay loop muted class="video-background" style="width: 100%; height: auto; object-fit: cover;">
+        <source src="videos/index1.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div class="video-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 20px;">
+        <div>
+            <MudText Typo="Typo.h4" Class="about-title" Style="color: white; font-size: 2.5rem; font-weight: bold; margin-bottom: 20px;">
+                About MiniSpace
+            </MudText>
+            <MudText Typo="Typo.body1" Style="color: white; font-size: 1.2rem;">
+                MiniSpace is a dynamic social platform designed to connect people and communities. Discover, share, and interact with content that drives innovation and engagement.
+            </MudText>
+        </div>
+    </div>
 </div>
+
+<style>
+    .video-background {
+        width: 100%;
+        height: 100%; /* Adjust height for smaller/bigger screens */
+    }
+    .video-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @* background: rgba(0, 0, 0, 0.5);  *@
+    }
+    .about-title, .about-text {
+        text-align: center;
+    }
+</style>

MiniSpace.Web/src/MiniSpace.Web/Shared/MainLayout.razor

@@ -4,38 +4,39 @@
 @inject NavigationManager NavigationManager
 @inject Microsoft.JSInterop.IJSRuntime JSRuntime
 
-
 <RadzenLayout style="margin: -8.0px; width: 100%; text-align: center;"  id="radzen-layout" > 
-    <RadzenHeader>
-        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween"
-                     Style="width: 98.5%;">
-           <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+   <header>
+       <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" Style="width: 100%;">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+            @if (IdentityService.IsAuthenticated)
+            {
+                <RadzenSidebarToggle Click="@(() => _sidebarExpanded = !_sidebarExpanded)" />
+            }
+            <div class="logo-container">
+                <RadzenLabel Text="MiniSpace" />
+            </div>
+        </RadzenStack>
+        <RadzenMenu Class="rz-menu">
+            <div class="rz-menu-stack">
+                <RadzenMenuItem Text="Home" Class="rz-menu-item" Click="@(() => ScrollToSection("home"))" />
+                <RadzenMenuItem Text="About App" Class="rz-menu-item" Click="@(() => ScrollToSection("about"))" />
+                <RadzenMenuItem Text="Connect" Class="rz-menu-item" Click="@(() => ScrollToSection("connect"))" />
                 @if (IdentityService.IsAuthenticated)
                 {
-                    <RadzenSidebarToggle Click="@(() => _sidebarExpanded = !_sidebarExpanded)"/>
+                    <RadzenMenuItem Text="Sign Out" Class="rz-menu-item" Click=@SignOut Icon="exit_to_app"/>
                 }
-                <RadzenLabel Text="MiniSpace"/>
-            </RadzenStack>
-            <RadzenMenu>
-                <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5em">
-                    <RadzenMenuItem Text="Home" Click="@(() => ScrollToSection("home"))" />
-                    <RadzenMenuItem Text="About App" Click="@(() => ScrollToSection("about"))" />
-                    <RadzenMenuItem Text="Connect" Click="@(() => ScrollToSection("connect"))" />
-                    @if (IdentityService.IsAuthenticated)
-                    {
-                        <RadzenMenuItem Text="Sign Out" Click=@SignOut Icon="exit_to_app"/>
-                    }
-                    else
-                    {
-                        <RadzenMenuItem Text="Sign In" Path="signin" Icon="exit_to_app"/>
-                        <RadzenMenuItem Text="Sign Up" Path="signup" Icon="assignment_ind"/>
-                    }
-                </RadzenStack>
-            </RadzenMenu>
-        </RadzenStack>
-    </RadzenHeader>
+                else
+                {
+                    <RadzenMenuItem Text="Sign In" Class="rz-menu-item" Path="signin" Icon="exit_to_app"/>
+                    <RadzenMenuItem Text="Sign Up" Class="rz-menu-item" Path="signup" Icon="assignment_ind"/>
+                }
+            </div>
+        </RadzenMenu>
+    </RadzenStack>
+
+    </header>
 
-     @if (IdentityService.IsAuthenticated)
+    @if (IdentityService.IsAuthenticated)
     {
         <RadzenSidebar @bind-Expanded="@_sidebarExpanded">
             <RadzenPanelMenu>
@@ -55,7 +56,6 @@
     <CustomRadzenFooter />
 </RadzenLayout>
 
-
 @code{
     bool _sidebarExpanded = true;
 

MiniSpace.Web/src/MiniSpace.Web/wwwroot/css/site.css

@@ -148,14 +148,12 @@ app {
     }
 
     .sidebar .collapse {
-        /* Never collapse the sidebar for wide screens */
         display: block;
     }
 }
 
 
 
-/* main layout component template */
 
 .main-container {
     display: flex;
@@ -164,14 +162,16 @@ app {
 }
 
 header {
-    background-color: #007BFF;
+    background-color: #2F4E6F; 
     color: white;
     padding: 0.5rem 1rem;
     display: flex;
+    flex-wrap: wrap; 
     align-items: center;
     justify-content: space-between;
 }
 
+
 .header-content {
     display: flex;
     align-items: center;
@@ -238,3 +238,90 @@ html, body {
 .radzen-body {
     flex: 1;
 }
+
+
+.logo-container {
+    display: inline-block;
+    padding: 5px 10px; 
+    background-color: #2F4E6F; 
+    border-radius: 5px; 
+    margin-right: 15px; 
+}
+
+.logo-container .rz-label {
+    color: white;
+    font-size: 1.5rem; 
+    font-weight: bold; 
+    letter-spacing: 0.05rem; 
+    user-select: none; 
+}
+
+@media (max-width: 767.98px) {
+    .logo-container {
+        margin-bottom: 15px;
+    }
+}
+
+.rz-menu {
+    background-color: #2F4E6F !important;
+    color: #fff !important;
+}
+
+
+.rz-menu-stack {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+
+}
+.rz-navigation-item-link {
+    color: #fff !important;
+}
+.rz-navigation-item-icon {
+    color: #fff !important;
+}
+
+.rz-menu-item {
+    color: white;
+    padding: 10px;
+    cursor: pointer;
+    text-align: center;
+    border: none; 
+    background: none;
+    color: #fff !important;
+}
+
+@media (max-width: 767.98px) {
+    .rz-menu-stack {
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }
+
+    .rz-menu-item {
+        width: 100%;
+        padding: 8px 0;
+    }
+
+    .rz-display-flex {
+        display: block !important;
+    }
+}
+
+.RadzenStack {
+    width: 100%;
+    justify-content: space-between;
+}
+
+@media (max-width: 767.98px) {
+    header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .logo-container {
+        margin-bottom: 10px;
+        width: 100%;
+        justify-content: center;
+    }
+}