-
-
- Blockchain Secured
- Tamper-proof license records
-
+
+
+
+
+
+
+
Instant Verification
-
-
-
-
- Instant Verification
- Real-time license validity
-
+
-
-
-
-
- Multi-Dept Workflow
- Streamlined approvals
-
+
-
-
-
-
Hyperledger Besu Network
-
Live
+
+
+
+
+
+
+
100% Paperless Process
+
+
+
+
+
+
Apply Anytime, Anywhere
+
+
+
+
+
+
Real-time Status Tracking
+
-
-
-
diff --git a/frontend/src/app/layouts/auth-layout/auth-layout.component.scss b/frontend/src/app/layouts/auth-layout/auth-layout.component.scss
index c6b74e8..be0e811 100644
--- a/frontend/src/app/layouts/auth-layout/auth-layout.component.scss
+++ b/frontend/src/app/layouts/auth-layout/auth-layout.component.scss
@@ -1,19 +1,21 @@
// =============================================================================
-// AUTH LAYOUT - World-Class Blockchain Login Experience
-// DBIM v3.0 Compliant | GIGW 3.0 Accessible
+// GOA GEL LANDING PAGE - World-Class Blockchain Government Portal
+// Immersive, Graphical, Premium Design
// =============================================================================
-// Skip Link (GIGW 3.0)
+// Skip Link (GIGW 3.0 Accessibility)
.skip-link {
position: absolute;
- top: -40px;
- left: 0;
- background: var(--dbim-blue-dark);
+ top: -50px;
+ left: 16px;
+ background: #1D0A69;
color: white;
- padding: 8px 16px;
+ padding: 12px 24px;
text-decoration: none;
- z-index: 1000;
+ z-index: 10000;
+ border-radius: 0 0 8px 8px;
font-size: 14px;
+ font-weight: 500;
&:focus {
top: 0;
@@ -21,438 +23,638 @@
}
// =============================================================================
-// LAYOUT
+// MAIN CONTAINER
// =============================================================================
-.auth-layout {
+.landing-page {
min-height: 100vh;
- display: flex;
+ width: 100%;
position: relative;
overflow: hidden;
- background: linear-gradient(135deg, #0a0520 0%, #1D0A69 50%, #130640 100%);
+ background: #050208;
}
// =============================================================================
-// ANIMATED BACKGROUND
+// HERO BACKGROUND - Immersive Blockchain Visualization
// =============================================================================
-.animated-background {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+.hero-background {
+ position: fixed;
+ inset: 0;
pointer-events: none;
z-index: 0;
}
-// Floating Blockchain Nodes
-.node {
+// Animated Gradient Mesh
+.gradient-mesh {
position: absolute;
- width: 12px;
- height: 12px;
- background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
+ inset: 0;
+ background:
+ // Primary gradient orbs
+ radial-gradient(ellipse 80% 50% at 10% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 50%),
+ radial-gradient(ellipse 60% 40% at 90% 80%, rgba(168, 85, 247, 0.2) 0%, transparent 50%),
+ radial-gradient(ellipse 50% 60% at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
+ radial-gradient(ellipse 70% 50% at 80% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 45%),
+ // Base gradient
+ linear-gradient(135deg, #050208 0%, #0f0525 25%, #1a0840 50%, #120630 75%, #050208 100%);
+ animation: meshMove 30s ease-in-out infinite;
+}
+
+@keyframes meshMove {
+ 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 0% 0%; }
+ 50% { background-position: 100% 100%, 0% 0%, 30% 70%, 20% 80%, 0% 0%; }
+}
+
+// =============================================================================
+// BLOCKCHAIN NETWORK VISUALIZATION
+// =============================================================================
+.blockchain-network {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+}
+
+// Blockchain Nodes
+.bc-node {
+ position: absolute;
+ left: var(--x);
+ top: var(--y);
+ width: var(--size);
+ height: var(--size);
border-radius: 50%;
- box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.3);
- animation: float 6s ease-in-out infinite;
+ animation: nodeFloat 8s ease-in-out infinite;
+ animation-delay: var(--delay);
+
+ &.primary {
+ background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
+ box-shadow:
+ 0 0 20px rgba(129, 140, 248, 0.6),
+ 0 0 40px rgba(129, 140, 248, 0.3),
+ 0 0 60px rgba(129, 140, 248, 0.15),
+ inset 0 0 10px rgba(255, 255, 255, 0.3);
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: -8px;
+ border-radius: 50%;
+ border: 1px solid rgba(129, 140, 248, 0.4);
+ animation: nodePulse 3s ease-out infinite;
+ animation-delay: var(--delay);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: -16px;
+ border-radius: 50%;
+ border: 1px solid rgba(129, 140, 248, 0.2);
+ animation: nodePulse 3s ease-out infinite 0.5s;
+ }
+ }
+
+ &.secondary {
+ background: linear-gradient(135deg, rgba(129, 140, 248, 0.6) 0%, rgba(167, 139, 250, 0.4) 100%);
+ box-shadow:
+ 0 0 15px rgba(129, 140, 248, 0.4),
+ 0 0 30px rgba(129, 140, 248, 0.2);
+ }
+}
+
+@keyframes nodeFloat {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 25% { transform: translate(15px, -20px) scale(1.05); }
+ 50% { transform: translate(-10px, 10px) scale(0.98); }
+ 75% { transform: translate(20px, 15px) scale(1.02); }
+}
+
+@keyframes nodePulse {
+ 0% { transform: scale(1); opacity: 0.8; }
+ 100% { transform: scale(2.5); opacity: 0; }
+}
+
+// Network Connection Lines
+.network-connections {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.connection-line {
+ fill: none;
+ stroke: url(#lineGrad1);
+ stroke-width: 0.3;
+ stroke-linecap: round;
+ opacity: 0.6;
+ animation: lineGlow 4s ease-in-out infinite;
+
+ &.secondary {
+ stroke: url(#lineGrad2);
+ stroke-width: 0.2;
+ opacity: 0.4;
+ animation-delay: 2s;
+ }
+}
+
+@keyframes lineGlow {
+ 0%, 100% { opacity: 0.4; stroke-width: 0.2; }
+ 50% { opacity: 0.8; stroke-width: 0.4; }
+}
+
+// Data Packets (moving dots)
+.data-packet {
+ fill: #10B981;
+ filter: drop-shadow(0 0 4px #10B981) drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
+}
+
+// =============================================================================
+// FLOATING PARTICLES
+// =============================================================================
+.particles {
+ position: absolute;
+ inset: 0;
+}
+
+.particle {
+ position: absolute;
+ left: var(--x);
+ top: var(--y);
+ width: 3px;
+ height: 3px;
+ background: rgba(255, 255, 255, 0.4);
+ border-radius: 50%;
+ animation: particleFloat var(--duration) linear infinite;
&::before {
content: '';
position: absolute;
+ width: 100%;
+ height: 100%;
+ background: inherit;
+ border-radius: 50%;
+ filter: blur(2px);
+ }
+}
+
+@keyframes particleFloat {
+ 0% { transform: translate(0, 0) scale(1); opacity: 0; }
+ 10% { opacity: 0.6; }
+ 50% { transform: translate(100px, -150px) scale(0.5); opacity: 0.3; }
+ 90% { opacity: 0.6; }
+ 100% { transform: translate(0, 0) scale(1); opacity: 0; }
+}
+
+// =============================================================================
+// AMBIENT LIGHT EFFECTS
+// =============================================================================
+.ambient-light {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(100px);
+ pointer-events: none;
+
+ &.light-1 {
+ width: 600px;
+ height: 600px;
+ background: rgba(99, 102, 241, 0.15);
+ top: -200px;
+ left: -200px;
+ animation: ambientMove1 20s ease-in-out infinite;
+ }
+
+ &.light-2 {
+ width: 500px;
+ height: 500px;
+ background: rgba(168, 85, 247, 0.12);
+ bottom: -150px;
+ right: -150px;
+ animation: ambientMove2 25s ease-in-out infinite;
+ }
+
+ &.light-3 {
+ width: 400px;
+ height: 400px;
+ background: rgba(16, 185, 129, 0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 24px;
- height: 24px;
- border: 1px solid rgba(99, 102, 241, 0.3);
- border-radius: 50%;
- animation: pulse-ring 2s ease-out infinite;
+ animation: ambientMove3 30s ease-in-out infinite;
}
}
-.node-1 {
- top: 20%;
- left: 15%;
- animation-delay: 0s;
+@keyframes ambientMove1 {
+ 0%, 100% { transform: translate(0, 0); }
+ 50% { transform: translate(100px, 50px); }
}
-.node-2 {
- top: 30%;
- left: 45%;
- animation-delay: 1s;
- width: 16px;
- height: 16px;
+@keyframes ambientMove2 {
+ 0%, 100% { transform: translate(0, 0); }
+ 50% { transform: translate(-80px, -60px); }
}
-.node-3 {
- top: 15%;
- right: 20%;
- animation-delay: 2s;
-}
-
-.node-4 {
- bottom: 30%;
- right: 25%;
- animation-delay: 1.5s;
- width: 10px;
- height: 10px;
-}
-
-.node-5 {
- bottom: 25%;
- left: 25%;
- animation-delay: 0.5s;
-}
-
-.node-6 {
- top: 50%;
- left: 35%;
- animation-delay: 2.5s;
- width: 8px;
- height: 8px;
-}
-
-// Connection Lines
-.connections {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0.3;
-}
-
-.connection {
- stroke: rgba(99, 102, 241, 0.4);
- stroke-width: 0.1;
- stroke-dasharray: 2 2;
- animation: dash 20s linear infinite;
-}
-
-// Gradient Overlay
-.gradient-overlay {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background:
- radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
- radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
- radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
+@keyframes ambientMove3 {
+ 0%, 100% { transform: translate(-50%, -50%) scale(1); }
+ 50% { transform: translate(-40%, -60%) scale(1.2); }
}
// =============================================================================
-// MAIN CONTAINER
+// LANDING CONTENT
// =============================================================================
-.auth-container {
- display: flex;
- width: 100%;
- min-height: 100vh;
+.landing-content {
position: relative;
z-index: 1;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
// =============================================================================
-// LEFT SIDE - BRANDING
+// TOP NAVIGATION
// =============================================================================
-.auth-branding {
- flex: 1;
+.top-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 48px;
+ background: rgba(5, 2, 8, 0.6);
+ backdrop-filter: blur(20px);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.nav-brand {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.emblem-container {
+ width: 48px;
+ height: 48px;
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
+ border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
- padding: 48px;
- position: relative;
-
- @media (max-width: 1024px) {
- display: none;
- }
-}
-
-.branding-content {
- max-width: 480px;
- color: white;
- animation: fadeInUp 0.6s ease-out;
-}
-
-.emblem-wrapper {
- width: 80px;
- height: 80px;
- background: rgba(255, 255, 255, 0.1);
- border-radius: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 32px;
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.1);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+ border: 1px solid rgba(99, 102, 241, 0.3);
.goa-emblem {
- width: 56px;
- height: 56px;
+ width: 32px;
+ height: 32px;
filter: brightness(0) invert(1);
+ opacity: 0.9;
}
}
-.brand-title {
- margin: 0 0 16px;
-
- .title-line {
- display: block;
- font-size: 16px;
- font-weight: 500;
- color: rgba(255, 255, 255, 0.7);
- letter-spacing: 0.05em;
- text-transform: uppercase;
- margin-bottom: 8px;
- }
-
- .title-highlight {
- display: block;
- font-size: 36px;
- font-weight: 700;
- background: linear-gradient(135deg, #FFFFFF 0%, #A5B4FC 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- line-height: 1.2;
- }
-}
-
-.brand-tagline {
- font-size: 18px;
- color: rgba(255, 255, 255, 0.6);
- margin: 0 0 48px;
- font-weight: 400;
-}
-
-// Features Grid
-.features-grid {
+.brand-text {
display: flex;
flex-direction: column;
- gap: 20px;
- margin-bottom: 48px;
-}
+ gap: 2px;
-.feature-item {
- display: flex;
- align-items: flex-start;
- gap: 16px;
- padding: 16px;
- background: rgba(255, 255, 255, 0.05);
- border-radius: 12px;
- border: 1px solid rgba(255, 255, 255, 0.08);
- backdrop-filter: blur(5px);
- transition: all 0.2s ease;
-
- &:hover {
- background: rgba(255, 255, 255, 0.08);
- transform: translateX(4px);
- }
-}
-
-.feature-icon {
- width: 44px;
- height: 44px;
- background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
- border-radius: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
-
- svg {
- width: 24px;
- height: 24px;
- color: #A5B4FC;
- }
-}
-
-.feature-text {
- display: flex;
- flex-direction: column;
- gap: 4px;
-
- .feature-title {
+ .brand-name {
font-size: 15px;
font-weight: 600;
color: white;
+ letter-spacing: 0.02em;
}
- .feature-desc {
- font-size: 13px;
- color: rgba(255, 255, 255, 0.5);
+ .brand-subtitle {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.6);
+ font-weight: 400;
}
}
-// Network Status
-.network-status {
+.nav-status {
+ .status-indicator {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 18px;
+ background: rgba(16, 185, 129, 0.1);
+ border-radius: 50px;
+ border: 1px solid rgba(16, 185, 129, 0.2);
+ }
+
+ .status-dot {
+ width: 8px;
+ height: 8px;
+ background: #10B981;
+ border-radius: 50%;
+ box-shadow: 0 0 8px #10B981, 0 0 16px rgba(16, 185, 129, 0.5);
+ animation: statusBlink 2s ease-in-out infinite;
+ }
+
+ .status-label {
+ font-size: 12px;
+ color: #34d399;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+}
+
+@keyframes statusBlink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.6; }
+}
+
+// =============================================================================
+// HERO SECTION
+// =============================================================================
+.hero-section {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 1fr minmax(400px, 480px);
+ gap: 40px;
+ padding: 40px 48px;
+ align-items: center;
+ width: 100%;
+
+ @media (max-width: 1024px) {
+ grid-template-columns: 1fr;
+ gap: 40px;
+ padding: 32px;
+ text-align: center;
+ }
+
+ @media (max-width: 600px) {
+ padding: 20px;
+ gap: 28px;
+ }
+}
+
+// =============================================================================
+// HERO CONTENT (Left Side)
+// =============================================================================
+.hero-content {
+ animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hero-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 18px;
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
+ border-radius: 50px;
+ border: 1px solid rgba(99, 102, 241, 0.3);
+ margin-bottom: 28px;
+
+ svg {
+ width: 18px;
+ height: 18px;
+ color: #818cf8;
+ }
+
+ span {
+ font-size: 13px;
+ color: #c7d2fe;
+ font-weight: 500;
+ }
+}
+
+.hero-title {
+ margin: 0 0 24px;
+
+ .title-line-1 {
+ display: block;
+ font-size: 20px;
+ font-weight: 600;
+ color: #c7d2fe;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ margin-bottom: 12px;
+ }
+
+ .title-line-2 {
+ display: block;
+ font-size: clamp(36px, 5vw, 56px);
+ font-weight: 800;
+ background: linear-gradient(135deg, #FFFFFF 0%, #e0e7ff 40%, #c7d2fe 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 1.1;
+ letter-spacing: -0.02em;
+ }
+}
+
+.hero-description {
+ font-size: 18px;
+ line-height: 1.7;
+ color: rgba(255, 255, 255, 0.7);
+ margin: 0 0 36px;
+ max-width: 540px;
+
+ @media (max-width: 1200px) {
+ max-width: 100%;
+ }
+}
+
+// Feature Pills
+.feature-pills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: 48px;
+
+ @media (max-width: 1200px) {
+ justify-content: center;
+ }
+}
+
+.feature-pill {
display: flex;
align-items: center;
- gap: 12px;
- padding: 12px 16px;
- background: rgba(16, 185, 129, 0.1);
+ gap: 8px;
+ padding: 12px 20px;
+ background: rgba(255, 255, 255, 0.05);
border-radius: 50px;
- border: 1px solid rgba(16, 185, 129, 0.2);
- width: fit-content;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(99, 102, 241, 0.4);
+ transform: translateY(-2px);
+ }
+
+ svg {
+ width: 18px;
+ height: 18px;
+ color: #10B981;
+ }
+
+ span {
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.85);
+ font-weight: 500;
+ }
}
-.status-dot {
- width: 10px;
- height: 10px;
- background: #10B981;
- border-radius: 50%;
- box-shadow: 0 0 8px #10B981;
- animation: pulse 2s infinite;
-}
-
-.status-text {
- font-size: 13px;
- color: rgba(255, 255, 255, 0.8);
- font-weight: 500;
-}
-
-.status-badge {
- padding: 2px 8px;
- background: rgba(16, 185, 129, 0.2);
- border-radius: 4px;
- font-size: 11px;
- font-weight: 600;
- color: #10B981;
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-// =============================================================================
-// RIGHT SIDE - AUTH CONTENT
-// =============================================================================
-.auth-content {
- width: 480px;
- min-width: 480px;
+// Benefits List
+.benefits-list {
display: flex;
flex-direction: column;
+ gap: 12px;
+ padding: 24px 28px;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+ border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+
+ @media (max-width: 1200px) {
+ display: inline-flex;
+ align-items: flex-start;
+ }
+
+ @media (max-width: 600px) {
+ padding: 20px;
+ gap: 10px;
+ }
+}
+
+.benefit-item {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 8px 0;
+ transition: all 0.2s ease;
+
+ &:hover {
+ transform: translateX(4px);
+ }
+
+ svg {
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+ color: #10B981;
+ }
+
+ span {
+ font-size: 15px;
+ color: rgba(255, 255, 255, 0.85);
+ font-weight: 500;
+ }
+}
+
+// =============================================================================
+// LOGIN CARD (Right Side) - Glassmorphism Design
+// =============================================================================
+.login-container {
+ display: flex;
justify-content: center;
- padding: 48px;
- background: white;
- position: relative;
+ align-items: center;
+ animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
@media (max-width: 1024px) {
width: 100%;
- min-width: auto;
max-width: 480px;
- margin: auto;
+ margin: 0 auto;
+ }
+}
+
+.login-card {
+ width: 100%;
+ padding: 36px 32px;
+ background: linear-gradient(135deg, rgba(15, 10, 30, 0.9) 0%, rgba(20, 15, 40, 0.95) 100%);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-radius: 24px;
+ box-shadow:
+ 0 25px 80px rgba(0, 0, 0, 0.6),
+ 0 10px 30px rgba(0, 0, 0, 0.4),
+ inset 0 1px 1px rgba(255, 255, 255, 0.05);
+ position: relative;
+ overflow: hidden;
+
+ // Subtle gradient border
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
border-radius: 24px;
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ padding: 1px;
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(168, 85, 247, 0.2) 50%, rgba(16, 185, 129, 0.3) 100%);
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
}
- @media (max-width: 520px) {
- margin: 16px;
- width: calc(100% - 32px);
- padding: 32px 24px;
+ @media (max-width: 600px) {
+ padding: 28px 24px;
border-radius: 20px;
}
}
-.auth-card {
- animation: fadeIn 0.4s ease-out;
+.card-glow {
+ position: absolute;
+ top: -80px;
+ right: -80px;
+ width: 200px;
+ height: 200px;
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
+ pointer-events: none;
}
// =============================================================================
// FOOTER
// =============================================================================
-.auth-footer {
- margin-top: auto;
- padding-top: 24px;
- text-align: center;
+.landing-footer {
+ padding: 20px 48px;
+ background: rgba(5, 2, 8, 0.8);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
- .copyright {
- font-size: 12px;
- color: var(--dbim-grey-2);
- margin: 0 0 8px;
+.footer-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ gap: 12px;
+ text-align: center;
+ }
+}
+
+.copyright {
+ margin: 0;
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.footer-links {
+ display: flex;
+ gap: 24px;
+
+ a {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.6);
+ text-decoration: none;
+ transition: color 0.2s ease;
+
+ &:hover {
+ color: #818cf8;
+ }
}
- .footer-links {
- display: flex;
+ @media (max-width: 768px) {
+ gap: 16px;
+ flex-wrap: wrap;
justify-content: center;
- align-items: center;
- gap: 12px;
-
- a {
- font-size: 12px;
- color: var(--dbim-grey-3);
- text-decoration: none;
- transition: color 0.2s ease;
-
- &:hover {
- color: var(--dbim-blue-dark);
- }
- }
-
- .divider {
- color: var(--dbim-grey-1);
- font-size: 10px;
- }
}
}
// =============================================================================
// ANIMATIONS
// =============================================================================
-@keyframes float {
- 0%, 100% {
- transform: translateY(0) translateX(0);
- }
- 25% {
- transform: translateY(-20px) translateX(10px);
- }
- 50% {
- transform: translateY(0) translateX(20px);
- }
- 75% {
- transform: translateY(20px) translateX(10px);
- }
-}
-
-@keyframes pulse-ring {
- 0% {
- transform: translate(-50%, -50%) scale(1);
- opacity: 1;
- }
- 100% {
- transform: translate(-50%, -50%) scale(2);
- opacity: 0;
- }
-}
-
-@keyframes dash {
- to {
- stroke-dashoffset: 100;
- }
-}
-
-@keyframes pulse {
- 0%, 100% {
- opacity: 1;
- transform: scale(1);
- }
- 50% {
- opacity: 0.7;
- transform: scale(1.1);
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
@keyframes fadeInUp {
from {
opacity: 0;
- transform: translateY(20px);
+ transform: translateY(30px);
}
to {
opacity: 1;
@@ -460,17 +662,30 @@
}
}
-// =============================================================================
-// RESPONSIVE
-// =============================================================================
-@media (max-width: 1024px) {
- .auth-layout {
- align-items: center;
- justify-content: center;
+@keyframes fadeInRight {
+ from {
+ opacity: 0;
+ transform: translateX(30px);
}
-
- .auth-container {
- min-height: auto;
- width: auto;
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+// =============================================================================
+// RESPONSIVE ADJUSTMENTS
+// =============================================================================
+@media (max-width: 768px) {
+ .top-nav {
+ padding: 16px 20px;
+
+ .nav-status {
+ display: none;
+ }
+ }
+
+ .brand-text .brand-subtitle {
+ display: none;
}
}
diff --git a/frontend/src/app/layouts/auth-layout/auth-layout.component.ts b/frontend/src/app/layouts/auth-layout/auth-layout.component.ts
index edcb267..2de024f 100644
--- a/frontend/src/app/layouts/auth-layout/auth-layout.component.ts
+++ b/frontend/src/app/layouts/auth-layout/auth-layout.component.ts
@@ -8,4 +8,6 @@ import { RouterModule } from '@angular/router';
templateUrl: './auth-layout.component.html',
styleUrl: './auth-layout.component.scss',
})
-export class AuthLayoutComponent {}
+export class AuthLayoutComponent {
+ readonly currentYear = new Date().getFullYear();
+}
diff --git a/frontend/src/app/layouts/main-layout/main-layout.component.html b/frontend/src/app/layouts/main-layout/main-layout.component.html
index b9a5e1f..574c482 100644
--- a/frontend/src/app/layouts/main-layout/main-layout.component.html
+++ b/frontend/src/app/layouts/main-layout/main-layout.component.html
@@ -32,6 +32,25 @@