Replaced index with generated landing

The generated index had a fake logged in interface. The generated landing page is more appropriate. We don't need a logged in page, because the entire exploit should work without needing to be logged in.
author: Robby Zambito <contact@robbyzambito.me> 2025-08-02 19:06:42 -0400
committer: Robby Zambito <contact@robbyzambito.me> 2025-08-02 19:07:06 -0400
commit: 1ac73ff7cae110f9d0b1aa0bf62283b6d2e26022 (patch)
tree: cc1451560dbe84f573135aec2c6f92fec25b58d7
parent: b3c85a763f719d62c1fbce8cff90712e35d70b86 (diff)
6 files changed, 703 insertions, 1771 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>&copy; 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>
diff --git a/static/landing-script.js b/static/landing-script.js
deleted file mode 100644
index 1189cd4..0000000
--- a/static/landing-script.js
+++ /dev/null
@@ -1,220 +0,0 @@
-// Smooth scrolling for navigation links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        const target = document.querySelector(this.getAttribute('href'));
-        if (target) {
-            target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start'
-            });
-        }
-    });
-});
-
-// Mobile menu toggle
-const hamburger = document.querySelector('.hamburger');
-const navMenu = document.querySelector('.nav-menu');
-
-if (hamburger && navMenu) {
-    hamburger.addEventListener('click', () => {
-        hamburger.classList.toggle('active');
-        navMenu.classList.toggle('active');
-    });
-
-    // Close mobile menu when clicking on a link
-    document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
-        hamburger.classList.remove('active');
-        navMenu.classList.remove('active');
-    }));
-}
-
-// Navbar background on scroll
-window.addEventListener('scroll', () => {
-    const navbar = document.querySelector('.navbar');
-    if (window.scrollY > 50) {
-        navbar.style.background = 'rgba(255, 255, 255, 0.98)';
-    } else {
-        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
-    }
-});
-
-// CTA button handlers
-document.querySelectorAll('.btn').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-        const buttonText = btn.textContent.toLowerCase();
-
-        if (buttonText.includes('sign in') || buttonText.includes('login')) {
-            alert('Redirecting to login page...\n\nThis would navigate to the sign-in form.');
-        } else if (buttonText.includes('trial') || buttonText.includes('start')) {
-            alert('Starting your free trial!\n\nThis would open the registration form with a 14-day trial.');
-        } else if (buttonText.includes('demo') || buttonText.includes('watch')) {
-            alert('Opening demo video...\n\nThis would show a product demonstration or schedule a live demo.');
-        } else if (buttonText.includes('contact') || buttonText.includes('sales')) {
-            alert('Contacting sales team...\n\nThis would open a contact form or calendar booking widget.');
-        }
-    });
-});
-
-// Intersection Observer for animations
-const observerOptions = {
-    threshold: 0.1,
-    rootMargin: '0px 0px -50px 0px'
-};
-
-const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            entry.target.style.opacity = '1';
-            entry.target.style.transform = 'translateY(0)';
-        }
-    });
-}, observerOptions);
-
-// Observe elements for animation
-document.querySelectorAll('.feature-card, .testimonial-card, .pricing-card').forEach(el => {
-    el.style.opacity = '0';
-    el.style.transform = 'translateY(30px)';
-    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
-    observer.observe(el);
-});
-
-// Hero section animations
-window.addEventListener('load', () => {
-    const heroTitle = document.querySelector('.hero-title');
-    const heroSubtitle = document.querySelector('.hero-subtitle');
-    const heroButtons = document.querySelector('.hero-buttons');
-    const heroStats = document.querySelector('.hero-stats');
-    const dashboardMockup = document.querySelector('.dashboard-mockup');
-
-    [heroTitle, heroSubtitle, heroButtons, heroStats].forEach((element, index) => {
-        if (element) {
-            element.style.opacity = '0';
-            element.style.transform = 'translateY(30px)';
-            element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
-
-            setTimeout(() => {
-                element.style.opacity = '1';
-                element.style.transform = 'translateY(0)';
-            }, 200 + (index * 200));
-        }
-    });
-
-    // Dashboard mockup animation
-    if (dashboardMockup) {
-        dashboardMockup.style.opacity = '0';
-        dashboardMockup.style.transform = 'perspective(1000px) rotateY(-25deg) rotateX(15deg) translateY(50px)';
-        dashboardMockup.style.transition = 'opacity 1s ease, transform 1s ease';
-
-        setTimeout(() => {
-            dashboardMockup.style.opacity = '1';
-            dashboardMockup.style.transform = 'perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(0)';
-        }, 800);
-    }
-});
-
-// Pricing card hover effects
-document.querySelectorAll('.pricing-card').forEach(card => {
-    card.addEventListener('mouseenter', () => {
-        if (!card.classList.contains('featured')) {
-            card.style.transform = 'translateY(-10px)';
-        }
-    });
-
-    card.addEventListener('mouseleave', () => {
-        if (!card.classList.contains('featured')) {
-            card.style.transform = 'translateY(0)';
-        }
-    });
-});
-
-// Company logo hover effects
-document.querySelectorAll('.company-logo').forEach(logo => {
-    logo.addEventListener('mouseenter', () => {
-        logo.style.opacity = '1';
-        logo.style.transform = 'scale(1.1)';
-    });
-
-    logo.addEventListener('mouseleave', () => {
-        logo.style.opacity = '0.6';
-        logo.style.transform = 'scale(1)';
-    });
-});
-
-// Add mobile menu styles dynamically
-const style = document.createElement('style');
-style.textContent = `
-    @media (max-width: 768px) {
-        .nav-menu.active {
-            display: flex;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 100%;
-            background: white;
-            flex-direction: column;
-            padding: 1rem 2rem;
-            box-shadow: var(--shadow);
-            border-top: 1px solid var(--border);
-        }
-
-        .hamburger.active span:nth-child(1) {
-            transform: rotate(-45deg) translate(-5px, 6px);
-        }
-
-        .hamburger.active span:nth-child(2) {
-            opacity: 0;
-        }
-
-        .hamburger.active span:nth-child(3) {
-            transform: rotate(45deg) translate(-5px, -6px);
-        }
-    }
-`;
-document.head.appendChild(style);
-
-// Simulate dynamic stats counter
-const animateStats = () => {
-    const statNumbers = document.querySelectorAll('.stat-item strong');
-    const targets = ['10,000+', '500K+', '99.9%'];
-
-    statNumbers.forEach((stat, index) => {
-        const target = targets[index];
-        let current = 0;
-        const increment = target.includes('K') ? 5000 : target.includes('%') ? 1 : 100;
-        const max = target.includes('K') ? 500000 : target.includes('%') ? 99.9 : 10000;
-
-        const updateStat = () => {
-            if (current < max) {
-                current += increment;
-                if (target.includes('K')) {
-                    stat.textContent = Math.floor(current / 1000) + 'K+';
-                } else if (target.includes('%')) {
-                    stat.textContent = (current / 10).toFixed(1) + '%';
-                } else {
-                    stat.textContent = current.toLocaleString() + '+';
-                }
-                setTimeout(updateStat, 50);
-            } else {
-                stat.textContent = target;
-            }
-        };
-
-        setTimeout(updateStat, 1000 + (index * 200));
-    });
-};
-
-// Trigger stats animation when hero is visible
-const heroObserver = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            animateStats();
-            heroObserver.unobserve(entry.target);
-        }
-    });
-});
-
-const heroSection = document.querySelector('.hero');
-if (heroSection) {
-    heroObserver.observe(heroSection);
-}
diff --git a/static/landing-styles.css b/static/landing-styles.css
deleted file mode 100644
index cf359fb..0000000
--- a/static/landing-styles.css
+++ /dev/null
@@ -1,744 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-:root {
-    --primary-color: #6366f1;
-    --primary-dark: #4f46e5;
-    --secondary-color: #f1f5f9;
-    --text-primary: #1e293b;
-    --text-secondary: #64748b;
-    --background: #ffffff;
-    --surface: #f8fafc;
-    --border: #e2e8f0;
-    --success: #10b981;
-    --warning: #f59e0b;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-    --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-}
-
-body {
-    font-family: 'Inter', sans-serif;
-    line-height: 1.6;
-    color: var(--text-primary);
-    background: var(--background);
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-}
-
-/* Navigation */
-.navbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    border-bottom: 1px solid var(--border);
-}
-
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav-logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.nav-menu {
-    display: flex;
-    list-style: none;
-    gap: 2rem;
-}
-
-.nav-link {
-    text-decoration: none;
-    color: var(--text-primary);
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.nav-link:hover {
-    color: var(--primary-color);
-}
-
-.nav-actions {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-}
-
-.hamburger span {
-    width: 25px;
-    height: 3px;
-    background: var(--text-primary);
-    margin: 3px 0;
-    transition: 0.3s;
-}
-
-/* Buttons */
-.btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 0.5rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 0.875rem;
-}
-
-.btn-large {
-    padding: 1rem 2rem;
-    font-size: 1rem;
-}
-
-.btn-full {
-    width: 100%;
-    justify-content: center;
-}
-
-.btn-primary {
-    background: var(--gradient);
-    color: white;
-    box-shadow: var(--shadow);
-}
-
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-}
-
-.btn-secondary {
-    background: white;
-    color: var(--text-primary);
-    border: 2px solid var(--border);
-}
-
-.btn-secondary:hover {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-}
-
-.btn-ghost {
-    background: transparent;
-    color: var(--text-primary);
-    border: none;
-}
-
-.btn-ghost:hover {
-    background: var(--surface);
-}
-
-/* Hero Section */
-.hero {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    padding: 6rem 2rem 4rem;
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-}
-
-.hero-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-}
-
-.hero-title {
-    font-size: 3.5rem;
-    font-weight: 700;
-    line-height: 1.1;
-    margin-bottom: 1.5rem;
-}
-
-.gradient-text {
-    background: var(--gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.hero-subtitle {
-    font-size: 1.25rem;
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-    line-height: 1.6;
-}
-
-.hero-buttons {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 3rem;
-}
-
-.hero-stats {
-    display: flex;
-    gap: 2rem;
-}
-
-.stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.stat-item strong {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-}
-
-.stat-item span {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-/* Dashboard Mockup */
-.dashboard-mockup {
-    background: white;
-    border-radius: 1rem;
-    box-shadow: var(--shadow-lg);
-    overflow: hidden;
-    transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
-    transition: transform 0.3s ease;
-}
-
-.dashboard-mockup:hover {
-    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
-}
-
-.mockup-header {
-    background: var(--surface);
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.mockup-dots {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.mockup-dots span {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--border);
-}
-
-.mockup-dots span:first-child {
-    background: #ef4444;
-}
-
-.mockup-dots span:nth-child(2) {
-    background: #f59e0b;
-}
-
-.mockup-dots span:last-child {
-    background: #10b981;
-}
-
-.mockup-title {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-.mockup-content {
-    display: flex;
-    height: 300px;
-}
-
-.mockup-sidebar {
-    width: 200px;
-    background: var(--surface);
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.sidebar-item {
-    height: 40px;
-    background: var(--border);
-    border-radius: 0.5rem;
-}
-
-.sidebar-item.active {
-    background: var(--gradient);
-}
-
-.mockup-main {
-    flex: 1;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.mockup-cards {
-    display: flex;
-    gap: 1rem;
-}
-
-.mockup-card {
-    flex: 1;
-    height: 100px;
-    background: var(--surface);
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-}
-
-.mockup-chart {
-    flex: 1;
-    background: var(--surface);
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-}
-
-/* Social Proof */
-.social-proof {
-    padding: 4rem 0;
-    background: var(--background);
-    text-align: center;
-}
-
-.social-proof-text {
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-    font-size: 0.875rem;
-}
-
-.company-logos {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 3rem;
-    flex-wrap: wrap;
-}
-
-.company-logo {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    opacity: 0.6;
-}
-
-/* Sections */
-.section-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 1rem;
-}
-
-.section-subtitle {
-    font-size: 1.125rem;
-    color: var(--text-secondary);
-    text-align: center;
-    margin-bottom: 3rem;
-}
-
-.section-header {
-    margin-bottom: 4rem;
-}
-
-/* Features */
-.features {
-    padding: 6rem 0;
-    background: var(--surface);
-}
-
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
-}
-
-.feature-card {
-    background: white;
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
-    text-align: center;
-    transition: transform 0.3s ease;
-}
-
-.feature-card:hover {
-    transform: translateY(-5px);
-}
-
-.feature-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-}
-
-.feature-card h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-}
-
-.feature-card p {
-    color: var(--text-secondary);
-    line-height: 1.6;
-}
-
-/* Testimonials */
-.testimonials {
-    padding: 6rem 0;
-    background: var(--background);
-}
-
-.testimonials-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
-}
-
-.testimonial-card {
-    background: white;
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
-}
-
-.testimonial-content {
-    margin-bottom: 1.5rem;
-}
-
-.testimonial-content p {
-    font-style: italic;
-    color: var(--text-secondary);
-    line-height: 1.6;
-}
-
-.testimonial-author {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.author-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--gradient);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-}
-
-.author-name {
-    font-weight: 600;
-}
-
-.author-title {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-/* Pricing */
-.pricing {
-    padding: 6rem 0;
-    background: var(--surface);
-}
-
-.pricing-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    max-width: 1000px;
-    margin: 0 auto;
-}
-
-.pricing-card {
-    background: white;
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
-    position: relative;
-    text-align: center;
-}
-
-.pricing-card.featured {
-    border: 2px solid var(--primary-color);
-    transform: scale(1.05);
-}
-
-.pricing-badge {
-    position: absolute;
-    top: -12px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--gradient);
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 1rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-}
-
-.pricing-header {
-    margin-bottom: 2rem;
-}
-
-.pricing-header h3 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-}
-
-.price {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-    gap: 0.25rem;
-}
-
-.price-amount {
-    font-size: 3rem;
-    font-weight: 700;
-    color: var(--primary-color);
-}
-
-.price-period {
-    color: var(--text-secondary);
-}
-
-.pricing-features {
-    list-style: none;
-    margin-bottom: 2rem;
-}
-
-.pricing-features li {
-    padding: 0.5rem 0;
-    color: var(--text-secondary);
-    border-bottom: 1px solid var(--border);
-}
-
-.pricing-features li:last-child {
-    border-bottom: none;
-}
-
-/* CTA */
-.cta {
-    padding: 6rem 0;
-    background: var(--text-primary);
-    color: white;
-    text-align: center;
-}
-
-.cta-content h2 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-}
-
-.cta-content p {
-    font-size: 1.125rem;
-    opacity: 0.9;
-    margin-bottom: 2rem;
-}
-
-.cta-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-.cta-note {
-    font-size: 0.875rem;
-    opacity: 0.7;
-}
-
-/* Footer */
-.footer {
-    background: var(--text-primary);
-    color: white;
-    padding: 4rem 0 2rem;
-}
-
-.footer-content {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
-    gap: 3rem;
-    margin-bottom: 3rem;
-}
-
-.footer-logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-}
-
-.footer-section h4 {
-    font-weight: 600;
-    margin-bottom: 1rem;
-}
-
-.footer-section ul {
-    list-style: none;
-}
-
-.footer-section ul li {
-    margin-bottom: 0.5rem;
-}
-
-.footer-section ul li a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer-section ul li a:hover {
-    color: white;
-}
-
-.footer-bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: 2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.footer-links {
-    display: flex;
-    gap: 2rem;
-}
-
-.footer-links a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-    color: white;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .nav-actions {
-        display: none;
-    }
-
-    .hamburger {
-        display: flex;
-    }
-
-    .nav-menu {
-        display: none;
-    }
-
-    .hero-content {
-        grid-template-columns: 1fr;
-        text-align: center;
-    }
-
-    .hero-title {
-        font-size: 2.5rem;
-    }
-
-    .hero-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .hero-stats {
-        justify-content: center;
-    }
-
-    .dashboard-mockup {
-        transform: none;
-    }
-
-    .features-grid,
-    .testimonials-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .pricing-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .pricing-card.featured {
-        transform: none;
-    }
-
-    .cta-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .footer-content {
-        grid-template-columns: 1fr;
-        text-align: center;
-    }
-
-    .footer-bottom {
-        flex-direction: column;
-        gap: 1rem;
-        text-align: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .container {
-        padding: 0 1rem;
-    }
-
-    .hero {
-        padding: 4rem 1rem 2rem;
-    }
-
-    .hero-title {
-        font-size: 2rem;
-    }
-
-    .section-title {
-        font-size: 2rem;
-    }
-
-    .mockup-content {
-        height: 200px;
-    }
-
-    .mockup-sidebar {
-        width: 120px;
-    }
-}
diff --git a/static/landing.html b/static/landing.html
deleted file mode 100644
index 339d865..0000000
--- a/static/landing.html
+++ /dev/null
@@ -1,317 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TaskFlow - Streamline Your Project Management</title>
-    <link rel="stylesheet" href="landing-styles.css">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-</head>
-<body>
-    <nav class="navbar">
-        <div class="nav-container">
-            <div class="nav-logo">TaskFlow</div>
-            <ul class="nav-menu">
-                <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">
-                <button class="btn btn-ghost">Sign In</button>
-                <button class="btn btn-primary">Start Free Trial</button>
-            </div>
-            <div class="hamburger">
-                <span></span>
-                <span></span>
-                <span></span>
-            </div>
-        </div>
-    </nav>
-
-    <main>
-        <section class="hero">
-            <div class="hero-content">
-                <div class="hero-text">
-                    <h1 class="hero-title">
-                        Streamline Your <span class="gradient-text">Project Management</span>
-                    </h1>
-                    <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-item">
-                            <strong>500K+</strong>
-                            <span>Projects Completed</span>
-                        </div>
-                        <div class="stat-item">
-                            <strong>99.9%</strong>
-                            <span>Uptime</span>
-                        </div>
-                    </div>
-                </div>
-                <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="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 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">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="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="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="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 class="testimonials">
-            <div class="container">
-                <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="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="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="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="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="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>
-                </div>
-            </div>
-        </section>
-
-        <section id="pricing" class="pricing">
-            <div class="container">
-                <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>
-                        <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="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>
-                        <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="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>
-                        <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>&copy; 2025 TaskFlow. All rights reserved.</p>
-                <div class="footer-links">
-                    <a href="#privacy">Privacy Policy</a>
-                    <a href="#terms">Terms of Service</a>
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <script src="landing-script.js"></script>
-</body>
-</html>
diff --git a/static/script.js b/static/script.js
index 9219098..1189cd4 100644
--- a/static/script.js
+++ b/static/script.js
@@ -39,49 +39,19 @@ window.addEventListener('scroll', () => {
     }
 });
 
-// User profile dropdown simulation
-const userProfile = document.querySelector('.user-profile');
-if (userProfile) {
-    userProfile.addEventListener('click', () => {
-        alert('User menu would open here with options like:\n• Profile Settings\n• Account Preferences\n• Logout');
-    });
-}
-
-// Notification icon click
-const notificationIcon = document.querySelector('.notification-icon');
-if (notificationIcon) {
-    notificationIcon.addEventListener('click', () => {
-        alert('Notifications:\n• Sarah completed "UI Design"\n• New comment on "Backend API"\n• Project deadline approaching');
-    });
-}
-
-// Project card interactions
-document.querySelectorAll('.project-card').forEach(card => {
-    card.addEventListener('click', () => {
-        const projectName = card.querySelector('h3').textContent;
-        alert(`Opening project: ${projectName}\n\nThis would navigate to the detailed project view.`);
-    });
-});
-
-// Team member interactions
-document.querySelectorAll('.team-member').forEach(member => {
-    member.addEventListener('click', () => {
-        const memberName = member.querySelector('h3').textContent;
-        alert(`Opening profile for: ${memberName}\n\nThis would show detailed team member information.`);
-    });
-});
-
-// Button click handlers
+// CTA button handlers
 document.querySelectorAll('.btn').forEach(btn => {
     btn.addEventListener('click', (e) => {
-        const buttonText = btn.textContent;
-
-        if (buttonText.includes('Create') || buttonText.includes('New')) {
-            e.stopPropagation();
-            alert(`${buttonText} functionality would open here.\n\nThis would typically open a modal or navigate to a creation form.`);
-        } else if (buttonText.includes('View')) {
-            e.stopPropagation();
-            alert(`${buttonText} functionality would open here.\n\nThis would navigate to a detailed view or listing page.`);
+        const buttonText = btn.textContent.toLowerCase();
+
+        if (buttonText.includes('sign in') || buttonText.includes('login')) {
+            alert('Redirecting to login page...\n\nThis would navigate to the sign-in form.');
+        } else if (buttonText.includes('trial') || buttonText.includes('start')) {
+            alert('Starting your free trial!\n\nThis would open the registration form with a 14-day trial.');
+        } else if (buttonText.includes('demo') || buttonText.includes('watch')) {
+            alert('Opening demo video...\n\nThis would show a product demonstration or schedule a live demo.');
+        } else if (buttonText.includes('contact') || buttonText.includes('sales')) {
+            alert('Contacting sales team...\n\nThis would open a contact form or calendar booking widget.');
         }
     });
 });
@@ -102,21 +72,22 @@ const observer = new IntersectionObserver((entries) => {
 }, observerOptions);
 
 // Observe elements for animation
-document.querySelectorAll('.project-card, .team-member, .report-card, .stat-card').forEach(el => {
+document.querySelectorAll('.feature-card, .testimonial-card, .pricing-card').forEach(el => {
     el.style.opacity = '0';
     el.style.transform = 'translateY(30px)';
     el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
     observer.observe(el);
 });
 
-// Hero section fade-in animation
+// Hero section animations
 window.addEventListener('load', () => {
     const heroTitle = document.querySelector('.hero-title');
     const heroSubtitle = document.querySelector('.hero-subtitle');
-    const quickStats = document.querySelector('.quick-stats');
     const heroButtons = document.querySelector('.hero-buttons');
+    const heroStats = document.querySelector('.hero-stats');
+    const dashboardMockup = document.querySelector('.dashboard-mockup');
 
-    [heroTitle, heroSubtitle, quickStats, heroButtons].forEach((element, index) => {
+    [heroTitle, heroSubtitle, heroButtons, heroStats].forEach((element, index) => {
         if (element) {
             element.style.opacity = '0';
             element.style.transform = 'translateY(30px)';
@@ -125,22 +96,50 @@ window.addEventListener('load', () => {
             setTimeout(() => {
                 element.style.opacity = '1';
                 element.style.transform = 'translateY(0)';
-            }, 300 + (index * 200));
+            }, 200 + (index * 200));
         }
     });
-});
 
-// Simulate real-time updates
-setInterval(() => {
-    const activityItems = document.querySelectorAll('.activity-item');
-    if (activityItems.length > 0) {
-        const randomItem = activityItems[Math.floor(Math.random() * activityItems.length)];
-        randomItem.style.background = '#f0f9ff';
+    // Dashboard mockup animation
+    if (dashboardMockup) {
+        dashboardMockup.style.opacity = '0';
+        dashboardMockup.style.transform = 'perspective(1000px) rotateY(-25deg) rotateX(15deg) translateY(50px)';
+        dashboardMockup.style.transition = 'opacity 1s ease, transform 1s ease';
+
         setTimeout(() => {
-            randomItem.style.background = 'transparent';
-        }, 2000);
+            dashboardMockup.style.opacity = '1';
+            dashboardMockup.style.transform = 'perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(0)';
+        }, 800);
     }
-}, 10000);
+});
+
+// Pricing card hover effects
+document.querySelectorAll('.pricing-card').forEach(card => {
+    card.addEventListener('mouseenter', () => {
+        if (!card.classList.contains('featured')) {
+            card.style.transform = 'translateY(-10px)';
+        }
+    });
+
+    card.addEventListener('mouseleave', () => {
+        if (!card.classList.contains('featured')) {
+            card.style.transform = 'translateY(0)';
+        }
+    });
+});
+
+// Company logo hover effects
+document.querySelectorAll('.company-logo').forEach(logo => {
+    logo.addEventListener('mouseenter', () => {
+        logo.style.opacity = '1';
+        logo.style.transform = 'scale(1.1)';
+    });
+
+    logo.addEventListener('mouseleave', () => {
+        logo.style.opacity = '0.6';
+        logo.style.transform = 'scale(1)';
+    });
+});
 
 // Add mobile menu styles dynamically
 const style = document.createElement('style');
@@ -173,3 +172,49 @@ style.textContent = `
     }
 `;
 document.head.appendChild(style);
+
+// Simulate dynamic stats counter
+const animateStats = () => {
+    const statNumbers = document.querySelectorAll('.stat-item strong');
+    const targets = ['10,000+', '500K+', '99.9%'];
+
+    statNumbers.forEach((stat, index) => {
+        const target = targets[index];
+        let current = 0;
+        const increment = target.includes('K') ? 5000 : target.includes('%') ? 1 : 100;
+        const max = target.includes('K') ? 500000 : target.includes('%') ? 99.9 : 10000;
+
+        const updateStat = () => {
+            if (current < max) {
+                current += increment;
+                if (target.includes('K')) {
+                    stat.textContent = Math.floor(current / 1000) + 'K+';
+                } else if (target.includes('%')) {
+                    stat.textContent = (current / 10).toFixed(1) + '%';
+                } else {
+                    stat.textContent = current.toLocaleString() + '+';
+                }
+                setTimeout(updateStat, 50);
+            } else {
+                stat.textContent = target;
+            }
+        };
+
+        setTimeout(updateStat, 1000 + (index * 200));
+    });
+};
+
+// Trigger stats animation when hero is visible
+const heroObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            animateStats();
+            heroObserver.unobserve(entry.target);
+        }
+    });
+});
+
+const heroSection = document.querySelector('.hero');
+if (heroSection) {
+    heroObserver.observe(heroSection);
+}
diff --git a/static/styles.css b/static/styles.css
index 7bfb5dd..cf359fb 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -15,7 +15,6 @@
     --border: #e2e8f0;
     --success: #10b981;
     --warning: #f59e0b;
-    --danger: #ef4444;
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
@@ -25,7 +24,7 @@ body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     color: var(--text-primary);
-    background: var(--surface);
+    background: var(--background);
 }
 
 .container {
@@ -86,59 +85,73 @@ body {
     gap: 1rem;
 }
 
-.notification-icon {
-    font-size: 1.2rem;
+.hamburger {
+    display: none;
+    flex-direction: column;
     cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    transition: background 0.3s ease;
 }
 
-.notification-icon:hover {
-    background: var(--surface);
+.hamburger span {
+    width: 25px;
+    height: 3px;
+    background: var(--text-primary);
+    margin: 3px 0;
+    transition: 0.3s;
 }
 
-.user-profile {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    padding: 0.5rem;
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
     border-radius: 0.5rem;
-    transition: background 0.3s ease;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.875rem;
 }
 
-.user-profile:hover {
-    background: var(--surface);
+.btn-large {
+    padding: 1rem 2rem;
+    font-size: 1rem;
 }
 
-.profile-img {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+.btn-full {
+    width: 100%;
+    justify-content: center;
 }
 
-.username {
-    font-weight: 500;
+.btn-primary {
+    background: var(--gradient);
+    color: white;
+    box-shadow: var(--shadow);
 }
 
-.dropdown-arrow {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
 }
 
-.hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
+.btn-secondary {
+    background: white;
+    color: var(--text-primary);
+    border: 2px solid var(--border);
 }
 
-.hamburger span {
-    width: 25px;
-    height: 3px;
-    background: var(--text-primary);
-    margin: 3px 0;
-    transition: 0.3s;
+.btn-secondary:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.btn-ghost {
+    background: transparent;
+    color: var(--text-primary);
+    border: none;
+}
+
+.btn-ghost:hover {
+    background: var(--surface);
 }
 
 /* Hero Section */
@@ -146,8 +159,8 @@ body {
     min-height: 100vh;
     display: flex;
     align-items: center;
-    padding: 0 2rem;
-    background: var(--background);
+    padding: 6rem 2rem 4rem;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 }
 
 .hero-content {
@@ -160,10 +173,10 @@ body {
 }
 
 .hero-title {
-    font-size: 3rem;
+    font-size: 3.5rem;
     font-weight: 700;
     line-height: 1.1;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
 }
 
 .gradient-text {
@@ -174,362 +187,453 @@ body {
 }
 
 .hero-subtitle {
-    font-size: 1.125rem;
+    font-size: 1.25rem;
     color: var(--text-secondary);
     margin-bottom: 2rem;
+    line-height: 1.6;
 }
 
-.quick-stats {
+.hero-buttons {
     display: flex;
     gap: 1rem;
-    margin-bottom: 2rem;
+    margin-bottom: 3rem;
 }
 
-.stat-card {
-    background: white;
-    padding: 1rem;
-    border-radius: 0.75rem;
-    box-shadow: var(--shadow);
+.hero-stats {
+    display: flex;
+    gap: 2rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
-    min-width: 100px;
 }
 
-.stat-number {
+.stat-item strong {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary-color);
 }
 
-.stat-label {
-    font-size: 0.75rem;
+.stat-item span {
+    font-size: 0.875rem;
     color: var(--text-secondary);
-    margin-top: 0.25rem;
 }
 
-.hero-buttons {
+/* Dashboard Mockup */
+.dashboard-mockup {
+    background: white;
+    border-radius: 1rem;
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
+    transition: transform 0.3s ease;
+}
+
+.dashboard-mockup:hover {
+    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
+}
+
+.mockup-header {
+    background: var(--surface);
+    padding: 1rem;
     display: flex;
+    align-items: center;
     gap: 1rem;
+    border-bottom: 1px solid var(--border);
 }
 
-.btn {
-    padding: 0.75rem 2rem;
-    border: none;
-    border-radius: 0.5rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-decoration: none;
-    display: inline-block;
+.mockup-dots {
+    display: flex;
+    gap: 0.5rem;
 }
 
-.btn-primary {
-    background: var(--gradient);
-    color: white;
-    box-shadow: var(--shadow);
+.mockup-dots span {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--border);
 }
 
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
+.mockup-dots span:first-child {
+    background: #ef4444;
 }
 
-.btn-secondary {
-    background: white;
-    color: var(--text-primary);
-    border: 2px solid var(--border);
+.mockup-dots span:nth-child(2) {
+    background: #f59e0b;
 }
 
-.btn-secondary:hover {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
+.mockup-dots span:last-child {
+    background: #10b981;
+}
+
+.mockup-title {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.mockup-content {
+    display: flex;
+    height: 300px;
+}
+
+.mockup-sidebar {
+    width: 200px;
+    background: var(--surface);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sidebar-item {
+    height: 40px;
+    background: var(--border);
+    border-radius: 0.5rem;
+}
+
+.sidebar-item.active {
+    background: var(--gradient);
 }
 
-.dashboard-preview {
+.mockup-main {
+    flex: 1;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-.preview-card {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
+.mockup-cards {
+    display: flex;
+    gap: 1rem;
 }
 
-.card-header {
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--text-primary);
+.mockup-card {
+    flex: 1;
+    height: 100px;
+    background: var(--surface);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
 }
 
-.activity-item {
-    padding: 0.5rem 0;
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-    border-bottom: 1px solid var(--border);
+.mockup-chart {
+    flex: 1;
+    background: var(--surface);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
 }
 
-.activity-item:last-child {
-    border-bottom: none;
+/* Social Proof */
+.social-proof {
+    padding: 4rem 0;
+    background: var(--background);
+    text-align: center;
 }
 
-.deadline-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.5rem 0;
+.social-proof-text {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
     font-size: 0.875rem;
 }
 
-.deadline-date {
-    color: var(--primary-color);
-    font-weight: 500;
+.company-logos {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 3rem;
+    flex-wrap: wrap;
 }
 
-.deadline-task {
+.company-logo {
+    font-size: 1.25rem;
+    font-weight: 600;
     color: var(--text-secondary);
+    opacity: 0.6;
 }
 
 /* Sections */
 .section-title {
-    font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: 700;
-    margin-bottom: 2rem;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+.section-subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    text-align: center;
+    margin-bottom: 3rem;
 }
 
 .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
+    margin-bottom: 4rem;
 }
 
-.projects {
-    padding: 4rem 0;
+/* Features */
+.features {
+    padding: 6rem 0;
     background: var(--surface);
 }
 
-.projects-grid {
+.features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 2rem;
 }
 
-.project-card {
+.feature-card {
     background: white;
+    padding: 2rem;
     border-radius: 1rem;
-    padding: 1.5rem;
     box-shadow: var(--shadow);
+    text-align: center;
     transition: transform 0.3s ease;
-    position: relative;
 }
 
-.project-card:hover {
+.feature-card:hover {
     transform: translateY(-5px);
 }
 
-.project-status {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-.status-active {
-    background: #dcfce7;
-    color: #166534;
-}
-
-.status-review {
-    background: #fef3c7;
-    color: #92400e;
-}
-
-.status-planning {
-    background: #dbeafe;
-    color: #1e40af;
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
 }
 
-.project-content h3 {
+.feature-card h3 {
     font-size: 1.25rem;
     font-weight: 600;
-    margin-bottom: 0.5rem;
-    margin-top: 1rem;
+    margin-bottom: 1rem;
 }
 
-.project-content p {
+.feature-card p {
     color: var(--text-secondary);
-    margin-bottom: 1.5rem;
-    font-size: 0.875rem;
+    line-height: 1.6;
 }
 
-.project-progress {
-    margin-bottom: 1rem;
+/* Testimonials */
+.testimonials {
+    padding: 6rem 0;
+    background: var(--background);
 }
 
-.progress-bar {
-    width: 100%;
-    height: 8px;
-    background: var(--border);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 0.5rem;
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
 }
 
-.progress-fill {
-    height: 100%;
-    background: var(--gradient);
-    transition: width 0.3s ease;
+.testimonial-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: var(--shadow);
 }
 
-.progress-text {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
+.testimonial-content {
+    margin-bottom: 1.5rem;
 }
 
-.project-meta {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.testimonial-content p {
+    font-style: italic;
+    color: var(--text-secondary);
+    line-height: 1.6;
 }
 
-.team-avatars {
+.testimonial-author {
     display: flex;
-    gap: 0.25rem;
+    align-items: center;
+    gap: 1rem;
 }
 
-.avatar {
-    width: 28px;
-    height: 28px;
+.author-avatar {
+    width: 48px;
+    height: 48px;
     border-radius: 50%;
     background: var(--gradient);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.75rem;
     font-weight: 600;
 }
 
-.project-due {
-    font-size: 0.75rem;
+.author-name {
+    font-weight: 600;
+}
+
+.author-title {
+    font-size: 0.875rem;
     color: var(--text-secondary);
 }
 
-.team {
-    padding: 4rem 0;
-    background: var(--background);
+/* Pricing */
+.pricing {
+    padding: 6rem 0;
+    background: var(--surface);
 }
 
-.team-grid {
+.pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
-.team-member {
+.pricing-card {
     background: white;
-    padding: 1.5rem;
+    padding: 2rem;
     border-radius: 1rem;
     box-shadow: var(--shadow);
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+    position: relative;
+    text-align: center;
 }
 
-.large-avatar {
-    width: 48px;
-    height: 48px;
-    font-size: 1rem;
+.pricing-card.featured {
+    border: 2px solid var(--primary-color);
+    transform: scale(1.05);
 }
 
-.member-info h3 {
-    font-size: 1rem;
+.pricing-badge {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--gradient);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
     font-weight: 600;
-    margin-bottom: 0.25rem;
 }
 
-.member-info p {
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
+.pricing-header {
+    margin-bottom: 2rem;
 }
 
-.member-status {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.5rem;
-    border-radius: 1rem;
-    font-weight: 500;
+.pricing-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
-.online {
-    background: #dcfce7;
-    color: #166534;
+.price {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.25rem;
 }
 
-.away {
-    background: #fef3c7;
-    color: #92400e;
+.price-amount {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--primary-color);
 }
 
-.offline {
-    background: #f1f5f9;
-    color: #64748b;
+.price-period {
+    color: var(--text-secondary);
 }
 
-.member-stats {
-    margin-left: auto;
-    text-align: center;
+.pricing-features {
+    list-style: none;
+    margin-bottom: 2rem;
 }
 
-.reports {
-    padding: 4rem 0;
-    background: var(--surface);
+.pricing-features li {
+    padding: 0.5rem 0;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border);
 }
 
-.reports-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
+.pricing-features li:last-child {
+    border-bottom: none;
 }
 
-.report-card {
-    background: white;
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
+/* CTA */
+.cta {
+    padding: 6rem 0;
+    background: var(--text-primary);
+    color: white;
     text-align: center;
 }
 
-.report-card h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
+.cta-content h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
     margin-bottom: 1rem;
 }
 
-.chart-placeholder {
-    font-size: 3rem;
-    margin: 2rem 0;
+.cta-content p {
+    font-size: 1.125rem;
+    opacity: 0.9;
+    margin-bottom: 2rem;
 }
 
-.report-card p {
-    color: var(--text-secondary);
-    margin-bottom: 1.5rem;
+.cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.cta-note {
+    font-size: 0.875rem;
+    opacity: 0.7;
 }
 
+/* Footer */
 .footer {
     background: var(--text-primary);
     color: white;
-    padding: 2rem 0;
+    padding: 4rem 0 2rem;
 }
 
 .footer-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 3rem;
+    margin-bottom: 3rem;
+}
+
+.footer-logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.footer-section h4 {
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-section ul li a {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: white;
+}
+
+.footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-links {
@@ -538,14 +642,13 @@ body {
 }
 
 .footer-links a {
-    color: white;
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
-    opacity: 0.8;
-    transition: opacity 0.3s ease;
+    transition: color 0.3s ease;
 }
 
 .footer-links a:hover {
-    opacity: 1;
+    color: white;
 }
 
 /* Responsive Design */
@@ -568,11 +671,7 @@ body {
     }
 
     .hero-title {
-        font-size: 2rem;
-    }
-
-    .quick-stats {
-        justify-content: center;
+        font-size: 2.5rem;
     }
 
     .hero-buttons {
@@ -580,17 +679,38 @@ body {
         align-items: center;
     }
 
-    .btn {
-        width: 200px;
+    .hero-stats {
+        justify-content: center;
+    }
+
+    .dashboard-mockup {
+        transform: none;
+    }
+
+    .features-grid,
+    .testimonials-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .pricing-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .pricing-card.featured {
+        transform: none;
     }
 
-    .section-header {
+    .cta-buttons {
         flex-direction: column;
-        gap: 1rem;
-        align-items: flex-start;
+        align-items: center;
     }
 
     .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .footer-bottom {
         flex-direction: column;
         gap: 1rem;
         text-align: center;
@@ -603,16 +723,22 @@ body {
     }
 
     .hero {
-        padding: 0 1rem;
+        padding: 4rem 1rem 2rem;
     }
 
-    .quick-stats {
-        flex-direction: column;
+    .hero-title {
+        font-size: 2rem;
     }
 
-    .projects-grid,
-    .team-grid,
-    .reports-grid {
-        grid-template-columns: 1fr;
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .mockup-content {
+        height: 200px;
+    }
+
+    .mockup-sidebar {
+        width: 120px;
     }
 }
author	Robby Zambito <contact@robbyzambito.me>	2025-08-02 19:06:42 -0400
committer	Robby Zambito <contact@robbyzambito.me>	2025-08-02 19:07:06 -0400
commit	1ac73ff7cae110f9d0b1aa0bf62283b6d2e26022 (patch)
tree	cc1451560dbe84f573135aec2c6f92fec25b58d7
parent	b3c85a763f719d62c1fbce8cff90712e35d70b86 (diff)