From d19baa5dae702788f738b499b79c6f9f4589a542 Mon Sep 17 00:00:00 2001
From: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com>
Date: Thu, 12 Oct 2023 16:34:07 -0400
Subject: [PATCH] add featured projects carousel (WIP)

---
 .../widget/Buttons/{Red.jsx => Button.jsx}    |   8 +-
 apps/potlock/widget/Components/Header.jsx     |  26 ++-
 apps/potlock/widget/{Main.jsx => Index.jsx}   |  39 ++--
 apps/potlock/widget/Nav.jsx                   |  77 ++++---
 apps/potlock/widget/Project/Carousel.jsx      | 188 ++++++++++++++++++
 apps/potlock/widget/Project/Form.jsx          |   5 +-
 apps/potlock/widget/Project/ListPage.jsx      | 145 ++++++++++++++
 .../src/Buttons/{Red.jsx => Button.jsx}       |   8 +-
 build/potlock/src/Components/Header.jsx       |  26 ++-
 build/potlock/src/{Main.jsx => Index.jsx}     |  39 ++--
 build/potlock/src/Nav.jsx                     |  77 ++++---
 build/potlock/src/Project/Carousel.jsx        | 188 ++++++++++++++++++
 build/potlock/src/Project/Form.jsx            |   5 +-
 build/potlock/src/Project/ListPage.jsx        | 145 ++++++++++++++
 14 files changed, 852 insertions(+), 124 deletions(-)
 rename apps/potlock/widget/Buttons/{Red.jsx => Button.jsx} (73%)
 rename apps/potlock/widget/{Main.jsx => Index.jsx} (85%)
 create mode 100644 apps/potlock/widget/Project/Carousel.jsx
 create mode 100644 apps/potlock/widget/Project/ListPage.jsx
 rename build/potlock/src/Buttons/{Red.jsx => Button.jsx} (73%)
 rename build/potlock/src/{Main.jsx => Index.jsx} (85%)
 create mode 100644 build/potlock/src/Project/Carousel.jsx
 create mode 100644 build/potlock/src/Project/ListPage.jsx

diff --git a/apps/potlock/widget/Buttons/Red.jsx b/apps/potlock/widget/Buttons/Button.jsx
similarity index 73%
rename from apps/potlock/widget/Buttons/Red.jsx
rename to apps/potlock/widget/Buttons/Button.jsx
index 73307de4..3a0328ff 100644
--- a/apps/potlock/widget/Buttons/Red.jsx
+++ b/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;
 
diff --git a/apps/potlock/widget/Components/Header.jsx b/apps/potlock/widget/Components/Header.jsx
index 49b8e456..73cdb440 100644
--- a/apps/potlock/widget/Components/Header.jsx
+++ b/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>
 );
diff --git a/apps/potlock/widget/Main.jsx b/apps/potlock/widget/Index.jsx
similarity index 85%
rename from apps/potlock/widget/Main.jsx
rename to apps/potlock/widget/Index.jsx
index 6dbf80fa..25c53733 100644
--- a/apps/potlock/widget/Main.jsx
+++ b/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>
   </>
 );
diff --git a/apps/potlock/widget/Nav.jsx b/apps/potlock/widget/Nav.jsx
index 345459ca..f5c76b2f 100644
--- a/apps/potlock/widget/Nav.jsx
+++ b/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>
 );
diff --git a/apps/potlock/widget/Project/Carousel.jsx b/apps/potlock/widget/Project/Carousel.jsx
new file mode 100644
index 00000000..963b44ae
--- /dev/null
+++ b/apps/potlock/widget/Project/Carousel.jsx
@@ -0,0 +1,188 @@
+State.init({
+  focusedIndex: 0,
+});
+
+const move = (direction) => {
+  const newIndex = state.focusedIndex + direction;
+  // Ensure newIndex is within bounds
+  if (newIndex >= 0 && newIndex < props.projects.length - 2) {
+    State.update({ focusedIndex: newIndex });
+  }
+};
+
+const getFocusedIndex = () => {
+  return state.focusedIndex;
+};
+
+const cardWidth = 411;
+
+const Carousel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 32px;
+`;
+
+const Cards = styled.div`
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  transform: translateX(${({ translateX }) => translateX}px);
+`;
+const Card = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: ${cardWidth}px;
+  border-radius: 6px;
+  transform: ${({ isFocused }) => (isFocused ? "scale(1.2)" : "scale(0.8)")};
+  opacity: ${({ isVisible }) => (isVisible ? 1 : 0.5)};
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  background-color: white;
+  margin-right: ${({ isLast }) =>
+    isLast ? "0" : "38px"}; // Add gap only if it is not the last card
+`;
+
+const Banner = styled.div`
+  position: relative;
+  width: 100%;
+  height: 168;
+  margin-bottom: 30px;
+`;
+
+const BannerImage = styled.img`
+  width: 100%;
+  height: 100%;
+  //   border-radius: 6px;
+`;
+
+const ProfileImage = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid white;
+  position: absolute;
+  bottom: -20px;
+  left: 60px;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+  gap: 16px;
+`;
+
+const ProjectName = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  font-family: mona-sans;
+  color: #2e2e2e;
+`;
+
+const ProjectDescription = styled.p`
+  font-size: 16px;
+  font-weight: 400;
+  color: #2e2e2e;
+`;
+
+const Tags = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const Tag = styled.span`
+  box-shadow: 0px -0.699999988079071px 0px rgba(123, 123, 123, 0.36) inset;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(123, 123, 123, 0.36);
+`;
+
+const Arrows = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Arrow = styled.button`
+  /* styling for arrows */
+`;
+
+/*
+
+Calculating the Positioning:
+1 centered card: 411px (fixed width)
+2 full side cards: 2 * 411px
+2 half cards: 2 * (411px/2)
+Calculated widths:
+[1 centered card] + [2 side cards] + [2 half cards]
+[411] + [2 * 411] + [2 * (411/2)]
+[411] + [822] + [411]
+= 1644px
+
+*/
+
+const totalVisibleWidth = 1644;
+const offset = (totalVisibleWidth - cardWidth) / 2; // Calculating offset
+const cardMargin = 38; // if using a 38px margin between cards
+const cardWithMargin = cardWidth + cardMargin;
+// const translateX = -state.focusedIndex * cardWidth + offset; // Adding the offset
+
+const calculateTranslateX = () => {
+  // If focused on the first card
+  if (state.focusedIndex === 0) {
+    return (totalVisibleWidth - cardWithMargin) / 2;
+  }
+  // If focused on the last card
+  else if (state.focusedIndex === props.projects.length - 1) {
+    return -((props.projects.length - 1) * cardWithMargin - offset);
+  }
+  // Any other card in the list
+  else {
+    return -state.focusedIndex * cardWithMargin + offset;
+  }
+};
+
+const translateX = calculateTranslateX();
+
+return (
+  <>
+    <Carousel>
+      <Cards translateX={translateX}>
+        {props.projects.map((project, index) => (
+          <Card
+            key={index}
+            isFocused={index === state.focusedIndex}
+            isVisible={Math.abs(index - state.focusedIndex) <= 1.5}
+            isLast={index === props.projects.length - 1}
+          >
+            <Banner>
+              <BannerImage src={project.bannerImage} alt="banner" />
+              <ProfileImage src={project.profileImage} alt="profile" />
+            </Banner>
+            <Info>
+              <ProjectName>{project.name}</ProjectName>
+              <ProjectDescription>{project.description}</ProjectDescription>
+              <Tags>
+                {project.tags.map((tag, tagIndex) => (
+                  <Tag key={tagIndex}>{tag}</Tag>
+                ))}
+              </Tags>
+            </Info>
+          </Card>
+        ))}
+      </Cards>
+    </Carousel>
+    <Arrows>
+      <Arrow onClick={() => move(-1)} disabled={state.focusedIndex === 0}>
+        ←
+      </Arrow>
+      <Arrow onClick={() => move(1)} disabled={state.focusedIndex === props.projects.length - 1}>
+        →
+      </Arrow>
+    </Arrows>
+  </>
+);
diff --git a/apps/potlock/widget/Project/Form.jsx b/apps/potlock/widget/Project/Form.jsx
index 8ead257d..e88643df 100644
--- a/apps/potlock/widget/Project/Form.jsx
+++ b/apps/potlock/widget/Project/Form.jsx
@@ -173,8 +173,6 @@ const isCreateProjectDisabled =
   !state.category ||
   state.categoryError;
 
-console.log("isCreateProjectDisabled: ", isCreateProjectDisabled);
-
 return (
   <Container>
     <Banner>
@@ -339,8 +337,9 @@ return (
           />
           <div style={{ marginBottom: "24px" }} />
           <Widget
-            src={`${ownerId}/widget/Buttons.Red`}
+            src={`${ownerId}/widget/Buttons.Button`}
             props={{
+              type: "primary",
               text: "Create new project",
               disabled: isCreateProjectDisabled,
             }}
diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx
new file mode 100644
index 00000000..b1559f61
--- /dev/null
+++ b/apps/potlock/widget/Project/ListPage.jsx
@@ -0,0 +1,145 @@
+const ownerId = "potlock.near";
+
+const HeroOuter = styled.div`
+  padding: 136px 64px;
+`;
+
+const HeroInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  height: 96px;
+  background-color: #f8f8f8;
+`;
+
+const SectionTitle = styled.div`
+  font-size: 48px;
+  font-weight: 600;
+  color: #2e2e2e;
+  font-family: Lora;
+  width: 100%;
+  text-align: center;
+`;
+
+const sampleProjects = [
+  {
+    name: "Space Explorer",
+    description: "Navigate through the uncharted territories of outer space.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["React", "GraphQL"],
+  },
+  {
+    name: "Weather App",
+    description: "Get the latest weather updates for your location.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Vue", "REST API"],
+  },
+  {
+    name: "Recipe Book",
+    description: "Find and save your favorite recipes.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Angular", "Firebase"],
+  },
+  {
+    name: "Fitness Tracker",
+    description: "Monitor your fitness journey.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Svelte", "MongoDB"],
+  },
+  {
+    name: "Bookstore",
+    description: "Discover and purchase books online.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["React", "Stripe API"],
+  },
+  {
+    name: "Job Finder",
+    description: "Connect employers and job seekers.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Python", "Django"],
+  },
+  {
+    name: "Social Media App",
+    description: "Connect with friends and family.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["MERN Stack"],
+  },
+  {
+    name: "E-commerce Platform",
+    description: "Shop your favorite items online.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["MERN Stack"],
+  },
+];
+
+return (
+  <>
+    <Widget
+      src={`${ownerId}/widget/Components.Header`}
+      props={{
+        title1: "Transforming",
+        title2: "Funding for Public Goods",
+        description:
+          "Lorem ipsum dolor sit amet consectetur. Vel sit nunc in nunc. Viverra arcu eu sed consequat.",
+        centered: true,
+        buttonPrimary: (
+          <Widget
+            src={`${ownerId}/widget/Buttons.Button`}
+            props={{
+              type: "primary",
+              text: "Explore projects",
+              disabled: false,
+            }}
+          />
+        ),
+        buttonSecondary: (
+          <Widget
+            src={`${ownerId}/widget/Buttons.Button`}
+            props={{
+              type: "secondary",
+              text: "Create project",
+              disabled: false,
+            }}
+          />
+        ),
+      }}
+    />
+    <Separator />
+    <SectionTitle>Featured projects</SectionTitle>
+    <Widget
+      src={`${ownerId}/widget/Project.Carousel`}
+      props={{
+        projects: sampleProjects,
+      }}
+    />
+  </>
+);
diff --git a/build/potlock/src/Buttons/Red.jsx b/build/potlock/src/Buttons/Button.jsx
similarity index 73%
rename from build/potlock/src/Buttons/Red.jsx
rename to build/potlock/src/Buttons/Button.jsx
index 73307de4..3a0328ff 100644
--- a/build/potlock/src/Buttons/Red.jsx
+++ b/build/potlock/src/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;
 
diff --git a/build/potlock/src/Components/Header.jsx b/build/potlock/src/Components/Header.jsx
index 49b8e456..73cdb440 100644
--- a/build/potlock/src/Components/Header.jsx
+++ b/build/potlock/src/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>
 );
diff --git a/build/potlock/src/Main.jsx b/build/potlock/src/Index.jsx
similarity index 85%
rename from build/potlock/src/Main.jsx
rename to build/potlock/src/Index.jsx
index 6dbf80fa..25c53733 100644
--- a/build/potlock/src/Main.jsx
+++ b/build/potlock/src/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>
   </>
 );
diff --git a/build/potlock/src/Nav.jsx b/build/potlock/src/Nav.jsx
index 345459ca..f5c76b2f 100644
--- a/build/potlock/src/Nav.jsx
+++ b/build/potlock/src/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>
 );
diff --git a/build/potlock/src/Project/Carousel.jsx b/build/potlock/src/Project/Carousel.jsx
new file mode 100644
index 00000000..963b44ae
--- /dev/null
+++ b/build/potlock/src/Project/Carousel.jsx
@@ -0,0 +1,188 @@
+State.init({
+  focusedIndex: 0,
+});
+
+const move = (direction) => {
+  const newIndex = state.focusedIndex + direction;
+  // Ensure newIndex is within bounds
+  if (newIndex >= 0 && newIndex < props.projects.length - 2) {
+    State.update({ focusedIndex: newIndex });
+  }
+};
+
+const getFocusedIndex = () => {
+  return state.focusedIndex;
+};
+
+const cardWidth = 411;
+
+const Carousel = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 32px;
+`;
+
+const Cards = styled.div`
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  transform: translateX(${({ translateX }) => translateX}px);
+`;
+const Card = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: ${cardWidth}px;
+  border-radius: 6px;
+  transform: ${({ isFocused }) => (isFocused ? "scale(1.2)" : "scale(0.8)")};
+  opacity: ${({ isVisible }) => (isVisible ? 1 : 0.5)};
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  background-color: white;
+  margin-right: ${({ isLast }) =>
+    isLast ? "0" : "38px"}; // Add gap only if it is not the last card
+`;
+
+const Banner = styled.div`
+  position: relative;
+  width: 100%;
+  height: 168;
+  margin-bottom: 30px;
+`;
+
+const BannerImage = styled.img`
+  width: 100%;
+  height: 100%;
+  //   border-radius: 6px;
+`;
+
+const ProfileImage = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid white;
+  position: absolute;
+  bottom: -20px;
+  left: 60px;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+  gap: 16px;
+`;
+
+const ProjectName = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  font-family: mona-sans;
+  color: #2e2e2e;
+`;
+
+const ProjectDescription = styled.p`
+  font-size: 16px;
+  font-weight: 400;
+  color: #2e2e2e;
+`;
+
+const Tags = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const Tag = styled.span`
+  box-shadow: 0px -0.699999988079071px 0px rgba(123, 123, 123, 0.36) inset;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(123, 123, 123, 0.36);
+`;
+
+const Arrows = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Arrow = styled.button`
+  /* styling for arrows */
+`;
+
+/*
+
+Calculating the Positioning:
+1 centered card: 411px (fixed width)
+2 full side cards: 2 * 411px
+2 half cards: 2 * (411px/2)
+Calculated widths:
+[1 centered card] + [2 side cards] + [2 half cards]
+[411] + [2 * 411] + [2 * (411/2)]
+[411] + [822] + [411]
+= 1644px
+
+*/
+
+const totalVisibleWidth = 1644;
+const offset = (totalVisibleWidth - cardWidth) / 2; // Calculating offset
+const cardMargin = 38; // if using a 38px margin between cards
+const cardWithMargin = cardWidth + cardMargin;
+// const translateX = -state.focusedIndex * cardWidth + offset; // Adding the offset
+
+const calculateTranslateX = () => {
+  // If focused on the first card
+  if (state.focusedIndex === 0) {
+    return (totalVisibleWidth - cardWithMargin) / 2;
+  }
+  // If focused on the last card
+  else if (state.focusedIndex === props.projects.length - 1) {
+    return -((props.projects.length - 1) * cardWithMargin - offset);
+  }
+  // Any other card in the list
+  else {
+    return -state.focusedIndex * cardWithMargin + offset;
+  }
+};
+
+const translateX = calculateTranslateX();
+
+return (
+  <>
+    <Carousel>
+      <Cards translateX={translateX}>
+        {props.projects.map((project, index) => (
+          <Card
+            key={index}
+            isFocused={index === state.focusedIndex}
+            isVisible={Math.abs(index - state.focusedIndex) <= 1.5}
+            isLast={index === props.projects.length - 1}
+          >
+            <Banner>
+              <BannerImage src={project.bannerImage} alt="banner" />
+              <ProfileImage src={project.profileImage} alt="profile" />
+            </Banner>
+            <Info>
+              <ProjectName>{project.name}</ProjectName>
+              <ProjectDescription>{project.description}</ProjectDescription>
+              <Tags>
+                {project.tags.map((tag, tagIndex) => (
+                  <Tag key={tagIndex}>{tag}</Tag>
+                ))}
+              </Tags>
+            </Info>
+          </Card>
+        ))}
+      </Cards>
+    </Carousel>
+    <Arrows>
+      <Arrow onClick={() => move(-1)} disabled={state.focusedIndex === 0}>
+        ←
+      </Arrow>
+      <Arrow onClick={() => move(1)} disabled={state.focusedIndex === props.projects.length - 1}>
+        →
+      </Arrow>
+    </Arrows>
+  </>
+);
diff --git a/build/potlock/src/Project/Form.jsx b/build/potlock/src/Project/Form.jsx
index 8ead257d..e88643df 100644
--- a/build/potlock/src/Project/Form.jsx
+++ b/build/potlock/src/Project/Form.jsx
@@ -173,8 +173,6 @@ const isCreateProjectDisabled =
   !state.category ||
   state.categoryError;
 
-console.log("isCreateProjectDisabled: ", isCreateProjectDisabled);
-
 return (
   <Container>
     <Banner>
@@ -339,8 +337,9 @@ return (
           />
           <div style={{ marginBottom: "24px" }} />
           <Widget
-            src={`${ownerId}/widget/Buttons.Red`}
+            src={`${ownerId}/widget/Buttons.Button`}
             props={{
+              type: "primary",
               text: "Create new project",
               disabled: isCreateProjectDisabled,
             }}
diff --git a/build/potlock/src/Project/ListPage.jsx b/build/potlock/src/Project/ListPage.jsx
new file mode 100644
index 00000000..b1559f61
--- /dev/null
+++ b/build/potlock/src/Project/ListPage.jsx
@@ -0,0 +1,145 @@
+const ownerId = "potlock.near";
+
+const HeroOuter = styled.div`
+  padding: 136px 64px;
+`;
+
+const HeroInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  height: 96px;
+  background-color: #f8f8f8;
+`;
+
+const SectionTitle = styled.div`
+  font-size: 48px;
+  font-weight: 600;
+  color: #2e2e2e;
+  font-family: Lora;
+  width: 100%;
+  text-align: center;
+`;
+
+const sampleProjects = [
+  {
+    name: "Space Explorer",
+    description: "Navigate through the uncharted territories of outer space.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["React", "GraphQL"],
+  },
+  {
+    name: "Weather App",
+    description: "Get the latest weather updates for your location.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Vue", "REST API"],
+  },
+  {
+    name: "Recipe Book",
+    description: "Find and save your favorite recipes.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Angular", "Firebase"],
+  },
+  {
+    name: "Fitness Tracker",
+    description: "Monitor your fitness journey.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Svelte", "MongoDB"],
+  },
+  {
+    name: "Bookstore",
+    description: "Discover and purchase books online.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["React", "Stripe API"],
+  },
+  {
+    name: "Job Finder",
+    description: "Connect employers and job seekers.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["Python", "Django"],
+  },
+  {
+    name: "Social Media App",
+    description: "Connect with friends and family.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["MERN Stack"],
+  },
+  {
+    name: "E-commerce Platform",
+    description: "Shop your favorite items online.",
+    bannerImage:
+      "https://nftstorage.link/ipfs/bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci",
+    profileImage:
+      "https://nftstorage.link/ipfs/bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u",
+    tags: ["MERN Stack"],
+  },
+];
+
+return (
+  <>
+    <Widget
+      src={`${ownerId}/widget/Components.Header`}
+      props={{
+        title1: "Transforming",
+        title2: "Funding for Public Goods",
+        description:
+          "Lorem ipsum dolor sit amet consectetur. Vel sit nunc in nunc. Viverra arcu eu sed consequat.",
+        centered: true,
+        buttonPrimary: (
+          <Widget
+            src={`${ownerId}/widget/Buttons.Button`}
+            props={{
+              type: "primary",
+              text: "Explore projects",
+              disabled: false,
+            }}
+          />
+        ),
+        buttonSecondary: (
+          <Widget
+            src={`${ownerId}/widget/Buttons.Button`}
+            props={{
+              type: "secondary",
+              text: "Create project",
+              disabled: false,
+            }}
+          />
+        ),
+      }}
+    />
+    <Separator />
+    <SectionTitle>Featured projects</SectionTitle>
+    <Widget
+      src={`${ownerId}/widget/Project.Carousel`}
+      props={{
+        projects: sampleProjects,
+      }}
+    />
+  </>
+);