diff --git a/public/assets/images/ABCD blue.png b/public/assets/images/ABCD blue.png
new file mode 100644
index 00000000..dbfa1985
Binary files /dev/null and b/public/assets/images/ABCD blue.png differ
diff --git a/public/assets/images/stories/story-1.png b/public/assets/images/stories/story-1.png
new file mode 100644
index 00000000..597b169a
Binary files /dev/null and b/public/assets/images/stories/story-1.png differ
diff --git a/public/assets/images/stories/story-2.png b/public/assets/images/stories/story-2.png
new file mode 100644
index 00000000..323ba108
Binary files /dev/null and b/public/assets/images/stories/story-2.png differ
diff --git a/public/assets/images/stories/story-3.png b/public/assets/images/stories/story-3.png
new file mode 100644
index 00000000..2a5d0da8
Binary files /dev/null and b/public/assets/images/stories/story-3.png differ
diff --git a/public/responses/survey-responses.json b/public/responses/survey-responses.json
index 8e13d3d0..b0b4fca2 100644
--- a/public/responses/survey-responses.json
+++ b/public/responses/survey-responses.json
@@ -19,10 +19,8 @@
"q4": "Less than 15 minutes",
"q5": "Not sure",
"q6": "No, I donโt think it has a big impact.",
- "q7": [
- "Interactive apps or websites"
- ],
+ "q7": ["Interactive apps or websites"],
"q8": "Several times a week",
"q9": ""
}
-]
\ No newline at end of file
+]
diff --git a/src/assets/icons/ABCD.png b/src/assets/icons/ABCD.png
deleted file mode 100644
index e2aabde3..00000000
Binary files a/src/assets/icons/ABCD.png and /dev/null 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/keyboard.css b/src/assets/styles/Keyboard.css
similarity index 100%
rename from src/assets/styles/keyboard.css
rename to src/assets/styles/Keyboard.css
diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css
index 049a7507..d9899ad0 100644
--- a/src/assets/styles/about.css
+++ b/src/assets/styles/about.css
@@ -14,7 +14,7 @@
background-color: light-dark(var(--bg-light), var(--bg-dark));
color: var(--text-main);
min-height: 100vh;
- font-family: sans-serif;
+ font-family: "Comic Neue", cursive, sans-serif;
display: flex;
flex-direction: column;
gap: 3rem;
@@ -25,6 +25,39 @@
font-weight: 700;
}
+ .btn {
+ display: inline-block;
+ padding: 0.75rem 1.5rem;
+ border-radius: 2rem;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ margin: 0.5rem;
+ }
+
+ .btn-primary {
+ background-color: var(--primary);
+ color: white;
+ border: 2px solid var(--primary);
+ }
+
+ .btn-primary:hover {
+ background-color: var(--primary-light);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+ }
+
+ .btn-secondary {
+ background-color: transparent;
+ color: var(--primary);
+ border: 2px solid var(--primary);
+ }
+
+ .btn-secondary:hover {
+ background-color: rgba(59, 130, 246, 0.1);
+ transform: translateY(-2px);
+ }
+
.section-title {
font-size: 2rem;
text-align: center;
diff --git a/src/assets/styles/blogs/blog.css b/src/assets/styles/blogs/blog.css
index 2f732254..fe651321 100644
--- a/src/assets/styles/blogs/blog.css
+++ b/src/assets/styles/blogs/blog.css
@@ -31,469 +31,250 @@
}
.container__blog {
- width: 100%;
- margin: 0;
- padding: 3rem 2rem;
- background: light-dark(var(--background-light), var(--background-dark));
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- min-height: 100vh;
- font-family: atkinson, sans-serif;
- line-height: 1.6;
- box-sizing: border-box;
- position: relative;
- overflow-x: hidden;
- counter-reset: section-counter;
-}
-
-.container__blog::before {
- content: "";
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: radial-gradient(
- circle at 20% 20%,
- light-dark(rgba(59, 130, 246, 0.03), rgba(96, 165, 250, 0.05)) 0%,
- transparent 50%
- ),
- radial-gradient(
- circle at 80% 80%,
- light-dark(rgba(139, 92, 246, 0.03), rgba(168, 85, 247, 0.05)) 0%,
- transparent 50%
- );
- pointer-events: none;
- z-index: -1;
-}
-
-.blog-post-header {
- text-align: center;
- margin-bottom: 3rem;
- max-width: 800px;
- margin-inline: auto;
- position: relative;
- animation: fadeInUp 0.8s ease-out;
-}
-
-.blog-title {
- font-size: 45px;
- background: var(--primary);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin: 0 0 1rem 0;
- line-height: 1.2;
- font-weight: 600;
- text-align: center;
-}
-
-.blog-description {
+ max-width: 1000px;
margin: 0 auto;
- margin-top: 1rem;
- max-width: 42rem;
- font-size: 20px;
- color: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
- line-height: 1.5;
- text-align: center;
-}
-
-.blog-post-meta {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1rem;
- font-size: 1.1rem;
- color: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
- margin-top: 1rem;
- padding: 0.75rem 1.5rem;
- background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05));
- border-radius: 20px;
- border: 1px solid light-dark(var(--border-light), var(--border-dark));
- backdrop-filter: blur(10px);
- transition: all 0.3s ease;
-}
-
-.blog-post-meta:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 12px light-dark(var(--shadow-light), var(--shadow-dark));
-}
-
-.meta-item {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.meta-icon {
- width: 20px;
- height: 20px;
- stroke-width: 2;
-}
-
-.markdown-content {
- margin-top: 2rem;
- max-width: min(90vw, 90%);
- margin-inline: auto;
- font-size: 3vh;
- line-height: 1.7;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- animation: fadeIn 1s ease-out 0.3s both;
- text-align: left;
- counter-reset: section-counter;
-}
-
-.markdown-content h2:first-of-type {
- font-size: 2.25rem;
- margin-top: 2.5rem;
- margin-left: 0px;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
-}
-
-.markdown-content h2:not(:first-of-type) {
- font-size: 2.25rem;
- margin-top: 2.5rem;
- margin-left: 0px;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
- counter-increment: section-counter;
- counter-reset: subsection-counter;
-}
-
-.markdown-content h2:not(:first-of-type)::before {
- content: counter(section-counter) ". ";
- color: var(--primary);
- font-weight: 700;
- margin-right: 0.75rem;
-}
-
-.markdown-content h3 {
- font-size: 1.85rem;
- margin-top: 2.25rem;
- margin-left: 0px;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
- counter-increment: subsection-counter;
-}
-
-.markdown-content h3::before {
- content: counter(section-counter) "." counter(subsection-counter) " ";
- color: var(--primary);
- font-weight: 600;
- margin-right: 0.75rem;
-}
-
-.markdown-content h4 {
- font-size: 1.55rem;
- margin-top: 2rem;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
-}
-
-.markdown-content h5 {
- font-size: 1em;
- margin-top: 1.75rem;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
-}
-
-.markdown-content p {
- margin-bottom: 0.85rem;
- line-height: inherit;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- transition: color 0.3s ease;
- text-align: left;
-}
-
-.markdown-content strong {
- color: var(--primary);
- font-weight: 600;
-}
-
-.markdown-content em {
- font-style: italic;
- color: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
-}
-
-.markdown-content a {
- color: light-dark(var(--accent-light), var(--accent-dark));
- text-decoration: none;
- position: relative;
- transition: all 0.3s ease;
- border-bottom: 1px solid transparent;
-}
-
-.markdown-content a::before {
- content: "";
- position: absolute;
- width: 0;
- height: 2px;
- bottom: -2px;
- left: 0;
- background: light-dark(var(--accent-light), var(--accent-dark));
- transition: width 0.3s ease;
-}
-
-.markdown-content a:hover {
- color: light-dark(var(--accent-hover-light), var(--accent-hover-dark));
- transform: translateY(-1px);
-}
-
-.markdown-content a:hover::before {
- width: 100%;
-}
-
-.markdown-content blockquote {
- margin: 1.25rem 0;
- padding: 0.85rem 1.75rem;
- border-left: 4px solid light-dark(var(--accent-light), var(--accent-dark));
- background: light-dark(var(--blockquote-bg-light), var(--blockquote-bg-dark));
- color: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
- font-style: italic;
- font-size: 1.15rem;
- border-radius: 0 8px 8px 0;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
-}
-
-.markdown-content blockquote::before {
- content: '"';
- position: absolute;
- top: -10px;
- left: 10px;
- font-size: 3rem;
- color: light-dark(var(--accent-light), var(--accent-dark));
- opacity: 0.3;
-}
-
-.markdown-content blockquote:hover {
- transform: translateX(5px);
- box-shadow: 0 2px 8px light-dark(var(--shadow-light), var(--shadow-dark));
-}
-
-.markdown-content pre {
- margin: 1.25rem 0;
- padding: 0.9rem;
- background: light-dark(var(--pre-bg-light), var(--pre-bg-dark));
- border: 1px solid light-dark(var(--border-light), var(--border-dark));
- border-radius: 12px;
- overflow-x: auto;
- font-size: 1.05rem;
- line-height: 1.6;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- font-family: "Fira Code", monospace;
- position: relative;
- transition: all 0.3s ease;
- text-align: left;
-}
-
-.markdown-content pre:hover {
- box-shadow: 0 4px 12px light-dark(var(--shadow-light), var(--shadow-dark));
- transform: translateY(-2px);
-}
-
-.markdown-content code {
- background: light-dark(var(--code-bg-light), var(--code-bg-dark));
- color: var(--primary);
- padding: 0.1rem 0.4rem;
- border-radius: 6px;
- font-size: 0.95em;
- font-family: "Fira Code", monospace;
- font-weight: 500;
- border: 1px solid light-dark(var(--border-light), var(--border-dark));
-}
-
-.markdown-content pre code {
- background: none;
- padding: 0;
- border-radius: 0;
- border: none;
- color: inherit;
-}
-
-.markdown-content ul,
-.markdown-content ol {
- margin: 1rem 0;
- padding-left: 2rem;
- color: light-dark(var(--text-primary-light), var(--text-primary-dark));
- list-style-position: outside;
- font-size: inherit;
- text-align: left;
-}
-
-.markdown-content ul {
- list-style: disc;
-}
-
-.markdown-content ul ul {
- list-style: circle;
-}
-
-.markdown-content ul ul ul {
- list-style: square;
-}
-
-.markdown-content ol {
- list-style: decimal;
-}
-
-.markdown-content ol ol {
- list-style: lower-alpha;
-}
-
-.markdown-content ol ol ol {
- list-style: lower-roman;
-}
-
-.markdown-content li {
- margin-bottom: 0.5rem;
- line-height: inherit;
+ padding: 5rem 2rem;
+ background: var(--background, #ffffff); /* Fallback for light mode */
+ color: var(--text, #333333); /* Fallback for light mode */
+ border-radius: 1rem;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
- position: relative;
- text-align: left;
-}
-
-.markdown-content li::before {
- content: none;
-}
-
-.markdown-content hr {
- display: none !important;
-}
-
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@media (max-width: 768px) {
- .container__blog {
- padding: 1.75rem 1rem;
- }
.blog-post-header {
- margin-bottom: 2.5rem;
+ text-align: center;
+ margin-bottom: 5rem;
+ position: relative;
+ padding-bottom: 2rem;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100px;
+ height: 4px;
+ background: linear-gradient(90deg, var(--primary, #4f46e5), var(--primary-light, #818cf8));
+ border-radius: 4px;
+ transition: width 0.3s ease;
+ }
+
+ &:hover::after {
+ width: 120px;
+ }
}
.blog-post-meta {
- flex-direction: column;
- gap: 0.6rem;
+ display: flex;
align-items: center;
- padding: 0.5rem 1rem;
- }
-
- .blog-title {
- font-size: 2.25rem;
+ justify-content: center;
+ gap: 2.5rem;
+ margin-top: 2rem;
+ font-size: 1rem;
+ color: var(--secondary, #666666); /* Fallback for light mode */
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ span {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ background: color-mix(in srgb, var(--background, #ffffff) 95%, var(--primary, #4f46e5) 5%);
+ }
}
- .blog-description {
- font-size: 1.1rem;
+ .blog-post-content {
+ font-size: 1.15rem;
+ line-height: 1.9;
+ color: var(--text, #333333); /* Fallback for light mode */
+ max-width: 800px;
+ margin: 0 auto;
}
+ /* Markdown Content Styling */
.markdown-content {
- font-size: 1.1rem;
- line-height: 1.65;
- padding: 0 0.75rem;
- }
-
- .markdown-content h2:not(:first-of-type) {
- font-size: 1.8rem;
- }
-
- .markdown-content h3 {
- font-size: 1.5rem;
- }
-
- .markdown-content h4 {
- font-size: 1.3rem;
- }
-
- .markdown-content h5 {
- font-size: 1.1rem;
- }
-
- .markdown-content blockquote {
- padding: 0.65rem 1.25rem;
- }
-
- .markdown-content pre {
- padding: 0.65rem;
- font-size: 0.95rem;
+ margin-top: 5rem;
+
+ h1, h2, h3, h4 {
+ color: var(--text, #333333); /* Fallback for light mode */
+ margin: 3rem 0 1.5rem;
+ font-weight: 700;
+ line-height: 1.4;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: var(--primary, #4f46e5); /* Fallback for light mode */
+ }
+ }
+
+ h1 {
+ font-size: 2.75rem;
+ background: linear-gradient(90deg, var(--text, #333333), var(--primary, #4f46e5));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ position: relative;
+ padding-bottom: 0.5rem;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 50px;
+ height: 3px;
+ background: var(--primary, #4f46e5);
+ border-radius: 2px;
+ transition: width 0.3s ease;
+ }
+
+ &:hover::after {
+ width: 100px;
+ }
+ }
+
+ h2 {
+ font-size: 2.25rem;
+ }
+
+ h3 {
+ font-size: 1.75rem;
+ }
+
+ p {
+ margin-bottom: 2rem;
+ color: var(--secondary, #666666); /* Fallback for light mode */
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: var(--text, #333333);
+ }
+ }
+
+ strong {
+ color: var(--text, #333333);
+ font-weight: 700;
+ background: color-mix(in srgb, var(--primary, #4f46e5) 20%, transparent);
+ padding: 0.1rem 0.3rem;
+ border-radius: 0.3rem;
+ }
+
+ blockquote {
+ margin: 2.5rem 0;
+ padding: 2rem 2.5rem;
+ border-left: 6px solid var(--primary, #4f46e5);
+ background: color-mix(in srgb, var(--background, #ffffff) 95%, var(--primary, #4f46e5) 5%);
+ border-radius: 0.75rem;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: "โ";
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ font-size: 2rem;
+ color: var(--primary-light, #818cf8);
+ opacity: 0.3;
+ }
+ }
+
+ pre {
+ margin: 2.5rem 0;
+ padding: 2rem;
+ border-radius: 0.75rem;
+ background: color-mix(in srgb, var(--background, #f8f9fa) 90%, var(--text, #333333) 10%);
+ color: var(--text, #333333);
+ overflow-x: auto;
+ position: relative;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ font-size: 0.95rem;
+ }
+
+ code {
+ background: color-mix(in srgb, var(--background, #f8f9fa) 90%, var(--text, #333333) 10%);
+ color: var(--text, #333333);
+ padding: 0.3rem 0.5rem;
+ border-radius: 0.4rem;
+ font-size: 0.9rem;
+ transition: background 0.3s ease;
+
+ &:hover {
+ background: color-mix(in srgb, var(--background, #f8f9fa) 85%, var(--primary, #4f46e5) 15%);
+ }
+ }
+
+ ul, ol {
+ margin: 2rem 0;
+ padding-left: 2rem;
+ color: var(--secondary, #666666);
+ list-style: none;
+ }
+
+ li {
+ margin: 0.75rem 0;
+ padding-left: 0;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 1rem;
+ margin: 3rem auto;
+ display: block;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+ &:hover {
+ transform: scale(1.02);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+ }
+ }
+
+ hr {
+ margin: 4rem 0;
+ border: none;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--border, #e5e7eb), transparent);
+ opacity: 0.5;
+ }
}
- .markdown-content ul,
- .markdown-content ol {
- padding-left: 1.5rem;
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ padding: 3rem 1rem;
+ max-width: 100%;
+
+ .blog-post-header {
+ margin-bottom: 3rem;
+ }
+
+ .markdown-content {
+ h1 {
+ font-size: 2rem;
+ }
+
+ h2 {
+ font-size: 1.75rem;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .blog-post-meta {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .markdown-content img {
+ margin: 2rem auto;
+ }
}
-}
-
-@media (max-width: 480px) {
- .container__blog {
- padding: 1.25rem 0.75rem;
- }
-
- .blog-title {
- font-size: 1.85rem;
- }
-
- .markdown-content h2:not(:first-of-type) {
- font-size: 1.55rem;
- }
-
- .markdown-content h3 {
- font-size: 1.35rem;
- }
-
- .markdown-content h4 {
- font-size: 1.2rem;
- }
-
- .markdown-content h5 {
- font-size: 1.05rem;
- }
-
- .markdown-content ul,
- .markdown-content ol {
- padding-left: 1rem;
- }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/blogs/index.css b/src/assets/styles/blogs/index.css
index de0b9696..91a9202e 100644
--- a/src/assets/styles/blogs/index.css
+++ b/src/assets/styles/blogs/index.css
@@ -22,7 +22,7 @@
.container__blog {
max-width: 1440px;
margin: 0 auto;
- padding: 0rem 2rem;
+ padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
@@ -44,18 +44,21 @@
}
.title-accent {
- color: var(--primary);
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
position: relative;
}
.title-accent::after {
- content: "";
+ content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
- color: var(--primary_blue);
+ background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-radius: 2px;
}
@@ -80,7 +83,7 @@
.decoration-circle {
position: absolute;
border-radius: 50%;
- background: var(--primary_blue);
+ background: var(--primary);
filter: blur(30px);
}
@@ -112,7 +115,6 @@
grid-template-columns: repeat(1, 1fr);
gap: 2.5rem;
margin-top: 3rem;
- margin-bottom: 15px;
}
.blog-card {
@@ -128,18 +130,18 @@
}
.blog-card::before {
- content: "";
+ content: '';
position: absolute;
inset: 0;
border-radius: 1.5rem;
- background: var(--primary);
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.blog-card::after {
- content: "";
+ content: '';
position: absolute;
inset: 2px;
border-radius: 1.3rem;
@@ -223,7 +225,7 @@
}
.blog-card-title::after {
- content: "";
+ content: '';
position: absolute;
bottom: -5px;
left: 0;
@@ -247,7 +249,6 @@
-webkit-line-clamp: 3;
overflow: hidden;
transition: color 0.3s ease;
- text-align: left;
}
.blog-card:hover .blog-card-description {
@@ -273,7 +274,7 @@
}
.blog-card-details::after {
- content: "Read More โ";
+ content: 'Read More โ';
position: absolute;
bottom: 1rem;
right: 2rem;
@@ -293,7 +294,7 @@
@media (min-width: 640px) {
.blog-grid {
- grid-template-columns: repeat(auto, 1fr);
+ grid-template-columns: repeat(2, 1fr);
}
}
@@ -315,9 +316,10 @@
transform: translateY(20px);
}
+
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/coming-soon.css b/src/assets/styles/coming-soon.css
new file mode 100644
index 00000000..c9e81bbc
--- /dev/null
+++ b/src/assets/styles/coming-soon.css
@@ -0,0 +1,124 @@
+ .page-container {
+ display: flex;
+ flex-direction: column;
+ gap: 2.5rem;
+ margin: 2rem 0;
+ }
+
+ .heading-container {
+ background: var(--bg-secondary);
+ /* padding: clamp(2rem, 8vw, 4rem) 1.5rem; */
+ text-align: center;
+ border-radius: 1.5rem;
+ }
+
+ .logo {
+ width: 120px;
+ height: 120px;
+ margin-bottom: 0.5rem;
+ filter: drop-shadow(0 4px 6px rgba(0,0,0,0.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;
+ }
+
+ .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;
+ }
+
+ .form-container {
+ display: grid;
+ place-items: center;
+ }
+
+ .notify-form {
+ width: 100%;
+ max-width: 450px;
+ text-align: center;
+ }
+
+ .notify-form p {
+ margin-bottom: 1rem;
+ color: var(--text-main);
+ }
+
+ .form-group {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.75rem;
+ }
+
+ .form-group input {
+ padding: 0.75rem 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ background-color: var(--bg-primary);
+ color: var(--text-main);
+ flex-grow: 1;
+ min-width: 200px;
+ }
+
+ .form-group button {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 6px;
+ cursor: pointer;
+ font-weight: 500;
+ transition: opacity 0.2s;
+ flex-grow: 1;
+ }
+
+ .form-group button:hover {
+ opacity: 0.9;
+ }
+
+ @media (max-width: 400px) {
+ .form-group {
+ flex-direction: column;
+ }
+ }
\ 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/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 a45a66ab..e8fe568e 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -1,20 +1,218 @@
+: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 {
- @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500 md:flex-row;
+ 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 {
- @apply underline underline-offset-2 hover:text-blue-500 dark:hover:text-blue-400;
+ 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;
+ gap: 0.75rem;
+}
+
+.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;
}
}
diff --git a/src/assets/styles/games.css b/src/assets/styles/games.css
index 5b44a694..51b6fa98 100644
--- a/src/assets/styles/games.css
+++ b/src/assets/styles/games.css
@@ -254,4 +254,4 @@
transform: rotate(90deg) scale(5);
margin-top: 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 48706a5b..ca7e1440 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -87,6 +87,24 @@
opacity: 1;
}
+ ::view-transition-group(root) {
+ animation-duration: 0.5s;
+ animation-name: circle;
+ animation-direction: alternate;
+ animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+ }
+
+ @keyframes circle {
+ 0% {
+ clip-path: circle(75%);
+ }
+
+ 100% {
+ clip-path: circle(10%);
+ }
+ }
+
+
.container {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
@@ -183,4 +201,4 @@
.m-0 {
margin: 0;
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index e6387396..8b5c9e51 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 {
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..452a4417
--- /dev/null
+++ b/src/assets/styles/home/kids-love-section.css
@@ -0,0 +1,60 @@
+.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/assets/styles/map/district.css b/src/assets/styles/map/district.css
index bdc5c5fa..d147dc6b 100644
--- a/src/assets/styles/map/district.css
+++ b/src/assets/styles/map/district.css
@@ -68,7 +68,7 @@
.view-button.active {
background-color: #4a90e2;
- color:white;
+ color: white;
}
.district {
diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css
index 28da788e..efe15d47 100644
--- a/src/assets/styles/map/popup.css
+++ b/src/assets/styles/map/popup.css
@@ -84,7 +84,7 @@
max-width: 95vw;
min-width: 260px;
color: #222;
- font-family: "Segoe UI", "Roboto", Arial, sans-serif;
+ font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
border: none;
position: relative;
display: flex;
@@ -105,15 +105,20 @@
.state-popup__close:hover {
color: #1976d2;
background-colo: white;
-}
+}
.state-popup__name {
- font-size: 2rem;
- font-weight: 700;
- margin-bottom: 0.7rem;
- color: #222;
- text-align: left;
- width: 100%;
+ font-size: 1.8rem;
+ font-weight: bold;
+ margin-bottom: 12px;
+ color: #333;
+}
+
+.state-popup__info {
+ font-size: 1.4rem;
+ margin: 12px 0;
+ color: #444;
+ line-height: 1.4;
}
.state-popup__image {
@@ -139,9 +144,9 @@
}
.state-popup__buttons {
- width: 100%;
display: flex;
- justify-content: center;
+ gap: 12px;
+ margin-top: 15px;
}
.state-popup__button {
@@ -149,7 +154,7 @@
padding: 0.8rem 0;
font-size: 1.1rem;
font-weight: 600;
- background:#1976d2;
+ background: #1976d2;
color: #fff;
border: none;
border-radius: 0.7rem;
@@ -163,7 +168,7 @@
.state-popup {
width: 80vw;
padding: 1.5rem 1rem;
-
+
&[popover] {
min-height: 16rem;
@@ -188,7 +193,7 @@
.state-popup__info {
font-size: 1rem;
margin-bottom: -1rem;
- margin-right:0rem;
+ margin-right: 0rem;
margin-top: -1rem;
margin-left: 0rem;
}
@@ -210,7 +215,7 @@
.state-popup__close {
font-size: 2rem;
- top:0.9rem;
+ top: 0.9rem;
right: 0rem;
width: 2.5rem;
height: 2.5rem;
@@ -218,5 +223,3 @@
}
}
}
-
-
diff --git a/src/assets/styles/map/state.css b/src/assets/styles/map/state.css
index 1370840c..0a24604c 100644
--- a/src/assets/styles/map/state.css
+++ b/src/assets/styles/map/state.css
@@ -111,7 +111,7 @@
transition: all 0.3s ease;
}
-.info-card:hover{
+.info-card:hover {
background-color: #6da4ece7;
transform: scale(1.02);
border-color: var(--accent-color);
@@ -129,7 +129,6 @@
font-size: 0.9rem;
}
-
.quick-facts {
background: var(--card-bg);
padding: 20px;
diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css
index 47102532..2b2d9f46 100644
--- a/src/assets/styles/share-button.css
+++ b/src/assets/styles/share-button.css
@@ -82,7 +82,10 @@
visibility: hidden;
transform: scale(0.95);
transform-origin: top right;
- transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
+ transition:
+ opacity 0.2s ease-out,
+ visibility 0.2s ease-out,
+ transform 0.2s ease-out;
pointer-events: none;
color: var(--text-color);
}
@@ -105,13 +108,12 @@
font-size: 0.9rem;
color: var(--description-color);
margin-top: 5px;
-
}
/* Social Share Section */
.social-share-section {
padding-top: 0px;
- border-bottom: 1px solid #eeeeee;
+ border-bottom: 1px solid #eeeeee;
margin-bottom: 20px;
}
@@ -147,11 +149,21 @@
justify-content: center;
}
-.social-share-section .astro-social-share a[href*="whatsapp"] { order: 1; }
-.social-share-section .astro-social-share a[href*="x.com"] { order: 2; }
-.social-share-section .astro-social-share a[href*="facebook"] { order: 3; }
-.social-share-section .astro-social-share a[href*="linkedin"] { order: 4; }
-.social-share-section .astro-social-share a[href*="reddit"] { order: 5; }
+.social-share-section .astro-social-share a[href*="whatsapp"] {
+ order: 1;
+}
+.social-share-section .astro-social-share a[href*="x.com"] {
+ order: 2;
+}
+.social-share-section .astro-social-share a[href*="facebook"] {
+ order: 3;
+}
+.social-share-section .astro-social-share a[href*="linkedin"] {
+ order: 4;
+}
+.social-share-section .astro-social-share a[href*="reddit"] {
+ order: 5;
+}
.social-share-section .astro-social-share svg {
width: 30px;
@@ -208,4 +220,4 @@
.copy-link-button:hover {
background-color: #e0e0e0;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/stories/index.css b/src/assets/styles/stories/index.css
index 8b9da526..4d31863a 100644
--- a/src/assets/styles/stories/index.css
+++ b/src/assets/styles/stories/index.css
@@ -1,3 +1,4 @@
+/* src/assets/styles/stories/index.css */
.container__stories {
max-width: 1440px;
margin: 0 auto;
@@ -8,7 +9,7 @@
.stories-header {
text-align: center;
- margin-bottom: 0rem;
+ margin-bottom: 4rem;
position: relative;
}
@@ -56,12 +57,41 @@
opacity: 0.15;
}
+.decoration-circle {
+ position: absolute;
+ border-radius: 50%;
+ background: var(--primary_blue);
+ filter: blur(30px);
+}
+
+.decoration-circle:nth-child(1) {
+ width: 120px;
+ height: 120px;
+ top: 0;
+ right: 0;
+}
+
+.decoration-circle:nth-child(2) {
+ width: 80px;
+ height: 80px;
+ top: 40px;
+ right: 100px;
+ background: var(--primary-light);
+}
+
+.decoration-circle:nth-child(3) {
+ width: 60px;
+ height: 60px;
+ top: 100px;
+ right: 40px;
+ background: var(--accent);
+}
+
.stories-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
- margin-bottom: 15px;
}
.story-card {
@@ -140,7 +170,6 @@
color: #ffffff;
}
-
:is(button, figcaption) {
&[data-category="all"] {
background-color: #6701cc;
@@ -185,17 +214,27 @@
height: 240px;
overflow: hidden;
border-radius: 1.5rem 1.5rem 0 0;
+}
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform 0.5s ease;
- }
+.story-card-image::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ background: linear-gradient(transparent, var(--background));
+}
- &:hover img {
- transform: scale(1.06);
- }
+.story-card-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.5s ease;
+}
+
+.story-card:hover .story-card-image img {
+ transform: scale(1.05);
}
.story-card-details {
@@ -215,7 +254,6 @@
font-weight: 700;
color: var(--text);
margin-bottom: 0rem;
- margin-top: 0px;
line-height: 1.3;
transition: color 0.3s ease;
position: relative;
@@ -249,7 +287,6 @@
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
- line-clamp: 3;
overflow: hidden;
transition: color 0.3s ease;
text-align: left;
@@ -336,33 +373,30 @@
}
}
-@media (max-width: 768px) {
+@media (max-width: 76px) {
.container__stories {
padding: 0 1rem;
}
.stories-header {
- text-align: center;
+ text-align: left;
margin-bottom: 2rem;
- padding: 0;
+ padding: 0 0.5rem;
}
.stories-title {
- font-size: clamp(1.75rem, 6vw, 2.5rem);
- margin-bottom: 1rem;
- line-height: 1.1;
+ font-size: 2rem;
+ margin-bottom: 0.75rem;
}
.stories-subtitle {
- font-size: clamp(0.875rem, 3vw, 1rem);
- text-align: center;
- margin: 0 auto;
+ text-align: left;
+ margin: 0;
max-width: 100%;
- padding: 0 0.5rem;
}
.header-decoration {
- display: none;
+ display: none;
}
.stories-grid {
@@ -373,113 +407,54 @@
.story-card {
border-radius: 1rem;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
- }
-
- .story-card::before {
- border-radius: 1rem;
- }
-
- .story-card::after {
- border-radius: 0.8rem;
- }
-
- .filter-chips {
- padding: 0 16px;
- gap: 8px;
- }
-
- .chip {
- padding: 6px 12px;
- font-size: 13px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.story-card-image {
- height: 180px;
+ height: 200px;
border-radius: 1rem 1rem 0 0;
}
- .story-card-image::after {
- height: 30px;
- }
-
.story-card-details {
- padding: 1.25rem;
- gap: 0.75rem;
- border-radius: 0 0 1rem 1rem;
- }
-
- .reading-time {
+ padding: 1.5rem;
text-align: left;
- margin-left: -15px;
}
.story-card-title {
- font-size: 1.125rem;
+ font-size: 1.25rem;
margin-bottom: 0.5rem;
- line-height: 1.25;
}
.story-card-description {
- font-size: 0.875rem;
+ -webkit-line-clamp: 3;
+ font-size: 0.9375rem;
line-height: 1.5;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- margin-bottom: 0.5rem;
}
.story-card-meta {
padding-top: 0.75rem;
- font-size: 0.75rem;
- margin-bottom: 0.75rem;
- flex-direction: column;
- align-items: flex-start;
- gap: 0.25rem;
+ font-size: 0.8125rem;
}
.story-category,
.story-featured {
- font-size: 0.625rem;
- padding: 0.25rem 0.5rem;
- top: 0.75rem;
- }
-
- .story-category {
- right: 0.75rem;
- }
-
- .story-featured {
- left: 0.75rem;
+ font-size: 0.6875rem;
+ padding: 0.2rem 0.6rem;
}
.story-card-details::after {
bottom: 0.75rem;
- right: 1.25rem;
- font-size: 0.75rem;
+ right: 1.5rem;
}
}
-@media (max-width: 480px) {
- .filter-chips {
- justify-content: flex-start;
- overflow-x: auto;
- scrollbar-width: none;
- -ms-overflow-style: none;
- }
-
- .filter-chips::-webkit-scrollbar {
- display: none;
+@media (min-width: 768px) and (max-width: 1023px) {
+ .stories-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 2rem;
}
- .chip {
- flex-shrink: 0;
- white-space: nowrap;
- }
-}
-
-@media (min-width: 800px) and (max-width: 1199px) {
.story-card-image {
- height: 350px;
- border-radius: 1rem 1rem 0 0;
+ height: 220px;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/stories/stories.css b/src/assets/styles/stories/stories.css
index 54770002..9ad6a84d 100644
--- a/src/assets/styles/stories/stories.css
+++ b/src/assets/styles/stories/stories.css
@@ -1,22 +1,22 @@
:root {
--stories-background-light: #f8fafc;
- --stories-background-dark: #0f172a;
- --stories-text-dark: #f1f5f9;
+ --stories-background-dark: #0f172a;
+ --stories-text-dark: #f1f5f9;
--stories-secondary-light: #64748b;
- --stories-secondary-dark: #94a3b8;
+ --stories-secondary-dark: #94a3b8;
--stories-primary-blue: #3b82f6;
--stories-primary-light: #60a5fa;
--stories-primary-dark: #1d4ed8;
--stories-accent: #f59e0b;
--stories-accent-light: #fbbf24;
--stories-border-light: #e2e8f0;
- --stories-border-dark: #475569;
+ --stories-border-dark: #475569;
--stories-shadow-light: rgba(0, 0, 0, 0.1);
--stories-shadow-dark: rgba(0, 0, 0, 0.3);
--stories-card-light: #ffffff;
- --stories-card-dark: #1e293b;
+ --stories-card-dark: #1e293b;
--stories-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
- --stories-text-light: #334155;
+ --stories-text-light: #334155;
--primary-background: var(--stories-background-light);
--secondary-background: var(--stories-card-light);
--text-color: var(--stories-text-light);
@@ -33,8 +33,8 @@
padding: 2rem 1.5rem;
position: relative;
overflow: hidden;
- background-color: var(--primary-background);
- color: var(--text-color);
+ background-color: var(--primary-background);
+ color: var(--text-color);
}
.stories-header {
@@ -64,7 +64,7 @@
left: 0;
width: 100%;
height: 0.25rem;
- background: var(--main-primary-color);
+ background: var(--main-primary-color);
border-radius: 0.125rem;
}
@@ -72,7 +72,7 @@
font-size: clamp(0.9rem, 2vw, 1.1rem);
max-width: 600px;
margin: 0 auto 1.5rem;
- color: var(--secondary-text-color);
+ color: var(--secondary-text-color);
opacity: 0.9;
line-height: 1.6;
}
@@ -93,59 +93,28 @@
filter: blur(20px);
}
-.card-top-controls {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1rem;
- margin-bottom: 1rem;
-}
-
-.font-size-control {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.font-size-control input[type="range"] {
- appearance: none;
- -webkit-appearance: none;
- width: 100px;
- height: 4px;
- background: var(--primary);
- border-radius: 4px;
- outline: none;
-}
-
-.font-size-control input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 16px;
- height: 16px;
- background: var(--primary);
- border-radius: 50%;
- cursor: pointer;
- border: 1px solid var(--primary);
-}
-
-.font-size-control button {
- background-color: light-dark(#ffffff, #0f172a);
- color: var(--primary);
- border: 1px solid var(--primary);
- border-radius: 8px;
- padding: 0.25rem 0.5rem;
- cursor: pointer;
- font-size: 1.2rem;
- transition: background-color 0.2s;
+.decoration-circle:nth-child(1) {
+ width: 80px;
+ height: 80px;
+ top: 0;
+ right: 0;
+ background: var(--main-primary-color);
}
-.font-size-control button:hover {
- background-color: var(--primary);
- color: #ffffff;
+.decoration-circle:nth-child(2) {
+ width: 60px;
+ height: 60px;
+ top: 30px;
+ right: 70px;
+ background: var(--main-primary-color);
}
-.font-size-control button:active {
- background-color: var(--primary);
+.decoration-circle:nth-child(3) {
+ width: 40px;
+ height: 40px;
+ top: 70px;
+ right: 30px;
+ background: var(--main-accent-color);
}
.stories-grid {
@@ -158,12 +127,12 @@
.story-card {
height: 100%;
border-radius: 1rem;
- background: var(--secondary-background);
- box-shadow: 0 2px 10px var(--shadow-color);
+ background: var(--secondary-background);
+ box-shadow: 0 2px 10px var(--shadow-color);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
- border: 1px solid var(--border-color);
+ border: 1px solid var(--border-color);
cursor: pointer;
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
@@ -172,7 +141,7 @@
.story-card:hover {
transform: translateY(-5px);
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.story-card-image {
@@ -199,25 +168,24 @@
.story-card-title {
font-size: 1.25rem;
font-weight: 700;
- color: var(--text-color);
+ color: var(--text-color);
margin-bottom: 0.75rem;
line-height: 1.4;
transition: color 0.3s ease;
}
.story-card:hover .story-card-title {
- color: var(--main-primary-color);
+ color: var(--main-primary-color);
}
.story-card-description {
font-size: 0.95rem;
line-height: 1.5;
- color: var(--secondary-text-color);
+ color: var(--secondary-text-color);
margin-bottom: 1rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
- line-clamp: 3;
overflow: hidden;
}
@@ -227,9 +195,9 @@
align-items: center;
padding-top: 0.75rem;
margin-top: auto;
- border-top: 1px solid var(--border-color);
+ border-top: 1px solid var(--border-color);
font-size: 0.8rem;
- color: var(--secondary-text-color);
+ color: var(--secondary-text-color);
}
.story-card-meta-left {
@@ -247,7 +215,7 @@
display: flex;
align-items: center;
gap: 0.35rem;
- color: var(--text-color);
+ color: var(--text-color);
}
.meta-item svg {
@@ -255,18 +223,18 @@
height: 14px;
flex-shrink: 0;
font-weight: bold;
- color: var(--main-primary-color);
+ color: var(--main-primary-color);
}
.story-card:hover .story-card-meta {
- border-top-color: var(--main-primary-color);
+ border-top-color: var(--main-primary-color);
}
.story-category {
position: absolute;
top: 1rem;
right: 1rem;
- background: var(--main-primary-color);
+ background: var(--main-primary-color);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
@@ -280,7 +248,7 @@
position: absolute;
top: 1rem;
left: 1rem;
- background: var(--main-accent-color);
+ background: var(--main-accent-color);
color: var(--text-color);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
@@ -291,7 +259,7 @@
}
.reading-time {
- color: light-dark(#000000, #ffffff);
+ color: light-dark(#000000,#ffffff);
font-weight: 500;
display: flex;
align-items: center;
@@ -301,20 +269,105 @@
.reading-time svg {
width: 14px;
height: 14px;
- color: var(--main-primary-color);
+ color: var(--main-primary-color);
}
+
.container__story {
max-width: 1400px;
margin-top: 5px;
margin: 0 auto;
padding: 2rem 1rem;
- background-color: light-dark(#0000, #0f172a);
+ background-color: light-dark(#0000,#0f172a); /* Use dynamic variable */
border-radius: 1.5rem;
- box-shadow: 0 10px 30px var(--shadow-color);
+ box-shadow: 0 10px 30px var(--shadow-color); /* Use dynamic variable */
position: relative;
overflow: hidden;
- border: 1px solid var(--primary);
+ border: 1px solid var(--primary); /* Use dynamic variable */
+}
+
+.container__story::before {
+ content: "";
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ width: 150px;
+ height: 150px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
+}
+
+.container__story::after {
+ content: "";
+ position: absolute;
+ bottom: -50px;
+ right: -50px;
+ width: 120px;
+ height: 120px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
+}
+
+.container__story::before {
+ content: "";
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ width: 150px;
+ height: 150px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
+}
+
+.container__story::after {
+ content: "";
+ position: absolute;
+ bottom: -50px;
+ right: -50px;
+ width: 120px;
+ height: 120px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
+}
+
+.container__story::before {
+ content: "";
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ width: 150px;
+ height: 150px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
+}
+
+.container__story::after {
+ content: "";
+ position: absolute;
+ bottom: -50px;
+ right: -50px;
+ width: 120px;
+ height: 120px;
+ background: var(--primary);
+ border-radius: 50%;
+ opacity: 0.15;
+ filter: blur(30px);
+ z-index: 0;
}
.story-header {
@@ -336,7 +389,7 @@
.story-description {
font-size: clamp(1rem, 2.5vw, 1.25rem);
- color: light-dark(#000000, #ffffff);
+ color: light-dark(#000000,#ffffff);
margin-bottom: 2rem;
line-height: 1.7;
max-width: 800px;
@@ -350,7 +403,7 @@
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
- border-bottom: 1px dashed light-dark(#000000, #ffffff);
+ border-bottom: 1px dashed light-dark(#000000,#ffffff);
padding-bottom: 1.5rem;
}
@@ -358,10 +411,11 @@
display: flex;
align-items: center;
gap: 0.6rem;
+ color: light-dark(#000000,#ffffff);
font-size: 0.95rem;
font-weight: 500;
border-radius: 50rem;
- padding: 4px 10px;
+ padding: 4px 6px;
border: 2px solid var(--primary);
}
@@ -369,28 +423,29 @@
width: 18px;
height: 18px;
flex-shrink: 0;
- color: var(--primary)
+ color: var(--primary);
}
.category-badge {
- color: light-dark(#000000, #ffffff);
+ color: light-dark(#000000,#ffffff);
padding: 0.3rem 0.9rem;
border-radius: 9999px;
- font-size: 15px;
+ font-size: 0.8rem;
font-weight: 500;
}
.story-tags {
- display: none;
+display: none;
}
.tag {
- display: none;
+ display:none;
}
.story-content {
font-size: 1.4rem;
line-height: 1.8;
+ color: light-dark(#000000,#ffffff);
position: relative;
z-index: 1;
text-align: left;
@@ -409,7 +464,7 @@
}
.story-content h2::after {
- content: '';
+ content: "";
position: absolute;
bottom: 5px;
left: 50%;
@@ -423,6 +478,7 @@
.story-content p {
margin-bottom: 0;
margin-top: 0;
+ color: light-dark(#000000,#ffffff);
font-size: clamp(1rem, 2.5vw, 1.1rem);
text-align: justify;
font-family: atkinson;
@@ -431,16 +487,16 @@
.moral-section {
margin-top: 3.5rem;
padding: 2rem;
- background-color: var(--secondary-background);
+ background-color: var(--secondary-background);
border-radius: 1rem;
- box-shadow: 0 5px 15px var(--shadow-color);
+ box-shadow: 0 5px 15px var(--shadow-color);
border: 1px solid var(--border-color);
text-align: center;
}
.moral-section h2 {
font-size: clamp(1.4rem, 3.5vw, 2rem);
- color: var(--main-accent-color);
+ color: var(--main-accent-color);
margin-bottom: 1rem;
font-weight: 800;
position: relative;
@@ -448,7 +504,7 @@
}
.moral-section h2::after {
- content: '๐';
+ content: "๐";
position: absolute;
bottom: -0.5rem;
right: -1.5rem;
@@ -463,6 +519,8 @@
font-style: italic;
}
+
+
@keyframes fadeInUp {
to {
opacity: 1;
@@ -481,6 +539,34 @@
}
}
+@media (min-width: 640px) {
+ .stories-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .header-decoration {
+ top: -2rem;
+ right: -2rem;
+ width: 180px;
+ height: 180px;
+ }
+
+ .decoration-circle:nth-child(1) {
+ width: 100px;
+ height: 100px;
+ }
+
+ .decoration-circle:nth-child(2) {
+ width: 70px;
+ height: 70px;
+ }
+
+ .decoration-circle:nth-child(3) {
+ width: 50px;
+ height: 50px;
+ }
+}
+
@media (min-width: 768px) {
.container__stories {
padding: 2rem;
@@ -507,4 +593,4 @@
width: 18px;
height: 18px;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/survey.css b/src/assets/styles/survey.css
index d3b8b643..c7b8ec68 100644
--- a/src/assets/styles/survey.css
+++ b/src/assets/styles/survey.css
@@ -107,7 +107,6 @@
font-size: x-large;
}
-
.question::before {
content: counter(question-counter) ".";
color: var(--primary-light);
@@ -251,7 +250,6 @@
min-height: 100px;
transition: var(--transition);
resize: none;
-
}
.textarea-input:focus {
@@ -545,7 +543,6 @@
margin-bottom: 1rem;
text-align: left;
-
.question {
font-size: 1.1rem;
flex-wrap: wrap;
@@ -642,7 +639,6 @@
text-align: left;
}
-
.option-label {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
@@ -672,4 +668,4 @@
overflow-y: auto;
min-height: 1500px;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/tile.css b/src/assets/styles/tile.css
index 0f97491a..72d182b3 100644
--- a/src/assets/styles/tile.css
+++ b/src/assets/styles/tile.css
@@ -60,4 +60,4 @@
.page__title {
display: none;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/HideSeekKbd.astro b/src/components/HideSeekKbd.astro
index 15b68b2a..cd0216e8 100644
--- a/src/components/HideSeekKbd.astro
+++ b/src/components/HideSeekKbd.astro
@@ -110,7 +110,6 @@ const letterRows = [
transform: rotate(90deg) scale(1.1);
}
}
-
\ No newline at end of file
+
diff --git a/src/components/Popup.astro b/src/components/Popup.astro
index f680828e..e5245c33 100644
--- a/src/components/Popup.astro
+++ b/src/components/Popup.astro
@@ -5,17 +5,17 @@ import "@/assets/styles/map/popup.css";
diff --git a/src/components/ShareButton.astro b/src/components/ShareButton.astro
index f6ecd306..273813d5 100644
--- a/src/components/ShareButton.astro
+++ b/src/components/ShareButton.astro
@@ -12,9 +12,7 @@ import "@/assets/styles/share-button.css";
Share this page!
-
- Share this page with the world!
-
+
Share this page with the world!
@@ -96,4 +94,4 @@ import "@/assets/styles/share-button.css";
});
shareTrigger.setAttribute("aria-expanded", "false");
});
-
\ No newline at end of file
+
diff --git a/src/components/StoryCard.astro b/src/components/StoryCard.astro
index 8c99d553..a758e929 100644
--- a/src/components/StoryCard.astro
+++ b/src/components/StoryCard.astro
@@ -2,40 +2,19 @@
import { storyCardSchema } from "@/types/stories";
const props = storyCardSchema.parse(Astro.props);
-const { post } = props;
+const { post, height = "auto" } = props;
const { url, title, description, image, author, date, category, readingTime, featured } = post;
-const socialImageURL = new URL(`/assets/images/stories/${image}`, Astro.url);
+const imageUrl = image;
---
-
-
-
+
-
-
-
- {featured ? "๐ชถ " : ""}
- {category}
-
+
+
+ {category && {category}}
+ {featured && Featured}
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
index 23a2a89a..0be167ee 100644
--- a/src/components/ThemeProvider.astro
+++ b/src/components/ThemeProvider.astro
@@ -33,14 +33,19 @@
// Listen to global theme-change events
document.addEventListener("theme-change", (e) => {
console.log("Theme changed to:", e.detail.theme);
- setTheme(e.detail.theme);
+ document.startViewTransition(() => {
+ console.log("start view transition");
+ setTheme(e.detail.theme);
+ });
});
// Listen for system theme changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
const currentTheme = getThemePreference();
if (currentTheme === "system") {
- setTheme("system");
+ document.startViewTransition(() => {
+ setTheme("system");
+ });
}
});
diff --git a/src/components/about/FeaturesSection.astro b/src/components/about/FeaturesSection.astro
index c204c9fc..bab88851 100644
--- a/src/components/about/FeaturesSection.astro
+++ b/src/components/about/FeaturesSection.astro
@@ -153,13 +153,19 @@ const features: Feature[] = [
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}
+
+
+
+
+ ))}
+
+
\ No newline at end of file
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index c581566a..5b5cdf3b 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -40,9 +40,19 @@ if (!Content) {
-
-
diff --git a/src/pages/stories/index.astro b/src/pages/stories/index.astro
index d0f22350..3e0d7176 100644
--- a/src/pages/stories/index.astro
+++ b/src/pages/stories/index.astro
@@ -4,7 +4,6 @@ import "@/assets/styles/stories/index.css";
import BackArrow from "@/components/Back.astro";
import Help from "@/components/Help.astro";
import StoryCard from "@/components/StoryCard.astro";
-import SharePopover from "@/components/ShareButton.astro";
import BaseLayout from "@/layouts/Base";
import { storyPostSchema, type StoryPost } from "@/types/stories";
import { getCollection } from "astro:content";
@@ -12,7 +11,6 @@ import { getCollection } from "astro:content";
const stories = await getCollection("stories", ({ data }) => {
return !data.draft;
});
-
const storyPosts = stories.map((entry) => {
const slug = entry.data.slug || entry.id.replace(/\.md$/, "").toLowerCase().replace(/\s+/g, "-");
const post: StoryPost = storyPostSchema.parse({
@@ -35,21 +33,11 @@ const sortedStories = storyPosts.sort((a, b) => {
if (!a.featured && b.featured) return 1;
return new Date(b.date || 0).getTime() - new Date(a.date || 0).getTime();
});
-
-// Automatically extract unique categories from all stories
-const allCategories = storyPosts
- .map((post) => post.category?.toLowerCase().trim())
- .filter((category): category is string => Boolean(category)) // Type guard to ensure string
- .filter((category, index, array) => array.indexOf(category) === index) // Remove duplicates
- .sort(); // Sort alphabetically
-
-const categories = allCategories;
---
-
Stories for Kids
Discover tales, narratives, and creative works from talented writers.
+
- {
- categories.length > 0 && (
-
-
- {categories.map((category) => (
-
- ))}
-
- )
- }
-
-
- {
- sortedStories.map((post) => (
-
-
-
- ))
- }
+
+ {sortedStories.map((post) => )}
-
-
diff --git a/src/pages/support.astro b/src/pages/support.astro
new file mode 100644
index 00000000..ce5a7552
--- /dev/null
+++ b/src/pages/support.astro
@@ -0,0 +1,65 @@
+---
+import BaseLayout from "@/layouts/Base";
+import { Content } from "../../.github/SUPPORT.md";
+---
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/vedic.astro b/src/pages/vedic.astro
index bec99e0b..4f69e2e3 100644
--- a/src/pages/vedic.astro
+++ b/src/pages/vedic.astro
@@ -12,9 +12,9 @@ const timeUnits = vedicData.time_units;
-
-
-
+
+
+
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 4a38a164..c8d0e949 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";
@@ -74,7 +74,7 @@ export const NavbarLinks: LinkProps[] = [
{
name: "Home",
title: "Home",
- path: "/",
+ path: "/home",
icon: HomeIcon,
isActive: true
},