add base profile card skeleton

src/app/components/ProfileCard.tsx

@@ -1,10 +1,147 @@
+import React from "react";
+
 interface ProfileCardProps {
-    hasUiogMembership: boolean;
-    hasDnsMembership: boolean;
+  hasUiogMembership: boolean;
+  hasDnsMembership: boolean;
 }
 
-const ProfileCard: React.FC<ProfileCardProps> = ({hasUiogMembership, hasDnsMembership}) => {
-    
+const membershipPerks = [
+  {
+    title: "UIOG",
+    description:
+      "You are missing a DNS Standard membership. You can purchase one below.",
+    blurb: "You will gain Combined perks:",
+    missingPerks: [
+      "access to UiO Gaming Association Room",
+      "access to Gangfest Events (2x / year)",
+    ],
+  },
+  {
+    title: "DNS",
+    description:
+      "You are missing a UiO Gaming membership. You can purchase one below.",
+    missingPerks: [],
+  },
+  {
+    title: "Combined",
+    description: "You have both memberships, and can enjoy all privileges.",
+    blurb: "Your added Combined perks:",
+    missingPerks: [],
+  },
+  {
+    title: "None",
+    description:
+      "You are missing both memberships. You can purchase them below.",
+    missingPerks: [],
+  },
+];
+
+const ProfileCard: React.FC<ProfileCardProps> = ({
+  hasUiogMembership,
+  hasDnsMembership,
+}) => {
+  let membershipStatus;
+  if (hasUiogMembership && hasDnsMembership) {
+    membershipStatus = membershipPerks[2]; // Combined
+  } else if (hasUiogMembership) {
+    membershipStatus = membershipPerks[0]; // UIOG
+  } else if (hasDnsMembership) {
+    membershipStatus = membershipPerks[1]; // DNS
+  } else {
+    membershipStatus = membershipPerks[3]; // None
+  }
+
+  let gradientBottom;
+  let imagePath;
+  let tag;
+
+  if (membershipStatus.title === "Combined") {
+    gradientBottom = "bg-success-bg";
+    imagePath = "/images/p_both.png";
+    tag = "Combined";
+  } else if (membershipStatus.title === "None") {
+    gradientBottom = "bg-failure-bg";
+    imagePath = "/images/p_none.png";
+    tag = "Free";
+  } else {
+    gradientBottom = "bg-mixed";
+
+    if (membershipStatus.title === "UIOG") {
+      imagePath = "/images/p_uiog.png";
+      tag = "UiO Gaming";
+    }
+
+    if (membershipStatus.title === "DNS") {
+      imagePath = "/images/p_neuf.png";
+      tag = "DNS Standard";
+    }
+  }
+
+  return (
+    <div
+      className={`p-6 rounded-lg shadow-md text-white bg-gradient-to-b from-primary ${gradientBottom} transition-all duration-500p-7 m-5 gap-10 h-full`}
+    >
+      {/* Top Row */}
+      <div className="flex justify-between items-start mb-4">
+        {/* User Icon and Name */}
+        <div className="flex items-start gap-4">
+          <div className="w-14 h-14 rounded-md">
+            <img
+              src={imagePath}
+              alt="User Icon"
+              className="w-full h-full rounded-md"
+            />
+          </div>
+          <div>
+            <p className="pb">wailern</p>
+            <p className="text-sm">{tag}</p>
+          </div>
+        </div>
+
+        {/* Log Out Button */}
+        <button className="bg-overlay-bright px-4 py-2 rounded-lg outline outline-outline2 outline-2">
+          <p className="text-outline2">Log Out →</p>
+        </button>
+      </div>
+
+      {/* Membership Status */}
+      <div className="space-y-2">
+        <div
+          className={`p-4 rounded-lg flex justify-between items-center ${
+            hasUiogMembership ? "bg-success" : "bg-failure"
+          }`}
+        >
+          <p>{hasUiogMembership ? "✅ UiO Gaming" : "❌ UiO Gaming"}</p>
+          <div>🎮</div>
+        </div>
+        <div
+          className={`p-4 rounded-lg flex justify-between items-center ${
+            hasDnsMembership ? "bg-success" : "bg-failure"
+          }`}
+        >
+          <p className="">
+            {hasDnsMembership ? "✅ DNS Standard" : "❌ DNS Standard"}
+          </p>
+          <div>🐟</div>
+        </div>
+      </div>
+
+      {/* Description */}
+      <div className="mt-4 space-y-4">
+        <p>{membershipStatus.description}</p>
+        <div>
+          <p className="pb">{membershipStatus.blurb}</p>
+          {membershipStatus.missingPerks.length > 0 && (
+            <ul className="list-disc list-inside mt-2 text-sm space-y-2">
+              {membershipStatus.missingPerks.map((perk, index) => (
+                <p key={index}>+ {perk}</p>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default ProfileCard;
+export default ProfileCard;

src/app/globals.css

@@ -7,7 +7,14 @@
   --foreground: #261F31;
   --primary: #392e49;
   --overlay: #4c3e62;
+  --overlay-bright: #6d517b;
   --outline: #987cc4;
+  --outline2: #dba0f6;
+  --success-bg: #40684A;
+  --success: #336054;
+  --failure-bg: #6b3132;
+  --failure: #551725;
+  --mixed: #6B4E31;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -16,7 +23,14 @@
     --foreground: #261F31;
     --primary: #392e49;
     --overlay: #4c3e62;
+    --overlay-bright: #6d517b;
     --outline: #987cc4;
+    --outline2: #dba0f6;
+    --success-bg: #40684A;
+    --success: #336054;
+    --failure-bg: #6b3132;
+    --failure: #551725;
+    --mixed: #6B4E31;
   }
 }
 
@@ -30,6 +44,11 @@ h1 {
   font-family: var(--font-nunito);
 }
 
+h2 {
+  font-family: var(--font-nunito);
+  font-weight: 800 !important;
+}
+
 p {
   font-family: var(--font-nunito);
   font-weight: 400;
@@ -37,6 +56,10 @@ p {
   color: white;
 }
 
+.pb {
+  font-weight: 800;
+}
+
 .po {
   color: var(--outline);
 }

src/app/page.tsx

@@ -1,6 +1,7 @@
 import ButtonSpecial from "./components/ButtonSpecial";
 import Button from "./components/Button";
 import Image from "next/image";
+import ProfileCard from "./components/ProfileCard";
 
 export default function Home() {
   return (

tailwind.config.ts

@@ -13,11 +13,20 @@ const config: Config = {
         foreground: "var(--foreground)",
         primary: "var(--primary)",
         overlay: "var(--overlay)",
-        outline: "var(--outline)"
+        'overlay-bright': "var(--overlay-bright)",
+        outline: "var(--outline)",
+        outline2: "var(--outline2)",
+        'success-bg': "var(--success-bg)",
+        success: "var(--success)",
+        'failure-bg': "var(--failure-bg)",
+        failure: "var(--failure)",
+        mixed: "var(--mixed)",
       },
     },
     borderRadius: {
       DEFAULT: "0.5rem",
+      sm: "0.125rem",
+      md: "0.375rem",
       lg: "1rem",
       xl: "2rem",
       full: "9999px",