+
+
Conversion Components Demo
+
+ Phase 3 components focused on user actions and conversions, including CTAs, pricing tables, newsletter signups, and contact forms.
+
+
+
🚧 Under Construction: This demo is temporarily disabled while the ui-landing-pages library is being 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);
+ }
+ */
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/data-utils-demo/data-utils-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/data-utils-demo/data-utils-demo.component.ts
index ab9e975..512bbce 100644
--- a/projects/demo-ui-essentials/src/app/demos/data-utils-demo/data-utils-demo.component.ts
+++ b/projects/demo-ui-essentials/src/app/demos/data-utils-demo/data-utils-demo.component.ts
@@ -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
) => ({
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) => ({
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,
diff --git a/projects/demo-ui-essentials/src/app/demos/demos.routes.ts b/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
index c17a605..7b6ae9e 100644
--- a/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
+++ b/projects/demo-ui-essentials/src/app/demos/demos.routes.ts
@@ -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") {
-
+
Hero Components Demo
+
+
+
+ Basic Hero Section
+ A gradient hero with centered content and dual CTAs
+
+
+
+
+
+
+ Light Hero Section
+ Clean design with left-aligned content
+
+
+
+
+
+
+ Animated Background Hero
+ Full height with animated gradient background
+
+
+
+
+
+
+ Hero With Image
+ Split layout with image on the right
+
+
+
+
+
+
+ Hero Image - Different Layout
+ Image on left with gradient background
+
+
+
+
+
+
+ Split Screen Hero - Text
+ 50/50 split with text content on both sides
+
+
+
+
+
+
+ Split Screen Hero - Mixed Media
+ 60/40 split with text and image content
+
+
+
+
+
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HeroSectionsDemoComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HeroSectionsDemoComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/demo-ui-essentials/src/app/demos/hero-sections-demo/hero-sections-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/hero-sections-demo/hero-sections-demo.component.ts
new file mode 100644
index 0000000..b046f40
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/hero-sections-demo/hero-sections-demo.component.ts
@@ -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: 'Powerful Features Everything you need to build professional landing pages with our comprehensive component library.
'
+ },
+ rightContent: {
+ type: 'text',
+ content: 'Easy to Use Drop-in components that work seamlessly with your existing Angular applications.
'
+ }
+ };
+
+ mediaSplitConfig: HeroSplitConfig = {
+ title: 'Media Split Hero',
+ subtitle: 'Text and image combination',
+ alignment: 'left',
+ backgroundType: 'gradient',
+ minHeight: 'large',
+ splitRatio: '60-40',
+ leftContent: {
+ type: 'text',
+ content: 'See It In Action Watch our components come to life with interactive examples and real-world use cases.
'
+ },
+ 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
+ }
+}
diff --git a/projects/demo-ui-essentials/src/app/demos/landing-faq-demo/landing-faq-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/landing-faq-demo/landing-faq-demo.component.ts
new file mode 100644
index 0000000..56261ed
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/landing-faq-demo/landing-faq-demo.component.ts
@@ -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: `
+
+
+
+
+
+
Bordered Theme
+
+
+
+
+
Minimal Theme
+
+
+
+
+
Multiple Expand Enabled
+
+ -->
+
+
Feature Grid Component
+
Showcase features in responsive grid layouts with icons, images, and links
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Configuration
+ {{ configExample }}
+
+
+
+ Landing Footer - Light Theme
+ Comprehensive footer with multiple columns, newsletter signup, and social links.
+
+
+
+
+
+
+ Landing Footer - Dark Theme
+ Dark theme footer with company branding and legal links.
+
+
+
+
+
+
+ Landing Footer - Minimal
+ Simple footer with just essential links and copyright.
+
+
+
+
+
+
+ Configuration Options
+
+
+ Theme: {{ lightFooterConfig().theme }}
+
+
+
+ Show Divider: {{ lightFooterConfig().showDivider ? 'ON' : 'OFF' }}
+
+
+
+ Add Column
+
+
+
+ Remove Column
+
+
+
+
+ `,
+ 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({
+ 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({
+ 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({
+ 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}`);
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/landing-header-demo/landing-header-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/landing-header-demo/landing-header-demo.component.ts
new file mode 100644
index 0000000..f2155b1
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/landing-header-demo/landing-header-demo.component.ts
@@ -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: `
+
+
+ Landing Header - Light Theme
+ Sticky navigation header with transparent background that becomes solid on scroll.
+
+
+
+
+
+
+ Landing Header - Dark Theme
+ Dark theme version with logo and mega menu navigation.
+
+
+
+
+
+
+ Landing Header - With Dropdown Menu
+ Header with dropdown navigation and badges.
+
+
+
+
+
+
+ Configuration Options
+
+
+ Toggle Transparent: {{ lightHeaderConfig().transparent ? 'ON' : 'OFF' }}
+
+
+
+ Toggle Sticky: {{ lightHeaderConfig().sticky ? 'ON' : 'OFF' }}
+
+
+
+ Toggle Mobile Menu: {{ lightHeaderConfig().showMobileMenu ? 'ON' : 'OFF' }}
+
+
+
+
+
+
+ Scroll Content
+
+ Scroll to see header behavior
+
+
+
+
+ More Content
+
+ Keep scrolling...
+
+
+
+ `,
+ 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({
+ 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({
+ 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({
+ 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);
+ }
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss
new file mode 100644
index 0000000..78f3901
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.ts b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.ts
new file mode 100644
index 0000000..d71d4bf
--- /dev/null
+++ b/projects/demo-ui-essentials/src/app/demos/landing-logo-cloud-demo/landing-logo-cloud-demo.component.ts
@@ -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: `
+
+
Logo Cloud Component
+
Display partner and client logos in various layouts
+
+
+
+
+
+
+
+
+
+
+
+
+ Configuration
+ {{ configExample }}
+
+
+
Statistics Display Component
+
Showcase key metrics with animated counters and various layouts
+
+
+
+ Row Layout - Minimal
+
+
+
+
+
+
+ Grid Layout - Card Variant
+
+
+
+
+
+
+ Primary Background
+
+
+
+
+
+
+ Highlighted Variant
+
+
+
+
+
+
+ Configuration
+ {{ configExample }}
+
+
+
+
+
+
+
3 Column Layout (Default)
+
+
+
+
+
2 Column Layout
+
+
+
+
+
4 Column Layout
+
+
+
+
+
Without Bio Text
+
+
+
+
+
+
+ SaaS Template
+
+
+ Product Template
+
+
+ Agency Template
+
+
+
+
+ @switch (activeTemplate) {
+ @case ('saas') {
+
+
+
Testimonial Carousel Component
+
Display customer testimonials with carousel navigation and various styles
+
+
+
Component Preview Unavailable
+
The TestimonialCarouselComponent will be available once the ui-landing-pages library is built.
+
This demo will show:
+
+ • Single Item Carousel
+ • Multi-Item Carousel
+ • Quote Variant
+ • Minimal Variant
+
+
+
+
+
+ Configuration Example
+ {{ configExample }}
+
+
+
+
+
+
+
Vertical Timeline (Default)
+
+
+
+
+
Horizontal Timeline
+
+
+
+
+
Minimal Theme
+
+
+
+
+
Connected Theme
+
+
+
+
+
Product Roadmap
+
+
@for (lineNum of lineNumbers(); track lineNum) {
-
{{ lineNum }}
-
+