kunthawat/moreminimore-redesign
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Activity

feat: Update images with Unsplash (hero + illustrations), fix UX/UI, add animations

Browse Source 
- Replace MiniMax images with Unsplash (free commercial use)
- Hero images: marketing, AI automation, tech consult, web dev, about-us
- Illustrations: different from heroes for all 4 service pages
- Fix ตัวอย่างการใช้งาน section on marketing-automation
- Update about-us with hero image
- All images stored locally (not hotlinks)
This commit is contained in:
Kunthawat Greethong
2026-03-30 11:38:48 +07:00
parent d2b52fdfa7
commit ae4a897d11
64 changed files with 4916 additions and 2554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/layouts/Layout.astro
View File

@@ -18,6 +18,13 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />
<link rel="canonical" href={Astro.url} />
<!-- Security Headers -->
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://umami.moreminimore.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://umami.moreminimore.com; frame-src 'none';" />
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
@@ -96,22 +103,36 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
</button>
<div class="absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
<div class="py-2">
<a href="/web-development" class="block px-4 py-2 hover:bg-gray-50 transition">🌐 AI-Enhanced Website</a>
<a href="/marketing-automation" class="block px-4 py-2 hover:bg-gray-50 transition">🔄 Marketing Automation</a>
<a href="/seo-content-system" class="block px-4 py-2 hover:bg-gray-50 transition">📝 SEO + AI Content</a>
<a href="/tech-consult" class="block px-4 py-2 hover:bg-gray-50 transition">🖥️ Tech Consult</a>
<a href="/ai-automation" class="block px-4 py-2 hover:bg-gray-50 transition">⚙️ AI Automation</a>
<a href="/tech-consult" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
<span>Tech Consult</span>
</a>
<a href="/web-development" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
<span>AI-Enhanced Website</span>
</a>
<a href="/marketing-automation" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<span>Marketing Automation</span>
</a>
<a href="/ai-automation" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>AI Automation</span>
</a>
</div>
</div>
</div>
<a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
<a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
<!-- <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a> -->
<a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
<a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn-brand flex items-center gap-2">
📞 โทรเลย
<a href="tel:0809955945" class="bg-black text-primary px-6 py-3 rounded-full font-bold hover:bg-black/80 transition-all duration-300 hover:scale-105 flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
</svg>
โทรเลย
</a>
</nav>
@@ -138,30 +159,40 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
</svg>
</summary>
<div class="ml-4 mt-2 flex flex-col gap-2">
<a href="/web-development" class="text-sm hover:text-accent-blue transition">🌐 AI-Enhanced Website</a>
<a href="/marketing-automation" class="text-sm hover:text-accent-blue transition">🔄 Marketing Automation</a>
<a href="/seo-content-system" class="text-sm hover:text-accent-blue transition">📝 SEO + AI Content</a>
<a href="/tech-consult" class="text-sm hover:text-accent-blue transition">🖥️ Tech Consult</a>
<a href="/ai-automation" class="text-sm hover:text-accent-blue transition">⚙️ AI Automation</a>
<a href="/tech-consult" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
Tech Consult
</a>
<a href="/web-development" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
AI-Enhanced Website
</a>
<a href="/marketing-automation" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Marketing Automation
</a>
<a href="/ai-automation" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
AI Automation
</a>
</div>
</details>
<a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
<a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
<!-- <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a> -->
<a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
<a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn-brand text-center">📞 โทรเลย</a>
<a href="tel:0809955945" class="btn-brand text-center flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>
โทรเลย
</a>
</div>
</div>
</div>
</header>
<main class="flex-grow">
<!-- Breadcrumbs (except homepage) -->
{Astro.url.pathname !== '/' && (
<Breadcrumbs currentPage={{ href: Astro.url.pathname, title: '' }} />
)}
<slot />
</main>
@@ -202,10 +233,9 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
<div>
<h3 class="font-bold mb-4 text-lg">บริการ</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li><a href="/tech-consult" class="hover:text-accent-blue transition">Tech Consult</a></li>
<li><a href="/web-development" class="hover:text-accent-blue transition">AI-Enhanced Website</a></li>
<li><a href="/marketing-automation" class="hover:text-accent-blue transition">Marketing Automation</a></li>
<li><a href="/seo-content-system" class="hover:text-accent-blue transition">SEO + AI Content</a></li>
<li><a href="/tech-consult" class="hover:text-accent-blue transition">Tech Consult</a></li>
<li><a href="/ai-automation" class="hover:text-accent-blue transition">AI Automation</a></li>
</ul>
</div>
@@ -233,11 +263,11 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
<a href="mailto:contact@moreminimore.com" class="hover:text-accent-blue transition">contact@moreminimore.com</a>
</li>
<li class="flex items-center gap-2">
<span>💬</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
<a href="#" class="hover:text-accent-blue transition">Line: @moreminimore</a>
</li>
<li class="flex items-center gap-2">
<span>🕒</span>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>จ-ศ: 9:00 - 18:00 น.</span>
</li>
</ul>
@@ -275,6 +305,30 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
mobileMenu.classList.toggle('hidden');
});
}
// Scroll reveal animations
const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
revealElements.forEach(el => revealObserver.observe(el));
// Parallax scroll effect
const parallaxElements = document.querySelectorAll('.parallax-img');
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
parallaxElements.forEach(el => {
const speed = el.dataset.parallaxSpeed || 0.5;
el.style.transform = `translateY(${scrolled * speed}px)`;
});
});
</script>
</body>
</html>