diff --git a/templates/company-home/src/images/biz-digital.png b/templates/company-home/src/images/biz-digital.png new file mode 100644 index 0000000..7445c6b Binary files /dev/null and b/templates/company-home/src/images/biz-digital.png differ diff --git a/templates/company-home/src/images/biz-field.png b/templates/company-home/src/images/biz-field.png new file mode 100644 index 0000000..b75c74e Binary files /dev/null and b/templates/company-home/src/images/biz-field.png differ diff --git a/templates/company-home/src/images/biz-ops.png b/templates/company-home/src/images/biz-ops.png new file mode 100644 index 0000000..8b085ac Binary files /dev/null and b/templates/company-home/src/images/biz-ops.png differ diff --git a/templates/company-home/src/images/hero.png b/templates/company-home/src/images/hero.png new file mode 100644 index 0000000..f9db079 Binary files /dev/null and b/templates/company-home/src/images/hero.png differ diff --git a/templates/company-home/src/images/office.png b/templates/company-home/src/images/office.png new file mode 100644 index 0000000..32edfc7 Binary files /dev/null and b/templates/company-home/src/images/office.png differ diff --git a/templates/company-home/src/index.html b/templates/company-home/src/index.html new file mode 100644 index 0000000..e36b7a6 --- /dev/null +++ b/templates/company-home/src/index.html @@ -0,0 +1,202 @@ + + + + + + 바탕 — 현장이 바탕이 되는 회사 + + + + + + + +
+
+ +
+ Since 2014 +

흩어진 일을
한 흐름으로 잇습니다

+

현장에서 쌓인 운영과 화면 위의 시스템을 같은 언어로 맞춥니다. 바탕은 그 사이를 메우는 회사입니다.

+ +
+
+ +
+
+
12년함께 일한 해
+
86진행 중인 프로젝트
+
210구성원
+
14협력 도시
+
+
+ +
+
+
+

회사 소개

+

바탕은 운영 컨설팅에서 시작해, 현장의 말이 시스템에 그대로 남도록 디지털과 실행을 한 팀에서 합니다.

+

기획만 넘기거나 화면만 만들지 않습니다. 돌아가는 날까지 같이 남습니다.

+
+
    +
  1. 바탕 설립. 유통 현장 운영 컨설팅으로 시작
  2. +
  3. 디지털 전환 팀을 내부에 둠
  4. +
  5. 물류·공공 현장 운영 사업 시작
  6. +
  7. 서울·부산 오피스, 구성원 200명 넘어섬
  8. +
+
+
+ +
+
+
+
+

사업 영역

+

한 프로젝트를 세 팀이 나눠 맡지 않습니다. 처음부터 같이 봅니다.

+
+
+
+
+
+
+

운영 컨설팅

+

재고, 교대, 점포 동선을 현장에서 다시 그립니다. 보고서로 끝나지 않고 한 달 뒤 숫자까지 봅니다.

+
+
+
+
+
+

디지털 전환

+

쓰는 사람이 아침에 켜는 화면을 만듭니다. 기존 시스템과 맞물리는 범위만 바꿉니다.

+
+
+
+
+
+

현장 운영

+

물류 센터와 공공 창구에 사람을 붙입니다. 바쁜 시즌에는 바탕이 먼저 들어갑니다.

+
+
+
+
+
+ +
+ +
+ +
+
+
+
+

같이 남을 사람을 찾습니다

+

한 주를 버티는 사람이 아니라, 다음 시즌을 같이 설계할 사람을 뽑습니다. 경력보다 현장에서 한 말을 어떻게 남겼는지를 먼저 봅니다.

+
    +
  • 운영 컨설턴트 · 서울
  • +
  • 현장 매니저 · 부산
  • +
  • 프로덕트 디자이너 · 서울
  • +
+ 채용 문의 +
+
+
+ +
+
+
+

문의

+

프로젝트와 채용은 메일로 주시면 두 영업일 안에 답합니다.

+
+
전화
02-0000-0000
+ +
서울
서울특별시 어딘가 77, 8층
+
부산
부산광역시 어딘가 12, 3층
+
+
+
+ + + + + +
+
+
+
+ + + + + + diff --git a/templates/company-home/src/main.js b/templates/company-home/src/main.js new file mode 100644 index 0000000..d354456 --- /dev/null +++ b/templates/company-home/src/main.js @@ -0,0 +1,32 @@ +// 소식 분류 필터. +// 카드에 data-category 만 맞추면 이 파일은 고치지 않아도 된다. +const filters = document.querySelectorAll('.filter'); +const items = document.querySelectorAll('.news-item'); +const empty = document.querySelector('.empty'); + +function apply(category) { + let shown = 0; + items.forEach((item) => { + const match = category === 'all' || item.dataset.category === category; + item.hidden = !match; + if (match) shown += 1; + }); + if (empty) empty.hidden = shown > 0; +} + +filters.forEach((button) => { + button.addEventListener('click', () => { + filters.forEach((other) => other.setAttribute('aria-pressed', String(other === button))); + apply(button.dataset.filter ?? 'all'); + }); +}); + +// 문의 폼은 예시라 서버로 보내지 않는다. 보낸 것처럼만 보여 준다. +const form = document.querySelector('.inquiry'); +const note = document.querySelector('.form-note'); + +form?.addEventListener('submit', (event) => { + event.preventDefault(); + if (note) note.hidden = false; + form.reset(); +}); diff --git a/templates/company-home/src/styles.css b/templates/company-home/src/styles.css new file mode 100644 index 0000000..7e69e7f --- /dev/null +++ b/templates/company-home/src/styles.css @@ -0,0 +1,178 @@ +/* 디자인 토큰 — 색이나 둥글기를 바꾸려면 여기만 고치면 된다. */ +:root { + --ink: #122033; + --ink-soft: #5c6b7a; + --line: #e2e6ea; + --bg: #f6f7f9; + --surface: #ffffff; + --accent: #0d4f7a; + --accent-ink: #ffffff; + --radius: 12px; + --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; + --wrap: 70rem; + color-scheme: light; +} + +* { box-sizing: border-box; } + +body { + margin: 0; + font-family: var(--font); + color: var(--ink); + background: var(--bg); + line-height: 1.65; + -webkit-font-smoothing: antialiased; +} + +.wrap { width: min(100% - 2.25rem, var(--wrap)); margin-inline: auto; } +a { color: inherit; } + +.site-header { + position: sticky; top: 0; z-index: 20; + background: color-mix(in srgb, var(--surface) 90%, transparent); + backdrop-filter: blur(12px); + border-bottom: 1px solid var(--line); +} +.header-bar { + display: flex; align-items: center; justify-content: space-between; height: 4rem; +} +.brand { font-weight: 800; letter-spacing: -.03em; text-decoration: none; font-size: 1.15rem; } +.site-nav { display: flex; align-items: center; gap: 1.25rem; } +.site-nav a:not(.btn) { text-decoration: none; color: var(--ink-soft); font-size: .95rem; } +.site-nav a:not(.btn):hover { color: var(--ink); } + +.btn { + display: inline-block; padding: .7rem 1.2rem; border-radius: 8px; + background: var(--accent); color: var(--accent-ink); text-decoration: none; + font: inherit; font-weight: 700; font-size: .925rem; border: 0; cursor: pointer; +} +.btn:hover { filter: brightness(1.08); } +.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); } + +.hero { + position: relative; min-height: min(78vh, 42rem); + display: grid; align-items: end; color: #f4f7fb; + background: #122033; +} +.hero-photo { + position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; +} +.hero::after { + content: ""; position: absolute; inset: 0; + background: linear-gradient(180deg, rgba(18, 32, 51, .25) 10%, rgba(18, 32, 51, .78) 100%); +} +.hero-copy { position: relative; z-index: 1; padding: clamp(4rem, 10vw, 7rem) 0 3.5rem; } +.eyebrow { + display: inline-block; margin-bottom: 1rem; font-size: .8rem; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; color: #c9d6e4; +} +.hero h1 { + margin: 0 0 1rem; font-size: clamp(2.1rem, 5.4vw, 3.6rem); + line-height: 1.15; letter-spacing: -.035em; +} +.hero p { margin: 0 0 1.75rem; max-width: 36rem; color: #d5deea; font-size: 1.05rem; } +.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; } + +.stats { background: var(--ink); color: #f4f7fb; } +.stats-row { + display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; + padding: 2rem 0; +} +.stat strong { display: block; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; } +.stat span { color: #9aabbc; font-size: .9rem; } + +.section { padding: clamp(3rem, 7vw, 5rem) 0; } +.section-head { + display: flex; justify-content: space-between; align-items: flex-end; + gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; +} +.section h2, .about h2, .careers h2, .contact h2 { + margin: 0 0 .45rem; font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.03em; +} +.section-head p, .about p, .careers p, .contact > .wrap > div > p { margin: 0 0 1rem; color: var(--ink-soft); } + +.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } +.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } +.timeline li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; } +.timeline time { font-weight: 700; color: var(--accent); font-size: .9rem; } + +.thumb { position: relative; overflow: hidden; background: #d8dee6; } +.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } + +.biz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; } +.biz { + background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; +} +.biz .thumb { aspect-ratio: 4 / 3; } +.biz-body { padding: 1.2rem 1.2rem 1.4rem; } +.biz h3 { margin: 0 0 .45rem; font-size: 1.08rem; letter-spacing: -.02em; } +.biz p { margin: 0; color: var(--ink-soft); font-size: .95rem; } + +.filters { display: flex; gap: .4rem; flex-wrap: wrap; } +.filter { + border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); + padding: .42rem .9rem; border-radius: 99px; font: inherit; font-size: .85rem; cursor: pointer; +} +.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } + +.news-list { display: grid; gap: .7rem; } +.news-item { + display: grid; grid-template-columns: 6.5rem auto 1fr; gap: .6rem 1rem; align-items: baseline; + background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); + padding: 1.1rem 1.25rem; text-decoration: none; +} +.news-item[hidden] { display: none; } +.news-item:hover { border-color: #c5ced6; } +.news-item time { color: var(--ink-soft); font-size: .85rem; } +.tag { + font-size: .75rem; font-weight: 700; color: var(--accent); + border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); + border-radius: 99px; padding: .12rem .5rem; +} +.news-item h3 { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; letter-spacing: -.02em; } +.news-item p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .92rem; } +.empty { color: var(--ink-soft); } +.empty[hidden] { display: none; } + +.careers { background: var(--surface); } +.careers-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } +.careers-photo { aspect-ratio: 16 / 10; border-radius: var(--radius); } +.careers-photo img { position: absolute; inset: 0; } +.roles { margin: 0 0 1.5rem; padding-left: 1.1rem; color: var(--ink); } +.roles li { margin: .35rem 0; } + +.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } +.info { margin: 1.5rem 0 0; display: grid; gap: .85rem; } +.info div { display: grid; grid-template-columns: 4rem 1fr; gap: .75rem; } +.info dt { color: var(--ink-soft); font-weight: 500; } +.info dd { margin: 0; } +.info a { text-decoration: none; } + +.inquiry { + display: grid; gap: .75rem; background: var(--surface); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; +} +.inquiry label { display: grid; gap: .35rem; font-size: .85rem; color: var(--ink-soft); } +.inquiry input, .inquiry textarea { + width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); + border-radius: 8px; font: inherit; color: var(--ink); background: #fff; +} +.inquiry input:focus, .inquiry textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } +.form-note { margin: 0; color: var(--ink-soft); font-size: .85rem; } +.form-note[hidden] { display: none; } + +.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0; color: var(--ink-soft); font-size: .9rem; } +.footer-grid { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } +.footer-grid p { margin: .2rem 0; } +.footer-links { display: flex; gap: 1.1rem; } +.footer-links a { text-decoration: none; } +.footer-links a:hover { color: var(--ink); } +.copyright { margin: 1.5rem 0 0; font-size: .8rem; } + +@media (max-width: 860px) { + .site-nav a:not(.btn) { display: none; } + .stats-row, .about-grid, .biz-row, .careers-grid, .contact-grid { grid-template-columns: 1fr; } + .news-item { grid-template-columns: auto 1fr; } + .news-item time { grid-column: 1; } + .news-item .tag { grid-column: 2; justify-self: start; } +} diff --git a/templates/company-home/template.json b/templates/company-home/template.json new file mode 100644 index 0000000..cae12bb --- /dev/null +++ b/templates/company-home/template.json @@ -0,0 +1,19 @@ +{ + "id": "company-home", + "name": "기업 소개 홈", + "description": "회사 소개·사업 영역·소식·채용으로 이어지는 기업 홈", + "tags": ["company", "corporate", "one-page"], + "stack": "vanilla", + "entry": "index.html", + "contentHints": [ + { "key": "brand", "where": "index.html", "desc": "상단 브랜드명과 푸터 상호" }, + { "key": "hero", "where": "index.html", "desc": "히어로 제목·부제·버튼. 사진은 images/hero.png" }, + { "key": "stats", "where": "index.html", "desc": "숫자 지표 4개" }, + { "key": "about", "where": "index.html", "desc": "회사 소개 문단과 연혁 목록" }, + { "key": "business", "where": "index.html", "desc": "사업 영역 카드 3개. 사진은 images/biz-*.png" }, + { "key": "news", "where": "index.html", "desc": "소식 카드. data-category 가 필터와 같아야 한다" }, + { "key": "careers", "where": "index.html", "desc": "채용 안내 제목·문장·버튼" }, + { "key": "contact", "where": "index.html", "desc": "주소·전화·이메일" }, + { "key": "theme", "where": "styles.css", "desc": ":root 의 색·라운드·폰트 토큰" } + ] +}