Feat: Add the Newsletter feature to the website.

components/Newsletter.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+
+interface NewsletterFormProps {
+  wrapperClassName?: string
+  className?: string
+  background?: 'white' | 'black'
+}
+
+const NewsletterForm: React.FC<NewsletterFormProps> = ({ wrapperClassName = '', className = '', background = 'white' }) => { 
+  const [email, setEmail] = useState('')
+  const [username, setUsername] = useState('')
+  const formAction = "https://json-schema.us8.list-manage.com/subscribe/post?u=ef8789d5789a6aff8113a701d&amp;id=11103c248b&amp;f_id=00822be0f0"
+
+  return (
+    <section
+      className={classnames('w-[100vw]  mx-auto flex items-center justify-center ', background === 'white' ? 'bg-white text-black' : 'bg-transparent text-white', wrapperClassName)}>
+      <div className={classnames('w-full max-w-[900px] text-center px-5 py-9 relative', background === 'white' ? 'bg-white' : 'bg-transparent', className)}>
+
+        <h3 className=' font-bold tracking-heading mb-4 text-h4 md:text-h3  px-5'>
+            Subscribe to our newsletter to receive news about Json Schema.
+        </h3>
+        <p
+          className='text-lg  mb-8'
+        >
+            We respect your inbox. No spam, promise ✌️
+        </p>
+        <form action={formAction} method="post" className='flex flex-col md:flex-row gap-4'>
+          <input
+            type='text'
+            name='FNAME'
+            placeholder='Your Name'
+            className= {classnames('form-input block w-full py-3 text-lg h-[38px] sm:h-[45px]  sm:text-lg sm:leading-5 border-2  md:flex-1 rounded px-5 bg-gray-200 text-black', background == 'black' ? 'bg-white' : '')}
+            value={username}
+            onChange={(e: any) => setUsername(e.target.value)}
+          />
+          <input
+            type='email'
+            name='EMAIL'
+            placeholder='Your Email'
+            className= {classnames('form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5   h-[38px]  sm:h-[45px]  md:flex-1 rounded px-5 bg-gray-200 text-black', background == 'black' ? 'bg-white' : '')}
+            value={email}
+            onChange={(e: any) => setEmail(e.target.value)}
+          />
+          <button
+            type='submit'
+            className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 md:flex-1 text-white'
+            // className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
+          >
+            <span className='inline-block'>Subscribe</span>
+          </button>
+          <div className="display: hidden">
+            <input type="text" name="b_ef8789d5789a6aff8113a701d_11103c248b" value=""/>
+          </div>
+        </form>
+      </div>
+
+    </section>
+  )
+}
+
+export default NewsletterForm

package.json

@@ -11,7 +11,8 @@
     "export": "next export",
     "lint": "eslint . --ext .tsx --ext .ts --max-warnings 0",
     "lint-fix": "eslint . --ext .tsx --ext .ts --fix --max-warnings 0",
-    "ts": "tsc --noEmit"
+    "ts": "tsc --noEmit",
+    "test": "jest tests/endtoend/broken_link_tests.ts"
   },
   "engines": {
     "node": "^20.0.0"
@@ -43,6 +44,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.1",
+    "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^20.0.0",
     "@types/react": "18.2.37",
@@ -60,7 +62,9 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "jest": "^29.7.0",
     "postcss": "^8.4.31",
+    "puppeteer": "^22.0.0",
     "tailwindcss": "^3.3.5",
     "typescript": "5.2.2"
   }

pages/index.page.tsx

@@ -10,7 +10,7 @@ import TextTruncate from 'react-text-truncate'
 
 import { Headline4 } from '~/components/Headlines'
 import { GetStaticProps } from 'next'
-
+import Newsletter from '~/components/Newsletter'
 /* eslint-disable */
 import axios from 'axios'
 import ical from 'node-ical'
@@ -317,11 +317,12 @@ const Home = (props: any) => {
         </section>
 
         {/* News & Blogs */}
-        <section className='w-full h-[300px] lg:h-[367px] bg-gradient-to-r from-primary from-1.95% to-endBlue clip-both'>
-          <div className='lg:w-full mx-auto text-center mt-28 '>
+        <section className='w-full bg-gradient-to-r from-primary from-1.95% to-endBlue clip-both'>
+          <Newsletter background='black' wrapperClassName=' my-[90px] px-5 sm:px-10 md:px-12 lg:w-full' className='' />
+          {/* <div className='lg:w-full mx-auto text-center mt-28 '>
             <h2 className='text-h3mobile lg:text-h3 text-white mb-6'>Start contributing to JSON Schema</h2>
-            <button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary text-white font-semibold'><a href='https://github.com/json-schema-org#-contributing-to-json-schema'>Contribute</a></button>
-          </div>
+            <button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary text-white font-semibold'><a href='/newsletter'>Subscribe</a></button>
+          </div> */}
         </section>
 
         {/* Sponsors */}

pages/newsletter/index.page.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import NewsletterForm from '~/components/Newsletter'
+import Layout from '~/components/Layout'
+
+const index = () => {
+  return (
+    <>
+      <Layout>
+        <NewsletterForm className='pt-[100px] bg-white text-black' wrapperClassName='h-full sm:h-[calc(100vh-100px)]  bg-white py-[50px] sm:py-0  px-5 sm:px-10 lg:w-full' />
+      </Layout>
+    </>
+  )
+}
+
+export default index