Footer implementation

.vscode/settings.json

@@ -0,0 +1,78 @@
+{
+  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": false,
+  "editor.formatOnType": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features",
+    "editor.formatOnSave": true
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features",
+    "editor.formatOnSave": true
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features",
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features",
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "vscode.css-language-features",
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.validate.enable": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.preferences.importModuleSpecifierEnding": "auto",
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.suggest.autoImports": true,
+  "typescript.suggest.completeFunctionCalls": true,
+  "editor.inlineSuggest.enabled": true,
+  "editor.parameterHints.enabled": true,
+  "editor.suggestSelection": "first",
+  "editor.tabCompletion": "on",
+  "angular.enable-strict-mode-prompt": false,
+  "angular.trace.server": "off",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "editor.wordWrap": "on",
+  "editor.minimap.enabled": false,
+  "editor.renderWhitespace": "selection",
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "files.exclude": {
+    "**/.angular/**": true,
+    "**/.cache/**": true,
+    "**/dist/**": true,
+    "**/coverage/**": true,
+    "**/.DS_Store": true
+  },
+  "git.autofetch": true,
+  "git.confirmSync": false,
+  "explorer.compactFolders": false,
+  "workbench.startupEditor": "none"
+}

src/app/app.component.html

@@ -1,17 +1,19 @@
-  <bae-header class="fixed w-full z-50 top-0 start-0"></bae-header>
+<bae-header></bae-header>
 
-<main
-  class="bg-no-repeat bg-right pb-[60px] pt-[75px]"
-
->
+<main class="bg-no-repeat bg-right ">
   <router-outlet></router-outlet>
 </main>
-@if (providerThemeName == "DOME") {
-  <app-chatbot-widget class="relative z-50"></app-chatbot-widget>
+@if (providerThemeName === "DOME") {
+<app-chatbot-widget class="relative z-50"></app-chatbot-widget>
 }
 
-  <bae-footer class="fixed w-full z-30 bottom-0 start-0"></bae-footer>
+<bae-footer class="w-full z-30 bottom-0 start-0"></bae-footer>
 
 @if(isProduction){
-    <script type="text/javascript"> _linkedin_partner_id = "8700705"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=8700705&fmt=gif" /> </noscript>
-}
+<script
+  type="text/javascript"> _linkedin_partner_id = "8700705"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script>
+<script
+  type="text/javascript"> (function (l) { if (!l) { window.lintrk = function (a, b) { window.lintrk.q.push([a, b]) }; window.lintrk.q = [] } var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s); })(window.lintrk); </script>
+<noscript> <img height="1" width="1" style="display:none;" alt=""
+    src="https://px.ads.linkedin.com/collect/?pid=8700705&fmt=gif" /> </noscript>
+}

src/app/pages/dashboard/dashboard-customers/dashboard-customers.component.css

@@ -0,0 +1,215 @@
+.dc-wrap {
+  position: relative;
+  width: 100%;
+  isolation: isolate;
+}
+
+.dc-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: #f3f6ff;
+}
+
+.dc-content {
+  position: relative;
+  z-index: 1;
+}
+
+.dc-ellipse {
+  position: absolute;
+  width: 720px;
+  height: 720px;
+  border-radius: 9999px;
+  transform: rotate(180deg);
+  opacity: 1;
+  background: radial-gradient(circle at 35% 35%,
+      rgba(182, 202, 236, 0.95) 0%,
+      rgba(182, 202, 236, 0.65) 38%,
+      rgba(182, 202, 236, 0) 72%);
+  filter: blur(10px);
+}
+
+.dc-e1 {
+  left: -220px;
+  top: -190px;
+}
+
+.dc-e2 {
+  right: -260px;
+  top: 60px;
+}
+
+.dc-e3 {
+  left: 50%;
+  top: -240px;
+  transform: translateX(-50%) rotate(180deg);
+}
+
+.dc-e4 {
+  left: 140px;
+  bottom: -360px;
+}
+
+.dc-blur {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(226.59deg,
+      rgba(255, 242, 242, 0.18) 25.7%,
+      rgba(255, 250, 250, 0.28) 94.73%);
+  backdrop-filter: blur(90px);
+  -webkit-backdrop-filter: blur(90px);
+  transform: rotate(180deg);
+}
+
+.dc-feature-card {
+  position: relative;
+  min-height: 180px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 10px 30px rgba(13, 33, 74, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: transform 220ms ease, box-shadow 220ms ease;
+}
+
+.dc-feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 38px rgba(13, 33, 74, 0.14);
+}
+
+.dc-feature-card__base {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  min-height: 180px;
+  transition: opacity 180ms ease, transform 220ms ease;
+}
+
+.dc-feature-card__content {
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  padding: 1.5rem;
+}
+
+.dc-feature-card__icon {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: 72px;
+  color: #1f4fbf;
+  opacity: 0.1;
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.dc-feature-card__hover {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  padding: 2rem 1.9rem 1.8rem;
+  background: rgba(226, 233, 245, 0.9);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 220ms ease, transform 220ms ease;
+  pointer-events: none;
+}
+
+.dc-feature-card__hover-text {
+  position: relative;
+  z-index: 2;
+  max-width: 250px;
+  font-size: 16px;
+  line-height: 1.55;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.dc-feature-card__hover-icon {
+  position: absolute;
+  right: -6px;
+  bottom: -10px;
+  font-size: 122px;
+  color: #1f4fbf;
+  opacity: 0.1;
+  z-index: 1;
+  transition: transform 220ms ease, opacity 220ms ease;
+}
+
+.dc-feature-card:hover .dc-feature-card__base {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+.dc-feature-card:hover .dc-feature-card__icon {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.dc-feature-card:hover .dc-feature-card__hover {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dc-feature-card:hover .dc-feature-card__hover-icon {
+  opacity: 0.12;
+  transform: scale(1.03);
+}
+
+@media (max-width: 1024px) {
+  .dc-ellipse {
+    width: 620px;
+    height: 620px;
+    filter: blur(9px);
+  }
+
+  .dc-e2 {
+    right: -300px;
+  }
+}
+
+@media (max-width: 640px) {
+  .dc-ellipse {
+    width: 520px;
+    height: 520px;
+    filter: blur(8px);
+  }
+
+  .dc-e1 {
+    left: -280px;
+    top: -230px;
+  }
+
+  .dc-e2 {
+    right: -320px;
+    top: 10px;
+  }
+
+  .dc-e4 {
+    left: 40px;
+    bottom: -380px;
+  }
+
+  .dc-feature-card {
+    min-height: 160px;
+  }
+
+  .dc-feature-card__base {
+    min-height: 160px;
+  }
+
+  .dc-feature-card__hover {
+    padding: 1.5rem;
+  }
+
+  .dc-feature-card__hover-text {
+    font-size: 16px;
+    line-height: 1.65;
+  }
+
+  .dc-feature-card__hover-icon {
+    font-size: 104px;
+  }
+}