Skip to content

Commit

Permalink
Merge pull request #131 from keploy/staging
Browse files Browse the repository at this point in the history 
New Navbar
  • Loading branch information
@Aditya-eddy
Aditya-eddy authored Nov 14, 2024
2 parents 8ad7ab0 + e1adebc commit 9c71c61
Show file tree
Hide file tree
Showing 49 changed files with 2,639 additions and 87 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,5 @@ next-env.d.ts
# contentlayer
.contentlayer


.early.coverage
29 changes: 29 additions & 0 deletions app/(default)/coming-soon/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import Header from "@/components/ui/header";

export const metadata = {
title: "Coming Soon",
description: "Stay tuned! We’re working hard to bring something amazing to you soon.",
};

export default function ComingSoon() {
return (
<>
<Header />
<section className="bg-gradient-to-b from-gray-100 to-white min-h-screen flex items-center">
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<div className="pt-32 pb-12 md:pt-40 md:pb-20 text-center">
{/* Page header */}
<div className="max-w-3xl mx-auto">
<h1 className=" h1 text-4xl font-bold leading-tight text-gray-900 mb-4">
Coming Soon
</h1>
<p className="text-lg text-gray-600">
We’re putting the final touches on our new page. Reach out if you have any questions!
</p>
</div>
</div>
</div>
</section>
</>
);
}
4 changes: 2 additions & 2 deletions components/installation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,12 +181,12 @@ const Installation = () => {
</div>
</div>
<div className="flex justify-center">
<Link
<Link
className="btn text-secondary-300 text-center bg-primary-300 text-xs md:text-sm lg:text-base hover:font-semibold w-full hover:text-white sm:w-auto sm:mb-0"
href="https://www.github.com/keploy/keploy"
>
Explore on Github
</Link>
</Link>
</div>
<div className=" max-w-sm">
<Snackbar
Expand Down
10 changes: 10 additions & 0 deletions components/nav/docsSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export default function Docs() {
return (
<>
<div className="font-medium text-gray-600 px-3 py-3 flex items-center transition duration-150 ease-in-out whitespace-nowrap relative group cursor-pointer">
<a href="">Docs</a>
<span className="absolute text-[#666666] text-[3px] left-[.15rem] bottom-[.15rem] w-full h-[.195rem] bg-current transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</div>
</>
);
}
215 changes: 215 additions & 0 deletions components/nav/productSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
import React, { useState, useEffect } from "react";
import { UpIcon } from "./UpIcon";
import DownIcon from "./DownIcon";
import OpenSource from "@/public/images/navBarIcons/OpenSource";
import EnterpriseSolution from "@/public/images/navBarIcons/EnterpriseSolution";
import WhatIsKeploy from "@/public/images/navBarIcons/WhatIsKeploy";
import WhyUseKeploy from "@/public/images/navBarIcons/WhyUseKeploy";
import HowItWorks from "@/public/images/navBarIcons/HowItWorks";
import GettingStarted from "@/public/images/navBarIcons/GettingStarted";
import ApiCallRecording from "@/public/images/navBarIcons/ApiCallRecording";
import AutomaticMocking from "@/public/images/navBarIcons/AutomaticMocking";
import CICD from "@/public/images/navBarIcons/CICD";
import MultiPurposeMocks from "@/public/images/navBarIcons/MultiPurposeMocks";
import MemoizedImage from "@/public/images/navBarIcons/EnterPrice";

export default function Product() {
const [openDropdown, setShowDropdown] = useState(false);
const [enterpriseHover, setEnterpriseHover] = useState(false);
const [openSourceHover, setOpenSourceHover] = useState(true);

const showDropdown = () => {
setShowDropdown(true);
};
const hideDropdown = () => {
setShowDropdown(false);
};
const toggleDropdown = () => {
setShowDropdown(!openDropdown);
};

useEffect(() => {
const img = new Image();
img.src = "/images/navBarIcons/EnterPrice.svg";
}, []);

return (
<div
onMouseEnter={showDropdown}
onMouseLeave={hideDropdown}
className="relative flex items-center py-3 transition duration-150 ease-in-out cursor-pointer"
>
<div className="flex items-center text-gray-600 hover:text-primary-100">
<div className="flex">
<div className="font-medium text-gray-600 px-3 py-3 flex items-center transition duration-150 ease-in-out whitespace-nowrap relative group">
Products
<span className="absolute text-gray-600 text-[3px] left-[.45rem] bottom-[.15rem] w-full h-[.195rem] bg-current transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</div>
</div>
<div onClick={toggleDropdown}>
{openDropdown ? (
<UpIcon className="text-gray-600" />
) : (
<DownIcon className="text-gray-600" />
)}
</div>
</div>

{openDropdown && (
<div className="fixed bg-gradient-100 pb-8 z-10 shadow-xl top-[80px] left-0 right-0 mx-auto w-full max-w-6xl cursor-auto rounded-b-2xl p-4 sm:p-6">
<div className="flex flex-col md:flex-row items-start justify-between">
<div className="flex flex-col md:flex-row w-full">
<div className="p-5 flex-1">
<div
className="flex gap-3 justify-start items-center hover:bg-primary-100 hover:bg-opacity-20 duration-300 rounded-full p-5 mb-6"
onMouseEnter={() => {
setOpenSourceHover(true);
}}
>
<OpenSource />
<div className="flex flex-col w-full justify-center">
<h1 className="text-lg font-bold cursor-pointer">Open Source</h1>
<p className="text-sm text-[#797C88] cursor-pointer">
Open Source testing solution
</p>
</div>
</div>

<div
className="flex gap-3 justify-start items-center hover:bg-primary-100 hover:bg-opacity-20 duration-300 rounded-full p-5"
onMouseEnter={() => {
setOpenSourceHover(false);
}}
>
<EnterpriseSolution />
<div>
<h1 className="text-lg font-bold cursor-pointer">Enterprise Solution</h1>
<p className="text-sm text-[#797C88] cursor-pointer">
Comprehensive enterprise testing
</p>
</div>
</div>
</div>

<div className="w-full md:w-1/3 p-5 relative">
{/* Open Source hover content */}
<div
className={`transition-opacity duration-300`}
>
<p className="text-sm text-gray-500 pb-5">Features</p>
<ul className="flex flex-col gap-4">
<li>
<a
href="https://keploy.io/docs/concepts/what-is-keploy/#step-1--record-unique-network-interactions-as-test-case"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<ApiCallRecording />
API Call Recording and Replay
</a>
</li>
<li>
<a
href="https://keploy.io/docs/concepts/reference/glossary/mocks/#overcoming-the-challenges"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<AutomaticMocking />
Automatic Mocking of Dependencies
</a>
</li>
<li>
<a
href="https://keploy.io/docs/concepts/what-are-keploy-features/#-combined-test-coverage-in-cicd"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<CICD />
CI/CD Integration
</a>
</li>
<li>
<a
href="https://keploy.io/docs/concepts/what-are-keploy-features/#%EF%B8%8F-multi-purpose-mocks"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<MultiPurposeMocks />
Multi Purpose Mocks
</a>
</li>
</ul>
</div>

{/* Enterprise hover content */}

</div>

{/* About Product section with hover functionality */}
<div
className={`w-full md:w-1/3 p-5 transition-opacity duration-300 ${
!openSourceHover ? "opacity-0 pointer-events-none" : "opacity-100"
}`}
>
<p className="text-sm text-gray-500 pb-5">About Product</p>
<ul className="flex flex-col gap-4">
<li>
<a
href="https://keploy.io/docs/concepts/what-is-keploy/#heading"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<WhatIsKeploy />
What is Keploy?
</a>
</li>
<li>
<a
href="https://keploy.io/docs/keploy-explained/why-keploy/#heading"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<WhyUseKeploy />
Why use Keploy?
</a>
</li>
<li>
<a
href="https://keploy.io/docs/keploy-explained/how-keploy-works/#heading"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<HowItWorks />
How it works?
</a>
</li>
<li>
<a
href="https://keploy.io/docs/running-keploy/configuration-file/#getting-started"
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200"
>
<GettingStarted />
Getting started guide
</a>
</li>
</ul>
</div>
<div
className={`absolute right-5 md:w-[350px] transition-opacity duration-300 ${
!openSourceHover ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
>
<div className="shadow-xl rounded-xl p-5 mt-6">
<div className="text-center flex flex-col gap-3 items-center">
<p className="text-xs font-semibold">
Want to achieve 95% coverage by making API calls of all possible permutations
</p>
<MemoizedImage />
<button className="mt-4 bg-primary-200 w-1/2 rounded-md font-bold shadow-lg hover:shadow-none p-2">
<a href="https://calendar.app.google/CmnbjuDnK8J2Xuge8" target="_blank">
Talk to us
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}
Loading

0 comments on commit 9c71c61

Please sign in to comment.