refactor(services/webdev): 5 different layout patterns (no more BentoGrid)
Before: all 5 sections used BentoGrid + BentoTile — repetitive look After: 5 distinct layouts: 1. Hero: 2-column grid (text + 4 why-us cards stacked) 2. Services: vertical card stack (4 items, icon+num+bullets) 3. Tech options: 2-column comparison table (Astro vs WordPress) 3b. Portfolio: 2x2 card grid (4 real client sites, hover effect) 4. Pricing: 3-tier card layout (Landing/Astro/WP) + extras list 5. FAQ: accordion (native details/summary) + MDX content card New CSS classes added: - .service-stack-item, .service-stack-num, .service-stack-bullets - .tech-comparison, .tech-col, .tech-col-header - .portfolio-grid-2x2, .portfolio-card-grid - .pricing-tiers, .pricing-tier, .pricing-tier-recommended - .faq-accordion, .faq-item, .faq-summary, .faq-icon Imports fixed: added Icon from Icon.astro (was missing → Astro error)
This commit is contained in:
Kunthawat Greethong
@@ -5,6 +5,7 @@ import Footer from '../../components/Footer.astro';
|
||||
import BentoGrid from '../../components/BentoGrid.astro';
|
||||
import BentoTile from '../../components/BentoTile.astro';
|
||||
import DecoOrb from '../../components/DecoOrb.astro';
|
||||
import Icon from '../../components/Icon.astro';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
@@ -239,7 +240,7 @@ const featureList = data.features || data.services || [];
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 2: SERVICES (with bullets) -->
|
||||
<!-- SECTION 2: SERVICES (vertical card stack) -->
|
||||
{data.services && (
|
||||
<section class="section section-bento">
|
||||
<DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="80px" />
|
||||
@@ -253,20 +254,27 @@ const featureList = data.features || data.services || [];
|
||||
<p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.services.map((s: any) => (
|
||||
<BentoTile span={s.span} surface={s.surface} eyebrow={s.icon} title={s.title}>
|
||||
<ul class="service-bullets">
|
||||
<div class="service-stack">
|
||||
{data.services.map((s: any, idx: number) => (
|
||||
<div class="service-stack-item" data-surface={s.surface}>
|
||||
<div class="service-stack-num">0{idx + 1}</div>
|
||||
<div class="service-stack-icon">
|
||||
<Icon name={s.icon as any} size={32} />
|
||||
</div>
|
||||
<div class="service-stack-body">
|
||||
<h3 class="service-stack-title">{s.title}</h3>
|
||||
<ul class="service-stack-bullets">
|
||||
{s.bullets.map((b: string) => <li>{b}</li>)}
|
||||
</ul>
|
||||
</BentoTile>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- SECTION 3: REAL PORTFOLIO + TECH OPTIONS -->
|
||||
<!-- SECTION 3: TECH COMPARISON + PORTFOLIO -->
|
||||
{(data.realPortfolio || data.techOptions) && (
|
||||
<section class="section section-soft section-bento">
|
||||
<DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
|
||||
@@ -280,15 +288,25 @@ const featureList = data.features || data.services || [];
|
||||
<h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
|
||||
<p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
|
||||
</div>
|
||||
<BentoGrid>
|
||||
|
||||
<div class="tech-comparison">
|
||||
{data.techOptions.map((t: any) => (
|
||||
<BentoTile span={6} surface={t.surface} eyebrow={t.badge} title={t.name}>
|
||||
<p>{t.desc}</p>
|
||||
<p class="tile-meta-strong">{t.duration}</p>
|
||||
<p class="tile-meta">✓ เหมาะกับ: {t.best}</p>
|
||||
</BentoTile>
|
||||
<div class={`tech-col tech-col-${t.badge.toLowerCase()}`}>
|
||||
<div class="tech-col-header">
|
||||
<span class="tech-col-badge">{t.badge}</span>
|
||||
<h3 class="tech-col-name">{t.name}</h3>
|
||||
<p class="tech-col-duration">{t.duration}</p>
|
||||
</div>
|
||||
<div class="tech-col-body">
|
||||
<p class="tech-col-desc">{t.desc}</p>
|
||||
<div class="tech-col-best">
|
||||
<span class="tech-col-label">✓ เหมาะกับ:</span>
|
||||
<span class="tech-col-value">{t.best}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -299,22 +317,27 @@ const featureList = data.features || data.services || [];
|
||||
<h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
|
||||
<p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
|
||||
</div>
|
||||
<BentoGrid>
|
||||
|
||||
<div class="portfolio-grid-2x2">
|
||||
{data.realPortfolio.map((p: any) => (
|
||||
<BentoTile span={6} surface="white" eyebrow="✓ ใช้งานจริง" title={p.name}>
|
||||
<p class="tile-meta">{p.industry}</p>
|
||||
<p class="tile-body-detail">{p.highlight}</p>
|
||||
<a href={p.url} target="_blank" rel="noopener" class="tile-cta-link">เยี่ยมชมเว็บไซต์ →</a>
|
||||
</BentoTile>
|
||||
<a href={p.url} target="_blank" rel="noopener" class="portfolio-card-grid">
|
||||
<div class="portfolio-card-top">
|
||||
<span class="portfolio-card-badge">✓ ใช้งานจริง</span>
|
||||
<span class="portfolio-card-arrow">→</span>
|
||||
</div>
|
||||
<h3 class="portfolio-card-name">{p.name}</h3>
|
||||
<p class="portfolio-card-industry">{p.industry}</p>
|
||||
<p class="portfolio-card-highlight">{p.highlight}</p>
|
||||
</a>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- SECTION 4: PRICING (with bestFor context) -->
|
||||
<!-- SECTION 4: PRICING (3-tier) -->
|
||||
{data.pricing && (
|
||||
<section class="section section-bento">
|
||||
<DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
|
||||
@@ -323,16 +346,92 @@ const featureList = data.features || data.services || [];
|
||||
<div class="section-header reveal">
|
||||
<span class="section-badge">ราคา</span>
|
||||
<h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
|
||||
<p class="section-desc">ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น</p>
|
||||
<p class="section-desc">เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้</p>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.pricing.map((p: any) => (
|
||||
<BentoTile span={4} surface={p.surface} eyebrow={p.label} title={p.price}>
|
||||
<p class="tile-meta">✓ {p.bestFor}</p>
|
||||
</BentoTile>
|
||||
))}
|
||||
</BentoGrid>
|
||||
<div class="pricing-tiers">
|
||||
<div class="pricing-tier pricing-tier-basic">
|
||||
<div class="pricing-tier-header">
|
||||
<span class="pricing-tier-badge">เริ่มต้น</span>
|
||||
<h3 class="pricing-tier-name">Landing Page</h3>
|
||||
<p class="pricing-tier-desc">หน้าเดียวจบ เหมาะทดสอบตลาด</p>
|
||||
</div>
|
||||
<div class="pricing-tier-price">
|
||||
<span class="pricing-tier-currency">฿</span>
|
||||
<span class="pricing-tier-amount">5,000</span>
|
||||
<span class="pricing-tier-period">/ เริ่มต้น</span>
|
||||
</div>
|
||||
<ul class="pricing-tier-features">
|
||||
<li>✓ เว็บ 1 หน้า</li>
|
||||
<li>✓ Responsive ทุกหน้าจอ</li>
|
||||
<li>✓ SSL + Domain .com 1 ปี</li>
|
||||
<li>✓ แก้ไขเองได้</li>
|
||||
<li>✗ ระบบหลังบ้าน</li>
|
||||
</ul>
|
||||
<a href="/contact" class="pricing-tier-cta">เริ่มต้น</a>
|
||||
</div>
|
||||
|
||||
<div class="pricing-tier pricing-tier-standard">
|
||||
<div class="pricing-tier-recommended">⭐ แนะนำ</div>
|
||||
<div class="pricing-tier-header">
|
||||
<span class="pricing-tier-badge">มาตรฐาน</span>
|
||||
<h3 class="pricing-tier-name">Website Astro</h3>
|
||||
<p class="pricing-tier-desc">เว็บบริษัท เน้น SEO + AI</p>
|
||||
</div>
|
||||
<div class="pricing-tier-price">
|
||||
<span class="pricing-tier-currency">฿</span>
|
||||
<span class="pricing-tier-amount">10,000</span>
|
||||
<span class="pricing-tier-period">/ เริ่มต้น</span>
|
||||
</div>
|
||||
<ul class="pricing-tier-features">
|
||||
<li>✓ เว็บ 5-15 หน้า</li>
|
||||
<li>✓ SEO + GEO (ติด ChatGPT)</li>
|
||||
<li>✓ AI ช่วยสร้างเนื้อหา</li>
|
||||
<li>✓ Server + SSL + Domain 1 ปี</li>
|
||||
<li>✓ แก้ไขเองได้ + AI ช่วย</li>
|
||||
</ul>
|
||||
<a href="/contact" class="pricing-tier-cta pricing-tier-cta-primary">เลือกแพ็คเกจนี้</a>
|
||||
</div>
|
||||
|
||||
<div class="pricing-tier pricing-tier-pro">
|
||||
<div class="pricing-tier-header">
|
||||
<span class="pricing-tier-badge">ขั้นสูง</span>
|
||||
<h3 class="pricing-tier-name">Website WordPress</h3>
|
||||
<p class="pricing-tier-desc">E-commerce + Plugin ครบ</p>
|
||||
</div>
|
||||
<div class="pricing-tier-price">
|
||||
<span class="pricing-tier-currency">฿</span>
|
||||
<span class="pricing-tier-amount">15,000</span>
|
||||
<span class="pricing-tier-period">/ เริ่มต้น</span>
|
||||
</div>
|
||||
<ul class="pricing-tier-features">
|
||||
<li>✓ เว็บไม่จำกัดหน้า</li>
|
||||
<li>✓ E-commerce + ตะกร้า + ชำระเงิน</li>
|
||||
<li>✓ Plugin ตามต้องการ</li>
|
||||
<li>✓ Server + SSL + Domain 1 ปี</li>
|
||||
<li>✓ แก้ไขเองได้ + อบรม</li>
|
||||
</ul>
|
||||
<a href="/contact" class="pricing-tier-cta">เริ่มต้น</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pricing-extras">
|
||||
<h4 class="pricing-extras-title">ค่าใช้จ่ายเพิ่มเติม (รายปี)</h4>
|
||||
<div class="pricing-extras-list">
|
||||
<div class="pricing-extra">
|
||||
<span class="pricing-extra-name">Server Hosting</span>
|
||||
<span class="pricing-extra-price">฿5,000 / ปี</span>
|
||||
</div>
|
||||
<div class="pricing-extra">
|
||||
<span class="pricing-extra-name">Domain .com / .co.th</span>
|
||||
<span class="pricing-extra-price">฿500 / ปี</span>
|
||||
</div>
|
||||
<div class="pricing-extra">
|
||||
<span class="pricing-extra-name">Maintenance (optional)</span>
|
||||
<span class="pricing-extra-price">฿1,500 / เดือน</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
@@ -345,27 +444,23 @@ const featureList = data.features || data.services || [];
|
||||
<div class="section-header reveal">
|
||||
<span class="section-badge">FAQ</span>
|
||||
<h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
|
||||
<p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด</p>
|
||||
<p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ</p>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.faqs.map((faq: any, i: number) => {
|
||||
let span: 12 | 8 | 4 = 6;
|
||||
if (i === 0) span = 12;
|
||||
else if (i % 3 === 1) span = 8;
|
||||
else if (i % 3 === 2) span = 4;
|
||||
else span = 6;
|
||||
const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={span} surface={surface} eyebrow={`Q${i + 1}`} title={faq.q}>
|
||||
<div class="faq-answer-inline">
|
||||
<div class="faq-accordion">
|
||||
{data.faqs.map((faq: any, i: number) => (
|
||||
<details class="faq-item" name="webdev-faq">
|
||||
<summary class="faq-summary">
|
||||
<span class="faq-q-num">Q{i + 1}</span>
|
||||
<span class="faq-q-text">{faq.q}</span>
|
||||
<span class="faq-icon">+</span>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>{faq.a}</p>
|
||||
</div>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
</BentoGrid>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mdx-section">
|
||||
<div class="section-header reveal" style="margin-top: 64px;">
|
||||
@@ -681,6 +776,504 @@ const featureList = data.features || data.services || [];
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SERVICE STACK (vertical card list)
|
||||
============================================ */
|
||||
.service-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.service-stack-item {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 60px 1fr;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
padding: 32px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
.service-stack-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.service-stack-num {
|
||||
font-family: var(--font-display);
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
.service-stack-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--color-bg-soft);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.service-stack-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(20px, 2.5vw, 24px);
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.service-stack-bullets {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.service-stack-bullets li {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
.service-stack-bullets li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: var(--color-primary);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TECH COMPARISON (2-column table)
|
||||
============================================ */
|
||||
.tech-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tech-col {
|
||||
padding: 40px;
|
||||
border-right: 1px solid var(--color-gray-200);
|
||||
}
|
||||
.tech-col:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.tech-col-a {
|
||||
background: var(--color-primary);
|
||||
background: rgba(254, 212, 0, 0.08);
|
||||
}
|
||||
.tech-col-wp {
|
||||
background: var(--color-bg-soft);
|
||||
}
|
||||
.tech-col-header {
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
}
|
||||
.tech-col-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tech-col-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tech-col-duration {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tech-col-desc {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-gray-700);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tech-col-best {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: var(--color-primary);
|
||||
background: rgba(254, 212, 0, 0.15);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.tech-col-wp .tech-col-best {
|
||||
background: rgba(13, 148, 136, 0.1);
|
||||
}
|
||||
.tech-col-label {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--color-black);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tech-col-value {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-700);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PORTFOLIO GRID 2x2
|
||||
============================================ */
|
||||
.portfolio-grid-2x2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
.portfolio-card-grid {
|
||||
display: block;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
min-height: 200px;
|
||||
}
|
||||
.portfolio-card-grid:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.portfolio-card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.portfolio-card-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border-radius: var(--radius-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.portfolio-card-arrow {
|
||||
font-size: 24px;
|
||||
color: var(--color-black);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.portfolio-card-grid:hover .portfolio-card-arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.portfolio-card-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.portfolio-card-industry {
|
||||
font-size: 13px;
|
||||
color: var(--color-gray-600);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.portfolio-card-highlight {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PRICING 3-TIER
|
||||
============================================ */
|
||||
.pricing-tiers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pricing-tier {
|
||||
position: relative;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 40px 32px;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
.pricing-tier:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.pricing-tier-standard {
|
||||
border-color: var(--color-primary);
|
||||
border-width: 2px;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.pricing-tier-standard:hover {
|
||||
transform: scale(1.04) translateY(-4px);
|
||||
}
|
||||
.pricing-tier-recommended {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
padding: 4px 16px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.pricing-tier-header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.pricing-tier-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: var(--color-bg-soft);
|
||||
color: var(--color-gray-600);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border-radius: var(--radius-full);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pricing-tier-standard .pricing-tier-badge {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
}
|
||||
.pricing-tier-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pricing-tier-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
.pricing-tier-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.pricing-tier-currency {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.pricing-tier-amount {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
line-height: 1;
|
||||
}
|
||||
.pricing-tier-period {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
.pricing-tier-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.pricing-tier-features li {
|
||||
padding: 8px 0;
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-700);
|
||||
border-bottom: 1px solid var(--color-gray-100);
|
||||
}
|
||||
.pricing-tier-features li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.pricing-tier-cta {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 12px 24px;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
border: 1.5px solid var(--color-black);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.pricing-tier-cta:hover {
|
||||
background: var(--color-black);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.pricing-tier-cta-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.pricing-tier-cta-primary:hover {
|
||||
background: var(--color-black);
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
|
||||
/* Pricing extras (small list) */
|
||||
.pricing-extras {
|
||||
max-width: 700px;
|
||||
margin: 60px auto 0;
|
||||
padding: 32px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.pricing-extras-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-extras-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.pricing-extra {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--color-gray-100);
|
||||
}
|
||||
.pricing-extra:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.pricing-extra-name {
|
||||
font-size: 15px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
.pricing-extra-price {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FAQ ACCORDION
|
||||
============================================ */
|
||||
.faq-accordion {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.faq-item {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.faq-item[open] {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 16px rgba(254, 212, 0, 0.15);
|
||||
}
|
||||
.faq-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
.faq-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.faq-q-num {
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--color-primary);
|
||||
background: var(--color-black);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.faq-q-text {
|
||||
flex: 1;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.faq-icon {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: var(--color-gray-600);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
.faq-item[open] .faq-icon {
|
||||
transform: rotate(45deg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.faq-answer {
|
||||
padding: 0 24px 24px 56px;
|
||||
}
|
||||
.faq-answer p {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.tech-comparison { grid-template-columns: 1fr; }
|
||||
.tech-col { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
|
||||
.tech-col:last-child { border-bottom: none; }
|
||||
.portfolio-grid-2x2 { grid-template-columns: 1fr; }
|
||||
.pricing-tiers { grid-template-columns: 1fr; max-width: 480px; }
|
||||
.pricing-tier-standard { transform: none; }
|
||||
.pricing-tier-standard:hover { transform: translateY(-4px); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.service-stack-item { grid-template-columns: 1fr; gap: 16px; }
|
||||
.service-stack-num { font-size: 28px; }
|
||||
.hero-actions, .cta-actions { flex-direction: column; }
|
||||
.hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
|
||||
.faq-summary { padding: 16px; gap: 12px; }
|
||||
.faq-q-text { font-size: 16px; }
|
||||
.faq-answer { padding: 0 16px 16px 16px; }
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }
|
||||
|
||||
Reference in New Issue
Block a user