Skip to content

landing Gemini-ification part 2 — deeper tone + refine across all sections + hero product visual #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
haksungjang merged 1 commit into from
Jun 5, 2026
Merged

landing Gemini-ification part 2 — deeper tone + refine across all sections + hero product visual #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions website/src/components/Home/Features/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

.sectionHeader h2 {
margin: 0 0 0.55rem;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ifm-heading-color);
}

Expand Down
30 changes: 30 additions & 0 deletions website/src/components/Home/Hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,36 @@ function Hero() {
</li>
))}
</ul>
<div className={styles.visual} aria-hidden="true">
<div className={styles.window}>
<div className={styles.windowBar}>
<i />
<i />
<i />
<span className={styles.windowTitle}>
agents/03-policy-generator
</span>
</div>
<div className={styles.windowBody}>
<p className={styles.cmd}>
<span className={styles.prompt}>$</span> claude
</p>
<p className={styles.muted}>회사 상황 5개 질문에 답하는 중…</p>
<p className={styles.gen}>
<span className={styles.check}>✓</span> oss-policy.md
</p>
<p className={styles.gen}>
<span className={styles.check}>✓</span> license-allowlist.md
</p>
<div className={styles.chips}>
<span>정책</span>
<span>SBOM</span>
<span>취약점</span>
<span>선언문</span>
</div>
</div>
</div>
</div>
</div>
</header>
);
Expand Down
114 changes: 109 additions & 5 deletions website/src/components/Home/Hero/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,16 @@
overflow: hidden;
background:
radial-gradient(
1100px 460px at 50% -8%,
rgba(66, 133, 244, 0.45),
transparent 62%
820px 360px at 80% 6%,
rgba(139, 110, 246, 0.32),
transparent 60%
),
linear-gradient(158deg, #0e1b3d 0%, #143a82 52%, #1b6fd6 100%);
radial-gradient(
980px 440px at 16% 0%,
rgba(66, 133, 244, 0.42),
transparent 60%
),
linear-gradient(160deg, #0a1230 0%, #0f2a63 52%, #123e92 100%);
}

/* 미세 그리드 글로우 */
Expand Down Expand Up @@ -77,7 +82,7 @@
}

.titleAccent {
background: linear-gradient(90deg, #aecbfa 0%, #8ab4f8 45%, #c2e7ff 100%);
background: linear-gradient(90deg, #aecbfa 0%, #8ab4f8 42%, #c2a8ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
Expand Down Expand Up @@ -171,11 +176,110 @@
transform: translateY(-50%);
}

/* 제품 비주얼 — 에이전트가 산출물을 생성하는 윈도우 목업 */
.visual {
width: 100%;
max-width: 540px;
margin: 3.25rem auto 0;
perspective: 1200px;
}

.window {
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
background: rgba(13, 22, 48, 0.55);
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
overflow: hidden;
text-align: left;
transform: rotateX(6deg);
}

.windowBar {
display: flex;
align-items: center;
gap: 6px;
padding: 0.6rem 0.85rem;
background: rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.windowBar i {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
}

.windowTitle {
margin-left: 0.5rem;
font-family: var(--ifm-font-family-monospace);
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.55);
}

.windowBody {
padding: 1rem 1.1rem 1.2rem;
font-family: var(--ifm-font-family-monospace);
font-size: 0.82rem;
line-height: 1.7;
}

.cmd {
margin: 0;
color: rgba(255, 255, 255, 0.92);
}

.prompt {
color: #8ab4f8;
margin-right: 0.4rem;
}

.muted {
margin: 0;
color: rgba(255, 255, 255, 0.5);
}

.gen {
margin: 0;
color: rgba(255, 255, 255, 0.88);
}

.check {
color: #6ee7a8;
margin-right: 0.45rem;
}

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.85rem;
}

.chips span {
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-family: var(--ifm-font-family-base);
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.85);
background: rgba(138, 180, 248, 0.18);
border: 1px solid rgba(138, 180, 248, 0.3);
}

@media (max-width: 640px) {
.hero {
padding: 5rem 0 4rem;
}

.visual {
margin-top: 2.5rem;
}

.window {
transform: none;
}

.ctas {
flex-direction: column;
align-items: stretch;
Expand Down
6 changes: 3 additions & 3 deletions website/src/components/Home/Roadmap/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@

.sectionHeader h2 {
margin: 0 0 0.55rem;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ifm-heading-color);
}

Expand Down
6 changes: 3 additions & 3 deletions website/src/components/Home/Showcase/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@

.sectionHeader h2 {
margin: 0 0 0.55rem;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ifm-heading-color);
}

Expand Down
6 changes: 3 additions & 3 deletions website/src/components/Home/WhyKwg/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@

.sectionHeader h2 {
margin: 0 0 0.55rem;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ifm-heading-color);
}

Expand Down
2 changes: 1 addition & 1 deletion website/src/css/customTheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
var(--ifm-color-emphasis-100) 100%
);

--space-section: 5rem;
--space-section: 6rem;

--brand: var(--ifm-color-primary);
--dark: #282c34;
Expand Down
Loading