feat: add github stars promotion block to landing (#207)

* DATAUI-2207: add github stars promotion block to landing

public/locales/en/home.json

@@ -31,5 +31,7 @@
     "roadmap_items_item10": "<b>UIKit:</b> extended mobile support",
     "roadmap_items_item11": "<b>Page constructor:</b> footer block",
     "templates_title": "Start creating with Gravity&nbsp;UI",
-    "companies_title": "Trusted by"
+    "companies_title": "Trusted by",
+    "github_stars-text": "Do&nbsp;you 💖 Gravity UI? Give&nbsp;us",
+    "github_stars-button": "Star"
 }

public/locales/ru/home.json

@@ -31,5 +31,7 @@
     "roadmap_items_item10": "<b>UIKit:</b> Расширенная поддержка мобильных устройств",
     "roadmap_items_item11": "<b>Page constructor:</b> блок футера",
     "templates_title": "Начните создавать проекты с Gravity&nbsp;UI",
-    "companies_title": "Нам доверяют"
+    "companies_title": "Нам доверяют",
+    "github_stars-text": "Вам нравится 💖 Gravity UI? Поставьте нам",
+    "github_stars-button": "Звезду"
 }

src/blocks/GithubStarsBlock/GithubStarsBlock.scss

@@ -0,0 +1,73 @@
+@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}github-stars-promotion';
+
+.pc-block-base.pc-block-base.pc-block-base.pc-constructor-block_type_github-stars-promotion {
+    position: unset;
+    margin: 0;
+    padding: 0;
+}
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--g-spacing-2);
+    padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-4);
+    border-radius: var(--g-border-radius-m);
+    text-decoration: none;
+    background: #cda2e7;
+
+    @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) {
+        transform: translateX(calc(100% + 2 * var(--g-spacing-2)));
+        animation: leftBlockAnimation 250ms ease-out forwards;
+        animation-delay: 500ms;
+    }
+
+    &__wrapper {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        padding-top: var(--g-spacing-2);
+
+        @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) {
+            position: absolute;
+            overflow: hidden;
+            left: 0;
+            right: 0;
+            z-index: 9;
+
+            padding-left: var(--g-spacing-2);
+            padding-right: var(--g-spacing-2);
+
+            &[data-hide='true'] {
+                display: none;
+            }
+
+            &[data-device='mobile'] {
+                display: none;
+            }
+        }
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+            justify-content: center;
+
+            &[data-device='desktop'] {
+                display: none;
+            }
+        }
+    }
+
+    @keyframes leftBlockAnimation {
+        from {
+            transform: translateX(100%);
+        }
+
+        to {
+            transform: translateX(0%);
+        }
+    }
+}

src/blocks/GithubStarsBlock/GithubStarsBlock.tsx

@@ -0,0 +1,58 @@
+import {Star} from '@gravity-ui/icons';
+import {Animatable, HTML} from '@gravity-ui/page-constructor';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+import {useTranslation} from 'next-i18next';
+import {useRouter} from 'next/router';
+import React, {useEffect, useState} from 'react';
+import {GITHUB_UI_KIT_URL} from 'src/constants';
+
+import {block} from '../../utils';
+import {CustomBlock} from '../constants';
+
+import './GithubStarsBlock.scss';
+
+const b = block('github-stars-promotion');
+const LOCAL_STORAGE_KEY = 'gravity-landing-hide-stars-promotion';
+
+type GithubStarsBlockProps = Animatable & {
+    device: 'desktop' | 'mobile';
+};
+
+export type GithubStarsModel = GithubStarsBlockProps & {
+    type: CustomBlock.GithubStars;
+};
+
+export const GithubStarsBlock: React.FC<GithubStarsBlockProps> = ({device}) => {
+    const {t} = useTranslation();
+    const {pathname} = useRouter();
+    const [hide, setHide] = useState<boolean>(true);
+
+    useEffect(() => {
+        setHide(Boolean(localStorage.getItem(LOCAL_STORAGE_KEY)));
+    }, []);
+
+    const hideBlock = () => {
+        localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
+    };
+
+    if (pathname !== '/') {
+        return null;
+    }
+
+    return (
+        <div className={b('wrapper')} data-hide={hide} data-device={device}>
+            <a className={b()} href={GITHUB_UI_KIT_URL} target="_blank" onClick={hideBlock}>
+                <Text color="dark-primary" variant="body-2">
+                    <HTML>{t('home:github_stars-text')}</HTML>
+                </Text>
+
+                <Button view="normal-contrast" size="m" tabIndex={-1}>
+                    <Icon data={Star} size={16} />
+                    <Text variant="body-1">{t('home:github_stars-button')}</Text>
+                </Button>
+            </a>
+        </div>
+    );
+};
+
+export default GithubStarsBlock;

src/blocks/constants.ts

@@ -4,4 +4,5 @@ export enum CustomBlock {
     Examples = 'examples',
     Roadmap = 'roadmap',
     Templates = 'templates',
+    GithubStars = 'github-stars-promotion',
 }

src/blocks/types.ts

@@ -1,6 +1,7 @@
 import {CustomExtendedFeaturesModel} from './CustomExtendedFeatures/CustomExtendedFeatures';
 import {CustomHeaderModel} from './CustomHeader/CustomHeader';
 import {ExamplesModel} from './Examples/Examples';
+import {GithubStarsModel} from './GithubStarsBlock/GithubStarsBlock';
 import {RoadmapModel} from './RoadmapBlock/RoadmapBlock';
 import {TemplatesModel} from './TemplatesBlock/TemplatesBlock';
 
@@ -9,4 +10,5 @@ export type CustomBlockModel =
     | CustomExtendedFeaturesModel
     | ExamplesModel
     | RoadmapModel
-    | TemplatesModel;
+    | TemplatesModel
+    | GithubStarsModel;

src/components/Landing/Landing.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/CustomExtendedFeatures';
 import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader';
 import {Examples} from '../../blocks/Examples/Examples';
+import {GithubStarsBlock} from '../../blocks/GithubStarsBlock/GithubStarsBlock';
 import {RoadmapBlock} from '../../blocks/RoadmapBlock/RoadmapBlock';
 import TemplatesBlock from '../../blocks/TemplatesBlock/TemplatesBlock';
 import {CustomBlock} from '../../blocks/constants';
@@ -20,17 +21,21 @@ export const Landing: React.FC = () => {
     useSectionScroll();
 
     return (
-        <PageConstructor
-            content={(pathname === '/rtl' ? getRtlLanding(t) : getLanding(t)) as PageContent}
-            custom={{
-                blocks: {
-                    [CustomBlock.CustomHeader]: CustomHeader,
-                    [CustomBlock.CustomExtendedFeatures]: CustomExtendedFeatures,
-                    [CustomBlock.Examples]: Examples,
-                    [CustomBlock.Roadmap]: RoadmapBlock,
-                    [CustomBlock.Templates]: TemplatesBlock,
-                },
-            }}
-        />
+        <>
+            <GithubStarsBlock device="desktop" />
+            <PageConstructor
+                content={(pathname === '/rtl' ? getRtlLanding(t) : getLanding(t)) as PageContent}
+                custom={{
+                    blocks: {
+                        [CustomBlock.GithubStars]: GithubStarsBlock,
+                        [CustomBlock.CustomHeader]: CustomHeader,
+                        [CustomBlock.CustomExtendedFeatures]: CustomExtendedFeatures,
+                        [CustomBlock.Examples]: Examples,
+                        [CustomBlock.Roadmap]: RoadmapBlock,
+                        [CustomBlock.Templates]: TemplatesBlock,
+                    },
+                }}
+            />
+        </>
     );
 };

src/components/Layout/Layout.scss

@@ -24,6 +24,7 @@ $block: '.#{variables.$ns}layout';
     }
 
     &__content {
+        position: relative;
         flex: 1;
     }
 }

src/constants.ts

@@ -15,3 +15,5 @@ export const TARGET_PROFILE = 'gravity-ui';
 export const SCROLL_TO_TEMPLATES_EVENT = 'templates';
 
 export const LOCALE_LOCAL_STORAGE_KEY = 'gravity-landing-locale-v3';
+
+export const GITHUB_UI_KIT_URL = 'https://github.com/gravity-ui/uikit';

src/content/landing.ts

@@ -35,6 +35,10 @@ export const getLanding = (t: TFunction): CustomPageContent => ({
         },
     },
     blocks: [
+        {
+            type: CustomBlock.GithubStars,
+            device: 'mobile',
+        },
         {
             type: CustomBlock.CustomHeader,
             title: t('home:header_title'),