created career page

app/(default)/careers/page.tsx

@@ -0,0 +1,52 @@
+
+
+import HeroBanner from "@/components/careersPage/HeroBanner";
+import JobList from "@/components/careersPage/JobList";
+import Footer from "@/components/ui/footer";
+
+
+export const metadata = {
+    title: "Careers",
+    description: "Careers Page",
+  };
+
+
+interface Job {
+    title: string;
+    description: string;
+    experience:number;
+    location:string;
+}
+
+export default function CareersPage() {
+    const jobs: Job[] = [
+        { title: 'Frontend Developer', description: 'Develop and optimize front-end web applications...', location: "On-site", experience: 2 },
+        { title: 'Backend Developer', description: 'Implement and maintain server-side logic...', location: "Remote", experience: 3 },
+        { title: 'Full Stack Developer', description: 'Work on both frontend and backend of applications...', location: "Remote", experience: 4 },
+        { title: 'Data Scientist', description: 'Analyze data and provide business insights...', location: "On-site", experience: 2 },
+        { title: 'Machine Learning Engineer', description: 'Build and deploy ML models...', location: "Remote", experience: 0 },
+        { title: 'Product Manager', description: 'Manage product life cycle from ideation to launch...', location: "On-site", experience: 3 },
+        { title: 'UI/UX Designer', description: 'Design user-centered interfaces and experiences...', location: "Remote", experience: 2 },
+        { title: 'DevOps Engineer', description: 'Optimize development pipelines and manage CI/CD...', location: "On-site", experience: 4 },
+        { title: 'QA Engineer', description: 'Conduct automated and manual testing...', location: "Remote", experience: 1 },
+        { title: 'Systems Analyst', description: 'Evaluate and improve system efficiency...', location: "On-site", experience: 6 },
+        { title: 'Product Manager', description: 'Manage product life cycle from ideation to launch...', location: "On-site", experience: 1 },
+        { title: 'UI/UX Designer', description: 'Design user-centered interfaces and experiences...', location: "Remote", experience: 2 },
+        { title: 'DevOps Engineer', description: 'Optimize development pipelines and manage CI/CD...', location: "On-site", experience: 4 },
+        { title: 'QA Engineer', description: 'Conduct automated and manual testing...', location: "Remote", experience: 1 },
+        { title: 'Systems Analyst', description: 'Evaluate and improve system efficiency...', location: "On-site", experience: 5 }
+    ];
+
+
+
+    return (
+        <div>
+            <HeroBanner />
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 my-24">
+            <JobList jobs={jobs} />
+            </div>
+
+            <Footer/>
+        </div>
+    );
+}

components/careersPage/FilterSection.tsx

@@ -0,0 +1,43 @@
+"use client"
+import { useState } from 'react';
+
+interface FilterProps {
+    onSearch: (filters: { location: string;experience:number|null }) => void;
+}
+
+export default function FilterSection({ onSearch }: FilterProps) {
+    const [location, setLocation] = useState<string>('');
+    const [experience, setExperience] = useState<number|null>(null);
+
+    return (
+        <section className="bg-[#F5F5F5] p-5">
+            <div className="flex flex-col md:flex-row items-center justify-center gap-5">
+                <select
+                    className="border border-[#00163D] p-3 w-60 rounded-md cursor-pointer"
+                    value={location}
+                    onChange={(e) => setLocation(e.target.value)}
+                >
+                    <option value="">Location</option>
+                    <option value="Remote">Remote</option>
+                    <option value="On-site">On-site</option>
+                </select>
+
+                <select
+                    className="border border-[#00163D] p-3 w-60 rounded-md cursor-pointer"
+                    value={experience ?? ""}
+                    onChange={(e) => setExperience(e.target.value === '' ? null : Number(e.target.value))}
+                >
+                    <option value="">Experience</option>
+                    <option value={1}>0</option>
+                    <option value={2}>1</option>
+                </select>
+                <button
+                    onClick={() => onSearch({ location,experience})}
+                    className="bg-[#FF914D] text-white py-3 w-60 px-5 rounded-md cursor-pointer hover:bg-[#E35134] transition duration-200"
+                >
+                    Search
+                </button>
+            </div>
+        </section>
+    );
+}

components/careersPage/HeroBanner.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+export default function HeroBanner() {
+    return (
+        <section className="relative overflow-hidden h-screen flex justify-center items-center bg-[#00163D] text-white py-32 px-5 text-center">
+            {/* Background Pattern and Gradient Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-r from-[#FF914D] via-[#E35134] to-[#6F0A0D] opacity-70" />
+
+
+            {/* Diagonal Divider */}
+            <div className="absolute inset-0 h-1/2 bg-gradient-to-t from-[#00163D] to-transparent transform skew-y-3" />
+
+            {/* Main Content */}
+            <div className="relative z-10 max-w-4xl mx-auto">
+                <h1 className="text-5xl font-extrabold mb-4 drop-shadow-lg leading-tight">
+                    Join Our Dynamic Team
+                </h1>
+                <p className="text-lg max-w-2xl mx-auto mb-8 drop-shadow-md">
+                    Discover exciting career opportunities with us! We value creativity, collaboration, and growth.
+                </p>
+                <button
+    onClick={() => {
+        document.querySelector('#open-positions')?.scrollIntoView({ behavior: 'smooth' });
+    }}
+    className="bg-[#FF914D] text-white py-3 px-8 rounded-full font-semibold text-lg shadow-lg hover:bg-[#E35134] transition-all duration-300"
+>
+    Explore Open Positions
+</button>
+            </div>
+        </section>
+    );
+}

components/careersPage/JobList.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import FilterSection from "./FilterSection";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+
+interface Job {
+    title: string;
+    description: string;
+    experience: number;
+    location: string;
+}
+
+interface JobListProps {
+    jobs: Job[];
+}
+
+export default function JobList({ jobs }: JobListProps) {
+    const [filterjobs, setFilterjobs] = useState(jobs);
+    const [currentPage, setCurrentPage] = useState(1);
+    const jobsPerPage = 5; // Number of jobs per page
+
+    const handleSearch = (filters: { location: string; experience: number | null }) => {
+        const filterData = jobs.filter((job) => {
+            const matchesLocation = filters.location ? job.location.toLowerCase() === filters.location.toLowerCase() : true;
+            const matchesExperience = filters.experience ? job.experience === filters.experience - 1 : true;
+            return matchesLocation && matchesExperience;
+        });
+
+        setFilterjobs(filterData);
+        setCurrentPage(1); // Reset to the first page when a new filter is applied
+    };
+
+    // Pagination logic
+    const indexOfLastJob = currentPage * jobsPerPage;
+    const indexOfFirstJob = indexOfLastJob - jobsPerPage;
+    const currentJobs = filterjobs.slice(indexOfFirstJob, indexOfLastJob);
+
+    const totalPages = Math.ceil(filterjobs.length / jobsPerPage);
+
+    const goToPage = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    return (
+        <>
+            <FilterSection onSearch={handleSearch} />
+
+            <section className="bg-[#F5F5F5] p-5" id="open-positions">
+                <h2 className="text-2xl font-bold text-[#00163D] mb-8">Open Positions</h2>
+                <div className="flex flex-wrap gap-6 justify-center lg:justify-between  items-center">
+                    {currentJobs.map((job, index) => (
+                        <div
+                            key={index}
+                            className="p-5 bg-white w-full sm:w-[500px] shadow-lg rounded-md border border-[#D9CD9C] transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl"
+                        >
+                            <h3 className="text-xl font-semibold text-[#5F3131]">{job.title}</h3>
+                            <p className="text-[#00163D] mt-2">{job.description}</p>
+                            <p className="mt-2 text-sm text-[#16704C]">Experience: {job.experience}+ years</p>
+                            <p className="text-[#00163D] mt-2">
+                                <LocationOnIcon /> {job.location}
+                            </p>
+                            <button className="bg-[#FF914D] text-white py-2 px-4 rounded-md mt-4 hover:bg-[#E35134] transition duration-200">
+                                Apply
+                            </button>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Pagination */}
+                <div className="flex justify-center mt-8 space-x-2">
+                    {Array.from({ length: totalPages }, (_, i) => (
+                        <button
+                            key={i}
+                            onClick={() => goToPage(i + 1)}
+                            className={`px-4 py-2 rounded-md ${
+                                currentPage === i + 1 ? "bg-[#FF914D] text-white" : "bg-white text-[#00163D] border border-[#D9CD9C]"
+                            } hover:bg-[#E35134] transition duration-200`}
+                        >
+                            {i + 1}
+                        </button>
+                    ))}
+                </div>
+            </section>
+        </>
+    );
+}

components/ui/footer.tsx

@@ -58,6 +58,9 @@ export default function Footer() {
               <li className="mb-2">
                 <Link href="https://keploy.io/blog/community" className="text-neutral-300 hover:text-primary-300 transition duration-150 ease-in-out">Community Blog</Link>
               </li>
+              <li className="mb-2">
+                <Link href="/careers" className="text-neutral-300 hover:text-primary-300 transition duration-150 ease-in-out">Careers</Link>
+              </li>
               <li className="mb-2">
                 <Link href="https://keploy.io/sitemap.xml" className="text-neutral-300 hover:text-primary-300 transition duration-150 ease-in-out">Sitemap</Link>
               </li>

components/ui/header.tsx

@@ -105,6 +105,16 @@ export default function Header() {
                 >
                   Articles
                 </Link>
+
+              </li>
+              <li>
+              <Link
+                  target="_blank"
+                  href="/careers"
+                  className="font-medium text-gray-600  hover:text-primary-300 px-5 py-3 flex items-center transition duration-150 ease-in-out"
+                >
+                  Careers
+                </Link>
               </li>
               <div className="px-5">
                 {" "}