From c68914114bc5727430ab7f11454163e076ada03c Mon Sep 17 00:00:00 2001
From: capdiem <capdiem@live.com>
Date: Wed, 13 Dec 2023 16:39:55 +0800
Subject: [PATCH] refactor

---
 .../Components/Layout/DesktopAppBar.razor     | 27 +++---
 .../Components/Layout/FollowUsBtn.razor       | 16 ++++
 .../Layout/MInteractiveKeyTrigger.razor       | 65 ---------------
 .../Layout/MInteractiveTrigger.razor          | 58 -------------
 .../Components/Layout/MainLayout.razor        | 29 ++++++-
 .../Layout/MobileNavigationDrawer.razor       |  5 +-
 .../Components/Layout/QQChatBtn.razor         | 59 -------------
 .../Components/Layout/WeChatBtn.razor         | 60 --------------
 .../Components/Pages/AboutUs.razor            | 25 ++----
 .../Components/Pages/AboutUs.razor.cs         |  5 --
 .../Components/Pages/Activities.razor         |  1 -
 .../Components/Pages/ActivitiesBanner.razor   | 29 +++----
 .../Components/Pages/ActivityDetail.razor     | 10 +--
 .../Components/Pages/ActivityDetail.razor.cs  |  5 --
 .../Pages/AutoScrollComponentBase.cs          |  8 --
 .../Components/Pages/Blazor.razor             | 43 +++-------
 .../Components/Pages/Blazor.razor.cs          |  6 --
 .../Components/Pages/Framework.razor          | 31 +++----
 .../Components/Pages/Framework.razor.cs       |  5 +-
 .../Components/Pages/Home.razor               | 15 ++--
 .../Components/Pages/Home.razor.cs            | 37 ++++-----
 .../Components/Pages/HomeBanner.razor         |  5 +-
 .../Components/Pages/LearningPath.razor       |  9 +-
 .../Components/Pages/LearningPath.razor.cs    |  6 --
 .../Components/Pages/Stack.razor              | 26 ++----
 .../Components/Pages/Stack.razor.cs           |  5 +-
 .../Components/Pages/StackLiveDemoBtn.razor   | 15 ++--
 .../Components/Pages/StackLiveDemoMenu.razor  | 82 +++++--------------
 .../Pages/StackLiveDemoMenu.razor.css         | 21 -----
 .../Components/Shared/AboutUsCard.razor       |  5 +-
 .../Components/Shared/ImageCard.razor         | 48 -----------
 .../Components/Shared/MenuTitle.razor         | 18 ++++
 .../Shared/MenuTitleInteractiveTrigger.razor  | 32 ++++++++
 .../Components/Shared/MenuableTitle.razor     |  6 +-
 .../Components/Shared/More.razor              | 31 -------
 .../Components/Shared/MoreButton.razor        | 19 +++++
 .../Components/Shared/NavMenu.razor           | 46 +----------
 .../{InteractiveMore.razor => NextView.razor} | 10 +--
 .../Shared/NextViewInteractiveTrigger.razor   | 20 +++++
 .../Components/Shared/ProductCard.razor       |  5 +-
 .../Components/Shared/ScrollToNext.razor      | 19 +++++
 .../Components/Shared/SerializableImage.razor | 39 ---------
 .../wwwroot/app.css                           |  4 +
 .../wwwroot/css/shared.css                    | 60 ++++++++++++--
 .../wwwroot/css/small-shared.css              | 29 ++++++-
 45 files changed, 387 insertions(+), 712 deletions(-)
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveKeyTrigger.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveTrigger.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/AutoScrollComponentBase.cs
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor.cs
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor.cs
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor.css
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/ImageCard.razor
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitle.razor
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitleInteractiveTrigger.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/More.razor
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/MoreButton.razor
 rename src/MASA.OfficialWebsite.WebApp/Components/Shared/{InteractiveMore.razor => NextView.razor} (68%)
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/NextViewInteractiveTrigger.razor
 create mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/ScrollToNext.razor
 delete mode 100644 src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableImage.razor

diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor
index 669493c..cfa9ecb 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/DesktopAppBar.razor
@@ -1,14 +1,16 @@
 <AppBar Class="hidden-sm-and-down" BarHeight="100" LogoHeight="42">
     <SectionOutlet SectionName="document" />
 
-    <MInteractiveKeyTrigger WithWrapper
-                            Class="nav-menus"
-                            Style="position: relative"
-                            QueryName="nav-menu"
-                            QueryOptions="navMenuQueryOptions"
-                            QueryValue="@QueryValue"
-                            InteractiveComponentType="typeof(NavMenu)"
-                            InteractiveParameters="ProductNavMenuParameters">
+    <MInteractiveTriggers Class="nav-menus"
+                          WithPopup
+                          Left="NavMenuLeft"
+                          PopupClass="menu-list"
+                          TValue="string"
+                          QueryName="nav-menu"
+                          QueryValue="@QueryValue"
+                          InteractiveValue="navMenuInteractiveValues"
+                          InteractiveComponentType="typeof(NavMenu)"
+                          InteractiveComponentParameters="ProductNavMenuParameters">
         <MButton Id="@($"{context}-nav-menu")" Class="mr-9 h8 emphasis2--text" Text>
             @(context switch
             {
@@ -17,7 +19,7 @@
                 _         => context
             })
         </MButton>
-    </MInteractiveKeyTrigger>
+    </MInteractiveTriggers>
 
     <MButton Text Class="h8 emphasis2--text" Href="/aboutus">
         关于我们
@@ -33,16 +35,15 @@
     [SupplyParameterFromQuery(Name = "nav-menu")]
     private string? QueryValue { get; set; }
 
-    private static string[] navMenuQueryOptions = { "product", "study" };
+    private static string[] navMenuInteractiveValues = { "product", "study" };
 
     private bool IsProductNavMenu => QueryValue?.Equals("product", StringComparison.OrdinalIgnoreCase) is true;
 
     private Dictionary<string, object> ProductNavMenuParameters => new()
     {
         { nameof(NavMenu.Items), IsProductNavMenu ? ProductNavItems : StudyNavItems },
-        { nameof(NavMenu.Style), IsProductNavMenu ? "transform: translateX(-388px);" : "transform: translateX(-286px);" },
-        { nameof(NavMenu.ActivatorSelectors), navMenuQueryOptions.Select(s => $"#{s}-nav-menu").ToArray() },
-        { nameof(NavMenu.QueryName), "nav-menu" }
     };
 
+    private int NavMenuLeft => IsProductNavMenu ? -388 : -286;
+
 }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor
new file mode 100644
index 0000000..bc4f9ad
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/FollowUsBtn.razor
@@ -0,0 +1,16 @@
+@rendermode InteractiveServer
+@inherits MInteractivePopup
+
+<div class="mt-2 @Class" style="@Style" id="follow-us-image">
+    <img src="@Image" />
+</div>
+
+@code {
+
+    [Parameter] [EditorRequired] public string Image { get; set; } = null!;
+
+    [Parameter] public string? Style { get; set; }
+
+    [Parameter] public string? Class { get; set; }
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveKeyTrigger.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveKeyTrigger.razor
deleted file mode 100644
index fd8b47c..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveKeyTrigger.razor
+++ /dev/null
@@ -1,65 +0,0 @@
-@namespace Masa.Blazor
-@using Microsoft.AspNetCore.Components.Rendering
-@inject NavigationManager NavigationManager
-
-@if (WithWrapper)
-{
-    <div class="m-interactive-trigger @Class"
-         style="@Style">
-        @RenderContent
-    </div>
-}
-else
-{
-    @RenderContent
-}
-
-@code {
-
-    private void RenderContent(RenderTreeBuilder __builder)
-    {
-        @foreach (var option in QueryOptions)
-        {
-            var value = option == QueryValue ? null : option;
-
-            <a style="display: contents"
-               href="@NavigationManager.GetUriWithQueryParameter(QueryName, value)">
-                @ChildContent?.Invoke(option)
-            </a>
-        }
-
-        @if (QueryValue != null)
-        {
-            <DynamicComponent Type="@InteractiveComponentType"
-                              Parameters="@InteractiveParameters" />
-        }
-    }
-
-    [Parameter] public string? Class { get; set; }
-
-    [Parameter] public string? Style { get; set; }
-
-    [Parameter] [EditorRequired] public string QueryName { get; set; } = null!;
-
-    [Parameter] [EditorRequired] public IEnumerable<string> QueryOptions { get; set; } = null!;
-
-    [Parameter] public string? QueryValue { get; set; }
-
-    [Parameter] [EditorRequired] public Type InteractiveComponentType { get; set; } = null!;
-
-    [Parameter] public IDictionary<string, object>? InteractiveParameters { get; set; }
-
-    [Parameter] public RenderFragment<string>? ChildContent { get; set; }
-
-    [Parameter] public bool WithWrapper { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        QueryName.ThrowIfNull(nameof(MInteractiveKeyTrigger));
-        QueryOptions.ThrowIfNull(nameof(MInteractiveKeyTrigger));
-        InteractiveComponentType.ThrowIfNull(nameof(MInteractiveKeyTrigger));
-    }
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveTrigger.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveTrigger.razor
deleted file mode 100644
index d634e56..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MInteractiveTrigger.razor
+++ /dev/null
@@ -1,58 +0,0 @@
-@namespace Masa.Blazor
-@using Microsoft.AspNetCore.Components.Rendering
-@inject NavigationManager NavigationManager
-
-@if (WithWrapper)
-{
-    <div class="m-interactive-trigger @Class"
-         style="@Style">
-        @RenderContent
-    </div>
-}
-else
-{
-    @RenderContent
-}
-
-@code {
-
-    private void RenderContent(RenderTreeBuilder __builder)
-    {
-        <a class="m-interactive__link"
-           style="display: contents"
-           href="@NavigationManager.GetUriWithQueryParameter(QueryName, QueryValue is not true)">
-            @ChildContent
-        </a>
-
-        @if (QueryValue is true)
-        {
-            <DynamicComponent Type="@InteractiveComponentType"
-                              Parameters="@InteractiveParameters" />
-        }
-    }
-
-    [Parameter] public string? Class { get; set; }
-
-    [Parameter] public string? Style { get; set; }
-
-    [Parameter] [EditorRequired] public string QueryName { get; set; } = null!;
-
-    [Parameter] public bool? QueryValue { get; set; }
-
-    [Parameter] [EditorRequired] public Type InteractiveComponentType { get; set; } = null!;
-
-    [Parameter] public IDictionary<string, object>? InteractiveParameters { get; set; }
-
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    [Parameter] public bool WithWrapper { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        QueryName.ThrowIfNull(nameof(MInteractiveTrigger));
-        InteractiveComponentType.ThrowIfNull(nameof(MInteractiveTrigger));
-    }
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor
index 300579b..8c17629 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MainLayout.razor
@@ -11,9 +11,9 @@
         </svg>
         <div class="rectangle-723"></div>
     </div>
-    
+
     <MobileAppBar NavItems="AllNavItems" />
-    
+
     <DesktopAppBar ProductNavItems="productNavItems"
                    StudyNavItems="studyNavItems" />
 
@@ -128,8 +128,20 @@
                             <MCard Color="transparent" Flat Dark Class="footer-content__item footer-content__focus">
                                 <MCardTitle>关注我们</MCardTitle>
                                 <MCardText>
-                                    @* <WeChatBtn /> *@
-                                    @* <QQChatBtn /> *@
+                                    <MInteractiveTriggers Class="d-inline"
+                                                          QueryName="@nameof(FollowUs)"
+                                                          QueryValue="@FollowUs"
+                                                          InteractiveValue="@(new[] { "wechat", "qq" })"
+                                                          InteractiveComponentType="typeof(FollowUsBtn)"
+                                                          InteractiveComponentParameters="@FollowUsParameters">
+                                        <MButton Outlined
+                                                 Icon
+                                                 Color="white"
+                                                 Class="follow-us-icon mr-9">
+                                            <MIcon>@(context == "wechat" ? "mdi-wechat" : "mdi-qqchat")</MIcon>
+                                        </MButton>
+                                    </MInteractiveTriggers>
+
                                     <MButton Class="follow-us-icon"
                                              Outlined
                                              Icon
@@ -167,6 +179,15 @@
 
 @code {
 
+    [SupplyParameterFromQuery]
+    private string? FollowUs { get; set; }
+
+    private Dictionary<string, object> FollowUsParameters => new()
+    {
+        { nameof(FollowUsBtn.Image), FollowUs == "wechat" ? "https://cdn.masastack.com/images/contact.png" : "https://cdn.masastack.com/images/contact-qq.png" },
+        { nameof(FollowUsBtn.Class), FollowUs }
+    };
+
     private static readonly List<NavItem> productNavItems =
     [
         new NavItem("产品中心"),
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor
index 37b7fbb..90ffec9 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Layout/MobileNavigationDrawer.razor
@@ -6,8 +6,9 @@
                    Fixed
                    Temporary
                    Right
-                   Width="315">
-    <MList Class="menu-list mt-1" Style="height: 100%; overflow-y: auto; padding-top:24px;" Elevation="0" Subheader TwoLine Routable>
+                   Width="315"
+                   NoSsr>
+    <MList Class="mt-1" Style="height: 100%; overflow-y: auto; padding-top:24px;" Elevation="0" Subheader TwoLine Routable>
         @foreach (var item in NavItems)
         {
             @if (item.IsSubheader)
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor
deleted file mode 100644
index 8a9e166..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/QQChatBtn.razor
+++ /dev/null
@@ -1,59 +0,0 @@
-@inject MasaBlazor MasaBlazor
-@rendermode InteractiveServer
-@implements IDisposable
-
-<MMenu OpenOnClick="IsMobile"
-       OpenOnHover="!IsMobile"
-       CloseOnClick
-       NudgeBottom="8"
-       NudgeLeft="@NudgeLeft"
-       OffsetY
-       Permanent
-       @key="@IsMobile">
-    <ActivatorContent>
-        <MButton Width="@IconSize"
-                 Height="@IconSize"
-                 Outlined Icon
-                 Color="white"
-                 Class="mr-9"
-                 @attributes="@context.Attrs">
-            <MIcon Large="!IsMobile">
-                mdi-qqchat
-            </MIcon>
-        </MButton>
-    </ActivatorContent>
-    <ChildContent>
-        <img src="https://cdn.masastack.com/images/contact-qq.png" 
-             alt="qq"
-             width="@Size" />
-    </ChildContent>
-</MMenu>
-
-@code {
-
-    private bool IsMobile => MasaBlazor.Breakpoint.Mobile;
-
-    private int Size => IsMobile ? 120 : 200;
-
-    private int IconSize =>  IsMobile ? 40 : 60;
-
-    private int NudgeLeft => Size / 2 - IconSize / 2;
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged;
-    }
-
-    private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e)
-    {
-        InvokeAsync(StateHasChanged);
-    }
-
-    public void Dispose()
-    {
-        MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
-    }
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor
deleted file mode 100644
index 1d9edc0..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Layout/WeChatBtn.razor
+++ /dev/null
@@ -1,60 +0,0 @@
-@inject MasaBlazor MasaBlazor
-@rendermode InteractiveServer
-@implements IDisposable
-
-<MMenu OpenOnClick="IsMobile"
-       OpenOnHover="!IsMobile"
-       CloseOnClick
-       NudgeBottom="8"
-       NudgeLeft="@NudgeLeft"
-       OffsetY
-       Permanent
-       @key="@IsMobile">
-    <ActivatorContent>
-        <MButton
-            Width="@IconSize"
-            Height="@IconSize"
-            Outlined
-            Icon
-            Color="white"
-            Class="mr-9"
-            @attributes="@context.Attrs">
-            <MIcon Large="!IsMobile">
-                mdi-wechat
-            </MIcon>
-        </MButton>
-    </ActivatorContent>
-    <ChildContent>
-        <img src="https://cdn.masastack.com/images/contact.png"
-             alt="wechat"
-             Width="@Size" />
-    </ChildContent>
-</MMenu>
-
-@code {
-
-    private bool IsMobile => MasaBlazor.Breakpoint.Mobile;
-
-    private int Size => IsMobile ? 120 : 200;
-
-    private int IconSize =>  IsMobile ? 40 : 60;
-
-    private int NudgeLeft => Size / 2 - IconSize / 2;
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        
-        MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged;
-    }
-
-    private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e)
-    {
-        InvokeAsync(StateHasChanged);
-    }
-
-    public void Dispose()
-    {
-        MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
-    }
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor
index 7903216..2c8606a 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor
@@ -1,5 +1,4 @@
 @page "/aboutus"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
@@ -7,18 +6,16 @@
     <div class="d-flex justify-center">
         <img src="https://cdn.masastack.com/images/logo_big.png"
              class="aboutus__banner"
-             width="320"
-             height="320"
-             alt="logo"/>
+             alt="logo" />
     </div>
 
-    <InteractiveMore Class="hidden-md-and-up" MoreText="公司简介" />
+    <NextViewInteractiveTrigger Class="hidden-md-and-up" MoreText="公司简介" />
 </div>
 
 <div class="home-content">
     <div class="home-content__item">
-        <div class="home-content__item-header" id="aboutus_companyinfo">
-            @* <MenuableTitle Disabled="true" Title="公司简介"></MenuableTitle> *@
+        <div class="home-content__item-header mb-4" id="aboutus_companyinfo">
+            <MenuTitle Title="公司简介" />
         </div>
         <MRow Class="no-gutters-on-mobile">
             <MCol Cols="12" Class="d-flex justify-center">
@@ -49,16 +46,12 @@
         </MRow>
     </div>
     <div class="home-content">
-        <div class="home-content__item">
-            <div class="home-content__item-header" id="aboutus_contactus">
-                @* <MenuableTitle Disabled="true" Title="联系我们"></MenuableTitle> *@
+        <div class="home-content__item text-center">
+            <div class="home-content__item-header mb-4" id="aboutus_contactus">
+                <MenuTitle Title="联系我们" />
             </div>
-            <MRow Class="no-gutters-on-mobile">
-                <MCol Cols="12" Class="d-flex justify-center">
-                    <SerializableImage Src="https://cdn.masastack.com/images/contact.png"
-                                       Class="aboutus__contact-img" />
-                </MCol>
-            </MRow>
+            <img src="https://cdn.masastack.com/images/contact.png"
+                 class="aboutus__contact-img" />
         </div>
     </div>
 </div>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs
deleted file mode 100644
index eec3b8a..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AboutUs.razor.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-namespace MASA.OfficialWebsite.WebApp.Components.Pages;
-
-public partial class AboutUs: AutoScrollComponentBase
-{
-}
\ No newline at end of file
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor
index 0a15e40..02d5b61 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Activities.razor
@@ -1,5 +1,4 @@
 @page "/activity"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor
index 51663cd..9b2edb5 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivitiesBanner.razor
@@ -1,5 +1,4 @@
-@inherits AutoScrollComponentBase
-@rendermode InteractiveServer
+@rendermode InteractiveServer
 
 <div class="home-banner">
 
@@ -16,7 +15,7 @@
             </div>
         </div>
 
-        <InteractiveMore MoreText="全部活动" />
+        <NextView MoreText="全部活动" />
     </div>
 
     <MRow NoGutters Class="hidden-sm-and-down">
@@ -41,7 +40,7 @@
                             <div class="activity-header__subtitle">@item.Title</div>
                             <div class="activity-header__description">@item.Subtitle</div>
                             <div style="margin-top:24px;cursor: pointer;" @onclick="() => GoToDetail(item.Id)">
-                                <SerializableImage Src="@item.Cover" Width="@("100%")" />
+                                <MImage Src="@item.Cover" Width="@("100%")" />
                             </div>
                         </MCard>
                     </MCarouselItem>
@@ -56,27 +55,21 @@
                     {
                         var j = i;
                         var item = Latest5Activities[j];
+                        var active = _carouselValue == j;
 
                         <MHover>
                             <div class="d-flex" @onclick="() => CheckActivity(j)"
-                                 style="min-height: 96px"
+                                 style="min-height: 96px; cursor: pointer;"
                                  @attributes="@context.Attrs">
                                 <MButton Icon
                                          Class="mt-2"
-                                         Color="@((context.Hover || _carouselValue == j) ? "primary" : "#A3AED0")">
-                                    <MIcon Size="@(context.Hover ? 24 : 8)">mdi-circle</MIcon>
+                                         Color="@((context.Hover || active) ? "primary" : "#A3AED0")">
+                                    <MIcon Size="@(active ? 24 : 8)">mdi-circle</MIcon>
                                 </MButton>
-                                @if (context.Hover)
-                                {
-                                    <div>
-                                        <div style="font-size: 30px;font-weight: 400;line-height: 51px;letter-spacing: 0.02em;">
-                                            @item.Date.ToString("MM - dd")
-                                        </div>
-                                        <div class="emphasis2--text">
-                                            @item.Title
-                                        </div>
-                                    </div>
-                                }
+                                <div class="@(context.Hover || active ? "emphasis2--text" : "regular3--text")">
+                                    <h3>@item.Date.ToString("MM - dd")</h3>
+                                    <span>@item.Title</span>
+                                </div>
                             </div >
                         </MHover>
                     }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor
index 6f4645c..806eb99 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor
@@ -5,7 +5,7 @@
     {
         <div class="activity-content__item" id="activity-video">
             <div class="activity-content__item-header">
-                @* <MenuableTitle Items="sMenuableTitleItems" Title="视频回放"></MenuableTitle> *@
+                <MenuTitleInteractiveTrigger InteractiveValue="video" Items="sMenuableTitleItems" Title="视频回放" />
             </div>
             <div class="d-flex justify-center activity-detail__image activity-detail__image-height">
                 <iframe _ngcontent-flink-c48=""
@@ -23,10 +23,10 @@
     {
         <div class="activity-content__item" id="active-file">
             <div class="activity-content__item-header">
-                @* <MenuableTitle Items="sMenuableTitleItems" Title="资料下载"></MenuableTitle> *@
+                <MenuTitleInteractiveTrigger InteractiveValue="data" Items="sMenuableTitleItems" Title="资料下载" />
             </div>
             <div class="activity-detail__image">
-                <MButton Text Ripple="false" Class="activity-detail__button-text" OnClick="() => DownLoadFiles(_data.File)">
+                <MButton Text Ripple="false" Class="activity-detail__button-text" Href="@_data.File">
                     MASA Framework的设计理念.pdf
                 </MButton>
             </div>
@@ -42,10 +42,10 @@
         {
             <div class="activity-content__item" id="activity-detail">
                 <div class="activity-content__item-header">
-                    @* <MenuableTitle Items="sMenuableTitleItems" Title="活动详情"></MenuableTitle> *@
+                    <MenuTitleInteractiveTrigger InteractiveValue="detail" Items="sMenuableTitleItems" Title="活动详情" />
                 </div>
                 <div class="activity-detail__image">
-                    <SerializableImage Src="@cover" />
+                    <img src="@cover" width="100%" />
                 </div>
             </div>
         }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor.cs
index c778282..598eb6e 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor.cs
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/ActivityDetail.razor.cs
@@ -44,11 +44,6 @@ protected override void OnParametersSet()
         _data = AllActivityDetails.GetValueOrDefault(Id);
     }
 
-    private void DownLoadFiles(string uri)
-    {
-        NavigationManager.NavigateTo(uri, false);
-    }
-
     public void Dispose()
     {
         MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AutoScrollComponentBase.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/AutoScrollComponentBase.cs
deleted file mode 100644
index 8558cae..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/AutoScrollComponentBase.cs
+++ /dev/null
@@ -1,8 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace MASA.OfficialWebsite.WebApp.Components.Pages;
-
-public class AutoScrollComponentBase : ComponentBase
-{
-    protected bool IsMobile => false;
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor
index 2c3e396..4544101 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor
@@ -1,5 +1,4 @@
 @page "/blazor"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
@@ -39,20 +38,18 @@
             </div>
         </MCol>
         <MCol Cols="12" Lg="6" Class="cover-wrapper">
-            <SerializableImage Src="https://cdn.masastack.com/images/blazor_banner.png"
-                               Contain
-                               Width="@("100%")"
-                               Height="@("100%")" />
+            <img src="https://cdn.masastack.com/images/blazor_banner.png"
+                 width="100%" />
         </MCol>
     </MRow>
 
-    <InteractiveMore Class="hidden-md-and-up" MoreText="WHY MASA BLAZOR" />
+    <NextViewInteractiveTrigger Class="hidden-md-and-up" MoreText="WHY MASA BLAZOR" />
 </div>
 
 <div class="home-content">
     <div class="home-content__item">
         <div class="home-content__item-header">
-            @* <MenuableTitle Disabled="true" Title="WHY MASA BLAZOR"></MenuableTitle> *@
+            <MenuTitle Title="WHY MASA BLAZOR" />
             <div class="home-content__item-subtitle">为什么选择MASA Blazor？</div>
         </div>
         <MRow Class="building-block__item-cards no-gutters-on-mobile">
@@ -102,44 +99,26 @@
 
     <div class="home-content__item">
         <div class="home-content__item-header">
-            @* <MenuableTitle Disabled="true" Title="用户信赖"></MenuableTitle> *@
+            <MenuTitle Title="用户信赖" />
         </div>
         <MRow Class="building-block__item-cards no-gutters-on-mobile">
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo03.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="116" />
+                <img src="https://cdn.masastack.com/images/companylogo03.png" width="100%" />
             </MCol>
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo01.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="139" />
+                <img src="https://cdn.masastack.com/images/companylogo01.png" width="100%" />
             </MCol>
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo05.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="130" />
+                <img src="https://cdn.masastack.com/images/companylogo05.png" width="100%" />
             </MCol>
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo06.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="129" />
+                <img src="https://cdn.masastack.com/images/companylogo06.png" width="100%" />
             </MCol>
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo04.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="50" />
+                <img src="https://cdn.masastack.com/images/companylogo04.png" width="100%" />
             </MCol>
             <MCol Cols="6" Md="2">
-                <ImageCard Image="https://cdn.masastack.com/images/companylogo02.png"
-                           Height="80"
-                           Width="246"
-                           MobileWidth="128" />
+                <img src="https://cdn.masastack.com/images/companylogo02.png" width="100%" />
             </MCol>
         </MRow>
     </div>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor.cs
deleted file mode 100644
index 095f436..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Blazor.razor.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace MASA.OfficialWebsite.WebApp.Components.Pages;
-
-public partial class Blazor : AutoScrollComponentBase
-{
-    private string BannerMaxSize => IsMobile ? "375px" : "874px";
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor
index 91021cb..d94f050 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor
@@ -1,5 +1,4 @@
 @page "/framework"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
@@ -29,33 +28,27 @@
             </div>
         </MCol>
         <MCol Cols="12" Lg="6" Class="cover-wrapper">
-            <SerializableImage Src="https://cdn.masastack.com/images/banner4.png"
-                               Contain
-                               Width="@("100%")"
-                               Height="@("100%")" />
+            <img src="https://cdn.masastack.com/images/banner4.png"
+                 width="100%" />
         </MCol>
     </MRow>
 
-    <InteractiveMore Class="hidden-md-and-up" MoreText="构建块" />
+    <NextViewInteractiveTrigger Class="hidden-md-and-up" MoreText="构建块" />
 </div>
 
 <div class="home-content">
     <div class="home-content__item">
-        <SerializableImage Class="framework-diagram hidden-md-and-up"
-                           Src="https://cdn.masastack.com/images/masaframework2.svg"
-                           Contain>
-        </SerializableImage>
-
-        <SerializableImage Class="framework-diagram hidden-sm-and-down"
-                           Src="https://cdn.masastack.com/images/masaframework1.svg"
-                           Height="@("663px")"
-                           Contain>
-        </SerializableImage>
+        <img class="framework-diagram hidden-md-and-up"
+             src="https://cdn.masastack.com/images/masaframework2.svg"
+             width="100%" />
+        <img class="framework-diagram hidden-sm-and-down"
+             src="https://cdn.masastack.com/images/masaframework1.svg"
+             height="663px" />
     </div>
 
     <div class="home-content__item" id="building-blocks-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="BUILDING BLOCKS"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="building-blocks" Items="s_menuableTitleItems" Title="BUILDING BLOCKS" />
             <div class="home-content__item-subtitle">构建块</div>
         </div>
         <MRow Class="building-block__item-cards no-gutters-on-mobile">
@@ -132,7 +125,7 @@
 
     <div class="home-content__item" id="utils-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="UTILS"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="utils" Items="s_menuableTitleItems" Title="UTILS"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">通用类库集合</div>
         </div>
         <MRow Class="building-block__item-cards no-gutters-on-mobile">
@@ -164,7 +157,7 @@
 
     <div class="home-content__item" id="why-masa-framework-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="WHY MASA FRAMEWORK"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="why-masafx" Items="s_menuableTitleItems" Title="WHY MASA FRAMEWORK"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">为什么选择MASA Framework?</div>
         </div>
         <MRow Class="home-content__item-cards no-gutters-on-mobile">
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor.cs
index 3b8e039..2554d00 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor.cs
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Framework.razor.cs
@@ -1,11 +1,10 @@
-using BlazorComponent;
-using MASA.OfficialWebsite.WebApp.Components.Layout;
+using MASA.OfficialWebsite.WebApp.Components.Layout;
 using MASA.OfficialWebsite.WebApp.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace MASA.OfficialWebsite.WebApp.Components.Pages
 {
-    public partial class Framework : AutoScrollComponentBase
+    public partial class Framework
     {
         [CascadingParameter(Name = "MainLayout")]
         public MainLayout MainLayout { get; set; } = null!;
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor
index 90624cf..0deef35 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor
@@ -1,5 +1,4 @@
 @page "/"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
@@ -8,7 +7,7 @@
 <div class="home-content">
     <div class="home-content__item full-page" id="product-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="产品"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="product" Items="menuableTitleItems" Title="产品"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">Modern App & Service Architecture</div>
         </div>
         <MRow Class="home-content__item-cards no-gutters-on-mobile">
@@ -38,7 +37,7 @@
 
     <div class="home-content__item full-page fire" id="activity-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="最新活动"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="activity" Items="menuableTitleItems" Title="最新活动"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">最新社区活动预告与往期回顾</div>
         </div>
         <MRow Class="home-content__item-cards no-gutters-on-mobile">
@@ -50,12 +49,12 @@
             }
         </MRow>
 
-        <More Href="/activity">更多活动</More>
+        <MoreButton Href="/activity">更多活动</MoreButton>
     </div>
 
     <div class="home-content__item full-page fir" id="service-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="s_menuableTitleItems" Title="企业服务"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="pro" Items="menuableTitleItems" Title="企业服务"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">提供开源商业优质服务 欢迎咨询</div>
         </div>
         <MRow Class="home-content__item-cards no-gutters-on-mobile">
@@ -64,7 +63,7 @@
                              Title="开源服务年包"
                              Icon="mdi-check-circle"
                              IconColor="#6946FF"
-                             Contents="s_whyContent1">
+                             Contents="whyContent1">
                 </ServiceCard>
             </MCol>
             <MCol Cols="12" Md="4">
@@ -72,7 +71,7 @@
                              Title="企业定制服务"
                              Icon="mdi-check-circle"
                              IconColor="#05CD99"
-                             Contents="s_whyContent2">
+                             Contents="whyContent2">
                 </ServiceCard>
             </MCol>
             <MCol Cols="12" Md="4">
@@ -80,7 +79,7 @@
                              Title="培训服务"
                              Icon="mdi-check-circle"
                              IconColor="#FF7D00"
-                             Contents="s_whyContent3">
+                             Contents="whyContent3">
                 </ServiceCard>
             </MCol>
         </MRow>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor.cs
index a7d832f..f9b1b6a 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor.cs
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Home.razor.cs
@@ -2,34 +2,33 @@
 
 namespace MASA.OfficialWebsite.WebApp.Components.Pages;
 
-public partial class Home: AutoScrollComponentBase
+public partial class Home
 {
-     private static readonly List<MenuableTitleItem> s_menuableTitleItems = new()
-    {
+    private static readonly List<MenuableTitleItem> menuableTitleItems =
+    [
         new MenuableTitleItem("产品", "Modern App & Service Architecture", "#product-content"),
         new MenuableTitleItem("最新活动", "最新社区活动预告与往期回顾", "#activity-content"),
-        new MenuableTitleItem("企业服务", "提供开源商业优质服务", "#service-content"),
-    };
-    
-    private static readonly List<(string Major, string? Minor)> s_whyContent1 = new()
-    {
+        new MenuableTitleItem("企业服务", "提供开源商业优质服务", "#service-content")
+    ];
+
+    private static readonly List<(string Major, string? Minor)> whyContent1 =
+    [
         ("部署安装服务", null),
         ("线上故障修复", null),
         ("服务巡检", null),
-        ("专属服务沟通群", null),
-    };
+        ("专属服务沟通群", null)
+    ];
 
-    private static readonly List<(string Major, string? Minor)> s_whyContent2 = new()
-    {
+    private static readonly List<(string Major, string? Minor)> whyContent2 =
+    [
         ("基础架构类", "如上云、架构升级、DevOps集成等"),
-        ("外包服务类", "如应用现代化重构、物联网、电商项目等"),
-    };
+        ("外包服务类", "如应用现代化重构、物联网、电商项目等")
+    ];
 
-    private static readonly List<(string Major, string? Minor)> s_whyContent3 = new()
-    {
+    private static readonly List<(string Major, string? Minor)> whyContent3 =
+    [
         ("定制化培训服务", null),
         ("标准课程培训（初级、中级、高级、架构师）", null),
-        ("外聘讲师培训", null),
-    };
-
+        ("外聘讲师培训", null)
+    ];
 }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/HomeBanner.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/HomeBanner.razor
index 601fc8b..cc34f1d 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/HomeBanner.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/HomeBanner.razor
@@ -1,5 +1,4 @@
-@inherits AutoScrollComponentBase
-@rendermode InteractiveServer
+@rendermode InteractiveServer
 
 <div class="home-banner">
     <MSwiper @bind-Index="_carouselValue"
@@ -75,7 +74,7 @@
         <MSwiperPagination Clickable Class="carousel-dot hidden-md-and-up" />
     </MSwiper>
 
-    <InteractiveMore Class="hidden-md-and-up" MoreText="更多产品" />
+    <NextView Class="hidden-md-and-up" MoreText="更多产品" />
 
     <div class="home-banner__slider-wrapper hidden-sm-and-down">
         <MItemGroup Value="_carouselValue"
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor
index b721a19..bd02b69 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor
@@ -1,8 +1,11 @@
 @page "/learningpath"
-@inherits AutoScrollComponentBase
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
-<SerializableImage Class="hidden-md-and-up" Src="https://cdn.masastack.com/images/learning-path-mobile1.png" />
+<img src="https://cdn.masastack.com/images/learning-path-mobile1.png"
+     class="hidden-md-and-up"
+     width="100%"/>
 
-<SerializableImage Class="hidden-sm-and-down" Src="https://cdn.masastack.com/images/learning-path.png" />
+<img src="https://cdn.masastack.com/images/learning-path.png"
+     class="hidden-sm-and-down"
+     width="100%"/>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor.cs
deleted file mode 100644
index be808ba..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/LearningPath.razor.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace MASA.OfficialWebsite.WebApp.Components.Pages
-{
-    public partial class LearningPath : AutoScrollComponentBase
-    {
-    }
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor
index 0afb93b..adb77ac 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor
@@ -1,5 +1,5 @@
 @page "/stack"
-@inherits AutoScrollComponentBase
+@inject NavigationManager NavigationManager
 
 <PageTitle>温州数闪科技有限公司</PageTitle>
 
@@ -35,45 +35,35 @@
         </MCol>
     </MRow>
 
-    @* <InteractiveMore Class="hidden-md-and-up" MoreText="查看更多" /> *@
+    <NextViewInteractiveTrigger Class="hidden-md-and-up" MoreText="查看更多" />
 </div>
 <div class="home-content">
     <div class="home-content__item" id="basic-ability-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="sMenuableTitleItems" Title="BASIC ABILITY"></MenuableTitle> *@
-            <MInteractiveTrigger WithWrapper
-                                 Style="position: relative"
-                                 Class="pointer-events-md-none"
-                                 QueryName="@nameof(BasicAbilityMenu)"
-                                 QueryValue="BasicAbilityMenu"
-                                 InteractiveComponentType="typeof(MenuableTitle)"
-                                 InteractiveParameters="@(new Dictionary<string, object>() { { nameof(MenuableTitle.Items), sMenuableTitleItems }, { nameof(MenuableTitle.Activator), "#menu-title__basic-ability"}, { nameof(MenuableTitle.QueryName), nameof(BasicAbilityMenu)}})">
-                <div id="menu-title__basic-ability" class="d-flex align-center justify-center home-content__item-title">
-                    BASIC ABILITY
-                    <MIcon Style="color:#323D6F;" Class="hidden-md-and-up">mdi-chevron-down</MIcon>
-                </div>
-            </MInteractiveTrigger>
+            <MenuTitleInteractiveTrigger InteractiveValue="basic-ability"
+                                         Items="sMenuableTitleItems"
+                                         Title="BASIC ABILITY" />
             <div class="home-content__item-subtitle">现代应用治理解决方案</div>
         </div>
         <StackBasicAbility Items="basicAbilityFeatures" />
     </div>
     <div class="home-content__item" id="operator-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="sMenuableTitleItems" Title="OPERATOR"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="operator" Items="sMenuableTitleItems" Title="OPERATOR"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">高效运维解决方案</div>
         </div>
         <StackBasicAbility Items="operatorFeatures" />
     </div>
     <div class="home-content__item" id="data-factory-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="sMenuableTitleItems" Title="DATA FACTORY"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="data-factory" Items="sMenuableTitleItems" Title="DATA FACTORY"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">数据治理解决方案</div>
         </div>
         <StackBasicAbility Items="dataFactoryFeatures" />
     </div>
     <div class="home-content__item" id="why-masa-stack-content">
         <div class="home-content__item-header">
-            @* <MenuableTitle Items="sMenuableTitleItems" Title="WHY MASA STACK"></MenuableTitle> *@
+            <MenuTitleInteractiveTrigger InteractiveValue="why-masa-stack" Items="sMenuableTitleItems" Title="WHY MASA STACK"></MenuTitleInteractiveTrigger>
             <div class="home-content__item-subtitle">为什么选择MASA Stack?</div>
         </div>
         <MRow Class="home-content__item-cards no-gutters-on-mobile">
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor.cs b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor.cs
index 263ba14..0653e54 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor.cs
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/Stack.razor.cs
@@ -3,7 +3,7 @@
 
 namespace MASA.OfficialWebsite.WebApp.Components.Pages;
 
-public partial class Stack : AutoScrollComponentBase
+public partial class Stack
 {
     private static readonly List<string> sWhyContent1 =
     [
@@ -69,7 +69,4 @@ public partial class Stack : AutoScrollComponentBase
     ];
 
     public record StackFeature(string Title, string SubTitle, string Content, string Image, int Height, bool RightImage = false);
-    
-    [SupplyParameterFromQuery]
-    private bool BasicAbilityMenu { get; set; }
 }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoBtn.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoBtn.razor
index 65be92a..c09b6c6 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoBtn.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoBtn.razor
@@ -1,9 +1,12 @@
 @inject NavigationManager Nav
 
-<MInteractiveTrigger WithWrapper
-                     Style="position: relative"
-                     QueryName="live-demo"
-                     QueryValue="LiveDemo"
+<MInteractiveTrigger WithPopup
+                     Top="-74"
+                     Left="16"
+                     PopupClass="live-demo-menu"
+                     QueryName="@nameof(LiveDemo)"
+                     QueryValue="@LiveDemo"
+                     InteractiveValue="true"
                      InteractiveComponentType="typeof(StackLiveDemoMenu)">
     <MButton Class="@($"demo-btn rounded-pill emphasis--text ml-4 text-capitalize mr-0 {Class}")"
              Text
@@ -19,7 +22,9 @@
 
     [Parameter] public string? Class { get; set; }
 
-    [SupplyParameterFromQuery(Name = "live-demo")]
+    [SupplyParameterFromQuery]
     public bool LiveDemo { get; set; }
+    
+    
 
 }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor b/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor
index 60aa9a2..7f6103e 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor
@@ -1,63 +1,25 @@
 @rendermode InteractiveServer
-@implements IOutsideClickJsCallback
-@implements IAsyncDisposable
-@inject NavigationManager Navigation
-@inject OutsideClickJSModule OutsideClickJSModule
-@attribute [StreamRendering]
-
-<div class="live-demo-menu @(_visible ? "visible" : "")">
-    <div class="regular--text">
-        <div>
-            Username:
-            <PCopyableText Class="d-inline-block" Text="guest">
-                guest
-            </PCopyableText>
-        </div>
-        <div>
-            Password:
-            <PCopyableText Class="d-inline-block" Text="guest123">
-                guest123
-            </PCopyableText>
-        </div>
+@inherits MInteractivePopup
+
+<div class="regular--text">
+    <div>
+        Username:
+        <PCopyableText Class="d-inline-block" Text="guest">
+            guest
+        </PCopyableText>
+    </div>
+    <div>
+        Password:
+        <PCopyableText Class="d-inline-block" Text="guest123">
+            guest123
+        </PCopyableText>
     </div>
-    <MButton Icon
-             Color="primary"
-             Href="https://auth-demo.masastack.com/"
-             OnClick="@(() => Navigation.NavigateWithQueryParameter("live-demo", (bool?)null))"
-             Target="_blank"
-             Class="demo-btn">
-        <MIcon>mdi-open-in-new</MIcon>
-    </MButton>
 </div>
-
-@code {
-
-    private bool _visible;
-    
-    protected override async Task OnInitializedAsync()
-    {
-        await Task.Delay(1);
-
-        _visible = true;
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            await OutsideClickJSModule.InitializeAsync(this, ".live-demo-menu");
-        }
-    }
-
-    public async Task HandleOnOutsideClickAsync()
-    {
-        await Task.Delay(100);
-        Navigation.NavigateWithQueryParameter("live-demo", null);
-    }
-
-    async ValueTask IAsyncDisposable.DisposeAsync()
-    {
-        await OutsideClickJSModule.Dispose();
-    }
-
-}
+<MButton Icon
+         Color="primary"
+         Href="https://auth-demo.masastack.com/"
+         OnClick="@(() => NavigationManager.NavigateWithQueryParameter(QueryName, (bool?)null))"
+         Target="_blank"
+         Class="demo-btn">
+    <MIcon>mdi-open-in-new</MIcon>
+</MButton>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor.css b/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor.css
deleted file mode 100644
index 3c3171f..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Pages/StackLiveDemoMenu.razor.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.live-demo-menu {
-  position: absolute;
-  top: -74px;
-  left: 16px;
-  background-color: white;
-  border-radius: 8px;
-  padding: 12px 16px;
-  width: 240px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  opacity: 0;
-  font-size: 14px;
-  transition: opacity 0.3s ease-in-out;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-}
-
-.live-demo-menu.visible {
-  opacity: 0.8;
-}
-
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/AboutUsCard.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/AboutUsCard.razor
index 691b389..1a4a402 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/AboutUsCard.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/AboutUsCard.razor
@@ -1,8 +1,5 @@
 <MCard Class="aboutus-card" Flat>
-    <div>
-        <SerializableImage Src="@Image"
-                           Class="aboutus-card__image" Contain />
-    </div>
+    <img src="@Image" class="aboutus-card__image" />
     <div class="aboutus-card__description">
         @Description
     </div>
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/ImageCard.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/ImageCard.razor
deleted file mode 100644
index c227ec3..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/ImageCard.razor
+++ /dev/null
@@ -1,48 +0,0 @@
-@rendermode InteractiveServer
-@inject MasaBlazor MasaBlazor
-@implements IDisposable
-
-<MCard Class="d-flex justify-center" Style="align-items: center;background-color:transparent;" Flat>
-    <SerializableImage Src="@Image"
-                       Height="@($"{ImageHeight}px")"
-                       Width="@($"{ImageWidth}px")"
-                       Class="blazor-card__margin-bottom"
-                       Style="flex:none;" />
-</MCard>
-
-@code {
-
-    [Parameter]
-    public string? Image { get; set; }
-
-    [Parameter]
-    public int Height { get; set; }
-
-    [Parameter]
-    public int Width { get; set; }
-
-    [Parameter]
-    public int MobileWidth { get; set; }
-
-    private int ImageHeight => MasaBlazor.Breakpoint.Mobile ? 48 : Height;
-
-    private int ImageWidth => MasaBlazor.Breakpoint.Mobile ? MobileWidth : Width;
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        MasaBlazor.MobileChanged += MasaBlazorOnMobileChanged;
-    }
-
-    private void MasaBlazorOnMobileChanged(object? sender, MobileChangedEventArgs e)
-    {
-        InvokeAsync(StateHasChanged);
-    }
-
-    public void Dispose()
-    {
-        MasaBlazor.MobileChanged -= MasaBlazorOnMobileChanged;
-    }
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitle.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitle.razor
new file mode 100644
index 0000000..803eb67
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitle.razor
@@ -0,0 +1,18 @@
+<div id="@Id" class="d-flex align-center justify-center home-content__item-title">
+    @Title
+
+    @if (Icon)
+    {
+        <MIcon Style="color:#323D6F;" Class="hidden-md-and-up">mdi-chevron-down</MIcon>
+    }
+</div>
+
+@code {
+
+    [Parameter] public string? Id { get; set; }
+
+    [Parameter] public string? Title { get; set; }
+
+    [Parameter] public bool Icon { get; set; }
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitleInteractiveTrigger.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitleInteractiveTrigger.razor
new file mode 100644
index 0000000..370832b
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuTitleInteractiveTrigger.razor
@@ -0,0 +1,32 @@
+<MInteractiveTrigger Class="pointer-events-md-none"
+                     DisableLinkOnInteractive
+                     QueryName="@nameof(MenuTitle)"
+                     QueryValue="@MenuTitle"
+                     InteractiveValue="@InteractiveValue"
+                     InteractiveComponentType="typeof(MenuableTitle)"
+                     InteractiveComponentParameters="@Parameters">
+    <MenuTitle Id="@Id" Title="@Title" Icon/>
+</MInteractiveTrigger>
+
+@code {
+
+    [SupplyParameterFromQuery] private string? MenuTitle { get; set; }
+
+    [Parameter] public string InteractiveValue { get; set; } = null!;
+
+    [Parameter] public List<MenuableTitleItem> Items { get; set; } = new();
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    [Parameter] public string? Title { get; set; }
+
+    private string Id => $"menu-title__{InteractiveValue}";
+
+    private Dictionary<string, object?> Parameters => new()
+    {
+        { nameof(MenuableTitle.Items), Items },
+        { nameof(MenuableTitle.Activator), $"#{Id}" },
+        { nameof(MenuableTitle.QueryName), nameof(MenuTitle) }
+    };
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuableTitle.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuableTitle.razor
index b623c73..78d513a 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuableTitle.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MenuableTitle.razor
@@ -1,5 +1,6 @@
 @rendermode InteractiveServer
 @inject NavigationManager Navigation
+@inherits NextTickComponentBase
 
 <MMenu Value="visible"
        ValueChanged="ValueChanged"
@@ -52,13 +53,12 @@
     private async Task ValueChanged(bool val)
     {
         var prevVisible = visible;
+
         visible = val;
-        StateHasChanged();
 
-        await Task.Delay(300);
         if (prevVisible && !visible)
         {
-            Navigation.NavigateWithQueryParameter(QueryName, (bool?)null);
+            Navigation.NavigateTo(Navigation.GetUriWithQueryParameter(QueryName, (string?)null));
         }
     }
 
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/More.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/More.razor
deleted file mode 100644
index a1f2a8a..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/More.razor
+++ /dev/null
@@ -1,31 +0,0 @@
-<div style="text-align: right">
-    <MButton Right Text Href="@Href" Disabled="Disabled"
-             Style=@($"{Style};color: #485585;")>
-        @ChildContent
-        @if (IsMobile)
-        {
-            <MIcon Small Size="16">mdi-menu-right</MIcon>
-        }
-        else
-        {
-            <MIcon>mdi-menu-right</MIcon>
-        }
-    </MButton>
-</div>
-
-@code {
-
-    [CascadingParameter(Name = "IsMobile")]
-    public bool IsMobile { get; set; }
-
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
-
-    [Parameter]
-    public string? Href { get; set; }
-
-    private string Style => IsMobile ? "font-weight: 500;font-size: 12px;line-height: 18px;color: #A3AED0;" : "font-size: 18px;line-height: 27px;letter-spacing: 0.01rem;";
-
-    private bool Disabled => string.IsNullOrEmpty(Href);
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/MoreButton.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MoreButton.razor
new file mode 100644
index 0000000..86afdff
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/MoreButton.razor
@@ -0,0 +1,19 @@
+@if (!string.IsNullOrWhiteSpace(Href))
+{
+    <div style="text-align: right">
+        <MButton Right Text Href="@Href" Class="more-button">
+            @ChildContent
+            <MIcon>mdi-menu-right</MIcon>
+        </MButton>
+    </div>
+}
+
+@code {
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? Href { get; set; }
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/NavMenu.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NavMenu.razor
index d60e55e..061014a 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/NavMenu.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NavMenu.razor
@@ -1,17 +1,9 @@
-@using BlazorComponent.Web
-@rendermode InteractiveServer
-@implements IOutsideClickJsCallback
-@implements IAsyncDisposable
-@inject OutsideClickJSModule OutsideClickJSModule
-@inject NavigationManager Navigation
+@rendermode InteractiveServer
+@inherits MInteractivePopup
 
-<MList Class="menu-list"
-       Style="@Style"
-       Elevation="0"
-       Subheader
+<MList Subheader
        TwoLine
-       Routable
-       @ref="_list">
+       Routable>
     @foreach (var item in Items)
     {
         @if (item.IsSubheader)
@@ -48,41 +40,11 @@
     [Parameter, EditorRequired]
     public IList<NavItem> Items { get; set; } = new List<NavItem>();
 
-    [Parameter] public string? Style { get; set; }
-
-    [Parameter] public string QueryName { get; set; }
-
-    [Parameter] public IEnumerable<string> ActivatorSelectors { get; set; }
-
-    private MList _list = null!;
-
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
         Items ??= new List<NavItem>();
-        ActivatorSelectors ??= Enumerable.Empty<string>();
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            var selectors = ActivatorSelectors.ToList();
-            selectors.Add(_list.Ref.GetSelector());
-            await OutsideClickJSModule.InitializeAsync(this, selectors.ToArray());
-        }
-    }
-
-    public async Task HandleOnOutsideClickAsync()
-    {
-        await Task.Delay(100);
-        Navigation.NavigateWithQueryParameter(QueryName, (bool?)null);
-    }
-
-    async ValueTask IAsyncDisposable.DisposeAsync()
-    {
-        await OutsideClickJSModule.Dispose();
     }
 
 }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/InteractiveMore.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NextView.razor
similarity index 68%
rename from src/MASA.OfficialWebsite.WebApp/Components/Shared/InteractiveMore.razor
rename to src/MASA.OfficialWebsite.WebApp/Components/Shared/NextView.razor
index 904f591..65b4b71 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/InteractiveMore.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NextView.razor
@@ -1,9 +1,9 @@
-@rendermode InteractiveServer
-@inject IJSRuntime JS
+@inject IJSRuntime JS
 
-<div class="home-banner__slider-wrapper @Class"
+<div class="@($"home-banner__slider-wrapper {Class}")"
      style="background-image: url('https://cdn.masastack.com/images/mUnion.png'); background-size: 100% 100%">
-    <div style="display: contents" @onclick="ScrollToNext">
+    <div style="display: contents"
+         @onclick="ScrollToNextViewAsync">
         <MIcon Small Color="#E2E7F4">mdi-chevron-double-up</MIcon>
         <div class="more">@MoreText</div>
     </div>
@@ -15,7 +15,7 @@
 
     [Parameter] public string? Class { get; set; }
 
-    private async Task ScrollToNext()
+    async Task ScrollToNextViewAsync()
     {
         await JS.InvokeVoidAsync("MasaOfficialWebsite.scrollToNext");
     }
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/NextViewInteractiveTrigger.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NextViewInteractiveTrigger.razor
new file mode 100644
index 0000000..b86d4d6
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/NextViewInteractiveTrigger.razor
@@ -0,0 +1,20 @@
+<MInteractiveTrigger InteractiveValue="true"
+                     InteractiveComponentType="typeof(ScrollToNext)"
+                     QueryName="@nameof(ScrollingToNext)"
+                     QueryValue="ScrollingToNext"
+                     Class="@($"home-banner__slider-wrapper {Class}")"
+                     Style="background-image: url('https://cdn.masastack.com/images/mUnion.png'); background-size: 100% 100%">
+    <MIcon Small Color="#E2E7F4">mdi-chevron-double-up</MIcon>
+    <div class="more">@MoreText</div>
+</MInteractiveTrigger>
+
+@code {
+
+    [Parameter] public string? MoreText { get; set; }
+
+    [Parameter] public string? Class { get; set; }
+
+    [SupplyParameterFromQuery]
+    private bool? ScrollingToNext { get; set; }
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/ProductCard.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/ProductCard.razor
index e2d7666..d6b329d 100644
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/ProductCard.razor
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/ProductCard.razor
@@ -8,10 +8,7 @@
         @Description
     </div>
 
-    @if (Href is not null)
-    {
-        <More Href="@Href">了解详情</More>
-    }
+    <MoreButton Href="@Href">了解详情</MoreButton>
 </MCard>
 
 @code {
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/ScrollToNext.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/ScrollToNext.razor
new file mode 100644
index 0000000..519b770
--- /dev/null
+++ b/src/MASA.OfficialWebsite.WebApp/Components/Shared/ScrollToNext.razor
@@ -0,0 +1,19 @@
+@rendermode InteractiveServer
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
+
+@code {
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JS.InvokeVoidAsync("MasaOfficialWebsite.scrollToNext");
+
+            await Task.Delay(500); // animation duration
+
+            Navigation.NavigateWithQueryParameter("ScrollingToNext", null);
+        }
+    }
+
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableImage.razor b/src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableImage.razor
deleted file mode 100644
index b1efa90..0000000
--- a/src/MASA.OfficialWebsite.WebApp/Components/Shared/SerializableImage.razor
+++ /dev/null
@@ -1,39 +0,0 @@
-@rendermode InteractiveServer
-
-<MImage Src="@Src"
-        MaxHeight="@MaxHeight"
-        MaxWidth="@MaxWidth"
-        Width="@Width"
-        Height="@Height"
-        Contain="@Contain"
-        Style="@Style"
-        Class="@Class"
-        Eager
-        alt="@Alt">
-</MImage>
-
-@code {
-
-    // TODO: The MaxHeight and MaxWidth type is StringNumber,
-    // it's not serializable parameter type.
-    // So we move to a single component for now.
-
-    [Parameter] public string? MaxHeight { get; set; }
-
-    [Parameter] public string? MaxWidth { get; set; }
-
-    [Parameter] public string? Height { get; set; }
-
-    [Parameter] public string? Width { get; set; }
-
-    [Parameter] public string? Src { get; set; }
-
-    [Parameter] public bool Contain { get; set; }
-
-    [Parameter] public string? Style { get; set; }
-
-    [Parameter] public string? Alt { get; set; }
-
-    [Parameter] public string? Class { get; set; }
-
-}
diff --git a/src/MASA.OfficialWebsite.WebApp/wwwroot/app.css b/src/MASA.OfficialWebsite.WebApp/wwwroot/app.css
index 8cf1e6b..7902122 100644
--- a/src/MASA.OfficialWebsite.WebApp/wwwroot/app.css
+++ b/src/MASA.OfficialWebsite.WebApp/wwwroot/app.css
@@ -50,6 +50,10 @@ h1:focus {
     border-color: #929292;
 }
 
+.m-application .pointer-events-none {
+    pointer-events: none;
+}
+
 @media (min-width: 600px) {
     .m-application .pointer-events-sm-none {
         pointer-events: none;
diff --git a/src/MASA.OfficialWebsite.WebApp/wwwroot/css/shared.css b/src/MASA.OfficialWebsite.WebApp/wwwroot/css/shared.css
index 9a3daf0..d85307a 100644
--- a/src/MASA.OfficialWebsite.WebApp/wwwroot/css/shared.css
+++ b/src/MASA.OfficialWebsite.WebApp/wwwroot/css/shared.css
@@ -51,12 +51,10 @@ html {
 
         .website-shared .menu-list {
             background: #fff;
-            padding: 36px 26px;
+            padding: 32px 24px;
             border-radius: 16px 0 16px 16px;
             width: 455px;
-            position: absolute;
             margin-top: 6px;
-            transition: transform 0.3s ease-in-out;
         }
 
             .website-shared .menu-list .m-subheader, .website-shared .menu-list .m-list-item {
@@ -813,6 +811,10 @@ html {
         line-height: 56px;
         color: #323D6F;
     }
+    
+    .activity-content__item-header .home-content__item-title {
+        color: #323D6F;
+    }
 
 .demo-btn__tooltip {
     background: white;
@@ -854,6 +856,10 @@ html {
     width: 36px;
 }
 
+.follow-us-icon .m-icon {
+    font-size: 36px !important;
+}
+
 .fill-height-on-desktop {
     height: 100%;
 }
@@ -871,13 +877,53 @@ html {
 }
 
 .aboutus__contact-img {
-    flex: none;
     width: 280px;
-    height: 345px;
-    border-radius: 16px;
-    margin-top: 120px;
 }
 
 .m-main {
     padding-top: 100px !important;
 }
+
+#follow-us-image {
+    position: absolute;
+}
+
+#follow-us-image img {
+    width: 180px;
+}
+
+#follow-us-image.wechat {
+    left: -60px;
+}
+
+#follow-us-image.qq {
+    left: 36px;
+}
+
+.more-button {
+    color: #485585 !important;
+    font-size: 18px !important;
+    letter-spacing: 0.01rem;
+}
+
+.more-button .m-icon {
+    font-size: 24px;
+}
+
+.aboutus__banner {
+    width: 50vw;
+    max-width: 320px;
+}
+
+.live-demo-menu {
+    background-color: white;
+    border-radius: 8px;
+    padding: 12px 16px;
+    width: 240px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    opacity: 0;
+    font-size: 14px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+}
diff --git a/src/MASA.OfficialWebsite.WebApp/wwwroot/css/small-shared.css b/src/MASA.OfficialWebsite.WebApp/wwwroot/css/small-shared.css
index 1eb319d..6ab6fa3 100644
--- a/src/MASA.OfficialWebsite.WebApp/wwwroot/css/small-shared.css
+++ b/src/MASA.OfficialWebsite.WebApp/wwwroot/css/small-shared.css
@@ -647,6 +647,10 @@
     width: 24px;
 }
 
+.follow-us-icon .m-icon {
+    font-size: 24px !important;
+}
+
 .row.no-gutters-on-mobile {
     margin: 0;
 }
@@ -671,11 +675,30 @@
 
 .aboutus__contact-img {
     width: 140px;
-    height: 172px;
-    border-radius: 16px;
-    margin-top: 24px;
 }
 
 .m-main {
     padding-top: 48px !important;
 }
+
+#follow-us-image img {
+    width: 120px;
+}
+
+#follow-us-image.wechat {
+    left: -40px;
+    bottom: 40px;
+}
+
+#follow-us-image.qq {
+    left: 36px;
+    bottom: 40px;
+}
+
+.more-button {
+    font-size: 16px !important;
+}
+
+.more-button .m-icon {
+    font-size: 16px;
+}
\ No newline at end of file