[WIP] Customer Support V2 (#9115)

* WIP customer support * wip * clean-up * fix * lint * Updating multiple components * Pushed an updated version * iteration * clean-up --------- Co-authored-by: Edouard Wautier <[email protected]>
dust-tt · Dec 10, 2024 · 42f4feb · 42f4feb
1 parent 3bf642b
commit 42f4feb
Show file tree

Hide file tree

Showing 15 changed files with 467 additions and 35 deletions.
diff --git a/front/components/home/ContentBlocks.tsx b/front/components/home/ContentBlocks.tsx
@@ -1,4 +1,4 @@
-import { ArrowRightIcon, Button, RocketIcon } from "@dust-tt/sparkle";
+import { ArrowRightIcon, Avatar, Button, RocketIcon } from "@dust-tt/sparkle";
 import Link from "next/link";
 import type { ReactNode } from "react";
 import React from "react";
@@ -171,6 +171,67 @@ export const HeaderContentBlock = ({
   </Grid>
 );
 
+interface MetricComponentProps {
+  metrics: {
+    value: string;
+    description: ReactNode;
+  }[];
+  from: string;
+  to: string;
+}
+
+export const MetricComponent = ({
+  metrics,
+  from,
+  to,
+}: MetricComponentProps) => (
+  <div
+    className={classNames(
+      "col-span-12 flex flex-col items-center py-8 text-center"
+    )}
+  >
+    <div
+      className={classNames(
+        "grid grid-cols-1 gap-x-6 gap-y-8",
+        "md:grid-cols-2 md:gap-x-12"
+      )}
+    >
+      {metrics.map((metric, index) => (
+        <div key={index} className="flex flex-col items-center gap-4">
+          <H1 from={from} to={to}>
+            {metric.value}
+          </H1>
+          <P size="md" className="max-w-[400px]">
+            {metric.description}
+          </P>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+interface QuoteProps {
+  quote: string;
+}
+
+export const Quote = ({ quote }: QuoteProps) => (
+  <div className="col-span-12 flex flex-col py-8 md:col-span-10 md:col-start-2 lg:col-span-8 lg:col-start-3">
+    <div className="flex flex-col items-center text-center font-objektiv text-3xl italic text-white">
+      &ldquo; {quote} &rdquo;
+    </div>
+    <div className="flex justify-center pt-8">
+      <div className="flex items-center justify-center gap-3">
+        <Avatar size="lg" />
+        <P size="md" className="text-primary-400">
+          Walter Moniot,
+          <br />
+          CPO at Malt
+        </P>
+      </div>
+    </div>
+  </div>
+);
+
 interface CarousselContentBlockProps {
   title: ReactNode;
   subtitle?: ReactNode;

diff --git a/front/components/home/SolutionSection.tsx b/front/components/home/SolutionSection.tsx
@@ -107,6 +107,7 @@ const renderSolutionSectionBlock = ({
     </div>
   );
 };
+
 interface SolutionSectionContentBlockProps {
   title: ReactNode;
   content: ReactNode | ReactNode[];

diff --git a/front/components/home/TrustedBy.tsx b/front/components/home/TrustedBy.tsx
@@ -0,0 +1,79 @@
+import Image from "next/image";
+
+import { H3 } from "@app/components/home/ContentComponents";
+import { classNames } from "@app/lib/utils";
+
+export default function TrustedBy() {
+  return (
+    <>
+      <div
+        className={classNames(
+          "col-span-12 flex flex-col items-center py-8",
+          "lg:col-span-12 lg:col-start-1",
+          "xl:col-span-10 xl:col-start-2"
+        )}
+      >
+        <H3 className="w-full text-center text-white">
+          Trusted by 500+ organizations, including:
+        </H3>
+        <div
+          className={classNames(
+            "mt-8 max-w-[400px] sm:w-full sm:max-w-none",
+            "grid grid-cols-2 gap-x-2",
+            "sm:grid-cols-3 sm:gap-x-16",
+            "md:grid-cols-4 md:gap-x-16"
+          )}
+        >
+          <Image
+            alt="alan"
+            src="/static/landing/logos/alan.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="watershed"
+            src="/static/landing/logos/watershed.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="qonto"
+            src="/static/landing/logos/qonto.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="pennylane"
+            src="/static/landing/logos/pennylane.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="payfit"
+            src="/static/landing/logos/payfit.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="watershed"
+            src="/static/landing/logos/malt.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="hivebrite"
+            src="/static/landing/logos/hivebrite.png"
+            width={600}
+            height={300}
+          />
+          <Image
+            alt="blueground"
+            src="/static/landing/logos/blueground.png"
+            width={600}
+            height={300}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
@@ -9,15 +9,11 @@ import {
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 
-import {
-  Grid,
-  H1,
-  H4,
-  P,
-  Strong,
-} from "@app/components/home/ContentComponents";
+import { Grid, H1, P, Strong } from "@app/components/home/ContentComponents";
 import { classNames } from "@app/lib/utils";
 
+import TrustedBy from "../../TrustedBy";
+
 const ResponsiveIframe = () => {
   return (
     <div className="relative h-[70vh] w-[70vw]">
@@ -156,30 +152,9 @@ export function IntroSection() {
         >
           {MainVisualImage()}
         </div>
-        <div
-          className={classNames(
-            "col-span-12 flex flex-col items-center py-8",
-            "lg:col-span-10 lg:col-start-2",
-            "xl:col-span-8 xl:col-start-3"
-          )}
-        >
-          <H4 className="w-full text-center text-white">
-            Trusted by 500+ organizations, including:
-          </H4>
-          <div
-            className={classNames(
-              "max-w-[400px] sm:w-full sm:max-w-none",
-              "grid grid-cols-2 gap-x-2",
-              "md:grid-cols-5 md:gap-x-12"
-            )}
-          >
-            <img alt="alan" src="/static/landing/logos/alan.png" />
-            <img alt="qonto" src="/static/landing/logos/qonto.png" />
-            <img alt="pennylane" src="/static/landing/logos/pennylane.png" />
-            <img alt="payfit" src="/static/landing/logos/payfit.png" />
-            <img alt="watershed" src="/static/landing/logos/watershed.png" />
-          </div>
-        </div>
+
+        <TrustedBy />
+
         <div
           className={classNames(
             "col-span-12",

diff --git a/front/components/home/menu/MainNavigation.tsx b/front/components/home/menu/MainNavigation.tsx
@@ -4,8 +4,6 @@ import * as React from "react";
 
 import { H4, Strong } from "@app/components/home/ContentComponents";
 import { menuConfig } from "@app/components/home/menu/config";
-import { classNames } from "@app/lib/utils";
-
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -14,7 +12,8 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from "./NavigationMenu";
+} from "@app/components/home/menu/NavigationMenu";
+import { classNames } from "@app/lib/utils";
 
 export function MainNavigation() {
   return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -107,6 +107,7 @@ const renderSolutionSectionBlock = ({ @@
         </div>
       );
     };
     interface SolutionSectionContentBlockProps {
       title: ReactNode;
       content: ReactNode | ReactNode[];
@@ Expand Down @@