Redesign customer logos section and reorder homepage

src/components/home-page/HomeTrustedBy.tsx

@@ -1,69 +1,57 @@
 import React from "react";
 
+const customers = [
+  { name: "Multitude", logo: "/img/customers/multitude-logo-wordmark.svg", invertDark: true, size: "w-[80px] sm:w-[100px]" },
+  { name: "Generali", logo: "/img/customers/generali-logo-small.svg", invertDark: true, size: "w-[145px] sm:w-[180px]" },
+  { name: "SYNOT", logo: "/img/customers/synot-logo-2.png", invertDark: true, size: "w-[135px] sm:w-[170px]" },
+  { name: "Inventi", logo: "/img/customers/inventi-logo.png", invertDark: true, size: "w-[120px] sm:w-[145px]" },
+  { name: "Tesena", logo: "/img/investors/tesena-logo.png", invertDark: true, size: "w-[130px] sm:w-[165px]" },
+  { name: "Nice Project", logo: "/img/customers/niceproject-logo.svg", invertDark: true, size: "w-[140px] sm:w-[180px]" },
+  { name: "Flashscore", logo: "/img/customers/flash-score-logo.png", invertDark: true, size: "w-[160px] sm:w-[200px]" },
+  { name: "Principal", logo: "/img/customers/principal-logo-gray.svg", noFilter: true, size: "w-[140px] sm:w-[180px]" },
+  { name: "Accenture", logo: "/img/customers/accenture-logo-gray.svg", noFilter: true, size: "w-[120px] sm:w-[145px]" },
+];
+
+const techPartners = [
+  { name: "GitHub", logo: "/img/partners/github-logo.png", size: "w-[100px] sm:w-[120px]" },
+  { name: "Anthropic", logo: "/img/partners/anthropic-logo.svg", size: "w-[130px] sm:w-[160px]" },
+  { name: "OpenAI", logo: "/img/partners/openai-logo.svg", size: "w-[100px] sm:w-[120px]" },
+  { name: "Microsoft", logo: "/img/partners/microsoft-logo.svg", size: "w-[115px] sm:w-[140px]" },
+  { name: "Amazon Web Services", logo: "/img/partners/aws-logo.svg", size: "w-[85px] sm:w-[105px]" },
+  { name: "Google Cloud", logo: "/img/partners/google-cloud-logo.png", size: "w-[125px] sm:w-[155px]" },
+];
+
 const HomeTrustedBy = () => {
   return (
-    <div className="flex flex-col gap-5 items-center justify-center my-32 container">
-      <div className="flex flex-col-reverse xl:flex-row w-full gap-5 justify-center items-center">
-        <div className="flex w-full h-10 sm:h-16 xl:h-24 xl:flex-1 gap-2 sm:gap-4 xl:gap-6 justify-around xl:justify-between grayscale dark:invert">
-          <img
-            className="h-full max-w-[20%] sm:max-w-[22%] object-contain"
-            src="/img/customers/multitude-logo-2.png"
-            alt="multitude"
-          />
-
-          <img
-            className="h-full max-w-[20%] sm:max-w-[22%] object-contain"
-            src="/img/customers/flash-score-logo.png"
-            alt="livesport"
-          />
+    <div className="flex flex-col items-center justify-center my-24 container">
+      <p className="text-xs sm:text-sm tracking-[0.2em] uppercase text-gray-500 dark:text-gray-400 font-medium mb-12 text-center">
+        Trusted by leading engineering teams
+      </p>
 
+      <div className="grid grid-cols-3 gap-y-10 gap-x-4 sm:gap-x-8 max-w-5xl w-full px-8 items-center justify-items-center mb-12">
+        {customers.map((customer) => (
           <img
-            className="h-full max-w-[20%] sm:max-w-[22%] object-contain"
-            src="/img/customers/inventi-logo.png"
-            alt="inventi"
-          />
-          <img
-            className="h-full max-w-[20%] sm:max-w-[22%] object-contain"
-            src="/img/customers/synot-logo-2.png"
-            alt="SYNOT TECH"
+            key={customer.name}
+            className={`${customer.size} object-contain transition-opacity ${customer.noFilter ? "opacity-70 hover:opacity-100" : `grayscale opacity-70 hover:opacity-100 ${customer.invertDark ? "dark:invert" : ""}`}`}
+            src={customer.logo}
+            alt={customer.name}
           />
-        </div>
-
-        <div className="text-2xl xl:w-1/3 text-center xl:text-right">
-          <p>Trusted by</p>
-          <p className="text-secondary-wopee dark:text-primary-wopee">
-            top engineering teams
-          </p>
-        </div>
+        ))}
       </div>
 
-      <div className="flex flex-col xl:flex-row w-full gap-5 justify-center items-center">
-        <div className="text-2xl xl:w-1/3 text-center xl:text-left">
-          <p>Backed by</p>
-          <p className="text-secondary-wopee dark:text-primary-wopee">
-            strong partners
-          </p>
-        </div>
-
-        <div className="flex w-full h-10 sm:h-16 xl:h-24 xl:flex-1 gap-2 sm:gap-4 xl:gap-6 justify-around xl:justify-between grayscale dark:invert">
-          <img
-            className="h-full max-w-[28%] sm:max-w-[30%] object-contain"
-            src="/img/investors/tesena-logo.png"
-            alt="tesena"
-          />
-
-          <img
-            className="h-full max-w-[28%] sm:max-w-[30%] object-contain"
-            src="/img/investors/nation1-logo.png"
-            alt="nation1"
-          />
+      <p className="text-xs sm:text-sm tracking-[0.2em] uppercase text-gray-500 dark:text-gray-400 font-medium mb-10 text-center">
+        Powered by world class AI and cloud partners
+      </p>
 
+      <div className="grid grid-cols-3 gap-y-6 gap-x-4 sm:gap-x-8 max-w-4xl w-full px-8 items-center justify-items-center">
+        {techPartners.map((partner) => (
           <img
-            className="h-full max-w-[28%] sm:max-w-[30%] object-contain"
-            src="/img/investors/startup-yard-logo.png"
-            alt="startup yard"
+            key={partner.name}
+            className={`${partner.size} object-contain grayscale dark:invert opacity-70 hover:opacity-100 transition-opacity`}
+            src={partner.logo}
+            alt={partner.name}
           />
-        </div>
+        ))}
       </div>
     </div>
   );

src/components/landing-page/home/sections/PartnerBrands.tsx

@@ -1,52 +1,55 @@
-import PartnersCarouselCard from "@site/src/components/demo/PartnersCarouselCard";
 import React from "react";
 
-const partners = [
-  {
-    name: "Multitude",
-    logo: "/img/customers/multitude-logo-2.png",
-    classes: "grayscale dark:invert",
-  },
-  {
-    name: "Flash Score",
-    logo: "/img/customers/flash-score-logo.png",
-    classes: "grayscale dark:invert",
-  },
-  // {
-  //   name: "Kedros",
-  //   logo: "/img/customers/kedros-logo-2.png",
-  //   classes: "grayscale rounded-lg",
-  // },
-  {
-    name: "Inventi",
-    logo: "/img/customers/inventi-logo-2.png",
-    classes: "grayscale dark:invert",
-  },
+const customers = [
+  { name: "Multitude", logo: "/img/customers/multitude-logo-wordmark.svg", invertDark: true, size: "w-[80px] sm:w-[100px]" },
+  { name: "Generali", logo: "/img/customers/generali-logo-small.svg", invertDark: true, size: "w-[145px] sm:w-[180px]" },
+  { name: "SYNOT", logo: "/img/customers/synot-logo-2.png", invertDark: true, size: "w-[135px] sm:w-[170px]" },
+  { name: "Inventi", logo: "/img/customers/inventi-logo.png", invertDark: true, size: "w-[120px] sm:w-[145px]" },
+  { name: "Tesena", logo: "/img/investors/tesena-logo.png", invertDark: true, size: "w-[130px] sm:w-[165px]" },
+  { name: "Nice Project", logo: "/img/customers/niceproject-logo.svg", invertDark: true, size: "w-[140px] sm:w-[180px]" },
+  { name: "Flashscore", logo: "/img/customers/flash-score-logo.png", invertDark: true, size: "w-[160px] sm:w-[200px]" },
+  { name: "Principal", logo: "/img/customers/principal-logo-gray.svg", noFilter: true, size: "w-[140px] sm:w-[180px]" },
+  { name: "Accenture", logo: "/img/customers/accenture-logo-gray.svg", noFilter: true, size: "w-[120px] sm:w-[145px]" },
+];
+
+const techPartners = [
+  { name: "GitHub", logo: "/img/partners/github-logo.png", size: "w-[100px] sm:w-[120px]" },
+  { name: "Anthropic", logo: "/img/partners/anthropic-logo.svg", size: "w-[130px] sm:w-[160px]" },
+  { name: "OpenAI", logo: "/img/partners/openai-logo.svg", size: "w-[100px] sm:w-[120px]" },
+  { name: "Microsoft", logo: "/img/partners/microsoft-logo.svg", size: "w-[115px] sm:w-[140px]" },
+  { name: "Amazon Web Services", logo: "/img/partners/aws-logo.svg", size: "w-[85px] sm:w-[105px]" },
+  { name: "Google Cloud", logo: "/img/partners/google-cloud-logo.png", size: "w-[125px] sm:w-[155px]" },
 ];
 
 const PartnerBrands = () => {
   return (
-    <div>
-      <div className="flex flex-col justify-center text-center text-balance px-2 lg:px-0">
-        <p className="lg:text-4xl text-3xl">
-          Join{" "}
-          <span className="text-secondary-wopee dark:text-primary-wopee">
-            top engineering teams
-          </span>{" "}
-          and start your free trial
-        </p>
-        <p className="text-sm">
-          Empower your team with fast, scalable visual testing. Trusted by
-          industry leaders to maintain the visual integrity of their apps.
-        </p>
+    <div className="flex flex-col items-center justify-center py-16">
+      <p className="text-xs sm:text-sm tracking-[0.2em] uppercase text-gray-500 dark:text-gray-400 font-medium mb-12 text-center">
+        Trusted by leading engineering teams
+      </p>
+
+      <div className="grid grid-cols-3 gap-y-10 gap-x-4 sm:gap-x-8 max-w-5xl w-full px-8 items-center justify-items-center mb-12">
+        {customers.map((customer) => (
+          <img
+            key={customer.name}
+            className={`${customer.size} object-contain transition-opacity ${customer.noFilter ? "opacity-70 hover:opacity-100" : `grayscale opacity-70 hover:opacity-100 ${customer.invertDark ? "dark:invert" : ""}`}`}
+            src={customer.logo}
+            alt={customer.name}
+          />
+        ))}
       </div>
 
-      <div className="flex justify-around px-5 mt-5 gap-5">
-        {partners.map((partner) => (
-          <PartnersCarouselCard
+      <p className="text-xs sm:text-sm tracking-[0.2em] uppercase text-gray-500 dark:text-gray-400 font-medium mb-10 text-center">
+        Powered by world class AI and cloud partners
+      </p>
+
+      <div className="grid grid-cols-3 gap-y-6 gap-x-4 sm:gap-x-8 max-w-4xl w-full px-8 items-center justify-items-center">
+        {techPartners.map((partner) => (
+          <img
             key={partner.name}
-            logo={partner.logo}
-            classes={partner.classes}
+            className={`${partner.size} object-contain grayscale dark:invert opacity-70 hover:opacity-100 transition-opacity`}
+            src={partner.logo}
+            alt={partner.name}
           />
         ))}
       </div>

src/pages/index.tsx

@@ -20,12 +20,12 @@ export default function Home(): JSX.Element {
       description="Stop writing tests manually. Wopee.io AI agents explore your app, generate Playwright tests, and self-heal when your UI changes. Try free."
     >
       <HomeHeroVibe />
+      <HomeTrustedBy />
       <HomeBenefits />
+      <HomeSocialProof />
       <HomeHowItWorks />
       <HomeTestingFrameworks />
       <HomeDeploymentOptions />
-      <HomeSocialProof />
-      <HomeTrustedBy />
       <HomeFaqSection />
       <HomeEndingSection />
     </Layout>