Added add new button in home, changed some brand colour

src/app/components/Navbar.tsx

@@ -20,7 +20,7 @@ function Nav({ pageName }: { pageName: string }) {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <div>
-      <nav className="bg-gray-800">
+      <nav className="bg-brandblue">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">

src/app/components/home/Card.tsx

@@ -1,13 +1,9 @@
 import Link from "next/link";
 import React from "react";
-// import { AiFillHeart } from "react-icons/ai";
-// import { BsChatSquareFill } from "react-icons/bs";
-
-// import styles from "./Card.module.css";
 
 const styles = {
   wrapper:
-    "bg-white hover:bg-gray-800 shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
+    "bg-white hover:bg-brandblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
   header: "relative mt-2 mx-2",
   imageWrapper: "h-56 rounded-2xl overflow-hidden",
   wrapperAnime: "transition-all duration-500 ease-in-out",

src/app/components/home/CardTiles.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Card from "./Card";
+import AddNewCard from "./AddNewCard";
 
 type PortfoliosType = Array<{
   id: string;
@@ -17,6 +18,8 @@ export default function CardTiles({
     <div className="flex justify-center">
       <div className="grid grid-cols-1 gap-4 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
         {Portfolios.map((portfolio, index) => {
+          if (index === 0) return <AddNewCard key={portfolio.id} />;
+
           const image_idx = index % 3;
           return (
             <Card

src/app/home/page.tsx

@@ -1,16 +1,7 @@
-import { getServerSession } from "next-auth";
-import { AuthOptions } from "../api/auth/[...nextauth]/route";
-import { redirect } from "next/navigation";
 import Nav from "../components/Navbar";
 import CardTiles from "../components/home/CardTiles";
 
 const Home = async () => {
-  // const session = await getServerSession(AuthOptions);
-
-  // if (!session) {
-  //   redirect("/?callbackUrl=/home");
-  // }
-
   const Portfolios = [
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0851",

tailwind.config.js

@@ -12,6 +12,10 @@ module.exports = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      colors: {
+        brandblue: "#14163d",
+        hoverblue: "#3e4073",
+      },
     },
   },
   plugins: [],