Authentication and sync the user profile with database

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,5 @@
+# next
+.next/
+
+# Ignore special files
+package-lock.json

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

src/app/(init)/page.tsx → app/(init)/page.tsx

@@ -1,22 +1,28 @@
 import { Source_Serif_4 } from "next/font/google";
+import { redirectToSignIn } from "@clerk/nextjs";
 
 import Navbar from "@/components/Navbar";
+import { getAuthUser } from "@/libs/auth.user";
 import Badge from "@/components/Reusable/Badge";
-import CTAHome1 from "@/components/Home/CTAHome1";
+import Footer from "@/components/Footer/Footer";
 import ShotCard from "@/components/Home/ShotCard";
+import CTAHome1 from "@/components/Home/CTAHome1";
 import { Button } from "@/components/Reusable/Button";
 import { InfiniteScrollCards } from "@/components/Home/InfiniteScrollCards";
-import Footer from "@/components/Footer/Footer";
 
 const font = Source_Serif_4({
   subsets: ["greek"],
   weight: ["200", "300", "400", "500", "600", "700"],
 });
 
-export default function Home() {
+export default async function Home() {
+  const profile = await getAuthUser();
+  if (!profile) {
+    return redirectToSignIn();
+  }
   return (
     <>
-      <Navbar />
+      <Navbar profile={profile} />
       <section className="pb-20">
         <div className="p-8 lg:px-16 lg:pt-16">
           <div className="mx-auto max-w-4xl text-center space-y-10">
@@ -28,7 +34,7 @@ export default function Home() {
             <h2
               className={`text-7xl mt-5 ${font.className} text-gray-900 md:text-7xl`}
             >
-              Work with the world's top creative talent.
+              Work with the world&apos;s top creative talent.
             </h2>
 
             <p className="text-lg sm:mt-4 sm:block">
@@ -40,7 +46,7 @@ export default function Home() {
           <div className="flex items-center justify-center w-full mt-8 max-w-4xl mx-auto ">
             <Button
               // onClick={() => router.push("/uploads/new")}
-              styles="py-4 px-8 bg-primary font-medium text-white font-normal rounded-full border border-gray-200 hover:opacity-60"
+              className="py-4 px-8 bg-primary text-white font-normal rounded-full border border-gray-200 hover:opacity-60"
             >
               Start hiring today
             </Button>
@@ -59,7 +65,7 @@ export default function Home() {
             ))}
           </div>
           <div className="py-8 flex items-center justify-center">
-            <Button className="py-4 px-8 border border-gray-900 font-medium text-gray-900 font-medium text-sm rounded-full border border-gray-200 hover:opacity-60">
+            <Button className="py-4 px-8 text-gray-900 font-medium text-sm rounded-full border border-gray-200 hover:opacity-60">
               Browse more inspirations
             </Button>
           </div>

app/(main)/(routes)/(default)/hiring/page.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import CTAHiring from "../../../../../components/Hiring/CTAHiring";
+import InfiniteScrollingLogos from "../../../../../components/Hiring/InfiniteScrollingLogos";
+import JobBoard from "../../../../../components/Hiring/JobBoard";
+import CTAHiring2 from "../../../../../components/Hiring/CTAHiring2";
+import FeatureSection from "../../../../../components/Hiring/Feature";
+import Testimonial from "../../../../../components/Hiring/Testimonial";
+
+export default function HiringPage() {
+  return (
+    <>
+      <div className="py-14  ">
+        <CTAHiring />
+        <InfiniteScrollingLogos />
+        <JobBoard />
+        <Testimonial />
+        <FeatureSection />
+        <CTAHiring2 />
+      </div>
+    </>
+  );
+}

app/(main)/(routes)/(default)/layout.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Navbar from "../../../../components/Navbar";
+import Footer from "../../../../components/Footer/Footer";
+import { authProfile } from "@/libs/auth.user";
+import { redirectToSignIn } from "@clerk/nextjs";
+export default async function DefaultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const profile = await authProfile();
+  if (!profile) {
+    return redirectToSignIn();
+  }
+  return (
+    <div>
+      <Navbar profile={profile} />
+      {children}
+      <Footer />
+    </div>
+  );
+}

src/app/(main)/(routes)/(default)/shots/popular/page.tsx → app/(main)/(routes)/(default)/shots/popular/page.tsx

@@ -1,8 +1,11 @@
-import ButtonTabListFilter from "@/components/Hiring/ButtonTabListFilter";
-import ShotCard from "@/components/Home/ShotCard";
-import ButtonBage from "@/components/Reusable/ButtonBage";
-import { Heading1, Heading2 } from "@/components/Reusable/Headings";
-import HugeSearch from "@/components/Reusable/HugeSearch";
+import ButtonTabListFilter from "../../../../../../components/Hiring/ButtonTabListFilter";
+import ShotCard from "../../../../../../components/Home/ShotCard";
+import ButtonBage from "../../../../../../components/Reusable/ButtonBage";
+import {
+  Heading1,
+  Heading2,
+} from "../../../../../../components/Reusable/Headings";
+import HugeSearch from "../../../../../../components/Reusable/HugeSearch";
 import React from "react";
 
 export default function PopularShots() {

app/(main)/(routes)/profile/[profileId]/layout.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { redirect } from "next/navigation";
+
+import Navbar from "@/components/Navbar";
+import { getAuthUser } from "@/libs/auth.user";
+
+export default async function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const profile = await getAuthUser();
+  if (!profile) {
+    redirect("/signin");
+  }
+  return (
+    <div className="w-full ">
+      <Navbar profile={profile} />
+      <div className="xl:px-16">{children}</div>
+    </div>
+  );
+}

src/app/(main)/(routes)/profile/[profileId]/page.tsx → app/(main)/(routes)/profile/[profileId]/page.tsx

@@ -1,21 +1,22 @@
 import React from "react";
 import Link from "next/link";
-import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
-
+import Image from "next/image";
 import { Button } from "@/components/Reusable/Button";
-import TooltipButton from "@/components/Reusable/Tooltip";
 import DropDown from "@/components/Reusable/DropDown";
 import ButtonTabs from "@/components/Profile/ButtonTabs";
+import TooltipButton from "@/components/Reusable/Tooltip";
 
 export default function Profile() {
   return (
     <main>
       <div className="py-14 flex justify-center max-w-screen-xl mx-auto px-4  md:px-8 ">
         <div className="rounded-full h-10 w-10 xl:w-32 xl:h-32 bg-slate-900 xl:mx-10">
-          <img
+          <Image
             src="https://cdn.dribbble.com/users/14860331/avatars/normal/data?1674854196"
             alt=""
             className="rounded-full"
+            width={100}
+            height={100}
           />
         </div>
 
@@ -33,7 +34,7 @@ export default function Profile() {
             <DropDown />
 
             <TooltipButton
-              styles="hidden peer-hover:flex absolute max-h-24  peer-hover:items-center peer-hover:justify-center w-64 p-2 text-white -translate-x-1/2 bg-black rounded-md -top-32 left-1/2"
+              className="hidden peer-hover:flex absolute max-h-24  peer-hover:items-center peer-hover:justify-center w-64 p-2 text-white -translate-x-1/2 bg-black rounded-md -top-32 left-1/2"
               description={
                 <div className="flex flex-col items-center justify-center space-y-1">
                   <p className="line-clamp-3 text-center">

src/app/(main)/(routes)/uploads/new/page.tsx → app/(main)/(routes)/uploads/new/page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ShotUploadForm from "@/components/Profile/ShotUploadForm";
+import ShotUploadForm from "../../../../../components/Profile/ShotUploadForm";
 
 export default function UploadShot() {
   return (

src/components/Footer/FooterScrolingCards.tsx → components/Footer/FooterScrolingCards.tsx

@@ -1,4 +1,5 @@
 "use client";
+import Image from "next/image";
 import React, { useEffect, useRef } from "react";
 
 export default function FooterScrolingCards() {
@@ -49,9 +50,11 @@ export default function FooterScrolingCards() {
           {cardData.map((card, i) => (
             <li key={i} className="relative cursor-pointer">
               <div className="w-44 h-32 rounded-xl overflow-hidden">
-                <img
+                <Image
                   src={card.image}
                   alt="card image"
+                  width={100}
+                  height={100}
                   className="object-cover w-full h-full"
                 />
               </div>
@@ -67,10 +70,12 @@ export default function FooterScrolingCards() {
           {cardData.map((card, i) => (
             <li key={i} className="relative cursor-pointer">
               <div className="w-44 h-32 rounded-xl overflow-hidden">
-                <img
+                <Image
                   src={card.image}
                   alt="card image"
                   className="object-cover w-full h-full"
+                  width={100}
+                  height={100}
                 />
               </div>
               <p className="mt-4 text-gray-800 text-sm"> {card.name}</p>

src/components/Hiring/ButtonTabListFilter.tsx → components/Hiring/ButtonTabListFilter.tsx

@@ -12,8 +12,8 @@ export default function ButtonTabListFilter() {
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
   const [timeframe, setTimeframe] = useState("Now");
+  const [buttonTap, setButtonTap] = useState("Discover");
 
-  const handleDropdown = () => {};
   return (
     <section className="px-14">
       <div className="flex">
@@ -27,21 +27,26 @@ export default function ButtonTabListFilter() {
           <div className="px-5 w-full flex items-center justify-center md:justify-start [mask-image:_linear-gradient(to_right,transparent_0,_black_50px,_black_calc(100%-50px),transparent_100%)]">
             <ul className="px-5 w-full flex items-center justify-between ">
               {[
-                { id: "0", title: "Now" },
-                { id: "1", title: "This Past week" },
-                { id: "2", title: "All Time " },
-                { id: "3", title: "This Past Month" },
-                { id: "4", title: "This Past Year" },
+                { id: "0", title: "Discover" },
+                { id: "1", title: "Animation" },
+                { id: "2", title: "Branding" },
+                { id: "3", title: "Illustration" },
+                { id: "4", title: "Mobile" },
+                { id: "5", title: "Print" },
+                { id: "6", title: "Product design" },
+                { id: "7", title: "Typography" },
+                { id: "8", title: "Web Design" },
               ].map((item) => (
                 <li
                   key={item.id}
                   onClick={(e) => {
                     e.stopPropagation();
-                    setTimeframe(item.title);
-                    setIsDetailsOpen(false);
+                    setButtonTap(item.title);
                   }}
-                  className={` flex justify-between rounded-full items-center  cursor-pointer ${
-                    item.title === timeframe ? "bg-gray-200 p-2" : "text-sm"
+                  className={`mx-4 px-4 flex justify-between flex-nowrap flex-shrink-0 rounded-full items-center text-sm font-medium cursor-pointer transition-all duration-200 ease-linear ${
+                    item.title.toString() === buttonTap
+                      ? "bg-gray-100 p-1.5 "
+                      : "hover:text-gray-500"
                   }`}
                 >
                   <p>{item.title}</p>
@@ -52,7 +57,7 @@ export default function ButtonTabListFilter() {
         </div>
         <Button
           onClick={() => setIsFilterOpen(!isFilterOpen)}
-          className="flex items-center text-sm font-medium p-2 px-6 border text-gray-900 rounded-full"
+          className="flex items-center text-sm font-medium px-6 border text-gray-900 rounded-full"
         >
           <BiFilter className="text-2xl" />
           <p className="font-normal">Filters</p>

src/components/Hiring/Feature.tsx → components/Hiring/Feature.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import { SlDiamond } from "react-icons/sl";
 import { TbWorldShare } from "react-icons/tb";
 import { PiCurrencyCircleDollarLight } from "react-icons/pi";
@@ -12,13 +13,12 @@ const FeatureSection = () => {
         Why brands choose Dribbble to hire design talent
       </h1>
       <div className="container px-5 pt-10  mx-auto flex flex-row-reverse flex-nowrap gap-x-20">
-        <div className="w-1/2 h-96 rounded-xl overflow-hidden">
-          <img
+        <div className="relative w-1/2 h-96 rounded-xl overflow-hidden">
+          <Image
             src="https://images.pexels.com/photos/5676679/pexels-photo-5676679.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
             alt=""
-            sizes="630px"
-            loading="lazy"
-            className="block w-3/4 h-full object-cover rounded-2xl"
+            fill
+            className="block w-3/4 h-full object-fill rounded-2xl"
           />
         </div>
         <div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
@@ -46,8 +46,11 @@ const FeatureSection = () => {
                 "With a network of designers spanning over 170 countries, we make it easy to find world-class talent, wherever you are in the world.",
             },
             ,
-          ].map((item) => (
-            <div className="flex flex-col mb-10 lg:items-start items-center space-y-4">
+          ].map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-col mb-10 lg:items-start items-center space-y-4"
+            >
               {item?.icon}
               <div className="flex-grow">
                 <Badge

src/components/Hiring/HiringSuitePricingCard.tsx → components/Hiring/HiringSuitePricingCard.tsx

@@ -46,8 +46,8 @@ export default function HiringSuitePricingCard() {
           {
             text: "Save and bookmark designers for future needs",
           },
-        ].map((item) => (
-          <li className="flex items-center gap-1">
+        ].map((item, index) => (
+          <li key={index} className="flex items-center gap-1">
             <MdOutlineDone className="font-bold text-emerald-500 text-xl" />
             <p className="text-gray-700">{item.text} </p>
           </li>

src/components/Hiring/InfiniteScrollingLogos.tsx → components/Hiring/InfiniteScrollingLogos.tsx

@@ -73,8 +73,8 @@ export default function InfiniteScrollingLogos() {
   return (
     <main className="w-full py-10 max-w-6xl mx-auto">
       <h1 className="text-center text-lg font-medium text-gray-800">
-        We've helped some of the world's best design-forward companies hire
-        expert creatives
+        We&apos;ve helped some of the world&apos;s best design-forward companies
+        hire expert creatives
       </h1>
       <div className="mt-8 w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-228px),transparent_100%)]">
         <ul className="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">

src/components/Hiring/JobBoard.tsx → components/Hiring/JobBoard.tsx

@@ -19,9 +19,9 @@ export default function JobBoard() {
             <p className="hidden leading-7 text-gray-500 md:mt-4 md:block">
               Our job board postings receive an average of 1.1k targeted clicks
               per month and are viewed by over 1 million top designers globally.
-              With a proven track record assisting over 60,000 companies, you'll
-              spend less time sorting through unqualified candidates and more
-              time hiring amazing talent.
+              With a proven track record assisting over 60&rsquo;000
+              companies&rsquo; you&apos;ll spend less time sorting through
+              unqualified candidates and more time hiring amazing talent.
             </p>
             <div className="mt-4 md:mt-8">
               <Button className="mt-8 block font-normal rounded-full bg-primary px-12 py-3 text-center text-sm text-white hover:ring-1 hover:ring-pink-700 focus:outline-none focus:ring active:text-pink-500">