weekly promotion of develop to main

apps/new/widget/components/Footer.jsx

@@ -74,76 +74,6 @@ const LeftMenu = styled.div`
     align-items: center;
   }
 `;
-const LearnMenu = styled.div`
-  width: 185px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  h2 {
-    align-self: stretch;
-    color: #fff;
-    font-family: Poppins;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 24px */
-    margin: 0;
-  }
-  a {
-    padding-top: 8px 0px;
-    color: var(--Color-Neutral-neutral, #666);
-    font-family: Poppins;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 21px */
-    text-decoration: none;
-  }
-  flex-shrink: 0;
-  @media screen and (max-width: 768px) {
-    align-items: center;
-    justify-content: flex;
-    h2 {
-      align-self: center;
-      justify-content: flex;
-    }
-  }
-`;
-const BuildMenu = styled.div`
-  width: 185px;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  gap: 16px;
-  h2 {
-    align-self: stretch;
-    color: #fff;
-    font-family: Poppins;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 24px */
-    margin: 0;
-  }
-  a {
-    padding-top: 8px 0px;
-    text-decoration: none;
-    color: var(--Color-Neutral-neutral, #666);
-    font-family: Poppins;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 21px */
-  }
-  @media screen and (max-width: 768px) {
-    align-items: center;
-    justify-content: flex;
-    h2 {
-      align-self: center;
-      justify-content: flex;
-    }
-  }
-`;
 
 const Credits = styled.div`
   display: flex;
@@ -161,12 +91,6 @@ const Credits = styled.div`
   }
 `;
 
-const Menu = styled.div`
-  @media screen and (max-width: 500px) {
-    flex-direction: column;
-  }
-`;
-
 const Footer = () => {
   return (
     <Container>
@@ -182,6 +106,7 @@ const Footer = () => {
                 borderRadius: "30%",
               }}
               target="_blank"
+              data-testid="twitter"
               href="https://x.com/NearBuilders"
             >
               <svg
@@ -202,6 +127,7 @@ const Footer = () => {
               style={{
                 borderRadius: "30%",
               }}
+              data-testid="telegram"
               href="https://nearbuilders.com/tg-builders"
             >
               <svg
@@ -228,6 +154,7 @@ const Footer = () => {
                 borderRadius: "30%",
               }}
               href="https://github.com/NEARBuilders"
+              data-testid="github"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -254,27 +181,9 @@ const Footer = () => {
             </Button>
           </SocialIcons>
         </LeftMenu>
-        {/* <Menu className="d-flex gap-5">
-          <LearnMenu>
-            <h2>Learn</h2>
-
-            <a href="#read">Read</a>
-            <a href="#watch">Watch</a>
-            <a href="#tools">Tools</a>
-            <a href="#components">Components</a>
-          </LearnMenu>
-          <BuildMenu>
-            <h2>Build</h2>
-            <a href="#guide">Guide</a>
-            <a href="#project">Project</a>
-            <a href="#activity">See Activity</a>
-            <a href="#feedback">Request Feedback</a>
-            <a href="#program">Founding Program</a>
-          </BuildMenu>
-        </Menu> */}
       </Links>
       <Credits>
-        <p>© {new Date().getFullYear} BuildDAO. All rights reserved.</p>
+        <p>© {new Date().getFullYear} Build DAO. All rights reserved.</p>
       </Credits>
     </Container>
   );

apps/new/widget/components/Navbar.jsx

@@ -113,11 +113,13 @@ const NavLinks = styled.div`
 
   span {
     color: var(--text-white, #fff);
+    font-size: 14px;
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
   }
 
   .active {
     color: var(--eca-227, #eca227);
-    font-weight: 700;
   }
 
   @media screen and (max-width: 960px) {

apps/new/widget/components/project/Card.jsx

@@ -35,6 +35,7 @@ const StyledCard = styled.div`
     display: flex;
     align-items: flex-start;
     flex-direction: column;
+    gap: 4px;
 
     h4 {
       color: #fff;
@@ -88,9 +89,10 @@ const Tag = styled.div`
   justify-content: center;
   align-items: center;
   gap: 4px;
-  border-radius: 6px;
+  border-radius: 50rem;
   border: 1px solid #666;
   background: rgba(5, 41, 77, 0.03);
+  min-width: fit-content;
 
   color: #fff;
   font-family: Poppins;
@@ -126,23 +128,24 @@ const EditButton = ({ item }) => {
   );
 };
 
-const Tags = ({ tags, location }) => {
+const Tags = ({ tags }) => {
+  const tagsLength = tags?.length;
+  const firstThreeLinesOfTags = tagsLength > 5 ? tags.slice(0, 5) : tags;
+  const remainingTags = tagsLength > 5 ? tags.slice(5) : [];
   return (
-    <div
-      className={`d-flex align-items-center ${variant === "grid" ? "flex-wrap" : ""} gap-2`}
-    >
-      {location && (
-        <Tag>
-          <i className="bi bi-globe"></i> {location}
-        </Tag>
-      )}
-      {tags &&
-        tags.map((tag) => (
+    <>
+      {firstThreeLinesOfTags &&
+        firstThreeLinesOfTags.map((tag) => (
           <Tag>
             <span className="fw-bold">{tag}</span>
           </Tag>
         ))}
-    </div>
+      {remainingTags.length > 0 && (
+        <Tag>
+          <span className="fw-bold">+{remainingTags.length}</span>
+        </Tag>
+      )}
+    </>
   );
 };
 
@@ -194,7 +197,6 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
     projectID,
     profileImage,
     backgroundImage,
-    location,
   } = data;
 
   const item = {
@@ -251,9 +253,11 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
               />
               <p>{description}</p>
             </div>
-            <div className="d-flex justify-content-between align-items-center mt-auto">
-              <Tags tags={tags} projectAccountId={projectAccountId} />
-              <ProfileImages accountIds={collaborators} />
+            <div className="d-flex gap-2 flex-wrap align-items-center mt-auto">
+              <Tags tags={tags} />
+              <span className="ms-auto">
+                <ProfileImages accountIds={collaborators} />
+              </span>
             </div>
           </div>
         </>
@@ -273,8 +277,11 @@ const ProjectCard = ({ data, variant, showEditProjectAction }) => {
                 projectAccountId={projectAccountId}
               />
             </div>
-            <div className="d-flex align-items-center gap-3">
-              <Tags tags={tags} location={location} />
+            <div
+              style={{ minWidth: "fit-content" }}
+              className="d-flex flex-wrap align-items-center gap-2"
+            >
+              <Tags tags={tags} />
               <ProfileImages accountIds={collaborators} />
               <div className="d-flex gap-2 align-items-center">
                 {showEditProjectAction && <EditButton item={item} />}

apps/new/widget/page/home/Hero.jsx

@@ -49,7 +49,7 @@ const HeadingSection = styled.div`
         #eca227 1.24%,
         #fc8119 55.76%,
         #9747ff 108.89%
-      );
+      ) !important;
     }
   }
 
@@ -130,11 +130,11 @@ const EndCard = styled.div`
   z-index: 2;
   overflow: clip;
   position: relative;
+  padding: 24px;
   .card-content {
-    padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 8px;
     position: relative;
     @keyframes floating {
       0%,
@@ -176,15 +176,18 @@ const EndCard = styled.div`
     font-family: Poppins, sans-serif;
     font-size: 16px;
     margin: 0;
+    font-weight: 400;
+    line-height: 140%;
   }
 
   .heading {
     color: #000;
     font-family: Poppins, sans-serif;
-    font-size: 24px;
+    font-size: 32px;
     font-weight: 500;
-    line-height: 130%; /* 31.2px */
-    letter-spacing: -0.48px;
+    line-height: 120%;
+    letter-spacing: -1.28px;
+    margin: 0;
   }
 
   @media screen and (max-width: 1024px) {
@@ -278,19 +281,22 @@ const Card = styled.div`
   background: #1e1e1e;
 
   .subheading {
-    color: #666;
+    color: #a0a0a0;
     font-family: Poppins, sans-serif;
     font-size: 16px;
     margin: 0;
+    font-weight: 400;
+    line-height: 140%;
   }
 
   .heading {
     color: #fff;
     font-family: Poppins, sans-serif;
-    font-size: 24px;
+    font-size: 32px;
     font-weight: 500;
-    line-height: 130%; /* 31.2px */
-    letter-spacing: -0.48px;
+    line-height: 120%;
+    letter-spacing: -1.28px;
+    margin: 0;
   }
 
   .title {
@@ -397,7 +403,6 @@ const GrowContainer = styled.div`
   flex-shrink: 0;
   flex-direction: column;
   position: relative;
-  padding: 24px;
   @media screen and (max-width: 768px) {
     padding-bottom: 200px;
   }
@@ -538,7 +543,7 @@ const ContributeImage2 = styled.img`
   z-index: 0;
   transform: scale(0.35);
   right: 0;
-  top: -180px;
+  top: -170px;
   animation:
     slideInTranslate2 2s forwards,
     scaleIn2 1s forwards;
@@ -614,14 +619,19 @@ const ExploreContainer = styled.div`
   flex-direction: column;
   gap: 2rem;
   border-radius: 24px;
+  .explore-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 `;
 const ContentCenter = styled.div``;
 
 const GrowImage1 = styled.img`
   position: absolute;
   z-index: 1;
   left: 0;
-  bottom: -60px;
+  bottom: -50px;
   width: 100%;
   object-fit: cover;
   transform: scale(0.7);
@@ -790,7 +800,10 @@ const Hero = () => {
             <p className="subheading">
               Learn with our Social Graph of Build Commons.
             </p>
-            <Widget src="${config_account}/widget/page.home.hero.SocialGraph" />
+            <div className="explore-main">
+              {" "}
+              <Widget src="${config_account}/widget/page.home.hero.SocialGraph" />
+            </div>
           </ExploreContainer>
         </Card>
         <CenterCard>