Merge pull request #401 from near/feat/new-org-learn-page

New learn and ecosystem pages + QA fixes
near · Oct 13, 2023 · d1554f5 · d1554f5
2 parents 14eb537 + c4752b1
commit d1554f5
Show file tree

Hide file tree

Showing 10 changed files with 1,143 additions and 226 deletions.
diff --git a/src/NearOrg/BosCtaSection.jsx b/src/NearOrg/BosCtaSection.jsx
@@ -0,0 +1,104 @@
+const { backgroundColor } = props;
+
+const Text = styled.p`
+  font: var(--${(p) => p.size ?? "text-base"});
+  font-weight: ${(p) => p.fontWeight} !important;
+  color: var(--${(p) => p.color ?? "sand12"});
+  margin: 0;
+
+  @media (max-width: 900px) {
+    font: var(--${(p) => p.mobileSize ?? p.size ?? "text-base"});
+  }
+`;
+
+const Flex = styled.div`
+  display: flex;
+  gap: ${(p) => p.gap};
+  align-items: ${(p) => p.alignItems};
+  justify-content: ${(p) => p.justifyContent};
+  flex-direction: ${(p) => p.direction ?? "row"};
+  flex-wrap: ${(p) => p.wrap ?? "nowrap"};
+  text-align: center;
+
+  ${(p) =>
+    p.mobileStack &&
+    `
+    @media (max-width: 900px) {
+      flex-direction: column;
+    }
+  `}
+
+  @media (max-width: 900px) {
+    gap: ${(p) => p.mobileGap ?? p.gap};
+    align-items: ${(p) => p.mobileAlignItems ?? p.alignItems};
+  }
+`;
+
+const Section = styled.div`
+  background-color: ${backgroundColor};
+  position: relative;
+  padding: 160px 24px;
+  overflow: hidden;
+
+  @media (max-width: 900px) {
+    padding: var(--section-gap) 24px;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  max-width: 600px;
+  margin: 0 auto;
+  gap: ${(p) => p.gap ?? "var(--section-gap)"};
+  flex-direction: column;
+  align-items: ${(p) => (p.center ? "center" : undefined)};
+  justify-content: ${(p) => (p.center ? "center" : undefined)};
+  text-align: ${(p) => (p.center ? "center" : undefined)};
+`;
+
+return (
+  <Section>
+    <Container>
+      <Flex direction="column" gap="50px" alignItems="center">
+        <Flex direction="column" gap="20px" alignItems="center">
+          <Text size="text-3xl" fontWeight="500">
+            The OS for an open web
+          </Text>
+
+          <Text size="text-l" mobileSize="text-l" style={{ maxWidth: "808px" }}>
+            Effortlessly create and distribute decentralized apps on any
+            blockchain with the Blockchain Operating System.
+          </Text>
+        </Flex>
+
+        <Flex
+          gap="24px"
+          wrap="wrap"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Widget
+            src="${REPL_ACCOUNT}/widget/DIG.Button"
+            props={{
+              href: "https://docs.near.org",
+              target: "_blank",
+              label: "Read Docs",
+              variant: "secondary",
+              size: "large",
+            }}
+          />
+
+          <Widget
+            src="${REPL_ACCOUNT}/widget/DIG.Button"
+            props={{
+              href: "/onboarding",
+              label: "Get Started",
+              variant: "primary",
+              size: "large",
+            }}
+          />
+        </Flex>
+      </Flex>
+    </Container>
+  </Section>
+);
diff --git a/src/NearOrg/Card.jsx b/src/NearOrg/Card.jsx
@@ -5,7 +5,7 @@ const isClickable = as === "a" || as === "button";
 const Wrapper = styled.div`
   padding: 32px;
   border-radius: 8px;
-  border: 1px solid var(--sand12);
+  border: 1px solid var(--sand11);
   display: flex;
   flex-direction: column;
   gap: 32px;
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   box-shadow: 0 0 0 0px var(--violet4);
 
   &[data-dark="true"] {
-    border-color: var(--sand9);
+    border-color: #717069;
   }
 
   &[data-clickable="true"] {

diff --git a/src/NearOrg/Ecosystem/CommunityPage.jsx b/src/NearOrg/Ecosystem/CommunityPage.jsx
@@ -43,14 +43,6 @@ const Text = styled.p`
       outline: none;
     }
   }
-
-  ${(p) =>
-    p.flex &&
-    `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  `}
 `;
 const Flex = styled.div`
   display: flex;
@@ -60,15 +52,15 @@ const Flex = styled.div`
   flex-direction: ${(p) => p.direction ?? "row"};
   flex-wrap: ${(p) => p.wrap ?? "nowrap"};
 
-  ${(p) =>
-    p.mobileStack &&
-    `
-    @media (max-width: 900px) {
-      flex-direction: column;
-      gap: ${(p) =>
-        p.mobileStack === true ? "var(--section-gap)" : p.mobileStack};
-    }
-  `}
+  @media (max-width: 900px) {
+    flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")};
+    gap: ${(p) =>
+      p.mobileStack === true
+        ? "var(--section-gap)"
+        : p.mobileStack
+        ? p.mobileStack
+        : p.gap};
+  }
 `;
 const Section = styled.div`
   display: flex;

diff --git a/src/NearOrg/Ecosystem/GetFundingPage.jsx b/src/NearOrg/Ecosystem/GetFundingPage.jsx
@@ -43,14 +43,6 @@ const Text = styled.p`
       outline: none;
     }
   }
-
-  ${(p) =>
-    p.flex &&
-    `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  `}
 `;
 const Flex = styled.div`
   display: flex;
@@ -60,15 +52,15 @@ const Flex = styled.div`
   flex-direction: ${(p) => p.direction ?? "row"};
   flex-wrap: ${(p) => p.wrap ?? "nowrap"};
 
-  ${(p) =>
-    p.mobileStack &&
-    `
-    @media (max-width: 900px) {
-      flex-direction: column;
-      gap: ${(p) =>
-        p.mobileStack === true ? "var(--section-gap)" : p.mobileStack};
-    }
-  `}
+  @media (max-width: 900px) {
+    flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")};
+    gap: ${(p) =>
+      p.mobileStack === true
+        ? "var(--section-gap)"
+        : p.mobileStack
+        ? p.mobileStack
+        : p.gap};
+  }
 `;
 const Section = styled.div`
   display: flex;

diff --git a/src/NearOrg/Ecosystem/OverviewPage.jsx b/src/NearOrg/Ecosystem/OverviewPage.jsx
@@ -49,14 +49,6 @@ const Text = styled.p`
       outline: none;
     }
   }
-
-  ${(p) =>
-    p.flex &&
-    `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  `}
 `;
 const Small = styled.span`
   font: inherit;
@@ -72,15 +64,15 @@ const Flex = styled.div`
   flex-direction: ${(p) => p.direction ?? "row"};
   flex-wrap: ${(p) => p.wrap ?? "nowrap"};
 
-  ${(p) =>
-    p.mobileStack &&
-    `
-    @media (max-width: 900px) {
-      flex-direction: column;
-      gap: ${(p) =>
-        p.mobileStack === true ? "var(--section-gap)" : p.mobileStack};
-    }
-  `}
+  @media (max-width: 900px) {
+    flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")};
+    gap: ${(p) =>
+      p.mobileStack === true
+        ? "var(--section-gap)"
+        : p.mobileStack
+        ? p.mobileStack
+        : p.gap};
+  }
 `;
 const Section = styled.div`
   display: flex;
@@ -161,10 +153,6 @@ const navLinks = [
     name: "Web3 career",
     href: "anker_web3_career",
   },
-  {
-    name: "Web3 career",
-    href: "anker_web3_career",
-  },
 ];
 
 function returnIpfsImage(cfid) {

diff --git a/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx b/src/NearOrg/Ecosystem/WorkAndEarnPage.jsx
@@ -47,14 +47,6 @@ const Text = styled.p`
       outline: none;
     }
   }
-
-  ${(p) =>
-    p.flex &&
-    `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  `}
 `;
 const Flex = styled.div`
   display: flex;
@@ -64,15 +56,15 @@ const Flex = styled.div`
   flex-direction: ${(p) => p.direction ?? "row"};
   flex-wrap: ${(p) => p.wrap ?? "nowrap"};
 
-  ${(p) =>
-    p.mobileStack &&
-    `
-    @media (max-width: 900px) {
-      flex-direction: column;
-      gap: ${(p) =>
-        p.mobileStack === true ? "var(--section-gap)" : p.mobileStack};
-    }
-  `}
+  @media (max-width: 900px) {
+    flex-direction: ${(p) => (p.mobileStack ? "column" : p.direction ?? "row")};
+    gap: ${(p) =>
+      p.mobileStack === true
+        ? "var(--section-gap)"
+        : p.mobileStack
+        ? p.mobileStack
+        : p.gap};
+  }
 `;
 const Section = styled.div`
   display: flex;