diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 404 |
1 files changed, 223 insertions, 181 deletions
diff --git a/static/index.html b/static/index.html index ac88379..a796239 100644 --- a/static/index.html +++ b/static/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>TaskFlow - Project Management Dashboard</title> + <title>TaskFlow - Streamline Your Project Management</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> @@ -12,18 +12,14 @@ <div class="nav-container"> <div class="nav-logo">TaskFlow</div> <ul class="nav-menu"> - <li><a href="#dashboard" class="nav-link">Dashboard</a></li> - <li><a href="#projects" class="nav-link">Projects</a></li> - <li><a href="#team" class="nav-link">Team</a></li> - <li><a href="#reports" class="nav-link">Reports</a></li> + <li><a href="#features" class="nav-link">Features</a></li> + <li><a href="#pricing" class="nav-link">Pricing</a></li> + <li><a href="#about" class="nav-link">About</a></li> + <li><a href="#contact" class="nav-link">Contact</a></li> </ul> <div class="nav-actions"> - <div class="notification-icon">🔔</div> - <div class="user-profile"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%236366f1'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='12' font-weight='bold'%3EJD%3C/text%3E%3C/svg%3E" alt="User" class="profile-img"> - <span class="username">John Doe</span> - <div class="dropdown-arrow">â–¼</div> - </div> + <button class="btn btn-ghost">Sign In</button> + <button class="btn btn-primary">Start Free Trial</button> </div> <div class="hamburger"> <span></span> @@ -34,189 +30,157 @@ </nav> <main> - <section id="dashboard" class="hero"> + <section class="hero"> <div class="hero-content"> - <div class="welcome-section"> + <div class="hero-text"> <h1 class="hero-title"> - Welcome back, <span class="gradient-text">John</span> + Streamline Your <span class="gradient-text">Project Management</span> </h1> - <p class="hero-subtitle">Here's what's happening with your projects today</p> - <div class="quick-stats"> - <div class="stat-card"> - <div class="stat-number">12</div> - <div class="stat-label">Active Projects</div> + <p class="hero-subtitle"> + TaskFlow helps teams collaborate better, track progress effortlessly, and deliver projects on time. + Join thousands of teams who trust TaskFlow to get things done. + </p> + <div class="hero-buttons"> + <button class="btn btn-primary btn-large">Start Free Trial</button> + <button class="btn btn-secondary btn-large">Watch Demo</button> + </div> + <div class="hero-stats"> + <div class="stat-item"> + <strong>10,000+</strong> + <span>Active Teams</span> </div> - <div class="stat-card"> - <div class="stat-number">47</div> - <div class="stat-label">Tasks Due</div> + <div class="stat-item"> + <strong>500K+</strong> + <span>Projects Completed</span> </div> - <div class="stat-card"> - <div class="stat-number">8</div> - <div class="stat-label">Team Members</div> + <div class="stat-item"> + <strong>99.9%</strong> + <span>Uptime</span> </div> </div> - <div class="hero-buttons"> - <button class="btn btn-primary">Create New Project</button> - <button class="btn btn-secondary">View All Tasks</button> - </div> </div> - <div class="dashboard-preview"> - <div class="preview-card card-1"> - <div class="card-header">Recent Activity</div> - <div class="activity-item">Sarah completed "UI Design"</div> - <div class="activity-item">Mike updated project timeline</div> - <div class="activity-item">New comment on "Backend API"</div> - </div> - <div class="preview-card card-2"> - <div class="card-header">Upcoming Deadlines</div> - <div class="deadline-item"> - <span class="deadline-date">Today</span> - <span class="deadline-task">Mobile App Testing</span> + <div class="hero-visual"> + <div class="dashboard-mockup"> + <div class="mockup-header"> + <div class="mockup-dots"> + <span></span> + <span></span> + <span></span> + </div> + <div class="mockup-title">TaskFlow Dashboard</div> </div> - <div class="deadline-item"> - <span class="deadline-date">Tomorrow</span> - <span class="deadline-task">Client Presentation</span> + <div class="mockup-content"> + <div class="mockup-sidebar"> + <div class="sidebar-item active"></div> + <div class="sidebar-item"></div> + <div class="sidebar-item"></div> + <div class="sidebar-item"></div> + </div> + <div class="mockup-main"> + <div class="mockup-cards"> + <div class="mockup-card"></div> + <div class="mockup-card"></div> + <div class="mockup-card"></div> + </div> + <div class="mockup-chart"></div> + </div> </div> </div> </div> </div> </section> - <section id="projects" class="projects"> + <section class="social-proof"> + <div class="container"> + <p class="social-proof-text">Trusted by leading companies worldwide</p> + <div class="company-logos"> + <div class="company-logo">TechCorp</div> + <div class="company-logo">InnovateLab</div> + <div class="company-logo">StartupXYZ</div> + <div class="company-logo">GlobalTech</div> + <div class="company-logo">FutureWorks</div> + </div> + </div> + </section> + + <section id="features" class="features"> <div class="container"> <div class="section-header"> - <h2 class="section-title">Active Projects</h2> - <button class="btn btn-primary">+ New Project</button> + <h2 class="section-title">Everything you need to manage projects</h2> + <p class="section-subtitle">Powerful features designed to help your team work more efficiently</p> </div> - <div class="projects-grid"> - <div class="project-card"> - <div class="project-status status-active">Active</div> - <div class="project-content"> - <h3>E-Commerce Platform</h3> - <p>Building a modern React-based shopping platform with real-time inventory management</p> - <div class="project-progress"> - <div class="progress-bar"> - <div class="progress-fill" style="width: 75%"></div> - </div> - <span class="progress-text">75% Complete</span> - </div> - <div class="project-meta"> - <div class="project-team"> - <div class="team-avatars"> - <div class="avatar">JS</div> - <div class="avatar">MK</div> - <div class="avatar">+2</div> - </div> - </div> - <div class="project-due">Due: Dec 15</div> - </div> - </div> + <div class="features-grid"> + <div class="feature-card"> + <div class="feature-icon">📊</div> + <h3>Project Tracking</h3> + <p>Monitor project progress with intuitive dashboards and real-time updates. Never lose sight of your goals.</p> </div> - <div class="project-card"> - <div class="project-status status-review">In Review</div> - <div class="project-content"> - <h3>Analytics Dashboard</h3> - <p>Data visualization dashboard with interactive charts and real-time updates</p> - <div class="project-progress"> - <div class="progress-bar"> - <div class="progress-fill" style="width: 90%"></div> - </div> - <span class="progress-text">90% Complete</span> - </div> - <div class="project-meta"> - <div class="project-team"> - <div class="team-avatars"> - <div class="avatar">AL</div> - <div class="avatar">RH</div> - </div> - </div> - <div class="project-due">Due: Nov 28</div> - </div> - </div> + <div class="feature-card"> + <div class="feature-icon">👥</div> + <h3>Team Collaboration</h3> + <p>Seamless communication tools keep your team connected and productive, no matter where they work.</p> </div> - <div class="project-card"> - <div class="project-status status-planning">Planning</div> - <div class="project-content"> - <h3>Mobile App Redesign</h3> - <p>Complete UI/UX overhaul for the mobile application with new design system</p> - <div class="project-progress"> - <div class="progress-bar"> - <div class="progress-fill" style="width: 25%"></div> - </div> - <span class="progress-text">25% Complete</span> - </div> - <div class="project-meta"> - <div class="project-team"> - <div class="team-avatars"> - <div class="avatar">SM</div> - <div class="avatar">+3</div> - </div> - </div> - <div class="project-due">Due: Jan 20</div> - </div> - </div> + <div class="feature-card"> + <div class="feature-icon">📅</div> + <h3>Timeline Management</h3> + <p>Visual timelines and milestone tracking ensure your projects stay on schedule and within budget.</p> + </div> + <div class="feature-card"> + <div class="feature-icon">📈</div> + <h3>Analytics & Reports</h3> + <p>Detailed insights and customizable reports help you make data-driven decisions for better outcomes.</p> + </div> + <div class="feature-card"> + <div class="feature-icon">🔒</div> + <h3>Enterprise Security</h3> + <p>Bank-level security with SSO, two-factor authentication, and compliance with industry standards.</p> + </div> + <div class="feature-card"> + <div class="feature-icon">🔗</div> + <h3>Integrations</h3> + <p>Connect with your favorite tools including Slack, GitHub, Google Workspace, and 100+ more apps.</p> </div> </div> </div> </section> - <section id="team" class="team"> + <section class="testimonials"> <div class="container"> - <h2 class="section-title">Team Overview</h2> - <div class="team-grid"> - <div class="team-member"> - <div class="member-avatar large-avatar">JS</div> - <div class="member-info"> - <h3>Jessica Smith</h3> - <p>Frontend Developer</p> - <div class="member-status online">Online</div> + <h2 class="section-title">What our customers say</h2> + <div class="testimonials-grid"> + <div class="testimonial-card"> + <div class="testimonial-content"> + <p>"TaskFlow transformed how our team works. We've increased productivity by 40% and never miss deadlines anymore."</p> </div> - <div class="member-stats"> - <div class="stat"> - <span class="stat-number">8</span> - <span class="stat-label">Active Tasks</span> + <div class="testimonial-author"> + <div class="author-avatar">SM</div> + <div class="author-info"> + <div class="author-name">Sarah Mitchell</div> + <div class="author-title">Project Manager, TechCorp</div> </div> </div> </div> - <div class="team-member"> - <div class="member-avatar large-avatar">MK</div> - <div class="member-info"> - <h3>Mike Kim</h3> - <p>Backend Developer</p> - <div class="member-status away">Away</div> + <div class="testimonial-card"> + <div class="testimonial-content"> + <p>"The best project management tool we've used. Intuitive interface and powerful features that actually help us get work done."</p> </div> - <div class="member-stats"> - <div class="stat"> - <span class="stat-number">5</span> - <span class="stat-label">Active Tasks</span> + <div class="testimonial-author"> + <div class="author-avatar">MJ</div> + <div class="author-info"> + <div class="author-name">Michael Johnson</div> + <div class="author-title">CTO, StartupXYZ</div> </div> </div> </div> - <div class="team-member"> - <div class="member-avatar large-avatar">AL</div> - <div class="member-info"> - <h3>Alex Lee</h3> - <p>UI/UX Designer</p> - <div class="member-status online">Online</div> + <div class="testimonial-card"> + <div class="testimonial-content"> + <p>"TaskFlow's reporting features give us insights we never had before. It's like having a project analyst on the team."</p> </div> - <div class="member-stats"> - <div class="stat"> - <span class="stat-number">12</span> - <span class="stat-label">Active Tasks</span> - </div> - </div> - </div> - <div class="team-member"> - <div class="member-avatar large-avatar">RH</div> - <div class="member-info"> - <h3>Rachel Harris</h3> - <p>Project Manager</p> - <div class="member-status offline">Offline</div> - </div> - <div class="member-stats"> - <div class="stat"> - <span class="stat-number">3</span> - <span class="stat-label">Active Tasks</span> + <div class="testimonial-author"> + <div class="author-avatar">EL</div> + <div class="author-info"> + <div class="author-name">Emily Lee</div> + <div class="author-title">Operations Director, GlobalTech</div> </div> </div> </div> @@ -224,47 +188,125 @@ </div> </section> - <section id="reports" class="reports"> + <section id="pricing" class="pricing"> <div class="container"> - <h2 class="section-title">Project Reports</h2> - <div class="reports-grid"> - <div class="report-card"> - <h3>Weekly Summary</h3> - <div class="report-chart"> - <div class="chart-placeholder">📊</div> + <div class="section-header"> + <h2 class="section-title">Simple, transparent pricing</h2> + <p class="section-subtitle">Choose the plan that's right for your team</p> + </div> + <div class="pricing-grid"> + <div class="pricing-card"> + <div class="pricing-header"> + <h3>Starter</h3> + <div class="price"> + <span class="price-amount">$9</span> + <span class="price-period">/user/month</span> + </div> </div> - <p>Tasks completed this week: <strong>23</strong></p> - <button class="btn btn-secondary">View Details</button> + <ul class="pricing-features"> + <li>Up to 10 projects</li> + <li>Basic reporting</li> + <li>Email support</li> + <li>5GB storage</li> + </ul> + <button class="btn btn-secondary btn-full">Start Free Trial</button> </div> - <div class="report-card"> - <h3>Team Performance</h3> - <div class="report-chart"> - <div class="chart-placeholder">📈</div> + <div class="pricing-card featured"> + <div class="pricing-badge">Most Popular</div> + <div class="pricing-header"> + <h3>Professional</h3> + <div class="price"> + <span class="price-amount">$19</span> + <span class="price-period">/user/month</span> + </div> </div> - <p>Average completion rate: <strong>87%</strong></p> - <button class="btn btn-secondary">View Details</button> + <ul class="pricing-features"> + <li>Unlimited projects</li> + <li>Advanced analytics</li> + <li>Priority support</li> + <li>50GB storage</li> + <li>Team collaboration tools</li> + <li>Custom integrations</li> + </ul> + <button class="btn btn-primary btn-full">Start Free Trial</button> </div> - <div class="report-card"> - <h3>Project Timeline</h3> - <div class="report-chart"> - <div class="chart-placeholder">📅</div> + <div class="pricing-card"> + <div class="pricing-header"> + <h3>Enterprise</h3> + <div class="price"> + <span class="price-amount">$39</span> + <span class="price-period">/user/month</span> + </div> </div> - <p>On-time delivery rate: <strong>92%</strong></p> - <button class="btn btn-secondary">View Details</button> + <ul class="pricing-features"> + <li>Everything in Professional</li> + <li>Advanced security</li> + <li>24/7 phone support</li> + <li>Unlimited storage</li> + <li>SSO & SAML</li> + <li>Custom onboarding</li> + </ul> + <button class="btn btn-secondary btn-full">Contact Sales</button> </div> </div> </div> </section> + + <section class="cta"> + <div class="container"> + <div class="cta-content"> + <h2>Ready to transform your project management?</h2> + <p>Join thousands of teams already using TaskFlow to deliver better results, faster.</p> + <div class="cta-buttons"> + <button class="btn btn-primary btn-large">Start Your Free Trial</button> + <button class="btn btn-ghost btn-large">Schedule a Demo</button> + </div> + <p class="cta-note">No credit card required • 14-day free trial • Cancel anytime</p> + </div> + </div> + </section> </main> <footer class="footer"> <div class="container"> <div class="footer-content"> + <div class="footer-section"> + <div class="footer-logo">TaskFlow</div> + <p>Streamline your project management with the tools teams love to use.</p> + </div> + <div class="footer-section"> + <h4>Product</h4> + <ul> + <li><a href="#features">Features</a></li> + <li><a href="#pricing">Pricing</a></li> + <li><a href="#integrations">Integrations</a></li> + <li><a href="#security">Security</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Company</h4> + <ul> + <li><a href="#about">About</a></li> + <li><a href="#careers">Careers</a></li> + <li><a href="#blog">Blog</a></li> + <li><a href="#press">Press</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Support</h4> + <ul> + <li><a href="#help">Help Center</a></li> + <li><a href="#contact">Contact</a></li> + <li><a href="#status">Status</a></li> + <li><a href="#api">API Docs</a></li> + </ul> + </div> + </div> + <div class="footer-bottom"> <p>© 2025 TaskFlow. All rights reserved.</p> <div class="footer-links"> <a href="#privacy">Privacy Policy</a> <a href="#terms">Terms of Service</a> - <a href="#support">Support</a> </div> </div> </div> |