refactored Authentication

src/workspaces/components/Card.tsx

@@ -16,7 +16,7 @@ type CardProps = ComponentPropsWithoutRef<'div'>;
 export const Card = ({ className, style, ...props }: CardProps) => {
   return (
     <div
-      className={cn('rounded-xl border-2 border-duck-dark/30 shadow-lg', className)}
+      className={cn('rounded-xl border-2 border-duck-dark/30 shadow-lg p-5', className)}
       style={cardStyle(style)}
       {...props}
     />

src/workspaces/components/Logos/DevSvgLogo.tsx

@@ -0,0 +1,23 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+export function OfficerIconLogo({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig[size];
+
+  return (
+    <img
+      src="/static/officer-icon-square.svg"
+      alt="Officer Icon"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  xs: { width: '120px' },
+  sm: { width: '200px' },
+  md: { width: '400px' },
+  lg: { width: '600px' },
+  xl: { width: '800px' },
+};

src/workspaces/components/Logos/PastilhasSvgLogo.tsx

@@ -0,0 +1,55 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  square?: boolean;
+};
+
+export function OfficerSvgLogo({ size = 'xl', square = false }: SvgLogoProps) {
+  if (square) {
+    return <OfficerSvgLogoSquare size={size} />;
+  }
+
+  return <OfficerSvgLogoRegular size={size} />;
+}
+
+export function OfficerSvgLogoRegular({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.regular[size];
+
+  return (
+    <img
+      src="/static/officer-logo.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+export function OfficerSvgLogoSquare({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.square[size];
+
+  return (
+    <img
+      src="/static/officer-logo-square.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  regular: {
+    xs: { width: '180px' },
+    sm: { width: '300px' },
+    md: { width: '600px' },
+    lg: { width: '900px' },
+    xl: { width: '1200px' },
+    '2xl': { width: '1500px' },
+  },
+  square: {
+    xs: { width: '120px' },
+    sm: { width: '200px' },
+    md: { width: '400px' },
+    lg: { width: '600px' },
+    xl: { width: '800px' },
+    '2xl': { width: '1000px' },
+  },
+};

src/workspaces/components/Logos/index.tsx

@@ -0,0 +1,2 @@
+export * from './PastilhasSvgLogo';
+export * from './DevSvgLogo';

src/workspaces/components/PixelGrid.tsx

@@ -0,0 +1,14 @@
+export function PixelGrid() {
+  return (
+    <div
+      className="fixed inset-0 pointer-events-none z-[500]"
+      style={{
+        backgroundImage: `
+          linear-gradient(to right, var(--pixel-grid-color) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--pixel-grid-color) 1px, transparent 1px)
+        `,
+        backgroundSize: '20px 20px',
+      }}
+    />
+  );
+}