feat: implement horizontal footer layout with modern social media icons

components/Footer/footer.tsx

@@ -1,51 +1,36 @@
 import React, { JSX } from 'react';
 import ILink from '../illustration/link';
-import socials, { SocialWithIcon } from '../../config/socials';
+import Socials from "./socials";
 
 function Footer(): JSX.Element {
   return (
     <div className="container" data-test="footer">
       <div
-        className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3"
+        className="w-full flex flex-row justify-between items-center p-2 md:p-4 gap-4 sm:flex-col sm:gap-3"
         data-test="footer-asyncAPI-logo"
       >
-        <div className="mt-2 text-[14px] text-gray-100 ">
+        {/* Code of Conduct Section */}
+        <div className="text-[16px] md:text-[18px] text-gray-100 flex items-center flex-shrink-0 sm:hidden">
           <a
             href="https://github.com/asyncapi/community/blob/master/CODE_OF_CONDUCT.md"
             target="_blank"
             rel="noreferrer"
             className="hover:underline text-white duration-200 ease-in-out flex items-center"
             data-test="code-of-conduct"
           >
-            <span> Code of Conduct </span>
-            <span>
-              <ILink className="w-4 ml-2" fill="white" />
-            </span>
+            <span>Code of Conduct</span>
+            <ILink className="w-3 md:w-5 ml-1 md:ml-2" fill="white" />
           </a>
         </div>
-        <div></div>
-        <div className="flex items-center justify-between sm:flex-col sm:items-center">
-          <div className="text-white text-center">
-            Made with ❤️ by AsyncAPI contributors. By the community for the
-            community!
-          </div>
-          <div className="w-[0.9px] h-4 bg-white ml-4 sm:hidden" />
-          <div className="ml-4 flex justify-between items-center gap-2 sm:mt-4">
-            {socials.map((social: SocialWithIcon) => {
-              const IconComponent = social.icon;
-              return (
-                <a
-                  key={social.name}
-                  href={social.href}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="rounded-lg flex items-center justify-center hover:border-[#AD20E2] duration-150 ease-in-out"
-                  data-test={`footer-${social.name}`}
-                >
-                  <IconComponent className="w-[20px] h-[20px]" fill="white" />
-                </a>
-              );
-            })}
+
+        {/* "Made with ❤️" and Socials Section - Grouped together */}
+        <div className="flex flex-row items-center gap-4 text-center sm:flex-col sm:items-center">
+          <span className="text-white text-[16px] md:text-[18px] leading-tight">
+            Made with ❤️ by AsyncAPI contributors. By the community for the community!
+          </span>
+          <div className="w-[1px] h-6 bg-white sm:hidden" />
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Socials />
           </div>
         </div>
       </div>

components/Footer/socials.tsx

@@ -0,0 +1,72 @@
+import React, { JSX } from 'react';
+import LinkedIn from '../illustration/Socials/LinkedIn';
+import Github from '../illustration/Socials/Github';
+import X from '../illustration/Socials/X';
+import Youtube from '../illustration/Socials/Youtube';
+
+function Socials(): JSX.Element {
+  return (
+    <div className="social-wrapper" data-test="social-wrapper">
+      <ul className="inline-flex list-none justify-center font-['Poppins',sans-serif]">
+        <li className="icon linkedin relative bg-white rounded-full m-[5px] w-[35px] h-[35px] text-lg flex justify-center items-center flex-col shadow-md cursor-pointer transition-all duration-200 hover:bg-[#0077b5] hover:text-white">
+          <a
+            href="https://www.linkedin.com/company/asyncapi"
+            target="_blank"
+            rel="noreferrer"
+            className="w-full h-full flex justify-center items-center"
+            data-test="footer-Linkedin"
+          >
+            <span className="tooltip absolute top-0 text-sm bg-white text-white py-[5px] px-[8px] rounded-md shadow-md opacity-0 pointer-events-none transition-all duration-300">
+              LinkedIn
+            </span>
+            <LinkedIn className="h-[1em]" fill="currentColor" />
+          </a>
+        </li>
+        <li className="icon github relative bg-white rounded-full m-[5px] w-[35px] h-[35px] text-lg flex justify-center items-center flex-col shadow-md cursor-pointer transition-all duration-200 hover:bg-[#333] hover:text-white">
+          <a
+            href="https://github.com/asyncapi"
+            target="_blank"
+            rel="noreferrer"
+            className="w-full h-full flex justify-center items-center"
+            data-test="footer-Github"
+          >
+            <span className="tooltip absolute top-0 text-sm bg-white text-white py-[5px] px-[8px] rounded-md shadow-md opacity-0 pointer-events-none transition-all duration-300">
+              GitHub
+            </span>
+            <Github className="h-[1.4em]" fill="currentColor" />
+          </a>
+        </li>
+        <li className="icon twitter relative bg-white rounded-full m-[5px] w-[35px] h-[35px] text-lg flex justify-center items-center flex-col shadow-md cursor-pointer transition-all duration-200 hover:bg-[#333] hover:text-white">
+          <a
+            href="https://twitter.com/asyncapispec"
+            target="_blank"
+            rel="noreferrer"
+            className="w-full h-full flex justify-center items-center"
+            data-test="footer-Twitter(X)"
+          >
+            <span className="tooltip absolute top-0 text-sm bg-white text-white py-[5px] px-[8px] rounded-md shadow-md opacity-0 pointer-events-none transition-all duration-300">
+              Twitter
+            </span>
+            <X className="h-[1.4em]" fill="currentColor" />
+          </a>
+        </li>
+        <li className="icon youtube relative bg-white rounded-full m-[5px] w-[35px] h-[35px] text-lg flex justify-center items-center flex-col shadow-md cursor-pointer transition-all duration-200 hover:bg-[#ff0000] hover:text-white">
+          <a
+            href="https://www.youtube.com/asyncapi"
+            target="_blank"
+            rel="noreferrer"
+            className="w-full h-full flex justify-center items-center"
+            data-test="footer-youtube"
+          >
+            <span className="tooltip absolute top-0 text-sm bg-white text-white py-[5px] px-[8px] rounded-md shadow-md opacity-0 pointer-events-none transition-all duration-300">
+              YouTube
+            </span>
+            <Youtube className="h-[1.4em]" fill="currentColor" />
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Socials;

cypress/e2e/Footer.cy.ts

@@ -42,8 +42,8 @@ describe('Footer links', () => {
     cy.wait(350);
     cy.getTestData('footer-Linkedin').invoke('removeAttr', 'target').click();
 
-    cy.origin('https://www.linkedin.com/company/asyncapi/', () => {
-      cy.url().should('eq', 'https://www.linkedin.com/company/asyncapi/');
+    cy.origin('https://www.linkedin.com', () => {
+      cy.url().should('include', 'linkedin.com/company/asyncapi');
     });
   });
 
@@ -52,12 +52,46 @@ describe('Footer links', () => {
     cy.wait(350);
     cy.getTestData('footer-Twitter(X)').invoke('removeAttr', 'target').click();
 
-    cy.origin('https://x.com/asyncapispec', () => {
-      cy.url().should('match', /.*asyncapispec.*/);
+    cy.origin('https://x.com', () => {
+      cy.url().should('include', 'asyncapispec');
     });
   });
 
-  it('Should Contain AsycAPI Conference Logo', () => {
+  it('Should Contain AsyncAPI Conference Logo', () => {
     cy.getTestData('footer-asyncAPI-logo').should('be.visible');
   });
+
+  describe('Social Media Icons', () => {
+    beforeEach(() => {
+      cy.visit('/');
+    });
+
+    it('Should display social media icons', () => {
+      cy.get('.social-wrapper').should('exist');
+      cy.get('.social-wrapper .icon').should('have.length.at.least', 4);
+    });
+
+    const socialPlatforms = [
+      { class: 'linkedin', name: 'LinkedIn' },
+      { class: 'github', name: 'GitHub' },
+      { class: 'twitter', name: 'Twitter' },
+      { class: 'youtube', name: 'YouTube' },
+    ];
+
+    socialPlatforms.forEach((platform) => {
+      it(`Should display tooltip when hovering over ${platform.name} icon`, () => {
+        cy.get(`.social-wrapper .${platform.class} .tooltip`).invoke(
+          'addClass',
+          'show-for-test'
+        );
+        cy.get(`.social-wrapper .${platform.class} .tooltip`).should(
+          'be.visible'
+        );
+        cy.get(`.social-wrapper .${platform.class} .tooltip`).should(
+          'contain',
+          platform.name
+        );
+      });
+    });
+  });
 });