From 059f00cd77f7256cdf31e9b2b93e2edfa46bcfe1 Mon Sep 17 00:00:00 2001
From: Dsp023 <nakkadevisriprasad@gmail.com>
Date: Tue, 10 Feb 2026 11:30:45 +0000
Subject: [PATCH 1/4] fix: improve visibility of newsletter input fields in
 dark mode

---
 components/InputBox.tsx               | 6 ++++--
 components/NewsletterSubscribe.tsx    | 2 ++
 types/components/InputBoxPropsType.ts | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/InputBox.tsx b/components/InputBox.tsx
index 446068f963ad..3c88a178f3c5 100644
--- a/components/InputBox.tsx
+++ b/components/InputBox.tsx
@@ -5,7 +5,7 @@ import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
 /**
  * This component renders input box.
  */
-export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput }: InputBoxProps) {
+export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput, dark = false }: InputBoxProps) {
   return (
     <input
       type={inputType}
@@ -13,7 +13,9 @@ export default function InputBox({ inputType, inputName, placeholder, inputValue
       placeholder={placeholder}
       value={inputValue}
       onChange={(e) => setInput(e.target.value)}
-      className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1'
+      className={`form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1 ${
+        dark ? 'border-zinc-700 bg-zinc-900 text-white placeholder-zinc-500 focus:border-indigo-500 focus:ring-indigo-500' : 'border-gray-300 text-gray-900'
+      }`}
       required
       data-testid={`NewsletterSubscribe-${inputType}-input`}
     />
diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index 6b709f06db77..f6cd613c272d 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -137,6 +137,7 @@ export default function NewsletterSubscribe({
             placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
+            dark={dark}
           />
           <InputBox
             inputType={InputTypes.EMAIL}
@@ -144,6 +145,7 @@ export default function NewsletterSubscribe({
             placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
+            dark={dark}
           />
           <Button
             type={ButtonType.SUBMIT}
diff --git a/types/components/InputBoxPropsType.ts b/types/components/InputBoxPropsType.ts
index eca476898910..ece31e179920 100644
--- a/types/components/InputBoxPropsType.ts
+++ b/types/components/InputBoxPropsType.ts
@@ -20,4 +20,7 @@ export interface InputBoxProps {
 
   /** The function to set value of the input. */
   setInput: (value: string) => void;
+
+  /** If true, the theme of the component will be dark. */
+  dark?: boolean;
 }

From bc348d05648d2f2aac88121fe513018edceddbdc Mon Sep 17 00:00:00 2001
From: Dsp023 <nakkadevisriprasad@gmail.com>
Date: Tue, 10 Feb 2026 13:09:53 +0000
Subject: [PATCH 2/4] fix: resolve linting errors in InputBox

---
 components/InputBox.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/InputBox.tsx b/components/InputBox.tsx
index 3c88a178f3c5..b5cab660e1b4 100644
--- a/components/InputBox.tsx
+++ b/components/InputBox.tsx
@@ -5,7 +5,14 @@ import type { InputBoxProps } from '@/types/components/InputBoxPropsType';
 /**
  * This component renders input box.
  */
-export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput, dark = false }: InputBoxProps) {
+export default function InputBox({
+  inputType,
+  inputName,
+  placeholder,
+  inputValue,
+  setInput,
+  dark = false,
+}: InputBoxProps) {
   return (
     <input
       type={inputType}
@@ -14,7 +21,9 @@ export default function InputBox({ inputType, inputName, placeholder, inputValue
       value={inputValue}
       onChange={(e) => setInput(e.target.value)}
       className={`form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1 ${
-        dark ? 'border-zinc-700 bg-zinc-900 text-white placeholder-zinc-500 focus:border-indigo-500 focus:ring-indigo-500' : 'border-gray-300 text-gray-900'
+        dark
+          ? 'border-zinc-700 bg-zinc-900 text-white placeholder-zinc-500 focus:border-indigo-500 focus:ring-indigo-500'
+          : 'border-gray-300 text-gray-900'
       }`}
       required
       data-testid={`NewsletterSubscribe-${inputType}-input`}

From 5cd28dd60cd181d658a9f4469229c440bd8c9c3e Mon Sep 17 00:00:00 2001
From: Dsp023 <nakkadevisriprasad@gmail.com>
Date: Tue, 10 Feb 2026 13:13:33 +0000
Subject: [PATCH 3/4] fix: resolve additional linting errors in modified files

---
 components/NewsletterSubscribe.tsx    | 67 ++++++++++++++++++---------
 types/components/InputBoxPropsType.ts |  2 +-
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index f6cd613c272d..494b62afa3ee 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -17,7 +17,7 @@ enum FormStatus {
   NORMAL = 'normal',
   LOADING = 'loading',
   SUCCESS = 'success',
-  ERROR = 'error'
+  ERROR = 'error',
 }
 
 interface NewsletterSubscribeProps {
@@ -46,7 +46,7 @@ export default function NewsletterSubscribe({
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',
   type = 'Newsletter',
-  errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug'
+  errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug',
 }: NewsletterSubscribeProps) {
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
@@ -70,15 +70,15 @@ export default function NewsletterSubscribe({
     const data = {
       name,
       email,
-      interest: type
+      interest: type,
     };
 
     fetch('/.netlify/functions/newsletter_subscription', {
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
-        'Content-Type': 'application/json'
-      }
+        'Content-Type': 'application/json',
+      },
     }).then((res) => {
       if (res.status === 200) {
         setFormStatus(FormStatus.SUCCESS);
@@ -92,11 +92,16 @@ export default function NewsletterSubscribe({
 
   if (status === FormStatus.SUCCESS) {
     return (
-      <div className={className} data-testid='NewsletterSubscribe-main'>
-        <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+      <div className={className} data-testid="NewsletterSubscribe-main">
+        <Heading
+          level={HeadingLevel.h3}
+          textColor={headTextColor}
+          typeStyle={HeadingTypeStyle.lg}
+          className="mb-4"
+        >
           {ready ? t('successTitle') : 'Thank you for subscribing!'}
         </Heading>
-        <Paragraph className='mb-8' textColor={paragraphTextColor}>
+        <Paragraph className="mb-8" textColor={paragraphTextColor}>
           {ready ? t('subtitle') : subtitle}
         </Paragraph>
       </div>
@@ -105,13 +110,21 @@ export default function NewsletterSubscribe({
 
   if (status === FormStatus.ERROR) {
     return (
-      <div className={className} data-testid='NewsletterSubscribe-main'>
-        <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+      <div className={className} data-testid="NewsletterSubscribe-main">
+        <Heading
+          level={HeadingLevel.h3}
+          textColor={headTextColor}
+          typeStyle={HeadingTypeStyle.lg}
+          className="mb-4"
+        >
           {ready ? t('errorTitle') : 'Something went wrong'}
         </Heading>
-        <Paragraph className='mb-8' textColor={paragraphTextColor}>
+        <Paragraph className="mb-8" textColor={paragraphTextColor}>
           {ready ? t('errorSubtitle') : errorSubtitle}{' '}
-          <TextLink href='https://github.com/asyncapi/website/issues/new?template=bug.md' target='_blank'>
+          <TextLink
+            href="https://github.com/asyncapi/website/issues/new?template=bug.md"
+            target="_blank"
+          >
             {ready ? t('errorLinkText') : 'here'}
           </TextLink>
         </Paragraph>
@@ -120,20 +133,32 @@ export default function NewsletterSubscribe({
   }
 
   return (
-    <div className={className} data-testid='NewsletterSubscribe-main'>
-      <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+    <div className={className} data-testid="NewsletterSubscribe-main">
+      <Heading
+        level={HeadingLevel.h3}
+        textColor={headTextColor}
+        typeStyle={HeadingTypeStyle.lg}
+        className="mb-4"
+      >
         {ready ? t('title') : title}
       </Heading>
-      <Paragraph className='mb-8' textColor={paragraphTextColor}>
+      <Paragraph className="mb-8" textColor={paragraphTextColor}>
         {ready ? t('subtitle') : subtitle}
       </Paragraph>
       {status === 'loading' ? (
-        <Loader loaderText={'Waiting for response...'} loaderIcon={<IconCircularLoader dark />} dark={dark} />
+        <Loader
+          loaderText={'Waiting for response...'}
+          loaderIcon={<IconCircularLoader dark />}
+          dark={dark}
+        />
       ) : (
-        <form className='flex flex-col gap-4 md:flex-row' onSubmit={handleSubmit}>
+        <form
+          className="flex flex-col gap-4 md:flex-row"
+          onSubmit={handleSubmit}
+        >
           <InputBox
             inputType={InputTypes.TEXT}
-            inputName='name'
+            inputName="name"
             placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
@@ -141,7 +166,7 @@ export default function NewsletterSubscribe({
           />
           <InputBox
             inputType={InputTypes.EMAIL}
-            inputName='email'
+            inputName="email"
             placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
@@ -150,8 +175,8 @@ export default function NewsletterSubscribe({
           <Button
             type={ButtonType.SUBMIT}
             text={ready ? t('subscribeBtn') : 'Subscribe'}
-            className='mt-2 w-full md:mr-2 md:mt-0 md:flex-1'
-            href=''
+            className="mt-2 w-full md:mr-2 md:mt-0 md:flex-1"
+            href=""
           />
         </form>
       )}
diff --git a/types/components/InputBoxPropsType.ts b/types/components/InputBoxPropsType.ts
index ece31e179920..4882da110ab2 100644
--- a/types/components/InputBoxPropsType.ts
+++ b/types/components/InputBoxPropsType.ts
@@ -1,7 +1,7 @@
 export enum InputTypes {
   TEXT = 'text',
   EMAIL = 'email',
-  NUMBER = 'number'
+  NUMBER = 'number',
 }
 export interface InputBoxProps {
   // eslint-disable-next-line prettier/prettier

From 5297dfb3685727d025308e894e2d8103ed3c111f Mon Sep 17 00:00:00 2001
From: Dsp023 <nakkadevisriprasad@gmail.com>
Date: Tue, 10 Feb 2026 13:15:30 +0000
Subject: [PATCH 4/4] fix: enforce strict prettier formatting to match project
 rules

---
 components/InputBox.tsx               |  2 +-
 components/NewsletterSubscribe.tsx    | 67 +++++++++------------------
 types/components/InputBoxPropsType.ts |  2 +-
 3 files changed, 23 insertions(+), 48 deletions(-)

diff --git a/components/InputBox.tsx b/components/InputBox.tsx
index b5cab660e1b4..0565d31fb9a2 100644
--- a/components/InputBox.tsx
+++ b/components/InputBox.tsx
@@ -11,7 +11,7 @@ export default function InputBox({
   placeholder,
   inputValue,
   setInput,
-  dark = false,
+  dark = false
 }: InputBoxProps) {
   return (
     <input
diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index 494b62afa3ee..f6cd613c272d 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -17,7 +17,7 @@ enum FormStatus {
   NORMAL = 'normal',
   LOADING = 'loading',
   SUCCESS = 'success',
-  ERROR = 'error',
+  ERROR = 'error'
 }
 
 interface NewsletterSubscribeProps {
@@ -46,7 +46,7 @@ export default function NewsletterSubscribe({
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',
   type = 'Newsletter',
-  errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug',
+  errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug'
 }: NewsletterSubscribeProps) {
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
@@ -70,15 +70,15 @@ export default function NewsletterSubscribe({
     const data = {
       name,
       email,
-      interest: type,
+      interest: type
     };
 
     fetch('/.netlify/functions/newsletter_subscription', {
       method: 'POST',
       body: JSON.stringify(data),
       headers: {
-        'Content-Type': 'application/json',
-      },
+        'Content-Type': 'application/json'
+      }
     }).then((res) => {
       if (res.status === 200) {
         setFormStatus(FormStatus.SUCCESS);
@@ -92,16 +92,11 @@ export default function NewsletterSubscribe({
 
   if (status === FormStatus.SUCCESS) {
     return (
-      <div className={className} data-testid="NewsletterSubscribe-main">
-        <Heading
-          level={HeadingLevel.h3}
-          textColor={headTextColor}
-          typeStyle={HeadingTypeStyle.lg}
-          className="mb-4"
-        >
+      <div className={className} data-testid='NewsletterSubscribe-main'>
+        <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
           {ready ? t('successTitle') : 'Thank you for subscribing!'}
         </Heading>
-        <Paragraph className="mb-8" textColor={paragraphTextColor}>
+        <Paragraph className='mb-8' textColor={paragraphTextColor}>
           {ready ? t('subtitle') : subtitle}
         </Paragraph>
       </div>
@@ -110,21 +105,13 @@ export default function NewsletterSubscribe({
 
   if (status === FormStatus.ERROR) {
     return (
-      <div className={className} data-testid="NewsletterSubscribe-main">
-        <Heading
-          level={HeadingLevel.h3}
-          textColor={headTextColor}
-          typeStyle={HeadingTypeStyle.lg}
-          className="mb-4"
-        >
+      <div className={className} data-testid='NewsletterSubscribe-main'>
+        <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
           {ready ? t('errorTitle') : 'Something went wrong'}
         </Heading>
-        <Paragraph className="mb-8" textColor={paragraphTextColor}>
+        <Paragraph className='mb-8' textColor={paragraphTextColor}>
           {ready ? t('errorSubtitle') : errorSubtitle}{' '}
-          <TextLink
-            href="https://github.com/asyncapi/website/issues/new?template=bug.md"
-            target="_blank"
-          >
+          <TextLink href='https://github.com/asyncapi/website/issues/new?template=bug.md' target='_blank'>
             {ready ? t('errorLinkText') : 'here'}
           </TextLink>
         </Paragraph>
@@ -133,32 +120,20 @@ export default function NewsletterSubscribe({
   }
 
   return (
-    <div className={className} data-testid="NewsletterSubscribe-main">
-      <Heading
-        level={HeadingLevel.h3}
-        textColor={headTextColor}
-        typeStyle={HeadingTypeStyle.lg}
-        className="mb-4"
-      >
+    <div className={className} data-testid='NewsletterSubscribe-main'>
+      <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
         {ready ? t('title') : title}
       </Heading>
-      <Paragraph className="mb-8" textColor={paragraphTextColor}>
+      <Paragraph className='mb-8' textColor={paragraphTextColor}>
         {ready ? t('subtitle') : subtitle}
       </Paragraph>
       {status === 'loading' ? (
-        <Loader
-          loaderText={'Waiting for response...'}
-          loaderIcon={<IconCircularLoader dark />}
-          dark={dark}
-        />
+        <Loader loaderText={'Waiting for response...'} loaderIcon={<IconCircularLoader dark />} dark={dark} />
       ) : (
-        <form
-          className="flex flex-col gap-4 md:flex-row"
-          onSubmit={handleSubmit}
-        >
+        <form className='flex flex-col gap-4 md:flex-row' onSubmit={handleSubmit}>
           <InputBox
             inputType={InputTypes.TEXT}
-            inputName="name"
+            inputName='name'
             placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
@@ -166,7 +141,7 @@ export default function NewsletterSubscribe({
           />
           <InputBox
             inputType={InputTypes.EMAIL}
-            inputName="email"
+            inputName='email'
             placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
@@ -175,8 +150,8 @@ export default function NewsletterSubscribe({
           <Button
             type={ButtonType.SUBMIT}
             text={ready ? t('subscribeBtn') : 'Subscribe'}
-            className="mt-2 w-full md:mr-2 md:mt-0 md:flex-1"
-            href=""
+            className='mt-2 w-full md:mr-2 md:mt-0 md:flex-1'
+            href=''
           />
         </form>
       )}
diff --git a/types/components/InputBoxPropsType.ts b/types/components/InputBoxPropsType.ts
index 4882da110ab2..ece31e179920 100644
--- a/types/components/InputBoxPropsType.ts
+++ b/types/components/InputBoxPropsType.ts
@@ -1,7 +1,7 @@
 export enum InputTypes {
   TEXT = 'text',
   EMAIL = 'email',
-  NUMBER = 'number',
+  NUMBER = 'number'
 }
 export interface InputBoxProps {
   // eslint-disable-next-line prettier/prettier