@syscore/ui-library 1.1.10 → 1.1.12

package/client/components/icons/WaterMarkWellProjects.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface WaterMarkWellProjectsProps {
+  className?: string;
+}
+
+export const WaterMarkWellProjects: React.FC<WaterMarkWellProjectsProps> = ({
+  className,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="120"
+      height="120"
+      viewBox="0 0 120 120"
+      fill="none"
+      className={cn("text-gray-100 rounded-full", className)}
+    >
+      <path
+        d="M60 0C26.8667 0 0 26.8667 0 60C0 93.1333 26.8667 120 60 120C93.1333 120 120 93.1333 120 60C120 26.8667 93.1333 0 60 0ZM109.867 88.8C107.333 93.1333 104.267 97.1333 100.733 100.733C97.2 104.267 93.2 107.4 88.8 109.867C84.4667 112.4 79.8 114.333 74.9333 115.6C70.1333 116.867 65.0667 117.533 60.0667 117.533C55.0667 117.533 50 116.867 45.2 115.6C40.3333 114.333 35.6667 112.4 31.3333 109.867C27 107.333 23 104.267 19.4 100.733C15.8667 97.2 12.7333 93.2 10.2667 88.8C7.73333 84.4667 5.8 79.8 4.53333 74.9333C3.26667 70.0667 2.6 65.0667 2.6 60.0667C2.6 55.0667 3.26667 50 4.53333 45.2C5.8 40.3333 7.73333 35.6667 10.2667 31.3333C12.8 27 15.8667 23 19.4 19.4C22.9333 15.8667 26.9333 12.7333 31.3333 10.2667C35.6667 7.73333 40.3333 5.8 45.2 4.53333C50 3.26667 55.0667 2.6 60.0667 2.6C65.0667 2.6 70.1333 3.26667 74.9333 4.53333C79.8 5.8 84.4667 7.73333 88.8 10.2667C93.1333 12.8 97.1333 15.8667 100.733 19.4C104.267 22.9333 107.4 26.9333 109.867 31.3333C112.4 35.6667 114.333 40.3333 115.6 45.2C116.867 50.0667 117.533 55.0667 117.533 60.0667C117.533 65.0667 116.867 70.1333 115.6 74.9333C114.333 79.8 112.4 84.4667 109.867 88.8Z"
+        fill="currentColor"
+      />
+      <path
+        d="M113.6 45.6663C112.333 40.9996 110.467 36.4663 108.067 32.2663C105.667 28.0663 102.667 24.1996 99.2665 20.7996C95.8665 17.3996 91.9998 14.3996 87.7998 11.9996C83.5998 9.59961 79.1332 7.73294 74.3998 6.46628C69.7332 5.19961 64.9332 4.59961 60.0665 4.59961C55.1998 4.59961 50.3998 5.19961 45.7332 6.46628C41.0665 7.73294 36.5332 9.59961 32.3332 11.9996C28.1332 14.3996 24.2665 17.3996 20.8665 20.7996C17.4665 24.1996 14.4665 28.0663 12.0665 32.2663C9.6665 36.4663 7.79984 40.9329 6.53317 45.6663C5.2665 50.3329 4.6665 55.1329 4.6665 59.9996C4.6665 64.8663 5.2665 69.6663 6.53317 74.3329C7.79984 78.9996 9.6665 83.5329 12.0665 87.7329C14.4665 91.9329 17.4665 95.7996 20.8665 99.1996C24.2665 102.6 28.1332 105.6 32.3332 108C36.5332 110.4 40.9998 112.266 45.7332 113.533C50.3998 114.8 55.1998 115.4 60.0665 115.4C64.9332 115.4 69.7332 114.8 74.3998 113.533C79.0665 112.266 83.5998 110.4 87.7998 108C91.9998 105.6 95.8665 102.6 99.2665 99.1996C102.667 95.7996 105.667 91.9329 108.067 87.7329C110.467 83.5329 112.333 79.0663 113.6 74.3329C114.867 69.6663 115.467 64.8663 115.467 59.9996C115.467 55.1329 114.867 50.3329 113.6 45.6663ZM47.1332 7.99961C51.3332 6.99961 55.5998 6.46628 59.9998 6.46628C64.3998 6.46628 69.3998 7.06628 73.8665 8.26628C78.3998 9.46628 82.7332 11.2663 86.7998 13.5996C90.8665 15.9329 94.5998 18.7996 97.8665 22.1329C100.933 25.1996 103.6 28.5996 105.867 32.3329C106.2 32.7996 106 33.4663 105.467 33.7996C105 34.0663 104.333 33.9329 104.067 33.4663C101.933 29.9329 99.3332 26.5996 96.3998 23.6663C93.1998 20.4663 89.5998 17.7329 85.7332 15.4663C81.8665 13.1996 77.6665 11.4663 73.3332 10.3329C68.9998 9.19961 64.5332 8.59961 59.9998 8.59961C55.4665 8.59961 51.6665 9.13294 47.6665 10.0663C47.1332 10.1996 46.5332 9.86628 46.3998 9.33294C46.2665 8.79961 46.5998 8.19961 47.1332 8.06628V7.99961ZM21.3998 82.2663C21.8665 81.9996 22.5332 82.1329 22.7998 82.5996C24.5998 85.5329 26.7332 88.2663 29.1998 90.733C31.8665 93.3996 34.9332 95.7329 38.1998 97.6663C41.4665 99.5996 44.9998 101.066 48.7332 102C52.3998 103 56.1998 103.466 59.9998 103.466C63.7998 103.466 67.5998 103 71.2665 102C74.9332 101 78.4665 99.5329 81.7998 97.6663C85.0665 95.7329 88.1332 93.3996 90.7998 90.733C93.2665 88.2663 95.3998 85.5329 97.1998 82.5996C97.4665 82.1329 98.1332 81.9329 98.5998 82.2663C99.1332 82.5329 99.2665 83.1996 98.9332 83.7329C97.0665 86.7996 94.7998 89.6663 92.1998 92.2663C89.3998 95.0663 86.1998 97.533 82.7332 99.533C79.2665 101.533 75.5998 103.066 71.7332 104.066C67.8665 105.066 63.9332 105.6 59.9332 105.6C55.9332 105.6 51.9332 105.066 48.1332 104.066C44.2665 103.066 40.5998 101.533 37.1332 99.533C33.6665 97.533 30.5332 95.0663 27.6665 92.2663C25.0665 89.6663 22.8665 86.7996 20.9332 83.7329C20.5998 83.1996 20.7998 82.5996 21.2665 82.2663H21.3998ZM17.9332 48.7329C17.0665 52.0663 16.5332 55.5329 16.4665 58.9996C16.4665 59.5996 15.9998 59.9996 15.3998 59.9996C14.7998 59.9996 14.3332 59.5329 14.3332 58.9329C14.3998 55.2663 14.9332 51.6663 15.8665 48.1996C16.8665 44.3329 18.3998 40.6663 20.3998 37.1996C22.3998 33.7329 24.8665 30.5996 27.6665 27.7329C30.2665 25.1329 33.1332 22.9329 36.1998 20.9996C36.7332 20.6663 37.3332 20.8663 37.6665 21.3329C37.9332 21.7996 37.7998 22.4663 37.3332 22.7329C34.3998 24.5329 31.6665 26.6663 29.1998 29.1329C26.5332 31.7996 24.1998 34.8663 22.2665 38.1329C20.3332 41.3996 18.8665 44.9329 17.9332 48.6663V48.7329ZM97.7332 38.1996C95.7998 34.9329 93.4665 31.8663 90.7998 29.1996C88.1332 26.5329 85.0665 24.1996 81.7998 22.2663C78.7998 20.5329 75.5998 19.1329 72.2665 18.1996C71.7332 18.0663 71.3998 17.4663 71.5332 16.9329C71.6665 16.3996 72.2665 16.0663 72.8665 16.1996C76.3332 17.1996 79.7332 18.6663 82.8665 20.4663C86.3332 22.4663 89.4665 24.9329 92.3332 27.7329C95.1332 30.5329 97.5998 33.7329 99.5998 37.1996C101.6 40.6663 103.133 44.3329 104.133 48.1996C105.067 51.6663 105.6 55.3329 105.667 58.9329C105.667 59.5329 105.2 59.9996 104.6 59.9996C104 59.9996 103.6 59.5329 103.533 58.9996C103.467 55.5329 102.933 52.0663 102.067 48.7329C101.067 45.0663 99.5998 41.5329 97.7332 38.1996ZM35.1332 16.8663C38.8665 14.6663 42.9998 13.1329 47.1998 12.0663C51.3998 10.9329 55.6665 10.3996 60.0665 10.3996C64.4665 10.3996 68.7332 10.9329 72.9332 12.0663C77.1332 13.1996 81.1332 14.8663 84.9332 16.9996C88.3998 18.9996 91.5998 21.3996 94.4665 24.1329C94.8665 24.5329 94.8665 25.1996 94.4665 25.5996C94.0665 25.9996 93.3998 25.9996 92.9998 25.5996C90.2665 22.9329 87.1998 20.6663 83.8665 18.7329C80.2665 16.6663 76.3998 15.0663 72.3998 13.9996C68.3998 12.9329 64.2665 12.3996 60.0665 12.3996C55.8665 12.3996 51.7332 12.9329 47.7332 13.9996C43.7332 15.0663 39.8665 16.6663 36.2665 18.7329C32.6665 20.7996 29.3332 23.3329 26.3998 26.2663C23.7332 28.9329 21.3332 31.9996 19.3332 35.1996C19.0665 35.6663 18.3998 35.8663 17.9332 35.5329C17.3998 35.2663 17.2665 34.5996 17.5332 34.0663C19.5998 30.6663 22.0665 27.5329 24.8665 24.7329C27.9332 21.6663 31.3998 18.9996 35.1332 16.8663ZM9.99984 72.3329C10.1332 72.8663 9.79984 73.4663 9.2665 73.5996C8.73317 73.7329 8.13317 73.3996 7.99984 72.8663C6.99984 68.6663 6.4665 64.3996 6.4665 59.9996C6.4665 55.5996 7.0665 50.5996 8.2665 46.1329C9.4665 41.5996 11.2665 37.2663 13.5998 33.1996C15.7332 29.4663 18.3998 25.9996 21.3998 22.8663C21.7998 22.4663 22.4665 22.4663 22.8665 22.8663C23.2665 23.2663 23.2665 23.9329 22.8665 24.3329C19.9998 27.3329 17.4665 30.6663 15.3998 34.2663C13.1332 38.1329 11.3998 42.3329 10.2665 46.6663C9.13317 50.9996 8.53317 55.4663 8.53317 59.9996C8.53317 64.5329 9.0665 68.3329 9.99984 72.3329ZM10.3998 61.0663C10.3998 60.4663 10.8665 59.9996 11.4665 59.9996C12.0665 59.9996 12.4665 60.4663 12.5332 60.9996C12.5998 64.7996 13.1332 68.5996 14.1332 72.2663C15.1998 76.2663 16.7998 80.1329 18.8665 83.7329C20.9332 87.3329 23.4665 90.6663 26.3998 93.5996C29.0665 96.2663 32.1332 98.6663 35.3332 100.666C35.7998 100.933 35.9998 101.6 35.6665 102.066C35.3998 102.6 34.7332 102.733 34.1998 102.466C30.7998 100.4 27.6665 97.9329 24.8665 95.1329C21.7998 92.0663 19.1332 88.5996 16.9998 84.8663C14.7998 81.1329 13.1332 77.0663 12.0665 72.8663C11.0665 69.0663 10.4665 65.0663 10.3998 61.0663ZM72.8665 112C68.6665 113 64.3998 113.533 59.9998 113.533C55.5998 113.533 50.5998 112.933 46.1332 111.733C41.5998 110.533 37.2665 108.733 33.1998 106.4C29.1332 104.066 25.3998 101.2 22.1332 97.8663C19.0665 94.7996 16.3998 91.3996 14.1332 87.6663C13.7998 87.1996 13.9998 86.5329 14.5332 86.1996C14.9998 85.9329 15.6665 86.0663 15.9332 86.5329C18.0665 90.0663 20.6665 93.3996 23.5998 96.3329C26.7998 99.5329 30.3998 102.266 34.2665 104.533C38.1332 106.8 42.3332 108.533 46.6665 109.666C50.9998 110.8 55.4665 111.4 59.9998 111.4C64.5332 111.4 68.3332 110.866 72.3332 109.933C72.8665 109.8 73.4665 110.133 73.5998 110.666C73.7332 111.2 73.3998 111.8 72.8665 111.933V112ZM84.7998 103C81.3332 105 77.6665 106.6 73.8665 107.666C73.3332 107.8 72.7332 107.466 72.5998 106.933C72.4665 106.4 72.7998 105.8 73.3332 105.666C76.9998 104.6 80.5332 103.133 83.7998 101.2C87.3998 99.1329 90.7332 96.5996 93.6665 93.6663C96.5998 90.7329 99.1332 87.3996 101.2 83.7996C103.267 80.1996 104.867 76.3329 105.933 72.3329C107 68.3329 107.533 64.1996 107.533 59.9996C107.533 55.7996 107.067 52.3996 106.2 48.6663C106.067 48.1329 106.4 47.5329 106.933 47.3996C107.467 47.2663 108.067 47.5996 108.2 48.1329C109.133 51.9996 109.6 55.9329 109.6 59.9329C109.6 63.9329 109.067 68.5996 107.933 72.7996C106.8 76.9996 105.133 80.9996 103 84.7996C100.8 88.5329 98.1998 91.9996 95.1332 95.0663C92.0665 98.133 88.5998 100.8 84.8665 102.933L84.7998 103ZM111.733 73.8663C110.533 78.3996 108.733 82.7329 106.4 86.7996C104.267 90.5329 101.6 93.9996 98.5998 97.1329C98.1998 97.5329 97.5332 97.5329 97.1332 97.1329C96.7332 96.7329 96.7332 96.0663 97.1332 95.6663C99.9998 92.6663 102.533 89.3329 104.6 85.7329C106.867 81.8663 108.6 77.6663 109.733 73.3329C110.8 69.3329 111.4 65.1996 111.467 60.9996C111.467 60.3996 111.933 59.9996 112.533 59.9996C113.133 59.9996 113.6 60.4663 113.6 61.0663C113.533 65.3996 112.933 69.7329 111.8 73.8663H111.733Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/client/components/icons/WatermarkMemberOrg.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface WatermarkMemberOrgProps {
+  className?: string;
+}
+
+export const WatermarkMemberOrg: React.FC<WatermarkMemberOrgProps> = ({
+  className,
+}) => {
+  return (
+    <div style={{ filter: "drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25))" }}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="120"
+        height="120"
+        viewBox="0 0 120 120"
+        fill="none"
+        className={cn("rounded-full", className)}
+      >
+        {/* SVG Filter for recessed/debossed effect between paths */}
+        <defs>
+          <filter
+            id="recessed-shadow"
+            x="-50%"
+            y="-50%"
+            width="200%"
+            height="200%"
+          >
+            {/* Inner shadow effect - creates the recessed look */}
+            <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" />
+            <feOffset dx="1" dy="1" result="offsetblur" />
+            <feComponentTransfer>
+              <feFuncA type="linear" slope="0.3" />
+            </feComponentTransfer>
+            <feMerge>
+              <feMergeNode />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          {/* Alternative: Drop shadow filter for paths */}
+          <filter id="path-shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow
+              dx="1"
+              dy="1"
+              stdDeviation="1.5"
+              floodColor="rgba(0, 0, 0, 0.2)"
+            />
+          </filter>
+        </defs>
+        <path
+          d="M60 0C26.8627 0 0 26.8627 0 60C0 93.1373 26.8627 120 60 120C93.1373 120 120 93.1373 120 60C120 26.8627 93.1373 0 60 0ZM106.816 72.5448C107.906 68.477 108.458 64.2567 108.458 60C108.458 59.201 109.111 58.5472 109.91 58.5472C110.709 58.5472 111.363 59.201 111.363 60C111.363 64.5036 110.782 68.9782 109.627 73.293C108.472 77.6223 106.743 81.7918 104.492 85.6852C102.247 89.5642 99.5012 93.138 96.3269 96.3196C93.1525 99.5012 89.5714 102.247 85.6925 104.484C81.8063 106.736 77.6368 108.465 73.3002 109.62C68.9782 110.775 64.5036 111.356 60 111.356C55.4964 111.356 51.0218 110.775 46.707 109.62C42.3777 108.465 38.2082 106.736 34.3148 104.484C30.4358 102.24 26.862 99.4939 23.6804 96.3196C20.5061 93.1453 17.753 89.5642 15.5157 85.6852C15.1162 84.9879 15.3487 84.1017 16.046 83.7022C16.7433 83.3027 17.6295 83.5351 18.0291 84.2324C20.1429 87.8935 22.7361 91.2639 25.7361 94.2639C28.7361 97.2639 32.1065 99.8571 35.7676 101.971C39.4358 104.092 43.3656 105.726 47.4552 106.816C51.523 107.906 55.7433 108.458 60 108.458C64.2567 108.458 68.477 107.906 72.5448 106.816C76.6271 105.726 80.5569 104.092 84.2324 101.971C87.8935 99.8571 91.2639 97.2639 94.2639 94.2639C97.2639 91.2639 99.8571 87.8935 101.971 84.2324C104.092 80.5642 105.726 76.6344 106.816 72.5448ZM18.5884 71.0993C19.5545 74.7094 20.9927 78.1889 22.8741 81.4358C24.7482 84.6755 27.0436 87.661 29.6949 90.3124C32.3462 92.9637 35.3317 95.2591 38.5714 97.1332C41.8184 99.0073 45.2906 100.453 48.908 101.419C52.5109 102.378 56.2373 102.872 60.0073 102.872C63.7772 102.872 67.5036 102.385 71.1065 101.419C74.7167 100.453 78.1961 99.0145 81.4431 97.1332C84.6828 95.2591 87.6683 92.9637 90.3196 90.3124C90.8862 89.7458 91.8087 89.7458 92.3753 90.3124C92.9419 90.8789 92.9419 91.8015 92.3753 92.368C89.5424 95.201 86.3608 97.6489 82.9032 99.6465C79.4383 101.651 75.7191 103.191 71.862 104.223C68.0048 105.24 64.017 105.763 60 105.763C55.9831 105.763 51.9952 105.24 48.1525 104.215C44.2954 103.184 40.5763 101.644 37.1114 99.6392C33.6538 97.6416 30.4649 95.1937 27.6392 92.3608C24.8063 89.5278 22.3584 86.3462 20.3608 82.8886C18.3559 79.4237 16.816 75.7119 15.7845 71.8475C14.7603 68.0048 14.2373 64.017 14.2373 60C14.2373 55.9831 14.7603 51.9952 15.7845 48.1525C16.816 44.2954 18.3559 40.5763 20.3608 37.1114C20.7603 36.414 21.6538 36.1816 22.3438 36.5811C23.0412 36.9806 23.2736 37.8741 22.8741 38.5642C21 41.8111 19.5545 45.2833 18.5884 48.9007C17.6295 52.5036 17.1356 56.2373 17.1356 60C17.1356 63.7627 17.6223 67.4964 18.5884 71.0993ZM78.632 92.2736C81.4431 90.6465 84.0436 88.6489 86.3462 86.3462C88.6489 84.0436 90.6465 81.4431 92.2736 78.632C92.6731 77.9346 93.5666 77.7022 94.2567 78.1017C94.954 78.5012 95.1864 79.3947 94.7869 80.0847C93.0291 83.1211 90.8789 85.9177 88.4019 88.4019C85.9177 90.8862 83.1211 93.0363 80.0847 94.7869C77.0412 96.5448 73.7797 97.8959 70.3947 98.8039C67.0242 99.7119 63.523 100.169 60 100.169C56.477 100.169 52.9758 99.7119 49.6053 98.8111C46.2203 97.9032 42.9588 96.5521 39.9153 94.7942C36.8789 93.0363 34.0823 90.8862 31.5981 88.4019C29.1138 85.9177 26.9637 83.1211 25.2131 80.0847C23.4552 77.0412 22.1041 73.7797 21.1961 70.3947C20.2881 67.0242 19.8305 63.523 19.8305 60C19.8305 56.477 20.2881 52.9758 21.1889 49.6053C22.0969 46.2203 23.4479 42.9588 25.2058 39.9153C26.9637 36.8789 29.1138 34.0823 31.5908 31.5981C32.1574 31.0315 33.0799 31.0315 33.6465 31.5981C34.2131 32.1646 34.2131 33.0872 33.6465 33.6538C31.3438 35.9564 29.3462 38.5569 27.7191 41.368C26.0847 44.1864 24.8354 47.2155 23.9927 50.3535C23.1574 53.4843 22.7361 56.7312 22.7361 60C22.7361 63.2688 23.1574 66.5157 24 69.6465C24.8426 72.7845 26.092 75.8136 27.7264 78.632C29.3535 81.4431 31.3511 84.0436 33.6538 86.3462C35.9564 88.6489 38.5569 90.6465 41.368 92.2736C44.1864 93.908 47.2155 95.1574 50.3535 96C53.4843 96.8354 56.7312 97.2639 60 97.2639C63.2688 97.2639 66.5157 96.8426 69.6465 96C72.7845 95.1574 75.8136 93.908 78.632 92.2736ZM61.4528 10.0969C61.4528 10.8959 60.799 11.5496 60 11.5496C55.7433 11.5496 51.523 12.1017 47.4552 13.1913C43.3729 14.2809 39.4431 15.9153 35.7676 18.0363C32.1065 20.1501 28.7361 22.7433 25.7361 25.7433C22.7361 28.7433 20.1429 32.1138 18.0291 35.7748C15.908 39.4431 14.2809 43.3729 13.1913 47.4552C12.1017 51.523 11.5496 55.7433 11.5496 60C11.5496 60.799 10.8959 61.4528 10.0969 61.4528C9.29782 61.4528 8.64407 60.799 8.64407 60C8.64407 55.4964 9.22518 51.0218 10.3801 46.707C11.5351 42.3777 13.2639 38.2082 15.5157 34.3148C17.7603 30.4358 20.5061 26.862 23.6804 23.6804C26.8547 20.5061 30.4358 17.753 34.3148 15.5157C38.201 13.2639 42.3705 11.5351 46.707 10.3801C51.0218 9.22518 55.4964 8.64407 60 8.64407C60.799 8.64407 61.4528 9.29782 61.4528 10.0969ZM109.329 88.4746C106.838 92.7748 103.794 96.7409 100.271 100.264C96.7482 103.787 92.7821 106.831 88.4818 109.322C84.1671 111.821 79.5472 113.731 74.7458 115.017C69.9588 116.303 64.9976 116.949 60 116.949C55.0024 116.949 50.0412 116.303 45.2542 115.024C40.4528 113.739 35.8257 111.821 31.5182 109.329C27.2179 106.838 23.2518 103.794 19.7288 100.271C16.2058 96.7482 13.1622 92.7821 10.6707 88.4818C8.17191 84.1671 6.2615 79.5472 4.97579 74.7458C3.69734 69.9588 3.05085 64.9976 3.05085 60C3.05085 55.0024 3.69734 50.0412 4.97579 45.2542C6.2615 40.4528 8.17918 35.8257 10.6707 31.5182C13.1622 27.2179 16.2058 23.2518 19.7288 19.7288C23.2518 16.2058 27.2179 13.1622 31.5182 10.6707C35.8329 8.17191 40.4528 6.2615 45.2542 4.97579C46.0315 4.76513 46.8232 5.23002 47.0339 6.00726C47.2446 6.7845 46.7797 7.57627 46.0024 7.78692C41.4552 9 37.0678 10.8232 32.9782 13.1913C28.8959 15.5521 25.1332 18.4431 21.7918 21.7918C18.4504 25.1332 15.5593 28.8959 13.1913 32.9782C10.8232 37.0678 9.00726 41.4552 7.78692 46.0097C6.57385 50.5496 5.95642 55.2567 5.95642 60C5.95642 64.7433 6.57385 69.4504 7.78692 73.9903C9.00726 78.5448 10.8232 82.9322 13.1913 87.0218C15.5521 91.1041 18.4431 94.8668 21.7918 98.2082C25.1332 101.55 28.8959 104.441 32.9782 106.809C37.0678 109.177 41.4552 110.993 46.0097 112.213C50.5496 113.426 55.2567 114.044 60 114.044C64.7433 114.044 69.4504 113.426 73.9903 112.213C78.5448 110.993 82.9322 109.177 87.0218 106.809C91.1041 104.448 94.8668 101.557 98.2082 98.2082C101.55 94.8668 104.441 91.0969 106.809 87.0218C109.177 82.9322 110.993 78.5448 112.213 73.9903C112.424 73.2131 113.216 72.7555 113.993 72.9588C114.77 73.1695 115.228 73.9613 115.024 74.7385C113.739 79.54 111.821 84.1671 109.329 88.4746Z"
+          fill="#EFF1F2"
+          filter="url(#path-shadow)"
+        />
+      </svg>
+    </div>
+  );
+};

package/client/components/icons/WellSeal.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface WellSealProps {
+  className?: string;
+}
+
+export const WellSeal: React.FC<WellSealProps> = ({ className }) => {
+  return (
+    <svg
+      viewBox="0 0 300 300"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(className)}
+    >
+      <circle cx="150" cy="150" r="150" fill="white" />
+      <path
+        d="M150 265.026C139.909 265.026 129.892 263.727 120.226 261.129C110.534 258.531 101.192 254.66 92.4746 249.614C83.7821 244.593 75.789 238.424 68.6701 231.33C62.2007 224.86 56.5056 217.642 51.7597 209.823C50.9854 208.575 51.41 206.926 52.6839 206.177C53.9328 205.452 55.5065 205.877 56.2309 207.101C60.7769 214.544 66.1973 221.438 72.3919 227.608C79.1861 234.402 86.8295 240.272 95.1223 245.068C103.44 249.889 112.332 253.561 121.6 256.034C130.817 258.506 140.383 259.755 150.025 259.755C159.667 259.755 169.233 258.506 178.451 256.034C187.718 253.561 196.61 249.864 204.928 245.068C213.221 240.272 220.864 234.402 227.658 227.608C233.853 221.413 239.273 214.544 243.819 207.101C244.568 205.877 246.142 205.477 247.366 206.177C248.64 206.926 249.065 208.575 248.29 209.823C243.519 217.617 237.849 224.836 231.38 231.33C224.261 238.449 216.243 244.593 207.575 249.614C198.858 254.66 189.516 258.531 179.824 261.129C170.108 263.727 160.091 265.026 150 265.026Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M262.378 150C260.954 150 259.78 148.851 259.755 147.427C259.555 138.66 258.307 129.967 256.059 121.575C253.586 112.308 249.889 103.415 245.093 95.0973C240.297 86.8045 234.427 79.1611 227.633 72.3669C220.839 65.5728 213.195 59.7028 204.903 54.907C197.334 50.5357 189.266 47.0637 180.898 44.6159C179.524 44.2162 178.725 42.7924 179.1 41.4186C179.475 39.9948 180.973 39.1705 182.372 39.5702C191.139 42.143 199.582 45.7649 207.525 50.3359C216.218 55.3566 224.211 61.5263 231.33 68.6202C238.449 75.739 244.593 83.7571 249.614 92.4246C254.66 101.142 258.531 110.484 261.129 120.176C263.477 128.993 264.776 138.085 265.001 147.277C265.026 148.801 263.852 150 262.378 150Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M37.6218 150C36.1481 150 34.9741 148.801 34.9991 147.327C35.1989 138.135 36.4978 129.043 38.8708 120.226C41.4685 110.534 45.3402 101.192 50.3858 92.4746C55.4065 83.7821 61.5762 75.789 68.6701 68.6701C75.1395 62.2007 82.3583 56.5056 90.1765 51.7597C91.4255 50.9854 93.074 51.41 93.8234 52.6839C94.5478 53.9078 94.1231 55.5065 92.8992 56.2308C85.4556 60.7769 78.5616 66.1972 72.3919 72.3919C65.5977 79.186 59.7278 86.8295 54.9319 95.1223C50.1111 103.44 46.4392 112.332 43.9664 121.599C41.7183 129.992 40.4944 138.685 40.2696 147.452C40.2196 148.851 39.0456 150 37.6218 150Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M44.0164 88.8027C42.7425 88.0784 42.3179 86.4298 43.0922 85.1809C48.2878 76.6133 54.5074 68.6951 61.6263 61.6012C69.3696 53.8579 78.0621 47.1886 87.5039 41.7183C96.9708 36.248 107.112 32.0267 117.653 29.2041C128.144 26.4065 139.035 24.9828 150.025 24.9828C160.991 24.9828 171.881 26.4065 182.397 29.2041C192.938 32.0267 203.079 36.2231 212.546 41.7183C221.214 46.739 229.282 52.7838 236.525 59.7278C237.575 60.7519 237.6 62.4255 236.55 63.4746C235.526 64.4987 233.903 64.4987 232.879 63.4996C225.935 56.8553 218.216 51.0603 209.923 46.2394C200.856 40.994 191.14 36.9724 181.048 34.2748C170.982 31.5771 160.566 30.2282 150.05 30.2282C139.534 30.2282 129.093 31.6021 119.052 34.2748C108.96 36.9724 99.2438 40.994 90.1766 46.2394C81.1344 51.4849 72.7916 57.8794 65.373 65.298C58.5789 72.0921 52.609 79.6856 47.6383 87.8785C46.839 89.1025 45.2404 89.5271 44.0164 88.8027Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M88.8027 255.984C88.0783 257.258 86.4298 257.682 85.1808 256.908C76.6132 251.712 68.6951 245.493 61.6012 238.374C53.8578 230.631 47.1886 221.938 41.7183 212.496C36.248 203.029 32.0267 192.888 29.2041 182.347C26.6313 172.705 25.2075 162.714 25.0077 152.648C24.9827 151.174 26.1567 149.975 27.6305 149.975C29.0542 149.975 30.2282 151.124 30.2532 152.548C30.453 162.19 31.8019 171.731 34.2747 180.973C36.9724 191.065 40.9939 200.781 46.2394 209.848C51.4849 218.891 57.8794 227.233 65.298 234.652C72.0921 241.446 79.6856 247.416 87.8785 252.387C89.1025 253.161 89.5271 254.76 88.8027 255.984Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M181.673 268.223C181.298 266.849 182.122 265.426 183.496 265.026C192.713 262.353 201.581 258.556 209.898 253.736C218.941 248.49 227.283 242.096 234.702 234.677C242.121 227.258 248.515 218.916 253.761 209.873C259.006 200.806 263.028 191.09 265.725 180.998C268.423 170.932 269.772 160.516 269.772 150C269.772 140.358 268.623 130.767 266.35 121.5C266 120.101 266.824 118.702 268.223 118.327C269.647 117.953 271.096 118.802 271.445 120.226C273.818 129.917 275.017 139.934 275.017 150C275.017 160.966 273.593 171.856 270.796 182.372C267.973 192.913 263.777 203.054 258.282 212.521C252.811 221.963 246.117 230.68 238.399 238.399C230.655 246.142 221.963 252.811 212.521 258.282C203.829 263.302 194.562 267.274 184.92 270.071C183.521 270.471 182.047 269.647 181.673 268.223Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M264.651 83.8071C263.402 84.5314 261.829 84.1068 261.079 82.8829C255.659 73.9406 249.165 65.6477 241.746 58.2291C233.728 50.211 224.686 43.267 214.869 37.5969C205.053 31.9018 194.512 27.5556 183.571 24.6331C172.68 21.7106 161.365 20.2369 149.975 20.2369C139.459 20.2369 128.993 21.4858 118.877 23.9836C117.478 24.3333 116.079 23.5091 115.705 22.1103C115.33 20.6865 116.179 19.2377 117.603 18.888C128.144 16.2903 139.01 14.9914 149.975 14.9914C161.815 14.9914 173.58 16.5401 184.92 19.5625C196.31 22.6098 207.251 27.1559 217.492 33.0758C227.683 38.9707 237.1 46.1895 245.443 54.5573C253.161 62.2756 259.93 70.8932 265.55 80.2102C266.35 81.4341 265.925 83.0827 264.651 83.8071Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M22.1103 184.27C20.6865 184.645 19.2377 183.796 18.888 182.372C16.2903 171.831 14.9914 160.966 14.9914 150C14.9914 138.16 16.5401 126.395 19.5625 115.055C22.6098 103.665 27.1559 92.6994 33.0758 82.4832C38.5211 73.0663 45.1154 64.2989 52.6839 56.4307C53.708 55.3816 55.3816 55.3566 56.4307 56.4057C57.4548 57.4298 57.4548 59.0534 56.4556 60.0775C49.1619 67.646 42.8424 76.0638 37.5969 85.106C31.9018 94.9225 27.5556 105.463 24.6331 116.404C21.7106 127.295 20.2369 138.61 20.2369 150C20.2369 160.516 21.4858 170.982 23.9836 181.098C24.3333 182.497 23.5091 183.896 22.1103 184.27Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M150 285.009C138.16 285.009 126.395 283.46 115.055 280.438C103.665 277.39 92.7243 272.844 82.4832 266.924C72.292 261.029 62.8751 253.811 54.5323 245.443C46.8139 237.724 40.0447 229.107 34.4246 219.79C33.6752 218.541 34.0999 216.892 35.3488 216.168C36.5977 215.444 38.1714 215.868 38.9207 217.092C44.341 226.034 50.8354 234.327 58.2541 241.746C66.2721 249.764 75.3143 256.708 85.1309 262.378C94.9474 268.073 105.488 272.419 116.429 275.342C127.32 278.264 138.635 279.738 150.025 279.738C160.541 279.738 171.007 278.489 181.123 275.991C182.522 275.642 183.921 276.466 184.295 277.865C184.67 279.289 183.821 280.737 182.397 281.087C171.831 283.685 160.941 285.009 150 285.009Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M243.594 243.594C242.57 242.57 242.57 240.947 243.569 239.922C250.838 232.354 257.158 223.961 262.403 214.894C268.098 205.078 272.444 194.537 275.367 183.596C278.065 173.53 279.513 163.089 279.738 152.573C279.763 151.149 280.937 150 282.361 150C283.835 150 285.009 151.199 284.984 152.673C284.759 163.613 283.235 174.479 280.438 184.945C277.39 196.335 272.844 207.301 266.924 217.517C261.479 226.934 254.885 235.701 247.316 243.569C246.317 244.618 244.618 244.618 243.594 243.594Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M150 295C137.261 295 124.647 293.351 112.457 290.104C100.218 286.832 88.4531 281.961 77.4875 275.592C66.5469 269.247 56.4307 261.504 47.4634 252.537C38.4961 243.569 30.7278 233.478 24.4083 222.512C18.0637 211.522 13.168 199.757 9.89578 187.543C6.64858 175.353 5 162.739 5 150C5 137.261 6.64858 124.647 9.89578 112.457C13.168 100.218 18.0388 88.4531 24.4083 77.4875C30.7528 66.5469 38.4961 56.4307 47.4634 47.4634C56.4307 38.4961 66.522 30.7278 77.4875 24.4083C88.478 18.0637 100.243 13.168 112.457 9.89578C124.647 6.64858 137.261 5 150 5C162.739 5 175.353 6.64858 187.543 9.89578C199.782 13.168 211.547 18.0388 222.512 24.4083C233.453 30.7528 243.569 38.4961 252.537 47.4634C261.504 56.4307 269.272 66.522 275.592 77.4875C281.936 88.478 286.832 100.243 290.104 112.457C293.351 124.647 295 137.261 295 150C295 162.714 293.351 175.353 290.104 187.543C286.832 199.782 281.961 211.547 275.592 222.512C269.247 233.453 261.504 243.569 252.537 252.537C243.569 261.504 233.478 269.272 222.512 275.592C211.522 281.936 199.757 286.832 187.543 290.104C175.353 293.351 162.739 295 150 295ZM150 10.2455C137.736 10.2455 125.546 11.8441 113.806 14.9664C102.016 18.1137 90.6761 22.8096 80.1103 28.9294C69.5444 35.0241 59.8277 42.5177 51.1852 51.1602C42.5426 59.8028 35.0491 69.5443 28.9543 80.0853C22.8346 90.6761 18.1387 102.016 14.9914 113.781C11.8441 125.521 10.2705 137.686 10.2705 149.975C10.2705 162.264 11.8691 174.429 14.9914 186.169C18.1387 197.959 22.8346 209.299 28.9543 219.865C35.0491 230.431 42.5426 240.147 51.1852 248.79C59.8277 257.432 69.5693 264.926 80.1103 271.021C90.7011 277.14 102.041 281.836 113.806 284.984C125.546 288.131 137.711 289.705 150 289.705C162.289 289.705 174.454 288.106 186.194 284.984C197.984 281.836 209.324 277.14 219.89 271.021C230.456 264.926 240.172 257.432 248.815 248.79C257.457 240.147 264.951 230.406 271.046 219.865C277.165 209.274 281.861 197.934 285.009 186.169C288.156 174.429 289.73 162.264 289.73 149.975C289.73 137.711 288.131 125.521 285.009 113.781C281.861 101.991 277.165 90.6512 271.046 80.0853C264.951 69.5194 257.457 59.8028 248.815 51.1602C240.172 42.5177 230.431 35.0241 219.89 28.9294C209.299 22.8096 197.959 18.1137 186.194 14.9664C174.454 11.8441 162.264 10.2455 150 10.2455Z"
+        fill="#DEDEE5"
+      />
+      <path
+        d="M74.242 128.768C75.6907 128.768 77.1395 129.767 77.5641 131.216L85.4823 156.619L93.2006 131.016C93.5753 129.693 94.8992 128.743 96.223 128.743H98.8707C100.245 128.743 101.568 129.693 101.943 131.016L109.736 156.619L117.58 131.216C117.954 129.767 119.403 128.768 120.902 128.768H124.923C126.372 128.768 127.121 129.842 126.622 131.216L114.008 168.959C113.558 170.208 112.259 171.232 110.86 171.232H108.213C106.889 171.232 105.565 170.283 105.19 168.959L97.5968 144.48L89.9285 168.959C89.5538 170.283 88.2299 171.232 86.8561 171.232H84.2084C82.8845 171.232 81.5607 170.233 81.136 168.959L68.447 131.216C67.9474 129.842 68.6968 128.768 70.1955 128.768H74.242Z"
+        fill="#3D3E46"
+      />
+      <path
+        d="M134.89 128.768H161.192C162.691 128.768 163.765 129.842 163.765 131.341V134.488C163.765 135.937 162.691 137.061 161.192 137.061H141.284V145.679H157.795C159.244 145.679 160.368 146.753 160.368 148.202V151.349C160.368 152.848 159.244 153.922 157.795 153.922H141.284V162.989H161.492C162.991 162.989 164.065 164.063 164.065 165.512V168.659C164.065 170.108 162.991 171.232 161.492 171.232H134.89C133.441 171.232 132.317 170.108 132.317 168.659V131.341C132.317 129.842 133.441 128.768 134.89 128.768Z"
+        fill="#3D3E46"
+      />
+      <path
+        d="M172.857 128.768H176.679C178.127 128.768 179.251 129.842 179.251 131.341V162.989H197.511C198.959 162.989 200.083 164.063 200.083 165.512V168.659C200.083 170.108 198.959 171.232 197.511 171.232H172.857C171.408 171.232 170.284 170.108 170.284 168.659V131.341C170.284 129.842 171.408 128.768 172.857 128.768Z"
+        fill="#3D3E46"
+      />
+      <path
+        d="M208.426 128.768H212.248C213.697 128.768 214.821 129.842 214.821 131.341V162.989H233.08C234.529 162.989 235.653 164.063 235.653 165.512V168.659C235.653 170.108 234.529 171.232 233.08 171.232H208.426C206.977 171.232 205.853 170.108 205.853 168.659V131.341C205.853 129.842 207.002 128.768 208.426 128.768Z"
+        fill="#3D3E46"
+      />
+    </svg>
+  );
+};

package/client/components/icons/X.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface XProps {
+  className?: string;
+  color?: string;
+}
+
+export const X: React.FC<XProps> = ({ className = "", color = "#71747D" }) => {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(className)}
+    >
+      <path
+        d="M1 1L9 9"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 1L1 9"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/client/hooks/UseTabs.tsx

@@ -0,0 +1,35 @@
+import { useState, useCallback } from "react";
+
+export type Tab = {
+  label: string;
+  value: string;
+  subRoutes?: unknown;
+};
+
+interface UseTabsProps {
+  tabs: Tab[];
+  initialTabId: string;
+}
+
+export function useTabs({ tabs, initialTabId }: UseTabsProps) {
+  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    initialIndex >= 0 ? initialIndex : 0
+  );
+
+  const setSelectedTab = useCallback(([index, direction]: [number, number]) => {
+    setSelectedTabIndex(index);
+  }, []);
+
+  const selectedTab = tabs[selectedTabIndex] || tabs[0];
+
+  return {
+    tabProps: {
+      tabs,
+      selectedTabIndex,
+      setSelectedTab,
+    },
+    selectedTab,
+  };
+}
+

package/client/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/client/hooks/use-segmented-control.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface UseSegmentedControlOptions<T extends string> {
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+}
+
+export function useSegmentedControl<T extends string>({
+  value,
+  defaultValue,
+  onValueChange,
+}: UseSegmentedControlOptions<T>) {
+  const [internalValue, setInternalValue] = useState<T | undefined>(
+    value ?? defaultValue,
+  );
+
+  // Sync with controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const handleValueChange = useCallback(
+    (newValue: T) => {
+      if (value === undefined) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, onValueChange],
+  );
+
+  const currentValue = value ?? internalValue;
+
+  return {
+    value: currentValue,
+    onValueChange: handleValueChange,
+  };
+}
+

package/client/hooks/use-toast.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/client/pages/Index.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from "react";
+import { Button } from "../ui/Button";
+
+export default function Index() {
+  const commands = useMemo(
+    () => [
+      { label: "Start Storybook", cmd: "pnpm storybook" },
+      { label: "Build UI library", cmd: "pnpm build:ui" },
+    ],
+    [],
+  );
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(60%_80%_at_50%_-20%,hsl(252_95%_90%/.6),transparent_70%),linear-gradient(to_bottom_right,hsl(258_90%_98%),hsl(240_20%_98%))]">
+      <section className="px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl text-center">
+          <span className="inline-flex items-center gap-2 rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700 ring-1 ring-inset ring-violet-200">
+            React UI Library
+          </span>
+          <h1 className="mt-6 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl">
+            Elegant, composable components for modern apps
+          </h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
+            View and develop components in Storybook. Ship a reusable package
+            you can import like any other React library.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <Button size="lg" className="shadow-lg">
+              Open Storybook
+            </Button>
+            <Button variant="secondary" size="lg">
+              Install Library
+            </Button>
+          </div>
+          <div className="mx-auto mt-10 grid max-w-3xl grid-cols-1 gap-3 text-left sm:grid-cols-2">
+            {commands.map((c) => (
+              <div
+                key={c.cmd}
+                className="rounded-lg border bg-card/70 p-4 shadow-xs backdrop-blur-sm"
+              >
+                <p className="text-xs font-semibold text-muted-foreground">
+                  {c.label}
+                </p>
+                <code className="mt-1 block select-all rounded-md bg-foreground/95 px-3 py-2 font-mono text-[12px] text-background">
+                  {c.cmd}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-6 flex items-end justify-between">
+            <h2 className="text-left text-2xl font-bold text-foreground">
+              Button component
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Variants and sizes ready to use
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-6 rounded-xl border bg-card/60 p-6 shadow-xs backdrop-blur-sm md:grid-cols-2">
+            <div>
+              <h3 className="text-sm font-semibold text-foreground">
+                Variants
+              </h3>
+              <div className="mt-3 flex flex-wrap items-center gap-3">
+                <Button>Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="destructive">Destructive</Button>
+              </div>
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-foreground">Sizes</h3>
+              <div className="mt-3 flex flex-wrap items-center gap-3">
+                <Button size="sm">Small</Button>
+                <Button size="md">Medium</Button>
+                <Button size="lg">Large</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/client/pages/NotFound.tsx

@@ -0,0 +1,29 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error(
+      "404 Error: User attempted to access non-existent route:",
+      location.pathname,
+    );
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4 text-foreground">404</h1>
+        <p className="text-xl text-muted-foreground mb-4">
+          Oops! Page not found
+        </p>
+        <a href="/" className="text-primary hover:text-primary/80 underline">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;