ساخت صفحه فرود (Landing Page) در بلیزور

ساخت صفحه فرود (Landing Page) در بلیزور

در این مقاله یاد می گیرید چگونه بخش‌های مختلف یک صفحه فرود (Landing Page) را در بلیزور ایجاد کنید- شامل نوار ناوبری، بخش اصلی (Hero Section)، بخش لوگوهای مشتریان، بخش ویژگی‌ها، بخش قیمت‌گذاری و یک بخش فرم.

در این مقاله، با برخی از بخش‌های رایج که برای ساخت صفحات فرود استفاده می‌شوند آشنا می‌شویم، هدف هر بخش را بررسی می‌کنیم و می‌بینیم چگونه می‌توانیم با کمک کنترل‌های Progress Telerik UI for Blazor آن‌ها را به‌سرعت پیاده‌سازی کنیم.
من در طراحی این نمونه از قالبی با مجوز MIT در مخزن awesome-landing-pages الهام گرفته‌ام.

صفحه فرود (Landing Page) چیست؟

صفحه فرود (Landing Page) یک صفحه وب است که با هدف تبدیل بازدیدکنندگان به سرنخ‌های فروش یا مشتری طراحی می‌شود.
معمولاً این نوع صفحات بر تشویق کاربر به انجام یک اقدام خاص تمرکز دارند و برای افزایش نرخ تبدیل، عناصری مانند بنرها، لینک به صفحات دیگر یا نوارهای جانبی غیرضروری از آن حذف می‌شوند.
یکی دیگر از ویژگی‌های مهم صفحات فرود این است که معمولاً شامل فرم تماس نیز هستند و ساختار کلی آن‌ها به‌گونه‌ای طراحی می‌شود که بیشترین تأثیر را در جذب و تبدیل کاربر داشته باشد.

چگونه در بلیزور صفحات فرود (Landing Page) بسازیم؟

برای اجرای عملی مواردی که در این مقاله توضیح داده شده است، می‌توانید یک پروژه جدید بلیزور ایجاد کنید یا یک کامپوننت جدید از نوع صفحه (Page) به پروژه موجود خود اضافه نمایید.
در این مثال، من پروژه را از ابتدا ایجاد می‌کنم و مراحل زیر را دنبال کرده‌ام:

1- یک پروژه جدید بسازید و قالب Blazor Web App را انتخاب کنید.

حالت رندر تعاملی (Interactive render mode) را روی Server تنظیم کنید و محل تعامل (Interactivity location) را روی Per page/component بگذارید.
گزینه‌ی مربوط به افزودن کامپوننت‌های نمونه (sample components) را نیز فعال بگذارید.

2- راهنمای نصب کامپوننت‌های Telerik Blazor را دنبال کنید تا آن‌ها را در پروژه خود ادغام کنید.

3- به مسیر فایل wwwroot/app.css بروید و استایل‌های زیر را در انتهای فایل اضافه کنید:

.landing-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
    background: #171B20;
    width: 100vw;
}

.top-row{
    padding-left: 0;
}

.top-row{
    background: #26b050;
}

.logo {
    width: 50px;
    height: 50px;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 16px;
    transition: color 0.3s;
}

    .nav-link:hover {
        color: #6c72e8;
    }

.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 5%;
    background: url('assets/images/background/dots.svg') center/cover no-repeat;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(24,27,32,0.9) 30%, rgba(0,0,0,0.25) 65%);
    z-index: -1;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(93deg, rgba(233,92,255,1) 12%, rgba(210,125,255,1) 49%, rgba(159,121,255,1) 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 18px;
    margin-top: 20px;
    max-width: 450px;
}

.hero-buttons {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.dashboard-container {
    margin-top: 40px;
}

.dashboard-image {
    width: 100%;
    max-width: 950px;
    min-height: 450px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.section {
    padding: 60px 5%;
    text-align: center;
}

.pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pricing-card {
    width: 380px;
    margin: 20px;
    padding: 20px;
    background-color: #1d2127;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.footer {
    display: flex;
    justify-content: space-around;
    padding: 40px 5%;
    background-color: #111;
}

.footer-column {
    max-width: 250px;
}

    .footer-column h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

.footer-link {
    color: white;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s;
}

    .footer-link:hover {
        color: #483cf4;
    }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.item {
    background: #121418;
    color: rgba(255, 255, 255, .8);
    font: 36px/200px sans-serif;
    text-align: center;
    margin: 0;
    border: none;
    position: absolute;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    border-width: 0px;
}

.k-scrollview {
    margin: 0 auto;
    border: none;
    border-width: 0px;
}

.carousel-style {
    border: none !important;
}

    .carousel-style .k-scrollview-nav .k-link {
        background-color: #4B0082;
    }
        .carousel-style .k-scrollview-nav .k-link.k-primary {
            background-color: #3F51B5;
        }
.k-form-label,
.k-form-hint,
.k-label {
    color: #ffffff !important;
}

.k-input,
.k-textbox,
.k-dropdown,
.k-multiselect {
    color: #ffffff !important;
}

.k-validation-message {
    color: #ffffff !important;
}

4- در همان فایل استایل (stylesheet)، استایل‌های زیر را ویرایش کنید:
 

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #181B20;
    color: white;
}
...

.content {
    font-family: "Poppins", sans-serif;
}

5 -  برای استفاده از فونت **Poppins**، به فایل **App.razor** بروید و خط زیر را در بخش **Head** اضافه کنید:

<head>
    ...
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <ImportMap />
    ...
</head>

با انجام مراحل قبلی، حالا آماده‌ایم تا صفحه فرود (Landing Page) را ایجاد کنیم.

ایجاد یک کامپوننت از نوع صفحه (Page-Type Component)

اولین قدم این است که یک کامپوننت Razor جدید از نوع صفحه بسازیم تا محتوای صفحه فرود را در آن قرار دهیم.
برای این کار، روی پوشه Components کلیک راست کنید و یک Razor Component جدید اضافه کنید.
می‌توانید هر نامی که خواستید برای آن انتخاب کنید؛ در این مثال، من نام LandingPage.razor را انتخاب کرده‌ام.

سپس این کامپوننت را با افزودن دستور @page ویرایش می‌کنیم تا به یک صفحه تبدیل شود و آن را به عنوان مسیر اولیه (Initial Route) برنامه تنظیم می‌کنیم.
در نهایت، حالت رندر (rendermode) آن را روی InteractiveServer قرار می‌دهیم:

@page "/"
@rendermode InteractiveServer

<h3>LandingPage</h3>

@code {

}

برای جلوگیری از بروز مشکل در مسیرها (Routes)، باید مقدار دستور page@ در صفحه Home.razor را به مقدار دیگری تغییر دهید، مثلاً به شکل زیر:

@page "/Home"

اگر در این مرحله برنامه را اجرا کنید، صفحه‌ای که تازه ساخته‌اید روی صفحه نمایش داده خواهد شد.

پیش‌تر گفتیم که یک صفحه فرود نباید عناصر حواس‌پرت‌کننده داشته باشد، بنابراین باید منوی ناوبری (Navigation Menu) را از برنامه فعلی حذف کنیم.

ایجاد یک Layout بدون منوی ناوبری برنامه

برای حذف منوی ناوبری، باید یک فایل Layout جدید ایجاد کنیم که تعیین کند برنامه چگونه رندر شود.
در حال حاضر، یک Layout از قبل در مسیر
Components/Layout/MainLayout.razor
تعریف شده است که اگر آن را بررسی کنید، شامل عناصری مانند نوار کناری (Sidebar) می‌باشد.

برای این منظور، در پوشه Layout یک کامپوننت Razor جدید با نام EmptyLayout.razor بسازید و محتوای زیر را در آن قرار دهید:

با این کار، از دستور @Body برای نمایش محتوای صفحه استفاده می‌کنیم و در عین حال عناصری مانند نوار کناری (Sidebar) را حذف می‌کنیم.

@inherits LayoutComponentBase

<TelerikRootComponent>
    <main>
        <article class="content">
            @Body
        </article>
    </main>
</TelerikRootComponent>

گام بعدی این است که به فایل LandingPage.razor برویم و با استفاده از دستور layout@ مشخص کنیم که می‌خواهیم از Layout جدید استفاده کنیم:

@using LandingPageBlazor.Components.Layout

@page "/"
@layout EmptyLayout

<h3>LandingPage</h3>

@code {

}

وقتی برنامه را اجرا کنید، مشاهده خواهید کرد که صفحه اکنون تمام فضای موجود را اشغال کرده است:
 

حالا بیایید ببینیم چطور می‌توان عناصر مختلف را به صفحه فرود اضافه کرد.

ایجاد بخش سربرگ (Header) برای صفحه فرود

اولین عنصری که به صفحه فرود اضافه می‌کنیم، سربرگ (Header) است که نقش یک منوی ناوبری را دارد.
البته این منو همان منوی ناوبری اصلی برنامه نیست، بلکه منویی است که به کاربر اجازه می‌دهد به‌سرعت بین بخش‌های مختلف صفحه حرکت کند.
این قابلیت زمانی مفید است که کاربر قبلاً از صفحه فرود بازدید کرده و اکنون می‌خواهد مستقیماً به بخشی خاص (مثلاً بخش پرداخت) برود؛ بنابراین باید این کار را تا حد امکان ساده کنیم.

برای ایجاد این بخش، می‌توانیم از کنترل TelerikAppBar استفاده کنیم که به ما امکان می‌دهد به‌سرعت یک منوی بالایی (Top Menu) ایجاد کنیم، همراه با فاصله‌گذاری بین آیتم‌ها، همان‌طور که در مثال زیر مشاهده می‌کنید:
 

<TelerikAppBar ThemeColor="dark">
    <AppBarSection>
        <img src="assets/logo/logo.png" alt="Logo" class="logo" />
    </AppBarSection>
    <AppBarSpacer></AppBarSpacer>

    <AppBarSection>
        <a href="#about" class="nav-link">About Us</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#pricing" class="nav-link">Pricing</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#features" class="nav-link">Features</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <a href="#company" class="nav-link">Company</a>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <TelerikButton OnClick="@(() => {})">Get Started <i class="bi bi-arrow-right"></i></TelerikButton>
    </AppBarSection>
    <AppBarSeparator></AppBarSeparator>
</TelerikAppBar>

در کد بالا، از کامپوننت TelerikAppBar استفاده کرده‌ایم و با کمک تگ AppBarSection بخش‌های مختلفی را به آن اضافه کرده‌ایم.
این کار به ما اجازه می‌دهد تا کد HTML دلخواه خود را همراه با محتوای موردنظر در هر بخش قرار دهیم.

همان‌طور که می‌بینید، در این مثال من از لینک‌ها و حتی یک TelerikButton استفاده کرده‌ام تا در صورت نیاز بتواند یک متد سی‌شارپ (C#) را اجرا کند.
همچنین تگ‌های AppBarSpacer و AppBarSeparator این امکان را فراهم می‌کنند تا بین عناصر داخل TelerikAppBar فاصله ایجاد کنیم.
در نهایت، طراحی حاصل به شکل زیر خواهد بود:
 

ایجاد بخش Hero (بخش اصلی)

اولین بخشی از محتوا که کاربر با آن روبه‌رو می‌شود، بخش Hero است.
در این بخش معمولاً ویژگی‌های اصلی یک محصول نمایش داده می‌شوند، دکمه‌های اقدام سریع (Call to Action) اضافه می‌گردند و موارد مشابه.

در مثال ما، قصد داریم یک اسلایدر (Slider) اضافه کنیم که تصاویر محصول را نمایش دهد.
برای این کار از کنترل TelerikCarousel استفاده می‌کنیم که راهی ساده و سریع برای پیاده‌سازی کاروسل (Carousel) نه‌فقط برای تصاویر، بلکه برای هر نوع محتوای سفارشی دیگر فراهم می‌کند.

کنترل TelerikCarousel با تعریف یک منبع داده (Data Source) کار می‌کند که شامل مجموعه‌ای از ویژگی‌ها است و در کاروسل نمایش داده می‌شوند.
در این مثال، چون فقط نیاز به نمایش تصاویر داریم، یک کلاس با ویژگی‌های ID و ImagePath ایجاد می‌کنیم و سپس یک فهرست شامل پنج شیء از این مدل می‌سازیم:

@code {
    public IEnumerable<CarouselModel> CarouselData = Enumerable.Range(1, 5).Select(x => new CarouselModel
        {
            ID = x,
            ImagePath = "assets/images/home/dashboard.png"
        });

    public class CarouselModel
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

بخش Hero به شکل زیر نمایش داده می‌شود:
 

<!-- HERO SECTION -->
<section id="hero-section" class="hero-section">
    <div class="hero-bg"></div>
    <h1 class="hero-title">
        AI Powered<br />Coding Simplified
    </h1>
    <p class="hero-subtitle">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error adipisci corrupti accusamus reiciendis similique assumenda nostrum fuga dicta vitae ipsum.
    </p>
    <div class="hero-buttons">
        <TelerikButton OnClick="@(() => {})" Size="lg" ThemeColor="info">Get Started</TelerikButton>
        <TelerikButton OnClick="@(() => {})" Size="lg" Class="secondary" ThemeColor="light">Learn More</TelerikButton>
    </div>
    <div class="dashboard-container">
        <TelerikCarousel Data="@CarouselData" Width="950px" Height="450px" Class="carousel-style">
            <Template>
                <div class="item">
                    <img src="assets/images/home/dashboard.png" alt="Dashboard" class="dashboard-image" />
                </div>
            </Template>
        </TelerikCarousel>
    </div>
</section>

وقتی برنامه را اجرا کنید، مشاهده خواهید کرد که اسلایدر تصاویر درون برنامه نمایش داده می‌شود.

حالا بیایید ببینیم چگونه می‌توان یک بخش ویژگی‌ها (Features Section) ایجاد کرد.

افزودن بخش لوگوی برندها

یکی از عواملی که باعث افزایش اعتماد کاربران بالقوه به یک برنامه می‌شود، نمایش شرکت‌هایی است که از محصولات آن استفاده کرده‌اند.
به همین دلیل، در صفحه فرود خود بخشی ویژه برای نمایش لوگوهای برخی از شرکت‌ها اضافه می‌کنیم و با افزودن کمی تعامل (Interactivity)، آن را به بخشی پویا و جذاب تبدیل می‌نماییم.

برای این منظور، از کتابخانه Telerik UI، کامپوننت Blazor Animation Container را استفاده خواهیم کرد.
این کامپوننت به ما امکان می‌دهد تا تنها با قرار دادن بخش مورد نظر از کد HTML درون آن، افکت‌های محو شدن (Fade-in / Fade-out) را به‌سادگی اضافه کنیم؛ همان‌طور که در مثال زیر نشان داده شده است:

<!-- Trusted Brands Section -->
<section class="section" id="mySection">
    <h2>Trusted by Brands You Know</h2>
    <div style="overflow: hidden; white-space: nowrap; max-width: 800px; margin: 0 auto;">
        <TelerikAnimationContainer @ref="animationContainer"
                                   AnimationType="AnimationType.ZoomIn"
                                   AnimationDuration="1000"
                                   Width="800px">

            <div style="display: inline-block; animation: scroll 10s linear infinite;">
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:50px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
                <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/progress-blog-default-logo-transparent.png" alt="Progress" style="height:50px; width:150px; margin: 0 20px;" />
            </div>

        </TelerikAnimationContainer>
    </div>
</section>

در کد بالا مشاهده می‌کنید که مجموعه‌ای از تصاویر لوگو (که نمایانگر لوگوی شرکت‌ها هستند) درون یک div قرار گرفته‌اند.
علاوه بر این، کنترل TelerikAnimationContainer را با ویژگی‌هایی مانند AnimationType، AnimationDuration، Width و @ref پیکربندی کرده‌ایم.
ویژگی @ref برای کنترل افکت انیمیشن استفاده می‌شود.
این تنظیمات لازم است، زیرا TelerikAnimationContainer را می‌توان برای نمایش انواع مختلفی از محتوا، بسته به نیاز، مجدداً مورد استفاده قرار داد.

برای تکمیل کد Razor، در بخش کد سی‌شارپ (code section) یک ارجاع به کنترل اضافه می‌کنیم و مشخص می‌کنیم که انیمیشن باید به‌محض بارگذاری صفحه (Page Load) آغاز شود:

@code {

    private TelerikAnimationContainer animationContainer;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {            
             await animationContainer.ShowAsync();
        }
    }
    ...
}

با این حال، کد بالا در مورد استفاده‌ی خاص ما یک مشکل دارد.
مشکل اینجاست که اگر کاربر ابتدا فقط منوی ناوبری و بخش Hero را مشاهده کند، ممکن است انیمیشن لوگوها را از دست بدهد، چون انیمیشن بلافاصله پس از رندر شدن صفحه اجرا می‌شود.

در حالت ایده‌آل، باید انیمیشن فقط زمانی اجرا شود که کاربر به آن بخش اسکرول کند.
برای رفع این مشکل می‌توانیم مراحل زیر را انجام دهیم:

1- به فایل App.razor بروید و در انتهای تگ <body>، یک تگ <script> با محتوای زیر اضافه کنید:

<body>
    ...
    <script>
        window.observeElement = (elementId, dotNetHelper) => {
            const element = document.getElementById(elementId);
            if (!element) {
                console.error("Element with id: " + elementId + " was not found");
                return;
            }
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        dotNetHelper.invokeMethodAsync('OnSectionVisible');
                        observer.unobserve(entry.target);
                    }
                });
            });
            observer.observe(element);
        };
    </script>
</body>

2- در فایل LandingPage.razor، دستور زیر را اضافه کنید:

@inject IJSRuntime JS

3- در نهایت، در بخش کد فایل LandingPage.razor، متد OnAfterRenderAsync را ویرایش کرده و متد OnSectionVisible را اضافه کنید:
 

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        // await animationContainer.ShowAsync();
        await JS.InvokeVoidAsync("observeElement", "mySection", DotNetObjectReference.Create(this));

    }
}

[JSInvokable]
public async Task OnSectionVisible()
{        
    await animationContainer.ShowAsync();
}

کد بالا باعث می‌شود انیمیشن فقط زمانی اجرا شود که کاربر به بخش مربوطه اسکرول کند، همان‌طور که در تصویر زیر مشاهده می‌کنید:
 

حالا بیایید ببینیم چگونه می‌توان بخش ویژگی‌ها (Features Section) را نمایش داد.

ایجاد بخش ویژگی‌ها (Features Section)

بخشی که در ادامه ایجاد می‌کنیم، بخش ویژگی‌های محصول (Features Section) است.
این بخش برای نمایش تمام مزایا و برتری‌های محصول شما که باعث تمایزتان از رقبا می‌شود، کاربرد دارد.
در این قسمت می‌توانید محتوایی مانند توضیح قابلیت‌ها، ویژگی‌های فنی، مزایا و هر اطلاعات دیگری قرار دهید که به مشتریان کمک می‌کند تا راهکار شما را انتخاب کنند.

برای پیاده‌سازی این بخش، به کامپوننتی انعطاف‌پذیر نیاز داریم که بتواند محتوا را در چندین ردیف و ستون تقسیم کند تا چیدمان مورد نظر را ایجاد نماید.
خوشبختانه در مجموعه کامپوننت‌های Telerik، یک کنترل به نام Blazor GridLayout وجود دارد که به ما امکان می‌دهد محتوا را در قالب شبکه‌ای شامل ردیف‌ها و ستون‌ها سازمان‌دهی کنیم.

برای استفاده از آن، کافی است کامپوننت TelerikGridLayout را تعریف کنید، سپس ردیف‌ها (GridLayoutRows) و ستون‌ها (GridLayoutColumns) را مشخص کرده و عناصر را در موقعیت مناسب خود قرار دهید.
در ادامه یک نمونه از نحوه استفاده آن آورده شده است:

<!-- Features Section -->
<section class="section" id="features" style="width: 1420px; margin: 0 auto;">
    <TelerikGridLayout ColumnSpacing="120px" VerticalAlign="GridLayoutVerticalAlign.Center">
        <GridLayoutColumns>
            <GridLayoutColumn Width="850px"></GridLayoutColumn>
            <GridLayoutColumn Width="450px"></GridLayoutColumn>
        </GridLayoutColumns>
        <GridLayoutRows>
            <GridLayoutRow Height="auto"></GridLayoutRow>
        </GridLayoutRows>
        <GridLayoutItems>
            <GridLayoutItem Column="1" Row="1">
                <img src="assets/images/home/coding.png" alt="Coding" style="width: 100%; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);" />
            </GridLayoutItem>
            <GridLayoutItem Column="2" Row="1">
                <h3>Streamlined Coding</h3>
                <div>
                    <h4><i class="bi bi-check-all"></i> AI Powered</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
                <div>
                    <h4><i class="bi bi-check-all"></i> Locally Run</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </GridLayoutItem>
        </GridLayoutItems>
    </TelerikGridLayout>
</section>

کد بالا محتوا را در قالب دو ستون و یک ردیف نمایش می‌دهد:

حالا بیایید ببینیم چگونه می‌توان بخشی برای نمایش گزینه‌های مختلف پرداخت ایجاد کرد.

ایجاد کارت‌هایی با جزئیات طرح‌های پرداخت (Payment Plans)

یکی از بخش‌هایی که معمولاً در صفحات فرود استفاده می‌شود، بخش گزینه‌های پرداخت است.
به یاد داشته باشید هدف ما تبدیل بازدیدکننده به مشتری است، بنابراین باید تمام اطلاعات لازم درباره محصول از جمله جزئیات پرداخت را در اختیار او قرار دهیم.

برای این کار می‌توانیم از کامپوننت Blazor Card استفاده کنیم، که امکان تعریف راحت محتوای هر کارت را در بخش‌های CardHeader (سربرگ کارت)، CardBody (بدنه کارت) و CardFooter (پاورقی کارت) فراهم می‌کند.
از مزایای این کامپوننت این است که می‌توان محتوای کارت را با کد HTML ترکیب کرد یا سایر کامپوننت‌ها را درون آن قرار داد، همان‌طور که در مثال زیر نشان داده شده است:

<!-- Pricing Section -->
<section class="section" id="pricing">
    <h3>Simple Pricing</h3>
    <div class="pricing-cards">
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$9</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>        
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$19</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>
        <TelerikCard Class="pricing-card">
            <CardHeader>
                <h3>
                    <span style="font-size: 32px; font-weight: bold;">$49</span>
                    <span style="font-size: 24px; color: #ccc;">/mo</span>
                </h3>
            </CardHeader>
            <CardBody>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!
                </p>
                <hr />
                <ul style="list-style: none; padding: 0;">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
            </CardBody>
            <CardFooter>                
                <TelerikButton OnClick="@(() => {})">Get Now</TelerikButton>
            </CardFooter>
        </TelerikCard>
    </div>
</section>

کد بالا سه کارت شامل گزینه‌های اشتراک را نمایش می‌دهد که ظاهر بسیار زیبایی دارند:

حالا بیایید یک فرم تماس به صفحه اضافه کنیم.

ایجاد فرم تماس (Contact Form)

آخرین بخشی که به صفحه اضافه می‌کنیم، فرم تماس است تا مشتریان بالقوه بتوانند در صورت داشتن سؤال‌های بیشتر با ما ارتباط بگیرند.
برای این کار از کامپوننت Blazor Form استفاده می‌کنیم که امکان ساخت انواع فرم‌ها را به‌سادگی فراهم می‌کند.

ابتدا مدل داده (Data Model) را تعریف می‌کنیم تا فرم به آن متصل شود و اطلاعات موردنیاز را از کاربر جمع‌آوری کند. سپس یک نمونه (Instance) از مدل و یک متد برای پردازش ارسال اطلاعات (Form Submission) ایجاد خواهیم کرد:

private Contact contact = new Contact();

public class Contact
{
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required")]
    [EmailAddress(ErrorMessage = "Enter a valid email address")]
    public string Email { get; set; }

    // Optional field
    public string Phone { get; set; }

    [Required(ErrorMessage = "Subject is required")]
    public string Subject { get; set; }

    [Required(ErrorMessage = "Message is required")]
    public string Message { get; set; }
}

private void HandleSubmit()
{
}

سپس، در بخش Razor کد، فرم را با استفاده از TelerikForm تعریف می‌کنیم.
در این فرم، FormItems‌ها بر اساس نوع داده ورودی تنظیم شده‌اند و یک TelerikButton نیز برای مدیریت ارسال اطلاعات (Submit) اضافه می‌کنیم، همان‌طور که در مثال زیر نشان داده شده است:

<section class="section" id="contact" style="display: flex; flex-direction: column; align-items: center;">
    <h3>Contact Us</h3>
    <div>
        <TelerikForm Model="@contact" Width="500px" OnSubmit="@HandleSubmit">
            <FormValidation>
                <DataAnnotationsValidator />
            </FormValidation>
            <FormItems>
                <FormItem Field="@nameof(Contact.Name)" LabelText="Name" Hint="Enter your name" />
                <FormItem Field="@nameof(Contact.Email)" LabelText="Email" Hint="Enter your email address" />
                <FormItem Field="@nameof(Contact.Phone)" LabelText="Phone" Hint="Enter your phone number (optional)" />
                <FormItem Field="@nameof(Contact.Subject)" LabelText="Subject" Hint="Enter the subject of your inquiry" />
                <FormItem Field="@nameof(Contact.Message)" LabelText="Message" Hint="Enter your inquiry or comment" EditorType="@FormEditorType.TextArea" />
            </FormItems>
            <FormButtons>
                <TelerikButton ButtonType="ButtonType.Submit">
                    Send
                </TelerikButton>
            </FormButtons>
        </TelerikForm>
    </div>
</section>

نتیجه اجرای کد به‌روزشده به شکل زیر است:
 

همان‌طور که مشاهده می‌کنید، پس از اجرای برنامه، یک فرم زیبا در اختیار داریم که می‌تواند برای دریافت سؤال‌ها یا نظرات کاربران مورد استفاده قرار گیرد.

جمع‌بندی

در طول این مقاله، یاد گرفتیم چگونه بخش‌های مختلف یک صفحه فرود (Landing Page) را ایجاد کنیم؛ از جمله نوار ناوبری، بخش اصلی (Hero Section)، بخش لوگوی مشتریان، بخش ویژگی‌ها (Features)، بخش قیمت‌گذاری (Pricing) و بخش فرم تماس.
همچنین دیدیم که چگونه می‌توان با استفاده از کنترل‌های Telerik UI for Blazor، این بخش‌ها را به‌سرعت و با ساختاری حرفه‌ای پیاده‌سازی کرد.

اکنون نوبت شماست تا ایده‌های بیشتری را بررسی کنید و بهترین صفحات فرود را برای پروژه‌های خود بسازید.