first commit

frontend/src/components/layout/header/LoginButton.astro

@@ -0,0 +1,98 @@
+---
+export interface Props {
+  href?: string;
+  variant?: 'outline' | 'primary';
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+}
+
+const {
+  href = '/login',
+  variant = 'outline',
+  size = 'md',
+  class: className = '',
+}: Props = Astro.props;
+
+const baseClasses = 'login-btn inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer';
+
+const variantClasses = {
+  primary: 'bg-primary text-white hover:bg-primary-dark',
+  outline: 'border-2 border-[#1e3050] text-[#1e3050] hover:bg-[#1e3050] hover:text-white',
+};
+
+const sizeClasses = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-base',
+  lg: 'px-6 py-3 text-lg',
+};
+
+const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+---
+
+<a href={href} class={classes}>
+  <div class="login-content">
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="login-icon">
+      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
+      <polyline points="10 17 15 12 10 7"></polyline>
+      <line x1="15" y1="12" x2="3" y2="12"></line>
+    </svg>
+    <span class="login-text">Вход</span>
+  </div>
+</a>
+
+<style>
+  .login-btn {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+    text-decoration: none;
+  }
+
+  .login-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .login-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    transition: left 0.5s ease;
+  }
+
+  .login-btn:hover::before {
+    left: 100%;
+  }
+
+  .login-btn:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  .login-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  }
+
+  .login-icon {
+    transition: transform 0.3s ease;
+  }
+
+  .login-btn:hover .login-icon {
+    transform: translateX(3px);
+  }
+
+  .login-text {
+    white-space: nowrap;
+  }
+</style>