chore: made logos move (#2560)

apps/formbricks-com/components/home/Hero.tsx

@@ -1,15 +1,6 @@
-import CalLogoLight from "@/images/clients/cal-logo-light.svg";
-import CrowdLogoLight from "@/images/clients/crowd-logo-light.svg";
-import FlixbusLogo from "@/images/clients/flixbus-white.svg";
-import GumtreeLogo from "@/images/clients/gumtree.png";
-import LelyLogo from "@/images/clients/lely-logo.webp";
-import NILogoDark from "@/images/clients/niLogoDark.svg";
-import OpinodoLogo from "@/images/clients/opinodo.png";
-import OptimoleLogo from "@/images/clients/optimole-logo.svg";
-import ThemeisleLogo from "@/images/clients/themeisle-logo.webp";
+import LogoBar from "@/components/salespage/LogoBar";
 import { ShieldCheckIcon, StarIcon } from "lucide-react";
 import { usePlausible } from "next-plausible";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 import { Button } from "@formbricks/ui/Button";
@@ -43,21 +34,9 @@ export const Hero: React.FC = ({}) => {
             know what your customers need.
           </span>
         </p>
-        <div className="mx-auto mt-5 max-w-xl items-center px-4 sm:flex sm:justify-center md:mt-6 md:space-x-8 md:px-0 lg:max-w-5xl">
-          <div className="grid grid-cols-3  items-center gap-8 pt-2 md:grid-cols-3 lg:grid-cols-9">
-            <Image src={FlixbusLogo} alt="Flixbus Flix Flixtrain Logo" className="rounded-md" width={200} />
-            <Image src={GumtreeLogo} alt="Gumtree Logo" width={200} />
-            <Image src={LelyLogo} alt="Lely Logo" width={200} />
-            <Image src={CalLogoLight} alt="Cal Logo" width={170} />
-            <Image src={ThemeisleLogo} alt="ThemeIsle Logo" width={200} />
-            <Image src={OpinodoLogo} alt="Opinodo.com Logo" width={200} />
-            <Image src={CrowdLogoLight} alt="Crowd.dev Logo" width={200} />
-            <Image src={OptimoleLogo} alt="Optimole Logo" width={200} />
-            <Image src={NILogoDark} alt="Neverinstall Logo" width={200} />
-          </div>
-        </div>
+        <LogoBar hideTeamsClaim />
 
-        <div className="hidden pt-14 md:block">
+        <div className="hidden pt-7 md:block">
           <Button
             variant="darkCTA"
             className="mr-3 px-6"

apps/formbricks-com/components/salespage/LogoBar.tsx

@@ -9,23 +9,54 @@ import OptimoleLogo from "@/images/clients/optimole-logo.svg";
 import ThemeisleLogo from "@/images/clients/themeisle-logo.webp";
 import Image from "next/image";
 
-export default function LogoBar() {
+interface LogoBarProps {
+  hideTeamsClaim?: boolean;
+}
+
+export default function LogoBar({ hideTeamsClaim = false }: LogoBarProps) {
   return (
     <div className="mx-auto max-w-5xl">
-      <p className="text-center text-lg text-slate-700">
-        10,000+ teams at the world’s best companies trust Formbricks
-      </p>
-      <div className="mt-5 items-center px-4 sm:flex sm:justify-center md:mt-6 md:space-x-8 md:px-0">
-        <div className="grid grid-cols-3 items-center gap-8 pt-2 md:grid-cols-3 md:gap-10 lg:grid-cols-9">
-          <Image src={FlixbusLogo} alt="Flixbus Flix Flixtrain Logo" width={200} />
-          <Image src={GumtreeLogo} alt="Gumtree Logo" width={200} />
-          <Image src={LelyLogo} alt="Lely Logo" width={200} />
-          <Image src={CalLogoLight} alt="Cal Logo" width={200} />
-          <Image src={ThemeisleLogo} alt="ThemeIsle Logo" width={200} />
-          <Image src={OpinodoLogo} alt="Crowd.dev Logo" width={200} />
-          <Image src={CrowdLogoLight} alt="Crowd.dev Logo" width={200} />
-          <Image src={OptimoleLogo} alt="Optimole Logo" width={200} />
-          <Image src={NILogoDark} alt="Neverinstall Logo" width={200} />
+      {!hideTeamsClaim && (
+        <p className="text-center text-lg text-slate-700">
+          10,000+ teams at the world’s best companies trust Formbricks
+        </p>
+      )}
+      <div className="mt-5 flex justify-center">
+        <div className="w-full overflow-hidden">
+          <div className="animate-scroll flex items-center space-x-20">
+            {/* List of logos, each wrapped in a div with specific width and flex properties */}
+            {[
+              ThemeisleLogo,
+              CalLogoLight,
+              FlixbusLogo,
+              GumtreeLogo,
+              LelyLogo,
+              OpinodoLogo,
+              CrowdLogoLight,
+              OptimoleLogo,
+              NILogoDark,
+            ].map((src, index) => (
+              <div key={index} className="flex-none" style={{ width: 150 }}>
+                <Image src={src} alt="Formbricks Client Logo" width={150} height={75} layout="responsive" />
+              </div>
+            ))}
+            {/* Repeat the logos for a seamless loop */}
+            {[
+              ThemeisleLogo,
+              CalLogoLight,
+              FlixbusLogo,
+              GumtreeLogo,
+              LelyLogo,
+              OpinodoLogo,
+              CrowdLogoLight,
+              OptimoleLogo,
+              NILogoDark,
+            ].map((src, index) => (
+              <div key={index + 9} className="flex-none" style={{ width: 150 }}>
+                <Image src={src} alt="Formbricks Client Logo" width={150} height={75} layout="responsive" />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

apps/formbricks-com/tailwind.config.ts

@@ -38,6 +38,15 @@ export default {
     },
     typography: typographyStyles,
     extend: {
+      keyframes: {
+        scroll: {
+          "0%": { transform: "translateX(0%)" },
+          "100%": { transform: "translateX(-1990px)" },
+        },
+      },
+      animation: {
+        scroll: "scroll 60s linear infinite",
+      },
       boxShadow: {
         glow: "0 0 4px rgb(0 0 0 / 0.1)",
       },