From 7a02503889903915ca9345b09991fb5348f0e0a2 Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:32:14 +0200
Subject: [PATCH] fix: flat gradient in UseCases

---
 frontend/app/(home)/components/HomeSection/HomeSection.tsx | 7 +++++++
 frontend/app/(home)/page.tsx                               | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/app/(home)/components/HomeSection/HomeSection.tsx b/frontend/app/(home)/components/HomeSection/HomeSection.tsx
index e55f06a72c67..3f893d9012d0 100644
--- a/frontend/app/(home)/components/HomeSection/HomeSection.tsx
+++ b/frontend/app/(home)/components/HomeSection/HomeSection.tsx
@@ -7,6 +7,7 @@ type HomeSectionProps = {
   slantCurrent?: "up" | "down" | "none";
   slantBefore?: "up" | "down" | "none";
   slantAfter?: "up" | "down" | "none";
+  gradient?: string;
   hiddenOnMobile?: boolean;
   children: React.ReactNode;
   className?: string;
@@ -17,6 +18,7 @@ export const HomeSection = ({
   slantCurrent = "none",
   slantBefore = "none",
   slantAfter = "none",
+  gradient,
   hiddenOnMobile = false,
   className,
   children,
@@ -38,6 +40,11 @@ export const HomeSection = ({
       <section className="flex flex-col items-center w-full max-w-6xl z-[2] py-8">
         {children}
       </section>
+      {gradient !== undefined ? (
+        <div
+          className={`absolute w-screen bottom-[calc(100vw*tan(6deg))] left-0 h-[30%] ${gradient}`}
+        />
+      ) : null}
     </div>
   );
 };
diff --git a/frontend/app/(home)/page.tsx b/frontend/app/(home)/page.tsx
index dc1f69155a97..e5b89f3532d0 100644
--- a/frontend/app/(home)/page.tsx
+++ b/frontend/app/(home)/page.tsx
@@ -50,7 +50,7 @@ const HomePage = (): JSX.Element => {
           <HomeSection
             bg="bg-[#362469]"
             slantCurrent="down"
-            className="bg-gradient-to-b from-[#362469] from-75% to-white"
+            gradient="bg-gradient-to-t bg-gradient-to-t from-white to-[#362469]"
           >
             <UseCases />
             <div />