Skip to content

Commit

Permalink
Merge pull request #138 from keploy/fix-navbar
Browse files Browse the repository at this point in the history 
fix: Alignment and optimize navbar components
  • Loading branch information
@TvisharajiK
TvisharajiK authored Nov 26, 2024
2 parents 59f6924 + e314429 commit 4bf3099
Show file tree
Hide file tree
Showing 36 changed files with 344 additions and 437 deletions.
22 changes: 11 additions & 11 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,17 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a.q=c[a.q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "iu0391ggta");
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "iu0391ggta");
`,
}}
/>
<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/43912677.js"></script>

<script
Expand Down
10 changes: 4 additions & 6 deletions components/TwitterTestimonials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,16 +127,15 @@ const TwitterTestimonials = () => {
{
tweets?.slice(0,6).map((tweet, index) => {
return (
<>
<React.Fragment key={index}>
<Tweet
key={index}
avatar={tweet.avatar}
name={tweet.name}
id={tweet.id}
post={tweet.post}
content={tweet.content}
/>
</>
</React.Fragment>
)
})
}
Expand All @@ -147,16 +146,15 @@ const TwitterTestimonials = () => {
{
tweets?.map((tweet, index) => {
return (
<>
<React.Fragment key={index}>
<Tweet
key={index}
avatar={tweet.avatar}
name={tweet.name}
id={tweet.id}
post={tweet.post}
content={tweet.content}
/>
</>
</React.Fragment>
)
})
}
Expand Down
154 changes: 74 additions & 80 deletions components/nav/productSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import React, { useState } 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 WhatIsKeploy from "@/public/images/keploy_logo.png
import WhyUseKeploy from "@/public/images/navBarIcons/WhyUseKeploy";
import HowItWorks from "@/public/images/navBarIcons/HowItWorks";
import GettingStarted from "@/public/images/navBarIcons/GettingStarted";
Expand All @@ -15,7 +15,6 @@ 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 = () => {
Expand All @@ -28,10 +27,55 @@ export default function Product() {
setShowDropdown(!openDropdown);
};

useEffect(() => {
const img = new Image();
img.src = "/images/navBarIcons/EnterPrice.svg";
}, []);
// Features list for Open Source
const openSourceFeatures = [
{
icon: <ApiCallRecording />,
title: "API Call Recording and Replay",
url: "https://keploy.io/docs/concepts/what-is-keploy/#step-1--record-unique-network-interactions-as-test-case",
},
{
icon: <AutomaticMocking />,
title: "Automatic Mocking of Dependencies",
url: "https://keploy.io/docs/concepts/reference/glossary/mocks/#overcoming-the-challenges",
},
{
icon: <CICD />,
title: "CI/CD Integration",
url: "https://keploy.io/docs/concepts/what-are-keploy-features/#-combined-test-coverage-in-cicd",
},
{
icon: <MultiPurposeMocks />,
title: "Multi Purpose Mocks",
url: "https://keploy.io/docs/concepts/what-are-keploy-features/#%EF%B8%8F-multi-purpose-mocks",
},
];
const aboutProductLinks = [
{
icon: <img
src={"/images/keploylogo.png"}
alt="What is Keploy Icon"
style={{ height: "24px", width: "24px" }}
/>,
title: "What is Keploy?",
url: "https://keploy.io/docs/concepts/what-is-keploy/#heading",
},
{
icon: <WhyUseKeploy />,
title: "Why use Keploy?",
url: "https://keploy.io/docs/keploy-explained/why-keploy/#heading",
},
{
icon: <HowItWorks />,
title: "How it works?",
url: "https://keploy.io/docs/keploy-explained/how-keploy-works/#heading",
},
{
icon: <GettingStarted />,
title: "Getting started guide",
url: "https://keploy.io/docs/running-keploy/configuration-file/#getting-started",
},
];

return (
<div
Expand Down Expand Up @@ -98,42 +142,17 @@ export default function Product() {
>
<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>
{openSourceFeatures.map((feature, index) => (
<li key={index}>
<a
href={feature.url}
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200 h-[24px] items-center"
>
{feature.icon}
{feature.title}
</a>
</li>
))}
</ul>
</div>

Expand All @@ -149,43 +168,18 @@ export default function Product() {
>
<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>
{aboutProductLinks.map((link, index) => (
<li key={index}>
<a
href={link.url}
className="flex gap-2 font-semibold hover:text-primary-500 transition-colors duration-200 h-[24px] items-center"
>
{link.icon}
{link.title}
</a>
</li>
))}
</ul>
</div>
<div
className={`absolute right-5 md:w-[350px] transition-opacity duration-300 ${
Expand Down
Loading

0 comments on commit 4bf3099

Please sign in to comment.