Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ContribuTrack | Developer Productivity Analytics</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --neon-primary: #00f7ff; | |
| --neon-secondary: #ff00e4; | |
| --neon-tertiary: #9600ff; | |
| --glass-bg: rgba(20, 20, 30, 0.6); | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background-color: #0a0a0f; | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| perspective: 1000px; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--neon-primary), | |
| 0 0 10px var(--neon-primary), | |
| 0 0 20px var(--neon-primary); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .glass-card { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36); | |
| } | |
| .glow-hover:hover { | |
| box-shadow: 0 0 15px var(--neon-primary); | |
| transform: translateY(-2px) translateZ(20px); | |
| } | |
| .transform-3d { | |
| transform-style: preserve-3d; | |
| transition: all 0.5s ease; | |
| } | |
| .hover-3d:hover { | |
| transform: translateZ(20px) rotateX(5deg) rotateY(5deg); | |
| } | |
| .code-block { | |
| background: rgba(10, 15, 20, 0.8); | |
| border-left: 3px solid var(--neon-primary); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 10px var(--neon-primary), | |
| inset 0 0 5px var(--neon-primary); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px) translateZ(0); } | |
| 50% { transform: translateY(-20px) translateZ(10px); } | |
| 100% { transform: translateY(0px) translateZ(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2 transform-3d"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg"> | |
| <span class="text-black font-bold">C</span> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ContribuTrack</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Features</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Pricing</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Docs</a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300 transform hover:translateZ(10px)">Community</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-md border border-gray-700 text-gray-300 hover:bg-gray-800 transition duration-300 transform hover:translateZ(10px)"> | |
| Sign In | |
| </button> | |
| <button class="px-4 py-2 rounded-md bg-gradient-to-r from-purple-600 to-blue-500 text-white hover:opacity-90 transition duration-300 glow-hover transform hover:translateZ(20px)"> | |
| Get Started | |
| </button> | |
| <button class="md:hidden text-gray-300"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-16 md:mb-0 transform-3d"> | |
| <div class="inline-block px-3 py-1 mb-4 rounded-full bg-gray-800 text-xs font-medium text-blue-400"> | |
| <span class="pulse">✦</span> VERSION 2.0 NOW LIVE | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="gradient-text">Track</span> Developer | |
| <span class="neon-text">Productivity</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-400 mb-8 max-w-lg"> | |
| The ultimate analytics suite for engineering managers and developers. Measure contributions, streamline code reviews, and optimize PR workflows. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-4 rounded-lg bg-gradient-to-r from-purple-600 to-blue-500 text-white font-medium hover:opacity-90 transition duration-300 glow-hover flex items-center justify-center transform hover:translateZ(20px)"> | |
| <i class="fas fa-play mr-2"></i> Watch Demo | |
| </button> | |
| <button class="px-8 py-4 rounded-lg border border-gray-700 text-white font-medium hover:bg-gray-800 transition duration-300 flex items-center justify-center transform hover:translateZ(10px)"> | |
| <i class="fas fa-terminal mr-2"></i> Try Dashboard | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4 text-sm text-gray-500"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-8 h-8 rounded-full border-2 border-gray-800"> | |
| </div> | |
| <span>Trusted by 15,000+ engineering teams</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="glass-card rounded-2xl p-6 w-full max-w-lg mx-auto hover-3d neon-glow"> | |
| <div class="flex space-x-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="glass-card rounded-lg p-4"> | |
| <div class="text-xs text-gray-400 mb-1">Active PRs</div> | |
| <div class="text-2xl font-bold text-white">24</div> | |
| <div class="text-xs text-green-400">↑ 12%</div> | |
| </div> | |
| <div class="glass-card rounded-lg p-4"> | |
| <div class="text-xs text-gray-400 mb-1">Avg. Review Time</div> | |
| <div class="text-2xl font-bold text-white">8.2h</div> | |
| <div class="text-xs text-red-400">↑ 1.4h</div> | |
| </div> | |
| </div> | |
| <div class="h-48 bg-gray-900 rounded-lg mb-4 overflow-hidden relative"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900/80 z-10"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 z-20"> | |
| <div class="text-sm font-medium text-white">Team Activity Heatmap</div> | |
| </div> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full flex items-center justify-center text-gray-600"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xs text-gray-400">Last sync: 2 min ago</div> | |
| <button class="text-xs bg-blue-900/30 text-blue-400 px-3 py-1 rounded-full"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-900 opacity-20 blur-3xl -z-10"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-blue-900 opacity-20 blur-3xl -z-10"></div> | |
| </div> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-20 transform-3d"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Powerful Insights</span> | |
| <span class="text-white">for Engineering Teams</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Everything you need to measure, analyze and improve developer productivity. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center mb-6 text-blue-400"> | |
| <i class="fas fa-chart-pie text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Comprehensive Metrics</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Track commits, PRs, reviews, and more with beautiful, actionable dashboards. | |
| </p> | |
| <div class="flex items-center text-blue-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6 text-purple-400"> | |
| <i class="fas fa-code-branch text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">PR Analytics</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Identify bottlenecks in your review process and optimize team workflows. | |
| </p> | |
| <div class="flex items-center text-purple-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-pink-900/30 flex items-center justify-center mb-6 text-pink-400"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AI Code Review</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Automated suggestions for code quality, security, and best practices. | |
| </p> | |
| <div class="flex items-center text-pink-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center mb-6 text-green-400"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Team Benchmarking</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Compare performance across teams with anonymized industry data. | |
| </p> | |
| <div class="flex items-center text-green-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-yellow-900/30 flex items-center justify-center mb-6 text-yellow-400"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Alerts</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Get notified about stuck PRs, inactive developers, or unusual patterns. | |
| </p> | |
| <div class="flex items-center text-yellow-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="glass-card rounded-xl p-8 hover-3d transform-3d"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400"> | |
| <i class="fas fa-plug text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Git Integration</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Works seamlessly with GitHub, GitLab, Bitbucket and more. | |
| </p> | |
| <div class="flex items-center text-indigo-400 text-sm font-medium"> | |
| <span>Learn more</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Review Demo --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="glass-card rounded-3xl overflow-hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2"> | |
| <div class="p-8 lg:p-12"> | |
| <h2 class="text-3xl font-bold mb-6"> | |
| <span class="gradient-text">AI-Powered</span> | |
| <span class="text-white">Code Reviews</span> | |
| </h2> | |
| <p class="text-gray-400 mb-8"> | |
| Our AI analyzes every PR for quality, security, and performance issues before it reaches your team. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4 text-green-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Automated Feedback</h4> | |
| <p class="text-gray-400 text-sm">Get instant suggestions on code improvements</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4 text-green-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Security Scanning</h4> | |
| <p class="text-gray-400 text-sm">Detect vulnerabilities before they reach production</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1 mr-4 text-green-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Learning Mode</h4> | |
| <p class="text-gray-400 text-sm">Adapts to your team's coding standards over time</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-900 p-6 flex items-center justify-center"> | |
| <div class="w-full max-w-md transform-3d hover-3d"> | |
| <div class="code-block p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="text-xs text-gray-400">File: api/auth.js</div> | |
| <div class="text-xs px-2 py-1 rounded bg-blue-900/30 text-blue-400">+12 -4</div> | |
| </div> | |
| <pre class="text-xs font-mono text-gray-300 overflow-x-auto"> | |
| <span class="text-green-400">+ async function validateToken(token) {</span> | |
| <span class="text-green-400">+ try {</span> | |
| <span class="text-red-400">- const decoded = jwt.verify(token, 'secret123');</span> | |
| <span class="text-green-400">+ const decoded = jwt.verify(token, process.env.JWT_SECRET);</span> | |
| <span class="text-green-400">+ return decoded;</span> | |
| <span class="text-green-400">+ } catch (err) {</span> | |
| <span class="text-green-400">+ throw new Error('Invalid token');</span> | |
| <span class="text-green-400">+ }</span> | |
| <span class="text-green-400">+ }</span> | |
| </pre> | |
| </div> | |
| <div class="glass-card rounded-lg p-4"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-6 h-6 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400 mr-3"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs font-medium text-white mb-1">ContribuTrack AI</div> | |
| <div class="text-xs text-gray-400">Found 2 issues in this change</div> | |
| </div> | |
| </div> | |
| <div class="pl-9"> | |
| <div class="text-xs text-yellow-400 mb-2 flex items-start"> | |
| <i class="fas fa-exclamation-triangle mr-2 mt-0.5"></i> | |
| Security: Hardcoded secret replaced with env variable (good!) | |
| </div> | |
| <div class="text-xs text-blue-400 flex items-start"> | |
| <i class="fas fa-lightbulb mr-2 mt-0.5"></i> | |
| Suggestion: Consider adding token expiration check | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-20 transform-3d"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text">Trusted</span> | |
| <span class="text-white">by Engineering Leaders</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto"> | |
| Teams at top tech companies use ContribuTrack to optimize their development workflows. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center opacity-80 hover:opacity-100 transition duration-300"> | |
| <div class="flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| <div class="flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" class="h-8 grayscale hover:grayscale-0 transition duration-300"> | |
| </div> | |
| </div> | |
| <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="glass-card rounded-xl p-8 hover-3d"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-gray-500 text-sm">VP Engineering @TechCorp</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "ContribuTrack gave us visibility we never had before. We reduced PR review times by 35% in the first month." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-8 hover-3d"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <p class="text-gray-500 text-sm">CTO @StartupLabs</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "The AI code reviewer caught security issues our team had missed. It's like having an extra senior engineer." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <div class="glass-card rounded-xl p-8 hover-3d"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Priya Patel</h4> | |
| <p class="text-gray-500 text-sm">Engineering Manager @DigitalAgency</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "Our developers love the actionable metrics. It's helped create a culture of continuous improvement." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-6 py-32"> | |
| <div class="glass-card rounded-3xl p-12 text-center relative overflow-hidden"> | |
| <div class="absolute -top-20 -left-20 w-64 h-64 rounded-full bg-purple-900 opacity-20 blur-3xl -z-10"></div> | |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-blue-900 opacity-20 blur-3xl -z-10"></div> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-6"> | |
| <span class="gradient-text">Ready to Optimize</span> | |
| <span class="text-white">Your Development Workflow?</span> | |
| </h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto mb-10"> | |
| Join thousands of engineering teams building better software with ContribuTrack. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-4 rounded-lg bg-gradient-to-r from-purple-600 to-blue-500 text-white font-medium hover:opacity-90 transition duration-300 glow-hover transform hover:translateZ(20px)"> | |
| Start Free Trial | |
| </button> | |
| <button class="px-8 py-4 rounded-lg border border-gray-700 text-white font-medium hover:bg-gray-800 transition duration-300 transform hover:translateZ(10px)"> | |
| Talk to Sales | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900/50 border-t border-gray-800"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-12"> | |
| <div class="md:col-span-2"> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center"> | |
| <span class="text-black font-bold">C</span> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ContribuTrack</span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| The complete developer productivity analytics platform. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium mb-4">Product</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium mb-4">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-medium mb-4">Company</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 ContribuTrack. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 3D hover effects and animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add transform-3d class to all cards | |
| const cards = document.querySelectorAll('.glass-card'); | |
| cards.forEach(card => { | |
| card.classList.add('transform-3d'); | |
| }); | |
| // Add parallax effect to hero section | |
| const hero = document.querySelector('.hero-section'); | |
| if (hero) { | |
| hero.addEventListener('mousemove', (e) => { | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; | |
| hero.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; | |
| }); | |
| hero.addEventListener('mouseenter', () => { | |
| hero.style.transition = 'none'; | |
| }); | |
| hero.addEventListener('mouseleave', () => { | |
| hero.style.transition = 'all 0.5s ease'; | |
| hero.style.transform = 'rotateY(0deg) rotateX(0deg)'; | |
| }); | |
| } | |
| // Animate elements on scroll | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.transform-3d').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pranjalkar9/ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |