diff --git a/public/assets/images/ABCD-blue.png b/public/assets/images/ABCD-blue.png new file mode 100644 index 00000000..bd5cb594 Binary files /dev/null and b/public/assets/images/ABCD-blue.png differ diff --git a/src/assets/icons/man_with_keyboard.svg b/src/assets/icons/man_with_keyboard.svg new file mode 100644 index 00000000..26a7bd5c --- /dev/null +++ b/src/assets/icons/man_with_keyboard.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css index 049a7507..f01d7168 100644 --- a/src/assets/styles/about.css +++ b/src/assets/styles/about.css @@ -1,15 +1,3 @@ -:root { - --bg-dark: #0f172a; - --bg-light: #ffffff; - --bg-secondary: #1e293b; - --primary: #3b82f6; - --primary-light: #60a5fa; - --text-main: #f8fafc; - --text-primary: #cbd5e1; - --text-secondary: #212223; - --accent: #f59e0b; -} - .about-container { background-color: light-dark(var(--bg-light), var(--bg-dark)); color: var(--text-main); diff --git a/src/assets/styles/coming-soon.css b/src/assets/styles/coming-soon.css new file mode 100644 index 00000000..c9ecd125 --- /dev/null +++ b/src/assets/styles/coming-soon.css @@ -0,0 +1,34 @@ +.page-container { + display: flex; + flex-direction: column; + gap: 2.5rem; + margin: 2rem 0; +} + +.heading-container { + background: var(--bg-secondary); + text-align: center; + border-radius: 1.5rem; +} + +.logo { + margin-bottom: 0.5rem; + filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); + height: 60rem; + aspect-ratio: 1; +} + +h1 { + color: var(--primary); + font-size: clamp(2.25rem, 5vw, 3.5rem); + margin-bottom: 1rem; + font-weight: 700; +} + +.subtitle { + font-size: 1.125rem; + color: var(--text-secondary); + max-width: 500px; + margin: 0 auto; + line-height: 1.6; +} \ No newline at end of file diff --git a/src/assets/styles/contact.css b/src/assets/styles/contact.css index d473b1ae..f8c5e6a8 100644 --- a/src/assets/styles/contact.css +++ b/src/assets/styles/contact.css @@ -4,37 +4,108 @@ .container__contact { box-sizing: border-box; + padding: 4rem 1.5rem; + background-color: var(--bg-alt); + color: var(--text-main); } .contact__message { - @apply text-sm md:p-[1rem]; + /* @apply text-sm md:p-[1rem]; */ margin-top: 4px; } -.custom__input { +/* .custom__input { @apply md:tracking-widest; -} +} */ .container__form { - @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36; + /* @apply flex flex-grow items-center justify-start max-sm:justify-center md:mr-36; */ + padding: 3rem; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.contact-wrapper { + max-width: 700px; + margin: 2rem auto 0 auto; + border-radius: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + overflow: hidden; + background-color: var(--bg-main); +} + +/* --- Top Section: Contact Info --- */ +.contact-info { + background: linear-gradient(135deg, var(--c-primary, #3b82f6) 0%, #60a5fa 100%); + color: #ffffff; + padding: 1rem; +} +.contact-info h3 { + font-size: 1.8rem; + font-weight: 700; + margin-bottom: 1rem; + color: #ffffff; +} +.info-item { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1rem; +} +.info-item i { + font-size: 1.2rem; + color: var(--c-primary); + border-radius: 50%; + width: 40px; + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; +} +.info-item a, .info-item span { + color: #ffffff; + text-decoration: none; + font-weight: 500; + font-size: 1.8rem; +} + +.copy-btn { + background: none; + border: none; + color: inherit; + cursor: pointer; + padding: 0 0.5rem 0 0.2rem; + font-size: 1rem; + opacity: 0.7; + transition: opacity 0.2s; +} + +.copy-btn:hover { + opacity: 1; } -.contact__form { - @apply w-full p-4; +.info-item .underline-text { + text-decoration: underline; } -.section__grid { - @apply grid items-center gap-1; +/* --- Dark Theme Override for Contact Info --- */ +[data-theme="dark"] .contact-info { + background: #1f2937; } -.center__text { - @apply top-[1rem] mt-5 text-center; +[data-theme="dark"] .contact-info h3, +[data-theme="dark"] .contact-info a { + color: #d1d5db; } -.contact__button--group { - @apply mt-8 flex justify-end; +[data-theme="dark"] .info-item i { + color: #1f2937; + background-color: #d1d5db; } -.contact__button { - @apply w-36 max-sm:w-full; +@media (max-width: 768px) { + .contact-info, .container__form { + padding: 2rem; + } } diff --git a/src/assets/styles/cookies.css b/src/assets/styles/cookies.css new file mode 100644 index 00000000..fa9ad421 --- /dev/null +++ b/src/assets/styles/cookies.css @@ -0,0 +1,60 @@ +.article-container { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; + background: var(--bg-secondary); + border-radius: 12px; +} + +.article-header { + text-align: center; + margin-bottom: 2.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.article-header h1 { + font-size: clamp(2rem, 5vw, 2.75rem); + color: var(--text-main); + margin-bottom: 0.5rem; +} + +.article-header p { + color: var(--text-secondary); + font-style: italic; +} + +.article-content { + line-height: 1.8; + color: var(--text-main); +} + +.article-content h2, +.article-content h3, +.article-content h4 { + color: var(--text-main); + margin-top: 2.5rem; + margin-bottom: 1rem; + line-height: 1.3; +} + +.article-content a { + color: var(--primary); + text-decoration: underline; +} + +.article-content ul, +.article-content ol { + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.article-content li { + margin-bottom: 0.5rem; +} + +.article-content hr { + border: 0; + border-top: 1px solid var(--border-color); + margin: 2.5rem 0; +} \ No newline at end of file diff --git a/src/assets/styles/countdown.css b/src/assets/styles/countdown.css new file mode 100644 index 00000000..1f628e22 --- /dev/null +++ b/src/assets/styles/countdown.css @@ -0,0 +1,33 @@ +.countdown__container { + display: grid; + place-items: center; +} + +.countdown { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; +} + +.countdown-item { + background: var(--bg-secondary); + padding: 1rem; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + min-width: 90px; + text-align: center; + flex-grow: 1; +} + +.countdown-number { + font-size: clamp(2rem, 6vw, 2.5rem); + font-weight: bold; + color: var(--primary); +} + +.countdown-label { + font-size: 0.9rem; + color: var(--text-secondary); + margin-top: 0.25rem; +} \ No newline at end of file diff --git a/src/assets/styles/faq.css b/src/assets/styles/faq.css new file mode 100644 index 00000000..58585ee1 --- /dev/null +++ b/src/assets/styles/faq.css @@ -0,0 +1,73 @@ +.faq-container { + max-width: 800px; + margin: 2rem auto; + padding: 0 1rem; +} + +.faq-item { + background: var(--bg-secondary); + border-radius: 12px; + margin-bottom: 1rem; + border: 1px solid var(--border-color); + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + transition: all 0.2s ease-in-out; + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.faq-item:hover { + background: var(--primary-light); + border-color: var(--primary-light); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,0,0,0.08); +} + +.faq-item[open] { + border-color: var(--primary); +} + +.faq-question { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.25rem; + cursor: pointer; + font-size: 1.125rem; + font-weight: 600; + color: var(--text-main); + list-style: none; +} + +.faq-question::-webkit-details-marker { + display: none; +} + +.faq-question .icon { + transition: transform 0.3s ease-in-out; + color: var(--primary); +} + +.faq-item[open] .faq-question .icon { + transform: rotate(180deg); +} + +.faq-answer { + padding: 1.25rem; + padding-top: 0; + color: var(--text-secondary); + line-height: 1.7; + overflow: hidden; +} +.faq-item[open] .faq-answer { + animation: fadeIn 0.5s ease; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css index b4fb5da4..b7a14fa5 100644 --- a/src/assets/styles/footer.css +++ b/src/assets/styles/footer.css @@ -1,20 +1,131 @@ +:root { + --footer-bg: #1f2937; + --footer-text-main: #d1d5db; + --footer-text-secondary: #9ca3af; + --footer-text-hover: #2825e8; + --footer-brand-text: #ffffff; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #9ca3af; + --footer-copyright-link-hover: #0ea5e9; + --footer-border-color: #374151; +} + +[data-theme="dark"] { + --footer-bg: #1f2937; + --footer-text-main: #d1d5db; + --footer-text-secondary: #9ca3af; + --footer-text-hover: #2825e8; + --footer-brand-text: #ffffff; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #9ca3af; + --footer-copyright-link-hover: #0ea5e9; + --footer-border-color: #374151; +} +[data-theme="light"]{ + --footer-bg: #c7f3ef; + --footer-text-main: #22223b; + --footer-text-secondary: gray; + --footer-text-hover: #090909; + --footer-brand-text: #0f0f10; + --footer-brand-highlight: #fbbf24; + --footer-social-hover: #0ea5e9; + --footer-copyright-link: #58250b; + --footer-copyright-link-hover: #178bb9; + --footer-border-color: #e5e7eb; +} + +/* Footer background and layout */ .container__footer { - @apply w-full; - border-top: 2px solid; - padding: 2rem 0; - margin-top: 2rem; + background: var(--footer-bg); + padding: 2.5rem 2rem 1.5rem 2rem; + color: var(--footer-text-main); + font-size: 1rem; + border-top: 1px solid var(--footer-border-color); +} + +.footer__main-content { + display: flex; + flex-wrap: wrap; + gap: 2rem; + max-width: 1100px; + margin: 0 auto; + width: 100%; +} + +.footer__brand-section { + flex: 1 1 220px; + min-width: 220px; } .footer__nav { display: flex; + + flex-wrap: wrap; + justify-content: space-between; + gap: 2rem; + flex: 3 1 600px; +} + +.brand { + font-size: 2rem; + font-weight: 700; + color: var(--footer-brand-text); + margin-bottom: 0.5rem; +} + +.brand .kbd { + color: var(--footer-brand-highlight); +} + +.container__footer p { + margin: 0.5rem 0 1.5rem 0; + color: var(--footer-text-main); + font-size: 1.2rem; + max-width: 260px; +} + +.social { + display: flex; + gap: 1.2rem; +} + +.social a { + color: var(--footer-text-main); + font-size: 1.5rem; + transition: color 0.2s; +} + +.social a:hover { + color: var(--footer-social-hover); +} + +.footer__nav--item { + flex: 1; + min-width: 150px; +} + +.footer__nav--title { + font-weight: 700; + font-size: 1.8rem; + margin-bottom: 1rem; + color: var(--footer-brand-text); + list-style: none; + pointer-events: none; +} +.footer__nav--title::-webkit-details-marker { + display: none; +} + +.footer__nav--title .fa-chevron-down { + display: none; +} + +.footer__nav--links { + display: flex; flex-direction: column; - align-items: center; - justify-content: center; gap: 0.75rem; - color: #374151; - /* text-gray-700 */ - text-decoration: underline; - text-underline-offset: 2px; } @media (min-width: 768px) { @@ -49,8 +160,92 @@ } } +.footer__nav--links a { + color: var(--footer-text-secondary); + text-decoration: none; + font-size: 1.2rem; + transition: color 0.2s; +} + +.footer__nav--links a:hover { + color: var(--footer-text-hover); + text-decoration: underline; +} + +.copyright { + text-align: center; + color: var(--footer-text-main); + font-size: 0.95rem; + margin-top: 2rem; + border-top: 1px solid var(--footer-border-color); + padding-top: 1.5rem; +} + +.copyright a { + color: var(--footer-copyright-link); + text-decoration: none; + margin: 0 0.5rem; +} + +.copyright a:hover { + text-decoration: underline; + color: var(--footer-copyright-link-hover); +} + +/* --- Mobile Accordion Styles --- */ @media (max-width: 768px) { - .container__footer { - display: none; + .footer__main-content { + flex-direction: column; + } + + .footer__nav { + flex-direction: column; + width: 100%; + gap: 0; + flex: initial; + } + + .footer__nav--item { + width: 100%; + border-bottom: 1px solid var(--footer-border-color); + flex: initial; + } + .footer__nav--item:first-of-type { + border-top: 1px solid var(--footer-border-color); + } + + .footer__nav--title { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 0; + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0; + pointer-events: auto; + } + + .footer__nav--title .fa-chevron-down { + display: inline-block; + transition: transform 0.2s ease-in-out; + } + + .footer__nav--item[open] > summary .fa-chevron-down { + transform: rotate(180deg); + } + + .footer__nav--links { + padding: 0 0 1.2rem 1rem; + gap: 1rem; + } + + .footer__nav--links a { + font-size: 1rem; + } + + .copyright { + margin-top: 1rem; + font-size: 0.85rem; } } \ No newline at end of file diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index 48706a5b..16cdcc5e 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -184,3 +184,9 @@ .m-0 { margin: 0; } + + +mark { + margin-inline: 0.5rem; + padding-inline: 0.5rem; +} \ No newline at end of file diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css index e6387396..a15f60a8 100644 --- a/src/assets/styles/header.css +++ b/src/assets/styles/header.css @@ -19,29 +19,50 @@ justify-self: start; .logo { - width: 2rem; - height: 2rem; + width: 3rem; + height: 3rem; } span { - font-size: 1.25rem; + font-size: 1.5rem; font-weight: 600; color: var(--primary); } } + /* --- Navigation Links --- */ .caption { + display: flex; + align-items: center; + /* gap: 0.1rem; */ text-align: center; justify-self: center; + } - h1 { - font-size: 1.25rem; - font-weight: 500; - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .caption a { + font-size: 1.5rem; + font-weight: 550; + margin: 0; + color: var(--text-secondary); + text-decoration: none; + border-radius: 0.375rem; + transition: all 0.2s ease-in-out; + white-space: nowrap; + margin-right: 2rem; + overflow: hidden; + text-overflow: ellipsis; + text-decoration: none; + + } + + .caption a:hover { + color: #1dd299; + /* background-color: var(--bg-secondary); */ + } + + .caption a.is-active { + color: var(--primary); + font-weight: 600; } .action-group { @@ -71,4 +92,4 @@ width: 2rem; border-radius: 50%; cursor: pointer; -} +} \ No newline at end of file diff --git a/src/assets/styles/home/explore-learn-section.css b/src/assets/styles/home/explore-learn-section.css new file mode 100644 index 00000000..8170a087 --- /dev/null +++ b/src/assets/styles/home/explore-learn-section.css @@ -0,0 +1,92 @@ +.section.explore-learn { + padding: 1rem 1rem 3rem 1rem; + +} +.grid.four { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.card { + background-color: white; + padding: 1.5rem; + border-radius: 2rem; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.5s ease; + min-height: 15rem; + text-align: left; + display: flex; + flex-direction: column; +} + +.card:hover { + transform: translateY(-4px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); +} + +.card.red { + background: var(--card-red-bg); + color: var(--card-red-text); +} +.card.blue { + background: var(--card-blue-bg); + color: var(--card-blue-text); +} +.card.yellow { + background: var(--card-yellow-bg); + color: var(--card-yellow-text); +} +.card.green { + background: var(--card-green-bg); + color: var(--card-green-text); +} +.card h3 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.7rem; + letter-spacing: -0.5px; +} + +.card p { + font-size: 1.2rem; + margin-bottom: 1.2rem; + color: inherit; +} + +/* Add this new rule to push the button to the bottom */ +.card a { + margin-top: auto; +} + +.card .button.white { + margin-top: 0.5rem; + background: #fff; + color: #222; + border: none; + font-weight: 700; + border-radius: 2rem; + padding: 0.7rem 1.5rem; + cursor: pointer; + box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07); + transition: background 0.2s, color 0.2s; +} +.card .button.white:hover { + background: #f3f4f6; + color: #111; +} +@media (max-width: 1100px) { + .grid.four { + grid-template-columns: 1fr 1fr; + gap: 1.2rem; + } +} +@media (max-width: 700px) { + .grid.four { + grid-template-columns: 1fr; + gap: 1rem; + } + .section.explore-learn { + padding: 2rem 0.5rem 2.5rem 0.5rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/home/hero-section.css b/src/assets/styles/home/hero-section.css new file mode 100644 index 00000000..1e35ecfd --- /dev/null +++ b/src/assets/styles/home/hero-section.css @@ -0,0 +1,108 @@ +.hero-row { + display: flex; + align-items: center; + justify-content: center; + gap: 3rem; + /* padding: 3rem; */ + /* background: linear-gradient(to bottom, #f9fbff, #eef5fc); */ + text-align: left; +} + +.button.green { + background-color: #10b981; + color: white; + box-shadow: 0 4px 10px rgba(0, 196, 126, 0.4); +} + +.button.green:hover { + background-color: #059669; +} + +.button.gray { + background-color: #f0f0f0; + border: 2px solid green; + color: green; +} + +.button.gray:hover { + background-color: #e5e7eb; +} + +.hero { + text-align: center; + +} +.hero h1 { + font-size: 2.75rem; + font-weight: 800; + color: var(--hero-heading); + margin-bottom: 2rem; +} + +.hero p { + font-size: 1.75rem; + color: #9fa9b8; + max-width: 700px; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.note { + font-size: 2rem; + color: green; + margin-top: 2rem; + +} + +.hero-text { + flex: 1 1 0; + min-width: 300px; + justify-items: anchor-center; + padding:1rem; +} + +.hero-image { + flex: 1 1 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-svg { + max-width: 350px; + width: 100%; + height: auto; +} + +@media (max-width: 900px) { + .hero-row { + flex-direction: column; + text-align: center; + padding: 1.5rem; + } + .hero-text, .hero-image { + min-width: 0; + width: 100%; + justify-content: center; + align-items: center; + } + .hero-svg { + max-width: 250px; + margin-top: 2rem; + } +} + +/* --- Responsive Styles for Mobile --- */ +@media (max-width: 768px) { + .cta-buttons { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .cta-buttons .button { + font-size: 1rem; + padding: 1rem; + white-space: nowrap; + } +} diff --git a/src/assets/styles/home/kids-love-section.css b/src/assets/styles/home/kids-love-section.css new file mode 100644 index 00000000..431b6e09 --- /dev/null +++ b/src/assets/styles/home/kids-love-section.css @@ -0,0 +1,61 @@ + +.kids-will-love .split-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + align-items: start; +} + +.content-column > div { + margin-bottom: 2rem; +} + +.image-column img { + width: 100%; + max-width: 400px; + height: auto; + display: block; + margin: 0 auto; + margin-top: 5rem; + margin-bottom: 6rem; +} + +.content-column h3 { + font-size: 1.8rem; +} + +.content-column p { + font-size: 1rem; +} + +.section.kids-will-love { + /* background-color: #ecf6f7; */ + padding: 2rem 1rem 1rem 1rem; +} + +@media (max-width: 900px) { + .split-layout { + flex-direction: column; + align-items: center; + gap: 1.5rem; + } + .image-column { + display: none; + } + .content-column { + text-align: center; + } + + .kids-will-love .split-layout { + grid-template-columns: 1fr; + } + + .image-column { + display: none; + } + + .content-column { + text-align: center; + } + +} \ No newline at end of file diff --git a/src/assets/styles/home/testimonials-section.css b/src/assets/styles/home/testimonials-section.css new file mode 100644 index 00000000..43a9590e --- /dev/null +++ b/src/assets/styles/home/testimonials-section.css @@ -0,0 +1,79 @@ +.grid.three { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-bottom: 2.5rem; +} + +.grid.three h3 { + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 0.7rem; + color: inherit; +} + +.grid.three p { + font-size: 1.05rem; + margin-bottom: 1.2rem; + color: inherit; +} + +.button.link { + background: #06d6a0; + color: #fff; + border: none; + border-radius: 2rem; + padding: 0.7rem 1.5rem; + font-weight: 700; + cursor: pointer; + box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07); + transition: background 0.2s, color 0.2s; +} +.button.link:hover { + background: #118ab2; +} + +.stars { + color: #FFD700; + font-size: 2rem; + margin-bottom: 1rem; +} +.stars.centered { + text-align: center; + margin-bottom: 2rem; +} + +.stars span { + font-size: 2rem; + color: var(--star-color); + margin: 0 0.1rem; +} + +.card.light-blue { + background-color: var(--testimonial-card-bg); + color: var(--testimonial-card-text); + border-radius: 1.5rem; + padding: 2rem; + box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07); + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.card.light-blue p { + font-size: 1.1rem; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.card.light-blue .author { + font-size: 1rem; + font-weight: 600; + color: var(--testimonial-author-text); + margin-bottom: 0; +} + +@media (max-width: 900px) { + .grid.three { + grid-template-columns: 1fr; + gap: 1.2rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css new file mode 100644 index 00000000..8ba9ea68 --- /dev/null +++ b/src/assets/styles/index.css @@ -0,0 +1,157 @@ +:root { + --card-red-bg: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); + --card-blue-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); + --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%); + --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.18); + --hero-heading: #f3f4f6; + --section-divider: #23304a; + --section-bg: #0f172a; + --section-bg-alt: #16213a; + --section-text: #f3f4f6; + --testimonial-card-bg: #1e293b; + --testimonial-card-text: #cbd5e1; + --testimonial-author-text: #94a3b8; +} + +[data-theme="dark"] { + --card-red-bg: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); + --card-blue-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); + --card-yellow-bg: linear-gradient(135deg, #f59e42 0%, #fbbf24 100%); + --card-green-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.18); + --hero-heading: #f3f4f6; + --section-divider: #23304a; + --section-bg: #0f172a; + --section-bg-alt: #16213a; + --section-text: #f3f4f6; + --testimonial-card-bg: #1e293b; + --testimonial-card-text: #cbd5e1; + --testimonial-author-text: #94a3b8; +} + +[data-theme="light"] { + --bg-dark: #0f172a; + --bg-light: #ffffff; + --bg-secondary: #1e293b; + --primary: #3b82f6; + --primary-light: #60a5fa; + --text-main: #212223; + --text-primary: #cbd5e1; + --text-secondary: #212223; + --accent: #f59e0b; + --hero-heading: #131414; + --card-red-bg: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%); + --card-blue-bg: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); + --card-yellow-bg: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%); + --card-green-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%); + --card-red-text: #fff; + --card-blue-text: #fff; + --card-yellow-text: #fff; + --card-green-text: #fff; + --card-shadow: 0 4px 24px 0 rgba(0,0,0,0.07); + --section-divider: #e5e7eb; + --section-bg: #ffffff; + --section-bg-alt: #f7fafc; + --section-text: #22223b; + --testimonial-card-bg: #eef5fc; + --testimonial-card-text: #334155; + --testimonial-author-text: #64748b; + --star-color: #f59e0b; +} + +.about-container { + background-color: light-dark(var(--bg-light), var(--bg-dark)); + color: var(--text-main); + min-height: 100vh; + font-family: "roboto", cursive, sans-serif; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.text-highlight { + color: var(--primary); + font-weight: 700; +} + +.section-title { + margin-bottom: 1rem; + position: relative; + text-align: center; + font-size: 2.2rem; + font-weight: 800; + color: var(--hero-heading, #111827); + letter-spacing: -1px; +} + +.section-subtitle { + text-align: center; + color: light-dark(var(--bg-dark), var(--text-primary)); + max-width: 700px; + margin: 0 auto 2.5rem; + line-height: 1.6; +} + +.section-title::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60%; + height: 4px; + background: linear-gradient(90deg, var(--primary), transparent); + border-radius: 2px; +} + + +.button { + font-weight: 600; + transition: background 0.3s ease; + padding: 0.6rem 1.4rem; + font-size: 1rem; + border-radius: 30px; + border: none; + cursor: pointer; + font-weight: bold; + margin-bottom: 2rem; +} +.grid { + display: grid; + gap: 1.5rem; + grid-template-columns: 1fr; +} + +.section { + background: var(--section-bg-alt); + color: var(--section-text); + padding: 1rem 1rem 2rem 1rem; + border-top: 1px solid var(--section-divider); +} +.section:nth-of-type(odd) { + background: var(--section-bg-alt); +} + +.section-description { + text-align: center; + font-size: 1.15rem; + color: var(--section-desc); + margin-bottom: 2.5rem; + font-weight: 500; +} + +@media (min-width: 1600px) { + .section { + padding-left: 6rem; + padding-right: 6rem; + } +} \ No newline at end of file diff --git a/src/components/HideSeekKbd.astro b/src/components/HideSeekKbd.astro index cd0216e8..201f54c9 100644 --- a/src/components/HideSeekKbd.astro +++ b/src/components/HideSeekKbd.astro @@ -22,7 +22,6 @@ const letterRows = [ )) } - diff --git a/src/pages/about.astro b/src/pages/about.astro index 5017d6c0..2a1d8d9a 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -2,7 +2,6 @@ import BaseLayout from "@/layouts/Base"; import TitleLayout from "@/layouts/TitleLayout"; import HeroSection from "@/components/about/HeroSection.astro"; -import FeaturesSection from "@/components/about/FeaturesSection.astro"; import TeamSection from "@/components/about/TeamSection.astro"; import TechSection from "@/components/about/TechSection.astro"; import "@/assets/styles/about.css"; @@ -22,7 +21,6 @@ const meta = {
-
diff --git a/src/pages/classroom.astro b/src/pages/classroom.astro new file mode 100644 index 00000000..f1a3a6b9 --- /dev/null +++ b/src/pages/classroom.astro @@ -0,0 +1,5 @@ +--- +import ComingSoon from "@/pages/coming-soon.astro"; +--- + + diff --git a/src/pages/coming-soon.astro b/src/pages/coming-soon.astro new file mode 100644 index 00000000..2fe3c228 --- /dev/null +++ b/src/pages/coming-soon.astro @@ -0,0 +1,21 @@ +--- +import "@/assets/styles/coming-soon.css"; +import Countdown from "@/components/home/Countdown.astro"; +import BaseLayout from "@/layouts/Base"; +import { APP_NAME } from "@/utils/constants"; +import { Picture } from "astro:assets"; +import logoImage from "/public/assets/images/ABCD-blue.png"; +--- + + +
+ +
+
+ + +
+ diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 09298d51..e1c4d56b 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -2,14 +2,61 @@ import "@/assets/styles/contact.css"; import BaseLayout from "@/layouts/Base"; import TitleLayout from "@/layouts/TitleLayout"; +import Back from "@/components/Back.astro"; --- - + +
Email us or Please fill the form below with your information`} + title="Get in Touch" /> -
+ +
+
+

Contact Information

+
+ + Mail Us at: abcdkbd@outlook.com + +
+
+ + Find us on GitHub +
+
+
- + + + diff --git a/src/pages/cookies.astro b/src/pages/cookies.astro new file mode 100644 index 00000000..a888b297 --- /dev/null +++ b/src/pages/cookies.astro @@ -0,0 +1,16 @@ +--- +import BaseLayout from '@/layouts/Base'; +import { Content, frontmatter } from '@/content/article/cookies.md'; +import "@/assets/styles/cookies.css"; +--- + +
+
+

{frontmatter.title}

+

By {frontmatter.author}

+
+
+ +
+
+ \ No newline at end of file diff --git a/src/pages/faq.astro b/src/pages/faq.astro new file mode 100644 index 00000000..d61e4dc9 --- /dev/null +++ b/src/pages/faq.astro @@ -0,0 +1,24 @@ +--- +import BaseLayout from "@/layouts/Base"; +import TitleLayout from "@/layouts/TitleLayout"; +import faqData from "@/data/faq.json"; +import "@/assets/styles/faq.css"; +--- + + + + +
+ {faqData.map(item => ( +
+ + {item.question} + + +
+

{item.answer}

+
+
+ ))} +
+ \ No newline at end of file diff --git a/src/pages/home.astro b/src/pages/home.astro new file mode 100644 index 00000000..d3f72301 --- /dev/null +++ b/src/pages/home.astro @@ -0,0 +1,14 @@ +--- +import "@/assets/styles/index.css"; + +return Astro.redirect("/"); +--- + + + +
diff --git a/src/pages/index.astro b/src/pages/index.astro index 351cbae9..08df1eb9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,29 +1,22 @@ --- +import "@/assets/styles/index.css"; +import FeaturesSection from "@/components/about/FeaturesSection.astro"; +import HeroSection from "@/components/about/HeroSection.astro"; +import ExploreLearnSection from "@/components/home/ExploreLearnSection.astro"; +import KidsLoveSection from "@/components/home/KidsLoveSection.astro"; +import TestimonialsSection from "@/components/home/TestimonialsSection.astro"; import MobileSplash from "@/components/MobileSplash.astro"; import BaseLayout from "@/layouts/Base"; +const meta = { + title: "Home" +}; --- - - + -

Welcome to parixan.xyz

- -

- Previous Name: -

- + + + + + diff --git a/src/pages/parent.astro b/src/pages/parent.astro new file mode 100644 index 00000000..6c2e8ab4 --- /dev/null +++ b/src/pages/parent.astro @@ -0,0 +1,5 @@ +--- +import Survey from "@/pages/survey.astro"; +--- + + diff --git a/src/pages/school.astro b/src/pages/school.astro new file mode 100644 index 00000000..f1a3a6b9 --- /dev/null +++ b/src/pages/school.astro @@ -0,0 +1,5 @@ +--- +import ComingSoon from "@/pages/coming-soon.astro"; +--- + + diff --git a/src/pages/teacher.astro b/src/pages/teacher.astro new file mode 100644 index 00000000..f1a3a6b9 --- /dev/null +++ b/src/pages/teacher.astro @@ -0,0 +1,5 @@ +--- +import ComingSoon from "@/pages/coming-soon.astro"; +--- + + diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 4a38a164..783153b2 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -2,7 +2,7 @@ import HomeIcon from "@/assets/icons/home.svg"; import RecordIcon from "@/assets/icons/record.svg"; import type { LinkProps } from "@/types/index.ts"; -export const APP_NAME = "Parixan"; +export const APP_NAME = "abcdkbd"; let BASE_URL = "http://localhost:4321"; let IMAGE_DIR = "/assets/images/background";