Skip to content

Prevent TextSections from Overlapping with Header in Features Component #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vibgitcode27 wants to merge 3 commits into
base: main
Choose a base branch
from
+92 −75
Open

Prevent TextSections from Overlapping with Header in Features Component #168

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94a6c2d
fix scroll-trigger animation in feature showcase
Vibgitcode27 Jan 6, 2025
c761998
fixed typescript errors
Vibgitcode27 Jan 6, 2025
f0b9b1c
fix heading-text visible in mobile view
Vibgitcode27 Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 92 additions & 75 deletions components/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ 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>
);

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-[400px]">
{isVisible && <Image src={deDuplication} alt="dedup image gif" className="h-5/6 w-5/6" />}
</div>
</div>
);
Expand All @@ -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">
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -113,8 +113,8 @@ export default function Features() {

ScrollTrigger.create({
trigger: details[2],
start: "top 80%",
end: "bottom 25%",
start: "top 80%",
end: "top 70%",
onEnter: () => {
gsap.to(images[0], {
opacity: 0,
Expand All @@ -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,
Expand All @@ -139,7 +155,6 @@ export default function Features() {
ease: "power2.out",
});
setImage2Visible(false);

gsap.to(images[0], {
opacity: 1,
y: 0,
Expand Down Expand Up @@ -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) => {
Expand All @@ -194,7 +209,7 @@ export default function Features() {
});

return () => {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
ScrollTrigger.getAll().forEach((trigger) => {trigger.kill()});
};
}, [inView]);

Expand All @@ -203,78 +218,80 @@ export default function Features() {
return (
<>
<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">
<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 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="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 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" 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 className="flex flex-col items-center relative justify-center h-min right-content mt-[25vh]">
<TestAndStubGenerationImage isVisible={image1Visible} />
<TestDuplicationImage isVisible={image2Visible} />
</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 flex-col items-center relative justify-center h-min right-content space-y-8 mt-[35vh]">
<TestAndStubGenerationImage isVisible={image1Visible} />
<TestDuplicationImage isVisible={image2Visible} />
</div>
</div>
</section>
Expand Down