diff --git a/dist.tar.gz b/dist.tar.gz index c2e70a6..df5cc59 100644 Binary files a/dist.tar.gz and b/dist.tar.gz differ diff --git a/src/locales/de.json b/src/locales/de.json index 3c84cf6..d706154 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -18,30 +18,117 @@ "features": { "tag": "Features", "title": "Alles was du brauchst", + "subtitle": "Leistungsstarke Tools für maximale Produktivität", "speed": { "title": "Blitzschnell", - "desc": "Optimierte Performance durch Edge-Computing und intelligentes Caching." + "desc": "Optimierte Performance durch Edge-Computing und intelligentes Caching für sofortige Reaktionszeiten." }, "ai": { "title": "AI-Powered", - "desc": "Modernste KI-Algorithmen automatisieren repetitive Aufgaben." + "desc": "Modernste KI-Algorithmen automatisieren repetitive Aufgaben und treffen smarte Entscheidungen." }, "security": { "title": "Maximale Sicherheit", - "desc": "Enterprise-Grade Verschlüsselung und Compliance-Standards." + "desc": "Enterprise-Grade Verschlüsselung und Compliance-Standards schützen deine Daten." }, "scale": { "title": "Unbegrenzt skalieren", - "desc": "Von Startup bis Enterprise - wächst mit deinen Anforderungen." + "desc": "Von Startup bis Enterprise - wächst nahtlos mit deinen Anforderungen mit." + }, + "integration": { + "title": "Nahtlose Integration", + "desc": "Verbinde dich mit über 100+ Tools und Services, die du bereits nutzt." + }, + "analytics": { + "title": "Echtzeit-Analytics", + "desc": "Detaillierte Einblicke und Dashboards für datengesteuerte Entscheidungen." + } + }, + "howItWorks": { + "tag": "So funktioniert's", + "title": "In 3 Schritten zum Erfolg", + "step1": { + "title": "Account erstellen", + "desc": "Registriere dich kostenlos und richte deinen Workspace in Minuten ein." + }, + "step2": { + "title": "Workflow verbinden", + "desc": "Integriere deine bestehenden Tools und definiere Automatisierungen." + }, + "step3": { + "title": "Produktivität steigern", + "desc": "Lehne dich zurück und lass FluxKit die Arbeit erledigen." + } + }, + "pricing": { + "tag": "Preise", + "title": "Transparente Preise", + "subtitle": "Wähle den Plan, der zu dir passt", + "month": "Monat", + "popular": "Beliebt", + "cta": "Plan wählen", + "starter": { + "name": "Starter", + "desc": "Perfekt für Einzelpersonen", + "feature1": "3 Projekte", + "feature2": "1.000 Automationen/Monat", + "feature3": "Community Support", + "feature4": "Basis Analytics" + }, + "pro": { + "name": "Pro", + "desc": "Für wachsende Teams", + "feature1": "Unbegrenzte Projekte", + "feature2": "50.000 Automationen/Monat", + "feature3": "Priority Support", + "feature4": "Erweiterte Analytics" + }, + "enterprise": { + "name": "Enterprise", + "desc": "Für große Unternehmen", + "feature1": "Alles aus Pro", + "feature2": "Unbegrenzte Automationen", + "feature3": "24/7 Dedicated Support", + "feature4": "Custom Integrationen" + } + }, + "testimonials": { + "tag": "Testimonials", + "title": "Was unsere Kunden sagen", + "quote1": "FluxKit hat unsere Produktivität um 300% gesteigert. Die AI-Automationen sind ein absoluter Game-Changer.", + "quote2": "Endlich eine Lösung, die hält was sie verspricht. Die Integration war kinderleicht.", + "quote3": "Der Support ist erstklassig und die Features übertreffen unsere Erwartungen bei weitem." + }, + "faq": { + "title": "Häufige Fragen", + "faq1": { + "q": "Wie lange dauert die Einrichtung?", + "a": "Die meisten Teams sind in unter 15 Minuten startklar. Unsere Onboarding-Wizards führen dich Schritt für Schritt durch den Prozess." + }, + "faq2": { + "q": "Kann ich FluxKit kostenlos testen?", + "a": "Ja! Der Starter-Plan ist komplett kostenlos und enthält alle grundlegenden Features. Kein Kreditkarte erforderlich." + }, + "faq3": { + "q": "Welche Integrationen werden unterstützt?", + "a": "Wir unterstützen über 100+ Integrationen inkl. Slack, GitHub, Jira, Notion, Google Workspace und viele mehr." + }, + "faq4": { + "q": "Sind meine Daten sicher?", + "a": "Absolut. Wir nutzen AES-256 Verschlüsselung, sind SOC2 zertifiziert und DSGVO-konform." } }, "cta": { "title": "Bereit durchzustarten?", "subtitle": "Starte jetzt kostenlos und erlebe die Zukunft der Automation.", - "button": "Kostenlos testen" + "button": "Kostenlos starten", + "secondary": "Demo buchen" }, - "about": { - "title": "Über uns", - "content": "FluxKit ist die nächste Generation der AI-Automation." + "footer": { + "tagline": "Die nächste Generation der AI-Automation für moderne Teams.", + "product": "Produkt", + "company": "Unternehmen", + "legal": "Rechtliches", + "rights": "Alle Rechte vorbehalten." } } diff --git a/src/locales/en.json b/src/locales/en.json index 31a312a..77df430 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -18,30 +18,117 @@ "features": { "tag": "Features", "title": "Everything you need", + "subtitle": "Powerful tools for maximum productivity", "speed": { "title": "Lightning Fast", - "desc": "Optimized performance through edge computing and intelligent caching." + "desc": "Optimized performance through edge computing and intelligent caching for instant response times." }, "ai": { "title": "AI-Powered", - "desc": "State-of-the-art AI algorithms automate repetitive tasks." + "desc": "State-of-the-art AI algorithms automate repetitive tasks and make smart decisions." }, "security": { "title": "Maximum Security", - "desc": "Enterprise-grade encryption and compliance standards." + "desc": "Enterprise-grade encryption and compliance standards protect your data." }, "scale": { "title": "Scale Infinitely", - "desc": "From startup to enterprise - grows with your needs." + "desc": "From startup to enterprise - grows seamlessly with your needs." + }, + "integration": { + "title": "Seamless Integration", + "desc": "Connect with 100+ tools and services you already use." + }, + "analytics": { + "title": "Real-time Analytics", + "desc": "Detailed insights and dashboards for data-driven decisions." + } + }, + "howItWorks": { + "tag": "How it works", + "title": "3 Steps to Success", + "step1": { + "title": "Create Account", + "desc": "Sign up for free and set up your workspace in minutes." + }, + "step2": { + "title": "Connect Workflow", + "desc": "Integrate your existing tools and define automations." + }, + "step3": { + "title": "Boost Productivity", + "desc": "Sit back and let FluxKit do the work." + } + }, + "pricing": { + "tag": "Pricing", + "title": "Transparent Pricing", + "subtitle": "Choose the plan that fits you", + "month": "month", + "popular": "Popular", + "cta": "Choose plan", + "starter": { + "name": "Starter", + "desc": "Perfect for individuals", + "feature1": "3 Projects", + "feature2": "1,000 automations/month", + "feature3": "Community Support", + "feature4": "Basic Analytics" + }, + "pro": { + "name": "Pro", + "desc": "For growing teams", + "feature1": "Unlimited Projects", + "feature2": "50,000 automations/month", + "feature3": "Priority Support", + "feature4": "Advanced Analytics" + }, + "enterprise": { + "name": "Enterprise", + "desc": "For large companies", + "feature1": "Everything in Pro", + "feature2": "Unlimited automations", + "feature3": "24/7 Dedicated Support", + "feature4": "Custom Integrations" + } + }, + "testimonials": { + "tag": "Testimonials", + "title": "What our customers say", + "quote1": "FluxKit increased our productivity by 300%. The AI automations are an absolute game-changer.", + "quote2": "Finally a solution that delivers on its promises. Integration was a breeze.", + "quote3": "The support is top-notch and the features far exceed our expectations." + }, + "faq": { + "title": "Frequently Asked Questions", + "faq1": { + "q": "How long does setup take?", + "a": "Most teams are up and running in under 15 minutes. Our onboarding wizards guide you through the process step by step." + }, + "faq2": { + "q": "Can I try FluxKit for free?", + "a": "Yes! The Starter plan is completely free and includes all basic features. No credit card required." + }, + "faq3": { + "q": "Which integrations are supported?", + "a": "We support 100+ integrations including Slack, GitHub, Jira, Notion, Google Workspace and many more." + }, + "faq4": { + "q": "Is my data secure?", + "a": "Absolutely. We use AES-256 encryption, are SOC2 certified and GDPR compliant." } }, "cta": { "title": "Ready to get started?", "subtitle": "Start for free and experience the future of automation.", - "button": "Try for free" + "button": "Start for free", + "secondary": "Book a demo" }, - "about": { - "title": "About", - "content": "FluxKit is the next generation of AI automation." + "footer": { + "tagline": "The next generation of AI automation for modern teams.", + "product": "Product", + "company": "Company", + "legal": "Legal", + "rights": "All rights reserved." } } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0044df4..dd88fe0 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -8,6 +8,21 @@ const isVisible = ref(false) const mouseX = ref(0) const mouseY = ref(0) +const pricingPlans = [ + { key: 'starter', price: '0', popular: false }, + { key: 'pro', price: '49', popular: true }, + { key: 'enterprise', price: '199', popular: false } +] + +const testimonials = [ + { name: 'Sarah M.', role: 'CEO, TechStart', avatar: '👩‍💼' }, + { name: 'Marcus K.', role: 'CTO, DataFlow', avatar: '👨‍💻' }, + { name: 'Lisa W.', role: 'Product Lead, ScaleUp', avatar: '👩‍🔬' } +] + +const faqs = ['faq1', 'faq2', 'faq3', 'faq4'] +const openFaq = ref(null) + onMounted(() => { setTimeout(() => isVisible.value = true, 100) @@ -16,12 +31,16 @@ onMounted(() => { mouseY.value = (e.clientY / window.innerHeight - 0.5) * 20 }) }) + +function toggleFaq(index) { + openFaq.value = openFaq.value === index ? null : index +} @@ -116,6 +298,12 @@ onMounted(() => { overflow-x: hidden; } +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + /* Hero Section */ .hero { position: relative; @@ -148,7 +336,6 @@ onMounted(() => { background: linear-gradient(135deg, #6366f1, #8b5cf6); top: -200px; right: -100px; - animation-delay: 0s; } .orb-2 { @@ -240,9 +427,7 @@ onMounted(() => { color: white; } -.title-line { - display: block; -} +.title-line { display: block; } .gradient-text { background: linear-gradient(135deg, #6366f1, #06b6d4, #f43f5e); @@ -307,29 +492,11 @@ onMounted(() => { flex-wrap: wrap; } -.stat-item { - text-align: center; -} +.stat-item { text-align: center; } +.stat-number { display: block; font-size: 2rem; font-weight: 700; color: white; } +.stat-label { font-size: 0.875rem; color: #64748b; } +.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); } -.stat-number { - display: block; - font-size: 2rem; - font-weight: 700; - color: white; -} - -.stat-label { - font-size: 0.875rem; - color: #64748b; -} - -.stat-divider { - width: 1px; - height: 40px; - background: rgba(255,255,255,0.1); -} - -/* Floating Elements */ .floating-elements { position: absolute; inset: 0; @@ -354,38 +521,33 @@ onMounted(() => { animation: float-card 6s ease-in-out infinite; } -.card-1 { - top: 20%; - left: 10%; - animation-delay: 0s; - color: #fbbf24; -} - -.card-2 { - top: 60%; - right: 15%; - animation-delay: -2s; - color: #06b6d4; -} - -.card-3 { - bottom: 20%; - left: 20%; - animation-delay: -4s; - color: #f43f5e; -} +.card-1 { top: 20%; left: 10%; color: #fbbf24; } +.card-2 { top: 60%; right: 15%; animation-delay: -2s; color: #06b6d4; } +.card-3 { bottom: 20%; left: 20%; animation-delay: -4s; color: #f43f5e; } @keyframes float-card { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } -/* Features Section */ -.features { - padding: 8rem 2rem; - background: linear-gradient(180deg, #0a0a0a 0%, #111827 100%); +.scroll-indicator { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + color: rgba(255,255,255,0.5); + font-size: 1.5rem; + animation: bounce 2s ease-in-out infinite; + z-index: 10; + text-decoration: none; } +@keyframes bounce { + 0%, 100% { transform: translateX(-50%) translateY(0); } + 50% { transform: translateX(-50%) translateY(10px); } +} + +/* Section Styles */ .section-header { text-align: center; margin-bottom: 4rem; @@ -406,14 +568,26 @@ onMounted(() => { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: white; + margin-bottom: 1rem; +} + +.section-subtitle { + color: #94a3b8; + font-size: 1.125rem; + max-width: 600px; + margin: 0 auto; +} + +/* Features */ +.features { + padding: 8rem 2rem; + background: linear-gradient(180deg, #0a0a0a 0%, #111827 100%); } .features-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; - max-width: 1200px; - margin: 0 auto; } .feature-card { @@ -432,9 +606,7 @@ onMounted(() => { background: rgba(99, 102, 241, 0.05); } -.feature-card:hover .feature-glow { - opacity: 1; -} +.feature-card:hover .feature-glow { opacity: 1; } .feature-glow { position: absolute; @@ -473,6 +645,240 @@ onMounted(() => { line-height: 1.6; } +/* How It Works */ +.how-it-works { + padding: 8rem 2rem; + background: #0a0a0a; +} + +.steps-container { + display: flex; + justify-content: center; + gap: 4rem; + position: relative; + flex-wrap: wrap; +} + +.step { + text-align: center; + max-width: 280px; + position: relative; + z-index: 1; +} + +.step-number { + width: 60px; + height: 60px; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + color: white; + margin: 0 auto 1.5rem; +} + +.step h3 { + color: white; + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.step p { + color: #94a3b8; +} + +.steps-line { + position: absolute; + top: 30px; + left: 20%; + right: 20%; + height: 2px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent); + z-index: 0; +} + +/* Pricing */ +.pricing { + padding: 8rem 2rem; + background: linear-gradient(180deg, #111827 0%, #0a0a0a 100%); +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + max-width: 1000px; + margin: 0 auto; +} + +.pricing-card { + position: relative; + padding: 2.5rem; + background: rgba(255,255,255,0.02); + border: 1px solid rgba(255,255,255,0.05); + border-radius: 24px; + transition: all 0.3s ease; +} + +.pricing-card.popular { + border-color: #6366f1; + background: rgba(99, 102, 241, 0.05); + transform: scale(1.05); +} + +.popular-badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + padding: 0.5rem 1rem; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border-radius: 100px; + font-size: 0.75rem; + font-weight: 600; + color: white; +} + +.pricing-card h3 { + color: white; + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.price { + margin-bottom: 1rem; +} + +.currency { + font-size: 1.5rem; + color: #94a3b8; + vertical-align: top; +} + +.amount { + font-size: 4rem; + font-weight: 700; + color: white; +} + +.period { + color: #64748b; +} + +.plan-desc { + color: #94a3b8; + margin-bottom: 2rem; +} + +.features-list { + list-style: none; + margin-bottom: 2rem; +} + +.features-list li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 0; + color: #cbd5e1; + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +.features-list li i { + color: #22c55e; +} + +/* Testimonials */ +.testimonials { + padding: 8rem 2rem; + background: #0a0a0a; +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.testimonial-card { + padding: 2rem; + background: rgba(255,255,255,0.02); + border: 1px solid rgba(255,255,255,0.05); + border-radius: 24px; +} + +.quote-icon { + font-size: 4rem; + line-height: 1; + color: #6366f1; + opacity: 0.5; +} + +.quote { + color: #e2e8f0; + font-size: 1.125rem; + line-height: 1.7; + margin-bottom: 1.5rem; +} + +.author { + display: flex; + align-items: center; + gap: 1rem; +} + +.avatar { + font-size: 2rem; +} + +.author strong { + display: block; + color: white; +} + +.author span { + color: #64748b; + font-size: 0.875rem; +} + +/* FAQ */ +.faq { + padding: 8rem 2rem; + background: linear-gradient(180deg, #0a0a0a 0%, #111827 100%); +} + +.faq-list { + max-width: 700px; + margin: 0 auto; +} + +.faq-item { + border-bottom: 1px solid rgba(255,255,255,0.1); + cursor: pointer; +} + +.faq-question { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 0; + color: white; + font-weight: 500; +} + +.faq-question i { + color: #6366f1; +} + +.faq-answer { + padding-bottom: 1.5rem; + color: #94a3b8; + line-height: 1.7; +} + /* CTA Section */ .cta-section { position: relative; @@ -502,12 +908,18 @@ onMounted(() => { margin-bottom: 2rem; } +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + :deep(.btn-cta) { background: linear-gradient(135deg, #f43f5e, #ec4899) !important; border: none !important; padding: 1rem 2.5rem !important; font-weight: 600 !important; - font-size: 1.1rem !important; } :deep(.btn-cta:hover) { @@ -515,6 +927,12 @@ onMounted(() => { box-shadow: 0 20px 40px -10px rgba(244, 63, 94, 0.5); } +:deep(.btn-ghost-light) { + border-color: rgba(255,255,255,0.3) !important; + color: white !important; + padding: 1rem 2rem !important; +} + .cta-glow { position: absolute; top: 50%; @@ -526,18 +944,96 @@ onMounted(() => { pointer-events: none; } -/* Mobile Adjustments */ +/* Footer */ +.footer { + padding: 4rem 2rem 2rem; + background: #0a0a0a; + border-top: 1px solid rgba(255,255,255,0.05); +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 3rem; +} + +.footer-brand .brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1.5rem; + font-weight: 700; + color: white; + margin-bottom: 1rem; +} + +.footer-brand p { + color: #64748b; + margin-bottom: 1.5rem; +} + +.social-links { + display: flex; + gap: 1rem; +} + +.social-links a { + width: 40px; + height: 40px; + background: rgba(255,255,255,0.05); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #94a3b8; + transition: all 0.2s ease; +} + +.social-links a:hover { + background: #6366f1; + color: white; +} + +.footer-links h4 { + color: white; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 1.5rem; +} + +.footer-links a { + display: block; + color: #64748b; + text-decoration: none; + padding: 0.5rem 0; + transition: color 0.2s ease; +} + +.footer-links a:hover { + color: white; +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid rgba(255,255,255,0.05); + text-align: center; + color: #64748b; +} + +/* Mobile */ @media (max-width: 768px) { - .hero-stats { - gap: 1.5rem; - } - - .stat-divider { - display: none; - } - - .floating-elements { - display: none; - } + .hero-stats { gap: 1.5rem; } + .stat-divider { display: none; } + .floating-elements { display: none; } + .steps-container { flex-direction: column; gap: 2rem; } + .steps-line { display: none; } + .pricing-card.popular { transform: none; } + .footer-grid { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 480px) { + .footer-grid { grid-template-columns: 1fr; } }