fix: added necessary ui changes as asked in Design Audit

.github/workflows/lighthouse-ci.yml

@@ -15,63 +15,72 @@ jobs:
       - if: >
           !github.event.pull_request.draft && !(
             (github.actor == 'asyncapi-bot' && (
-              startsWith(github.event.pull_request.title, 'ci: update global workflows') || 
-              startsWith(github.event.pull_request.title, 'chore: update code of conduct') || 
-              startsWith(github.event.pull_request.title, 'ci: update global contribution guide') || 
-              startsWith(github.event.pull_request.title, 'ci: update workflows for go projects') || 
-              startsWith(github.event.pull_request.title, 'ci: update workflows for nodejs projects') || 
-              startsWith(github.event.pull_request.title, 'ci: update release-related workflows for nodejs projects') || 
-              startsWith(github.event.pull_request.title, 'ci: update semantic release config file') || 
-              startsWith(github.event.pull_request.title, 'ci: update generic workflows') || 
+              startsWith(github.event.pull_request.title, 'ci: update global workflows') ||
+              startsWith(github.event.pull_request.title, 'chore: update code of conduct') ||
+              startsWith(github.event.pull_request.title, 'ci: update global contribution guide') ||
+              startsWith(github.event.pull_request.title, 'ci: update workflows for go projects') ||
+              startsWith(github.event.pull_request.title, 'ci: update workflows for nodejs projects') ||
+              startsWith(github.event.pull_request.title, 'ci: update release-related workflows for nodejs projects') ||
+              startsWith(github.event.pull_request.title, 'ci: update semantic release config file') ||
+              startsWith(github.event.pull_request.title, 'ci: update generic workflows') ||
               startsWith(github.event.pull_request.title, 'ci: update workflows for docker-based projects') ||
               startsWith(github.event.pull_request.title, 'chore(release):')
             )) ||
-            (github.actor == 'allcontributors[bot]' && 
+            (github.actor == 'allcontributors[bot]' &&
               startsWith(github.event.pull_request.title, 'docs: add')
             )
           )
         id: should_run
         name: Should Run
-        run: echo "shouldrun=true" >> $GITHUB_OUTPUT
-        
-      - if: steps.should_run.outputs.shouldrun == 'true'
+        run: echo "shouldrun=true" >> $GITHUB_ENV
+
+      - if: env.shouldrun == 'true'
         uses: actions/checkout@v3
 
-      - if: steps.should_run.outputs.shouldrun == 'true'
+      - if: env.shouldrun == 'true'
         name: Await Netlify Preview
-        uses: jakepartusch/wait-for-netlify-action@f1e137043864b9ab9034ae3a5adc1c108e3f1a48 #version 1.4 https://github.com/JakePartusch/wait-for-netlify-action/releases/tag/v1.4
+        uses: jakepartusch/wait-for-netlify-action@f1e137043864b9ab9034ae3a5adc1c108e3f1a48 #version 1.4
         id: netlify
         with:
           site_name: asyncapi-website
           max_timeout: 600
 
-      - if: steps.should_run.outputs.shouldrun == 'true'
+      - if: env.shouldrun == 'true'
         name: Lighthouse Audit
         id: lighthouse_audit
-        uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 #version 10.1 https://github.com/treosh/lighthouse-ci-action/releases/tag/10.1.0
+        uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 #version 10.1
         with:
           urls: |
-            https://deploy-preview-$PR_NUMBER--asyncapi-website.netlify.app/
+            https://deploy-preview-${{ github.event.pull_request.number }}--asyncapi-website.netlify.app/
           configPath: ./.github/workflows/lighthouserc.json
           uploadArtifacts: true
+          artifactName: "lhci-results" # Fixed invalid artifact name
           temporaryPublicStorage: true
-        env:
-          PR_NUMBER: ${{ github.event.pull_request.number}}
 
-      - if: steps.should_run.outputs.shouldrun == 'true'
+      - if: env.shouldrun == 'true'
         name: Lighthouse Score Report
         id: lighthouse_score_report
         uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
-            const links = ${{ steps.lighthouse_audit.outputs.links }}
-            const formatResult = (res) => Math.round((res * 100))
-            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
-            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
+            const output = ${{ toJson(steps.lighthouse_audit.outputs) }};
+            console.log('Lighthouse audit output:', output);
+
+            if (!output || !output.manifest) {
+              core.setFailed('Lighthouse audit output is missing manifest');
+              return;
+            }
+
+            const result = output.manifest[0]?.summary || {};
+            const links = output.links || {};
+            const formatResult = (res) => res ? Math.round(res * 100) : 'N/A';
+
+            Object.keys(result).forEach(key => result[key] = formatResult(result[key]));
+
+            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴';
             const comment = [
-                `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`,
+                `⚡️ [Lighthouse report](${Object.values(links)[0] || '#'}) for the changes in this PR:`,
                 '| Category | Score |',
                 '| --- | --- |',
                 `| ${score(result.performance)} Performance | ${result.performance} |`,
@@ -80,16 +89,18 @@ jobs:
                 `| ${score(result.seo)} SEO | ${result.seo} |`,
                 `| ${score(result.pwa)} PWA | ${result.pwa} |`,
                 ' ',
-                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
-            ].join('\n')
-             core.setOutput("comment", comment);
+                `*Lighthouse ran on [${Object.keys(links)[0] || 'unknown'}](${Object.keys(links)[0] || '#'})*`
+            ].join('\n');
+
+            core.setOutput("comment", comment);
 
-      - if: steps.should_run.outputs.shouldrun == 'true'
+      - if: env.shouldrun == 'true'
         name: LightHouse Statistic Comment
         id: lighthouse_statistic_comment
-        uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd # version 2.8 https://github.com/marocchino/sticky-pull-request-comment/releases/tag/v2.8.0
+        uses: marocchino/sticky-pull-request-comment@efaaab3fd41a9c3de579aba759d2552635e590fd # version 2.8
         with:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           number: ${{ github.event.pull_request.number }}
           header: lighthouse
           message: ${{ steps.lighthouse_score_report.outputs.comment }}
+

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /async
 
 # Install development dependencies
 COPY package.json package-lock.json ./
-RUN npm install
+RUN npm ci
 
 # Copy the rest of the application files
 COPY . .

README.md

@@ -129,7 +129,7 @@ After cloning repository to your local, perform the following steps from the roo
     ```
 2. Start the container:
     ```bash
-    docker run --rm -it -v "$PWD":/async -p 3000:3000 asyncapi-website
+    docker run --rm -it -p 3000:3000 asyncapi-website
     ```
 
 Now you're running AsyncAPI website in a development mode. Container is mapped with your local copy of the website. Whenever you make changes to the code, the website will refresh and changes visible in localhost:3000.
@@ -406,6 +406,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/raj17ce"><img src="https://avatars.githubusercontent.com/u/116947399?v=4?s=100" width="100px;" alt="Raj Patel"/><br /><sub><b>Raj Patel</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=raj17ce" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/nalindalal"><img src="https://avatars.githubusercontent.com/u/116961144?v=4&size=64" width="100px;" alt="Nalin Dalal"/><br /><sub><b>Nalin Dalal</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=nalindalal" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

components/CaseStudyCard.tsx

@@ -23,7 +23,7 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
       {studies.map((study, index) => (
         <a key={index} href={`casestudies/${study.id}`}>
           <div
-            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
+            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4 transition-transform hover:scale-105 hover:shadow-lg'
             data-testid='CaseStudyCard-main'
           >
             <span className='mr-2'>

components/CommunityEvents.tsx

@@ -28,7 +28,7 @@ const CommunityEvents = () => {
       </div>
       <div className='mt-10'>
         {!events || events.length === 0 ? (
-          <div className='flex content-center justify-center'>
+          <div className='flex place-content-center'>
             <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
               No Events. Check back later!
             </Paragraph>

components/NewsletterSubscribe.tsx

@@ -51,11 +51,12 @@ export default function NewsletterSubscribe({
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
   const [status, setStatus] = useState<FormStatus>(FormStatus.NORMAL);
+  const [setEmailError] = useState<(error: string) => void>();
 
   const { t, ready } = useTranslation('common', { keyPrefix: 'newsletterCTA' });
 
   const headTextColor = dark ? 'text-white' : '';
-  const paragraphTextColor = dark ? 'text-gray-300' : '';
+  const paragraphTextColor = 'text-gray-500';
 
   const setFormStatus = (formResponse: FormStatus) => {
     setStatus(formResponse);
@@ -67,6 +68,19 @@ export default function NewsletterSubscribe({
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     setStatus(FormStatus.LOADING);
     event.preventDefault();
+
+    // validate email
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (!emailPattern.test(email)) {
+      setEmailError('Invalid email address');
+      setFormStatus(FormStatus.ERROR);
+
+      return;
+    }
+    setEmailError(''); // Clear error if valid
+    setStatus(FormStatus.LOADING);
+    // end
     const data = {
       name,
       email,

components/dashboard/Header.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import Button from '../buttons/Button';
 import GithubButton from '../buttons/GithubButton';
 import SlackButton from '../buttons/SlackButton';
 
@@ -24,11 +23,6 @@ export default function Header() {
         </div>
       </div>
       <div className='mt-3 flex flex-col gap-x-2 gap-y-1 self-end text-center xs:flex-row'>
-        <Button
-          text='Contribution Guide'
-          href='https://github.com/asyncapi?type=source#-contribute-to-asyncapi'
-          target='_blank'
-        />
         <GithubButton text='View on Github' className='lg:mt-0' />
         <SlackButton className='lg:mt-0' />
       </div>

components/dashboard/table/Filters.tsx

@@ -55,15 +55,14 @@ function useOutsideAlerter(ref: RefObject<any>, setOpen: (open: boolean) => void
  * @param {(area: string) => void} props.setSelectedArea - The function to set the selected area.
  */
 export default function Filters({
-  className,
   allIssues,
   selectedRepo,
   selectedArea,
   setSelectedRepo,
   setSelectedArea
 }: FilterProps) {
   const [open, setOpen] = useState(false);
-  const { x, y, reference, floating, strategy } = useFloating({
+  const { x, y, floating, strategy } = useFloating({
     placement: 'left-start',
     open
   });
@@ -85,14 +84,9 @@ export default function Filters({
 
   return (
     <>
-      <img
-        onClick={() => setOpen(!open)}
-        ref={reference}
-        alt='filter menu'
-        src='/img/illustrations/icons/filters-icon.svg'
-        className={`cursor-pointer ${className}`}
-        data-testid='Filters-img-container'
-      />
+      <svg width='20' height='20' viewBox='0 0 200 250' xlmns='http://www.w3.org/2000/svg'>
+        <polygon points='10, 10 190,10 120,150 120, 220 80,220 80,150' fill='gray' stroke='black' stroke-width='2' />
+      </svg>
 
       <div ref={wrapperRef}>
         {open && (
@@ -118,7 +112,7 @@ export default function Filters({
                 <Select
                   options={uniqueRepos}
                   onChange={setSelectedRepo}
-                  className='mb-4 w-full '
+                  className='mb-4 w-full'
                   selected={selectedRepo}
                 />
                 <h5 className='text-base'>BY AREA</h5>

components/footer/Footer.tsx

@@ -11,6 +11,14 @@ import { initiativeLinks, socialMediaLinks } from './FooterList';
 /**
  * @description The Footer component is the footer for the application.
  */
+
+// FAQ Links
+const faqLinks = [
+  { label: 'General Questions', url: '/faq#general' },
+  { label: 'Getting Started', url: '/faq#getting-started' },
+  { label: 'Technical Support', url: '/faq#technical-support' }
+];
+
 export default function Footer() {
   return (
     <footer className='margin: 0 auto mt-12 bg-dark'>
@@ -43,7 +51,7 @@ export default function Footer() {
                   {initiativeLinks.map((link: InitiativeLink, index: number) => (
                     <li className='py-2' key={index} data-testid='Footer-initiative-links'>
                       <Link href={link.url}>
-                        <span className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
+                        <span className='hover:text-primary text-base leading-6 text-cool-gray transition duration-300 ease-in-out'>
                           {link.label}
                         </span>
                       </Link>
@@ -60,14 +68,34 @@ export default function Footer() {
                 </div>
                 <ul className='justify-center'>
                   <li className='py-2'>
-                    <div className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
+                    <div className='hover:text-primary text-base leading-6 text-cool-gray transition duration-300 ease-in-out'>
                       <a href='mailto:[email protected]'>Email Us</a>
                     </div>
                   </li>
                 </ul>
               </div>
             </div>
 
+            {/* FAQ Section */}
+            <div className='mb-5 px-0 sm:ml-5 sm:px-10'>
+              <div className='py-2'>
+                <div className='text-white'>
+                  <Heading typeStyle={HeadingTypeStyle.smSemibold}>FAQs</Heading>
+                </div>
+              </div>
+              <ul className='justify-center'>
+                {faqLinks.map((link, index) => (
+                  <li className='py-2' key={index}>
+                    <Link href={link.url}>
+                      <span className='hover:text-primary text-base leading-6 text-cool-gray transition duration-300 ease-in-out'>
+                        {link.label}
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
             <div className='mb-5 px-0 sm:ml-5 sm:px-10'>
               <div className='hidden py-2 sm:block'>
                 <div className='mr-12 text-white'>
@@ -78,7 +106,7 @@ export default function Footer() {
                 {socialMediaLinks.map((link: SocialMediaLink, index: number) => (
                   <li className='mr-3 py-2 sm:mr-0' key={index} data-testid='Footer-social-media-links'>
                     <a href={link.url} target='_blank' rel='noopener noreferrer'>
-                      <div className='flex items-center text-cool-gray transition duration-300 ease-in-out hover:text-white'>
+                      <div className='hover:text-primary flex items-center text-cool-gray transition duration-300 ease-in-out'>
                         <span className='sr-only'>{`Follow AsyncAPI on ${link.label}`}</span>
                         {link.icon}
                         <span className='absolute hidden pl-8 pr-5 sm:block'>{link.label}</span>
@@ -101,7 +129,7 @@ export default function Footer() {
               policy and general project policies please see{' '}
               <a
                 href='https://lfprojects.org'
-                className='text-secondary-500 underline transition duration-300 ease-in-out hover:text-white'
+                className='hover:text-primary text-secondary-500 underline transition duration-300 ease-in-out'
                 target='_blank'
                 rel='noopener noreferrer'
               >

components/footer/FooterList.ts

@@ -50,6 +50,11 @@ export interface InitiativeLink {
   label: string;
   url: string;
 }
+export const faqLinks = [
+  { label: 'General Questions', url: '/faq#general' },
+  { label: 'Getting Started', url: '/faq#getting-started' },
+  { label: 'Technical Support', url: '/faq#technical-support' }
+];
 
 export const initiativeLinks: InitiativeLink[] = [
   {

components/icons/Slack.tsx

@@ -8,13 +8,22 @@ export default function IconSlack({ className = '' }) {
   return (
     <svg
       className={className}
-      fill='currentColor'
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 30 30'
-      width='30px'
-      height='30px'
+      stroke="none"
+      fill="currentColor"
+      viewBox="0 0 30 30"
+      width="30px"
+      height="30px"
+      strokeWidth="2"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d='M 11.5 3 C 10.119 3 9 4.119 9 5.5 C 9 6.881 10.119 8 11.5 8 L 14 8 L 14 5.5 C 14 4.119 12.881 3 11.5 3 z M 17.5 3 C 16.119 3 15 4.119 15 5.5 L 15 11.5 C 15 12.881 16.119 14 17.5 14 C 18.881 14 20 12.881 20 11.5 L 20 5.5 C 20 4.119 18.881 3 17.5 3 z M 5.5 9 C 4.119 9 3 10.119 3 11.5 C 3 12.881 4.119 14 5.5 14 L 11.5 14 C 12.881 14 14 12.881 14 11.5 C 14 10.119 12.881 9 11.5 9 L 5.5 9 z M 23.5 9 C 22.119 9 21 10.119 21 11.5 L 21 14 L 23.5 14 C 24.881 14 26 12.881 26 11.5 C 26 10.119 24.881 9 23.5 9 z M 5.5 15 C 4.119 15 3 16.119 3 17.5 C 3 18.881 4.119 20 5.5 20 C 6.881 20 8 18.881 8 17.5 L 8 15 L 5.5 15 z M 11.5 15 C 10.119 15 9 16.119 9 17.5 L 9 23.5 C 9 24.881 10.119 26 11.5 26 C 12.881 26 14 24.881 14 23.5 L 14 17.5 C 14 16.119 12.881 15 11.5 15 z M 17.5 15 C 16.119 15 15 16.119 15 17.5 C 15 18.881 16.119 20 17.5 20 L 23.5 20 C 24.881 20 26 18.881 26 17.5 C 26 16.119 24.881 15 23.5 15 L 17.5 15 z M 15 21 L 15 23.5 C 15 24.881 16.119 26 17.5 26 C 18.881 26 20 24.881 20 23.5 C 20 22.119 18.881 21 17.5 21 L 15 21 z' />
+      <path d="M11.5 3A2.5 2.5 0 0 0 9 5.5a2.5 2.5 0 0 0 2.5 2.5H14V5.5A2.5 2.5 0 0 0 11.5 3Z" />
+      <path d="M17.5 3A2.5 2.5 0 0 0 15 5.5v6a2.5 2.5 0 0 0 5 0v-6A2.5 2.5 0 0 0 17.5 3Z" />
+      <path d="M5.5 9A2.5 2.5 0 0 0 3 11.5a2.5 2.5 0 0 0 2.5 2.5h6a2.5 2.5 0 0 0 0-5h-6Z" />
+      <path d="M23.5 9A2.5 2.5 0 0 0 21 11.5V14h2.5a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 23.5 9Z" />
+      <path d="M5.5 15A2.5 2.5 0 0 0 3 17.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 8 17.5V15H5.5Z" />
+      <path d="M11.5 15A2.5 2.5 0 0 0 9 17.5v6a2.5 2.5 0 0 0 5 0v-6A2.5 2.5 0 0 0 11.5 15Z" />
+      <path d="M17.5 15A2.5 2.5 0 0 0 15 17.5a2.5 2.5 0 0 0 2.5 2.5h6a2.5 2.5 0 0 0 0-5h-6Z" />
+      <path d="M15 21v2.5a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0-2.5-2.5H15Z" />
     </svg>
   );
 }