Add landing pages library with comprehensive components and demos

🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-06 13:52:41 +10:00
parent 5346d6d0c9
commit 246c62fd49
113 changed files with 13015 additions and 165 deletions
--- a/projects/ui-landing-pages/src/lib/components/conversion/cta-section.component.scss
+++ b/projects/ui-landing-pages/src/lib/components/conversion/cta-section.component.scss
@@ -0,0 +1,139 @@
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
+
+.cta-section {
+  position: relative;
+  overflow: hidden;
+  padding: 6rem 0;
+
+  &--gradient {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #8b5cf6 100%);
+  }
+
+  &--pattern {
+    background-color: #f8fafc;
+    background-image: radial-gradient(circle at 2px 2px, #e2e8f0 2px, transparent 0);
+    background-size: 60px 60px;
+  }
+
+  &--image {
+    background-color: #f8fafc;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1;
+    }
+  }
+
+  &--solid {
+    background: #3b82f6;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  &__urgency {
+    margin-bottom: 2rem;
+    
+    .countdown {
+      display: flex;
+      justify-content: center;
+      gap: 2rem;
+      margin-bottom: 1rem;
+
+      &__item {
+        text-align: center;
+      }
+
+      &__value {
+        display: block;
+        font-size: 2rem;
+        font-weight: bold;
+        color: white;
+        line-height: 1;
+      }
+
+      &__label {
+        display: block;
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.8);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-top: 0.5rem;
+      }
+    }
+
+    .limited-offer {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      background: #f59e0b;
+      color: #000;
+      padding: 0.5rem 1rem;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 500;
+
+      &__text {
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+      }
+
+      &__remaining {
+        font-weight: bold;
+      }
+    }
+
+    .social-proof__text {
+      color: white;
+      font-size: 1rem;
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      backdrop-filter: blur(10px);
+    }
+  }
+
+  &__title {
+    font-size: 3rem;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 2rem;
+    line-height: 1.2;
+  }
+
+  &__description {
+    font-size: 1.25rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 3rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &__button {
+    min-width: 160px;
+  }
+}