feat: Add vitnode label in home page

aXenDeveloper · Mar 4, 2024 · 788cda2 · 788cda2
1 parent c586410
commit 788cda2
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 41 deletions.
diff --git a/.github/release.yaml b/.github/release.yaml
diff --git a/.github/workflows/conventional-label.yaml b/.github/workflows/conventional-label.yaml
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,6 +11,7 @@
     "Swipeable",
     "swiper",
     "testid",
+    "vitnode",
     "webp"
   ],
   "stylelint.validate": ["css", "scss"],

diff --git a/messages/en.json b/messages/en.json
@@ -28,6 +28,7 @@
   "home": {
     "title": "Coding in The Future",
     "desc": "Web Developer and Web Designer creating amazing applications by combining code, design and users.",
+    "vitnode": "🚀 <bold>Vtinode</bold> CMS is now available in alpha version! 🚀",
     "buttons": {
       "products": "Check Products",
       "contact": "Contact Me"

diff --git a/messages/pl.json b/messages/pl.json
@@ -28,6 +28,7 @@
   "home": {
     "title": "Coding in The Future",
     "desc": "Web Developer i Web Designer tworzący niesamowite aplikacje łącząc kod, projekt oraz użytkowników.",
+    "vitnode": "🚀 <bold>Vitnode</bold> CMS jest już dostępny w wersji alpha! 🚀",
     "buttons": {
       "products": "Sprawdź produkty",
       "contact": "Skontaktuj się ze mną"

diff --git a/views/home/sections/main/MainHomeSection.module.scss b/views/home/sections/main/MainHomeSection.module.scss
@@ -4,7 +4,7 @@
   --layout-max-width: 52rem;
 
   @include mobile {
-    padding: calc(var(--header-height) + 4rem) 1rem 8rem;
+    padding: calc(var(--header-height) + 2rem) 1rem 2rem;
   }
 
   position: relative;
@@ -14,7 +14,7 @@
   align-items: center;
   justify-content: center;
 
-  padding: calc(var(--header-height) + 8rem) 1rem 10rem;
+  padding: calc(var(--header-height) + 8rem) 1rem 8rem;
 
   text-align: center;
 }
@@ -164,3 +164,30 @@
     }
   }
 }
+
+.vitnode {
+  margin-bottom: 2rem;
+  padding: 0.75rem 1rem;
+
+  color: rgb(var(--button-primary-color));
+
+  background-color: rgb(var(--primary) / 20%);
+  border: 1px solid rgb(var(--button-primary-border));
+  border-radius: var(--radius);
+
+  transition:
+    background-color var(--animation),
+    border-color var(--animation),
+    color var(--animation);
+
+  &:hover {
+    color: rgb(var(--button-primary-hover-color));
+    text-decoration: none;
+    background-color: rgb(var(--button-primary-hover) / 40%);
+    border-color: rgb(var(--button-primary-hover-border));
+  }
+
+  &_bold {
+    font-weight: bold;
+  }
+}
diff --git a/views/home/sections/main/MainHomeSection.tsx b/views/home/sections/main/MainHomeSection.tsx
@@ -3,15 +3,26 @@ import cx from 'clsx';
 
 import { Button } from '@/components/button/Button';
 import style from './MainHomeSection.module.scss';
+import { Link } from '@/i18n';
 
 export const MainHomeSection = () => {
   const t = useTranslations('home');
 
   return (
     <section className={cx('layout_wrapper', style.wrapper)}>
+      <Link
+        href="https://vitnode.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={style.vitnode}
+      >
+        {t.rich('vitnode', {
+          bold: text => <span className={style.vitnode_bold}>{text}</span>
+        })}
+      </Link>
+
       <h1 className={style.title}>{t('title')}</h1>
       <p className={style.desc}>{t('desc')}</p>
-
       <div className={style.buttons}>
         <Button id="products" href="/products">
           {t('buttons.products')}

diff --git a/views/products/item/ItemProducts.module.scss b/views/products/item/ItemProducts.module.scss
@@ -69,10 +69,10 @@
   > p {
     overflow: hidden;
     display: -webkit-box;
+    -webkit-box-orient: vertical;
 
     color: rgb(var(--text-secondary-color));
 
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
 }