From 4f555187b2505ab4c242e60cc87ef1997151923e Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 21 Feb 2025 10:54:38 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(lp)=20Change=20UseCases=20layou?=
 =?UTF-8?q?t.=20Bigger=20product=20screenshots?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/homepage/use-cases/UseCases.tsx  | 22 +++++++++----------
 apps/landing-page/app/routes/index.tsx        |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/landing-page/app/features/homepage/use-cases/UseCases.tsx b/apps/landing-page/app/features/homepage/use-cases/UseCases.tsx
index 7a75c7fbabe..56beaf99a6c 100644
--- a/apps/landing-page/app/features/homepage/use-cases/UseCases.tsx
+++ b/apps/landing-page/app/features/homepage/use-cases/UseCases.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/components/Button";
 import { Progress } from "@/components/Progress";
+import { TypebotLogoFull } from "@/components/TypebotLogo";
 import { ButtonLink } from "@/components/link";
 import { enterpriseLeadTypebotUrl, registerUrl } from "@/constants";
 import { cn } from "@/lib/utils";
@@ -106,13 +106,14 @@ export const UseCases = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "flex flex-col gap-16 md:gap-20 px-4 md:pt-10 overflow-hidden",
-        className,
-      )}
+      className={cn("flex flex-col gap-16 md:gap-20 px-4 md:pt-10", className)}
       ref={containerRef}
     >
-      <div className="flex flex-col items-center gap-8 md:12">
+      <div className="flex flex-col items-center gap-20">
+        <TypebotLogoFull width="120px" />
+        <Cta />
+      </div>
+      <div className="flex flex-col items-center gap-4 md:12">
         <div className="flex items-end gap-4 md:gap-12">
           {useCases.map((useCase, index) => (
             <UsecaseTitle
@@ -140,7 +141,7 @@ export const UseCases = ({ className }: { className?: string }) => {
                 <img
                   src={useCase.images.builder.src}
                   alt={useCase.images.builder.alt}
-                  className="w-auto md:max-h-[60vh]"
+                  className="w-auto md:max-h-[85vh]"
                   width="3456px"
                   height="2158px"
                 />
@@ -149,7 +150,7 @@ export const UseCases = ({ className }: { className?: string }) => {
                 <img
                   src={useCase.images.bot.src}
                   alt={useCase.images.bot.alt}
-                  className="max-w-20 md:max-w-64 p-[2px] md:p-2"
+                  className="w-auto max-h-none max-w-20 md:max-w-64 2xl:max-w-none 2xl:max-h-[65vh] p-[2px] md:p-2"
                   width="1179px"
                   height="2556px"
                 />
@@ -158,7 +159,6 @@ export const UseCases = ({ className }: { className?: string }) => {
           ))}
         </div>
       </div>
-      <Cta />
     </div>
   );
 };
@@ -177,7 +177,7 @@ const UsecaseTitle = ({
     onClick={onClick}
   >
     <h3
-      className="text-lg md:text-2xl font-medium transition-opacity duration-200 ease-out text-center"
+      className="text-lg font-medium transition-opacity duration-200 ease-out text-center"
       style={{ opacity: progressValue ? 1 : 0.5 }}
     >
       {children}
@@ -188,7 +188,7 @@ const UsecaseTitle = ({
 
 export const Cta = () => (
   <div className="flex flex-col gap-6 items-center">
-    <p className="text-gray-11 text-balance max-w-4xl md:text-center">
+    <p className="text-gray-11 text-balance max-w-4xl md:text-center text-lg">
       Picture{" "}
       <span className="font-medium">
         a bot that goes beyond answering questions
diff --git a/apps/landing-page/app/routes/index.tsx b/apps/landing-page/app/routes/index.tsx
index 1f250bac365..1ce343880ab 100644
--- a/apps/landing-page/app/routes/index.tsx
+++ b/apps/landing-page/app/routes/index.tsx
@@ -40,8 +40,8 @@ function Home() {
           <div className="md:h-[200vh] motion-safe:md-scroll-use-cases-fade-in md:motion-safe:opacity-0">
             <UseCases className="md:sticky top-0" />
           </div>
-          <div id="magic-animation-separator" className="invisible -mt-32" />
           <Companies />
+          <div id="magic-animation-separator" className="invisible -mt-32" />
           <MainFeatures />
         </Section>
         <Section className="dark">