From 94a6c2dec27327ca1f5aec413282c3102030c099 Mon Sep 17 00:00:00 2001
From: Vibhor Phalke <vibgitcode27@gmail.com>
Date: Tue, 7 Jan 2025 02:18:13 +0530
Subject: [PATCH 1/3] fix scroll-trigger animation in feature showcase

Signed-off-by: Vibhor Phalke <vibgitcode27@gmail.com>
---
 components/features.tsx | 51 ++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/components/features.tsx b/components/features.tsx
index 288fee6c..e33ff096 100644
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -14,7 +14,7 @@ gsap.registerPlugin(ScrollTrigger);
 
 const TestAndStubGenerationImage = ({ isVisible }: { isVisible: boolean }) => (
   <div className="flex flex-col w-full imageToShow relative" id="img-1">
-    <div className="mb-2 h-[75%]">
+    <div className="mb-2 h-[75%] mt-[20vh]">
       {isVisible && <Image src={testAndStubsGen} alt="tests and stub gen gif" />}
     </div>
   </div>
@@ -22,8 +22,8 @@ const TestAndStubGenerationImage = ({ isVisible }: { isVisible: boolean }) => (
 
 const TestDuplicationImage = ({ isVisible }: { isVisible: boolean }) => (
   <div className="flex flex-col w-full imageToShow relative" id="img-2">
-    <div className="mb-2 h-[75%] mt-8">
-      {isVisible && <Image src={deDuplication} alt="dedup image gif" />}
+    <div className="mt-[200px]">
+      {isVisible && <Image src={deDuplication} alt="dedup image gif" className="h-5/6 w-5/6" />}
     </div>
   </div>
 );
@@ -113,8 +113,8 @@ export default function Features() {
   
     ScrollTrigger.create({
       trigger: details[2],
-      start: "top 80%", 
-      end: "bottom 25%",
+      start: "top 80%",
+      end: "top 100%",
       onEnter: () => {
         gsap.to(images[0], {
           opacity: 0,
@@ -131,6 +131,22 @@ export default function Features() {
         });
         setImage2Visible(true);
       },
+      onLeave: () => {
+        gsap.to(images[1], {
+          opacity: 0,
+          y: 50,
+          duration: 0.8,
+          ease: "power2.out"
+        });
+        setImage2Visible(false);
+        gsap.to(images[1], {  // Add this to show image1 again
+          opacity: 1,
+          y: 0,
+          duration: 0.8,
+          ease: "power2.out",
+        });
+        setImage2Visible(true);
+      },
       onLeaveBack: () => {
         gsap.to(images[1], {
           opacity: 0,
@@ -139,7 +155,6 @@ export default function Features() {
           ease: "power2.out",
         });
         setImage2Visible(false);
-  
         gsap.to(images[0], {
           opacity: 1,
           y: 0,
@@ -176,7 +191,7 @@ export default function Features() {
       trigger: ".content-container",
       start: "top top",
       end: "bottom bottom",
-      pin: ".heading-text",
+      pin: "top",
     });
   
     details.forEach((detail: HTMLElement) => {
@@ -202,18 +217,18 @@ export default function Features() {
 
   return (
     <>
+      <div className="max-w-3xl pt-2 mx-auto mt-16 text-center top-6 heading-text">
+        <h1 className="mb-4 text-5xl font-bold text-secondary-300">
+          Keploy for Developers
+        </h1>
+        <p className="text-xl text-gray-600">
+          smart API testing, capture network calls and generate tests with stubs
+        </p>
+      </div>
       <FeaturesMobileView />
       <section className="relative hidden lg:block" ref={inViewRef}>
-        <div className="absolute left-0 right-0 max-w-3xl pt-2 mx-auto mt-16 text-center top-6 heading-text">
-          <h1 className="mb-2 text-5xl font-bold text-secondary-300">
-            Keploy for Developers
-          </h1>
-          <p className="text-xl text-gray-600">
-            smart API testing, capture network calls and generate tests with stubs
-          </p>
-        </div>
-        <div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[30vh] pb-[50vh] mx-auto content-container">
-          <div className="mt-20 space-y-[60vh]">
+        <div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[10vh] mb-[40vh] mx-auto content-container">
+          <div className="mt-20 space-y-[35vh]">
             <div className="flex items-center detail" data-marker-content="img-1">
               <TextSection
                 svg={
@@ -272,7 +287,7 @@ export default function Features() {
               />
             </div>
           </div>
-          <div className="flex flex-col items-center relative justify-center h-min right-content space-y-8 mt-[35vh]">
+          <div className="flex flex-col items-center relative justify-center h-min right-content mt-[25vh]">
             <TestAndStubGenerationImage isVisible={image1Visible} />
             <TestDuplicationImage isVisible={image2Visible} />
           </div>

From c761998dba55b96ed4085959cde250ecf9d59192 Mon Sep 17 00:00:00 2001
From: Vibhor Phalke <vibgitcode27@gmail.com>
Date: Tue, 7 Jan 2025 02:28:37 +0530
Subject: [PATCH 2/3] fixed typescript errors

Signed-off-by: Vibhor Phalke <vibgitcode27@gmail.com>
---
 components/features.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/features.tsx b/components/features.tsx
index e33ff096..18bf1e58 100644
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -35,11 +35,11 @@ const TextSection = ({
   btnDescription,
   btnLink,
 }: {
-  svg: any;
+  svg: React.ReactNode;
   heading: string;
   description: string;
   btnDescription?: string;
-  btnLink?: any;
+  btnLink: string;
 }) => {
   return (
     <div className="flex flex-col items-center pl-4 mt-6 mb-8 text-center md:block md:mb-0 h-min md:text-left md:mt-0 text-details">
@@ -75,7 +75,7 @@ export default function Features() {
 
   useEffect(() => {
     if (!inView) {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+      ScrollTrigger.getAll().forEach((trigger) => {trigger.kill()});
       setImage1Visible(false);
       setImage2Visible(false);
       return;
@@ -209,7 +209,7 @@ export default function Features() {
     });
   
     return () => {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+      ScrollTrigger.getAll().forEach((trigger) => {trigger.kill()});
     };
   }, [inView]);
   

From f0b9b1c24dbb3bbdff070146656de208ac62cce3 Mon Sep 17 00:00:00 2001
From: Vibhor Phalke <vibgitcode27@gmail.com>
Date: Tue, 7 Jan 2025 03:40:16 +0530
Subject: [PATCH 3/3] fix heading-text visible in mobile view

Signed-off-by: Vibhor Phalke <vibgitcode27@gmail.com>
---
 components/features.tsx | 146 ++++++++++++++++++++--------------------
 1 file changed, 74 insertions(+), 72 deletions(-)

diff --git a/components/features.tsx b/components/features.tsx
index 18bf1e58..8041a71b 100644
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -22,7 +22,7 @@ const TestAndStubGenerationImage = ({ isVisible }: { isVisible: boolean }) => (
 
 const TestDuplicationImage = ({ isVisible }: { isVisible: boolean }) => (
   <div className="flex flex-col w-full imageToShow relative" id="img-2">
-    <div className="mt-[200px]">
+    <div className="mt-[400px]">
       {isVisible && <Image src={deDuplication} alt="dedup image gif" className="h-5/6 w-5/6" />}
     </div>
   </div>
@@ -114,7 +114,7 @@ export default function Features() {
     ScrollTrigger.create({
       trigger: details[2],
       start: "top 80%",
-      end: "top 100%",
+      end: "top 70%",
       onEnter: () => {
         gsap.to(images[0], {
           opacity: 0,
@@ -217,80 +217,82 @@ export default function Features() {
 
   return (
     <>
-      <div className="max-w-3xl pt-2 mx-auto mt-16 text-center top-6 heading-text">
-        <h1 className="mb-4 text-5xl font-bold text-secondary-300">
-          Keploy for Developers
-        </h1>
-        <p className="text-xl text-gray-600">
-          smart API testing, capture network calls and generate tests with stubs
-        </p>
-      </div>
       <FeaturesMobileView />
-      <section className="relative hidden lg:block" ref={inViewRef}>
-        <div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[10vh] mb-[40vh] mx-auto content-container">
-          <div className="mt-20 space-y-[35vh]">
-            <div className="flex items-center detail" data-marker-content="img-1">
-              <TextSection
-                svg={
-                  <svg
-                    className="w-6 h-6 fill-primary-300 "
-                    viewBox="0 0 12 12"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
-                  </svg>
-                }
-                heading={"Record Replay API Flows"}
-                description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!"
-                btnDescription="Explore More"
-                btnLink="https://keploy.io/docs/keploy-explained/introduction/"
-              />
-            </div>
-            <div className="flex items-center detail" data-marker-content="img-2">
-              <TextSection
-                svg={
-                  <svg
-                    className="w-6 h-6 fill-primary-300"
-                    viewBox="0 0 12 12"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z"
-                      fillRule="nonzero"
-                    />
-                  </svg>
-                }
-                heading={"Find Duplicate Tests"}
-                description="Find redundant tests that doesn't add to the test coverage. Automatically detect and remove duplicate tests, ideal for big-teams crowd-sourcing tests."
-                btnDescription="Explore More"
-                btnLink="https://keploy.io/docs/keploy-cloud/deduplication/"
-              />
+      <section className="hidden lg:block">
+        <div className="max-w-3xl pt-2 mx-auto mt-10 text-center heading-text">
+          <h1 className="mb-4 text-5xl font-bold text-secondary-300">
+            Keploy for Developers
+          </h1>
+          <p className="text-xl text-gray-600">
+            smart API testing, capture network calls and generate tests with stubs
+          </p>
+        </div>
+        <div className="relative hidden lg:block" ref={inViewRef}>
+          <div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[10vh] mb-[40vh] mx-auto content-container">
+            <div className="mt-20 space-y-[35vh]">
+              <div className="flex items-center detail" data-marker-content="img-1">
+                <TextSection
+                  svg={
+                    <svg
+                      className="w-6 h-6 fill-primary-300 "
+                      viewBox="0 0 12 12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
+                    </svg>
+                  }
+                  heading={"Record Replay API Flows"}
+                  description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!"
+                  btnDescription="Explore More"
+                  btnLink="https://keploy.io/docs/keploy-explained/introduction/"
+                />
+              </div>
+              <div className="flex items-center detail" data-marker-content="img-2">
+                <TextSection
+                  svg={
+                    <svg
+                      className="w-6 h-6 fill-primary-300"
+                      viewBox="0 0 12 12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                  }
+                  heading={"Find Duplicate Tests"}
+                  description="Find redundant tests that doesn't add to the test coverage. Automatically detect and remove duplicate tests, ideal for big-teams crowd-sourcing tests."
+                  btnDescription="Explore More"
+                  btnLink="https://keploy.io/docs/keploy-cloud/deduplication/"
+                />
+              </div>
+              <div className="flex items-center detail">
+                <TextSection
+                  svg={
+                    <svg
+                      className="w-6 h-6 fill-primary-300"
+                      viewBox="0 0 12 12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.334 8.06a.5.5 0 00-.421-.237 6.023 6.023 0 01-5.905-6c0-.41.042-.82.125-1.221a.5.5 0 00-.614-.586 6 6 0 106.832 8.529.5.5 0 00-.017-.485z"
+                        fillRule="nonzero"
+                      />
+                    </svg>
+                  }
+                  heading={"Works with JUnit, PyTest, Jest, Go-Test in CI/CD"}
+                  description="Merge Keploy tests coverage with unit testing libraries for combined test coverage gating in CI/CD pipelines like Jenkins, Github Actions."
+                  btnDescription="Explore More"
+                  btnLink=" https://keploy.io/docs/server/sdk-installation/go/"
+                />
+              </div>
             </div>
-            <div className="flex items-center detail">
-              <TextSection
-                svg={
-                  <svg
-                    className="w-6 h-6 fill-primary-300"
-                    viewBox="0 0 12 12"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M11.334 8.06a.5.5 0 00-.421-.237 6.023 6.023 0 01-5.905-6c0-.41.042-.82.125-1.221a.5.5 0 00-.614-.586 6 6 0 106.832 8.529.5.5 0 00-.017-.485z"
-                      fillRule="nonzero"
-                    />
-                  </svg>
-                }
-                heading={"Works with JUnit, PyTest, Jest, Go-Test in CI/CD"}
-                description="Merge Keploy tests coverage with unit testing libraries for combined test coverage gating in CI/CD pipelines like Jenkins, Github Actions."
-                btnDescription="Explore More"
-                btnLink=" https://keploy.io/docs/server/sdk-installation/go/"
-              />
+            <div className="flex flex-col items-center relative justify-center h-min right-content mt-[25vh]">
+              <TestAndStubGenerationImage isVisible={image1Visible} />
+              <TestDuplicationImage isVisible={image2Visible} />
             </div>
           </div>
-          <div className="flex flex-col items-center relative justify-center h-min right-content mt-[25vh]">
-            <TestAndStubGenerationImage isVisible={image1Visible} />
-            <TestDuplicationImage isVisible={image2Visible} />
-          </div>
         </div>
       </section>
     </>