-
-
-
- {
- updatedDate && (
-
- Last updated on
-
-
- )
- }
-
-
{title}
-
+
+
+
+ {
+ updatedDate && (
+
+ Last updated on
+
+
+ )
+ }
-
+
{title}
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
diff --git a/AstroLanding/src/pages/about.astro b/AstroLanding/src/pages/about.astro
index 86c7499..def8927 100644
--- a/AstroLanding/src/pages/about.astro
+++ b/AstroLanding/src/pages/about.astro
@@ -1,63 +1,73 @@
---
-import AboutHeroImage from '../assets/blog-placeholder-about.jpg';
-import Layout from '../layouts/BlogPost.astro';
+import AboutHeroImage from "../assets/blog-placeholder-about.jpg";
+import Layout from "../layouts/BlogPost.astro";
---
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
- viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
- adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
- et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
- vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
- sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo
+ integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis
+ egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In
+ hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat.
+ Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu
+ non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim.
+ Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed
+ vulputate mi. Dictumst quisque sagittis purus sit amet.
+
-
- Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
- tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
- blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
- porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
- massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
- Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
- bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
- massa massa ultricies mi.
-
+
+ Morbi tristique senectus et netus. Id semper risus in hendrerit gravida
+ rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus
+ sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris
+ rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus
+ dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
+ massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius
+ morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras
+ ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est
+ ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa
+ ultricies mi.
+
-
- Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
- suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
- nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
- turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
- dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
- semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
- vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
- facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
- vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
- urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-
+
+ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque.
+ Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac
+ felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit
+ amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed
+ elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
+ dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra.
+ Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum
+ consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus
+ ultricies tristique. Rhoncus dolor purus non enim praesent elementum
+ facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed
+ risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor
+ vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus
+ non. Amet dictum sit amet justo donec enim.
+
-
- Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
- viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
- scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
- gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
- pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
- blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
- cursus metus aliquam eleifend mi.
-
+
+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac
+ ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem
+ viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu
+ ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac
+ tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
+ pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim
+ sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam.
+ Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
+
-
- Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
- nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
- tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
- ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
- proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-
+
+ Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus
+ imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu
+ cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum.
+ Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit
+ libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed
+ pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique
+ magna.
+
diff --git a/AstroLanding/src/pages/blog/[...slug].astro b/AstroLanding/src/pages/blog/[...slug].astro
index 0754ea7..a8892fd 100644
--- a/AstroLanding/src/pages/blog/[...slug].astro
+++ b/AstroLanding/src/pages/blog/[...slug].astro
@@ -1,20 +1,20 @@
---
-import { type CollectionEntry, getCollection, render } from 'astro:content';
-import BlogPost from '../../layouts/BlogPost.astro';
+import { type CollectionEntry, getCollection, render } from "astro:content";
+import BlogPost from "../../layouts/BlogPost.astro";
export async function getStaticPaths() {
- const posts = await getCollection('blog');
- return posts.map((post) => ({
- params: { slug: post.id },
- props: post,
- }));
+ const posts = await getCollection("blog");
+ return posts.map((post) => ({
+ params: { slug: post.id },
+ props: post,
+ }));
}
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<"blog">;
const post = Astro.props;
const { Content } = await render(post);
---
-
+
diff --git a/AstroLanding/src/pages/blog/index.astro b/AstroLanding/src/pages/blog/index.astro
index e0b1361..92ecffd 100644
--- a/AstroLanding/src/pages/blog/index.astro
+++ b/AstroLanding/src/pages/blog/index.astro
@@ -1,114 +1,75 @@
---
-import { Image } from 'astro:assets';
-import { getCollection } from 'astro:content';
-import BaseHead from '../../components/BaseHead.astro';
-import Footer from '../../components/Footer/Footer.astro';
-import FormattedDate from '../../components/FormattedDate.astro';
-import Header from '../../components/Header.astro';
-import { SITE_DESCRIPTION, SITE_TITLE } from '../../consts';
+import { Image } from "astro:assets";
+import { getCollection } from "astro:content";
+import BaseHead from "@/components/BaseHead.astro";
+import Footer from "@/components/Footer/Footer.astro";
+import FormattedDate from "@/components/FormattedDate.astro";
+import Header from "@/components/Header/Header.astro";
+import { SITE_DESCRIPTION, SITE_TITLE } from "@/consts";
+import { getLangFromUrl, useTranslations } from "@/i18n/utils";
-const posts = (await getCollection('blog')).sort(
- (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+import "@/styles/index.css";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const posts = (await getCollection("blog")).sort(
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ {t("menu.blog")}
+
+ Stories, experiments, and practical notes from our team.
+
+
+
+
+
+
+
+
+
diff --git a/AstroLanding/src/pages/lv/index.astro b/AstroLanding/src/pages/lv/index.astro
index 31a0799..ea9daba 100644
--- a/AstroLanding/src/pages/lv/index.astro
+++ b/AstroLanding/src/pages/lv/index.astro
@@ -2,4 +2,4 @@
import HomePage from "../../components/HomePage.astro";
---
-
\ No newline at end of file
+
diff --git a/AstroLanding/src/pages/rss.xml.js b/AstroLanding/src/pages/rss.xml.js
index 1fa2b18..c4ddb92 100644
--- a/AstroLanding/src/pages/rss.xml.js
+++ b/AstroLanding/src/pages/rss.xml.js
@@ -1,16 +1,16 @@
-import { getCollection } from 'astro:content';
-import rss from '@astrojs/rss';
-import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
+import { getCollection } from "astro:content";
+import rss from "@astrojs/rss";
+import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
export async function GET(context) {
- const posts = await getCollection('blog');
- return rss({
- title: SITE_TITLE,
- description: SITE_DESCRIPTION,
- site: context.site,
- items: posts.map((post) => ({
- ...post.data,
- link: `/blog/${post.id}/`,
- })),
- });
+ const posts = await getCollection("blog");
+ return rss({
+ title: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ site: context.site,
+ items: posts.map((post) => ({
+ ...post.data,
+ link: `/blog/${post.id}/`,
+ })),
+ });
}
diff --git a/AstroLanding/src/styles/global.css b/AstroLanding/src/styles/global.css
index a93c582..9b8ae55 100644
--- a/AstroLanding/src/styles/global.css
+++ b/AstroLanding/src/styles/global.css
@@ -5,36 +5,40 @@
*/
:root {
- --accent: #2337ff;
- --accent-dark: #000d8a;
- --black: 15, 18, 25;
- --gray: 96, 115, 159;
- --gray-light: 229, 233, 240;
- --gray-dark: 34, 41, 57;
- --gray-gradient: rgba(var(--gray-light), 50%), #fff;
- --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
+ --accent: #2337ff;
+ --accent-dark: #000d8a;
+ --black: 15, 18, 25;
+ --gray: 96, 115, 159;
+ --gray-light: 229, 233, 240;
+ --gray-dark: 34, 41, 57;
+ --gray-gradient: rgba(var(--gray-light), 50%), #fff;
+ --box-shadow:
+ 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
0 16px 32px rgba(var(--gray), 33%);
- /* TODO: Here we start our custom CSS Remove above later */
- --breakpoint-mobile: 767px;
- --breakpoint-tablet: 1200px;
+ /* TODO: Here we start our custom CSS Remove above later */
+ --breakpoint-mobile: 767px;
+ --breakpoint-tablet: 1200px;
- --color-text-primary: #ffffff;
- --color-text-secondary: rgba(255, 255, 255, 60%);
- --color-accent-primary: #c16b6b;
- --color-accent-secondary: #b46f8e;
+ --color-text-primary: #ffffff;
+ --color-text-secondary: rgba(255, 255, 255, 60%);
+ --color-accent-primary: #c16b6b;
+ --color-accent-secondary: #b46f8e;
- --gutter: 24px;
+ --gutter: 24px;
+
+ --floating-intro-image-x: 150px;
+ --floating-intro-image-start-x: 300px;
}
/* typography.css */
* {
- font-family: "proxima-nova", sans-serif;
+ font-family: "proxima-nova", sans-serif;
}
a {
- text-decoration: none;
+ text-decoration: none;
}
h1,
@@ -45,146 +49,160 @@ h5,
a,
p,
span {
- color: var(--color-text-primary);
+ color: var(--color-text-primary);
}
h1 {
- font-weight: 700;
- font-size: 6.25rem; /* 100px ÷ 16 */
+ font-weight: 700;
+ font-size: 5.55rem; /* 100px ÷ 16 */
}
h2 {
- font-weight: 700;
- font-size: 3.125rem; /* 50px ÷ 16 */
+ font-weight: 700;
+ font-size: 3.125rem; /* 50px ÷ 16 */
}
h3 {
- font-weight: 600;
- font-size: 1.5625rem; /* 25px ÷ 16 */
+ font-weight: 600;
+ font-size: 1.5625rem; /* 25px ÷ 16 */
}
h4 {
- font-weight: 900;
- font-size: 2.1875rem; /* 35px ÷ 16 */
+ font-weight: 900;
+ font-size: 2.1875rem; /* 35px ÷ 16 */
}
h5 {
- font-weight: 700;
- font-size: 1.875rem; /* 30px ÷ 16 */
+ font-weight: 700;
+ font-size: 1.875rem; /* 30px ÷ 16 */
+}
+
+.header5 {
+ font-weight: 700;
+ font-size: 1.875rem; /* 30px ÷ 16 */
}
h6 {
- font-size: 1.125rem; /* 18px ÷ 16 */
- text-transform: uppercase;
- letter-spacing: 0.05rem;
- font-weight: normal;
- color: var(--color-text-primary);
+ font-size: 1.125rem; /* 18px ÷ 16 */
+ text-transform: uppercase;
+ letter-spacing: 0.05rem;
+ font-weight: normal;
+ color: var(--color-text-primary);
}
p {
- font-weight: 400;
- font-size: 1.125rem; /* 18px ÷ 16 */
+ font-weight: 400;
+ font-size: 1.125rem; /* 18px ÷ 16 */
}
.gray {
- color: var(--color-text-secondary);
+ color: var(--color-text-secondary);
+}
+
+section {
+ opacity: 0;
}
@media (max-width: 767px) {
- h1 {
- font-weight: 800;
- font-size: 2.5rem; /* 40px ÷ 16 */
- line-height: normal;
- }
+ :root {
+ --floating-intro-image-x: 0px;
+ --floating-intro-image-start-x: 30px;
+ }
- h2 {
- font-weight: 700;
- font-size: 1.875rem; /* 30px ÷ 16 */
- line-height: normal;
- }
+ h1 {
+ font-weight: 800;
+ font-size: 2.5rem; /* 40px ÷ 16 */
+ line-height: normal;
+ }
- h3 {
- font-weight: 700;
- font-size: 1.375rem; /* 22px ÷ 16 */
- line-height: normal;
- }
+ h2 {
+ font-weight: 700;
+ font-size: 1.875rem; /* 30px ÷ 16 */
+ line-height: normal;
+ }
- p {
- line-height: normal;
- font-size: 1rem; /* 16px ÷ 16 */
- }
+ h3 {
+ font-weight: 700;
+ font-size: 1.375rem; /* 22px ÷ 16 */
+ line-height: normal;
+ }
+
+ p {
+ line-height: normal;
+ font-size: 1rem; /* 16px ÷ 16 */
+ }
}
-/* TODO: Remove above code later */
+/* TODO: Remove h1ve code later */
body {
- background-color: #111111;
+ background-color: #111111;
}
html {
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
}
.container {
- display: grid;
- grid-template-columns: repeat(12, minmax(0, 96px));
- gap: var(--gutter);
- margin: 0 auto;
- width: 100%;
- max-width: 1224px;
- grid-column: 1 / 13;
- padding: 0 20px;
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 96px));
+ gap: var(--gutter);
+ margin: 0 auto;
+ width: 100%;
+ max-width: 1224px;
+ grid-column: 1 / 13;
+ padding: 0 20px;
}
.container > * {
- grid-column: 1 / 13;
+ grid-column: 1 / 13;
}
@media (max-width: 767px) {
- .container {
- grid-template-columns: repeat(6, 1fr);
- max-width: 100%;
- width: auto;
- }
+ .container {
+ grid-template-columns: repeat(6, 1fr);
+ max-width: 100%;
+ width: auto;
+ }
- .container > * {
- grid-column: 1 / 7;
- }
+ .container > * {
+ grid-column: 1 / 7;
+ }
}
@media (max-width: 767px) {
- .container-mobile {
- padding: 0 20px;
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- max-width: 100%;
- width: auto;
- }
+ .container-mobile {
+ padding: 0 20px;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ max-width: 100%;
+ width: auto;
+ }
- .container-mobile > * {
- grid-column: 1 / 7;
- }
+ .container-mobile > * {
+ grid-column: 1 / 7;
+ }
}
section.container {
- padding-right: 20px;
- padding-left: 20px;
+ padding-right: 20px;
+ padding-left: 20px;
}
div.container {
- padding-right: 0;
- padding-left: 0;
+ padding-right: 0;
+ padding-left: 0;
}
.main-page {
- overflow-x: hidden;
- position: relative;
+ overflow-x: hidden;
+ position: relative;
- .intro-bg {
- background: radial-gradient(
- 100% 100% at 0% 0%,
- rgba(226, 90, 146, 0.15) 0%,
- rgba(141, 162, 243, 0.063) 35.82%,
- rgba(23, 23, 23, 0) 100%
- );
- }
+ .intro-bg {
+ background: radial-gradient(
+ 100% 100% at 0% 0%,
+ rgba(226, 90, 146, 0.15) 0%,
+ rgba(141, 162, 243, 0.063) 35.82%,
+ rgba(23, 23, 23, 0) 100%
+ );
+ }
}
diff --git a/AstroLanding/src/styles/index.css b/AstroLanding/src/styles/index.css
index 6923b57..6b68f97 100644
--- a/AstroLanding/src/styles/index.css
+++ b/AstroLanding/src/styles/index.css
@@ -1,283 +1,594 @@
/* intro */
.intro {
- min-height: max(680px, calc(100vh - 24px));
- grid-template-rows: 1fr auto;
- row-gap: clamp(20px, 3vw, 40px);
- padding-top: 112px;
+ height: calc(100vh - 112px);
+ grid-template-rows: calc(100vh - 112px - 85px - 30px) min-content;
+ row-gap: unset;
+ padding-top: 112px;
- .intro__title {
- grid-column: 1/8;
- grid-row: 1/2;
+ .title {
+ grid-column: 1/8;
+ grid-row: 1/2;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ h1 {
+ line-height: 120%;
+ }
+
+ div {
+ display: flex;
+
+ p {
+ text-transform: uppercase;
+ color: var(--color-accent-secondary);
+
+ &:first-child {
+ margin-right: 39px;
+ }
+
+ &:last-child {
+ margin-left: 34px;
+ }
+ }
+ }
+ }
+
+ .image {
+ grid-column: 5/13;
+ grid-row: 1/2;
+ display: flex;
+ align-items: center;
+ background-image: url("../assets/images/main/intro/astronaut.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: right;
+ transform: translateX(150px);
+ z-index: -1;
+ }
+
+ .rocket {
+ grid-column: 1/13;
+ grid-row: 2/3;
+
+ * {
+ margin: 0 auto;
+ width: max-content;
+ }
+
+ p {
+ color: var(--color-text-secondary);
+ margin-top: 15px;
+ }
+ }
+
+ @media (max-width: 1350px) {
+ .image {
+ transform: translateX(50px);
+ }
+ }
+
+ @media (max-width: 767px) {
+ height: auto;
+ padding-top: 106px;
+ grid-template-rows: 400px min-content;
+
+ .title,
+ .rocket,
+ .image {
+ grid-column: 1/7;
+ }
+
+ .image {
+ grid-row: 1/2;
+ transform: none;
+ justify-content: center;
+ background-position: center;
+ }
+
+ .title {
+ grid-row: 2/3;
+
+ h1 {
+ text-align: center;
+
+ span {
+ display: none;
+ }
+ }
+
+ div {
+ width: 100%;
+ text-align: center;
display: flex;
- flex-direction: column;
- justify-content: center;
-
- h1 {
- font-size: clamp(2.9rem, 8vw, 6.25rem);
- line-height: 1.2;
- text-wrap: balance;
-
- span {
- color: var(--color-text-primary);
- }
- }
-
- .intro__items {
- list-style: none;
- display: flex;
- flex-wrap: wrap;
- column-gap: clamp(16px, 2.8vw, 40px);
- row-gap: 10px;
- margin: 22px 0 0;
- padding: 0;
-
- li {
- text-transform: uppercase;
- color: var(--color-accent-secondary);
- letter-spacing: 0.03em;
- }
- }
+ justify-content: space-between;
+ margin-top: 16px;
+ }
}
- .intro__image {
- grid-column: 5/13;
- grid-row: 1/2;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- z-index: -1;
-
- img {
- width: min(100%, 780px);
- height: auto;
- transform: translateX(clamp(0px, 7vw, 150px));
- }
- }
-
- .intro__rocket {
- grid-column: 1/13;
- grid-row: 2/3;
- display: grid;
- justify-items: center;
-
- p {
- color: var(--color-text-secondary);
- margin-top: 14px;
- }
- }
-
- @media (max-width: 1350px) {
- .intro__image img {
- transform: translateX(clamp(0px, 3vw, 50px));
- }
- }
-
- @media (max-width: 767px) {
- min-height: auto;
- padding-top: 106px;
- grid-template-rows: 340px auto;
- row-gap: 20px;
-
- .intro__title,
- .intro__rocket,
- .intro__image {
- grid-column: 1/7;
- }
-
- .intro__image {
- grid-row: 1/2;
- justify-content: center;
-
- img {
- transform: none;
- max-width: 450px;
- }
- }
-
- .intro__title {
- grid-row: 2/3;
-
- h1 {
- text-align: center;
-
- span {
- display: none;
- }
- }
-
- .intro__items {
- width: 100%;
- justify-content: space-between;
- text-align: center;
- margin-top: 16px;
-
- li {
- font-size: 0.75rem;
- }
- }
- }
-
- .intro__rocket {
- display: none;
- }
+ .rocket {
+ display: none;
}
+ }
}
/* section */
section.content {
- margin-top: 192px;
+ margin-top: 192px;
- h2 {
- text-align: center;
- margin-bottom: 88px;
+ h2 {
+ text-align: center;
+ margin-bottom: 88px;
- @media all and (max-width: 767px) {
- margin-bottom: 54px;
- }
+ @media all and (max-width: 767px) {
+ margin-bottom: 54px;
}
+ }
}
/* services */
#services {
- scroll-margin-block-start: 120px;
+ scroll-margin-block-start: 120px;
}
.services {
- background: radial-gradient(
- 48.62% 45.5% at 50% 50%,
- rgba(225, 104, 154, 0.15) 0%,
- rgba(141, 162, 243, 0.063) 49.1%,
- rgba(23, 23, 23, 0) 100%
- );
- position: relative;
+ background: radial-gradient(
+ 48.62% 45.5% at 50% 50%,
+ rgba(225, 104, 154, 0.15) 0%,
+ rgba(141, 162, 243, 0.063) 49.1%,
+ rgba(23, 23, 23, 0) 100%
+ );
+ position: relative;
- .circle {
- position: absolute;
- top: -140px;
- left: -530px;
+ .circle {
+ position: absolute;
+ top: -140px;
+ left: -530px;
- @media all and (max-width: 767px) {
- top: 10%;
- right: 50%;
- left: unset;
- }
- }
-
- .card {
- color: red;
+ @media all and (max-width: 767px) {
+ top: 10%;
+ right: 50%;
+ left: unset;
}
+ }
}
/* card */
.card {
- background: rgba(255, 255, 255, 0.01);
- box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
- backdrop-filter: blur(7px);
- border-radius: 33px;
- padding: 63px 55px;
- display: flex;
- flex-direction: column;
- align-items: center;
+ background: rgba(255, 255, 255, 0.01);
+ box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(7px);
+ border-radius: 33px;
+ padding: 63px 55px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
- img {
- min-height: 99px;
- }
+ img {
+ min-height: 99px;
+ }
- h3 {
- margin-top: 63px;
- margin-bottom: 16px;
- }
+ h3 {
+ margin-top: 63px;
+ margin-bottom: 16px;
+ }
- h3,
- p {
- text-align: center;
- }
+ h3,
+ p {
+ text-align: center;
+ }
+
+ &:nth-of-type(1) {
+ grid-column: 1/5;
+ }
+
+ &:nth-of-type(2) {
+ grid-column: 5/9;
+ }
+
+ &:nth-of-type(3) {
+ grid-column: 9/13;
+ }
+
+ @media (max-width: 767px) {
+ padding: 46px 30px;
&:nth-of-type(1) {
- grid-column: 1/5;
+ grid-column: 1/7;
}
&:nth-of-type(2) {
- grid-column: 5/9;
+ grid-column: 1/7;
}
&:nth-of-type(3) {
- grid-column: 9/13;
- }
-
- @media (max-width: 767px) {
- padding: 46px 30px;
-
- &:nth-of-type(1) {
- grid-column: 1/7;
- }
-
- &:nth-of-type(2) {
- grid-column: 1/7;
- }
-
- &:nth-of-type(3) {
- grid-column: 1/7;
- }
+ grid-column: 1/7;
}
+ }
}
/* about */
#about-us {
- scroll-margin-block-start: 120px;
+ scroll-margin-block-start: 120px;
}
.about-us {
- margin-top: -80px;
+ margin-top: -80px;
- > div {
- &:first-child {
- grid-column: 1/7;
- }
+ .header5 {
+ text-align: left;
+ margin-bottom: 0;
+ }
- &:last-child {
- grid-column: 7/13;
- display: flex;
- flex-direction: column;
- justify-content: center;
+ .rocket-img {
+ width: 100%;
+ height: auto;
+ }
- .text {
- margin-top: 16px;
- color: var(--color-text-secondary);
- }
-
- .stats {
- display: flex;
- justify-content: space-between;
- margin-top: 64px;
- width: 100%;
-
- .swiper-slide {
- width: 33%;
- }
-
- @media (max-width: 767px) {
- text-align: center;
-
- & > div {
- padding: 4px;
- }
- }
- }
-
- @media (max-width: 767px) {
- grid-column: 1/7;
-
- h5,
- .text {
- text-align: center;
- }
- }
- }
+ > div {
+ &:first-child {
+ grid-column: 1/7;
}
+
+ &:last-child {
+ grid-column: 7/13;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .text {
+ margin-top: 16px;
+ color: var(--color-text-secondary);
+ }
+
+ .stats {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 64px;
+ width: 100%;
+
+ .swiper-slide {
+ width: 33%;
+ }
+
+ @media (max-width: 767px) {
+ text-align: center;
+
+ & > div {
+ padding: 4px;
+ }
+ }
+ }
+
+ @media (max-width: 767px) {
+ grid-column: 1/7;
+
+ h2,
+ .text {
+ text-align: center;
+ }
+ }
+ }
+ }
+}
+
+/* projects */
+
+#projects {
+ scroll-margin-block-start: 120px;
+}
+
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ gap: 24px;
+
+ .project-card {
+ grid-column: span 6;
+ background: linear-gradient(
+ 145deg,
+ rgba(255, 255, 255, 0.08),
+ rgba(255, 255, 255, 0.03)
+ );
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 24px;
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ backdrop-filter: blur(8px);
+ }
+
+ .project-card__media {
+ aspect-ratio: 16 / 10;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.35s ease;
+ }
+ }
+
+ .project-card__content {
+ padding: 22px 22px 24px;
+
+ h3 {
+ margin-bottom: 12px;
+ }
+
+ p {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ .project-card__tags {
+ margin: 0 0 14px;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+
+ li {
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 999px;
+ padding: 6px 10px;
+ color: var(--color-text-primary);
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ }
+ }
+
+ .project-card:hover .project-card__media img {
+ transform: scale(1.04);
+ }
+
+ @media (max-width: 1024px) {
+ .project-card {
+ grid-column: span 12;
+ }
+ }
+
+ @media (max-width: 767px) {
+ gap: 16px;
+
+ .project-card {
+ border-radius: 18px;
+ }
+
+ .project-card__content {
+ padding: 16px;
+ }
+ }
+}
+
+/* blog */
+
+.blog-hero {
+ min-height: 360px;
+ align-content: center;
+ padding-top: 112px;
+ padding-bottom: 32px;
+
+ h1 {
+ text-align: center;
+ margin-bottom: 14px;
+ }
+
+ p {
+ text-align: center;
+ max-width: 680px;
+ margin: 0 auto;
+ }
+
+ @media (max-width: 767px) {
+ min-height: 300px;
+ padding-top: 106px;
+ }
+}
+
+#blog-list {
+ margin-top: 88px;
+ padding-bottom: 80px;
+
+ @media (max-width: 767px) {
+ margin-top: 56px;
+ padding-bottom: 56px;
+ }
+}
+
+.blog-grid {
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ gap: 24px;
+}
+
+.blog-card {
+ grid-column: span 6;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 22px;
+ overflow: hidden;
+ background: linear-gradient(
+ 160deg,
+ rgba(255, 255, 255, 0.08),
+ rgba(255, 255, 255, 0.02)
+ );
+ backdrop-filter: blur(7px);
+
+ .blog-card__link {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ height: 100%;
+ }
+
+ .blog-card__media {
+ aspect-ratio: 16 / 9;
+ overflow: hidden;
+ }
+
+ .blog-card__media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.35s ease;
+ }
+
+ .blog-card__content {
+ padding: 18px 20px 22px;
+ }
+
+ h3 {
+ margin: 0 0 8px;
+ line-height: 1.2;
+ }
+
+ .blog-card__date {
+ color: var(--color-accent-secondary);
+ margin: 0 0 12px;
+ font-size: 0.95rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ }
+
+ .blog-card__excerpt {
+ color: var(--color-text-secondary);
+ margin: 0;
+ }
+
+ &:hover .blog-card__media img {
+ transform: scale(1.04);
+ }
+}
+
+@media (max-width: 1024px) {
+ .blog-card {
+ grid-column: span 12;
+ }
+}
+
+/* blog post */
+
+.blog-post-page main {
+ width: auto;
+ max-width: 100%;
+ margin: 0 2rem;
+ padding-top: 176px;
+}
+
+@media (max-width: 767px) {
+ .blog-post-page main {
+ width: auto;
+ margin: 0 1rem;
+ padding-top: 124px;
+ }
+}
+
+.blog-post-page .hero-image {
+ width: 100%;
+}
+
+.blog-post-page .hero-image__media {
+ width: 100%;
+ max-width: 1020px;
+ height: auto;
+ display: block;
+ margin: 0 auto;
+ border-radius: 12px;
+ box-shadow: var(--box-shadow);
+}
+
+.blog-post-page .prose {
+ width: 720px;
+ max-width: calc(100% - 2em);
+ margin: auto;
+ padding: 1em;
+ color: rgb(var(--gray-dark));
+}
+
+.blog-post-page .prose picture {
+ display: block;
+ width: 100%;
+ max-width: 1020px;
+ margin: 1.25rem auto;
+}
+
+.blog-post-page .prose img {
+ width: 100%;
+ max-width: 1020px;
+ height: auto;
+ display: block;
+ margin: 1.25rem auto;
+ border-radius: 12px;
+ box-shadow: var(--box-shadow);
+}
+
+.blog-post-page .title {
+ margin-bottom: 1em;
+ padding: 1em 0;
+ text-align: center;
+ line-height: 1;
+}
+
+.blog-post-page .title h1 {
+ margin: 0 0 0.5em 0;
+}
+
+.blog-post-page .date {
+ margin-bottom: 0.5em;
+ color: rgb(var(--gray));
+}
+
+.blog-post-page .last-updated-on {
+ font-style: italic;
+}
+
+.blog-post-page .blog-nav-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.24);
+ border-radius: 999px;
+ padding: 10px 16px;
+ font-size: 0.875rem;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ transition:
+ border-color 0.25s ease,
+ transform 0.25s ease,
+ background-color 0.25s ease;
+ background: rgba(255, 255, 255, 0.04);
+}
+
+.blog-post-page .blog-nav-link:hover {
+ border-color: rgba(255, 255, 255, 0.48);
+ background: rgba(255, 255, 255, 0.08);
+ transform: translateY(-2px);
+}
+
+.blog-post-page .blog-nav-link::before {
+ content: "\2190";
+ font-size: 1rem;
+ line-height: 1;
+}
+
+.blog-post-page .blog-nav-link.bottom {
+ margin: 28px auto 0;
+}
+
+.blog-post-page .blog-nav-wrap {
+ width: 720px;
+ max-width: calc(100% - 2em);
+ margin: 0 auto;
+ padding: 0 1em;
+ display: flex;
+ justify-content: center;
}
diff --git a/AstroLanding/src/styles/reset.css b/AstroLanding/src/styles/reset.css
index a5b2a0d..393d5b2 100644
--- a/AstroLanding/src/styles/reset.css
+++ b/AstroLanding/src/styles/reset.css
@@ -3,22 +3,22 @@
*,
*::before,
*::after {
- box-sizing: border-box;
+ box-sizing: border-box;
}
html {
- font-size: 100.01%;
+ font-size: 100.01%;
}
body {
- margin: 0;
- min-height: 100vh;
- text-rendering: optimizeSpeed;
- line-height: 1.5;
+ margin: 0;
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
}
main {
- display: block;
+ display: block;
}
/* Remove default margin */
@@ -34,25 +34,25 @@ figure,
blockquote,
dl,
dd {
- margin: 0;
+ margin: 0;
}
/* Reset list styles */
ul[role="list"],
ol[role="list"] {
- list-style: none;
+ list-style: none;
}
/* Links */
a:not([class]) {
- text-decoration-skip-ink: auto;
+ text-decoration-skip-ink: auto;
}
/* Images */
img,
picture {
- max-width: 100%;
- display: block;
+ max-width: 100%;
+ display: block;
}
/* Reset button and input styles */
@@ -62,46 +62,46 @@ input[type="submit"],
input,
textarea,
select {
- font: inherit;
- cursor: pointer;
+ font: inherit;
+ cursor: pointer;
}
button,
input[type="button"],
input[type="submit"] {
- background: transparent;
- border: 0;
- padding: 0;
- margin: 0;
- box-shadow: none;
- color: inherit;
- font-size: inherit;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ box-shadow: none;
+ color: inherit;
+ font-size: inherit;
}
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
- border: 0;
- padding: 0;
+ border: 0;
+ padding: 0;
}
/* Hidden elements */
[hidden] {
- display: none !important;
+ display: none !important;
}
/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce) {
- html:focus-within {
- scroll-behavior: auto;
- }
+ html:focus-within {
+ scroll-behavior: auto;
+ }
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
}
diff --git a/AstroLanding/src/translations/en.json b/AstroLanding/src/translations/en.json
index ec2a6ad..29f16db 100644
--- a/AstroLanding/src/translations/en.json
+++ b/AstroLanding/src/translations/en.json
@@ -3,6 +3,7 @@
"services": "Services",
"about_us": "About Us",
"portfolio": "Portfolio",
+ "blog": "Blog",
"pricing": "Pricing",
"contact_us": "Contact Us",
"home": "Home"
@@ -46,10 +47,14 @@
"amount_experience": "6+",
"experience": "Years experience"
},
+ "blog": {
+ "back": "Back",
+ "read_more": "Read more of our stories"
+ },
"projects": [
{
"title": "Inflid",
- "image": "inflid_full_1.png",
+ "image": "inflid_full_1_1.png",
"info": ["Website", "Platform", "UI / UX"],
"text": "Smart matching platform for Streamers and Advertisers"
},
diff --git a/AstroLanding/src/translations/lv.json b/AstroLanding/src/translations/lv.json
index 6b79339..9c9b761 100644
--- a/AstroLanding/src/translations/lv.json
+++ b/AstroLanding/src/translations/lv.json
@@ -3,6 +3,7 @@
"services": "Servisi",
"about_us": "Par mums",
"portfolio": "Portfolio",
+ "blog": "Blogs",
"pricing": "Cenas",
"contact_us": "Sazināties",
"home": "Mājas"
@@ -46,6 +47,10 @@
"amount_experience": "6+",
"experience": "Gadu pieredze"
},
+ "blog": {
+ "back": "Atpakaļ",
+ "read_more": "Lasīt vairāk mūsu stāstus"
+ },
"projects": [
{
"title": "Inflid",
diff --git a/AstroLanding/tsconfig.json b/AstroLanding/tsconfig.json
index 2424da8..581c0cf 100644
--- a/AstroLanding/tsconfig.json
+++ b/AstroLanding/tsconfig.json
@@ -1,28 +1,16 @@
{
"extends": "astro/tsconfigs/strict",
- "include": [
- ".astro/types.d.ts",
- "**/*"
- ],
- "exclude": [
- "dist"
- ],
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist"],
"compilerOptions": {
"strictNullChecks": true,
"jsx": "react-jsx",
"jsxImportSource": "react",
- "baseUrl": ".",
"paths": {
"@/*": ["src/*"],
- "@components/*": [
- "src/components/*"
- ],
- "@images/*": [
- "src/assets/images/*"
- ],
- "@consts": [
- "src/consts"
- ]
+ "@components/*": ["src/components/*"],
+ "@images/*": ["src/assets/images/*"],
+ "@consts": ["src/consts"]
}
}
}