Confirm?

Are you sure you want to proceed?
J
Jason Seerose

Bnbraiser Functional Landing Page

Clone & Customize via AI

Bootstrap Landing Page showcasing a dark, gold-themed marketing hero, protocol cards, and a features section. Implemented as a Blazor component using Bootstrap grid and FontAwesome icons.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Marketing landing page with a hero section, circular hero image, and primary call-to-action button. - Two promotional side cards and a three-column "Protocols of Power" features section rendered from a list. - A content section with image and descriptive copy ("The Veil Fumi Secrecy"). - Header navigation and footer with social icons/links. ## Key components - Blazor: @page directive and @code block with a Protocol class and a List<Protocol>. - Razor constructs: foreach rendering of protocol items. - HTML/Bootstrap layout: container, row, col-*, buttons and responsive grid classes. - Icons and images: FontAwesome <i> elements and img elements for hero and feature artwork. - Styles: BnbRaiserPage.razor.css and global app.css for font import and theme colors. ## How it works - The page is a static Blazor component that exposes @page "/" and renders a private List<Protocol> from the @code block. - Protocol objects are enumerated via foreach to produce identical protocol cards with an icon, title and description. - Interaction is limited to static links and buttons; no EditForm, validation, or data-binding beyond rendering the list is present. - Styling is applied via a scoped CSS file (BnbRaiserPage.razor.css) and global app.css; images and icons are standard HTML elements. ## Styling - Layout uses Bootstrap utility and grid classes (container, row, col-lg-6, col-md-4) for responsiveness. - Visual theme uses a dark background with gold accents defined in BnbRaiserPage.razor.css and Google Poppins font via app.css. - Icon wrapper uses transform/rotation effects and hover transitions in the component CSS. - FontAwesome is used for icon glyphs; responsive behavior relies on Bootstrap breakpoints. ## Reuse steps 1. Add the Razor file to a Blazor project and include BnbRaiserPage.razor.css and app.css in the project. 2. Ensure Bootstrap CSS is available (from CDN or npm) and reference FontAwesome for icons in index.html/_Host.cshtml. 3. Import the Poppins font or other desired fonts as shown in app.css. 4. Adjust the Protocol model or replace the in-memory List<Protocol> with a service (inject an IDataService) and bind collected data. 5. Register any required services in Program.cs, add routing if needed, and optimize images for production. ## Limitations & next steps - The component is a single static page generated by Instruct UI; it does not include server-side data, state management, authentication, or form handling. - Add services or API calls to replace the static List<Protocol> for dynamic content and localization support for copy. - Improve accessibility (aria labels, keyboard focus management) and add responsive image srcset/webp for performance. - Add client-side behaviors (modals, analytics, or navigation state) and unit/visual tests as required.