Feature/cgd 36

src/app/TechStack/components/TechStackCard.tsx

@@ -9,7 +9,7 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-100 rounded-lg">
+    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg">
       <div className="flex flex-row justify-between">
         <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
           {title}

src/app/TechStack/components/TechStackContainer.tsx

@@ -3,7 +3,7 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className="card max-w-tech-card-container bg-primary p-10">
+    <div className="card max-w-tech-card-container bg-primary-100 p-10">
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
@@ -12,8 +12,8 @@ export default function TechStackContainer() {
               index % 3 === 0
                 ? "justify-self-start"
                 : index % 3 === 1
-                ? "justify-self-center"
-                : "justify-self-end"
+                  ? "justify-self-center"
+                  : "justify-self-end"
             }`}
           >
             <TechStackCard

tailwind.config.js

@@ -9,6 +9,18 @@ module.exports = {
       maxWidth: {
         "tech-card-container": "85.5625rem",
       },
+      colors: {
+        "primary-50": "#ecf4f0",
+        "primary-100": "#c4ded2",
+        "primary-200": "#a7cdbc",
+        "primary-300": "#7fb79d",
+        "primary-400": "#66a98a",
+        "primary-600": "#3a8663",
+        "primary-700": "#2d684d",
+        "primary-800": "#23513c",
+        "primary-900": "#1b3e2e",
+        "neutral-50": "#F1F1F1",
+      },
     },
   },
   daisyui: {