From 4c029ca8e546bc867c298154f36748b6a3299775 Mon Sep 17 00:00:00 2001
From: John McBride <jpmmcbride@gmail.com>
Date: Fri, 9 Aug 2024 10:55:36 -0600
Subject: [PATCH] fix: Use button for Ghost.io newsletter signup (#337)

Signed-off-by: John McBride <john@opensauced.pizza>
---
 components/sections/home-page/Newsletter.tsx  |  43 ++-----
 .../sections/maintainers/Newsletter.tsx       |  68 ----------
 pages/maintainers/index.tsx                   | 116 +++++++++---------
 3 files changed, 68 insertions(+), 159 deletions(-)
 delete mode 100644 components/sections/maintainers/Newsletter.tsx

diff --git a/components/sections/home-page/Newsletter.tsx b/components/sections/home-page/Newsletter.tsx
index 8252bd60e..3e84d2fb4 100644
--- a/components/sections/home-page/Newsletter.tsx
+++ b/components/sections/home-page/Newsletter.tsx
@@ -21,48 +21,25 @@ const Newsletter = () => {
           <Image alt="Doodles" src={StrokeR3} />
         </div>
       </div>
-
       <div className="flex flex-col items-center gap-y-8">
         <Heading alignSmall="center">
-          $orange-to-yellowThe fast track$orange-to-yellow to open source
+                    $orange-to-yellowThe fast track$orange-to-yellow to open source
         </Heading>
-
         <Typography alignSmall="center" variant="body1" >
-          Stay up to date with the latest OpenSauced news and trends.
+                    Stay up to date with the latest OpenSauced news and trends.
         </Typography>
-
         <GradientBorderWrapper>
-          <form
-            className="relative box-border px-4 flex items-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
-            name="newsletter"
-            action="?success=true"
-            data-netlify="true"
-            data-netlify-honeypot="bot-field"
-            autoComplete="off"
+          <a
+            href="https://news.opensauced.pizza/#/portal/signup"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="relative box-border px-4 flex items-center justify-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
           >
-            <div hidden aria-hidden="true">
-              <label>
-                Try your luck
-                <input type="hidden" value="bot-field" name="newsletter" />
-              </label>
-            </div>
-            <input
-              placeholder="Email"
-              name="Your email"
-              type="email"
-              className="pr-4 outline-none focus:outline-none bg-[#211E1C] w-[180px] largeTablet:w-[290px]"
-            ></input>
-            <button
-              className=" text-brandOrange text-sm cursor-pointer"
-              type="submit"
-            >
-              Subscribe
-            </button>
-          </form>
+            <span className="text-brandOrange">Subscribe</span>
+          </a>
         </GradientBorderWrapper>
       </div>
     </SectionWrapper>
   )
 }
-
-export default Newsletter
\ No newline at end of file
+export default Newsletter
diff --git a/components/sections/maintainers/Newsletter.tsx b/components/sections/maintainers/Newsletter.tsx
deleted file mode 100644
index 8252bd60e..000000000
--- a/components/sections/maintainers/Newsletter.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-// Components
-import SectionWrapper from '../../common/layout/SectionWrapper'
-import { Heading, Typography } from '../../common/text'
-import GradientBorderWrapper from '../../common/GradientBorderWrapper'
-
-// Static assets
-import StrokeR3 from '../../../public/background-strokes/_3_rightStroke.svg'
-import StrokeL3 from '../../../public/background-strokes/_3_leftStroke.svg'
-
-const Newsletter = () => {
-  return (
-    <SectionWrapper pt={100} pb={250}>
-      <div className="relative w-screen">
-        <div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[10rem] left-[-30rem] largeTablet:left-[-15rem]">
-          <Image alt="Doodles" src={StrokeL3} />
-        </div>
-        <div className="absolute largeTablet:block top-[-14rem] largeTablet:-top-[22rem] right-[-34rem] largeTablet:-right-[32rem]">
-          <Image alt="Doodles" src={StrokeR3} />
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center gap-y-8">
-        <Heading alignSmall="center">
-          $orange-to-yellowThe fast track$orange-to-yellow to open source
-        </Heading>
-
-        <Typography alignSmall="center" variant="body1" >
-          Stay up to date with the latest OpenSauced news and trends.
-        </Typography>
-
-        <GradientBorderWrapper>
-          <form
-            className="relative box-border px-4 flex items-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
-            name="newsletter"
-            action="?success=true"
-            data-netlify="true"
-            data-netlify-honeypot="bot-field"
-            autoComplete="off"
-          >
-            <div hidden aria-hidden="true">
-              <label>
-                Try your luck
-                <input type="hidden" value="bot-field" name="newsletter" />
-              </label>
-            </div>
-            <input
-              placeholder="Email"
-              name="Your email"
-              type="email"
-              className="pr-4 outline-none focus:outline-none bg-[#211E1C] w-[180px] largeTablet:w-[290px]"
-            ></input>
-            <button
-              className=" text-brandOrange text-sm cursor-pointer"
-              type="submit"
-            >
-              Subscribe
-            </button>
-          </form>
-        </GradientBorderWrapper>
-      </div>
-    </SectionWrapper>
-  )
-}
-
-export default Newsletter
\ No newline at end of file
diff --git a/pages/maintainers/index.tsx b/pages/maintainers/index.tsx
index 6e9254005..18d0da62a 100644
--- a/pages/maintainers/index.tsx
+++ b/pages/maintainers/index.tsx
@@ -1,86 +1,86 @@
 import type { NextPage } from 'next'
 import {
-  getAllBlogs,
-  getCommonData,
-  getFeaturedBlogs,
-  getMaintainersPageData
+    getAllBlogs,
+    getCommonData,
+    getFeaturedBlogs,
+    getMaintainersPageData
 } from '../../lib/sanity'
 import {
-  Blog as SanityBlog,
-  Footer as SanityFooter,
-  MaintainersPage as SanityMaintainersPage,
-  Navigation as SanityNavigation,
-  Seo as SanitySeo,
-  User as SanityUser,
+    Blog as SanityBlog,
+    Footer as SanityFooter,
+    MaintainersPage as SanityMaintainersPage,
+    Navigation as SanityNavigation,
+    Seo as SanitySeo,
+    User as SanityUser,
 } from '../../sanity.types'
 import Hero from '../../components/sections/home-page/Hero'
 import Logos from '../../components/sections/home-page/Logos'
 import Background from '../../components/sections/maintainers/Background'
 import Blogs from '../../components/sections/maintainers/blogs/Blogs'
 import PageLayout from '../../components/common/layout/PageLayout'
-import Newsletter from '../../components/sections/maintainers/Newsletter'
+import Newsletter from '../../components/sections/home-page/Newsletter'
 import TeamsFeatures from '../../components/sections/home-page/features/TeamsFeatures'
 import CTA from '../../components/sections/teams/CTA'
 
 interface MaintainersPageProps {
-  data: {
-    commonData: {
-      navigationLinks: SanityNavigation[]
-      seoData: SanitySeo
-      footer: SanityFooter[]
+    data: {
+        commonData: {
+            navigationLinks: SanityNavigation[]
+            seoData: SanitySeo
+            footer: SanityFooter[]
+        }
+        maintainersPageData: SanityMaintainersPage
+        blogs: SanityBlog[]
+        featuredBlogs: SanityBlog[]
     }
-    maintainersPageData: SanityMaintainersPage
-    blogs: SanityBlog[]
-    featuredBlogs: SanityBlog[]
-  }
 }
 
 const MaintainersPage: NextPage<MaintainersPageProps> = ({
-  data: { commonData, maintainersPageData, blogs, featuredBlogs },
+    data: { commonData, maintainersPageData, blogs, featuredBlogs },
 }) => {
-  const displayBlogs = [...blogs, ...featuredBlogs].sort(
-    (a, b) => +new Date(b._createdAt) - +new Date(a._createdAt)
-  )
+    const displayBlogs = [...blogs, ...featuredBlogs].sort(
+        (a, b) => +new Date(b._createdAt) - +new Date(a._createdAt)
+    )
 
-  return (
-    <PageLayout
-      seoData={commonData.seoData}
-      navigationURLs={commonData.navigationLinks}
-      BackgroundWrapper={Background}
-    >
-      <Hero data={maintainersPageData.hero as unknown as SanityMaintainersPage['hero']} />
-      <Logos data={maintainersPageData.hero?.users as unknown as SanityUser[] || []} />
-      <TeamsFeatures topUseCase={maintainersPageData.topUseCase} features={maintainersPageData.features} />
-      <CTA data={maintainersPageData.ctaSection} />
-      <Blogs 
-        data={{
-          // _type: "blogSection",
-          title: "Our secret sauce",
-          heading: "$yellow-to-orange OpenSauced$yellow-to-orange Blog",
-          description: "Musings on the open-source community, engineering, and the future of talent acquisition."
-        }} 
-        blogs={displayBlogs.slice(0, 4)}  />
-      <Newsletter />
-    </PageLayout>
-  )
+    return (
+        <PageLayout
+            seoData={commonData.seoData}
+            navigationURLs={commonData.navigationLinks}
+            BackgroundWrapper={Background}
+        >
+            <Hero data={maintainersPageData.hero as unknown as SanityMaintainersPage['hero']} />
+            <Logos data={maintainersPageData.hero?.users as unknown as SanityUser[] || []} />
+            <TeamsFeatures topUseCase={maintainersPageData.topUseCase} features={maintainersPageData.features} />
+            <CTA data={maintainersPageData.ctaSection} />
+            <Blogs
+                data={{
+                    // _type: "blogSection",
+                    title: "Our secret sauce",
+                    heading: "$yellow-to-orange OpenSauced$yellow-to-orange Blog",
+                    description: "Musings on the open-source community, engineering, and the future of talent acquisition."
+                }}
+                blogs={displayBlogs.slice(0, 4)} />
+            <Newsletter />
+        </PageLayout>
+    )
 }
 
 export default MaintainersPage
 
 export async function getStaticProps() {
-  const [commonData, maintainersPageData, featuredBlogs, blogs] = await Promise.all([
-    getCommonData(),
-    getMaintainersPageData(),
-    getFeaturedBlogs(),
-    getAllBlogs(),
-  ])
+    const [commonData, maintainersPageData, featuredBlogs, blogs] = await Promise.all([
+        getCommonData(),
+        getMaintainersPageData(),
+        getFeaturedBlogs(),
+        getAllBlogs(),
+    ])
 
-  const data = { commonData, maintainersPageData, featuredBlogs, blogs }
+    const data = { commonData, maintainersPageData, featuredBlogs, blogs }
 
-  return {
-    props: {
-      data,
-    },
-    revalidate: 30,
-  }
+    return {
+        props: {
+            data,
+        },
+        revalidate: 30,
+    }
 }