Create TopBanner

Initial text for bridge
alephium · Nov 10, 2023 · 85e266b · 85e266b
1 parent de9f1f5
commit 85e266b
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 35 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -39,18 +39,18 @@ const Button = ({ onClick, className, children, url, newTab, trackingName, disab
   )
 
 export default styled(Button)`
-  background-color: var(--color-blue-100);
-  color: var(--color-white);
-  border-radius: var(--radius-small);
-  padding: var(--spacing-2) var(--spacing-3);
+  background-color: white;
+  color: black;
+  border-radius: 4px;
+  padding: 3px 5px;
   border: 0 solid;
   text-decoration: none;
   display: inline-flex;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
 
   /* The following rules are the same as in the ArrowedLink, maybe extract? */
   align-items: center;
   font-weight: var(--fontWeight-medium);
-  font-size: var(--fontSize-18);
   transition: all 0.1s ease-out;
 
   ${({ disabled }) =>
@@ -59,6 +59,7 @@ export default styled(Button)`
           &:hover {
             cursor: pointer;
             filter: brightness(120%);
+            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
           }
         `
       : css`
@@ -69,7 +70,7 @@ export default styled(Button)`
   .arrow {
     width: 11px;
     margin-left: var(--spacing-1);
-    fill: var(--color-white);
+    fill: inherit;
 
     ${(props) =>
       props.newTab &&

diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
@@ -15,12 +15,13 @@ import { RiMenu3Fill } from 'react-icons/ri'
 import useOnClickOutside from '../hooks/useOnClickOutside'
 
 interface NavigationMenuProps {
+  topOffset?: number
   className?: string
 }
 
 const detachScrollValue = 150
 
-const NavigationMenu = ({ className }: NavigationMenuProps) => {
+const NavigationMenu = ({ topOffset, className }: NavigationMenuProps) => {
   const { scrollY } = useScroll()
   const [isDetached, setIsDetached] = useState(false)
 
@@ -32,12 +33,14 @@ const NavigationMenu = ({ className }: NavigationMenuProps) => {
     }
   })
 
+  const initialTop = topOffset || 0
+
   return (
     <NavigationWrapper>
       <NavigationMenuStyled
         className={className}
         animate={{
-          y: isDetached ? 30 : 0,
+          y: isDetached ? 30 : initialTop,
           backgroundColor: isDetached ? 'rgba(30, 30, 30, 0.6)' : 'rgba(30, 30, 30, 0)'
         }}
         transition={{ type: 'spring', stiffness: 200, damping: 50 }}

diff --git a/src/components/PageSectionEcosystem.tsx b/src/components/PageSectionEcosystem.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { graphql } from 'gatsby'
 
 import { deviceBreakPoints } from '../styles/global-style'
 

diff --git a/src/components/TopBanner.tsx b/src/components/TopBanner.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+import Button from './Button'
+
+export interface TopBannerContentType {
+  text: string
+  linkText: string
+  url: string
+  color: string
+}
+
+export interface TopBannerProps {
+  content: TopBannerContentType
+  className?: string
+}
+
+const TopBanner = ({ content: { text, linkText, url, color }, className }: TopBannerProps) =>
+  text ? (
+    <TopBannerContainer className={className} style={{ backgroundColor: color }}>
+      <BannerText>{text}</BannerText>
+      <Button url={url} newTab trackingName="top-banner:main-link">
+        {linkText}
+      </Button>
+    </TopBannerContainer>
+  ) : null
+
+export default TopBanner
+
+const TopBannerContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  gap: 10px;
+  z-index: 10001;
+  font-size: 14px;
+`
+
+const BannerText = styled.div``
diff --git a/src/content/homepage.md b/src/content/homepage.md
@@ -1,4 +1,9 @@
 ---
+topBanner:
+  text: 'The bridge is OUT!'
+  linkText: 'Try it'
+  url: 'https://bridge.alephium.org'
+  color: '#1c91eb'
 headerSection:
   dark:
     title: 'Scalable for devs.

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components'
 import { graphql, PageProps } from 'gatsby'
 
 import GlobalStyle from '../styles/global-style'
@@ -18,12 +18,14 @@ import PageSectionShop, { PageSectionShopContentType } from '../components/PageS
 import SectionDivider from '../components/SectionDivider'
 import PageSectionWallets, { PageSectionWalletsContentType } from '../components/PageSectionWallets'
 import NavigationMenu from '../components/NavigationMenu'
+import TopBanner, { TopBannerContentType } from '../components/TopBanner'
 
 interface IndexPageProps extends PageProps {
   data: {
     homepage: {
       nodes: {
         frontmatter: {
+          topBanner: TopBannerContentType
           headerSection: PageSectionHeroContentType
           introSection: PageSectionIntroContentType
           technologySection: PageSectionTechnologyContentType
@@ -51,43 +53,52 @@ const IndexPage = (props: IndexPageProps) => {
       <Seo />
       <ThemeProvider theme={darkTheme}>
         <GlobalStyle />
+        <SiteWrapper>
+          <TopBanner content={pageContent.topBanner} />
+          <NavigationMenu topOffset={pageContent.topBanner.text ? 50 : 0} />
+          <ContentContainer>
+            <PageSectionHero content={pageContent.headerSection} />
+            <SectionDivider />
+            <PageSectionIntro content={pageContent.introSection} />
+            <SectionDivider />
+            <PageSectionTechnology content={pageContent.technologySection} minimal />
+            <PageSectionNumbers content={pageContent.numbersSection} />
+            <SectionDivider />
+            <PageSectionWallets content={pageContent.walletsSection} />
+            <SectionDivider />
+            <PageSectionEcosystem content={pageContent.ecosystemSection} />
+            <SectionDivider />
+            <PageSectionMilestones content={pageContent.milestonesSection} />
+            <SectionDivider />
+            <PageSectionTodoList content={pageContent.todoListSection} />
+            <SectionDivider />
+            <PageSectionShop content={pageContent.shopSection} />
+            <PageSectionFollowUs content={pageContent.followUsSection} />
+            <Footer content={pageContent.footer} openPrivacyPolicyModal={openPrivacyPolicyModal} />
+          </ContentContainer>
+        </SiteWrapper>
       </ThemeProvider>
-      <main>
-        <ThemeProvider theme={darkTheme}>
-          <NavigationMenu />
-          <PageSectionHero content={pageContent.headerSection} />
-          <SectionDivider />
-          <PageSectionIntro content={pageContent.introSection} />
-          <SectionDivider />
-          <PageSectionTechnology content={pageContent.technologySection} minimal />
-          <PageSectionNumbers content={pageContent.numbersSection} />
-          <SectionDivider />
-          <PageSectionWallets content={pageContent.walletsSection} />
-          <SectionDivider />
-          <PageSectionEcosystem content={pageContent.ecosystemSection} />
-        </ThemeProvider>
-        <ThemeProvider theme={darkTheme}>
-          <SectionDivider />
-          <PageSectionMilestones content={pageContent.milestonesSection} />
-          <SectionDivider />
-          <PageSectionTodoList content={pageContent.todoListSection} />
-          <SectionDivider />
-          <PageSectionShop content={pageContent.shopSection} />
-          <PageSectionFollowUs content={pageContent.followUsSection} />
-          <Footer content={pageContent.footer} openPrivacyPolicyModal={openPrivacyPolicyModal} />
-        </ThemeProvider>
-      </main>
     </>
   )
 }
 
 export default IndexPage
 
+const SiteWrapper = styled.main``
+
+const ContentContainer = styled.div``
+
 export const pageQuery = graphql`
   query {
     homepage: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/homepage.md/" } }) {
       nodes {
         frontmatter {
+          topBanner {
+            text
+            linkText
+            url
+            color
+          }
           headerSection {
             dark {
               title