From ea15ec96fdd0310bb147cfdc659def0fca4167f7 Mon Sep 17 00:00:00 2001
From: Zeeshan Ahmad <itexpert120@outlook.com>
Date: Tue, 31 Oct 2023 23:04:19 +0500
Subject: [PATCH] feat: Revamp newsletter

---
 src/app.jsx                                   |   6 +-
 src/devhub/components/island/hero.jsx         |   2 +-
 src/devhub/components/organism/NewsLetter.jsx | 346 +++++++++---------
 src/devhub/page/{about.jsx => mission.jsx}    |   0
 4 files changed, 187 insertions(+), 167 deletions(-)
 rename src/devhub/page/{about.jsx => mission.jsx} (100%)

diff --git a/src/app.jsx b/src/app.jsx
index a01ac3086..05a278d80 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -120,11 +120,11 @@ function Page() {
         />
       );
     }
-    // ?page=about
-    case "about": {
+    // ?page=mission
+    case "mission": {
       return (
         <Widget
-          src={"${REPL_DEVHUB}/widget/devhub.page.about"}
+          src={"${REPL_DEVHUB}/widget/devhub.page.mission"}
           props={passProps}
         />
       );
diff --git a/src/devhub/components/island/hero.jsx b/src/devhub/components/island/hero.jsx
index fab626f4a..37239456e 100644
--- a/src/devhub/components/island/hero.jsx
+++ b/src/devhub/components/island/hero.jsx
@@ -176,7 +176,7 @@ return (
           to={href({
             widgetSrc: "${REPL_DEVHUB}/widget/app",
             params: {
-              page: "about",
+              page: "mission",
             },
           })}
         >
diff --git a/src/devhub/components/organism/NewsLetter.jsx b/src/devhub/components/organism/NewsLetter.jsx
index f961712cc..c15ca339f 100644
--- a/src/devhub/components/organism/NewsLetter.jsx
+++ b/src/devhub/components/organism/NewsLetter.jsx
@@ -1,167 +1,187 @@
 const page = props.page;
-const small = page === "communities" || page === "community" || page === "feed";
+const imageLink =
+  "https://ipfs.near.social/ipfs/bafkreiatybj6g6i4b4azcu3zoutlcxobrzpg3k4taazhkyd7sk5tuwmb5q";
 
-return (
-  <iframe
-    iframeResizer
-    srcDoc={`
-      <div id="mc_embed_shell">
-        <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
-        <style type="text/css">
-          body {
-            margin: 0;
-
-            ${small && "height: 72px;"}
-          }
-          .container {
-            max-width: 720px;
-            margin: 0 auto;
-
-            ${
-              small &&
-              `max-width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 0 1rem;`
-            }
-          }
-          .heading {
-            color: #151515;
-            text-align: center;
-            font-size: 36px;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 120%; /* 43.2px */
-
-            ${small && "display: none"}
-          }
-          .lead {
-            color: #151515;
-            text-align: center;
-            font-size: 24px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 120%; /* 28.8px */
-            letter-spacing: -0.72px;
-
-            margin: 0 auto;
-
-            ${small && "margin-bottom: 12px"}
-          }
-          #mc_embed_signup {
-              background: #00EC97;
-              clear: left; 
-              font: 14px Helvetica, Arial, sans-serif; 
-              padding: 20px;
-              text-align: center;
-
-              ${small && "padding: 0px"}
-          }
-          #mc_embed_signup h2 {
-              font-size: 24px;
-              margin-bottom: 20px;
-          }
-          #mc-embedded-subscribe {
-            width: 160px;
-            height: 60px;
-            flex-shrink: 0;
-            background: #151515;
-            color: #00EC97;
-            font-size: 1.125rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 20px; /* 83.333% */
-            cursor: pointer;
-            margin: 0 !important;
-
-            @media screen and (max-width: 768px) {
-                width: 96%;
-            }
-
-            ${small && "height: 36px; !important; "}
-          }
-          #mce-responses {
-            display: none !important;
-          }
-          .form-group {
-            display: flex !important;
-
-            @media screen and (max-width: 768px) {
-                flex-direction: column;
-            }
-
-            ${small && "gap: 32px; !important;"}
-          }
-          .mc-field-group {
-            padding: 0 !important;
-          }
-
-          .social-links {
-            display: flex;
-            gap: 1rem;
-            align-items: center;
-            justify-content: center;
-          }
-
-          .social-link {
-            text-decoration: none;
-          }
-
-          .social-link:hover {
-            text-decoration: none;
-          }
-
-          #mce-EMAIL {
-            ${small && "width: 240px; height: 20px; !important; "}
-          }
-        </style>
-        <div id="mc_embed_signup">
-          <div class="container">
-          <div ${small && "style='display: flex; align-items: center;'"}>
-          <h2 class="heading">/dev/hub newsletter</h2>
-            <p class="lead">${
-              !small
-                ? "Stay in the loop. Get the latest updates, announcements, opportunities, and insights from the ecosystem in your inbox"
-                : "Subscribe to our newsletter"
-            }</p>
-            <form action="https://gmail.us13.list-manage.com/subscribe/post?u=a52895422d000733a8dedc526&amp;id=5addef27c3&amp;f_id=00aa37e2f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-group" target="_blank">
-                <div class="mc-field-group">
-                    <input type="email" name="EMAIL" placeholder="Type your email..." class="required email" id="mce-EMAIL" required="" value="">
-                </div>
-                <div id="mce-responses" class="clear foot">
-                <div class="response" id="mce-error-response" style="display: none;"></div>
-                <div class="response" id="mce-success-response" style="display: none;"></div>
-                </div>
-                <div aria-hidden="true" style="position: absolute; left: -5000px;">
-                    <input type="text" name="b_a52895422d000733a8dedc526_5addef27c3" tabindex="-1" value="">
-                </div>
-                <div class="optionalParent">
-                <div class="">
-                    <input type="submit" name="subscribe" id="mc-embedded-subscribe" value="Subscribe">
-                </div>
-                </div>
-            </form>
-            </div>
-            <div class="social-links">
-                <a href="https://twitter.com/NEARDevGov" target="_blank" class="social-link">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
-                        <path d="M19.6497 1.89418C18.9371 2.21575 18.1712 2.43232 17.3674 2.52994C18.1882 2.03035 18.8184 1.23872 19.1146 0.295324C18.3471 0.757998 17.4965 1.09434 16.5911 1.27564C15.8672 0.490566 14.8334 0 13.6907 0C11.1251 0 9.23995 2.43314 9.81939 4.95898C6.51788 4.79081 3.59002 3.18294 1.62978 0.73913C0.588724 2.55455 1.08988 4.92945 2.85886 6.13207C2.20841 6.11075 1.59507 5.92945 1.06002 5.62674C1.01644 7.49795 2.33592 9.24856 4.24693 9.63823C3.68767 9.79245 3.07514 9.82855 2.45213 9.70714C2.95732 11.3117 4.42448 12.4791 6.16441 12.5119C4.49388 13.8433 2.38918 14.4381 0.28125 14.1854C2.03974 15.3314 4.12911 16 6.37262 16C13.7504 16 17.9186 9.66612 17.6668 3.98523C18.4432 3.41509 19.117 2.70386 19.6497 1.89418Z" fill="#151515"/>
-                    </svg>
-                </a>
-                <a href="https://t.me/NEARDevGov" target="_blank" class="social-link">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
-                        <path d="M19.6646 1.45657L16.7856 15.0342C16.5684 15.9924 16.0019 16.2309 15.1969 15.7796L10.8102 12.5469L8.6936 14.5828C8.45943 14.817 8.26346 15.0129 7.81201 15.0129L8.12713 10.5452L16.2575 3.19847C16.611 2.88334 16.1808 2.70869 15.7081 3.02386L5.65698 9.35266L1.32987 7.99835C0.388643 7.70445 0.371638 7.05707 1.52576 6.60566L18.4508 0.085202C19.2344 -0.208647 19.9202 0.25977 19.6646 1.45657Z" fill="#151515"/>
-                    </svg>
-                </a>
-                <a href="https://www.youtube.com/@NEARDevGov" class="social-link">
-                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="28" viewBox="0,0,256,256">
-                        <g fill="#151515" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M44.89844,14.5c-0.39844,-2.19922 -2.29687,-3.80078 -4.5,-4.30078c-3.29687,-0.69922 -9.39844,-1.19922 -16,-1.19922c-6.59766,0 -12.79687,0.5 -16.09766,1.19922c-2.19922,0.5 -4.10156,2 -4.5,4.30078c-0.40234,2.5 -0.80078,6 -0.80078,10.5c0,4.5 0.39844,8 0.89844,10.5c0.40234,2.19922 2.30078,3.80078 4.5,4.30078c3.5,0.69922 9.5,1.19922 16.10156,1.19922c6.60156,0 12.60156,-0.5 16.10156,-1.19922c2.19922,-0.5 4.09766,-2 4.5,-4.30078c0.39844,-2.5 0.89844,-6.10156 1,-10.5c-0.20312,-4.5 -0.70312,-8 -1.20312,-10.5zM19,32v-14l12.19922,7z"></path></g></g>
-                    </svg>
-                </a>
-            </div>
-          </div>
-        </div>
-        <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
-        <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.js"></script>
+const Footer = styled.div`
+  width: 100%;
+  background-color: #00ec97;
+  padding: 1.5rem;
+`;
+
+const Title = styled.h5`
+  color: #151515;
+  text-align: center;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%; /* 43.2px */
+  margin: 0;
+`;
+
+const Description = styled.p`
+  color: #151515;
+  text-align: center;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%; /* 28.8px */
+  letter-spacing: -0.72px;
+  margin: 0;
+`;
+
+const MidContainer = styled.div`
+  width: 720px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+
+  ${(page === "community" || page === "communities" || page === "feed") &&
+  "display: none;"}
+`;
+
+const CTA = styled.a`
+  background: #151515;
+  padding: 0.75rem 0.75rem;
+
+  color: #00ec97 !important;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px; /* 83.333% */
+
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+const SocialLinks = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+`;
+
+const TwitterIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="16"
+      viewBox="0 0 20 16"
+      fill="none"
+    >
+      <path
+        d="M19.7161 1.89418C19.0035 2.21575 18.2376 2.43232 17.4338 2.52994C18.2546 2.03035 18.8848 1.23872 19.181 0.295324C18.4136 0.757998 17.563 1.09434 16.6575 1.27564C15.9336 0.490566 14.8998 0 13.7571 0C11.1916 0 9.30636 2.43314 9.8858 4.95898C6.58429 4.79081 3.65643 3.18294 1.69618 0.73913C0.65513 2.55455 1.15629 4.92945 2.92527 6.13207C2.27481 6.11075 1.66148 5.92945 1.12643 5.62674C1.08285 7.49795 2.40232 9.24856 4.31334 9.63823C3.75408 9.79245 3.14155 9.82855 2.51853 9.70714C3.02373 11.3117 4.49088 12.4791 6.23081 12.5119C4.56029 13.8433 2.45559 14.4381 0.347656 14.1854C2.10615 15.3314 4.19552 16 6.43902 16C13.8168 16 17.985 9.66612 17.7332 3.98523C18.5096 3.41509 19.1834 2.70386 19.7161 1.89418Z"
+        fill="#151515"
+      />
+    </svg>
+  );
+};
+
+const TelegramIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="16"
+      viewBox="0 0 20 16"
+      fill="none"
+    >
+      <path
+        d="M19.7398 1.45657L16.8608 15.0342C16.6436 15.9924 16.0771 16.2309 15.2721 15.7796L10.8854 12.5469L8.76879 14.5828C8.53463 14.817 8.33866 15.0129 7.8872 15.0129L8.20233 10.5452L16.3327 3.19847C16.6862 2.88334 16.256 2.70869 15.7833 3.02386L5.73217 9.35266L1.40507 7.99835C0.463838 7.70445 0.446834 7.05707 1.60095 6.60566L18.526 0.085202C19.3096 -0.208647 19.9954 0.25977 19.7398 1.45657Z"
+        fill="#151515"
+      />
+    </svg>
+  );
+};
+
+const YoutubeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="16"
+      viewBox="0 0 24 16"
+      fill="none"
+    >
+      <path
+        d="M23.1744 2.49854C22.9115 1.51517 22.1369 0.740571 21.1535 0.477714C19.3712 -1.21102e-07 12.2235 0 12.2235 0C12.2235 0 5.07581 -1.21102e-07 3.29346 0.477714C2.3101 0.740571 1.53549 1.51517 1.27264 2.49854C0.794922 4.28089 0.794922 8 0.794922 8C0.794922 8 0.794922 11.7191 1.27264 13.5015C1.53549 14.4848 2.3101 15.2594 3.29346 15.5223C5.07581 16 12.2235 16 12.2235 16C12.2235 16 19.3712 16 21.1535 15.5223C22.1369 15.2594 22.9115 14.4848 23.1744 13.5015C23.6521 11.7191 23.6521 8 23.6521 8C23.6521 8 23.6521 4.28089 23.1744 2.49854ZM9.93778 11.4286V4.57143L15.8761 8L9.93778 11.4286Z"
+        fill="#151515"
+      />
+    </svg>
+  );
+};
+
+const ImageContainer = styled.img`
+  ${page !== "home" && "display: none;"}
+  height: 280px;
+  width: 100%;
+  object-fit: cover;
+`;
+
+const MidContent = () => {
+  return (
+    <>
+      <MidContainer>
+        <Title>/dev/hub newsletter</Title>
+        <Description>
+          Stay in the loop. Get the latest updates, announcements,
+          <br />
+          opportunities, and insights from the ecosystem in your inbox.
+        </Description>
+        <CTA href="#">Subscribe</CTA>
+        <SocialLinks>
+          <a href="#" target="_blank">
+            <TwitterIcon />
+          </a>
+          <a href="#" target="_blank">
+            <TelegramIcon />
+          </a>
+          <a href="#" target="_blank">
+            <YoutubeIcon />
+          </a>
+        </SocialLinks>
+      </MidContainer>
+    </>
+  );
+};
+
+const SmallContainer = styled.div`
+  display: none;
+  ${(page === "communities" || page === "community" || page === "feed") &&
+  "display: flex !important;"}
+  justify-content: space-between;
+  align-items: center;
+`;
+const SmallContent = () => {
+  return (
+    <SmallContainer>
+      <SocialLinks>
+        <a href="#" target="_blank">
+          <TwitterIcon />
+        </a>
+        <a href="#" target="_blank">
+          <TelegramIcon />
+        </a>
+        <a href="#" target="_blank">
+          <YoutubeIcon />
+        </a>
+      </SocialLinks>
+      <div className="d-flex align-items-center gap-3">
+        <h5 className="m-0">Subscribe to our newsletter</h5>
+        <CTA href="#">Subscribe</CTA>
       </div>
-      `}
-  />
+    </SmallContainer>
+  );
+};
+
+return (
+  <>
+    <ImageContainer src={imageLink} />
+    <Footer>
+      <MidContent />
+      <SmallContent />
+    </Footer>
+  </>
 );
diff --git a/src/devhub/page/about.jsx b/src/devhub/page/mission.jsx
similarity index 100%
rename from src/devhub/page/about.jsx
rename to src/devhub/page/mission.jsx