diff --git a/src/components/BentoTile.astro b/src/components/BentoTile.astro index c1fb16e..1d0c720 100644 --- a/src/components/BentoTile.astro +++ b/src/components/BentoTile.astro @@ -20,7 +20,7 @@ interface Props { span?: 3 | 4 | 5 | 6 | 7 | 8 | 12; rows?: 1 | 2 | 3; - surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral'; + surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'teal-soft' | 'mint' | 'dark' | 'coral'; minHeight?: string; eyebrow?: string; title?: string; @@ -106,6 +106,7 @@ const revealClass = reveal ? 'reveal' : ''; .surface-purple { background: var(--color-purple); border-color: var(--color-purple); color: var(--color-white); } .surface-purple-soft { background: var(--color-purple-soft); border-color: var(--color-purple-soft); } .surface-teal { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); } + .surface-teal-soft { background: var(--color-teal-soft); border-color: var(--color-teal-soft); } .surface-mint { background: var(--color-mint-soft); border-color: var(--color-mint-soft); } .surface-coral { background: var(--color-coral); border-color: var(--color-coral); color: var(--color-white); } .surface-dark { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); } diff --git a/src/pages/index.astro b/src/pages/index.astro index bc3f110..1e8302b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -164,7 +164,7 @@ const featuredPortfolio = portfolio.filter(p => }, { eyebrow: 'วางระบบ Automation', - surface: 'purple', + surface: 'yellow', subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ', objective: 'ลดต้นทุนและเวลา', bullets: [ @@ -175,7 +175,7 @@ const featuredPortfolio = portfolio.filter(p => }, { eyebrow: 'ที่ปรึกษาการตลาดออนไลน์', - surface: 'coral', + surface: 'purple-soft', subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ', objective: 'เพิ่มยอดขาย', bullets: [ @@ -186,7 +186,7 @@ const featuredPortfolio = portfolio.filter(p => }, { eyebrow: 'พัฒนาเว็บไซต์', - surface: 'purple-soft', + surface: 'teal-soft', subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง', objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ', bullets: [ @@ -402,15 +402,7 @@ const featuredPortfolio = portfolio.filter(p => opacity: 0.4; } - /* Light text on dark service tiles */ - .surface-purple .mega-subtitle, - .surface-purple .mega-bullets, - .surface-purple .mega-bullets li::before, - .surface-coral .mega-subtitle, - .surface-coral .mega-bullets, - .surface-coral .mega-bullets li::before { - color: rgba(255, 255, 255, 0.95); - } + /* Light text on dark service tiles — currently none used (teal-soft is light) */ .surface-soft .mega-subtitle { color: var(--color-gray-700); } .mega-objective { display: inline-flex;