Phase 1: Homepage seamless design - add gradient transitions
- Added gradient transitions between sections in global.css - Portfolio section now has gradient-top (dark to white fade) - Blog section now has gradient-bottom (white fade from dark) - Reduced portfolio overlay opacity from 0.85 to 0.65 - Added border to blog cards for white-on-white visibility - Blog cards now have primary color accent on hover
This commit is contained in:
Kunthawat Greethong
@@ -1,139 +1,157 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import ServiceCard from '../components/ServiceCard.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { portfolioItems } from '../data/portfolio';
|
||||
|
||||
const stats = [
|
||||
{ number: "50+", label: "โปรเจกต์" },
|
||||
{ number: "40+", label: "ลูกค้า" },
|
||||
{ number: "5+", label: "ปีประสบการณ์" },
|
||||
{ number: "100%", label: "ความพึงพอใจ" }
|
||||
const blogPosts = await getCollection('blog');
|
||||
const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||||
|
||||
const services = [
|
||||
{ title: "Automation Consult", subtitle: "Implement specific unique app and AI for business to do automation workflow", image: "/images/services/automation.jpg", link: "/services/automation" },
|
||||
{ title: "AI Consult", subtitle: "Consult service for using AI to improve business workflow and knowledge management", image: "/images/services/ai-consult.jpg", link: "/services/ai-consult" },
|
||||
{ title: "Marketing Automation", subtitle: "Use AI to help generate and manage marketing workflow", image: "/images/services/marketing.jpg", link: "/services/marketing" },
|
||||
{ title: "Website Development", subtitle: "Implement website for business and integrate with marketing workflow", image: "/images/services/webdev.jpg", link: "/services/webdev" },
|
||||
];
|
||||
---
|
||||
|
||||
<Base title="หน้าแรก | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
title="เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่"
|
||||
subtitle="รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
|
||||
badge="ดิจิทัลเอเจนซี่ในประเทศไทย"
|
||||
image="/images/hero/hero.jpg"
|
||||
theme="yellow"
|
||||
showCTA={true}
|
||||
size="full"
|
||||
variant="split"
|
||||
/>
|
||||
<!-- KINETIC HERO -->
|
||||
<Hero />
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="section services">
|
||||
<!-- SERVICES SECTION -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บริการของเรา</span>
|
||||
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
|
||||
<p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p>
|
||||
<!-- Title with Tilt Effect -->
|
||||
<div class="services-title-wrapper" id="services-title">
|
||||
<div class="services-title-inner">
|
||||
<span class="badge badge-dark">บริการของเรา</span>
|
||||
<h2 class="services-title">
|
||||
ครบทุกโซลูชั่นด้านดิจิตอล
|
||||
</h2>
|
||||
<p class="section-desc reveal">
|
||||
ให้เราดูแลทุกอย่าง ในขณะที่คุณโฟกัสที่ธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
{[
|
||||
{ title: "พัฒนาเว็บไซต์", desc: "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการ", icon: "🌐", href: "/services/webdev" },
|
||||
{ title: "Marketing Automation", desc: "Automate การตลาดเพื่อเพิ่มประสิทธิภาพและลดต้นทุน", icon: "📈", href: "/services/marketing" },
|
||||
{ title: "AI Automation", desc: "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการ", icon: "🤖", href: "/services/ai" },
|
||||
{ title: "Tech Consult", desc: "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ", icon: "💡", href: "/services/consult" }
|
||||
].map((s, i) => (
|
||||
<a href={s.href} class="service-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<div class="service-icon"><span class="icon-emoji">{s.icon}</span></div>
|
||||
<h3 class="service-title">{s.title}</h3>
|
||||
<p class="service-desc">{s.desc}</p>
|
||||
<span class="service-arrow">→</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="section section-accent stats-section">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
{stats.map((stat) => (
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">{stat.number}</span>
|
||||
<span class="stat-label">{stat.label}</span>
|
||||
{services.map((service, i) => (
|
||||
<div class="reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<ServiceCard {...service} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="section-cta reveal">
|
||||
<a href="/services" class="btn btn-dark btn-lg">
|
||||
ดูบริการทั้งหมด
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section class="section portfolio-preview">
|
||||
<!-- PORTFOLIO SECTION -->
|
||||
<section class="section section-dark section-gradient-top">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">ผลงาน</span>
|
||||
<h2 class="section-title">โปรเจกต์ล่าสุด</h2>
|
||||
<p class="section-desc">ผลงานที่เราภาคภูมิใจ</p>
|
||||
<span class="badge">ผลงานของเรา</span>
|
||||
<h2 class="section-title text-white reveal">
|
||||
โปรเจกต์ที่เราภาคภูมิใจ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
{[
|
||||
{ name: "Lungfinler", cat: "เว็บไซต์", img: "/images/portfolio/lungfinler.png", url: "https://lungfinler.com" },
|
||||
{ name: "Jet Industries", cat: "เว็บไซต์", img: "/images/portfolio/jetindustries.png", url: "https://jetindustries.co.th" },
|
||||
{ name: "Lawyernoom", cat: "เว็บไซต์", img: "/images/portfolio/lawyernoom.png", url: "https://lawyernoom.com" },
|
||||
{ name: "Underdog", cat: "เว็บไซต์", img: "/images/portfolio/underdog.png", url: "https://underdog.run" }
|
||||
].map((p) => (
|
||||
<a href={p.url} target="_blank" rel="noopener" class="portfolio-card">
|
||||
<img src={p.img} alt={p.name} />
|
||||
<div class="portfolio-overlay">
|
||||
<span class="portfolio-category">{p.cat}</span>
|
||||
<h3 class="portfolio-name">{p.name}</h3>
|
||||
{portfolioItems.slice(0, 6).map((item, i) => (
|
||||
<a href={item.url} target="_blank" rel="noopener" class="portfolio-card reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<div class="portfolio-image">
|
||||
<img src={item.thumbnail} alt={item.name} loading="lazy" />
|
||||
<div class="portfolio-overlay">
|
||||
<span class="portfolio-visit">เยี่ยมชมเว็บไซต์</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-content">
|
||||
<span class="portfolio-category">{item.category_label}</span>
|
||||
<h3 class="portfolio-name">{item.name}</h3>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="section-cta">
|
||||
<a href="/portfolio" class="btn btn-primary">ดูผลงานทั้งหมด</a>
|
||||
|
||||
<div class="section-cta reveal">
|
||||
<a href="/portfolio" class="btn btn-outline-white btn-lg">
|
||||
ผลงานทั้งหมด
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Blog Section -->
|
||||
<section class="section section-light blog-preview">
|
||||
<!-- BLOG SECTION -->
|
||||
<section class="section section-gradient-bottom">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บทความ</span>
|
||||
<h2 class="section-title">ความรู้ด้านดิจิทัล</h2>
|
||||
<p class="section-desc">อ่านบทความล่าสุดจากเรา</p>
|
||||
<span class="badge badge-dark">บทความ</span>
|
||||
<h2 class="section-title reveal">
|
||||
ความรู้ด้านดิจิทัล
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="blog-grid">
|
||||
{[
|
||||
{ title: "5 วิธี AI เพิ่มยอดขาย", img: "/images/blog/5-ways-ai-increase-sales.jpg", slug: "5-ways-ai-increase-sales" },
|
||||
{ title: "AI Content ที่ Google รัก", img: "/images/blog/ai-content-google-love.jpg", slug: "ai-content-google-love" },
|
||||
{ title: "Digital Transformation Guide", img: "/images/blog/digital-transformation.jpg", slug: "digital-transformation-guide" }
|
||||
].map((post) => (
|
||||
<a href={`/blog/${post.slug}`} class="blog-card card">
|
||||
<div class="blog-image"><img src={post.img} alt={post.title} /></div>
|
||||
{sortedPosts.slice(0, 3).map((post, i) => (
|
||||
<a href={`/blog/${post.slug}`} class="blog-card reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<div class="blog-image">
|
||||
<img src={post.data.image} alt={post.data.title} loading="lazy" />
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<h3 class="blog-title">{post.title}</h3>
|
||||
<span class="blog-readmore">อ่านต่อ →</span>
|
||||
<span class="blog-category">{post.data.category}</span>
|
||||
<h3 class="blog-title">{post.data.title}</h3>
|
||||
<p class="blog-excerpt">{post.data.excerpt}</p>
|
||||
<span class="blog-date">
|
||||
{new Date(post.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="section-cta">
|
||||
<a href="/blog" class="btn btn-secondary">บทความทั้งหมด</a>
|
||||
|
||||
<div class="section-cta reveal">
|
||||
<a href="/blog" class="btn btn-dark btn-lg">
|
||||
บทความทั้งหมด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section section-primary cta-section">
|
||||
<!-- CTA SECTION -->
|
||||
<section class="section section-primary">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">พร้อมเริ่มโปรเจกต์ของคุณ?</h2>
|
||||
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
|
||||
<div class="cta-content reveal">
|
||||
<h2 class="cta-title">
|
||||
<span class="title-word">พร้อมเปลี่ยน</span>
|
||||
<span class="title-word">ธุรกิจของคุณ?</span>
|
||||
</h2>
|
||||
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
|
||||
<div class="cta-actions">
|
||||
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
|
||||
<a href="/contact" class="btn btn-dark btn-lg">
|
||||
ติดต่อเรา
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">
|
||||
080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,48 +161,397 @@ const stats = [
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.section-header { text-align: center; margin-bottom: 60px; }
|
||||
.section-badge { display: inline-block; background: var(--color-primary); color: var(--color-black); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
|
||||
.section-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; margin-bottom: 16px; }
|
||||
.section-desc { font-size: 18px; color: var(--color-medium-gray); max-width: 600px; margin: 0 auto; }
|
||||
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
|
||||
.service-card { padding: 40px 32px; display: flex; flex-direction: column; cursor: pointer; }
|
||||
.service-icon { width: 60px; height: 60px; background: var(--color-light-gray); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
|
||||
.icon-emoji { font-size: 28px; }
|
||||
.service-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
|
||||
.service-desc { font-size: 14px; color: var(--color-medium-gray); line-height: 1.6; flex-grow: 1; }
|
||||
.service-arrow { font-size: 24px; color: var(--color-primary); margin-top: 20px; transition: transform 0.3s; }
|
||||
.service-card:hover .service-arrow { transform: translateX(8px); }
|
||||
.section-accent { background: var(--color-accent); color: var(--color-white); }
|
||||
.stats-section { padding: 100px 0; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; text-align: center; }
|
||||
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
||||
.stat-number { font-family: var(--font-heading); font-size: 72px; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 12px; }
|
||||
.stat-label { font-size: 16px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 2px; }
|
||||
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }
|
||||
.portfolio-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
|
||||
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
|
||||
.portfolio-card:hover img { transform: scale(1.1); }
|
||||
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: opacity 0.3s; }
|
||||
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-category { background: var(--color-primary); color: var(--color-black); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; align-self: flex-start; margin-bottom: 8px; }
|
||||
.portfolio-name { color: var(--color-white); font-size: 18px; font-weight: 600; }
|
||||
.section-cta { text-align: center; }
|
||||
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
|
||||
.blog-card { display: flex; flex-direction: column; }
|
||||
.blog-image { aspect-ratio: 16/10; overflow: hidden; }
|
||||
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
|
||||
.blog-card:hover .blog-image img { transform: scale(1.05); }
|
||||
.blog-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
|
||||
.blog-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; flex-grow: 1; }
|
||||
.blog-readmore { color: var(--color-accent); font-weight: 500; font-size: 14px; }
|
||||
.cta-content { text-align: center; max-width: 800px; margin: 0 auto; }
|
||||
.cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-bottom: 20px; }
|
||||
.cta-desc { font-size: 18px; margin-bottom: 40px; opacity: 0.8; }
|
||||
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-lg { padding: 18px 40px; font-size: 16px; }
|
||||
.btn-outline { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
|
||||
.btn-outline:hover { background: var(--color-black); color: var(--color-white); }
|
||||
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stat-number { font-size: 56px; } }
|
||||
@media (max-width: 640px) { .services-grid, .portfolio-grid, .blog-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions, .cta-actions { flex-direction: column; } .btn-lg { width: 100%; justify-content: center; } }
|
||||
</style>
|
||||
/* ============================================
|
||||
SERVICES TITLE WITH TILT EFFECT
|
||||
============================================ */
|
||||
|
||||
.services-title-wrapper {
|
||||
perspective: 1000px;
|
||||
margin-bottom: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-title-inner {
|
||||
transition: transform 0.1s ease-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.services-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(36px, 6vw, 64px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 24px 0;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SECTION HEADER
|
||||
============================================ */
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 56px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 24px 0;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 18px;
|
||||
color: var(--color-gray-600);
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SERVICES GRID
|
||||
============================================ */
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PORTFOLIO GRID
|
||||
============================================ */
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.portfolio-card {
|
||||
display: block;
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.portfolio-card:hover {
|
||||
transform: translateY(-8px);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(26, 26, 46, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-visit {
|
||||
padding: 12px 24px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.portfolio-category {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: rgba(254, 212, 0, 0.2);
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-display);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.portfolio-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BLOG GRID
|
||||
============================================ */
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-image img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.blog-category {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: var(--color-gray-100);
|
||||
color: var(--color-gray-600);
|
||||
font-family: var(--font-display);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.blog-excerpt {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
CTA SECTION
|
||||
============================================ */
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(36px, 6vw, 64px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title-word {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
max-width: 500px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Button Variations */
|
||||
.btn-outline-white {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
border: 2px solid var(--color-white);
|
||||
}
|
||||
|
||||
.btn-outline-white:hover {
|
||||
background: var(--color-white);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
background: transparent;
|
||||
color: var(--color-black);
|
||||
border: 2px solid var(--color-black);
|
||||
}
|
||||
|
||||
.btn-outline-dark:hover {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.services-grid,
|
||||
.portfolio-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.services-grid,
|
||||
.portfolio-grid,
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Services Title Tilt Effect
|
||||
const servicesTitle = document.getElementById('services-title');
|
||||
const titleInner = servicesTitle?.querySelector('.services-title-inner');
|
||||
|
||||
if (titleInner && servicesTitle) {
|
||||
servicesTitle.addEventListener('mousemove', (e) => {
|
||||
const rect = servicesTitle.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = (y - centerY) / centerY * -8;
|
||||
const rotateY = (centerX - x) / centerX * 8;
|
||||
|
||||
(titleInner as HTMLElement).style.transform =
|
||||
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||||
});
|
||||
|
||||
servicesTitle.addEventListener('mouseleave', () => {
|
||||
(titleInner as HTMLElement).style.transform =
|
||||
'perspective(1000px) rotateX(0) rotateY(0)';
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Reveal Animation
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.reveal').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user