1651 lines
54 KiB
HTML
1651 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Changemaker Lite - Campaign Power Tools</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #6f42c1;
|
|
--primary-dark: #5a32a3;
|
|
--accent: #F5A9B8;
|
|
--text-dark: #1a1a1a;
|
|
--text-light: #666;
|
|
--bg-light: #f8f9fa;
|
|
--bg-white: #ffffff;
|
|
--border: #e0e0e0;
|
|
--success: #28a745;
|
|
--warning: #ffc107;
|
|
--shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
--shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
color: var(--text-dark);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background: var(--bg-white);
|
|
box-shadow: var(--shadow);
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.header.scrolled {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--text-dark);
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.cta-button {
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 8rem 2rem 4rem;
|
|
background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-block;
|
|
background: var(--accent);
|
|
color: var(--text-dark);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.canadian-badge {
|
|
display: inline-block;
|
|
background: #ff0000;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.2;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.25rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 2rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--primary);
|
|
padding: 1rem 2rem;
|
|
border: 2px solid var(--primary);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
/* Quick Stats */
|
|
.quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Desktop: 4 columns for stats */
|
|
@media (min-width: 768px) {
|
|
.quick-stats {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--text-dark);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Problem Section */
|
|
.problem-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-white);
|
|
}
|
|
|
|
.section-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.125rem;
|
|
color: var(--text-light);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.problem-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.problem-card {
|
|
background: var(--bg-light);
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.problem-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.problem-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.problem-card h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.problem-card p {
|
|
color: var(--text-light);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Solution Section */
|
|
.solution-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
.solution-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.solution-showcase:nth-child(even) {
|
|
direction: rtl;
|
|
}
|
|
|
|
.solution-showcase:nth-child(even) .showcase-content {
|
|
direction: ltr;
|
|
}
|
|
|
|
.showcase-content h3 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.showcase-content p {
|
|
color: var(--text-light);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.feature-list li {
|
|
padding: 0.75rem 0;
|
|
color: var(--text-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.feature-list li::before {
|
|
content: "✓";
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--success);
|
|
color: white;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.screenshot-placeholder {
|
|
background: var(--bg-white);
|
|
border: 2px dashed var(--border);
|
|
border-radius: 12px;
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
color: var(--text-light);
|
|
font-style: italic;
|
|
min-height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mobile-screenshot {
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Power Tools Grid */
|
|
.tools-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-white);
|
|
}
|
|
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.tool-card {
|
|
background: var(--bg-white);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tool-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.tool-card:hover::before {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.tool-card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tool-icon {
|
|
font-size: 2rem;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--bg-light);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.tool-card h3 {
|
|
font-size: 1.25rem;
|
|
color: var(--text-dark);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tool-description {
|
|
color: var(--text-light);
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.tool-features {
|
|
list-style: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.tool-features li {
|
|
padding: 0.5rem 0;
|
|
color: var(--text-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tool-features li::before {
|
|
content: "→";
|
|
color: var(--primary);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tool-cta {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tool-cta .btn-secondary {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* Integration Section */
|
|
.integration-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
.integration-visual {
|
|
max-width: 800px;
|
|
margin: 3rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.integration-diagram {
|
|
background: var(--bg-white);
|
|
border-radius: 12px;
|
|
padding: 3rem;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
/* Testimonial Section */
|
|
.testimonial-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--primary);
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.testimonial-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.testimonial-section h2 {
|
|
color: white;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.testimonial-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.testimonial-author {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.testimonial-role {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Live Sites Grid */
|
|
.live-sites-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.site-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.site-card:hover {
|
|
transform: translateY(-4px);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.site-card.featured-site {
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.site-badge {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 1rem;
|
|
background: var(--accent);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-icon {
|
|
font-size: 2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.site-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.site-name {
|
|
font-weight: 600;
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.site-desc {
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0.75rem;
|
|
line-height: 1.4;
|
|
color: #dfbfe6;
|
|
}
|
|
|
|
.site-status {
|
|
font-size: 0.75rem;
|
|
color: #4ade80;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.proof-stats h3 {
|
|
color: white;
|
|
margin-bottom: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-mini-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 1rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mini-stat {
|
|
text-align: center;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mini-stat .stat-number {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.mini-stat .stat-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-white);
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.cta-section h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.cta-section p {
|
|
font-size: 1.125rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Data Ownership Section */
|
|
.sovereignty-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-white);
|
|
}
|
|
|
|
.sovereignty-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.sovereignty-card {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background: var(--bg-light);
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.sovereignty-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.sovereignty-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.sovereignty-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.comparison-visual {
|
|
max-width: 800px;
|
|
margin: 3rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.comparison-visual h3 {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.comparison-item {
|
|
background: var(--bg-light);
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.comparison-item h4 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.comparison-list {
|
|
list-style: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.comparison-list li {
|
|
padding: 0.5rem 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.comparison-list.bad li {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.comparison-list.good li {
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Pricing Section */
|
|
.pricing-section {
|
|
padding: 4rem 2rem;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
margin: 3rem 0;
|
|
max-width: 1000px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--bg-white);
|
|
border: 2px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
border-color: var(--primary);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 0.25rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pricing-header h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.price {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.price-period {
|
|
font-size: 1rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.pricing-features li {
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.pricing-note {
|
|
font-size: 0.875rem;
|
|
color: var(--text-light);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.cost-comparison {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 3rem auto 0;
|
|
padding: 2rem;
|
|
background: var(--bg-white);
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.cost-comparison h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cost-comparison p {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cost-comparison strong {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.comparison-link {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: gap 0.3s ease;
|
|
}
|
|
|
|
.comparison-link:hover {
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Mobile Features Badge */
|
|
.mobile-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: var(--success);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin: 0.5rem;
|
|
}
|
|
.footer {
|
|
background: var(--text-dark);
|
|
color: white;
|
|
padding: 3rem 2rem 1rem;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 3rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-section h4 {
|
|
margin-bottom: 1rem;
|
|
color: white;
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links li {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.footer-bottom {
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 1024px) {
|
|
.solution-showcase {
|
|
gap: 3rem;
|
|
}
|
|
|
|
.showcase-content h3 {
|
|
font-size: 1.75rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hero-cta {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.solution-showcase {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.solution-showcase:nth-child(even) {
|
|
direction: ltr;
|
|
}
|
|
|
|
.showcase-content {
|
|
order: 1;
|
|
}
|
|
|
|
.screenshot-placeholder {
|
|
order: 2;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.mobile-screenshot {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.tools-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cta-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<nav class="nav-container">
|
|
<div class="logo">Changemaker Lite</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#tools">Power Tools</a></li>
|
|
<li><a href="#sovereignty">Data Ownership</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
</ul>
|
|
<a href="#get-started" class="cta-button">Get Started</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">🚀 Campaign Documentation Reimagined</div>
|
|
<h1>Power Tools for Modern Campaign Documentation</h1>
|
|
<p class="hero-subtitle">
|
|
Give your canvassers instant answers at the door. Turn your campaign website & knowledge into a searchable,
|
|
mobile-first documentation system that actually works in the field. Your data, your servers, your control.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="https://cmlite.org/build/" class="btn-primary">
|
|
Get Started
|
|
<span>→</span>
|
|
</a>
|
|
<a href="#tools" class="btn-secondary">Explore Tools</a>
|
|
</div>
|
|
<div class="quick-stats">
|
|
<div class="stat">
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">Local Data Ownership</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">$0</div>
|
|
<div class="stat-label">Free to Self-Host</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">Canadian</div>
|
|
<div class="stat-label">Built by Locals</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">Open-Source</div>
|
|
<div class="stat-label">Built for Campaigns</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Problem Section -->
|
|
<section class="problem-section">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Your Canvassers Are Struggling</h2>
|
|
<p>Traditional campaign tools weren't built for the reality of door-to-door work</p>
|
|
</div>
|
|
<div class="problem-grid">
|
|
<div class="problem-card">
|
|
<div class="problem-icon">📱</div>
|
|
<h3>Can't Find Answers Fast</h3>
|
|
<p>Voters ask tough questions. Your team fumbles through PDFs, emails, and scattered Google Docs while the voter loses interest.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">🗺️</div>
|
|
<h3>Disconnected Data</h3>
|
|
<p>Walk lists in one app, voter info in another, campaign policies somewhere else. Nothing talks to each other.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">💸</div>
|
|
<h3>Death by Subscription</h3>
|
|
<p>$100 here, $500 there. Before you know it, you're spending thousands monthly on tools that don't even work together.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">🔒</div>
|
|
<h3>No Data Control</h3>
|
|
<p>Your data is locked behind expensive subscriptions. Your strategies in corporate clouds. Your movement's future in someone else's hands.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">📵</div>
|
|
<h3>Not Mobile-Ready</h3>
|
|
<p>Desktop-first tools that barely work on phones. Canvassers struggling with tiny text and broken interfaces.</p>
|
|
</div>
|
|
<div class="problem-card">
|
|
<div class="problem-icon">🏢</div>
|
|
<h3>Foreign Dependencies</h3>
|
|
<p>US companies with US regulations. Your Canadian campaign data subject to foreign laws and surveillance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Solution Section -->
|
|
<section class="solution-section" id="features">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Documentation That Works at the Door</h2>
|
|
<p>Everything your team needs, instantly searchable, always accessible</p>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Mobile-First Everything</h3>
|
|
<p>Built for phones first, because that's what your canvassers carry. Every feature, every interface, optimized for one-handed use in the field.</p>
|
|
<ul class="feature-list">
|
|
<li>Touch-optimized interfaces</li>
|
|
<li>Offline-capable after first load</li>
|
|
<li>Simple, easy to read, and clear buttons</li>
|
|
<li>One-thumb navigation</li>
|
|
<li>Instant load times</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/mobile_generic_view.png" alt="Phone showing mobile-optimized interface with large touch targets, clear typography, and instant search results" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Your Data, Your Servers, Your Rules</h3>
|
|
<p>Complete Data Ownership. Run it on Canadian soil, in your office, or anywhere you trust. No foreign surveillance, no corporate access, no compromises.</p>
|
|
<ul class="feature-list">
|
|
<li>100% self-hosted infrastructure</li>
|
|
<li>Canadian data residency</li>
|
|
<li>Complete export capabilities</li>
|
|
<li>No vendor lock-in ever</li>
|
|
<li>Privacy-first architecture</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/homepage_square.png" alt="Server dashboard showing Canadian hosting location, data ownership controls, and privacy settings" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Instant Search Everything</h3>
|
|
<p>Your entire campaign knowledge base at your fingertips. Policy positions, talking points, FAQs - all searchable in milliseconds.</p>
|
|
<ul class="feature-list">
|
|
<li>Full-text search across all documentation</li>
|
|
<li>Smart categorization and tagging</li>
|
|
<li>Works offline after first load</li>
|
|
<li>Mobile-optimized interface</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/search_square.png" alt="Mobile view showing instant search results for healthcare policy with highlighted snippets and quick access buttons" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Interactive Canvassing Maps</h3>
|
|
<p>See everything about a neighborhood before you knock. Previous interactions, support levels, local issues - all on one map.</p>
|
|
<ul class="feature-list">
|
|
<li>Real-time location tracking</li>
|
|
<li>Color-coded support levels</li>
|
|
<li>Add notes directly from the field</li>
|
|
<li>Track door knocks & interactions</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/map_square.gif" alt="Map interface showing color-coded houses, with popup showing voter details and previous interaction history" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Living Documentation</h3>
|
|
<p>Your campaign evolves daily. Your documentation should too. Update once, everyone gets it instantly.</p>
|
|
<ul class="feature-list">
|
|
<li>Real-time collaborative editing</li>
|
|
<li>Version control and history</li>
|
|
<li>Automatic mobile optimization</li>
|
|
<li>Beautiful, branded output</li>
|
|
<li>Thousands of plugins available</li>
|
|
<li>Local AI</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/coder_square.png" alt="Split view showing markdown editor on left, live preview on right with campaign branding" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solution-showcase">
|
|
<div class="showcase-content">
|
|
<h3>Beautiul Websites</h3>
|
|
<p>Build and deploy beautiful websites & documentation using the tools already used by the worlds largest organizations.</p>
|
|
<ul class="feature-list">
|
|
<li>Social media cards</li>
|
|
<li>Fully customizable</li>
|
|
<li>Custom pages and landers</li>
|
|
<li>Integrated blogging</li>
|
|
<li>Supports 60+ languages</li>
|
|
</ul>
|
|
</div>
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/built.png" alt="Map interface showing color-coded houses, with popup showing voter details and previous interaction history" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Power Tools Section -->
|
|
<section class="tools-section" id="tools">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Your Complete Campaign Power Tool Suite</h2>
|
|
<p>Everything works together. No integrations needed. No monthly fees.</p>
|
|
</div>
|
|
|
|
<div class="tools-grid">
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">📝</div>
|
|
<div>
|
|
<h3>Smart Documentation Hub</h3>
|
|
<div class="tool-description">MkDocs + Code Server</div>
|
|
mkdocs/docs/blog </div>
|
|
</div>
|
|
<p>Create beautiful, searchable documentation that your team will actually use.</p>
|
|
<ul class="tool-features">
|
|
<li>Instant search across everything</li>
|
|
<li>Mobile-first responsive design</li>
|
|
<li>Automatic table of contents</li>
|
|
<li>Deep linking to any section</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/mkdocs/" class="btn-secondary">Learn More</a>
|
|
<a href="/services/code-server/" class="btn-secondary">Code Server</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">🗺️</div>
|
|
<div>
|
|
<h3>BNKops Map</h3>
|
|
<div class="tool-description">Interactive Canvassing System</div>
|
|
</div>
|
|
</div>
|
|
<p>Turn voter data into visual intelligence your canvassers can use.</p>
|
|
<ul class="tool-features">
|
|
<li>Real-time GPS tracking</li>
|
|
<li>Support level heat maps</li>
|
|
<li>Instant data entry</li>
|
|
<li>Offline-capable</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/map/" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">📊</div>
|
|
<div>
|
|
<h3>Voter Database</h3>
|
|
<div class="tool-description">NocoDB Spreadsheet Interface</div>
|
|
</div>
|
|
</div>
|
|
<p>Manage voter data like a spreadsheet, access it like a database.</p>
|
|
<ul class="tool-features">
|
|
<li>Familiar Excel-like interface</li>
|
|
<li>Custom forms for data entry</li>
|
|
<li>Advanced filtering & search</li>
|
|
<li>API access for automation</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/nocodb/" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">📧</div>
|
|
<div>
|
|
<h3>Email Command Center</h3>
|
|
<div class="tool-description">Listmonk Email Platform</div>
|
|
</div>
|
|
</div>
|
|
<p>Professional email campaigns without the professional price tag.</p>
|
|
<ul class="tool-features">
|
|
<li>Unlimited subscribers</li>
|
|
<li>Beautiful templates</li>
|
|
<li>Open & click tracking</li>
|
|
<li>Automated sequences</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/listmonk/" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">🤖</div>
|
|
<div>
|
|
<h3>Campaign Automation</h3>
|
|
<div class="tool-description">n8n Workflow Engine</div>
|
|
</div>
|
|
</div>
|
|
<p>Automate repetitive tasks so your team can focus on voters.</p>
|
|
<ul class="tool-features">
|
|
<li>Visual workflow builder</li>
|
|
<li>Connect any service</li>
|
|
<li>Trigger-based automation</li>
|
|
<li>No coding required</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/n8n/" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-card">
|
|
<div class="tool-header">
|
|
<div class="tool-icon">🗃️</div>
|
|
<div>
|
|
<h3>Version Control</h3>
|
|
<div class="tool-description">Gitea Repository</div>
|
|
</div>
|
|
</div>
|
|
<p>Track changes, collaborate safely, and never lose work again.</p>
|
|
<ul class="tool-features">
|
|
<li>Full version history</li>
|
|
<li>Collaborative editing</li>
|
|
<li>Backup everything</li>
|
|
<li>Roll back changes</li>
|
|
</ul>
|
|
<div class="tool-cta">
|
|
<a href="/services/gitea/" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Data Ownership Section -->
|
|
<section class="sovereignty-section" id="sovereignty">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Canadian Tech for Canadian Campaigns</h2>
|
|
<p>Why trust your movement's future to foreign corporations?</p>
|
|
</div>
|
|
|
|
<div class="sovereignty-grid">
|
|
<div class="sovereignty-card">
|
|
<div class="sovereignty-icon">🇨🇦</div>
|
|
<h3>100% Canadian</h3>
|
|
<p>Built in Edmonton, Alberta. Supported by Canadian developers. Hosted on Canadian soil. Subject only to Canadian law.</p>
|
|
</div>
|
|
<div class="sovereignty-card">
|
|
<div class="sovereignty-icon">🔐</div>
|
|
<h3>True Ownership</h3>
|
|
<p>Your data never leaves your control. Export everything anytime. No algorithms, no surveillance, no corporate oversight.</p>
|
|
</div>
|
|
<div class="sovereignty-card">
|
|
<div class="sovereignty-icon">🛡️</div>
|
|
<h3>Privacy First</h3>
|
|
<p>Built to respect privacy from day one. Your supporters' data protected by design, not by policy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-visual">
|
|
<h3>The Sovereignty Difference</h3>
|
|
<div class="comparison-grid">
|
|
<div class="comparison-item">
|
|
<h4>US Corporate Platforms</h4>
|
|
<ul class="comparison-list bad">
|
|
<li>❌ Subject to Patriot Act</li>
|
|
<li>❌ NSA surveillance</li>
|
|
<li>❌ Corporate data mining</li>
|
|
<li>❌ Foreign jurisdiction</li>
|
|
</ul>
|
|
</div>
|
|
<div class="comparison-item">
|
|
<h4>Changemaker Lite</h4>
|
|
<ul class="comparison-list good">
|
|
<li>✅ Canadian sovereignty</li>
|
|
<li>✅ Zero surveillance</li>
|
|
<li>✅ Complete privacy</li>
|
|
<li>✅ Your servers, your rules</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="pricing-section" id="pricing">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Simple, Transparent Pricing</h2>
|
|
<p>No hidden fees. No usage limits. No surprises.</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid">
|
|
<div class="pricing-card">
|
|
<div class="pricing-header">
|
|
<h3>Self-Hosted</h3>
|
|
<div class="price">$0</div>
|
|
<div class="price-period">forever</div>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>✓ All 11 campaign tools</li>
|
|
<li>✓ Unlimited users</li>
|
|
<li>✓ Unlimited data</li>
|
|
<li>✓ Complete documentation</li>
|
|
<li>✓ Community support</li>
|
|
<li>✓ Your infrastructure</li>
|
|
<li>✓ 100% open source</li>
|
|
</ul>
|
|
<a href="/docs/self-host" class="btn-secondary">Installation Guide</a>
|
|
<p class="pricing-note">Perfect for tech-savvy campaigns</p>
|
|
</div>
|
|
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-badge">Most Popular</div>
|
|
<div class="pricing-header">
|
|
<h3>Pre-Configured Server</h3>
|
|
<div class="price">Contact</div>
|
|
<div class="price-period">for pricing</div>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>✓ Everything in Self-Hosted</li>
|
|
<li>✓ Pre-installed & configured</li>
|
|
<li>✓ Hardware included</li>
|
|
<li>✓ 30-minute setup</li>
|
|
<li>✓ Training included</li>
|
|
<li>✓ Canadian support</li>
|
|
<li>✓ Ongoing updates</li>
|
|
</ul>
|
|
<a href="https://bnkops.com/hardware" class="btn-primary">Get a Quote</a>
|
|
<p class="pricing-note">Ready to use out of the box</p>
|
|
</div>
|
|
|
|
<div class="pricing-card">
|
|
<div class="pricing-header">
|
|
<h3>Managed Hosting</h3>
|
|
<div class="price">Custom</div>
|
|
<div class="price-period">monthly</div>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>✓ We handle everything</li>
|
|
<li>✓ Canadian data centers</li>
|
|
<li>✓ Daily backups</li>
|
|
<li>✓ 24/7 monitoring</li>
|
|
<li>✓ Security updates</li>
|
|
<li>✓ Priority support</li>
|
|
<li>✓ Still your data</li>
|
|
</ul>
|
|
<a href="https://bnkops.com/contact" class="btn-secondary">Contact Sales</a>
|
|
<p class="pricing-note">For larger campaigns</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cost-comparison">
|
|
<h3>Compare Your Savings</h3>
|
|
<p>Average campaign using corporate tools: <strong>$1,200-$4,000/month</strong></p>
|
|
<p>Same capabilities with Changemaker Lite: <strong>$0 (self-hosted)</strong></p>
|
|
<a href="/cost-comparison" class="comparison-link">See detailed cost breakdown →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Integration Section -->
|
|
<section class="integration-section" id="integration">
|
|
<div class="section-content">
|
|
<div class="section-header">
|
|
<h2>Everything Works Together</h2>
|
|
<p>One login. One system. Infinite possibilities.</p>
|
|
</div>
|
|
|
|
<div class="integration-visual">
|
|
<div class="integration-diagram">
|
|
<div class="screenshot-placeholder">
|
|
<img src="assets/loop.png" alt="All systems communicate and build on one another" class="mobile-screenshot">
|
|
</div>
|
|
</div>
|
|
<p style="margin-top: 2rem; color: var(--text-light); font-size: 0.875rem;">
|
|
🎯 30-minute setup • 🔒 Your data stays yours • 🚀 No monthly fees
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Live Examples Section -->
|
|
<section class="testimonial-section">
|
|
<div class="testimonial-content">
|
|
<h2>Real Sites, Real Results</h2>
|
|
<p style="text-align: center; margin-bottom: 3rem; color: var(--text-dark);">
|
|
Live sites powered by Changemaker Lite in production today
|
|
</p>
|
|
|
|
<div class="live-sites-grid">
|
|
<a href="https://pridecorner.ca/" target="_blank" class="site-card">
|
|
<div class="site-icon">🏳️🌈</div>
|
|
<div class="site-content">
|
|
<div class="site-name">Pride Corner</div>
|
|
<div class="site-desc">Community hub for LGBTQ+ advocacy and resources</div>
|
|
<div class="site-status">✓ Live</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://publicinterestalberta.org/" target="_blank" class="site-card">
|
|
<div class="site-icon">🏛️</div>
|
|
<div class="site-content">
|
|
<div class="site-name">Public Interest Alberta</div>
|
|
<div class="site-desc">Policy advocacy and democratic engagement</div>
|
|
<div class="site-status">✓ Live</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://lindalindsay.org/" target="_blank" class="site-card">
|
|
<div class="site-icon">🗳️</div>
|
|
<div class="site-content">
|
|
<div class="site-name">Linda Lindsay</div>
|
|
<div class="site-desc">Progressive political campaign platform</div>
|
|
<div class="site-status">✓ Live</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://albertademocracytaskforce.org/" target="_blank" class="site-card">
|
|
<div class="site-icon">🤝</div>
|
|
<div class="site-content">
|
|
<div class="site-name">Alberta Democracy Taskforce</div>
|
|
<div class="site-desc">Defending democratic rights and freedoms</div>
|
|
<div class="site-status">✓ Live</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://bnkops.com/" target="_blank" class="site-card featured-site">
|
|
<div class="site-badge">Platform Provider</div>
|
|
<div class="site-icon">⚡</div>
|
|
<div class="site-content">
|
|
<div class="site-name">BNKops</div>
|
|
<div class="site-desc">Liberation technology and hosting services</div>
|
|
<div class="site-status">✓ Live</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="proof-stats" style="margin-top: 3rem;">
|
|
<h3>Live Performance Metrics</h3>
|
|
<div class="stats-mini-grid">
|
|
<div class="mini-stat">
|
|
<div class="stat-number">5+</div>
|
|
<div class="stat-label">Live sites</div>
|
|
</div>
|
|
<div class="mini-stat">
|
|
<div class="stat-number">24/7</div>
|
|
<div class="stat-label">Uptime</div>
|
|
</div>
|
|
<div class="mini-stat">
|
|
<div class="stat-number">$0</div>
|
|
<div class="stat-label">Monthly fees</div>
|
|
</div>
|
|
<div class="mini-stat">
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">Data ownership</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section" id="get-started">
|
|
<div class="cta-content">
|
|
<h2>Ready to Power Up Your Campaign?</h2>
|
|
<p>Join hundreds of campaigns using open-source tools to win elections and save money.</p>
|
|
<div class="cta-buttons">
|
|
<a href="/demo" class="btn-primary">Schedule a Demo</a>
|
|
<a href="/build" class="btn-secondary">Read Documentation</a>
|
|
</div>
|
|
<p style="margin-top: 2rem; color: var(--text-light); font-size: 0.875rem;">
|
|
🎯 30-minute setup • 🔒 Your data stays yours • 🚀 No monthly fees
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// Add scroll effect to header
|
|
window.addEventListener('scroll', function() {
|
|
const header = document.querySelector('.header');
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add intersection observer for fade-in animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all cards and sections
|
|
document.querySelectorAll('.problem-card, .tool-card, .solution-showcase, .testimonial-card').forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |