From 640dc3347365fbf1b78916b9a1dad4670537321c Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sun, 22 Mar 2026 01:50:32 +0000
Subject: [PATCH 1/4] Fix: Update footer layout and add Socials section with
 icons

---
 frontend/src/components/Footer.tsx | 83 +++++++++++++-----------------
 frontend/src/utils/constants.ts    |  4 ++
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index ebc9c0e3ce..192cf4bc96 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -28,8 +28,9 @@ export default function Footer() {
 
   return (
     <footer className="mt-auto w-full border-t-1 border-t-slate-300 bg-slate-200 xl:max-w-full dark:border-t-slate-600 dark:bg-slate-800">
-      <div className="grid w-full place-content-center gap-6 px-4 py-4 text-slate-800 md:py-8 dark:text-slate-200">
-        <div className="grid w-full sm:grid-cols-2 sm:gap-x-10 sm:gap-y-6 md:grid-cols-4 md:gap-x-14 lg:gap-x-20">
+      <div className="w-full px-4 py-4 text-slate-800 md:px-8 md:py-8 dark:text-slate-200">
+        <div className="mx-auto grid w-full max-w-6xl gap-6">
+          <div className="grid w-full sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6 md:grid-cols-[repeat(5,max-content)] md:justify-between md:gap-x-8 lg:gap-x-8">
           {footerSections.map((section: Section) => (
             <div key={section.title} className="flex flex-col gap-4">
               {/*link*/}
@@ -57,6 +58,10 @@ export default function Footer() {
               >
                 {section.links.map((link) => {
                   const isExternal = link.href?.startsWith('http')
+                  const Socials = section.title === 'Socials'
+                    ? footerIcons.find((icon) => icon.label === link.text)
+                    : undefined
+                  const SocialIcon = Socials?.icon
 
                   return (
                     <div key={link.href || `span-${link.text}`} className="py-1">
@@ -64,11 +69,15 @@ export default function Footer() {
                         <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
                       ) : (
                         <Link
-                          className="rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
+                          className={`rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100 ${
+                            section.title === 'Socials' ? 'inline-flex items-center gap-2' : ''
+                          }`}
                           href={link.href || '/'}
                           target={isExternal ? '_blank' : undefined}
                           rel={isExternal ? 'noopener noreferrer' : undefined}
+                          aria-label={section.title === 'Socials' ? `OWASP Nest ${link.text}` : undefined}
                         >
+                          {SocialIcon && <SocialIcon className="h-4 w-4" />}
                           {link.text}
                         </Link>
                       )}
@@ -78,29 +87,10 @@ export default function Footer() {
               </div>
             </div>
           ))}
-        </div>
-
-        {/* Social Media Icons Section */}
-        <div className="mb-0 flex flex-row justify-center gap-6">
-          {footerIcons.map((social) => {
-            const SocialIcon = social.icon
-            return (
-              <Link
-                key={social.label}
-                href={social.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label={`OWASP Nest ${social.label}`}
-                className="rounded-full p-2 text-slate-600 transition-colors duration-200 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
-              >
-                <SocialIcon className="h-4 w-4" />
-              </Link>
-            )
-          })}
-        </div>
+          </div>
 
-        {/* Logos Section */}
-        <div className="flex items-center justify-center gap-6">
+          {/* Logos Section */}
+          <div className="flex items-center justify-center gap-6">
           <Link
             href="https://owasp.org/"
             target="_blank"
@@ -134,30 +124,31 @@ export default function Footer() {
             />
             <span className="text-lg font-semibold text-slate-800 dark:text-slate-200">Nest</span>
           </Link>
-        </div>
+          </div>
 
-        {/* Footer bottom section with copyright and version */}
-        <div className="grid w-full place-content-center">
-          <div className="flex w-full flex-col items-center gap-2 sm:flex-col sm:text-left">
-            <p className="text-sm text-slate-600 dark:text-slate-400">
-              © <span id="year">{new Date().getFullYear()}</span> OWASP Nest. All rights reserved.
-            </p>
-            {RELEASE_VERSION && (
+          {/* Footer bottom section with copyright and version */}
+          <div className="grid w-full place-content-center">
+            <div className="flex w-full flex-col items-center gap-2 sm:flex-col sm:text-left">
               <p className="text-sm text-slate-600 dark:text-slate-400">
-                <Link
-                  className="rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
-                  href={
-                    ENVIRONMENT === 'production'
-                      ? `https://github.com/OWASP/Nest/releases/tag/${RELEASE_VERSION}`
-                      : `https://github.com/OWASP/Nest/commit/${RELEASE_VERSION.split('-').pop()}`
-                  }
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <span>v{RELEASE_VERSION}</span>
-                </Link>
+                © <span id="year">{new Date().getFullYear()}</span> OWASP Nest. All rights reserved.
               </p>
-            )}
+              {RELEASE_VERSION && (
+                <p className="text-sm text-slate-600 dark:text-slate-400">
+                  <Link
+                    className="rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
+                    href={
+                      ENVIRONMENT === 'production'
+                        ? `https://github.com/OWASP/Nest/releases/tag/${RELEASE_VERSION}`
+                        : `https://github.com/OWASP/Nest/commit/${RELEASE_VERSION.split('-').pop()}`
+                    }
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <span>v{RELEASE_VERSION}</span>
+                  </Link>
+                </p>
+              )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 01b90cad6d..1d3d1dd0f1 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -102,6 +102,10 @@ export const footerSections: Section[] = [
       { text: 'Team', href: 'https://owasp.org/corporate/' },
     ],
   },
+  {
+    title: 'Socials',
+    links: footerIcons.map((social) => ({ href: social.href, text: social.label })),
+  },
 ]
 
 export const tooltipStyle = {

From 56866dc8bac2665d67655ca962cc56f0fdf99569 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sun, 22 Mar 2026 03:01:04 +0000
Subject: [PATCH 2/4] Fix: Adjust footer padding for improved layout
 consistency

---
 frontend/src/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 192cf4bc96..905cc74305 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -28,7 +28,7 @@ export default function Footer() {
 
   return (
     <footer className="mt-auto w-full border-t-1 border-t-slate-300 bg-slate-200 xl:max-w-full dark:border-t-slate-600 dark:bg-slate-800">
-      <div className="w-full px-4 py-4 text-slate-800 md:px-8 md:py-8 dark:text-slate-200">
+      <div className="w-full px-10 py-4 text-slate-800 md:px-8 md:py-8 dark:text-slate-200">
         <div className="mx-auto grid w-full max-w-6xl gap-6">
           <div className="grid w-full sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6 md:grid-cols-[repeat(5,max-content)] md:justify-between md:gap-x-8 lg:gap-x-8">
           {footerSections.map((section: Section) => (

From 4b88fbfbc83b136d56838948f46c011f1d94f759 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sun, 22 Mar 2026 04:54:48 +0000
Subject: [PATCH 3/4] fixed make check-test errors

---
 frontend/src/components/Footer.tsx | 196 +++++++++++++++++------------
 1 file changed, 114 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 905cc74305..e031a6471b 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -26,104 +26,136 @@ export default function Footer() {
     setOpenSection((prev) => (prev === title ? null : title))
   }, [])
 
+  const hasSocialSection = footerSections.some((section) =>
+    section.title.toLowerCase().startsWith('social')
+  )
+
+  const normalizedFooterSections = footerSections
+
   return (
     <footer className="mt-auto w-full border-t-1 border-t-slate-300 bg-slate-200 xl:max-w-full dark:border-t-slate-600 dark:bg-slate-800">
       <div className="w-full px-10 py-4 text-slate-800 md:px-8 md:py-8 dark:text-slate-200">
         <div className="mx-auto grid w-full max-w-6xl gap-6">
           <div className="grid w-full sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6 md:grid-cols-[repeat(5,max-content)] md:justify-between md:gap-x-8 lg:gap-x-8">
-          {footerSections.map((section: Section) => (
-            <div key={section.title} className="flex flex-col gap-4">
-              {/*link*/}
-              <Button
-                disableAnimation
-                onPress={() => toggleSection(section.title)}
-                className="flex w-full items-center justify-between rounded-md bg-transparent pl-0 text-left text-lg font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 md:justify-start md:gap-2 lg:cursor-default"
-                aria-expanded={openSection === section.title}
-                aria-controls={`footer-section-${section.title}`}
-              >
-                <h3>{section.title}</h3>
-                {openSection === section.title ? (
-                  <FaChevronUp className="h-4 w-4 transition-transform duration-200 lg:hidden" />
-                ) : (
-                  <FaChevronDown className="h-4 w-4 transition-transform duration-200 lg:hidden" />
-                )}
-              </Button>
-              <div
-                id={`footer-section-${section.title}`}
-                className={`flex flex-col gap-2 text-sm transition-all duration-300 ease-in-out ${
-                  openSection === section.title
-                    ? 'max-h-96'
-                    : 'max-h-0 overflow-hidden lg:max-h-full lg:overflow-visible'
-                }`}
-              >
-                {section.links.map((link) => {
-                  const isExternal = link.href?.startsWith('http')
-                  const Socials = section.title === 'Socials'
-                    ? footerIcons.find((icon) => icon.label === link.text)
-                    : undefined
-                  const SocialIcon = Socials?.icon
+            {normalizedFooterSections.map((section: Section) => (
+              <div key={section.title} className="flex flex-col gap-4">
+                {/*link*/}
+                <Button
+                  disableAnimation
+                  onPress={() => toggleSection(section.title)}
+                  className="flex w-full items-center justify-between rounded-md bg-transparent pl-0 text-left text-lg font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 md:justify-start md:gap-2 lg:cursor-default"
+                  aria-expanded={openSection === section.title}
+                  aria-controls={`footer-section-${section.title}`}
+                >
+                  <h3>{section.title}</h3>
+                  {openSection === section.title ? (
+                    <FaChevronUp className="h-4 w-4 transition-transform duration-200 lg:hidden" />
+                  ) : (
+                    <FaChevronDown className="h-4 w-4 transition-transform duration-200 lg:hidden" />
+                  )}
+                </Button>
+                <div
+                  id={`footer-section-${section.title}`}
+                  className={`flex flex-col gap-2 text-sm transition-all duration-300 ease-in-out ${
+                    openSection === section.title
+                      ? 'max-h-96'
+                      : 'max-h-0 overflow-hidden lg:max-h-full lg:overflow-visible'
+                  }`}
+                >
+                  {section.links.map((link) => {
+                    const isExternal = link.href?.startsWith('http')
+                    const isSocialSection = section.title.toLowerCase().startsWith('social')
+                    const social = isSocialSection
+                      ? footerIcons.find((icon) => icon.label === link.text)
+                      : undefined
+                    const SocialIcon = social?.icon
 
-                  return (
-                    <div key={link.href || `span-${link.text}`} className="py-1">
-                      {link.isSpan ? (
-                        <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
-                      ) : (
+                    return (
+                      <div key={link.href || `span-${link.text}`} className="py-1">
+                        {link.isSpan ? (
+                          <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
+                        ) : (
+                          <Link
+                            className={`rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100 ${
+                              isSocialSection ? 'inline-flex items-center gap-2' : ''
+                            }`}
+                            href={link.href || '/'}
+                            target={isExternal ? '_blank' : undefined}
+                            rel={isExternal ? 'noopener noreferrer' : undefined}
+                            aria-label={isSocialSection ? `OWASP Nest ${link.text}` : undefined}
+                          >
+                            {SocialIcon && <SocialIcon className="h-4 w-4" />}
+                            {link.text}
+                          </Link>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            ))}
+            {!hasSocialSection && (
+              <div className="flex flex-col gap-4">
+                <h3>Socials</h3>
+                <div className="flex flex-col gap-2 text-sm">
+                  {footerIcons.map((social) => {
+                    const SocialIcon = social.icon
+
+                    return (
+                      <div key={social.label} className="py-1">
                         <Link
-                          className={`rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100 ${
-                            section.title === 'Socials' ? 'inline-flex items-center gap-2' : ''
-                          }`}
-                          href={link.href || '/'}
-                          target={isExternal ? '_blank' : undefined}
-                          rel={isExternal ? 'noopener noreferrer' : undefined}
-                          aria-label={section.title === 'Socials' ? `OWASP Nest ${link.text}` : undefined}
+                          className="inline-flex items-center gap-2 rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
+                          href={social.href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          aria-label={`OWASP Nest ${social.label}`}
                         >
-                          {SocialIcon && <SocialIcon className="h-4 w-4" />}
-                          {link.text}
+                          <SocialIcon className="h-4 w-4" />
+                          {social.label}
                         </Link>
-                      )}
-                    </div>
-                  )
-                })}
+                      </div>
+                    )
+                  })}
+                </div>
               </div>
-            </div>
-          ))}
+            )}
           </div>
 
           {/* Logos Section */}
           <div className="flex items-center justify-center gap-6">
-          <Link
-            href="https://owasp.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
-            aria-label="OWASP Foundation"
-          >
-            <Image
-              src="/img/OWASP_logo.svg"
-              alt="OWASP Logo"
-              width={100}
-              height={32}
-              className="h-8 w-auto dark:invert"
-            />
-          </Link>
+            <Link
+              href="https://owasp.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+              aria-label="OWASP Foundation"
+            >
+              <Image
+                src="/img/OWASP_logo.svg"
+                alt="OWASP Logo"
+                width={100}
+                height={32}
+                className="h-8 w-auto dark:invert"
+              />
+            </Link>
 
-          {/* Vertical Separator */}
-          <div className="h-8 w-px bg-slate-400 dark:bg-white"></div>
+            {/* Vertical Separator */}
+            <div className="h-8 w-px bg-slate-400 dark:bg-white"></div>
 
-          <Link
-            href="/"
-            className="flex items-center gap-2 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
-            aria-label="Nest home"
-          >
-            <Image
-              src={nestLogoSrc}
-              alt="Nest Logo"
-              width={28}
-              height={32}
-              className="h-8 w-auto"
-            />
-            <span className="text-lg font-semibold text-slate-800 dark:text-slate-200">Nest</span>
-          </Link>
+            <Link
+              href="/"
+              className="flex items-center gap-2 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+              aria-label="Nest home"
+            >
+              <Image
+                src={nestLogoSrc}
+                alt="Nest Logo"
+                width={28}
+                height={32}
+                className="h-8 w-auto"
+              />
+              <span className="text-lg font-semibold text-slate-800 dark:text-slate-200">Nest</span>
+            </Link>
           </div>
 
           {/* Footer bottom section with copyright and version */}

From b9fb6f5bab5ba3d4458e33e8ecc9d1b720a02af1 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 30 Mar 2026 14:11:21 +0530
Subject: [PATCH 4/4] fixed the padding between the social items

---
 frontend/src/components/Footer.tsx | 33 ++++++++++++++++++------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index e031a6471b..42e1d27820 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -38,7 +38,7 @@ export default function Footer() {
         <div className="mx-auto grid w-full max-w-6xl gap-6">
           <div className="grid w-full sm:grid-cols-2 sm:gap-x-8 sm:gap-y-6 md:grid-cols-[repeat(5,max-content)] md:justify-between md:gap-x-8 lg:gap-x-8">
             {normalizedFooterSections.map((section: Section) => (
-              <div key={section.title} className="flex flex-col gap-4">
+              <div key={section.title} className="flex flex-col gap-4 pl-2">
                 {/*link*/}
                 <Button
                   disableAnimation
@@ -71,21 +71,28 @@ export default function Footer() {
                     const SocialIcon = social?.icon
 
                     return (
-                      <div key={link.href || `span-${link.text}`} className="py-1">
+                      <div key={link.href || `span-${link.text}`} className="">
                         {link.isSpan ? (
                           <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
+                        ) : isSocialSection ? (
+                          <a
+                            className="flex items-center gap-2 rounded-md py-0.5 text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
+                            href={link.href || '/'}
+                            target={isExternal ? '_blank' : undefined}
+                            rel={isExternal ? 'noopener noreferrer' : undefined}
+                            aria-label={`OWASP Nest ${link.text}`}
+                          >
+                            {SocialIcon && <SocialIcon className="h-4 w-4" />}
+                            <span>{link.text}</span>
+                          </a>
                         ) : (
                           <Link
-                            className={`rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100 ${
-                              isSocialSection ? 'inline-flex items-center gap-2' : ''
-                            }`}
+                            className="flex items-center gap-2 rounded-md py-0.5 text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
                             href={link.href || '/'}
                             target={isExternal ? '_blank' : undefined}
                             rel={isExternal ? 'noopener noreferrer' : undefined}
-                            aria-label={isSocialSection ? `OWASP Nest ${link.text}` : undefined}
                           >
-                            {SocialIcon && <SocialIcon className="h-4 w-4" />}
-                            {link.text}
+                            <span>{link.text}</span>
                           </Link>
                         )}
                       </div>
@@ -95,16 +102,16 @@ export default function Footer() {
               </div>
             ))}
             {!hasSocialSection && (
-              <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-4 pl-2">
                 <h3>Socials</h3>
                 <div className="flex flex-col gap-2 text-sm">
                   {footerIcons.map((social) => {
                     const SocialIcon = social.icon
 
                     return (
-                      <div key={social.label} className="py-1">
-                        <Link
-                          className="inline-flex items-center gap-2 rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
+                      <div key={social.label} className="">
+                        <a
+                          className="flex items-center gap-2 rounded-md py-0.5 text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
                           href={social.href}
                           target="_blank"
                           rel="noopener noreferrer"
@@ -112,7 +119,7 @@ export default function Footer() {
                         >
                           <SocialIcon className="h-4 w-4" />
                           {social.label}
-                        </Link>
+                        </a>
                       </div>
                     )
                   })}