2a28a8abbd
🎯 Major Achievements: - Standardized 193+ SCSS imports across all libraries - Created 12 independent Git repositories with clean submodule structure - Eliminated relative path dependencies for true library portability - Added comprehensive consumer integration documentation 📦 Libraries Successfully Published: • ui-design-system (foundation) • ui-essentials (components) • shared-utils (utilities) • auth-client (authentication) • ui-landing-pages (marketing components) • ui-code-display (syntax highlighting) • ui-accessibility (WCAG compliance) • hcl-studio (color management) • ui-animations (CSS animations) • ui-backgrounds (background effects) • ui-font-manager (typography) • ui-data-utils (data manipulation) 🔧 Technical Improvements: - All SCSS imports now use standardized 'ui-design-system/' paths - Libraries work independently as Git submodules - Consumer projects can selectively include only needed libraries - Professional Git history with initial commits for each library - Updated integration guides with step-by-step workflows 📋 Documentation Added: - CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions - Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info - Library-specific README files for all repositories 🚀 Ready for Production: - All libraries pushed to https://git.sky-ai.com/jules/* - Clean separation of concerns across library boundaries - Independent versioning and release cycles possible - Optimal structure for LLM analysis and maintenance This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption. 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
139 lines
2.5 KiB
SCSS
139 lines
2.5 KiB
SCSS
@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;
|
|
}
|
|
} |