From 7a385815a3d7b7901bebe6deb1c244ad185be906 Mon Sep 17 00:00:00 2001 From: sahadat-sk Date: Wed, 13 Mar 2024 07:25:52 +0530 Subject: [PATCH] refactor: feature section with parallax effect Signed-off-by: sahadat-sk --- components/features.tsx | 644 ++++++++++++---------------------------- 1 file changed, 196 insertions(+), 448 deletions(-) diff --git a/components/features.tsx b/components/features.tsx index 55820e77..a1839f1e 100644 --- a/components/features.tsx +++ b/components/features.tsx @@ -21,9 +21,6 @@ gsap.registerPlugin(useGSAP); gsap.registerPlugin(ScrollTrigger); const TestAndStubGenerationImage = () => { - const codeRef = useRef(null); - - const copyButtonRef = useRef(null); return (
{/* Features bg */} @@ -42,65 +39,55 @@ const TestAndStubGenerationImage = () => { />
- - {/*
-
- 
-            
-              $ curl -O
-              https://raw.githubusercontent.com/keploy/keploy/main/keploy.sh &&
-              source keploy.sh
-            
-
-
-
- -
-
*/} + ); }; const TestDuplicationImage = () => { + return ( +
+ {/* Features bg */} + {/*Element*/} + + + + +
+ ); +}; + +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(); + + const clipboard = new ClipboardJS(copyButtonRef.current!, { + target: () => codeRef.current!, + }); + + clipboard.on('success', (e) => { + // You can customize the success behavior here (e.g., show a notification). + console.log('Copied to clipboard:', e.text); + }); + + return () => { + clipboard.destroy(); + }; + }, []); + return ( <>
- {/* Features bg */} - {/*Element*/} - - - -
- - {/*
@@ -126,41 +113,36 @@ const TestDuplicationImage = () => { Copy
- */} + ); }; -export default function Features() { - const [tab, setTab] = useState(1); +const TextSection = ({ + svg, + heading, + description, +}: { + svg: any; + heading: string; + description: string; +}) => { + return ( +
+
+ {svg} +
+
+ {heading} +
+
{description}
+
+ ); +}; - const tabs = useRef(null); - const codeRef = useRef(null); - const copyButtonRef = useRef(null); +export default function Features() { const container = useRef(null); - const heightFix = () => { - if (tabs.current && tabs.current.parentElement) - tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`; - }; - - // useEffect(() => { - // heightFix(); - - // const clipboard = new ClipboardJS(copyButtonRef.current!, { - // target: () => codeRef.current!, - // }); - - // clipboard.on('success', (e) => { - // // You can customize the success behavior here (e.g., show a notification). - // console.log('Copied to clipboard:', e.text); - // }); - - // return () => { - // clipboard.destroy(); - // }; - // }, []); - useGSAP( () => { const details = gsap.utils.toArray('.detail'); @@ -177,8 +159,8 @@ export default function Features() { details.forEach((detail: any, index) => { ScrollTrigger.create({ trigger: detail, - start: 'middle top', - end: 'middle bottom', + start: 'middle 60%', + end: 'middle -20%', onUpdate: () => [ images.forEach((image: any, i: number) => { if (i === index) { @@ -198,46 +180,148 @@ export default function Features() { { scope: container } ); - if (true) { - return ( -
+ return ( + <> +
+
+
+

+ Keploy for developers +

+

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

+
+ + + + } + heading={' Test and Stubs Generation'} + description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!" + /> + + + + + + } + heading={'Test Deduplication'} + description="Automatically detect and remove duplicate tests, ideal for scenarios recorded in live-environments." + /> + + + + + + + } + heading={'Native Integration'} + description="Merge Keploy tests with testing libraries(JUnit, go-test, py-test, jest) for combined test coverage." + /> + +
+ Features bg + {/*Element*/} + {/*
*/} +
+
+
+
+
+

+ Keploy for developers +

+

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

+
-
-
- Test and Stubs Generation div -
-
- Record and replay complex, distributed API flows as mocks and - stubs. It's like time machine for tests! -
-
+ + + + } + heading={' Test and Stubs Generation'} + description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!" + />
-
-
- Test Deduplication -
-
- Automatically detect and remove duplicate tests, ideal for - scenarios recorded in live-environments. -
-
+ + + + } + heading={'Test Deduplication'} + description="Automatically detect and remove duplicate tests, ideal for scenarios recorded in live-environments." + />
-
-
- Native Integration -
-
- Merge Keploy tests with testing libraries(JUnit, go-test, - py-test, jest) for combined test coverage. -
-
+ + + + } + heading={'Native Integration'} + description="Merge Keploy tests with testing libraries(JUnit, go-test, py-test, jest) for combined test coverage." + />
@@ -257,342 +341,6 @@ export default function Features() {
- ); - } - - return ( -
- {/* Section background (needs .relative class on parent and next sibling elements) */} -
+ ); }