Skip to content

Commit

Permalink
feat: vscode extension page (#134)
Browse files Browse the repository at this point in the history 
* feat:vscode extension page

Signed-off-by: Yash Khare <[email protected]>

* feat:vscode extension page

Signed-off-by: Yash Khare <[email protected]>

* feat:vscode extension page

Signed-off-by: Yash Khare <[email protected]>

* image centering and animation checks

Signed-off-by: Yash Khare <[email protected]>

* image centering and animation checks

Signed-off-by: Yash Khare <[email protected]>

* image centering and animation checks

Signed-off-by: Yash Khare <[email protected]>

* add keploy embed

Signed-off-by: Yash Khare <[email protected]>

* move to plugins

---------

Signed-off-by: Yash Khare <[email protected]>
Co-Signed-off-by: Animesh Pathak <[email protected]>
  • Loading branch information
@khareyash05
khareyash05 authored Dec 3, 2024
1 parent 7507dbc commit c74f06e
Show file tree
Hide file tree
Showing 10 changed files with 667 additions and 0 deletions.
15 changes: 15 additions & 0 deletions app/(default)/plugins/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import Footer from "@/components/ui/footer";

import Hero from "@/components/vscode-extension/hero";
import Features from "@/components/vscode-extension/features";
import Newsletter from "@/components/newsletter";
export default function Home() {
return (
<>
<Hero />
<Features />
<Newsletter/>
<Footer />
</>
);
}
38 changes: 38 additions & 0 deletions components/vscode-extension/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";

const StorylaneEmbed = () => {
return (
<div
style={{
position: "relative",
paddingBottom: "calc(60%)", // Adjusted for larger size
width: "80%", // Wider container for a bigger view
height: 0,
transform: "scale(1)",
margin: "0 auto", // Center horizontally
}}
>
<iframe
loading="lazy"
className="sl-demo"
src="https://app.storylane.io/demo/yycvc6rwnwtg?embed=inline"
name="sl-embed"
allow="fullscreen"
allowFullScreen
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
border: "1px solid rgba(63,95,172,0.35)",
boxShadow: "0px 0px 18px rgba(26, 19, 72, 0.15)",
borderRadius: "10px",
boxSizing: "border-box",
}}
/>
</div>
);
};

export default StorylaneEmbed;
280 changes: 280 additions & 0 deletions components/vscode-extension/features-mobileview.tsx
View file

Large diffs are not rendered by default.

164 changes: 164 additions & 0 deletions components/vscode-extension/features.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
"use client";

import React, { useRef, FC } from "react";
import Link from "next/link";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/all";
import FeaturesMobileView from "./features-mobileview";
import Pic1 from "@/public/images/pic1.svg";
import Pic3 from "@/public/images/pic3.svg";
import Pic4 from "@/public/images/pic4.svg";

gsap.registerPlugin(useGSAP);
gsap.registerPlugin(ScrollTrigger);

const GenerateTestsImage: FC = () => (
<div className="inline-flex flex-col w-full imageToShow" id="img-1">
<div className="mb-2 h-[50%]">
<img src={Pic1.src} alt="Image 1" className="w-full h-full object-cover rounded" />
</div>
</div>
);

const ReplayValidateImage: FC = () => (
<div className="inline-flex flex-col w-full imageToShow" id="img-2">
<div className="mb-2 h-[50%]">
<img src={Pic4.src} alt="Image 2" className="w-full h-full object-cover rounded" />
</div>
</div>
);

const RealTimeImage: FC = () => (
<div className="inline-flex flex-col w-full imageToShow" id="img-3">
<div className="mb-2 h-[50%]">
<img src={Pic3.src} alt="Image 3" className="w-full h-full object-cover rounded" />
</div>
</div>
);

interface TextSectionProps {
svg: React.ReactNode;
heading: string;
description: string;
btnDescription?: string;
btnLink?: string;
}

const TextSection: FC<TextSectionProps> = ({
svg,
heading,
description,
btnDescription,
btnLink,
}) => (
<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">
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mb-4 bg-white rounded-full ">
{svg}
</div>
<div className="mb-1 text-2xl font-bold leading-snug tracking-tight md:text-4xl text-secondary-300">
{heading}
</div>
<div className="text-gray-600 md:text-lg">{description}</div>
{btnDescription && btnLink && (
<div>
<Link
className="btn mt-8 text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0"
href={btnLink}
>
{btnDescription}
</Link>
</div>
)}
</div>
);

const Features: FC = () => {
const container = useRef<HTMLDivElement | null>(null);

useGSAP(
() => {
const details = gsap.utils.toArray<HTMLDivElement>(".detail");
const images = gsap.utils.toArray<HTMLDivElement>(".imageToShow");

// Set initial opacity for images
gsap.set(images, { opacity: 0 });

// Pin the container for scrolling effect
ScrollTrigger.create({
trigger: ".content-container",
start: "top top",
end: "bottom bottom",
pin: ".right-content",
scrub: 1,
});

// Synchronize text and image animations
details.forEach((detail, i) => {
ScrollTrigger.create({
trigger: detail,
start: "top center",
end: "top center",
onEnter: () => gsap.to(images[i], { opacity: 1, duration: 0.5 }),
onLeaveBack: () => gsap.to(images[i], { opacity: 0, duration: 0.5 }),
scrub: 1,
});
});
},
{ scope: container }
);

return (
<>
<FeaturesMobileView />
<section ref={container} className="relative hidden lg:block">
<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">
Here's What Keploy Does
</h1>
<p className="text-xl text-gray-600">
Keploy takes the hassle out of writing unit and integration tests. With test cases generated in seconds, you can focus more on development and less on manual test creation. It ensures complete coverage, catches edge cases early
</p>
</div>
<div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[45vh] pb-[50vh] mx-auto content-container">
<div className="mt-20 space-y-[50vh]">
<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="Generate Tests with a Click"
description="With one click, Keploy’s VS Code extension automatically analyzes code functions and generates well-structured unit tests. Save time on test creation and ensure code is covered effectively."
btnDescription="Explore More"
btnLink="https://marketplace.visualstudio.com/items?itemName=Keploy.keployio"
/>
</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.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="Replay and Validate Code Changes Instantly"
description="Keploy enables developers to replay tests with each code change to ensure stability. Quickly verify that new updates don’t introduce regressions or break existing functionality."
btnDescription="Explore VS Code Extension"
btnLink="https://marketplace.visualstudio.com/items?itemName=Keploy.keployio"
/>
</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="Real-Time Code Coverage Insights"
description="Keploy’s extension highlights untested code in real-time, helping developers keep track of their coverage metrics and identify gaps while they code."
btnDescription="Explore VS Code Extension"
btnLink="https://marketplace.visualstudio.com/items?itemName=Keploy.keployio"
/>
</div>
</div>
<div className="flex items-center [&>*]:absolute relative justify-center h-min [&>*]:top-0 right-content">
<GenerateTestsImage />
<ReplayValidateImage />
<RealTimeImage />
</div>
</div>
</section>
</>
);
};

export default Features;
92 changes: 92 additions & 0 deletions components/vscode-extension/hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/* eslint-disable @typescript-eslint/no-unsafe-call */
"use client";
import Link from 'next/link';
import Image from "next/image";
import GoodByePic from "@/public/images/main.svg";
import Demo from "@/public/images/demovscode.gif";
import StorylaneEmbed from "@/components/vscode-extension/demo";

export default function Hero() {
return (
<section className="relative">

{/* Illustration behind hero content */}
<div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none -z-1" aria-hidden="true">
<div className='mb-24'>
<svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
<stop stopColor="#FFF" offset="0%" />
<stop stopColor="#f5f5f5" offset="50%" />
<stop stopColor="#EAEAEA" offset="100%" />
</linearGradient>
</defs>
<g fill="url(#illustration-01)" fillRule="evenodd">
<circle cx="1232" cy="128" r="128" opacity={0.85} />
<circle cx="155" cy="443" r="64" opacity={0.85} />
</g>
</svg>
</div>
</div>

<div className="max-w-6xl mx-auto px-4 sm:px-6">

{/* Hero content */}
<div className="pt-32 pb-12 md:pt-40 md:pb-20 gap-16">

{/* Section header */}
<div className="text-center pb-12 md:pb-16">
<p className="text-xl sm:text-2xl text-accent-200 mb-4 leading-snug sm:leading-normal" data-aos="zoom-y-out" data-aos-delay="150">
2 minutes to 90% test coverage!
</p>
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-secondary-300 font-extrabold leading-tight sm:leading-tight md:leading-tighter tracking-tighter mb-4 md:mt-4 lg:mt-5" data-aos="zoom-y-out">
AI Generated Unit and Integration Tests
<br />
<span className="bg-clip-text text-transparent bg-gradient-to-r from-gradient-500 to-gradient-200">
that actually work!
</span>
</h1>

<div className="max-w-3xl mx-auto">
<p className="text-lg sm:text-xl text-center text-accent-200 mb-8 leading-snug sm:leading-normal lg:text-center" data-aos="zoom-y-out" data-aos-delay="150">
VS Code Extension to Generate Unit Tests in One Click
</p>
<div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center md:space-x-4 lg:space-x-4" data-aos="zoom-y-out" data-aos-delay="300">
<div className="mb-4">
<Link target="_blank" rel="noopener noreferrer" className="btn text-secondary-300 bg-primary-300 hover:text-gradient-500 w-full sm:w-auto sm:mb-0" href="https://marketplace.visualstudio.com/items?itemName=Keploy.keployio">
Try Now
</Link>
</div>
<div className='mb-4'>
<Link className="btn text-white bg-green-900 hover:text-emerald-200 w-full sm:mb-0" href="https://app.keploy.io/signin">
See Demo
</Link>
</div>
</div>
</div>

<div className="my-6 px-8">
<p className="text-3xl py-6"><b>Say goodbye to endless hours spent manually writing test cases</b></p>
<p className="text-xl text-gray-600">Keploy generates comprehensive test cases generated in seconds, you’ll reduce back-and-forth discussions and minimize missed edge cases. No more follow-up questions on coverage or gaps—just high-quality code and faster feedback for the entire team.</p>
{/* Center GoodByePic image */}
<div className="flex justify-center my-8">
<Image src={Demo} alt="Goodbye" className="rounded-lg w-full h-full" />
</div>
</div>

<div className="my-16">
<p className="text-3xl py-6 text-center">
<b>Keploy Interactive Demo: How It Works!</b>
</p>
{/* Center Demo GIF */}
<div className="flex justify-center items-center" style={{height: "80vh"}}>
<StorylaneEmbed/>
</div>
</div>
</div>
</div>

</div>
</section>
);
}
Binary file added public/images/demovscode.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/images/main.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions public/images/pic1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions public/images/pic3.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/images/pic4.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c74f06e

Please sign in to comment.