Feat: Add the Newsletter feature to the website.

components/Newsletter.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+
+interface NewsletterFormProps {
+  wrapperClassName?: string
+  className?: string
+}
+const NewsletterForm: React.FC<NewsletterFormProps> = ({ wrapperClassName = '', className = '' }) => { 
+  const [email, setEmail] = useState('')
+  const [username, setUsername] = useState('')
+
+  // const handleSubmit = (e: any) => {
+  //   e.preventDefault()
+  //   // Handle form submission here, such as sending a request to subscribe the user
+  // }
+
+  // const handleFileChange = (e: any) => {
+
+  // }
+
+  return (
+    <section
+      className={classnames('w-[100vw]  mx-auto flex items-center justify-center bg-[#090A11]', wrapperClassName)}>
+      <div className={classnames('w-full max-w-[900px] text-center px-5 py-9  bg-[#090A11] relative', className)}>
+
+        <h3 className=' font-bold tracking-heading mb-4 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 className='flex flex-col md:flex-row gap-4'>
+          <input
+            type='text'
+            name='username'
+            placeholder='Your Name'
+            className='form-input block w-full py-3 text-lg sm:text-lg sm:leading-5  md:flex-1 rounded-md px-5 bg-gray-200'
+            value={username}
+            onChange={(e: any) => setUsername(e.target.value)}
+          />
+          <input
+            type='email'
+            name='email'
+            placeholder='Your Email'
+            className='form-input block w-full py-3 text-lg sm:text-lg sm:leading-5  md:flex-1 rounded-md px-5 bg-gray-200'
+            value={email}
+            onChange={(e: any) => setEmail(e.target.value)}
+          />
+          <button
+            type='submit'
+            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>
+        </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

@@ -320,7 +320,7 @@ const Home = (props: any) => {
         <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 '>
             <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>
+            <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>
 

pages/newsletter/index.page.tsx

@@ -0,0 +1,16 @@
+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-[calc(100vh-340px)] bg-white' />
+      </Layout>
+
+    </>
+  )
+}
+
+export default index