feat: homepage banner (#304)

* feat: homepage banner * fix: remove old news
gravity-ui · Nov 15, 2024 · 9778a1e · 9778a1e
1 parent 30c83a9
commit 9778a1e
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 132 deletions.
diff --git a/public/locales/en/home.json b/public/locales/en/home.json
@@ -2,8 +2,7 @@
     "header_title": "Build modern interfaces with the Gravity design system and libraries",
     "header_actions_howToStart": "How to Start",
     "news_title": "Recent updates",
-    "banner_title": "Introducing MarkdownEditor",
-    "banner_content": "Markdown-editor combines two modes.<br />It allows you to create and edit content in a convenient visual form while retaining full control over the underlying markup.<br /><br /><a href=\"/libraries/markdown-editor/playground\">Test it on the playground ✨</a>.",
+    "banner_content": "We are planning to hold our first webinar (firstly in Russian). We would greatly appreciate your assistance with questions.",
     "news_items_item1": "We are planning to hold our first webinar (firstly in Russian). We would greatly appreciate your <a href=\"https://clck.ru/3EKYsq\">assistance with questions</a>.",
     "news_items_item2": "Meet our new major library, Graph! A really <a href=\"/libraries/graph/playground\">high-performance renderer</a> with dynamic, scale-aware detail.",
     "news_items_item3": "<a href=\"/libraries/markdown-editor/playground\">Introducing MarkdownEditor.</a> It allows you to create and edit content in a convenient visual form while retaining full control over the underlying markup.",

diff --git a/public/locales/ru/home.json b/public/locales/ru/home.json
@@ -2,8 +2,7 @@
     "header_title": "Создавайте современные интерфейсы с дизайн‑системой Gravity",
     "header_actions_howToStart": "С чего начать",
     "news_title": "Новости",
-    "banner_title": "Представляем MarkdownEditor",
-    "banner_content": "Markdown-редактор объединяет два режима. Это даёт возможность создавать и редактировать контент в удобной визуальной форме, не теряя контроля над исходной разметкой.<br /><br /><a href=\"/libraries/markdown-editor/playground\">Попробуйте в playground ✨</a>.",
+    "banner_content": "Мы планируем провести наш первый вебинар (пока на русском). Пожалуйста, помогите нам с вопросами.",
     "news_items_item1": "Мы планируем провести наш первый вебинар (пока на русском). Пожалуйста, помогите нам <a href=\"https://clck.ru/3EKYsq\">с вопросами</a>.",
     "news_items_item2": "Встречайте новую крутую библиотеку - Graph! По настоящему <a href=\"/libraries/graph/playground\">высокопроизводительный рендер графов</a> с динамической детализацией.",
     "news_items_item3": "<a href=\"/libraries/markdown-editor/playground\">Выпустили MarkdownEditor.</a> Он позволяет создавать и редактировать тексты: интерактивно или при помощи языка разметки.",

diff --git a/src/blocks/CustomHeader/CustomHeader.scss b/src/blocks/CustomHeader/CustomHeader.scss
@@ -1,13 +1,16 @@
 @use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
 @use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '~@gravity-ui/page-constructor/styles/mixins.scss' as pcMixins;
+@use '~@gravity-ui/uikit/styles/mixins.scss' as uikitMixins;
+@use '../../mixins.scss' as baseMixins;
 @use '../../variables.scss';
 
 $block: '.#{variables.$ns}custom-header';
 
 #{$block} {
     margin-top: 76px;
 
-    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+    @include baseMixins.window-breakpoint('sm') {
         margin-top: 32px;
     }
 
@@ -35,52 +38,22 @@ $block: '.#{variables.$ns}custom-header';
         }
     }
 
-    &__news {
-        padding: 32px 16px;
-        border-radius: 24px;
-        background-color: rgba(37, 27, 37, 0.5);
-        backdrop-filter: blur(60px);
+    &__extra {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 20px;
 
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
-            margin-top: 32px;
+        @include baseMixins.window-breakpoint('lg') {
+            margin-top: 30px;
         }
     }
 
-    &__banner {
-        overflow: hidden;
+    &__news {
+        padding: 32px 16px;
         border-radius: 24px;
         background-color: rgba(37, 27, 37, 0.5);
         backdrop-filter: blur(60px);
-
-        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
-            margin-top: 32px;
-        }
-    }
-    &__banner-image {
-        width: 100%;
-    }
-    &__banner-text {
-        padding: 12px 32px 32px;
-    }
-    &__banner-title {
-        @include pcStyles.heading4();
-        margin-bottom: 16px;
-    }
-    &__banner-content {
-        @include pcStyles.text-size(body-2);
-
-        a {
-            color: #ffbe5c;
-            text-decoration: none;
-
-            &:visited {
-                color: #ffbe5c;
-            }
-
-            &:hover {
-                color: #f3cb8f;
-            }
-        }
     }
 
     &__news-title {
@@ -125,4 +98,27 @@ $block: '.#{variables.$ns}custom-header';
             }
         }
     }
+
+    &__banner {
+        @include pcMixins.reset-link-style();
+        @include uikitMixins.text-body-2();
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 24px 32px;
+        color: var(--g-color-text-brand-contrast);
+        background-color: var(--g-color-base-brand);
+        border-radius: 24px;
+        transition: background-color 0.15s linear;
+
+        &-icon {
+            flex-shrink: 0;
+        }
+
+        &:hover {
+            background-color: var(--g-color-base-brand-hover);
+        }
+    }
 }
diff --git a/src/blocks/CustomHeader/CustomHeader.tsx b/src/blocks/CustomHeader/CustomHeader.tsx
@@ -1,10 +1,12 @@
+import {ChevronRight} from '@gravity-ui/icons';
 import {Animatable, AnimateBlock, Col, Grid, HTML, Row} from '@gravity-ui/page-constructor';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 import {Button, ButtonProps, Icon} from 'landing-uikit';
 import {useTranslation} from 'next-i18next';
 import React from 'react';
 import ReactTimeAgo from 'react-time-ago';
 
+import {Link} from '../../components/Link';
 import {block} from '../../utils';
 import {CustomBlock} from '../constants';
 
@@ -37,35 +39,17 @@ export type CustomHeaderModel = CustomHeaderProps & {
     type: CustomBlock.CustomHeader;
 };
 
-interface BannerImage {
-    href: string;
-    src: string;
-    alt: string;
-    title: string;
-}
 interface BannerBlockProps {
-    image: BannerImage;
-    title?: string;
-    content?: string;
+    content: string;
+    href?: string;
 }
 
-const Banner: React.FC<BannerBlockProps> = ({image, title, content}) => {
-    const img = (
-        <img className={b('banner-image')} src={image.src} alt={image.alt} title={image.title} />
-    );
-
+const Banner: React.FC<BannerBlockProps> = ({content, href}) => {
     return (
-        <div className={b('banner')}>
-            {image.href ? <a href={image.href}>{img}</a> : img}
-            <div className={b('banner-text')}>
-                {title && <div className={b('banner-title')}>{title}</div>}
-                {content && (
-                    <div className={b('banner-content')}>
-                        <HTML>{content}</HTML>
-                    </div>
-                )}
-            </div>
-        </div>
+        <Link className={b('banner')} href={href ?? ''}>
+            <span className={b('banner-content')}>{content}</span>
+            {href && <ChevronRight className={b('banner-icon')} />}
+        </Link>
     );
 };
 
@@ -78,13 +62,15 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
 }) => {
     const {i18n} = useTranslation();
 
-    const showNewsBlock = !banner && news && news.items && news.items.length > 0;
+    const showNewsBlock = news && news.items && news.items.length > 0;
+    const showBannerBlock = banner?.content;
+    const hasExtra = Boolean(showNewsBlock) || Boolean(showBannerBlock);
 
     return (
         <AnimateBlock className={b()} animate={animated}>
             <Grid>
                 <Row>
-                    <Col sizes={{all: 12, lg: banner || showNewsBlock ? 8 : 12}}>
+                    <Col sizes={{all: 12, lg: hasExtra ? 8 : 12}}>
                         <h1 className={b('title')}>
                             <HTML>{title}</HTML>
                         </h1>
@@ -113,34 +99,32 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
                             </div>
                         ) : null}
                     </Col>
-                    {showNewsBlock && (
-                        <Col sizes={{md: 12, lg: 4}}>
-                            <div className={b('news')}>
-                                {news.title ? (
-                                    <div className={b('news-title')}>{news.title}</div>
-                                ) : null}
+                    {hasExtra && (
+                        <Col className={b('extra')} sizes={{md: 12, lg: 4}}>
+                            {showBannerBlock && <Banner {...banner} />}
+                            {showNewsBlock && (
+                                <div className={b('news')}>
+                                    {news.title ? (
+                                        <div className={b('news-title')}>{news.title}</div>
+                                    ) : null}
 
-                                {news.items.map((newsItem, index) =>
-                                    newsItem.content ? (
-                                        <div key={index} className={b('news-item')}>
-                                            <div className={b('news-item-date')}>
-                                                <ReactTimeAgo
-                                                    date={new Date(newsItem.date)}
-                                                    locale={i18n.language}
-                                                />
-                                            </div>
-                                            <div className={b('news-item-content')}>
-                                                <HTML>{newsItem.content}</HTML>
+                                    {news.items.map((newsItem, index) =>
+                                        newsItem.content ? (
+                                            <div key={index} className={b('news-item')}>
+                                                <div className={b('news-item-date')}>
+                                                    <ReactTimeAgo
+                                                        date={new Date(newsItem.date)}
+                                                        locale={i18n.language}
+                                                    />
+                                                </div>
+                                                <div className={b('news-item-content')}>
+                                                    <HTML>{newsItem.content}</HTML>
+                                                </div>
                                             </div>
-                                        </div>
-                                    ) : null,
-                                )}
-                            </div>
-                        </Col>
-                    )}
-                    {banner && (
-                        <Col sizes={{md: 12, lg: 4}}>
-                            <Banner {...banner} />
+                                        ) : null,
+                                    )}
+                                </div>
+                            )}
                         </Col>
                     )}
                 </Row>

diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
@@ -2,6 +2,7 @@ import {PageConstructor, PageContent} from '@gravity-ui/page-constructor';
 import {useTranslation} from 'next-i18next';
 import {useRouter} from 'next/router';
 import React from 'react';
+import {CustomPageContent} from 'src/content/types';
 
 import {ContributorsBlock} from '../../blocks/Contributors/Contributors';
 import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/CustomExtendedFeatures';
@@ -15,6 +16,26 @@ import {getLanding} from '../../content/landing';
 import {getRtlLanding} from '../../content/landing-rtl';
 import {useSectionScroll} from '../../hooks/useSectionScroll';
 
+const filterBlocks = ({blocks, ...rest}: CustomPageContent): CustomPageContent => {
+    const hasCustomHeaderWithBanner = Boolean(
+        blocks.find((block) => block.type === CustomBlock.CustomHeader && block.banner),
+    );
+
+    return {
+        blocks: blocks.filter((block) => {
+            switch (true) {
+                case hasCustomHeaderWithBanner &&
+                    block.type === CustomBlock.GithubStars &&
+                    block.device === 'mobile':
+                    return false;
+                default:
+                    return true;
+            }
+        }),
+        ...rest,
+    };
+};
+
 export const Landing: React.FC = () => {
     const {t} = useTranslation();
     const {pathname} = useRouter();
@@ -25,7 +46,11 @@ export const Landing: React.FC = () => {
         <>
             <GithubStarsBlock device="desktop" />
             <PageConstructor
-                content={(pathname === '/rtl' ? getRtlLanding(t) : getLanding(t)) as PageContent}
+                content={
+                    filterBlocks(
+                        pathname === '/rtl' ? getRtlLanding(t) : getLanding(t),
+                    ) as PageContent
+                }
                 custom={{
                     blocks: {
                         [CustomBlock.GithubStars]: GithubStarsBlock,

diff --git a/src/content/landing-rtl.ts b/src/content/landing-rtl.ts
@@ -1,4 +1,4 @@
-import {Block, BlockType, PageContent} from '@gravity-ui/page-constructor';
+import {BlockType} from '@gravity-ui/page-constructor';
 import {TFunction} from 'next-i18next';
 
 import backgroundAsset from '../assets/background.jpg';
@@ -15,18 +15,12 @@ import remixLogo from '../assets/icons/remix-logo.svg';
 import rocketIcon from '../assets/icons/rocket.svg';
 import viteLogo from '../assets/icons/vite-logo.svg';
 import {CustomBlock} from '../blocks/constants';
-import {CustomBlockModel} from '../blocks/types';
 import {SCROLL_TO_TEMPLATES_EVENT} from '../constants';
 import {libs} from '../libs.mjs';
 import {getAllContributors} from '../utils';
 
 import {getRoadmapTasks} from './roadmap';
-
-interface CustomPageContent {
-    blocks: (Block | CustomBlockModel)[];
-    menu?: PageContent['menu'];
-    background?: PageContent['background'];
-}
+import {CustomPageContent} from './types';
 
 export const getRtlLanding = (t: TFunction): CustomPageContent => ({
     background: {

diff --git a/src/content/landing.ts b/src/content/landing.ts
@@ -1,4 +1,4 @@
-import {Block, BlockType, PageContent} from '@gravity-ui/page-constructor';
+import {BlockType} from '@gravity-ui/page-constructor';
 import {TFunction} from 'next-i18next';
 
 import backgroundAsset from '../assets/background.jpg';
@@ -15,18 +15,12 @@ import remixLogo from '../assets/icons/remix-logo.svg';
 import rocketIcon from '../assets/icons/rocket.svg';
 import viteLogo from '../assets/icons/vite-logo.svg';
 import {CustomBlock} from '../blocks/constants';
-import {CustomBlockModel} from '../blocks/types';
 import {SCROLL_TO_TEMPLATES_EVENT} from '../constants';
 import {libs} from '../libs.mjs';
 import {getAllContributors} from '../utils';
 
 import {getRoadmapTasks} from './roadmap';
-
-interface CustomPageContent {
-    blocks: (Block | CustomBlockModel)[];
-    menu?: PageContent['menu'];
-    background?: PageContent['background'];
-}
+import {CustomPageContent} from './types';
 
 export const getLanding = (t: TFunction): CustomPageContent => ({
     background: {
@@ -67,10 +61,6 @@ export const getLanding = (t: TFunction): CustomPageContent => ({
             news: {
                 title: t('home:news_title'),
                 items: [
-                    {
-                        date: '2024-10-31T16:00:00.000Z',
-                        content: t('home:news_items_item1'),
-                    },
                     {
                         date: '2024-10-17T16:00:00.000Z',
                         content: t('home:news_items_item2'),
@@ -81,16 +71,10 @@ export const getLanding = (t: TFunction): CustomPageContent => ({
                     },
                 ],
             },
-            //banner: {
-            //image: {
-            //src: './static/images/markdown-editor/banner.png',
-            //href: '/libraries/markdown-editor/playground',
-            //alt: 'markdown-editor',
-            //title: 'markdown-editor',
-            //},
-            //title: t('home:banner_title'),
-            //content: t('home:banner_content'),
-            //},
+            banner: {
+                content: t('home:banner_content'),
+                href: 'https://clck.ru/3EKYsq',
+            },
         },
         {
             type: CustomBlock.CustomExtendedFeatures,