1447 lines
63 KiB
HTML
1447 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CRESYNC — Your 24/7 CRE Employee</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
cursor: none !important;
|
|
}
|
|
|
|
.custom-cursor {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #22c55e;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
transition: transform 0.1s ease, background 0.2s ease;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.custom-cursor.hover {
|
|
transform: scale(2);
|
|
background: rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.cursor-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #22c55e;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
* { cursor: auto !important; }
|
|
.custom-cursor, .cursor-dot { display: none; }
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #22c55e 0%, #10b981 25%, #06b6d4 50%, #8b5cf6 75%, #22c55e 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.hero-gradient {
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.15), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.1), transparent),
|
|
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(139, 92, 246, 0.1), transparent);
|
|
}
|
|
|
|
.mesh-gradient {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(34, 197, 94, 0.2) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
|
|
radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
|
|
radial-gradient(at 0% 100%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 80% 100%, rgba(6, 182, 212, 0.1) 0px, transparent 50%);
|
|
animation: mesh-move 20s ease infinite;
|
|
}
|
|
|
|
@keyframes mesh-move {
|
|
0%, 100% { filter: hue-rotate(0deg); }
|
|
50% { filter: hue-rotate(15deg); }
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(40px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.glow {
|
|
box-shadow:
|
|
0 0 60px rgba(34, 197, 94, 0.2),
|
|
0 0 100px rgba(34, 197, 94, 0.1),
|
|
inset 0 0 60px rgba(34, 197, 94, 0.05);
|
|
}
|
|
|
|
.glow-hover:hover {
|
|
box-shadow:
|
|
0 0 80px rgba(34, 197, 94, 0.3),
|
|
0 0 120px rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.float-delayed {
|
|
animation: float 6s ease-in-out infinite;
|
|
animation-delay: -3s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(2deg); }
|
|
}
|
|
|
|
.magnetic-btn {
|
|
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.text-reveal {
|
|
clip-path: inset(0 100% 0 0);
|
|
}
|
|
|
|
.word {
|
|
display: inline-block;
|
|
}
|
|
|
|
.char {
|
|
display: inline-block;
|
|
}
|
|
|
|
.js-loaded .word {
|
|
opacity: 0;
|
|
transform: translateY(40px) rotateX(-40deg);
|
|
transform-origin: center bottom;
|
|
}
|
|
|
|
.js-loaded .char {
|
|
opacity: 0;
|
|
transform: translateY(100px);
|
|
}
|
|
|
|
.line-draw {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
}
|
|
|
|
.pipeline-particle {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: linear-gradient(135deg, #22c55e, #06b6d4);
|
|
border-radius: 50%;
|
|
filter: blur(1px);
|
|
animation: pipeline-flow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes pipeline-flow {
|
|
0% { left: 0%; opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { left: 100%; opacity: 0; }
|
|
}
|
|
|
|
.typing-text::after {
|
|
content: '|';
|
|
animation: blink 1s infinite;
|
|
color: #22c55e;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
.shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.05) 50%,
|
|
transparent 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.gradient-border {
|
|
position: relative;
|
|
}
|
|
|
|
.gradient-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6, #22c55e);
|
|
background-size: 300% 300%;
|
|
animation: gradient-rotate 4s linear infinite;
|
|
border-radius: inherit;
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
@keyframes gradient-rotate {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.feature-card {
|
|
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(34, 197, 94, 0.15),
|
|
0 0 0 1px rgba(34, 197, 94, 0.2);
|
|
}
|
|
|
|
.feature-card:hover .feature-icon {
|
|
transform: scale(1.2) rotate(10deg);
|
|
}
|
|
|
|
.feature-icon {
|
|
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.counter {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.scroll-indicator {
|
|
animation: scroll-bounce 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes scroll-bounce {
|
|
0%, 100% { transform: translateY(0); opacity: 1; }
|
|
50% { transform: translateY(10px); opacity: 0.5; }
|
|
}
|
|
|
|
.parallax-layer {
|
|
will-change: transform;
|
|
}
|
|
|
|
.noise {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
opacity: 0.015;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.stat-card {
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-card:hover .stat-number {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.stat-number {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.marquee {
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.reveal-up {
|
|
opacity: 1;
|
|
}
|
|
|
|
.reveal-left {
|
|
opacity: 1;
|
|
}
|
|
|
|
.reveal-right {
|
|
opacity: 1;
|
|
}
|
|
|
|
.reveal-scale {
|
|
opacity: 1;
|
|
}
|
|
|
|
.stagger-item {
|
|
opacity: 1;
|
|
}
|
|
|
|
.js-loaded .reveal-up {
|
|
opacity: 0;
|
|
transform: translateY(60px);
|
|
}
|
|
|
|
.js-loaded .reveal-left {
|
|
opacity: 0;
|
|
transform: translateX(-60px);
|
|
}
|
|
|
|
.js-loaded .reveal-right {
|
|
opacity: 0;
|
|
transform: translateX(60px);
|
|
}
|
|
|
|
.js-loaded .reveal-scale {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.js-loaded .stagger-item {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
.btn-shine {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-shine::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
transparent 100%
|
|
);
|
|
transform: rotate(45deg) translateX(-100%);
|
|
transition: transform 0.6s;
|
|
}
|
|
|
|
.btn-shine:hover::after {
|
|
transform: rotate(45deg) translateX(100%);
|
|
}
|
|
|
|
.video-glow {
|
|
position: relative;
|
|
}
|
|
|
|
.video-glow::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6, #22c55e);
|
|
background-size: 400% 400%;
|
|
animation: gradient-rotate 3s linear infinite;
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
filter: blur(20px);
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden">
|
|
<!-- Noise overlay -->
|
|
<div class="noise"></div>
|
|
|
|
<!-- Custom cursor -->
|
|
<div class="custom-cursor" id="cursor"></div>
|
|
<div class="cursor-dot" id="cursor-dot"></div>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" id="navbar">
|
|
<div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
|
|
<a href="#" class="flex items-center gap-3 group">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 via-emerald-400 to-cyan-400 flex items-center justify-center transform group-hover:rotate-12 transition-transform duration-300">
|
|
<span class="font-black text-sm text-black">CS</span>
|
|
</div>
|
|
<span class="font-black text-2xl tracking-tight">CRESYNC</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-10 text-sm font-medium text-zinc-400">
|
|
<a href="#features" class="hover:text-white transition-colors relative group">
|
|
Features
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
<a href="#how-it-works" class="hover:text-white transition-colors relative group">
|
|
How It Works
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
<a href="#pricing" class="hover:text-white transition-colors relative group">
|
|
Pricing
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-brand-500 group-hover:w-full transition-all duration-300"></span>
|
|
</a>
|
|
</div>
|
|
<button class="magnetic-btn px-5 py-2.5 bg-white text-black font-bold rounded-full text-sm transition-all hover:bg-brand-400 hover:scale-105 active:scale-95 btn-shine">
|
|
Get Early Access
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="min-h-screen pt-32 pb-20 px-6 relative overflow-hidden hero-gradient">
|
|
<!-- Animated mesh background -->
|
|
<div class="absolute inset-0 mesh-gradient opacity-50"></div>
|
|
|
|
<!-- Floating orbs -->
|
|
<div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float parallax-layer" data-speed="0.5"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed parallax-layer" data-speed="0.3"></div>
|
|
<div class="absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float parallax-layer" data-speed="0.7"></div>
|
|
|
|
<!-- Grid pattern -->
|
|
<div class="absolute inset-0 opacity-[0.02]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 80px 80px;"></div>
|
|
|
|
<div class="max-w-7xl mx-auto relative">
|
|
<!-- Badge -->
|
|
<div class="flex justify-center mb-8 reveal-up">
|
|
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full glass-strong text-sm font-medium text-zinc-300 shimmer">
|
|
<span class="relative flex h-2.5 w-2.5">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-500"></span>
|
|
</span>
|
|
Now in Early Access — Limited Spots Available
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main headline -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-6xl md:text-8xl lg:text-9xl font-black tracking-tight mb-6 leading-[0.9]" id="hero-headline">
|
|
<span class="block hero-word">Your</span>
|
|
<span class="block gradient-text hero-word">24/7 CRE</span>
|
|
<span class="block hero-word">Employee</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="text-xl md:text-2xl lg:text-3xl text-zinc-400 max-w-4xl mx-auto mb-12 text-center leading-relaxed reveal-up" style="animation-delay: 0.3s">
|
|
Source deals. Nurture leads. Close contracts.<br>
|
|
<span class="text-white font-semibold">All through a simple conversation.</span>
|
|
</p>
|
|
|
|
<!-- CTA buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-5 justify-center mb-16 reveal-up" style="animation-delay: 0.5s">
|
|
<button class="magnetic-btn group px-10 py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-2xl text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-3">
|
|
<span>Start Free Trial</span>
|
|
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
<button class="magnetic-btn group px-10 py-5 glass-strong hover:bg-white/10 font-bold rounded-2xl text-lg transition-all flex items-center justify-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white/20 transition-colors">
|
|
<i data-lucide="play" class="w-5 h-5 ml-0.5"></i>
|
|
</div>
|
|
<span>Watch Demo</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Product Mockup -->
|
|
<div class="relative max-w-6xl mx-auto reveal-scale" style="animation-delay: 0.7s">
|
|
<!-- Glow effect behind -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/20 via-cyan-500/20 to-violet-500/20 blur-[60px] rounded-3xl transform scale-95"></div>
|
|
|
|
<div class="gradient-border rounded-3xl glow relative">
|
|
<div class="bg-[#0a0a0a] rounded-3xl p-1.5">
|
|
<div class="bg-zinc-900/80 rounded-2xl overflow-hidden backdrop-blur-xl">
|
|
<!-- Window chrome -->
|
|
<div class="flex items-center justify-between px-5 py-4 border-b border-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3.5 h-3.5 rounded-full bg-red-500 hover:bg-red-400 transition-colors"></div>
|
|
<div class="w-3.5 h-3.5 rounded-full bg-yellow-500 hover:bg-yellow-400 transition-colors"></div>
|
|
<div class="w-3.5 h-3.5 rounded-full bg-green-500 hover:bg-green-400 transition-colors"></div>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-4 py-1.5 rounded-lg bg-white/5 text-sm text-zinc-500 font-mono">
|
|
<i data-lucide="lock" class="w-3 h-3"></i>
|
|
app.cresync.com
|
|
</div>
|
|
<div class="w-20"></div>
|
|
</div>
|
|
|
|
<!-- App interface -->
|
|
<div class="flex h-[550px]">
|
|
<!-- Sidebar -->
|
|
<div class="w-16 border-r border-white/5 flex flex-col items-center py-4 gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
|
|
<i data-lucide="message-square" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
<i data-lucide="building-2" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
<i data-lucide="users" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
<i data-lucide="file-text" class="w-5 h-5"></i>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat panel -->
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="flex-1 p-6 space-y-5 overflow-hidden" id="chat-demo">
|
|
<!-- Messages will be animated in -->
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div class="p-4 border-t border-white/5">
|
|
<div class="glass-strong rounded-2xl px-5 py-4 flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<button class="w-8 h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
|
|
<i data-lucide="paperclip" class="w-4 h-4"></i>
|
|
</button>
|
|
<button class="w-8 h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
|
|
<i data-lucide="mic" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<input type="text" placeholder="Ask CRESYNC anything..." class="flex-1 bg-transparent text-sm outline-none text-zinc-300 placeholder:text-zinc-600">
|
|
<button class="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors hover:scale-105 active:scale-95">
|
|
<i data-lucide="arrow-up" class="w-5 h-5 text-black"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool panels -->
|
|
<div class="w-96 hidden lg:flex flex-col border-l border-white/5">
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-white/5">
|
|
<button class="flex-1 px-5 py-4 text-sm font-semibold text-brand-400 border-b-2 border-brand-500 flex items-center justify-center gap-2">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i>
|
|
Properties
|
|
<span class="px-2 py-0.5 rounded-full bg-brand-500/20 text-xs">23</span>
|
|
</button>
|
|
<button class="flex-1 px-5 py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
|
|
<i data-lucide="mail" class="w-4 h-4"></i>
|
|
Campaign
|
|
</button>
|
|
<button class="flex-1 px-5 py-4 text-sm font-medium text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-2">
|
|
<i data-lucide="file-signature" class="w-4 h-4"></i>
|
|
LOI
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Property cards -->
|
|
<div class="flex-1 p-4 space-y-3 overflow-auto">
|
|
<div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-1">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Riverside Apartments</h4>
|
|
<p class="text-xs text-zinc-500">24 units • Austin, TX 78701</p>
|
|
</div>
|
|
<span class="text-lg font-bold text-brand-400 font-mono">$4.2M</span>
|
|
</div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span class="px-2.5 py-1 rounded-lg bg-brand-500/15 text-brand-400 text-xs font-medium">98% Match</span>
|
|
<span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">Owner Direct</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-zinc-500">
|
|
<span>Built 2018 • 6.2% Cap</span>
|
|
<div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span>View Details</span>
|
|
<i data-lucide="arrow-right" class="w-3 h-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-2">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Oak Valley Complex</h4>
|
|
<p class="text-xs text-zinc-500">28 units • Austin, TX 78745</p>
|
|
</div>
|
|
<span class="text-lg font-bold text-brand-400 font-mono">$3.8M</span>
|
|
</div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span class="px-2.5 py-1 rounded-lg bg-brand-500/15 text-brand-400 text-xs font-medium">94% Match</span>
|
|
<span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">LLC Owner</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-zinc-500">
|
|
<span>Built 2015 • 6.8% Cap</span>
|
|
<div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span>View Details</span>
|
|
<i data-lucide="arrow-right" class="w-3 h-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30" id="property-3">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-base group-hover:text-brand-400 transition-colors">Sunset Ridge</h4>
|
|
<p class="text-xs text-zinc-500">32 units • Austin, TX 78702</p>
|
|
</div>
|
|
<span class="text-lg font-bold text-brand-400 font-mono">$4.9M</span>
|
|
</div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span class="px-2.5 py-1 rounded-lg bg-yellow-500/15 text-yellow-400 text-xs font-medium">87% Match</span>
|
|
<span class="px-2.5 py-1 rounded-lg bg-zinc-800 text-zinc-400 text-xs font-medium">Trust Owner</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-zinc-500">
|
|
<span>Built 2020 • 5.9% Cap</span>
|
|
<div class="flex items-center gap-1 text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span>View Details</span>
|
|
<i data-lucide="arrow-right" class="w-3 h-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator -->
|
|
<div class="flex justify-center mt-16">
|
|
<div class="scroll-indicator flex flex-col items-center gap-2 text-zinc-600">
|
|
<span class="text-xs font-medium tracking-wider uppercase">Scroll to explore</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Bar -->
|
|
<section class="py-12 px-6 border-y border-white/5 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-brand-500/5 via-transparent to-cyan-500/5"></div>
|
|
<div class="max-w-7xl mx-auto relative">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-4xl md:text-5xl font-black text-brand-400 mb-2 counter" data-target="10000">0</div>
|
|
<div class="text-sm text-zinc-500 font-medium">Properties Sourced</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-4xl md:text-5xl font-black text-cyan-400 mb-2">$<span class="counter" data-target="2">0</span>B+</div>
|
|
<div class="text-sm text-zinc-500 font-medium">Deal Volume</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-4xl md:text-5xl font-black text-violet-400 mb-2 counter" data-target="500">0</div>
|
|
<div class="text-sm text-zinc-500 font-medium">Active Agents</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-4xl md:text-5xl font-black text-emerald-400 mb-2"><span class="counter" data-target="40">0</span>hrs</div>
|
|
<div class="text-sm text-zinc-500 font-medium">Saved per Week</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Powered By Marquee -->
|
|
<section class="py-10 border-b border-white/5 overflow-hidden">
|
|
<div class="flex whitespace-nowrap">
|
|
<div class="marquee flex items-center gap-16">
|
|
<span class="text-2xl font-bold text-zinc-700">Reonomy</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">GoHighLevel</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Twilio</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">OpenAI</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Anthropic</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Stripe</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Reonomy</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">GoHighLevel</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Twilio</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">OpenAI</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Anthropic</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-2xl font-bold text-zinc-700">Stripe</span>
|
|
<span class="text-zinc-800">●</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem Section -->
|
|
<section class="py-32 px-6 relative">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-red-400 mb-6 reveal-up">
|
|
<i data-lucide="alert-triangle" class="w-4 h-4"></i>
|
|
The Problem
|
|
</div>
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
The CRE Tech Stack<br>is a <span class="text-red-400">Nightmare</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
You didn't become a CRE agent to fight with software integrations.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
<div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="unplug" class="w-8 h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-2xl mb-4">Integration Hell</h3>
|
|
<p class="text-zinc-400 text-lg leading-relaxed">Reonomy doesn't talk to GHL. GHL doesn't talk to your spreadsheets. You're the integration layer.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
<div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="brain" class="w-8 h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-2xl mb-4">Cognitive Overload</h3>
|
|
<p class="text-zinc-400 text-lg leading-relaxed">5 different UIs. 5 different workflows. 5 different learning curves. Your brain is fried by noon.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
<div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="clock" class="w-8 h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-2xl mb-4">Time Vampire</h3>
|
|
<p class="text-zinc-400 text-lg leading-relaxed">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Solution Section -->
|
|
<section class="py-32 px-6 relative overflow-hidden">
|
|
<!-- Background -->
|
|
<div class="absolute inset-0 mesh-gradient opacity-30"></div>
|
|
<div class="absolute inset-0" style="background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(34, 197, 94, 0.1), transparent);"></div>
|
|
|
|
<div class="max-w-6xl mx-auto relative">
|
|
<div class="text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
The Solution
|
|
</div>
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
One Conversation.<br><span class="gradient-text">Complete Pipeline.</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
CRESYNC is your AI employee that manages your entire tech stack through natural conversation.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pipeline Visualization -->
|
|
<div class="relative mb-20">
|
|
<!-- Connection line with particles -->
|
|
<div class="hidden lg:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 opacity-30 rounded-full" style="transform: translateY(-50%);" id="pipeline-line">
|
|
<div class="pipeline-particle" style="animation-delay: 0s;"></div>
|
|
<div class="pipeline-particle" style="animation-delay: 0.75s;"></div>
|
|
<div class="pipeline-particle" style="animation-delay: 1.5s;"></div>
|
|
<div class="pipeline-particle" style="animation-delay: 2.25s;"></div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-brand-500/30">1</div>
|
|
<div class="w-14 h-14 rounded-2xl bg-brand-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
|
|
<i data-lucide="search" class="w-7 h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3">Source</h3>
|
|
<p class="text-zinc-400 mb-4">Pull targeted leads with owner info, financials, and property details.</p>
|
|
<span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-500"></span>
|
|
Reonomy
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-emerald-500/30">2</div>
|
|
<div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
|
|
<i data-lucide="messages-square" class="w-7 h-7 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3">Nurture</h3>
|
|
<p class="text-zinc-400 mb-4">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
|
|
<span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
GoHighLevel
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-cyan-500/30">3</div>
|
|
<div class="w-14 h-14 rounded-2xl bg-cyan-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
|
|
<i data-lucide="file-signature" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3">Close</h3>
|
|
<p class="text-zinc-400 mb-4">Generate professional LOIs instantly and turn appointments into contracts.</p>
|
|
<span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
|
|
LOI Generator
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-4 -left-4 w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center text-black font-black text-xl shadow-lg shadow-violet-500/30">4</div>
|
|
<div class="w-14 h-14 rounded-2xl bg-violet-500/10 flex items-center justify-center mb-6 mt-4 feature-icon">
|
|
<i data-lucide="calculator" class="w-7 h-7 text-violet-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3">Validate</h3>
|
|
<p class="text-zinc-400 mb-4">Run full underwriting analysis to ensure every deal makes financial sense.</p>
|
|
<span class="inline-flex items-center gap-2 text-xs text-zinc-600 font-mono bg-zinc-900/50 px-3 py-1.5 rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
|
|
Underwriting Tool
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-32 px-6 relative">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
|
|
<i data-lucide="layers" class="w-4 h-4"></i>
|
|
Features
|
|
</div>
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
Everything to<br><span class="gradient-text">Dominate CRE</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
A complete toolkit unified under one conversational interface.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="database" class="w-7 h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-brand-400 transition-colors">Lead Sourcing</h3>
|
|
<p class="text-zinc-400">Pull property data and owner contacts with natural language. "Find me retail centers in Dallas under $5M."</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="mail" class="w-7 h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-cyan-400 transition-colors">Multi-Channel Outreach</h3>
|
|
<p class="text-zinc-400">Email, SMS, WhatsApp, social DMs — orchestrate every channel from one conversation.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="bot" class="w-7 h-7 text-violet-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-violet-400 transition-colors">AI Voice & Text</h3>
|
|
<p class="text-zinc-400">Automated follow-ups, appointment setting, and lead qualification running 24/7.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="zap" class="w-7 h-7 text-orange-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-orange-400 transition-colors">Drip Campaigns</h3>
|
|
<p class="text-zinc-400">Set up automated nurture sequences that run on autopilot while you focus on closing.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="file-text" class="w-7 h-7 text-pink-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-pink-400 transition-colors">LOI Generation</h3>
|
|
<p class="text-zinc-400">Draft professional Letters of Intent in seconds with deal-specific terms and conditions.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="bar-chart-3" class="w-7 h-7 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-emerald-400 transition-colors">Deal Underwriting</h3>
|
|
<p class="text-zinc-400">Full financial analysis — cap rates, cash-on-cash, IRR projections — instantly.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="users" class="w-7 h-7 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-blue-400 transition-colors">CRM & Pipeline</h3>
|
|
<p class="text-zinc-400">Track every contact, deal, and touchpoint without ever leaving the chat interface.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-yellow-500/20 to-amber-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="repeat" class="w-7 h-7 text-yellow-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-yellow-400 transition-colors">Referral Network</h3>
|
|
<p class="text-zinc-400">Automated check-ins with past clients. Build a referral engine that compounds over time.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-8 feature-card stagger-item group">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-lime-500/20 to-green-500/20 flex items-center justify-center mb-6 feature-icon">
|
|
<i data-lucide="globe" class="w-7 h-7 text-lime-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-xl mb-3 group-hover:text-lime-400 transition-colors">SEO & Content</h3>
|
|
<p class="text-zinc-400">Generate market reports and blog content to build your online presence and attract inbound leads.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section id="how-it-works" class="py-32 px-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 mesh-gradient opacity-20"></div>
|
|
|
|
<div class="max-w-5xl mx-auto relative">
|
|
<div class="text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
|
|
<i data-lucide="play-circle" class="w-4 h-4"></i>
|
|
How It Works
|
|
</div>
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
Three Steps to<br><span class="gradient-text">Transform Your Business</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
|
|
<div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-brand-500/30">
|
|
<span class="text-5xl font-black text-black">1</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-4">Just Text What You Need</h3>
|
|
<p class="text-zinc-400 text-xl leading-relaxed">"Find me multi-family properties in Austin under $5M with motivated sellers." CRESYNC understands natural language and knows exactly which tools to orchestrate.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
|
|
<div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-cyan-500/30">
|
|
<span class="text-5xl font-black text-black">2</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-4">Watch It Work</h3>
|
|
<p class="text-zinc-400 text-xl leading-relaxed">CRESYNC pulls data from Reonomy, drafts outreach sequences in GHL, generates LOIs, runs underwriting — all visible in real-time through interactive panels.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row items-center gap-10 glass rounded-3xl p-10 feature-card stagger-item">
|
|
<div class="w-24 h-24 rounded-3xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center flex-shrink-0 shadow-2xl shadow-violet-500/30">
|
|
<span class="text-5xl font-black text-black">3</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-3xl font-black mb-4">Close Deals, Grow Referrals</h3>
|
|
<p class="text-zinc-400 text-xl leading-relaxed">Turn conversations into contracts. Maintain relationships automatically. Build a referral network that compounds over time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section id="pricing" class="py-32 px-6 relative">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-brand-400 mb-6 reveal-up">
|
|
<i data-lucide="credit-card" class="w-4 h-4"></i>
|
|
Pricing
|
|
</div>
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
Plans for Every<br><span class="gradient-text">CRE Professional</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
From solo agents to enterprise brokerages. Scale as you grow.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="glass rounded-3xl p-10 feature-card stagger-item">
|
|
<h3 class="text-xl font-bold text-zinc-400 mb-2">Basic</h3>
|
|
<div class="text-5xl font-black mb-2">$199<span class="text-xl text-zinc-500 font-medium">/mo</span></div>
|
|
<p class="text-zinc-500 text-sm mb-8">Perfect for solo agents getting started.</p>
|
|
<ul class="space-y-4 mb-10">
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Lead sourcing (500/mo)
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Basic outreach
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
CRM basics
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Email support
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-4 glass-strong rounded-2xl font-bold hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
|
|
Start Free Trial
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative rounded-3xl stagger-item">
|
|
<div class="absolute -inset-[2px] bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 rounded-3xl opacity-80 blur-sm"></div>
|
|
<div class="relative glass-strong rounded-3xl p-10 h-full bg-[#0a0a0a]">
|
|
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
|
<span class="px-4 py-1.5 rounded-full bg-gradient-to-r from-brand-500 to-cyan-500 text-black text-sm font-bold">Most Popular</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-brand-400 mb-2 mt-2">Pro</h3>
|
|
<div class="text-5xl font-black mb-2">$499<span class="text-xl text-zinc-500 font-medium">/mo</span></div>
|
|
<p class="text-zinc-500 text-sm mb-8">For serious agents closing multiple deals.</p>
|
|
<ul class="space-y-4 mb-10">
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Everything in Basic
|
|
</li>
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Unlimited leads
|
|
</li>
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
AI voice & text
|
|
</li>
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
LOI generation
|
|
</li>
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Deal underwriting
|
|
</li>
|
|
<li class="flex items-center gap-3 text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Priority support
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black rounded-2xl font-bold transition-all hover:scale-105 active:scale-95 btn-shine">
|
|
Start Free Trial
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-3xl p-10 feature-card stagger-item">
|
|
<h3 class="text-xl font-bold text-zinc-400 mb-2">Enterprise</h3>
|
|
<div class="text-5xl font-black mb-2">Custom</div>
|
|
<p class="text-zinc-500 text-sm mb-8">For teams and brokerages at scale.</p>
|
|
<ul class="space-y-4 mb-10">
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Everything in Pro
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Team collaboration
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Custom integrations
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Dedicated CSM
|
|
</li>
|
|
<li class="flex items-center gap-3 text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
SLA guarantee
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-4 glass-strong rounded-2xl font-bold hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
|
|
Contact Sales
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA -->
|
|
<section class="py-32 px-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 mesh-gradient"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-[#030303] via-transparent to-[#030303]"></div>
|
|
|
|
<div class="max-w-4xl mx-auto text-center relative">
|
|
<h2 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 reveal-up">
|
|
Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span>
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-zinc-400 mb-12 reveal-up">
|
|
Join hundreds of CRE professionals already using CRESYNC.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto reveal-up">
|
|
<input type="email" placeholder="Enter your email" class="flex-1 px-6 py-5 glass-strong rounded-2xl text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
|
|
<button class="magnetic-btn px-10 py-5 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black font-bold rounded-2xl text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine whitespace-nowrap">
|
|
Get Started Free
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-zinc-600 mt-6 reveal-up">14-day free trial. No credit card required.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-16 px-6 border-t border-white/5">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-10">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 via-emerald-400 to-cyan-400 flex items-center justify-center">
|
|
<span class="font-black text-lg text-black">CS</span>
|
|
</div>
|
|
<span class="font-black text-2xl tracking-tight">CRESYNC</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-center gap-8 text-sm font-medium text-zinc-500">
|
|
<a href="#features" class="hover:text-white transition-colors">Features</a>
|
|
<a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
|
|
<a href="#pricing" class="hover:text-white transition-colors">Pricing</a>
|
|
<a href="#" class="hover:text-white transition-colors">Privacy</a>
|
|
<a href="#" class="hover:text-white transition-colors">Terms</a>
|
|
<a href="#" class="hover:text-white transition-colors">Contact</a>
|
|
</div>
|
|
<p class="text-sm text-zinc-600">© 2026 CRESYNC. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Mark JS as loaded for animations
|
|
document.body.classList.add('js-loaded');
|
|
|
|
// Custom cursor
|
|
const cursor = document.getElementById('cursor');
|
|
const cursorDot = document.getElementById('cursor-dot');
|
|
|
|
let cursorX = 0, cursorY = 0;
|
|
let dotX = 0, dotY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
cursorX = e.clientX;
|
|
cursorY = e.clientY;
|
|
});
|
|
|
|
function animateCursor() {
|
|
dotX += (cursorX - dotX) * 0.15;
|
|
dotY += (cursorY - dotY) * 0.15;
|
|
|
|
cursor.style.left = cursorX - 10 + 'px';
|
|
cursor.style.top = cursorY - 10 + 'px';
|
|
cursorDot.style.left = dotX - 3 + 'px';
|
|
cursorDot.style.top = dotY - 3 + 'px';
|
|
|
|
requestAnimationFrame(animateCursor);
|
|
}
|
|
animateCursor();
|
|
|
|
// Cursor hover effects
|
|
document.querySelectorAll('a, button, input, .feature-card').forEach(el => {
|
|
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
|
|
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
|
|
});
|
|
|
|
// Magnetic buttons
|
|
document.querySelectorAll('.magnetic-btn').forEach(btn => {
|
|
btn.addEventListener('mousemove', (e) => {
|
|
const rect = btn.getBoundingClientRect();
|
|
const x = e.clientX - rect.left - rect.width / 2;
|
|
const y = e.clientY - rect.top - rect.height / 2;
|
|
btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`;
|
|
});
|
|
btn.addEventListener('mouseleave', () => {
|
|
btn.style.transform = '';
|
|
});
|
|
});
|
|
|
|
// GSAP Animations
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Hero headline animation
|
|
const heroWords = document.querySelectorAll('.hero-word');
|
|
gsap.fromTo(heroWords,
|
|
{ opacity: 0, y: 100, rotateX: -40 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
rotateX: 0,
|
|
duration: 1.2,
|
|
ease: "power4.out",
|
|
stagger: 0.15
|
|
}
|
|
);
|
|
|
|
// Reveal animations
|
|
gsap.utils.toArray('.reveal-up').forEach(el => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, y: 60 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 1,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
toggleActions: "play none none none"
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
gsap.utils.toArray('.reveal-scale').forEach(el => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, scale: 0.9 },
|
|
{
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 1.2,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
toggleActions: "play none none none"
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
// Stagger animations for cards
|
|
gsap.utils.toArray('.stagger-item').forEach((el, i) => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, y: 40 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.8,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
toggleActions: "play none none none"
|
|
},
|
|
delay: (i % 3) * 0.1
|
|
}
|
|
);
|
|
});
|
|
|
|
// Counter animation
|
|
const counters = document.querySelectorAll('.counter');
|
|
counters.forEach(counter => {
|
|
const target = parseInt(counter.dataset.target);
|
|
ScrollTrigger.create({
|
|
trigger: counter,
|
|
start: "top 80%",
|
|
onEnter: () => {
|
|
gsap.to(counter, {
|
|
innerText: target,
|
|
duration: 2,
|
|
snap: { innerText: 1 },
|
|
ease: "power2.out"
|
|
});
|
|
},
|
|
once: true
|
|
});
|
|
});
|
|
|
|
// Navbar scroll effect
|
|
const navbar = document.getElementById('navbar');
|
|
ScrollTrigger.create({
|
|
start: "top -100",
|
|
onUpdate: (self) => {
|
|
if (self.scroll() > 100) {
|
|
navbar.classList.add('glass-strong', 'py-3');
|
|
navbar.classList.remove('py-5');
|
|
} else {
|
|
navbar.classList.remove('glass-strong', 'py-3');
|
|
navbar.classList.add('py-5');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Chat demo animation
|
|
const chatDemo = document.getElementById('chat-demo');
|
|
const messages = [
|
|
{ type: 'user', text: 'Find me multi-family properties in Austin, TX with 20+ units under $5M' },
|
|
{ type: 'ai', text: 'Found 23 properties matching your criteria. I\'ve pulled owner contact info and property details for each. Ready to start outreach?' },
|
|
{ type: 'user', text: 'Yes, draft a personalized email sequence for the top 10' },
|
|
{ type: 'ai', text: 'Done! I\'ve created a 5-touch email sequence personalized to each property owner. The campaign is ready to launch in GHL.', action: 'Outreach campaign created → View in GHL' }
|
|
];
|
|
|
|
function createMessage(msg, index) {
|
|
const div = document.createElement('div');
|
|
div.className = msg.type === 'user' ? 'flex justify-end' : 'flex gap-3';
|
|
div.style.opacity = '0';
|
|
div.style.transform = 'translateY(20px)';
|
|
|
|
if (msg.type === 'user') {
|
|
div.innerHTML = `
|
|
<div class="bg-brand-500/20 border border-brand-500/30 rounded-2xl rounded-br-md px-5 py-3 max-w-md">
|
|
<p class="text-sm">${msg.text}</p>
|
|
</div>
|
|
`;
|
|
} else {
|
|
let actionHtml = msg.action ? `
|
|
<div class="glass rounded-xl px-4 py-2 flex items-center gap-2 text-xs text-brand-400 mt-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i>
|
|
<span>${msg.action}</span>
|
|
</div>
|
|
` : '';
|
|
|
|
div.innerHTML = `
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center flex-shrink-0">
|
|
<span class="font-bold text-xs text-black">CS</span>
|
|
</div>
|
|
<div>
|
|
<div class="glass rounded-2xl rounded-tl-md px-5 py-3 max-w-md">
|
|
<p class="text-sm text-zinc-300">${msg.text}</p>
|
|
</div>
|
|
${actionHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return div;
|
|
}
|
|
|
|
// Animate chat messages
|
|
let chatAnimated = false;
|
|
ScrollTrigger.create({
|
|
trigger: chatDemo,
|
|
start: "top 70%",
|
|
onEnter: () => {
|
|
if (chatAnimated) return;
|
|
chatAnimated = true;
|
|
|
|
messages.forEach((msg, i) => {
|
|
setTimeout(() => {
|
|
const msgEl = createMessage(msg, i);
|
|
chatDemo.appendChild(msgEl);
|
|
lucide.createIcons();
|
|
|
|
gsap.to(msgEl, {
|
|
opacity: 1,
|
|
y: 0,
|
|
duration: 0.5,
|
|
ease: "power2.out"
|
|
});
|
|
|
|
// Scroll chat to bottom
|
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
|
}, i * 1200);
|
|
});
|
|
},
|
|
once: true
|
|
});
|
|
|
|
// Parallax effect for floating orbs
|
|
document.querySelectorAll('.parallax-layer').forEach(layer => {
|
|
const speed = layer.dataset.speed || 0.5;
|
|
gsap.to(layer, {
|
|
y: () => window.innerHeight * speed * 0.5,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: document.body,
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
scrub: true
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|