Add landing pages library with comprehensive components and demos
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
@@ -1,8 +1,8 @@
|
||||
import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { UiAccessibilityModule } from 'ui-accessibility';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { UiAccessibilityModule } from '../../../ui-accessibility/src/lib/ui-accessibility.module';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
|
||||
@@ -1,19 +1,14 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { UiAccessibilityModule } from '../../../../../ui-accessibility/src/lib/ui-accessibility.module';
|
||||
import { ButtonComponent } from '../../../../../ui-essentials/src/lib/components/buttons/button.component';
|
||||
import { LiveAnnouncerService } from '../../../../../ui-accessibility/src/lib/services/live-announcer/live-announcer.service';
|
||||
import { FocusMonitorService } from '../../../../../ui-accessibility/src/lib/services/focus-monitor/focus-monitor.service';
|
||||
import { KeyboardManagerService } from '../../../../../ui-accessibility/src/lib/services/keyboard-manager/keyboard-manager.service';
|
||||
import { HighContrastService } from '../../../../../ui-accessibility/src/lib/services/high-contrast/high-contrast.service';
|
||||
import { A11yConfigService } from '../../../../../ui-accessibility/src/lib/services/a11y-config/a11y-config.service';
|
||||
|
||||
// Import UI Accessibility components and services
|
||||
import {
|
||||
UiAccessibilityModule,
|
||||
LiveAnnouncerService,
|
||||
FocusMonitorService,
|
||||
KeyboardManagerService,
|
||||
HighContrastService,
|
||||
A11yConfigService
|
||||
} from 'ui-accessibility';
|
||||
|
||||
// Import UI Essentials components
|
||||
import { ButtonComponent } from 'ui-essentials';
|
||||
|
||||
@Component({
|
||||
selector: 'app-accessibility-demo',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UiAnimationsService, AnimateDirective } from 'ui-animations';
|
||||
import { UiAnimationsService } from '../../../../../ui-animations/src/lib/ui-animations.service';
|
||||
import { AnimateDirective } from '../../../../../ui-animations/src/lib/animate.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'app-animations-demo',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use 'ui-design-system/src/styles' as ui;
|
||||
@use '../../../../../ui-design-system/src/styles' as ui;
|
||||
|
||||
.backgrounds-demo {
|
||||
padding: 2rem;
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
BackgroundDirective,
|
||||
SolidBackgroundComponent,
|
||||
GradientBackgroundComponent,
|
||||
PatternBackgroundComponent,
|
||||
ImageBackgroundComponent,
|
||||
BackgroundService,
|
||||
SolidBackgroundConfig,
|
||||
LinearGradientConfig,
|
||||
PatternConfig,
|
||||
ImageBackgroundConfig
|
||||
} from 'ui-backgrounds';
|
||||
import { BackgroundDirective } from '../../../../../ui-backgrounds/src/lib/directives/background.directive';
|
||||
import { SolidBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/solid-background.component';
|
||||
import { GradientBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/gradient-background.component';
|
||||
import { PatternBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/pattern-background.component';
|
||||
import { ImageBackgroundComponent } from '../../../../../ui-backgrounds/src/lib/components/backgrounds/image-background.component';
|
||||
import { LinearGradientConfig, PatternConfig, SolidBackgroundConfig } from '../../../../../ui-backgrounds/src/lib/types/background.types';
|
||||
import { BackgroundService } from '../../../../../ui-backgrounds/src/lib/services/background.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-backgrounds-demo',
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
CodeSnippetComponent,
|
||||
InlineCodeComponent,
|
||||
CodeBlockComponent,
|
||||
CodeThemeService,
|
||||
CodeTheme
|
||||
} from 'ui-code-display';
|
||||
import { CodeSnippetComponent } from '../../../../../ui-code-display/src/lib/components/code-snippet/code-snippet.component';
|
||||
import { InlineCodeComponent } from '../../../../../ui-code-display/src/lib/components/inline-code/inline-code.component';
|
||||
import { CodeBlockComponent } from '../../../../../ui-code-display/src/lib/components/code-block/code-block.component';
|
||||
import { CodeTheme, CodeThemeService } from '../../../../../ui-code-display/src/lib/services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-code-display-demo',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
// Temporarily commented out until ui-landing-pages is built
|
||||
// import {
|
||||
// CTASectionComponent,
|
||||
// PricingTableComponent,
|
||||
// NewsletterSignupComponent,
|
||||
// ContactFormComponent
|
||||
// } from 'ui-landing-pages';
|
||||
// import {
|
||||
// CTASectionConfig,
|
||||
// PricingTableConfig,
|
||||
// NewsletterSignupConfig,
|
||||
// ContactFormConfig
|
||||
// } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-conversion-demo',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
// Temporarily commented out until ui-landing-pages is built
|
||||
// CTASectionComponent,
|
||||
// PricingTableComponent,
|
||||
// NewsletterSignupComponent,
|
||||
// ContactFormComponent
|
||||
],
|
||||
template: `
|
||||
<div class="conversion-demo">
|
||||
<div class="demo-section">
|
||||
<h1 class="demo-title">Conversion Components Demo</h1>
|
||||
<p class="demo-description">
|
||||
Phase 3 components focused on user actions and conversions, including CTAs, pricing tables, newsletter signups, and contact forms.
|
||||
</p>
|
||||
<div class="under-construction">
|
||||
<p><strong>🚧 Under Construction:</strong> This demo is temporarily disabled while the ui-landing-pages library is being built.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Temporarily commented out until ui-landing-pages is built -->
|
||||
`,
|
||||
styleUrls: ['./conversion-demo.component.scss']
|
||||
})
|
||||
export class ConversionDemoComponent {
|
||||
|
||||
// CTA Section Configurations
|
||||
// Temporarily commented out until ui-landing-pages is built
|
||||
/*
|
||||
ctaConfigGradient: CTASectionConfig = {
|
||||
title: "Transform Your Business Today",
|
||||
description: "Join thousands of companies already using our platform to accelerate growth and increase efficiency.",
|
||||
backgroundType: 'gradient',
|
||||
ctaPrimary: {
|
||||
text: 'Start Free Trial',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Primary CTA clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'Watch Demo',
|
||||
variant: 'outlined',
|
||||
action: () => console.log('Secondary CTA clicked')
|
||||
},
|
||||
urgency: {
|
||||
type: 'countdown',
|
||||
text: 'Limited Time Offer Ends In:',
|
||||
endDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000) // 5 days from now
|
||||
}
|
||||
};
|
||||
|
||||
ctaConfigPattern: CTASectionConfig = {
|
||||
title: "Don't Miss Out on This Exclusive Deal",
|
||||
description: "Get 50% off your first year and unlock premium features.",
|
||||
backgroundType: 'pattern',
|
||||
ctaPrimary: {
|
||||
text: 'Claim Offer Now',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Pattern CTA clicked')
|
||||
},
|
||||
urgency: {
|
||||
type: 'limited-offer',
|
||||
text: 'Flash Sale',
|
||||
remaining: 12
|
||||
}
|
||||
};
|
||||
|
||||
ctaConfigSolid: CTASectionConfig = {
|
||||
title: "Join Over 10,000 Happy Customers",
|
||||
description: "See why businesses trust us with their most important processes.",
|
||||
backgroundType: 'solid',
|
||||
ctaPrimary: {
|
||||
text: 'Get Started',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Solid CTA clicked')
|
||||
},
|
||||
urgency: {
|
||||
type: 'social-proof',
|
||||
text: '🔥 142 people signed up in the last 24 hours'
|
||||
}
|
||||
};
|
||||
|
||||
// Pricing Table Configuration
|
||||
pricingConfig: PricingTableConfig = {
|
||||
billingToggle: {
|
||||
monthlyLabel: 'Monthly',
|
||||
yearlyLabel: 'Yearly',
|
||||
discountText: 'Save 20%'
|
||||
},
|
||||
featuresComparison: true,
|
||||
highlightedPlan: 'pro',
|
||||
plans: [
|
||||
{
|
||||
id: 'starter',
|
||||
name: 'Starter',
|
||||
description: 'Perfect for small teams getting started',
|
||||
price: {
|
||||
monthly: 29,
|
||||
yearly: 24,
|
||||
currency: '$',
|
||||
suffix: '/month'
|
||||
},
|
||||
features: [
|
||||
{ name: 'Up to 5 team members', included: true },
|
||||
{ name: '10GB storage', included: true },
|
||||
{ name: 'Basic reporting', included: true },
|
||||
{ name: 'Email support', included: true },
|
||||
{ name: 'Advanced analytics', included: false },
|
||||
{ name: 'API access', included: false },
|
||||
{ name: 'Priority support', included: false }
|
||||
],
|
||||
cta: {
|
||||
text: 'Start Free Trial',
|
||||
action: () => console.log('Starter plan selected')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
description: 'Best for growing businesses',
|
||||
badge: 'Most Popular',
|
||||
popular: true,
|
||||
price: {
|
||||
monthly: 79,
|
||||
yearly: 63,
|
||||
currency: '$',
|
||||
suffix: '/month'
|
||||
},
|
||||
features: [
|
||||
{ name: 'Up to 25 team members', included: true },
|
||||
{ name: '100GB storage', included: true },
|
||||
{ name: 'Advanced reporting', included: true, highlight: true },
|
||||
{ name: 'Email & chat support', included: true },
|
||||
{ name: 'Advanced analytics', included: true, highlight: true },
|
||||
{ name: 'API access', included: true },
|
||||
{ name: 'Priority support', included: false }
|
||||
],
|
||||
cta: {
|
||||
text: 'Start Free Trial',
|
||||
action: () => console.log('Pro plan selected')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: 'Enterprise',
|
||||
description: 'For large organizations with custom needs',
|
||||
price: {
|
||||
monthly: 199,
|
||||
yearly: 159,
|
||||
currency: '$',
|
||||
suffix: '/month'
|
||||
},
|
||||
features: [
|
||||
{ name: 'Unlimited team members', included: true },
|
||||
{ name: 'Unlimited storage', included: true },
|
||||
{ name: 'Custom reporting', included: true },
|
||||
{ name: '24/7 phone support', included: true },
|
||||
{ name: 'Advanced analytics', included: true },
|
||||
{ name: 'Full API access', included: true },
|
||||
{ name: 'Priority support', included: true, highlight: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Contact Sales',
|
||||
variant: 'outlined',
|
||||
action: () => console.log('Enterprise plan selected')
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Newsletter Signup Configurations
|
||||
newsletterConfigInline: NewsletterSignupConfig = {
|
||||
title: "Stay Updated with Our Newsletter",
|
||||
description: "Get the latest insights, tips, and updates delivered to your inbox.",
|
||||
placeholder: "Enter your email address",
|
||||
ctaText: "Subscribe",
|
||||
variant: 'inline',
|
||||
successMessage: "Thanks for subscribing! Check your email for confirmation."
|
||||
};
|
||||
|
||||
newsletterConfigModal: NewsletterSignupConfig = {
|
||||
title: "Join Our Community",
|
||||
description: "Be the first to know about new features and exclusive content.",
|
||||
placeholder: "Your email address",
|
||||
ctaText: "Join Now",
|
||||
variant: 'modal',
|
||||
successMessage: "Welcome aboard! You're now part of our community."
|
||||
};
|
||||
|
||||
newsletterConfigFooter: NewsletterSignupConfig = {
|
||||
title: "Newsletter Signup",
|
||||
description: "Weekly insights and updates from our team.",
|
||||
placeholder: "Email address",
|
||||
ctaText: "Sign Up",
|
||||
variant: 'footer',
|
||||
showPrivacyCheckbox: true,
|
||||
privacyText: "We respect your privacy and will never spam you.",
|
||||
successMessage: "Successfully subscribed! Welcome to our newsletter."
|
||||
};
|
||||
|
||||
// Contact Form Configurations
|
||||
contactConfigTwoColumn: ContactFormConfig = {
|
||||
title: "Get in Touch",
|
||||
description: "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
|
||||
layout: 'two-column',
|
||||
submitText: 'Send Message',
|
||||
successMessage: "Thank you for your message! We'll get back to you within 24 hours.",
|
||||
validation: {},
|
||||
fields: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'firstName',
|
||||
label: 'First Name',
|
||||
placeholder: 'John',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'lastName',
|
||||
label: 'Last Name',
|
||||
placeholder: 'Doe',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
placeholder: 'john@example.com',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'tel',
|
||||
name: 'phone',
|
||||
label: 'Phone Number',
|
||||
placeholder: '+1 (555) 123-4567',
|
||||
required: false
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'subject',
|
||||
label: 'Subject',
|
||||
required: true,
|
||||
options: [
|
||||
{ value: 'general', label: 'General Inquiry' },
|
||||
{ value: 'support', label: 'Technical Support' },
|
||||
{ value: 'sales', label: 'Sales Question' },
|
||||
{ value: 'partnership', label: 'Partnership' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'message',
|
||||
label: 'Message',
|
||||
placeholder: 'Tell us more about your inquiry...',
|
||||
required: true,
|
||||
rows: 5
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
contactConfigSingleColumn: ContactFormConfig = {
|
||||
title: "Quick Contact",
|
||||
layout: 'single-column',
|
||||
submitText: 'Submit',
|
||||
successMessage: "Message sent successfully!",
|
||||
validation: {},
|
||||
fields: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'name',
|
||||
label: 'Full Name',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
label: 'Email Address',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'message',
|
||||
label: 'Your Message',
|
||||
required: true,
|
||||
rows: 4
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
name: 'newsletter',
|
||||
label: 'Subscribe to our newsletter for updates',
|
||||
required: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
contactConfigInline: ContactFormConfig = {
|
||||
layout: 'inline',
|
||||
submitText: 'Contact Us',
|
||||
successMessage: "We'll be in touch soon!",
|
||||
validation: {},
|
||||
fields: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'name',
|
||||
label: 'Name',
|
||||
placeholder: 'Your name',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
placeholder: 'your@email.com',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'company',
|
||||
label: 'Company',
|
||||
placeholder: 'Your company',
|
||||
required: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
onNewsletterSignup(data: any) {
|
||||
console.log('Newsletter signup:', data);
|
||||
}
|
||||
|
||||
onContactFormSubmit(data: any) {
|
||||
console.log('Contact form submission:', data);
|
||||
}
|
||||
*/
|
||||
}
|
||||
@@ -1,20 +1,12 @@
|
||||
import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FilterConfig, SortConfig, GroupByResult } from '../../../../../ui-data-utils/src/lib/types';
|
||||
import { sortBy, sortByMultiple } from '../../../../../ui-data-utils/src/lib/sorting';
|
||||
import { filterBy, filterByMultiple, searchFilter } from '../../../../../ui-data-utils/src/lib/filtering';
|
||||
import { getPaginationRange, paginate } from '../../../../../ui-data-utils/src/lib/pagination';
|
||||
import { aggregate, groupBy, pivot, pluck, unique } from '../../../../../ui-data-utils/src/lib/transformation';
|
||||
|
||||
// Import all utilities from ui-data-utils
|
||||
import {
|
||||
// Types
|
||||
SortConfig, FilterConfig, PaginationConfig,
|
||||
// Sorting
|
||||
sortBy, sortByMultiple, createComparator,
|
||||
// Filtering
|
||||
filterBy, filterByMultiple, searchFilter,
|
||||
// Pagination
|
||||
paginate, calculatePages, getPaginationRange,
|
||||
// Transformation
|
||||
groupBy, aggregate, pluck, flatten, pivot, unique, frequency
|
||||
} from 'ui-data-utils';
|
||||
|
||||
interface SampleData {
|
||||
id: number;
|
||||
@@ -600,11 +592,11 @@ export class DataUtilsDemoComponent {
|
||||
}
|
||||
|
||||
getSortedDataPreview(): string {
|
||||
return JSON.stringify(this.sortedData().slice(0, 3).map(item => ({ name: item.name, [this.sortField()]: item[this.sortField()] })), null, 2);
|
||||
return JSON.stringify(this.sortedData().slice(0, 3).map((item: SampleData) => ({ name: item.name, [this.sortField()]: item[this.sortField()] })), null, 2);
|
||||
}
|
||||
|
||||
getMultiSortedDataPreview(): string {
|
||||
return JSON.stringify(this.multiSortedData().slice(0, 4).map(item => ({
|
||||
return JSON.stringify(this.multiSortedData().slice(0, 4).map((item: SampleData) => ({
|
||||
name: item.name,
|
||||
department: item.department,
|
||||
salary: item.salary
|
||||
@@ -612,14 +604,14 @@ export class DataUtilsDemoComponent {
|
||||
}
|
||||
|
||||
getSearchFilteredDataPreview(): string {
|
||||
return JSON.stringify(this.searchFilteredData().slice(0, 3).map(item => ({
|
||||
return JSON.stringify(this.searchFilteredData().slice(0, 3).map((item: SampleData) => ({
|
||||
name: item.name,
|
||||
department: item.department
|
||||
})), null, 2);
|
||||
}
|
||||
|
||||
getPropertyFilteredDataPreview(): string {
|
||||
return JSON.stringify(this.propertyFilteredData().slice(0, 3).map(item => ({
|
||||
return JSON.stringify(this.propertyFilteredData().slice(0, 3).map((item: SampleData) => ({
|
||||
name: item.name,
|
||||
department: item.department,
|
||||
salary: item.salary
|
||||
@@ -627,7 +619,7 @@ export class DataUtilsDemoComponent {
|
||||
}
|
||||
|
||||
getPaginatedDataPreview(): string {
|
||||
return JSON.stringify(this.paginationResult().data.map(item => ({
|
||||
return JSON.stringify(this.paginationResult().data.map((item: SampleData) => ({
|
||||
name: item.name,
|
||||
department: item.department
|
||||
})), null, 2);
|
||||
@@ -635,16 +627,16 @@ export class DataUtilsDemoComponent {
|
||||
|
||||
getGroupedDataPreview(): string {
|
||||
const grouped = groupBy(this.sampleData, 'department');
|
||||
return JSON.stringify(grouped.map(group => ({
|
||||
return JSON.stringify(grouped.map((group: GroupByResult<SampleData>) => ({
|
||||
department: group.key,
|
||||
count: group.count,
|
||||
employees: group.items.map(emp => emp.name)
|
||||
employees: group.items.map((emp: SampleData) => emp.name)
|
||||
})), null, 2);
|
||||
}
|
||||
|
||||
getAggregationPreview(): string {
|
||||
const grouped = groupBy(this.sampleData, 'department');
|
||||
const result = grouped.map(group => ({
|
||||
const result = grouped.map((group: GroupByResult<SampleData>) => ({
|
||||
department: group.key,
|
||||
...aggregate(group.items, 'salary', ['sum', 'avg', 'min', 'max', 'count'])
|
||||
}));
|
||||
@@ -668,7 +660,7 @@ export class DataUtilsDemoComponent {
|
||||
}
|
||||
|
||||
getCombinedResultPreview(): string {
|
||||
return JSON.stringify(this.combinedPaginated().data.map(item => ({
|
||||
return JSON.stringify(this.combinedPaginated().data.map((item: SampleData) => ({
|
||||
name: item.name,
|
||||
department: item.department,
|
||||
salary: item.salary,
|
||||
|
||||
@@ -83,15 +83,26 @@ import { InfiniteScrollContainerDemoComponent } from './infinite-scroll-containe
|
||||
import { StickyLayoutDemoComponent } from './sticky-layout-demo/sticky-layout-demo.component';
|
||||
import { SplitViewDemoComponent } from './split-view-demo/split-view-demo.component';
|
||||
import { GalleryGridDemoComponent } from './gallery-grid-demo/gallery-grid-demo.component';
|
||||
import { AnimationsDemoComponent } from './animations-demo/animations-demo.component';
|
||||
import { AccessibilityDemoComponent } from './accessibility-demo/accessibility-demo.component';
|
||||
import { SelectDemoComponent } from './select-demo/select-demo.component';
|
||||
import { TextareaDemoComponent } from './textarea-demo/textarea-demo.component';
|
||||
import { DataUtilsDemoComponent } from './data-utils-demo/data-utils-demo.component';
|
||||
import { HclStudioDemoComponent } from './hcl-studio-demo/hcl-studio-demo.component';
|
||||
import { FontManagerDemoComponent } from './font-manager-demo/font-manager-demo.component';
|
||||
import { CodeDisplayDemoComponent } from './code-display-demo/code-display-demo.component';
|
||||
import { BackgroundsDemoComponent } from './backgrounds-demo/backgrounds-demo.component';
|
||||
import { ConversionDemoComponent } from './conversion-demo/conversion-demo.component';
|
||||
import { LandingHeaderDemoComponent } from './landing-header-demo/landing-header-demo.component';
|
||||
import { LandingFooterDemoComponent } from './landing-footer-demo/landing-footer-demo.component';
|
||||
import { LandingFAQDemoComponent } from './landing-faq-demo/landing-faq-demo.component';
|
||||
import { LandingTemplatesDemoComponent } from "./landing-templates-demo/landing-templates-demo.component";
|
||||
import { LandingTimelineDemoComponent } from "./landing-timeline-demo/landing-timeline-demo.component";
|
||||
import { LandingTeamDemoComponent } from "./landing-team-demo/landing-team-demo.component";
|
||||
import { LandingStatisticsDemoComponent } from "./landing-statistics-demo/landing-statistics-demo.component";
|
||||
import { LandingFeatureGridDemoComponent } from "./landing-feature-grid-demo/landing-feature-grid-demo.component";
|
||||
import { LandingTestimonialsDemoComponent } from "./landing-testimonials-demo/landing-testimonials-demo.component";
|
||||
import { LandingLogoCloudDemoComponent } from "./landing-logo-cloud-demo/landing-logo-cloud-demo.component";
|
||||
import { AnimationsDemoComponent } from "./animations-demo/animations-demo.component";
|
||||
import { CodeDisplayDemoComponent } from "./code-display-demo/code-display-demo.component";
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -196,7 +207,7 @@ import { BackgroundsDemoComponent } from './backgrounds-demo/backgrounds-demo.co
|
||||
}
|
||||
|
||||
@case ("video-player") {
|
||||
<ui-video-player-demo></ui-video-player-demo>
|
||||
<app-video-player-demo></app-video-player-demo>
|
||||
}
|
||||
|
||||
@case ("modal") {
|
||||
@@ -459,6 +470,51 @@ import { BackgroundsDemoComponent } from './backgrounds-demo/backgrounds-demo.co
|
||||
<app-backgrounds-demo></app-backgrounds-demo>
|
||||
}
|
||||
|
||||
@case ("conversion") {
|
||||
<app-conversion-demo></app-conversion-demo>
|
||||
}
|
||||
|
||||
@case ("landing-faq") {
|
||||
<app-landing-faq-demo></app-landing-faq-demo>
|
||||
}
|
||||
|
||||
@case ("landing-feature-grid") {
|
||||
<app-landing-feature-grid-demo></app-landing-feature-grid-demo>
|
||||
}
|
||||
|
||||
@case ("landing-testimonials") {
|
||||
<app-landing-testimonials-demo></app-landing-testimonials-demo>
|
||||
}
|
||||
|
||||
@case ("landing-logo-cloud") {
|
||||
<app-landing-logo-cloud-demo></app-landing-logo-cloud-demo>
|
||||
}
|
||||
|
||||
@case ("landing-statistics") {
|
||||
<app-landing-statistics-demo></app-landing-statistics-demo>
|
||||
}
|
||||
|
||||
@case ("landing-header") {
|
||||
<app-landing-header-demo></app-landing-header-demo>
|
||||
}
|
||||
|
||||
@case ("landing-footer") {
|
||||
<app-landing-footer-demo></app-landing-footer-demo>
|
||||
}
|
||||
|
||||
@case ("landing-team") {
|
||||
<app-landing-team-demo></app-landing-team-demo>
|
||||
}
|
||||
|
||||
@case ("landing-timeline") {
|
||||
<app-landing-timeline-demo></app-landing-timeline-demo>
|
||||
}
|
||||
|
||||
@case ("landing-templates") {
|
||||
<app-landing-templates-demo></app-landing-templates-demo>
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
`,
|
||||
@@ -468,13 +524,26 @@ import { BackgroundsDemoComponent } from './backgrounds-demo/backgrounds-demo.co
|
||||
RadioDemoComponent, CheckboxDemoComponent,
|
||||
SearchDemoComponent, SwitchDemoComponent, ProgressDemoComponent,
|
||||
AppbarDemoComponent, BottomNavigationDemoComponent, FontAwesomeDemoComponent, ImageContainerDemoComponent,
|
||||
CarouselDemoComponent, VideoPlayerDemoComponent, ListDemoComponent,
|
||||
CarouselDemoComponent, VideoPlayerDemoComponent, ListDemoComponent,
|
||||
ModalDemoComponent, DrawerDemoComponent, DatePickerDemoComponent, TimePickerDemoComponent,
|
||||
GridSystemDemoComponent, SpacerDemoComponent, ContainerDemoComponent, PaginationDemoComponent,
|
||||
SkeletonLoaderDemoComponent, EmptyStateDemoComponent, FileUploadDemoComponent, FormFieldDemoComponent,
|
||||
AutocompleteDemoComponent, BackdropDemoComponent, OverlayContainerDemoComponent, LoadingSpinnerDemoComponent,
|
||||
ProgressCircleDemoComponent, RangeSliderDemoComponent, ColorPickerDemoComponent, DividerDemoComponent, TooltipDemoComponent, AccordionDemoComponent,
|
||||
PopoverDemoComponent, AlertDemoComponent, SnackbarDemoComponent, ToastDemoComponent, TreeViewDemoComponent, TimelineDemoComponent, StepperDemoComponent, FabMenuDemoComponent, EnhancedTableDemoComponent, SplitButtonDemoComponent, CommandPaletteDemoComponent, FloatingToolbarDemoComponent, TransferListDemoComponent, TagInputDemoComponent, StackDemoComponent, BoxDemoComponent, CenterDemoComponent, AspectRatioDemoComponent, BentoGridDemoComponent, BreakpointContainerDemoComponent, SectionDemoComponent, FlexDemoComponent, ColumnDemoComponent, SidebarLayoutDemoComponent, ScrollContainerDemoComponent, InfiniteScrollContainerDemoComponent, TabsContainerDemoComponent, DashboardShellDemoComponent, GridContainerDemoComponent, FeedLayoutDemoComponent, ListDetailLayoutDemoComponent, SupportingPaneLayoutDemoComponent, MasonryDemoComponent, StickyLayoutDemoComponent, SplitViewDemoComponent, GalleryGridDemoComponent, AnimationsDemoComponent, AccessibilityDemoComponent, SelectDemoComponent, TextareaDemoComponent, DataUtilsDemoComponent, HclStudioDemoComponent, FontManagerDemoComponent, CodeDisplayDemoComponent, BackgroundsDemoComponent]
|
||||
PopoverDemoComponent, AlertDemoComponent, SnackbarDemoComponent, ToastDemoComponent, TreeViewDemoComponent, TimelineDemoComponent, StepperDemoComponent,
|
||||
FabMenuDemoComponent, EnhancedTableDemoComponent, SplitButtonDemoComponent,
|
||||
CommandPaletteDemoComponent, FloatingToolbarDemoComponent, TransferListDemoComponent, TagInputDemoComponent,
|
||||
StackDemoComponent, BoxDemoComponent, CenterDemoComponent, AspectRatioDemoComponent, BentoGridDemoComponent, BreakpointContainerDemoComponent, SectionDemoComponent,
|
||||
FlexDemoComponent, ColumnDemoComponent, SidebarLayoutDemoComponent, ScrollContainerDemoComponent,
|
||||
InfiniteScrollContainerDemoComponent, TabsContainerDemoComponent, DashboardShellDemoComponent, GridContainerDemoComponent, FeedLayoutDemoComponent,
|
||||
ListDetailLayoutDemoComponent, SupportingPaneLayoutDemoComponent, MasonryDemoComponent, StickyLayoutDemoComponent, SplitViewDemoComponent,
|
||||
GalleryGridDemoComponent, AccessibilityDemoComponent, SelectDemoComponent, TextareaDemoComponent, DataUtilsDemoComponent, HclStudioDemoComponent,
|
||||
FontManagerDemoComponent, BackgroundsDemoComponent,
|
||||
ConversionDemoComponent, LandingFAQDemoComponent,
|
||||
LandingFeatureGridDemoComponent, LandingTestimonialsDemoComponent, LandingLogoCloudDemoComponent, LandingStatisticsDemoComponent, LandingHeaderDemoComponent,
|
||||
LandingFooterDemoComponent, LandingTeamDemoComponent, LandingTimelineDemoComponent, LandingTemplatesDemoComponent,
|
||||
LandingTemplatesDemoComponent, LandingTimelineDemoComponent, LandingTeamDemoComponent, LandingFooterDemoComponent, LandingHeaderDemoComponent, LandingStatisticsDemoComponent,
|
||||
LandingFeatureGridDemoComponent, LandingTestimonialsDemoComponent, LandingLogoCloudDemoComponent, AnimationsDemoComponent, CodeDisplayDemoComponent]
|
||||
})
|
||||
|
||||
|
||||
|
||||
@@ -3,15 +3,12 @@ import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { BrandColors, ThemePreview } from '../../../../../hcl-studio/src/lib/models/hcl.models';
|
||||
import { HCLStudioService } from '../../../../../hcl-studio/src/lib/hcl-studio.service';
|
||||
import { HCLConverter } from '../../../../../hcl-studio/src/lib/core/hcl-converter';
|
||||
import { DEFAULT_THEMES } from '../../../../../hcl-studio/src/lib/themes/theme-presets';
|
||||
|
||||
|
||||
import {
|
||||
HCLStudioService,
|
||||
DEFAULT_THEMES,
|
||||
ThemePreview,
|
||||
BrandColors,
|
||||
HCLConverter,
|
||||
PaletteGenerator
|
||||
} from 'hcl-studio';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hcl-studio-demo',
|
||||
@@ -221,7 +218,7 @@ export class HclStudioDemoComponent implements OnInit, OnDestroy {
|
||||
// Subscribe to theme changes
|
||||
this.hclStudio.themeState$
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(state => {
|
||||
.subscribe((state: any) => {
|
||||
this.availableThemes = state.availableThemes;
|
||||
if (state.currentTheme) {
|
||||
this.currentTheme = {
|
||||
@@ -238,7 +235,7 @@ export class HclStudioDemoComponent implements OnInit, OnDestroy {
|
||||
// Subscribe to mode changes
|
||||
this.hclStudio.currentMode$
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(mode => {
|
||||
.subscribe((mode: string) => {
|
||||
this.isDarkMode = mode === 'dark';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<div class="hero-demo">
|
||||
<h2>Hero Components Demo</h2>
|
||||
|
||||
<!-- Basic Hero Section -->
|
||||
<section class="demo-section">
|
||||
<h3>Basic Hero Section</h3>
|
||||
<p>A gradient hero with centered content and dual CTAs</p>
|
||||
<ui-lp-hero
|
||||
[configuration]="basicHeroConfig"
|
||||
(ctaClicked)="onCtaClick('Basic hero CTA clicked')">
|
||||
</ui-lp-hero>
|
||||
</section>
|
||||
|
||||
<!-- Light Hero Section -->
|
||||
<section class="demo-section">
|
||||
<h3>Light Hero Section</h3>
|
||||
<p>Clean design with left-aligned content</p>
|
||||
<ui-lp-hero
|
||||
[configuration]="lightHeroConfig"
|
||||
(ctaClicked)="onCtaClick('Light hero CTA clicked')">
|
||||
</ui-lp-hero>
|
||||
</section>
|
||||
|
||||
<!-- Animated Background Hero -->
|
||||
<section class="demo-section">
|
||||
<h3>Animated Background Hero</h3>
|
||||
<p>Full height with animated gradient background</p>
|
||||
<ui-lp-hero
|
||||
[configuration]="darkHeroConfig"
|
||||
(ctaClicked)="onCtaClick('Dark hero CTA clicked')">
|
||||
</ui-lp-hero>
|
||||
</section>
|
||||
|
||||
<!-- Hero With Image - Split Layout -->
|
||||
<section class="demo-section">
|
||||
<h3>Hero With Image</h3>
|
||||
<p>Split layout with image on the right</p>
|
||||
<ui-lp-hero-image
|
||||
[configuration]="splitImageConfig"
|
||||
(ctaClicked)="onCtaClick('Split image hero CTA clicked')">
|
||||
</ui-lp-hero-image>
|
||||
</section>
|
||||
|
||||
<!-- Hero With Image - Overlay Style -->
|
||||
<section class="demo-section">
|
||||
<h3>Hero Image - Different Layout</h3>
|
||||
<p>Image on left with gradient background</p>
|
||||
<ui-lp-hero-image
|
||||
[configuration]="overlayImageConfig"
|
||||
(ctaClicked)="onCtaClick('Overlay image hero CTA clicked')">
|
||||
</ui-lp-hero-image>
|
||||
</section>
|
||||
|
||||
<!-- Split Screen Hero - Text Content -->
|
||||
<section class="demo-section">
|
||||
<h3>Split Screen Hero - Text</h3>
|
||||
<p>50/50 split with text content on both sides</p>
|
||||
<ui-lp-hero-split
|
||||
[configuration]="textSplitConfig"
|
||||
(ctaClicked)="onCtaClick('Text split hero CTA clicked')">
|
||||
</ui-lp-hero-split>
|
||||
</section>
|
||||
|
||||
<!-- Split Screen Hero - Mixed Media -->
|
||||
<section class="demo-section">
|
||||
<h3>Split Screen Hero - Mixed Media</h3>
|
||||
<p>60/40 split with text and image content</p>
|
||||
<ui-lp-hero-split
|
||||
[configuration]="mediaSplitConfig"
|
||||
(ctaClicked)="onCtaClick('Media split hero CTA clicked')">
|
||||
</ui-lp-hero-split>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
.hero-demo {
|
||||
h2 {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
color: var(--semantic-color-text-primary);
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--semantic-color-text-primary);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--semantic-color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
padding: 0 1rem;
|
||||
background: var(--semantic-color-surface-elevated);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 3px solid var(--semantic-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure demo sections don't interfere with hero component styles
|
||||
.demo-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--semantic-shadow-card-rest);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--semantic-shadow-card-hover);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroSectionsDemoComponent } from './hero-sections-demo.component';
|
||||
|
||||
describe('HeroSectionsDemoComponent', () => {
|
||||
let component: HeroSectionsDemoComponent;
|
||||
let fixture: ComponentFixture<HeroSectionsDemoComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [HeroSectionsDemoComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(HeroSectionsDemoComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
HeroSectionComponent,
|
||||
HeroWithImageComponent,
|
||||
HeroSplitScreenComponent
|
||||
} from 'ui-landing-pages';
|
||||
import {
|
||||
HeroConfig,
|
||||
HeroImageConfig,
|
||||
HeroSplitConfig,
|
||||
CTAButton
|
||||
} from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hero-sections-demo',
|
||||
imports: [
|
||||
CommonModule,
|
||||
HeroSectionComponent,
|
||||
HeroWithImageComponent,
|
||||
HeroSplitScreenComponent
|
||||
],
|
||||
templateUrl: './hero-sections-demo.component.html',
|
||||
styleUrl: './hero-sections-demo.component.scss'
|
||||
})
|
||||
export class HeroSectionsDemoComponent {
|
||||
|
||||
// Hero Section Configs
|
||||
basicHeroConfig: HeroConfig = {
|
||||
title: 'Build Amazing Landing Pages',
|
||||
subtitle: 'Create stunning websites with our comprehensive component library',
|
||||
alignment: 'center',
|
||||
backgroundType: 'gradient',
|
||||
minHeight: 'large',
|
||||
ctaPrimary: {
|
||||
text: 'Get Started',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Primary CTA clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'Learn More',
|
||||
variant: 'outlined',
|
||||
action: () => console.log('Secondary CTA clicked')
|
||||
}
|
||||
};
|
||||
|
||||
lightHeroConfig: HeroConfig = {
|
||||
title: 'Clean & Modern Design',
|
||||
subtitle: 'Designed for the modern web',
|
||||
alignment: 'left',
|
||||
backgroundType: 'solid',
|
||||
minHeight: 'medium',
|
||||
ctaPrimary: {
|
||||
text: 'Explore Features',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Explore clicked')
|
||||
}
|
||||
};
|
||||
|
||||
darkHeroConfig: HeroConfig = {
|
||||
title: 'Dark Mode Ready',
|
||||
subtitle: 'Perfect for dark interfaces',
|
||||
alignment: 'right',
|
||||
backgroundType: 'animated',
|
||||
minHeight: 'full',
|
||||
ctaPrimary: {
|
||||
text: 'Try Dark Mode',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Dark mode clicked')
|
||||
}
|
||||
};
|
||||
|
||||
// Hero With Image Configs
|
||||
splitImageConfig: HeroImageConfig = {
|
||||
title: 'Hero with Image',
|
||||
subtitle: 'Perfect split layout',
|
||||
alignment: 'left',
|
||||
backgroundType: 'solid',
|
||||
minHeight: 'large',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
|
||||
imageAlt: 'Team collaboration',
|
||||
imagePosition: 'right',
|
||||
imageMobile: 'below',
|
||||
ctaPrimary: {
|
||||
text: 'Start Building',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Start building clicked')
|
||||
}
|
||||
};
|
||||
|
||||
overlayImageConfig: HeroImageConfig = {
|
||||
title: 'Overlay Hero Style',
|
||||
subtitle: 'Text over image',
|
||||
alignment: 'center',
|
||||
backgroundType: 'gradient',
|
||||
minHeight: 'full',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
|
||||
imageAlt: 'Modern office space',
|
||||
imagePosition: 'left',
|
||||
imageMobile: 'above',
|
||||
ctaPrimary: {
|
||||
text: 'View Gallery',
|
||||
variant: 'filled',
|
||||
action: () => console.log('View gallery clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'Learn More',
|
||||
variant: 'outlined',
|
||||
action: () => console.log('Learn more clicked')
|
||||
}
|
||||
};
|
||||
|
||||
// Hero Split Screen Configs
|
||||
textSplitConfig: HeroSplitConfig = {
|
||||
title: 'Split Screen Hero',
|
||||
subtitle: 'Powerful dual-content layout',
|
||||
alignment: 'center',
|
||||
backgroundType: 'solid',
|
||||
minHeight: 'large',
|
||||
splitRatio: '50-50',
|
||||
leftContent: {
|
||||
type: 'text',
|
||||
content: '<h3>Powerful Features</h3><p>Everything you need to build professional landing pages with our comprehensive component library.</p>'
|
||||
},
|
||||
rightContent: {
|
||||
type: 'text',
|
||||
content: '<h3>Easy to Use</h3><p>Drop-in components that work seamlessly with your existing Angular applications.</p>'
|
||||
}
|
||||
};
|
||||
|
||||
mediaSplitConfig: HeroSplitConfig = {
|
||||
title: 'Media Split Hero',
|
||||
subtitle: 'Text and image combination',
|
||||
alignment: 'left',
|
||||
backgroundType: 'gradient',
|
||||
minHeight: 'large',
|
||||
splitRatio: '60-40',
|
||||
leftContent: {
|
||||
type: 'text',
|
||||
content: '<h3>See It In Action</h3><p>Watch our components come to life with interactive examples and real-world use cases.</p>'
|
||||
},
|
||||
rightContent: {
|
||||
type: 'image',
|
||||
content: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80'
|
||||
}
|
||||
};
|
||||
|
||||
onCtaClick(message: string): void {
|
||||
console.log(message);
|
||||
// In a real app, you might navigate to a different route or open a modal
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FAQSectionComponent, FAQConfig } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-faq-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FAQSectionComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h1>FAQ Section Demo</h1>
|
||||
<p>Interactive FAQ component with accordion functionality and search.</p>
|
||||
<div class="under-construction">
|
||||
<p><strong>🚧 Under Construction:</strong> This demo is temporarily disabled while the ui-landing-pages library is being built.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Temporarily commented out until ui-landing-pages is built
|
||||
<div style="display: none;">
|
||||
<div class="demo-section">
|
||||
<h2>Default FAQ</h2>
|
||||
<ui-lp-faq [configuration]="defaultConfig"></ui-lp-faq>
|
||||
</div>
|
||||
|
||||
<!-- Bordered FAQ -->
|
||||
<div class="demo-section">
|
||||
<h2>Bordered Theme</h2>
|
||||
<ui-lp-faq [configuration]="borderedConfig"></ui-lp-faq>
|
||||
</div>
|
||||
|
||||
<!-- Minimal FAQ -->
|
||||
<div class="demo-section">
|
||||
<h2>Minimal Theme</h2>
|
||||
<ui-lp-faq [configuration]="minimalConfig"></ui-lp-faq>
|
||||
</div>
|
||||
|
||||
<!-- Multiple Expand FAQ -->
|
||||
<div class="demo-section">
|
||||
<h2>Multiple Expand Enabled</h2>
|
||||
<ui-lp-faq [configuration]="multipleExpandConfig"></ui-lp-faq>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
font-size: 1.125rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingFAQDemoComponent {
|
||||
defaultConfig: FAQConfig = {
|
||||
title: 'Frequently Asked Questions',
|
||||
subtitle: 'Find answers to common questions about our platform',
|
||||
searchEnabled: true,
|
||||
expandMultiple: false,
|
||||
theme: 'default',
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
question: 'What is included in the free plan?',
|
||||
answer: 'The free plan includes up to 5 projects, 2GB storage, and basic support. Perfect for getting started with small projects.'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
question: 'Can I upgrade or downgrade my plan at any time?',
|
||||
answer: 'Yes, you can change your plan at any time. Upgrades take effect immediately, while downgrades take effect at the next billing cycle.'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
question: 'Is my data secure?',
|
||||
answer: 'Absolutely. We use enterprise-grade encryption, regular security audits, and comply with SOC 2 Type II standards to protect your data.'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
question: 'Do you offer customer support?',
|
||||
answer: 'Yes! We provide 24/7 email support for all users, with priority phone support available for Pro and Enterprise customers.'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
question: 'Can I cancel my subscription anytime?',
|
||||
answer: 'Yes, you can cancel your subscription at any time. Your account will remain active until the end of your current billing period.'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
borderedConfig: FAQConfig = {
|
||||
...this.defaultConfig,
|
||||
title: 'Product Questions',
|
||||
subtitle: 'Everything you need to know about our product features',
|
||||
theme: 'bordered',
|
||||
items: [
|
||||
{
|
||||
id: '6',
|
||||
question: 'How do I integrate with third-party services?',
|
||||
answer: 'Our platform offers REST APIs, webhooks, and pre-built integrations with popular services like Slack, GitHub, and Zapier.'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
question: 'What file formats do you support?',
|
||||
answer: 'We support all major file formats including PDF, Word, Excel, PowerPoint, images (PNG, JPG, SVG), and various code files.'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
question: 'Is there a mobile app available?',
|
||||
answer: 'Yes! Our mobile apps are available for both iOS and Android, with full feature parity to the web application.'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
minimalConfig: FAQConfig = {
|
||||
...this.defaultConfig,
|
||||
title: 'Technical FAQ',
|
||||
subtitle: 'Answers to technical questions',
|
||||
theme: 'minimal',
|
||||
searchEnabled: false,
|
||||
items: [
|
||||
{
|
||||
id: '9',
|
||||
question: 'What are your API rate limits?',
|
||||
answer: 'Free accounts: 100 requests/hour. Pro accounts: 1,000 requests/hour. Enterprise: Custom limits based on your needs.'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
question: 'Do you provide webhooks?',
|
||||
answer: 'Yes, we support webhooks for real-time event notifications. You can configure them in your dashboard settings.'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
question: 'What programming languages do you support?',
|
||||
answer: 'We provide SDKs for JavaScript, Python, Ruby, PHP, Go, and .NET. REST APIs are available for any language.'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
multipleExpandConfig: FAQConfig = {
|
||||
...this.defaultConfig,
|
||||
title: 'Detailed FAQ',
|
||||
subtitle: 'Comprehensive answers to all your questions',
|
||||
expandMultiple: true,
|
||||
items: [
|
||||
{
|
||||
id: '12',
|
||||
question: 'How does billing work?',
|
||||
answer: 'Billing is processed monthly or annually based on your preference. You can view detailed invoices in your account dashboard and update payment methods anytime.'
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
question: 'Can I export my data?',
|
||||
answer: 'Yes, you can export all your data in various formats (CSV, JSON, XML) at any time. Enterprise customers also get automated backup options.'
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
question: 'What happens if I exceed my plan limits?',
|
||||
answer: 'If you approach your limits, we\'ll notify you in advance. You can either upgrade your plan or purchase additional resources as needed.'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
&__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);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-code {
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: $semantic-color-text-primary;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FeatureGridComponent, FeatureGridConfig, FeatureItem } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-feature-grid-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FeatureGridComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div style="padding: 2rem;">
|
||||
<h2>Feature Grid Component</h2>
|
||||
<p style="margin-bottom: 2rem; color: #666;">Showcase features in responsive grid layouts with icons, images, and links</p>
|
||||
|
||||
<!-- Basic Feature Grid -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Basic Grid</h3>
|
||||
<ui-lp-feature-grid
|
||||
[configuration]="basicConfig">
|
||||
</ui-lp-feature-grid>
|
||||
</section>
|
||||
|
||||
<!-- Card Variant -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Card Variant</h3>
|
||||
<ui-lp-feature-grid
|
||||
[configuration]="cardConfig">
|
||||
</ui-lp-feature-grid>
|
||||
</section>
|
||||
|
||||
<!-- Minimal Variant -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Minimal Variant</h3>
|
||||
<ui-lp-feature-grid
|
||||
[configuration]="minimalConfig">
|
||||
</ui-lp-feature-grid>
|
||||
</section>
|
||||
|
||||
<!-- List Layout -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">List Layout</h3>
|
||||
<ui-lp-feature-grid
|
||||
[configuration]="listConfig">
|
||||
</ui-lp-feature-grid>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Code -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Configuration</h3>
|
||||
<pre class="demo-code">{{ configExample }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './landing-feature-grid-demo.component.scss'
|
||||
})
|
||||
export class LandingFeatureGridDemoComponent {
|
||||
private sampleFeatures: FeatureItem[] = [
|
||||
{
|
||||
id: 'security',
|
||||
title: 'Advanced Security',
|
||||
description: 'Enterprise-grade security with end-to-end encryption and compliance certifications.',
|
||||
icon: 'shield-alt',
|
||||
iconType: 'fa',
|
||||
link: {
|
||||
url: '#security',
|
||||
text: 'Learn more',
|
||||
target: '_self'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'performance',
|
||||
title: 'Lightning Fast',
|
||||
description: 'Optimized for speed with CDN delivery and smart caching mechanisms.',
|
||||
icon: 'bolt',
|
||||
iconType: 'fa',
|
||||
link: {
|
||||
url: '#performance',
|
||||
text: 'View benchmarks',
|
||||
target: '_self'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'analytics',
|
||||
title: 'Smart Analytics',
|
||||
description: 'Gain insights with real-time analytics and customizable dashboards.',
|
||||
icon: 'chart-line',
|
||||
iconType: 'fa',
|
||||
link: {
|
||||
url: '#analytics',
|
||||
text: 'Explore features',
|
||||
target: '_self'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'support',
|
||||
title: '24/7 Support',
|
||||
description: 'Get help whenever you need it with our dedicated support team.',
|
||||
icon: 'headset',
|
||||
iconType: 'fa',
|
||||
link: {
|
||||
url: '#support',
|
||||
text: 'Contact us',
|
||||
target: '_self'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
basicConfig: FeatureGridConfig = {
|
||||
title: 'Why Choose Our Platform',
|
||||
subtitle: 'Discover the features that make us different',
|
||||
features: this.sampleFeatures,
|
||||
layout: 'grid',
|
||||
columns: 'auto',
|
||||
variant: 'card',
|
||||
showIcons: true,
|
||||
spacing: 'normal'
|
||||
};
|
||||
|
||||
cardConfig: FeatureGridConfig = {
|
||||
title: 'Platform Features',
|
||||
features: this.sampleFeatures,
|
||||
layout: 'grid',
|
||||
columns: 2,
|
||||
variant: 'card',
|
||||
showIcons: true,
|
||||
spacing: 'loose'
|
||||
};
|
||||
|
||||
minimalConfig: FeatureGridConfig = {
|
||||
features: this.sampleFeatures.slice(0, 3),
|
||||
layout: 'grid',
|
||||
columns: 3,
|
||||
variant: 'minimal',
|
||||
showIcons: true,
|
||||
spacing: 'tight'
|
||||
};
|
||||
|
||||
listConfig: FeatureGridConfig = {
|
||||
title: 'Core Capabilities',
|
||||
features: this.sampleFeatures.slice(0, 3),
|
||||
layout: 'list',
|
||||
variant: 'minimal',
|
||||
showIcons: true,
|
||||
spacing: 'normal'
|
||||
};
|
||||
|
||||
configExample = `const featureGridConfig: FeatureGridConfig = {
|
||||
title: 'Why Choose Our Platform',
|
||||
subtitle: 'Discover the features that make us different',
|
||||
features: [
|
||||
{
|
||||
id: 'security',
|
||||
title: 'Advanced Security',
|
||||
description: 'Enterprise-grade security with end-to-end encryption.',
|
||||
icon: 'shield-alt',
|
||||
iconType: 'fa',
|
||||
link: {
|
||||
url: '#security',
|
||||
text: 'Learn more'
|
||||
}
|
||||
}
|
||||
// ... more features
|
||||
],
|
||||
layout: 'grid',
|
||||
columns: 'auto',
|
||||
variant: 'card',
|
||||
showIcons: true,
|
||||
spacing: 'normal'
|
||||
};`;
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FooterSectionComponent, FooterConfig, FooterLink } from 'ui-landing-pages';
|
||||
import { ButtonComponent } from 'ui-essentials';
|
||||
import { VStackComponent } from 'ui-essentials';
|
||||
import { SectionComponent } from 'ui-essentials';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-footer-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FooterSectionComponent, ButtonComponent, VStackComponent, SectionComponent],
|
||||
template: `
|
||||
<ui-vstack [spacing]="'xl'">
|
||||
<ui-section>
|
||||
<h2>Landing Footer - Light Theme</h2>
|
||||
<p>Comprehensive footer with multiple columns, newsletter signup, and social links.</p>
|
||||
|
||||
<ui-lp-footer
|
||||
[configuration]="lightFooterConfig()"
|
||||
(linkClicked)="onLinkClicked($event)"
|
||||
(newsletterSubmitted)="onNewsletterSubmitted($event)">
|
||||
</ui-lp-footer>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Landing Footer - Dark Theme</h2>
|
||||
<p>Dark theme footer with company branding and legal links.</p>
|
||||
|
||||
<ui-lp-footer
|
||||
[configuration]="darkFooterConfig()"
|
||||
(linkClicked)="onLinkClicked($event)"
|
||||
(newsletterSubmitted)="onNewsletterSubmitted($event)">
|
||||
</ui-lp-footer>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Landing Footer - Minimal</h2>
|
||||
<p>Simple footer with just essential links and copyright.</p>
|
||||
|
||||
<ui-lp-footer
|
||||
[configuration]="minimalFooterConfig()"
|
||||
(linkClicked)="onLinkClicked($event)">
|
||||
</ui-lp-footer>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Configuration Options</h2>
|
||||
<div class="demo-controls">
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="toggleTheme()"
|
||||
class="demo-control">
|
||||
Theme: {{ lightFooterConfig().theme }}
|
||||
</ui-button>
|
||||
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="toggleDivider()"
|
||||
class="demo-control">
|
||||
Show Divider: {{ lightFooterConfig().showDivider ? 'ON' : 'OFF' }}
|
||||
</ui-button>
|
||||
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="addColumn()"
|
||||
class="demo-control">
|
||||
Add Column
|
||||
</ui-button>
|
||||
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="removeColumn()"
|
||||
class="demo-control">
|
||||
Remove Column
|
||||
</ui-button>
|
||||
</div>
|
||||
</ui-section>
|
||||
</ui-vstack>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.demo-control {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingFooterDemoComponent {
|
||||
lightFooterConfig = signal<FooterConfig>({
|
||||
logo: {
|
||||
text: 'UI Suite',
|
||||
url: '/'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
id: 'product',
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ id: 'features', label: 'Features', route: '/features' },
|
||||
{ id: 'pricing', label: 'Pricing', route: '/pricing' },
|
||||
{ id: 'integrations', label: 'Integrations', route: '/integrations' },
|
||||
{ id: 'api', label: 'API', route: '/api' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'company',
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ id: 'about', label: 'About Us', route: '/about' },
|
||||
{ id: 'careers', label: 'Careers', route: '/careers', badge: '5 open' },
|
||||
{ id: 'blog', label: 'Blog', route: '/blog' },
|
||||
{ id: 'press', label: 'Press', route: '/press' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'resources',
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{ id: 'docs', label: 'Documentation', route: '/docs' },
|
||||
{ id: 'guides', label: 'Guides', route: '/guides' },
|
||||
{ id: 'help', label: 'Help Center', route: '/help' },
|
||||
{ id: 'community', label: 'Community', url: 'https://discord.gg/example', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'legal',
|
||||
title: 'Legal',
|
||||
items: [
|
||||
{ id: 'privacy', label: 'Privacy Policy', route: '/privacy' },
|
||||
{ id: 'terms', label: 'Terms of Service', route: '/terms' },
|
||||
{ id: 'cookies', label: 'Cookie Policy', route: '/cookies' },
|
||||
{ id: 'gdpr', label: 'GDPR', route: '/gdpr' }
|
||||
]
|
||||
}
|
||||
],
|
||||
newsletter: {
|
||||
title: 'Stay Updated',
|
||||
description: 'Get the latest news and updates delivered to your inbox.',
|
||||
placeholder: 'Enter your email',
|
||||
buttonText: 'Subscribe',
|
||||
onSubmit: (email: string) => {
|
||||
console.log('Newsletter signup:', email);
|
||||
}
|
||||
},
|
||||
socialLinks: [
|
||||
{ id: 'twitter', platform: 'twitter', url: 'https://twitter.com/example' },
|
||||
{ id: 'facebook', platform: 'facebook', url: 'https://facebook.com/example' },
|
||||
{ id: 'linkedin', platform: 'linkedin', url: 'https://linkedin.com/company/example' },
|
||||
{ id: 'github', platform: 'github', url: 'https://github.com/example' }
|
||||
],
|
||||
copyright: '© 2024 UI Suite. All rights reserved.',
|
||||
legalLinks: [
|
||||
{ id: 'privacy', label: 'Privacy', route: '/privacy' },
|
||||
{ id: 'terms', label: 'Terms', route: '/terms' },
|
||||
{ id: 'cookies', label: 'Cookies', route: '/cookies' }
|
||||
],
|
||||
theme: 'light',
|
||||
showDivider: true
|
||||
});
|
||||
|
||||
darkFooterConfig = signal<FooterConfig>({
|
||||
logo: {
|
||||
text: 'Dark UI Pro',
|
||||
url: '/'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
id: 'solutions',
|
||||
title: 'Solutions',
|
||||
items: [
|
||||
{ id: 'enterprise', label: 'Enterprise', route: '/enterprise' },
|
||||
{ id: 'startups', label: 'Startups', route: '/startups' },
|
||||
{ id: 'agencies', label: 'Agencies', route: '/agencies' },
|
||||
{ id: 'developers', label: 'Developers', route: '/developers' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'support',
|
||||
title: 'Support',
|
||||
items: [
|
||||
{ id: 'contact', label: 'Contact Us', route: '/contact' },
|
||||
{ id: 'chat', label: 'Live Chat', action: () => alert('Chat opened!') },
|
||||
{ id: 'tickets', label: 'Support Tickets', route: '/support' },
|
||||
{ id: 'status', label: 'System Status', url: 'https://status.example.com', target: '_blank' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'developers',
|
||||
title: 'Developers',
|
||||
items: [
|
||||
{ id: 'api-docs', label: 'API Documentation', route: '/api-docs' },
|
||||
{ id: 'sdk', label: 'SDK', route: '/sdk' },
|
||||
{ id: 'webhooks', label: 'Webhooks', route: '/webhooks' },
|
||||
{ id: 'changelog', label: 'Changelog', route: '/changelog' }
|
||||
]
|
||||
}
|
||||
],
|
||||
newsletter: {
|
||||
title: 'Developer Newsletter',
|
||||
description: 'Weekly updates on new features, API changes, and developer resources.',
|
||||
placeholder: 'developer@company.com',
|
||||
buttonText: 'Join',
|
||||
onSubmit: (email: string) => {
|
||||
console.log('Developer newsletter signup:', email);
|
||||
}
|
||||
},
|
||||
socialLinks: [
|
||||
{ id: 'github', platform: 'github', url: 'https://github.com/example' },
|
||||
{ id: 'twitter', platform: 'twitter', url: 'https://twitter.com/example' },
|
||||
{ id: 'youtube', platform: 'youtube', url: 'https://youtube.com/example' }
|
||||
],
|
||||
copyright: '© 2024 Dark UI Pro. Built with ❤️ by developers.',
|
||||
legalLinks: [
|
||||
{ id: 'privacy', label: 'Privacy Policy', route: '/privacy' },
|
||||
{ id: 'terms', label: 'Terms of Service', route: '/terms' },
|
||||
{ id: 'security', label: 'Security', route: '/security' }
|
||||
],
|
||||
theme: 'dark',
|
||||
showDivider: true
|
||||
});
|
||||
|
||||
minimalFooterConfig = signal<FooterConfig>({
|
||||
columns: [
|
||||
{
|
||||
id: 'quick-links',
|
||||
title: 'Quick Links',
|
||||
items: [
|
||||
{ id: 'home', label: 'Home', route: '/' },
|
||||
{ id: 'about', label: 'About', route: '/about' },
|
||||
{ id: 'contact', label: 'Contact', route: '/contact' }
|
||||
]
|
||||
}
|
||||
],
|
||||
copyright: '© 2024 Minimal Footer Example',
|
||||
legalLinks: [
|
||||
{ id: 'privacy', label: 'Privacy', route: '/privacy' },
|
||||
{ id: 'terms', label: 'Terms', route: '/terms' }
|
||||
],
|
||||
theme: 'light',
|
||||
showDivider: false
|
||||
});
|
||||
|
||||
toggleTheme(): void {
|
||||
const current = this.lightFooterConfig();
|
||||
this.lightFooterConfig.set({
|
||||
...current,
|
||||
theme: current.theme === 'light' ? 'dark' : 'light'
|
||||
});
|
||||
}
|
||||
|
||||
toggleDivider(): void {
|
||||
const current = this.lightFooterConfig();
|
||||
this.lightFooterConfig.set({
|
||||
...current,
|
||||
showDivider: !current.showDivider
|
||||
});
|
||||
}
|
||||
|
||||
addColumn(): void {
|
||||
const current = this.lightFooterConfig();
|
||||
const newColumn = {
|
||||
id: `column-${current.columns.length + 1}`,
|
||||
title: `Column ${current.columns.length + 1}`,
|
||||
items: [
|
||||
{ id: `item-1`, label: 'Item 1', route: '/item-1' },
|
||||
{ id: `item-2`, label: 'Item 2', route: '/item-2' }
|
||||
]
|
||||
};
|
||||
|
||||
this.lightFooterConfig.set({
|
||||
...current,
|
||||
columns: [...current.columns, newColumn]
|
||||
});
|
||||
}
|
||||
|
||||
removeColumn(): void {
|
||||
const current = this.lightFooterConfig();
|
||||
if (current.columns.length > 1) {
|
||||
this.lightFooterConfig.set({
|
||||
...current,
|
||||
columns: current.columns.slice(0, -1)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onLinkClicked(link: FooterLink): void {
|
||||
console.log('Footer link clicked:', link);
|
||||
}
|
||||
|
||||
onNewsletterSubmitted(email: string): void {
|
||||
console.log('Newsletter submitted:', email);
|
||||
alert(`Newsletter subscription for: ${email}`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { LandingHeaderComponent, CTAButton, LandingHeaderConfig, NavigationItem } from 'ui-landing-pages';
|
||||
import { ButtonComponent, VStackComponent, SectionComponent } from 'ui-essentials';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-header-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, LandingHeaderComponent, ButtonComponent, VStackComponent, SectionComponent],
|
||||
template: `
|
||||
<ui-vstack [spacing]="'xl'">
|
||||
<ui-section>
|
||||
<h2>Landing Header - Light Theme</h2>
|
||||
<p>Sticky navigation header with transparent background that becomes solid on scroll.</p>
|
||||
|
||||
<ui-lp-header
|
||||
[configuration]="lightHeaderConfig()"
|
||||
(navigationClicked)="onNavigationClicked($event)"
|
||||
(ctaClicked)="onCTAClicked($event)">
|
||||
</ui-lp-header>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Landing Header - Dark Theme</h2>
|
||||
<p>Dark theme version with logo and mega menu navigation.</p>
|
||||
|
||||
<ui-lp-header
|
||||
[configuration]="darkHeaderConfig()"
|
||||
(navigationClicked)="onNavigationClicked($event)"
|
||||
(ctaClicked)="onCTAClicked($event)">
|
||||
</ui-lp-header>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Landing Header - With Dropdown Menu</h2>
|
||||
<p>Header with dropdown navigation and badges.</p>
|
||||
|
||||
<ui-lp-header
|
||||
[configuration]="dropdownHeaderConfig()"
|
||||
(navigationClicked)="onNavigationClicked($event)"
|
||||
(ctaClicked)="onCTAClicked($event)">
|
||||
</ui-lp-header>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h2>Configuration Options</h2>
|
||||
<div class="demo-controls">
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="toggleTransparent()"
|
||||
class="demo-control">
|
||||
Toggle Transparent: {{ lightHeaderConfig().transparent ? 'ON' : 'OFF' }}
|
||||
</ui-button>
|
||||
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="toggleSticky()"
|
||||
class="demo-control">
|
||||
Toggle Sticky: {{ lightHeaderConfig().sticky ? 'ON' : 'OFF' }}
|
||||
</ui-button>
|
||||
|
||||
<ui-button
|
||||
[variant]="'outlined'"
|
||||
(clicked)="toggleMobileMenu()"
|
||||
class="demo-control">
|
||||
Toggle Mobile Menu: {{ lightHeaderConfig().showMobileMenu ? 'ON' : 'OFF' }}
|
||||
</ui-button>
|
||||
</div>
|
||||
</ui-section>
|
||||
|
||||
<!-- Content to demonstrate scroll behavior -->
|
||||
<ui-section>
|
||||
<h3>Scroll Content</h3>
|
||||
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
||||
Scroll to see header behavior
|
||||
</div>
|
||||
</ui-section>
|
||||
|
||||
<ui-section>
|
||||
<h3>More Content</h3>
|
||||
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
||||
Keep scrolling...
|
||||
</div>
|
||||
</ui-section>
|
||||
</ui-vstack>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.demo-control {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingHeaderDemoComponent {
|
||||
lightHeaderConfig = signal<LandingHeaderConfig>({
|
||||
logo: {
|
||||
text: 'UI Suite',
|
||||
url: '/'
|
||||
},
|
||||
navigation: [
|
||||
{
|
||||
id: 'home',
|
||||
label: 'Home',
|
||||
route: '/',
|
||||
},
|
||||
{
|
||||
id: 'features',
|
||||
label: 'Features',
|
||||
route: '/features',
|
||||
},
|
||||
{
|
||||
id: 'pricing',
|
||||
label: 'Pricing',
|
||||
route: '/pricing',
|
||||
},
|
||||
{
|
||||
id: 'about',
|
||||
label: 'About',
|
||||
route: '/about',
|
||||
},
|
||||
{
|
||||
id: 'contact',
|
||||
label: 'Contact',
|
||||
route: '/contact',
|
||||
}
|
||||
],
|
||||
ctaButton: {
|
||||
text: 'Get Started',
|
||||
variant: 'filled',
|
||||
size: 'medium',
|
||||
action: () => alert('CTA clicked!')
|
||||
},
|
||||
transparent: true,
|
||||
sticky: true,
|
||||
showMobileMenu: true,
|
||||
maxWidth: 'xl',
|
||||
theme: 'light'
|
||||
});
|
||||
|
||||
darkHeaderConfig = signal<LandingHeaderConfig>({
|
||||
logo: {
|
||||
text: 'Dark UI',
|
||||
url: '/'
|
||||
},
|
||||
navigation: [
|
||||
{
|
||||
id: 'products',
|
||||
label: 'Products',
|
||||
route: '/products',
|
||||
},
|
||||
{
|
||||
id: 'solutions',
|
||||
label: 'Solutions',
|
||||
route: '/solutions',
|
||||
},
|
||||
{
|
||||
id: 'resources',
|
||||
label: 'Resources',
|
||||
route: '/resources',
|
||||
},
|
||||
{
|
||||
id: 'company',
|
||||
label: 'Company',
|
||||
route: '/company',
|
||||
}
|
||||
],
|
||||
ctaButton: {
|
||||
text: 'Start Free Trial',
|
||||
variant: 'filled',
|
||||
size: 'medium',
|
||||
icon: '🚀',
|
||||
action: () => alert('Free trial started!')
|
||||
},
|
||||
transparent: false,
|
||||
sticky: true,
|
||||
showMobileMenu: true,
|
||||
maxWidth: 'xl',
|
||||
theme: 'dark'
|
||||
});
|
||||
|
||||
dropdownHeaderConfig = signal<LandingHeaderConfig>({
|
||||
logo: {
|
||||
text: 'Dropdown Demo',
|
||||
url: '/'
|
||||
},
|
||||
navigation: [
|
||||
{
|
||||
id: 'home',
|
||||
label: 'Home',
|
||||
route: '/',
|
||||
},
|
||||
{
|
||||
id: 'products',
|
||||
label: 'Products',
|
||||
children: [
|
||||
{
|
||||
id: 'ui-kit',
|
||||
label: 'UI Kit',
|
||||
route: '/products/ui-kit',
|
||||
badge: 'New'
|
||||
},
|
||||
{
|
||||
id: 'components',
|
||||
label: 'Components',
|
||||
route: '/products/components',
|
||||
},
|
||||
{
|
||||
id: 'templates',
|
||||
label: 'Templates',
|
||||
route: '/products/templates',
|
||||
badge: 'Pro'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'docs',
|
||||
label: 'Documentation',
|
||||
children: [
|
||||
{
|
||||
id: 'getting-started',
|
||||
label: 'Getting Started',
|
||||
route: '/docs/getting-started',
|
||||
},
|
||||
{
|
||||
id: 'api',
|
||||
label: 'API Reference',
|
||||
route: '/docs/api',
|
||||
},
|
||||
{
|
||||
id: 'examples',
|
||||
label: 'Examples',
|
||||
route: '/docs/examples',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'support',
|
||||
label: 'Support',
|
||||
route: '/support',
|
||||
badge: '24/7'
|
||||
}
|
||||
],
|
||||
ctaButton: {
|
||||
text: 'Contact Sales',
|
||||
variant: 'tonal',
|
||||
size: 'medium',
|
||||
action: () => alert('Contact sales clicked!')
|
||||
},
|
||||
transparent: false,
|
||||
sticky: true,
|
||||
showMobileMenu: true,
|
||||
maxWidth: 'xl',
|
||||
theme: 'light'
|
||||
});
|
||||
|
||||
toggleTransparent(): void {
|
||||
const current = this.lightHeaderConfig();
|
||||
this.lightHeaderConfig.set({
|
||||
...current,
|
||||
transparent: !current.transparent
|
||||
});
|
||||
}
|
||||
|
||||
toggleSticky(): void {
|
||||
const current = this.lightHeaderConfig();
|
||||
this.lightHeaderConfig.set({
|
||||
...current,
|
||||
sticky: !current.sticky
|
||||
});
|
||||
}
|
||||
|
||||
toggleMobileMenu(): void {
|
||||
const current = this.lightHeaderConfig();
|
||||
this.lightHeaderConfig.set({
|
||||
...current,
|
||||
showMobileMenu: !current.showMobileMenu
|
||||
});
|
||||
}
|
||||
|
||||
onNavigationClicked(item: NavigationItem): void {
|
||||
console.log('Navigation clicked:', item);
|
||||
}
|
||||
|
||||
onCTAClicked(cta: CTAButton): void {
|
||||
console.log('CTA clicked:', cta);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
&__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);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-code {
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: $semantic-color-text-primary;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { LogoCloudComponent, LogoCloudConfig, LogoItem } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-logo-cloud-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, LogoCloudComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div style="padding: 2rem;">
|
||||
<h2>Logo Cloud Component</h2>
|
||||
<p style="margin-bottom: 2rem; color: #666;">Display partner and client logos in various layouts</p>
|
||||
|
||||
<!-- Basic Row Layout -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Row Layout</h3>
|
||||
<ui-lp-logo-cloud
|
||||
[configuration]="rowConfig">
|
||||
</ui-lp-logo-cloud>
|
||||
</section>
|
||||
|
||||
<!-- Grid Layout -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Grid Layout</h3>
|
||||
<ui-lp-logo-cloud
|
||||
[configuration]="gridConfig">
|
||||
</ui-lp-logo-cloud>
|
||||
</section>
|
||||
|
||||
<!-- Marquee Layout -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Marquee Layout</h3>
|
||||
<ui-lp-logo-cloud
|
||||
[configuration]="marqueeConfig">
|
||||
</ui-lp-logo-cloud>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Code -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Configuration</h3>
|
||||
<pre class="demo-code">{{ configExample }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './landing-logo-cloud-demo.component.scss'
|
||||
})
|
||||
export class LandingLogoCloudDemoComponent {
|
||||
private sampleLogos: LogoItem[] = [
|
||||
{
|
||||
id: 'google',
|
||||
name: 'Google',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg',
|
||||
url: 'https://google.com',
|
||||
grayscale: false
|
||||
},
|
||||
{
|
||||
id: 'microsoft',
|
||||
name: 'Microsoft',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg',
|
||||
url: 'https://microsoft.com',
|
||||
grayscale: false
|
||||
},
|
||||
{
|
||||
id: 'amazon',
|
||||
name: 'Amazon',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg',
|
||||
url: 'https://amazon.com',
|
||||
grayscale: false
|
||||
},
|
||||
{
|
||||
id: 'apple',
|
||||
name: 'Apple',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg',
|
||||
url: 'https://apple.com',
|
||||
grayscale: false
|
||||
},
|
||||
{
|
||||
id: 'netflix',
|
||||
name: 'Netflix',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg',
|
||||
url: 'https://netflix.com',
|
||||
grayscale: false
|
||||
},
|
||||
{
|
||||
id: 'spotify',
|
||||
name: 'Spotify',
|
||||
logo: 'https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg',
|
||||
url: 'https://spotify.com',
|
||||
grayscale: false
|
||||
}
|
||||
];
|
||||
|
||||
rowConfig: LogoCloudConfig = {
|
||||
title: 'Trusted by Industry Leaders',
|
||||
subtitle: 'Join thousands of companies using our platform',
|
||||
logos: this.sampleLogos,
|
||||
layout: 'row',
|
||||
itemsPerRow: 5,
|
||||
grayscale: true,
|
||||
hoverEffect: true,
|
||||
maxHeight: 60
|
||||
};
|
||||
|
||||
gridConfig: LogoCloudConfig = {
|
||||
title: 'Our Partners',
|
||||
logos: this.sampleLogos,
|
||||
layout: 'grid',
|
||||
itemsPerRow: 4,
|
||||
grayscale: true,
|
||||
hoverEffect: true,
|
||||
maxHeight: 80
|
||||
};
|
||||
|
||||
marqueeConfig: LogoCloudConfig = {
|
||||
title: 'Continuous Partnership',
|
||||
subtitle: 'Seamlessly scrolling partner showcase',
|
||||
logos: this.sampleLogos,
|
||||
layout: 'marquee',
|
||||
grayscale: true,
|
||||
hoverEffect: true,
|
||||
maxHeight: 70
|
||||
};
|
||||
|
||||
configExample = `const logoCloudConfig: LogoCloudConfig = {
|
||||
title: 'Trusted by Industry Leaders',
|
||||
subtitle: 'Join thousands of companies using our platform',
|
||||
logos: [
|
||||
{
|
||||
id: 'google',
|
||||
name: 'Google',
|
||||
logo: 'path/to/google-logo.svg',
|
||||
url: 'https://google.com',
|
||||
grayscale: false
|
||||
}
|
||||
// ... more logos
|
||||
],
|
||||
layout: 'row',
|
||||
itemsPerRow: 5,
|
||||
grayscale: true,
|
||||
hoverEffect: true,
|
||||
maxHeight: 60
|
||||
};`;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
&__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);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-code {
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: $semantic-color-text-primary;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { StatisticsDisplayComponent, StatisticsConfig, StatisticItem } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-statistics-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StatisticsDisplayComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div style="padding: 2rem;">
|
||||
<h2>Statistics Display Component</h2>
|
||||
<p style="margin-bottom: 2rem; color: #666;">Showcase key metrics with animated counters and various layouts</p>
|
||||
|
||||
<!-- Basic Row Layout -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Row Layout - Minimal</h3>
|
||||
<ui-lp-statistics-display
|
||||
[configuration]="rowConfig">
|
||||
</ui-lp-statistics-display>
|
||||
</section>
|
||||
|
||||
<!-- Grid Layout with Cards -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Grid Layout - Card Variant</h3>
|
||||
<ui-lp-statistics-display
|
||||
[configuration]="cardConfig">
|
||||
</ui-lp-statistics-display>
|
||||
</section>
|
||||
|
||||
<!-- Primary Background -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Primary Background</h3>
|
||||
<ui-lp-statistics-display
|
||||
[configuration]="primaryConfig">
|
||||
</ui-lp-statistics-display>
|
||||
</section>
|
||||
|
||||
<!-- Highlighted Variant -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Highlighted Variant</h3>
|
||||
<ui-lp-statistics-display
|
||||
[configuration]="highlightedConfig">
|
||||
</ui-lp-statistics-display>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Code -->
|
||||
<section class="demo-section">
|
||||
<h3 class="demo-section__title">Configuration</h3>
|
||||
<pre class="demo-code">{{ configExample }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './landing-statistics-demo.component.scss'
|
||||
})
|
||||
export class LandingStatisticsDemoComponent {
|
||||
private sampleStatistics: StatisticItem[] = [
|
||||
{
|
||||
id: 'users',
|
||||
value: 150000,
|
||||
label: 'Active Users',
|
||||
suffix: '+',
|
||||
description: 'Growing every day',
|
||||
icon: 'users',
|
||||
animateValue: true
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
value: 25000,
|
||||
label: 'Projects Created',
|
||||
suffix: '+',
|
||||
description: 'Successful deployments',
|
||||
icon: 'chart-bar',
|
||||
animateValue: true
|
||||
},
|
||||
{
|
||||
id: 'uptime',
|
||||
value: 99.9,
|
||||
label: 'Uptime',
|
||||
suffix: '%',
|
||||
description: 'Reliable service',
|
||||
icon: 'arrow-up',
|
||||
animateValue: true
|
||||
},
|
||||
{
|
||||
id: 'support',
|
||||
value: '24/7',
|
||||
label: 'Support Available',
|
||||
description: 'Round-the-clock assistance',
|
||||
icon: 'headset',
|
||||
animateValue: false
|
||||
}
|
||||
];
|
||||
|
||||
rowConfig: StatisticsConfig = {
|
||||
title: 'Platform Performance',
|
||||
subtitle: 'See how we\'re making a difference',
|
||||
statistics: this.sampleStatistics,
|
||||
layout: 'row',
|
||||
variant: 'minimal',
|
||||
animateOnScroll: true,
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
cardConfig: StatisticsConfig = {
|
||||
title: 'Success Metrics',
|
||||
statistics: this.sampleStatistics,
|
||||
layout: 'grid',
|
||||
variant: 'card',
|
||||
animateOnScroll: true,
|
||||
backgroundColor: 'surface'
|
||||
};
|
||||
|
||||
primaryConfig: StatisticsConfig = {
|
||||
title: 'Key Achievements',
|
||||
subtitle: 'Numbers that matter to our community',
|
||||
statistics: this.sampleStatistics.slice(0, 3),
|
||||
layout: 'row',
|
||||
variant: 'minimal',
|
||||
animateOnScroll: true,
|
||||
backgroundColor: 'primary'
|
||||
};
|
||||
|
||||
highlightedConfig: StatisticsConfig = {
|
||||
title: 'Performance Indicators',
|
||||
statistics: this.sampleStatistics,
|
||||
layout: 'grid',
|
||||
variant: 'highlighted',
|
||||
animateOnScroll: true,
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
configExample = `const statisticsConfig: StatisticsConfig = {
|
||||
title: 'Platform Performance',
|
||||
subtitle: 'See how we're making a difference',
|
||||
statistics: [
|
||||
{
|
||||
id: 'users',
|
||||
value: 150000,
|
||||
label: 'Active Users',
|
||||
suffix: '+',
|
||||
description: 'Growing every day',
|
||||
icon: 'users',
|
||||
animateValue: true
|
||||
}
|
||||
// ... more statistics
|
||||
],
|
||||
layout: 'row',
|
||||
variant: 'minimal',
|
||||
animateOnScroll: true,
|
||||
backgroundColor: 'transparent'
|
||||
};`;
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TeamGridComponent, TeamConfig } from 'ui-landing-pages';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-team-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TeamGridComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h1>Team Grid Demo</h1>
|
||||
<p>Showcase your team members with professional cards and social links.</p>
|
||||
</div>
|
||||
|
||||
<!-- 3 Column Layout -->
|
||||
<div class="demo-section">
|
||||
<h2>3 Column Layout (Default)</h2>
|
||||
<ui-lp-team-grid [configuration]="threeColumnConfig"></ui-lp-team-grid>
|
||||
</div>
|
||||
|
||||
<!-- 2 Column Layout -->
|
||||
<div class="demo-section">
|
||||
<h2>2 Column Layout</h2>
|
||||
<ui-lp-team-grid [configuration]="twoColumnConfig"></ui-lp-team-grid>
|
||||
</div>
|
||||
|
||||
<!-- 4 Column Layout -->
|
||||
<div class="demo-section">
|
||||
<h2>4 Column Layout</h2>
|
||||
<ui-lp-team-grid [configuration]="fourColumnConfig"></ui-lp-team-grid>
|
||||
</div>
|
||||
|
||||
<!-- Without Bio -->
|
||||
<div class="demo-section">
|
||||
<h2>Without Bio Text</h2>
|
||||
<ui-lp-team-grid [configuration]="noBioConfig"></ui-lp-team-grid>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
font-size: 1.125rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingTeamDemoComponent {
|
||||
threeColumnConfig: TeamConfig = {
|
||||
title: 'Meet Our Amazing Team',
|
||||
subtitle: 'The talented professionals who make our success possible',
|
||||
columns: 3,
|
||||
showSocial: true,
|
||||
showBio: true,
|
||||
members: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Sarah Johnson',
|
||||
role: 'CEO & Founder',
|
||||
bio: 'Visionary leader with 15+ years in tech, driving innovation and growth across multiple successful ventures.',
|
||||
image: 'https://images.unsplash.com/photo-1494790108755-2616b612b5ff?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/sarahjohnson',
|
||||
twitter: 'https://twitter.com/sarahjohnson',
|
||||
email: 'sarah@company.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Michael Chen',
|
||||
role: 'Chief Technology Officer',
|
||||
bio: 'Full-stack engineer and architect, passionate about building scalable systems and mentoring developers.',
|
||||
image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/michaelchen',
|
||||
github: 'https://github.com/mchen',
|
||||
twitter: 'https://twitter.com/michaelchen',
|
||||
email: 'michael@company.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Emily Rodriguez',
|
||||
role: 'Head of Design',
|
||||
bio: 'Creative problem-solver specializing in user experience design and building design systems that scale.',
|
||||
image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/emilyrodriguez',
|
||||
website: 'https://emilydesigns.com',
|
||||
email: 'emily@company.com'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
twoColumnConfig: TeamConfig = {
|
||||
title: 'Leadership Team',
|
||||
subtitle: 'The executives guiding our company forward',
|
||||
columns: 2,
|
||||
showSocial: true,
|
||||
showBio: true,
|
||||
members: [
|
||||
{
|
||||
id: '4',
|
||||
name: 'David Park',
|
||||
role: 'VP of Sales',
|
||||
bio: 'Results-driven sales leader with a proven track record of building high-performing teams and exceeding revenue targets.',
|
||||
image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/davidpark',
|
||||
email: 'david@company.com'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Lisa Thompson',
|
||||
role: 'VP of Marketing',
|
||||
bio: 'Strategic marketer focused on brand building, digital growth, and creating authentic connections with our community.',
|
||||
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/lisathompson',
|
||||
twitter: 'https://twitter.com/lisathompson',
|
||||
email: 'lisa@company.com'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
fourColumnConfig: TeamConfig = {
|
||||
title: 'Engineering Team',
|
||||
subtitle: 'The brilliant minds behind our technology',
|
||||
columns: 4,
|
||||
showSocial: true,
|
||||
showBio: true,
|
||||
members: [
|
||||
{
|
||||
id: '6',
|
||||
name: 'Alex Kim',
|
||||
role: 'Senior Frontend Developer',
|
||||
bio: 'React specialist with a passion for creating beautiful, accessible user interfaces.',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
github: 'https://github.com/alexkim',
|
||||
linkedin: 'https://linkedin.com/in/alexkim'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Maria Santos',
|
||||
role: 'Backend Engineer',
|
||||
bio: 'Database optimization expert and API architecture enthusiast.',
|
||||
image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
github: 'https://github.com/mariasantos',
|
||||
linkedin: 'https://linkedin.com/in/mariasantos'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'James Wilson',
|
||||
role: 'DevOps Engineer',
|
||||
bio: 'Cloud infrastructure specialist ensuring reliable, scalable deployments.',
|
||||
image: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
github: 'https://github.com/jameswilson',
|
||||
linkedin: 'https://linkedin.com/in/jameswilson'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'Sophie Brown',
|
||||
role: 'QA Engineer',
|
||||
bio: 'Quality assurance expert dedicated to delivering bug-free user experiences.',
|
||||
image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/sophiebrown',
|
||||
email: 'sophie@company.com'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
noBioConfig: TeamConfig = {
|
||||
title: 'Advisory Board',
|
||||
subtitle: 'Industry experts guiding our strategic direction',
|
||||
columns: 3,
|
||||
showSocial: true,
|
||||
showBio: false,
|
||||
members: [
|
||||
{
|
||||
id: '10',
|
||||
name: 'Robert Anderson',
|
||||
role: 'Strategic Advisor',
|
||||
image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/robertanderson'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
name: 'Jennifer Lee',
|
||||
role: 'Technology Advisor',
|
||||
image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/jenniferlee',
|
||||
website: 'https://jenniferlee.tech'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
name: 'Marcus Johnson',
|
||||
role: 'Business Advisor',
|
||||
image: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/marcusjohnson',
|
||||
email: 'marcus@advisor.com'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SaaSTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/saas-template.component';
|
||||
import { ProductTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/product-template.component';
|
||||
import { AgencyTemplateComponent } from '../../../../../ui-landing-pages/src/lib/components/templates/agency-template.component';
|
||||
import { AgencyTemplateConfig, ProductTemplateConfig, SaaSTemplateConfig } from '../../../../../ui-landing-pages/src/lib/interfaces/templates.interfaces';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-templates-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, SaaSTemplateComponent, ProductTemplateComponent, AgencyTemplateComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h1>Landing Page Templates Demo</h1>
|
||||
<p>Complete, production-ready landing page templates for different business types.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-navigation">
|
||||
<button
|
||||
[class.active]="activeTemplate === 'saas'"
|
||||
(click)="setActiveTemplate('saas')">
|
||||
SaaS Template
|
||||
</button>
|
||||
<button
|
||||
[class.active]="activeTemplate === 'product'"
|
||||
(click)="setActiveTemplate('product')">
|
||||
Product Template
|
||||
</button>
|
||||
<button
|
||||
[class.active]="activeTemplate === 'agency'"
|
||||
(click)="setActiveTemplate('agency')">
|
||||
Agency Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="template-container">
|
||||
@switch (activeTemplate) {
|
||||
@case ('saas') {
|
||||
<ui-lp-saas-template [configuration]="saasConfig"></ui-lp-saas-template>
|
||||
}
|
||||
@case ('product') {
|
||||
<ui-lp-product-template [configuration]="productConfig"></ui-lp-product-template>
|
||||
}
|
||||
@case ('agency') {
|
||||
<ui-lp-agency-template [configuration]="agencyConfig"></ui-lp-agency-template>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.demo-navigation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.demo-navigation button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 2px solid #6c757d;
|
||||
background: white;
|
||||
color: #6c757d;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.demo-navigation button:hover {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.demo-navigation button.active {
|
||||
background: #007bff;
|
||||
border-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.template-container {
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-navigation {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-navigation button {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingTemplatesDemoComponent {
|
||||
activeTemplate: 'saas' | 'product' | 'agency' = 'saas';
|
||||
|
||||
setActiveTemplate(template: 'saas' | 'product' | 'agency'): void {
|
||||
this.activeTemplate = template;
|
||||
}
|
||||
|
||||
saasConfig: SaaSTemplateConfig = {
|
||||
hero: {
|
||||
title: 'Build Amazing SaaS Applications',
|
||||
subtitle: 'The complete toolkit for modern software development with enterprise-grade security and scalability.',
|
||||
ctaPrimary: {
|
||||
text: 'Start Free Trial',
|
||||
variant: 'tonal',
|
||||
size: 'large',
|
||||
action: () => console.log('Start trial clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'View Demo',
|
||||
variant: 'outlined',
|
||||
size: 'large',
|
||||
action: () => console.log('View demo clicked')
|
||||
},
|
||||
alignment: 'center',
|
||||
backgroundType: 'gradient',
|
||||
minHeight: 'full'
|
||||
},
|
||||
features: {
|
||||
title: 'Why Choose Our Platform',
|
||||
subtitle: 'Everything you need to build, deploy, and scale your applications',
|
||||
features: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Lightning Fast Performance',
|
||||
description: 'Optimized architecture delivers sub-second response times and 99.99% uptime.',
|
||||
icon: 'rocket'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Enterprise Security',
|
||||
description: 'SOC 2 compliant with end-to-end encryption and advanced threat protection.',
|
||||
icon: 'shield'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Seamless Integrations',
|
||||
description: 'Connect with 100+ popular tools through our robust API and webhooks.',
|
||||
icon: 'plug'
|
||||
}
|
||||
]
|
||||
},
|
||||
socialProof: {
|
||||
title: 'Trusted by Industry Leaders',
|
||||
statistics: [
|
||||
{ id: '1', label: 'Active Users', value: '50,000+' },
|
||||
{ id: '2', label: 'Countries', value: '120+' },
|
||||
{ id: '3', label: 'Uptime', value: '99.99%' },
|
||||
{ id: '4', label: 'Support Rating', value: '4.9/5' }
|
||||
]
|
||||
},
|
||||
testimonials: {
|
||||
title: 'What Our Customers Say',
|
||||
testimonials: [
|
||||
{
|
||||
id: '1',
|
||||
content: 'This platform transformed our development workflow. We ship features 3x faster now.',
|
||||
name: 'Sarah Chen',
|
||||
title: 'CTO at TechCorp',
|
||||
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b5ff?w=100&h=100&fit=crop&crop=face'
|
||||
}
|
||||
]
|
||||
},
|
||||
pricing: {
|
||||
billingToggle: {
|
||||
monthlyLabel: 'Monthly',
|
||||
yearlyLabel: 'Yearly',
|
||||
discountText: 'Save 20%'
|
||||
},
|
||||
featuresComparison: false,
|
||||
plans: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Starter',
|
||||
price: {
|
||||
monthly: 29,
|
||||
yearly: 290,
|
||||
currency: 'USD',
|
||||
suffix: 'per user'
|
||||
},
|
||||
features: [
|
||||
{ name: '5 Projects', included: true },
|
||||
{ name: '10GB Storage', included: true },
|
||||
{ name: 'Email Support', included: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Get Started',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Starter plan selected')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
faq: {
|
||||
title: 'Frequently Asked Questions',
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
question: 'Can I cancel my subscription anytime?',
|
||||
answer: 'Yes, you can cancel your subscription at any time with no penalties.'
|
||||
}
|
||||
]
|
||||
},
|
||||
cta: {
|
||||
title: 'Ready to Get Started?',
|
||||
subtitle: 'Join thousands of developers building the future',
|
||||
ctaPrimary: {
|
||||
text: 'Start Free Trial',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Start trial clicked')
|
||||
},
|
||||
backgroundType: 'gradient'
|
||||
}
|
||||
};
|
||||
|
||||
productConfig: ProductTemplateConfig = {
|
||||
hero: {
|
||||
title: 'Introducing the Future of Productivity',
|
||||
subtitle: 'Revolutionary new product that will transform how you work and collaborate.',
|
||||
ctaPrimary: {
|
||||
text: 'Order Now',
|
||||
variant: 'tonal',
|
||||
size: 'large',
|
||||
action: () => console.log('Order now clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'Learn More',
|
||||
variant: 'tonal',
|
||||
size: 'large',
|
||||
action: () => console.log('Learn more clicked')
|
||||
},
|
||||
alignment: 'left',
|
||||
backgroundType: 'image',
|
||||
minHeight: 'large'
|
||||
},
|
||||
features: {
|
||||
title: 'Key Features',
|
||||
subtitle: 'Designed with you in mind',
|
||||
features: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Intuitive Design',
|
||||
description: 'Beautiful interface that anyone can use without training.',
|
||||
icon: 'star'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Premium Materials',
|
||||
description: 'Built with the finest materials for durability and style.',
|
||||
icon: 'check'
|
||||
}
|
||||
]
|
||||
},
|
||||
testimonials: {
|
||||
title: 'Customer Reviews',
|
||||
testimonials: [
|
||||
{
|
||||
id: '1',
|
||||
content: 'This product exceeded all my expectations. Highly recommended!',
|
||||
name: 'Mike Johnson',
|
||||
title: 'Verified Customer',
|
||||
rating: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
pricing: {
|
||||
billingToggle: {
|
||||
monthlyLabel: 'One-time',
|
||||
yearlyLabel: 'Bundle',
|
||||
discountText: 'Best Value'
|
||||
},
|
||||
featuresComparison: false,
|
||||
plans: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Standard Edition',
|
||||
price: {
|
||||
monthly: 199,
|
||||
yearly: 199,
|
||||
currency: 'USD',
|
||||
suffix: 'one-time'
|
||||
},
|
||||
features: [
|
||||
{ name: '2-Year Warranty', included: true },
|
||||
{ name: 'Free Shipping', included: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Order Now',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Product ordered')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
cta: {
|
||||
title: 'Start Your Journey',
|
||||
subtitle: 'Order now and get free shipping worldwide',
|
||||
ctaPrimary: {
|
||||
text: 'Order Now',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Order now clicked')
|
||||
},
|
||||
backgroundType: 'gradient'
|
||||
}
|
||||
};
|
||||
|
||||
agencyConfig: AgencyTemplateConfig = {
|
||||
hero: {
|
||||
title: 'Your Vision, Our Expertise',
|
||||
subtitle: 'We create exceptional digital experiences that drive results for businesses of all sizes.',
|
||||
ctaPrimary: {
|
||||
text: 'Start Project',
|
||||
variant: 'tonal',
|
||||
size: 'large',
|
||||
action: () => console.log('Start project clicked')
|
||||
},
|
||||
ctaSecondary: {
|
||||
text: 'View Portfolio',
|
||||
variant: 'outlined',
|
||||
size: 'large',
|
||||
action: () => console.log('View portfolio clicked')
|
||||
},
|
||||
alignment: 'left',
|
||||
backgroundType: 'gradient',
|
||||
minHeight: 'large'
|
||||
},
|
||||
services: {
|
||||
title: 'Our Services',
|
||||
subtitle: 'Comprehensive solutions for your digital needs',
|
||||
features: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Web Development',
|
||||
description: 'Custom websites and web applications built with modern technologies.',
|
||||
icon: 'code'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'UI/UX Design',
|
||||
description: 'User-centered design that converts visitors into customers.',
|
||||
icon: 'palette'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Digital Marketing',
|
||||
description: 'Strategic campaigns that grow your online presence.',
|
||||
icon: 'megaphone'
|
||||
}
|
||||
]
|
||||
},
|
||||
team: {
|
||||
title: 'Meet Our Team',
|
||||
subtitle: 'The talented individuals behind our success',
|
||||
members: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Alex Rivera',
|
||||
role: 'Creative Director',
|
||||
bio: 'Award-winning designer with 10+ years of experience in digital creativity.',
|
||||
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face',
|
||||
social: {
|
||||
linkedin: 'https://linkedin.com/in/alexrivera'
|
||||
}
|
||||
}
|
||||
],
|
||||
columns: 3,
|
||||
showSocial: true,
|
||||
showBio: true
|
||||
},
|
||||
timeline: {
|
||||
title: 'Our Journey',
|
||||
subtitle: 'Milestones that define our growth',
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Agency Founded',
|
||||
description: 'Started with a mission to help businesses succeed online.',
|
||||
date: '2018',
|
||||
status: 'completed',
|
||||
icon: 'rocket'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '100+ Happy Clients',
|
||||
description: 'Reached major milestone serving clients across industries.',
|
||||
date: '2020',
|
||||
status: 'completed',
|
||||
icon: 'star'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Award Recognition',
|
||||
description: 'Won Best Digital Agency award from Industry Association.',
|
||||
date: '2022',
|
||||
status: 'current',
|
||||
icon: 'check',
|
||||
badge: 'Latest'
|
||||
}
|
||||
],
|
||||
orientation: 'vertical',
|
||||
showDates: true
|
||||
},
|
||||
testimonials: {
|
||||
title: 'Client Success Stories',
|
||||
subtitle: 'What our partners say about working with us',
|
||||
testimonials: [
|
||||
{
|
||||
id: '1',
|
||||
content: 'Working with this agency was a game-changer for our business. They delivered beyond our expectations.',
|
||||
name: 'Emma Watson',
|
||||
title: 'CEO at StartupXYZ',
|
||||
avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'
|
||||
}
|
||||
]
|
||||
},
|
||||
cta: {
|
||||
title: 'Ready to Start Your Project?',
|
||||
subtitle: 'Let\'s discuss how we can bring your vision to life',
|
||||
ctaPrimary: {
|
||||
text: 'Get Started',
|
||||
variant: 'filled',
|
||||
action: () => console.log('Get started clicked')
|
||||
},
|
||||
backgroundType: 'gradient'
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
&__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);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-content-heading;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-code {
|
||||
background: $semantic-color-surface-elevated;
|
||||
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: $semantic-color-text-primary;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
// Temporarily commented out until ui-landing-pages is built
|
||||
// import { TestimonialCarouselComponent, TestimonialCarouselConfig, TestimonialItem } from 'ui-landing-pages';
|
||||
|
||||
// Placeholder types
|
||||
interface TestimonialItem {
|
||||
id: string;
|
||||
name: string;
|
||||
title: string;
|
||||
company: string;
|
||||
content: string;
|
||||
rating: number;
|
||||
avatar: string;
|
||||
verified: boolean;
|
||||
}
|
||||
|
||||
interface TestimonialCarouselConfig {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
testimonials: TestimonialItem[];
|
||||
autoPlay?: boolean;
|
||||
autoPlayDelay?: number;
|
||||
showDots?: boolean;
|
||||
showNavigation?: boolean;
|
||||
itemsPerView?: number;
|
||||
variant?: 'card' | 'quote' | 'minimal';
|
||||
showRatings?: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-testimonials-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div style="padding: 2rem;">
|
||||
<h2>Testimonial Carousel Component</h2>
|
||||
<p style="margin-bottom: 2rem; color: #666;">Display customer testimonials with carousel navigation and various styles</p>
|
||||
|
||||
<div style="background: #f5f5f5; padding: 2rem; border-radius: 8px; text-align: center; color: #666;">
|
||||
<p><strong>Component Preview Unavailable</strong></p>
|
||||
<p>The TestimonialCarouselComponent will be available once the ui-landing-pages library is built.</p>
|
||||
<p>This demo will show:</p>
|
||||
<ul style="list-style: none; padding: 0; margin: 1rem 0;">
|
||||
<li>• Single Item Carousel</li>
|
||||
<li>• Multi-Item Carousel</li>
|
||||
<li>• Quote Variant</li>
|
||||
<li>• Minimal Variant</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Code -->
|
||||
<section class="demo-section" style="margin-top: 2rem;">
|
||||
<h3 class="demo-section__title">Configuration Example</h3>
|
||||
<pre class="demo-code" style="background: #f8f8f8; padding: 1rem; border-radius: 4px; overflow-x: auto;">{{ configExample }}</pre>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
styleUrl: './landing-testimonials-demo.component.scss'
|
||||
})
|
||||
export class LandingTestimonialsDemoComponent {
|
||||
private sampleTestimonials: TestimonialItem[] = [
|
||||
{
|
||||
id: 'sarah-chen',
|
||||
name: 'Sarah Chen',
|
||||
title: 'CTO',
|
||||
company: 'TechCorp',
|
||||
content: 'This platform transformed our development workflow. The intuitive design and powerful features helped us deliver projects 40% faster.',
|
||||
rating: 5,
|
||||
avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b977?w=100&h=100&fit=crop&crop=face',
|
||||
verified: true
|
||||
},
|
||||
{
|
||||
id: 'marcus-rodriguez',
|
||||
name: 'Marcus Rodriguez',
|
||||
title: 'Lead Developer',
|
||||
company: 'StartupXYZ',
|
||||
content: 'Outstanding performance and reliability. The support team is incredibly responsive and knowledgeable.',
|
||||
rating: 5,
|
||||
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
|
||||
verified: true
|
||||
},
|
||||
{
|
||||
id: 'emily-watson',
|
||||
name: 'Emily Watson',
|
||||
title: 'Product Manager',
|
||||
company: 'InnovateLabs',
|
||||
content: 'The analytics features provided insights we never had before. Our team productivity increased significantly.',
|
||||
rating: 4,
|
||||
avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
|
||||
verified: false
|
||||
},
|
||||
{
|
||||
id: 'david-kim',
|
||||
name: 'David Kim',
|
||||
title: 'Software Engineer',
|
||||
company: 'CodeCrafters',
|
||||
content: 'Clean interface, excellent documentation, and seamless integration. Everything just works as expected.',
|
||||
rating: 5,
|
||||
avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
|
||||
verified: true
|
||||
},
|
||||
{
|
||||
id: 'lisa-thompson',
|
||||
name: 'Lisa Thompson',
|
||||
title: 'Engineering Director',
|
||||
company: 'ScaleTech',
|
||||
content: 'Scalable solution that grows with our needs. The performance optimization features are game-changing.',
|
||||
rating: 5,
|
||||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=face',
|
||||
verified: true
|
||||
}
|
||||
];
|
||||
|
||||
singleConfig: TestimonialCarouselConfig = {
|
||||
title: 'What Our Customers Say',
|
||||
subtitle: 'Trusted by thousands of developers worldwide',
|
||||
testimonials: this.sampleTestimonials,
|
||||
autoPlay: true,
|
||||
autoPlayDelay: 5000,
|
||||
showDots: true,
|
||||
showNavigation: true,
|
||||
itemsPerView: 1,
|
||||
variant: 'card',
|
||||
showRatings: true
|
||||
};
|
||||
|
||||
multiConfig: TestimonialCarouselConfig = {
|
||||
title: 'Customer Success Stories',
|
||||
testimonials: this.sampleTestimonials,
|
||||
autoPlay: false,
|
||||
showDots: true,
|
||||
showNavigation: true,
|
||||
itemsPerView: 2,
|
||||
variant: 'card',
|
||||
showRatings: true
|
||||
};
|
||||
|
||||
quoteConfig: TestimonialCarouselConfig = {
|
||||
title: 'Featured Reviews',
|
||||
testimonials: this.sampleTestimonials.slice(0, 3),
|
||||
autoPlay: true,
|
||||
autoPlayDelay: 6000,
|
||||
showDots: true,
|
||||
showNavigation: false,
|
||||
itemsPerView: 1,
|
||||
variant: 'quote',
|
||||
showRatings: true
|
||||
};
|
||||
|
||||
minimalConfig: TestimonialCarouselConfig = {
|
||||
testimonials: this.sampleTestimonials.slice(0, 3),
|
||||
autoPlay: false,
|
||||
showDots: true,
|
||||
showNavigation: true,
|
||||
itemsPerView: 1,
|
||||
variant: 'minimal',
|
||||
showRatings: false
|
||||
};
|
||||
|
||||
configExample = `const testimonialConfig: TestimonialCarouselConfig = {
|
||||
title: 'What Our Customers Say',
|
||||
subtitle: 'Trusted by thousands of developers worldwide',
|
||||
testimonials: [
|
||||
{
|
||||
id: 'sarah-chen',
|
||||
name: 'Sarah Chen',
|
||||
title: 'CTO',
|
||||
company: 'TechCorp',
|
||||
content: 'This platform transformed our workflow...',
|
||||
rating: 5,
|
||||
avatar: 'path/to/avatar.jpg',
|
||||
verified: true
|
||||
}
|
||||
// ... more testimonials
|
||||
],
|
||||
autoPlay: true,
|
||||
autoPlayDelay: 5000,
|
||||
showDots: true,
|
||||
showNavigation: true,
|
||||
itemsPerView: 1,
|
||||
variant: 'card',
|
||||
showRatings: true
|
||||
};`;
|
||||
}
|
||||
@@ -0,0 +1,307 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TimelineConfig, TimelineSectionComponent } from "../../../../../ui-landing-pages/src/public-api";
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing-timeline-demo',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TimelineSectionComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="demo-container">
|
||||
<div class="demo-header">
|
||||
<h1>Timeline Demo</h1>
|
||||
<p>Visual timeline components for roadmaps, company history, and project milestones.</p>
|
||||
</div>
|
||||
|
||||
<!-- Vertical Timeline -->
|
||||
<div class="demo-section">
|
||||
<h2>Vertical Timeline (Default)</h2>
|
||||
<ui-lp-timeline [configuration]="verticalConfig"></ui-lp-timeline>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Timeline -->
|
||||
<div class="demo-section">
|
||||
<h2>Horizontal Timeline</h2>
|
||||
<ui-lp-timeline [configuration]="horizontalConfig"></ui-lp-timeline>
|
||||
</div>
|
||||
|
||||
<!-- Minimal Theme -->
|
||||
<div class="demo-section">
|
||||
<h2>Minimal Theme</h2>
|
||||
<ui-lp-timeline [configuration]="minimalConfig"></ui-lp-timeline>
|
||||
</div>
|
||||
|
||||
<!-- Connected Theme -->
|
||||
<div class="demo-section">
|
||||
<h2>Connected Theme</h2>
|
||||
<ui-lp-timeline [configuration]="connectedConfig"></ui-lp-timeline>
|
||||
</div>
|
||||
|
||||
<!-- Product Roadmap -->
|
||||
<div class="demo-section">
|
||||
<h2>Product Roadmap</h2>
|
||||
<ui-lp-timeline [configuration]="roadmapConfig"></ui-lp-timeline>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
font-size: 1.125rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LandingTimelineDemoComponent {
|
||||
verticalConfig: TimelineConfig = {
|
||||
title: 'Our Company Journey',
|
||||
subtitle: 'Key milestones that shaped our growth',
|
||||
orientation: 'vertical',
|
||||
theme: 'default',
|
||||
showDates: true,
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Company Founded',
|
||||
description: 'Started with a vision to revolutionize how teams collaborate and build software together.',
|
||||
date: 'January 2020',
|
||||
status: 'completed',
|
||||
icon: 'rocket'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'First Product Launch',
|
||||
description: 'Launched our MVP with core features that solve real problems for development teams.',
|
||||
date: 'June 2020',
|
||||
status: 'completed',
|
||||
icon: 'star'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Series A Funding',
|
||||
description: 'Secured $5M in Series A funding to accelerate product development and team growth.',
|
||||
date: 'March 2021',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '10,000 Active Users',
|
||||
description: 'Reached a major milestone with 10,000+ active users across 50+ countries worldwide.',
|
||||
date: 'September 2021',
|
||||
status: 'completed',
|
||||
icon: 'star'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'Major Platform Update',
|
||||
description: 'Released version 2.0 with advanced automation, better performance, and new integrations.',
|
||||
date: 'December 2022',
|
||||
status: 'current',
|
||||
icon: 'rocket',
|
||||
badge: 'Current'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'International Expansion',
|
||||
description: 'Planning to open offices in Europe and Asia to better serve our global customer base.',
|
||||
date: 'Q2 2024',
|
||||
status: 'upcoming'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
horizontalConfig: TimelineConfig = {
|
||||
title: 'Development Process',
|
||||
subtitle: 'Our structured approach to building great products',
|
||||
orientation: 'horizontal',
|
||||
theme: 'default',
|
||||
showDates: false,
|
||||
items: [
|
||||
{
|
||||
id: '7',
|
||||
title: 'Research & Discovery',
|
||||
description: 'Understanding user needs through interviews, surveys, and market analysis.',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: 'Design & Prototyping',
|
||||
description: 'Creating wireframes, mockups, and interactive prototypes for validation.',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: 'Development',
|
||||
description: 'Building features with clean code, automated testing, and continuous integration.',
|
||||
status: 'current',
|
||||
icon: 'rocket'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
title: 'Testing & QA',
|
||||
description: 'Comprehensive testing across devices, browsers, and user scenarios.',
|
||||
status: 'upcoming'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
title: 'Launch & Monitor',
|
||||
description: 'Deploying to production and monitoring performance and user feedback.',
|
||||
status: 'upcoming'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
minimalConfig: TimelineConfig = {
|
||||
title: 'Project Milestones',
|
||||
subtitle: 'Clean and simple timeline presentation',
|
||||
orientation: 'vertical',
|
||||
theme: 'minimal',
|
||||
showDates: true,
|
||||
items: [
|
||||
{
|
||||
id: '12',
|
||||
title: 'Project Kickoff',
|
||||
description: 'Initial team meeting and project scope definition.',
|
||||
date: 'Week 1',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
title: 'Requirements Gathering',
|
||||
description: 'Detailed analysis of user requirements and technical specifications.',
|
||||
date: 'Week 2-3',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
title: 'Architecture Planning',
|
||||
description: 'System design and technology stack selection.',
|
||||
date: 'Week 4',
|
||||
status: 'current'
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
title: 'Implementation',
|
||||
description: 'Core development phase with iterative releases.',
|
||||
date: 'Week 5-12',
|
||||
status: 'upcoming'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
connectedConfig: TimelineConfig = {
|
||||
title: 'Feature Evolution',
|
||||
subtitle: 'How our features have evolved over time',
|
||||
orientation: 'vertical',
|
||||
theme: 'connected',
|
||||
showDates: true,
|
||||
items: [
|
||||
{
|
||||
id: '16',
|
||||
title: 'Basic Dashboard',
|
||||
description: 'Simple dashboard with essential metrics and basic user management.',
|
||||
date: 'v1.0',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
title: 'Advanced Analytics',
|
||||
description: 'Added detailed analytics, custom reports, and data visualization tools.',
|
||||
date: 'v1.5',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
title: 'Team Collaboration',
|
||||
description: 'Introduced real-time collaboration features, comments, and notification system.',
|
||||
date: 'v2.0',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '19',
|
||||
title: 'AI-Powered Insights',
|
||||
description: 'Implementing machine learning algorithms for predictive analytics and smart recommendations.',
|
||||
date: 'v2.5',
|
||||
status: 'current',
|
||||
icon: 'rocket',
|
||||
badge: 'In Progress'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
roadmapConfig: TimelineConfig = {
|
||||
title: '2024 Product Roadmap',
|
||||
subtitle: 'Exciting features and improvements coming soon',
|
||||
orientation: 'horizontal',
|
||||
theme: 'default',
|
||||
showDates: true,
|
||||
items: [
|
||||
{
|
||||
id: '20',
|
||||
title: 'Mobile App',
|
||||
description: 'Native iOS and Android applications with offline support.',
|
||||
date: 'Q1 2024',
|
||||
status: 'completed',
|
||||
icon: 'check'
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
title: 'API v3',
|
||||
description: 'Complete API overhaul with GraphQL support and improved performance.',
|
||||
date: 'Q2 2024',
|
||||
status: 'current',
|
||||
icon: 'rocket'
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
title: 'Enterprise Features',
|
||||
description: 'SSO, advanced permissions, audit logs, and compliance tools.',
|
||||
date: 'Q3 2024',
|
||||
status: 'upcoming',
|
||||
badge: 'Coming Soon'
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
title: 'Global Expansion',
|
||||
description: 'Multi-language support, regional data centers, and local partnerships.',
|
||||
date: 'Q4 2024',
|
||||
status: 'upcoming'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
|
||||
import { VideoPlayerComponent, VideoSource, VideoTrack, VideoPlayerSize, VideoPlayerVariant } from '../../../../../ui-essentials/src/lib/components/media/video-player/video-player.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-video-player-demo',
|
||||
selector: 'app-video-player-demo',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@@ -269,6 +269,27 @@ export class DashboardComponent {
|
||||
];
|
||||
this.addMenuItem("overlays", "Overlays", this.faLayerGroup, overlaysChildren);
|
||||
|
||||
|
||||
// Landing category
|
||||
const landingChildren = [
|
||||
|
||||
|
||||
this.createChildItem("conversion", "Conversion", this.faSquare),
|
||||
this.createChildItem("landing-feature-grid", "Feature Grid", this.faSquare),
|
||||
this.createChildItem("landing-testimonials", "Testimonials", this.faBars),
|
||||
this.createChildItem("landing-logo-cloud", "Logo Cloud", this.faCaretUp),
|
||||
this.createChildItem("landing-statistics", "Statistics", this.faCaretUp),
|
||||
|
||||
this.createChildItem("landing-faq", "FAQ", this.faCaretUp),
|
||||
this.createChildItem("landing-team", "Team", this.faCaretUp),
|
||||
this.createChildItem("landing-timeline", "Timeline", this.faCaretUp),
|
||||
this.createChildItem("landing-templates", "Templates", this.faCaretUp),
|
||||
|
||||
|
||||
];
|
||||
this.addMenuItem("landing", "Landing", this.faLayerGroup, landingChildren);
|
||||
|
||||
|
||||
// Utilities (standalone)
|
||||
this.addMenuItem("fontawesome", "FontAwesome Icons", this.faCheckSquare);
|
||||
this.addMenuItem("accessibility", "Accessability", this.faCheckSquare);
|
||||
@@ -277,6 +298,7 @@ export class DashboardComponent {
|
||||
this.addMenuItem("font-manager", "Font Manager", this.faCheckSquare);
|
||||
this.addMenuItem("data-utils", "Data Utils", this.faCheckSquare);
|
||||
this.addMenuItem("code-display", "Code Display", this.faCheckSquare);
|
||||
this.addMenuItem("backgrounds", "Backgrounds", this.faCheckSquare);
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user