all

src/sections/Partners.tsx

@@ -2,18 +2,18 @@
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import Loader from "../components/Loader";
-import { useCompanies } from "../services/companies";
+import { useTechPartners } from "../services/techPartners";
 import { assetUrl } from "../services/api";
 import type { ThemeProps } from "../types";
 
 function PartnersInner({ isNavyBg }: ThemeProps) {
-  const { data, isLoading } = useCompanies();
+  const { data, isLoading } = useTechPartners();
 
   const bg = isNavyBg ? "#071233" : "#f7f6f3";
   const border = isNavyBg ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.07)";
   const label = isNavyBg ? "rgba(255,255,255,0.28)" : "rgba(0,0,0,0.28)";
 
-  const partners = (data ?? []).filter((c) => c.isPartner && c.logoUrl);
+  const partners = (data ?? []).filter((p) => p.isActive && p.logoUrl).sort((a, b) => a.displayOrder - b.displayOrder);
 
   if (isLoading) {
     return (
@@ -49,21 +49,8 @@ function PartnersInner({ isNavyBg }: ThemeProps) {
         </p>
 
         <div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">
-          {partners.map((p, i) => (
-            <motion.div
-              key={p.id}
-              title={p.name}
-              initial={{ opacity: 0, scale: 0.92 }}
-              whileInView={{ opacity: 1, scale: 1 }}
-              viewport={{ once: true }}
-              transition={{
-                duration: 0.4,
-                delay: i * 0.07,
-                ease: [0.22, 1, 0.36, 1],
-              }}
-              whileHover={{ scale: 1.06 }}
-              style={{ lineHeight: 1 }}
-            >
+          {partners.map((p, i) => {
+            const inner = (
               <img
                 src={assetUrl(p.logoUrl!)}
                 alt={p.name}
@@ -78,18 +65,32 @@ function PartnersInner({ isNavyBg }: ThemeProps) {
                   transition: "filter 300ms, opacity 300ms",
                 }}
                 onMouseEnter={(e) => {
-                  (e.currentTarget as HTMLImageElement).style.filter =
-                    "grayscale(0)";
+                  (e.currentTarget as HTMLImageElement).style.filter = "grayscale(0)";
                   (e.currentTarget as HTMLImageElement).style.opacity = "1";
                 }}
                 onMouseLeave={(e) => {
-                  (e.currentTarget as HTMLImageElement).style.filter =
-                    "grayscale(1)";
+                  (e.currentTarget as HTMLImageElement).style.filter = "grayscale(1)";
                   (e.currentTarget as HTMLImageElement).style.opacity = "0.55";
                 }}
               />
-            </motion.div>
-          ))}
+            );
+            return (
+              <motion.div
+                key={p.id}
+                title={p.name}
+                initial={{ opacity: 0, scale: 0.92 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.4, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
+                whileHover={{ scale: 1.06 }}
+                style={{ lineHeight: 1 }}
+              >
+                {p.websiteUrl
+                  ? <a href={p.websiteUrl} target="_blank" rel="noopener noreferrer">{inner}</a>
+                  : inner}
+              </motion.div>
+            );
+          })}
         </div>
       </motion.div>
     </section>