Skip to content

Commit b02fd3f

Browse files
smitug01claude
smitug01
and
claude
committed
Redesign footer brand block and adopt design's latest services section
Footer: - Reorder to logo -> identity (company name + VAT) -> status badge -> social - Drop the arbitrary full-width divider; even 20px vertical rhythm - Status is now a compact rounded badge instead of prominent body text Services ("Multiple ways to put our infrastructure to work"): - Rename title (EN + ZH); was "Three ways..." - Add Cloud Computing (VPS) as service 02, renumber Colocation/IP Transit - Replace pricing-card grid with the design's row-list layout - Remove all currency/price fields from i18n; link VPS row to taiwan-vps Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 7f661ae commit b02fd3f

4 files changed

Lines changed: 89 additions & 75 deletions

File tree

‎components.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -232,17 +232,17 @@ function Footer({ t, go }) {
232232
<div className="ftr-top wrap-wide" data-comment-anchor="a2b78814b3-div-232-7">
233233
<div className="ftr-brand" data-comment-anchor="be9b4b041e-div-246-9">
234234
<img src={(window.__resources && window.__resources.logoSticker) || "public/logo-sticker.png"} alt="Simple Information" className="ftr-logo" />
235-
<a href="https://lg.simple.taipei" target="_blank" rel="noopener noreferrer" className="ftr-status">
236-
<span className="status-dot"></span>
237-
<span className="kbd">{f.status}</span>
238-
</a>
239235
<div className="ftr-brand-co">
240236
<p className="ftr-co">{f.companyName}</p>
241237
<button className="ftr-tax" onClick={copyTax} data-comment-anchor="ca1aebdde6-button-242-13">
242238
<span>{f.taxId}: {taxId}</span>
243239
<Icon name={copied ? "check" : "copy"} className="ftr-tax-ico" style={copied ? { color: "var(--accent)" } : null} />
244240
</button>
245241
</div>
242+
<a href="https://lg.simple.taipei" target="_blank" rel="noopener noreferrer" className="ftr-status">
243+
<span className="status-dot"></span>
244+
<span className="kbd">{f.status}</span>
245+
</a>
246246
<div className="ftr-social">
247247
<a href="https://www.linkedin.com/company/simple-information/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="icon-btn"><Icon name="linkedin" /></a>
248248
<a href="https://github.com/simple-taipei" target="_blank" rel="noopener noreferrer" aria-label="GitHub" className="icon-btn"><Icon name="github" /></a>

‎home.jsx‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -66,30 +66,18 @@ function HomePage({ t, motif, go }) {
6666
<Reveal><Eyebrow>{h.servicesEyebrow}</Eyebrow></Reveal>
6767
<Reveal delay={60}><h2 className="sec-title" data-comment-anchor="d739657876-h2-67-32">{h.servicesTitle}</h2></Reveal>
6868
</div>
69-
<div className="svc-grid">
69+
<div className="svc-list">
7070
{h.services.map((s, i) =>
71-
<Reveal key={i} delay={i * 90} className="svc-card card">
72-
<div className="svc-top">
73-
<span className="svc-tag kbd">{s.tag}</span>
74-
<span className="svc-ico"><Icon name={s.icon} /></span>
75-
</div>
76-
<h3 className="svc-title">{s.title}</h3>
77-
<p className="svc-desc">{s.desc}</p>
78-
<dl className="svc-specs">
79-
{s.specs.map((sp, j) =>
80-
<div className="svc-spec" key={j}>
81-
<dt>{sp[0]}</dt>
82-
<dd>{sp[1]}</dd>
83-
</div>
84-
)}
85-
</dl>
86-
<div className="svc-foot">
87-
<div className="svc-price">
88-
<span className="svc-price-pre kbd">{s.price}</span>
89-
<span className="svc-price-v">{s.priceVal}<span className="svc-price-u">{s.priceUnit}</span></span>
90-
</div>
91-
<a href={s.link} target="_blank" rel="noopener noreferrer" className="btn svc-btn">{h.learnMore}<Icon name="arrowUpRight" /></a>
71+
<Reveal key={i} delay={i * 70} className="svc-row">
72+
<span className="svc-row-ico"><Icon name={s.icon} /></span>
73+
<div className="svc-row-body">
74+
<span className="svc-row-tag kbd">{s.tag}</span>
75+
<h3 className="svc-row-title">{s.title}</h3>
76+
<p className="svc-row-desc">{s.desc}</p>
9277
</div>
78+
<a href={s.link} target="_blank" rel="noopener noreferrer" className="svc-row-cta">
79+
{h.learnMore}<Icon name="arrowUpRight" />
80+
</a>
9381
</Reveal>
9482
)}
9583
</div>

‎i18n.js‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ window.I18N = {
4343
items: [
4444
{ name: "Fast-Line", img: (window.__resources && window.__resources.coopFastLine) || "public/coop/fast-line.webp", href: "https://www.fast-line.tw", role: "Connectivity partner" },
4545
{ name: "Sky Digital", img: (window.__resources && window.__resources.coopSkyDigital) || "public/coop/skydigital.webp", href: "https://store.imcloud.tw/", role: "Connectivity partner" },
46-
{ name: "TWDS", img: (window.__resources && window.__resources.coopTWDS) || "public/coop/twds.webp", href: "https://www.twds.com.tw/", role: "Connectivity partner" },
46+
{ name: "Taiwan Digital Streaming", img: (window.__resources && window.__resources.coopTWDS) || "public/coop/twds.webp", href: "https://www.twds.com.tw/", role: "Connectivity partner" },
4747
],
4848
},
4949
home: {
@@ -68,7 +68,7 @@ window.I18N = {
6868
{ t: "Answerable to you", d: "A 24/7 SOC, transparent SLAs and people who pick up the phone. Simple to reach, simple to trust." },
6969
],
7070
servicesEyebrow: "What we run",
71-
servicesTitle: "Three ways to put our infrastructure to work",
71+
servicesTitle: "Multiple ways to put our infrastructure to work",
7272
services: [
7373
{
7474
tag: "01", icon: "server",
@@ -80,11 +80,22 @@ window.I18N = {
8080
["Storage", "SSD / HDD options"],
8181
["Bandwidth", "100 Mbps – 10 Gbps"],
8282
],
83-
price: "from", priceVal: "US$210", priceUnit: "/mo",
8483
link: "https://portal.simple.taipei/index.php?rp=/store/taiwan-dedicated-server",
8584
},
8685
{
87-
tag: "02", icon: "rack",
86+
tag: "02", icon: "bolt",
87+
title: "Cloud Computing",
88+
desc: "Flexible virtual private servers on our own hardware — spin up in minutes with full root access and predictable pricing.",
89+
specs: [
90+
["vCPU", "2 – 32 cores"],
91+
["RAM", "2 – 128 GB"],
92+
["Storage", "NVMe SSD"],
93+
["Bandwidth", "Burstable up to 10 Gbps"],
94+
],
95+
link: "https://portal.simple.taipei/index.php?rp=/store/taiwan-vps",
96+
},
97+
{
98+
tag: "03", icon: "rack",
8899
title: "Colocation",
89100
desc: "Secure, reliable colocation in our state-of-the-art data centers.",
90101
specs: [
@@ -93,11 +104,10 @@ window.I18N = {
93104
["Cooling", "N+1 Cooling"],
94105
["Security", "24/7 Manned Security"],
95106
],
96-
price: "from", priceVal: "US$108", priceUnit: "/mo",
97107
link: "https://portal.simple.taipei/index.php?rp=/store/server-colocation-taiwan",
98108
},
99109
{
100-
tag: "03", icon: "globe",
110+
tag: "04", icon: "globe",
101111
title: "IP Transit",
102112
desc: "High-speed, low-latency IP transit for global connectivity.",
103113
specs: [
@@ -106,7 +116,6 @@ window.I18N = {
106116
["Routing", "Juniper, Cisco"],
107117
["Support", "24/7 SOC"],
108118
],
109-
price: "from", priceVal: "US$0.3", priceUnit: "/Mbps/mo",
110119
link: "https://portal.simple.taipei/index.php?rp=/store/network-service-global",
111120
},
112121
],
@@ -279,7 +288,7 @@ window.I18N = {
279288
{ t: "以服務品質負責", d: "提供 24/7 資安維運中心（SOC）與透明的服務條款，並由專業團隊即時回應，值得企業長期信賴。" },
280289
],
281290
servicesEyebrow: "我們經營的",
282-
servicesTitle: "三種方案，靈活運用我們的基礎設施",
291+
servicesTitle: "多種方案，靈活運用我們的基礎設施",
283292
services: [
284293
{
285294
tag: "01", icon: "server",
@@ -291,11 +300,22 @@ window.I18N = {
291300
["儲存空間", "SSD / HDD 可選"],
292301
["頻寬", "100 Mbps – 10 Gbps"],
293302
],
294-
price: "每月", priceVal: "NT$6,800", priceUnit: "起",
295303
link: "https://portal.simple.taipei/index.php?rp=/store/taiwan-dedicated-server",
296304
},
297305
{
298-
tag: "02", icon: "rack",
306+
tag: "02", icon: "bolt",
307+
title: "雲端運算",
308+
desc: "建立於自有硬體上的彈性虛擬私人伺服器，數分鐘內即可啟動，提供完整 root 權限與透明的計價方式。",
309+
specs: [
310+
["vCPU", "2 – 32 核心"],
311+
["記憶體", "2 – 128 GB"],
312+
["儲存空間", "NVMe SSD"],
313+
["頻寬", "突發最高 10 Gbps"],
314+
],
315+
link: "https://portal.simple.taipei/index.php?rp=/store/taiwan-vps",
316+
},
317+
{
318+
tag: "03", icon: "rack",
299319
title: "主機託管",
300320
desc: "於先進資料中心提供安全可靠的主機代管服務。",
301321
specs: [
@@ -304,11 +324,10 @@ window.I18N = {
304324
["冷卻", "N+1 冷卻"],
305325
["安全", "24/7 人員駐守"],
306326
],
307-
price: "每月", priceVal: "NT$3,500", priceUnit: "起",
308327
link: "https://portal.simple.taipei/index.php?rp=/store/server-colocation-taiwan",
309328
},
310329
{
311-
tag: "03", icon: "globe",
330+
tag: "04", icon: "globe",
312331
title: "IP Transit",
313332
desc: "提供高速、低延遲的 IP Transit 服務，實現全球連線。",
314333
specs: [
@@ -317,7 +336,6 @@ window.I18N = {
317336
["路由", "Juniper, Cisco"],
318337
["支援", "24/7 SOC"],
319338
],
320-
price: "每月", priceVal: "NT$10", priceUnit: "/Mbps 起",
321339
link: "https://portal.simple.taipei/index.php?rp=/store/network-service-global",
322340
},
323341
],

‎layout.css‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -244,29 +244,35 @@
244244
/* ============================================================
245245
SERVICES
246246
============================================================ */
247-
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
248-
.svc-card { padding: 28px; display: flex; flex-direction: column; }
249-
.svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--line-2); }
250-
.svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
251-
.svc-tag { font-size: 13px; color: var(--ink-3); }
252-
.svc-ico {
253-
width: 48px; height: 48px; border-radius: 12px;
254-
display: inline-flex; align-items: center; justify-content: center;
255-
background: var(--accent-soft); color: var(--accent);
247+
.svc-list { display: flex; flex-direction: column; margin-top: 48px; }
248+
.svc-row {
249+
display: grid;
250+
grid-template-columns: 56px 1fr auto;
251+
align-items: center;
252+
gap: 36px;
253+
padding: 28px 0;
254+
border-top: 1px solid var(--line);
255+
}
256+
.svc-row:last-child { border-bottom: 1px solid var(--line); }
257+
.svc-row-ico {
258+
width: 48px; height: 48px; flex-shrink: 0;
259+
display: flex; align-items: center; justify-content: center;
260+
background: var(--surface-2); border: 1px solid var(--line);
261+
border-radius: 12px;
262+
}
263+
.svc-row-ico svg { width: 20px; height: 20px; color: var(--ink-2); }
264+
.svc-row-body { display: flex; flex-direction: column; gap: 4px; }
265+
.svc-row-tag { font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 2px; }
266+
.svc-row-title { font-size: 19px; font-weight: 700; margin: 0; }
267+
.svc-row-desc { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: 64ch; line-height: 1.6; }
268+
.svc-row-cta {
269+
display: inline-flex; align-items: center; gap: 6px;
270+
font-size: 14px; font-weight: 500; color: var(--ink-3);
271+
white-space: nowrap; flex-shrink: 0;
272+
transition: color .18s;
256273
}
257-
.svc-ico svg { width: 24px; height: 24px; }
258-
.svc-title { font-size: 23px; letter-spacing: -.02em; margin-bottom: 8px; }
259-
.svc-desc { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; min-height: 44px; }
260-
.svc-specs { display: flex; flex-direction: column; gap: 0; margin: 0 0 24px; border-top: 1px solid var(--line); }
261-
.svc-spec { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); gap: 14px; }
262-
.svc-spec dt { font-size: 13.5px; color: var(--ink-3); font-weight: 500; }
263-
.svc-spec dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-align: right; }
264-
.svc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
265-
.svc-price { display: flex; flex-direction: column; }
266-
.svc-price-pre { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
267-
.svc-price-v { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
268-
.svc-price-u { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
269-
.svc-btn { padding: 10px 16px; font-size: 14px; }
274+
.svc-row-cta:hover { color: var(--ink); }
275+
.svc-row-cta svg { width: 15px; height: 15px; }
270276

271277
/* ============================================================
272278
FEATURES
@@ -433,22 +439,18 @@
433439
border-bottom: 1px solid var(--line);
434440
align-items: start;
435441
}
436-
.ftr-brand { display: flex; flex-direction: column; align-items: flex-start; }
437-
.ftr-brand-co { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--line); width: 100%; }
442+
.ftr-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
443+
.ftr-brand-co { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
438444
.ftr-spacer { /* intentionally empty */ }
439-
.ftr-logo { height: 28px; width: auto; margin-bottom: 18px; }
440-
.ftr-tag {
441-
font-size: 14px; color: var(--ink-2);
442-
max-width: 30ch; line-height: 1.65; margin-bottom: 16px;
443-
}
444-
.ftr-social { display: flex; gap: 4px; }
445+
.ftr-logo { height: 28px; width: auto; margin: 0; }
446+
.ftr-social { display: flex; gap: 4px; margin: 0; }
445447
.ftr-col h4 {
446448
font-family: var(--font-mono);
447449
font-size: 11.5px; font-weight: 600;
448450
letter-spacing: .1em; text-transform: uppercase;
449451
color: var(--ink-3); margin: 0 0 20px;
450452
}
451-
.ftr-co { font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; }
453+
.ftr-co { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -.01em; }
452454
.ftr-tax {
453455
display: inline-flex; align-items: center; gap: 8px;
454456
width: fit-content; align-self: flex-start;
@@ -479,10 +481,16 @@
479481
.ftr-legal { flex-shrink: 1; min-width: 0; text-align: right; white-space: normal; }
480482

481483
/* footer status pill */
482-
.ftr-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
483-
.ftr-status .kbd { color: var(--ink-2); }
484+
.ftr-status {
485+
display: inline-flex; align-items: center; gap: 8px; margin: 0;
486+
padding: 6px 12px 6px 11px; border-radius: 999px;
487+
background: var(--surface-2); border: 1px solid var(--line);
488+
transition: border-color .2s, background-color .2s;
489+
}
490+
.ftr-status:hover { border-color: var(--line-2); background: var(--surface); }
491+
.ftr-status .kbd { font-size: 11.5px; letter-spacing: .01em; color: var(--ink-2); }
484492
.status-dot {
485-
width: 8px; height: 8px; border-radius: 50%; background: oklch(0.72 0.17 150);
493+
width: 7px; height: 7px; border-radius: 50%; background: oklch(0.72 0.17 150);
486494
box-shadow: 0 0 0 0 oklch(0.72 0.17 150 / .6);
487495
animation: pulse 2.4s infinite; flex-shrink: 0;
488496
}
@@ -619,7 +627,7 @@
619627
@media (max-width: 900px) {
620628
.promise-grid, .faq-wrap, .pt-tag-grid, .rs-phil-grid { grid-template-columns: 1fr; }
621629
.faq-head { position: static; }
622-
.promise-cards, .svc-grid, .feat-grid, .loc-grid, .ptype-grid, .rs-case-grid, .rs-impact-grid, .partner-grid { grid-template-columns: 1fr; }
630+
.promise-cards, .feat-grid, .loc-grid, .ptype-grid, .rs-case-grid, .rs-impact-grid, .partner-grid { grid-template-columns: 1fr; }
623631
.step-grid { grid-template-columns: 1fr; }
624632
.rs-sponsor-card { grid-template-columns: 1fr; }
625633
.rs-sponsor-deco { min-height: 160px; order: -1; }
@@ -641,5 +649,5 @@
641649
.ftr-legal { text-align: left; }
642650
}
643651
@media (min-width: 641px) and (max-width: 900px) {
644-
.promise-cards, .svc-grid, .feat-grid, .loc-grid, .ptype-grid, .rs-case-grid, .rs-impact-grid, .partner-grid { grid-template-columns: repeat(2, 1fr); }
652+
.promise-cards, .feat-grid, .loc-grid, .ptype-grid, .rs-case-grid, .rs-impact-grid, .partner-grid { grid-template-columns: repeat(2, 1fr); }
645653
}

0 commit comments

Comments
 (0)