From 42c23d4628ab898fdbf35b7c5e3798efdd2a093a Mon Sep 17 00:00:00 2001 From: Robby Zambito Date: Wed, 6 Aug 2025 18:50:43 -0400 Subject: Added basic about page Prompt: Make a basic about page --- static/about-script.js | 145 +++++++++++++ static/about-styles.css | 546 ++++++++++++++++++++++++++++++++++++++++++++++++ static/about.html | 280 +++++++++++++++++++++++++ static/index.html | 4 +- 4 files changed, 973 insertions(+), 2 deletions(-) create mode 100644 static/about-script.js create mode 100644 static/about-styles.css create mode 100644 static/about.html (limited to 'static') diff --git a/static/about-script.js b/static/about-script.js new file mode 100644 index 0000000..7ea3885 --- /dev/null +++ b/static/about-script.js @@ -0,0 +1,145 @@ +// 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' + }); + } + }); +}); + +// 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)'; + } +}); + +// 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('.mission-item, .team-member, .timeline-item').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); +}); + +// Animate stats counter +const animateStats = () => { + const statNumbers = document.querySelectorAll('.stat-number'); + const targets = ['10,000+', '500K+', '50+', '99.9%']; + + statNumbers.forEach((stat, index) => { + const target = targets[index]; + let current = 0; + const increment = target.includes('K') ? 5000 : target.includes('%') ? 1 : target.includes('+') ? 50 : 1; + const max = target.includes('K') ? 500000 : target.includes('%') ? 99.9 : target.includes('10,000') ? 10000 : 50; + + 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 if (target.includes('10,000')) { + stat.textContent = current.toLocaleString() + '+'; + } else { + stat.textContent = current + '+'; + } + setTimeout(updateStat, 50); + } else { + stat.textContent = target; + } + }; + + setTimeout(updateStat, 500 + (index * 200)); + }); +}; + +// Trigger stats animation when stats section is visible +const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateStats(); + statsObserver.unobserve(entry.target); + } + }); +}); + +const statsSection = document.querySelector('.stats'); +if (statsSection) { + statsObserver.observe(statsSection); +} + +// Button click handlers +document.querySelectorAll('.btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const buttonText = btn.textContent.toLowerCase(); + + if (buttonText.includes('trial') || buttonText.includes('start')) { + alert('Starting your free trial!\n\nThis would redirect to the registration page.'); + } else if (buttonText.includes('positions') || buttonText.includes('careers')) { + alert('Opening careers page...\n\nThis would show available job positions.'); + } else if (buttonText.includes('culture')) { + alert('Learning about our culture...\n\nThis would show company culture information.'); + } + }); +}); + +// Timeline animation on scroll +const timelineObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateX(0)'; + } + }); +}, { threshold: 0.3 }); + +document.querySelectorAll('.timeline-item').forEach((item, index) => { + item.style.opacity = '0'; + item.style.transform = 'translateX(-30px)'; + item.style.transition = `opacity 0.6s ease ${index * 0.2}s, transform 0.6s ease ${index * 0.2}s`; + timelineObserver.observe(item); +}); + +// Hero section animation on load +window.addEventListener('load', () => { + const heroTitle = document.querySelector('.hero-title'); + const heroSubtitle = document.querySelector('.hero-subtitle'); + + [heroTitle, heroSubtitle].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)'; + }, 300 + (index * 200)); + } + }); +}); diff --git a/static/about-styles.css b/static/about-styles.css new file mode 100644 index 0000000..b4d479d --- /dev/null +++ b/static/about-styles.css @@ -0,0 +1,546 @@ +* { + 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; + text-decoration: none; +} + +.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, +.nav-link.active { + color: var(--primary-color); +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +/* 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-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 { + padding: 8rem 0 4rem; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + text-align: 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); + max-width: 800px; + margin: 0 auto; + line-height: 1.6; +} + +/* Story Section */ +.story { + padding: 6rem 0; + background: var(--background); +} + +.story-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.story-text h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 2rem; +} + +.story-text p { + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; + line-height: 1.7; +} + +/* Timeline */ +.timeline { + position: relative; + padding-left: 2rem; +} + +.timeline::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 2px; + background: var(--gradient); +} + +.timeline-item { + position: relative; + margin-bottom: 2rem; + padding-left: 2rem; +} + +.timeline-item::before { + content: ''; + position: absolute; + left: -1.5rem; + top: 0.5rem; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--primary-color); + border: 3px solid white; + box-shadow: 0 0 0 3px var(--primary-color); +} + +.timeline-year { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 0.5rem; +} + +.timeline-content h4 { + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.timeline-content p { + color: var(--text-secondary); + font-size: 0.875rem; +} + +/* Mission Section */ +.mission { + padding: 6rem 0; + background: var(--surface); +} + +.mission-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; +} + +.mission-item { + text-align: center; + padding: 2rem; + background: white; + border-radius: 1rem; + box-shadow: var(--shadow); +} + +.mission-icon { + font-size: 3rem; + margin-bottom: 1.5rem; +} + +.mission-item h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.mission-item p { + color: var(--text-secondary); + line-height: 1.6; +} + +/* Team Section */ +.team { + padding: 6rem 0; + background: var(--background); +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.section-subtitle { + font-size: 1.125rem; + color: var(--text-secondary); +} + +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.team-member { + background: white; + padding: 2rem; + border-radius: 1rem; + box-shadow: var(--shadow); + text-align: center; + transition: transform 0.3s ease; +} + +.team-member:hover { + transform: translateY(-5px); +} + +.member-avatar { + width: 100px; + height: 100px; + margin: 0 auto 1.5rem; + border-radius: 50%; + overflow: hidden; +} + +.member-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.member-info h4 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.member-role { + color: var(--primary-color); + font-weight: 500; + margin-bottom: 1rem; +} + +.member-bio { + color: var(--text-secondary); + font-size: 0.875rem; + line-height: 1.6; +} + +/* Stats Section */ +.stats { + padding: 6rem 0; + background: var(--text-primary); + color: white; +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + text-align: center; +} + +.stat-number { + font-size: 3rem; + font-weight: 700; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stat-label { + font-size: 1.125rem; + opacity: 0.9; +} + +/* Careers Section */ +.careers { + padding: 6rem 0; + background: var(--surface); + text-align: center; +} + +.careers-content h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1.5rem; +} + +.careers-content p { + font-size: 1.125rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto 2rem; + line-height: 1.6; +} + +.careers-buttons { + display: flex; + justify-content: center; + gap: 1rem; +} + +/* 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-menu { + display: none; + } + + .hero-title { + font-size: 2.5rem; + } + + .story-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .timeline { + padding-left: 1rem; + } + + .mission-grid { + grid-template-columns: 1fr; + } + + .team-grid { + grid-template-columns: 1fr; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } + + .careers-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: 6rem 0 3rem; + } + + .hero-title { + font-size: 2rem; + } + + .section-title { + font-size: 2rem; + } + + .stats-grid { + grid-template-columns: 1fr; + } + + .stat-number { + font-size: 2.5rem; + } +} diff --git a/static/about.html b/static/about.html new file mode 100644 index 0000000..eb7f5a2 --- /dev/null +++ b/static/about.html @@ -0,0 +1,280 @@ + + + + + + About Us - TaskFlow + + + + + + +
+
+
+
+

Building the future of project management

+

+ We're on a mission to help teams collaborate better, work smarter, and achieve more together. + TaskFlow was born from the belief that great projects start with great tools. +

+
+
+
+ +
+
+
+
+

Our Story

+

+ TaskFlow was founded in 2020 by a team of project managers and software engineers who were + frustrated with the complexity and limitations of existing project management tools. We + experienced firsthand the challenges of coordinating distributed teams, tracking project + progress, and maintaining clear communication across multiple stakeholders. +

+

+ After years of juggling between multiple tools, endless email chains, and scattered + spreadsheets, we decided to build the solution we wished existed. TaskFlow combines + powerful project management capabilities with an intuitive interface that teams actually + want to use. +

+

+ Today, we're proud to serve over 10,000 teams worldwide, helping them deliver projects + on time, stay within budget, and work more efficiently than ever before. +

+
+
+
+
+
2020
+
+

Company Founded

+

Started with a small team and a big vision

+
+
+
+
2021
+
+

First 1,000 Users

+

Reached our first major milestone

+
+
+
+
2023
+
+

Series A Funding

+

Raised $10M to accelerate growth

+
+
+
+
2025
+
+

10,000+ Teams

+

Serving teams across 50+ countries

+
+
+
+
+
+
+
+ +
+
+
+
+
🎯
+

Our Mission

+

+ To empower teams worldwide with intuitive project management tools that transform + how work gets done, making collaboration seamless and success inevitable. +

+
+
+
👁️
+

Our Vision

+

+ A world where every team has the tools and insights they need to deliver exceptional + results, regardless of size, industry, or location. +

+
+
+
⭐
+

Our Values

+

+ Simplicity, transparency, and user-centricity guide everything we do. We believe + great software should be powerful yet easy to use. +

+
+
+
+
+ +
+
+
+

Meet Our Team

+

The people behind TaskFlow's success

+
+
+
+
+ Alex Smith +
+
+

Alex Smith

+

CEO & Co-Founder

+

+ Former project manager at Google with 10+ years of experience leading + cross-functional teams and delivering complex software projects. +

+
+
+
+
+ Sarah Johnson +
+
+

Sarah Johnson

+

CTO & Co-Founder

+

+ Software architect with expertise in scalable systems. Previously led + engineering teams at Microsoft and Slack. +

+
+
+
+
+ Mike Chen +
+
+

Mike Chen

+

Head of Product

+

+ Product strategist passionate about user experience. Former product + manager at Atlassian with a focus on collaboration tools. +

+
+
+
+
+ Lisa Davis +
+
+

Lisa Davis

+

Head of Design

+

+ UX/UI designer with a passion for creating intuitive interfaces. + Previously designed products at Figma and Adobe. +

+
+
+
+
+
+ +
+
+
+
+
10,000+
+
Active Teams
+
+
+
500K+
+
Projects Completed
+
+
+
50+
+
Countries
+
+
+
99.9%
+
Uptime
+
+
+
+
+ +
+
+
+

Join Our Team

+

+ We're always looking for talented individuals who share our passion for building + exceptional products. If you're interested in joining our mission to transform + project management, we'd love to hear from you. +

+
+ + +
+
+
+
+
+ + + + + + diff --git a/static/index.html b/static/index.html index 9e22e7f..89ff7b7 100644 --- a/static/index.html +++ b/static/index.html @@ -14,7 +14,7 @@
@@ -286,7 +286,7 @@

Company