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

378
projects/ui-landing-pages/src/lib/components/content/timeline-section.component.scss Normal file
View File

@@ -0,0 +1,378 @@
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
.ui-lp-timeline {
padding: $semantic-spacing-layout-section-lg 0;
&__header {
text-align: center;
margin-bottom: $semantic-spacing-layout-section-md;
}
&__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;
max-width: 600px;
margin: 0 auto;
}
&__container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
// Vertical Timeline (Default)
&--vertical {
.ui-lp-timeline__line {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: $semantic-color-border-subtle;
}
.ui-lp-timeline__items {
display: flex;
flex-direction: column;
gap: $semantic-spacing-layout-section-sm;
}
.ui-lp-timeline__item {
position: relative;
padding-left: 60px;
}
.ui-lp-timeline__marker {
position: absolute;
left: 0;
top: $semantic-spacing-component-sm;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: $semantic-color-surface-primary;
border: 2px solid $semantic-color-border-subtle;
z-index: $semantic-z-index-tooltip;
}
.ui-lp-timeline__content {
background: $semantic-color-surface-elevated;
border-radius: $semantic-border-card-radius;
padding: $semantic-spacing-component-lg;
box-shadow: $semantic-shadow-card-rest;
position: relative;
&::before {
content: '';
position: absolute;
left: -10px;
top: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: $semantic-color-surface-elevated;
}
}
}
// Horizontal Timeline
&--horizontal {
.ui-lp-timeline__line {
position: absolute;
left: 0;
right: 0;
top: 20px;
height: 2px;
background: $semantic-color-border-subtle;
}
.ui-lp-timeline__items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: $semantic-spacing-component-xl;
}
.ui-lp-timeline__item {
position: relative;
padding-top: 60px;
}
.ui-lp-timeline__marker {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: $semantic-color-surface-primary;
border: 2px solid $semantic-color-border-subtle;
z-index: $semantic-z-index-tooltip;
}
.ui-lp-timeline__content {
background: $semantic-color-surface-elevated;
border-radius: $semantic-border-card-radius;
padding: $semantic-spacing-component-lg;
box-shadow: $semantic-shadow-card-rest;
text-align: center;
position: relative;
&::before {
content: '';
position: absolute;
left: 50%;
top: -10px;
transform: translateX(-50%);
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: $semantic-color-surface-elevated;
}
}
}
// Status Variants
&__item {
&--completed {
.ui-lp-timeline__marker {
background: $semantic-color-success;
border-color: $semantic-color-success;
color: $semantic-color-on-primary;
}
.ui-lp-timeline__item-title {
color: $semantic-color-text-primary;
}
}
&--current {
.ui-lp-timeline__marker {
background: $semantic-color-primary;
border-color: $semantic-color-primary;
color: $semantic-color-on-primary;
box-shadow: 0 0 0 4px rgba($semantic-color-primary, 0.2);
}
.ui-lp-timeline__content {
border: 2px solid $semantic-color-primary;
}
.ui-lp-timeline__item-title {
color: $semantic-color-primary;
}
}
&--upcoming {
.ui-lp-timeline__marker {
background: $semantic-color-surface-primary;
border-color: $semantic-color-border-subtle;
color: $semantic-color-text-secondary;
}
.ui-lp-timeline__item-title {
color: $semantic-color-text-secondary;
}
.ui-lp-timeline__description {
opacity: $semantic-opacity-subtle;
}
}
}
&__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: currentColor;
}
&__icon {
width: 20px;
height: 20px;
svg {
width: 100%;
height: 100%;
}
}
&__date {
font-family: map-get($semantic-typography-body-small, font-family);
font-size: map-get($semantic-typography-body-small, font-size);
font-weight: 600;
line-height: map-get($semantic-typography-body-small, line-height);
color: $semantic-color-primary;
margin-bottom: $semantic-spacing-component-sm;
text-transform: uppercase;
letter-spacing: 0.05em;
}
&__item-title {
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: 0 0 $semantic-spacing-component-sm 0;
display: flex;
align-items: center;
gap: $semantic-spacing-component-sm;
}
&__badge {
font-family: map-get($semantic-typography-body-small, font-family);
font-size: map-get($semantic-typography-body-small, font-size);
font-weight: 600;
line-height: map-get($semantic-typography-body-small, line-height);
background: $semantic-color-primary;
color: $semantic-color-on-primary;
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
&__description {
font-family: map-get($semantic-typography-body-medium, font-family);
font-size: map-get($semantic-typography-body-medium, font-size);
font-weight: map-get($semantic-typography-body-medium, font-weight);
line-height: map-get($semantic-typography-body-medium, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
&__empty {
text-align: center;
padding: $semantic-spacing-layout-section-sm 0;
p {
font-family: map-get($semantic-typography-body-medium, font-family);
font-size: map-get($semantic-typography-body-medium, font-size);
font-weight: map-get($semantic-typography-body-medium, font-weight);
line-height: map-get($semantic-typography-body-medium, line-height);
color: $semantic-color-text-secondary;
margin: 0;
}
}
// Theme Variants
&--minimal {
.ui-lp-timeline__content {
background: transparent;
box-shadow: none;
border: 1px solid $semantic-color-border-subtle;
&::before {
display: none;
}
}
.ui-lp-timeline__marker {
background: $semantic-color-surface-primary;
box-shadow: $semantic-shadow-card-rest;
}
}
&--connected {
.ui-lp-timeline__line {
background: linear-gradient(
to bottom,
$semantic-color-primary,
$semantic-color-secondary
);
}
&.ui-lp-timeline--horizontal .ui-lp-timeline__line {
background: linear-gradient(
to right,
$semantic-color-primary,
$semantic-color-secondary
);
}
}
// Responsive Design
@media (max-width: $semantic-breakpoint-md - 1) {
&__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);
}
&--horizontal {
.ui-lp-timeline__items {
grid-template-columns: 1fr;
gap: $semantic-spacing-component-lg;
}
}
&__content {
padding: $semantic-spacing-component-md;
}
}
@media (max-width: $semantic-breakpoint-sm - 1) {
&--vertical {
.ui-lp-timeline__line {
left: 15px;
}
.ui-lp-timeline__item {
padding-left: 50px;
}
.ui-lp-timeline__marker {
width: 30px;
height: 30px;
left: 0;
}
}
&--horizontal {
.ui-lp-timeline__marker {
width: 30px;
height: 30px;
top: 0;
}
.ui-lp-timeline__item {
padding-top: 50px;
}
}
&__item-title {
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);
flex-direction: column;
align-items: flex-start;
gap: $semantic-spacing-component-xs;
}
&__icon {
width: 16px;
height: 16px;
}
}
}