@kala-ui/react 0.0.1-beta.6 → 0.0.1-beta.8

package/dist/styles/globals.css

@@ -25,8 +25,12 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -217,6 +221,9 @@
     container-type: inline-size;
     container-name: field-group;
   }
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -270,6 +277,9 @@
   .top-0 {
     top: 0;
   }
+  .top-1 {
+    top: 0.25rem;
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -306,6 +316,9 @@
   .right-0 {
     right: 0;
   }
+  .right-1 {
+    right: 0.25rem;
+  }
   .right-2 {
     right: 0.5rem;
   }
@@ -315,6 +328,9 @@
   .bottom-0 {
     bottom: 0;
   }
+  .bottom-1 {
+    bottom: 0.25rem;
+  }
   .bottom-2 {
     bottom: 0.5rem;
   }
@@ -336,6 +352,9 @@
   .left-2 {
     left: 0.5rem;
   }
+  .left-3 {
+    left: 0.75rem;
+  }
   .left-4 {
     left: 1rem;
   }
@@ -345,12 +364,12 @@
   .isolate {
     isolation: isolate;
   }
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
   .z-1 {
     z-index: 1;
   }
-  .z-2 {
-    z-index: 2;
-  }
   .z-10 {
     z-index: 10;
   }
@@ -375,21 +394,156 @@
   .order-2 {
     order: 2;
   }
+  .col-auto {
+    grid-column: auto;
+  }
   .col-span-1 {
     grid-column: span 1 / span 1;
   }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
   .col-start-2 {
     grid-column-start: 2;
   }
+  .col-start-3 {
+    grid-column-start: 3;
+  }
+  .col-start-4 {
+    grid-column-start: 4;
+  }
+  .col-start-5 {
+    grid-column-start: 5;
+  }
+  .col-start-6 {
+    grid-column-start: 6;
+  }
+  .col-start-7 {
+    grid-column-start: 7;
+  }
+  .col-start-8 {
+    grid-column-start: 8;
+  }
+  .col-start-9 {
+    grid-column-start: 9;
+  }
+  .col-start-10 {
+    grid-column-start: 10;
+  }
+  .col-start-11 {
+    grid-column-start: 11;
+  }
+  .col-start-12 {
+    grid-column-start: 12;
+  }
+  .col-start-13 {
+    grid-column-start: 13;
+  }
+  .col-start-auto {
+    grid-column-start: auto;
+  }
+  .col-end-1 {
+    grid-column-end: 1;
+  }
+  .col-end-2 {
+    grid-column-end: 2;
+  }
+  .col-end-3 {
+    grid-column-end: 3;
+  }
+  .col-end-4 {
+    grid-column-end: 4;
+  }
+  .col-end-5 {
+    grid-column-end: 5;
+  }
+  .col-end-6 {
+    grid-column-end: 6;
+  }
+  .col-end-7 {
+    grid-column-end: 7;
+  }
+  .col-end-8 {
+    grid-column-end: 8;
+  }
+  .col-end-9 {
+    grid-column-end: 9;
+  }
+  .col-end-10 {
+    grid-column-end: 10;
+  }
+  .col-end-11 {
+    grid-column-end: 11;
+  }
+  .col-end-12 {
+    grid-column-end: 12;
+  }
+  .col-end-13 {
+    grid-column-end: 13;
+  }
+  .col-end-auto {
+    grid-column-end: auto;
+  }
+  .row-auto {
+    grid-row: auto;
+  }
+  .row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .row-span-2 {
+    grid-row: span 2 / span 2;
+  }
   .row-span-3 {
     grid-row: span 3 / span 3;
   }
+  .row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
   .container {
     width: 100%;
     @media (width >= 320px) {
@@ -469,6 +623,9 @@
   .my-4 {
     margin-block: 1rem;
   }
+  .-mt-1 {
+    margin-top: calc(0.25rem * -1);
+  }
   .-mt-px {
     margin-top: -1px;
   }
@@ -724,6 +881,9 @@
   .h-1\.5 {
     height: 0.375rem;
   }
+  .h-1\/2 {
+    height: calc(1/2 * 100%);
+  }
   .h-2 {
     height: 0.5rem;
   }
@@ -799,6 +959,9 @@
   .h-\[200px\] {
     height: 200px;
   }
+  .h-\[200vh\] {
+    height: 200vh;
+  }
   .h-\[300px\] {
     height: 300px;
   }
@@ -1007,6 +1170,9 @@
   .w-\[2px\] {
     width: 2px;
   }
+  .w-\[70px\] {
+    width: 70px;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -1118,6 +1284,24 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-none {
+    max-width: none;
+  }
+  .max-w-screen-2xl {
+    max-width: 1536px;
+  }
+  .max-w-screen-lg {
+    max-width: 1024px;
+  }
+  .max-w-screen-md {
+    max-width: 768px;
+  }
+  .max-w-screen-sm {
+    max-width: 640px;
+  }
+  .max-w-screen-xl {
+    max-width: 1280px;
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -1151,6 +1335,21 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[16px\] {
+    min-width: 16px;
+  }
+  .min-w-\[20px\] {
+    min-width: 20px;
+  }
+  .min-w-\[24px\] {
+    min-width: 24px;
+  }
+  .min-w-\[28px\] {
+    min-width: 28px;
+  }
+  .min-w-\[70px\] {
+    min-width: 70px;
+  }
   .min-w-\[120px\] {
     min-width: 120px;
   }
@@ -1163,12 +1362,24 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .flex-grow-0 {
+    flex-grow: 0;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -1222,10 +1433,22 @@
     --tw-translate-x: 0;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1/2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-50\%\] {
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[3px\] {
+    --tw-translate-x: 3px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1238,6 +1461,10 @@
     --tw-translate-y: 0.125rem;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-1\/2 {
+    --tw-translate-y: calc(1/2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-\[-50\%\] {
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1260,6 +1487,9 @@
   .rotate-45 {
     rotate: 45deg;
   }
+  .rotate-90 {
+    rotate: 90deg;
+  }
   .rotate-180 {
     rotate: 180deg;
   }
@@ -1325,6 +1555,18 @@
        -moz-appearance: none;
             appearance: none;
   }
+  .grid-flow-col {
+    grid-auto-flow: column;
+  }
+  .grid-flow-col-dense {
+    grid-auto-flow: column dense;
+  }
+  .grid-flow-row {
+    grid-auto-flow: row;
+  }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
   .auto-rows-fr {
     grid-auto-rows: minmax(0, 1fr);
   }
@@ -1340,12 +1582,36 @@
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .grid-cols-\[0_1fr\] {
     grid-template-columns: 0 1fr;
   }
+  .grid-cols-none {
+    grid-template-columns: none;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1355,9 +1621,21 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -1370,6 +1648,9 @@
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1379,6 +1660,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1400,6 +1684,9 @@
   .gap-4 {
     gap: 1rem;
   }
+  .gap-5 {
+    gap: 1.25rem;
+  }
   .gap-6 {
     gap: 1.5rem;
   }
@@ -1409,6 +1696,15 @@
   .gap-8 {
     gap: 2rem;
   }
+  .gap-10 {
+    gap: 2.5rem;
+  }
+  .gap-12 {
+    gap: 3rem;
+  }
+  .gap-16 {
+    gap: 4rem;
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1472,13 +1768,6 @@
       margin-inline-end: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(0.5rem * var(--tw-space-x-reverse));
-      margin-inline-end: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1589,10 +1878,6 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
   }
-  .border-x-2 {
-    border-inline-style: var(--tw-border-style);
-    border-inline-width: 2px;
-  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
@@ -1637,6 +1922,10 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -1647,6 +1936,9 @@
   .border-accent {
     border-color: hsl(var(--accent));
   }
+  .border-background {
+    border-color: hsl(var(--background));
+  }
   .border-black\/5 {
     border-color: color-mix(in srgb, #000 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1677,6 +1969,9 @@
   .border-foreground {
     border-color: hsl(var(--foreground));
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-info {
     border-color: hsl(var(--info));
   }
@@ -1692,6 +1987,9 @@
   .border-input {
     border-color: hsl(var(--input));
   }
+  .border-muted {
+    border-color: hsl(var(--muted));
+  }
   .border-muted-foreground {
     border-color: hsl(var(--muted-foreground));
   }
@@ -1776,6 +2074,12 @@
   .bg-background {
     background-color: hsl(var(--background));
   }
+  .bg-background\/80 {
+    background-color: hsl(var(--background));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--background)) 80%, transparent);
+    }
+  }
   .bg-background\/90 {
     background-color: hsl(var(--background));
     @supports (color: color-mix(in lab, red, red)) {
@@ -1812,6 +2116,9 @@
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
   .bg-border {
     background-color: hsl(var(--border) / var(--border-alpha, 1));
   }
@@ -1845,6 +2152,15 @@
   .bg-foreground {
     background-color: hsl(var(--foreground));
   }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-info {
     background-color: hsl(var(--info));
   }
@@ -1947,6 +2263,9 @@
       background-color: color-mix(in oklab, hsl(var(--warning)) 10%, transparent);
     }
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-linear-to-b {
     --tw-gradient-position: to bottom;
     @supports (background-image: linear-gradient(in lab, red, red)) {
@@ -2213,6 +2532,9 @@
   .px-0 {
     padding-inline: 0;
   }
+  .px-1 {
+    padding-inline: 0.25rem;
+  }
   .px-1\.5 {
     padding-inline: 0.375rem;
   }
@@ -2321,6 +2643,9 @@
   .pl-3 {
     padding-left: 0.75rem;
   }
+  .pl-4 {
+    padding-left: 1rem;
+  }
   .pl-8 {
     padding-left: 2rem;
   }
@@ -2330,12 +2655,21 @@
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
+  .text-justify {
+    text-align: justify;
+  }
   .text-left {
     text-align: left;
   }
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -2354,10 +2688,26 @@
     font-size: 2.25rem;
     line-height: var(--tw-leading, 2.5rem);
   }
+  .text-5xl {
+    font-size: 3rem;
+    line-height: var(--tw-leading, 1);
+  }
   .text-6xl {
     font-size: 3.75rem;
     line-height: var(--tw-leading, 1);
   }
+  .text-7xl {
+    font-size: 4.5rem;
+    line-height: var(--tw-leading, 1);
+  }
+  .text-8xl {
+    font-size: 6rem;
+    line-height: var(--tw-leading, 1);
+  }
+  .text-9xl {
+    font-size: 8rem;
+    line-height: var(--tw-leading, 1);
+  }
   .text-base {
     font-size: 1rem;
     line-height: var(--tw-leading, 1.5rem);
@@ -2407,10 +2757,26 @@
     --tw-leading: 1.25;
     line-height: 1.25;
   }
+  .font-black {
+    --tw-font-weight: 900;
+    font-weight: 900;
+  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
   }
+  .font-extrabold {
+    --tw-font-weight: 800;
+    font-weight: 800;
+  }
+  .font-extralight {
+    --tw-font-weight: 200;
+    font-weight: 200;
+  }
+  .font-light {
+    --tw-font-weight: 300;
+    font-weight: 300;
+  }
   .font-medium {
     --tw-font-weight: 500;
     font-weight: 500;
@@ -2423,6 +2789,10 @@
     --tw-font-weight: 600;
     font-weight: 600;
   }
+  .font-thin {
+    --tw-font-weight: 100;
+    font-weight: 100;
+  }
   .tracking-tight {
     --tw-tracking: -0.025em;
     letter-spacing: -0.025em;
@@ -2452,6 +2822,9 @@
   .text-background {
     color: hsl(var(--background));
   }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-blue-600 {
     color: var(--color-blue-600);
   }
@@ -2506,6 +2879,15 @@
   .text-gray-300 {
     color: var(--color-gray-300);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
   .text-info {
     color: hsl(var(--info));
   }
@@ -2518,6 +2900,9 @@
       color: color-mix(in oklab, hsl(var(--info-foreground)) 80%, transparent);
     }
   }
+  .text-muted {
+    color: hsl(var(--muted));
+  }
   .text-muted-foreground {
     color: hsl(var(--muted-foreground));
   }
@@ -2527,6 +2912,9 @@
       color: color-mix(in oklab, hsl(var(--muted-foreground)) 60%, transparent);
     }
   }
+  .text-orange-500 {
+    color: var(--color-orange-500);
+  }
   .text-popover-foreground {
     color: hsl(var(--popover-foreground));
   }
@@ -2542,6 +2930,9 @@
       color: color-mix(in oklab, hsl(var(--primary-foreground)) 80%, transparent);
     }
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .text-secondary {
     color: hsl(var(--secondary));
   }
@@ -2701,6 +3092,9 @@
   .ring-primary {
     --tw-ring-color: hsl(var(--primary));
   }
+  .ring-offset-background {
+    --tw-ring-offset-color: hsl(var(--background));
+  }
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -2747,6 +3141,9 @@
     --tw-backdrop-blur: blur(var(--blur-sm));
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3565,134 +3962,134 @@
       }
     }
   }
-  .hover\:border-\[\#0A66C2\] {
+  .hover\:border-border {
     &:hover {
       @media (hover: hover) {
-        border-color: #0A66C2;
+        border-color: hsl(var(--border) / var(--border-alpha, 1));
       }
     }
   }
-  .hover\:border-\[\#1877F2\] {
+  .hover\:border-brand-facebook {
     &:hover {
       @media (hover: hover) {
         border-color: #1877F2;
       }
     }
   }
-  .hover\:border-\[\#4285F4\] {
+  .hover\:border-brand-github {
     &:hover {
       @media (hover: hover) {
-        border-color: #4285F4;
+        border-color: #181717;
       }
     }
   }
-  .hover\:border-\[\#181717\] {
+  .hover\:border-brand-google {
     &:hover {
       @media (hover: hover) {
-        border-color: #181717;
+        border-color: #4285F4;
       }
     }
   }
-  .hover\:border-black {
+  .hover\:border-brand-linkedin {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-black);
+        border-color: #0A66C2;
       }
     }
   }
-  .hover\:border-border {
+  .hover\:border-brand-twitter {
     &:hover {
       @media (hover: hover) {
-        border-color: hsl(var(--border) / var(--border-alpha, 1));
+        border-color: #1DA1F2;
       }
     }
   }
-  .hover\:bg-\[\#0A66C2\] {
+  .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: #0A66C2;
+        background-color: hsl(var(--accent));
       }
     }
   }
-  .hover\:bg-\[\#1877F2\] {
+  .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: #1877F2;
+        background-color: hsl(var(--accent));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[\#4285F4\] {
+  .hover\:bg-accent\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: #4285F4;
+        background-color: hsl(var(--accent));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, hsl(var(--accent)) 80%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[\#181717\] {
+  .hover\:bg-background {
     &:hover {
       @media (hover: hover) {
-        background-color: #181717;
+        background-color: hsl(var(--background));
       }
     }
   }
-  .hover\:bg-accent {
+  .hover\:bg-black\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: hsl(var(--accent));
+        background-color: color-mix(in srgb, #000 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-accent\/50 {
+  .hover\:bg-border\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: hsl(var(--accent));
+        background-color: hsl(var(--border) / var(--border-alpha, 1));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
+          background-color: color-mix(in oklab, hsl(var(--border) / var(--border-alpha, 1)) 80%, transparent);
         }
       }
     }
   }
-  .hover\:bg-accent\/80 {
+  .hover\:bg-brand-facebook {
     &:hover {
       @media (hover: hover) {
-        background-color: hsl(var(--accent));
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, hsl(var(--accent)) 80%, transparent);
-        }
+        background-color: #1877F2;
       }
     }
   }
-  .hover\:bg-background {
+  .hover\:bg-brand-github {
     &:hover {
       @media (hover: hover) {
-        background-color: hsl(var(--background));
+        background-color: #181717;
       }
     }
   }
-  .hover\:bg-black {
+  .hover\:bg-brand-google {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-black);
+        background-color: #4285F4;
       }
     }
   }
-  .hover\:bg-black\/10 {
+  .hover\:bg-brand-linkedin {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #000 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-        }
+        background-color: #0A66C2;
       }
     }
   }
-  .hover\:bg-border\/80 {
+  .hover\:bg-brand-twitter {
     &:hover {
       @media (hover: hover) {
-        background-color: hsl(var(--border) / var(--border-alpha, 1));
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, hsl(var(--border) / var(--border-alpha, 1)) 80%, transparent);
-        }
+        background-color: #1DA1F2;
       }
     }
   }
@@ -4034,6 +4431,20 @@
       }
     }
   }
+  .hover\:opacity-80 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+  }
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
+      }
+    }
+  }
   .hover\:opacity-100 {
     &:hover {
       @media (hover: hover) {
@@ -4217,6 +4628,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:ring-\[3px\] {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4236,6 +4653,12 @@
       }
     }
   }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus-visible\:outline-1 {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -5489,6 +5912,11 @@
       padding: 1.5rem;
     }
   }
+  .md\:px-6 {
+    @media (width >= 768px) {
+      padding-inline: 1.5rem;
+    }
+  }
   .md\:py-12 {
     @media (width >= 768px) {
       padding-block: 3rem;
@@ -5534,6 +5962,18 @@
       width: 600px;
     }
   }
+  .lg\:-translate-x-full {
+    @media (width >= 1024px) {
+      --tw-translate-x: -100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .lg\:translate-x-full {
+    @media (width >= 1024px) {
+      --tw-translate-x: 100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .lg\:grid-cols-3 {
     @media (width >= 1024px) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -5554,14 +5994,38 @@
       gap: 0.75rem;
     }
   }
-  .lg\:gap-6 {
+  .lg\:px-6 {
     @media (width >= 1024px) {
-      gap: 1.5rem;
+      padding-inline: 1.5rem;
     }
   }
-  .lg\:px-6 {
+  .lg\:px-8 {
     @media (width >= 1024px) {
-      padding-inline: 1.5rem;
+      padding-inline: 2rem;
+    }
+  }
+  .lg\:text-2xl {
+    @media (width >= 1024px) {
+      font-size: 1.5rem;
+      line-height: var(--tw-leading, 2rem);
+    }
+  }
+  .lg\:text-3xl {
+    @media (width >= 1024px) {
+      font-size: 1.875rem;
+      line-height: var(--tw-leading, 2.25rem);
+    }
+  }
+  .lg\:text-4xl {
+    @media (width >= 1024px) {
+      font-size: 2.25rem;
+      line-height: var(--tw-leading, 2.5rem);
+    }
+  }
+  .lg\:text-5xl {
+    @media (width >= 1024px) {
+      font-size: 3rem;
+      line-height: var(--tw-leading, 1);
     }
   }
   .lg\:text-base {
@@ -5570,6 +6034,18 @@
       line-height: var(--tw-leading, 1.5rem);
     }
   }
+  .lg\:text-lg {
+    @media (width >= 1024px) {
+      font-size: 1.125rem;
+      line-height: var(--tw-leading, 1.75rem);
+    }
+  }
+  .lg\:text-xl {
+    @media (width >= 1024px) {
+      font-size: 1.25rem;
+      line-height: var(--tw-leading, 1.75rem);
+    }
+  }
   .xl\:w-64 {
     @media (width >= 1280px) {
       width: 16rem;
@@ -5612,6 +6088,14 @@
       border-color: var(--color-blue-800);
     }
   }
+  .dark\:bg-blue-900\/30 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-blue-950 {
     &:is(.dark *) {
       background-color: var(--color-blue-950);