Adds Newsletter form to the site footer and a Contact Us page under the About menu

_includes/footer.html

@@ -24,6 +24,30 @@ <h2>Resources</h2>
 
 <footer class="site-footer">
   <div class="container footer-container">
+
+    <div class="newsletter" id="newsletter">
+
+      <p
+        class="newsletter__title is-style-max-width-800"><strong>Stay in touch</strong> for updates, event info, and the latest news</p>
+
+
+        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
+        <script>
+          hbspt.forms.create({
+            region: "na1",
+            portalId: "8112310",
+            formId: "2fb2231c-000b-4ec5-88a0-1ab242549c9e"
+          });
+        </script>
+
+
+      <p
+        class="newsletter__privacy">By submitting this form, I consent to receive marketing emails from the LF and its projects regarding their events, training, research, developments, and related announcements. I understand that I can unsubscribe at any time using the links in the footers of the emails I receive. <a href="https://www.linuxfoundation.org/privacy/">Privacy Policy</a>.</p>
+
+    </div>
+
+
+
     <div class="lf-grid">
       <div class="footer-logo-wrapper">
         <a href="{{ site.url }}{{ site.baseurl }}" class="footer-logo">

_includes/main_menu.html

@@ -139,9 +139,8 @@
           <a class="nav-dropdown-item" href="{{ site.baseurl }}/governing-board">
             <span class=dropdown-title>Governing Board</span>
           </a>
-          <a class="nav-dropdown-item" href="{{ site.baseurl }}/resources/contributors/">
-            <span class=dropdown-title>Stay In Touch</span>
-            <p>Subscribe for updates, event info, webinars, and the latest community news.</p>
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/contact-us">
+            <span class=dropdown-title>Contact Us</span>
           </a>
         </div>
       </div>

_includes/mobile_menu.html

@@ -117,7 +117,7 @@
             <a href="{{ site.baseurl }}/governing-board">Governing Board</a>
           </li>
           <li>
-            <a href="{{ site.baseurl }}/resources/contributors/">Stay In Touch</a>
+            <a href="{{ site.baseurl }}/contact-us">Contact Us</a>
           </li>
         </ul>
         <li class="resources-mobile-menu-title">

_sass/_variables.scss

@@ -23,7 +23,7 @@ $mid_gray: #797676;
 
 $desktop_header_height: 90px;
 $mobile_header_height: 68px;
-$desktop_footer_height: 360px;
+$desktop_footer_height: 620px;
 $site_horizontal_padding: 30px;
 
 @import "../node_modules/bootstrap/scss/variables";

_sass/footer.scss

@@ -290,4 +290,222 @@
   grid-row-gap: 30px;
   display: grid;
   grid-template-columns: repeat(12,1fr);
-}
+}
+
+// removes captcha image from flow.
+.hs-recaptcha {
+	display: none;
+}
+
+.newsletter {
+	line-height: 140%;
+  margin-bottom: 80px;
+
+	&__title {
+		line-height: 140%;
+		font-size: 24px;
+		@media (min-width: 1000px) {
+			font-size: 40px;
+		}
+	}
+
+  .legal-consent-container {
+    display: none;
+  }
+
+	p.newsletter__privacy {
+		max-width: 860px;
+    margin-top: 30px;
+    line-height: 21px;
+    font-size: 14px;
+    color: #dfdfdf;
+    a {
+      color: #dfdfdf;
+      font-weight: 600;
+      &:hover {
+        color: #dfdfdf;
+        font-weight: 600;  
+      }
+    }
+}
+
+	// form container.
+	.hbspt-form {
+		min-height: 300px;
+		@media (min-width: 500px) {
+			min-height: 100px;
+		}
+		@media (min-width: 1000px) {
+			min-height: 20px;
+		}
+
+		// Displays if required field not filled.
+		.hs-error-msg {
+			display: block;
+			margin-right: 8px;
+      color: $orange;
+      font-size: 14px;
+      line-height: 1.1em;
+			width: 95%;
+			padding-top: 15px;
+		}
+
+		// form inputs wrapper.
+		.hs-form {
+			display: grid;
+			grid-template-columns: 1fr;
+			grid-gap: 30px;
+
+			@media (min-width: 500px) {
+				grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+			}
+
+			@media (min-width: 700px) {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+			}
+
+			@media (min-width: 950px) {
+				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+				grid-row-gap: 1.5rem;
+				grid-column-gap: 1.5rem;
+			}
+
+			input[type='text'],
+			input[type='email'] {
+				height: 50px;
+				@media (min-width: 500px) {
+					height: 42px;
+				}
+				width: 100%;
+				background: transparent;
+				border: none;
+				border-bottom: 2px solid $white;
+				border-radius: 0;
+				transition: all 0.25s ease;
+				color: $white;
+				font-size: 16px;
+				@media (min-width: 500px) {
+					font-size: 20px;
+				}
+				line-height: 105%;
+				&::placeholder {
+					color: $white;
+					font-size: 16px;
+					@media (min-width: 500px) {
+						font-size: 20px;
+					}
+					line-height: 105%;
+				}
+				&:focus {
+					outline: 0;
+					border-bottom: 2px solid $orange;
+					transition: color 0.25s ease;
+					&::placeholder {
+						transition: color 0.25s ease;
+						color: transparent;
+					}
+				}
+			}
+
+			// Controls autocomplete styles.
+			input,
+			textarea,
+			select {
+				&:-webkit-autofill,
+				&:-webkit-autofill:hover,
+				&:-webkit-autofill:focus {
+					-webkit-text-fill-color: $white;
+				}
+			}
+
+			select {
+				appearance: none;
+				background: transparent;
+				border: 0px solid transparent;
+				border-bottom: 2px solid $white;
+				border-radius: 0;
+				box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0);
+				display: block;
+				height: 50px;
+				@media (min-width: 500px) {
+					height: 42px;
+				}
+				margin: 0;
+				max-width: 100%;
+				padding: 0.25em 0 calc(0.25em + 1px) 5px;
+				transition: all 0.25s ease;
+				width: 100%;
+				color: $white;
+				font-size: 16px;
+				@media (min-width: 500px) {
+					font-size: 20px;
+				}
+				line-height: 105%;
+
+				&::-ms-expand {
+					display: none;
+				}
+
+				&:focus {
+					outline: 0;
+					border-bottom: 2px solid $orange;
+					&::placeholder {
+						transition: color 0.4s ease;
+						color: transparent;
+					}
+				}
+
+				option {
+					font-weight: normal;
+					color: black;
+				}
+			}
+
+			.hs-button {
+        border-radius: 5px;
+        margin-top: 20px;
+        border: none;
+        background-color: $orange;
+        color: $white;
+        font-weight: 400;
+        padding: 11px 40px;
+        font-size: 16px;
+        font-weight: 700;
+        text-decoration: none;
+			}
+
+			// underline errors.
+			.hs-input.invalid {
+				border-bottom: 2px dashed red !important;
+			}
+
+			// hide general error message.
+			.hs_error_rollup {
+				display: none;
+			}
+		}
+	}
+
+	// success message for newsletter footer only.
+	.submitted-message {
+		display: flex;
+		align-content: center;
+		align-items: center;
+		justify-content: center;
+		border: 2px solid $white;
+		min-height: 280px;
+    font-size: 18px;
+    padding: 20px 20px 0;
+    line-height: 1.1em;
+		@media (min-width: 500px) {
+			min-height: 80px;
+		}
+		@media (min-width: 1000px) {
+			min-height: unset;
+		}
+	}
+
+	.submitted-message p {
+		max-width: none;
+	}
+}

contact-us.html

@@ -0,0 +1,36 @@
+---
+layout: default
+title: Contact Us
+body-class: announcement
+background-class: announcement-background
+permalink: /contact-us
+---
+
+<div class="container">
+  <div class="row hero-content">
+    <div class="col-md-10">
+      <h1>Contact Us</h1>
+    </div>
+  </div>
+</div>
+
+<div class="container-fluid light-background-section contact-us-section">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-10">
+        <h2>Get in Touch</h2>
+        <p class="lead">The success of PyTorch is only possible with the contributions and support of our developer community and member companies. 
+          To learn more about how you can join your industry peers in supporting PyTorch, 
+          or for any questions you may have, please fill out this form to be contacted by a PyTorch Foundation representative.</p>
+        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js?pre=1"></script>
+        <script>
+          hbspt.forms.create({
+            region: "na1",
+            portalId: "8112310",    
+            formId: "6459945b-52e7-4636-911f-8bfbff65f030"
+          });
+        </script>
+      </div>
+    </div>
+  </div>
+</div>