feat: landing page ui bug fixes

prisma/migrations/20240909111324_new_fields/migration.sql → prisma/migrations/20240922173657_/migration.sql

@@ -7,9 +7,6 @@ CREATE TYPE "WorkMode" AS ENUM ('remote', 'hybrid', 'office');
 -- CreateEnum
 CREATE TYPE "Role" AS ENUM ('USER', 'ADMIN');
 
--- CreateEnum
-CREATE TYPE "JobLocations" AS ENUM ('BANGLORE', 'DELHI', 'MUMBAI', 'CHENNAI', 'PUNE', 'HYDERABAD', 'KOLKATA', 'AHMEDABAD', 'JAIPUR', 'SURAT');
-
 -- CreateTable
 CREATE TABLE "User" (
     "id" TEXT NOT NULL,
@@ -36,7 +33,8 @@ CREATE TABLE "Job" (
     "type" TEXT NOT NULL,
     "work_mode" "WorkMode" NOT NULL,
     "currency" "Currency" NOT NULL DEFAULT 'INR',
-    "location" "JobLocations" NOT NULL,
+    "city" TEXT NOT NULL,
+    "address" TEXT NOT NULL,
     "application" TEXT NOT NULL,
     "companyLogo" TEXT NOT NULL,
     "has_salary_range" BOOLEAN NOT NULL DEFAULT false,

src/actions/job.action.ts

@@ -185,7 +185,7 @@ export const getRecentJobs = async () => {
     return new SuccessResponse('Recently added jobs fetch successfully', 200, {
       recentJobs,
     }).serialize();
-  } catch (error) {
+  } catch (_error) {
     return new ErrorHandler('Internal server error', 'DATABASE_ERROR');
   }
 };

src/app/layout.tsx

@@ -4,10 +4,8 @@ import { cn } from '@/lib/utils';
 import Providers from '@/providers/providers';
 import type { Metadata } from 'next';
 import './globals.css';
-import ScrollToTop from '@/components/ScrollToTop';
 import localFont from 'next/font/local';
 
-
 const satoshi = localFont({
   display: 'swap',
   src: [
@@ -41,7 +39,8 @@ export default async function RootLayout({
           <main className="grow grid">{children}</main>
           <Footer />
         </Providers>
-        <ScrollToTop />
+        {/* Commenting this out for temp basis */}
+        {/* <ScrollToTop />  */}
       </body>
     </html>
   );

src/components/Faqs.tsx

@@ -26,7 +26,7 @@ export default function Faqs() {
       </div>
 
       <div className="w-full h-fit py-10 flex justify-center items-center">
-        <div className="md:w-3/6 w-full flex flex-col items-center bg-white dark:bg-transparent">
+        <div className="md:w-3/6 w-full flex flex-col items-center bg-white dark:bg-transparent flex-grow lg:flex-grow-0">
           {faqData.map((faq, i) => (
             <div
               key={i}

src/components/RecentJobs.tsx

@@ -11,11 +11,11 @@ export default async function RecentJobs() {
   }
 
   return (
-    <div className="w-full grid md:grid-cols-3 grid-cols-1 gap-2 items-center mt-10">
+    <div className="w-full grid lg:grid-cols-3  md:grid-cols-2 grid-cols-1 gap-2 items-center mt-10">
       {recentJobs.additional.recentJobs.map((job, i) => (
         <div
           key={i}
-          className="md:max-w-[420px] md:min-w-[400px] min-w-[250px] w-full min-h-[200px] h-auto flex flex-col mx-auto my-2 gap-3 cursor-pointer dark:bg-[#0F172A] border bg-[#F1F5F9] dark:border-[#1E293B] border-[#E2E8F0] rounded-xl md:p-5 p-3 dark:hover:bg-[#111a2f] hover:bg-[#ebf1f7] duration-200 transition ease-in-out"
+          className="md:max-w-[520px] md:min-w-[300px] min-w-[250px] w-full min-h-[200px] h-auto flex flex-col mx-auto my-2 gap-3 cursor-pointer dark:bg-[#0F172A] border bg-[#F1F5F9] dark:border-[#1E293B] border-[#E2E8F0] rounded-xl md:p-5 p-3 dark:hover:bg-[#111a2f] hover:bg-[#ebf1f7] duration-200 transition ease-in-out"
         >
           <div className="w-full flex items-center">
             {job.companyLogo ? (

src/components/TestimonialCard.tsx

@@ -12,7 +12,7 @@ export default function TestimonialCard({ testimonial }: testimonialCardProps) {
   const { theme } = useTheme();
   return (
     <motion.div
-      className="md:w-5/6 w-full min-h-[250px] h-auto mx-auto my-2 cursor-pointer"
+      className="md:w-5/6 w-full  h-auto mx-auto my-2 cursor-pointer"
       whileHover={{ y: -5 }}
       transition={{ type: 'tween' }}
     >

src/components/Testimonials.tsx

@@ -13,13 +13,8 @@ export default function Testimonials() {
           Real Success Stories from Job Seekers and Employers
         </p>
       </div>
-      <div className="w-full grid md:grid-cols-3 grid-cols-1 gap-2 items-center mt-10">
-        {testimonials.slice(0,3).map((testimonial, i) => (
-          <TestimonialCard key={i} testimonial={testimonial} />
-        ))}
-      </div>
-      <div className="w-full grid md:grid-cols-2 grid-cols-1 gap-2 items-center md:mt-10 md:w-2/3 mx-auto">
-        {testimonials.slice(3,5).map((testimonial, i) => (
+      <div className="w-full grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-2 items-center mt-10">
+        {testimonials.map((testimonial, i) => (
           <TestimonialCard key={i} testimonial={testimonial} />
         ))}
       </div>

src/components/hero-section.tsx

@@ -16,7 +16,7 @@ const HeroSection = () => {
                 <span className="career-span bg-[#3259E8] py-1 px-5 ml-1 font-bold rounded-xl text-white">
                   Career
                 </span>
-                <br/>
+                <br />
                 with 100xJobs
               </h1>
               <p className="md:w-4/6 w-full text-center my-3 dark:text-[#94A3B8] text-[#64748B] font-medium ">
@@ -41,7 +41,7 @@ const HeroSection = () => {
               {trustedCompanies.map((company, i) => (
                 <Image
                   key={i}
-                  className="mx-4 md:w-28 w-24 h-14 md:h-24"
+                  className="mx-4 md:w-28 w-24 h-20 md:h-24"
                   src={company.icon}
                   alt={`${company.name}-icon`}
                 />

src/components/job-landing.tsx

@@ -17,7 +17,7 @@ export const JobLanding = () => {
   return (
     <div
       id="recent-jobs"
-      className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-20 dark:bg-grad-dark bg-grad-light"
+      className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-6 md:pt-20 dark:bg-grad-dark bg-grad-light"
     >
       <div className="w-full h-fit flex flex-col items-center">
         <h1 className="font-bold md:text-4xl text-3xl">Recently Added jobs</h1>
@@ -28,12 +28,12 @@ export const JobLanding = () => {
       <RecentJobs />
       <div className="w-full flex justify-center items-center my-5">
         <button className="flex items-center text-[#4E7AFF] border-none outline-none text-lg font-medium group">
-          <Link href={'/jobs'} className='flex items-center'>
+          <Link href={'/jobs'} className="flex items-center">
             View all jobs
             <ChevronRight className="w-4 h-4 mx-2 group-hover:translate-x-1 duration-200 ease-in-out transition" />
           </Link>
         </button>
       </div>
     </div>
   );
-};
+};

src/layouts/footer.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 const Footer = () => {
   return (
-    <footer className="mt-20 md:h-20 h-40 dark:bg-[#020817] relative w-full p-3 border-t dark:border-t-[#1E293B] border-t-[#E2E8F0] flex md:flex-row flex-col items-center md:justify-between justify-around md:px-14 px-3">
+    <footer className=" md:h-20 h-40 dark:bg-[#020817] relative w-full p-3 border-t dark:border-t-[#1E293B] border-t-[#E2E8F0] flex md:flex-row flex-col items-center md:justify-between justify-around md:px-14 px-3">
       <ul className="flex items-center text-sm dark:text-[#94A3B8] text-[#64748B] font-medium">
         {footerItems.map((item, i) => (
           <li key={i} className="px-2">
@@ -16,7 +16,11 @@ const Footer = () => {
         <p className="text-[#94A3B8]">© 2024 100xJobs. All rights reserved.</p>
         <div className="flex items-center ml-4 md:mb-0 mb-3 text-[#64748B]">
           {socials.map((social, i) => (
-            <Link key={i} href={social.href} className="p-3 rounded-full border mx-2 hover:bg-slate-50 duration-150 ease-in-out transition">
+            <Link
+              key={i}
+              href={social.href}
+              className="p-3 rounded-full border mx-2 hover:bg-slate-50 duration-150 ease-in-out transition"
+            >
               <Icon icon={social.icon} className="w-4 h-4" />
             </Link>
           ))}

src/layouts/header.tsx

@@ -46,12 +46,12 @@ const Header = () => {
 
   return (
     <nav className="sticky w-full z-50">
-      <div className="flex h-[72px] w-full items-center justify-between dark:bg-[#020817] bg-[#FFFFFF] md:px-20 px-3 shadow-sm">
+      <div className="flex h-[72px] w-full items-center justify-between dark:bg-[#020817] bg-[#FFFFFF] lg:px-20 px-3 shadow-sm">
         <Link href="/" className="p-2.5">
           <CompanyLogo />
         </Link>
         <div className="flex items-center">
-          <ul className="flex items-center gap-4 text-sm lg:gap-6 max-sm:hidden mx-4">
+          <ul className="md:flex items-center gap-4 text-sm lg:gap-6 hidden mx-4">
             {session.status === 'loading'
               ? nonUserNavbar.map((_, index) => (
                   <Skeleton className="h-4 w-[60px]" key={index} />
@@ -83,12 +83,12 @@ const Header = () => {
             )}
 
             {session.status !== 'loading' && !session.data?.user && (
-              <button className="rounded-lg p-2 bg-[#3259E8] hover:bg-[#3e63e9] text-white font-medium max-sm:hidden">
+              <button className="rounded-lg p-2 bg-[#3259E8] hover:bg-[#3e63e9] text-white font-medium hidden md:block">
                 <Link href={'/create'}>Post a job</Link>
               </button>
             )}
 
-            <div className="sm:hidden flex justify-center ml-3">
+            <div className="md:hidden flex justify-center ml-3">
               <MobileNav />
             </div>
           </div>

tailwind.config.ts

@@ -28,9 +28,9 @@ const config = {
         'hero-bg-dark': "url('/BG-Grid.svg')",
         'hero-bg-light': "url('/BG-Grid-Light.svg')",
         'grad-dark':
-          'linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(2, 8, 23, 0.4) 100%)',
+          'linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(2, 8, 23) 0%);',
         'faq-dark':
-          'linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(2, 8, 23, 0.4) 100%)',
+          'linear-gradient(180deg, rgba(2,8,23) 0%, rgba(2, 8, 23)0%)',
         'grad-light':
           'linear-gradient(180deg, rgba(241, 245, 249, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%)',
       },