From d8051712e5bb9c085499b0ce9dcd9796925a8293 Mon Sep 17 00:00:00 2001
From: Vikram Reddy <gvreddy04@gmail.com>
Date: Sun, 20 Apr 2025 21:04:39 +0530
Subject: [PATCH] Demos - Home page updates

---
 .../Components/Pages/Index.razor              | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
index 8f78192d7..4f1df5509 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
@@ -391,6 +391,90 @@
     </div>
 </div>
 
+<div class="container bd-gutter masthead-followup mb-5">
+    <div class="col-lg-7 mb-4 mx-auto text-md-center">
+        <h2 class="mb-3 fw-semibold lh-sm">Grid Component</h2>
+    </div>
+
+    <div class="row g-3 mt-5">
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Alignment_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Justify" class="me-2" /> Alignment </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_CustomCSSClass_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FileTypeCss" class="me-2" /> Custom CSS Class </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_DataBinding_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GridFill" class="me-2" /> Data Binding </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_DetailView_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Detail View </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Events_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LightningChargeFill" class="me-2" /> Events </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Filters_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FunnelFill" class="me-2" /> Filters </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_FixedHeader_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Table" class="me-2" /> Fixed Header </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_FreezeColumns_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutThreeColumns" class="me-2" /> Freeze Columns </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Settings_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GearFill" class="me-2" /> Grid Settings </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_NestedGrid_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Pip" class="me-2" /> Nested Grid </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Paging_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ChevronBarRight" class="me-2" /> Paging </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Selection_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CheckSquareFill" class="me-2" /> Selection </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Sorting_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowDownUp" class="me-2" /> Sorting </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Summary_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Calculator" class="me-2" /> Summary </h4>
+            </a>
+        </div>
+        <div class="col-sm-4 mb-2">
+            <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="@RouteConstants.Demos_Grid_Translations_Documentation">
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Translate" class="me-2" /> Translations </h4>
+            </a>
+        </div>
+    </div>
+</div>
+
 <div class="container bd-gutter masthead-followup">
     <div class="col-lg-7 mb-4 mx-auto text-md-center">
         <h2 class="mb-3 fw-semibold lh-sm">Utilities</h2>