498 lines
17 KiB
TypeScript
498 lines
17 KiB
TypeScript
/**
|
|
* ACTUS MicroLend - DeFi Protocol Interface
|
|
*
|
|
* Theme: Industrial Fintech / Cyberpunk
|
|
* Colors: High-contrast mono + Premium Yellow (#F5E445)
|
|
* Fonts: Manrope (headings), Inter (UI), JetBrains Mono (data)
|
|
*
|
|
* Features:
|
|
* - WebGL shader background
|
|
* - Tech-borders with corner clips
|
|
* - Marquee tickers
|
|
* - Dashboard preview widget
|
|
* - Interactive comparison slider
|
|
*/
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
Shield, Zap, ArrowRight, ChevronRight, ExternalLink,
|
|
TrendingUp, Lock, Database, Activity, Code
|
|
} from 'lucide-react';
|
|
import * as THREE from 'three';
|
|
|
|
// ============================================
|
|
// CONSTANTS
|
|
// ============================================
|
|
const COLORS = {
|
|
background: '#050505',
|
|
surface: '#0a0a0a',
|
|
accent: '#F5E445',
|
|
accentDim: 'rgba(245, 228, 69, 0.2)',
|
|
border: 'rgba(255, 255, 255, 0.1)',
|
|
text: '#ffffff',
|
|
textMuted: '#71717a',
|
|
};
|
|
|
|
const TICKER_ITEMS = [
|
|
'TVL: $2.4B',
|
|
'APY: 12.4%',
|
|
'CONTRACTS: 847',
|
|
'VOLUME: $124M',
|
|
'USERS: 12.4K',
|
|
'CHAINS: 7',
|
|
];
|
|
|
|
const PARTNERS = [
|
|
'Chainlink', 'Aave', 'Compound', 'MakerDAO',
|
|
'Uniswap', 'Yearn', 'Curve', 'Balancer'
|
|
];
|
|
|
|
// ============================================
|
|
// SHADER BACKGROUND
|
|
// ============================================
|
|
const GridShader = {
|
|
uniforms: {
|
|
uTime: { value: 0 },
|
|
uColor: { value: new THREE.Color('#F5E445') },
|
|
},
|
|
vertexShader: `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
uniform float uTime;
|
|
uniform vec3 uColor;
|
|
varying vec2 vUv;
|
|
|
|
void main() {
|
|
vec2 grid = fract(vUv * 20.0);
|
|
float line = step(0.95, grid.x) + step(0.95, grid.y);
|
|
|
|
// Scanning line
|
|
float scan = smoothstep(0.0, 0.1, abs(vUv.y - fract(uTime * 0.1)));
|
|
scan = 1.0 - scan * 0.5;
|
|
|
|
vec3 color = uColor * line * 0.3 * scan;
|
|
float alpha = line * 0.2;
|
|
|
|
gl_FragColor = vec4(color, alpha);
|
|
}
|
|
`,
|
|
};
|
|
|
|
const ShaderGrid: React.FC = () => {
|
|
const materialRef = useRef<THREE.ShaderMaterial>(null);
|
|
|
|
useFrame((state) => {
|
|
if (materialRef.current) {
|
|
materialRef.current.uniforms.uTime.value = state.clock.elapsedTime;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<mesh position={[0, 0, -5]}>
|
|
<planeGeometry args={[20, 20]} />
|
|
<shaderMaterial ref={materialRef} {...GridShader} transparent />
|
|
</mesh>
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// COMPONENTS
|
|
// ============================================
|
|
|
|
// Tech Border Card
|
|
const TechCard: React.FC<{
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
accent?: boolean;
|
|
}> = ({ children, className = '', accent = false }) => (
|
|
<div className={`relative ${className}`}>
|
|
{/* Corner clips */}
|
|
<div className="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 border-[#F5E445]" />
|
|
<div className="absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 border-[#F5E445]" />
|
|
<div className="absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 border-[#F5E445]" />
|
|
<div className="absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 border-[#F5E445]" />
|
|
|
|
{/* Content */}
|
|
<div className={`
|
|
border ${accent ? 'border-[#F5E445]/30' : 'border-white/10'}
|
|
bg-black/40 backdrop-blur-sm p-6
|
|
`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Marquee Ticker
|
|
const MarqueeTicker: React.FC = () => (
|
|
<div className="overflow-hidden bg-[#F5E445] py-2">
|
|
<motion.div
|
|
className="flex whitespace-nowrap"
|
|
animate={{ x: [0, -1000] }}
|
|
transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
|
|
>
|
|
{[...TICKER_ITEMS, ...TICKER_ITEMS, ...TICKER_ITEMS].map((item, i) => (
|
|
<span key={i} className="mx-8 font-mono text-sm text-black font-medium">
|
|
{item}
|
|
</span>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
|
|
// Partner Marquee
|
|
const PartnerMarquee: React.FC = () => (
|
|
<div className="overflow-hidden py-8 border-y border-white/10">
|
|
<motion.div
|
|
className="flex whitespace-nowrap items-center"
|
|
animate={{ x: [0, -500] }}
|
|
transition={{ duration: 15, repeat: Infinity, ease: 'linear' }}
|
|
>
|
|
{[...PARTNERS, ...PARTNERS, ...PARTNERS].map((partner, i) => (
|
|
<span key={i} className="mx-12 text-2xl font-bold text-zinc-700 hover:text-white transition-colors cursor-pointer">
|
|
{partner}
|
|
</span>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
|
|
// Navbar
|
|
const Navbar: React.FC = () => (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 px-6 py-4 bg-black/50 backdrop-blur-md border-b border-white/5">
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded bg-[#F5E445] flex items-center justify-center">
|
|
<Shield className="w-5 h-5 text-black" />
|
|
</div>
|
|
<span className="font-bold text-lg">ACTUS</span>
|
|
<span className="text-[#F5E445] font-mono text-xs">PROTOCOL</span>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{['Protocol', 'Docs', 'Governance', 'Analytics'].map(item => (
|
|
<a
|
|
key={item}
|
|
href="#"
|
|
className="text-sm text-zinc-400 hover:text-white transition-colors font-mono uppercase tracking-wider"
|
|
>
|
|
{item}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<button className="px-4 py-2 bg-[#F5E445] text-black font-mono text-sm font-medium rounded hover:bg-[#e6d63e] transition-colors">
|
|
Launch App
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
|
|
// Hero Section
|
|
const Hero: React.FC = () => (
|
|
<section className="relative min-h-screen flex items-center justify-center px-6 pt-20">
|
|
{/* Background */}
|
|
<div className="absolute inset-0 opacity-30">
|
|
<Canvas>
|
|
<ShaderGrid />
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Scanlines */}
|
|
<div className="scanlines" />
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 max-w-5xl mx-auto text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 border border-[#F5E445]/30 bg-[#F5E445]/10 rounded-full mb-8">
|
|
<Zap className="w-4 h-4 text-[#F5E445]" />
|
|
<span className="font-mono text-sm text-[#F5E445]">MAINNET LIVE</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-6">
|
|
<span className="text-white">Tokenize</span>
|
|
<br />
|
|
<span className="text-[#F5E445]">Legal Contracts</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-zinc-400 max-w-2xl mx-auto mb-10">
|
|
Bridge institutional finance and DeFi. Transform ACTUS-standard
|
|
legal contracts into executable smart contracts.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="px-8 py-4 bg-[#F5E445] text-black font-mono font-bold uppercase tracking-wider rounded flex items-center justify-center gap-2"
|
|
>
|
|
Start Building <ArrowRight className="w-5 h-5" />
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="px-8 py-4 border border-white/20 text-white font-mono uppercase tracking-wider rounded flex items-center justify-center gap-2 hover:bg-white/5 transition-colors"
|
|
>
|
|
Read Docs <ExternalLink className="w-4 h-4" />
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Dashboard Preview */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.8 }}
|
|
className="mt-16"
|
|
>
|
|
<TechCard accent>
|
|
<div className="grid grid-cols-3 gap-4 mb-6">
|
|
{[
|
|
{ label: 'Total Value Locked', value: '$2.4B', change: '+12.4%' },
|
|
{ label: 'Active Contracts', value: '847', change: '+23' },
|
|
{ label: 'Protocol Revenue', value: '$1.2M', change: '+8.7%' },
|
|
].map(stat => (
|
|
<div key={stat.label} className="text-center p-4 bg-white/5 rounded">
|
|
<div className="font-mono text-2xl font-bold text-white">{stat.value}</div>
|
|
<div className="font-mono text-xs text-zinc-500 uppercase mt-1">{stat.label}</div>
|
|
<div className="font-mono text-xs text-green-400 mt-1">{stat.change}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mini chart placeholder */}
|
|
<div className="h-32 bg-gradient-to-t from-[#F5E445]/10 to-transparent rounded relative overflow-hidden">
|
|
<svg className="absolute inset-0 w-full h-full" preserveAspectRatio="none">
|
|
<path
|
|
d="M 0 100 Q 50 60 100 80 T 200 50 T 300 70 T 400 30 T 500 60 L 500 130 L 0 130 Z"
|
|
fill="url(#chartGradient)"
|
|
className="opacity-30"
|
|
/>
|
|
<path
|
|
d="M 0 100 Q 50 60 100 80 T 200 50 T 300 70 T 400 30 T 500 60"
|
|
fill="none"
|
|
stroke="#F5E445"
|
|
strokeWidth="2"
|
|
/>
|
|
<defs>
|
|
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="#F5E445" stopOpacity="0.3" />
|
|
<stop offset="100%" stopColor="#F5E445" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</TechCard>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
// Features Section
|
|
const Features: React.FC = () => {
|
|
const features = [
|
|
{
|
|
icon: <Code className="w-6 h-6" />,
|
|
title: 'Contract Engine',
|
|
description: 'Transform ACTUS financial contracts into Solidity smart contracts with full legal compliance.',
|
|
},
|
|
{
|
|
icon: <Shield className="w-6 h-6" />,
|
|
title: 'Risk AI',
|
|
description: 'ML-powered risk assessment for every contract. Real-time monitoring and alerts.',
|
|
},
|
|
{
|
|
icon: <Database className="w-6 h-6" />,
|
|
title: 'MNEE Settlement',
|
|
description: 'Instant settlement using MNEE stablecoin. Cross-chain compatible.',
|
|
},
|
|
{
|
|
icon: <Activity className="w-6 h-6" />,
|
|
title: 'Analytics',
|
|
description: 'Comprehensive dashboards for portfolio management and performance tracking.',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="relative z-10 px-6 py-24 border-t border-white/5">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-white mb-4">Core Modules</h2>
|
|
<p className="text-zinc-400 max-w-2xl mx-auto">
|
|
Enterprise-grade infrastructure for tokenized legal contracts
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{features.map((feature, i) => (
|
|
<motion.div
|
|
key={feature.title}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
>
|
|
<TechCard className="h-full">
|
|
<div className="w-12 h-12 rounded bg-[#F5E445]/10 flex items-center justify-center text-[#F5E445] mb-4">
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white mb-2">{feature.title}</h3>
|
|
<p className="text-sm text-zinc-400">{feature.description}</p>
|
|
</TechCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Architecture Section
|
|
const Architecture: React.FC = () => {
|
|
const layers = [
|
|
{ name: 'Application Layer', items: ['Web App', 'API Gateway', 'SDK'] },
|
|
{ name: 'Protocol Layer', items: ['Contract Engine', 'Risk AI', 'Oracle'] },
|
|
{ name: 'Settlement Layer', items: ['MNEE', 'Multi-chain', 'Bridges'] },
|
|
{ name: 'Data Layer', items: ['IPFS', 'The Graph', 'Analytics'] },
|
|
];
|
|
|
|
return (
|
|
<section className="relative z-10 px-6 py-24 bg-zinc-900/50">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-white mb-4">Protocol Architecture</h2>
|
|
<p className="text-zinc-400">Battle-tested infrastructure stack</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{layers.map((layer, i) => (
|
|
<motion.div
|
|
key={layer.name}
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="flex items-center gap-4"
|
|
>
|
|
<div className="w-48 shrink-0">
|
|
<span className="font-mono text-sm text-[#F5E445] uppercase tracking-wider">
|
|
{layer.name}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 flex gap-2">
|
|
{layer.items.map(item => (
|
|
<div
|
|
key={item}
|
|
className="flex-1 py-3 px-4 bg-white/5 border border-white/10 text-center text-sm font-mono text-zinc-300 hover:border-[#F5E445]/50 hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// CTA Section
|
|
const CTASection: React.FC = () => (
|
|
<section className="relative z-10 px-6 py-24 border-t border-white/5">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<TechCard accent className="py-16 px-8">
|
|
<h2 className="text-4xl font-bold text-white mb-4">
|
|
Ready to Build?
|
|
</h2>
|
|
<p className="text-zinc-400 mb-8 max-w-xl mx-auto">
|
|
Join the future of tokenized legal contracts. Start building today.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button className="px-8 py-4 bg-[#F5E445] text-black font-mono font-bold uppercase tracking-wider rounded">
|
|
Launch App
|
|
</button>
|
|
<button className="px-8 py-4 border border-[#F5E445]/30 text-[#F5E445] font-mono uppercase tracking-wider rounded hover:bg-[#F5E445]/10 transition-colors">
|
|
View Documentation
|
|
</button>
|
|
</div>
|
|
</TechCard>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
// ============================================
|
|
// MAIN APP
|
|
// ============================================
|
|
export default function ACTUSProtocol() {
|
|
return (
|
|
<>
|
|
{/* Global Styles */}
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #050505;
|
|
color: white;
|
|
}
|
|
|
|
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
.scanlines::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.05) 0px,
|
|
rgba(0, 0, 0, 0.05) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
`}</style>
|
|
|
|
<div className="scanlines" />
|
|
|
|
<Navbar />
|
|
<MarqueeTicker />
|
|
<Hero />
|
|
<Features />
|
|
<PartnerMarquee />
|
|
<Architecture />
|
|
<CTASection />
|
|
|
|
{/* Footer */}
|
|
<footer className="px-6 py-8 border-t border-white/5">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Shield className="w-5 h-5 text-[#F5E445]" />
|
|
<span className="font-bold">ACTUS Protocol</span>
|
|
</div>
|
|
<p className="text-sm text-zinc-500">
|
|
© 2025 ACTUS MicroLend. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|