landing page redesign

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
@@ -35,6 +36,7 @@
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "lucide-react": "^0.426.0",
     "next": "14.2.5",
     "next-auth": "^4.24.7",

src/actions/job.action.ts

@@ -133,7 +133,10 @@ export const getJobById = withServerActionAsyncCatcher<
   }).serialize();
 });
 
-export const jobFilterQuery = async (queries: JobQuerySchemaType) => {
+export const jobFilterQuery = async (
+  queries: JobQuerySchemaType,
+  baseUrl: string
+) => {
   const { page, sortby, location, salaryrange, search, workmode } =
     JobQuerySchema.parse(queries);
   const searchParams = new URLSearchParams({
@@ -144,5 +147,5 @@ export const jobFilterQuery = async (queries: JobQuerySchemaType) => {
   location?.map((location) => searchParams.append('location', location));
   salaryrange?.map((range) => searchParams.append('salaryrange', range));
   workmode?.map((mode) => searchParams.append('workmode', mode));
-  redirect(`/jobs?${searchParams.toString()}`);
+  redirect(`${baseUrl}?${searchParams.toString()}`);
 };

src/app/(auth)/signin/page.tsx

@@ -3,12 +3,14 @@ import { FormContainer } from '@/layouts/form-container';
 
 const LoginPage = () => {
   return (
-    <FormContainer
-      heading={'Welcome back'}
-      description={'Please enter your details to sign in.'}
-    >
-      <Signin />
-    </FormContainer>
+    <div className="h-screen flex flex-col justify-center items-center">
+      <FormContainer
+        heading={'Welcome back'}
+        description={'Please enter your details to sign in.'}
+      >
+        <Signin />
+      </FormContainer>
+    </div>
   );
 };
 

src/app/jobs/page.tsx

@@ -1,15 +1,16 @@
 import AllJobs from '@/components/all-jobs';
 import Loader from '@/components/loader';
+import APP_PATHS from '@/config/path.config';
 import JobFilters from '@/layouts/job-filters';
 import JobsHeader from '@/layouts/jobs-header';
 import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 import { Suspense } from 'react';
 const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   return (
-    <div className="container flex gap-5 pt-5">
-      <JobFilters searchParams={searchParams} />
+    <div className="container flex gap-5 pt-10">
+      <JobFilters searchParams={searchParams} baseUrl={APP_PATHS.JOBS} />
       <div className="grow">
-        <JobsHeader searchParams={searchParams} />
+        <JobsHeader searchParams={searchParams} baseUrl={APP_PATHS.JOBS} />
         <Suspense
           fallback={
             <div className="flex justify-center items-center h-full gap-5 ">

src/app/page.tsx

@@ -1,14 +1,26 @@
 import BackgroundSvg from '@/components/BackgroundSvg';
+import HalfCircleGradient from '@/components/HalfCircleGradient';
 import HeroSection from '@/components/hero-section';
+import { JobLanding } from '@/components/job-landing';
+import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 
-const HomePage = async () => {
+const HomePage = async ({
+  searchParams,
+}: {
+  searchParams: JobQuerySchemaType;
+}) => {
   return (
-    <>
+    <div>
       <BackgroundSvg />
-      <div className="w-full">
+      <HalfCircleGradient position="top" />
+      <div className="w-full mt-14">
         <HeroSection />
       </div>
-    </>
+      <div>
+        <JobLanding searchParams={searchParams} />
+      </div>
+      <HalfCircleGradient position="bottom" />
+    </div>
   );
 };
 

src/components/HalfCircleGradient.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+
+export default function HalfCircleGradient({ position }: { position: string }) {
+  return (
+    <div
+      className={cn(
+        'absolute left-1/2 transform -translate-x-1/2 w-[90%]  blur-[130px] bg-no-repeat -z-10',
+        {
+          '-top-28 bg-gradient-to-b from-[#2563EB]/40 to-[#3672E3]/20 rounded-b-full h-[500px]':
+            position === 'top',
+          'bottom-3 bg-gradient-to-t from-[#2563EB]/40 to-[#3672E3]/20 rounded-t-full h-[700px] overflow-hidden':
+            position === 'bottom',
+        }
+      )}
+    ></div>
+  );
+}

src/components/all-jobs.tsx

@@ -10,6 +10,7 @@ import { PaginationPages } from './ui/paginator';
 import Icon from './ui/icon';
 import { formatSalary } from '@/lib/utils';
 import Link from 'next/link';
+import APP_PATHS from '@/config/path.config';
 type PaginatorProps = {
   searchParams: JobQuerySchemaType;
 };
@@ -22,7 +23,7 @@ const AllJobs = async ({ searchParams }: PaginatorProps) => {
   const totalPages =
     Math.ceil((jobs.additional?.totalJobs || 0) / JOBS_PER_PAGE) ||
     DEFAULT_PAGE;
-  const currentPage = searchParams.page || DEFAULT_PAGE;
+  const currentPage = parseInt(searchParams.page?.toString()) || DEFAULT_PAGE;
   return (
     <div className="bg-background py-4 grid gap-3">
       {jobs.additional?.jobs.map((job) => {
@@ -63,20 +64,23 @@ const AllJobs = async ({ searchParams }: PaginatorProps) => {
               <PaginationPreviousButton
                 searchParams={searchParams}
                 currentPage={currentPage}
+                baseUrl={APP_PATHS.JOBS}
               />
             </PaginationItem>
           ) : null}
           <PaginationPages
             searchParams={searchParams}
             currentPage={currentPage}
             totalPages={totalPages}
+            baseUrl={APP_PATHS.JOBS}
           />
           {totalPages ? (
             <PaginationItem>
               <PaginationNextButton
                 searchParams={searchParams}
                 currentPage={currentPage}
                 totalPages={totalPages}
+                baseUrl={APP_PATHS.JOBS}
               />
             </PaginationItem>
           ) : null}

src/components/hero-section.tsx

@@ -1,49 +1,50 @@
-import APP_PATHS from '@/config/path.config';
 import { GITHUB_REPO } from '@/lib/constant/app.constant';
 import Link from 'next/link';
-import { Button } from './ui/button';
 import Icon from './ui/icon';
-import { JobLanding } from './job-landing';
+import Image from 'next/image';
 
 const HeroSection = () => {
   return (
-    <section className="relative max-sm:pt-10 container">
-      <div className="flex flex-col gap-4 items-center justify-center py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10">
-        <Link
-          href={GITHUB_REPO}
-          target="_blank"
-          className="flex border border-neutral-200 dark:border-neutral-600 bg-gradient-to-b from-transparent dark:via-white/5 to-purple-400 backdrop-blur-md py-2 gap-2 items-center px-4 rounded-full"
-        >
-          <Icon icon="sparcle" className="text-yellow-500" size="18" />
-          <p className=" text-primary-text text-sm">Star us on Github</p>
-        </Link>
-        <div className="flex items-center flex-col gap-3 max-w-[950px]">
-          <div>
-            <h1 className="text-5xl max-sm:text-3xl max-sm:leading-tight  font-extrabold leading-[70px]  text-center text-primary">
-              Find the Right{' '}
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">
-                Opportunity
-              </span>
-              , Hire the Perfect Talent
-            </h1>
-          </div>
-          <div>
-            <p className="max-w-2xl text-lg font-light text-foreground">
-              India&apos;s most rapidly growing developer community
-            </p>
+    <>
+      <section className="relative max-sm:pt-10 container">
+        <div className="flex flex-col gap-4 items-center justify-center py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10">
+          <Link
+            href={GITHUB_REPO}
+            target="_blank"
+            className="flex border border-neutral-200 dark:border-neutral-600 bg-gradient-to-b from-transparent dark:via-white/5 to-purple-400 backdrop-blur-md py-2 gap-2 items-center px-4 rounded-full"
+          >
+            <Icon icon="sparcle" className="text-yellow-500" size="18" />
+            <p className=" text-primary-text text-sm">Star us on Github</p>
+          </Link>
+          <div className="flex items-center flex-col gap-3 max-w-[950px]">
+            <div>
+              <h1 className="text-6xl max-sm:text-3xl max-sm:leading-tight  font-extrabold leading-[70px]  text-center text-primary">
+                {/* Find the Right{' '}
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">
+                  Opportunity
+                </span>
+                , Hire the Perfect Talent */}
+                Find Your Perfect Job Today!
+              </h1>
+            </div>
+            <div>
+              <p className="max-w-2xl text-sm md:text-lg font-light text-foreground text-center">
+                Discover a thoughtfully selected collection of job opportunities
+                chosen by our dedicated team of experts.
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="text-center">
-        <Button asChild className="gap-1 rounded-full">
-          <Link href={APP_PATHS.JOBS}>
-            Get Started Now
-            <Icon icon="rightarrow" size="20" />
-          </Link>
-        </Button>
-      </div>
-      <JobLanding />
-    </section>
+        <div className="flex items-center justify-center my-10 invert dark:invert-0">
+          <Image
+            src={'/companies.png'}
+            alt="companies"
+            width={900}
+            height={100}
+          />
+        </div>
+      </section>
+    </>
   );
 };