Adding Blog Blocks

dust-tt · Apr 4, 2024 · 1136163 · 1136163
1 parent ea6040b
commit 1136163
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 4 deletions.
diff --git 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
@@ -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
@@ -17,15 +17,15 @@ const solutions: { title: string; target: string }[] = [
     target: "for_customer",
   },
   {
-    title: "Marketing teams",
+    title: "Marketing & Content",
     target: "for_marketing",
   },
   {
     title: "Recruiting & People",
     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
@@ -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">