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,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'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user