feat: first draft

app/globals.css

@@ -0,0 +1,193 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 190 95% 95%;
+    --foreground: 200 50% 3%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 200 50% 3%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 200 50% 3%;
+
+    --primary: 190 100% 50%; /* Bright cyan */
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 185 100% 85%;
+    --secondary-foreground: 200 50% 3%;
+
+    --muted: 185 35% 88%;
+    --muted-foreground: 200 40% 40%;
+
+    --accent: 170 85% 45%; /* Bold turquoise */
+    --accent-foreground: 200 50% 3%;
+
+    --destructive: 345 84% 60%; /* Coral red */
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 190 95% 85%;
+    --input: 190 95% 85%;
+    --ring: 190 100% 50%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 200 50% 3%;
+    --foreground: 210 40% 98%;
+
+    --card: 200 50% 3%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 200 50% 3%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 190 100% 50%;
+    --primary-foreground: 200 50% 3%;
+
+    --secondary: 200 34% 20%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 200 34% 20%;
+    --muted-foreground: 200 40% 60%;
+
+    --accent: 170 85% 45%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 345 62% 40%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 200 34% 20%;
+    --input: 200 34% 20%;
+    --ring: 190 100% 50%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    background: linear-gradient(
+      180deg,
+      hsl(190 95% 95%) 0%,
+      hsl(185 90% 92%) 100%
+    );
+    min-height: 100vh;
+  }
+
+  /* Animated waves for the header */
+  @keyframes wave {
+    0% {
+      transform: translateX(0) translateZ(0) scaleY(1);
+    }
+    50% {
+      transform: translateX(-25%) translateZ(0) scaleY(0.8);
+    }
+    100% {
+      transform: translateX(-50%) translateZ(0) scaleY(1);
+    }
+  }
+
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translateY(-12px);
+    }
+    50% {
+      transform: translateY(12px);
+    }
+  }
+
+  .wave {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 88.7' width='800' height='88.7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23ffffff33'/%3E%3C/svg%3E");
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    animation: wave 12s linear infinite;
+    transform-origin: center bottom;
+  }
+
+  .wave-2 {
+    animation: wave 18s linear reverse infinite;
+    opacity: 0.5;
+  }
+
+  .wave-3 {
+    animation: wave 20s linear infinite;
+    opacity: 0.2;
+  }
+
+  .swell {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: swell 7s ease -1.25s infinite;
+    transform-origin: center bottom;
+  }
+
+  /* Glass effect for cards */
+  .glass-card {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
+  }
+
+  .dark .glass-card {
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* Gradient borders */
+  .gradient-border {
+    position: relative;
+    border: none;
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    padding: 2px;
+    background: linear-gradient(
+      45deg,
+      hsl(190 100% 50%),
+      hsl(170 85% 45%),
+      hsl(190 100% 50%)
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+}
+
+.tabs-list {
+  @apply inline-flex h-12 items-center justify-center rounded-lg bg-white p-1 shadow-lg dark:bg-gray-800/50 backdrop-blur-sm;
+}
+
+.tab {
+  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300;
+}
+
+.tab[data-state='active'] {
+  @apply bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-sm;
+}
+
+.tab[data-state='inactive'] {
+  @apply text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-50;
+}