mirror of
https://github.com/lukaszraczylo/claude-mnemonic.git
synced 2026-06-08 23:39:40 +00:00
Initial commit
This commit is contained in:
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<div class="bg-slate-950 text-white min-h-screen relative overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<div class="fixed inset-0 pointer-events-none">
|
||||
<!-- Gradient orbs -->
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-amber-400/5 rounded-full blur-3xl animate-float-delayed"></div>
|
||||
<div class="absolute top-1/2 right-0 w-64 h-64 bg-slate-700/20 rounded-full blur-3xl animate-glow"></div>
|
||||
|
||||
<!-- Grid pattern -->
|
||||
<div class="absolute inset-0 bg-[linear-gradient(rgba(148,163,184,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.03)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
|
||||
|
||||
<!-- Floating particles -->
|
||||
<div v-for="i in 12" :key="i"
|
||||
class="particle animate-particle"
|
||||
:style="{
|
||||
left: `${(i * 8.3) % 100}%`,
|
||||
animationDelay: `${i * 1.5}s`,
|
||||
animationDuration: `${15 + (i % 5) * 3}s`
|
||||
}"></div>
|
||||
</div>
|
||||
|
||||
<NavBar :mobile-menu-open="mobileMenuOpen" @toggle-menu="mobileMenuOpen = !mobileMenuOpen" />
|
||||
|
||||
<HeroSection
|
||||
badge="The missing piece for Claude Code"
|
||||
title-before="Yesterday's context."
|
||||
title-highlight="Today's session."
|
||||
subtitle="Stop re-explaining your codebase. Claude Mnemonic captures bug fixes, architecture decisions, and coding patterns - then brings them back exactly when you need them."
|
||||
/>
|
||||
|
||||
<!-- Problem Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6 relative">
|
||||
<div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
|
||||
<div>
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">Sound familiar?</h2>
|
||||
<p class="text-slate-400 text-base sm:text-lg mb-8">Every Claude Code session starts fresh. That bug you fixed last Tuesday? Gone. The auth flow you explained in detail? Forgotten. Your team's naming conventions? You'll explain them again.</p>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"We fixed this exact race condition last week..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"No, we use kebab-case for API routes, not camelCase..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
|
||||
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base">"The database is Postgres, not MySQL. I told you yesterday..."</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3 sm:gap-4 text-white">
|
||||
<i class="fas fa-check-circle text-amber-500 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm sm:text-base"><strong>Mnemonic remembers so you don't have to repeat yourself.</strong></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 relative overflow-hidden glow-amber">
|
||||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-500 to-transparent"></div>
|
||||
<p class="text-slate-500 text-xs sm:text-sm mb-4 font-mono">// What Mnemonic captures automatically:</p>
|
||||
<div class="space-y-3">
|
||||
<FlowItem icon="fas fa-bug" title="Bug fixes & solutions" description='"Fixed N+1 query in user loader by adding .includes(:posts)"' />
|
||||
<FlowItem icon="fas fa-sitemap" title="Architecture decisions" description='"Using event sourcing for audit trail - all mutations go through EventStore"' />
|
||||
<FlowItem icon="fas fa-code-branch" title="Project conventions" description='"API routes use /api/v1/ prefix, kebab-case for endpoints"' />
|
||||
<FlowItem icon="fas fa-shield-alt" title="Security patterns" description='"Always validate JWT on server side, never trust client claims"' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-20 lg:py-28 bg-slate-900/30 relative">
|
||||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent"></div>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<SectionHeader title="Built for real workflows" subtitle="Not just storage - intelligent context that makes Claude more useful over time" />
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<FeatureCard
|
||||
v-for="feature in features"
|
||||
:key="feature.title"
|
||||
:icon="feature.icon"
|
||||
:title="feature.title"
|
||||
:description="feature.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Before/After Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="The difference" subtitle="Same question. Different experience." />
|
||||
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
|
||||
<!-- Before -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6 relative border-red-500/20">
|
||||
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-red-500/20 text-red-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">Without Mnemonic</div>
|
||||
<div class="space-y-3 sm:space-y-4 mt-8">
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> I'd be happy to help! Can you tell me about your authentication setup? What framework are you using? How is the login flow structured?</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> We use NextAuth with Postgres. The flow goes through /api/auth/... We talked about this last week...</p>
|
||||
</div>
|
||||
<p class="text-red-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-clock mr-2"></i>5+ minutes of re-explaining context</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- After -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6 relative border-green-500/20">
|
||||
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-green-500/20 text-green-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">With Mnemonic</div>
|
||||
<div class="space-y-3 sm:space-y-4 mt-8">
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
|
||||
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> Looking at your NextAuth setup with Postgres, I see the issue is likely in the callback at <code class="text-amber-300 text-xs">/api/auth/[...nextauth].ts</code>. Based on the session validation pattern we established, the fix is...</p>
|
||||
</div>
|
||||
<p class="text-green-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-bolt mr-2"></i>Instant context. Immediate value.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section id="how-it-works" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Zero setup. Zero maintenance." subtitle="Install once, benefit forever. Mnemonic works silently in the background." />
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 relative">
|
||||
<div class="hidden lg:block absolute top-10 left-[60px] right-[60px] h-0.5 bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 opacity-30"></div>
|
||||
<StepCard
|
||||
v-for="step in steps"
|
||||
:key="step.number"
|
||||
:number="step.number"
|
||||
:title="step.title"
|
||||
:description="step.description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section id="installation" class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Quick install" subtitle="One command. No configuration. No account required." />
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-2 mb-6 sm:mb-8">
|
||||
<button
|
||||
v-for="tab in installTabs"
|
||||
:key="tab.id"
|
||||
@click="activeTab = tab.id"
|
||||
:class="[
|
||||
'px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all',
|
||||
activeTab === tab.id
|
||||
? 'bg-amber-500/15 border border-amber-500 text-amber-500'
|
||||
: 'glass text-slate-400 hover:border-slate-600'
|
||||
]"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'macos'">
|
||||
<CodeBlock :code="installCommands.macos">
|
||||
<span class="text-slate-500"># That's it. Seriously.</span>
|
||||
<br>
|
||||
<span class="text-amber-400">curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'windows'">
|
||||
<CodeBlock :code="installCommands.windows">
|
||||
<span class="text-slate-500"># PowerShell (as Administrator)</span>
|
||||
<br>
|
||||
<span class="text-amber-400">irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'source'">
|
||||
<CodeBlock :code="installCommands.source">
|
||||
<span class="text-slate-500"># For contributors and tinkerers</span>
|
||||
<br>
|
||||
<span class="text-amber-400">git clone https://github.com/lukaszraczylo/claude-mnemonic.git</span>
|
||||
<br>
|
||||
<span class="text-amber-400">cd claude-mnemonic</span>
|
||||
<br>
|
||||
<span class="text-amber-400">make build && make install</span>
|
||||
<br><br>
|
||||
<span class="text-slate-500"># Requires: Go 1.24+, Node.js 18+, CGO compiler</span>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
After install, open <a href="http://localhost:37777" class="text-amber-400 hover:underline animated-underline">localhost:37777</a> to see the dashboard.
|
||||
Start a new Claude Code CLI session - memory is now active.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Requirements Section -->
|
||||
<section id="requirements" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Requirements" subtitle="Minimal dependencies. Maximum functionality." />
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
|
||||
<!-- Required -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fas fa-check-circle text-green-500"></i>
|
||||
<span class="text-white font-semibold text-sm sm:text-base">Required</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="req in requiredDeps" :key="req.name" class="flex items-start gap-3 p-3 bg-slate-800/50 rounded-lg">
|
||||
<i :class="[req.icon, 'text-amber-500 mt-0.5']"></i>
|
||||
<div>
|
||||
<code class="text-white text-xs sm:text-sm font-semibold">{{ req.name }}</code>
|
||||
<p class="text-slate-400 text-xs mt-1">{{ req.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fas fa-plus-circle text-amber-500"></i>
|
||||
<span class="text-white font-semibold text-sm sm:text-base">Optional (for semantic search)</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="req in optionalDeps" :key="req.name" class="flex items-start gap-3 p-3 bg-slate-800/50 rounded-lg">
|
||||
<i :class="[req.icon, 'text-slate-500 mt-0.5']"></i>
|
||||
<div>
|
||||
<code class="text-white text-xs sm:text-sm font-semibold">{{ req.name }}</code>
|
||||
<p class="text-slate-400 text-xs mt-1">{{ req.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-500 text-xs mt-4">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
Without these, core functionality (SQLite storage, full-text search) still works.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-8 glass rounded-xl p-4 sm:p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i class="fas fa-terminal text-amber-500"></i>
|
||||
<span class="text-white font-semibold text-sm">Install optional dependencies</span>
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-3 gap-3 text-xs">
|
||||
<div class="bg-slate-800/50 rounded-lg p-3">
|
||||
<p class="text-slate-400 mb-2">macOS</p>
|
||||
<code class="text-amber-400">brew install python3</code><br>
|
||||
<code class="text-amber-400">pip3 install uvx</code>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3">
|
||||
<p class="text-slate-400 mb-2">Linux</p>
|
||||
<code class="text-amber-400">apt install python3</code><br>
|
||||
<code class="text-amber-400">pip3 install uvx</code>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 rounded-lg p-3">
|
||||
<p class="text-slate-400 mb-2">Windows</p>
|
||||
<code class="text-amber-400">winget install Python.Python.3</code><br>
|
||||
<code class="text-amber-400">pip install uvx</code>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-500 text-xs mt-3">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
Requires Python 3.13+. Most package managers install the latest version.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<section id="configuration" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Fully configurable" subtitle="Works out of the box, but adapts to your preferences" />
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
|
||||
<!-- Config file example -->
|
||||
<div class="glass rounded-2xl p-5 sm:p-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fas fa-cog text-amber-500"></i>
|
||||
<span class="text-white font-semibold text-sm sm:text-base">~/.claude-mnemonic/settings.json</span>
|
||||
</div>
|
||||
<pre class="text-xs sm:text-sm font-mono overflow-x-auto"><code><span class="text-slate-500">{</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_WORKER_PORT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">37777</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS"</span><span class="text-slate-500">:</span> <span class="text-amber-400">100</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">25</span><span class="text-slate-500">,</span>
|
||||
<span class="text-emerald-400">"CLAUDE_MNEMONIC_MODEL"</span><span class="text-slate-500">:</span> <span class="text-sky-400">"haiku"</span>
|
||||
<span class="text-slate-500">}</span></code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Config options list -->
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
<div v-for="config in configOptions" :key="config.name" class="glass rounded-xl p-4 hover:border-amber-500/20 transition-colors">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-amber-500/15 rounded-lg flex items-center justify-center text-amber-500 flex-shrink-0 text-sm">
|
||||
<i :class="config.icon"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<code class="text-amber-400 text-xs sm:text-sm">{{ config.name }}</code>
|
||||
<p class="text-slate-400 text-xs sm:text-sm mt-1">{{ config.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
All settings can also be set via environment variables. See <a href="https://github.com/lukaszraczylo/claude-mnemonic#configuration" target="_blank" class="text-amber-400 hover:underline">full documentation</a> for all options.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Details -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<SectionHeader title="Under the hood" subtitle="Built with simplicity and performance in mind" />
|
||||
<div class="grid sm:grid-cols-3 gap-4 sm:gap-8 text-center">
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">Go</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Worker service and hooks. Fast startup, low memory footprint, zero runtime dependencies.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">SQLite</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">FTS5 full-text search. Single file database. No server to manage. Survives restarts.</p>
|
||||
</div>
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
|
||||
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">ChromaDB</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Vector embeddings for semantic search. "Fix auth" finds "JWT validation issue" automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Section -->
|
||||
<section class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<SectionHeader title="Open source. Real person." subtitle="Not another anonymous package - built by a developer you can verify" />
|
||||
|
||||
<div class="glass rounded-2xl p-6 sm:p-8 text-center">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-8 mb-6">
|
||||
<a href="https://github.com/lukaszraczylo" target="_blank" class="group">
|
||||
<img
|
||||
src="https://github.com/lukaszraczylo.png"
|
||||
alt="Lukasz Raczylo"
|
||||
class="w-20 h-20 sm:w-24 sm:h-24 rounded-full border-2 border-slate-700 group-hover:border-amber-500 transition-colors"
|
||||
/>
|
||||
</a>
|
||||
<div class="text-center sm:text-left">
|
||||
<h3 class="text-white font-semibold text-lg sm:text-xl mb-1">Lukasz Raczylo</h3>
|
||||
<p class="text-slate-400 text-sm mb-3">Principal Engineer & Open Source Maintainer</p>
|
||||
<div class="flex flex-wrap justify-center sm:justify-start gap-3">
|
||||
<a href="https://github.com/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fab fa-github mr-1"></i>GitHub
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fab fa-linkedin mr-1"></i>LinkedIn
|
||||
</a>
|
||||
<a href="https://raczylo.com" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
|
||||
<i class="fas fa-globe mr-1"></i>Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-3 gap-4 pt-6 border-t border-slate-700/50">
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">100%</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Open Source</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">MIT</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">License</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">0</div>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">Data collection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
|
||||
Unlike anonymous packages, you can verify who built this, read every line of code, and reach out directly with questions.
|
||||
<br class="hidden sm:block">
|
||||
Your security matters - that's why transparency is non-negotiable.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-20 lg:py-28 px-4 sm:px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<SectionHeader title="Questions?" />
|
||||
<div class="grid sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
<FaqItem
|
||||
v-for="faq in faqs"
|
||||
:key="faq.question"
|
||||
:question="faq.question"
|
||||
:answer="faq.answer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<FooterSection />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import NavBar from './components/NavBar.vue'
|
||||
import HeroSection from './components/HeroSection.vue'
|
||||
import SectionHeader from './components/SectionHeader.vue'
|
||||
import FeatureCard from './components/FeatureCard.vue'
|
||||
import StepCard from './components/StepCard.vue'
|
||||
import FlowItem from './components/FlowItem.vue'
|
||||
import CodeBlock from './components/CodeBlock.vue'
|
||||
import FaqItem from './components/FaqItem.vue'
|
||||
import FooterSection from './components/FooterSection.vue'
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
const activeTab = ref('macos')
|
||||
|
||||
const features = [
|
||||
{ icon: 'fas fa-brain', title: 'Learns as you work', description: 'Every bug fix, every architecture decision, every "aha moment" - captured automatically without breaking your flow.' },
|
||||
{ icon: 'fas fa-folder-tree', title: 'Project-aware context', description: 'Your React knowledge stays in React projects. Your Go patterns stay in Go projects. No context pollution.' },
|
||||
{ icon: 'fas fa-globe', title: 'Shared best practices', description: 'Security patterns, performance tips, and universal learnings automatically available across all your projects.' },
|
||||
{ icon: 'fas fa-search', title: 'Finds what matters', description: 'Semantic search finds relevant memories even when you don\'t remember the exact words. "That auth thing" just works.' },
|
||||
{ icon: 'fas fa-credit-card', title: 'No API keys needed', description: 'Uses Claude Code CLI - works with your existing Claude Pro/Max subscription. No separate API costs.' },
|
||||
{ icon: 'fas fa-lock', title: '100% private', description: 'Your code context never leaves your machine. No telemetry. No cloud sync. Your memories are yours.' },
|
||||
]
|
||||
|
||||
const steps = [
|
||||
{ number: 1, title: 'Install', description: 'One command. Hooks into Claude Code automatically.' },
|
||||
{ number: 2, title: 'Work normally', description: 'Code with Claude as usual. Mnemonic listens silently in the background.' },
|
||||
{ number: 3, title: 'Knowledge builds', description: 'Every session adds to your knowledge base. Bug fixes. Decisions. Patterns.' },
|
||||
{ number: 4, title: 'Context appears', description: 'Start a new session - relevant memories are already there. No re-explaining.' },
|
||||
]
|
||||
|
||||
const installTabs = [
|
||||
{ id: 'macos', label: 'macOS / Linux' },
|
||||
{ id: 'windows', label: 'Windows' },
|
||||
{ id: 'source', label: 'From Source' },
|
||||
]
|
||||
|
||||
const installCommands = {
|
||||
macos: `curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash`,
|
||||
windows: `irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex`,
|
||||
source: `git clone https://github.com/lukaszraczylo/claude-mnemonic.git\ncd claude-mnemonic\nmake build && make install`,
|
||||
}
|
||||
|
||||
const configOptions = [
|
||||
{ name: 'CLAUDE_MNEMONIC_WORKER_PORT', description: 'HTTP port for the worker service (default: 37777)', icon: 'fas fa-network-wired' },
|
||||
{ name: 'CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS', description: 'Maximum observations injected per session (default: 100)', icon: 'fas fa-layer-group' },
|
||||
{ name: 'CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT', description: 'Observations with full narrative detail, rest are condensed (default: 25)', icon: 'fas fa-expand' },
|
||||
{ name: 'CLAUDE_MNEMONIC_MODEL', description: 'Model for processing observations (default: haiku)', icon: 'fas fa-microchip' },
|
||||
]
|
||||
|
||||
const requiredDeps = [
|
||||
{ name: 'Claude Code CLI', description: 'Host application - this is a plugin for Claude Code. Uses your existing subscription (Pro/Max) instead of API keys.', icon: 'fas fa-terminal' },
|
||||
{ name: 'jq', description: 'JSON processor used during installation. Usually pre-installed on most systems.', icon: 'fas fa-code' },
|
||||
]
|
||||
|
||||
const optionalDeps = [
|
||||
{ name: 'Python 3.13+', description: 'Required for ChromaDB semantic search. Natural language queries like "that auth bug" work.', icon: 'fab fa-python' },
|
||||
{ name: 'uvx', description: 'Python package runner for ChromaDB MCP server.', icon: 'fas fa-box' },
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{ question: 'Will it confuse Claude with wrong context?', answer: 'No. Mnemonic uses project isolation and semantic relevance scoring. Only memories from the current project (or global best practices) are injected, and only when they\'re actually relevant to your prompt.' },
|
||||
{ question: 'What exactly gets saved?', answer: 'Bug fixes with context ("Fixed race condition by adding mutex"), architecture decisions ("Using repository pattern for data access"), conventions ("All API routes prefixed with /api/v1"), and learnings you want to preserve.' },
|
||||
{ question: 'Can I delete or edit memories?', answer: 'Yes. The web dashboard at localhost:37777 lets you browse, search, edit, and delete any memory. You\'re always in control.' },
|
||||
{ question: 'Does it work with my existing Claude Code setup?', answer: 'Yes. Mnemonic installs as a Claude Code plugin with hooks. Your existing workflows, settings, and shortcuts remain unchanged.' },
|
||||
{ question: 'What if I switch between projects frequently?', answer: 'That\'s the point. Each project has isolated memories. Switch from your Python ML project to your TypeScript app - context switches automatically.' },
|
||||
{ question: 'Is there a performance impact?', answer: 'Minimal. The Go worker is lightweight (typically under 30MB RAM). Context injection at session start takes milliseconds for most projects.' },
|
||||
]
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="glass rounded-xl p-4 sm:p-6 relative max-w-4xl mx-auto glow-amber">
|
||||
<button @click="copyCode" class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-slate-800/50 border border-slate-700/50 text-slate-500 hover:text-white hover:border-slate-600 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md text-xs transition-all">
|
||||
{{ copied ? 'Copied!' : 'Copy' }}
|
||||
</button>
|
||||
<pre class="text-xs sm:text-sm whitespace-pre-wrap break-all font-mono pr-16 sm:pr-20"><slot></slot></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
function copyCode() {
|
||||
navigator.clipboard.writeText(props.code)
|
||||
copied.value = true
|
||||
setTimeout(() => copied.value = false, 2000)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="glass rounded-xl p-4 sm:p-6 hover:border-amber-500/20 transition-colors">
|
||||
<h3 class="text-white font-semibold text-sm sm:text-base mb-2 sm:mb-3">{{ question }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{{ answer }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
question: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
answer: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="glass rounded-2xl p-5 sm:p-8 relative overflow-hidden group hover:border-amber-500/30 hover:-translate-y-1 transition-all duration-300">
|
||||
<div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-amber-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-amber-500/15 rounded-xl flex items-center justify-center mb-4 sm:mb-5 text-amber-500 text-lg sm:text-xl">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
<h3 class="text-white font-semibold text-base sm:text-lg mb-2 sm:mb-3">{{ title }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="flex items-start sm:items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-800/50 rounded-lg border-l-4 border-amber-500">
|
||||
<div class="w-8 h-8 sm:w-10 sm:h-10 bg-amber-500/15 rounded-lg flex items-center justify-center text-amber-500 flex-shrink-0 text-sm sm:text-base">
|
||||
<i :class="icon"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<strong class="block text-white text-sm sm:text-base mb-0.5 sm:mb-1">{{ title }}</strong>
|
||||
<span class="text-slate-500 text-xs sm:text-sm block break-words">{{ description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<footer class="border-t border-slate-800 py-10 sm:py-16 relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row justify-between items-center gap-4 sm:gap-6">
|
||||
<div class="flex flex-wrap justify-center gap-4 sm:gap-6">
|
||||
<a v-for="link in links" :key="link.href" :href="link.href" target="_blank"
|
||||
class="text-slate-500 hover:text-white text-xs sm:text-sm transition-colors animated-underline">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-slate-600 text-xs sm:text-sm text-center">{{ copyright }}</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
links: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: 'GitHub', href: 'https://github.com/lukaszraczylo/claude-mnemonic' },
|
||||
{ label: 'Releases', href: 'https://github.com/lukaszraczylo/claude-mnemonic/releases' },
|
||||
{ label: 'Issues', href: 'https://github.com/lukaszraczylo/claude-mnemonic/issues' },
|
||||
{ label: 'MIT License', href: 'https://github.com/lukaszraczylo/claude-mnemonic/blob/main/LICENSE' },
|
||||
]
|
||||
},
|
||||
copyright: {
|
||||
type: String,
|
||||
default: 'Made with care for the Claude Code community'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<section class="min-h-screen flex items-center relative pt-24 sm:pt-28 pb-16 sm:pb-20">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute top-[-50%] left-1/2 -translate-x-1/2 w-[150%] h-full bg-[radial-gradient(ellipse_at_center,rgba(245,158,11,0.12)_0%,transparent_60%)] opacity-60"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 text-center">
|
||||
<div class="inline-flex items-center gap-2 glass px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm text-slate-400 mb-6 sm:mb-8 opacity-0 animate-fade-in-up">
|
||||
<span class="w-2 h-2 bg-amber-500 rounded-full animate-pulse-slow"></span>
|
||||
{{ badge }}
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight opacity-0 animate-fade-in-up animation-delay-100">
|
||||
{{ titleBefore }}<br class="hidden sm:block">
|
||||
<span class="sm:hidden"> </span>
|
||||
<span class="text-gradient">{{ titleHighlight }}</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-base sm:text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-8 sm:mb-10 opacity-0 animate-fade-in-up animation-delay-200 px-2">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center mb-12 sm:mb-16 opacity-0 animate-fade-in-up animation-delay-300 px-4 sm:px-0">
|
||||
<a :href="primaryCta.href" class="inline-flex items-center justify-center gap-2 bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-6 sm:px-8 py-3 sm:py-3.5 rounded-lg font-semibold hover:scale-105 hover:shadow-lg hover:shadow-amber-500/30 transition-all">
|
||||
<i :class="primaryCta.icon"></i>
|
||||
{{ primaryCta.label }}
|
||||
</a>
|
||||
<a :href="secondaryCta.href" target="_blank" class="inline-flex items-center justify-center gap-2 glass text-white px-6 sm:px-8 py-3 sm:py-3.5 rounded-lg font-medium hover:border-amber-500/30 hover:bg-amber-500/10 transition-all">
|
||||
<i :class="secondaryCta.icon"></i>
|
||||
{{ secondaryCta.label }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Install Command -->
|
||||
<div class="opacity-0 animate-fade-in-up animation-delay-400 px-2 sm:px-0">
|
||||
<div class="glass rounded-xl px-4 sm:px-6 py-4 sm:py-5 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4 max-w-4xl mx-auto glow-amber">
|
||||
<code class="text-amber-400 text-xs sm:text-sm md:text-base flex-1 text-center sm:text-left break-all font-mono">{{ installCommand }}</code>
|
||||
<button @click="copyCommand" class="text-slate-500 hover:text-white transition-colors p-2 flex-shrink-0 rounded-lg hover:bg-slate-800/50">
|
||||
<i :class="copied ? 'fas fa-check text-amber-500' : 'fas fa-copy'"></i>
|
||||
<span class="ml-2 text-sm sm:hidden">{{ copied ? 'Copied!' : 'Copy' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
badge: {
|
||||
type: String,
|
||||
default: 'Persistent Memory for Claude Code'
|
||||
},
|
||||
titleBefore: {
|
||||
type: String,
|
||||
default: 'Claude forgets.'
|
||||
},
|
||||
titleHighlight: {
|
||||
type: String,
|
||||
default: 'Make it remember.'
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: 'Capture learnings, decisions, and patterns from your coding sessions. Bring that knowledge back in every future conversation.'
|
||||
},
|
||||
primaryCta: {
|
||||
type: Object,
|
||||
default: () => ({ label: 'Install Now', href: '#installation', icon: 'fas fa-download' })
|
||||
},
|
||||
secondaryCta: {
|
||||
type: Object,
|
||||
default: () => ({ label: 'View Source', href: 'https://github.com/lukaszraczylo/claude-mnemonic', icon: 'fab fa-github' })
|
||||
},
|
||||
installCommand: {
|
||||
type: String,
|
||||
default: 'curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash'
|
||||
}
|
||||
})
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
function copyCommand() {
|
||||
navigator.clipboard.writeText('curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash')
|
||||
copied.value = true
|
||||
setTimeout(() => copied.value = false, 2000)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-b from-slate-950 via-slate-950/95 to-transparent backdrop-blur-md">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 sm:py-5 flex justify-between items-center">
|
||||
<a href="#" class="flex items-center gap-2 sm:gap-3 text-white font-bold text-xl sm:text-2xl">
|
||||
<div class="w-8 h-8 sm:w-9 sm:h-9 bg-gradient-to-br from-amber-500 to-amber-400 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-brain text-slate-950 text-sm sm:text-base"></i>
|
||||
</div>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
<ul class="hidden md:flex gap-6 lg:gap-8">
|
||||
<li v-for="link in links" :key="link.href">
|
||||
<a :href="link.href" class="text-slate-400 hover:text-white text-sm font-medium transition-colors animated-underline">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<a :href="githubUrl" target="_blank" class="text-slate-400 hover:text-white text-lg sm:text-xl transition-colors">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#installation" class="hidden sm:inline-flex bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg font-semibold text-sm hover:scale-105 hover:shadow-lg hover:shadow-amber-500/30 transition-all">
|
||||
Get Started
|
||||
</a>
|
||||
<button @click="$emit('toggle-menu')" class="md:hidden text-white text-xl p-2">
|
||||
<i :class="mobileMenuOpen ? 'fas fa-times' : 'fas fa-bars'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="opacity-0 -translate-y-2"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition duration-150 ease-in"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 -translate-y-2"
|
||||
>
|
||||
<div v-if="mobileMenuOpen" class="md:hidden bg-slate-900/95 backdrop-blur-xl border-t border-slate-800 px-4 sm:px-6 py-4">
|
||||
<a v-for="link in links" :key="link.href" :href="link.href"
|
||||
@click="$emit('toggle-menu')"
|
||||
class="block py-3 text-slate-400 hover:text-white border-b border-slate-800 last:border-0 transition-colors">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<a href="#installation" @click="$emit('toggle-menu')"
|
||||
class="mt-4 block text-center bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-5 py-2.5 rounded-lg font-semibold text-sm">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</Transition>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Mnemonic'
|
||||
},
|
||||
links: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: 'Features', href: '#features' },
|
||||
{ label: 'How It Works', href: '#how-it-works' },
|
||||
{ label: 'Install', href: '#installation' },
|
||||
{ label: 'FAQ', href: '#faq' },
|
||||
]
|
||||
},
|
||||
githubUrl: {
|
||||
type: String,
|
||||
default: 'https://github.com/lukaszraczylo/claude-mnemonic'
|
||||
},
|
||||
mobileMenuOpen: Boolean
|
||||
})
|
||||
|
||||
defineEmits(['toggle-menu'])
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="text-center mb-10 sm:mb-16">
|
||||
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3 sm:mb-4">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p v-if="subtitle" class="text-sm sm:text-base md:text-lg text-slate-400 max-w-xl mx-auto px-2">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
subtitle: String
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="text-center relative">
|
||||
<div class="w-14 h-14 sm:w-20 sm:h-20 bg-slate-900 border-2 border-amber-500 rounded-full flex items-center justify-center mx-auto mb-4 sm:mb-6 text-amber-500 font-bold text-xl sm:text-3xl relative z-10">
|
||||
{{ number }}
|
||||
</div>
|
||||
<h3 class="text-white font-semibold text-base sm:text-lg mb-2 sm:mb-3">{{ title }}</h3>
|
||||
<p class="text-slate-400 text-xs sm:text-sm">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
number: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,114 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans text-slate-300;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-sans font-bold tracking-tight;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
@apply font-mono;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Animated gradient background */
|
||||
.bg-animated-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(245, 158, 11, 0.1) 0%,
|
||||
transparent 50%,
|
||||
rgba(245, 158, 11, 0.05) 100%
|
||||
);
|
||||
background-size: 200% 200%;
|
||||
animation: gradientShift 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Floating particles */
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(245, 158, 11, 0.4);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
@apply bg-slate-900/60 backdrop-blur-xl border border-slate-700/50;
|
||||
}
|
||||
|
||||
/* Glow effect */
|
||||
.glow-amber {
|
||||
box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
|
||||
}
|
||||
|
||||
/* Animated underline */
|
||||
.animated-underline {
|
||||
position: relative;
|
||||
}
|
||||
.animated-underline::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.animated-underline:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Animated border */
|
||||
.animated-border {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.animated-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #f59e0b, transparent);
|
||||
animation: borderSlide 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes borderSlide {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animation-delay-100 { animation-delay: 0.1s; }
|
||||
.animation-delay-200 { animation-delay: 0.2s; }
|
||||
.animation-delay-300 { animation-delay: 0.3s; }
|
||||
.animation-delay-400 { animation-delay: 0.4s; }
|
||||
.animation-delay-500 { animation-delay: 0.5s; }
|
||||
|
||||
/* Text gradient */
|
||||
.text-gradient {
|
||||
@apply bg-gradient-to-r from-amber-400 to-amber-500 bg-clip-text text-transparent;
|
||||
}
|
||||
|
||||
/* Opacity starting state for animations */
|
||||
.opacity-0-start {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user