File size: 3,193 Bytes
effe6e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.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 Page Styles */
.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 Page Styles */
.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; }
|