improved ui on portfolio page

src/app/components/home/Card.tsx

@@ -5,9 +5,9 @@ const styles = {
   wrapper:
     "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 border-red",
-  imageWrapper: "h-56 rounded-2xl overflow-hidden",
+  imageWrapper: "h-56 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
-  image: "object-cover w-8/12 h-8/12 mx-auto",
+  image: "object-cover w-1/3 mx-auto",
   textWrapper: "pt-10 pb-6 w-full px-4 flex justify-between items-center",
   text: "font-medium leading-none text-base tracking-wider text-gray-400",
 };

src/app/components/home/CardTiles.tsx

@@ -16,10 +16,9 @@ export default function CardTiles({
 }) {
   return (
     <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">
+      <div className="grid grid-cols-1 gap-6 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+        <AddNewCard />
         {Portfolios.map((portfolio, index) => {
-          if (index === 0) return <AddNewCard key={portfolio.id} />;
-
           const image_idx = index % 4;
           return (
             <Card

src/app/home/page.tsx

@@ -11,7 +11,7 @@ const Home = async () => {
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
       title: "Portfolio 2",
-      budget: "150k",
+      budget: "£150k",
     },
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
@@ -51,7 +51,7 @@ const Home = async () => {
     {
       id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
       title: "Portfolio 10",
-      budget: "93k",
+      budget: "£93k",
     },
   ];