feat: FluxKit Landing Page mit modernem Design

🎨 Neues Design:
- Animierte Hero Section mit Gradient Orbs
- Floating Cards mit Mouse-Tracking
- Smooth Scroll Animationen
- Glassmorphism Effekte
- Responsive Navbar mit Scroll-Detection
- Feature Cards mit Hover-Glow
- CTA Section mit Radial Glow

✨ Features:
- Dynamische Farbverläufe
- Pulse & Float Animationen
- Custom Scrollbar
- Inter Font
- DE/EN Übersetzungen

package.json

@@ -9,19 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.0",
-    "vue-i18n": "^9.9.0",
-    "pinia": "^2.1.0",
-    "primevue": "^4.0.0",
     "@primevue/themes": "^4.0.0",
-    "primeicons": "^7.0.0"
+    "@vueuse/motion": "^3.0.3",
+    "pinia": "^2.1.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.0",
+    "vue": "^3.4.0",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
-    "vite": "^5.0.0",
+    "autoprefixer": "^10.4.0",
-    "tailwindcss": "^3.4.0",
     "postcss": "^8.4.0",
-    "autoprefixer": "^10.4.0"
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.4.21"
   }
 }

src/App.vue

@@ -4,10 +4,16 @@ import Navbar from './components/Navbar.vue'
 </script>
 
 <template>
-  <div class="min-h-screen">
+  <div class="app">
     <Navbar />
-    <main class="container mx-auto px-4 py-8">
+    <main>
       <RouterView />
     </main>
   </div>
 </template>
+
+<style>
+.app {
+  min-height: 100vh;
+}
+</style>

src/components/Navbar.vue

@@ -2,76 +2,210 @@
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Button from 'primevue/button'
-import Select from 'primevue/select'
 
-const { locale, t } = useI18n()
+const { locale } = useI18n()
-const isDark = ref(false)
+const scrolled = ref(false)
-
+const mobileMenuOpen = ref(false)
-const languages = [
-  { code: 'de', name: 'Deutsch' },
-  { code: 'en', name: 'English' }
-]
 
 onMounted(() => {
-  isDark.value = document.documentElement.classList.contains('dark') ||
+  window.addEventListener('scroll', () => {
-    localStorage.getItem('theme') === 'dark' ||
+    scrolled.value = window.scrollY > 50
-    (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  })
-  updateTheme()
 })
 
-function toggleTheme() {
+function toggleLocale() {
-  isDark.value = !isDark.value
+  locale.value = locale.value === 'de' ? 'en' : 'de'
-  updateTheme()
+  localStorage.setItem('locale', locale.value)
-}
-
-function updateTheme() {
-  if (isDark.value) {
-    document.documentElement.classList.add('dark')
-    localStorage.setItem('theme', 'dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-    localStorage.setItem('theme', 'light')
-  }
-}
-
-function changeLocale(event) {
-  locale.value = event.value
-  localStorage.setItem('locale', event.value)
 }
 </script>
 
 <template>
-  <nav class="bg-white dark:bg-gray-800 shadow-md">
+  <nav class="navbar" :class="{ scrolled }">
-    <div class="container mx-auto px-4">
+    <div class="nav-container">
-      <div class="flex items-center justify-between h-16">
+      <div class="nav-brand">
-        <div class="flex items-center">
+        <span class="brand-icon">⚡</span>
-          <span class="text-xl font-bold text-primary-600 dark:text-primary-400">
+        <span class="brand-text">FluxKit</span>
-            Vue3 Basis
-          </span>
-        </div>
-        
-        <div class="flex items-center gap-4">
-          <!-- Language Switcher -->
-          <Select
-            :modelValue="locale"
-            :options="languages"
-            optionLabel="name"
-            optionValue="code"
-            @update:modelValue="changeLocale"
-            class="w-32"
-          />
-          
-          <!-- Theme Toggle -->
-          <Button
-            :icon="isDark ? 'pi pi-sun' : 'pi pi-moon'"
-            severity="secondary"
-            text
-            rounded
-            @click="toggleTheme"
-            :aria-label="t('nav.toggleTheme')"
-          />
-        </div>
       </div>
+      
+      <div class="nav-links" :class="{ open: mobileMenuOpen }">
+        <a href="#features" class="nav-link">Features</a>
+        <a href="#pricing" class="nav-link">Pricing</a>
+        <a href="#docs" class="nav-link">Docs</a>
+      </div>
+      
+      <div class="nav-actions">
+        <button class="lang-toggle" @click="toggleLocale">
+          {{ locale.toUpperCase() }}
+        </button>
+        <Button label="Login" class="btn-nav-ghost" text />
+        <Button label="Get Started" class="btn-nav-primary" />
+      </div>
+      
+      <button class="mobile-toggle" @click="mobileMenuOpen = !mobileMenuOpen">
+        <i :class="mobileMenuOpen ? 'pi pi-times' : 'pi pi-bars'"></i>
+      </button>
     </div>
   </nav>
 </template>
+
+<style scoped>
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 1rem 2rem;
+  transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+  background: rgba(10, 10, 10, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 0.75rem 2rem;
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: white;
+}
+
+.brand-icon {
+  font-size: 1.75rem;
+}
+
+.brand-text {
+  background: linear-gradient(135deg, #fff, #a5b4fc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2rem;
+}
+
+.nav-link {
+  color: #94a3b8;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+  position: relative;
+}
+
+.nav-link:hover {
+  color: white;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #6366f1, #06b6d4);
+  transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+  width: 100%;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.lang-toggle {
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: #94a3b8;
+  font-weight: 600;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.lang-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+}
+
+:deep(.btn-nav-ghost) {
+  color: #94a3b8 !important;
+}
+
+:deep(.btn-nav-ghost:hover) {
+  color: white !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+:deep(.btn-nav-primary) {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+  border: none !important;
+  font-weight: 600 !important;
+}
+
+:deep(.btn-nav-primary:hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
+}
+
+.mobile-toggle {
+  display: none;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: white;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .nav-links,
+  .nav-actions {
+    display: none;
+  }
+  
+  .mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .nav-links.open {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: rgba(10, 10, 10, 0.95);
+    backdrop-filter: blur(20px);
+    padding: 2rem;
+    gap: 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+}
+</style>

src/locales/de.json

@@ -2,26 +2,46 @@
   "nav": {
     "toggleTheme": "Theme wechseln"
   },
-  "home": {
+  "hero": {
-    "title": "Willkommen bei Vue3 Basis",
+    "badge": "Jetzt verfügbar",
-    "getStarted": "Loslegen",
+    "title1": "Die Zukunft ist",
-    "features": {
+    "title2": "FluxKit",
-      "fast": {
+    "subtitle": "Revolutionäre AI-gestützte Automation für moderne Teams. Schneller. Smarter. Effizienter.",
-        "title": "Blitzschnell",
+    "cta": "Jetzt starten",
-        "desc": "Mit Vite und Vue 3 für optimale Performance gebaut."
+    "secondary": "Demo ansehen"
-      },
+  },
-      "themes": {
+  "stats": {
-        "title": "Dark & Light Mode",
+    "uptime": "Verfügbarkeit",
-        "desc": "Nahtloser Wechsel zwischen hellem und dunklem Design."
+    "faster": "Schneller",
-      },
+    "support": "Support"
-      "i18n": {
+  },
-        "title": "Mehrsprachig",
+  "features": {
-        "desc": "Vollständige Internationalisierung mit vue-i18n."
+    "tag": "Features",
-      }
+    "title": "Alles was du brauchst",
+    "speed": {
+      "title": "Blitzschnell",
+      "desc": "Optimierte Performance durch Edge-Computing und intelligentes Caching."
+    },
+    "ai": {
+      "title": "AI-Powered",
+      "desc": "Modernste KI-Algorithmen automatisieren repetitive Aufgaben."
+    },
+    "security": {
+      "title": "Maximale Sicherheit",
+      "desc": "Enterprise-Grade Verschlüsselung und Compliance-Standards."
+    },
+    "scale": {
+      "title": "Unbegrenzt skalieren",
+      "desc": "Von Startup bis Enterprise - wächst mit deinen Anforderungen."
     }
   },
+  "cta": {
+    "title": "Bereit durchzustarten?",
+    "subtitle": "Starte jetzt kostenlos und erlebe die Zukunft der Automation.",
+    "button": "Kostenlos testen"
+  },
   "about": {
     "title": "Über uns",
-    "content": "Vue3 Basis ist eine moderne Starter-Vorlage mit TailwindCSS, PrimeVue und i18n."
+    "content": "FluxKit ist die nächste Generation der AI-Automation."
   }
 }

src/locales/en.json

@@ -2,26 +2,46 @@
   "nav": {
     "toggleTheme": "Toggle theme"
   },
-  "home": {
+  "hero": {
-    "title": "Welcome to Vue3 Basis",
+    "badge": "Now available",
-    "getStarted": "Get Started",
+    "title1": "The Future is",
-    "features": {
+    "title2": "FluxKit",
-      "fast": {
+    "subtitle": "Revolutionary AI-powered automation for modern teams. Faster. Smarter. More efficient.",
-        "title": "Lightning Fast",
+    "cta": "Get started",
-        "desc": "Built with Vite and Vue 3 for optimal performance."
+    "secondary": "Watch demo"
-      },
+  },
-      "themes": {
+  "stats": {
-        "title": "Dark & Light Mode",
+    "uptime": "Uptime",
-        "desc": "Seamless switching between light and dark themes."
+    "faster": "Faster",
-      },
+    "support": "Support"
-      "i18n": {
+  },
-        "title": "Multilingual",
+  "features": {
-        "desc": "Full internationalization support with vue-i18n."
+    "tag": "Features",
-      }
+    "title": "Everything you need",
+    "speed": {
+      "title": "Lightning Fast",
+      "desc": "Optimized performance through edge computing and intelligent caching."
+    },
+    "ai": {
+      "title": "AI-Powered",
+      "desc": "State-of-the-art AI algorithms automate repetitive tasks."
+    },
+    "security": {
+      "title": "Maximum Security",
+      "desc": "Enterprise-grade encryption and compliance standards."
+    },
+    "scale": {
+      "title": "Scale Infinitely",
+      "desc": "From startup to enterprise - grows with your needs."
     }
   },
+  "cta": {
+    "title": "Ready to get started?",
+    "subtitle": "Start for free and experience the future of automation.",
+    "button": "Try for free"
+  },
   "about": {
     "title": "About",
-    "content": "Vue3 Basis is a modern starter template with TailwindCSS, PrimeVue and i18n."
+    "content": "FluxKit is the next generation of AI automation."
   }
 }

src/style.css

@@ -2,14 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --color-bg: #0a0a0a;
-  line-height: 1.5;
+  --color-surface: #111827;
-  font-weight: 400;
+  --color-primary: #6366f1;
+  --color-secondary: #06b6d4;
+  --color-accent: #f43f5e;
+  --color-text: #f8fafc;
+  --color-text-muted: #94a3b8;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 body {
-  @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  min-height: 100vh;
+  background: var(--color-bg);
-  transition: background-color 0.3s, color 0.3s;
+  color: var(--color-text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: rgba(99, 102, 241, 0.3);
+  color: white;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Global Animation Classes */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+/* PrimeVue Overrides */
+.p-button {
+  border-radius: 12px !important;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
 }

src/views/HomeView.vue

@@ -1,51 +1,543 @@
 <script setup>
+import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Card from 'primevue/card'
 import Button from 'primevue/button'
 
 const { t } = useI18n()
+const isVisible = ref(false)
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+onMounted(() => {
+  setTimeout(() => isVisible.value = true, 100)
+  
+  document.addEventListener('mousemove', (e) => {
+    mouseX.value = (e.clientX / window.innerWidth - 0.5) * 20
+    mouseY.value = (e.clientY / window.innerHeight - 0.5) * 20
+  })
+})
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div class="landing-page">
-    <h1 class="text-4xl font-bold text-center">
+    <!-- Hero Section -->
-      {{ t('home.title') }}
+    <section class="hero">
-    </h1>
+      <div class="hero-bg">
+        <div class="gradient-orb orb-1"></div>
+        <div class="gradient-orb orb-2"></div>
+        <div class="gradient-orb orb-3"></div>
+        <div class="grid-overlay"></div>
+      </div>
       
-    <div class="grid md:grid-cols-3 gap-6">
+      <div class="hero-content" :class="{ visible: isVisible }">
-      <Card>
+        <div class="hero-badge">
-        <template #title>
+          <span class="badge-dot"></span>
-          <i class="pi pi-bolt text-primary-500 mr-2"></i>
+          {{ t('hero.badge') }}
-          {{ t('home.features.fast.title') }}
+        </div>
-        </template>
-        <template #content>
-          {{ t('home.features.fast.desc') }}
-        </template>
-      </Card>
         
-      <Card>
+        <h1 class="hero-title">
-        <template #title>
+          <span class="title-line">{{ t('hero.title1') }}</span>
-          <i class="pi pi-palette text-primary-500 mr-2"></i>
+          <span class="title-line gradient-text">{{ t('hero.title2') }}</span>
-          {{ t('home.features.themes.title') }}
+        </h1>
-        </template>
-        <template #content>
-          {{ t('home.features.themes.desc') }}
-        </template>
-      </Card>
         
-      <Card>
+        <p class="hero-subtitle">{{ t('hero.subtitle') }}</p>
-        <template #title>
-          <i class="pi pi-globe text-primary-500 mr-2"></i>
-          {{ t('home.features.i18n.title') }}
-        </template>
-        <template #content>
-          {{ t('home.features.i18n.desc') }}
-        </template>
-      </Card>
-    </div>
         
-    <div class="text-center">
+        <div class="hero-buttons">
-      <Button :label="t('home.getStarted')" icon="pi pi-arrow-right" iconPos="right" />
+          <Button :label="t('hero.cta')" class="btn-primary" icon="pi pi-arrow-right" iconPos="right" />
-    </div>
+          <Button :label="t('hero.secondary')" class="btn-ghost" icon="pi pi-play" outlined />
+        </div>
+        
+        <div class="hero-stats">
+          <div class="stat-item">
+            <span class="stat-number">99%</span>
+            <span class="stat-label">{{ t('stats.uptime') }}</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">10x</span>
+            <span class="stat-label">{{ t('stats.faster') }}</span>
+          </div>
+          <div class="stat-divider"></div>
+          <div class="stat-item">
+            <span class="stat-number">24/7</span>
+            <span class="stat-label">{{ t('stats.support') }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Floating Elements -->
+      <div class="floating-elements" :style="{ transform: `translate(${mouseX}px, ${mouseY}px)` }">
+        <div class="float-card card-1">
+          <i class="pi pi-bolt"></i>
+        </div>
+        <div class="float-card card-2">
+          <i class="pi pi-code"></i>
+        </div>
+        <div class="float-card card-3">
+          <i class="pi pi-cog"></i>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features">
+      <div class="section-header">
+        <span class="section-tag">{{ t('features.tag') }}</span>
+        <h2 class="section-title">{{ t('features.title') }}</h2>
+      </div>
+      
+      <div class="features-grid">
+        <div class="feature-card" v-for="(feature, i) in ['speed', 'ai', 'security', 'scale']" :key="feature">
+          <div class="feature-icon">
+            <i :class="`pi pi-${['bolt', 'sparkles', 'shield', 'chart-line'][i]}`"></i>
+          </div>
+          <h3>{{ t(`features.${feature}.title`) }}</h3>
+          <p>{{ t(`features.${feature}.desc`) }}</p>
+          <div class="feature-glow"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta-section">
+      <div class="cta-content">
+        <h2>{{ t('cta.title') }}</h2>
+        <p>{{ t('cta.subtitle') }}</p>
+        <Button :label="t('cta.button')" class="btn-cta" icon="pi pi-arrow-right" iconPos="right" />
+      </div>
+      <div class="cta-glow"></div>
+    </section>
   </div>
 </template>
+
+<style scoped>
+.landing-page {
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Hero Section */
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  overflow: hidden;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
+  z-index: 0;
+}
+
+.gradient-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.6;
+  animation: float 8s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 600px;
+  height: 600px;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  top: -200px;
+  right: -100px;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 400px;
+  height: 400px;
+  background: linear-gradient(135deg, #06b6d4, #3b82f6);
+  bottom: -100px;
+  left: -100px;
+  animation-delay: -2s;
+}
+
+.orb-3 {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(135deg, #f43f5e, #ec4899);
+  top: 50%;
+  left: 50%;
+  animation-delay: -4s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -30px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+.grid-overlay {
+  position: absolute;
+  inset: 0;
+  background-image: 
+    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  max-width: 900px;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hero-content.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: 100px;
+  font-size: 0.875rem;
+  color: #a5b4fc;
+  margin-bottom: 2rem;
+  animation: pulse-border 2s ease-in-out infinite;
+}
+
+.badge-dot {
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+@keyframes pulse-border {
+  0%, 100% { border-color: rgba(99, 102, 241, 0.3); }
+  50% { border-color: rgba(99, 102, 241, 0.6); }
+}
+
+.hero-title {
+  font-size: clamp(2.5rem, 8vw, 5rem);
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 1.5rem;
+  color: white;
+}
+
+.title-line {
+  display: block;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #6366f1, #06b6d4, #f43f5e);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradient-shift 5s ease infinite;
+}
+
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  color: #94a3b8;
+  margin-bottom: 2.5rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 4rem;
+}
+
+:deep(.btn-primary) {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+  border: none !important;
+  padding: 1rem 2rem !important;
+  font-weight: 600 !important;
+  transition: all 0.3s ease !important;
+}
+
+:deep(.btn-primary:hover) {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.5);
+}
+
+:deep(.btn-ghost) {
+  border-color: rgba(255,255,255,0.2) !important;
+  color: white !important;
+  padding: 1rem 2rem !important;
+}
+
+:deep(.btn-ghost:hover) {
+  background: rgba(255,255,255,0.1) !important;
+  border-color: rgba(255,255,255,0.4) !important;
+}
+
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.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);
+}
+
+/* Floating Elements */
+.floating-elements {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  transition: transform 0.3s ease-out;
+}
+
+.float-card {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  background: rgba(255,255,255,0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: white;
+  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;
+}
+
+@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%);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.section-tag {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: rgba(6, 182, 212, 0.1);
+  border: 1px solid rgba(6, 182, 212, 0.3);
+  border-radius: 100px;
+  font-size: 0.875rem;
+  color: #22d3ee;
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 700;
+  color: white;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-card {
+  position: relative;
+  padding: 2rem;
+  background: rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.05);
+  border-radius: 24px;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.feature-card:hover {
+  transform: translateY(-8px);
+  border-color: rgba(99, 102, 241, 0.3);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.feature-card:hover .feature-glow {
+  opacity: 1;
+}
+
+.feature-glow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #6366f1, transparent);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.feature-icon {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: #a5b4fc;
+  margin-bottom: 1.5rem;
+}
+
+.feature-card h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 0.75rem;
+}
+
+.feature-card p {
+  color: #94a3b8;
+  line-height: 1.6;
+}
+
+/* CTA Section */
+.cta-section {
+  position: relative;
+  padding: 8rem 2rem;
+  text-align: center;
+  background: #0a0a0a;
+  overflow: hidden;
+}
+
+.cta-content {
+  position: relative;
+  z-index: 10;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.cta-section h2 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 700;
+  color: white;
+  margin-bottom: 1rem;
+}
+
+.cta-section p {
+  color: #94a3b8;
+  font-size: 1.125rem;
+  margin-bottom: 2rem;
+}
+
+: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) {
+  transform: scale(1.05);
+  box-shadow: 0 20px 40px -10px rgba(244, 63, 94, 0.5);
+}
+
+.cta-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(244, 63, 94, 0.15) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+/* Mobile Adjustments */
+@media (max-width: 768px) {
+  .hero-stats {
+    gap: 1.5rem;
+  }
+  
+  .stat-divider {
+    display: none;
+  }
+  
+  .floating-elements {
+    display: none;
+  }
+}
+</style>