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
@@ -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);
|
||||
}
|
||||
*/
|
||||
}
|
||||
Reference in New Issue
Block a user