From b3c85a763f719d62c1fbce8cff90712e35d70b86 Mon Sep 17 00:00:00 2001 From: Robby Zambito Date: Tue, 29 Jul 2025 19:29:17 -0400 Subject: Added a landing page when logged out Prompt: Create a logged out landing page. --- static/landing-script.js | 220 ++++++++++++++ static/landing-styles.css | 744 ++++++++++++++++++++++++++++++++++++++++++++++ static/landing.html | 317 ++++++++++++++++++++ 3 files changed, 1281 insertions(+) create mode 100644 static/landing-script.js create mode 100644 static/landing-styles.css create mode 100644 static/landing.html diff --git a/static/landing-script.js b/static/landing-script.js new file mode 100644 index 0000000..1189cd4 --- /dev/null +++ b/static/landing-script.js @@ -0,0 +1,220 @@ +// 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 new file mode 100644 index 0000000..cf359fb --- /dev/null +++ b/static/landing-styles.css @@ -0,0 +1,744 @@ +* { + 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 new file mode 100644 index 0000000..339d865 --- /dev/null +++ b/static/landing.html @@ -0,0 +1,317 @@ + + + + + + TaskFlow - Streamline Your Project Management + + + + + + +
+
+
+
+

+ Streamline Your Project Management +

+

+ TaskFlow helps teams collaborate better, track progress effortlessly, and deliver projects on time. + Join thousands of teams who trust TaskFlow to get things done. +

+
+ + +
+
+
+ 10,000+ + Active Teams +
+
+ 500K+ + Projects Completed +
+
+ 99.9% + Uptime +
+
+
+
+
+
+
+ + + +
+
TaskFlow Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+

Everything you need to manage projects

+

Powerful features designed to help your team work more efficiently

+
+
+
+
📊
+

Project Tracking

+

Monitor project progress with intuitive dashboards and real-time updates. Never lose sight of your goals.

+
+
+
👥
+

Team Collaboration

+

Seamless communication tools keep your team connected and productive, no matter where they work.

+
+
+
📅
+

Timeline Management

+

Visual timelines and milestone tracking ensure your projects stay on schedule and within budget.

+
+
+
📈
+

Analytics & Reports

+

Detailed insights and customizable reports help you make data-driven decisions for better outcomes.

+
+
+
🔒
+

Enterprise Security

+

Bank-level security with SSO, two-factor authentication, and compliance with industry standards.

+
+
+
🔗
+

Integrations

+

Connect with your favorite tools including Slack, GitHub, Google Workspace, and 100+ more apps.

+
+
+
+
+ +
+
+

What our customers say

+
+
+
+

"TaskFlow transformed how our team works. We've increased productivity by 40% and never miss deadlines anymore."

+
+
+
SM
+
+
Sarah Mitchell
+
Project Manager, TechCorp
+
+
+
+
+
+

"The best project management tool we've used. Intuitive interface and powerful features that actually help us get work done."

+
+
+
MJ
+
+
Michael Johnson
+
CTO, StartupXYZ
+
+
+
+
+
+

"TaskFlow's reporting features give us insights we never had before. It's like having a project analyst on the team."

+
+
+
EL
+
+
Emily Lee
+
Operations Director, GlobalTech
+
+
+
+
+
+
+ +
+
+
+

Simple, transparent pricing

+

Choose the plan that's right for your team

+
+
+
+
+

Starter

+
+ $9 + /user/month +
+
+
    +
  • Up to 10 projects
    • +
  • Basic reporting
    • +
  • Email support
    • +
  • 5GB storage
    • +
+ +
+
+
Most Popular
+
+

Professional

+
+ $19 + /user/month +
+
+
    +
  • Unlimited projects
    • +
  • Advanced analytics
    • +
  • Priority support
    • +
  • 50GB storage
    • +
  • Team collaboration tools
    • +
  • Custom integrations
    • +
+ +
+
+
+

Enterprise

+
+ $39 + /user/month +
+
+
    +
  • Everything in Professional
    • +
  • Advanced security
    • +
  • 24/7 phone support
    • +
  • Unlimited storage
    • +
  • SSO & SAML
    • +
  • Custom onboarding
    • +
+ +
+
+
+
+ +
+
+
+

Ready to transform your project management?

+

Join thousands of teams already using TaskFlow to deliver better results, faster.

+
+ + +
+

No credit card required • 14-day free trial • Cancel anytime

+
+
+
+
+ + + + + + -- cgit