Kenny/7 home navbar

src/components/svg/ProfileFrame.tsx

@@ -0,0 +1,74 @@
+const ProfileFrame = () => {
+  return (
+    <>
+      {/* Light Green Border Bottom-Aligned */}
+      <svg
+        className="absolute bottom-0 left-0 w-full h-full"
+        viewBox="-1 0 121 121"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M75.7317 10.7073H44.7439C25.9999 10.7073 10.8049 25.9023 10.8049 44.6463V77.1098C10.8049 95.8538 25.9999 111.049 44.7439 111.049H75.7317C94.4757 111.049 109.671 95.8538 109.671 77.1098V44.6463C109.671 25.9023 94.4757 10.7073 75.7317 10.7073ZM44.7439 0.378052C20.2952 0.378052 0.475586 20.1976 0.475586 44.6463V77.1098C0.475586 101.558 20.2952 121.378 44.7439 121.378H75.7317C100.18 121.378 120 101.558 120 77.1098V44.6463C120 20.1976 100.18 0.378052 75.7317 0.378052H44.7439Z"
+          fill="url(#paint0_linear_13912_539)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_13912_539"
+            x1="72.7805"
+            y1="142.774"
+            x2="59.5"
+            y2="-7.7378"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#718E1F" />
+            <stop offset="1" stopColor="#7CA13E" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      {/* Dark Green Border Top-Aligned */}
+      <svg
+        className="absolute top-0 w-full aspect-square"
+        viewBox="0 0 121 121"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M75.2561 8.85366H44.2683C24.7093 8.85366 8.85366 24.7093 8.85366 44.2683V76.7317C8.85366 96.2907 31.941 112.146 51.5 112.146H75.2561C94.8151 112.146 110.671 96.2907 110.671 76.7317V44.2683C110.671 24.7093 94.815 8.85366 75.2561 8.85366ZM44.2683 0C19.8196 0 0 19.8196 0 44.2683V76.7317C0 101.18 19.8196 121 44.2683 121H75.2561C99.7048 121 119.524 101.18 119.524 76.7317V44.2683C119.524 19.8196 99.7048 0 75.2561 0H44.2683Z"
+          fill="url(#paint0_linear_13912_540)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_13912_540"
+            x1="59.0244"
+            y1="60.5"
+            x2="71.5671"
+            y2="-19.9207"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#38401E" />
+            <stop offset="1" stopColor="#3A4222" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      {/* White Ellipse*/}
+      <svg
+        className="absolute top-[10%] left-[10%] w-[6.25%] h-auto"
+        viewBox="0 0 8 9"
+      >
+        <ellipse
+          cx="4.28753"
+          cy="4.12375"
+          rx="2.95122"
+          ry="4.42683"
+          transform="rotate(35.0528 4.28753 4.12375)"
+          fill="#F3FFDB"
+        />
+      </svg>
+    </>
+  )
+}
+
+export default ProfileFrame;

src/components/svg/TextOutline.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface TextOutlineProps {
+  text?: string;
+  strokeColor?: string;  
+  strokeWidth?: string;
+  shadowColor?: string;
+  fillColor?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  letterSpacing?: string;
+}
+
+// This was the only way I could perfectly replicate the texts in the figma design, but it seems a bit excessive...
+
+const TextOutline: React.FC<TextOutlineProps> = ({
+  text = "Placeholder",
+  strokeColor = "#2A3213",
+  strokeWidth = "2",
+  shadowColor = "#444D29",
+  fillColor = "#FFF",
+  fontFamily = "Quantico",
+  fontSize = "36px",
+  fontWeight = "700",
+  letterSpacing = "-1.44px",
+}) => {
+  return (
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="text-shadow" x="-50%" y="-50%" width="200%" height="200%">
+          <feOffset in="SourceAlpha" dx="0" dy="2" result="offset" />
+          <feFlood floodColor={shadowColor} result="flood" />
+          <feComposite in="flood" in2="offset" operator="in" result="shadow" />
+          <feMerge>
+            <feMergeNode in="shadow" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <text
+        x="50%"
+        y="50%"
+        dominantBaseline="middle"
+        textAnchor="middle"
+        fontFamily={fontFamily}
+        fontSize={fontSize}
+        fontStyle="normal"
+        fontWeight={fontWeight}
+        fill={fillColor}
+        stroke={strokeColor}
+        strokeWidth={strokeWidth}
+        letterSpacing={letterSpacing}
+        filter="url(#text-shadow)"
+      >
+        {text}
+      </text>
+    </svg>
+  );
+};
+
+export default TextOutline;

src/components/ui/Bubble.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+interface BubbleProps {
+  text?: string;
+}
+
+const Bubble: React.FC<BubbleProps> = ({
+  text = "Hey there! Don’t forget to take your medicine at 12:00!!",
+}) => {
+  return (
+    <div className="w-72 lg:w-80 xl:w-96 2xl:w-[32rem] 4xl:w-[43.75rem] leading-[4rem]">
+      <div className="w-full p-8 bg-white text-4xl font-bold text-[#343859] text-center shadow-bubble font-quantico">
+        {text}
+      </div>
+      <div className="h-10 w-10 ml-12 relative">
+        <Image
+          src="/misc/chatBubbleCorner.svg"
+          alt="Chat Bubble Decoration"
+          fill
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Bubble;

src/components/ui/ExpBar.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+
+interface ExpProps {
+  level: number;
+  currentExp: number;
+  totalExp?: number;
+}
+
+const ExpBar: React.FC<ExpProps> = ({ level, currentExp, totalExp = 100 }) => {
+  const progress = totalExp > 0 ? (currentExp / totalExp) * 100 : 0;
+
+  return (
+    <div className="relative w-fit h-full flex items-center flex-1">
+      {/* XP Bar */}
+      <div className="w-56 h-3/5 ml-4 bg-[#37401e] shadow-exp-outer 4xl:w-64 4xl:ml-5">
+        <div
+          className="h-full border-2 bg-[#c8e57f] border-[#5a711a] shadow-exp-inner"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      <div className="absolute left-0 w-full h-full flex flex-row gap-4 items-center">
+        <div className="h-full w-auto aspect-square relative">
+          <Image
+            src="/icons/Star.svg"
+            alt="Level Star"
+            fill
+            draggable={false}
+            className="object-contain select-none"
+          />
+
+          <div className="absolute w-full h-full z-auto font-pixelify text-center font-bold text-2xl flex justify-center items-center text-stroke-4 text-stroke-[#482D0D] text-shadow-[#603A0C] paint-stroke">
+            {level}
+          </div>
+        </div>
+        <span className="h-fit z-10 font-quantico font-extrabold text-[2rem] text-white text-stroke-4 text-stroke-[#2A3213] text-shadow-[#444D29] paint-stroke letter-spacing-ui">
+          {currentExp}/{totalExp} XP
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ExpBar;