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

143
projects/demo-ui-essentials/src/app/demos/conversion-demo/conversion-demo.component.scss Normal file
View File

@@ -0,0 +1,143 @@
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
.conversion-demo {
min-height: 100vh;
background: semantic.$semantic-color-surface-primary;
}
.demo-section {
padding: semantic.$semantic-spacing-layout-section-lg semantic.$semantic-spacing-container-card-padding;
&:first-child {
text-align: center;
background: linear-gradient(135deg, semantic.$semantic-color-primary-container 0%, semantic.$semantic-color-tertiary-container 100%);
border-bottom: 1px solid semantic.$semantic-color-border-subtle;
}
&:not(:first-child) {
border-bottom: 1px solid semantic.$semantic-color-border-subtle;
}
}
.demo-title {
font-size: 3rem;
font-weight: 600;
color: semantic.$semantic-color-text-primary;
margin-bottom: semantic.$semantic-spacing-content-paragraph;
}
.demo-description {
font-size: 1.125rem;
color: semantic.$semantic-color-text-secondary;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.demo-section-title {
font-size: 1.875rem;
font-weight: 600;
color: semantic.$semantic-color-text-primary;
margin-bottom: semantic.$semantic-spacing-content-paragraph;
text-align: center;
}
.demo-section-description {
font-size: 1.125rem;
color: semantic.$semantic-color-text-secondary;
text-align: center;
max-width: 800px;
margin: 0 auto semantic.$semantic-spacing-component-xl auto;
line-height: 1.6;
}
.demo-example {
margin-bottom: semantic.$semantic-spacing-layout-section-sm;
&:last-child {
margin-bottom: 0;
}
}
.demo-example-title {
font-size: 1.5rem;
font-weight: 500;
color: semantic.$semantic-color-text-primary;
margin-bottom: semantic.$semantic-spacing-content-paragraph;
text-align: center;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: semantic.$semantic-spacing-component-xl;
margin-bottom: semantic.$semantic-spacing-layout-section-sm;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: semantic.$semantic-spacing-content-paragraph;
}
}
.footer-demo {
background: semantic.$semantic-color-primary;
padding: semantic.$semantic-spacing-component-xl;
border-radius: 0.5rem;
color: semantic.$semantic-color-on-primary;
}
// Component spacing adjustments
:host ::ng-deep {
ui-cta-section {
margin-bottom: semantic.$semantic-spacing-content-paragraph;
}
ui-pricing-table {
margin-bottom: semantic.$semantic-spacing-content-paragraph;
}
ui-newsletter-signup {
margin-bottom: semantic.$semantic-spacing-content-paragraph;
}
ui-contact-form {
margin-bottom: semantic.$semantic-spacing-content-paragraph;
}
}
// Responsive adjustments
@media (max-width: 768px) {
.demo-section {
padding: semantic.$semantic-spacing-layout-section-sm semantic.$semantic-spacing-container-card-padding;
}
.demo-title {
font-size: 2.25rem;
}
.demo-section-title {
font-size: 1.875rem;
}
.demo-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.demo-section {
padding: semantic.$semantic-spacing-layout-section-xs semantic.$semantic-spacing-container-card-padding;
}
.demo-title {
font-size: 1.875rem;
}
.demo-section-title {
font-size: 1.5rem;
}
.demo-example-title {
font-size: 1.25rem;
}
}