Updated the card layout changes with image for UI kit Maui UG live.

MAUI/UIKit/MauiDesigns/about-us.md

@@ -0,0 +1,249 @@
+---
+layout: post
+title: Essential® UI Kit for .NET MAUI About-Us Designs | Syncfusion®
+description: Essential® UI Kit for .NET MAUI offers elegant XAML templates for About-Us apps, compatible with Android, iOS, and UWP platforms.
+platform: maui
+control: Essential<sup>®</sup> UI Kit for .NET MAUI
+documentation: ug
+---
+
+# Syncfusion<sup>®</sup> UI Kit for .NET MAUI About-Us Designs
+
+The Essential<sup>®</sup> UI Kit for .NET MAUI About Us offers a collection of **3 screens**, designed to streamline your development process and elevate your application’s user experience.
+
+## About Us	
+
+<style>
+.form-card {
+   flex: 0 0 calc(33.33% - 14px);
+   border: 1px solid #ddd;
+   border-radius: 12px;
+   overflow: hidden;
+   background: white;
+   box-sizing: border-box;
+   transition: 0.3s ease;
+}
+.form-card:hover {
+   transform: translateY(-4px);
+   box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+}
+.form-image {
+   width: 100%;
+   height: 100%;
+   object-fit: cover;
+   display: block;
+   cursor: pointer;
+   transition: 0.3s ease;
+}
+.form-image:hover {
+   transform: scale(1.02);
+}
+.form-content {
+   padding: 0px 12px 20px 16px;
+}
+.form-title {
+   margin-top: 0px;
+   margin: 0 0 10px;
+   font-size: 20px;
+   font-weight: 600;
+   color: #000000;
+}
+.form-link {
+   color: #0078D4;
+   text-decoration: none;
+}
+.form-description {
+   margin-top: 14px;
+   font-size: 13px;
+   color: #000000;
+   line-height: 1.6;
+}
+.source-icon {
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+   width: 36px;
+   height: 36px;
+   border-radius: 50%;
+   background: #f3f4f6;
+   color: #0078D4;
+   text-decoration: none;
+   transition: 0.3s ease;
+   margin-top: 12px;
+}
+.source-icon:hover {
+   background: #0078D4;
+   color: white;
+}
+/* Popup Modal */
+#imageModal {
+   display: none;
+   position: fixed;
+   z-index: 9999;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0,0,0,0.85);
+   justify-content: center;
+   align-items: center;
+   padding: 20px;
+   box-sizing: border-box;
+}
+#popupImage {
+   max-width: 90%;
+   max-height: 90%;
+   border-radius: 14px;
+   box-shadow: 0 10px 30px rgba(0,0,0,0.4);
+   animation: zoomIn 0.25s ease;
+}
+.close-popup {
+   position: absolute;
+   top: 20px;
+   right: 30px;
+   color: white;
+   font-size: 42px;
+   cursor: pointer;
+   font-weight: bold;
+}
+@keyframes zoomIn {
+   from {
+       transform: scale(0.9);
+       opacity: 0;
+   }
+   to {
+       transform: scale(1);
+       opacity: 1;
+   }
+}
+@media(max-width:900px) {
+   .form-card {
+       flex: 0 0 calc(50% - 10px);
+   }
+}
+@media(max-width:600px) {
+   .form-card {
+       flex: 0 0 100%;
+   }
+}
+</style>
+<div style="display:flex; flex-wrap:wrap; gap:20px; margin-top:20px;">
+<!-- Card 1 -->
+<div class="form-card">
+<div style="background:#eef2ec; text-align:center;">
+<img src="Images/AboutUsImages/simpleabout.webp"
+                loading="lazy"
+                decoding="async"
+                class="form-image"
+                onclick="openImage(this.src, event)">
+</div>
+<div class="form-content">
+<h3 class="form-title">Simple About Us
+<a href="https://github.com/syncfusion/essential-ui-kit-for-.net-maui/blob/master/EssentialMAUIUIKit/EssentialMAUIUIKit/Views/AboutUs/AboutUsSimplePage.xaml"
+              target="_blank"
+              class="source-icon"
+              title="View Source">
+<svg xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    fill="currentColor"
+                    viewBox="0 0 16 16">
+<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+                   0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
+                   -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07
+                   -1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
+                   0 0 .67-.21 2.2.82a7.56 7.56 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04
+                   2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
+                   0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
+                   0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8
+                   c0-4.42-3.58-8-8-8z"/>
+</svg>
+</a>
+</h3>
+<div class="form-description">
+               Present company overview with logo, version, and brief mission statement in a clean, minimal layout.
+</div>
+</div>
+</div>
+<!-- Card 2 -->
+<div class="form-card">
+<div style="background:#eef2ec; text-align:center;">
+<img src="Images/AboutUsImages/aboutuscards.webp"
+                loading="lazy"
+                decoding="async"
+                class="form-image"
+                onclick="openImage(this.src, event)">
+</div>
+<div class="form-content">
+<h3 class="form-title">About Us with Team Cards
+<a href="https://github.com/syncfusion/essential-ui-kit-for-.net-maui/blob/master/EssentialMAUIUIKit/EssentialMAUIUIKit/Views/AboutUs/AboutUsPageWithCards.xaml"
+              target="_blank"
+              class="source-icon"
+              title="View Source">
+<svg xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    fill="currentColor"
+                    viewBox="0 0 16 16">
+<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+                   0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
+                   -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07
+                   -1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
+                   0 0 .67-.21 2.2.82a7.56 7.56 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04
+                   2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
+                   0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
+                   0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8
+                   c0-4.42-3.58-8-8-8z"/>
+</svg>
+</a>
+</h3>
+<div class="form-description">
+               Learn about the company and meet the team through profile cards in a friendly, structured layout.
+</div>
+</div>
+</div>
+<!-- Card 3 -->
+<div class="form-card">
+<div style="background:#eef2ec; text-align:center;">
+<img src="Images/AboutUsImages/aboutusscrolling.webp"
+                loading="lazy"
+                decoding="async"
+                class="form-image"
+                onclick="openImage(this.src, event)">
+</div>
+<div class="form-content">
+<h3 class="form-title">About Us with Scrolling
+<a href="https://github.com/syncfusion/essential-ui-kit-for-.net-maui/blob/master/EssentialMAUIUIKit/EssentialMAUIUIKit/Views/AboutUs/AboutUsWithScrollPage.xaml"
+              target="_blank"
+              class="source-icon"
+              title="View Source">
+<svg xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    fill="currentColor"
+                    viewBox="0 0 16 16">
+<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
+                   0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
+                   -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07
+                   -1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
+                   0 0 .67-.21 2.2.82a7.56 7.56 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04
+                   2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15
+                   0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
+                   0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8
+                   c0-4.42-3.58-8-8-8z"/>
+</svg>
+</a>
+</h3>
+<div class="form-description">
+                Learn about the company and explore the full team through a smooth, scrollable layout.
+</div>
+</div>
+</div>
+</div>
+<!-- Popup Modal -->
+<div id="imageModal">
+<span class="close-popup" onclick="closeImage()">
+&times;
+</span>
+<img id="popupImage">
+</div>