홈 화면 수정 .
parent
879cd7d10c
commit
10923f26b6
740
index.css
740
index.css
|
|
@ -76,6 +76,20 @@
|
||||||
Layout Components
|
Layout Components
|
||||||
===================================================== */
|
===================================================== */
|
||||||
|
|
||||||
|
/* Landing Page Container - Free Scroll */
|
||||||
|
.landing-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100dvh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-color: var(--color-bg-darker);
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing-section {
|
||||||
|
min-height: 100dvh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* Page Container */
|
/* Page Container */
|
||||||
.page-container {
|
.page-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -140,17 +154,16 @@
|
||||||
.dashboard-layout {
|
.dashboard-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100dvh;
|
min-height: 100dvh;
|
||||||
background-color: var(--color-bg-darker);
|
background-color: var(--color-bg-darker);
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-content {
|
.dashboard-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
min-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow-y: auto;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1780,13 +1793,15 @@
|
||||||
/* Analysis Container */
|
/* Analysis Container */
|
||||||
.analysis-container {
|
.analysis-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100dvh;
|
height: 100dvh;
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: var(--spacing-page);
|
padding: var(--spacing-page);
|
||||||
background-color: var(--color-bg-dark);
|
background-color: var(--color-bg-dark);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
|
@ -1831,7 +1846,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
flex: 0 0 auto;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
|
|
@ -2021,51 +2036,217 @@
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
.hero-section {
|
.hero-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 100dvh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: var(--color-bg-dark);
|
background-color: #002224;
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
padding: 0 1rem;
|
padding: 80px 1rem 100px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 세로가 짧은 화면 대응 */
|
||||||
|
@media (max-height: 700px) {
|
||||||
|
.hero-section {
|
||||||
|
padding: 70px 1rem 80px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 600px) {
|
||||||
|
.hero-section {
|
||||||
|
padding: 60px 1rem 70px;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated Background Orbs */
|
||||||
|
.hero-bg-orbs {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Purple orb - top left */
|
||||||
|
.hero-orb-purple-1 {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background: #AE72F9;
|
||||||
|
top: -100px;
|
||||||
|
left: 0;
|
||||||
|
animation: float-1 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mint orb - top right */
|
||||||
|
.hero-orb-mint-1 {
|
||||||
|
width: 450px;
|
||||||
|
height: 450px;
|
||||||
|
background: #94FBE0;
|
||||||
|
top: -50px;
|
||||||
|
right: -100px;
|
||||||
|
animation: float-2 25s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Purple orb - bottom left */
|
||||||
|
.hero-orb-purple-2 {
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
background: #AE72F9;
|
||||||
|
bottom: -100px;
|
||||||
|
left: -100px;
|
||||||
|
animation: float-3 22s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mint orb - bottom right */
|
||||||
|
.hero-orb-mint-2 {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background: #94FBE0;
|
||||||
|
bottom: -50px;
|
||||||
|
right: 5%;
|
||||||
|
animation: float-4 18s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-1 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(200px, 150px);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(100px, 250px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-2 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(-180px, 200px);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(-250px, 100px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-3 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(220px, -180px);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(150px, -280px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-4 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(-200px, -220px);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(-280px, -120px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-bg-blur {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 200px;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 34, 36, 0) 0%, rgba(0, 34, 36, 1) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 10;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-logo {
|
||||||
font-family: 'Playfair Display', serif;
|
width: 280px;
|
||||||
font-style: italic;
|
height: auto;
|
||||||
font-size: 3.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
letter-spacing: -0.025em;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.hero-title {
|
.hero-logo {
|
||||||
font-size: 4.5rem;
|
width: 400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.hero-title {
|
.hero-logo {
|
||||||
font-size: 6rem;
|
width: 500px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.hero-title {
|
.hero-logo {
|
||||||
font-size: 8rem;
|
width: 554px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 세로가 짧은 화면에서 로고 크기 축소 */
|
||||||
|
@media (max-height: 700px) {
|
||||||
|
.hero-logo {
|
||||||
|
width: 240px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 600px) {
|
||||||
|
.hero-logo {
|
||||||
|
width: 200px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-subtitle {
|
.hero-subtitle {
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 2rem;
|
||||||
opacity: 0.8;
|
color: rgba(255, 255, 255, 0.8);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 32rem;
|
max-width: 32rem;
|
||||||
}
|
}
|
||||||
|
|
@ -2073,41 +2254,64 @@
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.hero-subtitle {
|
.hero-subtitle {
|
||||||
font-size: var(--text-base);
|
font-size: var(--text-base);
|
||||||
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.hero-subtitle {
|
.hero-subtitle {
|
||||||
font-size: var(--text-xl);
|
font-size: var(--text-lg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Form */
|
/* Hero Form */
|
||||||
.hero-form {
|
.hero-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 24rem;
|
max-width: 400px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.75rem;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 세로가 짧은 화면에서 폼 간격 조정 */
|
||||||
|
@media (max-height: 700px) {
|
||||||
|
.hero-form {
|
||||||
|
gap: 6px;
|
||||||
|
max-width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 600px) {
|
||||||
|
.hero-form {
|
||||||
|
gap: 4px;
|
||||||
|
max-width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-input-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-input-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 11px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-input {
|
.hero-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75rem 1.5rem;
|
background: transparent;
|
||||||
border-radius: var(--radius-full);
|
|
||||||
background-color: var(--color-text-white);
|
|
||||||
color: #1f2937;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
border: none;
|
border: none;
|
||||||
}
|
color: #6AB0B3;
|
||||||
|
font-size: 14px;
|
||||||
@media (min-width: 640px) {
|
font-weight: 600;
|
||||||
.hero-input {
|
letter-spacing: -0.006em;
|
||||||
padding: 1rem 1.5rem;
|
text-align: left;
|
||||||
font-size: var(--text-base);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-input:focus {
|
.hero-input:focus {
|
||||||
|
|
@ -2115,11 +2319,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-input::placeholder {
|
.hero-input::placeholder {
|
||||||
color: #9ca3af;
|
color: #6AB0B3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-input.error {
|
.hero-input.error {
|
||||||
box-shadow: 0 0 0 2px #ef4444;
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-input-hint {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #CEE5E6;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-error {
|
.hero-error {
|
||||||
|
|
@ -2130,86 +2342,93 @@
|
||||||
|
|
||||||
.hero-button {
|
.hero-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 11px 16px;
|
||||||
border-radius: var(--radius-full);
|
border-radius: 999px;
|
||||||
background-color: var(--color-purple);
|
background-color: #AE72F9;
|
||||||
color: var(--color-text-white);
|
color: #ffffff;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
font-size: var(--text-sm);
|
font-size: 14px;
|
||||||
box-shadow: var(--shadow-purple);
|
letter-spacing: -0.006em;
|
||||||
|
box-shadow: 0px 4px 24px 0px rgba(174, 114, 249, 0.4);
|
||||||
transition: all var(--transition-normal);
|
transition: all var(--transition-normal);
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.hero-button {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
font-size: var(--text-base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-button:hover {
|
.hero-button:hover {
|
||||||
background-color: var(--color-purple-hover);
|
background-color: #9a5ef0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-button:active {
|
.hero-button:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scroll Indicator */
|
/* Scroll Indicator */
|
||||||
.scroll-indicator {
|
.scroll-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 1.5rem;
|
bottom: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 12px;
|
||||||
opacity: 0.4;
|
|
||||||
transition: opacity var(--transition-normal);
|
transition: opacity var(--transition-normal);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
animation: bounce 1s infinite;
|
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: inherit;
|
color: #9BCACC;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.scroll-indicator {
|
.scroll-indicator {
|
||||||
bottom: 2.5rem;
|
bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 세로가 짧은 화면에서 스크롤 인디케이터 조정 */
|
||||||
|
@media (max-height: 700px) {
|
||||||
|
.scroll-indicator {
|
||||||
|
bottom: 1rem;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 600px) {
|
||||||
|
.scroll-indicator {
|
||||||
|
bottom: 0.5rem;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-indicator-text {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-indicator-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-indicator:hover {
|
.scroll-indicator:hover {
|
||||||
opacity: 1;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-indicator-text {
|
.scroll-indicator-text {
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
}
|
letter-spacing: -0.006em;
|
||||||
|
color: #9BCACC;
|
||||||
@media (min-width: 640px) {
|
|
||||||
.scroll-indicator-text {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-indicator-icon {
|
.scroll-indicator-icon {
|
||||||
width: 2rem;
|
width: 40px;
|
||||||
height: 2rem;
|
height: 40px;
|
||||||
border: 1px solid var(--color-text-white);
|
border: 1px solid #9BCACC;
|
||||||
border-radius: var(--radius-full);
|
border-radius: 999px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
animation: bounce 2s infinite;
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.scroll-indicator-icon {
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
|
|
@ -2217,7 +2436,7 @@
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translateY(-10px);
|
transform: translateY(-8px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2228,17 +2447,55 @@
|
||||||
/* Welcome Section */
|
/* Welcome Section */
|
||||||
.welcome-section {
|
.welcome-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 100dvh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
background-color: #002224;
|
background-color: #002224;
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
overflow: hidden;
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Star Icon - positioned at top center based on Figma (y: 144) */
|
||||||
|
.welcome-star {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.welcome-star {
|
||||||
|
top: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-star img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-header {
|
.welcome-header {
|
||||||
margin-bottom: 2rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
|
@ -2247,19 +2504,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-icon {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-icon img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-title {
|
.welcome-title {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -2297,7 +2541,7 @@
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.welcome-subtitle {
|
.welcome-subtitle {
|
||||||
font-size: var(--text-lg);
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2307,10 +2551,10 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 72rem;
|
max-width: 1144px;
|
||||||
margin: 0 auto 2rem;
|
margin: 0 auto;
|
||||||
overflow-y: auto;
|
z-index: 1;
|
||||||
padding-right: 0.25rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
|
@ -2322,13 +2566,165 @@
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.feature-grid {
|
.feature-grid {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 2rem;
|
gap: 24px;
|
||||||
overflow: visible;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-grid {
|
||||||
|
gap: 32px;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Feature Card */
|
/* Feature Card */
|
||||||
|
.feature-card {
|
||||||
|
position: relative;
|
||||||
|
background-color: #01393B;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 24px 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 16px;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-card {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 280px;
|
||||||
|
min-height: 340px;
|
||||||
|
padding: 24px 24px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-card {
|
||||||
|
max-width: 360px;
|
||||||
|
min-height: 440px;
|
||||||
|
padding: 24px 40px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-number-badge {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid #9BCACC;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-number-badge {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-number-badge {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-number-badge span {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #9BCACC;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-number-badge span {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #E5F1F2;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
line-height: 1.19;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-card-title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-card-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon-box {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-icon-box {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-icon-box {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card-description {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #E5F1F2;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
line-height: 1.45;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.feature-card-description {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.feature-card-description {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legacy feature-item styles (for backward compatibility) */
|
||||||
.feature-item {
|
.feature-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #01393B;
|
background-color: #01393B;
|
||||||
|
|
@ -2514,15 +2910,24 @@
|
||||||
/* Display Section */
|
/* Display Section */
|
||||||
.display-section {
|
.display-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 100dvh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
background-color: #002224;
|
background-color: #002224;
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.display-section .content-safe-area {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* Display Frames Container */
|
/* Display Frames Container */
|
||||||
.display-frames {
|
.display-frames {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -3113,13 +3518,11 @@
|
||||||
/* Dashboard Container */
|
/* Dashboard Container */
|
||||||
.dashboard-container {
|
.dashboard-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--color-bg-dark);
|
background-color: var(--color-bg-dark);
|
||||||
color: var(--color-text-white);
|
color: var(--color-text-white);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
|
@ -3718,33 +4121,120 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =====================================================
|
||||||
|
Footer Component
|
||||||
|
===================================================== */
|
||||||
|
|
||||||
|
/* Landing Footer */
|
||||||
|
.landing-footer {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #002224;
|
||||||
|
padding: 40px 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.landing-footer {
|
||||||
|
padding: 48px 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.landing-footer {
|
||||||
|
padding: 60px 148px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
max-width: 1144px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.footer-content {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
height: 24px;
|
||||||
|
width: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-copyright {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #379599;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
line-height: 1.19;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-info {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #CEE5E6;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
line-height: 1.19;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.footer-info {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* =====================================================
|
/* =====================================================
|
||||||
Header Component
|
Header Component
|
||||||
===================================================== */
|
===================================================== */
|
||||||
|
|
||||||
/* Landing Header */
|
/* Landing Header */
|
||||||
.landing-header {
|
.landing-header {
|
||||||
width: 100%;
|
width: calc(100% - 2rem);
|
||||||
padding: 1rem 1.5rem;
|
max-width: 1280px;
|
||||||
|
padding: 12px 12px 12px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0;
|
top: 16px;
|
||||||
left: 0;
|
left: 50%;
|
||||||
z-index: 20;
|
transform: translateX(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(0, 34, 36, 0.3);
|
||||||
|
border: 1px solid rgba(229, 241, 242, 0.2);
|
||||||
|
border-radius: 999px;
|
||||||
|
backdrop-filter: blur(40px);
|
||||||
|
-webkit-backdrop-filter: blur(40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 768px) {
|
||||||
.landing-header {
|
.landing-header {
|
||||||
padding: 1.5rem 2rem;
|
width: calc(100% - 10rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo {
|
.header-logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 1rem;
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo img {
|
.header-logo img {
|
||||||
|
|
@ -3754,12 +4244,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-login-btn {
|
.header-login-btn {
|
||||||
padding: 0.625rem 1.5rem;
|
padding: 10px 24px;
|
||||||
border-radius: var(--radius-full);
|
border-radius: 999px;
|
||||||
background-color: #94FBE0;
|
background-color: #94FBE0;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: var(--text-sm);
|
font-size: 14px;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all var(--transition-normal);
|
transition: all var(--transition-normal);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<svg width="554" height="144" viewBox="0 0 554 144" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.0100043 56.9324C0.0100043 23.3951 22.6949 0.0200239 55.252 0.0200239C60.8132 0.0200239 65.6842 0.990232 71.9556 3.08069C77.1067 4.89108 80.1674 5.86129 82.2578 5.86129C84.0682 5.86129 85.5986 5.03111 86.4287 2.94066L86.7088 2.24051H88.3792L83.3681 33.8274H81.6977L81.5577 31.1868C81.1376 13.2329 72.2357 1.96044 56.3722 1.96044C34.1074 1.82041 20.3344 30.7667 20.3344 64.584C20.3344 82.948 28.8263 93.9504 42.3192 93.9504C58.3227 93.9504 71.2655 80.1774 77.6668 64.444L78.7771 61.9435L80.4474 62.2235L74.1861 93.8104H72.5157L72.3757 93.2502C71.9556 91.1598 70.7053 90.0495 68.7549 90.0495C66.9445 90.0495 63.8838 91.0197 58.4527 92.6901C50.5209 95.1907 45.2298 96.0308 40.2187 96.0308C15.4433 96.0308 0 82.6679 0 56.9224L0.0100043 56.9324Z" fill="white"/>
|
||||||
|
<path d="M86.2887 92.14H86.8489C96.4509 92.14 102.852 85.8786 109.534 73.0758L146.972 0.570131H157.134L173.968 85.8786C174.798 90.3296 177.028 92.14 180.929 92.14H183.99V93.8104H142.941V92.14H147.812C152.123 92.14 153.653 90.1896 152.823 85.8786L147.812 58.8828H119.006L111.774 72.9358C104.813 86.4387 107.743 92.14 121.096 92.14H122.066V93.8104H86.2987V92.14H86.2887ZM147.512 56.9323L140.14 18.1039L119.966 56.9323H147.522H147.512Z" fill="white"/>
|
||||||
|
<path d="M210.416 91.9999C206.935 90.4696 204.434 89.6294 202.344 89.6294C200.394 89.6294 198.863 90.7397 198.313 92.6901L198.033 93.8003H196.363L201.514 62.2135H203.184V66.8045C203.324 83.7782 211.536 93.8003 226.839 93.8003C238.812 93.8003 247.714 85.4485 247.714 74.7362C247.714 66.2444 242.423 61.2333 229.48 56.6423C211.526 50.2409 205.405 41.469 205.405 29.3664C205.405 10.4423 220.578 0 238.942 0C246.594 0 252.025 1.81039 256.056 3.76082C259.676 5.57121 262.177 6.54142 264.127 6.54142C266.078 6.54142 267.188 5.43118 268.028 3.2007L268.448 2.23049H270.119L264.968 33.8173H263.297L263.017 31.3168C261.487 12.8128 256.056 2.09046 240.332 2.09046C228.5 2.09046 219.738 8.77191 219.738 19.0641C219.738 27.2759 225.029 32.427 238.802 36.878C257.176 42.8593 264.127 51.4912 264.127 64.714C264.127 83.3581 248.954 96.0208 228.22 96.0208C220.708 96.0208 214.997 94.0704 210.406 91.9799L210.416 91.9999Z" fill="white"/>
|
||||||
|
<path d="M292.103 92.14H295.864C299.625 92.14 302.546 89.6394 303.096 85.8786L316.039 4.1909H312.558C298.645 4.1909 288.483 13.0928 282.921 27.4259L282.091 29.6564H280.421L286.822 2.24048H365.309L363.079 29.6564H361.408L360.988 27.4259C358.898 12.9528 353.477 4.1909 339.004 4.1909H335.523L322.58 85.8786C322.02 89.6394 324.11 92.14 328.011 92.14H332.602V93.8103H292.103V92.14Z" fill="white"/>
|
||||||
|
<path d="M348.176 92.14H348.736C358.338 92.14 364.739 85.8786 371.421 73.0758L408.859 0.570131H419.021L435.855 85.8786C436.685 90.3296 438.915 92.14 442.816 92.14H445.877V93.8104H404.828V92.14H409.699C414.01 92.14 415.54 90.1896 414.71 85.8786L409.699 58.8828H380.893L373.651 72.9358C366.69 86.4387 369.62 92.14 382.973 92.14H383.943V93.8104H348.176V92.14ZM409.409 56.9323L402.037 18.1039L381.863 56.9323H409.419H409.409Z" fill="white"/>
|
||||||
|
<path d="M453.518 92.14H457.279C461.04 92.14 463.82 89.6394 464.521 85.8786L476.353 10.1722C477.053 6.41137 474.823 3.91084 471.202 3.91084H466.471V2.24048H508.36C536.886 2.24048 554 15.6034 554 38.8384C554 71.4055 529.925 93.8103 493.887 93.8103H453.528V92.14H453.518ZM492.067 91.8599C516.562 91.8599 533.676 66.1143 533.676 33.2772C533.676 14.7732 524.354 4.1909 505.43 4.1909H496.798L483.575 87.9691C483.295 90.0595 484.825 91.8699 486.916 91.8699H492.067V91.8599Z" fill="white"/>
|
||||||
|
<path d="M28.5812 137.68L27.901 129.588C27.801 128.328 27.691 126.808 27.641 125.507H27.5909C27.0408 126.788 26.2006 128.468 25.6005 129.668L21.5696 137.79H20.7595L16.6786 129.668C16.0785 128.488 15.3383 126.888 14.7382 125.557H14.6881C14.6381 126.918 14.5281 128.468 14.4281 129.588L13.7479 137.68H11.8375L13.2278 120.966H14.5881L19.0891 129.948C19.7692 131.308 20.6294 133.009 21.2396 134.429H21.2896C21.8697 133.019 22.6499 131.388 23.38 129.928L27.861 120.966H29.2213L30.6316 137.68H28.5912H28.5812Z" fill="white"/>
|
||||||
|
<path d="M41.784 137.97C40.9738 137.79 40.0536 137.08 39.8936 135.979C39.3935 137.37 38.0632 137.97 36.6229 137.97C34.3224 137.97 32.8221 136.32 32.8221 134.379C32.8221 132.079 34.6825 130.848 36.7029 130.658L39.6635 130.368V129.428C39.6635 128.168 38.8234 127.278 37.093 127.278C35.9127 127.278 34.7125 127.648 33.9023 128.198L33.4822 126.517C34.4824 125.867 35.7827 125.517 37.203 125.517C39.7936 125.517 41.684 126.988 41.684 129.658V134.769C41.684 135.899 42.3141 136.52 43.0743 136.66L41.794 137.97H41.784ZM39.6635 132.049L37.123 132.289C35.5526 132.449 34.7625 133.339 34.7625 134.409C34.7625 135.479 35.5726 136.24 36.8029 136.24C38.2732 136.24 39.6535 135.139 39.6535 133.389V132.049H39.6635Z" fill="white"/>
|
||||||
|
<path d="M51.1061 127.828C50.896 127.778 50.556 127.698 50.2159 127.698C48.5155 127.698 46.8352 128.718 46.8352 131.649V137.67H44.8947V125.807H46.8352V128.398H46.8652C47.2553 126.717 48.6155 125.647 50.4259 125.647C50.766 125.647 51.2861 125.697 51.5762 125.807L51.1061 127.828Z" fill="white"/>
|
||||||
|
<path d="M60.7682 137.68L55.5071 131.999H55.4771V137.68H53.4567V119.036H55.4771V131.479H55.5071L60.7682 125.817H63.1488L57.7776 131.659L63.3788 137.68H60.7582H60.7682Z" fill="white"/>
|
||||||
|
<path d="M74.8111 130.948L73.7108 132.079H65.9892C65.9892 134.019 67.6095 136.27 70.5501 136.27C72.0205 136.27 73.1407 135.849 74.0109 135.249L73.7708 137.16C72.9307 137.63 71.8604 137.97 70.3101 137.97C66.9094 137.97 63.9987 135.429 63.9987 131.759C63.9987 127.858 66.9794 125.527 69.79 125.527C73.0607 125.527 74.9011 127.828 74.9011 130.088C74.9011 130.428 74.8711 130.718 74.8211 130.948H74.8111ZM69.89 127.208C68.1096 127.208 66.4293 128.698 66.1192 130.508H72.9007C72.9307 130.408 72.9307 130.268 72.9307 130.138C72.9307 128.748 71.8304 127.208 69.89 127.208Z" fill="white"/>
|
||||||
|
<path d="M84.3934 127.388H80.4625V134.329C80.4625 135.719 81.1927 136.22 82.3729 136.22C82.823 136.22 83.2331 136.14 83.5232 136.01L83.3431 137.58C83.0331 137.74 82.533 137.82 82.0328 137.82C80.0924 137.82 78.5521 136.67 78.5521 134.519V127.398H76.1916V125.827H78.5521V123.317L80.4625 122.317V125.827H84.7534L84.3833 127.398L84.3934 127.388Z" fill="white"/>
|
||||||
|
<path d="M87.854 123.487C87.4339 123.487 86.5737 122.597 86.5737 122.176C86.5737 121.726 87.4339 120.896 87.854 120.896C88.3041 120.896 89.1643 121.736 89.1643 122.176C89.1643 122.597 88.3041 123.487 87.854 123.487ZM86.8338 137.68V125.817H88.8742V137.68H86.8338Z" fill="white"/>
|
||||||
|
<path d="M100.297 137.68V129.958C100.297 128.518 99.3265 127.288 97.2861 127.288C95.2457 127.288 94.1654 128.518 94.1654 129.958V137.68H92.145V125.817H94.0054V127.468H94.0354C94.4755 126.397 95.6357 125.527 97.7762 125.527C100.367 125.527 102.307 127.148 102.307 129.768V137.68H100.287H100.297Z" fill="white"/>
|
||||||
|
<path d="M110.009 143.731C106.818 143.731 104.668 141.951 104.668 139.54C104.668 137.42 106.058 136.29 107.308 136.029L106.048 134.769C106.048 133.879 106.678 133.069 107.668 132.859C106.518 132.339 105.518 131.158 105.518 129.508C105.518 127.208 107.328 125.527 109.919 125.527C110.549 125.527 111.049 125.627 111.459 125.737C111.879 125.867 112.429 125.917 113.03 125.917C113.63 125.917 114.39 125.707 114.81 125.477L115.2 127.158C114.86 127.368 114.07 127.548 113.55 127.528C113.94 127.898 114.28 128.628 114.28 129.518C114.28 131.639 112.629 133.499 109.909 133.499C108.779 133.499 108.178 133.739 108.178 134.289C108.178 134.499 108.389 134.759 108.779 134.889L111.969 136.019C114.01 136.73 115.22 137.83 115.22 139.9C115.22 142.101 113.1 143.751 109.979 143.751L110.009 143.731ZM111.379 137.71L109.049 137C107.578 137 106.538 138.13 106.538 139.54C106.538 140.821 107.738 142.031 109.969 142.031C112.199 142.031 113.35 140.901 113.35 139.86C113.35 138.82 112.639 138.11 111.389 137.71H111.379ZM109.929 127.208C108.459 127.208 107.388 128.258 107.388 129.488C107.388 130.718 108.459 131.789 109.929 131.789C111.289 131.789 112.439 130.768 112.439 129.488C112.439 128.208 111.369 127.208 109.929 127.208Z" fill="white"/>
|
||||||
|
<path d="M135.204 137.68L133.344 133.179H126.562L124.732 137.68H122.612L129.603 120.736H130.393L137.385 137.68H135.214H135.204ZM130.783 126.838C130.523 126.187 130.233 125.317 129.993 124.537H129.943C129.733 125.327 129.393 126.187 129.133 126.838L127.303 131.449H132.624L130.793 126.838H130.783Z" fill="white"/>
|
||||||
|
<path d="M147.777 137.68V136.029H147.747C147.307 137.1 146.147 137.97 144.006 137.97C141.416 137.97 139.475 136.35 139.475 133.729V125.817H141.496V133.539C141.496 134.979 142.466 136.21 144.506 136.21C146.547 136.21 147.627 134.979 147.627 133.539V125.817H149.648V137.68H147.787H147.777Z" fill="white"/>
|
||||||
|
<path d="M159.699 127.388H155.769V134.329C155.769 135.719 156.499 136.22 157.679 136.22C158.129 136.22 158.539 136.14 158.829 136.01L158.649 137.58C158.339 137.74 157.839 137.82 157.339 137.82C155.399 137.82 153.858 136.67 153.858 134.519V127.398H151.498V125.827H153.858V123.317L155.769 122.317V125.827H160.06L159.689 127.398L159.699 127.388Z" fill="white"/>
|
||||||
|
<path d="M167.351 137.97C163.81 137.97 161.07 135.399 161.07 131.759C161.07 128.118 163.82 125.527 167.351 125.527C170.882 125.527 173.613 128.098 173.613 131.759C173.613 135.419 170.892 137.97 167.351 137.97ZM167.351 127.358C165.021 127.358 163.11 129.168 163.11 131.809C163.11 134.449 165.021 136.21 167.351 136.21C169.682 136.21 171.572 134.429 171.572 131.809C171.572 129.188 169.662 127.358 167.351 127.358Z" fill="white"/>
|
||||||
|
<path d="M191.306 137.68V129.848C191.306 128.458 190.676 127.278 188.556 127.278C186.435 127.278 185.705 128.458 185.705 129.848V137.68H183.665V129.848C183.665 128.458 183.065 127.278 180.944 127.278C178.824 127.278 178.063 128.458 178.063 129.848V137.68H176.043V125.817H177.933V127.388H177.963C178.384 126.367 179.434 125.527 181.474 125.527C183.015 125.527 184.435 126.177 185.035 127.418C185.585 126.367 187.055 125.527 188.886 125.527C191.556 125.527 193.337 127.098 193.337 129.668V137.68H191.316H191.306Z" fill="white"/>
|
||||||
|
<path d="M204.719 137.97C203.909 137.79 202.989 137.08 202.829 135.979C202.329 137.37 200.998 137.97 199.558 137.97C197.258 137.97 195.757 136.32 195.757 134.379C195.757 132.079 197.618 130.848 199.638 130.658L202.599 130.368V129.428C202.599 128.168 201.759 127.278 200.028 127.278C198.848 127.278 197.648 127.648 196.838 128.198L196.417 126.517C197.418 125.867 198.718 125.517 200.138 125.517C202.729 125.517 204.619 126.988 204.619 129.658V134.769C204.619 135.899 205.249 136.52 206.01 136.66L204.729 137.97H204.719ZM202.599 132.049L200.058 132.289C198.488 132.449 197.698 133.339 197.698 134.409C197.698 135.479 198.508 136.24 199.738 136.24C201.208 136.24 202.589 135.139 202.589 133.389V132.049H202.599Z" fill="white"/>
|
||||||
|
<path d="M214.461 127.388H210.531V134.329C210.531 135.719 211.261 136.22 212.441 136.22C212.891 136.22 213.301 136.14 213.591 136.01L213.411 137.58C213.101 137.74 212.601 137.82 212.101 137.82C210.16 137.82 208.62 136.67 208.62 134.519V127.398H206.26V125.827H208.62V123.317L210.531 122.317V125.827H214.821L214.451 127.398L214.461 127.388Z" fill="white"/>
|
||||||
|
<path d="M217.922 123.487C217.502 123.487 216.642 122.597 216.642 122.176C216.642 121.726 217.502 120.896 217.922 120.896C218.372 120.896 219.233 121.736 219.233 122.176C219.233 122.597 218.372 123.487 217.922 123.487ZM216.902 137.68V125.817H218.942V137.68H216.902Z" fill="white"/>
|
||||||
|
<path d="M227.954 137.97C224.424 137.97 221.673 135.399 221.673 131.759C221.673 128.118 224.424 125.527 227.954 125.527C231.485 125.527 234.216 128.098 234.216 131.759C234.216 135.419 231.495 137.97 227.954 137.97ZM227.954 127.358C225.624 127.358 223.714 129.168 223.714 131.809C223.714 134.449 225.624 136.21 227.954 136.21C230.285 136.21 232.175 134.429 232.175 131.809C232.175 129.188 230.265 127.358 227.954 127.358Z" fill="white"/>
|
||||||
|
<path d="M244.798 137.68V129.958C244.798 128.518 243.828 127.288 241.787 127.288C239.747 127.288 238.667 128.518 238.667 129.958V137.68H236.646V125.817H238.507V127.468H238.537C238.977 126.397 240.137 125.527 242.278 125.527C244.868 125.527 246.808 127.148 246.808 129.768V137.68H244.788H244.798Z" fill="white"/>
|
||||||
|
<path d="M263.632 121.106C263.132 120.896 262.452 120.736 261.902 120.736C259.961 120.736 258.861 121.866 258.861 124.167V125.817H262.812L262.392 127.438H258.861V137.68H256.841V127.438H254.77V125.817H256.841V124.067C256.841 120.736 258.781 119.036 261.762 119.036C262.652 119.036 263.462 119.166 264.042 119.406L263.622 121.106H263.632Z" fill="white"/>
|
||||||
|
<path d="M269.893 137.97C266.353 137.97 263.612 135.399 263.612 131.759C263.612 128.118 266.363 125.527 269.893 125.527C273.424 125.527 276.155 128.098 276.155 131.759C276.155 135.419 273.434 137.97 269.893 137.97ZM269.893 127.358C267.563 127.358 265.653 129.168 265.653 131.809C265.653 134.449 267.563 136.21 269.893 136.21C272.224 136.21 274.114 134.429 274.114 131.809C274.114 129.188 272.204 127.358 269.893 127.358Z" fill="white"/>
|
||||||
|
<path d="M284.787 127.828C284.577 127.778 284.237 127.698 283.896 127.698C282.196 127.698 280.516 128.718 280.516 131.649V137.67H278.575V125.807H280.516V128.398H280.546C280.936 126.717 282.296 125.647 284.106 125.647C284.447 125.647 284.967 125.697 285.257 125.807L284.787 127.828Z" fill="white"/>
|
||||||
|
<path d="M293.409 137.68V120.966H295.559V135.819H303.131V137.68H293.419H293.409Z" fill="white"/>
|
||||||
|
<path d="M310.512 137.97C306.982 137.97 304.231 135.399 304.231 131.759C304.231 128.118 306.982 125.527 310.512 125.527C314.043 125.527 316.774 128.098 316.774 131.759C316.774 135.419 314.053 137.97 310.512 137.97ZM310.512 127.358C308.182 127.358 306.271 129.168 306.271 131.809C306.271 134.449 308.182 136.21 310.512 136.21C312.843 136.21 314.733 134.429 314.733 131.809C314.733 129.188 312.823 127.358 310.512 127.358Z" fill="white"/>
|
||||||
|
<path d="M328.266 128.328C327.266 127.698 326.226 127.388 325.075 127.388C322.635 127.388 320.594 129.138 320.594 131.789C320.594 134.439 322.665 136.19 325.095 136.19C326.296 136.19 327.246 135.949 328.286 135.399L328.076 137.21C327.216 137.63 326.136 137.84 324.935 137.84C321.635 137.84 318.654 135.509 318.654 131.769C318.654 128.028 321.615 125.667 324.935 125.667C326.456 125.667 327.716 126.037 328.656 126.557L328.266 128.338V128.328Z" fill="white"/>
|
||||||
|
<path d="M339.189 137.97C338.378 137.79 337.458 137.08 337.298 135.979C336.798 137.37 335.468 137.97 334.027 137.97C331.727 137.97 330.227 136.32 330.227 134.379C330.227 132.079 332.087 130.848 334.107 130.658L337.068 130.368V129.428C337.068 128.168 336.228 127.278 334.498 127.278C333.317 127.278 332.117 127.648 331.307 128.198L330.887 126.517C331.887 125.867 333.187 125.517 334.608 125.517C337.198 125.517 339.089 126.988 339.089 129.658V134.769C339.089 135.899 339.719 136.52 340.479 136.66L339.199 137.97H339.189ZM337.068 132.049L334.528 132.289C332.957 132.449 332.167 133.339 332.167 134.409C332.167 135.479 332.977 136.24 334.208 136.24C335.678 136.24 337.058 135.139 337.058 133.389V132.049H337.068Z" fill="white"/>
|
||||||
|
<path d="M348.931 127.388H345V134.329C345 135.719 345.73 136.22 346.91 136.22C347.36 136.22 347.77 136.14 348.061 136.01L347.88 137.58C347.57 137.74 347.07 137.82 346.57 137.82C344.63 137.82 343.089 136.67 343.089 134.519V127.398H340.729V125.827H343.089V123.317L345 122.317V125.827H349.291L348.921 127.398L348.931 127.388Z" fill="white"/>
|
||||||
|
<path d="M352.391 123.487C351.971 123.487 351.111 122.597 351.111 122.176C351.111 121.726 351.971 120.896 352.391 120.896C352.841 120.896 353.702 121.736 353.702 122.176C353.702 122.597 352.841 123.487 352.391 123.487ZM351.371 137.68V125.817H353.412V137.68H351.371Z" fill="white"/>
|
||||||
|
<path d="M362.424 137.97C358.893 137.97 356.142 135.399 356.142 131.759C356.142 128.118 358.893 125.527 362.424 125.527C365.954 125.527 368.685 128.098 368.685 131.759C368.685 135.419 365.964 137.97 362.424 137.97ZM362.424 127.358C360.093 127.358 358.183 129.168 358.183 131.809C358.183 134.449 360.093 136.21 362.424 136.21C364.754 136.21 366.644 134.429 366.644 131.809C366.644 129.188 364.734 127.358 362.424 127.358Z" fill="white"/>
|
||||||
|
<path d="M379.267 137.68V129.958C379.267 128.518 378.297 127.288 376.257 127.288C374.216 127.288 373.136 128.518 373.136 129.958V137.68H371.115V125.817H372.976V127.468H373.006C373.446 126.397 374.606 125.527 376.747 125.527C379.337 125.527 381.278 127.148 381.278 129.768V137.68H379.257H379.267Z" fill="white"/>
|
||||||
|
<path d="M395.901 137.68H390.66V120.966H395.031C397.311 120.966 399.642 122.487 399.642 125.237C399.642 126.517 398.991 127.808 397.941 128.248C399.672 128.668 401.272 130.478 401.272 132.649C401.272 135.949 398.551 137.68 395.901 137.68ZM394.721 122.757H392.7V127.678H394.741C396.211 127.678 397.491 126.888 397.491 125.237C397.491 123.587 396.231 122.747 394.711 122.747L394.721 122.757ZM395.401 129.408H392.7V135.899H395.481C397.391 135.899 399.121 134.799 399.121 132.649C399.121 130.498 397.371 129.398 395.401 129.398V129.408Z" fill="white"/>
|
||||||
|
<path d="M412.244 137.97C411.434 137.79 410.514 137.08 410.354 135.979C409.854 137.37 408.523 137.97 407.083 137.97C404.783 137.97 403.282 136.32 403.282 134.379C403.282 132.079 405.143 130.848 407.163 130.658L410.124 130.368V129.428C410.124 128.168 409.284 127.278 407.553 127.278C406.373 127.278 405.173 127.648 404.362 128.198L403.942 126.517C404.943 125.867 406.243 125.517 407.663 125.517C410.254 125.517 412.144 126.988 412.144 129.658V134.769C412.144 135.899 412.774 136.52 413.534 136.66L412.254 137.97H412.244ZM410.124 132.049L407.583 132.289C406.013 132.449 405.223 133.339 405.223 134.409C405.223 135.479 406.033 136.24 407.263 136.24C408.733 136.24 410.114 135.139 410.114 133.389V132.049H410.124Z" fill="white"/>
|
||||||
|
<path d="M418.446 137.84C417.035 137.84 415.955 137.47 415.175 136.92L414.915 134.829C415.775 135.589 417.085 136.19 418.476 136.19C419.706 136.19 420.626 135.539 420.626 134.539C420.626 133.539 419.896 132.999 418.666 132.549C416.435 131.759 415.185 130.738 415.185 128.878C415.185 127.018 416.755 125.657 418.926 125.657C420.206 125.657 421.416 126.127 421.886 126.417L421.466 128.068C420.946 127.678 420.076 127.278 418.896 127.278C417.796 127.278 417.065 127.908 417.065 128.798C417.065 129.738 417.716 130.158 418.956 130.608C421.236 131.418 422.567 132.499 422.567 134.459C422.567 136.42 421.076 137.84 418.456 137.84H418.446Z" fill="white"/>
|
||||||
|
<path d="M435.109 130.948L434.009 132.079H426.287C426.287 134.019 427.908 136.27 430.848 136.27C432.319 136.27 433.439 135.849 434.309 135.249L434.069 137.16C433.229 137.63 432.159 137.97 430.608 137.97C427.208 137.97 424.297 135.429 424.297 131.759C424.297 127.858 427.288 125.527 430.088 125.527C433.359 125.527 435.199 127.828 435.199 130.088C435.199 130.428 435.169 130.718 435.119 130.948H435.109ZM430.178 127.208C428.398 127.208 426.718 128.698 426.408 130.508H433.189C433.219 130.408 433.219 130.268 433.219 130.138C433.219 128.748 432.119 127.208 430.178 127.208Z" fill="white"/>
|
||||||
|
<path d="M446.582 137.68V136.37H446.552C446.002 137.16 444.802 137.97 442.881 137.97C440.081 137.97 437.07 135.739 437.07 131.759C437.07 128.118 439.66 125.527 443.121 125.527C444.531 125.527 445.972 126.107 446.472 126.657V119.036H448.492V137.68H446.582ZM446.472 128.648C446.002 128.128 444.932 127.368 443.301 127.368C440.971 127.368 439.11 129.178 439.11 131.789C439.11 134.399 440.971 136.22 443.301 136.22C444.842 136.22 445.942 135.429 446.472 134.679V128.658V128.648Z" fill="white"/>
|
||||||
|
<path d="M463.235 137.68H457.994V120.966H462.365C464.646 120.966 466.976 122.487 466.976 125.237C466.976 126.517 466.326 127.808 465.276 128.248C467.006 128.668 468.607 130.478 468.607 132.649C468.607 135.949 465.886 137.68 463.235 137.68ZM462.055 122.757H460.035V127.678H462.075C463.546 127.678 464.826 126.888 464.826 125.237C464.826 123.587 463.566 122.747 462.045 122.747L462.055 122.757ZM462.735 129.408H460.035V135.899H462.815C464.726 135.899 466.456 134.799 466.456 132.649C466.456 130.498 464.706 129.398 462.735 129.398V129.408Z" fill="white"/>
|
||||||
|
<path d="M479.479 137.68V136.029H479.449C478.999 137.1 477.849 137.97 475.708 137.97C473.118 137.97 471.177 136.35 471.177 133.729V125.817H473.198V133.539C473.198 134.979 474.168 136.21 476.208 136.21C478.249 136.21 479.329 134.979 479.329 133.539V125.817H481.349V137.68H479.489H479.479Z" fill="white"/>
|
||||||
|
<path d="M487.411 137.84C486 137.84 484.92 137.47 484.14 136.92L483.88 134.829C484.74 135.589 486.05 136.19 487.441 136.19C488.671 136.19 489.591 135.539 489.591 134.539C489.591 133.539 488.861 132.999 487.631 132.549C485.4 131.759 484.15 130.738 484.15 128.878C484.15 127.018 485.72 125.657 487.891 125.657C489.171 125.657 490.381 126.127 490.851 126.417L490.431 128.068C489.911 127.678 489.041 127.278 487.861 127.278C486.76 127.278 486.03 127.908 486.03 128.798C486.03 129.738 486.68 130.158 487.921 130.608C490.201 131.418 491.531 132.499 491.531 134.459C491.531 136.42 490.041 137.84 487.421 137.84H487.411Z" fill="white"/>
|
||||||
|
<path d="M495.242 123.487C494.822 123.487 493.962 122.597 493.962 122.176C493.962 121.726 494.822 120.896 495.242 120.896C495.692 120.896 496.553 121.736 496.553 122.176C496.553 122.597 495.692 123.487 495.242 123.487ZM494.222 137.68V125.817H496.263V137.68H494.222Z" fill="white"/>
|
||||||
|
<path d="M507.685 137.68V129.958C507.685 128.518 506.715 127.288 504.674 127.288C502.634 127.288 501.554 128.518 501.554 129.958V137.68H499.533V125.817H501.394V127.468H501.424C501.864 126.397 503.024 125.527 505.165 125.527C507.755 125.527 509.696 127.148 509.696 129.768V137.68H507.675H507.685Z" fill="white"/>
|
||||||
|
<path d="M522.958 130.948L521.858 132.079H514.136C514.136 134.019 515.757 136.27 518.697 136.27C520.168 136.27 521.288 135.849 522.158 135.249L521.918 137.16C521.078 137.63 520.008 137.97 518.457 137.97C515.057 137.97 512.146 135.429 512.146 131.759C512.146 127.858 515.137 125.527 517.937 125.527C521.208 125.527 523.048 127.828 523.048 130.088C523.048 130.428 523.018 130.718 522.968 130.948H522.958ZM518.027 127.208C516.247 127.208 514.566 128.698 514.256 130.508H521.038C521.068 130.408 521.068 130.268 521.068 130.138C521.068 128.748 519.968 127.208 518.027 127.208Z" fill="white"/>
|
||||||
|
<path d="M528.56 137.84C527.149 137.84 526.069 137.47 525.289 136.92L525.029 134.829C525.889 135.589 527.199 136.19 528.59 136.19C529.82 136.19 530.74 135.539 530.74 134.539C530.74 133.539 530.01 132.999 528.78 132.549C526.549 131.759 525.299 130.738 525.299 128.878C525.299 127.018 526.869 125.657 529.04 125.657C530.32 125.657 531.53 126.127 532 126.417L531.58 128.068C531.06 127.678 530.19 127.278 529.01 127.278C527.909 127.278 527.179 127.908 527.179 128.798C527.179 129.738 527.829 130.158 529.07 130.608C531.35 131.418 532.681 132.499 532.681 134.459C532.681 136.42 531.19 137.84 528.57 137.84H528.56Z" fill="white"/>
|
||||||
|
<path d="M538.042 137.84C536.631 137.84 535.551 137.47 534.771 136.92L534.511 134.829C535.371 135.589 536.681 136.19 538.072 136.19C539.302 136.19 540.222 135.539 540.222 134.539C540.222 133.539 539.492 132.999 538.262 132.549C536.031 131.759 534.781 130.738 534.781 128.878C534.781 127.018 536.351 125.657 538.522 125.657C539.802 125.657 541.012 126.127 541.482 126.417L541.062 128.068C540.542 127.678 539.672 127.278 538.492 127.278C537.392 127.278 536.661 127.908 536.661 128.798C536.661 129.738 537.312 130.158 538.552 130.608C540.832 131.418 542.163 132.499 542.163 134.459C542.163 136.42 540.672 137.84 538.052 137.84H538.042Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
10
src/App.tsx
10
src/App.tsx
|
|
@ -1,5 +1,6 @@
|
||||||
|
|
||||||
import React, { useRef, useState, useEffect } from 'react';
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
|
import Header from './components/Header';
|
||||||
import HeroSection from './pages/Landing/HeroSection';
|
import HeroSection from './pages/Landing/HeroSection';
|
||||||
import WelcomeSection from './pages/Landing/WelcomeSection';
|
import WelcomeSection from './pages/Landing/WelcomeSection';
|
||||||
import DisplaySection from './pages/Landing/DisplaySection';
|
import DisplaySection from './pages/Landing/DisplaySection';
|
||||||
|
|
@ -112,21 +113,22 @@ const App: React.FC = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="snap-container" ref={containerRef}>
|
<main className="landing-container" ref={containerRef}>
|
||||||
<section className="snap-section">
|
<Header />
|
||||||
|
<section className="landing-section">
|
||||||
<HeroSection
|
<HeroSection
|
||||||
onAnalyze={handleStartAnalysis}
|
onAnalyze={handleStartAnalysis}
|
||||||
onNext={() => scrollToSection(1)}
|
onNext={() => scrollToSection(1)}
|
||||||
error={error}
|
error={error}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className="snap-section">
|
<section className="landing-section">
|
||||||
<WelcomeSection
|
<WelcomeSection
|
||||||
onStartClick={() => scrollToSection(0)}
|
onStartClick={() => scrollToSection(0)}
|
||||||
onNext={() => scrollToSection(0)}
|
onNext={() => scrollToSection(0)}
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<section className="snap-section">
|
<section className="landing-section">
|
||||||
<DisplaySection onStartClick={() => scrollToSection(0)} />
|
<DisplaySection onStartClick={() => scrollToSection(0)} />
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Footer: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<footer className="landing-footer">
|
||||||
|
<div className="footer-content">
|
||||||
|
<div className="footer-left">
|
||||||
|
<img src="/assets/images/logo.svg" alt="CASTAD" className="footer-logo" />
|
||||||
|
<p className="footer-copyright">Copyright ⓒ O2O Inc. All rights reserved</p>
|
||||||
|
</div>
|
||||||
|
<div className="footer-right">
|
||||||
|
<p className="footer-info">사업자 등록번호 : 620-87-00810 | 대표 : 안성민</p>
|
||||||
|
<p className="footer-info">본사 : 41593 대구광역시 북구 옥산로 111, 5층 유니콘랩 대구 A05호</p>
|
||||||
|
<p className="footer-info">연구소 : 13453 경기 성남시 수정구 금토로 32 (금토동) (주)KT 판교빌딩 504호~505호 (East)</p>
|
||||||
|
<p className="footer-info">전화 : 070-4260-8310 | 010-2755-6463</p>
|
||||||
|
<p className="footer-info">이메일 : o2oteam@o2o.kr</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -230,9 +230,9 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full h-[100dvh] bg-[#0d1416] text-white overflow-hidden">
|
<div className={`flex w-full bg-[#0d1416] text-white ${activeItem === '대시보드' || activeItem === '비즈니스 설정' ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
|
||||||
<Sidebar activeItem={activeItem} onNavigate={setActiveItem} onHome={handleHome} />
|
<Sidebar activeItem={activeItem} onNavigate={setActiveItem} onHome={handleHome} />
|
||||||
<div className="flex-1 h-full relative overflow-hidden pl-0 md:pl-0">
|
<div className={`flex-1 relative pl-0 md:pl-0 ${activeItem === '대시보드' || activeItem === '비즈니스 설정' ? 'overflow-y-auto' : 'h-full overflow-hidden'}`}>
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Header from '../../components/Header';
|
import Footer from '../../components/Footer';
|
||||||
|
|
||||||
interface DisplaySectionProps {
|
interface DisplaySectionProps {
|
||||||
onStartClick?: () => void;
|
onStartClick?: () => void;
|
||||||
|
|
@ -15,9 +15,7 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="display-section">
|
<div className="display-section">
|
||||||
<Header />
|
<div className="content-safe-area">
|
||||||
|
|
||||||
<div className="content-safe-area" style={{ paddingTop: '7rem' }}>
|
|
||||||
{/* Main visual frames container */}
|
{/* Main visual frames container */}
|
||||||
<div className="display-frames">
|
<div className="display-frames">
|
||||||
{frames.map((frame, index) => (
|
{frames.map((frame, index) => (
|
||||||
|
|
@ -35,6 +33,7 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
|
||||||
시작하기
|
시작하기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -41,52 +41,66 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onNext, error: ext
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="hero-section">
|
<div className="hero-section">
|
||||||
<div className="content-safe-area">
|
{/* Animated background orbs */}
|
||||||
{/* Title */}
|
<div className="hero-bg-orbs">
|
||||||
<h1 className="hero-title">CASTAD</h1>
|
<div className="hero-orb hero-orb-purple-1"></div>
|
||||||
|
<div className="hero-orb hero-orb-mint-1"></div>
|
||||||
|
<div className="hero-orb hero-orb-purple-2"></div>
|
||||||
|
<div className="hero-orb hero-orb-mint-2"></div>
|
||||||
|
</div>
|
||||||
|
{/* Background blur overlay */}
|
||||||
|
<div className="hero-bg-blur"></div>
|
||||||
|
|
||||||
|
<div className="hero-content">
|
||||||
|
{/* Logo Image */}
|
||||||
|
<img
|
||||||
|
src="/assets/images/castad-logo-large.svg"
|
||||||
|
alt="CASTAD"
|
||||||
|
className="hero-logo"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Subtitle */}
|
|
||||||
<p className="hero-subtitle">
|
|
||||||
Marketing Automation for Location Based Business
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Input Form */}
|
{/* Input Form */}
|
||||||
<div className="hero-form">
|
<div className="hero-form">
|
||||||
<input
|
<span className="hero-input-label">URL 입력</span>
|
||||||
type="text"
|
<div className="hero-input-wrapper">
|
||||||
value={url}
|
<input
|
||||||
onChange={(e) => {
|
type="text"
|
||||||
setUrl(e.target.value);
|
value={url}
|
||||||
if (localError) setLocalError('');
|
onChange={(e) => {
|
||||||
}}
|
setUrl(e.target.value);
|
||||||
placeholder="URL 입력"
|
if (localError) setLocalError('');
|
||||||
className={`hero-input ${error ? 'error' : ''}`}
|
}}
|
||||||
/>
|
placeholder="https://www.castad.com"
|
||||||
|
className={`hero-input ${error ? 'error' : ''}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="hero-input-hint">URL에서 가져온 정보로 영상이 자동 생성됩니다.</span>
|
||||||
{error && (
|
{error && (
|
||||||
<p className="hero-error">{error}</p>
|
<p className="hero-error">{error}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<button onClick={handleStart} className="hero-button">
|
<button onClick={handleStart} className="hero-button">
|
||||||
시작하기
|
브랜드 분석
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer Indicator */}
|
{/* Footer Indicator */}
|
||||||
<button onClick={onNext} className="scroll-indicator">
|
<button onClick={onNext} className="scroll-indicator">
|
||||||
<span className="scroll-indicator-text">더 알아보기</span>
|
<span className="scroll-indicator-text">스크롤하여 더 보기</span>
|
||||||
<div className="scroll-indicator-icon">
|
<div className="scroll-indicator-icon">
|
||||||
<svg
|
<svg
|
||||||
width="16"
|
width="24"
|
||||||
height="16"
|
height="24"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
strokeWidth="2"
|
strokeWidth="1"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
>
|
>
|
||||||
<path d="M7 13l5 5 5-5M7 6l5 5 5-5" />
|
<path d="M7 10l5 5 5-5" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,65 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Header from '../../components/Header';
|
|
||||||
|
|
||||||
interface WelcomeSectionProps {
|
interface WelcomeSectionProps {
|
||||||
onStartClick?: () => void;
|
onStartClick?: () => void;
|
||||||
onNext?: () => void;
|
onNext?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const WelcomeSection: React.FC<WelcomeSectionProps> = ({ onStartClick, onNext }) => {
|
const WelcomeSection: React.FC<WelcomeSectionProps> = () => {
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: '비즈니스 핵심 정보 분석',
|
title: '비즈니스 핵심 정보 분석',
|
||||||
description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요',
|
description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요',
|
||||||
icon: '/assets/images/icon-analysis.svg',
|
iconBg: '#9BCACC',
|
||||||
iconBg: '#9BCACC'
|
icon: '/assets/images/icon-analysis.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: '홍보 콘텐츠 자동 제작',
|
title: '홍보 콘텐츠 자동 제작',
|
||||||
description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요',
|
description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요',
|
||||||
icon: '/assets/images/icon-content.svg',
|
iconBg: '#DFC7FD',
|
||||||
iconBg: '#DFC7FD'
|
icon: '/assets/images/icon-content.svg'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: '멀티채널 자동 배포',
|
title: '멀티채널 자동 배포',
|
||||||
description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요',
|
description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요',
|
||||||
icon: '/assets/images/icon-deploy.svg',
|
iconBg: '#D4FDF3',
|
||||||
iconBg: '#D4FDF3'
|
icon: '/assets/images/icon-deploy.svg'
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="welcome-section">
|
<div className="welcome-section">
|
||||||
<Header />
|
<div className="welcome-content">
|
||||||
|
{/* Star Icon - Top Center */}
|
||||||
|
<div className="welcome-star">
|
||||||
|
<img src="/assets/images/star-icon.svg" alt="star" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="content-safe-area" style={{ paddingTop: '5rem' }}>
|
{/* Header */}
|
||||||
<div className="welcome-header">
|
<div className="welcome-header">
|
||||||
<div className="welcome-icon">
|
|
||||||
<img src="/assets/images/star-icon.svg" alt="star" />
|
|
||||||
</div>
|
|
||||||
<h2 className="welcome-title">CASTAD에 오신 것을 환영합니다.</h2>
|
<h2 className="welcome-title">CASTAD에 오신 것을 환영합니다.</h2>
|
||||||
<p className="welcome-subtitle">분석, 제작, 배포까지 콘텐츠 마케팅의 전과정을 자동화</p>
|
<p className="welcome-subtitle">분석, 제작, 배포까지 콘텐츠 마케팅의 전과정을 자동화</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Feature Cards */}
|
||||||
<div className="feature-grid">
|
<div className="feature-grid">
|
||||||
{features.map((feature) => (
|
{features.map((feature) => (
|
||||||
<div key={feature.id} className="feature-item">
|
<div key={feature.id} className="feature-card">
|
||||||
<div className="feature-number">{feature.id}</div>
|
<div className="feature-number-badge">
|
||||||
<h3 className="feature-title">{feature.title}</h3>
|
<span>{feature.id}</span>
|
||||||
<div className="feature-icon" style={{ backgroundColor: feature.iconBg }}>
|
|
||||||
<img src={feature.icon} alt={feature.title} />
|
|
||||||
</div>
|
</div>
|
||||||
<p className="feature-description">{feature.description}</p>
|
<h3 className="feature-card-title">{feature.title}</h3>
|
||||||
|
<div className="feature-icon-box" style={{ backgroundColor: feature.iconBg }}>
|
||||||
|
<img src={feature.icon} alt={feature.title} className="feature-icon-img" />
|
||||||
|
</div>
|
||||||
|
<p className="feature-card-description">{feature.description}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button onClick={onNext} className="btn-start">
|
|
||||||
시작하기
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue