home style optimization

src/Koogle.Web/Components/Pages/Home.razor

@@ -9,43 +9,53 @@
 <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
 
     @* Hero Section *@
-    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
-        <MudGrid>
-            <MudItem xs="12" md="8">
-                <MudStack Spacing="4">
-                    <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
-                        <MudIcon Icon="@Icons.Material.Filled.Sports" Size="Size.Large" />
-                        <MudText Typo="Typo.caption" Style="opacity: 0.8;" Class="hero-subtitle">Vereinsverwaltung leicht gemacht</MudText>
-                    </MudStack>
-                    <MudText Typo="Typo.h3" Class="hero-title">
-                        KOOGLE - Vereinsverwaltung leicht gemacht
-                    </MudText>
-                    <MudText Typo="Typo.h6" Style="opacity: 0.9;">
-                        Die smarte Lösung für Kegelclubs
-                    </MudText>
-                    <MudStack Row Spacing="2" Class="mt-4">
-                        <MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features">
-                            Mehr erfahren
-                        </MudButton>
+    <div class="hero-section mb-8 rounded-lg">
+        <div class="hero-overlay">
+            <MudContainer MaxWidth="MaxWidth.Large" Class="pa-8">
+                <MudGrid>
+                    <MudItem xs="12" md="8">
+                        <MudStack Spacing="4">
+                            <MudStack Spacing="3" Class="hero-stack">
+                                <MudImage src="logo4.png" alt="KOOGLE Logo" Height="80" />
+                                <MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">Die smarte Lösung für Kegelclubs</MudText>
+                            </MudStack>
+                            <MudText Typo="Typo.h6" Style="color: white; opacity: 0.9;">
+                                Mehr Zeit fürs Kegeln, weniger für den Papierkram.
+                            </MudText>
+                            <MudStack Row Spacing="2" Class="mt-4">
+                                <MudButton Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info" Href="#features" Style="color: white; border-color: white;">
+                                    Mehr erfahren
+                                </MudButton>
 
-                        
-                        <AuthorizeView>
-                            <Authorized>
-                                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
-                                    zur Anwendung
-                                </MudButton>
-                            </Authorized>
-                            <NotAuthorized>
-                                <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
-                                    Jetzt einloggen
-                                </MudButton>
-                            </NotAuthorized>
-                        </AuthorizeView>
-                    </MudStack>
-                </MudStack>
-            </MudItem>
-        </MudGrid>
-    </MudPaper>
+                                <AuthorizeView>
+                                    <Authorized>
+                                        <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
+                                            zur Anwendung
+                                        </MudButton>
+                                    </Authorized>
+                                    <NotAuthorized>
+                                        <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Login" Href="/account/login">
+                                            Jetzt einloggen
+                                        </MudButton>
+                                        <MudButton Variant="Variant.Filled" Color="Color.Warning" StartIcon="@Icons.Material.Filled.PersonAdd" Href="/account/register">
+                                            Kostenlos registrieren
+                                        </MudButton>
+                                    </NotAuthorized>
+                                </AuthorizeView>
+                            </MudStack>
+                            <AuthorizeView>
+                                <NotAuthorized>
+                                    <MudText Typo="Typo.caption" Style="color: white; opacity: 0.8;" Class="mt-2">
+                                        Registriere deinen eigenen Club kostenlos oder nutze den <MudLink Href="/account/login" Class="demo-link">Demo-Zugang</MudLink> zum Testen.
+                                    </MudText>
+                                </NotAuthorized>
+                            </AuthorizeView>
+                        </MudStack>
+                    </MudItem>
+                </MudGrid>
+            </MudContainer>
+        </div>
+    </div>
 
     @* Features Section *@
     <div id="features">
@@ -238,6 +248,23 @@
 }
 
 <style>
+    .hero-section {
+        background-image: url('bg1.png');
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        min-height: 400px;
+        position: relative;
+    }
+
+    .hero-overlay {
+        background: linear-gradient(135deg, rgba(26, 54, 93, 0.85) 0%, rgba(45, 90, 77, 0.85) 100%);
+        min-height: 400px;
+        display: flex;
+        align-items: center;
+        border-radius: inherit;
+    }
+
     .hero-subtitle {
         font-size: 0.65rem !important;
     }
@@ -257,4 +284,26 @@
             font-size: 2.2rem !important;
         }
     }
+
+    .hero-stack {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    @@media (min-width: 600px) {
+        .hero-stack {
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: flex-start;
+        }
+    }
+
+    .demo-link {
+        color: #ff9800 !important;
+        font-weight: 600;
+    }
+
+    .demo-link:hover {
+        color: #ffb74d !important;
+    }
 </style>

src/Koogle.Web/Koogle.Web.csproj

@@ -6,6 +6,10 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Content Include="logo.svg" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
     <PackageReference Include="Fluxor.Blazor.Web" Version="6.9.0" />

src/Koogle.Web/Services/CustomThemes.cs

@@ -22,7 +22,7 @@ namespace Koogle.Web.Services
             PaletteDark = new PaletteDark
             {
                 Primary = "#90CAF9",
-                Secondary = "#CE93D8",
+                Secondary = "#809C9F",
                 AppbarBackground = "#1e1e1e",
                 Background = "#121212",
                 DrawerBackground = "#1e1e1e",

src/Koogle.Web/logo.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="256" cy="256" r="230" stroke="#1a365d" stroke-width="30" fill="none" />
+  
+  <path d="M140 150V362M140 280L210 210M140 280L215 362" stroke="#1a365d" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"/>
+  
+  <circle cx="310" cy="290" r="75" fill="#e67e22" />
+  
+  <path d="M330 225C330 225 380 225 390 185C350 175 330 225 330 225Z" fill="#2d5a4d" />
+  <path d="M330 225L390 185" stroke="white" stroke-width="2" />
+
+  <text x="256" y="460" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="#1a365d" text-anchor="middle">koogle</text>
+</svg>