0f244424c0
- Replace hero right panel with liquid-glass profit cluster (กำไร + Marketing/AI/Business Knowledge) - Fix dark-on-dark text visibility in all inverted sections (scene-dark, page-section) - Add Footer component with liquid-glass design, contact info, legal links - Add privacy and terms placeholder pages - Update PageShell to include Footer on all pages
98 lines
2.1 KiB
Plaintext
98 lines
2.1 KiB
Plaintext
---
|
|
const currentYear = new Date().getFullYear();
|
|
---
|
|
|
|
<footer class="site-footer liquid-glass liquidGlass-wrapper">
|
|
<div class="liquidGlass-effect" aria-hidden="true"></div>
|
|
<div class="liquidGlass-tint" aria-hidden="true"></div>
|
|
<div class="liquidGlass-shine" aria-hidden="true"></div>
|
|
|
|
<div class="footer-row">
|
|
<a class="footer-brand" href="/" aria-label="MoreminiMore">
|
|
<img src="/images/logos/logo-long-black.png" width="160" height="28" alt="MoreminiMore" />
|
|
</a>
|
|
|
|
<a class="footer-link" href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener">LINE @moreminimore</a>
|
|
<a class="footer-link" href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
|
|
<span class="footer-copy">© {currentYear} MoreminiMore</span>
|
|
</div>
|
|
|
|
<div class="footer-legal">
|
|
<a href="/privacy/">ความเป็นส่วนตัว</a>
|
|
<span aria-hidden="true">·</span>
|
|
<a href="/terms/">เงื่อนไขการใช้งาน</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
.site-footer {
|
|
position: relative;
|
|
z-index: auto;
|
|
margin-top: 80px;
|
|
padding: 18px 24px 14px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.footer-row {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.footer-brand img {
|
|
display: block;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
transition: opacity .2s var(--ease);
|
|
}
|
|
|
|
.footer-link:hover {
|
|
opacity: .6;
|
|
}
|
|
|
|
.footer-copy {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.footer-legal {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.footer-legal a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
transition: opacity .2s var(--ease);
|
|
}
|
|
|
|
.footer-legal a:hover {
|
|
opacity: .6;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.footer-row {
|
|
gap: 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.footer-brand img {
|
|
width: 130px;
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|