jules/ui-essentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add landing pages library with comprehensive components and demos

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
2025-09-06 13:52:41 +10:00
parent 5346d6d0c9
commit 246c62fd49
113 changed files with 13015 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
projects/ui-landing-pages/src/lib/components/social-proof/statistics-display.component.scss Normal file
View File

@@ -0,0 +1,331 @@
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
.ui-lp-statistics-display {
padding: $semantic-spacing-layout-section-lg 0;
// Background Variants
&--transparent {
background: transparent;
}
&--surface {
background: $semantic-color-surface-elevated;
}
&--primary {
background: $semantic-color-primary;
color: $semantic-color-on-primary;
.ui-lp-statistics-display__title,
.ui-lp-statistics-display__value,
.ui-lp-statistics-display__label {
color: $semantic-color-on-primary;
}
.ui-lp-statistics-display__subtitle,
.ui-lp-statistics-display__description {
color: $semantic-color-on-primary;
opacity: $semantic-opacity-subtle;
}
}
// Header Section
&__header {
text-align: center;
margin-bottom: $semantic-spacing-layout-section-md;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
&__title {
font-family: map-get($semantic-typography-heading-h2, font-family);
font-size: map-get($semantic-typography-heading-h2, font-size);
font-weight: map-get($semantic-typography-heading-h2, font-weight);
line-height: map-get($semantic-typography-heading-h2, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-heading;
}
&__subtitle {
font-family: map-get($semantic-typography-body-large, font-family);
font-size: map-get($semantic-typography-body-large, font-size);
font-weight: map-get($semantic-typography-body-large, font-weight);
line-height: map-get($semantic-typography-body-large, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
// Items Container
&__items {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
// Row Layout
&__items--row {
flex-wrap: wrap;
gap: $semantic-spacing-component-xl;
@media (max-width: $semantic-breakpoint-lg - 1) {
gap: $semantic-spacing-component-lg;
}
@media (max-width: $semantic-breakpoint-md - 1) {
flex-direction: column;
align-items: center;
gap: $semantic-spacing-component-lg;
}
}
// Grid Layout
&__items--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: $semantic-spacing-component-xl;
width: 100%;
@media (max-width: $semantic-breakpoint-lg - 1) {
grid-template-columns: repeat(2, 1fr);
gap: $semantic-spacing-component-lg;
}
@media (max-width: $semantic-breakpoint-md - 1) {
grid-template-columns: 1fr;
gap: $semantic-spacing-component-lg;
}
}
// Individual Item
&__item {
display: flex;
align-items: flex-start;
gap: $semantic-spacing-component-md;
text-align: left;
.ui-lp-statistics-display--row & {
flex-direction: column;
text-align: center;
align-items: center;
min-width: 200px;
}
@media (prefers-reduced-motion: no-preference) {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp $semantic-motion-duration-slow $semantic-motion-easing-ease forwards;
animation-delay: var(--animation-delay, 0ms);
}
}
// Icon
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: $semantic-sizing-icon-navigation;
height: $semantic-sizing-icon-navigation;
flex-shrink: 0;
fa-icon {
font-size: $semantic-sizing-icon-navigation;
color: $semantic-color-primary;
}
.ui-lp-statistics-display--primary & fa-icon {
color: $semantic-color-on-primary;
}
.ui-lp-statistics-display--row & {
margin-bottom: $semantic-spacing-component-sm;
}
}
// Content Area
&__content {
flex: 1;
.ui-lp-statistics-display--row & {
display: flex;
flex-direction: column;
align-items: center;
}
}
&__value {
display: flex;
align-items: baseline;
gap: $semantic-spacing-component-xs;
margin-bottom: $semantic-spacing-component-xs;
.ui-lp-statistics-display--row & {
justify-content: center;
}
}
&__number {
font-family: map-get($semantic-typography-heading-h1, font-family);
font-size: 3.5rem;
font-weight: map-get($semantic-typography-heading-h1, font-weight);
line-height: 1;
color: $semantic-color-text-primary;
@media (max-width: $semantic-breakpoint-md - 1) {
font-size: 2.5rem;
}
@media (max-width: $semantic-breakpoint-sm - 1) {
font-size: 2rem;
}
}
&__prefix,
&__suffix {
font-family: map-get($semantic-typography-heading-h3, font-family);
font-size: map-get($semantic-typography-heading-h3, font-size);
font-weight: map-get($semantic-typography-heading-h3, font-weight);
color: $semantic-color-text-primary;
@media (max-width: $semantic-breakpoint-md - 1) {
font-family: map-get($semantic-typography-heading-h4, font-family);
font-size: map-get($semantic-typography-heading-h4, font-size);
font-weight: map-get($semantic-typography-heading-h4, font-weight);
}
}
&__label {
font-family: map-get($semantic-typography-heading-h4, font-family);
font-size: map-get($semantic-typography-heading-h4, font-size);
font-weight: map-get($semantic-typography-heading-h4, font-weight);
line-height: map-get($semantic-typography-heading-h4, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-component-xs;
@media (max-width: $semantic-breakpoint-md - 1) {
font-family: map-get($semantic-typography-heading-h5, font-family);
font-size: map-get($semantic-typography-heading-h5, font-size);
font-weight: map-get($semantic-typography-heading-h5, font-weight);
line-height: map-get($semantic-typography-heading-h5, line-height);
}
}
&__description {
font-family: map-get($semantic-typography-body-small, font-family);
font-size: map-get($semantic-typography-body-small, font-size);
font-weight: map-get($semantic-typography-body-small, font-weight);
line-height: map-get($semantic-typography-body-small, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
// Variant Styles
// Card Variant
&--card &__item {
padding: $semantic-spacing-component-xl;
background: $semantic-color-surface-elevated;
border-radius: $semantic-border-card-radius;
box-shadow: $semantic-shadow-card-rest;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
&:hover {
box-shadow: $semantic-shadow-card-hover;
transform: translateY(-2px);
}
}
&--card.ui-lp-statistics-display--primary &__item {
background: $semantic-color-surface-elevated;
border-color: $semantic-color-primary;
.ui-lp-statistics-display__title,
.ui-lp-statistics-display__value,
.ui-lp-statistics-display__label {
color: $semantic-color-text-primary;
}
.ui-lp-statistics-display__subtitle,
.ui-lp-statistics-display__description {
color: $semantic-color-text-secondary;
opacity: 1;
}
}
// Highlighted Variant
&--highlighted &__item {
position: relative;
padding: $semantic-spacing-component-lg;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: $semantic-color-primary;
border-radius: $semantic-border-card-radius;
}
}
// Responsive Adjustments
@media (max-width: $semantic-breakpoint-md - 1) {
padding: $semantic-spacing-layout-section-md 0;
&__header {
margin-bottom: $semantic-spacing-layout-section-sm;
}
&__title {
font-family: map-get($semantic-typography-heading-h3, font-family);
font-size: map-get($semantic-typography-heading-h3, font-size);
font-weight: map-get($semantic-typography-heading-h3, font-weight);
line-height: map-get($semantic-typography-heading-h3, line-height);
}
&__item {
gap: $semantic-spacing-component-sm;
}
&--card &__item {
padding: $semantic-spacing-component-lg;
}
}
@media (max-width: $semantic-breakpoint-sm - 1) {
&__items--row {
gap: $semantic-spacing-component-md;
}
&__items--grid {
gap: $semantic-spacing-component-md;
}
&__icon {
width: $semantic-sizing-icon-button;
height: $semantic-sizing-icon-button;
fa-icon {
font-size: $semantic-sizing-icon-button;
}
}
}
}
// Animation states
@media (prefers-reduced-motion: reduce) {
.ui-lp-statistics-display__item {
opacity: 1;
transform: none;
animation: none;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}