feat: Implement a new marketing-focused home page and refine the main application layout for improved presentation.
This commit is contained in:
Ho Ngoc Hai
@@ -6,13 +6,19 @@
|
||||
<MudSnackbarProvider />
|
||||
|
||||
<MudLayout>
|
||||
<MudAppBar Elevation="0" Class="border-b border-solid mud-border-lines-default">
|
||||
<MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
|
||||
<MudText Typo="Typo.h6" Class="ml-3 font-weight-bold">GoodGo</MudText>
|
||||
<MudAppBar Elevation="0" Class="border-b border-solid mud-border-lines-default" Fixed="true" Style="background-color: var(--bg-primary); backdrop-filter: blur(12px);">
|
||||
<MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" Class="d-md-none" />
|
||||
<MudText Typo="Typo.h6" Class="ml-3 font-weight-bold" Style="font-family: 'Inter', sans-serif;">GoodGo</MudText>
|
||||
<MudSpacer />
|
||||
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Features</MudButton>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Enterprise</MudButton>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mr-4 d-none d-md-flex">Pricing</MudButton>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<MudStack Row="true" Spacing="4" Class="d-none d-md-flex align-center mr-8">
|
||||
<MudLink Href="/" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Home</MudLink>
|
||||
<MudLink Href="/features" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Features</MudLink>
|
||||
<MudLink Href="/enterprise" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Enterprise</MudLink>
|
||||
<MudLink Href="/pricing" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Pricing</MudLink>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row="true" Spacing="2">
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" Class="rounded-lg">Sign in</MudButton>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg">Download</MudButton>
|
||||
@@ -23,19 +29,20 @@
|
||||
OnClick="@ToggleDarkMode" />
|
||||
</MudAppBar>
|
||||
|
||||
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
|
||||
<MudDrawer @bind-Open="_drawerOpen" Variant="@DrawerVariant.Temporary" Elevation="1">
|
||||
<MudDrawerHeader>
|
||||
<MudText Typo="Typo.h6">GoodGo</MudText>
|
||||
</MudDrawerHeader>
|
||||
<NavMenu />
|
||||
</MudDrawer>
|
||||
|
||||
<MudMainContent Class="pt-16 px-4">
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="my-4">
|
||||
@Body
|
||||
</MudContainer>
|
||||
<MudMainContent Class="pt-16">
|
||||
@Body
|
||||
</MudMainContent>
|
||||
</MudLayout>
|
||||
|
||||
@code {
|
||||
private bool _drawerOpen = true;
|
||||
private bool _drawerOpen = false;
|
||||
private bool _isDarkMode = false;
|
||||
|
||||
private MudTheme _theme = new()
|
||||
|
||||
@@ -1,71 +1,75 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home - GoodGo</PageTitle>
|
||||
<PageTitle>GoodGo - The AI Code Editor</PageTitle>
|
||||
|
||||
<MudText Typo="Typo.h3" GutterBottom="true">Welcome to GoodGo</MudText>
|
||||
<MudText Typo="Typo.body1" Class="mb-4">
|
||||
Enterprise frontend application built with Blazor WebAssembly and MudBlazor.
|
||||
</MudText>
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="px-4 py-16">
|
||||
<!-- Hero Section -->
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="6" Class="py-12 text-center">
|
||||
<MudText Typo="Typo.h1" Class="hero-title" Style="font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;">
|
||||
The AI Code Editor
|
||||
</MudText>
|
||||
<MudText Typo="Typo.h5" Class="hero-subtitle mb-6" Style="color: var(--text-secondary); max-width: 600px;">
|
||||
Built to make you extraordinarily productive, GoodGo is the best way to code with AI.
|
||||
</MudText>
|
||||
|
||||
<MudStack Row="true" Spacing="3" Class="justify-center">
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" Class="px-8 py-3 rounded-lg"
|
||||
Style="font-weight: 600; font-size: 1.1rem;">
|
||||
Download for Mac
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" Size="Size.Large" Class="px-8 py-3 rounded-lg"
|
||||
Style="border-color: var(--border-default); font-weight: 500;">
|
||||
Read the Manifesto
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
|
||||
<MudText Typo="Typo.caption" Class="mt-4" Style="color: var(--text-tertiary);">
|
||||
Free to use. No credit card required.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudGrid>
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Elevation="2">
|
||||
<MudCardHeader>
|
||||
<CardHeaderAvatar>
|
||||
<MudAvatar Color="Color.Primary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.ShoppingCart" />
|
||||
</MudAvatar>
|
||||
</CardHeaderAvatar>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h6">Products</MudText>
|
||||
<MudText Typo="Typo.body2">Manage your product catalog</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
<MudCardActions>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Primary" Href="/products">View Products</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
<!-- Demo / Visual Section -->
|
||||
<div class="mt-12 mx-auto rounded-xl overflow-hidden glass-card" style="max-width: 1000px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-default);">
|
||||
<MudText Typo="Typo.h6" Style="color: var(--text-tertiary);">[ Interactive Demo Placeholder ]</MudText>
|
||||
</div>
|
||||
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Elevation="2">
|
||||
<MudCardHeader>
|
||||
<CardHeaderAvatar>
|
||||
<MudAvatar Color="Color.Secondary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Person" />
|
||||
</MudAvatar>
|
||||
</CardHeaderAvatar>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h6">Authentication</MudText>
|
||||
<MudText Typo="Typo.body2">Login and registration</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
<MudCardActions>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Secondary" Href="/auth">Go to Auth</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
<!-- Features Section -->
|
||||
<MudGrid Class="mt-24" Spacing="4">
|
||||
<MudItem xs="12" md="4">
|
||||
<div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.AutoFixHigh" Size="Size.Large" Class="mb-4" />
|
||||
<MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Tab to Autocomplete</MudText>
|
||||
<MudText Style="color: var(--text-secondary);">GoodGo predicts your next edit, so you can just hit tab to fly through changes.</MudText>
|
||||
</div>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="4">
|
||||
<div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.ChatBubble" Size="Size.Large" Class="mb-4" />
|
||||
<MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Chat with Your Codebase</MudText>
|
||||
<MudText Style="color: var(--text-secondary);">No more alt-tabbing. Get answers to codebase-wide questions strictly from your editor.</MudText>
|
||||
</div>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="4">
|
||||
<div class="feature-card p-6 rounded-lg" style="border: 1px solid var(--border-default);">
|
||||
<MudIcon Icon="@Icons.Material.Rounded.Security" Size="Size.Large" Class="mb-4" />
|
||||
<MudText Typo="Typo.h6" Class="mb-2 font-weight-bold">Privacy First</MudText>
|
||||
<MudText Style="color: var(--text-secondary);">Your code never leaves your machine unless you explicitly choose to use cloud AI models.</MudText>
|
||||
</div>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
|
||||
<MudItem xs="12" sm="6" md="4">
|
||||
<MudCard Elevation="2">
|
||||
<MudCardHeader>
|
||||
<CardHeaderAvatar>
|
||||
<MudAvatar Color="Color.Tertiary">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Api" />
|
||||
</MudAvatar>
|
||||
</CardHeaderAvatar>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h6">BFF Architecture</MudText>
|
||||
<MudText Typo="Typo.body2">YARP reverse proxy to microservices</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
<MudCardActions>
|
||||
<MudButton Variant="Variant.Text" Color="Color.Tertiary" Href="/swagger">API Docs</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudAlert Severity="Severity.Info" Class="mt-4">
|
||||
<MudText>This app uses the <strong>Backend for Frontend (BFF)</strong> pattern with YARP to proxy API calls to microservices.</MudText>
|
||||
</MudAlert>
|
||||
<style>
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@@media (min-width: 600px) {
|
||||
.hero-title {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
.glass-card {
|
||||
background: var(--bg-secondary);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user