New categories and browsing + homepage fixes

src/app/app-routing.module.ts

@@ -138,6 +138,11 @@ const routes: Routes = [
     canActivate: [AuthGuard], data: { roles: ['admin'] }
   },
 
+  {
+    path: 'browse',
+    loadComponent: () => import('./pages/browse/browse.component').then(c => c.BrowseComponent),
+  },
+
   {
     path: 'landing-page',
     children: [{

src/app/data/availableFilters.ts

@@ -1,17 +1,29 @@
 export type Filter = {
   name: string
+  label?: string
+  clientSide?: boolean
   children?: Filter[]
 }
 
-const availableFilters: Filter[] = [
+export const availableFilters: Filter[] = [
   {
     name: 'compliance_profile',
+    label: 'Compliance level',
     children: [
       { name: 'Baseline' },
       { name: 'Professional' },
       { name: 'Professional+' },
     ],
   },
+  {
+    name: 'procurement_type',
+    label: 'Procurement type',
+    clientSide: true,
+    children: [
+      { name: 'Ready to Buy' },
+      { name: 'Request Quote' },
+    ],
+  },
 ]
 
 export default availableFilters

src/app/data/categoryIcons.ts

@@ -0,0 +1,29 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faBolt,
+  faBrain,
+  faCode,
+  faLayerGroup,
+  faPlug,
+  faServer,
+  faShieldHalved,
+  faUserTie
+} from '@fortawesome/pro-solid-svg-icons';
+
+export const DEFAULT_CATEGORY_ICON: IconDefinition = faLayerGroup;
+
+export const CATEGORY_ICONS: Record<string, IconDefinition> = {
+  Security: faShieldHalved,
+  Infrastructure: faServer,
+  Productivity: faBolt,
+  DevOps: faCode,
+  Professional: faUserTie,
+  Specific: faLayerGroup,
+  'Data and AI': faBrain,
+  Integration: faPlug,
+};
+
+export function iconForCategory(name: string | null | undefined): IconDefinition {
+  if (!name) return DEFAULT_CATEGORY_ICON;
+  return CATEGORY_ICONS[name] ?? DEFAULT_CATEGORY_ICON;
+}

src/app/pages/browse/browse.component.css

@@ -0,0 +1,194 @@
+.browse-wrap {
+  position: relative;
+  width: 100%;
+  isolation: isolate;
+}
+
+.browse-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: #f3f6ff;
+}
+
+.browse-content {
+  position: relative;
+  z-index: 1;
+}
+
+.browse-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);
+}
+
+.browse-e1 {
+  left: -220px;
+  top: -190px;
+}
+
+.browse-e2 {
+  right: -260px;
+  top: 60px;
+}
+
+.browse-e3 {
+  left: 50%;
+  top: -240px;
+  transform: translateX(-50%) rotate(180deg);
+}
+
+.browse-e4 {
+  left: 140px;
+  bottom: -360px;
+}
+
+.browse-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);
+}
+
+@media (max-width: 1024px) {
+  .browse-ellipse {
+    width: 620px;
+    height: 620px;
+    filter: blur(9px);
+  }
+
+  .browse-e2 {
+    right: -300px;
+  }
+}
+
+.popular-card {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.popular-card:hover {
+  border-color: #3d71cc;
+  box-shadow: 0 6px 20px rgba(45, 88, 167, 0.12);
+}
+
+.popular-grid[data-direction="init"],
+.popular-grid[data-direction="next"] {
+  animation: popularSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.popular-grid[data-direction="prev"] {
+  animation: popularSlideInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes popularSlideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes popularSlideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.popular-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 9999px;
+  background: #ffffff;
+  color: #0b1220;
+  box-shadow: 0 4px 16px rgba(45, 88, 167, 0.2);
+  transition: color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+}
+
+.popular-arrow:hover:not(:disabled) {
+  color: #1f4fbf;
+  box-shadow: 0 4px 18px rgba(45, 88, 167, 0.32);
+}
+
+.popular-arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.popular-arrow-left {
+  left: 0;
+}
+
+.popular-arrow-right {
+  right: 0;
+}
+
+.popular-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background: #d8dade;
+  transition: background 0.2s ease, width 0.2s ease;
+}
+
+.popular-dot:hover {
+  background: #b8babf;
+}
+
+.popular-dot-active {
+  background: #3d71cc;
+  width: 28px;
+}
+
+@media (max-width: 640px) {
+  .popular-arrow {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .browse-ellipse {
+    width: 520px;
+    height: 520px;
+    filter: blur(8px);
+  }
+
+  .browse-e1 {
+    left: -280px;
+    top: -230px;
+  }
+
+  .browse-e2 {
+    right: -320px;
+    top: 10px;
+  }
+
+  .browse-e4 {
+    left: 40px;
+    bottom: -380px;
+  }
+}