|
|
.App { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.App-logo { |
|
|
height: 40vmin; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@media (prefers-reduced-motion: no-preference) { |
|
|
.App-logo { |
|
|
animation: App-logo-spin infinite 20s linear; |
|
|
} |
|
|
} |
|
|
|
|
|
.App-header { |
|
|
background-color: #282c34; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: calc(10px + 2vmin); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.App-link { |
|
|
color: #61dafb; |
|
|
} |
|
|
|
|
|
@keyframes App-logo-spin { |
|
|
from { |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.landing-container { font-family: Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } |
|
|
.landing-header, .landing-footer { background: #f8f9fb; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; } |
|
|
.landing-main { flex: 1; padding: 40px; display: flex; flex-direction: column; align-items: center; } |
|
|
.landing-header .logo { font-weight: bold; font-size: 1.5rem; } |
|
|
.landing-nav a, .lang-select { margin: 0 10px; text-decoration: none; color: #222; } |
|
|
.start-btn { background: #2563eb; color: #fff; border: none; padding: 14px 32px; border-radius: 8px; font-size: 1.1rem; margin: 24px 0; cursor: pointer; } |
|
|
.how-it-works { margin: 40px 0; width: 100%; max-width: 900px; } |
|
|
.how-it-works h2 {text-align: center; } |
|
|
.steps { display: flex; justify-content: space-between; } |
|
|
.step { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #e5e7eb; padding: 24px; flex: 1; margin: 0 10px; text-align: center; } |
|
|
.step-number { background: #2563eb; color: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.2rem; } |
|
|
.download-resources { margin: 40px 0; width: 100%; max-width: 900px; } |
|
|
.download-resources h2 {text-align: center; } |
|
|
.resources { display: flex; justify-content: space-between; } |
|
|
.resource-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #e5e7eb; padding: 24px; flex: 1; margin: 0 10px; text-align: center; } |
|
|
.view-all { display: block; margin-top: 16px; text-align: right; color: #2563eb; text-decoration: none; } |
|
|
|
|
|
|
|
|
.chat-container { min-height: 100vh; display: flex; flex-direction: column; background: #f4f6fa; } |
|
|
.chat-header { background: #2563eb; color: #fff; padding: 20px; font-size: 1.3rem; text-align: center; } |
|
|
.chat-messages { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } |
|
|
.chat-message { max-width: 60%; padding: 12px 18px; border-radius: 16px; margin-bottom: 8px; } |
|
|
.chat-message.user { align-self: flex-end; background: #2563eb; color: #fff; } |
|
|
.chat-message.ai { align-self: flex-start; background: #fff; color: #222; border: 1px solid #e5e7eb; } |
|
|
.chat-input-area { display: flex; padding: 16px; background: #fff; border-top: 1px solid #e5e7eb; } |
|
|
.chat-input-area input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; margin-right: 10px; font-size: 1rem; } |
|
|
.chat-input-area button { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 10px 24px; font-size: 1rem; cursor: pointer; } |
|
|
|
