Added testimonials-section (#364)

src/app/page.tsx

@@ -3,6 +3,7 @@ import Faqs from '@/components/Faqs';
 import HalfCircleGradient from '@/components/HalfCircleGradient';
 import HeroSection from '@/components/hero-section';
 import { JobLanding } from '@/components/job-landing';
+import Testimonials from '@/components/Testimonials';
 import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 
 const HomePage = async ({
@@ -20,6 +21,7 @@ const HomePage = async ({
       <div>
         <JobLanding searchParams={searchParams} />
       </div>
+      <Testimonials/>
       <Faqs />
       <HalfCircleGradient position="bottom" />
     </div>

src/components/TestimonialCard.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { testimonialItem } from '@/types/testimonials.types';
+import { motion } from 'framer-motion';
+
+interface testimonialCardProps {
+  testimonial: testimonialItem;
+}
+
+export default function TestimonialCard({
+  testimonial,
+}: testimonialCardProps) {
+  return (
+    <motion.div
+      className="md:w-5/6 w-full h-fit p-5 flex flex-col mx-auto border rounded-3xl dark:bg-[#0b0b0b] rounded-bl-none my-2 cursor-pointer shadow-sm"
+      whileHover={{ y: -5 }}
+      transition={{ type: 'tween' }}
+    >
+      <div className="w-full flex items-center">
+        <p className="w-10 h-10 p-2 rounded-full flex items-center justify-center border">
+          {testimonial.name.charAt(0).toUpperCase()}
+        </p>
+        <p className="px-2">{testimonial.name}</p>
+      </div>
+      <p className="py-2">&quot;{testimonial.testimonial}&quot;</p>
+    </motion.div>
+  );
+}

src/components/Testimonials.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { Button } from './ui/button';
+import { testimonials } from '@/lib/constant/testimonials.constants';
+import TestimonialCard from './TestimonialCard';
+export default function Testimonials() {
+  return (
+    <div
+      id="testimonials"
+      className="w-full h-fit md:px-16 px-5 flex flex-col items-center py-10"
+    >
+      <div className="w-full h-fit flex flex-col items-center">
+        <h1 className="font-bold md:text-4xl text-3xl">Testimonials</h1>
+        <p className="md:text-sm text-xs py-2 font-semibold text-gray-700 dark:text-gray-200">
+          Trusted by those who matter.
+        </p>
+      </div>
+      <div className="w-full grid md:grid-cols-3 grid-cols-1 gap-3 items-center mt-10">
+        {testimonials.map((testimonial, i) => (
+          <TestimonialCard key={i} testimonial={testimonial}/>
+        ))}
+      </div>
+      <div className="bg-white border dark:bg-transparent rounded-xl md:w-5/6 w-full h-fit p-4 flex items-center justify-between my-5">
+        <p className="font-semibold md:text-base text-xs">
+          Your story matters. Share it with us!
+        </p>
+        <Button className="md:text-base text-xs">Share your story</Button>
+      </div>
+    </div>
+  );
+}

src/config/path.config.ts

@@ -6,5 +6,7 @@ const APP_PATHS = {
   RESET_PASSWORD: '/reset-password',
   JOBS: '/jobs',
   MANAGE_JOBS: '/jobs/manage',
+  TESTIMONIALS: '#testimonials',
+  FAQS: '#faq',
 };
 export default APP_PATHS;

src/lib/constant/app.constant.ts

@@ -12,10 +12,8 @@ export const navbar = [
   },
   // todo: add actual path
   { id: 3, label: 'Internship', path: '/' },
-  { id: 4, label: 'Testimonials', path: '/' },
-
-  { id: 5, label: 'FAQs', path: '#faq' },
-
+  { id: 4, label: 'Testimonials', path: APP_PATHS.TESTIMONIALS },
+  { id: 5, label: 'FAQs', path: APP_PATHS.FAQS },
   { id: 6, label: 'Post a Job', path: APP_PATHS.POST_JOB },
 
 ];

src/lib/constant/testimonials.constants.ts

@@ -0,0 +1,34 @@
+import { testimonialItem } from '@/types/testimonials.types';
+
+export const testimonials: testimonialItem[] = [
+  {
+    name: 'Jane Doe',
+    testimonial:
+      'The job board made my job search seamless. I found my dream job in just a few weeks, and the application process was super easy!',
+  },
+  {
+    name: 'John Smith',
+    testimonial:
+      'This platform is incredibly user-friendly and helped me land a great position. The filtering and search options are fantastic!',
+  },
+  {
+    name: 'Emily Johnson',
+    testimonial:
+      'I appreciate how easy it was to track my job applications. The job board helped me stay organized throughout my job search!',
+  },
+  {
+    name: 'Michael Brown',
+    testimonial:
+      'Thanks to the platform, I was able to connect with amazing companies. The job alerts feature made it easy to stay updated on new opportunities.',
+  },
+  {
+    name: 'Sophia Green',
+    testimonial:
+      'The job portal helped me transition to a new career. The interface is intuitive, and I loved the personalized job recommendations!',
+  },
+  {
+    name: 'David Lee',
+    testimonial:
+      'This job board stands out from the rest. It made the job application process smooth and connected me to roles that matched my skills perfectly.',
+  },
+];

src/types/testimonials.types.ts

@@ -0,0 +1,4 @@
+export type testimonialItem = {
+  name: string;
+  testimonial: string;
+};