litecharms/midrandbooks
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 64 Wiki Activity

Completed UX/UI design
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-05-24 10:46:43 +02:00
parent e6880959d9
commit 051992accf
9 changed files with 769 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MidrandBookshop/Components/Layout/MainLayout.razor
+56 -81
View File
@@ -1,8 +1,9 @@
@inherits LayoutComponentBase
@inject NavigationManager Navigation
<div class="position-relative min-vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
<div class="position-relative vh-100 d-flex flex-column justify-content-between overflow-hidden" style="background-color: #F9F9F9;">
@* --- CART SYSTEM SIDE PANEL BACKDROP LAYER --- *@
<div class="cart-overlay @(IsCartOpen ? "is-visible" : "")" @onclick="ToggleCart"></div>
<div class="cart-drawer @(IsCartOpen ? "is-open" : "") d-flex flex-column bg-white shadow-lg">
<div class="cart-header d-flex align-items-center justify-content-between p-4 border-bottom">
@@ -76,9 +77,10 @@
}
</div>
<div class="w-100 flex-grow-1 position-relative">
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: 0; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
@* --- TOP FIXED LAYOUT AREA --- *@
<div class="w-100 position-relative flex-shrink-0" style="z-index: 1020;">
@* Decorative Background SVG Watermark Line Graphic *@
<div class="position-absolute top-0 start-0 overflow-hidden d-none d-md-block" style="z-index: -1; pointer-events: none; opacity: 0.08; transform: translate(-10%, -10%);">
<svg width="480" height="480" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="98" stroke="#1A1A1A" stroke-width="0.25" stroke-dasharray="0.5 1.5" />
<circle cx="100" cy="100" r="92" stroke="#1A1A1A" stroke-width="0.4" />
@@ -103,7 +105,7 @@
</svg>
</div>
<nav class="navbar navbar-expand-lg py-3 sticky-top-nav" style="pointer-events: auto;">
<nav class="navbar navbar-expand-lg py-3" style="pointer-events: auto;">
<div class="container-fluid px-md-5">
<a class="navbar-brand d-flex align-items-center" href="/" style="transform: scale(1.6); transform-origin: left center; margin-right: 4rem;">
<svg class="me-2" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
@@ -163,7 +165,7 @@
}
</button>
<a href="/login" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
<a href="/profile" class="btn btn-dark rounded-pill px-3 py-1 d-inline-flex align-items-center gap-2 btn-sm fw-medium shadow-sm">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
@@ -173,94 +175,67 @@
</div>
</div>
</nav>
</div>
@* --- MAIN INDEPENDENT SCROLL LAYER --- *@
<div class="w-100 flex-grow-1 overflow-y-auto d-flex flex-column justify-content-between">
<main class="position-relative" style="z-index: 5;">
<CascadingValue Value="GlobalSearchQuery">
@Body
</CascadingValue>
</main>
</div>
<footer class="w-100 position-relative overflow-hidden"
style="z-index: 10; padding: 5.5rem 0 3.5rem 0; background-color: #F2F4F7 !important; background-image: linear-gradient(90deg, #FFF 0%, rgba(243,245,249,0.98) 22%, #FFF 48%, rgba(239,242,247,0.98) 73%, #FFF 100%), repeating-linear-gradient(15deg, rgba(0,0,0,0.005) 0px, rgba(0,0,0,0.005) 1px, transparent 1px, transparent 41px), repeating-linear-gradient(-25deg, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 2px, transparent 2px, transparent 73px), repeating-linear-gradient(65deg, rgba(0,0,0,0.003) 0px, rgba(0,0,0,0.003) 1px, transparent 1px, transparent 127px) !important;">
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.45) 0%, rgba(242,244,248,0.05) 100%); pointer-events: none; z-index: 1; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);"></div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 2; opacity: 0.95; pointer-events: none; mix-blend-mode: multiply;">
<svg width="100%" height="100%" viewBox="0 0 1440 400" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="15%" cy="35%" rx="750" ry="400" fill="url(#randomMetal_1)" />
<ellipse cx="60%" cy="80%" rx="950" ry="350" fill="url(#randomMetal_2)" />
<ellipse cx="85%" cy="20%" rx="600" ry="250" fill="url(#randomMetal_3)" />
<defs>
<radialGradient id="randomMetal_1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(216 140) rotate(15) scale(350 750)">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="60%" stop-color="#EBF0F7" />
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
</radialGradient>
<radialGradient id="randomMetal_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(864 320) rotate(-15) scale(300 950)">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="70%" stop-color="#E2E7F2" />
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
</radialGradient>
<radialGradient id="randomMetal_3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1224 80) rotate(45) scale(200 600)">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8" />
<stop offset="50%" stop-color="#E9EDF5" stop-opacity="0.3" />
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
</div>
<div class="position-absolute top-0 start-0 w-100" style="height: 2px; z-index: 5;">
<div class="w-100" style="height: 1px; background: rgba(0, 0, 0, 0.055);"></div>
<div class="w-100" style="height: 1px; background: rgba(255, 255, 255, 0.95);"></div>
</div>
<div class="container-fluid px-md-5 position-relative" style="z-index: 4;">
<div class="row g-4 pb-5 justify-content-between" style="border-bottom: 1px solid rgba(0, 0, 0, 0.05);">
<div class="col-12 col-md-5">
<span class="fw-bold tracking-tight text-dark d-block mb-3" style="font-size: 0.75rem; letter-spacing: 1px; font-family: 'Inter', sans-serif;">MIDRAND BOOKS</span>
<p class="text-muted small mb-4" style="line-height: 1.6; max-width: 360px;">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
<div class="d-flex flex-column gap-2.5">
<a href="mailto:info@midrandbooks.co.za" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
info@midrandbooks.co.za
</a>
<a href="tel:+27872650198" class="text-decoration-none text-muted d-inline-flex align-items-center gap-2 small">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
+27 87 265 9463
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-5 text-start">
<div class="row row-cols-2 justify-content-md-end g-3">
<div style="max-width: 160px;">
<span class="text-dark fw-bold tracking-wider d-block mb-3" style="font-size: 0.65rem; letter-spacing: 1.2px;">PLATFORM</span>
<ul class="list-unstyled d-flex flex-column gap-2 m-0">
<li><a href="/about" class="text-decoration-none text-muted small">About Us</a></li>
<li><a href="/" class="text-decoration-none text-muted small">Browse Catalog</a></li>
<li><a href="/contact" class="text-decoration-none text-muted small">Contact Us</a></li>
</ul>
<footer class="custom-site-footer border-top mt-auto">
<div class="container-fluid px-md-5">
<div class="row g-4 pb-4 justify-content-between footer-content-section">
<div class="col-12 col-md-5">
<span class="footer-brand-title d-block mb-2">MIDRAND BOOKS</span>
<p class="footer-desc mb-3">An architectural destination for curated print, thoughtful reading culture, and global design perspectives.</p>
<div class="d-flex flex-column gap-2">
<a href="mailto:info@midrandbooks.co.za" class="footer-contact-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
info@midrandbooks.co.za
</a>
<a href="tel:+27872650198" class="footer-contact-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 .2.81.7A2 2 0 0 1 22 16.92z" /></svg>
+27 87 265 9463
</a>
</div>
<div style="max-width: 210px;">
<span class="text-dark fw-bold tracking-wider d-block mb-3" style="font-size: 0.65rem; letter-spacing: 1.2px;">ENTERPRISE</span>
<ul class="list-unstyled d-flex flex-column gap-2 m-0">
<li class="small text-muted d-flex align-items-center gap-1.5 mb-1" style="font-weight: 500;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
Lite Charms (PTY) Ltd
</li>
<li><a href="/terms" class="text-decoration-none text-muted small">Terms & Conditions</a></li>
<li><a href="/privacy" class="text-decoration-none text-muted small">Privacy Policy</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-5 text-start">
<div class="row row-cols-2 justify-content-md-end g-3">
<div style="max-width: 160px;">
<span class="footer-section-heading d-block mb-2">PLATFORM</span>
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
<li><a href="/about" class="footer-nav-link">About Us</a></li>
<li><a href="/" class="footer-nav-link">Browse Catalog</a></li>
<li><a href="/contact" class="footer-nav-link">Contact Us</a></li>
</ul>
</div>
<div style="max-width: 210px;">
<span class="footer-section-heading d-block mb-2">ENTERPRISE</span>
<ul class="list-unstyled d-flex flex-column gap-1.5 m-0">
<li class="footer-meta-item d-flex align-items-center gap-1.5">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
Lite Charms (PTY) Ltd
</li>
<li><a href="/terms" class="footer-nav-link">Terms & Conditions</a></li>
<li><a href="/privacy" class="footer-nav-link">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row align-items-center pt-4">
<div class="col-12 text-center text-md-start">
<span class="text-muted tracking-wide" style="font-size: 0.75rem; font-weight: 500;">
&copy; @DateTime.Now.Year Midrand Books. All rights reserved.
</span>
<div class="row align-items-center pt-3 footer-copyright-section">
<div class="col-12 text-center text-md-start">
<span class="footer-copyright">
&copy; @DateTime.Now.Year Midrand Books. All rights reserved.
</span>
</div>
</div>
</div>
</div>
</footer>
</footer>
</div>
</div>
@code {