Add landing pages library with comprehensive components and demos

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

projects/ui-landing-pages/src/lib/components/templates/agency-template.component.scss

@@ -0,0 +1,117 @@
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
+
+.ui-lp-agency-template {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  
+  &__main {
+    flex: 1;
+    
+    // Agency-focused styling with professional appearance
+    > *:nth-child(odd) {
+      background: $semantic-color-surface-primary;
+    }
+    
+    > *:nth-child(even) {
+      background: $semantic-color-surface-secondary;
+    }
+    
+    // Special treatment for hero section
+    > ui-lp-hero-split {
+      background: unset;
+    }
+    
+    // Team section gets special emphasis
+    > ui-lp-team-grid {
+      background: $semantic-color-surface-elevated;
+      border: 1px solid $semantic-color-border-subtle;
+    }
+    
+    // Timeline section styling
+    > ui-lp-timeline {
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(
+          to right,
+          transparent,
+          $semantic-color-border-subtle,
+          transparent
+        );
+      }
+    }
+  }
+  
+  // Enhanced section spacing for agency layout
+  section {
+    padding: $semantic-spacing-layout-section-xl 0;
+  }
+  
+  // Professional section dividers
+  section + section {
+    border-top: 1px solid $semantic-color-border-subtle;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 1px;
+      background: $semantic-color-primary;
+    }
+  }
+  
+  // Responsive adjustments for agency layout
+  @media (max-width: $semantic-breakpoint-lg - 1) {
+    section {
+      padding: $semantic-spacing-layout-section-lg 0;
+    }
+  }
+  
+  @media (max-width: $semantic-breakpoint-md - 1) {
+    &__main {
+      > ui-lp-team-grid {
+        border: none;
+      }
+    }
+    
+    section {
+      padding: $semantic-spacing-layout-section-md 0;
+    }
+    
+    section + section::before {
+      width: 50px;
+    }
+  }
+  
+  @media (max-width: $semantic-breakpoint-sm - 1) {
+    &__main {
+      > * {
+        background: $semantic-color-surface-primary !important;
+      }
+    }
+    
+    section {
+      padding: $semantic-spacing-layout-section-sm 0;
+    }
+    
+    section + section {
+      border-top: none;
+      margin-top: $semantic-spacing-layout-section-sm;
+      
+      &::before {
+        display: none;
+      }
+    }
+  }
+}