mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-07-29 05:53:50 +00:00
feat(frontend): enhance API credentials system and build configuration
Add real API support in demo mode with credential checking, implement build-time version injection from package.json, and refactor update checking with 24-hour caching. Migrate landing page from Vue to Astro with comprehensive UI components including Hero, Features, Benefits, and Tech Stack sections. Update CI/CD workflow with expanded cache paths and security scanner version pinned.
This commit is contained in:
Tomas Dvorak
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div id="app" :class="{ 'dark': isDark }">
|
||||
<Navigation />
|
||||
<router-view />
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import Navigation from './components/Navigation.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
import { useTheme } from './composables/useTheme'
|
||||
|
||||
const { isDark } = useTheme()
|
||||
|
||||
onMounted(() => {
|
||||
// Check for system preference
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
// AI Services Section Component
|
||||
---
|
||||
|
||||
<section id="ai-services" class="py-24 lg:py-40 bg-gradient-to-br from-background via-card/30 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-3"></div>
|
||||
|
||||
<!-- Minimal particle field -->
|
||||
<div class="particle-field">
|
||||
<div class="particle" style="left: 10%; animation-delay: 1s; animation-duration: 22s;"></div>
|
||||
<div class="particle" style="left: 30%; animation-delay: 3s; animation-duration: 19s;"></div>
|
||||
<div class="particle" style="left: 50%; animation-delay: 2s; animation-duration: 24s;"></div>
|
||||
<div class="particle" style="left: 70%; animation-delay: 4s; animation-duration: 21s;"></div>
|
||||
<div class="particle" style="left: 90%; animation-delay: 1s; animation-duration: 20s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
|
||||
<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-primary">AI-Powered Intelligence</span>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
|
||||
<span class="block">Smart Features</span>
|
||||
<span class="gradient-text">Your Choice</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Enhanced productivity with optional AI services that respect your privacy and budget
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- AI Services Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
<!-- Budget Friendly -->
|
||||
<div class="feature-card group">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-orange to-trackeep-orange/80 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-10 h-10" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">
|
||||
Budget-Friendly AI
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
Get powerful AI features without breaking the bank. DeepSeek and LongCat offer incredible value for content analysis and recommendations.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-trackeep-orange/10 text-trackeep-orange rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-4 h-4 mr-1" />
|
||||
DeepSeek
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-trackeep-orange/10 text-trackeep-orange rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/longcat-color.svg" alt="LongCat" class="w-4 h-4 mr-1" />
|
||||
LongCat AI
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy First -->
|
||||
<div class="feature-card group">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green to-trackeep-emerald rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<img src="/images/mistral-color.svg" alt="Mistral" class="w-10 h-10" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-green transition-colors">
|
||||
Privacy-First Options
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
European GDPR-compliant AI with Mistral, or complete offline privacy with self-hosted Ollama models.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-trackeep-green/10 text-trackeep-green rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/mistral-color.svg" alt="Mistral" class="w-4 h-4 mr-1" />
|
||||
Mistral AI
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-trackeep-green/10 text-trackeep-green rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/ollama.svg" alt="Ollama" class="w-4 h-4 mr-1" />
|
||||
Ollama
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Complete Control -->
|
||||
<div class="feature-card group">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple to-trackeep-pink rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<img src="/images/grok.svg" alt="Grok" class="w-10 h-10" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">
|
||||
Complete Control
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
Enable only what you need. Mix and match services, use custom endpoints, or disable AI entirely.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-trackeep-purple/10 text-trackeep-purple rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/grok.svg" alt="Grok" class="w-4 h-4 mr-1" />
|
||||
Grok
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-trackeep-purple/10 text-trackeep-purple rounded-full text-sm font-medium flex items-center">
|
||||
<img src="/images/openrouter.svg" alt="OpenRouter" class="w-4 h-4 mr-1" />
|
||||
OpenRouter
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Examples -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Popular AI Configurations</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-trackeep-orange/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
||||
<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-8 h-8" />
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-2">Budget Setup</h4>
|
||||
<p class="text-sm text-muted-foreground">DeepSeek + LongCat for maximum value</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-trackeep-green/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
||||
<img src="/images/mistral-color.svg" alt="Mistral" class="w-8 h-8" />
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-2">Privacy Setup</h4>
|
||||
<p class="text-sm text-muted-foreground">Mistral + Ollama for GDPR compliance</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-trackeep-blue/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
||||
<img src="/images/grok.svg" alt="Grok" class="w-8 h-8" />
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-2">Performance Setup</h4>
|
||||
<p class="text-sm text-muted-foreground">Mix services for optimal results</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-12 h-12 bg-trackeep-purple/20 rounded-xl flex items-center justify-center mx-auto mb-3">
|
||||
<img src="/images/ollama.svg" alt="Ollama" class="w-8 h-8" />
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-2">No AI Setup</h4>
|
||||
<p class="text-sm text-muted-foreground">Complete privacy, zero AI features</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transparency Note -->
|
||||
<div class="mt-16 text-center">
|
||||
<div class="inline-flex items-center px-6 py-4 rounded-2xl bg-muted/50 border border-border/50 backdrop-blur-sm">
|
||||
<svg class="w-5 h-5 text-trackeep-blue mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
<span class="font-semibold text-foreground">Transparent by Design:</span>
|
||||
All AI features are optional. You decide what data gets processed and where.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
// Benefits section highlighting key advantages
|
||||
---
|
||||
|
||||
<section class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/20 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-10"></div>
|
||||
<div class="gradient-blob bg-primary w-[400px] h-[400px] top-20 right-10 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-20 left-10 animate-float parallax-slow" style="animation-delay: 2s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<!-- Enhanced Section header -->
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-primary">Why Trackeep?</span>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
|
||||
<span class="block">The Perfect Blend of</span>
|
||||
<span class="gradient-text">Privacy & Power</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Discover why thousands of users have made the switch to Trackeep for their digital organization needs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefits grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
<!-- Privacy -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-red-500/20 to-red-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-red-500/30">
|
||||
<svg class="w-10 h-10 text-red-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-red-500 transition-colors">Privacy First</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
Your data stays yours with end-to-end encryption. No data mining, no tracking, no selling your information. Complete ownership and control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Open Source -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-green-500/20 to-green-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-green-500/30">
|
||||
<svg class="w-10 h-10 text-green-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-green-500 transition-colors">Transparent & Open</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
Fully open source with GPL v3 license. Audit the code, contribute improvements, or customize it to fit your exact needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- All-in-One -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-primary/20 to-primary/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-primary/30">
|
||||
<svg class="w-10 h-10 text-primary group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">All-in-One Platform</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
Bookmarks, tasks, files, notes, and learning tracking in one place. Replace multiple apps and simplify your digital workflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- AI Optional -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-trackeep-purple/20 to-trackeep-purple/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-purple border border-trackeep-purple/30">
|
||||
<svg class="w-10 h-10 text-trackeep-purple group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">AI On Your Terms</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
Powerful AI features with multiple providers. Use cloud AI, local AI with Ollama, or disable completely. You're always in control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Self-Hosted -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-trackeep-orange/20 to-trackeep-orange/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-trackeep-orange/30">
|
||||
<svg class="w-10 h-10 text-trackeep-orange group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">No Subscriptions</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
One-time setup, lifetime usage. No monthly fees, no feature gates, no vendor lock-in. Your infrastructure, your rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Developer Friendly -->
|
||||
<div class="feature-card group cursor-pointer text-center hover-3d">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-blue-500/20 to-blue-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
|
||||
<svg class="w-10 h-10 text-blue-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-blue-500 transition-colors">Developer First</h3>
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
Rich REST API, webhooks, and extensibility. Full-text search, OAuth integration, and custom workflows support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to action -->
|
||||
<div class="mt-16 text-center bg-muted/50 rounded-2xl p-8">
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Ready to take control of your digital life?
|
||||
</h3>
|
||||
<p class="text-muted-foreground mb-6 max-w-2xl mx-auto">
|
||||
Join thousands of users who have already made the switch to a more private, productive way of organizing their digital world.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href="#quick-install" class="btn-primary shadow-glow">
|
||||
Get Started Now
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-outline">
|
||||
See It In Action
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,191 @@
|
||||
---
|
||||
// Demo section with live preview link
|
||||
---
|
||||
|
||||
<section id="demo" class="py-20 lg:py-32 bg-background">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- Section header -->
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
See Trackeep in Action
|
||||
</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
Experience the power and simplicity of Trackeep with our live demo. No registration required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Demo preview -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Demo screenshot/mockup -->
|
||||
<div class="relative">
|
||||
<div class="relative bg-card rounded-2xl shadow-2xl overflow-hidden border border-border">
|
||||
<!-- Browser chrome -->
|
||||
<div class="bg-muted px-4 py-3 border-b border-border flex items-center space-x-2">
|
||||
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<div class="flex-1 bg-background rounded px-3 py-1 text-xs text-muted-foreground ml-4">
|
||||
demo.trackeep.org
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo content -->
|
||||
<div class="p-6 bg-background min-h-[400px]">
|
||||
<div class="space-y-4">
|
||||
<!-- Navigation mock -->
|
||||
<div class="flex items-center justify-between pb-4 border-b border-border">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-primary rounded-lg"></div>
|
||||
<span class="font-semibold">Trackeep</span>
|
||||
</div>
|
||||
<div class="flex space-x-4">
|
||||
<div class="w-16 h-6 bg-muted rounded"></div>
|
||||
<div class="w-16 h-6 bg-muted rounded"></div>
|
||||
<div class="w-16 h-6 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard mock -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-card p-4 rounded-lg border border-border">
|
||||
<div class="w-24 h-4 bg-muted rounded mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-3 bg-muted rounded"></div>
|
||||
<div class="w-3/4 h-3 bg-muted rounded"></div>
|
||||
<div class="w-5/6 h-3 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card p-4 rounded-lg border border-border">
|
||||
<div class="w-20 h-4 bg-muted rounded mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-3 bg-muted rounded"></div>
|
||||
<div class="w-2/3 h-3 bg-muted rounded"></div>
|
||||
<div class="w-4/5 h-3 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card p-4 rounded-lg border border-border">
|
||||
<div class="w-16 h-4 bg-muted rounded mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-3 bg-muted rounded"></div>
|
||||
<div class="w-5/6 h-3 bg-muted rounded"></div>
|
||||
<div class="w-3/4 h-3 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card p-4 rounded-lg border border-border">
|
||||
<div class="w-28 h-4 bg-muted rounded mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-3 bg-muted rounded"></div>
|
||||
<div class="w-2/3 h-3 bg-muted rounded"></div>
|
||||
<div class="w-4/5 h-3 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating badges -->
|
||||
<div class="absolute -top-4 -right-4 bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium shadow-lg">
|
||||
Live Demo
|
||||
</div>
|
||||
<div class="absolute -bottom-4 -left-4 bg-trackeep-green text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
|
||||
No Registration
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo features -->
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Try These Features in the Demo
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Smart Organization</h4>
|
||||
<p class="text-muted-foreground">Experience AI-powered categorization and intelligent tagging</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-8 h-8 bg-trackeep-green/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-4 h-4 text-trackeep-green" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Lightning Search</h4>
|
||||
<p class="text-muted-foreground">Find anything instantly with our powerful search capabilities</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-8 h-8 bg-trackeep-orange/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-4 h-4 text-trackeep-orange" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Mobile Responsive</h4>
|
||||
<p class="text-muted-foreground">Test the responsive design on different screen sizes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-8 h-8 bg-trackeep-purple/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-4 h-4 text-trackeep-purple" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Dark Mode</h4>
|
||||
<p class="text-muted-foreground">Toggle between light and dark themes seamlessly</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo credentials -->
|
||||
<div class="bg-muted/50 rounded-xl p-6">
|
||||
<h4 class="font-semibold text-foreground mb-3">Demo Access</h4>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-muted-foreground">Email:</span>
|
||||
<code class="bg-background px-2 py-1 rounded text-foreground">[email protected]</code>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-muted-foreground">Password:</span>
|
||||
<code class="bg-background px-2 py-1 rounded text-foreground">demo123</code>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-3">
|
||||
Data resets every 24 hours. No real data is stored in the demo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="mt-16 text-center">
|
||||
<a
|
||||
href="https://demo.trackeep.org"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="btn-primary px-8 py-4 text-lg hover-lift group"
|
||||
>
|
||||
Launch Live Demo
|
||||
<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="text-muted-foreground mt-4">
|
||||
Opens in new tab • No registration required • Full feature access
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div class="card-papra group hover:scale-105 transition-papra duration-300 border-2 border-transparent hover:border-primary/20">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-gradient-to-br from-primary/10 to-primary/20 text-primary p-4 rounded-2xl group-hover:from-primary/20 group-hover:to-primary/30 transition-papra">
|
||||
<i :class="icon" class="text-3xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">{{ title }}</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 leading-relaxed text-pretty">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
icon: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
// Features section with card grid
|
||||
---
|
||||
|
||||
<section id="features" class="py-24 lg:py-40 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
|
||||
<!-- Enhanced Background decoration -->
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
|
||||
<div class="gradient-blob bg-primary w-[400px] h-[400px] top-20 left-10 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-20 right-10 animate-float parallax-slow" style="animation-delay: 3s"></div>
|
||||
<div class="gradient-blob bg-trackeep-blue w-[300px] h-[300px] top-1/2 right-1/4 animate-float parallax-slow" style="animation-delay: 1.5s"></div>
|
||||
<div class="gradient-blob bg-trackeep-green w-[250px] h-[250px] bottom-1/3 left-1/4 animate-float parallax-slow" style="animation-delay: 2.5s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<!-- Enhanced Section header with shimmer effects -->
|
||||
<div class="text-center mb-24">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl hover-lift group cursor-pointer glow-border">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
|
||||
<span class="text-sm font-semibold text-primary text-shimmer">Powerful Features</span>
|
||||
<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
|
||||
<span class="block">Everything You Need to</span>
|
||||
<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Stay Organized</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
|
||||
Trackeep combines powerful features with simplicity, giving you the perfect tool to manage your digital life without compromising on privacy or control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Features grid with 3D effects -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 stagger-animation">
|
||||
<!-- Bookmarks & Links -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.2s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-primary/20 to-primary/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-primary/30">
|
||||
<svg class="w-8 h-8 text-primary group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">Smart Bookmarks</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Save and categorize web content with intelligent tagging. Access your bookmarks from anywhere with powerful search and filtering.
|
||||
</p>
|
||||
<div class="flex items-center text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Management -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.3s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green/20 to-trackeep-green/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-trackeep-green/30">
|
||||
<svg class="w-8 h-8 text-trackeep-green group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-green transition-colors">Task Management</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Plan and track your to-dos with intuitive boards. Set priorities, deadlines, and collaborate with your team seamlessly.
|
||||
</p>
|
||||
<div class="flex items-center text-trackeep-green opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Storage -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.4s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-orange/20 to-trackeep-orange/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-trackeep-orange/30">
|
||||
<svg class="w-8 h-8 text-trackeep-orange group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">File Storage</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Upload and organize documents, images, and files. Built-in version control and automatic backup keep your data safe.
|
||||
</p>
|
||||
<div class="flex items-center text-trackeep-orange opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI-Powered -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.5s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple/20 to-trackeep-purple/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-purple border border-trackeep-purple/30">
|
||||
<svg class="w-8 h-8 text-trackeep-purple group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">AI-Powered Insights</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Get smart recommendations and automated organization. AI helps you find patterns and optimize your workflow.
|
||||
</p>
|
||||
<div class="flex items-center text-trackeep-purple opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy First -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.6s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-red-500/20 to-red-500/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-red-500/30">
|
||||
<svg class="w-8 h-8 text-red-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-red-500 transition-colors">Privacy First</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Your data stays yours. End-to-end encryption, no tracking, and complete control over your information.
|
||||
</p>
|
||||
<div class="flex items-center text-red-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile App -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.7s">
|
||||
<div class="relative z-10">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500/20 to-blue-500/30 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
|
||||
<svg class="w-8 h-8 text-blue-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-blue-500 transition-colors">Mobile Apps</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6 text-lg">
|
||||
Native iOS and Android apps. Sync seamlessly across all your devices and stay productive on the go.
|
||||
</p>
|
||||
<div class="flex items-center text-blue-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Learn more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional features highlight with enhanced effects -->
|
||||
<div class="mt-20 text-center animate-slide-up" style="animation-delay: 0.8s">
|
||||
<div class="inline-flex items-center justify-center p-8 rounded-3xl bg-card/50 backdrop-blur-sm border border-border/50 glow-border hover-lift group">
|
||||
<div class="text-center">
|
||||
<p class="text-xl text-muted-foreground mb-6 font-medium">
|
||||
And much more: <span class="text-shimmer">API access, webhooks, integrations, custom workflows</span>, and more
|
||||
</p>
|
||||
<a href="#docs" class="btn-primary px-10 py-5 text-lg shadow-glow group magnetic-button glow-border">
|
||||
Explore All Features
|
||||
<svg class="w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
// Footer component with links
|
||||
---
|
||||
|
||||
<footer class="bg-card border-t border-border/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Brand -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-primary-foreground" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h2a1 1 0 100-2 2 2 0 00-2 2v11a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xl font-bold text-foreground">Trackeep</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground mb-4 max-w-md">
|
||||
Your self-hosted productivity and knowledge hub. Take control of your digital life with privacy-first, open-source software.
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors" aria-label="Discord">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://x.com/trackeep" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors" aria-label="X/Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-foreground mb-4">Product</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#features" class="text-muted-foreground hover:text-primary transition-colors">Features</a></li>
|
||||
<li><a href="#demo" class="text-muted-foreground hover:text-primary transition-colors">Demo</a></li>
|
||||
<li><a href="#pricing" class="text-muted-foreground hover:text-primary transition-colors">Pricing</a></li>
|
||||
<li><a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">Live Demo</a></li>
|
||||
<li><a href="https://trackeep.org/install.sh" class="text-muted-foreground hover:text-primary transition-colors">Install Script</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-foreground mb-4">Resources</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#docs" class="text-muted-foreground hover:text-primary transition-colors">Documentation</a></li>
|
||||
<li><a href="https://github.com/Dvorinka/Trackeep/blob/main/docs/API.md" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">API Reference</a></li>
|
||||
<li><a href="https://github.com/Dvorinka/Trackeep/blob/main/docs/DEVELOPMENT.md" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">Development</a></li>
|
||||
<li><a href="https://github.com/Dvorinka/Trackeep/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">Deployment</a></li>
|
||||
<li><a href="https://github.com/Dvorinka/Trackeep/releases" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Company -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-foreground mb-4">Company</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition-colors">GitHub</a></li>
|
||||
<li><a href="#" class="text-muted-foreground hover:text-primary transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#" class="text-muted-foreground hover:text-primary transition-colors">Terms of Service</a></li>
|
||||
<li><a href="#" class="text-muted-foreground hover:text-primary transition-colors">Contact</a></li>
|
||||
<li><a href="#" class="text-muted-foreground hover:text-primary transition-colors">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom section -->
|
||||
<div class="mt-12 pt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="text-muted-foreground text-sm mb-4 md:mb-0">
|
||||
© 2024 Trackeep. All rights reserved. Built with ❤️ and open source.
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 text-sm">
|
||||
<span class="text-muted-foreground">License:</span>
|
||||
<a href="https://github.com/Dvorinka/Trackeep/blob/main/LICENSE" target="_blank" rel="noopener" class="text-primary hover:underline">
|
||||
AGPL-3.0
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<footer class="bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 mt-auto">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Logo and Description -->
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<div class="flex items-center mb-4">
|
||||
<img
|
||||
src="/trackeep-logo-bg.png"
|
||||
alt="Trackeep"
|
||||
class="h-8 w-auto mr-3"
|
||||
@error="(e: Event) => { const target = e.target as HTMLImageElement; target.style.display='none'; logoError = true }"
|
||||
/>
|
||||
<span v-if="logoError" class="text-xl font-bold text-primary">Trackeep</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-md">
|
||||
Your self-hosted productivity & knowledge hub. Track, save, and organize everything that matters to you - all in one place, under your control.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Product Links -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Product</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Features</a></li>
|
||||
<li><a href="#how-it-works" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">How It Works</a></li>
|
||||
<li><a href="https://demo.trackeep.org" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Demo</a></li>
|
||||
<li><a href="https://github.com/trackeep/trackeep/releases" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Changelog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources Links -->
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Resources</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="https://docs.trackeep.org" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Documentation</a></li>
|
||||
<li><a href="https://github.com/trackeep/trackeep" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">GitHub</a></li>
|
||||
<li><a href="https://discord.gg/trackeep" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Discord</a></li>
|
||||
<li><a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="flex items-center space-x-6 mb-4 md:mb-0">
|
||||
<a href="/privacy" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors text-sm">Privacy Policy</a>
|
||||
<a href="/terms" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors text-sm">Terms of Service</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="https://github.com/trackeep/trackeep" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
<i class="ph ph-github-logo text-xl"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/trackeep" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
<i class="ph ph-discord-logo text-xl"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/trackeep" target="_blank" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
|
||||
<i class="ph ph-twitter-logo text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
|
||||
© {{ currentYear }} Trackeep. All rights reserved. Built with ❤️ and open source.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const logoError = ref(false)
|
||||
const currentYear = computed(() => new Date().getFullYear())
|
||||
</script>
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
// Hero section with install command and CTAs
|
||||
---
|
||||
|
||||
<section class="relative min-h-screen flex items-center justify-center bg-grid-pattern bg-grid-48 overflow-hidden">
|
||||
<!-- Simple background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-background to-background"></div>
|
||||
|
||||
<!-- Minimal particle field -->
|
||||
<div class="particle-field">
|
||||
<div class="particle" style="left: 10%; animation-delay: 0s; animation-duration: 20s;"></div>
|
||||
<div class="particle" style="left: 30%; animation-delay: 2s; animation-duration: 25s;"></div>
|
||||
<div class="particle" style="left: 50%; animation-delay: 1s; animation-duration: 22s;"></div>
|
||||
<div class="particle" style="left: 70%; animation-delay: 3s; animation-duration: 18s;"></div>
|
||||
<div class="particle" style="left: 90%; animation-delay: 2s; animation-duration: 24s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Clean badge -->
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
|
||||
<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-bold text-primary">✨ Self-Hosted & Privacy-First</span>
|
||||
</div>
|
||||
|
||||
<!-- Clean headline -->
|
||||
<h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black text-foreground mb-8 leading-tight animate-fade-in">
|
||||
<span class="block">Your Self-Hosted</span>
|
||||
<span class="text-gradient">Productivity Hub</span>
|
||||
</h1>
|
||||
|
||||
<!-- Clean subheading -->
|
||||
<p class="text-2xl sm:text-3xl lg:text-4xl text-muted-foreground mb-12 max-w-4xl mx-auto leading-relaxed animate-fade-in">
|
||||
Track, save, and organize everything that matters to you —
|
||||
<span class="font-bold text-primary">all in one place</span>, under your control
|
||||
</p>
|
||||
|
||||
<!-- Clean CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16 animate-fade-in">
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-primary">
|
||||
Try Live Demo
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#install" class="btn-outline">
|
||||
Quick Install
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Clean feature highlights -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 mb-20 animate-fade-in">
|
||||
<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-lg text-primary">Privacy First</span>
|
||||
<span class="text-sm text-center opacity-70">Your data stays yours</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-lg text-primary">Open Source</span>
|
||||
<span class="text-sm text-center opacity-70">Transparent & customizable</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-lg text-primary">AI Powered</span>
|
||||
<span class="text-sm text-center opacity-70">Smart recommendations</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple scroll indicator -->
|
||||
<div class="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<a href="#install" class="text-muted-foreground hover:text-primary transition-all duration-300 flex flex-col items-center">
|
||||
<span class="text-sm mb-3 font-medium">Get Started</span>
|
||||
<div class="p-3 rounded-full bg-primary/10 hover:bg-primary/20 transition-colors">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
// Mobile App Section Component
|
||||
---
|
||||
|
||||
<section id="mobile-app" class="py-24 lg:py-40 bg-gradient-to-br from-background via-trackeep-purple/5 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-5"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-[600px] h-[600px] top-20 right-20 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-pink w-[400px] h-[400px] bottom-20 left-20 animate-float parallax-slow" style="animation-delay: 3s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-trackeep-purple/10 to-trackeep-pink/10 border border-trackeep-purple/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-trackkeep-purple to-trackeep-pink rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-trackeep-purple">Mobile First</span>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
|
||||
<span class="block">Productivity</span>
|
||||
<span class="gradient-text">On The Go</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Native mobile apps for iOS and Android that sync seamlessly with your self-hosted instance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Features Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
|
||||
<!-- Features List -->
|
||||
<div class="space-y-8">
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackkeep-purple/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackkeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-purple transition-colors">
|
||||
Native Performance
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Built with React Native for smooth, responsive performance on both iOS and Android devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackkeep-pink/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackkeep-pink" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-pink transition-colors">
|
||||
Real-time Sync
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Your data stays in sync across all devices. Changes made on mobile instantly appear on web and vice versa.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackkeep-blue/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackkeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-blue transition-colors">
|
||||
Document Scanning
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Capture documents, receipts, and notes with your camera. Automatic text extraction and organization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackkeep-green/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackkeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-green transition-colors">
|
||||
Secure Authentication
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Biometric authentication and secure token management keep your data safe even if your device is lost.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Preview -->
|
||||
<div class="relative">
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<div class="aspect-[9/19] bg-gradient-to-br from-trackkeep-purple/10 to-trackkeep-pink/10 rounded-3xl border-2 border-border/30 relative overflow-hidden">
|
||||
<!-- Phone Frame -->
|
||||
<div class="absolute inset-0 flex flex-col">
|
||||
<!-- Status Bar -->
|
||||
<div class="bg-background/80 backdrop-blur-sm px-6 py-2 flex justify-between items-center border-b border-border/30">
|
||||
<span class="text-xs font-medium">9:41</span>
|
||||
<div class="flex space-x-1">
|
||||
<div class="w-4 h-3 bg-foreground rounded-sm"></div>
|
||||
<div class="w-4 h-3 bg-foreground rounded-sm"></div>
|
||||
<div class="w-4 h-3 bg-foreground rounded-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Content -->
|
||||
<div class="flex-1 p-4 space-y-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-blue to-trackkeep-purple rounded-2xl mx-auto mb-2 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-foreground">Trackeep</h3>
|
||||
<p class="text-xs text-muted-foreground">Your digital hub</p>
|
||||
</div>
|
||||
|
||||
<!-- Mock Content -->
|
||||
<div class="space-y-3">
|
||||
<div class="bg-card/80 rounded-xl p-3 border border-border/30">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 bg-trackkeep-blue/20 rounded-lg"></div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-foreground/20 rounded w-3/4 mb-1"></div>
|
||||
<div class="h-2 bg-foreground/10 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card/80 rounded-xl p-3 border border-border/30">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 bg-trackkeep-green/20 rounded-lg"></div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-foreground/20 rounded w-2/3 mb-1"></div>
|
||||
<div class="h-2 bg-foreground/10 rounded w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card/80 rounded-xl p-3 border border-border/30">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 bg-trackkeep-purple/20 rounded-lg"></div>
|
||||
<div class="flex-1">
|
||||
<div class="h-3 bg-foreground/20 rounded w-4/5 mb-1"></div>
|
||||
<div class="h-2 bg-foreground/10 rounded w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-background/80 backdrop-blur-sm border-t border-border/30 px-4 py-2">
|
||||
<div class="flex justify-around">
|
||||
<div class="w-8 h-8 bg-trackkeep-blue rounded-lg"></div>
|
||||
<div class="w-8 h-8 bg-muted rounded-lg"></div>
|
||||
<div class="w-8 h-8 bg-muted rounded-lg"></div>
|
||||
<div class="w-8 h-8 bg-muted rounded-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Store Badges -->
|
||||
<div class="flex justify-center space-x-4 mt-6">
|
||||
<div class="bg-black/80 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center space-x-2">
|
||||
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.38-1.09-.53-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.38C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
|
||||
</svg>
|
||||
<div class="text-white">
|
||||
<div class="text-xs opacity-80">Download on the</div>
|
||||
<div class="text-sm font-semibold">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/80 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center space-x-2">
|
||||
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
|
||||
</svg>
|
||||
<div class="text-white">
|
||||
<div class="text-xs opacity-80">Get it on</div>
|
||||
<div class="text-sm font-semibold">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech Stack -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Mobile Technology Stack</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-blue to-trackkeep-cyan rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<span class="text-white font-bold text-sm">RN</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">React Native</h4>
|
||||
<p class="text-xs text-muted-foreground">Cross-platform framework</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-purple to-trackkeep-pink rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">React Navigation</h4>
|
||||
<p class="text-xs text-muted-foreground">Navigation & routing</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-green to-trackkeep-emerald rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">React Paper</h4>
|
||||
<p class="text-xs text-muted-foreground">Material Design UI</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-orange to-trackkeep-orange/80 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">SQLite Storage</h4>
|
||||
<p class="text-xs text-muted-foreground">Local data persistence</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
// Navigation component with glassmorphism effect
|
||||
---
|
||||
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-border/30 shadow-xl transition-all duration-300">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-20">
|
||||
<!-- Enhanced Logo -->
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex items-center space-x-4 group">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-primary via-trackeep-blue to-trackeep-purple rounded-2xl flex items-center justify-center group-hover:rotate-12 group-hover:scale-110 transition-all duration-500 shadow-lg group-hover:shadow-glow border border-primary/20">
|
||||
<svg class="w-7 h-7 text-primary-foreground group-hover:animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h2a1 1 0 100-2 2 2 0 00-2 2v11a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-2xl font-black text-foreground group-hover:text-primary transition-colors gradient-text">Trackeep</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Desktop Navigation -->
|
||||
<div class="hidden lg:flex items-center space-x-10">
|
||||
<a href="#features" class="nav-item-papra relative group font-semibold">
|
||||
Features
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
<a href="#ai-services" class="nav-item-papra relative group font-semibold">
|
||||
AI Features
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
<a href="#privacy" class="nav-item-papra relative group font-semibold">
|
||||
Privacy
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
<a href="#mobile-app" class="nav-item-papra relative group font-semibold">
|
||||
Mobile
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
<a href="#testimonials" class="nav-item-papra relative group font-semibold">
|
||||
Testimonials
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="nav-item-papra relative group font-semibold">
|
||||
Demo
|
||||
<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Right side actions -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Enhanced Social Links -->
|
||||
<div class="hidden sm:flex items-center space-x-3">
|
||||
<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="p-3 rounded-xl text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300 group hover:scale-110 hover:shadow-lg" aria-label="GitHub">
|
||||
<svg class="w-6 h-6 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="p-3 rounded-xl text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300 group hover:scale-110 hover:shadow-lg" aria-label="Discord">
|
||||
<svg class="w-6 h-6 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced CTA Button (hidden on mobile) -->
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="hidden sm:flex btn-primary px-6 py-3 text-sm font-bold shadow-glow hover-lift rounded-xl bg-gradient-to-r from-primary to-trackeep-blue hover:from-trackeep-blue hover:to-primary transition-all duration-300 hover:scale-105">
|
||||
Try Demo
|
||||
</a>
|
||||
|
||||
<!-- Enhanced Mobile menu button -->
|
||||
<button id="mobile-menu-button" class="lg:hidden p-3 rounded-xl bg-muted/50 hover:bg-muted/80 transition-all duration-300 hover:scale-110 hover:shadow-lg border border-border/30" aria-label="Toggle mobile menu">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div id="mobile-menu" class="hidden lg:hidden bg-background/95 backdrop-blur-xl border-t border-border/40">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||||
<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Features</a>
|
||||
<a href="#ai-services" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">AI Features</a>
|
||||
<a href="#privacy" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Privacy</a>
|
||||
<a href="#mobile-app" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Mobile</a>
|
||||
<a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Testimonials</a>
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Demo</a>
|
||||
<div class="pt-2 border-t border-border/40">
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="block mx-2 mb-2 btn-primary text-center shadow-glow">
|
||||
Try Demo
|
||||
</a>
|
||||
<div class="flex justify-center space-x-4 px-2 py-2">
|
||||
<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="p-2 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="p-2 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300" aria-label="Discord">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
if (mobileMenuButton && mobileMenu) {
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
// Close mobile menu when clicking on links
|
||||
const mobileLinks = mobileMenu?.querySelectorAll('a');
|
||||
mobileLinks?.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu?.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<nav class="sticky top-0 z-50 bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-700/50 shadow-soft">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
src="/trackeep-logo-bg.png"
|
||||
alt="Trackeep"
|
||||
class="h-10 w-auto transition-papra hover:scale-105"
|
||||
@error="(e: Event) => { const target = e.target as HTMLImageElement; target.style.display='none'; logoError = true }"
|
||||
/>
|
||||
<span v-if="logoError" class="text-3xl font-bold text-primary tracking-tight">Trackeep</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden lg:block">
|
||||
<div class="flex items-center space-x-12">
|
||||
<a href="#features" @click="(e) => handleNavClick(e, 'features')" class="nav-item-papra text-lg">Features</a>
|
||||
<a href="#how-it-works" @click="(e) => handleNavClick(e, 'how-it-works')" class="nav-item-papra text-lg">How It Works</a>
|
||||
<a href="#tech-stack" @click="(e) => handleNavClick(e, 'tech-stack')" class="nav-item-papra text-lg">Tech Stack</a>
|
||||
<a href="https://docs.trackeep.org" target="_blank" class="nav-item-papra text-lg">Docs</a>
|
||||
<a href="https://github.com/trackeep/trackeep" target="_blank" class="nav-item-papra text-lg flex items-center gap-2">
|
||||
<i class="ph ph-github-logo text-xl"></i>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Toggle & Mobile Menu Button -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
@click="toggleTheme"
|
||||
class="p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-papra group"
|
||||
:aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
||||
>
|
||||
<i :class="isDark ? 'ph ph-sun' : 'ph ph-moon'" class="text-xl text-gray-600 dark:text-gray-400 group-hover:text-primary transition-colors"></i>
|
||||
</button>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
@click="toggleMobileMenu"
|
||||
class="lg:hidden p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-papra"
|
||||
:aria-label="isMobileMenuOpen ? 'Close menu' : 'Open menu'"
|
||||
>
|
||||
<i :class="isMobileMenuOpen ? 'ph ph-x' : 'ph ph-list'" class="text-xl text-gray-600 dark:text-gray-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div v-if="isMobileMenuOpen" class="lg:hidden border-t border-gray-200 dark:border-gray-700 mt-4 pt-4">
|
||||
<div class="space-y-3">
|
||||
<a href="#features" @click="(e) => handleNavClick(e, 'features')" class="block px-4 py-3 text-lg nav-item-papra rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">Features</a>
|
||||
<a href="#how-it-works" @click="(e) => handleNavClick(e, 'how-it-works')" class="block px-4 py-3 text-lg nav-item-papra rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">How It Works</a>
|
||||
<a href="#tech-stack" @click="(e) => handleNavClick(e, 'tech-stack')" class="block px-4 py-3 text-lg nav-item-papra rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">Tech Stack</a>
|
||||
<a href="https://docs.trackeep.org" @click="closeMobileMenu" target="_blank" class="block px-4 py-3 text-lg nav-item-papra rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">Docs</a>
|
||||
<a href="https://github.com/trackeep/trackeep" @click="closeMobileMenu" target="_blank" class="block px-4 py-3 text-lg nav-item-papra rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-2">
|
||||
<i class="ph ph-github-logo text-xl"></i>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useTheme } from '../composables/useTheme'
|
||||
import { useSmoothScroll } from '../composables/useSmoothScroll'
|
||||
|
||||
const { isDark, toggleTheme } = useTheme()
|
||||
const { scrollToSection } = useSmoothScroll()
|
||||
const isMobileMenuOpen = ref(false)
|
||||
const logoError = ref(false)
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
isMobileMenuOpen.value = !isMobileMenuOpen.value
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
isMobileMenuOpen.value = false
|
||||
}
|
||||
|
||||
const handleNavClick = (event: Event, sectionId: string) => {
|
||||
event.preventDefault()
|
||||
scrollToSection(sectionId)
|
||||
closeMobileMenu()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
// Privacy & Self-Hosting Section Component
|
||||
---
|
||||
|
||||
<section id="privacy" class="py-24 lg:py-40 bg-gradient-to-br from-background via-trackeep-green/5 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-5"></div>
|
||||
<div class="gradient-blob bg-trackeep-green w-[500px] h-[500px] top-10 left-10 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-emerald w-[400px] h-[400px] bottom-10 right-10 animate-float parallax-slow" style="animation-delay: 2s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-trackeep-green/10 to-trackeep-emerald/10 border border-trackeep-green/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-trackeep-green to-trackeep-emerald rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-trackeep-green">Privacy First</span>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
|
||||
<span class="block">Your Data</span>
|
||||
<span class="gradient-text">Your Rules</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Complete ownership and control over your digital life, with transparent open-source code you can trust
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Features Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
|
||||
<!-- Self-Hosting Benefits -->
|
||||
<div class="space-y-8">
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-green/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-green transition-colors">
|
||||
Fully Self-Hosted
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No third-party servers required. Everything runs on your own infrastructure, giving you complete control over your data and systems.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-emerald/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-emerald" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-emerald transition-colors">
|
||||
Data Ownership
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Your data remains yours – encrypted, controlled, and never leaves your systems. No data mining, no tracking, no selling your information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-blue/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-blue transition-colors">
|
||||
Open Source
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Transparent codebase you can audit, modify, and trust. No hidden code, no secret data collection – everything is out in the open.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Technical Benefits -->
|
||||
<div class="space-y-8">
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-purple/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-purple transition-colors">
|
||||
API Access
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Build custom applications on top of Trackeep with full API access. Integrate with your existing tools and workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-orange/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-orange transition-colors">
|
||||
AI Control
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Full control over which AI services (if any) you want to use. Disable all AI, use only local models, or mix and match cloud services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-trackeep-cyan/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-6 h-6 text-trackeep-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-cyan transition-colors">
|
||||
High Performance
|
||||
</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Optimized for self-hosting with efficient resource usage. Runs smoothly on modest hardware while maintaining excellent performance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deployment Options -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Flexible Deployment Options</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-blue to-trackeep-cyan rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-foreground mb-2">Quick Start</h4>
|
||||
<p class="text-sm text-muted-foreground mb-4">Docker Compose setup in minutes with pre-configured services</p>
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded">docker compose up -d</code>
|
||||
</div>
|
||||
<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green to-trackeep-emerald rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-foreground mb-2">Production Ready</h4>
|
||||
<p class="text-sm text-muted-foreground mb-4">Scalable deployment with load balancing and monitoring</p>
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded">docker-compose.prod.yml</code>
|
||||
</div>
|
||||
<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple to-trackeep-pink rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-bold text-foreground mb-2">Custom Setup</h4>
|
||||
<p class="text-sm text-muted-foreground mb-4">Manual configuration for specific requirements and environments</p>
|
||||
<code class="text-xs bg-muted px-2 py-1 rounded">Custom deployment</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-trackeep-green/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-trackeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">GDPR Compliant</h4>
|
||||
<p class="text-xs text-muted-foreground">Privacy by design</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-trackeep-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-trackeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">End-to-End Encrypted</h4>
|
||||
<p class="text-xs text-muted-foreground">Secure by default</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-trackeep-purple/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-trackeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Open Source</h4>
|
||||
<p class="text-xs text-muted-foreground">Fully transparent</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-trackeep-orange/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
||||
<svg class="w-8 h-8 text-trackeep-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Community Driven</h4>
|
||||
<p class="text-xs text-muted-foreground">Built together</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
// Enhanced QuickInstall component with terminal styling and animations
|
||||
---
|
||||
|
||||
<section id="quick-install" class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
|
||||
<div class="gradient-blob bg-primary w-[400px] h-[400px] top-10 right-10 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-10 left-10 animate-float parallax-slow" style="animation-delay: 3s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<!-- Section header -->
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl hover-lift group cursor-pointer glow-border">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
|
||||
<span class="text-sm font-semibold text-primary text-shimmer">Quick Install</span>
|
||||
<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
|
||||
<span class="block">Get Started in</span>
|
||||
<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Seconds</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
|
||||
One command is all it takes to deploy Trackkeep on your own infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced terminal box -->
|
||||
<div class="max-w-4xl mx-auto animate-scale-in" style="animation-delay: 0.2s">
|
||||
<div class="feature-card group cursor-pointer scroll-reveal hover-3d glow-border">
|
||||
<!-- Enhanced terminal header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-gray-900/90 to-gray-800/90 backdrop-blur-xl border-b border-gray-700/50 rounded-t-2xl">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors cursor-pointer shadow-glow-red"></div>
|
||||
<div class="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors cursor-pointer shadow-glow-yellow"></div>
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors cursor-pointer shadow-glow-green"></div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-gray-400">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M2 8a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8z"/>
|
||||
</svg>
|
||||
<span class="text-sm font-mono">terminal</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-glow-green"></div>
|
||||
<span class="text-xs text-green-400 font-mono">connected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<div class="p-6 bg-gradient-to-br from-gray-900/80 to-gray-800/80 backdrop-blur-sm">
|
||||
<div class="font-mono text-sm space-y-4">
|
||||
<!-- Command line with enhanced styling -->
|
||||
<div class="flex items-center space-x-3 group">
|
||||
<span class="text-gray-400">$</span>
|
||||
<code class="flex-1 text-green-400 animate-text-glow" id="install-command">
|
||||
curl -sSL https://trackeep.org/install.sh | sh
|
||||
</code>
|
||||
|
||||
<!-- Enhanced copy button with magnetic effect -->
|
||||
<button
|
||||
id="copy-button"
|
||||
class="ml-6 px-4 py-3 bg-gradient-to-r from-gray-700/50 to-gray-600/50 hover:from-gray-600/50 hover:to-gray-500/50 text-gray-200 text-sm rounded-xl transition-all duration-300 flex items-center space-x-2 border border-gray-600/50 hover:border-gray-500/50 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow"
|
||||
aria-label="Copy command"
|
||||
>
|
||||
<svg id="copy-icon" class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span id="copy-text" class="font-medium">Copy</span>
|
||||
<svg id="check-icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Animated terminal output preview -->
|
||||
<div class="mt-4 space-y-2 animate-slide-up" style="animation-delay: 0.5s">
|
||||
<div class="text-gray-500 animate-typing">
|
||||
<span class="text-blue-400">[INFO]</span> Downloading Trackkeep installer...
|
||||
</div>
|
||||
<div class="text-gray-500 animate-typing" style="animation-delay: 1s">
|
||||
<span class="text-green-400">[SUCCESS]</span> Installation completed successfully!
|
||||
</div>
|
||||
<div class="text-gray-500 animate-typing" style="animation-delay: 2s">
|
||||
<span class="text-yellow-400">[INFO]</span> Starting Trackkeep dashboard...
|
||||
</div>
|
||||
<div class="text-gray-500 animate-typing" style="animation-delay: 3s">
|
||||
<span class="text-green-400">[READY]</span> Trackkeep is running at http://localhost:3000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced social proof buttons -->
|
||||
<div class="mt-12 text-center animate-slide-up" style="animation-delay: 0.8s">
|
||||
<div class="inline-flex items-center justify-center p-8 rounded-2xl bg-card/50 backdrop-blur-sm border border-border/50">
|
||||
<div class="text-center mb-6">
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Join the Community
|
||||
</h3>
|
||||
<p class="text-muted-foreground mb-6 max-w-md">
|
||||
Get help, share ideas, and connect with other Trackkeep users.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="btn-outline px-6 py-3 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow-blue">
|
||||
<svg class="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="btn-outline px-6 py-3 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow-purple">
|
||||
<svg class="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.268 18.268 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078.0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.13 10.2 10.2 0 0 0 1.872-.892.077.077 0 0 1 .041-.106c.36.698.772 1.363 1.225 1.993a.076.076 0 0 0 .083.028 19.9 19.9 0 0 0 6.003-3.03.077.077 0 0 0 .032-.054c.465-4.94-.838-9.462-3.548-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const copyButton = document.getElementById('copy-button');
|
||||
const copyIcon = document.getElementById('copy-icon');
|
||||
const checkIcon = document.getElementById('check-icon');
|
||||
const copyText = document.getElementById('copy-text');
|
||||
const command = 'curl -sSL https://trackeep.org/install.sh | sh';
|
||||
|
||||
copyButton?.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
|
||||
// Show success state
|
||||
copyIcon?.classList.add('hidden');
|
||||
checkIcon?.classList.remove('hidden');
|
||||
if (copyText) copyText.textContent = 'Copied!';
|
||||
copyButton.classList.add('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50');
|
||||
copyButton.classList.remove('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
|
||||
|
||||
// Reset after 2 seconds
|
||||
setTimeout(() => {
|
||||
copyIcon?.classList.remove('hidden');
|
||||
checkIcon?.classList.add('hidden');
|
||||
if (copyText) copyText.textContent = 'Copy';
|
||||
copyButton.classList.remove('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50');
|
||||
copyButton.classList.add('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<div class="card-papra max-w-4xl mx-auto lg:mx-0 border-2 border-primary/20">
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3 tracking-tight">Quick Install</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">Get Trackeep running in seconds with one command</p>
|
||||
</div>
|
||||
|
||||
<!-- Command Box -->
|
||||
<div class="relative bg-gray-900 dark:bg-black border border-gray-700 dark:border-gray-600 rounded-2xl p-6 mb-8 shadow-strong">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<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>
|
||||
<span class="text-xs text-gray-400 font-mono">terminal</span>
|
||||
</div>
|
||||
|
||||
<code class="text-lg font-mono text-green-400 break-leading-relaxed block">
|
||||
$ curl -sSL https://trackeep.org/install.sh | sh
|
||||
</code>
|
||||
|
||||
<!-- Copy Button -->
|
||||
<button
|
||||
@click="copyCommand"
|
||||
class="absolute top-6 right-6 p-3 bg-gray-800 hover:bg-gray-700 rounded-xl transition-papra group"
|
||||
:aria-label="copied ? 'Copied!' : 'Copy command'"
|
||||
>
|
||||
<i :class="copied ? 'ph ph-check text-green-400' : 'ph ph-copy text-gray-400 group-hover:text-white'" class="text-xl transition-colors"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-if="copied" class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-2xl p-4 mb-8 shadow-soft">
|
||||
<p class="text-green-800 dark:text-green-200 font-medium flex items-center">
|
||||
<i class="ph ph-check-circle mr-2 text-xl"></i>
|
||||
Command copied to clipboard! Ready to install Trackeep.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Social Proof Buttons -->
|
||||
<div class="flex flex-wrap gap-4 mb-8">
|
||||
<a
|
||||
href="https://github.com/trackeep/trackeep"
|
||||
target="_blank"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-papra group"
|
||||
>
|
||||
<i class="ph ph-github-logo text-xl text-gray-600 dark:text-gray-400 group-hover:text-primary transition-colors"></i>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">View Source</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://discord.gg/trackeep"
|
||||
target="_blank"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-papra group"
|
||||
>
|
||||
<i class="ph ph-discord-logo text-xl text-gray-600 dark:text-gray-400 group-hover:text-primary transition-colors"></i>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">Join Discord</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://docs.trackeep.org"
|
||||
target="_blank"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-papra group"
|
||||
>
|
||||
<i class="ph ph-book text-xl text-gray-600 dark:text-gray-400 group-hover:text-primary transition-colors"></i>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">Documentation</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Installation Info -->
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-2xl p-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 p-2 rounded-lg">
|
||||
<i class="ph ph-info text-xl"></i>
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 dark:text-gray-300">
|
||||
<p class="font-semibold mb-3 text-gray-900 dark:text-gray-100">The install script will:</p>
|
||||
<ul class="space-y-2 ml-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="ph ph-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
|
||||
<span>Check system requirements (Docker, Docker Compose)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="ph ph-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
|
||||
<span>Download the latest Trackeep release</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="ph ph-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
|
||||
<span>Set up environment variables and database</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i class="ph ph-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
|
||||
<span>Start all services and provide access URLs</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
const copyCommand = async () => {
|
||||
const command = 'curl -sSL https://trackeep.org/install.sh | sh'
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(command)
|
||||
copied.value = true
|
||||
|
||||
// Reset after 3 seconds
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = command
|
||||
document.body.appendChild(textArea)
|
||||
textArea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textArea)
|
||||
|
||||
copied.value = true
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,228 @@
|
||||
---
|
||||
// Tech Stack section with logos
|
||||
---
|
||||
|
||||
<section class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-3"></div>
|
||||
|
||||
<!-- Minimal particle field -->
|
||||
<div class="particle-field">
|
||||
<div class="particle" style="left: 15%; animation-delay: 0s; animation-duration: 21s;"></div>
|
||||
<div class="particle" style="left: 40%; animation-delay: 2s; animation-duration: 24s;"></div>
|
||||
<div class="particle" style="left: 65%; animation-delay: 1s; animation-duration: 20s;"></div>
|
||||
<div class="particle" style="left: 85%; animation-delay: 3s; animation-duration: 22s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<!-- Section header -->
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
|
||||
<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-primary">Technology Stack</span>
|
||||
</div>
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-black text-foreground mb-8 leading-tight">
|
||||
Built with <span class="gradient-text">Modern Tech</span>
|
||||
</h2>
|
||||
<p class="text-xl lg:text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Trackeep is built on a foundation of proven, scalable technologies that ensure reliability, performance, and security.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack categories -->
|
||||
<div class="space-y-16">
|
||||
<!-- Frontend Stack -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-8 text-center flex items-center justify-center">
|
||||
<svg class="w-8 h-8 mr-3 text-trackkeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Frontend
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">SJS</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">SolidJS</h4>
|
||||
<p class="text-xs text-muted-foreground">Reactive UI framework</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">V</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Vite</h4>
|
||||
<p class="text-xs text-muted-foreground">Lightning builds</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">UC</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">UnoCSS</h4>
|
||||
<p class="text-xs text-muted-foreground">Atomic CSS</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">KB</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Kobalte</h4>
|
||||
<p class="text-xs text-muted-foreground">Components</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend Stack -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-8 text-center flex items-center justify-center">
|
||||
<svg class="w-8 h-8 mr-3 text-trackkeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
|
||||
</svg>
|
||||
Backend
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">Go</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Go</h4>
|
||||
<p class="text-xs text-muted-foreground">High-performance</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">PG</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">PostgreSQL</h4>
|
||||
<p class="text-xs text-muted-foreground">Database</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-600 to-emerald-700 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">G</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Gin</h4>
|
||||
<p class="text-xs text-muted-foreground">Web framework</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-pink-700 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">G</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">GORM</h4>
|
||||
<p class="text-xs text-muted-foreground">ORM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile & DevOps -->
|
||||
<div class="glass-effect rounded-3xl p-8 border border-border/50">
|
||||
<h3 class="text-2xl font-bold text-foreground mb-8 text-center flex items-center justify-center">
|
||||
<svg class="w-8 h-8 mr-3 text-trackkeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Mobile & DevOps
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">RN</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">React Native</h4>
|
||||
<p class="text-xs text-muted-foreground">Mobile apps</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">D</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Docker</h4>
|
||||
<p class="text-xs text-muted-foreground">Containers</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">GH</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">GitHub Actions</h4>
|
||||
<p class="text-xs text-muted-foreground">CI/CD</p>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform shadow-lg">
|
||||
<span class="text-xl font-bold text-white">DC</span>
|
||||
</div>
|
||||
<h4 class="font-semibold text-foreground mb-1">Docker Compose</h4>
|
||||
<p class="text-xs text-muted-foreground">Orchestration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Architecture highlights -->
|
||||
<div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="glass-effect rounded-2xl p-6 border border-border/50">
|
||||
<h3 class="text-xl font-bold text-foreground mb-4 flex items-center">
|
||||
<svg class="w-6 h-6 mr-2 text-trackkeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
Performance First
|
||||
</h3>
|
||||
<ul class="space-y-3 text-muted-foreground">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-green mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Sub-second page loads with static generation</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-green mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Optimized database queries and caching</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-green mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>CDN delivery for global performance</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass-effect rounded-2xl p-6 border border-border/50">
|
||||
<h3 class="text-xl font-bold text-foreground mb-4 flex items-center">
|
||||
<svg class="w-6 h-6 mr-2 text-trackkeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
Enterprise Ready
|
||||
</h3>
|
||||
<ul class="space-y-3 text-muted-foreground">
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-blue mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Horizontal scaling with microservices</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-blue mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>High availability with automatic failover</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-trackkeep-blue mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span>Comprehensive monitoring and logging</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Open source emphasis -->
|
||||
<div class="mt-16 text-center">
|
||||
<div class="inline-flex items-center space-x-2 bg-trackkeep-blue/10 text-trackkeep-blue px-6 py-3 rounded-full glass-effect backdrop-blur-sm border border-trackkeep-blue/20">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span class="font-bold">100% Open Source</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground mt-4 max-w-2xl mx-auto text-lg">
|
||||
Every component of Trackeep is open source. Inspect the code, contribute improvements, or deploy it your way.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
// Testimonials section with social proof
|
||||
---
|
||||
|
||||
<section id="testimonials" class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
|
||||
<!-- Enhanced Background decoration -->
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
|
||||
<div class="gradient-blob bg-primary w-[400px] h-[400px] top-10 right-10 animate-float parallax-slow"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-10 left-10 animate-float parallax-slow" style="animation-delay: 3s"></div>
|
||||
<div class="gradient-blob bg-trackeep-green w-[300px] h-[300px] top-1/2 right-1/4 animate-float parallax-slow" style="animation-delay: 1.5s"></div>
|
||||
<div class="gradient-blob bg-trackeep-blue w-[250px] h-[250px] bottom-1/3 left-1/4 animate-float parallax-slow" style="animation-delay: 2.5s"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<!-- Enhanced Section header with shimmer effects -->
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl hover-lift group cursor-pointer glow-border">
|
||||
<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
|
||||
<span class="text-sm font-semibold text-primary text-shimmer">Social Proof</span>
|
||||
<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
|
||||
<span class="block">Loved by</span>
|
||||
<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Developers & Teams</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
|
||||
Join thousands of users who have transformed their productivity with Trackkeep. Here's what they have to say.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Testimonials grid with 3D effects -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 stagger-animation">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.2s">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-lg group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
|
||||
JD
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-bold text-xl text-foreground group-hover:text-blue-500 transition-colors">John Doe</h4>
|
||||
<p class="text-sm text-muted-foreground font-medium">Senior Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb-4">
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<blockquote class="text-muted-foreground leading-relaxed mb-6 text-lg font-medium">
|
||||
"Trackkeep has completely transformed how I manage my development resources. The AI-powered organization saves me hours every week, and the self-hosted nature gives me complete peace of mind about my data."
|
||||
</blockquote>
|
||||
<div class="flex items-center text-blue-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Read more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="feature-card group cursor-pointer animate-scale-in scroll-reveal hover-3d glow-border" style="animation-delay: 0.3s">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center text-white font-semibold text-lg group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-green-500/30">
|
||||
SM
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-bold text-xl text-foreground group-hover:text-green-500 transition-colors">Sarah Miller</h4>
|
||||
<p class="text-sm text-muted-foreground font-medium">Product Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb-4">
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-yellow-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<blockquote class="text-muted-foreground leading-relaxed mb-6 text-lg font-medium">
|
||||
"The task management features are incredible. Our team's productivity has increased by 40% since we switched to Trackkeep. The mobile apps keep everyone connected, no matter where they're working from."
|
||||
</blockquote>
|
||||
<div class="flex items-center text-green-500 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span class="text-base font-semibold mr-2">Read more</span>
|
||||
<svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="card-papra p-6 hover-lift group animate-scale-in" style="animation-delay: 0.4s">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-white font-semibold text-lg">
|
||||
MC
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="font-semibold text-foreground">Michael Chen</h4>
|
||||
<p class="text-sm text-muted-foreground">DevOps Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<blockquote class="text-muted-foreground leading-relaxed mb-4">
|
||||
"As a DevOps engineer, I appreciate the attention to security and the ease of deployment. The Docker setup took less than 5 minutes, and the API documentation is comprehensive. This is how modern tools should be built."
|
||||
</blockquote>
|
||||
<div class="text-sm text-primary font-medium">
|
||||
⭐⭐⭐⭐⭐
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats section -->
|
||||
<div class="mt-20 grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
|
||||
<div class="animate-scale-in" style="animation-delay: 0.5s">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary mb-2">10K+</div>
|
||||
<div class="text-muted-foreground">Active Users</div>
|
||||
</div>
|
||||
<div class="animate-scale-in" style="animation-delay: 0.6s">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-trackeep-green mb-2">500K+</div>
|
||||
<div class="text-muted-foreground">Bookmarks Saved</div>
|
||||
</div>
|
||||
<div class="animate-scale-in" style="animation-delay: 0.7s">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-trackeep-purple mb-2">50K+</div>
|
||||
<div class="text-muted-foreground">Tasks Completed</div>
|
||||
</div>
|
||||
<div class="animate-scale-in" style="animation-delay: 0.8s">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-trackeep-orange mb-2">99.9%</div>
|
||||
<div class="text-muted-foreground">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="mt-20 text-center animate-slide-up" style="animation-delay: 0.9s">
|
||||
<div class="inline-flex items-center justify-center p-8 rounded-2xl bg-card/50 backdrop-blur-sm border border-border/50">
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Ready to join them?
|
||||
</h3>
|
||||
<p class="text-muted-foreground mb-6 max-w-md">
|
||||
Start your journey to better productivity and data privacy today.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-primary px-8 py-4 shadow-glow group">
|
||||
Try Live Demo
|
||||
<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#install" class="btn-outline px-8 py-4 backdrop-blur-sm">
|
||||
Get Started Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,15 +0,0 @@
|
||||
export function useSmoothScroll() {
|
||||
const scrollToSection = (elementId: string) => {
|
||||
const element = document.getElementById(elementId)
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
scrollToSection
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export function useTheme() {
|
||||
const isDark = ref(false)
|
||||
|
||||
const toggleTheme = () => {
|
||||
isDark.value = !isDark.value
|
||||
updateTheme()
|
||||
}
|
||||
|
||||
const updateTheme = () => {
|
||||
if (isDark.value) {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.theme = 'dark'
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.theme = 'light'
|
||||
}
|
||||
}
|
||||
|
||||
const initTheme = () => {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
isDark.value = true
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
isDark.value = false
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
watch(isDark, updateTheme)
|
||||
|
||||
return {
|
||||
isDark,
|
||||
toggleTheme,
|
||||
initTheme
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Welcome to Trackkeep - Your Self-Hosted Productivity & Knowledge Hub
|
||||
template: splash
|
||||
hero:
|
||||
tagline: Your Self-Hosted Productivity & Knowledge Hub
|
||||
image:
|
||||
file: ../../assets/hero.png
|
||||
alt: Trackkeep Dashboard
|
||||
actions:
|
||||
- text: Quick Start
|
||||
link: /quick-start
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
- text: View Demo
|
||||
link: https://demo.trackkeep.org
|
||||
icon: external
|
||||
variant: secondary
|
||||
---
|
||||
|
||||
import { CardGrid, Card } from '@astrojs/starlight/components';
|
||||
|
||||
Trackkeep is a powerful, self-hosted productivity and knowledge management platform that puts you in control of your digital life. Built with privacy, security, and simplicity in mind.
|
||||
|
||||
## Why Trackkeep?
|
||||
|
||||
<CardGrid stagger>
|
||||
<Card title="Privacy First" icon="pencil">
|
||||
Your data stays yours. No tracking, no data mining, no selling your information. Complete ownership and control.
|
||||
</Card>
|
||||
<Card title="Open Source" icon="github">
|
||||
Fully open source with permissive licensing. Audit the code, contribute, or customize it to fit your needs.
|
||||
</Card>
|
||||
<Card title="All-in-One" icon="stack">
|
||||
Replace multiple apps with one unified platform for bookmarks, tasks, files, and notes.
|
||||
</Card>
|
||||
<Card title="AI Powered" icon="sparkles">
|
||||
Smart features when you want them, complete privacy when you don't. You're always in control.
|
||||
</Card>
|
||||
<Card title="Self-Hosted" icon="server">
|
||||
One-time setup, lifetime usage. No monthly fees, no feature gates, no vendor lock-in.
|
||||
</Card>
|
||||
<Card title="Developer Friendly" icon="code">
|
||||
Rich API, webhooks, and extensibility. Integrate Trackkeep into your existing workflows.
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
## Quick Install
|
||||
|
||||
Get started with a single command:
|
||||
|
||||
```bash
|
||||
curl -sSL https://trackkeep.org/install.sh | sh
|
||||
```
|
||||
|
||||
This will automatically:
|
||||
- Check system requirements
|
||||
- Download the latest version
|
||||
- Set up Docker containers
|
||||
- Initialize the database
|
||||
- Start the services
|
||||
|
||||
## What's Included?
|
||||
|
||||
### Core Features
|
||||
- **Smart Bookmarks**: Save and categorize web content with intelligent tagging
|
||||
- **Task Management**: Plan and track your to-dos with intuitive boards
|
||||
- **File Storage**: Upload and organize documents with version control
|
||||
- **AI-Powered Insights**: Get smart recommendations and automated organization
|
||||
- **Mobile Apps**: Native iOS and Android apps with seamless sync
|
||||
|
||||
### Technical Stack
|
||||
- **Backend**: Go for high performance and reliability
|
||||
- **Frontend**: Modern web technologies with responsive design
|
||||
- **Database**: PostgreSQL for data integrity
|
||||
- **Deployment**: Docker for easy setup and maintenance
|
||||
- **API**: RESTful API with comprehensive documentation
|
||||
|
||||
## Who is Trackkeep for?
|
||||
|
||||
- **Individuals** who want to organize their digital life without compromising privacy
|
||||
- **Teams** that need a secure, self-hosted collaboration platform
|
||||
- **Developers** who want to extend and customize their productivity tools
|
||||
- **Organizations** that require on-premises solutions for data sovereignty
|
||||
|
||||
## What's Next?
|
||||
|
||||
- [Quick Start Guide](/quick-start) - Get up and running in minutes
|
||||
- [Installation Guide](/installation) - Detailed setup instructions
|
||||
- [API Reference](/api) - Complete API documentation
|
||||
- [Development Guide](/development) - Contribute to Trackkeep
|
||||
|
||||
---
|
||||
|
||||
Ready to take control of your digital life? [Start your journey](/quick-start) with Trackkeep today!
|
||||
@@ -0,0 +1,640 @@
|
||||
---
|
||||
title: Troubleshooting
|
||||
description: Common issues and solutions for Trackkeep
|
||||
---
|
||||
|
||||
This comprehensive troubleshooting guide helps you resolve common issues with Trackkeep, from installation problems to performance optimization.
|
||||
|
||||
## Quick Diagnostics
|
||||
|
||||
### Health Check
|
||||
|
||||
Run the built-in health check to assess your Trackkeep installation:
|
||||
|
||||
```bash
|
||||
# Check overall system health
|
||||
curl https://your-domain.com/health
|
||||
|
||||
# Detailed health information
|
||||
curl https://your-domain.com/health/detailed
|
||||
|
||||
# Component-specific checks
|
||||
curl https://your-domain.com/health/database
|
||||
curl https://your-domain.com/health/redis
|
||||
curl https://your-domain.com/health/storage
|
||||
```
|
||||
|
||||
### Diagnostic Tool
|
||||
|
||||
Use the built-in diagnostic tool:
|
||||
|
||||
```bash
|
||||
# Run comprehensive diagnostics
|
||||
trackkeep doctor
|
||||
|
||||
# Check specific components
|
||||
trackkeep doctor --database
|
||||
trackkeep doctor --storage
|
||||
trackkeep doctor --network
|
||||
|
||||
# Generate diagnostic report
|
||||
trackkeep doctor --report > diagnostics.json
|
||||
```
|
||||
|
||||
## Installation Issues
|
||||
|
||||
### Database Connection Failed
|
||||
|
||||
**Symptoms:**
|
||||
- Error: "Failed to connect to database"
|
||||
- Application won't start
|
||||
- 502 Bad Gateway errors
|
||||
|
||||
**Common Causes:**
|
||||
- PostgreSQL not running
|
||||
- Incorrect database credentials
|
||||
- Network connectivity issues
|
||||
- Database not created
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check PostgreSQL Status:**
|
||||
```bash
|
||||
# Docker Compose
|
||||
docker-compose ps postgres
|
||||
docker-compose logs postgres
|
||||
|
||||
# System PostgreSQL
|
||||
sudo systemctl status postgresql
|
||||
sudo systemctl start postgresql
|
||||
```
|
||||
|
||||
2. **Verify Database Credentials:**
|
||||
```bash
|
||||
# Test connection
|
||||
psql -h localhost -U trackkeep -d trackkeep
|
||||
|
||||
# Check environment variables
|
||||
echo $DATABASE_URL
|
||||
```
|
||||
|
||||
3. **Create Database:**
|
||||
```sql
|
||||
-- Connect to PostgreSQL
|
||||
CREATE DATABASE trackkeep;
|
||||
CREATE USER trackkeep WITH PASSWORD 'your_password';
|
||||
GRANT ALL PRIVILEGES ON DATABASE trackkeep TO trackkeep;
|
||||
```
|
||||
|
||||
4. **Fix Docker Issues:**
|
||||
```bash
|
||||
# Restart database container
|
||||
docker-compose restart postgres
|
||||
|
||||
# Rebuild containers
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### Port Already in Use
|
||||
|
||||
**Symptoms:**
|
||||
- Error: "Port 8080 is already in use"
|
||||
- Application fails to start
|
||||
- Port binding errors
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Find Process Using Port:**
|
||||
```bash
|
||||
# Find process on port 8080
|
||||
sudo lsof -i :8080
|
||||
sudo netstat -tulpn | grep :8080
|
||||
```
|
||||
|
||||
2. **Kill Process:**
|
||||
```bash
|
||||
# Kill process by PID
|
||||
sudo kill -9 <PID>
|
||||
|
||||
# Or use fuser
|
||||
sudo fuser -k 8080/tcp
|
||||
```
|
||||
|
||||
3. **Change Port:**
|
||||
```env
|
||||
# In .env file
|
||||
PORT=8081
|
||||
```
|
||||
|
||||
### Permission Denied
|
||||
|
||||
**Symptoms:**
|
||||
- Error: "Permission denied"
|
||||
- Cannot write to storage directory
|
||||
- File upload failures
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check Directory Permissions:**
|
||||
```bash
|
||||
# Check current permissions
|
||||
ls -la /app/data
|
||||
ls -la /app/logs
|
||||
|
||||
# Fix permissions
|
||||
sudo chown -R trackkeep:trackkeep /app/data
|
||||
sudo chmod -R 755 /app/data
|
||||
```
|
||||
|
||||
2. **Docker Permission Issues:**
|
||||
```bash
|
||||
# Fix Docker socket permissions
|
||||
sudo usermod -aG docker $USER
|
||||
newgrp docker
|
||||
|
||||
# Or run with sudo
|
||||
sudo docker-compose up -d
|
||||
```
|
||||
|
||||
## Performance Issues
|
||||
|
||||
### Slow Response Times
|
||||
|
||||
**Symptoms:**
|
||||
- Pages loading slowly (>5 seconds)
|
||||
- API requests timing out
|
||||
- High CPU usage
|
||||
|
||||
**Diagnostics:**
|
||||
```bash
|
||||
# Check system resources
|
||||
top
|
||||
htop
|
||||
iostat -x 1
|
||||
|
||||
# Check application metrics
|
||||
curl https://your-domain.com/metrics
|
||||
```
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Database Optimization:**
|
||||
```sql
|
||||
-- PostgreSQL optimizations
|
||||
ALTER SYSTEM SET shared_buffers = '256MB';
|
||||
ALTER SYSTEM SET effective_cache_size = '1GB';
|
||||
ALTER SYSTEM SET work_mem = '4MB';
|
||||
SELECT pg_reload_conf();
|
||||
```
|
||||
|
||||
2. **Enable Caching:**
|
||||
```env
|
||||
# Redis caching
|
||||
REDIS_URL=redis://localhost:6379
|
||||
CACHE_ENABLED=true
|
||||
CACHE_TTL=3600
|
||||
```
|
||||
|
||||
3. **Increase Resources:**
|
||||
```yaml
|
||||
# docker-compose.yml
|
||||
services:
|
||||
trackkeep:
|
||||
deploy:
|
||||
resources:
|
||||
limits:
|
||||
memory: 1G
|
||||
cpus: '1.0'
|
||||
```
|
||||
|
||||
### High Memory Usage
|
||||
|
||||
**Symptoms:**
|
||||
- Out of memory errors
|
||||
- Container restarts
|
||||
- System swapping
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Monitor Memory Usage:**
|
||||
```bash
|
||||
# Check memory usage
|
||||
docker stats
|
||||
free -h
|
||||
ps aux --sort=-%mem | head
|
||||
```
|
||||
|
||||
2. **Optimize Configuration:**
|
||||
```env
|
||||
# Reduce memory usage
|
||||
GOGC=50
|
||||
GOMAXPROCS=4
|
||||
```
|
||||
|
||||
3. **Add Swap Space:**
|
||||
```bash
|
||||
# Create swap file
|
||||
sudo fallocate -l 2G /swapfile
|
||||
sudo chmod 600 /swapfile
|
||||
sudo mkswap /swapfile
|
||||
sudo swapon /swapfile
|
||||
```
|
||||
|
||||
### Database Slow Queries
|
||||
|
||||
**Symptoms:**
|
||||
- Database queries taking >1 second
|
||||
- High database CPU usage
|
||||
- Timeouts during peak usage
|
||||
|
||||
**Diagnostics:**
|
||||
```sql
|
||||
-- Enable query logging
|
||||
ALTER SYSTEM SET log_min_duration_statement = 1000;
|
||||
ALTER SYSTEM SET log_statement = 'all';
|
||||
SELECT pg_reload_conf();
|
||||
|
||||
-- Find slow queries
|
||||
SELECT query, mean_time, calls
|
||||
FROM pg_stat_statements
|
||||
ORDER BY mean_time DESC
|
||||
LIMIT 10;
|
||||
```
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Add Indexes:**
|
||||
```sql
|
||||
-- Common query indexes
|
||||
CREATE INDEX CONCURRENTLY idx_bookmarks_user_created
|
||||
ON bookmarks(user_id, created_at DESC);
|
||||
|
||||
CREATE INDEX CONCURRENTLY idx_tasks_status_due
|
||||
ON tasks(status, due_date);
|
||||
```
|
||||
|
||||
2. **Optimize Queries:**
|
||||
```sql
|
||||
-- Use EXPLAIN ANALYZE
|
||||
EXPLAIN ANALYZE SELECT * FROM bookmarks WHERE user_id = $1;
|
||||
|
||||
-- Check query plan
|
||||
```
|
||||
|
||||
3. **Connection Pooling:**
|
||||
```env
|
||||
# PgBouncer configuration
|
||||
DATABASE_URL=postgres://trackkeep:pass@localhost:6432/trackkeep
|
||||
```
|
||||
|
||||
## Authentication Issues
|
||||
|
||||
### Login Failures
|
||||
|
||||
**Symptoms:**
|
||||
- "Invalid credentials" error
|
||||
- Cannot log in with correct password
|
||||
- Session expiration issues
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check User Account:**
|
||||
```sql
|
||||
-- Verify user exists
|
||||
SELECT id, email, active FROM users WHERE email = '[email protected]';
|
||||
|
||||
-- Reset password
|
||||
UPDATE users SET password_hash = crypt('new_password', gen_salt('bf'))
|
||||
WHERE email = '[email protected]';
|
||||
```
|
||||
|
||||
2. **Session Configuration:**
|
||||
```env
|
||||
# Session settings
|
||||
SESSION_TIMEOUT=24h
|
||||
SESSION_SECRET=your-secret-key
|
||||
COOKIE_SECURE=true
|
||||
```
|
||||
|
||||
3. **Clear Sessions:**
|
||||
```bash
|
||||
# Clear Redis sessions
|
||||
redis-cli FLUSHDB
|
||||
|
||||
# Or clear specific sessions
|
||||
redis-cli DEL "session:*"
|
||||
```
|
||||
|
||||
### 2FA Issues
|
||||
|
||||
**Symptoms:**
|
||||
- 2FA codes not working
|
||||
- Cannot enable/disable 2FA
|
||||
- Lost 2FA device
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Reset 2FA:**
|
||||
```sql
|
||||
-- Disable 2FA for user
|
||||
UPDATE users SET two_factor_enabled = false, two_factor_secret = NULL
|
||||
WHERE email = '[email protected]';
|
||||
```
|
||||
|
||||
2. **Backup Codes:**
|
||||
```bash
|
||||
# Generate new backup codes
|
||||
trackkeep admin:2fa-backup-codes [email protected]
|
||||
```
|
||||
|
||||
## File Storage Issues
|
||||
|
||||
### Upload Failures
|
||||
|
||||
**Symptoms:**
|
||||
- File upload errors
|
||||
- "File too large" messages
|
||||
- Storage quota exceeded
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check Storage Configuration:**
|
||||
```env
|
||||
# Storage settings
|
||||
STORAGE_TYPE=local
|
||||
STORAGE_PATH=/app/data/files
|
||||
MAX_FILE_SIZE=100MB
|
||||
STORAGE_QUOTA=10GB
|
||||
```
|
||||
|
||||
2. **Check Disk Space:**
|
||||
```bash
|
||||
# Check available space
|
||||
df -h
|
||||
du -sh /app/data/files
|
||||
|
||||
# Clean up old files
|
||||
find /app/data/files -type f -mtime +30 -delete
|
||||
```
|
||||
|
||||
3. **Fix Permissions:**
|
||||
```bash
|
||||
# Fix storage permissions
|
||||
sudo chown -R trackkeep:trackkeep /app/data/files
|
||||
sudo chmod -R 755 /app/data/files
|
||||
```
|
||||
|
||||
### S3/Cloud Storage Issues
|
||||
|
||||
**Symptoms:**
|
||||
- Cannot connect to S3
|
||||
- Upload timeouts
|
||||
- Access denied errors
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Verify Credentials:**
|
||||
```bash
|
||||
# Test S3 connection
|
||||
aws s3 ls s3://your-bucket
|
||||
|
||||
# Check credentials
|
||||
aws configure list
|
||||
```
|
||||
|
||||
2. **Fix Configuration:**
|
||||
```env
|
||||
# S3 settings
|
||||
S3_BUCKET=your-bucket
|
||||
S3_REGION=us-east-1
|
||||
S3_ACCESS_KEY=your-key
|
||||
S3_SECRET_KEY=your-secret
|
||||
S3_ENDPOINT=https://s3.amazonaws.com
|
||||
```
|
||||
|
||||
## Network Issues
|
||||
|
||||
### SSL/TLS Problems
|
||||
|
||||
**Symptoms:**
|
||||
- SSL certificate errors
|
||||
- HTTPS not working
|
||||
- Mixed content warnings
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check Certificate:**
|
||||
```bash
|
||||
# Verify certificate
|
||||
openssl x509 -in /etc/ssl/certs/cert.pem -text -noout
|
||||
|
||||
# Check certificate chain
|
||||
openssl s_client -connect your-domain.com:443
|
||||
```
|
||||
|
||||
2. **Renew Certificate:**
|
||||
```bash
|
||||
# Let's Encrypt renewal
|
||||
sudo certbot renew
|
||||
|
||||
# Force renewal
|
||||
sudo certbot renew --force-renewal
|
||||
```
|
||||
|
||||
3. **Fix Nginx Configuration:**
|
||||
```nginx
|
||||
# Ensure proper SSL settings
|
||||
ssl_certificate /etc/ssl/certs/cert.pem;
|
||||
ssl_certificate_key /etc/ssl/certs/key.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
```
|
||||
|
||||
### CORS Issues
|
||||
|
||||
**Symptoms:**
|
||||
- CORS errors in browser
|
||||
- API requests blocked
|
||||
- Cross-origin errors
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Configure CORS:**
|
||||
```env
|
||||
# CORS settings
|
||||
CORS_ORIGINS=https://your-domain.com,https://app.your-domain.com
|
||||
CORS_METHODS=GET,POST,PUT,DELETE,OPTIONS
|
||||
CORS_HEADERS=Content-Type,Authorization
|
||||
```
|
||||
|
||||
2. **Nginx CORS Headers:**
|
||||
```nginx
|
||||
# Add CORS headers
|
||||
add_header Access-Control-Allow-Origin "https://your-domain.com";
|
||||
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
|
||||
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
|
||||
```
|
||||
|
||||
## Mobile App Issues
|
||||
|
||||
### Sync Problems
|
||||
|
||||
**Symptoms:**
|
||||
- Mobile app not syncing
|
||||
- Data inconsistency
|
||||
- Offline mode issues
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check API Endpoints:**
|
||||
```bash
|
||||
# Test mobile API
|
||||
curl -I https://your-domain.com/api/v1/mobile/status
|
||||
|
||||
# Check mobile configuration
|
||||
curl https://your-domain.com/api/v1/mobile/config
|
||||
```
|
||||
|
||||
2. **Reset Sync:**
|
||||
```bash
|
||||
# Clear mobile sync data
|
||||
redis-cli DEL "mobile_sync:*"
|
||||
|
||||
# Reset user sync
|
||||
trackkeep admin:mobile-sync-reset [email protected]
|
||||
```
|
||||
|
||||
### Push Notifications
|
||||
|
||||
**Symptoms:**
|
||||
- Not receiving notifications
|
||||
- Push token errors
|
||||
- APNS/FCM failures
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check Push Configuration:**
|
||||
```env
|
||||
# Push notification settings
|
||||
FCM_SERVER_KEY=your-fcm-key
|
||||
APNS_KEY_ID=your-apns-key
|
||||
APNS_TEAM_ID=your-team-id
|
||||
```
|
||||
|
||||
2. **Test Push Service:**
|
||||
```bash
|
||||
# Test FCM
|
||||
curl -X POST https://fcm.googleapis.com/fcm/send \
|
||||
-H "Authorization: key=$FCM_SERVER_KEY" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"to":"device_token","notification":{"title":"Test","body":"Test message"}}'
|
||||
```
|
||||
|
||||
## AI Features Issues
|
||||
|
||||
### AI Not Working
|
||||
|
||||
**Symptoms:**
|
||||
- AI features disabled
|
||||
- Slow AI responses
|
||||
- Poor AI quality
|
||||
|
||||
**Solutions:**
|
||||
|
||||
1. **Check AI Configuration:**
|
||||
```env
|
||||
# AI settings
|
||||
AI_PROVIDER=openai
|
||||
OPENAI_API_KEY=your-key
|
||||
OPENAI_MODEL=gpt-3.5-turbo
|
||||
```
|
||||
|
||||
2. **Test AI Service:**
|
||||
```bash
|
||||
# Test AI endpoint
|
||||
curl -X POST https://your-domain.com/api/v1/ai/test \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text":"Test input"}'
|
||||
```
|
||||
|
||||
3. **Local AI Issues:**
|
||||
```bash
|
||||
# Check local AI model
|
||||
trackkeep ai status
|
||||
trackkeep ai test
|
||||
|
||||
# Rebuild AI models
|
||||
trackkeep ai rebuild
|
||||
```
|
||||
|
||||
## Getting Help
|
||||
|
||||
### Support Channels
|
||||
|
||||
1. **Documentation**: [trackkeep.org/docs](https://trackkeep.org/docs)
|
||||
2. **Community**: [discord.gg/trackkeep](https://discord.gg/trackkeep)
|
||||
3. **Issues**: [github.com/Dvorinka/Trackkeep/issues](https://github.com/Dvorinka/Trackkeep/issues)
|
||||
4. **Email**: [[email protected]](mailto:[email protected])
|
||||
|
||||
### Reporting Issues
|
||||
|
||||
When reporting issues, include:
|
||||
|
||||
1. **System Information:**
|
||||
```bash
|
||||
# Generate system report
|
||||
trackkeep doctor --report > system-info.json
|
||||
```
|
||||
|
||||
2. **Logs:**
|
||||
```bash
|
||||
# Application logs
|
||||
docker-compose logs trackkeep --tail=100
|
||||
|
||||
# Database logs
|
||||
docker-compose logs postgres --tail=100
|
||||
```
|
||||
|
||||
3. **Configuration:**
|
||||
```bash
|
||||
# Sanitized configuration
|
||||
trackkeep config show --hide-secrets
|
||||
```
|
||||
|
||||
### Debug Mode
|
||||
|
||||
Enable debug mode for detailed logging:
|
||||
|
||||
```env
|
||||
# Debug settings
|
||||
DEBUG=true
|
||||
LOG_LEVEL=debug
|
||||
LOG_FORMAT=json
|
||||
```
|
||||
|
||||
### Performance Monitoring
|
||||
|
||||
Set up monitoring for proactive issue detection:
|
||||
|
||||
```yaml
|
||||
# monitoring/docker-compose.yml
|
||||
version: '3.8'
|
||||
services:
|
||||
prometheus:
|
||||
image: prom/prometheus
|
||||
ports:
|
||||
- "9090:9090"
|
||||
volumes:
|
||||
- ./prometheus.yml:/etc/prometheus/prometheus.yml
|
||||
|
||||
grafana:
|
||||
image: grafana/grafana
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- GF_SECURITY_ADMIN_PASSWORD=admin
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Still having issues? Don't hesitate to reach out to our [community](https://discord.gg/trackkeep) or create a [GitHub issue](https://github.com/Dvorinka/Trackkeep/issues) with detailed information about your problem.
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"></path></svg>
|
||||
|
After Width: | Height: | Size: 756 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LongCat</title><path clip-rule="evenodd" d="M.507 19.883a.507.507 0 01-.489-.642L4.29 3.745a1.013 1.013 0 011.533-.578l5.622 3.687a1.013 1.013 0 001.11 0L18.2 3.165a1.013 1.013 0 011.532.58l4.25 15.497a.506.506 0 01-.49.64H18.07a6.297 6.297 0 001.53-4.115v-.177a6.09 6.09 0 00-1.513-4.017l-.697-3.495a.438.438 0 00-.694-.266L14.07 9.781a.748.748 0 01-.654.121 5.156 5.156 0 00-2.833 0 .746.746 0 01-.653-.121L7.302 7.81a.435.435 0 00-.688.269l-.675 3.652a5.36 5.36 0 00-1.539 3.76v.333c0 1.474.527 2.9 1.488 4.02l.032.038H.507z" fill="#29E154" fill-rule="evenodd"></path><path fill="#fff" d="M9.213 16.843h1.52v-3.546h-1.29l-.23 3.546zm5.573 0h-1.52v-3.546h1.29l.23 3.546z"></path></svg>
|
||||
|
After Width: | Height: | Size: 832 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Mistral</title><path d="M3.428 3.4h3.429v3.428H3.428V3.4zm13.714 0h3.43v3.428h-3.43V3.4z" fill="gold"></path><path d="M3.428 6.828h6.857v3.429H3.429V6.828zm10.286 0h6.857v3.429h-6.857V6.828z" fill="#FFAF00"></path><path d="M3.428 10.258h17.144v3.428H3.428v-3.428z" fill="#FF8205"></path><path d="M3.428 13.686h3.429v3.428H3.428v-3.428zm6.858 0h3.429v3.428h-3.429v-3.428zm6.856 0h3.43v3.428h-3.43v-3.428z" fill="#FA500F"></path><path d="M0 17.114h10.286v3.429H0v-3.429zm13.714 0H24v3.429H13.714v-3.429z" fill="#E10500"></path></svg>
|
||||
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Ollama</title><path d="M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenRouter</title><path d="M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z"></path></svg>
|
||||
|
After Width: | Height: | Size: 906 B |
@@ -0,0 +1,132 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const { title, description, image = '/og-image.png' } = Astro.props;
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/trackeepfavi.png" />
|
||||
<link rel="apple-touch-icon" href="/trackeepfavi.png" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://trackeep.org/" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={`https://trackeep.org${image}`} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://trackeep.org/" />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={`https://trackeep.org${image}`} />
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" href="/src/styles/global.css" as="style" />
|
||||
<link rel="stylesheet" href="/src/styles/global.css" />
|
||||
|
||||
<!-- Theme color -->
|
||||
<meta name="theme-color" content="#39b9ff" />
|
||||
|
||||
<!-- Preconnect to external domains -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net" />
|
||||
</head>
|
||||
<body class="min-h-screen bg-background font-sans antialiased">
|
||||
<div class="relative overflow-hidden">
|
||||
<!-- Background gradient blobs -->
|
||||
<div class="gradient-blob bg-primary w-96 h-96 -top-48 -right-48"></div>
|
||||
<div class="gradient-blob bg-trackeep-purple w-96 h-96 -bottom-48 -left-48"></div>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="relative z-10">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Dark mode enforcement - no theme toggle -->
|
||||
<script>
|
||||
// Force dark mode
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.style.colorScheme = 'dark';
|
||||
</script>
|
||||
|
||||
<!-- Enhanced interactions script -->
|
||||
<!-- <script src="/src/scripts/enhanced-interactions.js"></script> -->
|
||||
|
||||
<!-- Copy Command Functionality -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const copyButton = document.getElementById('copy-button');
|
||||
const copyIcon = document.getElementById('copy-icon');
|
||||
const checkIcon = document.getElementById('check-icon');
|
||||
const copySuccess = document.getElementById('copy-success');
|
||||
const installCommand = document.getElementById('install-command');
|
||||
|
||||
if (copyButton && installCommand) {
|
||||
copyButton.addEventListener('click', async () => {
|
||||
const command = installCommand.textContent;
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
|
||||
// Show success state
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copySuccess.classList.remove('hidden');
|
||||
|
||||
// Reset after 3 seconds
|
||||
setTimeout(() => {
|
||||
copyIcon.classList.remove('hidden');
|
||||
checkIcon.classList.add('hidden');
|
||||
copySuccess.classList.add('hidden');
|
||||
}, 3000);
|
||||
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = command;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.opacity = '0';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
|
||||
// Show success state
|
||||
copyIcon.classList.add('hidden');
|
||||
checkIcon.classList.remove('hidden');
|
||||
copySuccess.classList.remove('hidden');
|
||||
|
||||
// Reset after 3 seconds
|
||||
setTimeout(() => {
|
||||
copyIcon.classList.remove('hidden');
|
||||
checkIcon.classList.add('hidden');
|
||||
copySuccess.classList.add('hidden');
|
||||
}, 3000);
|
||||
|
||||
} catch (fallbackErr) {
|
||||
console.error('Failed to copy command:', fallbackErr);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'uno.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import HeroSection from '../components/HeroSection.astro';
|
||||
import FeaturesSection from '../components/FeaturesSection.astro';
|
||||
import TechStackSection from '../components/TechStackSection.astro';
|
||||
import DemoSection from '../components/DemoSection.astro';
|
||||
import TestimonialsSection from '../components/TestimonialsSection.astro';
|
||||
import BenefitsSection from '../components/BenefitsSection.astro';
|
||||
import AISection from '../components/AISection.astro';
|
||||
import PrivacySection from '../components/PrivacySection.astro';
|
||||
import MobileSection from '../components/MobileSection.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
|
||||
<Layout title="Trackeep - Your Self-Hosted Productivity & Knowledge Hub" description="Track, save, and organize everything that matters to you. Self-hosted, privacy-first, and AI-powered productivity hub.">
|
||||
<Navigation />
|
||||
<HeroSection />
|
||||
|
||||
<!-- Modern Copy Command Section -->
|
||||
<section class="py-16 lg:py-24 bg-gradient-to-b from-background via-card/20 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-5"></div>
|
||||
|
||||
<!-- Minimal particle field -->
|
||||
<div class="particle-field">
|
||||
<div class="particle" style="left: 20%; animation-delay: 0s; animation-duration: 20s;"></div>
|
||||
<div class="particle" style="left: 50%; animation-delay: 2s; animation-duration: 23s;"></div>
|
||||
<div class="particle" style="left: 80%; animation-delay: 1s; animation-duration: 21s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
|
||||
<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-primary">Quick Start</span>
|
||||
</div>
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-foreground mb-4">
|
||||
Get Started in <span class="gradient-text">Seconds</span>
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
One command is all it takes to deploy Trackeep on your own infrastructure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Terminal Box with Copy Functionality -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="terminal-box rounded-3xl border-2 border-border/30 shadow-2xl hover:shadow-glow transition-all duration-300 group">
|
||||
<!-- Terminal Header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-border/20">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors cursor-pointer"></div>
|
||||
<div class="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors cursor-pointer"></div>
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors cursor-pointer"></div>
|
||||
<span class="ml-4 text-sm text-muted-foreground font-mono">terminal</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs text-muted-foreground font-mono">bash</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Content -->
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4 flex-1">
|
||||
<span class="text-green-400 font-mono text-sm">$</span>
|
||||
<code id="install-command" class="text-foreground font-mono text-lg flex-1">
|
||||
git clone https://github.com/Dvorinka/Trackeep.git && cd Trackeep && ./start.sh
|
||||
</code>
|
||||
</div>
|
||||
<button
|
||||
id="copy-button"
|
||||
class="ml-4 p-3 rounded-xl bg-trackeep-blue/10 hover:bg-trackeep-blue/20 text-trackeep-blue transition-all duration-300 group hover:scale-110 border border-trackeep-blue/20"
|
||||
aria-label="Copy command"
|
||||
>
|
||||
<svg id="copy-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<svg id="check-icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div id="copy-success" class="hidden mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-xl">
|
||||
<p class="text-green-400 text-sm font-medium flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
Command copied to clipboard!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<div class="mt-8 text-center">
|
||||
<p class="text-muted-foreground mb-4">
|
||||
Or if you prefer Docker Compose:
|
||||
</p>
|
||||
<div class="inline-flex items-center space-x-4 text-sm">
|
||||
<code class="bg-muted/50 px-3 py-2 rounded-lg font-mono">docker compose up -d</code>
|
||||
<span class="text-muted-foreground">•</span>
|
||||
<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="text-trackeep-blue hover:text-trackkeep-blue/80 transition-colors font-medium">
|
||||
Try Live Demo →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demo Screenshots Section -->
|
||||
<section id="screenshots" class="py-24 lg:py-40 bg-gradient-to-b from-background via-card/20 to-background relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-3"></div>
|
||||
|
||||
<!-- Minimal particle field -->
|
||||
<div class="particle-field">
|
||||
<div class="particle" style="left: 15%; animation-delay: 1s; animation-duration: 22s;"></div>
|
||||
<div class="particle" style="left: 45%; animation-delay: 3s; animation-duration: 20s;"></div>
|
||||
<div class="particle" style="left: 75%; animation-delay: 2s; animation-duration: 24s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-20">
|
||||
<div class="inline-flex items-center px-6 py-3 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
|
||||
<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
|
||||
<span class="text-sm font-semibold text-primary">Visual Tour</span>
|
||||
</div>
|
||||
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
|
||||
<span class="block">See Trackeep in</span>
|
||||
<span class="gradient-text">Action</span>
|
||||
</h2>
|
||||
<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
Explore the clean, intuitive interface that makes organizing your digital life a breeze
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Screenshots Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="group">
|
||||
<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
|
||||
Clean & Minimal Design
|
||||
</h3>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Inspired by the best productivity apps, Trackeep puts your content first with a distraction-free interface that's beautiful and functional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
|
||||
Dark Mode Ready
|
||||
</h3>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Beautiful dark theme that's easy on the eyes. Perfect for late-night work sessions and reducing eye strain.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
|
||||
Responsive & Fast
|
||||
</h3>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Built with modern web technologies for lightning-fast performance across all your devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-4">
|
||||
<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
|
||||
<img src="/image.png" alt="Trackeep Dashboard" class="w-full h-auto object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||
<span class="text-white font-semibold">Main Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
|
||||
<img src="/image copy.png" alt="Trackeep Bookmarks" class="w-full h-auto object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||
<span class="text-white font-semibold">Bookmarks View</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4 mt-8">
|
||||
<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
|
||||
<img src="/image copy 2.png" alt="Trackeep Tasks" class="w-full h-auto object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||
<span class="text-white font-semibold">Task Management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
|
||||
<img src="/image copy 3.png" alt="Trackeep Files" class="w-full h-auto object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||
<span class="text-white font-semibold">File Storage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<FeaturesSection />
|
||||
<AISection />
|
||||
<PrivacySection />
|
||||
<MobileSection />
|
||||
<BenefitsSection />
|
||||
<TechStackSection />
|
||||
<DemoSection />
|
||||
<TestimonialsSection />
|
||||
<Footer />
|
||||
</Layout>
|
||||
@@ -1,14 +0,0 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('./views/Home.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,222 @@
|
||||
// Enhanced parallax and micro-interactions for Trackeep landing page
|
||||
|
||||
class ParallaxController {
|
||||
constructor() {
|
||||
this.elements = [];
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Find all parallax elements
|
||||
this.elements = document.querySelectorAll('[data-speed]');
|
||||
|
||||
// Add scroll listener
|
||||
window.addEventListener('scroll', () => this.handleScroll());
|
||||
|
||||
// Initial update
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
handleScroll() {
|
||||
const scrolled = window.pageYOffset;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
this.elements.forEach(element => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const elementTop = rect.top + scrolled;
|
||||
const elementHeight = rect.height;
|
||||
|
||||
// Only apply parallax if element is in view
|
||||
if (elementTop < scrolled + windowHeight && elementTop + elementHeight > scrolled) {
|
||||
const speed = parseFloat(element.dataset.speed) || 0.5;
|
||||
const yPos = -(scrolled * speed);
|
||||
|
||||
element.style.transform = `translate3d(0, ${yPos}px, 0)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class MagneticButtons {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const buttons = document.querySelectorAll('.magnetic-button');
|
||||
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('mousemove', (e) => this.handleMouseMove(e, button));
|
||||
button.addEventListener('mouseleave', (e) => this.handleMouseLeave(e, button));
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseMove(e, button) {
|
||||
const rect = button.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left - rect.width / 2;
|
||||
const y = e.clientY - rect.top - rect.height / 2;
|
||||
|
||||
const distance = Math.sqrt(x * x + y * y);
|
||||
const maxDistance = Math.max(rect.width, rect.height) / 2;
|
||||
|
||||
if (distance < maxDistance) {
|
||||
const strength = (maxDistance - distance) / maxDistance;
|
||||
const moveX = (x / maxDistance) * strength * 10;
|
||||
const moveY = (y / maxDistance) * strength * 10;
|
||||
|
||||
button.style.transform = `translate(${moveX}px, ${moveY}px) scale(1.05)`;
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave(e, button) {
|
||||
button.style.transform = 'translate(0, 0) scale(1)';
|
||||
}
|
||||
}
|
||||
|
||||
class ScrollReveal {
|
||||
constructor() {
|
||||
this.elements = [];
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.elements = document.querySelectorAll('.scroll-reveal');
|
||||
|
||||
// Initial check
|
||||
this.checkElements();
|
||||
|
||||
// Add scroll listener
|
||||
window.addEventListener('scroll', () => this.checkElements(), { passive: true });
|
||||
|
||||
// Add resize listener
|
||||
window.addEventListener('resize', () => this.checkElements());
|
||||
}
|
||||
|
||||
checkElements() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const triggerBottom = windowHeight * 0.85;
|
||||
|
||||
this.elements.forEach(element => {
|
||||
const elementTop = element.getBoundingClientRect().top;
|
||||
|
||||
if (elementTop < triggerBottom) {
|
||||
element.classList.add('revealed');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class SmoothScroll {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Add smooth scroll behavior for anchor links
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.tagName === 'A' && e.target.hash) {
|
||||
const target = document.querySelector(e.target.hash);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
this.scrollToElement(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
scrollToElement(element) {
|
||||
const headerOffset = 80; // Account for fixed header
|
||||
const elementPosition = element.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ParticleAnimation {
|
||||
constructor() {
|
||||
this.particles = [];
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const particleFields = document.querySelectorAll('.particle-field');
|
||||
|
||||
particleFields.forEach(field => {
|
||||
this.createParticles(field);
|
||||
});
|
||||
}
|
||||
|
||||
createParticles(field) {
|
||||
const particleCount = 20;
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'particle';
|
||||
particle.style.left = Math.random() * 100 + '%';
|
||||
particle.style.animationDelay = Math.random() * 10 + 's';
|
||||
particle.style.animationDuration = (10 + Math.random() * 10) + 's';
|
||||
|
||||
field.appendChild(particle);
|
||||
this.particles.push(particle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ThemeEnhancer {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Add enhanced theme transitions
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.body.style.transition = 'background-color 0.3s ease, color 0.3s ease';
|
||||
setTimeout(() => {
|
||||
document.body.style.transition = '';
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all controllers when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new ParallaxController();
|
||||
new MagneticButtons();
|
||||
new ScrollReveal();
|
||||
new SmoothScroll();
|
||||
new ParticleAnimation();
|
||||
new ThemeEnhancer();
|
||||
|
||||
// Add loading animation removal
|
||||
setTimeout(() => {
|
||||
document.body.classList.add('loaded');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Add intersection observer for better performance
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all scroll-reveal elements
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const revealElements = document.querySelectorAll('.scroll-reveal');
|
||||
revealElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
@@ -0,0 +1,124 @@
|
||||
// Scroll progress indicator
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Create progress bar
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.id = 'scroll-progress';
|
||||
progressBar.className = 'fixed top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-trackeep-purple transform-origin-left z-50 transition-transform duration-150';
|
||||
progressBar.style.transform = 'scaleX(0)';
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
// Update progress on scroll
|
||||
const updateProgress = () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const progress = scrollTop / scrollHeight;
|
||||
progressBar.style.transform = `scaleX(${progress})`;
|
||||
};
|
||||
|
||||
// Throttled scroll handler
|
||||
let ticking = false;
|
||||
const requestTick = () => {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(updateProgress);
|
||||
ticking = true;
|
||||
setTimeout(() => { ticking = false; }, 16);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', requestTick, { passive: true });
|
||||
|
||||
// Hide progress bar when at top
|
||||
const toggleVisibility = () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
if (scrollTop === 0) {
|
||||
progressBar.style.opacity = '0';
|
||||
} else {
|
||||
progressBar.style.opacity = '1';
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', toggleVisibility, { passive: true });
|
||||
toggleVisibility(); // Initial state
|
||||
});
|
||||
|
||||
// Enhanced smooth scrolling for anchor links
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const links = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const targetId = link.getAttribute('href').substring(1);
|
||||
const targetElement = document.getElementById(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
const offsetTop = targetElement.offsetTop - 80; // Account for fixed header
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add hover effect to cards with 3D tilt
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const cards = document.querySelectorAll('.feature-card, .card-papra');
|
||||
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = (y - centerY) / 10;
|
||||
const rotateY = (centerX - x) / 10;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add typing effect to hero section
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const heroTitle = document.querySelector('h1 .gradient-text');
|
||||
if (!heroTitle) return;
|
||||
|
||||
const text = heroTitle.textContent;
|
||||
heroTitle.textContent = '';
|
||||
heroTitle.style.borderRight = '3px solid hsl(var(--primary))';
|
||||
heroTitle.style.animation = 'blink 1s infinite';
|
||||
|
||||
let index = 0;
|
||||
const typeWriter = () => {
|
||||
if (index < text.length) {
|
||||
heroTitle.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeWriter, 100);
|
||||
} else {
|
||||
heroTitle.style.borderRight = 'none';
|
||||
heroTitle.style.animation = '';
|
||||
}
|
||||
};
|
||||
|
||||
// Start typing after page load
|
||||
setTimeout(typeWriter, 500);
|
||||
});
|
||||
|
||||
// Add blink animation for typing cursor
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes blink {
|
||||
0%, 50% { border-color: hsl(var(--primary)); }
|
||||
51%, 100% { border-color: transparent; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
@@ -0,0 +1,242 @@
|
||||
// Parallax scrolling effect for gradient blobs
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const blobs = document.querySelectorAll('.parallax-slow');
|
||||
const heroSection = document.querySelector('section');
|
||||
|
||||
if (!blobs.length || !heroSection) return;
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrolled = window.pageYOffset;
|
||||
const rate = scrolled * -0.5;
|
||||
|
||||
blobs.forEach((blob, index) => {
|
||||
const speed = 0.5 + (index * 0.1);
|
||||
const yPos = -(scrolled * speed);
|
||||
blob.style.transform = `translateY(${yPos}px)`;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
const mouseX = e.clientX / window.innerWidth - 0.5;
|
||||
const mouseY = e.clientY / window.innerHeight - 0.5;
|
||||
|
||||
blobs.forEach((blob, index) => {
|
||||
const speed = 20 + (index * 10);
|
||||
const x = mouseX * speed;
|
||||
const y = mouseY * speed;
|
||||
blob.style.transform = `translate(${x}px, ${y}px)`;
|
||||
});
|
||||
};
|
||||
|
||||
// Add scroll listener with throttling
|
||||
let ticking = false;
|
||||
const requestTick = () => {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(handleScroll);
|
||||
ticking = true;
|
||||
setTimeout(() => { ticking = false; }, 16);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', requestTick, { passive: true });
|
||||
|
||||
// Add mouse movement listener for subtle parallax
|
||||
window.addEventListener('mousemove', handleMouseMove, { passive: true });
|
||||
|
||||
// Reset blob positions on mouse leave
|
||||
document.addEventListener('mouseleave', () => {
|
||||
blobs.forEach(blob => {
|
||||
blob.style.transform = 'translate(0, 0)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scroll reveal animation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all scroll-reveal elements
|
||||
document.querySelectorAll('.scroll-reveal').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
|
||||
// Enhanced copy functionality with visual feedback
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const copyButton = document.getElementById('copy-button');
|
||||
const copyIcon = document.getElementById('copy-icon');
|
||||
const checkIcon = document.getElementById('check-icon');
|
||||
const copyText = document.getElementById('copy-text');
|
||||
const command = 'curl -sSL https://trackeep.org/install.sh | sh';
|
||||
|
||||
if (!copyButton) return;
|
||||
|
||||
copyButton.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(command);
|
||||
|
||||
// Show success state with enhanced animation
|
||||
copyIcon?.classList.add('hidden');
|
||||
checkIcon?.classList.remove('hidden');
|
||||
copyText.textContent = 'Copied!';
|
||||
copyButton.classList.add('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50', 'scale-110');
|
||||
copyButton.classList.remove('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
|
||||
|
||||
// Add success pulse effect
|
||||
copyButton.style.animation = 'pulse 0.5s ease-in-out';
|
||||
|
||||
// Reset after 2 seconds
|
||||
setTimeout(() => {
|
||||
copyIcon?.classList.remove('hidden');
|
||||
checkIcon?.classList.add('hidden');
|
||||
copyText.textContent = 'Copy';
|
||||
copyButton.classList.remove('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50', 'scale-110');
|
||||
copyButton.classList.add('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
|
||||
copyButton.style.animation = '';
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
|
||||
// Show error state
|
||||
copyText.textContent = 'Failed';
|
||||
copyButton.classList.add('bg-red-600/50', 'border-red-500/50');
|
||||
|
||||
setTimeout(() => {
|
||||
copyText.textContent = 'Copy';
|
||||
copyButton.classList.remove('bg-red-600/50', 'border-red-500/50');
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Theme toggle functionality
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
if (!themeToggle) return;
|
||||
|
||||
// Get current theme
|
||||
const currentTheme = localStorage.getItem('theme') || 'system';
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
// Set initial theme
|
||||
if (currentTheme === 'dark' || (currentTheme === 'system' && systemPrefersDark)) {
|
||||
html.classList.add('dark');
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const isDark = html.classList.toggle('dark');
|
||||
const newTheme = isDark ? 'dark' : 'light';
|
||||
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
// Add animation class
|
||||
themeToggle.style.animation = 'rotate 0.3s ease-in-out';
|
||||
setTimeout(() => {
|
||||
themeToggle.style.animation = '';
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Listen for system theme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||
const currentTheme = localStorage.getItem('theme') || 'system';
|
||||
if (currentTheme === 'system') {
|
||||
html.classList.toggle('dark', e.matches);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu functionality
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
if (!mobileMenuButton || !mobileMenu) return;
|
||||
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
const isHidden = mobileMenu.classList.contains('hidden');
|
||||
|
||||
if (isHidden) {
|
||||
mobileMenu.classList.remove('hidden');
|
||||
mobileMenu.classList.add('animate-slide-up');
|
||||
mobileMenuButton.style.animation = 'rotate 0.3s ease-in-out';
|
||||
} else {
|
||||
mobileMenu.classList.add('hidden');
|
||||
mobileMenu.classList.remove('animate-slide-up');
|
||||
mobileMenuButton.style.animation = 'rotate-reverse 0.3s ease-in-out';
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
mobileMenuButton.style.animation = '';
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on links
|
||||
mobileMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
mobileMenu.classList.remove('animate-slide-up');
|
||||
});
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
|
||||
mobileMenu.classList.add('hidden');
|
||||
mobileMenu.classList.remove('animate-slide-up');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add loading animation for page load
|
||||
window.addEventListener('load', () => {
|
||||
document.body.classList.add('loaded');
|
||||
});
|
||||
|
||||
// Performance optimization: Debounce scroll events
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Add CSS for additional animations
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(180deg); }
|
||||
}
|
||||
|
||||
@keyframes rotate-reverse {
|
||||
from { transform: rotate(180deg); }
|
||||
to { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
body:not(.loaded) * {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
body.loaded * {
|
||||
animation-play-state: running !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
@@ -0,0 +1,670 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('https://fonts.bunny.net/inter/files/inter-greek-400-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('https://fonts.bunny.net/inter/files/inter-greek-500-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('https://fonts.bunny.net/inter/files/inter-greek-600-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('https://fonts.bunny.net/inter/files/inter-greek-700-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Dark Mode Only - Project Colors */
|
||||
--background: 15 15 15;
|
||||
--foreground: 250 250 250;
|
||||
--card: 20 20 20;
|
||||
--card-foreground: 250 250 250;
|
||||
--popover: 20 20 20;
|
||||
--popover-foreground: 250 250 250;
|
||||
--primary: 57 185 255;
|
||||
--primary-foreground: 250 250 250;
|
||||
--secondary: 30 30 30;
|
||||
--secondary-foreground: 250 250 250;
|
||||
--muted: 30 30 30;
|
||||
--muted-foreground: 200 200 200;
|
||||
--accent: 30 30 30;
|
||||
--accent-foreground: 250 250 250;
|
||||
--destructive: 239 68 68;
|
||||
--destructive-foreground: 250 250 250;
|
||||
--border: 30 30 30;
|
||||
--input: 30 30 30;
|
||||
--ring: 57 185 255;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom Trackeep Colors - Simplified */
|
||||
--trackeep-blue: 57 185 255;
|
||||
--trackkeep-blue: 57 185 255;
|
||||
--trackkeep-purple: 168 85 247;
|
||||
--trackkeep-green: 34 197 94;
|
||||
--trackkeep-orange: 251 146 60;
|
||||
}
|
||||
|
||||
/* Force dark mode */
|
||||
html, body {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-input hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background;
|
||||
}
|
||||
|
||||
.card-papra {
|
||||
@apply rounded-xl border bg-card/80 text-card-foreground shadow-lg backdrop-blur-sm;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-papra:hover {
|
||||
@apply shadow-xl border-primary/30;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.nav-item-papra {
|
||||
@apply text-sm font-medium transition-colors hover:text-primary;
|
||||
}
|
||||
|
||||
.gradient-blob {
|
||||
@apply absolute rounded-full blur-3xl opacity-30;
|
||||
animation: blob 8s infinite;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
.terminal-box {
|
||||
@apply bg-gray-900 text-gray-100 font-mono text-sm rounded-xl p-6 border border-gray-700/50 shadow-2xl;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
@apply bg-card/80 border border-border/50 rounded-2xl p-8 hover-lift group relative overflow-hidden backdrop-blur-sm;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-trackeep-purple/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
@apply border-primary/40 shadow-2xl;
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--card)) 100%);
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
@apply relative overflow-hidden bg-gradient-to-r from-primary to-trackeep-blue text-primary-foreground px-10 py-5 rounded-2xl font-bold text-xl hover-lift group shadow-lg;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.cta-button::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
@apply shadow-2xl shadow-glow;
|
||||
transform: translateY(-4px) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Main color utilities only */
|
||||
.text-primary {
|
||||
color: rgb(var(--trackkeep-blue));
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: rgb(var(--trackkeep-blue));
|
||||
}
|
||||
|
||||
/* Simple shadow utilities */
|
||||
.shadow-glow {
|
||||
box-shadow: 0 0 20px rgba(var(--trackkeep-blue), 0.2);
|
||||
}
|
||||
|
||||
/* Border utilities */
|
||||
.border-primary {
|
||||
border-color: rgb(var(--trackkeep-blue));
|
||||
}
|
||||
|
||||
/* Clean animations */
|
||||
.animate-float {
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-slow {
|
||||
animation: float 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-reverse {
|
||||
animation: float-reverse 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Clean text effect */
|
||||
.text-gradient {
|
||||
color: rgb(var(--trackkeep-blue));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Simple card styles */
|
||||
.feature-card {
|
||||
background: rgba(var(--card), 0.3);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(var(--border), 0.4);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(var(--trackkeep-blue), 0.3);
|
||||
}
|
||||
|
||||
/* Simple button styles */
|
||||
.btn-primary {
|
||||
background: rgb(var(--trackkeep-blue));
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(var(--trackkeep-blue), 0.3);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: rgb(var(--trackkeep-blue));
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid rgb(var(--trackkeep-blue));
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(var(--trackkeep-blue), 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Simple glass effect */
|
||||
.glass-effect {
|
||||
background: rgba(var(--card), 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(var(--border), 0.3);
|
||||
}
|
||||
|
||||
/* Simple terminal styling */
|
||||
.terminal-box {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid rgba(var(--trackkeep-blue), 0.3);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grid pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(rgba(var(--trackkeep-blue), 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(var(--trackkeep-blue), 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
.bg-grid-48 {
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
/* Simple particle system */
|
||||
.particle-field {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgb(var(--trackkeep-blue));
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
animation: particle-float 20s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
@layer keyframes {
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.3));
|
||||
}
|
||||
to {
|
||||
filter: drop-shadow(0 0 20px hsl(var(--primary) / 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blob {
|
||||
0% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(30px, -50px) scale(1.1);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-20px, 20px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0px, 0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px hsl(var(--primary) / 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0%, 100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
50% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes staggerFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particleFloat {
|
||||
0% {
|
||||
transform: translateY(100vh) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float {
|
||||
0% {
|
||||
transform: translateY(100vh) translateX(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(75vh) translateX(20px) rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(50vh) translateX(-10px) rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(25vh) translateX(15px) rotate(270deg);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) translateX(5px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes morph {
|
||||
0%, 100% {
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
|
||||
transform: scale(1.1) rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
|
||||
transform: scale(0.9) rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
border-radius: 40% 70% 60% 30% / 70% 40% 30% 60%;
|
||||
transform: scale(1.05) rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes morphReverse {
|
||||
0%, 100% {
|
||||
border-radius: 30% 70% 40% 60% / 70% 30% 60% 40%;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
border-radius: 60% 40% 70% 30% / 40% 70% 30% 60%;
|
||||
transform: scale(0.9) rotate(-90deg);
|
||||
}
|
||||
50% {
|
||||
border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
|
||||
transform: scale(1.1) rotate(-180deg);
|
||||
}
|
||||
75% {
|
||||
border-radius: 70% 30% 60% 40% / 30% 60% 40% 70%;
|
||||
transform: scale(0.95) rotate(-270deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particleTrail {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
25% {
|
||||
transform: translate(20px, -15px) scale(1.2);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-10px, -30px) scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
transform: translate(-25px, -10px) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particleTrailReverse {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
25% {
|
||||
transform: translate(-20px, 15px) scale(1.2);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: translate(10px, 30px) scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
transform: translate(25px, 10px) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinSlow {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowBorder {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 10px hsl(var(--primary) / 0.3), inset 0 0 10px hsl(var(--primary) / 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 25px hsl(var(--primary) / 0.6), inset 0 0 20px hsl(var(--primary) / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseBorder {
|
||||
0%, 100% {
|
||||
border-color: hsl(var(--primary) / 0.5);
|
||||
box-shadow: 0 0 15px hsl(var(--primary) / 0.3);
|
||||
}
|
||||
50% {
|
||||
border-color: hsl(var(--primary) / 0.8);
|
||||
box-shadow: 0 0 30px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textGlow {
|
||||
from {
|
||||
text-shadow: 0 0 10px hsl(var(--primary) / 0.3);
|
||||
filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.3));
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 20px hsl(var(--primary) / 0.6);
|
||||
filter: drop-shadow(0 0 20px hsl(var(--primary) / 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes borderFlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradientText {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes textMorph {
|
||||
0%, 100% {
|
||||
letter-spacing: 0.02em;
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
letter-spacing: 0.05em;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
50% {
|
||||
letter-spacing: 0.01em;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
75% {
|
||||
letter-spacing: 0.03em;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wordSlide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wordBounce {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.8);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
/* Trackkeep Starlight Custom Styles */
|
||||
|
||||
:root {
|
||||
--sl-color-accent-low: #5BC4F220;
|
||||
--sl-color-accent: #5BC4F2;
|
||||
--sl-color-accent-high: #5BC4F2;
|
||||
--sl-color-text-accent: #5BC4F2;
|
||||
|
||||
--sl-color-bg-sidebar: #1a1a1a;
|
||||
--sl-color-bg-sidebar-mobile: #1a1a1a;
|
||||
--sl-color-text-sidebar: #fafafa;
|
||||
--sl-color-text-sidebar-secondary: #a3a3a3;
|
||||
|
||||
--sl-color-bg-code: #0d1117;
|
||||
--sl-color-text-code: #e6edf3;
|
||||
|
||||
--sl-hue: 200;
|
||||
--sl-font-normal: 400;
|
||||
--sl-font-medium: 500;
|
||||
--sl-font-semibold: 600;
|
||||
--sl-font-bold: 700;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
[data-theme='dark'] {
|
||||
--sl-color-bg: #0a0a0a;
|
||||
--sl-color-bg-nav: #1a1a1a;
|
||||
--sl-color-bg-panel: #1a1a1a;
|
||||
--sl-color-bg-inline-code: #1a1a1a;
|
||||
--sl-color-bg-hairline: #262626;
|
||||
--sl-color-bg-scrollbar-thumb: #262626;
|
||||
--sl-color-bg-scrollbar-thumb-hover: #393942;
|
||||
--sl-color-text: #fafafa;
|
||||
--sl-color-text-secondary: #a3a3a3;
|
||||
--sl-color-text-hairline: #393942;
|
||||
}
|
||||
|
||||
/* Light mode overrides */
|
||||
[data-theme='light'] {
|
||||
--sl-color-bg: #ffffff;
|
||||
--sl-color-bg-nav: #fafafa;
|
||||
--sl-color-bg-panel: #ffffff;
|
||||
--sl-color-bg-inline-code: #f1f5f9;
|
||||
--sl-color-bg-hairline: #e2e8f0;
|
||||
--sl-color-bg-scrollbar-thumb: #e2e8f0;
|
||||
--sl-color-bg-scrollbar-thumb-hover: #cbd5e1;
|
||||
--sl-color-text: #0a0a0a;
|
||||
--sl-color-text-secondary: #64748b;
|
||||
--sl-color-text-hairline: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Custom component styles */
|
||||
.starlight-aside--tip {
|
||||
--sl-color-aside-bg: #5BC4F210;
|
||||
--sl-color-aside-text: #5BC4F2;
|
||||
--sl-color-aside-border: #5BC4F230;
|
||||
}
|
||||
|
||||
.starlight-aside--note {
|
||||
--sl-color-aside-bg: #3b82f610;
|
||||
--sl-color-aside-text: #3b82f6;
|
||||
--sl-color-aside-border: #3b82f630;
|
||||
}
|
||||
|
||||
.starlight-aside--caution {
|
||||
--sl-color-aside-bg: #f59e0b10;
|
||||
--sl-color-aside-text: #f59e0b;
|
||||
--sl-color-aside-border: #f59e0b30;
|
||||
}
|
||||
|
||||
.starlight-aside--danger {
|
||||
--sl-color-aside-bg: #ef444410;
|
||||
--sl-color-aside-text: #ef4444;
|
||||
--sl-color-aside-border: #ef444430;
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.starlight-aside--tip pre,
|
||||
.starlight-aside--tip code {
|
||||
--sl-color-bg-code: #5BC4F210;
|
||||
--sl-color-text-code: #5BC4F2;
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
table {
|
||||
--sl-color-bg-table-head: #5BC4F210;
|
||||
--sl-color-text-table-head: #5BC4F2;
|
||||
--sl-color-bg-table-row-stripe: #f8fafc;
|
||||
}
|
||||
|
||||
[data-theme='dark'] table {
|
||||
--sl-color-bg-table-row-stripe: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Custom button styles */
|
||||
.starlight-cta {
|
||||
background: linear-gradient(135deg, #5BC4F2, #0ea5e9);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.starlight-cta:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px -5px #5BC4F240;
|
||||
}
|
||||
|
||||
/* Search bar styling */
|
||||
.starlight-search {
|
||||
--sl-color-search-bg: #f1f5f9;
|
||||
--sl-color-search-text: #0a0a0a;
|
||||
--sl-color-search-placeholder: #64748b;
|
||||
--sl-color-search-border: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .starlight-search {
|
||||
--sl-color-search-bg: #1a1a1a;
|
||||
--sl-color-search-text: #fafafa;
|
||||
--sl-color-search-placeholder: #a3a3a3;
|
||||
--sl-color-search-border: #393942;
|
||||
}
|
||||
|
||||
/* Sidebar link hover effects */
|
||||
.sidebar a:hover {
|
||||
background: #5BC4F210;
|
||||
color: #5BC4F2;
|
||||
}
|
||||
|
||||
/* Pagination styling */
|
||||
.pagination-links a {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
|
||||
.pagination-links a:hover {
|
||||
border-color: #5BC4F2;
|
||||
background: #5BC4F210;
|
||||
color: #5BC4F2;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .pagination-links a {
|
||||
border-color: #393942;
|
||||
background: #1a1a1a;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .pagination-links a:hover {
|
||||
border-color: #5BC4F2;
|
||||
background: #5BC4F210;
|
||||
color: #5BC4F2;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
[data-theme='dark'] ::-webkit-scrollbar-thumb {
|
||||
background: #393942;
|
||||
}
|
||||
|
||||
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
|
||||
background: #52525b;
|
||||
}
|
||||
@@ -1,448 +0,0 @@
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative py-24 lg:py-32 bg-gradient-to-br from-white via-gray-50 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center">
|
||||
<!-- Left Content -->
|
||||
<div class="text-center lg:text-left space-y-8">
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-5xl lg:text-7xl font-bold text-gray-900 dark:text-gray-100 leading-tight tracking-tight">
|
||||
Your Self-Hosted
|
||||
<span class="text-primary">Productivity</span>
|
||||
<br class="hidden lg:block" />
|
||||
& <span class="text-primary">Knowledge</span> Hub
|
||||
</h1>
|
||||
|
||||
<p class="text-xl lg:text-2xl text-gray-600 dark:text-gray-400 leading-relaxed text-pretty max-w-2xl">
|
||||
Track, save, and organize everything that matters to you — all in one place, under your control.
|
||||
No subscriptions, no data mining, just pure productivity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick Install Component -->
|
||||
<QuickInstall class="scale-95 lg:scale-100" />
|
||||
|
||||
<!-- Feature Highlights -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8">
|
||||
<div class="text-center lg:text-left group">
|
||||
<div class="flex items-center justify-center lg:justify-start mb-3">
|
||||
<div class="bg-primary/10 text-primary p-3 rounded-xl group-hover:bg-primary/20 transition-papra">
|
||||
<i class="ph ph-lock-simple text-2xl"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 ml-3">Privacy First</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">Your data stays yours</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center lg:text-left group">
|
||||
<div class="flex items-center justify-center lg:justify-start mb-3">
|
||||
<div class="bg-primary/10 text-primary p-3 rounded-xl group-hover:bg-primary/20 transition-papra">
|
||||
<i class="ph ph-code text-2xl"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 ml-3">Open Source</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">Transparent & customizable</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center lg:text-left group">
|
||||
<div class="flex items-center justify-center lg:justify-start mb-3">
|
||||
<div class="bg-primary/10 text-primary p-3 rounded-xl group-hover:bg-primary/20 transition-papra">
|
||||
<i class="ph ph-devices text-2xl"></i>
|
||||
</div>
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 ml-3">All-in-One</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">Replace multiple apps</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-8">
|
||||
<a href="#features" @click="(e) => handleCTAClick(e, 'features')" class="btn-primary text-center">
|
||||
Explore Features
|
||||
</a>
|
||||
<a href="https://demo.trackeep.org" target="_blank" class="btn-outline text-center">
|
||||
View Demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Content - Hero Image -->
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-strong">
|
||||
<img
|
||||
src="/hero-dashboard.png"
|
||||
alt="Trackeep Dashboard"
|
||||
class="w-full h-auto transform hover:scale-105 transition-papra duration-700"
|
||||
@error="(e: Event) => { const target = e.target as HTMLImageElement; target.style.display='none'; heroImageError = true }"
|
||||
/>
|
||||
<!-- Placeholder if image fails to load -->
|
||||
<div v-if="heroImageError" class="bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 border border-gray-200 dark:border-gray-600 rounded-3xl p-16 min-h-[500px] flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<i class="ph ph-monitor text-8xl text-primary mb-6"></i>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 font-medium">Dashboard Preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating badges -->
|
||||
<div class="absolute -top-6 -right-6 bg-primary text-white px-6 py-3 rounded-2xl font-bold shadow-strong transform rotate-3">
|
||||
v1.0.0
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-white dark:bg-gray-900 border-2 border-gray-200 dark:border-gray-700 px-6 py-3 rounded-2xl font-bold shadow-strong transform -rotate-3">
|
||||
<i class="ph ph-star-fill text-yellow-500 mr-2"></i>
|
||||
4.9/5 Rating
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-24 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
|
||||
<div class="text-center mb-20">
|
||||
<h2 class="text-4xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-8 leading-tight tracking-tight">
|
||||
Everything You Need to Stay
|
||||
<span class="text-primary">Organized</span>
|
||||
</h2>
|
||||
<p class="text-xl lg:text-2xl text-gray-600 dark:text-gray-400 leading-relaxed text-pretty max-w-4xl mx-auto">
|
||||
Trackeep combines all your productivity tools into one seamless experience with powerful features designed for modern workflows
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon="ph ph-bookmark-simple"
|
||||
title="Bookmarks & Links"
|
||||
description="Save and categorize web content with smart tags, powerful search, and automatic organization"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon="ph ph-check-square"
|
||||
title="Task Management"
|
||||
description="Plan and track your to-dos with customizable workflows, due dates, and priority levels"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon="ph ph-folder-simple"
|
||||
title="File Storage"
|
||||
description="Upload and organize documents with version control, sharing, and advanced search"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon="ph ph-sparkle"
|
||||
title="AI-Powered"
|
||||
description="Smart recommendations and automated organization with optional AI features"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon="ph ph-shield-check"
|
||||
title="Privacy First"
|
||||
description="Self-hosted and secure with end-to-end encryption and complete data control"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon="ph ph-device-mobile"
|
||||
title="Mobile App"
|
||||
description="Native iOS and Android apps for on-the-go access and offline support"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Why Choose
|
||||
<span class="text-primary">Trackeep</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
The perfect balance of simplicity, privacy, and power
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-lock-simple text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Privacy First</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Your data stays yours. No tracking, no data mining, complete control over your information.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-code text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Open Source</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Transparent and customizable. Audit the code, modify features, contribute to the community.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-stack text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">All-in-One</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Replace multiple apps with one unified platform for bookmarks, tasks, files, and knowledge.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-sparkle text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">AI Optional</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Use AI features when you want them, with full control over what gets processed.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-credit-card text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">No Subscriptions</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">One-time setup, no monthly fees. Pay for hosting, not for features.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary/10 text-primary w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="ph ph-arrow-counter-clockwise text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Data Portability</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Export your data anytime. No vendor lock-in, standard formats supported.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section id="how-it-works" class="py-20 bg-white dark:bg-gray-900">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Get Started in
|
||||
<span class="text-primary">3 Simple Steps</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
From zero to productivity in minutes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||||
1
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Deploy</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Simple Docker setup with one command</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||||
2
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Configure</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Set up your preferences and integrations</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||||
3
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">Use</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Start organizing your digital life</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<section id="tech-stack" class="py-20 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Built with
|
||||
<span class="text-primary">Modern Technology</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
Powered by the best tools for performance and reliability
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-4">
|
||||
<i class="ph ph-code text-4xl text-primary mb-2"></i>
|
||||
<h4 class="font-semibold">SolidJS</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Frontend Framework</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-4">
|
||||
<i class="ph ph-gear text-4xl text-primary mb-2"></i>
|
||||
<h4 class="font-semibold">Go</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Backend Language</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-4">
|
||||
<i class="ph ph-database text-4xl text-primary mb-2"></i>
|
||||
<h4 class="font-semibold">PostgreSQL</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Database</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-4">
|
||||
<i class="ph ph-devices text-4xl text-primary mb-2"></i>
|
||||
<h4 class="font-semibold">React Native</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Mobile Apps</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="py-20 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Loved by
|
||||
<span class="text-primary">Productivity Enthusiasts</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
See what our users are saying about Trackeep
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
|
||||
<i class="ph ph-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Sarah Chen</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Product Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 italic">"Trackeep transformed how I organize my work. Having everything in one place saves me hours every week."</p>
|
||||
<div class="flex mt-4">
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
|
||||
<i class="ph ph-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Alex Rodriguez</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Software Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 italic">"Finally, a tool that respects my privacy. Self-hosting means I control my data completely."</p>
|
||||
<div class="flex mt-4">
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
|
||||
<i class="ph ph-user"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900 dark:text-gray-100">Emily Watson</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 italic">"The AI features are incredible but optional. I love having the choice to use them when needed."</p>
|
||||
<div class="flex mt-4">
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star-fill text-yellow-500"></i>
|
||||
<i class="ph ph-star text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA Section -->
|
||||
<section class="py-20 bg-primary">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-white mb-6">
|
||||
Ready to Take Control of Your Digital Life?
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto">
|
||||
Join thousands of users who have already made the switch to self-hosted productivity.
|
||||
No subscriptions, no data mining, just pure productivity.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<a href="#features" @click="(e) => handleCTAClick(e, 'features')" class="bg-white text-primary px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||||
Explore Features
|
||||
</a>
|
||||
<a href="https://demo.trackeep.org" target="_blank" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary transition-colors">
|
||||
View Live Demo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Quick Install Command -->
|
||||
<div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-6 max-w-2xl mx-auto">
|
||||
<p class="text-white mb-4 font-medium">Install Trackeep in seconds:</p>
|
||||
<div class="relative bg-black/20 border border-white/30 rounded-lg p-4">
|
||||
<code class="text-white text-sm font-mono">curl -sSL https://trackeep.org/install.sh | sh</code>
|
||||
<button
|
||||
@click="copyCommand"
|
||||
class="absolute top-2 right-2 p-2 bg-white/20 hover:bg-white/30 rounded transition-colors"
|
||||
aria-label="Copy command"
|
||||
>
|
||||
<i class="ph ph-copy text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import QuickInstall from '../components/QuickInstall.vue'
|
||||
import FeatureCard from '../components/FeatureCard.vue'
|
||||
import { useSmoothScroll } from '../composables/useSmoothScroll'
|
||||
|
||||
const { scrollToSection } = useSmoothScroll()
|
||||
const heroImageError = ref(false)
|
||||
|
||||
const copyCommand = async () => {
|
||||
const command = 'curl -sSL https://trackeep.org/install.sh | sh'
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(command)
|
||||
} catch (err) {
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = command
|
||||
document.body.appendChild(textArea)
|
||||
textArea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textArea)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCTAClick = (event: Event, sectionId: string) => {
|
||||
event.preventDefault()
|
||||
scrollToSection(sectionId)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user