mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
first commit
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/devour_logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Devour - Context Ingestion & Management for AI. Scrape, index, and serve documentation from multiple sources." />
|
||||
<meta name="keywords" content="AI, context, documentation, scraping, vector embeddings, MCP, semantic search" />
|
||||
<meta name="author" content="Devour" />
|
||||
|
||||
<!-- Open Graph / Social -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Devour - Context Ingestion for AI" />
|
||||
<meta property="og:description" content="Scrape, index, and serve documentation from multiple sources. Feed structured context to AI models." />
|
||||
<meta property="og:image" content="/devour_logo.svg" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Devour - Context Ingestion for AI" />
|
||||
<meta name="twitter:description" content="Scrape, index, and serve documentation from multiple sources." />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Devour - Context Ingestion for AI</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
code, pre, .font-mono {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+4956
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "landing",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-accordion": "^1.2.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.34.3",
|
||||
"lucide-react": "^0.575.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@tailwindcss/postcss": "^4.2.0",
|
||||
"@types/node": "^24.10.13",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"autoprefixer": "^10.4.24",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.2.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.48.0",
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 74 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { ParticleBackground } from "@/components/ui/magicui"
|
||||
import { Hero } from "@/components/sections/Hero"
|
||||
import { Features } from "@/components/sections/Features"
|
||||
import { CodeShowcase } from "@/components/sections/CodeShowcase"
|
||||
import { Architecture } from "@/components/sections/Architecture"
|
||||
import { Languages } from "@/components/sections/Languages"
|
||||
import { QuickStart } from "@/components/sections/QuickStart"
|
||||
import { Footer } from "@/components/sections/Footer"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background text-foreground overflow-x-hidden">
|
||||
{/* Particle Background */}
|
||||
<ParticleBackground />
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="relative z-10">
|
||||
<Hero />
|
||||
<Features />
|
||||
<CodeShowcase />
|
||||
<Architecture />
|
||||
<Languages />
|
||||
<QuickStart />
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,198 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Database, Brain, Server, Search, RefreshCw, Globe, Github, FileJson, FolderOpen } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
const sources = [
|
||||
{ icon: Github, label: "GitHub", color: "text-purple-400" },
|
||||
{ icon: Globe, label: "Web", color: "text-blue-400" },
|
||||
{ icon: FileJson, label: "OpenAPI", color: "text-green-400" },
|
||||
{ icon: FolderOpen, label: "Local", color: "text-orange-400" },
|
||||
]
|
||||
|
||||
export function Architecture() {
|
||||
return (
|
||||
<section id="architecture" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-30" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
System <GradientText>Architecture</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
A modular architecture designed for flexibility and scalability
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Architecture Diagram */}
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
{/* Central Flow */}
|
||||
<div className="relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 md:p-12">
|
||||
{/* Data Sources */}
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
{sources.map((source, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 + i * 0.1 }}
|
||||
className="flex flex-col items-center gap-2"
|
||||
>
|
||||
<div className={`p-3 rounded-lg bg-white/5 border border-white/10`}>
|
||||
<source.icon className={`w-5 h-5 ${source.color}`} />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{source.label}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arrow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ delay: 0.5, duration: 0.3 }}
|
||||
className="w-px h-8 bg-gradient-to-b from-cyan-500 to-transparent origin-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Components Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||
{/* Scraper */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-purple-500/30 bg-purple-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-purple-500/20">
|
||||
<Globe className="w-4 h-4 text-purple-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Scraper</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Multi-source data extraction</p>
|
||||
<div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
|
||||
</motion.div>
|
||||
|
||||
{/* Indexer */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-cyan-500/30 bg-cyan-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-cyan-500/20">
|
||||
<Brain className="w-4 h-4 text-cyan-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Indexer</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">OpenAI embeddings generation</p>
|
||||
<div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
|
||||
<div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
|
||||
</motion.div>
|
||||
|
||||
{/* Storage */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="relative p-4 rounded-xl border border-teal-500/30 bg-teal-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-teal-500/20">
|
||||
<Database className="w-4 h-4 text-teal-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Storage</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Vector DB (chromem)</p>
|
||||
<div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Arrow Down */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ delay: 0.7, duration: 0.3 }}
|
||||
className="w-px h-8 bg-gradient-to-b from-teal-500 to-transparent origin-top"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Server & Query */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Server */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="p-4 rounded-xl border border-green-500/30 bg-green-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-green-500/20">
|
||||
<Server className="w-4 h-4 text-green-400" />
|
||||
</div>
|
||||
<span className="font-semibold">MCP Server</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Local (stdio) or Remote (HTTP)</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Query */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="p-4 rounded-xl border border-blue-500/30 bg-blue-500/5"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-blue-500/20">
|
||||
<Search className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<span className="font-semibold">Query Engine</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Semantic similarity search</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Scheduler Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="absolute -bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full border border-orange-500/30 bg-orange-500/10 backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span className="text-xs font-medium text-orange-400">Auto-Update Scheduler</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Output */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-xl border border-cyan-500/30 bg-cyan-500/5">
|
||||
<span className="text-sm text-muted-foreground">AI Response</span>
|
||||
<span className="text-cyan-400">→</span>
|
||||
<span className="text-sm font-medium">Context Chunks</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Data Flow Description */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
<span className="text-cyan-400 font-medium">Data Flow:</span> User Query → Devour Server →
|
||||
Embedding Generation → Vector Search → Top-K Relevant Docs → AI Response
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import { useState } from "react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { Copy, Check, Terminal } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const codeExamples = [
|
||||
{
|
||||
id: "get",
|
||||
title: "Quick Docs Fetch",
|
||||
description: "Instantly fetch documentation for popular languages",
|
||||
language: "bash",
|
||||
code: `# Fetch Go HTTP package docs
|
||||
devour get go http
|
||||
|
||||
# Fetch Python asyncio docs
|
||||
devour get python asyncio
|
||||
|
||||
# Fetch React hooks documentation
|
||||
devour get react hooks
|
||||
|
||||
# With markdown output
|
||||
devour get docker compose --format markdown`,
|
||||
},
|
||||
{
|
||||
id: "scrape",
|
||||
title: "Scrape Sources",
|
||||
description: "Scrape documentation from multiple sources",
|
||||
language: "bash",
|
||||
code: `# Scrape from a URL
|
||||
devour scrape https://docs.example.com
|
||||
|
||||
# Scrape a GitHub repo
|
||||
devour scrape https://github.com/org/repo
|
||||
|
||||
# Scrape local docs
|
||||
devour scrape ./docs
|
||||
|
||||
# Multiple sources
|
||||
devour scrape --sources sources.yaml`,
|
||||
},
|
||||
{
|
||||
id: "query",
|
||||
title: "Query Context",
|
||||
description: "Search indexed documentation with semantic search",
|
||||
language: "bash",
|
||||
code: `# Search indexed docs
|
||||
devour query "How do I authenticate with the API?"
|
||||
|
||||
# With options
|
||||
devour query "authentication" --limit 5 --format json
|
||||
|
||||
# With similarity threshold
|
||||
devour query "server setup" --threshold 0.7`,
|
||||
},
|
||||
{
|
||||
id: "serve",
|
||||
title: "Start Server",
|
||||
description: "Run as MCP server for AI integration",
|
||||
language: "bash",
|
||||
code: `# Local MCP server (stdio transport)
|
||||
devour serve
|
||||
|
||||
# Remote MCP server (HTTP)
|
||||
devour serve --remote --port 8080
|
||||
|
||||
# With custom config
|
||||
devour serve --config ./devour.yaml`,
|
||||
},
|
||||
]
|
||||
|
||||
export function CodeShowcase() {
|
||||
const [activeTab, setActiveTab] = useState("get")
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const activeExample = codeExamples.find((e) => e.id === activeTab)
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
if (activeExample) {
|
||||
await navigator.clipboard.writeText(activeExample.code)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="code" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/10 to-background" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Simple <GradientText>CLI</GradientText> Interface
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Powerful commands to manage your documentation context
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Tabs */}
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="flex flex-wrap gap-2 mb-6 justify-center">
|
||||
{codeExamples.map((example) => (
|
||||
<button
|
||||
key={example.id}
|
||||
onClick={() => setActiveTab(example.id)}
|
||||
className={cn(
|
||||
"px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200",
|
||||
activeTab === example.id
|
||||
? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/30"
|
||||
: "bg-white/5 text-muted-foreground border border-white/10 hover:bg-white/10 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{example.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Code Block */}
|
||||
<FadeIn delay={0.3}>
|
||||
<div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Terminal className="w-3.5 h-3.5" />
|
||||
<span>{activeExample?.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="flex items-center gap-1.5 px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3.5 h-3.5 text-green-400" />
|
||||
<span className="text-green-400">Copied!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span>Copy</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Code Content */}
|
||||
<div className="relative p-4 font-mono text-sm overflow-x-auto">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{activeExample?.code.split("\n").map((line, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span className="select-none text-muted-foreground/30 w-8 text-right mr-4">
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
{line.startsWith("#") ? (
|
||||
<span className="text-muted-foreground">{line}</span>
|
||||
) : (
|
||||
<span>
|
||||
<span className="text-cyan-400">devour</span>
|
||||
{line.substring(7)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="px-4 py-3 border-t border-white/10 bg-white/5">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{activeExample?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import { motion } from "framer-motion"
|
||||
import {
|
||||
Github,
|
||||
FileJson,
|
||||
Globe,
|
||||
FolderOpen,
|
||||
Brain,
|
||||
Search,
|
||||
RefreshCw,
|
||||
Plug,
|
||||
Database,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Shield,
|
||||
} from "lucide-react"
|
||||
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Github,
|
||||
title: "GitHub Repositories",
|
||||
description: "Clone and parse repos, extract README, docs, and code structure automatically.",
|
||||
color: "text-purple-400",
|
||||
bgColor: "bg-purple-500/10",
|
||||
},
|
||||
{
|
||||
icon: FileJson,
|
||||
title: "OpenAPI/Swagger",
|
||||
description: "Parse Swagger specs into structured endpoints with full API documentation.",
|
||||
color: "text-green-400",
|
||||
bgColor: "bg-green-500/10",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Web Documentation",
|
||||
description: "Crawl documentation sites with Colly for comprehensive content extraction.",
|
||||
color: "text-blue-400",
|
||||
bgColor: "bg-blue-500/10",
|
||||
},
|
||||
{
|
||||
icon: FolderOpen,
|
||||
title: "Local Files",
|
||||
description: "Index your project's docs folder for local documentation management.",
|
||||
color: "text-orange-400",
|
||||
bgColor: "bg-orange-500/10",
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
title: "Vector Embeddings",
|
||||
description: "Semantic similarity search via OpenAI text-embedding-3-small/large models.",
|
||||
color: "text-cyan-400",
|
||||
bgColor: "bg-cyan-500/10",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "Intelligent Indexing",
|
||||
description: "Metadata tracking with source, timestamp, and file type information.",
|
||||
color: "text-teal-400",
|
||||
bgColor: "bg-teal-500/10",
|
||||
},
|
||||
{
|
||||
icon: RefreshCw,
|
||||
title: "Auto Updates",
|
||||
description: "Configurable scheduler with content hash comparison for change detection.",
|
||||
color: "text-pink-400",
|
||||
bgColor: "bg-pink-500/10",
|
||||
},
|
||||
{
|
||||
icon: Plug,
|
||||
title: "MCP Integration",
|
||||
description: "Local stdio transport or remote HTTP/SSE for flexible deployment.",
|
||||
color: "text-indigo-400",
|
||||
bgColor: "bg-indigo-500/10",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Flexible Storage",
|
||||
description: "Organized storage for docs, vector embeddings, and metadata tracking.",
|
||||
color: "text-yellow-400",
|
||||
bgColor: "bg-yellow-500/10",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Quality Scorecard",
|
||||
description: "Built-in code quality analysis with severity-based scoring system.",
|
||||
color: "text-red-400",
|
||||
bgColor: "bg-red-500/10",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Fast & Efficient",
|
||||
description: "Parallel scraping workers with configurable concurrency and rate limiting.",
|
||||
color: "text-amber-400",
|
||||
bgColor: "bg-amber-500/10",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Two Modes",
|
||||
description: "Local mode for single developers, remote mode for teams and multi-project.",
|
||||
color: "text-emerald-400",
|
||||
bgColor: "bg-emerald-500/10",
|
||||
},
|
||||
]
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0 grid-background opacity-50" />
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Powerful <GradientText>Features</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Everything you need to manage context for AI-powered development
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6" staggerDelay={0.05}>
|
||||
{features.map((feature, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02, y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative h-full p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
{/* Glow Effect on Hover */}
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500/0 via-cyan-500/5 to-teal-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
{/* Icon */}
|
||||
<div className={`relative inline-flex p-3 rounded-lg ${feature.bgColor} mb-4`}>
|
||||
<feature.icon className={`w-5 h-5 ${feature.color}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="relative text-lg font-semibold mb-2 group-hover:text-cyan-400 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="relative text-sm text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Bottom Gradient Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/0 to-transparent group-hover:via-cyan-500/50 transition-all duration-300" />
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="text-center mt-16">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Ready to supercharge your AI context?
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer group">
|
||||
<span>View all features</span>
|
||||
<motion.span
|
||||
initial={{ x: 0 }}
|
||||
whileHover={{ x: 4 }}
|
||||
className="inline-block"
|
||||
>
|
||||
→
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { Github, Twitter, Book, Heart } from "lucide-react"
|
||||
import { FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
const links = {
|
||||
product: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Quick Start", href: "#quickstart" },
|
||||
{ label: "Languages", href: "#languages" },
|
||||
{ label: "Architecture", href: "#architecture" },
|
||||
],
|
||||
resources: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Reference", href: "#" },
|
||||
{ label: "Examples", href: "#" },
|
||||
{ label: "Changelog", href: "#" },
|
||||
],
|
||||
community: [
|
||||
{ label: "GitHub", href: "https://github.com/yourorg/devour" },
|
||||
{ label: "Discord", href: "#" },
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "Contributing", href: "#" },
|
||||
],
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="relative border-t border-white/10 bg-black/20">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-20" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6 py-12 md:py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
|
||||
{/* Brand */}
|
||||
<div className="lg:col-span-2">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<img
|
||||
src="/devour_logo.svg"
|
||||
alt="Devour Logo"
|
||||
className="w-10 h-10"
|
||||
/>
|
||||
<span className="text-xl font-bold">Devour</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-6 max-w-xs">
|
||||
Context ingestion and management for AI. Feed structured, relevant
|
||||
context to AI models for generating accurate, fully working code.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="https://github.com/yourorg/devour"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Github className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Twitter className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="p-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 hover:border-cyan-500/30 transition-all"
|
||||
>
|
||||
<Book className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Product Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.1}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Product</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.product.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Resources Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.2}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Resources</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.resources.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Community Links */}
|
||||
<div>
|
||||
<FadeIn delay={0.3}>
|
||||
<h4 className="font-semibold mb-4 text-cyan-400">Community</h4>
|
||||
<ul className="space-y-3">
|
||||
{links.community.map((link, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={link.href}
|
||||
target={link.href.startsWith("http") ? "_blank" : undefined}
|
||||
rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-12 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
© {new Date().getFullYear()} Devour. MIT License.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground flex items-center gap-1">
|
||||
Built with <Heart className="w-4 h-4 text-red-400 fill-red-400" /> for better AI context
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Gradient Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Github, Terminal, Sparkles, ArrowRight } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Gradient Orbs */}
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cyan-500/10 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
<div className="flex flex-col items-center text-center space-y-8">
|
||||
{/* Badge */}
|
||||
<FadeIn delay={0.1}>
|
||||
<Badge variant="glow" className="px-4 py-1.5 text-sm">
|
||||
<Sparkles className="w-3.5 h-3.5 mr-1.5" />
|
||||
Context Ingestion for AI
|
||||
</Badge>
|
||||
</FadeIn>
|
||||
|
||||
{/* Logo */}
|
||||
<FadeIn delay={0.2}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-cyan-500/20 blur-2xl rounded-full scale-150" />
|
||||
<img
|
||||
src="/devour_logo.svg"
|
||||
alt="Devour Logo"
|
||||
className="relative w-32 h-32 md:w-40 md:h-40 drop-shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Title */}
|
||||
<FadeIn delay={0.3}>
|
||||
<h1 className="text-5xl md:text-7xl font-bold tracking-tight">
|
||||
<GradientText>Devour</GradientText>
|
||||
</h1>
|
||||
</FadeIn>
|
||||
|
||||
{/* Subtitle */}
|
||||
<FadeIn delay={0.4}>
|
||||
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl">
|
||||
Context Ingestion & Management for{" "}
|
||||
<span className="text-cyan-400">AI</span>
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
{/* Description */}
|
||||
<FadeIn delay={0.5}>
|
||||
<p className="text-base md:text-lg text-muted-foreground/80 max-w-3xl leading-relaxed">
|
||||
Scrape, index, and serve documentation from multiple sources.
|
||||
Feed structured, relevant context to AI models for generating
|
||||
accurate, fully working code.
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<FadeIn delay={0.6}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<Button size="xl" variant="glow" className="group">
|
||||
<Terminal className="mr-2 h-4 w-4" />
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a
|
||||
href="https://github.com/yourorg/devour"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Github className="mr-2 h-4 w-4" />
|
||||
View on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<FadeIn delay={0.7}>
|
||||
<div className="flex flex-wrap justify-center gap-8 mt-8 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse" />
|
||||
<span>Multi-Source Scraping</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-teal-500 animate-pulse" />
|
||||
<span>Vector Embeddings</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />
|
||||
<span>MCP Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* Terminal Preview */}
|
||||
<FadeIn delay={0.8}>
|
||||
<div className="w-full max-w-3xl mt-12">
|
||||
<div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
|
||||
{/* Terminal Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground ml-2">terminal</span>
|
||||
</div>
|
||||
{/* Terminal Content */}
|
||||
<div className="p-4 font-mono text-sm">
|
||||
<div className="text-muted-foreground">$ devour get go http</div>
|
||||
<div className="mt-2 text-cyan-400">
|
||||
<span className="text-green-400">✓</span> Fetching Go net/http documentation...
|
||||
</div>
|
||||
<div className="mt-1 text-muted-foreground/80">
|
||||
<span className="text-cyan-500">→</span> Indexing 47 documents
|
||||
</div>
|
||||
<div className="mt-1 text-muted-foreground/80">
|
||||
<span className="text-cyan-500">→</span> Creating vector embeddings
|
||||
</div>
|
||||
<div className="mt-2 text-green-400">
|
||||
Ready! Query with: devour query "How to create a server?"
|
||||
</div>
|
||||
</div>
|
||||
{/* Glow Effect */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.2, duration: 0.6 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="w-6 h-10 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-1"
|
||||
>
|
||||
<div className="w-1.5 h-2.5 rounded-full bg-cyan-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { GradientText, FadeIn, StaggerContainer, StaggerItem } from "@/components/ui/magicui"
|
||||
|
||||
const languages = [
|
||||
{
|
||||
name: "Go",
|
||||
alias: "golang",
|
||||
icon: "🐹",
|
||||
color: "from-cyan-400 to-cyan-600",
|
||||
docs: "pkg.go.dev",
|
||||
},
|
||||
{
|
||||
name: "Python",
|
||||
alias: "py",
|
||||
icon: "🐍",
|
||||
color: "from-yellow-400 to-green-500",
|
||||
docs: "docs.python.org",
|
||||
},
|
||||
{
|
||||
name: "Rust",
|
||||
alias: "rust",
|
||||
icon: "🦀",
|
||||
color: "from-orange-400 to-red-500",
|
||||
docs: "docs.rs",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
alias: "ts",
|
||||
icon: "📘",
|
||||
color: "from-blue-400 to-blue-600",
|
||||
docs: "typescriptlang.org",
|
||||
},
|
||||
{
|
||||
name: "React",
|
||||
alias: "react",
|
||||
icon: "⚛️",
|
||||
color: "from-cyan-400 to-purple-500",
|
||||
docs: "react.dev",
|
||||
},
|
||||
{
|
||||
name: "Vue",
|
||||
alias: "vue",
|
||||
icon: "💚",
|
||||
color: "from-green-400 to-emerald-500",
|
||||
docs: "vuejs.org",
|
||||
},
|
||||
{
|
||||
name: "Nuxt",
|
||||
alias: "nuxt",
|
||||
icon: "💚",
|
||||
color: "from-green-400 to-teal-500",
|
||||
docs: "nuxt.com",
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
alias: "docker",
|
||||
icon: "🐳",
|
||||
color: "from-blue-400 to-cyan-500",
|
||||
docs: "docs.docker.com",
|
||||
},
|
||||
{
|
||||
name: "Java",
|
||||
alias: "java",
|
||||
icon: "☕",
|
||||
color: "from-red-400 to-orange-500",
|
||||
docs: "docs.oracle.com",
|
||||
},
|
||||
{
|
||||
name: "Spring",
|
||||
alias: "spring",
|
||||
icon: "🍃",
|
||||
color: "from-green-500 to-green-600",
|
||||
docs: "docs.spring.io",
|
||||
},
|
||||
{
|
||||
name: "Astro",
|
||||
alias: "astro",
|
||||
icon: "🚀",
|
||||
color: "from-purple-400 to-pink-500",
|
||||
docs: "docs.astro.build",
|
||||
},
|
||||
{
|
||||
name: "Cloudflare",
|
||||
alias: "cf",
|
||||
icon: "☁️",
|
||||
color: "from-orange-400 to-yellow-500",
|
||||
docs: "developers.cloudflare.com",
|
||||
},
|
||||
]
|
||||
|
||||
export function Languages() {
|
||||
return (
|
||||
<section id="languages" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/5 to-background" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Supported <GradientText>Languages</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Quick access to documentation for popular languages and frameworks
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Languages Grid */}
|
||||
<StaggerContainer
|
||||
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
|
||||
staggerDelay={0.05}
|
||||
>
|
||||
{languages.map((lang, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05, y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="text-3xl mb-3">{lang.icon}</div>
|
||||
|
||||
{/* Name */}
|
||||
<h3 className="font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
|
||||
{lang.name}
|
||||
</h3>
|
||||
|
||||
{/* Alias */}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<span className="font-mono bg-white/10 px-1.5 py-0.5 rounded">
|
||||
devour get {lang.alias.toLowerCase()}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{/* Gradient Line on Hover */}
|
||||
<div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r ${lang.color} opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-b-xl`} />
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
|
||||
{/* Usage Example */}
|
||||
<FadeIn delay={0.4}>
|
||||
<div className="mt-12 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<p className="text-sm text-muted-foreground">Quick usage example:</p>
|
||||
<div className="flex flex-wrap justify-center gap-2 font-mono text-sm">
|
||||
<span className="text-muted-foreground">$</span>
|
||||
<span className="text-cyan-400">devour</span>
|
||||
<span className="text-white">get</span>
|
||||
<span className="text-green-400">go</span>
|
||||
<span className="text-white">http</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Fetches Go net/http package documentation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* More Info */}
|
||||
<FadeIn delay={0.5}>
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
More languages and frameworks are being added regularly.
|
||||
<br />
|
||||
<span className="text-cyan-400">Request a new source</span> on GitHub.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
import { motion } from "framer-motion"
|
||||
import { Download, Terminal, Copy, Check, ArrowRight } from "lucide-react"
|
||||
import { GradientText, FadeIn } from "@/components/ui/magicui"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Install",
|
||||
description: "Install Devour using Go",
|
||||
command: "go install github.com/yourorg/devour/cmd/devour@latest",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Initialize",
|
||||
description: "Create a configuration file",
|
||||
command: "devour init",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Get Docs",
|
||||
description: "Fetch documentation",
|
||||
command: "devour get go http",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Query",
|
||||
description: "Search your documentation",
|
||||
command: 'devour query "How to create a server?"',
|
||||
},
|
||||
]
|
||||
|
||||
export function QuickStart() {
|
||||
const [copiedStep, setCopiedStep] = useState<number | null>(null)
|
||||
|
||||
const copyToClipboard = async (text: string, stepIndex: number) => {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopiedStep(stepIndex)
|
||||
setTimeout(() => setCopiedStep(null), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="quickstart" className="relative py-24 md:py-32 overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 grid-background opacity-30" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<div className="container relative z-10 px-4 md:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<FadeIn>
|
||||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
Quick <GradientText>Start</GradientText>
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Get up and running in minutes with just a few commands
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid gap-6">
|
||||
{steps.map((step, index) => (
|
||||
<FadeIn key={index} delay={0.1 + index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
className="group relative flex flex-col md:flex-row md:items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm hover:border-cyan-500/30 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
{/* Step Number */}
|
||||
<div className="flex-shrink-0 w-16 h-16 flex items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 border border-cyan-500/30">
|
||||
<span className="text-2xl font-bold text-cyan-400">{step.number}</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold mb-1 group-hover:text-cyan-400 transition-colors">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{step.description}
|
||||
</p>
|
||||
|
||||
{/* Command */}
|
||||
<div className="relative flex items-center gap-2 p-3 rounded-lg bg-black/40 border border-white/10 font-mono text-sm">
|
||||
<Terminal className="w-4 h-4 text-cyan-400 flex-shrink-0" />
|
||||
<code className="flex-1 text-muted-foreground overflow-x-auto">
|
||||
<span className="text-green-400">$</span> {step.command}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(step.command, index)}
|
||||
className="flex-shrink-0 p-1.5 rounded hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{copiedStep === index ? (
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4 text-muted-foreground hover:text-foreground" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow (except last) */}
|
||||
{index < steps.length - 1 && (
|
||||
<div className="hidden md:flex absolute -bottom-6 left-1/2 -translate-x-1/2 z-10">
|
||||
<ArrowRight className="w-4 h-4 text-cyan-500/50 rotate-90" />
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prerequisites */}
|
||||
<FadeIn delay={0.5}>
|
||||
<div className="mt-16 text-center">
|
||||
<div className="inline-flex flex-col items-center gap-4 p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<h4 className="font-semibold">Prerequisites</h4>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500" />
|
||||
<span>Go 1.22+</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-teal-500" />
|
||||
<span>OpenAI API key</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
{/* CTA */}
|
||||
<FadeIn delay={0.6}>
|
||||
<div className="mt-12 text-center">
|
||||
<Button size="xl" variant="glow" className="group">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Install Devour
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
glow: "border-transparent bg-primary/20 text-primary border border-primary/30",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
glow: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
xl: "h-12 rounded-lg px-10 text-base",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,79 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
@@ -0,0 +1,399 @@
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
// Particle Background Component
|
||||
interface Particle {
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
speedX: number
|
||||
speedY: number
|
||||
opacity: number
|
||||
}
|
||||
|
||||
export function ParticleBackground({ className }: { className?: string }) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const particlesRef = useRef<Particle[]>([])
|
||||
const animationRef = useRef<number | undefined>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext("2d")
|
||||
if (!ctx) return
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
}
|
||||
|
||||
resizeCanvas()
|
||||
window.addEventListener("resize", resizeCanvas)
|
||||
|
||||
// Initialize particles
|
||||
const particleCount = 80
|
||||
particlesRef.current = Array.from({ length: particleCount }, () => ({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
size: Math.random() * 2 + 0.5,
|
||||
speedX: (Math.random() - 0.5) * 0.5,
|
||||
speedY: (Math.random() - 0.5) * 0.5,
|
||||
opacity: Math.random() * 0.5 + 0.2,
|
||||
}))
|
||||
|
||||
const animate = () => {
|
||||
if (!ctx || !canvas) return
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
particlesRef.current.forEach((particle) => {
|
||||
particle.x += particle.speedX
|
||||
particle.y += particle.speedY
|
||||
|
||||
if (particle.x < 0) particle.x = canvas.width
|
||||
if (particle.x > canvas.width) particle.x = 0
|
||||
if (particle.y < 0) particle.y = canvas.height
|
||||
if (particle.y > canvas.height) particle.y = 0
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
|
||||
ctx.fillStyle = `rgba(6, 182, 212, ${particle.opacity})`
|
||||
ctx.fill()
|
||||
})
|
||||
|
||||
// Draw connections
|
||||
particlesRef.current.forEach((particle, i) => {
|
||||
particlesRef.current.slice(i + 1).forEach((otherParticle) => {
|
||||
const dx = particle.x - otherParticle.x
|
||||
const dy = particle.y - otherParticle.y
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (distance < 150) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(particle.x, particle.y)
|
||||
ctx.lineTo(otherParticle.x, otherParticle.y)
|
||||
ctx.strokeStyle = `rgba(6, 182, 212, ${0.1 * (1 - distance / 150)})`
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.stroke()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resizeCanvas)
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={cn("fixed inset-0 pointer-events-none", className)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Shimmer Button Component
|
||||
export function ShimmerButton({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
"relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 p-[1px] font-medium transition-all hover:scale-105 active:scale-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="relative inline-flex items-center justify-center gap-2 rounded-lg bg-background px-6 py-3 font-medium">
|
||||
{children}
|
||||
</span>
|
||||
<span className="absolute inset-0 -z-10 bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 opacity-50 blur-xl transition-opacity group-hover:opacity-75" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Animated Border Component
|
||||
export function AnimatedBorder({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("relative rounded-xl p-[1px]", className)}>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500 via-teal-500 to-cyan-500 animate-gradient-x" />
|
||||
<div className="relative rounded-xl bg-background">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Glow Card Component
|
||||
export function GlowCard({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 })
|
||||
const cardRef = React.useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!cardRef.current) return
|
||||
const rect = cardRef.current.getBoundingClientRect()
|
||||
setMousePosition({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={cardRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
className={cn(
|
||||
"relative overflow-hidden rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm transition-all hover:border-cyan-500/30",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: `radial-gradient(600px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(6, 182, 212, 0.1), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Text Reveal Animation
|
||||
export function TextReveal({
|
||||
children,
|
||||
className,
|
||||
delay = 0,
|
||||
}: {
|
||||
children: string
|
||||
className?: string
|
||||
delay?: number
|
||||
}) {
|
||||
const words = children.split(" ")
|
||||
|
||||
return (
|
||||
<motion.div className={cn("flex flex-wrap gap-x-2", className)}>
|
||||
{words.map((word, i) => (
|
||||
<motion.span
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: delay + i * 0.1,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
>
|
||||
{word}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Fade In Animation Wrapper
|
||||
export function FadeIn({
|
||||
children,
|
||||
className,
|
||||
delay = 0,
|
||||
direction = "up",
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
delay?: number
|
||||
direction?: "up" | "down" | "left" | "right"
|
||||
}) {
|
||||
const directions = {
|
||||
up: { y: 40, x: 0 },
|
||||
down: { y: -40, x: 0 },
|
||||
left: { x: 40, y: 0 },
|
||||
right: { x: -40, y: 0 },
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, ...directions[direction] }}
|
||||
whileInView={{ opacity: 1, y: 0, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.6, delay, ease: "easeOut" }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stagger Container
|
||||
export function StaggerContainer({
|
||||
children,
|
||||
className,
|
||||
staggerDelay = 0.1,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
staggerDelay?: number
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={{
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: staggerDelay,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stagger Item
|
||||
export function StaggerItem({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
}}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// Typewriter Effect
|
||||
export function Typewriter({
|
||||
text,
|
||||
className,
|
||||
speed = 50,
|
||||
}: {
|
||||
text: string
|
||||
className?: string
|
||||
speed?: number
|
||||
}) {
|
||||
const [displayText, setDisplayText] = useState("")
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (currentIndex < text.length) {
|
||||
const timeout = setTimeout(() => {
|
||||
setDisplayText((prev) => prev + text[currentIndex])
|
||||
setCurrentIndex((prev) => prev + 1)
|
||||
}, speed)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [currentIndex, text, speed])
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
{displayText}
|
||||
<span className="animate-pulse">|</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Gradient Text
|
||||
export function GradientText({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"bg-gradient-to-r from-cyan-400 via-cyan-300 to-teal-400 bg-clip-text text-transparent",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Animated Counter
|
||||
export function AnimatedCounter({
|
||||
value,
|
||||
duration = 2,
|
||||
className,
|
||||
}: {
|
||||
value: number
|
||||
duration?: number
|
||||
className?: string
|
||||
}) {
|
||||
const [count, setCount] = useState(0)
|
||||
const nodeRef = useRef<HTMLSpanElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const node = nodeRef.current
|
||||
if (!node) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
let startTime: number
|
||||
const animate = (currentTime: number) => {
|
||||
if (!startTime) startTime = currentTime
|
||||
const progress = Math.min(
|
||||
(currentTime - startTime) / (duration * 1000),
|
||||
1
|
||||
)
|
||||
setCount(Math.floor(progress * value))
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate)
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate)
|
||||
observer.unobserve(node)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
)
|
||||
|
||||
observer.observe(node)
|
||||
return () => observer.disconnect()
|
||||
}, [value, duration])
|
||||
|
||||
return (
|
||||
<span ref={nodeRef} className={className}>
|
||||
{count}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Custom CSS Variables */
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 187 92% 43%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 187 92% 43%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: hsl(222.2 84% 4.9%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(217.2 32.6% 17.5%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(215 20.2% 35.1%);
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.gradient-text {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(to right, #22d3ee, #67e8f9, #2dd4bf);
|
||||
}
|
||||
|
||||
/* Glow effects */
|
||||
.glow {
|
||||
box-shadow: 0 0 20px rgba(6, 182, 212, 0.3),
|
||||
0 0 40px rgba(6, 182, 212, 0.2),
|
||||
0 0 60px rgba(6, 182, 212, 0.1);
|
||||
}
|
||||
|
||||
.glow-text {
|
||||
text-shadow: 0 0 20px rgba(6, 182, 212, 0.5),
|
||||
0 0 40px rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
|
||||
/* Glass effect */
|
||||
.glass {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Grid background */
|
||||
.grid-background {
|
||||
background-image:
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
/* Animated gradient border */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: linear-gradient(hsl(222.2 84% 4.9%), hsl(222.2 84% 4.9%)) padding-box,
|
||||
linear-gradient(135deg, hsl(187 92% 43%), hsl(160 84% 39%), hsl(187 92% 43%)) border-box;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.5rem;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background: rgba(6, 182, 212, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes glow-anim {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); }
|
||||
50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-glow {
|
||||
animation: glow-anim 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s linear infinite;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,102 @@
|
||||
import tailwindcssAnimate from "tailwindcss-animate"
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
cyan: {
|
||||
50: '#ecfeff',
|
||||
100: '#cffafe',
|
||||
200: '#a5f3fc',
|
||||
300: '#67e8f9',
|
||||
400: '#22d3ee',
|
||||
500: '#06b6d4',
|
||||
600: '#0891b2',
|
||||
700: '#0e7490',
|
||||
800: '#155e75',
|
||||
900: '#164e63',
|
||||
950: '#083344',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
shimmer: {
|
||||
from: { backgroundPosition: "0 0" },
|
||||
to: { backgroundPosition: "-200% 0" },
|
||||
},
|
||||
float: {
|
||||
"0%, 100%": { transform: "translateY(0)" },
|
||||
"50%": { transform: "translateY(-10px)" },
|
||||
},
|
||||
pulse: {
|
||||
"0%, 100%": { opacity: "1" },
|
||||
"50%": { opacity: "0.5" },
|
||||
},
|
||||
glow: {
|
||||
"0%, 100%": { boxShadow: "0 0 20px rgba(6, 182, 212, 0.3)" },
|
||||
"50%": { boxShadow: "0 0 40px rgba(6, 182, 212, 0.6)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
shimmer: "shimmer 2s linear infinite",
|
||||
float: "float 3s ease-in-out infinite",
|
||||
pulse: "pulse 2s ease-in-out infinite",
|
||||
glow: "glow 2s ease-in-out infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [tailwindcssAnimate],
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Path aliases */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"root":["./src/App.tsx","./src/main.tsx","./src/components/sections/Architecture.tsx","./src/components/sections/CodeShowcase.tsx","./src/components/sections/Features.tsx","./src/components/sections/Footer.tsx","./src/components/sections/Hero.tsx","./src/components/sections/Languages.tsx","./src/components/sections/QuickStart.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/magicui.tsx","./src/lib/utils.ts"],"version":"5.9.3"}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
declare const _default: import("vite").UserConfig;
|
||||
export default _default;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user