components/FormSubscribe.js

@@ -34,7 +34,8 @@ const FormSubscribe = () => {
   return (
     <div>
       <form
-        className="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin"
+        // className="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin"
+        className="flex flex-col sm:flex-row lg:justify-begin"
         onSubmit={subscribe}
       >
         <div>
@@ -46,7 +47,7 @@ const FormSubscribe = () => {
             className="appearance-none w-full px-4 py-2 border border-neutrals-cool-grey-300 text-base rounded-md text-neutrals-cool-grey-900 bg-white dark:bg-black placeholder-gray-500 focus:outline-none focus:ring-primary-400 dark:focus:border-primary-600 lg:max-w-xs"
             id="email-input"
             name="email"
-            placeholder={subscribed ? "You're subscribed !" : 'Enter your email'}
+            placeholder={subscribed ? "You're subscribed !  🎉" : 'Enter your email'}
             ref={inputEl}
             required
             type="email"
@@ -65,9 +66,9 @@ const FormSubscribe = () => {
           </button>
         </div>
       </form>
-      <p className="text-sm text-gray-500 dark:text-gray-400 pt-2 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin">
+      {/* <p className="text-sm text-gray-500 dark:text-gray-400 pt-2 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin">
         {message ? message : 'Enter your email address to be notified of new posts'}
-      </p>
+      </p> */}
     </div>
   )
 }

data/siteMetadata.js

@@ -25,7 +25,7 @@ const siteMetadata = {
   newsletter: {
     // supports mailchimp, buttondown, convertkit
     // Please add  your .env file and modify it according to your selection
-    provider: '',
+    provider: 'convertkit',
   },
   comment: {
     // Select a provider and use the environment variables associated to it

pages/index.js

@@ -5,7 +5,7 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import formatDate from '@/lib/utils/formatDate'
 
-import { FormSubscribe } from '@/components/FormSuscribe'
+import { FormSubscribe } from '@/components/FormSubscribe'
 
 const MAX_DISPLAY = 5
 
@@ -19,7 +19,6 @@ export default function Home({ posts }) {
   return (
     <>
       <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
-      {siteMetadata.newsletter.provider !== '' && <FormSubscribe />}
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
@@ -92,6 +91,16 @@ export default function Home({ posts }) {
           </Link>
         </div>
       )}
+      {siteMetadata.newsletter.provider !== '' && (
+        <div className="pt-6 pb-8 space-y-2 md:space-y-5">
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <h1 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:text-6xl ">
+              Newsletter
+            </h1>
+            <FormSubscribe />
+          </div>
+        </div>
+      )}
     </>
   )
 }