diff --git a/src/components/Layout/ReleaseBanner/index.tsx b/src/components/Layout/ReleaseBanner/index.tsx new file mode 100644 index 00000000..7c7585c7 --- /dev/null +++ b/src/components/Layout/ReleaseBanner/index.tsx @@ -0,0 +1,37 @@ +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 { + theme: 'dark' | 'light'; +} + +const ReleaseBanner = ({ theme = 'dark' }) => { + return ( +
+
+ + A Step Ahead +

+ Explore Estuary's powerful compliance solutions + - Streamline your security and scale with + confidence! +

+ +
+
+
+ ); +}; + +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..6adee704 --- /dev/null +++ b/src/components/Layout/ReleaseBanner/styles.module.less @@ -0,0 +1,83 @@ +@import '../../../globalStyles/sections.module.less'; + +.container { + .sectionTopBottomPadding; + padding-top: 50px; + padding-bottom: 0; + + div { + .globalMaxWidth; + + a { + 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%; + cursor: pointer; + transition: var(--default-transition); + + &:hover { + background-color: #FFA80050; + } + + 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}