@page "/ui-blocks-features"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Features
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1000px;">
    A Features UI Block is a design element used in websites and applications to highlight the key features, benefits, or capabilities of a product, service, or concept. It is typically structured to attract attention and provide clear, concise information, helping users understand why the highlighted elements are valuable.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase feature presentations with three-column layouts, icons of varying sizes (small inline icons, large top-positioned icons with backgrounds), centered layouts, descriptive headings and body text, and "Learn more" links for each feature.
</RadzenText>

<RadzenText Anchor="ui-blocks-features#features-with-small-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Features with small icons
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Example">
                <RadzenRow Style="max-width: 1440px" class="rz-mx-auto rz-p-0 rz-p-md-6" Gap="0" RowGap="0">
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="tenancy" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
                            <RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
                        </RadzenStack>
                        <RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                        <RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
                        </RadzenLink>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="database" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
                            <RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
                        </RadzenStack>
                        <RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                        <RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
                        </RadzenLink>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="filter_alt" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
                            <RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
                        </RadzenStack>
                        <RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                        <RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
                        </RadzenLink>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-features#features-with-large-icons-on-top" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Features with large icons on top
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Example">
                <RadzenRow class="rz-mx-auto rz-p-0 rz-p-md-6" Gap="0" RowGap="0" Style="max-width: 1440px">
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.5rem">
                            <RadzenIcon Icon="tenancy" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
                            <RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H4" />
                            <RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.5rem">
                            <RadzenIcon Icon="database" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
                            <RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H4" />
                            <RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                        <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.5rem">
                            <RadzenIcon Icon="filter_alt" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
                            <RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H4" />
                            <RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-features#centered-features" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Centered features
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Example">
                <RadzenRow Style="max-width: 1440px" class="rz-mx-auto rz-p-0 rz-p-md-6" Gap="0" RowGap="0">
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="tenancy" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="min-width: 80px; min-height: 80px; font-weight: 300; font-size: 40px"></RadzenIcon>
                            <RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="database" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="min-width: 80px; min-height: 80px; font-weight: 300; font-size: 40px"></RadzenIcon>
                            <RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
                        <RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
                            <RadzenIcon Icon="filter_alt" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="font-size: 40px; min-width: 80px; min-height: 80px; font-weight: 300"></RadzenIcon>
                            <RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
                            <RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
                        </RadzenStack>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>
