1175 lines
66 KiB
HTML
1175 lines
66 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>
|
|
<meta name="description" content="Source deals, nurture leads, and close contracts through simple conversation. CRESYNC is your AI-powered CRE assistant.">
|
|
<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&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'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Custom Cursor - Desktop Only */
|
|
@media (min-width: 1024px) {
|
|
* { 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.15s 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: 1023px) {
|
|
.custom-cursor, .cursor-dot { display: none !important; }
|
|
}
|
|
|
|
/* Gradient Text */
|
|
.gradient-text {
|
|
color: #22c55e;
|
|
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 6s ease infinite;
|
|
}
|
|
@supports not (-webkit-background-clip: text) {
|
|
.gradient-text { color: #22c55e; background: none; -webkit-text-fill-color: currentColor; }
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Mesh Gradient Background */
|
|
.mesh-gradient {
|
|
background:
|
|
radial-gradient(at 40% 20%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
|
|
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.12) 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.08) 0px, transparent 50%),
|
|
radial-gradient(at 0% 100%, rgba(34, 197, 94, 0.12) 0px, transparent 50%);
|
|
}
|
|
|
|
/* Glass Effect with Fallback */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
@supports (backdrop-filter: blur(20px)) {
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
@supports (backdrop-filter: blur(40px)) {
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Glow Effects */
|
|
.glow {
|
|
box-shadow: 0 0 60px rgba(34, 197, 94, 0.2), 0 0 100px rgba(34, 197, 94, 0.1);
|
|
}
|
|
.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 { 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); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
/* Gradient Border */
|
|
.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-shift 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;
|
|
}
|
|
|
|
/* Feature Card Hover */
|
|
.feature-card {
|
|
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 25px 50px -12px rgba(34, 197, 94, 0.15);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
.feature-card:hover .feature-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
.feature-icon {
|
|
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
/* Pipeline Particles - Desktop Only */
|
|
@media (min-width: 1024px) {
|
|
.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; }
|
|
}
|
|
}
|
|
|
|
/* Shimmer Effect */
|
|
.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; }
|
|
}
|
|
|
|
/* Button Shine */
|
|
.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%);
|
|
}
|
|
|
|
/* Scroll Indicator */
|
|
.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; }
|
|
}
|
|
|
|
/* Magnetic Button - Desktop Only */
|
|
@media (min-width: 1024px) {
|
|
.magnetic-btn {
|
|
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
}
|
|
|
|
/* Marquee */
|
|
.marquee {
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
/* Noise Overlay - Subtle */
|
|
.noise::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
opacity: 0.02;
|
|
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");
|
|
}
|
|
|
|
/* Animations - Initially visible, hide when JS loads */
|
|
.reveal-up, .reveal-scale, .stagger-item {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
.js-loaded .reveal-up {
|
|
opacity: 0;
|
|
transform: translateY(60px);
|
|
}
|
|
.js-loaded .reveal-scale {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
.js-loaded .stagger-item {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
/* Counter */
|
|
.counter { font-variant-numeric: tabular-nums; }
|
|
|
|
/* Stat Card Hover */
|
|
.stat-card { transition: transform 0.3s ease; }
|
|
.stat-card:hover { transform: translateY(-5px); }
|
|
.stat-card:hover .stat-number { transform: scale(1.05); }
|
|
.stat-number { transition: transform 0.3s ease; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#030303] text-white font-sans antialiased overflow-x-hidden noise">
|
|
|
|
<!-- Custom Cursor (Desktop) -->
|
|
<div class="custom-cursor hidden lg:block" id="cursor"></div>
|
|
<div class="cursor-dot hidden lg:block" 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-4 sm:px-6 py-4 lg:py-5 flex items-center justify-between">
|
|
<a href="#" class="flex items-center gap-2 sm:gap-3 group">
|
|
<div class="w-9 h-9 sm:w-10 sm: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-xs sm:text-sm text-black">CS</span>
|
|
</div>
|
|
<span class="font-black text-xl sm:text-2xl tracking-tight">CRESYNC</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8 lg: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-4 sm:px-5 py-2 sm: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 min-h-[100dvh] pt-24 sm:pt-28 lg:pt-32 pb-12 sm:pb-16 lg:pb-20 px-4 sm:px-6 relative overflow-hidden">
|
|
<!-- Animated mesh background -->
|
|
<div class="absolute inset-0 mesh-gradient opacity-60"></div>
|
|
|
|
<!-- Floating orbs - Desktop only for performance -->
|
|
<div class="hidden lg:block absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-brand-500/20 blur-[100px] float"></div>
|
|
<div class="hidden lg:block absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-cyan-500/15 blur-[120px] float-delayed"></div>
|
|
<div class="hidden lg:block absolute top-1/2 right-1/3 w-48 h-48 rounded-full bg-violet-500/15 blur-[80px] float"></div>
|
|
|
|
<!-- Grid pattern -->
|
|
<div class="absolute inset-0 opacity-[0.03]" 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: 60px 60px;"></div>
|
|
|
|
<div class="max-w-7xl mx-auto relative z-10">
|
|
<!-- Badge -->
|
|
<div class="flex justify-center mb-6 sm:mb-8 reveal-up">
|
|
<div class="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full glass-strong text-xs sm:text-sm font-medium text-zinc-300 shimmer">
|
|
<span class="relative flex h-2 w-2 sm:h-2.5 sm: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 w-2 sm:h-2.5 sm:w-2.5 bg-brand-500"></span>
|
|
</span>
|
|
Now in Early Access — Limited Spots Available
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main headline -->
|
|
<div class="text-center mb-6 sm:mb-8">
|
|
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight mb-4 sm:mb-6 leading-[1.1]" id="hero-headline">
|
|
<span class="block">Your</span>
|
|
<span class="block gradient-text">24/7 CRE</span>
|
|
<span class="block">Employee</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-400 max-w-3xl mx-auto mb-8 sm:mb-10 lg:mb-12 text-center leading-relaxed reveal-up px-2">
|
|
Source deals. Nurture leads. Close contracts.<br class="hidden sm:block">
|
|
<span class="text-white font-semibold">All through a simple conversation.</span>
|
|
</p>
|
|
|
|
<!-- CTA buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-5 justify-center mb-10 sm:mb-12 lg:mb-16 reveal-up">
|
|
<button class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 bg-brand-500 hover:bg-brand-400 text-black font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine flex items-center justify-center gap-2 sm:gap-3">
|
|
<span>Start Free Trial</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
<button class="magnetic-btn group px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg:py-5 glass-strong hover:bg-white/10 font-bold rounded-xl lg:rounded-2xl text-base lg:text-lg transition-all flex items-center justify-center gap-2 sm:gap-3">
|
|
<div class="w-8 h-8 sm:w-10 sm: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-4 h-4 sm:w-5 sm: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">
|
|
<!-- 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-2xl lg:rounded-3xl glow relative">
|
|
<div class="bg-[#0a0a0a] rounded-2xl lg:rounded-3xl p-1 sm:p-1.5">
|
|
<div class="bg-zinc-900/80 rounded-xl lg:rounded-2xl overflow-hidden">
|
|
<!-- Window chrome -->
|
|
<div class="flex items-center justify-between px-3 sm:px-5 py-2.5 sm:py-4 border-b border-white/5">
|
|
<div class="flex items-center gap-1.5 sm:gap-2">
|
|
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-red-500"></div>
|
|
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-yellow-500"></div>
|
|
<div class="w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="hidden sm:flex items-center gap-2 px-3 sm:px-4 py-1 sm:py-1.5 rounded-lg bg-white/5 text-xs sm:text-sm text-zinc-500 font-mono">
|
|
<i data-lucide="lock" class="w-3 h-3"></i>
|
|
app.cresync.com
|
|
</div>
|
|
<div class="w-16 sm:w-20"></div>
|
|
</div>
|
|
|
|
<!-- App interface -->
|
|
<div class="flex h-[280px] sm:h-[380px] md:h-[450px] lg:h-[550px]">
|
|
<!-- Sidebar - Hidden on mobile -->
|
|
<div class="hidden md:flex w-14 lg:w-16 border-r border-white/5 flex-col items-center py-3 lg:py-4 gap-3 lg:gap-4">
|
|
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-brand-500/20 flex items-center justify-center text-brand-400">
|
|
<i data-lucide="message-square" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
</div>
|
|
<div class="w-9 h-9 lg:w-10 lg: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-4 h-4 lg:w-5 lg:h-5"></i>
|
|
</div>
|
|
<div class="w-9 h-9 lg:w-10 lg:h-10 rounded-xl hover:bg-white/5 flex items-center justify-center text-zinc-600 transition-colors">
|
|
<i data-lucide="users" class="w-4 h-4 lg:w-5 lg:h-5"></i>
|
|
</div>
|
|
<div class="w-9 h-9 lg:w-10 lg: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-4 h-4 lg:w-5 lg:h-5"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat panel -->
|
|
<div class="flex-1 flex flex-col">
|
|
<div class="flex-1 p-3 sm:p-4 lg:p-6 space-y-3 sm:space-y-4 lg:space-y-5 overflow-hidden" id="chat-demo">
|
|
<!-- Messages will be animated in via JS -->
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div class="p-2 sm:p-3 lg:p-4 border-t border-white/5">
|
|
<div class="glass-strong rounded-xl lg:rounded-2xl px-3 sm:px-4 lg:px-5 py-2.5 sm:py-3 lg:py-4 flex items-center gap-2 sm:gap-3 lg:gap-4">
|
|
<div class="hidden sm:flex items-center gap-1.5 lg:gap-2">
|
|
<button class="w-7 h-7 lg:w-8 lg:h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
|
|
<i data-lucide="paperclip" class="w-3.5 h-3.5 lg:w-4 lg:h-4"></i>
|
|
</button>
|
|
<button class="w-7 h-7 lg:w-8 lg:h-8 rounded-lg hover:bg-white/10 flex items-center justify-center text-zinc-500 transition-colors">
|
|
<i data-lucide="mic" class="w-3.5 h-3.5 lg:w-4 lg:h-4"></i>
|
|
</button>
|
|
</div>
|
|
<input type="text" placeholder="Ask CRESYNC anything..." class="flex-1 bg-transparent text-xs sm:text-sm outline-none text-zinc-300 placeholder:text-zinc-600 min-w-0">
|
|
<button class="w-8 h-8 sm:w-9 sm:h-9 lg:w-10 lg:h-10 rounded-lg lg:rounded-xl bg-brand-500 flex items-center justify-center hover:bg-brand-400 transition-colors hover:scale-105 active:scale-95 flex-shrink-0">
|
|
<i data-lucide="arrow-up" class="w-4 h-4 lg:w-5 lg:h-5 text-black"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tool panels - Hidden on mobile/tablet -->
|
|
<div class="hidden lg:flex w-80 xl:w-96 flex-col border-l border-white/5">
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-white/5">
|
|
<button class="flex-1 px-4 xl:px-5 py-3 xl: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-4 xl:px-5 py-3 xl: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>
|
|
</div>
|
|
|
|
<!-- Property cards -->
|
|
<div class="flex-1 p-3 xl:p-4 space-y-2.5 xl:space-y-3 overflow-auto">
|
|
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Riverside Apartments</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">24 units • Austin, TX 78701</p>
|
|
</div>
|
|
<span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$4.2M</span>
|
|
</div>
|
|
<div class="flex gap-1.5 xl:gap-2 mb-2 xl:mb-3">
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">98% Match</span>
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Owner Direct</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[10px] xl:text-xs text-zinc-500">
|
|
<span>Built 2018 • 6.2% Cap</span>
|
|
<span class="text-brand-400 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">View <i data-lucide="arrow-right" class="w-3 h-3"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Oak Valley Complex</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">28 units • Austin, TX 78745</p>
|
|
</div>
|
|
<span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$3.8M</span>
|
|
</div>
|
|
<div class="flex gap-1.5 xl:gap-2">
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-brand-500/15 text-brand-400 text-[10px] xl:text-xs font-medium">94% Match</span>
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">LLC Owner</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-xl xl:rounded-2xl p-4 xl:p-5 hover:bg-white/5 transition-all cursor-pointer group border border-transparent hover:border-brand-500/30">
|
|
<div class="flex items-start justify-between mb-2 xl:mb-3">
|
|
<div>
|
|
<h4 class="font-bold text-sm xl:text-base group-hover:text-brand-400 transition-colors">Sunset Ridge</h4>
|
|
<p class="text-[10px] xl:text-xs text-zinc-500">32 units • Austin, TX 78702</p>
|
|
</div>
|
|
<span class="text-base xl:text-lg font-bold text-brand-400 font-mono">$4.9M</span>
|
|
</div>
|
|
<div class="flex gap-1.5 xl:gap-2">
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-yellow-500/15 text-yellow-400 text-[10px] xl:text-xs font-medium">87% Match</span>
|
|
<span class="px-2 xl:px-2.5 py-0.5 xl:py-1 rounded-md xl:rounded-lg bg-zinc-800 text-zinc-400 text-[10px] xl:text-xs font-medium">Trust Owner</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator - Hidden on mobile -->
|
|
<div class="hidden sm:flex justify-center mt-10 lg: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-8 sm:py-10 lg:py-12 px-4 sm: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 lg:grid-cols-4 gap-6 sm:gap-8">
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-brand-400 mb-1 sm:mb-2 counter" data-target="10000">0</div>
|
|
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Properties Sourced</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-cyan-400 mb-1 sm:mb-2">$<span class="counter" data-target="2">0</span>B+</div>
|
|
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Deal Volume</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-violet-400 mb-1 sm:mb-2 counter" data-target="500">0</div>
|
|
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Active Agents</div>
|
|
</div>
|
|
<div class="stat-card text-center">
|
|
<div class="stat-number text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-black text-emerald-400 mb-1 sm:mb-2"><span class="counter" data-target="40">0</span>hrs</div>
|
|
<div class="text-xs sm:text-sm text-zinc-500 font-medium">Saved per Week</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Powered By Marquee -->
|
|
<section class="py-6 sm:py-8 lg:py-10 border-b border-white/5 overflow-hidden">
|
|
<div class="flex whitespace-nowrap">
|
|
<div class="marquee flex items-center gap-8 sm:gap-12 lg:gap-16">
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Reonomy</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">GoHighLevel</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Twilio</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">OpenAI</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Anthropic</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Stripe</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Reonomy</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">GoHighLevel</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Twilio</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">OpenAI</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Anthropic</span>
|
|
<span class="text-zinc-800">●</span>
|
|
<span class="text-lg sm:text-xl lg:text-2xl font-bold text-zinc-700">Stripe</span>
|
|
<span class="text-zinc-800">●</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem Section -->
|
|
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-red-400 mb-4 sm:mb-6 reveal-up">
|
|
<i data-lucide="alert-triangle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
The Problem
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
The CRE Tech Stack<br>is a <span class="text-red-400">Nightmare</span>
|
|
</h2>
|
|
<p class="text-base sm:text-lg lg:text-xl xl: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 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="unplug" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Integration Hell</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg: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-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card stagger-item">
|
|
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="brain" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Cognitive Overload</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg: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-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 border border-red-500/10 hover:border-red-500/30 transition-all group feature-card sm:col-span-2 lg:col-span-1 stagger-item">
|
|
<div class="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-xl lg:rounded-2xl bg-red-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="clock" class="w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 text-red-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg sm:text-xl lg:text-2xl mb-2 sm:mb-3 lg:mb-4">Time Vampire</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg:text-lg leading-relaxed">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Solution / Pipeline -->
|
|
<section class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 mesh-gradient opacity-30"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-brand-500/5 to-transparent pointer-events-none"></div>
|
|
|
|
<div class="max-w-6xl mx-auto relative">
|
|
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
<i data-lucide="sparkles" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
The Solution
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
One Conversation.<br><span class="gradient-text">Complete Pipeline.</span>
|
|
</h2>
|
|
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 max-w-3xl mx-auto reveal-up">
|
|
CRESYNC orchestrates your entire deal flow — from sourcing to closing — through a simple chat interface.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pipeline visualization -->
|
|
<div class="relative">
|
|
<!-- Connection line with particles - Desktop only -->
|
|
<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 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500 to-emerald-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-brand-500/30">1</div>
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-brand-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
|
|
<i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Source</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Pull targeted leads with owner info, financials, and property details.</p>
|
|
<span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-500"></span>
|
|
Reonomy
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-emerald-500/30">2</div>
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
|
|
<i data-lucide="messages-square" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Nurture</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
|
|
<span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
GoHighLevel
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-cyan-500/30">3</div>
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-cyan-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
|
|
<i data-lucide="file-signature" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Close</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Generate professional LOIs instantly and turn appointments into contracts.</p>
|
|
<span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg:rounded-lg">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
|
|
LOI Generator
|
|
</span>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 relative glow-hover transition-all group feature-card stagger-item">
|
|
<div class="absolute -top-3 -left-3 sm:-top-4 sm:-left-4 w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500 to-purple-400 flex items-center justify-center text-black font-black text-sm sm:text-base lg:text-xl shadow-lg shadow-violet-500/30">4</div>
|
|
<div class="w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-violet-500/10 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 mt-2 sm:mt-3 lg:mt-4 feature-icon">
|
|
<i data-lucide="calculator" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3">Validate</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base mb-3 sm:mb-4">Run full underwriting analysis to ensure every deal makes financial sense.</p>
|
|
<span class="inline-flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-zinc-600 font-mono bg-zinc-900/50 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md lg: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 Grid -->
|
|
<section id="features" class="py-16 sm:py-20 lg:py-32 px-4 sm:px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
<i data-lucide="layers" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
Features
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
Everything to<br><span class="gradient-text">Dominate CRE</span>
|
|
</h2>
|
|
<p class="text-base sm:text-lg lg:text-xl xl: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 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-brand-500/20 to-emerald-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="database" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-brand-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-brand-400 transition-colors">Lead Sourcing</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Pull property data and owner contacts with natural language. "Find me retail centers in Dallas under $5M."</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="mail" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-cyan-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-cyan-400 transition-colors">Multi-Channel Outreach</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Email, SMS, WhatsApp, social DMs — orchestrate every channel from one conversation.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-violet-500/20 to-purple-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="bot" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-violet-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-violet-400 transition-colors">AI Voice & Text</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Automated follow-ups, appointment setting, and lead qualification running 24/7.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="zap" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-orange-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-orange-400 transition-colors">Drip Campaigns</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Set up automated nurture sequences that run on autopilot while you focus on closing.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-pink-500/20 to-rose-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="file-text" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-pink-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-pink-400 transition-colors">LOI Generation</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Draft professional Letters of Intent in seconds with deal-specific terms and conditions.</p>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-8 feature-card stagger-item group">
|
|
<div class="w-11 h-11 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center mb-4 sm:mb-5 lg:mb-6 feature-icon">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7 text-emerald-400"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base sm:text-lg lg:text-xl mb-2 sm:mb-3 group-hover:text-emerald-400 transition-colors">Deal Underwriting</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base">Full financial analysis — cap rates, cash-on-cash, IRR projections — instantly.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section id="how-it-works" class="py-16 sm:py-20 lg:py-32 px-4 sm: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-10 sm:mb-14 lg:mb-20">
|
|
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
<i data-lucide="play-circle" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
How It Works
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
Three Steps to<br><span class="gradient-text">Transform Your Business</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="space-y-4 sm:space-y-6 lg:space-y-8">
|
|
<div class="flex flex-col lg:flex-row items-center gap-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">1</span>
|
|
</div>
|
|
<div class="text-center lg:text-left">
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Just Text What You Need</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg: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-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">2</span>
|
|
</div>
|
|
<div class="text-center lg:text-left">
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Watch It Work</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg: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-4 sm:gap-6 lg:gap-10 glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 rounded-2xl lg: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-3xl sm:text-4xl lg:text-5xl font-black text-black">3</span>
|
|
</div>
|
|
<div class="text-center lg:text-left">
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-black mb-2 sm:mb-3 lg:mb-4">Close Deals, Grow Referrals</h3>
|
|
<p class="text-zinc-400 text-sm sm:text-base lg: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-16 sm:py-20 lg:py-32 px-4 sm:px-6">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-10 sm:mb-14 lg:mb-20">
|
|
<div class="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full glass text-xs sm:text-sm text-brand-400 mb-4 sm:mb-6 reveal-up">
|
|
<i data-lucide="credit-card" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
|
|
Pricing
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
Plans for Every<br><span class="gradient-text">CRE Professional</span>
|
|
</h2>
|
|
<p class="text-base sm:text-lg lg:text-xl xl: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-4 sm:gap-6 lg:gap-8">
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<h3 class="text-base sm:text-lg font-bold text-zinc-400 mb-2">Basic</h3>
|
|
<div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">$199<span class="text-base sm:text-lg lg:text-xl text-zinc-500 font-medium">/mo</span></div>
|
|
<p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">Perfect for solo agents getting started.</p>
|
|
<ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<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-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Basic outreach
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
CRM basics
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Email support
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 sm:py-4 glass-strong rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
|
|
Start Free Trial
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative rounded-2xl lg:rounded-3xl stagger-item">
|
|
<div class="absolute -inset-[2px] bg-gradient-to-r from-brand-500 via-cyan-500 to-violet-500 rounded-2xl lg:rounded-3xl opacity-80 blur-sm"></div>
|
|
<div class="relative glass-strong rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 h-full bg-[#0a0a0a]">
|
|
<div class="absolute -top-3 sm:-top-4 left-1/2 transform -translate-x-1/2">
|
|
<span class="px-3 sm:px-4 py-1 sm:py-1.5 rounded-full bg-gradient-to-r from-brand-500 to-cyan-500 text-black text-xs sm:text-sm font-bold whitespace-nowrap">Most Popular</span>
|
|
</div>
|
|
<h3 class="text-base sm:text-lg font-bold text-brand-400 mb-2 mt-2">Pro</h3>
|
|
<div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">$499<span class="text-base sm:text-lg lg:text-xl text-zinc-500 font-medium">/mo</span></div>
|
|
<p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">For serious agents closing multiple deals.</p>
|
|
<ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Everything in Basic
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Unlimited leads
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
AI voice & text
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
LOI generation
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Deal underwriting
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-white">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Priority support
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 sm:py-4 bg-gradient-to-r from-brand-500 to-cyan-500 hover:from-brand-400 hover:to-cyan-400 text-black rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base transition-all hover:scale-105 active:scale-95 btn-shine">
|
|
Start Free Trial
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass rounded-2xl lg:rounded-3xl p-5 sm:p-6 lg:p-10 feature-card stagger-item">
|
|
<h3 class="text-base sm:text-lg font-bold text-zinc-400 mb-2">Enterprise</h3>
|
|
<div class="text-3xl sm:text-4xl lg:text-5xl font-black mb-1 sm:mb-2">Custom</div>
|
|
<p class="text-zinc-500 text-xs sm:text-sm mb-6 sm:mb-8">For teams and brokerages at scale.</p>
|
|
<ul class="space-y-3 sm:space-y-4 mb-8 sm:mb-10">
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Everything in Pro
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Team collaboration
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Custom integrations
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
Dedicated CSM
|
|
</li>
|
|
<li class="flex items-center gap-2 sm:gap-3 text-sm sm:text-base text-zinc-300">
|
|
<div class="w-5 h-5 rounded-full bg-brand-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="check" class="w-3 h-3 text-brand-400"></i>
|
|
</div>
|
|
SLA guarantee
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 sm:py-4 glass-strong rounded-xl lg:rounded-2xl font-bold text-sm sm:text-base hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
|
|
Contact Sales
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA -->
|
|
<section class="py-16 sm:py-20 lg:py-32 px-4 sm: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-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-black mb-4 sm:mb-6 lg:mb-8 reveal-up leading-tight">
|
|
Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span>
|
|
</h2>
|
|
<p class="text-base sm:text-lg lg:text-xl xl:text-2xl text-zinc-400 mb-8 sm:mb-10 lg:mb-12 reveal-up">
|
|
Join hundreds of CRE professionals already using CRESYNC.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center max-w-xl mx-auto reveal-up">
|
|
<input type="email" placeholder="Enter your email" class="flex-1 px-4 sm:px-6 py-3.5 sm:py-4 lg:py-5 glass-strong rounded-xl lg:rounded-2xl text-base lg:text-lg outline-none focus:ring-2 focus:ring-brand-500/50 transition-all">
|
|
<button class="magnetic-btn px-6 sm:px-8 lg:px-10 py-3.5 sm:py-4 lg: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-xl lg:rounded-2xl text-base lg:text-lg transition-all hover:scale-105 active:scale-95 glow btn-shine whitespace-nowrap">
|
|
Get Started Free
|
|
</button>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-zinc-600 mt-4 sm:mt-6 reveal-up">14-day free trial. No credit card required.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-10 sm:py-12 lg:py-16 px-4 sm: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-6 sm:gap-8 lg:gap-10">
|
|
<a href="#" class="flex items-center gap-2 sm:gap-3">
|
|
<div class="w-10 h-10 sm:w-12 sm: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-base sm:text-lg text-black">CS</span>
|
|
</div>
|
|
<span class="font-black text-xl sm:text-2xl tracking-tight">CRESYNC</span>
|
|
</a>
|
|
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg: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>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-zinc-600">© 2026 CRESYNC. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Mark JS as loaded - enables animation hiding
|
|
document.body.classList.add('js-loaded');
|
|
|
|
// Custom cursor (Desktop only)
|
|
if (window.innerWidth >= 1024) {
|
|
const cursor = document.getElementById('cursor');
|
|
const cursorDot = document.getElementById('cursor-dot');
|
|
let cursorX = 0, cursorY = 0, dotX = 0, dotY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
cursorX = e.clientX;
|
|
cursorY = e.clientY;
|
|
}, { passive: true });
|
|
|
|
function animateCursor() {
|
|
dotX += (cursorX - dotX) * 0.15;
|
|
dotY += (cursorY - dotY) * 0.15;
|
|
if (cursor) {
|
|
cursor.style.left = cursorX - 10 + 'px';
|
|
cursor.style.top = cursorY - 10 + 'px';
|
|
}
|
|
if (cursorDot) {
|
|
cursorDot.style.left = dotX - 3 + 'px';
|
|
cursorDot.style.top = dotY - 3 + 'px';
|
|
}
|
|
requestAnimationFrame(animateCursor);
|
|
}
|
|
animateCursor();
|
|
|
|
document.querySelectorAll('a, button, input, .feature-card').forEach(el => {
|
|
el.addEventListener('mouseenter', () => cursor && cursor.classList.add('hover'));
|
|
el.addEventListener('mouseleave', () => cursor && 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.15}px, ${y * 0.15}px) scale(1.02)`;
|
|
});
|
|
btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });
|
|
});
|
|
}
|
|
|
|
// GSAP Animations
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// Reveal animations
|
|
gsap.utils.toArray('.reveal-up').forEach(el => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, y: 50 },
|
|
{ opacity: 1, y: 0, duration: 0.8, 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.95 },
|
|
{ opacity: 1, scale: 1, duration: 1, ease: "power3.out",
|
|
scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none none" }
|
|
}
|
|
);
|
|
});
|
|
|
|
// Stagger animations
|
|
gsap.utils.toArray('.stagger-item').forEach((el, i) => {
|
|
gsap.fromTo(el,
|
|
{ opacity: 0, y: 30 },
|
|
{ opacity: 1, y: 0, duration: 0.6, ease: "power3.out",
|
|
scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none none" },
|
|
delay: (i % 4) * 0.1
|
|
}
|
|
);
|
|
});
|
|
|
|
// Counter animation
|
|
document.querySelectorAll('.counter').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 -80",
|
|
onUpdate: (self) => {
|
|
if (self.scroll() > 80) {
|
|
navbar.classList.add('glass-strong');
|
|
navbar.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
|
|
} else {
|
|
navbar.classList.remove('glass-strong');
|
|
navbar.style.borderBottom = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// 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) {
|
|
const div = document.createElement('div');
|
|
div.className = msg.type === 'user' ? 'flex justify-end' : 'flex gap-2 sm:gap-3';
|
|
div.style.opacity = '0';
|
|
div.style.transform = 'translateY(15px)';
|
|
|
|
if (msg.type === 'user') {
|
|
div.innerHTML = `<div class="bg-brand-500/20 border border-brand-500/30 rounded-xl sm:rounded-2xl rounded-br-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-[85%]"><p class="text-xs sm:text-sm">${msg.text}</p></div>`;
|
|
} else {
|
|
let actionHtml = msg.action ? `<div class="glass rounded-lg sm:rounded-xl px-2 sm:px-3 lg:px-4 py-1.5 sm:py-2 flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-brand-400 mt-1.5 sm:mt-2"><i data-lucide="check-circle" class="w-3 h-3 sm:w-4 sm:h-4"></i><span>${msg.action}</span></div>` : '';
|
|
div.innerHTML = `<div class="w-7 h-7 sm:w-8 sm:h-8 lg:w-9 lg:h-9 rounded-lg sm: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-[10px] sm:text-xs text-black">CS</span></div><div><div class="glass rounded-xl sm:rounded-2xl rounded-tl-sm px-3 sm:px-4 lg:px-5 py-2 sm:py-3 max-w-md"><p class="text-xs sm:text-sm text-zinc-300">${msg.text}</p></div>${actionHtml}</div>`;
|
|
}
|
|
return div;
|
|
}
|
|
|
|
let chatAnimated = false;
|
|
ScrollTrigger.create({
|
|
trigger: chatDemo,
|
|
start: "top 75%",
|
|
onEnter: () => {
|
|
if (chatAnimated) return;
|
|
chatAnimated = true;
|
|
messages.forEach((msg, i) => {
|
|
setTimeout(() => {
|
|
const msgEl = createMessage(msg);
|
|
chatDemo.appendChild(msgEl);
|
|
lucide.createIcons();
|
|
gsap.to(msgEl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" });
|
|
chatDemo.scrollTop = chatDemo.scrollHeight;
|
|
}, i * 1000);
|
|
});
|
|
},
|
|
once: true
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|