메인페이지 스타일 1차 적용
This commit is contained in:
현성필
@@ -620,14 +620,13 @@ hr {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background-color: #E5F8FF;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 1000;
|
||||
height: 65px;
|
||||
height: 90px;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #5F666C;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -638,6 +637,7 @@ hr {
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -3628,33 +3628,26 @@ select.form-control {
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn:hover {
|
||||
background: #EFF6FF;
|
||||
color: #4B9BFF;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
.login-btn-box {
|
||||
width: 75px;
|
||||
height: 37px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1A1A2E;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5.5px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
border: 1px solid #212529;
|
||||
border-radius: 6px;
|
||||
font-family: "Noto Sans CJK KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.login-btn-box:hover {
|
||||
background: #F8FAFC;
|
||||
color: #1A1A2E;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
.login-btn-box .user-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-profile-dropdown {
|
||||
@@ -4516,279 +4509,368 @@ select.form-control {
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
padding: 160px 0 100px;
|
||||
background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-carousel-container {
|
||||
height: 800px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 120px 0 60px;
|
||||
.hero-carousel-container {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-patterns {
|
||||
.hero-carousel-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-patterns .pattern-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.hero-patterns .pattern-circle.pattern-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #00D4FF;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
.hero-patterns .pattern-circle.pattern-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #FFD93D;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
bottom: -150px;
|
||||
left: -50px;
|
||||
animation: float 15s ease-in-out infinite reverse;
|
||||
}
|
||||
.hero-patterns .pattern-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: radial-gradient(circle, #A78BFA 2px, transparent 2px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 24px;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #FFD93D;
|
||||
border-radius: 50px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
animation: slideInDown 0.6s ease-out;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
|
||||
}
|
||||
.hero-badge .badge-icon {
|
||||
font-size: 20px;
|
||||
animation: bounce 2s infinite;
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.hero-slide[data-slide="0"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
.hero-slide[data-slide="1"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
.hero-slide[data-slide="2"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
.main-headline {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 24px;
|
||||
color: #1A1A2E;
|
||||
animation: slideInUp 0.8s ease-out;
|
||||
.hero-slide-content {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 1440px) {
|
||||
.hero-slide-content {
|
||||
padding: 0 320px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-slide-content {
|
||||
padding: 0 160px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-slide-content {
|
||||
flex-direction: column;
|
||||
padding: 80px 40px;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.main-headline {
|
||||
.hero-slide-content {
|
||||
padding: 60px 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text-content {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 46px;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text-content {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text .hero-subtitle {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #212529;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text .hero-subtitle {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-text .hero-subtitle {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.hero-text .hero-title {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-text .hero-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.main-headline {
|
||||
@media (max-width: 768px) {
|
||||
.hero-text .hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
.main-headline .headline-highlight {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
color: #64748B;
|
||||
animation: slideInUp 0.9s ease-out;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.sub-headline {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 64px;
|
||||
animation: slideInUp 1s ease-out;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.hero-buttons .btn {
|
||||
.btn-hero-signup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 32px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
.hero-buttons .btn:hover {
|
||||
transform: translateY(-3px);
|
||||
.btn-hero-signup:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
}
|
||||
.hero-buttons .btn.btn-primary {
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
.btn-hero-signup:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.hero-buttons .btn.btn-primary:hover {
|
||||
box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
|
||||
}
|
||||
.hero-buttons .btn.btn-secondary {
|
||||
background: #FFFFFF;
|
||||
color: #4B9BFF;
|
||||
border: 2px solid #4B9BFF;
|
||||
}
|
||||
.hero-buttons .btn.btn-secondary:hover {
|
||||
background: #EFF6FF;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.hero-buttons .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
@media (max-width: 1024px) {
|
||||
.btn-hero-signup {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
.hero-image-content {
|
||||
flex: 0 0 auto;
|
||||
width: 556px;
|
||||
height: 455px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 64px;
|
||||
animation: fadeIn 1.2s ease-out;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-image-content {
|
||||
width: 450px;
|
||||
height: 370px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-image-content {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-stats {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.hero-image-content {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.hero-stats .stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-stats .stat-item .stat-number {
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.hero-stats .stat-item .stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: relative;
|
||||
margin-top: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-image img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
|
||||
}
|
||||
.hero-image .hero-decoration {
|
||||
position: absolute;
|
||||
.hero-image-content .hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
.hero-image .hero-decoration::before, .hero-image .hero-decoration::after {
|
||||
content: "";
|
||||
|
||||
.hero-nav-btn {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hero-image .hero-decoration::before {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
|
||||
top: -30px;
|
||||
right: 10%;
|
||||
animation: bounce 2s infinite;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hero-image .hero-decoration::after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
|
||||
bottom: -20px;
|
||||
left: 15%;
|
||||
animation: bounce 2s infinite 0.5s;
|
||||
.hero-nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
.hero-nav-btn:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
.hero-nav-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-prev {
|
||||
left: 210px;
|
||||
}
|
||||
.hero-nav-prev svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-prev {
|
||||
left: 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-nav-prev {
|
||||
left: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-nav-prev {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-next {
|
||||
right: 210px;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hero-nav-next {
|
||||
right: 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-nav-next {
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-nav-next {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-carousel-indicators {
|
||||
bottom: 30px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-indicator {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #F1F1F1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hero-indicator.active {
|
||||
background: #0049B4;
|
||||
}
|
||||
.hero-indicator:hover:not(.active) {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.hero-indicator.active {
|
||||
width: 28px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-autoplay-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
.hero-autoplay-toggle svg {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.hero-autoplay-toggle svg.active {
|
||||
opacity: 1;
|
||||
}
|
||||
.hero-autoplay-toggle:hover {
|
||||
background: rgb(255, 255, 255);
|
||||
border-color: #0049B4;
|
||||
box-shadow: 0 2px 8px rgba(0, 73, 180, 0.2);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-autoplay-toggle {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.hero-autoplay-toggle svg {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
min-height: 314px;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.api-search-section .curved-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: linear-gradient(180deg, rgba(229, 248, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
.api-search-section .curved-background::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50% 50% 0 0/100% 100% 0 0;
|
||||
margin-top: -80px;
|
||||
}
|
||||
.api-search-section .search-content-wrapper {
|
||||
position: relative;
|
||||
@@ -5001,6 +5083,8 @@ select.form-control {
|
||||
|
||||
.api-showcase {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 0 100px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
@@ -5009,6 +5093,7 @@ select.form-control {
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.api-showcase .section-header {
|
||||
text-align: center;
|
||||
@@ -5045,7 +5130,6 @@ select.form-control {
|
||||
line-height: 1.5;
|
||||
color: #1E1E1E;
|
||||
margin: 0;
|
||||
text-align: center !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.api-showcase .section-subtitle {
|
||||
@@ -5174,6 +5258,7 @@ select.form-control {
|
||||
min-height: 980px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 150px;
|
||||
}
|
||||
.info-section .info-background {
|
||||
position: absolute;
|
||||
@@ -5326,10 +5411,11 @@ select.form-control {
|
||||
padding: 100px 0;
|
||||
background: #f2f6fb;
|
||||
overflow: hidden;
|
||||
min-height: 980px;
|
||||
}
|
||||
.support-center .support-background-pattern {
|
||||
position: absolute;
|
||||
right: 120px;
|
||||
right: 320px;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
height: 660px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 676 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
@@ -31,35 +31,27 @@
|
||||
font-size: $font-size-sm;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
color: $primary-blue;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
// Box style for Figma design (75x37px with black border)
|
||||
// Box style for Figma design (node-id: 721-1489)
|
||||
&-box {
|
||||
width: 75px;
|
||||
height: 37px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $text-dark;
|
||||
gap: 4px; // 아이콘-텍스트 간격
|
||||
padding: 4px 10px;
|
||||
color: #212529; // 강조 텍스트 색상
|
||||
text-decoration: none;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5.5px;
|
||||
font-weight: $font-weight-regular;
|
||||
font-size: $font-size-sm;
|
||||
border: 1px solid #212529;
|
||||
border-radius: 6px;
|
||||
font-family: 'Noto Sans CJK KR', $font-family-primary;
|
||||
font-weight: $font-weight-bold; // 700
|
||||
font-size: $font-size-base; // 16px
|
||||
background: transparent;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
background: $gray-bg;
|
||||
color: $text-dark;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-sm;
|
||||
.user-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,14 +55,14 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
//background-color: #C3DFEA;
|
||||
background-color: #E5F8FF;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 1000;
|
||||
height: 65px;
|
||||
height: 90px;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #5F666C;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -73,6 +73,7 @@
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// ===========================
|
||||
|
||||
@@ -1,249 +1,366 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Hero section styles - Modern vibrant design
|
||||
// Hero Carousel Section - Figma Design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.hero-section {
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
padding: 160px 0 100px;
|
||||
background: linear-gradient(180deg, $light-bg 0%, $white 100%);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
overflow: hidden;
|
||||
|
||||
@include respond-to('md') {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 120px 0 60px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
// Background patterns
|
||||
.hero-patterns {
|
||||
.hero-carousel-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Individual slide
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
|
||||
|
||||
.pattern-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
|
||||
&.pattern-1 {
|
||||
@include pattern-circle(400px, $accent-cyan);
|
||||
top: -200px;
|
||||
right: -100px;
|
||||
@include animate-float;
|
||||
}
|
||||
|
||||
&.pattern-2 {
|
||||
@include pattern-circle(300px, $accent-yellow);
|
||||
bottom: -150px;
|
||||
left: -50px;
|
||||
animation: float 15s ease-in-out infinite reverse;
|
||||
}
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pattern-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: radial-gradient(circle, $accent-purple 2px, transparent 2px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.3;
|
||||
// Slide backgrounds
|
||||
&[data-slide="0"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
&[data-slide="1"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
|
||||
&[data-slide="2"] {
|
||||
background: #E5F8FF;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero content
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
.hero-slide-content {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px; // 기본 패딩 줄임
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacing-lg;
|
||||
margin: 0 auto; // 가운데 정렬 보장
|
||||
|
||||
@include respond-to('xl') {
|
||||
padding: 0 320px; // 1440px 이상에서만 큰 패딩
|
||||
}
|
||||
|
||||
@include respond-to('lg') {
|
||||
padding: 0 160px; // 1280px 이상에서 중간 패딩
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
flex-direction: column;
|
||||
padding: 80px 40px;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 60px 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero badge
|
||||
.hero-badge {
|
||||
.hero-text-content {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 46px;
|
||||
z-index: 2;
|
||||
|
||||
@include respond-to('md') {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
.hero-subtitle {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
color: #212529;
|
||||
margin: 0 0 12px 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
margin: 0;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hero-signup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: $white;
|
||||
border: 2px solid $accent-yellow;
|
||||
border-radius: $border-radius-full;
|
||||
margin-bottom: $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-dark;
|
||||
@include animate-slide-in-down;
|
||||
|
||||
.badge-icon {
|
||||
font-size: $font-size-lg;
|
||||
@include animate-bounce;
|
||||
}
|
||||
}
|
||||
|
||||
// Main headline
|
||||
.main-headline {
|
||||
font-size: $font-size-5xl;
|
||||
font-weight: $font-weight-extrabold;
|
||||
line-height: $line-height-tight;
|
||||
margin-bottom: $spacing-lg;
|
||||
color: $text-dark;
|
||||
@include animate-slide-in-up;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: $font-size-3xl;
|
||||
}
|
||||
|
||||
@include respond-to('xs') {
|
||||
font-size: $font-size-2xl;
|
||||
}
|
||||
|
||||
.headline-highlight {
|
||||
@include gradient-text($gradient-accent);
|
||||
}
|
||||
}
|
||||
|
||||
// Sub headline
|
||||
.sub-headline {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: $line-height-normal;
|
||||
margin-bottom: $spacing-2xl;
|
||||
color: $text-gray;
|
||||
animation: slideInUp 0.9s ease-out;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero buttons
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
justify-content: center;
|
||||
margin-bottom: $spacing-4xl;
|
||||
animation: slideInUp 1s ease-out;
|
||||
width: 178px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background: #0049B4;
|
||||
color: #FFFFFF;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: darken(#0049B4, 10%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include button-base;
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: $gradient-primary;
|
||||
color: $white;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: $white;
|
||||
color: $primary-blue;
|
||||
border: 2px solid $primary-blue;
|
||||
|
||||
&:hover {
|
||||
background: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-to('xs') {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
@include respond-to('md') {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hero stats
|
||||
.hero-stats {
|
||||
.hero-image-content {
|
||||
flex: 0 0 auto;
|
||||
width: 556px;
|
||||
height: 455px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-4xl;
|
||||
@include animate-fade-in;
|
||||
z-index: 1;
|
||||
|
||||
@include respond-to('lg') {
|
||||
width: 450px;
|
||||
height: 370px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat-number {
|
||||
font-size: $font-size-3xl;
|
||||
font-weight: $font-weight-extrabold;
|
||||
@include gradient-text($gradient-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-gray;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hero image/illustration
|
||||
.hero-image {
|
||||
position: relative;
|
||||
margin-top: $spacing-4xl;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
border-radius: $border-radius-xl;
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
|
||||
.hero-decoration {
|
||||
position: absolute;
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
// Navigation buttons
|
||||
.hero-nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
display: none; // 기본값: 숨김
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::before {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: $gradient-warm;
|
||||
top: -30px;
|
||||
right: 10%;
|
||||
@include animate-bounce;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $gradient-accent;
|
||||
bottom: -20px;
|
||||
left: 15%;
|
||||
animation: bounce 2s infinite 0.5s;
|
||||
&:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
// 1280px 이상에서만 표시
|
||||
@include respond-to('lg') {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-prev {
|
||||
left: 210px;
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@include respond-to('lg') {
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-nav-next {
|
||||
right: 210px;
|
||||
|
||||
@include respond-to('lg') {
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
@include respond-to('md') {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel indicators
|
||||
.hero-carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
|
||||
@include respond-to('sm') {
|
||||
bottom: 30px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-indicator {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #F1F1F1;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.active {
|
||||
background: #0049B4;
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
&.active {
|
||||
width: 28px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto play toggle button
|
||||
.hero-autoplay-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-color: #0049B4;
|
||||
box-shadow: 0 2px 8px rgba(0, 73, 180, 0.2);
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
margin-left: 6px;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Search section styles - 검색 섹션
|
||||
@@ -251,30 +368,9 @@
|
||||
|
||||
.api-search-section {
|
||||
position: relative;
|
||||
min-height: 314px;
|
||||
padding: 0;
|
||||
margin-bottom: 80px;
|
||||
|
||||
.curved-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 314px;
|
||||
background: linear-gradient(180deg, rgba(229, 248, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
z-index: 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: $white;
|
||||
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
|
||||
}
|
||||
}
|
||||
margin-top: -80px;
|
||||
|
||||
.search-content-wrapper {
|
||||
position: relative;
|
||||
@@ -499,6 +595,8 @@
|
||||
|
||||
.api-showcase {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center; // 수직 중앙 정렬
|
||||
padding: 80px 0 100px;
|
||||
background: $white;
|
||||
|
||||
@@ -507,6 +605,7 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -543,12 +642,12 @@
|
||||
line-height: 1.5;
|
||||
color: #1E1E1E;
|
||||
margin: 0;
|
||||
text-align: center !important;
|
||||
|
||||
@include respond-to('md') {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -684,6 +783,7 @@
|
||||
min-height: 980px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 150px;
|
||||
|
||||
.info-background {
|
||||
position: absolute;
|
||||
@@ -861,10 +961,11 @@
|
||||
padding: $spacing-6xl 0;
|
||||
background: #f2f6fb;
|
||||
overflow: hidden;
|
||||
min-height: 980px;
|
||||
|
||||
.support-background-pattern {
|
||||
position: absolute;
|
||||
right: 120px;
|
||||
right: 320px;
|
||||
top: 0;
|
||||
width: 700px;
|
||||
height: 660px;
|
||||
|
||||
@@ -5,41 +5,96 @@
|
||||
|
||||
<body>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="hero-section">
|
||||
<div class="hero-patterns">
|
||||
<div class="pattern-circle pattern-1"></div>
|
||||
<div class="pattern-circle pattern-2"></div>
|
||||
<div class="pattern-dots"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-icon">🚀</span>
|
||||
<span>Wa bank 생태계에 오신 것을 환영합니다!</span>
|
||||
<!-- Hero Carousel Section -->
|
||||
<section class="hero-carousel-section">
|
||||
<!-- Carousel Container -->
|
||||
<div class="hero-carousel-container">
|
||||
<div class="hero-carousel-track">
|
||||
<!-- Slide 1 -->
|
||||
<div class="hero-slide active" data-slide="0">
|
||||
<div class="hero-slide-content">
|
||||
<div class="hero-text-content">
|
||||
<div class="hero-text">
|
||||
<p class="hero-subtitle">세상의 모든 서비스</p>
|
||||
<p class="hero-title">광주은행 API가 함께 합니다.</p>
|
||||
</div>
|
||||
<a th:href="@{/signup}" class="btn-hero-signup">회원가입하기</a>
|
||||
</div>
|
||||
<div class="hero-image-content">
|
||||
<img th:src="@{/img/hero_image_1.png}" alt="광주은행 API 서비스" class="hero-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="main-headline">
|
||||
<span class="headline-wa">Wa한</span> 금융 혁신,<br>
|
||||
여러분의 아이디어로 시작됩니다
|
||||
</h1>
|
||||
<h2 class="sub-headline">
|
||||
광주은행 오픈 API로 새로운 금융 서비스를 만들어보세요.<br>
|
||||
안전하고 빠르게, 그리고 쉽게 연동할 수 있습니다.
|
||||
</h2>
|
||||
<div class="hero-buttons">
|
||||
<a href="/apis" class="btn btn-primary">
|
||||
<i class="fas fa-code"></i> API 둘러보기
|
||||
</a>
|
||||
<a href="#get-started" class="btn btn-secondary">
|
||||
<i class="fas fa-play"></i> 5분 만에 시작하기
|
||||
</a>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div class="hero-slide" data-slide="1">
|
||||
<div class="hero-slide-content">
|
||||
<div class="hero-text-content">
|
||||
<div class="hero-text">
|
||||
<p class="hero-subtitle">세상의 모든 서비스</p>
|
||||
<p class="hero-title">광주은행 API가 함께 합니다.</p>
|
||||
</div>
|
||||
<a th:href="@{/signup}" class="btn-hero-signup">회원가입하기</a>
|
||||
</div>
|
||||
<div class="hero-image-content">
|
||||
<img th:src="@{/img/hero_image_2.png}" alt="광주은행 API 서비스" class="hero-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3 -->
|
||||
<div class="hero-slide" data-slide="2">
|
||||
<div class="hero-slide-content">
|
||||
<div class="hero-text-content">
|
||||
<div class="hero-text">
|
||||
<p class="hero-subtitle">세상의 모든 서비스</p>
|
||||
<p class="hero-title">광주은행 API가 함께 합니다.</p>
|
||||
</div>
|
||||
<a th:href="@{/signup}" class="btn-hero-signup">회원가입하기</a>
|
||||
</div>
|
||||
<div class="hero-image-content">
|
||||
<img th:src="@{/img/hero_image_3.png}" alt="광주은행 API 서비스" class="hero-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<button class="hero-nav-btn hero-nav-prev" id="heroPrevBtn" aria-label="이전 슬라이드">
|
||||
<svg width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: scaleX(-1);">
|
||||
<path d="M2.17021 31.1127L-0.000440909 28.942L13.3853 15.5564L-0.000438653 2.17065L2.17021 4.76837e-07L17.7266 15.5564L2.17021 31.1127Z" fill="#0049B4"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="hero-nav-btn hero-nav-next" id="heroNextBtn" aria-label="다음 슬라이드">
|
||||
<svg width="18" height="32" viewBox="0 0 18 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.17021 31.1127L-0.000440909 28.942L13.3853 15.5564L-0.000438653 2.17065L2.17021 4.76837e-07L17.7266 15.5564L2.17021 31.1127Z" fill="#0049B4"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Carousel Indicators -->
|
||||
<div class="hero-carousel-indicators">
|
||||
<button class="hero-indicator active" data-slide-to="0" aria-label="슬라이드 1"></button>
|
||||
<button class="hero-indicator" data-slide-to="1" aria-label="슬라이드 2"></button>
|
||||
<button class="hero-indicator" data-slide-to="2" aria-label="슬라이드 3"></button>
|
||||
|
||||
<!-- Auto Play Toggle Button -->
|
||||
<button class="hero-autoplay-toggle" id="heroAutoplayToggle" aria-label="자동 재생 일시정지">
|
||||
<!-- Pause Icon (default) -->
|
||||
<svg class="pause-icon active" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 14V0H12V14H8ZM0 14V0H4V14H0Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
||||
<!-- Play Icon -->
|
||||
<svg class="play-icon" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0V14L12 7L0 0Z" fill="#0049B4"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API 검색 섹션 -->
|
||||
<section class="api-search-section">
|
||||
<div class="curved-background"></div>
|
||||
<div class="search-content-wrapper">
|
||||
<div class="search-character">
|
||||
<img th:src="@{/img/img_search_character.png}" alt="검색">
|
||||
@@ -75,7 +130,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 추천 API 섹션 - Figma Design -->
|
||||
<!-- 추천 API 섹션 -->
|
||||
<section class="api-showcase">
|
||||
<div class="showcase-wrapper">
|
||||
<div class="section-header">
|
||||
@@ -137,7 +192,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 정보 섹션 - Figma Design -->
|
||||
<!-- 정보 섹션 -->
|
||||
<section class="info-section">
|
||||
<div class="info-background"></div>
|
||||
<!-- <div class="info-point-image"></div>-->
|
||||
@@ -170,7 +225,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 지원 센터 섹션 - Figma Design -->
|
||||
<!-- 지원 센터 섹션 -->
|
||||
<section class="support-center">
|
||||
<div class="support-background-pattern"></div>
|
||||
<div class="container">
|
||||
@@ -215,7 +270,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API 활용 현황 섹션 - Figma Design -->
|
||||
<!-- API 활용 현황 섹션 -->
|
||||
<section class="api-stats-section">
|
||||
<div class="stats-background"></div>
|
||||
<div class="container">
|
||||
@@ -281,7 +336,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 지금 바로 회원가입 CTA 섹션 - Figma Design -->
|
||||
<!-- 지금 바로 회원가입 CTA 섹션 -->
|
||||
<section class="signup-cta-section">
|
||||
<div class="cta-background"></div>
|
||||
<div class="container">
|
||||
@@ -296,8 +351,208 @@
|
||||
</body>
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
// 숫자 카운트업 애니메이션
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// ========================================
|
||||
// Hero Carousel
|
||||
// ========================================
|
||||
const heroCarousel = {
|
||||
currentSlide: 0,
|
||||
totalSlides: 3,
|
||||
autoPlayInterval: null,
|
||||
autoPlayDelay: 5000,
|
||||
isPlaying: true,
|
||||
|
||||
init: function() {
|
||||
this.slides = document.querySelectorAll('.hero-slide');
|
||||
this.indicators = document.querySelectorAll('.hero-indicator');
|
||||
this.prevBtn = document.getElementById('heroPrevBtn');
|
||||
this.nextBtn = document.getElementById('heroNextBtn');
|
||||
this.autoplayToggle = document.getElementById('heroAutoplayToggle');
|
||||
this.pauseIcon = this.autoplayToggle?.querySelector('.pause-icon');
|
||||
this.playIcon = this.autoplayToggle?.querySelector('.play-icon');
|
||||
|
||||
if (!this.slides.length) return;
|
||||
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
},
|
||||
|
||||
bindEvents: function() {
|
||||
// Previous button
|
||||
if (this.prevBtn) {
|
||||
this.prevBtn.addEventListener('click', () => {
|
||||
this.goToSlide(this.currentSlide - 1);
|
||||
this.resetAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
// Next button
|
||||
if (this.nextBtn) {
|
||||
this.nextBtn.addEventListener('click', () => {
|
||||
this.goToSlide(this.currentSlide + 1);
|
||||
this.resetAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
// Indicators
|
||||
this.indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
this.goToSlide(index);
|
||||
this.resetAutoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// Auto play toggle button
|
||||
if (this.autoplayToggle) {
|
||||
this.autoplayToggle.addEventListener('click', () => {
|
||||
this.toggleAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
// Pause on hover (only if playing)
|
||||
const container = document.querySelector('.hero-carousel-container');
|
||||
if (container) {
|
||||
container.addEventListener('mouseenter', () => {
|
||||
if (this.isPlaying) {
|
||||
this.pauseAutoPlay();
|
||||
}
|
||||
});
|
||||
container.addEventListener('mouseleave', () => {
|
||||
if (this.isPlaying) {
|
||||
this.startAutoPlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Touch events for mobile
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
if (container) {
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
});
|
||||
|
||||
container.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].screenX;
|
||||
this.handleSwipe(touchStartX, touchEndX);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
goToSlide: function(index) {
|
||||
// Wrap around
|
||||
if (index < 0) {
|
||||
index = this.totalSlides - 1;
|
||||
} else if (index >= this.totalSlides) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
// Update slides
|
||||
this.slides.forEach((slide, i) => {
|
||||
slide.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
// Update indicators
|
||||
this.indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
this.currentSlide = index;
|
||||
},
|
||||
|
||||
handleSwipe: function(startX, endX) {
|
||||
const minSwipeDistance = 50;
|
||||
const distance = startX - endX;
|
||||
|
||||
if (Math.abs(distance) > minSwipeDistance) {
|
||||
if (distance > 0) {
|
||||
// Swipe left - next slide
|
||||
this.goToSlide(this.currentSlide + 1);
|
||||
} else {
|
||||
// Swipe right - previous slide
|
||||
this.goToSlide(this.currentSlide - 1);
|
||||
}
|
||||
this.resetAutoPlay();
|
||||
}
|
||||
},
|
||||
|
||||
startAutoPlay: function() {
|
||||
this.pauseAutoPlay();
|
||||
this.autoPlayInterval = setInterval(() => {
|
||||
this.goToSlide(this.currentSlide + 1);
|
||||
}, this.autoPlayDelay);
|
||||
},
|
||||
|
||||
pauseAutoPlay: function() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval);
|
||||
this.autoPlayInterval = null;
|
||||
}
|
||||
},
|
||||
|
||||
resetAutoPlay: function() {
|
||||
if (this.isPlaying) {
|
||||
this.pauseAutoPlay();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
},
|
||||
|
||||
toggleAutoPlay: function() {
|
||||
this.isPlaying = !this.isPlaying;
|
||||
|
||||
if (this.isPlaying) {
|
||||
// Start auto play
|
||||
this.startAutoPlay();
|
||||
// Update icons
|
||||
if (this.pauseIcon) this.pauseIcon.classList.add('active');
|
||||
if (this.playIcon) this.playIcon.classList.remove('active');
|
||||
// Update aria-label
|
||||
if (this.autoplayToggle) {
|
||||
this.autoplayToggle.setAttribute('aria-label', '자동 재생 일시정지');
|
||||
}
|
||||
} else {
|
||||
// Stop auto play
|
||||
this.pauseAutoPlay();
|
||||
// Update icons
|
||||
if (this.pauseIcon) this.pauseIcon.classList.remove('active');
|
||||
if (this.playIcon) this.playIcon.classList.add('active');
|
||||
// Update aria-label
|
||||
if (this.autoplayToggle) {
|
||||
this.autoplayToggle.setAttribute('aria-label', '자동 재생 시작');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize hero carousel
|
||||
heroCarousel.init();
|
||||
|
||||
// ========================================
|
||||
// API 검색 기능
|
||||
// ========================================
|
||||
const searchInput = document.getElementById('apiSearchInput');
|
||||
const searchForm = document.querySelector('.search-form');
|
||||
const hashtags = document.querySelectorAll('.hashtag-link');
|
||||
|
||||
// 해시태그 클릭 이벤트
|
||||
hashtags.forEach(tag => {
|
||||
tag.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const searchTerm = this.getAttribute('data-search');
|
||||
if (searchInput) {
|
||||
searchInput.value = searchTerm;
|
||||
}
|
||||
// 폼 제출
|
||||
if (searchForm) {
|
||||
searchForm.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ========================================
|
||||
// 숫자 카운트업 애니메이션
|
||||
// ========================================
|
||||
const observerOptions = {
|
||||
threshold: 0.5,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
@@ -338,24 +593,6 @@
|
||||
if (statsSection) {
|
||||
observer.observe(statsSection);
|
||||
}
|
||||
|
||||
// API 검색 기능
|
||||
const searchInput = document.getElementById('apiSearchInput');
|
||||
const searchForm = document.querySelector('.search-form');
|
||||
const hashtags = document.querySelectorAll('.hashtag');
|
||||
|
||||
// 해시태그 클릭 이벤트
|
||||
hashtags.forEach(tag => {
|
||||
tag.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const searchTerm = this.getAttribute('data-search');
|
||||
searchInput.value = searchTerm;
|
||||
// 폼 제출
|
||||
if (searchForm) {
|
||||
searchForm.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
@@ -38,7 +38,9 @@
|
||||
|
||||
<!-- Login State (Anonymous) -->
|
||||
<div class="auth-group" sec:authorize="isAnonymous()">
|
||||
<a th:href="@{/login}" class="login-btn login-btn-box">로그인</a>
|
||||
|
||||
<a th:href="@{/login}" class="login-btn login-btn-box">
|
||||
<img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">로그인</a>
|
||||
</div>
|
||||
|
||||
<!-- Logout State (Authenticated) -->
|
||||
@@ -167,10 +169,6 @@
|
||||
<!-- Anonymous User Actions -->
|
||||
<div sec:authorize="isAnonymous()">
|
||||
<a th:href="@{/login}" class="drawer-login-btn">로그인</a>
|
||||
<a th:href="@{/signup}" class="drawer-signup-btn">
|
||||
<span>회원 가입</span>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Authenticated User Actions -->
|
||||
|
||||
Reference in New Issue
Block a user