feat: display scrolling company logos (#226)

* feat: add scrolling company logos

* chore: update translations

apps/web/src/views/home/components/Logos.tsx

@@ -0,0 +1,123 @@
+import type { FC, SVGProps } from "react";
+import { Trans } from "@lingui/react/macro";
+
+import AirbusLogo from "/public/logos/airbus.svg";
+import BitwardenLogo from "/public/logos/bitwarden.svg";
+import CouchbaseLogo from "/public/logos/couchbase.svg";
+import DeloitteLogo from "/public/logos/deloitte.svg";
+import FastCompanyLogo from "/public/logos/fast_company.svg";
+import LegoLogo from "/public/logos/lego.svg";
+import LinkedinLogo from "/public/logos/linkedin.svg";
+import SanaLogo from "/public/logos/sana.svg";
+import WakamLogo from "/public/logos/wakam.svg";
+
+type LogoComponent = FC<SVGProps<SVGSVGElement>>;
+
+export default function Logos() {
+  const logos: {
+    id: number;
+    component: LogoComponent;
+    alt: string;
+  }[] = [
+    {
+      id: 1,
+      component: SanaLogo as LogoComponent,
+      alt: "Sana Logo",
+    },
+    {
+      id: 2,
+      component: FastCompanyLogo as LogoComponent,
+      alt: "Fast Company Logo",
+    },
+    {
+      id: 3,
+      component: BitwardenLogo as LogoComponent,
+      alt: "Bitwarden Logo",
+    },
+    {
+      id: 4,
+      component: CouchbaseLogo as LogoComponent,
+      alt: "Couchbase Logo",
+    },
+    {
+      id: 5,
+      component: LegoLogo as LogoComponent,
+      alt: "Lego Logo",
+    },
+    {
+      id: 6,
+      component: AirbusLogo as LogoComponent,
+      alt: "Airbus Logo",
+    },
+    {
+      id: 7,
+      component: DeloitteLogo as LogoComponent,
+      alt: "Deloitte Logo",
+    },
+    {
+      id: 8,
+      component: WakamLogo as LogoComponent,
+      alt: "Wakam Logo",
+    },
+    {
+      id: 9,
+      component: LinkedinLogo as LogoComponent,
+      alt: "Linked In Logo",
+    },
+  ];
+
+  return (
+    <div className="w-full px-4 py-16">
+      <div className="mb-8 text-center">
+        <p className="text-sm font-medium text-light-800 dark:text-dark-800">
+          <Trans>
+            Trusted by fast-moving teams
+            <br />
+            around the world
+          </Trans>
+        </p>
+      </div>
+
+      <div className="relative overflow-hidden">
+        <div className="absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-white/60 to-transparent dark:from-dark-50" />
+        <div className="absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-white/60 to-transparent dark:from-dark-50" />
+
+        <div className="animate-scroll flex" style={{ width: "max-content" }}>
+          <div className="flex flex-shrink-0 items-center space-x-12">
+            {logos.map((logo) => {
+              const LogoComponent: LogoComponent = logo.component;
+              return (
+                <div
+                  key={`first-${logo.id}`}
+                  className="flex h-12 w-32 items-center justify-center"
+                >
+                  <LogoComponent
+                    className="text-light-950 transition-all duration-300 hover:text-light-1000 dark:text-dark-950 hover:dark:text-dark-1000"
+                    aria-label={logo.alt}
+                  />
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="ml-12 flex flex-shrink-0 items-center space-x-12">
+            {logos.map((logo) => {
+              const LogoComponent: LogoComponent = logo.component;
+              return (
+                <div
+                  key={`second-${logo.id}`}
+                  className="flex h-12 w-32 items-center justify-center"
+                >
+                  <LogoComponent
+                    className="text-light-950 transition-all duration-300 hover:text-light-1000 dark:text-dark-950 hover:dark:text-dark-1000"
+                    aria-label={logo.alt}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/views/home/index.tsx

@@ -11,6 +11,7 @@ import Cta from "./components/Cta";
 import FAQs from "./components/Faqs";
 import Features from "./components/Features";
 import Layout from "./components/Layout";
+import Logos from "./components/Logos";
 
 export default function HomeView() {
   const { resolvedTheme } = useTheme();
@@ -84,8 +85,8 @@ export default function HomeView() {
             </p>
           </div>
         </div>
-        <div className="px-4">
-          <div className="mb-24 rounded-[16px] border border-light-300 bg-light-50 p-1 shadow-md dark:border-dark-300 dark:bg-dark-100 lg:rounded-[24px] lg:p-2">
+        <div className="px-4 pb-10">
+          <div className="rounded-[16px] border border-light-300 bg-light-50 p-1 shadow-md dark:border-dark-300 dark:bg-dark-100 lg:rounded-[24px] lg:p-2">
             <div className="relative overflow-hidden rounded-[12px] border border-light-300 shadow-sm dark:border-dark-300 lg:rounded-[16px]">
               <Image
                 src={`/hero-light.png`}
@@ -104,6 +105,7 @@ export default function HomeView() {
             </div>
           </div>
         </div>
+        <Logos />
         <div className="relative pt-10">
           <div id="features" className="absolute -top-20" />
           <Features theme={resolvedTheme === "dark" ? "dark" : "light"} />

apps/web/src/views/pricing/components/PricingTiers.tsx

@@ -108,7 +108,7 @@ const Pricing = ({
         </div>
       </div>
 
-      <div className="isolate mx-auto mb-20 grid max-w-md grid-cols-1 gap-8 px-4 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+      <div className="isolate mx-auto mb-10 grid max-w-md grid-cols-1 gap-8 px-4 lg:mx-0 lg:max-w-none lg:grid-cols-3">
         {tiers.map((tier) => (
           <div
             key={tier.id}

apps/web/src/views/pricing/index.tsx

@@ -6,6 +6,7 @@ import Button from "~/components/Button";
 import { PageHead } from "~/components/PageHead";
 import Cta from "../home/components/Cta";
 import Layout from "../home/components/Layout";
+import Logos from "../home/components/Logos";
 import FeatureComparisonTable from "./components/FeatureComparisonTable";
 import PricingTiers from "./components/PricingTiers";
 
@@ -33,7 +34,7 @@ export default function PricingView() {
       <PageHead title={`${t`Pricing`} | kan.bn`} />
 
       <div className="flex h-full w-full flex-col lg:pt-[5rem]">
-        <div className="w-full pb-10 pt-32 lg:py-32">
+        <div className="w-full pb-10 pt-32">
           <div className="flex flex-col items-center justify-center px-4 pb-10">
             <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
               <p>{t`Pricing`}</p>
@@ -53,6 +54,10 @@ export default function PricingView() {
           />
         </div>
 
+        <div className="pb-20">
+          <Logos />
+        </div>
+
         <div className="pb-22 flex flex-col items-center justify-center px-4">
           <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
             <p>{t`Features`}</p>