246c62fd49
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
307 lines
8.5 KiB
TypeScript
307 lines
8.5 KiB
TypeScript
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'
|
|
}
|
|
]
|
|
};
|
|
} |