add featured projects carousel (WIP)

apps/potlock/widget/Buttons/Red.jsx → apps/potlock/widget/Buttons/Button.jsx

@@ -1,18 +1,18 @@
 const Button = styled.button`
-  width: 100%;
+  // width: 100%;
   height: 100%;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px;
-  background: #dd3345;
+  padding: 8px 24px 12px 24px;
+  background: ${props.type === "primary" ? "#dd3345" : "#FCE9D5"};
   overflow: hidden;
   box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
   border-radius: 6px;
   gap: 8px;
   display: inline-flex;
   text-align: center;
-  color: white;
+  color: ${props.type === "primary" ? "white" : "#2E2E2E"};
   font-size: 14px;
   font-weight: 600;
 

apps/potlock/widget/Components/Header.jsx

@@ -2,11 +2,15 @@ const ownerId = "potlock.near";
 
 const HeaderContainer = styled.div`
   width: 100%;
-  background: #fffaf4;
+  // background: #fffaf4;
   padding: 80px 64px 80px 64px;
 `;
 
-const HeaderContent = styled.div``;
+const HeaderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: ${props.centered ? "center" : "flex-start"};
+`;
 
 const HeaderTitle = styled.div`
   color: #2e2e2e;
@@ -21,13 +25,29 @@ const HeaderDescription = styled.div`
   font-family: Mona-Sans;
   font-weight: 400;
   word-wrap: break-word;
+  max-width: 866px;
+  text-align: ${props.centered ? "center" : "flex-start"};
+  margin: 32px 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
 `;
 
 return (
   <HeaderContainer>
     <HeaderContent>
-      <HeaderTitle>{props.title}</HeaderTitle>
+      <HeaderTitle>{props.title1}</HeaderTitle>
+      {props.title2 && <HeaderTitle>{props.title2}</HeaderTitle>}
       <HeaderDescription>{props.description}</HeaderDescription>
     </HeaderContent>
+    <ButtonsContainer>
+      {props.buttonPrimary && props.buttonPrimary}
+      {props.buttonSecondary && props.buttonSecondary}
+    </ButtonsContainer>
   </HeaderContainer>
 );

apps/potlock/widget/Main.jsx → apps/potlock/widget/Index.jsx

@@ -48,7 +48,7 @@ const tabContentWidget = {
   // help: "Help.Page",
   // legal: "TNCPage",
   // admin: "Admin.Page",
-  // projects: "Project.ListPage",
+  projects: "Project.ListPage",
   // investors: "Investor.ListPage",
   // backers: "Investor.ListPage",
   // vendors: "Vendor.ListPage",
@@ -65,23 +65,23 @@ const tabContentWidget = {
   // profile: "Profile.Page",
 };
 
-// const getTabWidget = (tab) => {
-//   if (tab in tabContentWidget) {
-//     return tabContentWidget[tab];
-//   }
+const getTabWidget = (tab) => {
+  if (tab in tabContentWidget) {
+    return tabContentWidget[tab];
+  }
 
-//   return "Dashboard";
-// };
+  return "Project.ListPage";
+};
 
-// const tabContent = (
-//   <Widget
-//     src={`${ownerId}/widget/${getTabWidget(props.tab)}`}
-//     props={{
-//       ...props,
-//       urlProps: props,
-//     }}
-//   />
-// );
+const tabContent = (
+  <Widget
+    src={`${ownerId}/widget/${getTabWidget(props.tab)}`}
+    props={{
+      ...props,
+      urlProps: props,
+    }}
+  />
+);
 
 // const Page = styled.div`
 //   width: 100%;
@@ -128,14 +128,15 @@ const isForm = [
 return (
   <>
     <Widget src={`${ownerId}/widget/Nav`} />
-    <Widget
+    {/* <Widget
       src={`${ownerId}/widget/Components.Header`}
       props={{
         title: "Create new project",
         description:
           "Lorem ipsum dolor sit amet consectetur. Vel sit nunc in nunc. Viverra arcu eu sed consequat.",
       }}
-    />
-    <Widget src={`${ownerId}/widget/Project.Form`} />
+    /> */}
+    {/* <Widget src={`${ownerId}/widget/Project.Form`} /> */}
+    <Content className={isForm ? "form" : ""}>{tabContent}</Content>
   </>
 );

apps/potlock/widget/Nav.jsx

@@ -164,41 +164,41 @@ const Nav = styled.div`
 `;
 
 const NavLeft = styled.div`
-display: flex;
-flex-direction: row;
-align-items: center;
-justify-content: center
-`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
 
 const NavIcon = styled.div`
-text-align: center;
-color: #2E2E2E;
-font-size: 23.95px;
-font-weight: 700;
-line-height: 23.95px;
-word-wrap: break-word;
-margin-right: 48px;
-`
+  text-align: center;
+  color: #2e2e2e;
+  font-size: 23.95px;
+  font-weight: 700;
+  line-height: 23.95px;
+  word-wrap: break-word;
+  margin-right: 48px;
+`;
 
 const NavTabs = styled.div`
-display: flex;
-flex-direction: row;
-align-items: center;
-justify-content: center
-`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`;
 
 const NavTab = styled.a`
-:not(:last-child) {
-  margin-right: 32px;
-}
-cursor: pointer;
-color: #7B7B7B;
-fontSize: 14;
-fontFamily: Mona-Sans;
-fontWeight: 500;
-lineHeight: 16;
-wordWrap: break-word
-`
+  :not(:last-child) {
+    margin-right: 32px;
+  }
+  cursor: pointer;
+  color: #7b7b7b;
+  fontsize: 14;
+  fontfamily: Mona-Sans;
+  fontweight: 500;
+  lineheight: 16;
+  wordwrap: break-word;
+`;
 
 // const profileIcon = (
 //   <Widget
@@ -207,15 +207,26 @@ wordWrap: break-word
 //   />
 // );
 
-const tabOptions = ["Projects", "Pot", "Feed"]
+const tabOptions = [
+  { text: "Projects", link: "projects", disabled: false },
+  { text: "Pot", link: "pot", disabled: true },
+  { text: "Feed", link: "feed", disabled: true },
+];
 
 return (
   <Nav>
     <NavLeft>
       <NavIcon>🫕 Potlock</NavIcon>
-      <NavTabs>{tabOptions.map(tab => {
-        return <NavTab>{tab}</NavTab>
-      })}</NavTabs>
+      <NavTabs>
+        {tabOptions.map((tab) => {
+          if (tab.disabled) return null;
+          return (
+            <a href={`?tab=${tab.link}`}>
+              <NavTab>{tab.text}</NavTab>
+            </a>
+          );
+        })}
+      </NavTabs>
     </NavLeft>
   </Nav>
 );