feat: MCP Server landing page at /mcp

docusaurus.config.js

@@ -130,6 +130,7 @@ const config = {
           { from: "/vc", to: "/" },
           { from: "/partner", to: "/" },
           { from: "/wopee-commander", to: "/" },
+          { from: "/guides/wopee-mcp", to: "/mcp" },
           {
             from: "/blog/top-5-applitools-alternatives-for-visual-testing--2024",
             to: "/blog/applitools-alternatives",
@@ -205,6 +206,7 @@ const config = {
             items: [
               { to: "/ai-testing-agents", label: "AI Agents for Software Testing" },
               { to: "/visual-testing", label: "Visual Regression Testing" },
+              { to: "/mcp", label: "MCP Server" },
               {
                 to: "blog/playwright-bot-ai-powered-test-automation",
                 label: "Playwright AI Bot (preview)",
@@ -243,6 +245,10 @@ const config = {
                 label: "Visual Regression Testing",
                 to: "/visual-testing",
               },
+              {
+                label: "MCP Server",
+                to: "/mcp",
+              },
               {
                 label: "Playwright AI Agent",
                 to: "blog/playwright-bot-ai-powered-test-automation",

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/components/landing-page/home/sections/TestimonialCarousel.tsx

@@ -1,5 +1,3 @@
-import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js";
-import Icon from "@mdi/react";
 import React, { useState, useEffect } from "react";
 
 const testimonials = [
@@ -43,41 +41,30 @@ const Testimonial = ({
       activeItemIndex === itemIndex
         ? "block md:opacity-100"
         : "hidden md:opacity-0"
-    } md:absolute md:top-1/2 md:-translate-y-1/2 md:left-0 md:w-full transition-opacity duration-500 flex flex-col lg:flex-row gap-5 lg:gap-10 items-center`}
+    } md:absolute md:inset-0 transition-opacity duration-500 flex items-center justify-center px-4`}
   >
-    <div className="lg:w-1/2 text-balance flex flex-col gap-5 px-2 lg:px-20 text-center">
-      <p className="text-lg sm:text-xl lg:text-3xl">
-        <Icon
-          size={1}
-          path={mdiFormatQuoteOpen}
-          className="text-secondary-wopee dark:text-primary-wopee"
-        />
+    <div className="w-full max-w-2xl mx-auto bg-gray-50 dark:bg-gray-800/60 rounded-2xl p-8 lg:p-10 flex flex-col gap-6 items-center border border-gray-200 dark:border-gray-600 shadow-lg text-center">
+      <p className="text-lg sm:text-xl lg:text-2xl leading-relaxed">
+        <span className="text-secondary-wopee dark:text-primary-wopee font-bold text-3xl">&ldquo;</span>
         {quote}
-        <Icon
-          size={1}
-          path={mdiFormatQuoteClose}
-          className="text-secondary-wopee dark:text-primary-wopee"
-        />
+        <span className="text-secondary-wopee dark:text-primary-wopee font-bold text-3xl">&rdquo;</span>
       </p>
-      <p className="text-secondary-wopee dark:text-primary-wopee lg:text-xl">
+      <p className="text-secondary-wopee dark:text-primary-wopee text-sm lg:text-base">
         {about}
       </p>
-    </div>
-
-    <div className="flex flex-col lg:flex-row gap-3 items-center">
-      <div className="flex gap-2">
-        <img className="avatar__photo avatar__photo--xl" src={avatar} />
-        <div className="avatar__intro text-left">
-          <div className="avatar__name">{name}</div>
-          <small className="avatar__subtitle">{position}</small>
+      <div className="flex items-center gap-4 pt-2">
+        <img
+          className="w-14 h-14 rounded-full object-cover border-2 border-secondary-wopee/30 dark:border-primary-wopee/30 flex-shrink-0"
+          src={avatar}
+          alt={name}
+        />
+        <div className="text-left">
+          <p className="font-bold">{name}</p>
+          <p className="text-sm opacity-60">{position}</p>
         </div>
-      </div>
-
-      <div className="hidden lg:block h-20 w-0.5 opacity-30 rounded-3xl bg-secondary-wopee dark:bg-primary-wopee" />
-
-      <div className="flex justify-center items-center lg:justify-start">
+        <div className="h-10 w-px bg-gray-300 dark:bg-gray-600 mx-1" />
         <img
-          className="w-1/2 dark:invert dark:grayscale"
+          className="h-8 w-auto max-w-[120px] dark:invert dark:grayscale object-contain"
           src={logo}
           alt={alt}
         />
@@ -139,7 +126,7 @@ const TestimonialCarousel = () => {
         </p>
       </div>
 
-      <div className="relative flex items-center container md:h-[400px]">
+      <div className="relative flex items-center justify-center w-full md:h-[350px]">
         {testimonials.map((testimonial, index) => (
           <Testimonial
             key={testimonial.name}

src/css/custom.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 /* Remove blocking font import - now handled via preload in config */
 /* @import url("https://fonts.googleapis.com/css2?family=Bungee&family=Gruppo&family=Rubik:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap"); */
 

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>