로고 및 스타일 변경 반영:
- 로고 사이즈 수정 (114px → 144px) 및 레이아웃 조정 - 컬러 및 폰트 스타일 Figma 가이드 기준 업데이트 - 버튼/배경 스타일 효과 개선 (글래스, 알약 태그 등)
This commit is contained in:
Rinjae
Generated
+47
@@ -8,6 +8,9 @@
|
||||
"name": "eapim-portal",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"playwright": "^1.61.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5"
|
||||
}
|
||||
@@ -349,6 +352,20 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
|
||||
@@ -403,6 +420,36 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.61.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
|
||||
"integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.61.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.61.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
|
||||
"integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
|
||||
|
||||
+4
-1
@@ -13,5 +13,8 @@
|
||||
"sass": "^1.69.5"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"playwright": "^1.61.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -748,12 +748,13 @@ body.design-survey-active .global-header {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
z-index: 350;
|
||||
height: 112px;
|
||||
height: 110px;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
.global-header.index-header {
|
||||
background-color: #E5F8FF;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: none;
|
||||
}
|
||||
.global-header .container {
|
||||
height: 100%;
|
||||
@@ -809,10 +810,10 @@ body.design-survey-active .global-header {
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 23px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--text-dark);
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1463,8 +1464,8 @@ body.design-survey-active .global-header {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
@@ -1655,7 +1656,7 @@ body.design-survey-active .global-header {
|
||||
gap: 16px;
|
||||
}
|
||||
.footer-left .footer-logo {
|
||||
width: 114px;
|
||||
width: 144px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -1667,7 +1668,7 @@ body.design-survey-active .global-header {
|
||||
.footer-left .footer-links .footer-link {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
color: #5F666C;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
@@ -1677,7 +1678,7 @@ body.design-survey-active .global-header {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer-left .footer-links .footer-separator {
|
||||
color: #D1D5DB;
|
||||
color: #5F666C;
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1685,7 +1686,7 @@ body.design-survey-active .global-header {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9CA3AF;
|
||||
color: #5F666C;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -1711,8 +1712,8 @@ body.design-survey-active .global-header {
|
||||
font-weight: 400;
|
||||
color: #5F666C;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D1D5DB;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #5F666C;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
appearance: none;
|
||||
@@ -1736,15 +1737,15 @@ body.design-survey-active .global-header {
|
||||
}
|
||||
.footer-right .footer-contact {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
color: #5F666C;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.footer-right .footer-contact {
|
||||
font-size: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5073,20 +5074,20 @@ select.form-control {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn-box {
|
||||
height: 32px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 6px 16px;
|
||||
color: #212529;
|
||||
gap: 4px;
|
||||
padding: 6px 16px 6px 12px;
|
||||
color: #0046FF;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #0046FF;
|
||||
border-radius: 20px;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
font-weight: 400;
|
||||
font-size: 19px;
|
||||
background: #F2F5F7;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn-box .user-icon {
|
||||
@@ -5094,6 +5095,9 @@ select.form-control {
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.login-btn-box:hover {
|
||||
background: #E9EDF2;
|
||||
}
|
||||
|
||||
.user-profile-dropdown {
|
||||
position: relative;
|
||||
@@ -6973,6 +6977,26 @@ button.djb-comment-submit:disabled {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.landing-top {
|
||||
position: relative;
|
||||
background-color: #D4F0FC;
|
||||
background-image: url("/img/bg_landing_top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: top center;
|
||||
}
|
||||
.landing-top .hero-carousel-section,
|
||||
.landing-top .hero-carousel-container,
|
||||
.landing-top .hero-slide,
|
||||
.landing-top .api-search-section,
|
||||
.landing-top .api-showcase {
|
||||
background: transparent !important;
|
||||
}
|
||||
.landing-top .showcase-background,
|
||||
.landing-top .search-background {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -6984,7 +7008,7 @@ button.djb-comment-submit:disabled {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
overflow: hidden;
|
||||
background-color: #E9F9FF;
|
||||
background: linear-gradient(180deg, #BAF5FA 0%, #76D4FC 100%);
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-carousel-container {
|
||||
@@ -7027,13 +7051,13 @@ button.djb-comment-submit:disabled {
|
||||
visibility: visible;
|
||||
}
|
||||
.hero-slide[data-slide="0"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
.hero-slide[data-slide="1"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
.hero-slide[data-slide="2"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hero-slide-content {
|
||||
@@ -7142,7 +7166,7 @@ button.djb-comment-submit:disabled {
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
background: #2A69DE;
|
||||
color: #FFFFFF;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 20px;
|
||||
@@ -7152,9 +7176,9 @@ button.djb-comment-submit:disabled {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-hero-signup:hover {
|
||||
background: rgb(0, 65.7, 162);
|
||||
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(42, 105, 222, 0.3);
|
||||
}
|
||||
.btn-hero-signup:active {
|
||||
transform: translateY(0);
|
||||
@@ -7369,10 +7393,14 @@ button.djb-comment-submit:disabled {
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
padding: 56px 20px 64px;
|
||||
overflow: visible;
|
||||
background: #e9f9ff;
|
||||
height: 314px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section {
|
||||
padding: 28px 16px 32px;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-background {
|
||||
position: absolute;
|
||||
@@ -7383,70 +7411,52 @@ button.djb-comment-submit:disabled {
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.api-search-section .search-content-wrapper {
|
||||
.api-search-section .search-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1308px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
z-index: 1;
|
||||
gap: 56px;
|
||||
padding: 40px 56px;
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border: 1px solid #FFFFFF;
|
||||
box-shadow: 0 10px 24px rgba(141, 155, 185, 0.25);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-content-wrapper {
|
||||
.api-search-section .search-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
padding-top: 40px;
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-content-wrapper {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding-top: 20px;
|
||||
justify-content: center;
|
||||
.api-search-section .search-card {
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-character {
|
||||
width: 154px;
|
||||
height: 148px;
|
||||
.api-search-section .search-text-content {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.api-search-section .search-character img {
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-text-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-character {
|
||||
width: 120px;
|
||||
height: 115px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-character {
|
||||
width: 68px;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-text-content {
|
||||
text-align: left;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-text-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-text-content {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-title {
|
||||
font-size: 36px;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-title {
|
||||
@@ -7456,31 +7466,93 @@ button.djb-comment-submit:disabled {
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-title {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.3;
|
||||
color: #212529;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-main {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-section {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-label {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-label {
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-input-wrapper {
|
||||
position: relative;
|
||||
.api-search-section .hashtag-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0px 0 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-input-wrapper {
|
||||
padding: 30px 20px 20px;
|
||||
}
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-input-wrapper {
|
||||
justify-content: flex-start;
|
||||
padding: 0px 28px 12px 27px;
|
||||
.api-search-section .hashtag-list {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px;
|
||||
background: #4546CE;
|
||||
color: #FFFFFF;
|
||||
border-radius: 999px;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.api-search-section .hashtag-link:hover {
|
||||
background: rgb(52.7531914894, 53.829787234, 200.2468085106);
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-link {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-separator {
|
||||
display: none;
|
||||
}
|
||||
.api-search-section .search-input-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.api-search-section .search-form {
|
||||
width: 100%;
|
||||
max-width: 816px;
|
||||
}
|
||||
.api-search-section .search-box {
|
||||
position: relative;
|
||||
@@ -7495,16 +7567,16 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-box {
|
||||
height: 60px;
|
||||
border: 4px solid #0049B4;
|
||||
height: 64px;
|
||||
border-width: 4px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-box {
|
||||
height: 36px;
|
||||
border: 3px solid #0049B4;
|
||||
border-radius: 18px;
|
||||
height: 44px;
|
||||
border-width: 3px;
|
||||
border-radius: 22px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
@@ -7519,7 +7591,7 @@ button.djb-comment-submit:disabled {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
padding: 0 20px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.api-search-section .search-input::placeholder {
|
||||
color: #B3B3B3;
|
||||
@@ -7528,18 +7600,14 @@ button.djb-comment-submit:disabled {
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .search-input {
|
||||
font-size: 15px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-input {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.api-search-section .search-input::placeholder {
|
||||
color: #8C959F;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.api-search-section .search-icon-button {
|
||||
@@ -7573,116 +7641,14 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-icon-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .search-icon-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .hashtag-section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-section {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 0 20px 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-label {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-label {
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .hashtag-list {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-list {
|
||||
gap: 8px;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-link {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.api-search-section .hashtag-link:hover {
|
||||
color: #0049B4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .hashtag-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-link {
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
.api-search-section .hashtag-separator {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
user-select: none;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-search-section .hashtag-separator {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-search-section .hashtag-separator {
|
||||
font-size: 10px;
|
||||
color: #212529;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7786,7 +7752,7 @@ button.djb-comment-submit:disabled {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #008ae2;
|
||||
background: #2A69DE;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
@@ -7832,7 +7798,7 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover {
|
||||
background: rgb(0, 124.2, 203.4);
|
||||
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover svg {
|
||||
transform: translateX(4px);
|
||||
@@ -7867,14 +7833,41 @@ button.djb-comment-submit:disabled {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
gap: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.api-showcase .api-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(180deg, #50CAFF 0%, #2088FF 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.api-showcase .api-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.api-showcase .api-card .card-title,
|
||||
.api-showcase .api-card .card-description {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.api-showcase .api-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
border-color: #008ae2;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 28px rgba(0, 14, 27, 0.22);
|
||||
}
|
||||
.api-showcase .api-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.api-showcase .api-card:hover .card-title,
|
||||
.api-showcase .api-card:hover .card-description {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-showcase .api-card {
|
||||
@@ -7964,12 +7957,26 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
.info-section .info-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/img/bg_api_intro.svg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 54%;
|
||||
background-image: url("/img/bg_diff_card.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.info-section .info-background {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-section .info-background {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.info-section .container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -8022,7 +8029,7 @@ button.djb-comment-submit:disabled {
|
||||
.info-section .info-title {
|
||||
font-size: 28px;
|
||||
line-height: 1.4;
|
||||
color: #000000;
|
||||
color: #FFFFFF;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
@@ -8044,7 +8051,7 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
.info-section .info-title .title-highlight {
|
||||
font-weight: 700;
|
||||
color: #0049B4;
|
||||
color: #0FDBFF;
|
||||
font-size: 36px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@@ -8060,7 +8067,7 @@ button.djb-comment-submit:disabled {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #000000;
|
||||
color: #FFFFFF;
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
@@ -8098,17 +8105,17 @@ button.djb-comment-submit:disabled {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px 52px;
|
||||
padding: 0 28px;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 56px;
|
||||
border-radius: 20px;
|
||||
line-height: 1.2;
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 310px;
|
||||
height: 128px;
|
||||
min-width: 0;
|
||||
height: 60px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.info-section .action-btn {
|
||||
@@ -8137,22 +8144,24 @@ button.djb-comment-submit:disabled {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.info-section .action-btn-primary {
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
background: #D5EFFF;
|
||||
color: #211894;
|
||||
}
|
||||
.info-section .action-btn-primary:hover {
|
||||
background: rgb(0, 65.7, 162);
|
||||
background: rgb(175.56, 224.7371428571, 255);
|
||||
}
|
||||
.info-section .action-btn-secondary {
|
||||
background: #00ACDD;
|
||||
background: #0046FF;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
.info-section .action-btn-secondary:hover {
|
||||
background: rgb(0, 154.8, 198.9);
|
||||
background: #FFFFFF;
|
||||
color: #0046FF;
|
||||
}
|
||||
.info-section .info-image {
|
||||
flex: 1;
|
||||
max-width: 560px;
|
||||
flex: 0 1 460px;
|
||||
max-width: 460px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -8199,6 +8208,7 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
}
|
||||
.support-center .support-background {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -8547,13 +8557,15 @@ button.djb-comment-submit:disabled {
|
||||
}
|
||||
}
|
||||
.support-center .support-card--faq {
|
||||
background: #DAF0FF;
|
||||
background: #CAEAFF;
|
||||
border: 1px solid #97D5FF;
|
||||
}
|
||||
.support-center .support-card--faq .card-content h3 {
|
||||
color: #212529;
|
||||
}
|
||||
.support-center .support-card--qna {
|
||||
background: #D9F6F8;
|
||||
background: #C7F6F9;
|
||||
border: 1px solid #99E0CC;
|
||||
}
|
||||
.support-center .support-card--qna .card-content h3 {
|
||||
color: #212529;
|
||||
@@ -8893,7 +8905,7 @@ button.djb-comment-submit:disabled {
|
||||
padding: 10px;
|
||||
min-height: 60px;
|
||||
width: 178px;
|
||||
background: #008ae2;
|
||||
background: #4685EF;
|
||||
color: #FFFFFF;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 20px;
|
||||
@@ -8903,9 +8915,9 @@ button.djb-comment-submit:disabled {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.signup-cta-section .btn-signup-cta:hover {
|
||||
background: rgb(0, 124.2, 203.4);
|
||||
background: rgb(41.5597014925, 114.2447761194, 236.5402985075);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 138, 226, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(70, 133, 239, 0.3);
|
||||
}
|
||||
.signup-cta-section .btn-signup-cta:active {
|
||||
transform: translateY(0);
|
||||
@@ -8921,6 +8933,27 @@ button.djb-comment-submit:disabled {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.signup-cta-section .cta-character {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.signup-cta-section .cta-character {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.signup-cta-section .cta-character-left {
|
||||
left: 0;
|
||||
width: clamp(180px, 21.6vw, 416px);
|
||||
}
|
||||
.signup-cta-section .cta-character-right {
|
||||
right: 0;
|
||||
width: clamp(180px, 21.1vw, 406px);
|
||||
}
|
||||
.signup-cta-section .cta-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 729 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 712 KiB After Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 676 KiB After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 1.3 MiB |
@@ -35,22 +35,22 @@
|
||||
font-size: $font-size-sm;
|
||||
transition: $transition-base;
|
||||
|
||||
// Box style for Figma design (node-id: 721-1489)
|
||||
// Figma GNB 로그인 버튼: pill (#F2F5F7 배경 / #0046FF 보더·텍스트 / radius 20px)
|
||||
&-box {
|
||||
height: 32px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px; // 아이콘-텍스트 간격
|
||||
padding: 6px 16px;
|
||||
color: #212529; // 강조 텍스트 색상
|
||||
gap: 4px; // 아이콘-텍스트 간격 (Figma)
|
||||
padding: 6px 16px 6px 12px;
|
||||
color: #0046FF; // Figma 로그인 텍스트 블루
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #0046FF;
|
||||
border-radius: 20px;
|
||||
font-family: $font-family-primary;
|
||||
font-weight: $font-weight-semibold; // 600
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
font-weight: $font-weight-regular; // 400 (Figma)
|
||||
font-size: 19px;
|
||||
background: #F2F5F7; // Figma 그레이2 pill 배경
|
||||
transition: $transition-base;
|
||||
|
||||
.user-icon {
|
||||
@@ -58,6 +58,10 @@
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #E9EDF2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
gap: 16px;
|
||||
|
||||
.footer-logo {
|
||||
width: 114px;
|
||||
width: 144px; // Figma: 제주은행 로고 144x34
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -53,7 +53,7 @@
|
||||
.footer-link {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-weight: 700; // Figma: 링크 Bold
|
||||
color: #5F666C;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
@@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
.footer-separator {
|
||||
color: #D1D5DB;
|
||||
color: #5F666C; // Figma 구분자
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -75,7 +75,7 @@
|
||||
font-family: $font-family-primary;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9CA3AF;
|
||||
color: #5F666C; // Figma: 저작권 그레이
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -103,8 +103,8 @@
|
||||
font-weight: 400;
|
||||
color: #5F666C;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D1D5DB;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #5F666C; // Figma: 관련사이트 박스 보더
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
appearance: none;
|
||||
@@ -131,14 +131,14 @@
|
||||
|
||||
.footer-contact {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 18px;
|
||||
font-size: 30px; // Figma: 고객센터 30px Bold
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
color: #5F666C; // Figma 그레이
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 16px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,13 +127,14 @@ body.design-survey-active {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
z-index: $z-index-header;
|
||||
height: 112px;
|
||||
height: 110px; // Figma GNB 높이
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
||||
// Index page header with light blue background
|
||||
// Figma GNB: 흰색 바 (히어로 시안 그라데이션과 분리)
|
||||
&.index-header {
|
||||
background-color: #E5F8FF;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: none;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
@@ -201,10 +202,10 @@ body.design-survey-active {
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 23px; // Figma: API Portal 23px Medium
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--text-dark);
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -984,8 +985,8 @@ body.design-survey-active {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
color: #212529; // Figma 강조텍스트
|
||||
font-weight: 700; // Figma: 네비 Bold
|
||||
font-size: 20px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -2,6 +2,36 @@
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// 캐러셀 + 검색 + 추천: 이어지는 단일 배경 (Figma 연속 배경)
|
||||
// - 상단 시안 그라데이션(히어로) → 연한 시안(#CFF3FF)으로 흐른 뒤
|
||||
// - 하단에 파도/버블 이미지(추천)가 같은 #CFF3FF 상단색으로 이음새 없이 연결
|
||||
// -----------------------------------------------------------------------------
|
||||
.landing-top {
|
||||
position: relative;
|
||||
// Figma에서 추출한 단일 연속 배경 이미지 (히어로 그라데이션 + 곡선 + 추천 파도/버블)
|
||||
background-color: #D4F0FC;
|
||||
background-image: url('/img/bg_landing_top.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: top center;
|
||||
|
||||
// 하위 섹션 배경 투명 — wrapper 배경이 끊김 없이 이어지도록
|
||||
.hero-carousel-section,
|
||||
.hero-carousel-container,
|
||||
.hero-slide,
|
||||
.api-search-section,
|
||||
.api-showcase {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// 개별 섹션 배경 레이어 제거 (wrapper로 통합)
|
||||
.showcase-background,
|
||||
.search-background {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Hero Carousel Section - Figma Design
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -17,7 +47,8 @@
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
overflow: hidden;
|
||||
background-color: #E9F9FF;
|
||||
// Figma 히어로 배경: 상단 연한 시안 → 하단 스카이 시안 (실측 픽셀 기준)
|
||||
background: linear-gradient(180deg, #BAF5FA 0%, #76D4FC 100%);
|
||||
|
||||
@include respond-to('md') {
|
||||
height: 800px;
|
||||
@@ -60,15 +91,15 @@
|
||||
|
||||
// Slide backgrounds
|
||||
&[data-slide="0"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&[data-slide="1"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&[data-slide="2"] {
|
||||
background: #E9F9FF;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +207,7 @@
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
background: #2A69DE;
|
||||
color: #FFFFFF;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 20px;
|
||||
@@ -186,9 +217,9 @@
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#0049B4, 10%);
|
||||
background: darken(#2A69DE, 10%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(42, 105, 222, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -421,11 +452,13 @@
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
//margin-top: -80px;
|
||||
overflow: hidden;
|
||||
padding: 56px 20px 64px;
|
||||
overflow: visible;
|
||||
background: #e9f9ff;
|
||||
height: 314px;
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 28px 16px 32px;
|
||||
}
|
||||
|
||||
.search-background {
|
||||
position: absolute;
|
||||
@@ -437,111 +470,153 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-content-wrapper {
|
||||
// Figma: 글래스모피즘 카드 (반투명 화이트 + 흰 보더 + 섀도, radius 30)
|
||||
.search-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1308px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
z-index: 1;
|
||||
gap: 56px;
|
||||
padding: 40px 56px;
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border: 1px solid #FFFFFF;
|
||||
box-shadow: 0 10px 24px rgba(141, 155, 185, 0.25);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
|
||||
@include respond-to('md') {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
padding-top: 40px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 캐릭터와 텍스트 가로 배치
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding-top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search-character {
|
||||
width: 154px;
|
||||
height: 148px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: 120px;
|
||||
height: 115px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 68x65px
|
||||
width: 68px;
|
||||
height: 65px;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-text-content {
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 텍스트 왼쪽 정렬
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-title {
|
||||
font-size: 36px;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 16px, Bold
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.3;
|
||||
color: #212529;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.search-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
|
||||
@include respond-to('sm') {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 자주찾는 API + 보라 알약 태그
|
||||
.hashtag-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include respond-to('sm') {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-label {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
.hashtag-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0px 0 30px;
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include respond-to('md') {
|
||||
padding: 30px 20px 20px;
|
||||
@include respond-to('sm') {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 보라색 알약 태그 (#4546CE)
|
||||
.hashtag-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 16px;
|
||||
background: #4546CE;
|
||||
color: #FFFFFF;
|
||||
border-radius: 999px;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#4546CE, 8%);
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 좌측 27px, 우측 28px 패딩으로 좌측 정렬
|
||||
justify-content: flex-start;
|
||||
padding: 0px 28px 12px 27px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// 알약 태그라 텍스트 구분자(|) 숨김
|
||||
.hashtag-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
width: 100%;
|
||||
max-width: 816px;
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 320px 고정 너비
|
||||
//width: 320px;
|
||||
//max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@@ -556,16 +631,15 @@
|
||||
padding: 0 24px;
|
||||
|
||||
@include respond-to('md') {
|
||||
height: 60px;
|
||||
border: 4px solid #0049B4;
|
||||
height: 64px;
|
||||
border-width: 4px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 320x36px, 1px 파란색 테두리
|
||||
height: 36px;
|
||||
border: 3px solid #0049B4;
|
||||
border-radius: 18px;
|
||||
height: 44px;
|
||||
border-width: 3px;
|
||||
border-radius: 22px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
@@ -581,7 +655,7 @@
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
padding: 0 20px;
|
||||
padding: 0 12px;
|
||||
|
||||
&::placeholder {
|
||||
color: #B3B3B3;
|
||||
@@ -590,18 +664,13 @@
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 15px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 11px, Medium, placeholder 색상 #8C959F
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
|
||||
&::placeholder {
|
||||
color: #8C959F;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -637,119 +706,14 @@
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 16x16px 아이콘
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px 0px;
|
||||
z-index: 1;
|
||||
|
||||
@include respond-to('md') {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 20px 30px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 가로 배치, 작은 간격
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 0 20px 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-label {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 12px, Bold
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include respond-to('md') {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 8px 간격, wrap
|
||||
gap: 8px;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-link {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #0049B4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 12px
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-separator {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
user-select: none;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 세로 구분선 (|)
|
||||
font-size: 10px;
|
||||
color: #212529;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -863,7 +827,7 @@
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: #008ae2;
|
||||
background: #2A69DE;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
@@ -910,7 +874,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(#008ae2, 10%);
|
||||
background: darken(#2A69DE, 10%);
|
||||
|
||||
svg {
|
||||
transform: translateX(4px);
|
||||
@@ -952,14 +916,49 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
gap: 0px;
|
||||
cursor: pointer;
|
||||
|
||||
// Figma: hover 시 파란 세로 그라데이션 (카드4 = hover 예시 상태)
|
||||
// 그라데이션은 transition 직접 적용 불가 → 오버레이 opacity로 over/out 부드럽게 페이드
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(180deg, #50CAFF 0%, #2088FF 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// 콘텐츠를 오버레이 위로
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-title,
|
||||
.card-description {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
border-color: #008ae2;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 28px rgba(0, 14, 27, 0.22);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-title,
|
||||
.card-description {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
@@ -1043,7 +1042,7 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Info Section - 광주은행 API 소개 (Figma Design)
|
||||
// Info Section - 제주은행(DJBank) API 소개 (Figma Design)
|
||||
// -----------------------------------------------------------------------------
|
||||
.info-section {
|
||||
position: relative;
|
||||
@@ -1060,13 +1059,28 @@
|
||||
padding: 75px 20px 20px;
|
||||
}
|
||||
|
||||
// Figma 배경 이미지: 좌측 블루 카드(우하단 라운드 baked), 우측은 흰 영역(모니터)
|
||||
.info-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url('/img/bg_api_intro.svg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 54%; // 텍스트(좌측 콘텐츠) 폭을 수용하면서 모니터와 겹치지 않는 폭
|
||||
background-image: url('/img/bg_diff_card.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
pointer-events: none;
|
||||
|
||||
@include respond-to('md') {
|
||||
// 태블릿: 컬럼 레이아웃 → 전체 블루
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
// 모바일: 흰 배경 + 다크 텍스트(기존 sm 오버라이드) 유지
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//.info-point-image {
|
||||
@@ -1131,7 +1145,7 @@
|
||||
.info-title {
|
||||
font-size: 28px;
|
||||
line-height: 1.4;
|
||||
color: #000000;
|
||||
color: #FFFFFF; // Figma: 블루 카드 위 흰 텍스트
|
||||
margin: 0 0 $spacing-lg 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
@@ -1154,7 +1168,7 @@
|
||||
|
||||
.title-highlight {
|
||||
font-weight: 700;
|
||||
color: #0049B4;
|
||||
color: #0FDBFF; // Figma: 브랜드 라인 시안 강조
|
||||
font-size: 36px;
|
||||
|
||||
@include respond-to('sm') {
|
||||
@@ -1172,7 +1186,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #000000;
|
||||
color: #FFFFFF; // Figma: 블루 카드 위 흰 텍스트
|
||||
margin: 0 0 $spacing-3xl 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
@@ -1210,17 +1224,17 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px 52px;
|
||||
padding: 0 28px;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 24px;
|
||||
font-size: 18px; // Figma: 18px Bold
|
||||
font-weight: 700;
|
||||
line-height: 56px;
|
||||
border-radius: 20px;
|
||||
line-height: 1.2;
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 310px;
|
||||
height: 128px;
|
||||
min-width: 0;
|
||||
height: 60px; // Figma: 버튼 높이 ~71px → 카드 내 적정 60px
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Figma 모바일: 160x72px, 14px Bold, border-radius 8px
|
||||
@@ -1251,27 +1265,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: '처음 만나는 DJBank API' = 연한 파랑 배경 + 네이비 텍스트
|
||||
.action-btn-primary {
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
background: #D5EFFF;
|
||||
color: #211894;
|
||||
|
||||
&:hover {
|
||||
background: darken(#0049B4, 10%);
|
||||
background: darken(#D5EFFF, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: '피드백/개선요청' = 진한 블루 배경 + 흰 텍스트, 테두리 없음
|
||||
.action-btn-secondary {
|
||||
background: #00ACDD;
|
||||
background: #0046FF;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
|
||||
// hover 반전: 흰 배경 + 블루 텍스트
|
||||
&:hover {
|
||||
background: darken(#00ACDD, 10%);
|
||||
background: #FFFFFF;
|
||||
color: #0046FF;
|
||||
}
|
||||
}
|
||||
|
||||
.info-image {
|
||||
flex: 1;
|
||||
max-width: 560px;
|
||||
flex: 0 1 460px;
|
||||
max-width: 460px; // 모니터 일러스트 축소 — 블루 카드 영역 침범 방지
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -1331,6 +1350,8 @@
|
||||
}
|
||||
|
||||
.support-background {
|
||||
// Figma: 깔끔한 #eef7fd 단색 배경. 구 광주은행 장식 이미지 제거.
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -1696,7 +1717,8 @@
|
||||
|
||||
// FAQ Card Specifics
|
||||
&--faq {
|
||||
background: #DAF0FF;
|
||||
background: #CAEAFF;
|
||||
border: 1px solid #97D5FF;
|
||||
|
||||
.card-content h3 {
|
||||
color: #212529;
|
||||
@@ -1705,7 +1727,8 @@
|
||||
|
||||
// Q&A Card Specifics
|
||||
&--qna {
|
||||
background: #D9F6F8;
|
||||
background: #C7F6F9;
|
||||
border: 1px solid #99E0CC;
|
||||
|
||||
.card-content h3 {
|
||||
color: #212529;
|
||||
@@ -2074,7 +2097,7 @@
|
||||
padding: 10px;
|
||||
min-height: 60px;
|
||||
width: 178px;
|
||||
background: #008ae2;
|
||||
background: #4685EF;
|
||||
color: #FFFFFF;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 20px;
|
||||
@@ -2084,9 +2107,9 @@
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#008ae2, 10%);
|
||||
background: darken(#4685EF, 10%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 138, 226, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(70, 133, 239, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -2105,6 +2128,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Figma 1:236 — 좌/우 3D 캐릭터 일러스트 (image4 / image6)
|
||||
.cta-character {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include respond-to('md') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-character-left {
|
||||
left: 0;
|
||||
width: clamp(180px, 21.6vw, 416px);
|
||||
}
|
||||
|
||||
.cta-character-right {
|
||||
right: 0;
|
||||
width: clamp(180px, 21.1vw, 406px);
|
||||
}
|
||||
|
||||
.cta-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
|
||||
<body>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<!-- 캐러셀 + 검색 + 추천: 이어지는 배경 그룹 -->
|
||||
<div class="landing-top">
|
||||
<!-- Hero Carousel Section -->
|
||||
<section class="hero-carousel-section">
|
||||
<!-- Carousel Container -->
|
||||
@@ -96,21 +98,27 @@
|
||||
<!-- API 검색 섹션 -->
|
||||
<section class="api-search-section">
|
||||
<div class="search-background"></div>
|
||||
<div class="search-content-wrapper">
|
||||
<div class="search-character">
|
||||
<img th:src="@{/img/img_search_character.png}" alt="검색">
|
||||
</div>
|
||||
<div class="search-card">
|
||||
<div class="search-text-content">
|
||||
<h2 class="search-title">
|
||||
원하는 API를<br>
|
||||
지금 검색해 보세요.
|
||||
</h2>
|
||||
</div>
|
||||
<div class="search-main">
|
||||
<div class="hashtag-section">
|
||||
<span class="hashtag-label">자주찾는 API</span>
|
||||
<div class="hashtag-list" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
|
||||
<th:block th:each="hashtag, iterStat : ${hashtags}">
|
||||
<a href="#" class="hashtag-link" th:data-search="${hashtag}" th:text="${'#' + hashtag}"></a>
|
||||
<span class="hashtag-separator" th:unless="${iterStat.last}">|</span>
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-input-wrapper">
|
||||
<form th:action="@{/apis}" method="get" class="search-form">
|
||||
<div class="search-box">
|
||||
<input type="text" class="search-input" placeholder="어떤 API를 칮고 계신가요?" id="apiSearchInput" name="keyword">
|
||||
<input type="text" class="search-input" placeholder="어떤 API를 찾고 계신가요?" id="apiSearchInput" name="keyword">
|
||||
<button class="search-icon-button" type="submit">
|
||||
<svg width="33" height="34" viewBox="0 0 33 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.1738 0C23.5534 0.000258465 30.3465 6.79327 30.3467 15.1729C30.3467 18.6141 29.2001 21.7875 27.2695 24.333C27.2733 24.3367 27.2775 24.34 27.2812 24.3438L32.1348 29.1973C33.1223 30.1849 33.1223 31.7859 32.1348 32.7734C31.1472 33.7609 29.5461 33.7609 28.5586 32.7734L23.7051 27.9199C23.6653 27.8802 23.6293 27.8376 23.5928 27.7959C21.1837 29.406 18.2889 30.3466 15.1738 30.3467C6.79392 30.3467 0 23.5528 0 15.1729C0.000201956 6.79311 6.79404 0 15.1738 0ZM15.1738 5.05762C9.58735 5.05762 5.05782 9.58642 5.05762 15.1729C5.05762 20.7595 9.58722 25.2891 15.1738 25.2891C20.7602 25.2888 25.2891 20.7593 25.2891 15.1729C25.2889 9.58658 20.7601 5.05788 15.1738 5.05762Z" fill="#0049B4"/>
|
||||
@@ -119,14 +127,6 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hashtag-section">
|
||||
<span class="hashtag-label">자주찾는 API</span>
|
||||
<div class="hashtag-list" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
|
||||
<th:block th:each="hashtag, iterStat : ${hashtags}">
|
||||
<a href="#" class="hashtag-link" th:data-search="${hashtag}" th:text="${'#' + hashtag}">
|
||||
</a>
|
||||
<span class="hashtag-separator" th:unless="${iterStat.last}">|</span>
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -136,8 +136,8 @@
|
||||
<div class="showcase-background"></div>
|
||||
<div class="showcase-wrapper">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">추천 API</h2>
|
||||
<p class="section-subtitle">다양한 금융 API상품을 소개합니다.</p>
|
||||
<h2 class="section-title">추천 API 그룹</h2>
|
||||
<p class="section-subtitle">다양한 금융 API를 제공합니다.</p>
|
||||
<a th:href="@{/apis}" class="btn-all-apis">
|
||||
전체보기
|
||||
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -168,6 +168,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- /landing-top -->
|
||||
|
||||
<!-- 정보 섹션 -->
|
||||
<section class="info-section">
|
||||
@@ -279,7 +281,7 @@
|
||||
<div class="stats-divider"></div>
|
||||
|
||||
<div class="stat-card">
|
||||
<p class="stat-label">API 이용 건수</p>
|
||||
<p class="stat-label">API 이용 건수(지난달)</p>
|
||||
<div class="stat-icon">
|
||||
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="70" height="70" fill="url(#pattern0_3001_94)"/>
|
||||
@@ -318,6 +320,8 @@
|
||||
<!-- 지금 바로 회원가입 CTA 섹션 -->
|
||||
<section class="signup-cta-section">
|
||||
<div class="cta-background"></div>
|
||||
<img th:src="@{/img/cta_character_left.png}" alt="" class="cta-character cta-character-left">
|
||||
<img th:src="@{/img/cta_character_right.png}" alt="" class="cta-character cta-character-right">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">DJBank API를 지금 바로 만나보세요.</h2>
|
||||
|
||||
Reference in New Issue
Block a user