Skip to content

Commit 8c2c239

Browse files
TusharTemgireTusharTemgire
committed
added careers page
1 parent 63cab8d commit 8c2c239

File tree

1 file changed

+343
-0
lines changed

1 file changed

+343
-0
lines changed

‎app/(default)/careers/page.tsx

+343
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
"use client";
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import Footer from "@/components/ui/footer";
4+
import React, { useRef, useState } from "react";
5+
import { motion } from "framer-motion";
6+
import Image from "next/image";
7+
import { Button } from "@/components/ui/button";
8+
9+
import { Input } from "@/components/ui/input";
10+
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
11+
import {
12+
MapPin,
13+
Globe,
14+
Briefcase,
15+
Heart,
16+
Users,
17+
Coffee,
18+
BookOpen,
19+
Gift,
20+
} from "lucide-react";
21+
22+
const benefits = [
23+
{
24+
icon: Heart,
25+
title: "Inclusive Health Package",
26+
description: "Comprehensive health coverage for your well-being.",
27+
},
28+
{
29+
icon: Users,
30+
title: "Flexible Working Style",
31+
description: "Work remotely and collaborate across time zones.",
32+
},
33+
{
34+
icon: Coffee,
35+
title: "Balanced Working Life",
36+
description: "Enjoy flexible 4-week vacations to recharge.",
37+
},
38+
{
39+
icon: Globe,
40+
title: "Diversity and Inclusion",
41+
description: "We celebrate and support our diverse team.",
42+
},
43+
{
44+
icon: Gift,
45+
title: "Generous Perks Program",
46+
description: "Stipends for home office, learning, and wellness.",
47+
},
48+
{
49+
icon: BookOpen,
50+
title: "Continuous Learning",
51+
description: "Access to courses, conferences, and workshops.",
52+
},
53+
];
54+
55+
const jobOpenings = [
56+
{
57+
title: "Full-Stack Engineer",
58+
department: "Engineering",
59+
location: "Remote (US, Mexico, Canada)",
60+
type: "Full time",
61+
description:
62+
"We're looking for a talented Full-Stack Engineer to join our team and help build the future of software testing.",
63+
},
64+
{
65+
title: "Staff Product Designer",
66+
department: "Design",
67+
location: "Remote (US, Mexico, Canada)",
68+
type: "Full time",
69+
description:
70+
"Join our design team to create intuitive and beautiful interfaces for our cutting-edge testing platform.",
71+
},
72+
{
73+
title: "DevOps Engineer",
74+
department: "Engineering",
75+
location: "Remote (Worldwide)",
76+
type: "Full time",
77+
description:
78+
"Help us scale our infrastructure and improve our deployment processes as we grow rapidly.",
79+
},
80+
{
81+
title: "Product Manager",
82+
department: "Product",
83+
location: "Remote (US, Europe)",
84+
type: "Full time",
85+
description:
86+
"Drive the vision and strategy for our products, working closely with engineering and design teams.",
87+
},
88+
];
89+
90+
const page = () => {
91+
const [activeTab, setActiveTab] = useState("all");
92+
const openPositionsRef = useRef<HTMLDivElement | null>(null);
93+
94+
const filteredJobs =
95+
activeTab === "all"
96+
? jobOpenings
97+
: jobOpenings.filter((job) => job.department.toLowerCase() === activeTab);
98+
99+
const handleScrollToOpenPositions = () => {
100+
if (openPositionsRef.current) {
101+
openPositionsRef.current.scrollIntoView({ behavior: "smooth" });
102+
}
103+
};
104+
105+
return (
106+
<div className=" w-full justify-center flex ">
107+
<div className=" w-full ">
108+
<div className="justify-center flex ">
109+
<section
110+
data-section-id="1"
111+
data-share=""
112+
data-category="careers"
113+
data-component-id="5d1a71a8_01_awz"
114+
className="pb-32 max-w-[1120px] "
115+
data-path="0"
116+
>
117+
118+
119+
<header className="relative overflow-hidden py-16 sm:py-24">
120+
<div className="absolute inset-0">
121+
<Image
122+
src="/placeholder.svg?height=600&width=1600"
123+
alt="Abstract background"
124+
layout="fill"
125+
objectFit="cover"
126+
className="opacity-20"
127+
/>
128+
</div>
129+
<div className="relative container mx-auto px-4">
130+
<motion.div
131+
initial={{ opacity: 0, y: 20 }}
132+
animate={{ opacity: 1, y: 0 }}
133+
transition={{ duration: 0.5 }}
134+
>
135+
<div className="mb-4 inline-block rounded-md border border-[#FF914D] px-2 py-1 text-sm font-medium uppercase text-[#FF914D]">
136+
CAREERS AT KEPLOY
137+
</div>
138+
139+
<h1
140+
className="text-4xl md:text-5xl mb-3 lg:text-6xl text-secondary-300 font-extrabold leading-tight sm:leading-tight md:leading-tighter tracking-tighter aos-init aos-animate"
141+
data-aos="zoom-y-out"
142+
>
143+
Build the Future
144+
<br />
145+
<span className="bg-clip-text text-transparent bg-gradient-to-r from-gradient-500 to-gradient-200">
146+
of Software Testing!
147+
</span>
148+
</h1>
149+
<p className="mb-8 max-w-2xl md:text-xl text-lg text-[#5F3131]">
150+
Join our mission to revolutionize how developers approach
151+
quality assurance and empower teams to ship with confidence.
152+
</p>
153+
<Button
154+
onClick={handleScrollToOpenPositions}
155+
size="lg"
156+
className="bg-[#FF914D] hover:bg-[#EF546B] text-white"
157+
>
158+
View Open Positions
159+
</Button>
160+
</motion.div>
161+
</div>
162+
</header>
163+
<main className="container mx-auto px-4 ">
164+
<section className="mb-24">
165+
<h2 className="mb-8 text-3xl font-bold text-[#00163D]">
166+
What we're building
167+
</h2>
168+
<div className="grid gap-12 lg:grid-cols-2">
169+
<div>
170+
<p className="mb-6 text-lg text-[#00163D]">
171+
At Keploy, we're reimagining software testing for the
172+
modern development landscape. Our AI-powered platform is
173+
designed to seamlessly integrate into developers'
174+
workflows, automating test creation and maintenance while
175+
providing deep insights into application behavior.
176+
</p>
177+
<p className="text-lg text-[#00163D]">
178+
We're not just building a tool; we're fostering a new
179+
paradigm where quality is embedded throughout the
180+
development process, enabling teams to ship faster and
181+
with greater confidence.
182+
</p>
183+
</div>
184+
<div className="relative h-64 overflow-hidden rounded-xl lg:h-auto">
185+
<Image
186+
src="https://static.shuffle.dev/components/preview/0066bef8-104a-41d9-bd92-894baaa0dfce/assets/public/solstice-assets/images/careers/picture1-large.png"
187+
alt="Keploy platform interface"
188+
layout="fill"
189+
objectFit="cover"
190+
className="transition-transform duration-300 hover:scale-105"
191+
/>
192+
</div>
193+
</div>
194+
</section>
195+
196+
<section className="mb-24">
197+
<h2 className="mb-8 text-3xl font-bold text-[#00163D]">
198+
Benefits
199+
</h2>
200+
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
201+
{benefits.map((benefit, index) => (
202+
<motion.div
203+
key={index}
204+
initial={{ opacity: 0, y: 20 }}
205+
animate={{ opacity: 1, y: 0 }}
206+
transition={{ duration: 0.5, delay: index * 0.1 }}
207+
>
208+
<Card className="h-full overflow-hidden transition-shadow duration-300 hover:shadow-lg bg-white border-[#E6E2D4]">
209+
<CardContent className="flex h-full flex-col p-6">
210+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[#FF914D]">
211+
<benefit.icon className="h-6 w-6 text-white" />
212+
</div>
213+
<h3 className="mb-2 text-xl font-bold text-[#00163D]">
214+
{benefit.title}
215+
</h3>
216+
<p className="flex-grow text-[#5F3131]">
217+
{benefit.description}
218+
</p>
219+
</CardContent>
220+
</Card>
221+
</motion.div>
222+
))}
223+
</div>
224+
</section>
225+
226+
<section ref={openPositionsRef} className="mb-24">
227+
<h2 className="mb-8 text-3xl font-bold text-[#00163D]">
228+
Open Positions
229+
</h2>
230+
<Tabs defaultValue="all" className="mb-8">
231+
<TabsList className="bg-[#E6E2D4]">
232+
<TabsTrigger
233+
value="all"
234+
onClick={() => setActiveTab("all")}
235+
className="data-[state=active]:bg-[#FF914D] data-[state=active]:text-white"
236+
>
237+
All Departments
238+
</TabsTrigger>
239+
<TabsTrigger
240+
value="engineering"
241+
onClick={() => setActiveTab("engineering")}
242+
className="data-[state=active]:bg-[#FF914D] data-[state=active]:text-white"
243+
>
244+
Engineering
245+
</TabsTrigger>
246+
<TabsTrigger
247+
value="design"
248+
onClick={() => setActiveTab("design")}
249+
className="data-[state=active]:bg-[#FF914D] data-[state=active]:text-white"
250+
>
251+
Design
252+
</TabsTrigger>
253+
<TabsTrigger
254+
value="product"
255+
onClick={() => setActiveTab("product")}
256+
className="data-[state=active]:bg-[#FF914D] data-[state=active]:text-white"
257+
>
258+
Product
259+
</TabsTrigger>
260+
</TabsList>
261+
</Tabs>
262+
<div className="grid gap-6 md:grid-cols-2">
263+
{filteredJobs.map((job, index) => (
264+
<motion.div
265+
key={index}
266+
initial={{ opacity: 0, y: 20 }}
267+
animate={{ opacity: 1, y: 0 }}
268+
transition={{ duration: 0.5, delay: index * 0.1 }}
269+
>
270+
<Card className="h-full overflow-hidden transition-all duration-300 hover:border-[#FF914D] hover:shadow-md bg-white border-[#E6E2D4]">
271+
<CardContent className="flex h-full flex-col justify-between p-6">
272+
<div>
273+
<h3 className="mb-2 text-xl font-bold text-[#00163D]">
274+
{job.title}
275+
</h3>
276+
<p className="mb-4 text-[#5F3131]">
277+
{job.description}
278+
</p>
279+
<div className="mb-4 flex flex-wrap items-center gap-4">
280+
<div className="flex items-center text-sm text-[#00163D]">
281+
<Briefcase className="mr-1 h-4 w-4" />
282+
{job.department}
283+
</div>
284+
<div className="flex items-center text-sm text-[#00163D]">
285+
<MapPin className="mr-1 h-4 w-4" />
286+
{job.location}
287+
</div>
288+
</div>
289+
</div>
290+
<div className="flex items-center justify-between">
291+
<span className="rounded-full bg-[#E6E2D4] px-3 py-1 text-sm font-medium text-[#00163D]">
292+
{job.type}
293+
</span>
294+
<Button
295+
variant="outline"
296+
className="border-[#FF914D] text-[#FF914D] hover:bg-[#FF914D] hover:text-white"
297+
>
298+
Apply Now
299+
</Button>
300+
</div>
301+
</CardContent>
302+
</Card>
303+
</motion.div>
304+
))}
305+
</div>
306+
</section>
307+
308+
<section>
309+
<Card className="overflow-hidden bg-gradient-to-r from-[#FF914D] to-[#EF546B] text-white">
310+
<CardContent className="p-8">
311+
<div className="mb-6 flex flex-col items-center text-center sm:flex-row sm:text-left">
312+
<div className="mb-4 sm:mb-0 sm:mr-6">
313+
<h3 className="mb-2 text-2xl font-bold">
314+
Join Our Talent Community
315+
</h3>
316+
<p className="text-[#E6E2D4]">
317+
Stay updated on new opportunities at Keploy
318+
</p>
319+
</div>
320+
</div>
321+
<form className="flex flex-col items-center gap-4 sm:flex-row">
322+
<Input
323+
type="email"
324+
placeholder="Enter your email"
325+
className="w-full bg-white/10 text-white placeholder:text-[#E6E2D4] sm:w-2/3"
326+
/>
327+
<Button className="w-full bg-white text-[#FF914D] hover:bg-[#E6E2D4] sm:w-auto">
328+
Subscribe
329+
</Button>
330+
</form>
331+
</CardContent>
332+
</Card>
333+
</section>
334+
</main>
335+
</section>
336+
</div>
337+
<Footer />
338+
</div>
339+
</div>
340+
);
341+
};
342+
343+
export default page;

0 commit comments

Comments
 (0)