Skip to content

Commit f09d442

Browse files
Jay PanchalJay Panchal
Jay Panchal
authored and
Jay Panchal
committed
feat: Added Case Study page
1 parent 04bfac7 commit f09d442

File tree

4 files changed

+338
-17
lines changed

4 files changed

+338
-17
lines changed

‎src/app/case_study/[slug]/components/ContentSection.tsx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import PointerCard from "@/components/PointerCard";
2+
import { CaseStudiesDataType } from "@/data/types";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import React from "react";
6+
import { twMerge } from "tailwind-merge";
7+
8+
type ContentSectionProps = {
9+
pageData: CaseStudiesDataType
10+
}
11+
12+
const ContentSection = ({pageData}: ContentSectionProps) => {
13+
return (
14+
<div className="w-full mr-0 mb-12 border-b border-b-black/20 lg:border-0 lg:mb-0 lg:w-[65%] lg:mr-[5%]">
15+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
16+
Sector
17+
</h4>
18+
<p className="mb-14 font-light">{pageData.name}</p>
19+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
20+
Services
21+
</h4>
22+
<div className="flex flex-wrap pb-10">
23+
{pageData.services.map((service) => (
24+
<Link
25+
key={service.link}
26+
className="py-1.5 px-5 bg-[#D0D0D0] mr-2.5 mb-2.5 rounded-full border-none text-sm relative animation-easein-slow left-0 hover:bg-[rgba(208,208,208,0.3)]"
27+
href={service.link}
28+
>
29+
{service.name}
30+
</Link>
31+
))}
32+
</div>
33+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
34+
Overview
35+
</h4>
36+
{pageData.content.overview.map((data, index) => (
37+
<p
38+
key={`overview-${index}`}
39+
className={twMerge("mb-14 font-light", index !== 0 && "-mt-7")}
40+
>
41+
{data}
42+
</p>
43+
))}
44+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
45+
Business Challenge
46+
</h4>
47+
{pageData.content.challenge.map((data, index) => (
48+
<p
49+
key={`challenge-${index}`}
50+
className={twMerge("mb-14 font-light", index !== 0 && "-mt-7")}
51+
>
52+
{data}
53+
</p>
54+
))}
55+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
56+
Approach
57+
</h4>
58+
{pageData.content.approach.map((data, index) => (
59+
<p
60+
key={`approach-${index}`}
61+
className={twMerge("mb-14 font-light", index !== 0 && "-mt-7")}
62+
>
63+
{data}
64+
</p>
65+
))}
66+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
67+
Solution
68+
</h4>
69+
<div className="flex flex-wrap mb-7">
70+
{pageData.content.solution.map((data, index) => (
71+
<PointerCard
72+
key={data.heading}
73+
data={data}
74+
index={index}
75+
headingClassName="text-base font-semibold"
76+
/>
77+
))}
78+
</div>
79+
<h4 className="text-4xl mb-2.5 mt-5 text-[#505050] font-semibold">
80+
Impact & Results
81+
</h4>
82+
{pageData.content.impactAndResult.map((data, index) => (
83+
<p
84+
key={`impactAndResult-${index}`}
85+
className={twMerge("mb-14 font-light", index !== 0 && "-mt-7")}
86+
>
87+
{data}
88+
</p>
89+
))}
90+
<h6 className="text-lg font-medium mt-24 mb-5">Share</h6>
91+
<ul className="text-base flex gap-5 font-light m-0 pb-5">
92+
{pageData.socialLinks.map((social) => (
93+
<li className="inline list-none" key={social.href}>
94+
<Link className="py-2.5 mr-4" href={social.href}>
95+
<Image
96+
className="max-w-9"
97+
width={38}
98+
height={38}
99+
src={social.src}
100+
alt={social.alt}
101+
/>
102+
</Link>
103+
</li>
104+
))}
105+
</ul>
106+
</div>
107+
);
108+
};
109+
110+
export default ContentSection;

‎src/app/case_study/[slug]/components/DownloadForm.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
"use client";
2+
3+
import InputField from "@/components/InputField";
4+
import React, { useState } from "react";
5+
6+
const DownloadForm = () => {
7+
const [formData, setFormData] = useState({
8+
email: "",
9+
phone: "",
10+
name: "",
11+
companyName: "",
12+
});
13+
14+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
15+
const { name, value } = e.target;
16+
setFormData((prev) => ({ ...prev, [name]: value }));
17+
};
18+
19+
const handleSubmit = (e: React.FormEvent) => {
20+
e.preventDefault();
21+
};
22+
23+
return (
24+
<div className="lg:w-[30%] mr-0">
25+
<h3 className="text-4xl mb-7 mt-5 max-w-60 font-semibold text-[#505050]">
26+
Download the full Case Study
27+
</h3>
28+
<div>
29+
<form
30+
onSubmit={handleSubmit}
31+
>
32+
{[
33+
{ name: "email", type: "email", placeholder: "Email" },
34+
{ name: "phone", type: "tel", placeholder: "Phone" },
35+
{ name: "name", type: "text", placeholder: "Name" },
36+
{
37+
name: "companyName",
38+
type: "text",
39+
placeholder: "Company Name",
40+
},
41+
].map((field) => (
42+
<InputField
43+
key={field.name}
44+
name={field.name}
45+
type={field.type}
46+
placeholder={field.placeholder}
47+
value={formData[field.name as keyof typeof formData]}
48+
onChange={handleChange}
49+
inputClassName="border-[#249F6B]"
50+
className="lg:w-full pr-0"
51+
/>
52+
))}
53+
<div className="w-full mb-5 pr-5">
54+
<button
55+
type="submit"
56+
className={"primary-button mt-5 bg-green-600/50"}
57+
>
58+
Go
59+
</button>
60+
</div>
61+
</form>
62+
</div>
63+
{/* <h4 className="text-4xl mb-10 mt-5 text-[#505050] font-semibold">
64+
Latest Posts
65+
</h4>
66+
<div className="border-b border-b-black/20 pb-5 mb-10">
67+
{pageData.latestPosts.map((post, index) => (
68+
<div key={index} className="mb-10">
69+
<h6 className="text-sm opacity-75 mb-1.5 font-normal">{`${post.date} | ${post.name}`}</h6>
70+
<h5 className="text-xl mb-2.5 text-[#212529] font-medium">
71+
{post.title}
72+
</h5>
73+
<p className="text-sm mb-5 font-light">
74+
{post.description}
75+
</p>
76+
<Link
77+
className="primary-button bg-white"
78+
href={post.link}
79+
target="_blank"
80+
>
81+
Read
82+
</Link>
83+
</div>
84+
))}
85+
</div>
86+
<h4 className="text-4xl mb-10 mt-5 text-[#505050] font-semibold">
87+
Tag Cloud
88+
</h4>
89+
<div className="flex flex-wrap lg:border-b border-b-black/20 pb-10">
90+
{pageData.tags.map((tag) => (
91+
<Link
92+
key={tag.link}
93+
className="py-1.5 px-5 bg-[#D0D0D0] mr-2.5 mb-2.5 rounded-full border-none text-sm relative animation-easein-slow left-0 hover:bg-[rgba(208,208,208,0.3)]"
94+
href={tag.link}
95+
>
96+
{tag.name}
97+
</Link>
98+
))}
99+
</div> */}
100+
</div>
101+
);
102+
};
103+
104+
export default DownloadForm;

‎src/app/case_study/[slug]/page.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import PageNavbar from "@/components/PageNavbar";
2+
import { caseStudiesData } from "@/data";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import { notFound } from "next/navigation";
6+
import React from "react";
7+
import { twMerge } from "tailwind-merge";
8+
import DownloadForm from "./components/DownloadForm";
9+
import ContentSection from "./components/ContentSection";
10+
11+
export const dynamicParams = false;
12+
13+
export async function generateStaticParams() {
14+
return Object.keys(caseStudiesData).map((pageName) => ({
15+
slug: pageName,
16+
}));
17+
}
18+
19+
export default async function Page({
20+
params,
21+
}: {
22+
params: Promise<{ slug: string }>;
23+
}) {
24+
const slug = (await params).slug;
25+
const pageData = caseStudiesData[slug];
26+
27+
if (!pageData) {
28+
return notFound();
29+
}
30+
31+
return (
32+
<>
33+
<section className="relative pb-12 lg:pb-0">
34+
<div className="container-padding">
35+
<div className="relative">
36+
<PageNavbar
37+
textColorType="white"
38+
className="w-full sm:w-[90%] text-white lg:w-[90%]"
39+
>
40+
<h1
41+
className={twMerge(
42+
"text-5xl lg:text-6xl xl:text-7xl pt-4 dot mb-1.5 tracking-tighter"
43+
)}
44+
>
45+
{pageData.description}
46+
</h1>
47+
</PageNavbar>
48+
</div>
49+
</div>
50+
<div className="hidden lg:block">
51+
<Image
52+
className=" max-w-full "
53+
width={1920}
54+
height={599}
55+
src={pageData?.heroSection?.desktop}
56+
alt="Blog Header image"
57+
/>
58+
</div>
59+
<div className="block lg:hidden">
60+
<Image
61+
className="block max-w-full w-full lg:hidden"
62+
width={800}
63+
height={1400}
64+
src={pageData?.heroSection?.mobile}
65+
alt="Blog Header image"
66+
/>
67+
</div>
68+
</section>
69+
<section className="">
70+
<div className="container-padding">
71+
<div className="mt-[7vw] flex flex-wrap pb-7 lg:border-b lg:border-b-black/20">
72+
<ContentSection
73+
pageData={pageData}
74+
/>
75+
<DownloadForm />
76+
</div>
77+
</div>
78+
</section>
79+
<section className="relative my-28 pl-[7vw]">
80+
<Image
81+
className="hidden max-w-full rounded-l-full lg:block"
82+
width={1920}
83+
height={599}
84+
src="https://procedure.tech/wp-content/uploads/2023/08/table-tennis.webp"
85+
alt="Digital ventures image"
86+
/>
87+
<Image
88+
className="block max-w-full rounded-l-full lg:hidden"
89+
width={800}
90+
height={517}
91+
src="https://procedure.tech/wp-content/uploads/2023/08/mob-table-tennis-v3.webp"
92+
alt="Digital ventures image"
93+
/>
94+
<div className="absolute top-1/2 -translate-y-1/2 right-0 pl-[calc(7vw_*_6)] sm:pl-0 max-w-lg lg:max-w-xl">
95+
<div className="container-padding">
96+
<p className="text-lg mb-5 lg:text-2xl text-white lg:mb-7">
97+
Read our other case studies to find out how our holistic approach
98+
towards strategy and innovation wins the game every time.
99+
</p>
100+
<Link
101+
className="primary-button bg-white"
102+
href="/industries/case-studies/"
103+
>
104+
Case Studies
105+
</Link>
106+
</div>
107+
</div>
108+
</section>
109+
</>
110+
);
111+
}

‎src/app/industries/case-studies/page.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import PageNavbar from "@/components/PageNavbar";
22
import React from "react";
33
import { twMerge } from "tailwind-merge";
44
import CaseStudy from "../components/CaseStudy";
5+
import { tabs } from "@/constants/constant";
56

67
const Page = () => {
78
return (
@@ -29,23 +30,18 @@ const Page = () => {
2930
<section className="mb-28">
3031
<div className="container-padding">
3132
<div className="flex flex-wrap -mb-12">
32-
<CaseStudy
33-
date="August 24, 2023"
34-
imgSrc="https://i0.wp.com/procedure.tech/wp-content/uploads/2023/08/plum-case-study.webp?fit=700%2C700&ssl=1"
35-
title="Streamlining Crisis Communication for Enhanced Coordination & Effective Response"
36-
sector="Crisis Communication"
37-
services="UI & UX, Process Consulting, Innovation"
38-
link="https://procedure.tech/case_study/streamlining-crisis-communication-for-enhanced-coordination-effective-response/"
39-
/>
40-
<CaseStudy
41-
date="August 24, 2023"
42-
imgSrc="https://i0.wp.com/procedure.tech/wp-content/uploads/2023/08/espn-case-study.webp?fit=700%2C700&ssl=1"
43-
title="A FinTech Platform for Simplifying Bulk Payments and Reshaping Businesses"
44-
sector="FinTech"
45-
services="UX & UI, Product Engineering, Process Consulting"
46-
link="https://procedure.tech/case_study/streamlining-crisis-communication-for-enhanced-coordination-effective-response/"
47-
className="rounded-r-none rounded-bl-full rounded-br-full"
48-
/>
33+
{tabs.map((data) => (
34+
<CaseStudy
35+
key={data.id}
36+
date={data.date}
37+
imgSrc={data.imgSrc}
38+
title={data.description}
39+
sector={data.name}
40+
services={data.services}
41+
link={data.href}
42+
className={data.className}
43+
/>
44+
))}
4945
</div>
5046
</div>
5147
</section>

0 commit comments

Comments
 (0)