From 11361634e395a92f2259a07d2174579f1ecbbd8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard=20wautier?= <edouardwautier@Ed-Pro.local>
Date: Thu, 4 Apr 2024 16:40:14 +0200
Subject: [PATCH] Adding Blog Blocks

---
 front/components/home/contentBlocks.tsx       | 60 ++++++++++++++++++-
 front/components/home/contentComponents.tsx   |  2 +-
 front/components/home/website/Navigation.tsx  |  4 +-
 front/components/home/website/ProductPage.tsx | 31 ++++++++++
 4 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/front/components/home/contentBlocks.tsx b/front/components/home/contentBlocks.tsx
index 4a79fd72fb8b9..acbbb8dc9341e 100644
--- a/front/components/home/contentBlocks.tsx
+++ b/front/components/home/contentBlocks.tsx
@@ -2,7 +2,14 @@ import { Avatar } from "@dust-tt/sparkle";
 import type { ReactNode } from "react";
 import React from "react";
 
-import { Grid, H2, H3, H4, P } from "@app/components/home/contentComponents";
+import {
+  Grid,
+  H2,
+  H3,
+  H4,
+  H5,
+  P,
+} from "@app/components/home/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 interface ImgBlockProps {
@@ -25,6 +32,57 @@ export const ImgBlock: React.FC<ImgBlockProps> = ({
   );
 };
 
+interface BlogBlockProps {
+  children?: React.ReactNode;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  href: string;
+}
+
+export const BlogBlock: React.FC<BlogBlockProps> = ({
+  children,
+  title,
+  content,
+  href,
+}) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className={classNames(
+        "col-span-4 flex flex-col overflow-hidden rounded-2xl bg-slate-100 p-1 drop-shadow-xl",
+        "group transition duration-300 ease-out",
+        "hover:scale-105 hover:bg-white"
+      )}
+    >
+      {children ? (
+        <div className="relative aspect-video overflow-hidden rounded-xl">
+          {React.Children.map(children, (child) => {
+            if (
+              React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(
+                child
+              ) &&
+              child.type === "img"
+            ) {
+              return React.cloneElement(child, {
+                className:
+                  "absolute h-full w-full object-cover brightness-100 transition duration-300 ease-out group-hover:brightness-110",
+              });
+            }
+            return child;
+          })}
+        </div>
+      ) : null}
+      <div className="flex flex-col gap-3 p-6">
+        <H5 className="text-slate-900">{title}</H5>
+        <P size="xs" className="text-slate-900">
+          {content}
+        </P>
+      </div>
+    </a>
+  );
+};
+
 interface HeaderContentBlockProps {
   title: ReactNode;
   subtitle: ReactNode;
diff --git a/front/components/home/contentComponents.tsx b/front/components/home/contentComponents.tsx
index b80cb75236059..77ea42068680e 100644
--- a/front/components/home/contentComponents.tsx
+++ b/front/components/home/contentComponents.tsx
@@ -15,7 +15,7 @@ import React from "react";
 import { classNames } from "@app/lib/utils";
 
 const defaultGridClasses =
-  "grid grid-cols-12 gap-x-12 gap-y-16 px-6 md:px-12 lg:px-20 2xl:px-0";
+  "grid grid-cols-12 gap-x-8 gap-y-16 px-6 md:px-12 lg:px-20 2xl:px-0";
 
 const verticalGridClasses = {
   top: "items-start",
diff --git a/front/components/home/website/Navigation.tsx b/front/components/home/website/Navigation.tsx
index 3fbd6a9549182..05ae52a196659 100644
--- a/front/components/home/website/Navigation.tsx
+++ b/front/components/home/website/Navigation.tsx
@@ -17,7 +17,7 @@ const solutions: { title: string; target: string }[] = [
     target: "for_customer",
   },
   {
-    title: "Marketing teams",
+    title: "Marketing & Content",
     target: "for_marketing",
   },
   {
@@ -25,7 +25,7 @@ const solutions: { title: string; target: string }[] = [
     target: "for_people",
   },
   {
-    title: "Sales teams",
+    title: "Sales & Revenue",
     target: "for_sales",
   },
   {
diff --git a/front/components/home/website/ProductPage.tsx b/front/components/home/website/ProductPage.tsx
index 8ce0227272755..ee2a7ab25289c 100644
--- a/front/components/home/website/ProductPage.tsx
+++ b/front/components/home/website/ProductPage.tsx
@@ -1,6 +1,7 @@
 import type { ParsedUrlQuery } from "querystring";
 import React from "react";
 
+import { BlogBlock } from "@app/components/home/contentBlocks";
 import { Grid, H1 } from "@app/components/home/contentComponents";
 import { ArtSection } from "@app/components/home/website/Product/ArtSection";
 import { IntroSection } from "@app/components/home/website/Product/IntroSection";
@@ -20,6 +21,36 @@ export function ProductPage({ getReturnToUrl }: ProductPageProps) {
         <H1 className="col-span-12 text-center text-white">
           Links to Blog articles
         </H1>
+        <BlogBlock
+          title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
+          content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
+          href="https://blog.dust.tt/november-five-ai-transformation-dust/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
+            alt="Blog Image"
+          />
+        </BlogBlock>
+        <BlogBlock
+          title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
+          content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
+          href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
+            alt="Blog Image"
+          />
+        </BlogBlock>
+        <BlogBlock
+          title="Integrating AI for Enhanced Workflows at Alan"
+          content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
+          href="https://blog.dust.tt/integrating-ai-workflows-alan/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"
+            alt="Blog Image"
+          />
+        </BlogBlock>
       </Grid>
       <Grid>
         <H1 className="col-span-12 text-center text-white">