Confirm?

Are you sure you want to proceed?
J
Jędrzej Szczerbal

Gas Boiler Service Website Design

Clone & Customize via AI

MudBlazor Landing Page presenting a gas-service hero layout with responsive MudAppBar, CTA buttons and mobile drawer. Uses MudBlazor components and Bootstrap utility classes.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Top app bar/navigation with desktop links and a mobile menu toggle. - Mobile drawer-like menu rendered as a conditional MudPaper block. - Hero section with background image overlay, centered headline, subtitle and two CTA buttons. - Responsive layout utilities and custom CSS for hero sizing and spacing. ## Key components - MudAppBar, MudContainer, MudPaper - MudText, MudButton, MudIcon, MudIconButton - MudStack for vertical/row spacing and alignment - Simple code-behind state (bool) and event handler for mobile menu toggling ## How it works - The page uses MudBlazor components for structure and interactive elements (MudAppBar, MudButton, MudIconButton). - Mobile menu visibility is controlled by a private bool IsMobileMenuOpen and toggled via ToggleMobileMenu(), rendering a conditional MudPaper block. - Navigation links use anchor Href attributes; CTA buttons navigate via Href on MudButton. - No form inputs or DataAnnotations validation are present; interaction is limited to click events and conditional rendering. ## Styling - Primary UI comes from MudBlazor components and theme colors. - Additional responsive visibility classes (d-none, d-md-flex, d-md-block) follow Bootstrap-style utilities used alongside MudBlazor. - Custom CSS in app.css provides layout helpers (.min-h-screen), hero background/overlay, typography limits (.hero-title, .hero-subtitle) and small spacing utilities (gap-2/gap-4). - Hero uses a linear-gradient and an image overlay with opacity to achieve a branded backdrop. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespaces in _Imports.razor and reference the custom app.css in host page or _Layout. 3. Copy the Razor component and CSS, adjust MaxWidth and breakpoint helpers to match the app's layout. 4. Replace static Href links with NavigationManager.NavigateTo or bind to route parameters and wire CTA actions. 5. Provide real content and replace the placeholder icon and Unsplash image with owned assets. ## Limitations & next steps - This is a single landing page; global app wiring (authentication, localization, routing conventions) is not included. - No backend data fetching or form handling is implemented; connect APIs or services for contact booking and pricing. - Consider extracting the header and hero into reusable components and adding ARIA attributes for accessibility and keyboard navigation. - Add tests for responsive behavior and integrate with site-wide theme settings if needed.