From b33095cf9e904533fb3d13373e6495a6169bc622 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 31 Oct 2024 16:24:00 -0300 Subject: [PATCH 1/5] Add release banner to the layout - only homepage for now --- src/components/Layout/ReleaseBanner/index.tsx | 38 +++++++++ .../Layout/ReleaseBanner/styles.module.less | 77 +++++++++++++++++++ src/components/Layout/index.tsx | 14 +++- src/layouts/CaseStudy/PostCard/index.tsx | 2 +- src/pages/index.tsx | 2 +- src/svgs/arrow-right.svg | 2 +- 6 files changed, 128 insertions(+), 7 deletions(-) create mode 100644 src/components/Layout/ReleaseBanner/index.tsx create mode 100644 src/components/Layout/ReleaseBanner/styles.module.less diff --git a/src/components/Layout/ReleaseBanner/index.tsx b/src/components/Layout/ReleaseBanner/index.tsx new file mode 100644 index 00000000..75f9e571 --- /dev/null +++ b/src/components/Layout/ReleaseBanner/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import clsx from 'clsx'; +import ArrowRight from '../../../svgs/arrow-right.svg'; +import { + container, + darkBackgroundColor, + lightBackgroundColor, +} from './styles.module.less'; + +interface ReleaseBanner { + containerBackgroundColor: string; + theme: 'dark' | 'light'; +} + +const ReleaseBanner = ({ theme = 'dark' }) => { + return ( +
+
+ +
+
+ ); +}; + +export default ReleaseBanner; diff --git a/src/components/Layout/ReleaseBanner/styles.module.less b/src/components/Layout/ReleaseBanner/styles.module.less new file mode 100644 index 00000000..4bda3ad4 --- /dev/null +++ b/src/components/Layout/ReleaseBanner/styles.module.less @@ -0,0 +1,77 @@ +@import '../../../globalStyles/sections.module.less'; + +.container { + .sectionTopBottomPadding; + padding-top: 50px; + padding-bottom: 0; + + div { + .globalMaxWidth; + + button { + display: flex; + align-items: center; + justify-content: space-between; + gap: 32px; + background-color: #FFA80040; + border: 1px solid #FFA800CC; + border-radius: 12px; + padding: 28px 37px; + width: 100%; + + span { + background-color: #FFA800; + color: #04192B; + border-radius: 36px; + padding: 4px 16px; + line-height: 30px; + font-weight: 700; + font-size: 1rem; + text-align: center; + width: fit-content; + } + + p { + color: #F9FAFC; + font-size: 1.125rem; + font-weight: 600; + margin: 0; + flex: 1; + text-align: left; + } + + @media (max-width: 768px) { + display: grid; + grid-template-columns: 5fr 1fr; + grid-template-rows: auto auto; + gap: 24px; + padding: 24px; + + div { + grid-column: 1; + grid-row: 1; + } + + p { + grid-column: 1; + grid-row: 2; + grid-column: span 2; + } + + svg { + grid-column: 2; + grid-row: 1; + margin-left: auto; + } + } + } + } +} + +.darkBackgroundColor { + background-color: var(--background-color-primary); +} + +.lightBackgroundColor { + background-color: #F9FAFC; +} \ No newline at end of file diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 92d67c06..321d2eaa 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -3,16 +3,21 @@ import * as React from 'react'; import Footer from '../Footer'; import Header from '../Header'; import { globalWrapper, globalMainFixedHeader } from './styles.module.less'; +import ReleaseBanner from './ReleaseBanner'; const TakeATour = React.lazy(() => import('../TakeATour')); +interface LayoutProps { + fixedHeader?: boolean; + showReleaseBanner?: boolean; + children: React.ReactNode | React.ReactNode[]; +} + const Layout = ({ fixedHeader = true, + showReleaseBanner = false, children, -}: { - fixedHeader?: boolean; - children: React.ReactNode | React.ReactNode[]; -}) => { +}: LayoutProps) => { return (
@@ -20,6 +25,7 @@ const Layout = ({
+ {showReleaseBanner ? : null} {children}