Merge pull request #137 from aditya-tiwari-zs/FEAT/ADD-COMPANY-LOGO

Feat/add company logo

Author: naveen-bandela-au2

src/components/CompanyTrustedList.jsx

@@ -0,0 +1,71 @@
+import { formatGitHubStars } from '../../utils'
+import company1 from '@/images/logo1.svg'
+import company2 from '@/images/logo2.svg'
+import company3 from '@/images/logo3.svg'
+import company4 from '@/images/logo4.svg'
+import company5 from '@/images/logo5.svg'
+import company6 from '@/images/logo6.svg'
+import company7 from '@/images/logo7.svg'
+import company8 from '@/images/logo8.svg'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+
+const imageLink = [
+  {
+    image: company2,
+  },
+  {
+    image: company3,
+  },
+  {
+    image: company6,
+  },
+  {
+    image: company7,
+  },
+  {
+    image: company8,
+  },
+  {
+    image: company1,
+  },
+  {
+    image: company4,
+  },
+  {
+    image: company5,
+  },
+]
+
+export default function CompanyList() {
+  const [githubStars, setGithubStars] = useState('3500+')
+
+  useEffect(() => {
+    setGithubStars(formatGitHubStars('githubStars'))
+  }, [])
+  return (
+    <div className="bg-gray-900 py-16 sm:py-10">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <h2 className="text-center text-lg/8 font-semibold text-white">
+          Trusted by {githubStars} Developers at Companies Like:
+        </h2>
+        <div className="mt-10 flex flex-wrap justify-center gap-x-0 gap-y-10 sm:max-w-none lg:mx-0">
+          {imageLink.map((item, index) => (
+            <div
+              key={index}
+              className="flex max-h-12 w-1/4 justify-center sm:w-1/6 lg:w-1/5"
+            >
+              <Image
+                alt="Transistor"
+                src={item.image}
+                width={158}
+                height={48}
+                className="max-h-12 object-contain"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/HomePage.jsx

@@ -1,4 +1,5 @@
 'use client'
+import CompanyList from './CompanyTrustedList'
 import DBlistComponent from './DBlistComponent'
 import { Hero } from './Hero'
 import { Testimonials } from './Testimonials'
@@ -7,6 +8,7 @@ export function HomePage() {
   return (
     <div className="m-auto w-auto max-w-screen-2xl">
       <Hero />
+      <CompanyList />
       <div className="not-prose my-12 grid grid-cols-1 gap-6 px-4 md:grid-cols-3 lg:px-8 xl:px-12">
         <QuickLink
           title="Battle-Tested at Enterprise Scale"

src/components/Layout.jsx

@@ -24,7 +24,7 @@ function Header() {
   let [isScrolled, setIsScrolled] = useState(false)
   let pathname = usePathname()
   const isCertificate = pathname.includes('certificate')
-  const isEvents = pathname.includes('events');
+  const isEvents = pathname.includes('events')
   const [githubStars, setGithubStars] = useState(null)
 
   useEffect(() => {
@@ -37,7 +37,11 @@ function Header() {
           throw new Error('Network response was not ok')
         }
         const data = await response.json()
-        if (data?.watchers) setGithubStars(data?.watchers)
+
+        if (data?.watchers) {
+          setGithubStars(data.watchers)
+          localStorage.setItem('githubStars', data.watchers)
+        }
       } catch (error) {
         console.error('Error fetching the repo data:', error)
       }
@@ -82,7 +86,13 @@ function Header() {
           <Search />
         </div>
       )}
-      {isEvents && <div className='relative flex flex-grow basis-0 items-center justify-center sm:block hidden'><h1 className="justify-center items-center text-xl sm:text-3xl md:text-4xl font-bold text-center text-white">Events</h1></div>}
+      {isEvents && (
+        <div className="relative flex hidden flex-grow basis-0 items-center justify-center sm:block">
+          <h1 className="items-center justify-center text-center text-xl font-bold text-white sm:text-3xl md:text-4xl">
+            Events
+          </h1>
+        </div>
+      )}
       <div className="relative flex flex-grow basis-0 items-center justify-end gap-2 sm:gap-3 md:flex-grow">
         <Link
           href="https://github.com/gofr-dev/gofr"