| .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; } |
|
|
