261 lines
11 KiB
Plaintext
261 lines
11 KiB
Plaintext
@page "/"
|
|
|
|
@inherits HomeComponent
|
|
|
|
<PageTitle>Home</PageTitle>
|
|
|
|
<TelerikMediaQuery Media="(max-width: 576px)" OnChange="@OnExtraSmallChange"></TelerikMediaQuery>
|
|
<TelerikMediaQuery Media="(min-width: 577px) and (max-width: 768px)" OnChange="@OnSmallChange"></TelerikMediaQuery>
|
|
<TelerikMediaQuery Media="(min-width: 769px) and (max-width: 992px)" OnChange="@OnMediumChange"></TelerikMediaQuery>
|
|
<TelerikMediaQuery Media="(min-width: 993px) and (max-width: 1200px)" OnChange="@OnLargeChange"></TelerikMediaQuery>
|
|
<TelerikMediaQuery Media="(min-width: 1201px)" OnChange="@OnExtraLargeChange"></TelerikMediaQuery>
|
|
|
|
<!-- block-hero-slider -->
|
|
<div class="block block-slider block-slider--featured">
|
|
<div class="container container--max--xl">
|
|
<div class="slider slider--with-dots">
|
|
<TelerikCarousel Width="100%"
|
|
Height="500px"
|
|
Arrows="true"
|
|
Pageable="true"
|
|
LoopPages="true"
|
|
AutomaticPageChange="true"
|
|
AutomaticPageChangeInterval="3000"
|
|
Data="@Slides">
|
|
<Template>
|
|
<div class="slide">
|
|
@if (!string.IsNullOrWhiteSpace(context.GoToUrl))
|
|
{
|
|
<a href="@context.GoToUrl" class="slide-link">
|
|
<picture>
|
|
<source media="(min-width: 768px)"
|
|
srcset='@($"images/slides/slide{context.Number}.jpg 1x, images/slides/slide{context.Number}@2x.jpg 2x")'>
|
|
<source media="(max-width: 767px)"
|
|
srcset="images/slides/slide@(context.Number)-portrait.jpg 1x,
|
|
images/slides/slide@(context.Number)-portrait@2x.jpg 2x">
|
|
<img src="images/slides/slide@(context.Number).jpg"
|
|
alt="@(!string.IsNullOrWhiteSpace(context.AltText) ? context.AltText : $"Slide {context.Number}")"
|
|
style="width: 100%; height: 100%; object-fit: cover;" />
|
|
</picture>
|
|
</a>
|
|
}
|
|
else
|
|
{
|
|
<picture>
|
|
<source media="(min-width: 768px)"
|
|
srcset='@($"images/slides/slide{context.Number}.jpg 1x, images/slides/slide{context.Number}@2x.jpg 2x")'>
|
|
<source media="(max-width: 767px)"
|
|
srcset="images/slides/slide@(context.Number)-portrait.jpg 1x,
|
|
images/slides/slide@(context.Number)-portrait@2x.jpg 2x">
|
|
<img src="images/slides/slide@(context.Number).jpg"
|
|
alt="@(!string.IsNullOrWhiteSpace(context.AltText) ? context.AltText : $"Slide {context.Number}")"
|
|
style="width: 100%; height: 100%; object-fit: cover;" />
|
|
</picture>
|
|
}
|
|
|
|
@if (!string.IsNullOrWhiteSpace(context.Text))
|
|
{
|
|
<div class=@($"slide-text {context.TextPosition} {context.TextWidth}")>
|
|
@if (!string.IsNullOrWhiteSpace(context.Text))
|
|
{
|
|
<h2>@context.Text</h2>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</Template>
|
|
</TelerikCarousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- block-hero-slider / end -->
|
|
|
|
<!-- block-featured-products -->
|
|
@if (IsFeaturedProductsLoading)
|
|
{
|
|
<div class="block block-products-carousel featured-products-block featured-products-block--loading">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Featured Products</h2>
|
|
</div>
|
|
<div class="block-products-carousel__slider slider slider--with-arrows">
|
|
<div class="product-group" style="display: flex; flex-wrap: wrap; width: 100%;">
|
|
@for (var i = 0; i < NumberOfFeaturedProductCardsPerGroup; i++)
|
|
{
|
|
<div class="product-wrapper" style="@CalculateWidthOfFeaturedProductCard()">
|
|
<TelerikSkeleton Width="100%" Height="260px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (FeaturedProductsHaveItemsToShow)
|
|
{
|
|
<div class="block block-products-carousel featured-products-block">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Featured Products</h2>
|
|
</div>
|
|
<div class="block-products-carousel__slider slider slider--with-arrows">
|
|
<TelerikCarousel Width="100%"
|
|
Height="350px"
|
|
Arrows="true"
|
|
Pageable="false"
|
|
LoopPages="true"
|
|
AutomaticPageChange="false"
|
|
Data="@GetProductCardGroups()"
|
|
Class="owl-carousel product-carousel-custom">
|
|
<Template>
|
|
<div class="product-group" style="display: flex; flex-wrap: wrap; width: 100%;">
|
|
@foreach (var product in context)
|
|
{
|
|
<div class="product-wrapper" style="@CalculateWidthOfFeaturedProductCard()">
|
|
<ProductCard Product="product"
|
|
CssClass="catalog-card catalog-card--layout--grid" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</Template>
|
|
</TelerikCarousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="block block-products-carousel featured-products-block featured-products-block--empty">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Featured Products</h2>
|
|
</div>
|
|
<div class="alert alert-info mb-0">
|
|
Featured products will appear here once items are available.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
<!-- block-featured-products / end -->
|
|
|
|
<!-- block-collections -->
|
|
<div class="block block-collections">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Latest Collections</h2>
|
|
</div>
|
|
<div class="row g-custom-30">
|
|
<div class="col-12 col-md-6 col-lg-5">
|
|
<div class="block-collections__item block-collections__item--start">
|
|
<div class="block-collections__info block-collections__info--top-start">
|
|
<div class="block-collections__name">Smart Building Solutions</div>
|
|
<div class="block-collections__description">
|
|
Complete intelligent building automation systems featuring advanced lighting controls,
|
|
occupancy sensors, and energy management solutions for modern commercial spaces.
|
|
</div>
|
|
<div class="block-collections__button">
|
|
<a href="/catalog/smart-building" class="btn btn-primary">Explore Collection</a>
|
|
</div>
|
|
</div>
|
|
<div class="block-collections__image">
|
|
<a href="/catalog/smart-building">
|
|
<picture>
|
|
<source media="(min-width: 992px)" srcset="images/collections/collection1-lg.jpg 1x,
|
|
images/collections/collection1-lg@2x.jpg 2x">
|
|
<source media="(max-width: 991px)" srcset="images/collections/collection1.jpg 1x,
|
|
images/collections/collection1@2x.jpg 2x">
|
|
<img src="images/collections/collection1-lg.jpg" alt="Smart Building Solutions Collection">
|
|
</picture>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-7 pt-5 pt-md-0">
|
|
<div class="block-collections__item block-collections__item--end">
|
|
<div class="block-collections__image">
|
|
<a href="/catalog/prefabricated-electrical-assemblies/pre-assembled-panels">
|
|
<picture>
|
|
<source media="(min-width: 992px)" srcset="images/collections/collection2-lg.jpg 1x,
|
|
images/collections/collection2-lg@2x.jpg 2x">
|
|
<source media="(max-width: 991px)" srcset="images/collections/collection2.jpg 1x,
|
|
images/collections/collection2@2x.jpg 2x">
|
|
<img src="images/collections/collection2-lg.jpg" alt="Pre-Assembled Panel Collection">
|
|
</picture>
|
|
</a>
|
|
</div>
|
|
<div class="block-collections__info block-collections__info--bottom-end">
|
|
<div class="block-collections__name">Pre-Assembled Panel Systems</div>
|
|
<div class="block-collections__description">
|
|
Ready-to-install electrical panels and distribution assemblies, factory-tested and certified.
|
|
Reduce installation time by up to 70% with our professionally pre-wired solutions designed
|
|
for commercial and industrial applications.
|
|
</div>
|
|
<div class="block-collections__button">
|
|
<a href="/catalog/prefabricated-electrical-assemblies/pre-assembled-panels" class="btn btn-primary">View Panels</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- block-collections / end -->
|
|
|
|
<!-- block-shop-categories -->
|
|
@if (AreCategoriesLoading)
|
|
{
|
|
<div class="block block-shop-categories home-categories-block home-categories-block--loading">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
|
|
</div>
|
|
<div class="categories-list">
|
|
@for (var i = 0; i < NumberOfCategorySkeletons; i++)
|
|
{
|
|
<div class="card category-card">
|
|
<div class="category-card__image">
|
|
<TelerikSkeleton Width="100%" Height="180px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Rectangle" />
|
|
</div>
|
|
<div class="category-card__name">
|
|
<TelerikSkeleton Width="70%" Height="20px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Text" />
|
|
</div>
|
|
<div class="category-card__products">
|
|
<TelerikSkeleton Width="50%" Height="16px" ShapeType="@Telerik.Blazor.SkeletonShapeType.Text" />
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else if (CategoriesHaveItemsToShow)
|
|
{
|
|
<div class="block block-shop-categories home-categories-block">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
|
|
</div>
|
|
<div class="categories-list">
|
|
@foreach (var category in LatestCategories)
|
|
{
|
|
<CategoryCard Category="category" />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="block block-shop-categories home-categories-block home-categories-block--empty">
|
|
<div class="container container--max--xl">
|
|
<div class="block__title">
|
|
<h2 class="decor-header decor-header--align--center">Latest Categories</h2>
|
|
</div>
|
|
<div class="alert alert-info mb-0">
|
|
Categories will appear here once items are available.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
<!-- block-shop-categories / end -->
|