diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 33c46033cc..9ed5942885 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -448,15 +448,57 @@ a.kwg-hero__badge:hover { box-shadow: 0 10px 30px rgba(2, 171, 184, 0.45); } -// 피처 우측 비주얼 컨테이너 (SVG art img를 담는다) +// 피처 우측 비주얼 컨테이너 (참여 기업 로고 표본을 담는다) — Member 페이지로 링크 .kwg-feature__visual { position: relative; min-height: 280px; display: flex; + flex-direction: column; align-items: center; justify-content: center; + gap: $space-3; + text-decoration: none; } -.kwg-feature__visual .kwg-tabs__art { max-width: 360px; } + +// 참여 기업 로고 표본 그리드 — 실제 로고로 커뮤니티 규모를 보여준다(장식용 아이콘 대체) +.kwg-logo-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: $space-3; + width: 100%; + max-width: 420px; + margin: 0; + padding: 0; + list-style: none; + + li { + display: flex; + align-items: center; + justify-content: center; + height: 4rem; + padding: $space-3; + background: #f2f4f5; + border-radius: $border-radius-sm; + transition: box-shadow 0.15s ease; + } + + img { + width: 100%; + height: 100%; + object-fit: contain; + } +} + +.kwg-logo-grid__cta { + display: inline-flex; + align-items: center; + gap: $space-2; + font-size: $text-sm; + color: rgba(255, 255, 255, 0.6); + transition: color 0.15s ease; +} +a.kwg-feature__visual:hover .kwg-logo-grid__cta { color: #fff; } +a.kwg-feature__visual:hover .kwg-logo-grid li { box-shadow: 0 0 0 1px rgba(2, 171, 184, 0.4); } // 가이드 탭 (순수 CSS radio, 세그먼트 컨트롤 스타일) .kwg-tabs { position: relative; text-align: center; } @@ -498,10 +540,7 @@ a.kwg-hero__badge:hover { } .kwg-tabs__panel { display: none; - grid-template-columns: 1fr 1fr; - gap: $space-8; - align-items: center; - max-width: 1140px; + max-width: 680px; margin: 0 auto; padding: $space-8; border-radius: 1.75rem; @@ -512,19 +551,8 @@ a.kwg-hero__badge:hover { text-decoration: none; text-align: left; } +.kwg-tabs__panel .kwg-feature__desc { max-width: none; } .kwg-tabs__panel .kwg-btn-pill { align-self: flex-start; } -.kwg-tabs__visual { - display: flex; - align-items: center; - justify-content: center; - min-height: 170px; -} -.kwg-tabs__art { - width: 100%; - max-width: 320px; - height: auto; - display: block; -} #gt-1:checked ~ .kwg-tabs__nav label[for="gt-1"], #gt-2:checked ~ .kwg-tabs__nav label[for="gt-2"], #gt-3:checked ~ .kwg-tabs__nav label[for="gt-3"], @@ -535,7 +563,7 @@ a.kwg-hero__badge:hover { #gt-1:checked ~ #gp-1, #gt-2:checked ~ #gp-2, #gt-3:checked ~ #gp-3, -#gt-4:checked ~ #gp-4 { display: grid; } +#gt-4:checked ~ #gp-4 { display: block; } // 서브카드(하단): 아이콘 박스 + 텍스트 + pill 링크 (가로형, ai.google.dev식) .kwg-subcard-grid { @@ -638,7 +666,6 @@ a.kwg-hero__badge:hover { #gt-2:checked ~ #gp-2, #gt-3:checked ~ #gp-3, #gt-4:checked ~ #gp-4 { - grid-template-columns: 1fr; padding: 2.5rem; } } diff --git a/layouts/index.html b/layouts/index.html index 5ff0d54926..8ec716b67f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,6 +6,18 @@ */}} {{ define "main" }} {{ $ko := eq .Site.Language.Lang "ko" }} + +{{/* 참여 기업 로고 표본 — 산업군마다 로고 보유 회사를 최대 2곳씩 뽑아 다양성을 확보 */}} +{{ $logoBase := "images/content/about/logo/" }} +{{ $memberData := .Site.Data.members }} +{{ $logoPicks := slice }} +{{ range $memberData.industries }} + {{ $withLogo := where .companies "logo" "!=" nil }} + {{ range first 2 $withLogo }} + {{ $logoPicks = $logoPicks | append . }} + {{ end }} +{{ end }} +
{{ if $ko }}가벼운 대화와 멤버 간 실시간 소통 공간.{{ else }}Casual, real-time conversation among members.{{ end }}
- {{ if $ko }}참여하기{{ else }}Join{{ end }} {{ partial "icon-arrow.html" . }} + {{ if $ko }}멤버는 여기로{{ else }}For members{{ end }} {{ partial "icon-arrow.html" . }}{{ if $ko }}ISO 국제표준에 기반해 기업이 오픈소스를 도입·관리·배포하는 전 과정을 조직·정책·프로세스 관점에서 단계별로 안내합니다.{{ else }}A step-by-step guide to adopting, managing, and distributing open source across organization, policy, and process — grounded in ISO standards.{{ end }}
{{ if $ko }}가이드 보기{{ else }}View guide{{ end }} {{ partial "icon-arrow.html" . }} - @@ -114,9 +129,6 @@{{ if $ko }}오픈소스 라이선스 컴플라이언스 국제표준(OpenChain). 25개 입증자료 항목을 조항별로 풀어 실무 적용을 돕습니다.{{ else }}The international standard for open source license compliance (OpenChain). We break down all 25 evidence items clause by clause.{{ end }}
{{ if $ko }}가이드 보기{{ else }}View guide{{ end }} {{ partial "icon-arrow.html" . }} - @@ -125,9 +137,6 @@{{ if $ko }}오픈소스 보안 보증(OSS Security Assurance) 국제표준. 보안 취약점 대응 체계를 조항별 입증자료로 안내합니다.{{ else }}The international standard for open source security assurance, guiding vulnerability response with clause-level evidence.{{ end }}
{{ if $ko }}가이드 보기{{ else }}View guide{{ end }} {{ partial "icon-arrow.html" . }} - @@ -136,9 +145,6 @@{{ if $ko }}AI 관리 시스템(AIMS) 국제표준을 오픈소스 관점에서 풀어, AI 시스템 개발·운영의 핵심 요구사항을 다룹니다.{{ else }}The AI management system (AIMS) standard from an open source perspective, covering key requirements for AI development and operations.{{ end }}
{{ if $ko }}가이드 보기{{ else }}View guide{{ end }} {{ partial "icon-arrow.html" . }} - diff --git a/static/images/kwg-tab-visual.svg b/static/images/kwg-tab-visual.svg deleted file mode 100644 index c173ffa76c..0000000000 --- a/static/images/kwg-tab-visual.svg +++ /dev/null @@ -1,50 +0,0 @@ - diff --git a/static/images/kwg-viz-ai.svg b/static/images/kwg-viz-ai.svg deleted file mode 100644 index 21277ed988..0000000000 --- a/static/images/kwg-viz-ai.svg +++ /dev/null @@ -1,36 +0,0 @@ - diff --git a/static/images/kwg-viz-community.svg b/static/images/kwg-viz-community.svg deleted file mode 100644 index 5824b831c3..0000000000 --- a/static/images/kwg-viz-community.svg +++ /dev/null @@ -1,36 +0,0 @@ - diff --git a/static/images/kwg-viz-license.svg b/static/images/kwg-viz-license.svg deleted file mode 100644 index 16de4f7c00..0000000000 --- a/static/images/kwg-viz-license.svg +++ /dev/null @@ -1,26 +0,0 @@ - diff --git a/static/images/kwg-viz-security.svg b/static/images/kwg-viz-security.svg deleted file mode 100644 index 51496eaa46..0000000000 --- a/static/images/kwg-viz-security.svg +++ /dev/null @@ -1,24 +0,0 @@ -