216 lines
9.7 KiB
Plaintext
216 lines
9.7 KiB
Plaintext
|
@{
|
||
|
|
ViewData["Title"] = "Home";
|
||
|
|
}
|
||
|
|
|
||
|
|
@if (ViewBag.Sections != null && ViewBag.Sections.Count > 0)
|
||
|
|
{
|
||
|
|
@foreach (var sect in ViewBag.Sections)
|
||
|
|
{
|
||
|
|
@if (sect.SectionType == "hero")
|
||
|
|
{
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-content">
|
||
|
|
<h2>@sect.Title</h2>
|
||
|
|
@if (!string.IsNullOrEmpty(sect.Subtitle))
|
||
|
|
{
|
||
|
|
<p>@sect.Subtitle</p>
|
||
|
|
}
|
||
|
|
@if (!string.IsNullOrEmpty(sect.Content))
|
||
|
|
{
|
||
|
|
<div class="hero-description">
|
||
|
|
@Html.Raw(sect.Content)
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
|
||
|
|
{
|
||
|
|
<a href="@sect.ButtonUrl" class="btn btn-primary">@sect.ButtonText</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ImageUrl))
|
||
|
|
{
|
||
|
|
<div class="hero-image">
|
||
|
|
<img src="@sect.ImageUrl" alt="@sect.Title" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
else if (sect.SectionType == "inspiration")
|
||
|
|
{
|
||
|
|
<!-- Inspiration Section -->
|
||
|
|
<section class="inspiration">
|
||
|
|
<div class="container">
|
||
|
|
<h2>@sect.Title</h2>
|
||
|
|
<div class="inspiration-content">
|
||
|
|
<div class="inspiration-text">
|
||
|
|
@Html.Raw(sect.Content)
|
||
|
|
</div>
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ImageUrl))
|
||
|
|
{
|
||
|
|
<div class="inspiration-image">
|
||
|
|
<img src="@sect.ImageUrl" alt="@sect.Title" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
|
||
|
|
{
|
||
|
|
<a href="@sect.ButtonUrl" class="btn btn-secondary">@sect.ButtonText</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
else if (sect.SectionType == "promotion")
|
||
|
|
{
|
||
|
|
<!-- Promotion Section -->
|
||
|
|
<section class="promotion" id="promotion">
|
||
|
|
<div class="container">
|
||
|
|
@Html.Raw(sect.Content)
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
else if (sect.SectionType == "collection")
|
||
|
|
{
|
||
|
|
<!-- Collection Section -->
|
||
|
|
<section class="collection">
|
||
|
|
<div class="container">
|
||
|
|
<h2>@sect.Title</h2>
|
||
|
|
@if (!string.IsNullOrEmpty(sect.Subtitle))
|
||
|
|
{
|
||
|
|
<p class="section-subtitle">@sect.Subtitle</p>
|
||
|
|
}
|
||
|
|
@Html.Raw(sect.Content)
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
|
||
|
|
{
|
||
|
|
<a href="@sect.ButtonUrl" class="btn btn-secondary">@sect.ButtonText</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
else if (sect.SectionType == "custom")
|
||
|
|
{
|
||
|
|
<!-- Custom Section -->
|
||
|
|
<section class="custom-section">
|
||
|
|
<div class="container">
|
||
|
|
@if (!string.IsNullOrEmpty(sect.Title))
|
||
|
|
{
|
||
|
|
<h2>@sect.Title</h2>
|
||
|
|
}
|
||
|
|
@if (!string.IsNullOrEmpty(sect.Subtitle))
|
||
|
|
{
|
||
|
|
<p class="section-subtitle">@sect.Subtitle</p>
|
||
|
|
}
|
||
|
|
@Html.Raw(sect.Content)
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ImageUrl))
|
||
|
|
{
|
||
|
|
<img src="@sect.ImageUrl" alt="@sect.Title" class="img-fluid my-3" loading="lazy" />
|
||
|
|
}
|
||
|
|
@if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
|
||
|
|
{
|
||
|
|
<a href="@sect.ButtonUrl" class="btn btn-primary mt-3">@sect.ButtonText</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<!-- Default Hero Section (Fallback) -->
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-content">
|
||
|
|
<h2>Scrapbooking and Journaling Fun</h2>
|
||
|
|
<p>Explore the world of creativity and self-expression.</p>
|
||
|
|
<a href="/Shop" class="btn btn-primary">Shop Now</a>
|
||
|
|
</div>
|
||
|
|
<div class="hero-image">
|
||
|
|
<img src="~/assets/images/hero-craft.jpg" alt="Scrapbooking and crafts" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
|
||
|
|
<!-- Top Sellers Section -->
|
||
|
|
<section class="top-sellers" id="top-sellers">
|
||
|
|
<div class="container">
|
||
|
|
<h2>Top Sellers</h2>
|
||
|
|
<div class="products-grid">
|
||
|
|
@if (ViewBag.TopProducts != null && ViewBag.TopProducts.Count > 0)
|
||
|
|
{
|
||
|
|
@foreach (var product in ViewBag.TopProducts)
|
||
|
|
{
|
||
|
|
<div class="product-card">
|
||
|
|
<a href="/shop/product/@product.Id" class="product-link">
|
||
|
|
<div class="product-image">
|
||
|
|
@{
|
||
|
|
var imgSrc = !string.IsNullOrEmpty(product.ImageUrl)
|
||
|
|
? product.ImageUrl
|
||
|
|
: (product.Images != null && product.Images.Count > 0
|
||
|
|
? product.Images[0]
|
||
|
|
: "~/assets/images/products/placeholder.jpg");
|
||
|
|
}
|
||
|
|
<img src="@imgSrc" alt="@product.Name" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
<h3>@product.Name</h3>
|
||
|
|
<p class="price">$@product.Price.ToString("F2")</p>
|
||
|
|
</a>
|
||
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
||
|
|
<button class="btn btn-small btn-icon"
|
||
|
|
onclick="addToWishlist('@product.Id', '@product.Name', @product.Price, '@(product.Images != null && product.Images.Count > 0 ? product.Images[0] : product.ImageUrl ?? "/assets/images/placeholder.jpg")')"
|
||
|
|
aria-label="Add to wishlist">
|
||
|
|
<i class="bi bi-heart"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-small btn-icon"
|
||
|
|
onclick="addToCart('@product.Id', '@product.Name', @product.Price, '@(product.Images != null && product.Images.Count > 0 ? product.Images[0] : product.ImageUrl ?? "/assets/images/placeholder.jpg")')"
|
||
|
|
aria-label="Add to cart">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
|
|
<path
|
||
|
|
d="M7 4h-2l-1 2h-2v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.1c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.42c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm3 17c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div class="product-card">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="~/assets/images/products/product-1.jpg" alt="Product 1" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
<h3>Washi Tape Set</h3>
|
||
|
|
<p class="price">$15.99</p>
|
||
|
|
<button class="btn btn-small">Add to Cart</button>
|
||
|
|
</div>
|
||
|
|
<div class="product-card">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="~/assets/images/products/product-2.jpg" alt="Product 2" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
<h3>Sticker Pack</h3>
|
||
|
|
<p class="price">$8.99</p>
|
||
|
|
<button class="btn btn-small">Add to Cart</button>
|
||
|
|
</div>
|
||
|
|
<div class="product-card">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="~/assets/images/products/product-3.jpg" alt="Product 3" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
<h3>Journal Bundle</h3>
|
||
|
|
<p class="price">$24.99</p>
|
||
|
|
<button class="btn btn-small">Add to Cart</button>
|
||
|
|
</div>
|
||
|
|
<div class="product-card">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="~/assets/images/products/product-4.jpg" alt="Product 4" loading="lazy" />
|
||
|
|
</div>
|
||
|
|
<h3>Craft Kit</h3>
|
||
|
|
<p class="price">$32.99</p>
|
||
|
|
<button class="btn btn-small">Add to Cart</button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
@section Scripts {
|
||
|
|
<script>
|
||
|
|
// Cart functionality now loaded from cart.js
|
||
|
|
</script>
|
||
|
|
}
|