refact: converted to bootstrap 5 utility

Author: EliasMasche

src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor

@@ -4,15 +4,16 @@
 @inject IOptions<ProfileInformation> ProfileInformation
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
 
-<footer id="footer" class="text-center">
-    <span class="py-2 mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
+<footer class="position-absolute bottom-0 w-100 text-center" style="height:2.5rem;">
+    <span class="py-2 mb-0 text-body-secondary d-block">© @DateTime.Now.Year @CopyrightName</span>
     @if (SupportConfiguration.Value.ShowInFooter)
     {
-        <div class="pb-2" style="display:flex;justify-content:center">
+        <div class="pb-2 d-flex justify-content-center">
             <DonationSection />
         </div>
     }
 </footer>
+
 @code {
     private string CopyrightName => AppConfiguration.Value.IsAboutMeEnabled
         ? ProfileInformation.Value.Name

src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor

@@ -4,20 +4,40 @@
 @inject IOptions<Social> Social
 @inject IOptions<SupportMeConfiguration> SupportConfiguration
 
-<div style="@IntroductionStyle" class="@IntroductionClass">
-    <div class="introduction-container">
-        <div class="profile-picture" style="--profile-image: url(@Introduction.Value.ProfilePictureUrl)">
-        </div>
-        <div class="profile-text d-flex flex-column">
-            <div>@MarkdownConverter.ToMarkupString(Introduction.Value.Description)</div>
-            <SocialAccounts Social="@Social.Value"></SocialAccounts>
-            @if (SupportConfiguration.Value.ShowUnderIntroduction)
-            {
-                <DonationSection />
-            }
+<div class="@IntroductionClass py-4 bg-dark bg-opacity-50 text-white">
+    <div class="container text-center">
+        <div class="row justify-content-center">
+            <!-- Profile Picture -->
+            <div class="col-12 d-flex justify-content-center">
+                <div class="rounded-circle border border-white shadow"
+                     style="width: 175px; height: 175px; background-image: url(@Introduction.Value.ProfilePictureUrl); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                </div>
+            </div>
+
+            <!-- Profile Text -->
+            <div class="col-md-8 mt-4">
+                <div class="fs-5 lh-base text-center">
+                    @MarkdownConverter.ToMarkupString(Introduction.Value.Description)
+                </div>
+
+                <!-- Social Links -->
+                <div class="mt-3">
+                    <SocialAccounts Social="@Social.Value"></SocialAccounts>
+                </div>
+
+                <!-- Donation Section (optional) -->
+                @if (SupportConfiguration.Value.ShowUnderIntroduction)
+                {
+                    <div class="mt-3">
+                        <DonationSection />
+                    </div>
+                }
+            </div>
         </div>
     </div>
 </div>
+
+
 @code {
     private string IntroductionClass => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
         ? "introduction-background"

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -174,13 +174,6 @@ code {
     top: 0.5rem;
 }
 
-#footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 2.5rem;
-}
-
 .barcode {
     text-decoration: none;
     font-weight: 400;
@@ -370,49 +363,6 @@ i {
 }
 /*#endregion */
 
-/*#region home */
-.introduction-background {
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background);
-}
-
-.introduction-container {
-	height: 438px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-template-rows: 0.5fr 1fr 1fr 1fr;
-	gap: 10px;
-	grid-template-areas:
-    ". . . . ."
-    ". . profile-picture . ."
-    ". profile-text profile-text profile-text ."
-    ". profile-text profile-text profile-text .";
-}
-
-.profile-picture {
-	grid-area: profile-picture;
-	width: 175px;
-	height: 175px;
-	border-radius: 50%;
-	border: white;
-	margin: auto;
-	box-shadow: 0 0 0 4px white;
-	background-image: var(--profile-image);
-	background-repeat: no-repeat;
-	background-position: center center;
-	background-size: cover;
-}
-
-.profile-text {
-	margin: auto;
-	grid-area: profile-text;
-	font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem);
-	line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
-	text-align: center;
-}
-/*#endregion */
-
 /*#region Components */
 .actions {
 	float:right;