diff --git a/website/src/components/Home/Features/styles.module.css b/website/src/components/Home/Features/styles.module.css index 16bc2f7..129a4ee 100644 --- a/website/src/components/Home/Features/styles.module.css +++ b/website/src/components/Home/Features/styles.module.css @@ -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); } diff --git a/website/src/components/Home/Hero/index.tsx b/website/src/components/Home/Hero/index.tsx index 1c572ea..75b7e56 100644 --- a/website/src/components/Home/Hero/index.tsx +++ b/website/src/components/Home/Hero/index.tsx @@ -66,6 +66,36 @@ function Hero() { ))} +
); diff --git a/website/src/components/Home/Hero/styles.module.css b/website/src/components/Home/Hero/styles.module.css index 9d3af48..e017aac 100644 --- a/website/src/components/Home/Hero/styles.module.css +++ b/website/src/components/Home/Hero/styles.module.css @@ -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%); } /* 미세 그리드 글로우 */ @@ -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; @@ -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; diff --git a/website/src/components/Home/Roadmap/styles.module.css b/website/src/components/Home/Roadmap/styles.module.css index fb9fd13..3a1de9a 100644 --- a/website/src/components/Home/Roadmap/styles.module.css +++ b/website/src/components/Home/Roadmap/styles.module.css @@ -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); } diff --git a/website/src/components/Home/Showcase/styles.module.css b/website/src/components/Home/Showcase/styles.module.css index d43a7b3..700e992 100644 --- a/website/src/components/Home/Showcase/styles.module.css +++ b/website/src/components/Home/Showcase/styles.module.css @@ -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); } diff --git a/website/src/components/Home/WhyKwg/styles.module.css b/website/src/components/Home/WhyKwg/styles.module.css index 71ebad4..571931d 100644 --- a/website/src/components/Home/WhyKwg/styles.module.css +++ b/website/src/components/Home/WhyKwg/styles.module.css @@ -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); } diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 7734773..7ee36a8 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -38,7 +38,7 @@ var(--ifm-color-emphasis-100) 100% ); - --space-section: 5rem; + --space-section: 6rem; --brand: var(--ifm-color-primary); --dark: #282c34;