CremaArchive/ui-essentials
Archived
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

192
projects/ui-landing-pages/src/lib/components/heroes/hero-with-image.component.scss Normal file
View File

@@ -0,0 +1,192 @@
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
.ui-lp-hero-image {
position: relative;
display: flex;
align-items: center;
width: 100%;
// Min Height Variants
&--full {
min-height: 100vh;
}
&--large {
min-height: 80vh;
}
&--medium {
min-height: 60vh;
}
// Background Variants
&--solid {
background: $semantic-color-surface-primary;
}
&--gradient {
background: linear-gradient(
135deg,
$semantic-color-primary,
$semantic-color-secondary
);
}
// Wrapper for flex layout
&__wrapper {
display: flex;
align-items: center;
gap: $semantic-spacing-layout-section-lg;
width: 100%;
padding: $semantic-spacing-layout-section-lg 0;
}
// Image Position Variants
&--image-left &__wrapper {
flex-direction: row;
}
&--image-right &__wrapper {
flex-direction: row-reverse;
}
// Content Section
&__content {
flex: 1;
min-width: 0; // Prevent flex item from overflowing
.ui-lp-hero-image--left & {
text-align: left;
}
.ui-lp-hero-image--center & {
text-align: center;
}
.ui-lp-hero-image--right & {
text-align: right;
}
}
// Media Section
&__media {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
&__img {
max-width: 100%;
height: auto;
border-radius: $semantic-border-card-radius;
box-shadow: $semantic-shadow-card-rest;
}
// Typography
&__title {
font-family: map-get($semantic-typography-heading-h1, font-family);
font-size: map-get($semantic-typography-heading-h1, font-size);
font-weight: map-get($semantic-typography-heading-h1, font-weight);
line-height: map-get($semantic-typography-heading-h1, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-content-heading;
.ui-lp-hero-image--gradient & {
color: $semantic-color-on-primary;
}
}
&__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-bottom: $semantic-spacing-content-paragraph;
.ui-lp-hero-image--gradient & {
color: $semantic-color-on-primary;
opacity: $semantic-opacity-subtle;
}
}
&__actions {
display: flex;
gap: $semantic-spacing-component-md;
margin-top: $semantic-spacing-layout-section-sm;
.ui-lp-hero-image--center &__content & {
justify-content: center;
}
.ui-lp-hero-image--right &__content & {
justify-content: flex-end;
}
}
// Responsive Design
@media (max-width: $semantic-breakpoint-lg - 1) {
&__wrapper {
gap: $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);
}
}
@media (max-width: $semantic-breakpoint-md - 1) {
&--full {
min-height: 100svh;
}
// Mobile image positioning
&--mobile-above &__wrapper {
flex-direction: column;
}
&--mobile-below &__wrapper {
flex-direction: column-reverse;
}
&--mobile-hidden &__media {
display: none;
}
&__wrapper {
gap: $semantic-spacing-layout-section-sm;
text-align: center;
}
&__content {
text-align: center !important;
}
&__actions {
flex-direction: column;
align-items: stretch;
justify-content: center !important;
}
}
@media (max-width: $semantic-breakpoint-sm - 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);
}
&__subtitle {
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);
}
}
}