599 lines
19 KiB
TypeScript
599 lines
19 KiB
TypeScript
/**
|
|
* Example 3: Bioluminescent AI Agency Landing Page
|
|
* Theme: "Bio-Luminescent Spy/Tech"
|
|
* Colors: Deep Black (#030303) + Neon Lime Green (#ccff00)
|
|
* Fonts: Plus Jakarta Sans
|
|
*
|
|
* Use for: AI/SaaS landing pages, agency sites, high-conversion funnels
|
|
*/
|
|
|
|
import React, { useState, useRef, useMemo, useEffect } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import * as THREE from 'three';
|
|
import { X, ArrowRight, Check, Zap, Users, TrendingUp, Database } from 'lucide-react';
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface ModalState {
|
|
isOpen: boolean;
|
|
}
|
|
|
|
interface FormData {
|
|
firstName: string;
|
|
email: string;
|
|
}
|
|
|
|
// =============================================================================
|
|
// CONSTANTS
|
|
// =============================================================================
|
|
|
|
const COLORS = {
|
|
background: '#030303',
|
|
accent: '#ccff00',
|
|
accentDark: '#99cc00',
|
|
glass: 'rgba(255,255,255,0.05)',
|
|
border: 'rgba(255,255,255,0.1)',
|
|
text: '#ffffff',
|
|
textMuted: '#a1a1aa',
|
|
};
|
|
|
|
const FEATURES = [
|
|
{
|
|
title: 'High-Value Systems',
|
|
description: 'Proven frameworks worth $15k+ deployed for your clients automatically.',
|
|
icon: Zap,
|
|
},
|
|
{
|
|
title: 'No-Code AI Sales',
|
|
description: 'AI-powered sales scripts and automations that close deals while you sleep.',
|
|
icon: TrendingUp,
|
|
},
|
|
{
|
|
title: 'DFY Delivery Team',
|
|
description: 'Done-for-you fulfillment team handles all client work. You just sell.',
|
|
icon: Users,
|
|
},
|
|
{
|
|
title: 'Acquisition Protocol',
|
|
description: 'Proprietary lead generation systems that fill your pipeline 24/7.',
|
|
icon: Database,
|
|
},
|
|
];
|
|
|
|
const STATS = [
|
|
{ label: 'Client Retention', value: '+42%' },
|
|
{ label: 'Efficiency Gain', value: '3.5x' },
|
|
{ label: 'Data Points', value: '10k+' },
|
|
];
|
|
|
|
// =============================================================================
|
|
// SHADERS
|
|
// =============================================================================
|
|
|
|
const liquidVertexShader = `
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
`;
|
|
|
|
const liquidFragmentShader = `
|
|
uniform float uTime;
|
|
uniform vec2 uResolution;
|
|
varying vec2 vUv;
|
|
|
|
// Simplex noise function
|
|
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
|
|
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
|
|
|
|
float snoise(vec2 v) {
|
|
const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
|
|
vec2 i = floor(v + dot(v, C.yy));
|
|
vec2 x0 = v - i + dot(i, C.xx);
|
|
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
|
|
vec4 x12 = x0.xyxy + C.xxzz;
|
|
x12.xy -= i1;
|
|
i = mod289(i);
|
|
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
|
|
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
|
|
m = m*m; m = m*m;
|
|
vec3 x = 2.0 * fract(p * C.www) - 1.0;
|
|
vec3 h = abs(x) - 0.5;
|
|
vec3 ox = floor(x + 0.5);
|
|
vec3 a0 = x - ox;
|
|
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
|
|
vec3 g;
|
|
g.x = a0.x * x0.x + h.x * x0.y;
|
|
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
|
|
return 130.0 * dot(m, g);
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = vUv;
|
|
|
|
// Create flowing liquid effect
|
|
float noise1 = snoise(vec2(uv.x * 3.0, uv.y * 4.0 - uTime * 0.3));
|
|
float noise2 = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uv.y * 3.0 - uTime * 0.2));
|
|
float noise = (noise1 + noise2) * 0.5;
|
|
|
|
// Green color gradient
|
|
vec3 deepGreen = vec3(0.0, 0.15, 0.0);
|
|
vec3 neonLime = vec3(0.8, 1.0, 0.0);
|
|
|
|
vec3 color = mix(deepGreen, neonLime, noise * 0.5 + 0.3);
|
|
|
|
// Add some highlights
|
|
float highlight = smoothstep(0.6, 0.9, noise);
|
|
color += vec3(0.2, 0.3, 0.0) * highlight;
|
|
|
|
gl_FragColor = vec4(color, 0.4);
|
|
}
|
|
`;
|
|
|
|
// =============================================================================
|
|
// 3D COMPONENTS
|
|
// =============================================================================
|
|
|
|
const DigitalLiquid: React.FC = () => {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
const uniformsRef = useRef({
|
|
uTime: { value: 0 },
|
|
uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
|
|
});
|
|
|
|
useFrame((state) => {
|
|
uniformsRef.current.uTime.value = state.clock.elapsedTime;
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={[0, 0, -5]}>
|
|
<planeGeometry args={[20, 20, 1, 1]} />
|
|
<shaderMaterial
|
|
vertexShader={liquidVertexShader}
|
|
fragmentShader={liquidFragmentShader}
|
|
uniforms={uniformsRef.current}
|
|
transparent
|
|
/>
|
|
</mesh>
|
|
);
|
|
};
|
|
|
|
const WireframeGeometries: React.FC = () => {
|
|
const icosaRef = useRef<THREE.Mesh>(null);
|
|
const octaRef = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state) => {
|
|
const t = state.clock.elapsedTime;
|
|
if (icosaRef.current) {
|
|
icosaRef.current.rotation.x = t * 0.1;
|
|
icosaRef.current.rotation.y = t * 0.15;
|
|
}
|
|
if (octaRef.current) {
|
|
octaRef.current.rotation.x = -t * 0.12;
|
|
octaRef.current.rotation.z = t * 0.08;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<mesh ref={icosaRef} position={[-3, 2, -2]}>
|
|
<icosahedronGeometry args={[1, 0]} />
|
|
<meshBasicMaterial color={COLORS.accent} wireframe transparent opacity={0.3} />
|
|
</mesh>
|
|
<mesh ref={octaRef} position={[3, -1, -3]}>
|
|
<octahedronGeometry args={[1.2, 0]} />
|
|
<meshBasicMaterial color={COLORS.accent} wireframe transparent opacity={0.2} />
|
|
</mesh>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const BackgroundScene: React.FC = () => (
|
|
<Canvas
|
|
className="fixed inset-0 -z-10"
|
|
camera={{ position: [0, 0, 5], fov: 60 }}
|
|
>
|
|
<DigitalLiquid />
|
|
<WireframeGeometries />
|
|
</Canvas>
|
|
);
|
|
|
|
// =============================================================================
|
|
// UI COMPONENTS
|
|
// =============================================================================
|
|
|
|
// Grid Overlay
|
|
const GridOverlay: React.FC = () => (
|
|
<div className="fixed inset-0 pointer-events-none z-0">
|
|
{/* Grid lines */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(204,255,0,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(204,255,0,0.03) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '80px 80px',
|
|
}}
|
|
/>
|
|
{/* Crosshairs */}
|
|
<div className="absolute top-20 left-20 text-lime-500/20 text-2xl">+</div>
|
|
<div className="absolute top-40 right-32 text-lime-500/20 text-2xl">+</div>
|
|
<div className="absolute bottom-32 left-40 text-lime-500/20 text-2xl">+</div>
|
|
<div className="absolute bottom-48 right-20 text-lime-500/20 text-2xl">+</div>
|
|
</div>
|
|
);
|
|
|
|
// Navbar
|
|
const Navbar: React.FC = () => (
|
|
<nav className="fixed top-6 left-1/2 -translate-x-1/2 z-50">
|
|
<div
|
|
className="px-8 py-3 rounded-full backdrop-blur-xl"
|
|
style={{
|
|
background: COLORS.glass,
|
|
border: `1px solid ${COLORS.border}`,
|
|
}}
|
|
>
|
|
<span className="font-bold tracking-[0.2em] text-sm uppercase">
|
|
AGENT INTEGRATOR<span style={{ color: COLORS.accent }}>®</span>
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
);
|
|
|
|
// Status Badge
|
|
const StatusBadge: React.FC = () => (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8"
|
|
style={{
|
|
background: `${COLORS.accent}15`,
|
|
border: `1px solid ${COLORS.accent}30`,
|
|
}}
|
|
>
|
|
<span
|
|
className="w-2 h-2 rounded-full animate-pulse"
|
|
style={{ background: COLORS.accent }}
|
|
/>
|
|
<span className="text-sm font-medium tracking-wider uppercase" style={{ color: COLORS.accent }}>
|
|
Agent Protocol: Online
|
|
</span>
|
|
</motion.div>
|
|
);
|
|
|
|
// Stats Bar
|
|
const StatsBar: React.FC = () => (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4 }}
|
|
className="flex items-center justify-center gap-8 mt-12 p-6 rounded-2xl backdrop-blur-xl"
|
|
style={{
|
|
background: COLORS.glass,
|
|
border: `1px solid ${COLORS.border}`,
|
|
}}
|
|
>
|
|
{STATS.map((stat, i) => (
|
|
<React.Fragment key={stat.label}>
|
|
{i > 0 && <div className="w-px h-10 bg-white/10" />}
|
|
<div className="text-center">
|
|
<div
|
|
className="text-2xl font-bold"
|
|
style={{ color: COLORS.accent }}
|
|
>
|
|
{stat.value}
|
|
</div>
|
|
<div className="text-xs text-zinc-500 uppercase tracking-wider">
|
|
{stat.label}
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
))}
|
|
</motion.div>
|
|
);
|
|
|
|
// Feature Card
|
|
const FeatureCard: React.FC<{
|
|
feature: typeof FEATURES[0];
|
|
index: number;
|
|
}> = ({ feature, index }) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="p-6 rounded-xl backdrop-blur-sm transition-all group cursor-pointer"
|
|
style={{
|
|
background: COLORS.glass,
|
|
border: `1px solid ${COLORS.border}`,
|
|
}}
|
|
whileHover={{
|
|
borderColor: `${COLORS.accent}50`,
|
|
boxShadow: `0 0 30px ${COLORS.accent}20`,
|
|
}}
|
|
>
|
|
<div
|
|
className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 transition-colors"
|
|
style={{ background: `${COLORS.accent}20` }}
|
|
>
|
|
<Icon size={24} style={{ color: COLORS.accent }} />
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2 group-hover:text-lime-400 transition-colors">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-sm text-zinc-400">{feature.description}</p>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
// Modal
|
|
const Modal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}> = ({ isOpen, onClose }) => {
|
|
const [formData, setFormData] = useState<FormData>({ firstName: '', email: '' });
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Simulate API call
|
|
setTimeout(() => setSubmitted(true), 500);
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style={{ background: 'rgba(0,0,0,0.8)' }}
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="w-full max-w-lg p-8 rounded-2xl backdrop-blur-xl"
|
|
style={{
|
|
background: COLORS.glass,
|
|
border: `1px solid ${COLORS.border}`,
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 p-2 rounded-full hover:bg-white/10 transition-colors"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
|
|
{!submitted ? (
|
|
<>
|
|
<h2 className="text-2xl font-bold mb-2">Get Your Free Blueprint</h2>
|
|
<p className="text-zinc-400 mb-6">
|
|
Enter your details to receive the $500k AI Agency Blueprint
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm text-zinc-400 mb-2">First Name</label>
|
|
<input
|
|
type="text"
|
|
value={formData.firstName}
|
|
onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-lg bg-black/50 border border-white/10 focus:border-lime-500 focus:outline-none transition-colors"
|
|
placeholder="Enter your first name"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-zinc-400 mb-2">Email Address</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-lg bg-black/50 border border-white/10 focus:border-lime-500 focus:outline-none transition-colors"
|
|
placeholder="Enter your email"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full py-4 rounded-lg font-semibold text-black transition-all hover:scale-[1.02]"
|
|
style={{
|
|
background: COLORS.accent,
|
|
boxShadow: `0 0 30px ${COLORS.accent}40`,
|
|
}}
|
|
>
|
|
Show me the AI Agency Blueprint
|
|
</button>
|
|
</form>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<div
|
|
className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
|
|
style={{ background: `${COLORS.accent}20` }}
|
|
>
|
|
<Check size={32} style={{ color: COLORS.accent }} />
|
|
</div>
|
|
<h2 className="text-2xl font-bold mb-2">You're In!</h2>
|
|
<p className="text-zinc-400">Check your email for the blueprint.</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
// =============================================================================
|
|
// MAIN APP
|
|
// =============================================================================
|
|
|
|
const BioluminescentLanding: React.FC = () => {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen text-white overflow-x-hidden"
|
|
style={{ background: COLORS.background }}
|
|
>
|
|
<BackgroundScene />
|
|
<GridOverlay />
|
|
<Navbar />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-screen flex items-center justify-center px-6 pt-20">
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<StatusBadge />
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-5xl md:text-7xl font-bold tracking-tight mb-6"
|
|
style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}
|
|
>
|
|
Join The AI Revolution:
|
|
<br />
|
|
<span className="text-white">You Sell, We Build,</span>
|
|
<br />
|
|
<span
|
|
style={{
|
|
color: COLORS.accent,
|
|
textShadow: `0 0 40px ${COLORS.accent}80`,
|
|
}}
|
|
>
|
|
You Keep Everything.
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="text-xl text-zinc-400 max-w-2xl mx-auto mb-8"
|
|
>
|
|
Get coached to close deals. We provide the team, tools, and systems to deliver.
|
|
</motion.p>
|
|
|
|
<motion.button
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
onClick={() => setModalOpen(true)}
|
|
className="group w-full max-w-md mx-auto flex items-center justify-center gap-3 py-5 rounded-xl font-semibold text-lg text-black transition-all hover:scale-[1.02]"
|
|
style={{
|
|
background: COLORS.accent,
|
|
boxShadow: `0 0 40px ${COLORS.accent}50`,
|
|
}}
|
|
>
|
|
Get Your Free Agency Blueprint
|
|
<ArrowRight className="group-hover:translate-x-1 transition-transform" />
|
|
</motion.button>
|
|
|
|
<StatsBar />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="relative py-24 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
Here's what's inside
|
|
</h2>
|
|
<div
|
|
className="w-24 h-1 mx-auto rounded-full"
|
|
style={{
|
|
background: COLORS.accent,
|
|
boxShadow: `0 0 20px ${COLORS.accent}`,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
|
{FEATURES.map((feature, i) => (
|
|
<FeatureCard key={feature.title} feature={feature} index={i} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Bonus Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="p-8 rounded-xl backdrop-blur-sm text-center"
|
|
style={{
|
|
background: `linear-gradient(135deg, ${COLORS.accent}10, ${COLORS.accent}05)`,
|
|
border: `1px solid ${COLORS.accent}30`,
|
|
}}
|
|
>
|
|
<span
|
|
className="inline-block px-3 py-1 rounded-full text-xs font-semibold mb-4"
|
|
style={{ background: COLORS.accent, color: 'black' }}
|
|
>
|
|
BONUS
|
|
</span>
|
|
<h3 className="text-xl font-bold mb-2">
|
|
Get access to the full $500k AI Agency Blueprint PDF
|
|
</h3>
|
|
<p className="text-zinc-400">
|
|
The exact playbook used to build multiple 6-figure AI agencies
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="relative py-12 px-6 border-t border-white/5">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<p className="text-xs text-zinc-600 mb-4 uppercase tracking-wider">
|
|
Success depends on time you devote to marketing, sales, and client fulfillment.
|
|
Results are not guaranteed and may vary.
|
|
</p>
|
|
<p className="text-xs text-zinc-600 mb-6 uppercase tracking-wider">
|
|
THIS SITE IS NOT A PART OF THE FACEBOOK OR GOOGLE WEBSITE OR FACEBOOK INC OR GOOGLE INC.
|
|
</p>
|
|
<p className="text-sm text-zinc-500">
|
|
Copyrights 2025 | <span style={{ color: COLORS.accent }}>AGENT INTEGRATOR</span>™
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
{/* Modal */}
|
|
<Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
|
|
|
|
{/* Fonts */}
|
|
<style>{`
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BioluminescentLanding;
|