Skip to content

Commit 5004789

Browse files
khareyash05khareyash05
authored
Merge pull request #117 from Om-Thorat/case-study-page
feat: create a case studies page
2 parents be98d58 + 4ab1963 commit 5004789

File tree

5 files changed

+268
-0
lines changed

5 files changed

+268
-0
lines changed

‎app/(default)/case-studies/page.tsx

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
"use client";
2+
import RootLayout from "@/app/layout";
3+
import CaseStudyCard from "@/components/caseStudyCard";
4+
import Footer from "@/components/ui/footer";
5+
import Image from "next/image";
6+
import CaseStudySearch from "@/components/caseStudySearch";
7+
import { useState } from "react";
8+
9+
const pageMetadata = {
10+
title:
11+
"Case Studies by Keploy | One-click API test with OpenSource and Free API Testing Tool",
12+
description:
13+
"Detailed case studies by Keploy about optimizing and testing using keploy API Tools. Learn how Keploy helps you automate API testing and improve code coverage",
14+
keywords:
15+
"API test, FREE API Testing Tool, API Testing tool, case studies, keploy case studies",
16+
};
17+
18+
const sampleCaseStudies = [
19+
{
20+
title: "Read how Maruti Suzuki Managed to reduce their TAT by 50%",
21+
text: "Read how Maruti Suzuki Managed to reduce their TAT by 50%",
22+
imageUrl: "/images/gradient.png",
23+
tags: ["Maruti Suzuki", "TAT", "Reduction"],
24+
},
25+
{
26+
title:
27+
"Read how Company X Increased productivity by 20% using Keploy API tests",
28+
text: "Read how Company X Increased productivity by 20%",
29+
imageUrl: "/images/gradient.png",
30+
tags: ["Company X", "Productivity", "Keploy API tests"],
31+
},
32+
{
33+
title: "Read how Company Y Reduced their testing time by 30% using Keploy",
34+
text: "Read how Company Y Reduced their testing time by 30%",
35+
imageUrl: "/images/gradient.png",
36+
tags: ["Company Y", "Testing", "Keploy Testing"],
37+
},
38+
{
39+
title:
40+
"Read how Company Z Improved their code coverage by 40% using Keploy",
41+
text: "Read how Company Z Improved their code coverage by 40%",
42+
imageUrl: "/images/gradient.png",
43+
tags: ["Company Z", "Code Coverage", "Keploy"],
44+
},
45+
{
46+
title: "Read how Company A Reduced their testing time by 30% using Keploy",
47+
text: "Read how Company A Reduced their testing time by 30%",
48+
imageUrl: "/images/gradient.png",
49+
tags: ["Company A", "Testing", "Keploy"],
50+
},
51+
{
52+
title:
53+
"Read how Company B Improved their code coverage by 40% using Keploy",
54+
text: "Read how Company B Improved their code coverage by 40%",
55+
imageUrl: "/images/gradient.png",
56+
tags: ["Company B", "Code Coverage", "Keploy"],
57+
},
58+
];
59+
60+
export default function Home() {
61+
const [search, setSearch] = useState("");
62+
const [tags, setTags] = useState([]);
63+
64+
return (
65+
<RootLayout metadata={pageMetadata}>
66+
<div className="overflow-x-clip relative flex flex-col items-center">
67+
<Image
68+
src="/images/gradient-star.png"
69+
alt=""
70+
width={300}
71+
height={300}
72+
className="absolute left-[0%] top-[10svh] -z-10 max-w-[300px] max-h-[300px] w-[30vw] h-[30vw] animate-float"
73+
/>
74+
<div className="absolute right-[90%] md:right-[-10%] md:top-[35svh] top-[50svh] rounded-full overflow-clip aspect-square max-w-[300px] max-h-[300px] w-[30vw] h-[30vw] -z-10 drop-shadow-[0px_0px_50px_rgba(254,66,41,1)] animate-float">
75+
<Image
76+
src="/images/gradient.png"
77+
alt=""
78+
width={700}
79+
height={400}
80+
className="-z-10 w-full h-full object-fill"
81+
/>
82+
</div>
83+
<div className="absolute right-[5%] top-[15svh] md:left-[-5%] md:top-[60svh] rounded-full overflow-clip aspect-square max-w-[200px] max-h-[200px] w-[20vw] h-[20vw] -z-10 drop-shadow-[0px_0px_50px_rgba(254,66,41,1)] animate-float">
84+
<Image
85+
src="/images/gradient.png"
86+
alt=""
87+
width={700}
88+
height={400}
89+
className="-z-10 w-full h-full object-fill"
90+
/>
91+
</div>
92+
<div className=" flex flex-col h-[50svh] justify-end mb-10 items-start min-w-[60vw] mx-10 md:mx-auto overflow-x-clip max-w-[100vw]">
93+
<div className="max-w-[80vw] px-4 sm:px-6 lg:px-8 mx-auto mb-10 flex-nowrap text-nowrap">
94+
<a
95+
href="/newcasestudy"
96+
className="bg-[length:280%] bg-[url('/images/gradient.png')] bg-no-repeat bg-[100%] px-4 py-4 rounded-lg text-center"
97+
>
98+
<p className="me-2 inline-block text-white font-bold flex-shrink">
99+
Latest Case Study by Keploy
100+
</p>
101+
<p className=" hidden sm:inline-flex py-2 px-3 items-center gap-x-2 text font-medium rounded-full underline underline-offset-8 text-white hover:underline-offset-2 transition-all">
102+
Read now
103+
<svg
104+
className="shrink-0 size-4"
105+
xmlns="http://www.w3.org/2000/svg"
106+
width="24"
107+
height="24"
108+
viewBox="0 0 24 24"
109+
fill="none"
110+
stroke="currentColor"
111+
stroke-width="2"
112+
stroke-linecap="round"
113+
stroke-linejoin="round"
114+
>
115+
<path d="m9 18 6-6-6-6" />
116+
</svg>
117+
</p>
118+
</a>
119+
</div>
120+
<h1 className="sm lg:text-5xl text-5xl font-extrabold leading-tighter tracking-tighter my-5 bg-clip-text text-left text-transparent bg-gradient-to-r from-gradient-300 to-gradient-400">
121+
Case Studies
122+
</h1>
123+
<p className="text-left ml-1 text-secondary-100 max-w-3xl">
124+
Detailed case studies by Keploy about optimizing and testing using
125+
keploy API Tools. Learn how Keploy helps you automate API testing
126+
and improve code coverage.
127+
</p>
128+
</div>
129+
<CaseStudySearch setSearch={setSearch} />
130+
<div className="grid lg:grid-cols-2 lg:gap-y-16 gap-10 md:max-w-[70vw] max-w-[80vw] w-full mb-10">
131+
{sampleCaseStudies
132+
.filter(
133+
(e) =>
134+
e.text.toLowerCase().includes(search.toLowerCase()) ||
135+
e.tags.some((tag) =>
136+
tag.toLowerCase().includes(search.toLowerCase())
137+
)
138+
)
139+
.map((caseStudy, index) => (
140+
<CaseStudyCard
141+
key={index}
142+
title={caseStudy.title}
143+
text={caseStudy.text}
144+
imageUrl={caseStudy.imageUrl}
145+
tags={caseStudy.tags}
146+
/>
147+
))}
148+
</div>
149+
</div>
150+
<Footer />
151+
</RootLayout>
152+
);
153+
}

‎components/caseStudyCard.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
interface CaseStudyCardProps {
2+
title: string;
3+
text: string;
4+
imageUrl: string;
5+
tags: string[];
6+
}
7+
8+
export default function CaseStudyCard({
9+
title,
10+
text,
11+
imageUrl,
12+
tags,
13+
}: CaseStudyCardProps) {
14+
return (
15+
<a
16+
className="group block rounded-xl overflow-hidden focus:outline-none"
17+
href="#"
18+
>
19+
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
20+
<div className="shrink-0 relative overflow-hidden w-full sm:w-56 ">
21+
<div className="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
22+
<img
23+
className="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
24+
src="/images/gradient.png"
25+
alt="Blog Image"
26+
/>
27+
</div>
28+
29+
<div className="gap-2 mt-2 flex overflow-x-scroll">
30+
{tags.map((tag) => (
31+
<span className="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-blue-100 text-blue-800 text-nowrap">
32+
{tag}
33+
</span>
34+
))}
35+
</div>
36+
</div>
37+
<div className="grow">
38+
<h3 className="text-xl font-extrabold text-primary-400 group-hover:text-primary-300">
39+
{title}
40+
</h3>
41+
<p className="mt-3 text-gray-600">{text}</p>
42+
<p className="mt-4 inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 group-hover:underline group-focus:underline font-medium dark:text-blue-500">
43+
Read more
44+
<svg
45+
className="shrink-0 size-4"
46+
xmlns="http://www.w3.org/2000/svg"
47+
width="24"
48+
height="24"
49+
viewBox="0 0 24 24"
50+
fill="none"
51+
stroke="currentColor"
52+
stroke-width="2"
53+
stroke-linecap="round"
54+
stroke-linejoin="round"
55+
>
56+
<path d="m9 18 6-6-6-6" />
57+
</svg>
58+
</p>
59+
</div>
60+
</div>
61+
</a>
62+
);
63+
}

‎components/caseStudySearch.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
interface caseStudySearchProps{
2+
setSearch: React.Dispatch<React.SetStateAction<string>>,
3+
}
4+
5+
export default function CaseStudySearch({setSearch}: caseStudySearchProps) {
6+
return (
7+
<>
8+
<div className="md:max-w-[70vw] max-w-[80vw] w-full mt-7 sm:mt-12 flex relative mb-7 md:flex-nowrap overflow-scroll">
9+
<div className="relative w-full min-w-48 z-10 flex justify-center items-center gap-x-3 px-3 py-1 bg-white border rounded-xl shadow-lg ">
10+
<div className="w-full">
11+
<label
12+
className="block text-sm text-gray-700 font-medium"
13+
>
14+
<span className="sr-only">Search article</span>
15+
</label>
16+
<input
17+
onChange={(e) => setSearch(e.target.value)}
18+
type="email"
19+
name="hs-search-article-1"
20+
id="hs-search-article-1"
21+
className="py-2.5 px-4 block w-full border-none rounded-xl mt-1 !outline-none !ring-0"
22+
placeholder="Search article"
23+
/>
24+
</div>
25+
<div>
26+
<a
27+
className="size-[32px] inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-primary-300 text-white hover:bg-primary-400 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
28+
href="#"
29+
>
30+
<svg
31+
className="shrink-0 size-5"
32+
xmlns="http://www.w3.org/2000/svg"
33+
width="24"
34+
height="24"
35+
viewBox="0 0 24 24"
36+
fill="none"
37+
stroke="currentColor"
38+
stroke-width="2"
39+
stroke-linecap="round"
40+
stroke-linejoin="round"
41+
>
42+
<circle cx="11" cy="11" r="8" />
43+
<path d="m21 21-4.3-4.3" />
44+
</svg>
45+
</a>
46+
</div>
47+
</div>
48+
</div>
49+
50+
</>
51+
);
52+
}

‎public/images/gradient-star.png

312 KB
Loading

‎public/images/gradient.png

4.94 MB
Loading

0 commit comments

Comments
 (0)