timmy/42_104
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add studio-sample demo pages

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Timmy
2026-06-23 19:40:25 +08:00
parent a0b1486b56
commit 2c4d4b7ddc
6 changed files with 2685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

663
caddy/www/studio-sample/services.html Normal file
View File

@@ -0,0 +1,663 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services — Studio Sample</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
"Noto Sans TC", system-ui, sans-serif;
background-color: #ffffff;
color: #333333;
line-height: 1.6;
}
/* ─── NAV ─────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(16px, 5vw, 64px);
height: 56px;
}
.nav-logo {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
text-decoration: none;
}
.nav-links {
display: flex;
gap: clamp(16px, 3vw, 40px);
list-style: none;
}
.nav-links a {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: #e53935; }
/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 96px) clamp(32px, 4vw, 48px);
background: #f7f7f7;
border-bottom: 1px solid #eeeeee;
}
.page-header-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #e53935;
margin-bottom: 12px;
}
.page-header-title {
font-size: clamp(32px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.02em;
color: #111111;
line-height: 1.1;
margin-bottom: 16px;
}
.page-header-lead {
font-size: clamp(14px, 1.5vw, 17px);
color: #666666;
max-width: 38em;
}
/* ─── SECTION COMMON ──────────────────────────────────── */
section {
padding: clamp(56px, 8vw, 96px) clamp(24px, 8vw, 96px);
}
.section-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #e53935;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 800;
letter-spacing: -0.01em;
color: #111111;
margin-bottom: 16px;
}
.section-lead {
font-size: clamp(14px, 1.5vw, 17px);
color: #666666;
max-width: 42em;
margin-bottom: 48px;
}
/* ─── SERVICE BLOCKS ──────────────────────────────────── */
#services { background: #ffffff; }
.service-block {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(32px, 6vw, 80px);
padding: clamp(32px, 4vw, 56px) 0;
border-top: 1px solid #eeeeee;
align-items: start;
}
.service-block:first-of-type {
border-top: 2px solid #e53935;
}
@media (max-width: 640px) {
.service-block { grid-template-columns: 1fr; }
}
.service-index {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: #e53935;
text-transform: uppercase;
}
.service-name {
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 800;
color: #111111;
letter-spacing: -0.01em;
margin: 12px 0 0;
}
.service-detail h4 {
font-size: clamp(14px, 1.4vw, 16px);
font-weight: 700;
color: #111111;
margin-bottom: 8px;
}
.service-detail p {
font-size: clamp(13px, 1.3vw, 15px);
color: #666666;
line-height: 1.8;
margin-bottom: 24px;
}
.deliverables {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.deliverables li {
font-size: 13px;
color: #444444;
padding-left: 20px;
position: relative;
}
.deliverables li::before {
content: "—";
position: absolute;
left: 0;
color: #e53935;
font-weight: 700;
}
.service-note {
font-size: 12px;
color: #aaaaaa;
border-left: 2px solid #eeeeee;
padding-left: 12px;
line-height: 1.6;
}
/* ─── PRICING ─────────────────────────────────────────── */
#pricing { background: #f7f7f7; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2px;
background: #e0e0e0;
border: 2px solid #e0e0e0;
}
.pricing-card {
background: #ffffff;
padding: clamp(28px, 3.5vw, 44px) clamp(24px, 2.5vw, 36px);
}
.pricing-card.highlighted {
background: #111111;
}
.pricing-tier {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #e53935;
margin-bottom: 16px;
}
.pricing-price {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 900;
color: #111111;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.pricing-card.highlighted .pricing-price {
color: #ffffff;
}
.pricing-unit {
font-size: 13px;
color: #aaaaaa;
margin-bottom: 20px;
}
.pricing-desc {
font-size: clamp(13px, 1.3vw, 14px);
color: #666666;
line-height: 1.7;
margin-bottom: 24px;
}
.pricing-card.highlighted .pricing-desc {
color: #999999;
}
.pricing-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.pricing-features li {
font-size: 13px;
color: #444444;
padding-left: 20px;
position: relative;
}
.pricing-card.highlighted .pricing-features li {
color: #aaaaaa;
}
.pricing-features li::before {
content: "✓";
position: absolute;
left: 0;
color: #e53935;
font-weight: 700;
font-size: 12px;
}
/* ─── FAQ ─────────────────────────────────────────────── */
#faq { background: #ffffff; }
.faq-list {
max-width: 720px;
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-top: 1px solid #eeeeee;
padding: 20px 0;
}
.faq-item:last-child {
border-bottom: 1px solid #eeeeee;
}
.faq-q {
font-size: clamp(15px, 1.5vw, 17px);
font-weight: 700;
color: #111111;
margin-bottom: 10px;
}
.faq-a {
font-size: clamp(13px, 1.3vw, 15px);
color: #666666;
line-height: 1.8;
}
/* ─── BTN ─────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 14px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #e53935;
transition: background 0.2s, color 0.2s;
}
.btn-primary { background: #e53935; color: #ffffff; }
.btn-primary:hover { background: #c62828; border-color: #c62828; }
/* ─── CTA STRIP ───────────────────────────────────────── */
.cta-strip {
background: #e53935;
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-strip-text h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.cta-strip-text p {
font-size: clamp(13px, 1.3vw, 15px);
color: rgba(255,255,255,0.7);
}
.btn-white {
background: #ffffff;
color: #e53935;
border-color: #ffffff;
}
.btn-white:hover {
background: #f5f5f5;
border-color: #f5f5f5;
}
/* ─── FOOTER ──────────────────────────────────────────── */
footer {
background: #111111;
padding: 32px clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
}
.footer-nav {
display: flex;
gap: clamp(16px, 3vw, 32px);
list-style: none;
}
.footer-nav a {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.footer-nav a:hover { color: #e53935; }
.footer-copy {
font-size: 12px;
color: #555555;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<!-- ─── NAV ─────────────────────────────────────────────── -->
<nav>
<a class="nav-logo" href="index.html">Studio Sample</a>
<ul class="nav-links">
<li><a href="services.html" class="active">Services</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
<!-- ─── PAGE HEADER ───────────────────────────────────────── -->
<header class="page-header">
<p class="page-header-eyebrow">What We Offer</p>
<h1 class="page-header-title">Design that<br>earns its keep.</h1>
<p class="page-header-lead">
我們提供三種核心服務：品牌識別、網頁設計開發、印刷編輯。每一種都交付完整、可用的成果。<br>
Three disciplines. One standard: finished work that actually works.
</p>
</header>
<!-- ─── SERVICES ──────────────────────────────────────────── -->
<section id="services">
<p class="section-label">Core Services</p>
<h2 class="section-title">What we do,<br>and how.</h2>
<p class="section-lead">以下是我們目前承接的三類專案，以及每類的交付內容說明。</p>
<!-- Branding -->
<div class="service-block">
<div>
<p class="service-index">01 / Branding</p>
<h3 class="service-name">Brand Identity</h3>
</div>
<div class="service-detail">
<h4>適合對象</h4>
<p>新創公司、品牌再造、個人品牌。需要從零打造或徹底重塑視覺識別系統的客戶。</p>
<h4>交付內容</h4>
<ul class="deliverables">
<li>Logo 系統（主標、副標、最小應用版本）</li>
<li>色彩規範（主色、輔色、中性色）</li>
<li>字型規範（標題字、內文字、使用方式）</li>
<li>品牌指引手冊（PDF，可印刷格式）</li>
<li>基礎應用範例（名片、信頭、社群封面）</li>
<li>所有原始檔（AI / SVG / PDF）</li>
</ul>
<p class="service-note">
品牌識別專案通常需要 4–8 週。我們會在概念階段提出 2–3 個方向，與你確認後進入精製。
不接「只改 Logo 顏色」的案子——那不叫品牌設計。
</p>
</div>
</div>
<!-- Web -->
<div class="service-block">
<div>
<p class="service-index">02 / Web</p>
<h3 class="service-name">Web Design<br>& Build</h3>
</div>
<div class="service-detail">
<h4>適合對象</h4>
<p>
需要高品質、快速、易維護靜態網站的客戶。作品集、企業形象、活動宣傳頁、登陸頁。
不承接需要後端或 CMS 的動態網站。
</p>
<h4>交付內容</h4>
<ul class="deliverables">
<li>線框圖與視覺稿（Figma）</li>
<li>響應式 HTML/CSS 實作（無框架依賴）</li>
<li>SEO 基礎設定（meta、OG tags、語意化標籤）</li>
<li>效能優化（Lighthouse 分數 95+）</li>
<li>部署協助（GitHub Pages / Netlify / Vercel）</li>
<li>30 天上線後支援</li>
</ul>
<p class="service-note">
我們故意不用框架。這讓交出來的程式碼你或你的工程師都讀得懂、改得動。
你不會在六個月後因為套件版本問題無法更新網站。
</p>
</div>
</div>
<!-- Print -->
<div class="service-block">
<div>
<p class="service-index">03 / Print</p>
<h3 class="service-name">Print &<br>Editorial</h3>
</div>
<div class="service-detail">
<h4>適合對象</h4>
<p>
需要高品質印刷品的客戶：年報、產品型錄、書籍、雜誌、說明書、包裝、名片與其他印刷品。
</p>
<h4>交付內容</h4>
<ul class="deliverables">
<li>版型設計（網格系統、字型層級）</li>
<li>印前檔案（PDF/X-1a 或依印刷廠規格）</li>
<li>色彩校正（CMYK 轉換、Pantone 對應）</li>
<li>封面設計（如適用）</li>
<li>印刷廠溝通協助</li>
</ul>
<p class="service-note">
如有大量圖片需要修圖或色彩管理，請在詢價時告知。
我們與東京、大阪數家印刷廠有長期合作關係，可協助推薦適合的印刷廠與規格。
</p>
</div>
</div>
</section>
<!-- ─── PRICING ────────────────────────────────────────────── -->
<section id="pricing">
<p class="section-label">Investment</p>
<h2 class="section-title">Simple pricing.<br>No surprises.</h2>
<p class="section-lead">
以下為起始報價參考。實際費用依專案範圍而定，詳細金額在需求確認後提供正式估價。
</p>
<div class="pricing-grid">
<div class="pricing-card">
<p class="pricing-tier">Starter</p>
<p class="pricing-price">¥150K</p>
<p class="pricing-unit">起 / 專案</p>
<p class="pricing-desc">
單一服務的基礎版本。適合範圍明確、時程緊湊的小型專案。
</p>
<ul class="pricing-features">
<li>單一服務（品牌 / 網頁 / 印刷，擇一）</li>
<li>2 輪修改回合</li>
<li>完整原始檔交付</li>
<li>2 週交付（視範圍）</li>
</ul>
</div>
<div class="pricing-card highlighted">
<p class="pricing-tier">Studio</p>
<p class="pricing-price">¥380K</p>
<p class="pricing-unit">起 / 專案</p>
<p class="pricing-desc">
最受歡迎的方案。品牌識別加上對應的線下或線上應用，完整落地。
</p>
<ul class="pricing-features">
<li>品牌識別 + 一項應用（網頁或印刷）</li>
<li>3 輪修改回合</li>
<li>完整原始檔 + 品牌指引</li>
<li>專案週期 6–10 週</li>
<li>上線後 30 天支援</li>
</ul>
</div>
<div class="pricing-card">
<p class="pricing-tier">Full Brand</p>
<p class="pricing-price">Custom</p>
<p class="pricing-unit">依需求報價</p>
<p class="pricing-desc">
全方位品牌建立，涵蓋識別系統、網站與印刷品，適合品牌重塑或完整新創。
</p>
<ul class="pricing-features">
<li>品牌識別 + 網頁 + 印刷品</li>
<li>無限修改（合理範圍內）</li>
<li>優先排程</li>
<li>長期維護方案可選</li>
<li>專屬聯絡窗口</li>
</ul>
</div>
</div>
</section>
<!-- ─── FAQ ───────────────────────────────────────────────── -->
<section id="faq">
<p class="section-label">FAQ</p>
<h2 class="section-title">常見問題</h2>
<p class="section-lead">還有其他疑問，歡迎直接聯繫我們。</p>
<div class="faq-list">
<div class="faq-item">
<p class="faq-q">你們接受海外客戶嗎？</p>
<p class="faq-a">
接受。我們是 Remote-first 工作室，目前服務的客戶遍及日本、台灣、歐洲。
溝通以英文、日文或中文（繁體）進行均可。付款支援電匯與 Stripe。
</p>
</div>
<div class="faq-item">
<p class="faq-q">交付時間大概多久？</p>
<p class="faq-a">
Starter 方案約 2–3 週，Studio 方案約 6–10 週，Full Brand 依範圍另議。
以上為一般情況，若有截止日期需求請在詢價時告知，我們會據實評估是否可行。
</p>
</div>
<div class="faq-item">
<p class="faq-q">修改次數如何計算？</p>
<p class="faq-a">
每輪修改意指：你看過稿件後彙整所有意見，我們一次性回應修改。
每輪不限條數，但請確保同一輪的意見一起提出，而非分批零散傳送。
超出回合數的修改依時間計費（¥12,000 / 小時）。
</p>
</div>
<div class="faq-item">
<p class="faq-q">付款方式與時程？</p>
<p class="faq-a">
標準付款方式：開工前支付 50%，交付完稿後支付剩餘 50%。
大型專案（¥500K 以上）可協商分三期付款。
</p>
</div>
<div class="faq-item">
<p class="faq-q">原始檔版權歸誰？</p>
<p class="faq-a">
款項全額結清後，所有交付物的著作財產權移轉給客戶。
我們保留在作品集中展示的權利，如有保密需求請提前告知，我們可簽署 NDA。
</p>
</div>
<div class="faq-item">
<p class="faq-q">你們現在有空檔嗎？</p>
<p class="faq-a">
我們每次只承接少量專案，以確保每個案子都得到足夠的注意力。
目前的排期狀況請透過聯絡表單詢問，我們會如實告知最早可開始的時間。
</p>
</div>
</div>
</section>
<!-- ─── CTA STRIP ──────────────────────────────────────────── -->
<div class="cta-strip">
<div class="cta-strip-text">
<h2>準備好開始了嗎？</h2>
<p>填寫聯絡表單，告訴我們你的專案。通常兩個工作天內回覆。</p>
</div>
<a class="btn btn-white" href="index.html#contact">Contact Us</a>
</div>
<!-- ─── FOOTER ────────────────────────────────────────────── -->
<footer>
<div class="footer-logo">Studio Sample</div>
<ul class="footer-nav">
<li><a href="services.html">Services</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
</footer>
</body>
</html>