From f9d5ed700a04e96e4bbd9ca733b482c3ef3c71c8 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:33:41 +0100
Subject: [PATCH 1/7] creating a display video

---
 .../home/content/Product/IntroSection.tsx     | 107 +++---------------
 1 file changed, 16 insertions(+), 91 deletions(-)

diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
index 36a0cd7d8e98..fa595223ae24 100644
--- a/front/components/home/content/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -4,108 +4,31 @@ import {
   Hover3D,
   PlayIcon,
   RocketIcon,
-  Spinner,
 } from "@dust-tt/sparkle";
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
-
+import React from "react";
 import { H1, P, Strong } from "@app/components/home/ContentComponents";
 import TrustedBy from "@app/components/home/TrustedBy";
 
-const ResponsiveIframe = () => {
+const VideoPlayer = () => {
   return (
-    <div className="relative h-[70vh] w-[70vw]">
+    <div className="relative w-full pt-[56.25%]"> {/* 16:9 aspect ratio */}
       <iframe
-        src="https://fast.wistia.net/embed/iframe/v90n8beuh9?seo=true&videoFoam=false"
+        src="https://fast.wistia.net/embed/iframe/7ynip6mgfx?seo=true&videoFoam=true"
         title="Dust product tour"
         allow="autoplay; fullscreen"
         frameBorder="0"
-        className="absolute left-0 top-0 h-full w-full rounded-lg"
+        className="absolute inset-0 h-full w-full rounded-lg"
       ></iframe>
     </div>
   );
 };
 
 export function IntroSection() {
-  const [isVideoOpen, setIsVideoOpen] = useState(false);
-  const [showSpinner, setShowSpinner] = useState(false);
-
-  useEffect(() => {
-    if (isVideoOpen) {
-      setShowSpinner(true);
-      const timer = setTimeout(() => {
-        setShowSpinner(false);
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [isVideoOpen]);
-
-  const MainVisualImage = () => (
-    <>
-      {showSpinner && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black opacity-50 backdrop-blur-md"></div>
-          <Spinner size="xl" />
-        </div>
-      )}
-      {isVideoOpen && !showSpinner && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div
-            className="absolute inset-0 bg-black opacity-50 backdrop-blur-md"
-            onClick={() => setIsVideoOpen(false)}
-          ></div>
-          <div className="z-10 overflow-hidden rounded-lg">
-            <ResponsiveIframe />
-          </div>
-        </div>
-      )}
-
-      <Hover3D depth={-40} perspective={1000} className="relative">
-        <Div3D depth={-30}>
-          <img
-            src="/static/landing/mainVisual/MainVisual1.png"
-            alt="MainVisual1"
-          />
-        </Div3D>
-        <Div3D depth={-10} className="absolute top-0">
-          <img
-            src="/static/landing/mainVisual/MainVisual2.png"
-            alt="MainVisual2"
-          />
-        </Div3D>
-        <Div3D depth={40} className="absolute top-0">
-          <img
-            src="/static/landing/mainVisual/MainVisual3.png"
-            alt="MainVisual3"
-          />
-        </Div3D>
-        <Div3D depth={-5} className="absolute top-0">
-          <img
-            src="/static/landing/mainVisual/MainVisual4.png"
-            alt="MainVisual4"
-          />
-        </Div3D>
-        <Div3D depth={100} className="absolute top-0">
-          <img
-            src="/static/landing/mainVisual/MainVisual5.png"
-            alt="MainVisual5"
-          />
-        </Div3D>
-        <Div3D
-          depth={150}
-          className="absolute top-0 flex h-full w-full items-center justify-center"
-        >
-          <Button
-            icon={PlayIcon}
-            variant="highlight"
-            size="md"
-            label="Watch Product Tour"
-            className="shadow-xl"
-            onClick={() => setIsVideoOpen(true)}
-          />
-        </Div3D>
-      </Hover3D>
-    </>
+  const MainVisual = () => (
+    <Hover3D depth={-40} perspective={1000} className="relative w-full">
+      <VideoPlayer />
+    </Hover3D>
   );
 
   return (
@@ -116,7 +39,9 @@ export function IntroSection() {
             <H1 from="from-red-200" to="to-red-400">
               Build custom AI&nbsp;assistants to speed up your work
             </H1>
-            <div className="w-full md:hidden">{MainVisualImage()}</div>
+            <div className="w-full md:hidden">
+              <MainVisual />
+            </div>
             <P size="lg" className="text-slate-50">
               Amplify your team's performance with personalized assistants
               connected to your proprietary knowledge and data.
@@ -132,11 +57,11 @@ export function IntroSection() {
               </Link>
             </div>
           </div>
-          <div className="hidden md:block">{MainVisualImage()}</div>
+          <div className="hidden md:block w-full max-w-2xl">
+            <MainVisual />
+          </div>
         </div>
-
         <TrustedBy />
-
         <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
           <P size="md" dotCSS="text-amber-300" shape="triangle">
             Connect <Strong>your team's data</Strong> and{" "}
@@ -161,4 +86,4 @@ export function IntroSection() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From a852ff637abf83a0b86265d36f0c4ddc84a94424 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:54:28 +0100
Subject: [PATCH 2/7] fix color

---
 front/components/home/content/Product/IntroSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
index fa595223ae24..82f41de34113 100644
--- a/front/components/home/content/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -36,7 +36,7 @@ export function IntroSection() {
       <div className="flex flex-col gap-16">
         <div className="flex flex-col items-center gap-16 md:flex-row md:gap-32">
           <div className="flex flex-col gap-8">
-            <H1 from="from-red-200" to="to-red-400">
+            <H1 className="text-red-400">
               Build custom AI&nbsp;assistants to speed up your work
             </H1>
             <div className="w-full md:hidden">

From e32bbeed078778e3ffb7131f4b5cadbf1bfb4634 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:58:30 +0100
Subject: [PATCH 3/7] removing 'Dust in action'

---
 front/components/home/content/Product/BlogSection.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/front/components/home/content/Product/BlogSection.tsx b/front/components/home/content/Product/BlogSection.tsx
index b60d2612c708..5b1c896cc053 100644
--- a/front/components/home/content/Product/BlogSection.tsx
+++ b/front/components/home/content/Product/BlogSection.tsx
@@ -26,8 +26,6 @@ export function BlogSection({
           <div className="mb-6 flex items-end justify-between">
             <div>
               <H2 from={headerColorFrom} to={headerColorTo}>
-                Dust in Action:
-                <br />
                 Customer Stories
               </H2>
               <P size="lg">

From e0249ebb1e8bb8fcdf0259e781f62e3bdbbef818 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:03:12 +0100
Subject: [PATCH 4/7] fixing title

---
 front/components/home/content/Product/VerticalSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/home/content/Product/VerticalSection.tsx b/front/components/home/content/Product/VerticalSection.tsx
index bc54902da037..f3717a86d266 100644
--- a/front/components/home/content/Product/VerticalSection.tsx
+++ b/front/components/home/content/Product/VerticalSection.tsx
@@ -21,7 +21,7 @@ export function VerticalSection() {
     <div className="w-full">
       <Carousel className="w-full rounded-3xl" isLooping={true}>
         <div className="mb-6 flex items-center justify-between">
-          <H2 className="text-white">Dust for Marketing, Sales, Data,…</H2>
+          <H2 className="text-white">Accelerate every team</H2>
           <div className="flex space-x-2">
             <CarouselPrevious />
             <CarouselNext />

From f409ef6899ee0f01614b58e9b4e13bb2be65df72 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:22:28 +0100
Subject: [PATCH 5/7] linting

---
 .../home/content/Product/IntroSection.tsx        | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
index 82f41de34113..9c7aa9e9628e 100644
--- a/front/components/home/content/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  Div3D,
-  Hover3D,
-  PlayIcon,
-  RocketIcon,
-} from "@dust-tt/sparkle";
+import { Button, Hover3D, RocketIcon } from "@dust-tt/sparkle";
 import Link from "next/link";
 import React from "react";
 import { H1, P, Strong } from "@app/components/home/ContentComponents";
@@ -12,7 +6,9 @@ import TrustedBy from "@app/components/home/TrustedBy";
 
 const VideoPlayer = () => {
   return (
-    <div className="relative w-full pt-[56.25%]"> {/* 16:9 aspect ratio */}
+    <div className="relative w-full pt-[56.25%]">
+      {" "}
+      {/* 16:9 aspect ratio */}
       <iframe
         src="https://fast.wistia.net/embed/iframe/7ynip6mgfx?seo=true&videoFoam=true"
         title="Dust product tour"
@@ -57,7 +53,7 @@ export function IntroSection() {
               </Link>
             </div>
           </div>
-          <div className="hidden md:block w-full max-w-2xl">
+          <div className="hidden w-full max-w-2xl md:block">
             <MainVisual />
           </div>
         </div>
@@ -86,4 +82,4 @@ export function IntroSection() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}

From 648ba4bd6573ee4f7e216d9557a3b8655172706f Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:39:51 +0100
Subject: [PATCH 6/7] linting

---
 front/components/home/content/Product/IntroSection.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
index 9c7aa9e9628e..2a3b6e3a4d50 100644
--- a/front/components/home/content/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -1,6 +1,7 @@
 import { Button, Hover3D, RocketIcon } from "@dust-tt/sparkle";
 import Link from "next/link";
 import React from "react";
+
 import { H1, P, Strong } from "@app/components/home/ContentComponents";
 import TrustedBy from "@app/components/home/TrustedBy";
 

From c8ba8c41578df2dbc9f3794bfd2a3b083d1a3727 Mon Sep 17 00:00:00 2001
From: thib-martin <168569391+thib-martin@users.noreply.github.com>
Date: Fri, 3 Jan 2025 12:43:31 +0100
Subject: [PATCH 7/7] autoplay

---
 front/components/home/content/Product/IntroSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/components/home/content/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
index 2a3b6e3a4d50..5370215c9542 100644
--- a/front/components/home/content/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -11,7 +11,7 @@ const VideoPlayer = () => {
       {" "}
       {/* 16:9 aspect ratio */}
       <iframe
-        src="https://fast.wistia.net/embed/iframe/7ynip6mgfx?seo=true&videoFoam=true"
+        src="https://fast.wistia.net/embed/iframe/7ynip6mgfx?seo=true&videoFoam=true&autoPlay=true"
         title="Dust product tour"
         allow="autoplay; fullscreen"
         frameBorder="0"