Merge pull request stakwork#814 from saithsab877/Bounties-landing-page

aliraza556 · Dec 26, 2024 · 5c2bd51 · 5c2bd51
2 parents fa35b8f + d29cfd9
commit 5c2bd51
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 0 deletions.
diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx
@@ -0,0 +1,116 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+import { useIsMobile } from '../../hooks';
+import { colors } from '../../config/colors';
+import { BountiesHeader, HeaderWrap, Leftheader } from '../tickets/style.ts';
+import { BountyHeaderContent } from '../tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx';
+
+const BountiesLandingPage: React.FC = () => {
+  const isMobile = useIsMobile();
+
+  const color = colors['light'];
+
+  const Body = styled.div<{ isMobile: boolean }>`
+    flex: 1;
+    height: ${(p: { isMobile: boolean }) =>
+      p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)'};
+    background: ${(p: { isMobile: boolean }) => (p.isMobile ? undefined : color.grayish.G950)};
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    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 (
+    <Body isMobile={isMobile}>
+      <HeaderWrap>
+        <BountiesHeader>
+          <Leftheader>
+            <BountyHeaderContent>Bounties</BountyHeaderContent>
+          </Leftheader>
+        </BountiesHeader>
+      </HeaderWrap>
+      <ContentWrapper>
+        <ContentGrid>
+          <Column>
+            <h1>Welcome to Bounties</h1>
+            <p>
+              Building the modern marketplace for work. Complete a bounty and get paid in Bitcoin
+              instantly! ⚡
+            </p>
+          </Column>
+          <Column>
+            <h1>Freedom to Earn!</h1>
+            <p>Second column with content</p>
+          </Column>
+        </ContentGrid>
+      </ContentWrapper>
+    </Body>
+  );
+};
+
+export default BountiesLandingPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -22,13 +22,17 @@ import { TicketsPage } from './tickets';
 import { WorkspaceTicketsPage } from './tickets/workspace';
 import { LeaderboardPage } from './leaderboard';
 import { SuperAdmin } from './superadmin/index';
+import BountiesLandingPage from './BountiesLandingPage';
 
 const modeDispatchPages: Record<AppMode, () => React.ReactElement> = {
   community: () => (
     <>
       <TokenRefresh />
       <MainLayout header={<PeopleHeader />}>
         <Switch>
+          <Route path="/h">
+            <BountiesLandingPage />
+          </Route>
           <Route path="/dailyBounty">
             <DailyBountyPage />
           </Route>

diff --git 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
@@ -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<styledProps>`
     }
   }
 `;
+
+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;
+`;