Added sponsors sorting based on their type

backend/apps/owasp/graphql/nodes/sponsor.py

@@ -12,5 +12,6 @@ class Meta:
         fields = (
             "image_url",
             "name",
+            "sponsor_type",
             "url",
         )

backend/apps/owasp/graphql/queries/sponsor.py

@@ -14,4 +14,12 @@ class SponsorQuery(BaseQuery):
 
     def resolve_sponsors(root, info):
         """Resolve sponsors."""
-        return Sponsor.objects.all()
+        priority_order = {
+            Sponsor.SponsorType.DIAMOND: 1,
+            Sponsor.SponsorType.PLATINUM: 2,
+            Sponsor.SponsorType.GOLD: 3,
+            Sponsor.SponsorType.SILVER: 4,
+            Sponsor.SponsorType.SUPPORTER: 5,
+            Sponsor.SponsorType.NOT_SPONSOR: 6,
+        }
+        return sorted(Sponsor.objects.all(), key=lambda x: priority_order[x.sponsor_type])

frontend/__tests__/e2e/pages/Contribute.spec.ts

@@ -17,7 +17,7 @@ test.describe('Contribute Page', () => {
 
   test('renders issue data correctly', async ({ page }) => {
     await expect(page.getByRole('link', { name: 'Contribution 1' })).toBeVisible()
-    await expect(page.getByText('2 months ago')).toBeVisible()
+    await expect(page.getByText('3 months ago')).toBeVisible()
     await expect(page.getByRole('link', { name: 'Owasp Nest' })).toBeVisible()
     await expect(page.getByText('This is a summary of Contribution 1')).toBeVisible()
     await expect(page.getByRole('button', { name: 'Read More' })).toBeVisible()

frontend/src/api/queries/homeQueries.ts

@@ -53,6 +53,7 @@ export const GET_MAIN_PAGE_DATA = gql`
     sponsors {
       imageUrl
       name
+      sponsorType
       url
     }
     statsOverview {

frontend/src/components/LogoCarousel.tsx

@@ -11,44 +11,70 @@ export default function MovingLogos({ sponsors }: MovingLogosProps) {
   useEffect(() => {
     if (scrollerRef.current) {
       const scrollContainer = scrollerRef.current
-
       scrollContainer.innerHTML += scrollContainer.innerHTML
     }
   }, [sponsors])
 
   return (
-    <div className="relative overflow-hidden py-2">
-      <div
-        ref={scrollerRef}
-        className="flex w-full animate-scroll gap-6"
-        style={{ animationDuration: `${sponsors.length * 2}s` }}
-      >
-        {sponsors.map((sponsor, index) => (
-          <div
-            key={`${sponsor.name}-${index}`}
-            className="flex min-w-[220px] flex-shrink-0 flex-col items-center rounded-lg p-5"
-          >
-            <a
-              href={sponsor.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex h-full w-full flex-col items-center justify-center"
+    <div>
+      <div className="relative overflow-hidden py-2">
+        <div
+          ref={scrollerRef}
+          className="flex w-full animate-scroll gap-6"
+          style={{ animationDuration: `${sponsors.length * 2}s` }}
+        >
+          {sponsors.map((sponsor, index) => (
+            <div
+              key={`${sponsor.name}-${index}`}
+              className="flex min-w-[220px] flex-shrink-0 flex-col items-center rounded-lg p-5"
             >
-              <div className="relative mb-4 flex h-16 w-full items-center justify-center">
-                {sponsor.imageUrl ? (
-                  <img
-                    src={sponsor.imageUrl}
-                    alt={`${sponsor.name} logo`}
-                    className="h-full w-full object-cover"
-                    loading="lazy"
-                  />
-                ) : (
-                  <div className="flex h-full w-full items-center justify-center"></div>
-                )}
-              </div>
-            </a>
-          </div>
-        ))}
+              <a
+                href={sponsor.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-full w-full flex-col items-center justify-center"
+              >
+                <div className="relative mb-4 flex h-16 w-full items-center justify-center">
+                  {sponsor.imageUrl ? (
+                    <img
+                      src={sponsor.imageUrl}
+                      alt={`${sponsor.name} logo`}
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center"></div>
+                  )}
+                </div>
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="mt-4 flex w-full flex-col items-center justify-center text-center text-sm text-muted-foreground">
+        <p>
+          These logos represent the corporate supporters of the OWASP Foundation, whose
+          contributions fuel OWASP's security initiatives. Visit{' '}
+          <a
+            href="https://owasp.org/supporters/"
+            className="font-medium text-primary hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            this page
+          </a>{' '}
+          to become an OWASP Foundation corporate supporter. If you're interested in sponsoring the
+          OWASP Nest project ❤️{' '}
+          <a
+            href="https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest"
+            className="font-medium text-primary hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            click here
+          </a>
+          .
+        </p>
       </div>
     </div>
   )

frontend/src/types/home.ts

@@ -37,5 +37,6 @@ export type MainPageData = {
 export type SponsorType = {
   imageUrl: string
   name: string
+  sponsorType: string
   url: string
 }