1614 lines
53 KiB
HTML
1614 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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.">
|
|
|
|
<!-- Preconnect to critical origins -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<!-- Load only needed font weights -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Reset & Base */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background: #030303;
|
|
color: #fff;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
min-width: 320px;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
|
|
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
|
|
|
|
@media (min-width: 640px) {
|
|
.container, .container-lg { padding: 0 1.5rem; }
|
|
}
|
|
|
|
.text-center { text-align: center; }
|
|
.font-bold { font-weight: 700; }
|
|
.font-black { font-weight: 900; }
|
|
|
|
.text-zinc-400 { color: #a1a1aa; }
|
|
.text-zinc-500 { color: #71717a; }
|
|
.text-zinc-600 { color: #52525b; }
|
|
.text-brand { color: #22c55e; }
|
|
.text-red { color: #f87171; }
|
|
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.gap-3 { gap: 0.75rem; }
|
|
.gap-4 { gap: 1rem; }
|
|
.gap-6 { gap: 1.5rem; }
|
|
.gap-8 { gap: 2rem; }
|
|
|
|
.grid { display: grid; }
|
|
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
|
|
|
|
.hidden { display: none; }
|
|
|
|
.rounded-lg { border-radius: 0.5rem; }
|
|
.rounded-xl { border-radius: 0.75rem; }
|
|
.rounded-2xl { border-radius: 1rem; }
|
|
.rounded-3xl { border-radius: 1.5rem; }
|
|
.rounded-full { border-radius: 9999px; }
|
|
|
|
.w-full { width: 100%; }
|
|
.h-full { height: 100%; }
|
|
|
|
/* Responsive */
|
|
@media (min-width: 768px) {
|
|
.md\:flex { display: flex; }
|
|
.md\:hidden { display: none; }
|
|
.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
|
|
.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
.md\:flex-row { flex-direction: row; }
|
|
.md\:text-6xl { font-size: 3.75rem; }
|
|
.md\:text-5xl { font-size: 3rem; }
|
|
.md\:text-2xl { font-size: 1.5rem; }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
|
|
.lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
|
|
.lg\:flex { display: flex; }
|
|
.lg\:text-8xl { font-size: 6rem; }
|
|
.lg\:text-7xl { font-size: 4.5rem; }
|
|
}
|
|
|
|
/* Components */
|
|
.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);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: gradient-shift 6s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.glow {
|
|
box-shadow: 0 0 60px rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1.5rem;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
border-radius: 0.75rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.btn { padding: 1rem 2rem; font-size: 1rem; }
|
|
}
|
|
|
|
.btn:hover { transform: translateY(-2px); }
|
|
.btn:active { transform: translateY(0); }
|
|
|
|
.btn-primary {
|
|
background: #22c55e;
|
|
color: #000;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #4ade80;
|
|
box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 1.25rem 0;
|
|
transition: background 0.3s, padding 0.3s;
|
|
}
|
|
|
|
.navbar.scrolled {
|
|
background: rgba(3, 3, 3, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.75rem;
|
|
background: linear-gradient(135deg, #22c55e, #10b981);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
font-size: 0.875rem;
|
|
color: #000;
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
gap: 2.5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: #a1a1aa;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover { color: #fff; }
|
|
|
|
@media (min-width: 768px) {
|
|
.nav-links { display: flex; }
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: 6rem 0 3rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.hero { padding: 7rem 0 4rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.hero { padding: 8rem 0 5rem; }
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 197, 94, 0.12), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.08), transparent),
|
|
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(139, 92, 246, 0.08), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #d4d4d8;
|
|
}
|
|
|
|
.badge-dot {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 2.25rem;
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.025em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
@media (min-width: 480px) { .hero-title { font-size: 2.75rem; } }
|
|
@media (min-width: 640px) { .hero-title { font-size: 3.5rem; } }
|
|
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; line-height: 1; } }
|
|
@media (min-width: 1024px) { .hero-title { font-size: 6rem; } }
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
color: #a1a1aa;
|
|
max-width: 48rem;
|
|
margin: 0 auto 2rem;
|
|
line-height: 1.6;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
@media (min-width: 480px) { .hero-subtitle { font-size: 1.125rem; } }
|
|
@media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; padding: 0; margin-bottom: 2.5rem; line-height: 1.7; } }
|
|
@media (min-width: 768px) { .hero-subtitle { font-size: 1.5rem; } }
|
|
|
|
/* Product Mockup */
|
|
.mockup-wrapper {
|
|
position: relative;
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 2px;
|
|
border-radius: 1rem;
|
|
background: linear-gradient(135deg, #22c55e, #10b981, #06b6d4, #8b5cf6);
|
|
background-size: 300% 300%;
|
|
animation: gradient-shift 4s ease infinite;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.mockup-wrapper { border-radius: 1.5rem; }
|
|
}
|
|
|
|
.mockup {
|
|
background: #0a0a0a;
|
|
border-radius: calc(1rem - 2px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.mockup { border-radius: calc(1.5rem - 2px); }
|
|
}
|
|
|
|
.mockup-chrome {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.mockup-dots {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.mockup-dot {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.mockup-dot.red { background: #ef4444; }
|
|
.mockup-dot.yellow { background: #eab308; }
|
|
.mockup-dot.green { background: #22c55e; }
|
|
|
|
.mockup-url {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 1rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: #71717a;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.mockup-body {
|
|
display: flex;
|
|
height: 22rem;
|
|
}
|
|
|
|
@media (min-width: 480px) { .mockup-body { height: 26rem; } }
|
|
@media (min-width: 768px) { .mockup-body { height: 32rem; } }
|
|
|
|
.mockup-sidebar {
|
|
width: 4rem;
|
|
border-right: 1px solid rgba(255,255,255,0.05);
|
|
padding: 1rem 0;
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 768px) { .mockup-sidebar { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } }
|
|
|
|
.sidebar-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #52525b;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
.sidebar-icon.active {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.mockup-chat {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.chat-messages { padding: 1.5rem; gap: 1rem; }
|
|
}
|
|
|
|
.message {
|
|
max-width: 90%;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.message {
|
|
max-width: 85%;
|
|
padding: 0.875rem 1.25rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
.message.user {
|
|
align-self: flex-end;
|
|
background: rgba(34, 197, 94, 0.15);
|
|
border: 1px solid rgba(34, 197, 94, 0.25);
|
|
border-bottom-right-radius: 0.25rem;
|
|
}
|
|
|
|
.message.ai {
|
|
align-self: flex-start;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-bottom-left-radius: 0.25rem;
|
|
color: #d4d4d8;
|
|
}
|
|
|
|
.message-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: #22c55e;
|
|
}
|
|
|
|
.chat-input {
|
|
padding: 0.5rem;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.chat-input { padding: 1rem; }
|
|
}
|
|
|
|
.chat-input-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 0.75rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.chat-input-inner {
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1rem;
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
|
|
.chat-input input {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
color: #fff;
|
|
font-size: 0.8125rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.chat-input input { font-size: 0.875rem; }
|
|
}
|
|
|
|
.chat-input input::placeholder { color: #52525b; }
|
|
|
|
.chat-send {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 0.625rem;
|
|
background: #22c55e;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.chat-send:hover { background: #4ade80; }
|
|
|
|
.mockup-panel {
|
|
width: 22rem;
|
|
border-left: 1px solid rgba(255,255,255,0.05);
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) { .mockup-panel { display: flex; flex-direction: column; } }
|
|
|
|
.panel-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.panel-tab {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #52525b;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.panel-tab.active {
|
|
color: #22c55e;
|
|
border-bottom: 2px solid #22c55e;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.property-card {
|
|
padding: 1.25rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 1rem;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.property-card:hover {
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.property-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.property-name {
|
|
font-weight: 700;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.property-price {
|
|
font-weight: 700;
|
|
color: #22c55e;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.property-details {
|
|
font-size: 0.75rem;
|
|
color: #71717a;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.property-tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.property-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.property-tag.match {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.property-tag.owner {
|
|
background: rgba(255,255,255,0.06);
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* Section Styles */
|
|
section {
|
|
padding: 3rem 0;
|
|
}
|
|
|
|
@media (min-width: 640px) { section { padding: 5rem 0; } }
|
|
@media (min-width: 768px) { section { padding: 6rem 0; } }
|
|
@media (min-width: 1024px) { section { padding: 8rem 0; } }
|
|
|
|
.section-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 900;
|
|
line-height: 1.15;
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
@media (min-width: 480px) { .section-title { font-size: 2rem; } }
|
|
@media (min-width: 640px) { .section-title { font-size: 2.25rem; margin-bottom: 1.5rem; } }
|
|
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
|
|
@media (min-width: 1024px) { .section-title { font-size: 3.75rem; } }
|
|
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
color: #a1a1aa;
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (min-width: 640px) { .section-subtitle { font-size: 1.125rem; line-height: 1.7; } }
|
|
@media (min-width: 768px) { .section-subtitle { font-size: 1.25rem; } }
|
|
|
|
/* Problem Cards */
|
|
.problem-card {
|
|
padding: 1.25rem;
|
|
border-radius: 1rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(248, 113, 113, 0.1);
|
|
transition: border-color 0.3s, transform 0.3s;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.problem-card { padding: 1.5rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.problem-card { padding: 2rem; border-radius: 1.5rem; }
|
|
}
|
|
|
|
.problem-card:hover {
|
|
border-color: rgba(248, 113, 113, 0.3);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.problem-icon {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 1rem;
|
|
background: rgba(248, 113, 113, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
color: #f87171;
|
|
}
|
|
|
|
.problem-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.problem-text {
|
|
color: #a1a1aa;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Pipeline */
|
|
.pipeline-section {
|
|
position: relative;
|
|
background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.03), transparent);
|
|
}
|
|
|
|
.pipeline-card {
|
|
padding: 1.25rem;
|
|
border-radius: 1rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
position: relative;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.pipeline-card { padding: 1.5rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pipeline-card { padding: 2rem; border-radius: 1.5rem; }
|
|
}
|
|
|
|
.pipeline-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.1);
|
|
}
|
|
|
|
.pipeline-number {
|
|
position: absolute;
|
|
top: -1rem;
|
|
left: -1rem;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
color: #000;
|
|
}
|
|
|
|
.pipeline-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.pipeline-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.pipeline-text {
|
|
color: #a1a1aa;
|
|
font-size: 0.9375rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.pipeline-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.75rem;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.75rem;
|
|
color: #71717a;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.pipeline-tag-dot {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Feature Cards */
|
|
.feature-card {
|
|
padding: 1.25rem;
|
|
border-radius: 1rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
transition: transform 0.3s, border-color 0.3s;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.feature-card { padding: 1.5rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.feature-card { padding: 2rem; border-radius: 1.5rem; }
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(34, 197, 94, 0.2);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-text {
|
|
color: #a1a1aa;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* How It Works */
|
|
.step-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
border-radius: 1rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.step-card { padding: 2rem; gap: 1.25rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.step-card {
|
|
flex-direction: row;
|
|
gap: 2.5rem;
|
|
padding: 2.5rem;
|
|
border-radius: 1.5rem;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.step-number {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: #000;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.step-number { width: 5rem; height: 5rem; font-size: 2.5rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 900;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.step-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
|
|
}
|
|
|
|
.step-text {
|
|
color: #a1a1aa;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.step-text { font-size: 1.0625rem; line-height: 1.7; }
|
|
}
|
|
|
|
/* Pricing */
|
|
.pricing-card {
|
|
padding: 1.5rem;
|
|
border-radius: 1rem;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.pricing-card { padding: 2rem; border-radius: 1.25rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pricing-card { padding: 2.5rem; border-radius: 1.5rem; }
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
position: relative;
|
|
background: #0a0a0a;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.pricing-card.featured::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: calc(1.5rem + 2px);
|
|
background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6);
|
|
z-index: -1;
|
|
}
|
|
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -0.875rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0.375rem 1rem;
|
|
border-radius: 9999px;
|
|
background: linear-gradient(135deg, #22c55e, #06b6d4);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
|
|
.pricing-tier {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.pricing-price {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.pricing-price { font-size: 2.5rem; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pricing-price { font-size: 2.75rem; }
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 1rem;
|
|
color: #71717a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pricing-desc {
|
|
font-size: 0.875rem;
|
|
color: #71717a;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.pricing-features li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem 0;
|
|
font-size: 0.9375rem;
|
|
color: #d4d4d8;
|
|
}
|
|
|
|
.pricing-check {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border-radius: 50%;
|
|
background: rgba(34, 197, 94, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
position: relative;
|
|
background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.05), transparent);
|
|
}
|
|
|
|
.cta-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.cta-input { flex-direction: row; }
|
|
}
|
|
|
|
.cta-input input {
|
|
flex: 1;
|
|
padding: 1.125rem 1.5rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 0.75rem;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.cta-input input:focus {
|
|
border-color: rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.cta-input input::placeholder { color: #52525b; }
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 3rem 0;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.footer-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.footer-inner {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #71717a;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.footer-links a:hover { color: #fff; }
|
|
|
|
.footer-copy {
|
|
font-size: 0.875rem;
|
|
color: #52525b;
|
|
}
|
|
|
|
/* Icons (inline SVG) */
|
|
.icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
.icon-sm { width: 1rem; height: 1rem; }
|
|
.icon-lg { width: 1.5rem; height: 1.5rem; }
|
|
.icon-xl { width: 1.75rem; height: 1.75rem; }
|
|
|
|
/* Animations - Only when JS loads */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.animate-in {
|
|
animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar" id="navbar">
|
|
<div class="container flex items-center justify-between">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">CS</div>
|
|
<span class="logo-text">CRESYNC</span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#how-it-works">How It Works</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
</ul>
|
|
<button class="btn btn-primary" style="padding: 0.625rem 1.25rem; font-size: 0.875rem;">Get Early Access</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-grid"></div>
|
|
|
|
<div class="container text-center" style="position: relative;">
|
|
<div class="badge glass" style="margin-bottom: 2rem;">
|
|
<span class="badge-dot"></span>
|
|
Now in Early Access — Limited Spots
|
|
</div>
|
|
|
|
<h1 class="hero-title">
|
|
Your <span class="gradient-text">24/7 CRE</span><br>Employee
|
|
</h1>
|
|
|
|
<p class="hero-subtitle">
|
|
Source deals. Nurture leads. Close contracts.<br>
|
|
<strong style="color: #fff;">All through a simple conversation.</strong>
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-4 justify-center" style="margin-bottom: 4rem;">
|
|
<div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;">
|
|
<button class="btn btn-primary glow">
|
|
Start Free Trial
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
|
|
</button>
|
|
<button class="btn btn-secondary">
|
|
<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
|
|
Watch Demo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Mockup -->
|
|
<div class="mockup-wrapper glow">
|
|
<div class="mockup">
|
|
<div class="mockup-chrome">
|
|
<div class="mockup-dots">
|
|
<div class="mockup-dot red"></div>
|
|
<div class="mockup-dot yellow"></div>
|
|
<div class="mockup-dot green"></div>
|
|
</div>
|
|
<div class="mockup-url">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
app.cresync.com
|
|
</div>
|
|
<div style="width: 50px;"></div>
|
|
</div>
|
|
|
|
<div class="mockup-body">
|
|
<div class="mockup-sidebar">
|
|
<div class="sidebar-icon active">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
|
|
</div>
|
|
<div class="sidebar-icon">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/></svg>
|
|
</div>
|
|
<div class="sidebar-icon">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<div class="sidebar-icon">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup-chat">
|
|
<div class="chat-messages">
|
|
<div class="message user">Find me multi-family properties in Austin, TX with 20+ units under $5M</div>
|
|
<div class="message ai">Found 23 properties matching your criteria. I've pulled owner contact info and property details for each. Ready to start outreach?</div>
|
|
<div class="message user">Yes, draft a personalized email sequence for the top 10</div>
|
|
<div class="message ai">
|
|
Done! I've created a 5-touch email sequence personalized to each property owner. The campaign is ready to launch in GHL.
|
|
<div class="message-action">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
Outreach campaign created → View in GHL
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-input">
|
|
<div class="chat-input-inner">
|
|
<input type="text" placeholder="Ask CRESYNC anything...">
|
|
<button class="chat-send">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup-panel">
|
|
<div class="panel-tabs">
|
|
<button class="panel-tab active">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/></svg>
|
|
Properties
|
|
</button>
|
|
<button class="panel-tab">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
|
Campaign
|
|
</button>
|
|
</div>
|
|
|
|
<div class="panel-content">
|
|
<div class="property-card">
|
|
<div class="property-header">
|
|
<div>
|
|
<div class="property-name">Riverside Apartments</div>
|
|
<div class="property-details">24 units • Austin, TX 78701</div>
|
|
</div>
|
|
<div class="property-price">$4.2M</div>
|
|
</div>
|
|
<div class="property-tags">
|
|
<span class="property-tag match">98% Match</span>
|
|
<span class="property-tag owner">Owner Direct</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-card">
|
|
<div class="property-header">
|
|
<div>
|
|
<div class="property-name">Oak Valley Complex</div>
|
|
<div class="property-details">28 units • Austin, TX 78745</div>
|
|
</div>
|
|
<div class="property-price">$3.8M</div>
|
|
</div>
|
|
<div class="property-tags">
|
|
<span class="property-tag match">94% Match</span>
|
|
<span class="property-tag owner">LLC Owner</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-card">
|
|
<div class="property-header">
|
|
<div>
|
|
<div class="property-name">Sunset Ridge</div>
|
|
<div class="property-details">32 units • Austin, TX 78702</div>
|
|
</div>
|
|
<div class="property-price">$4.9M</div>
|
|
</div>
|
|
<div class="property-tags">
|
|
<span class="property-tag match" style="background: rgba(234, 179, 8, 0.15); color: #eab308;">87% Match</span>
|
|
<span class="property-tag owner">Trust Owner</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem Section -->
|
|
<section style="padding-top: 4rem;">
|
|
<div class="container">
|
|
<div class="text-center" style="margin-bottom: 4rem;">
|
|
<div class="section-badge glass" style="color: #f87171;">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
|
|
The Problem
|
|
</div>
|
|
<h2 class="section-title">The CRE Tech Stack is a <span class="text-red">Nightmare</span></h2>
|
|
<p class="section-subtitle">You didn't become a CRE agent to fight with software integrations.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="problem-card">
|
|
<div class="problem-icon">
|
|
<svg class="icon-xl" viewBox="0 0 24 24"><path d="m19 5-7 7-7-7"/><path d="m19 12-7 7-7-7"/></svg>
|
|
</div>
|
|
<h3 class="problem-title">Integration Hell</h3>
|
|
<p class="problem-text">Reonomy doesn't talk to GHL. GHL doesn't talk to your spreadsheets. You're the integration layer.</p>
|
|
</div>
|
|
|
|
<div class="problem-card">
|
|
<div class="problem-icon">
|
|
<svg class="icon-xl" viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg>
|
|
</div>
|
|
<h3 class="problem-title">Cognitive Overload</h3>
|
|
<p class="problem-text">5 different UIs. 5 different workflows. 5 different learning curves. Your brain is fried by noon.</p>
|
|
</div>
|
|
|
|
<div class="problem-card">
|
|
<div class="problem-icon">
|
|
<svg class="icon-xl" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</div>
|
|
<h3 class="problem-title">Time Vampire</h3>
|
|
<p class="problem-text">Copy-paste. Tab-switch. Manual entry. Context-switch. Repeat. Hours vanish into the void.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pipeline Section -->
|
|
<section class="pipeline-section">
|
|
<div class="container">
|
|
<div class="text-center" style="margin-bottom: 4rem;">
|
|
<div class="section-badge glass" style="color: #22c55e;">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
|
|
The Solution
|
|
</div>
|
|
<h2 class="section-title">One Conversation. <span class="gradient-text">Complete Pipeline.</span></h2>
|
|
<p class="section-subtitle">CRESYNC orchestrates your entire deal flow through a simple chat interface.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="pipeline-card">
|
|
<div class="pipeline-number" style="background: linear-gradient(135deg, #22c55e, #10b981);">1</div>
|
|
<div class="pipeline-icon" style="background: rgba(34, 197, 94, 0.1); color: #22c55e;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
</div>
|
|
<h3 class="pipeline-title">Source</h3>
|
|
<p class="pipeline-text">Pull targeted leads with owner info, financials, and property details.</p>
|
|
<span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #22c55e;"></span> Reonomy</span>
|
|
</div>
|
|
|
|
<div class="pipeline-card">
|
|
<div class="pipeline-number" style="background: linear-gradient(135deg, #10b981, #06b6d4);">2</div>
|
|
<div class="pipeline-icon" style="background: rgba(16, 185, 129, 0.1); color: #10b981;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/></svg>
|
|
</div>
|
|
<h3 class="pipeline-title">Nurture</h3>
|
|
<p class="pipeline-text">Multi-channel outreach with AI voice, drip campaigns, and auto follow-ups.</p>
|
|
<span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #10b981;"></span> GoHighLevel</span>
|
|
</div>
|
|
|
|
<div class="pipeline-card">
|
|
<div class="pipeline-number" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">3</div>
|
|
<div class="pipeline-icon" style="background: rgba(6, 182, 212, 0.1); color: #06b6d4;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
|
|
</div>
|
|
<h3 class="pipeline-title">Close</h3>
|
|
<p class="pipeline-text">Generate professional LOIs instantly and turn appointments into contracts.</p>
|
|
<span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #06b6d4;"></span> LOI Generator</span>
|
|
</div>
|
|
|
|
<div class="pipeline-card">
|
|
<div class="pipeline-number" style="background: linear-gradient(135deg, #8b5cf6, #a855f7);">4</div>
|
|
<div class="pipeline-icon" style="background: rgba(139, 92, 246, 0.1); color: #8b5cf6;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
|
|
</div>
|
|
<h3 class="pipeline-title">Validate</h3>
|
|
<p class="pipeline-text">Run full underwriting analysis to ensure every deal makes financial sense.</p>
|
|
<span class="pipeline-tag"><span class="pipeline-tag-dot" style="background: #8b5cf6;"></span> Underwriting</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features">
|
|
<div class="container">
|
|
<div class="text-center" style="margin-bottom: 4rem;">
|
|
<div class="section-badge glass" style="color: #22c55e;">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
|
|
Features
|
|
</div>
|
|
<h2 class="section-title">Everything to <span class="gradient-text">Dominate CRE</span></h2>
|
|
<p class="section-subtitle">A complete toolkit unified under one conversational interface.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.15)); color: #22c55e;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Lead Sourcing</h3>
|
|
<p class="feature-text">Pull property data and owner contacts with natural language queries.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(59,130,246,0.15)); color: #06b6d4;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Multi-Channel Outreach</h3>
|
|
<p class="feature-text">Email, SMS, WhatsApp, social DMs — all from one conversation.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(168,85,247,0.15)); color: #8b5cf6;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">AI Voice & Text</h3>
|
|
<p class="feature-text">Automated follow-ups, appointment setting, and lead qualification 24/7.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.15)); color: #f97316;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Drip Campaigns</h3>
|
|
<p class="feature-text">Set up automated nurture sequences that run on autopilot.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(244,63,94,0.15)); color: #ec4899;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">LOI Generation</h3>
|
|
<p class="feature-text">Draft professional Letters of Intent in seconds with deal-specific terms.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon" style="background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(20,184,166,0.15)); color: #10b981;">
|
|
<svg class="icon-lg" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Deal Underwriting</h3>
|
|
<p class="feature-text">Full financial analysis — cap rates, cash-on-cash, IRR projections.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section id="how-it-works" class="pipeline-section">
|
|
<div class="container">
|
|
<div class="text-center" style="margin-bottom: 4rem;">
|
|
<div class="section-badge glass" style="color: #22c55e;">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
|
|
How It Works
|
|
</div>
|
|
<h2 class="section-title">Three Steps to <span class="gradient-text">Transform Your Business</span></h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6" style="max-width: 56rem; margin: 0 auto;">
|
|
<div class="step-card">
|
|
<div class="step-number" style="background: linear-gradient(135deg, #22c55e, #10b981);">1</div>
|
|
<div>
|
|
<h3 class="step-title">Just Text What You Need</h3>
|
|
<p class="step-text">"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="step-card">
|
|
<div class="step-number" style="background: linear-gradient(135deg, #06b6d4, #3b82f6);">2</div>
|
|
<div>
|
|
<h3 class="step-title">Watch It Work</h3>
|
|
<p class="step-text">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="step-card">
|
|
<div class="step-number" style="background: linear-gradient(135deg, #8b5cf6, #a855f7);">3</div>
|
|
<div>
|
|
<h3 class="step-title">Close Deals, Grow Referrals</h3>
|
|
<p class="step-text">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">
|
|
<div class="container">
|
|
<div class="text-center" style="margin-bottom: 4rem;">
|
|
<div class="section-badge glass" style="color: #22c55e;">
|
|
<svg class="icon-sm" viewBox="0 0 24 24"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
|
|
Pricing
|
|
</div>
|
|
<h2 class="section-title">Plans for Every <span class="gradient-text">CRE Professional</span></h2>
|
|
<p class="section-subtitle">From solo agents to enterprise brokerages. Scale as you grow.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6" style="max-width: 64rem; margin: 0 auto;">
|
|
<div class="pricing-card">
|
|
<div class="pricing-tier text-zinc-400">Basic</div>
|
|
<div class="pricing-price">$199<span class="pricing-period">/mo</span></div>
|
|
<p class="pricing-desc">Perfect for solo agents getting started.</p>
|
|
<ul class="pricing-features">
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Lead sourcing (500/mo)</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Basic outreach</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> CRM basics</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Email support</li>
|
|
</ul>
|
|
<button class="btn btn-secondary w-full">Start Free Trial</button>
|
|
</div>
|
|
|
|
<div class="pricing-card featured">
|
|
<span class="pricing-badge">Most Popular</span>
|
|
<div class="pricing-tier text-brand" style="margin-top: 0.5rem;">Pro</div>
|
|
<div class="pricing-price">$499<span class="pricing-period">/mo</span></div>
|
|
<p class="pricing-desc">For serious agents closing multiple deals.</p>
|
|
<ul class="pricing-features">
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Everything in Basic</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Unlimited leads</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> AI voice & text</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> LOI generation</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Deal underwriting</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Priority support</li>
|
|
</ul>
|
|
<button class="btn btn-primary w-full">Start Free Trial</button>
|
|
</div>
|
|
|
|
<div class="pricing-card">
|
|
<div class="pricing-tier text-zinc-400">Enterprise</div>
|
|
<div class="pricing-price">Custom</div>
|
|
<p class="pricing-desc">For teams and brokerages at scale.</p>
|
|
<ul class="pricing-features">
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Everything in Pro</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Team collaboration</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Custom integrations</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> Dedicated CSM</li>
|
|
<li><span class="pricing-check"><svg class="icon-sm" viewBox="0 0 24 24" style="color: #22c55e;"><polyline points="20 6 9 17 4 12"/></svg></span> SLA guarantee</li>
|
|
</ul>
|
|
<button class="btn btn-secondary w-full">Contact Sales</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section">
|
|
<div class="container text-center">
|
|
<h2 class="section-title">Ready to Close More Deals<br><span class="gradient-text">With Less Work?</span></h2>
|
|
<p class="section-subtitle" style="margin-bottom: 2.5rem;">Join hundreds of CRE professionals already using CRESYNC.</p>
|
|
|
|
<div class="cta-input">
|
|
<input type="email" placeholder="Enter your email">
|
|
<button class="btn btn-primary glow" style="white-space: nowrap;">Get Started Free</button>
|
|
</div>
|
|
|
|
<p class="text-zinc-600" style="margin-top: 1.5rem; font-size: 0.875rem;">14-day free trial. No credit card required.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<a href="#" class="logo">
|
|
<div class="logo-icon">CS</div>
|
|
<span class="logo-text">CRESYNC</span>
|
|
</a>
|
|
|
|
<div class="footer-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#how-it-works">How It Works</a>
|
|
<a href="#pricing">Pricing</a>
|
|
<a href="#">Privacy</a>
|
|
<a href="#">Terms</a>
|
|
</div>
|
|
|
|
<p class="footer-copy">© 2026 CRESYNC. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Minimal JS - only navbar scroll effect
|
|
const navbar = document.getElementById('navbar');
|
|
let lastScroll = 0;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentScroll = window.pageYOffset;
|
|
if (currentScroll > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
lastScroll = currentScroll;
|
|
}, { passive: true });
|
|
</script>
|
|
</body>
|
|
</html>
|