From 2325303655d084b37abbed7c69ed347c2d6a7620 Mon Sep 17 00:00:00 2001 From: Ethan Water Date: Wed, 27 Mar 2024 00:33:00 -0400 Subject: [PATCH 1/3] remove md:max-w-none Signed-off-by: Ethan Water --- components/features.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/features.tsx b/components/features.tsx index b23585b0..9f002dc6 100644 --- a/components/features.tsx +++ b/components/features.tsx @@ -337,7 +337,7 @@ export default function Features() { >
Date: Sun, 31 Mar 2024 07:11:11 -0400 Subject: [PATCH 2/3] original commit Signed-off-by: Ethan Water --- components/features.tsx | 511 +++++++++++++++++++++------------------- package-lock.json | 37 ++- package.json | 8 +- 3 files changed, 293 insertions(+), 263 deletions(-) diff --git a/components/features.tsx b/components/features.tsx index 18b65a69..4a5d847f 100644 --- a/components/features.tsx +++ b/components/features.tsx @@ -13,70 +13,20 @@ import { Player, Controls } from "@lottiefiles/react-lottie-player"; import CopyButton from "@/public/images/icons8-copy-96.png"; import ClipboardJS from "clipboard"; -import gsap from "gsap"; // <-- import GSAP -import { useGSAP } from "@gsap/react"; // <-- import the hook -import { ScrollTrigger } from "gsap/all"; -import _ScrollTrigger from "gsap/ScrollTrigger"; -import FeaturesMobileView from "./FeatureMoblieView"; -gsap.registerPlugin(useGSAP); -gsap.registerPlugin(ScrollTrigger); - -const TestAndStubGenerationImage = () => { - return ( -
- {/* Features bg */} -
- - - -
- -
- ); -}; - -const TestDuplicationImage = () => { - return ( -
- {/* Features bg */} - {/*Element*/} - - - - -
- ); -}; +export default function Features() { + const [tab, setTab] = useState(1); -const CopyCode = () => { + const tabs = useRef(null); const codeRef = useRef(null); - const copyButtonRef = useRef(null); - // const heightFix = () => { - // if (tabs.current && tabs.current.parentElement) - // tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`; - // }; + + const heightFix = () => { + if (tabs.current && tabs.current.parentElement) + tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`; + }; + useEffect(() => { - // heightFix(); + heightFix(); const clipboard = new ClipboardJS(copyButtonRef.current!, { target: () => codeRef.current!, @@ -93,69 +43,251 @@ const CopyCode = () => { }, []); return ( - <> +
+ {/* Section background (needs .relative class on parent and next sibling elements) */}
-
- 
-            
-              $ curl -O
-              https://raw.githubusercontent.com/keploy/keploy/main/keploy.sh &&
-              source keploy.sh
-            
-
-
-
- -
-
- - ); -}; + className="absolute inset-0 bg-neutral-100 pointer-events-none mb-16" + aria-hidden="true" + /> +
-const TextSection = ({ - svg, - heading, - description, -}: { - svg: any; - heading: string; - description: string; -}) => { - return ( -
-
- {svg} -
-
- {heading} -
-
{description}
-
- ); -}; - -export default function Features() { - const container = useRef(null); +
+
+ {/* Section header */} +
+

+ Keploy for developers +

+

+ simplified testing, capturing network interactions and generating + automated tests +

+
- useGSAP( - () => { - const details: any = gsap.utils.toArray(".detail"); + {/* Section content */} +
+ {/* Content */} +
+
+

+ Give your teams the tool they need to move faster +

+

+ Accelerate development with streamlined testing, capturing + network calls, automating scenarios, and seamless tool + integration. +

+
+ {/* Tabs buttons */} + +
- const images: any = gsap.utils.toArray(".imageToShow"); + {/* Tabs items */} +
+
+
+ {/* Item 1 */} + heightFix()} + unmount={false} + > +
+ {/* Features bg */} +
+ + + +
+
+
+ 
+                            
+                              $ curl -O
+                              https://raw.githubusercontent.com/keploy/keploy/main/keploy.sh
+                              && source keploy.sh
+                            
+
+
+
+ +
+
+
+ + {/* Item 2 */} + heightFix()} + unmount={false} + > +
+ {/* Features bg */} + {/*Element*/} + + + +
- - gsap.set(images[1], { opacity: 0 }); - - ScrollTrigger.create({ - trigger: ".content-container", - start: "top top", - end: "bottom bottom", - pin: ".right-content", - }); - ScrollTrigger.create({ - trigger: ".content-container", - start: "top top", - end: "bottom bottom", - pin: ".heading-text", - }); - - details.forEach((detail: any) => { - gsap.to(detail, { - scrollTrigger: { - trigger: detail, - start: "center center", - scrub: 1, - }, - opacity: 0, - }); - }); - - gsap.to(images[0], { - scrollTrigger: { - trigger: details[1], - start: "center center", - end: "center center", - scrub: 1, - }, - opacity: 0, - }); - gsap.to(images[1], { - scrollTrigger: { - trigger: details[1], - start: "center center", - end: "center center", - scrub: 1, - }, - opacity: 1, - }); - }, - { scope: container } - ); - - return ( - <> - -
-
-

- Keploy for developers -

-

- simplified testing, capturing network interactions and generating - automated tests -

-
- +
+
); -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index db823292..2fd73f2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,6 @@ "@gsap/react": "^2.1.0", "@headlessui/react": "^1.7.14", "@lottiefiles/react-lottie-player": "^3.5.3", - "@types/node": "^20.2.5", - "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", "aos": "^3.0.0-beta.6", "blitz": "^2.0.0-beta.31", @@ -22,17 +20,19 @@ "next": "^13.4.12", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-responsive-carousel": "^3.2.23", - "typescript": "^5.0.4" + "react-responsive-carousel": "^3.2.23" }, "devDependencies": { "@tailwindcss/forms": "^0.5.3", "@types/aos": "^3.0.4", + "@types/node": "20.12.2", + "@types/react": "18.2.73", "@types/svgo": "^3.0.0", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "sharp": "^0.32.4", "tailwindcss": "^3.3.2", + "typescript": "5.4.3", "web-vitals": "^3.5.2" } }, @@ -2446,9 +2446,9 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==" }, "node_modules/@types/node": { - "version": "20.11.27", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.27.tgz", - "integrity": "sha512-qyUZfMnCg1KEz57r7pzFtSGt49f6RPkPBis3Vo4PbS7roQEDn22hiHzl/Lo1q4i4hDEgBJmBF/NTNg2XR0HbFg==", + "version": "20.12.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz", + "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==", "dependencies": { "undici-types": "~5.26.4" } @@ -2459,12 +2459,11 @@ "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { - "version": "18.2.65", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.65.tgz", - "integrity": "sha512-98TsY0aW4jqx/3RqsUXwMDZSWR1Z4CUlJNue8ueS2/wcxZOsz4xmW1X8ieaWVRHcmmQM3R8xVA4XWB3dJnWwDQ==", + "version": "18.2.73", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz", + "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, @@ -2484,11 +2483,6 @@ "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.8", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" - }, "node_modules/@types/svgo": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/svgo/-/svgo-3.0.0.tgz", @@ -5354,6 +5348,11 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -9424,9 +9423,9 @@ } }, "node_modules/typescript": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", - "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index 97de58e6..f034b74a 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,6 @@ "@gsap/react": "^2.1.0", "@headlessui/react": "^1.7.14", "@lottiefiles/react-lottie-player": "^3.5.3", - "@types/node": "^20.2.5", - "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", "aos": "^3.0.0-beta.6", "blitz": "^2.0.0-beta.31", @@ -23,17 +21,19 @@ "next": "^13.4.12", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-responsive-carousel": "^3.2.23", - "typescript": "^5.0.4" + "react-responsive-carousel": "^3.2.23" }, "devDependencies": { "@tailwindcss/forms": "^0.5.3", "@types/aos": "^3.0.4", + "@types/node": "20.12.2", + "@types/react": "18.2.73", "@types/svgo": "^3.0.0", "autoprefixer": "^10.4.14", "postcss": "^8.4.24", "sharp": "^0.32.4", "tailwindcss": "^3.3.2", + "typescript": "5.4.3", "web-vitals": "^3.5.2" } } From 840623e00270c3a423be41bd72633ce4c74b3cfa Mon Sep 17 00:00:00 2001 From: Ethan Water Date: Sun, 31 Mar 2024 19:17:00 -0400 Subject: [PATCH 3/3] remove overlap-maintain change Signed-off-by: Ethan Water --- components/FeatureMoblieView.tsx | 2 +- components/features.tsx | 570 +++++++++++++------------------ components/ui/logo.tsx | 2 +- 3 files changed, 239 insertions(+), 335 deletions(-) diff --git a/components/FeatureMoblieView.tsx b/components/FeatureMoblieView.tsx index bdd99eef..74710720 100644 --- a/components/FeatureMoblieView.tsx +++ b/components/FeatureMoblieView.tsx @@ -337,7 +337,7 @@ export default function FeaturesMobileView() { >
(1); +import gsap from "gsap"; // <-- import GSAP +import { useGSAP } from "@gsap/react"; // <-- import the hook +import { ScrollTrigger } from "gsap/all"; +import _ScrollTrigger from "gsap/ScrollTrigger"; +import FeaturesMobileView from "./FeatureMoblieView"; +gsap.registerPlugin(useGSAP); +gsap.registerPlugin(ScrollTrigger); - const tabs = useRef(null); - const codeRef = useRef(null); - const copyButtonRef = useRef(null); +const TestAndStubGenerationImage = () => { + return ( +
+ {/* Features bg */} +
+ + + +
+ +
+ ); +}; + +const TestDuplicationImage = () => { + return ( +
+ {/* Features bg */} + {/*Element*/} + + + + +
+ ); +}; - const heightFix = () => { - if (tabs.current && tabs.current.parentElement) - tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`; - }; +const CopyCode = () => { + const codeRef = useRef(null); + const copyButtonRef = useRef(null); + // const heightFix = () => { + // if (tabs.current && tabs.current.parentElement) + // tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`; + // }; useEffect(() => { - heightFix(); + // heightFix(); const clipboard = new ClipboardJS(copyButtonRef.current!, { target: () => codeRef.current!, @@ -43,340 +93,194 @@ export default function Features() { }, []); return ( -
- {/* Section background (needs .relative class on parent and next sibling elements) */} + <>
+ ); -} \ No newline at end of file +} diff --git a/components/ui/logo.tsx b/components/ui/logo.tsx index 4ef55b7d..8070bf99 100644 --- a/components/ui/logo.tsx +++ b/components/ui/logo.tsx @@ -26,7 +26,7 @@ export default function Logo() { - +