diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx index 2139da1d..fb35edbb 100644 --- a/src/pages/BountiesLandingPage/index.tsx +++ b/src/pages/BountiesLandingPage/index.tsx @@ -3,7 +3,8 @@ import React from 'react'; import styled from 'styled-components'; import { useIsMobile } from '../../hooks'; import { colors } from '../../config/colors'; -import { HeaderWrap, Leftheader } from '../tickets/style.ts'; +import { BountiesHeader, HeaderWrap, Leftheader } from '../tickets/style.ts'; +import { BountyHeaderContent } from '../tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx'; const BountiesLandingPage: React.FC = () => { const isMobile = useIsMobile(); @@ -22,13 +23,92 @@ const BountiesLandingPage: React.FC = () => { flex-direction: column; `; + const ContentWrapper = styled.div` + max-width: 1200px; + min-height: 500px; + margin: 30px auto; + width: 100%; + padding: 40px 30px; + background: white; + `; + + const ContentGrid = styled.div` + display: grid; + grid-template-columns: 2fr 1fr; + gap: 60px; + height: 100%; + position: relative; + + &:after { + content: ''; + position: absolute; + left: 66.66%; + top: 0; + bottom: 0; + width: 1px; + background-color: ${color.grayish.G900}; + transform: translateX(-50%); + } + + @media (max-width: 768px) { + grid-template-columns: 1fr; + gap: 40px; + + &:after { + display: none; + } + } + `; + + const Column = styled.div` + display: flex; + flex-direction: column; + min-height: 100%; + padding: 0 20px; + + h1 { + font-size: 24px; + font-family: Barlow; + color: ${color.text1}; + margin-bottom: 32px; + font-weight: 500; + } + + p { + font-family: Barlow; + margin-bottom: 16px; + line-height: 1.6; + word-wrap: break-word; + max-width: 550px; + color: ${color.text2}; + font-size: 15px; + } + `; + return ( - -
Bounties
-
+ + + Bounties + +
+ + + +

Welcome to Bounties

+

+ Building the modern marketplace for work. Complete a bounty and get paid in Bitcoin + instantly! ⚡ +

+
+ +

Freedom to Earn!

+

Second column with content

+
+
+
); }; diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts index 0bb8f838..c523b149 100644 --- a/src/pages/tickets/style.ts +++ b/src/pages/tickets/style.ts @@ -573,3 +573,12 @@ export const WorkspaceFieldWrap = styled.div` margin-top: 10px; width: 98%; `; + +export const BountiesHeader = styled.div` + height: 80px; + width: 72%; + display: flex; + align-items: center; + justify-content: space-between; + background: #fff; +`; diff --git a/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx b/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx index ca28d2bd..d1ca2f35 100644 --- a/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx +++ b/src/pages/tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { colors } from 'config/colors'; import checkboxImage from './Icons/checkboxImage.svg'; interface styledProps { @@ -497,3 +498,15 @@ export const SkillTextContainer = styled.div` } } `; + +export const BountyHeaderContent = styled.div` + max-width: 403px; + text-align: right; + color: ${colors.dark.pureBlack}; + font-family: Barlow; + font-size: 30px; + font-style: normal; + font-weight: 700; + letter-spacing: 0.8px; + line-height: 20px; +`;