SocialPulse SMM Storefront — bold claims, charts, testimonials, comment board

2026-07-29 16:28:01 -07:00
commit eaab3024c6
1 changed files with 492 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>SocialPulse — Dominate Your Digital Empire</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+  :root {
+    --bg: #0a0a0f;
+    --surface: #13131f;
+    --card: #1a1a2e;
+    --gold: #f0c060;
+    --gold2: #e8a830;
+    --purple: #8b5cf6;
+    --purple2: #6d28d9;
+    --pink: #ec4899;
+    --text: #e2e8f0;
+    --muted: #94a3b8;
+    --green: #10b981;
+    --red: #ef4444;
+    --radius: 14px;
+    --shadow: 0 0 60px rgba(139,92,246,0.08);
+  }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    overflow-x: hidden;
+  }
+  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
+
+  /* NAV */
+  nav {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 18px 32px; background: rgba(10,10,15,0.95);
+    backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05);
+    position: sticky; top: 0; z-index: 100;
+  }
+  .logo { font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, var(--gold), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .nav-links { display: flex; gap: 28px; }
+  .nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; transition: color .2s; }
+  .nav-links a:hover { color: var(--gold); }
+  .btn { padding: 12px 28px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; border: none; cursor: pointer; transition: all .25s; text-decoration: none; display: inline-block; }
+  .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #0a0a0f; }
+  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(240,192,96,0.3); }
+  .btn-purple { background: linear-gradient(135deg, var(--purple), var(--purple2)); color: #fff; }
+  .btn-purple:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(139,92,246,0.3); }
+  .btn-outline { border: 2px solid var(--gold); color: var(--gold); background: transparent; }
+  .btn-outline:hover { background: var(--gold); color: #0a0a0f; }
+
+  /* HERO */
+  .hero {
+    padding: 100px 0 80px; text-align: center;
+    background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.12) 0%, transparent 60%),
+                radial-gradient(ellipse at 80% 80%, rgba(236,72,153,0.06) 0%, transparent 50%);
+  }
+  .hero-badge {
+    display: inline-block; padding: 8px 20px; border-radius: 50px;
+    background: rgba(240,192,96,0.1); border: 1px solid rgba(240,192,96,0.2);
+    color: var(--gold); font-weight: 600; font-size: 0.85rem; margin-bottom: 24px;
+  }
+  .hero h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; max-width: 800px; margin: 0 auto 20px; }
+  .hero h1 span { background: linear-gradient(135deg, var(--gold), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .hero p { font-size: 1.25rem; color: var(--muted); max-width: 600px; margin: 0 auto 36px; }
+  .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .hero-stats { display: flex; gap: 48px; justify-content: center; margin-top: 60px; flex-wrap: wrap; }
+  .stat { text-align: center; }
+  .stat-num { font-size: 2.8rem; font-weight: 900; background: linear-gradient(135deg, var(--gold), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  .stat-label { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
+
+  /* SECTIONS */
+  section { padding: 80px 0; }
+  .section-title { text-align: center; margin-bottom: 60px; }
+  .section-title h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 12px; }
+  .section-title p { color: var(--muted); font-size: 1.1rem; }
+
+  /* FEATURES */
+  .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
+  .feature-card {
+    background: var(--card); border-radius: var(--radius); padding: 36px 28px;
+    border: 1px solid rgba(255,255,255,0.04); transition: all .3s;
+  }
+  .feature-card:hover { transform: translateY(-4px); border-color: rgba(240,192,96,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
+  .feature-icon { font-size: 2.2rem; margin-bottom: 16px; }
+  .feature-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
+  .feature-card p { color: var(--muted); font-size: 0.95rem; }
+
+  /* DASHBOARD MOCK */
+  .dashboard-section { background: var(--surface); border-radius: var(--radius); padding: 48px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.04); }
+  .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 32px; }
+  .dash-card {
+    background: var(--card); border-radius: var(--radius); padding: 24px;
+    text-align: center; border: 1px solid rgba(255,255,255,0.04);
+  }
+  .dash-card .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
+  .dash-card .value { font-size: 2rem; font-weight: 800; margin: 6px 0; }
+  .dash-card .change { font-size: 0.85rem; color: var(--green); }
+  .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+  .chart-box { background: var(--card); border-radius: var(--radius); padding: 24px; }
+  .chart-box h4 { margin-bottom: 12px; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
+  @media (max-width: 768px) { .chart-grid { grid-template-columns: 1fr; } }
+
+  /* PRICING */
+  .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
+  .price-card {
+    background: var(--card); border-radius: var(--radius); padding: 40px 32px;
+    border: 1px solid rgba(255,255,255,0.04); text-align: center; transition: all .3s; position: relative;
+  }
+  .price-card.featured { border-color: var(--gold); transform: scale(1.03); box-shadow: 0 0 40px rgba(240,192,96,0.1); }
+  .price-card.featured::before { content: "MOST POPULAR"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #0a0a0f; padding: 4px 16px; border-radius: 50px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; }
+  .price-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
+  .price { font-size: 3.5rem; font-weight: 900; margin: 16px 0; }
+  .price span { font-size: 1rem; color: var(--muted); font-weight: 400; }
+  .price-card ul { list-style: none; text-align: left; margin: 24px 0; }
+  .price-card ul li { padding: 8px 0; color: var(--muted); font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
+  .price-card ul li::before { content:"✓ "; color: var(--green); font-weight: bold; }
+
+  /* TESTIMONIALS */
+  .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
+  .testimonial {
+    background: var(--card); border-radius: var(--radius); padding: 32px 28px;
+    border: 1px solid rgba(255,255,255,0.04);
+  }
+  .testimonial .stars { color: var(--gold); font-size: 1.1rem; margin-bottom: 12px; }
+  .testimonial .quote { font-style: italic; margin-bottom: 16px; color: var(--text); }
+  .testimonial .author { display: flex; align-items: center; gap: 12px; }
+  .testimonial .avatar {
+    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+    font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
+  }
+  .testimonial .author-name { font-weight: 600; }
+  .testimonial .author-handle { color: var(--muted); font-size: 0.85rem; }
+
+  /* COMMENT BOARD */
+  .comment-board { background: var(--surface); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
+  .comment-board h3 { margin-bottom: 24px; }
+  .comment-form { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
+  .comment-form input, .comment-form textarea {
+    flex: 1; min-width: 200px; padding: 14px 18px; border-radius: 50px;
+    background: var(--card); border: 1px solid rgba(255,255,255,0.08); color: var(--text);
+    font-size: 0.95rem; font-family: inherit;
+  }
+  .comment-form textarea { border-radius: var(--radius); min-height: 80px; resize: vertical; }
+  .comment-list { display: flex; flex-direction: column; gap: 16px; max-height: 500px; overflow-y: auto; }
+  .comment {
+    background: var(--card); border-radius: var(--radius); padding: 20px 24px;
+    border: 1px solid rgba(255,255,255,0.04);
+  }
+  .comment .c-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+  .comment .c-name { font-weight: 700; }
+  .comment .c-date { color: var(--muted); font-size: 0.8rem; }
+  .comment .c-body { color: var(--text); line-height: 1.5; }
+
+  /* GUARANTEE */
+  .guarantee-section { text-align: center; background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(240,192,96,0.04)); border-radius: var(--radius); padding: 60px 32px; }
+  .guarantee-icon { font-size: 4rem; margin-bottom: 16px; }
+  .guarantee-section h2 { font-size: 2rem; margin-bottom: 8px; }
+  .guarantee-section p { color: var(--muted); max-width: 500px; margin: 0 auto 24px; }
+
+  /* FOOTER */
+  footer { padding: 40px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.04); color: var(--muted); font-size: 0.85rem; }
+
+  /* ANIMATIONS */
+  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+  .floating { animation: float 4s ease-in-out infinite; }
+
+  /* RESPONSIVE */
+  @media (max-width: 640px) {
+    .hero h1 { font-size: 2.2rem; }
+    .hero-stats { gap: 24px; }
+    .stat-num { font-size: 2rem; }
+    nav { padding: 14px 16px; }
+    .nav-links { gap: 14px; font-size: 0.85rem; }
+  }
+</style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav>
+  <div class="logo">🔥 SocialPulse</div>
+  <div class="nav-links">
+    <a href="#features">Features</a>
+    <a href="#dashboard">Dashboard</a>
+    <a href="#pricing">Pricing</a>
+    <a href="#testimonials">Testimonials</a>
+  </div>
+  <a href="#pricing" class="btn btn-gold">Get Started</a>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="container">
+    <div class="hero-badge">🚀 TRUSTED BY 50,000+ CREATORS</div>
+    <h1>Turn Your Social Media Into a <span>Growth Machine</span></h1>
+    <p>Our AI-powered engine floods your accounts with REAL engagement. More followers, more likes, more influence — on autopilot. You set the target, we deliver.</p>
+    <div class="hero-cta">
+      <a href="#pricing" class="btn btn-gold btn-lg" style="font-size:1.1rem; padding:16px 40px;">Start Dominating →</a>
+      <a href="#dashboard" class="btn btn-outline btn-lg" style="font-size:1.1rem; padding:16px 40px;">See Live Results</a>
+    </div>
+    <div class="hero-stats">
+      <div class="stat"><div class="stat-num" id="counter1">247M+</div><div class="stat-label">Followers Delivered</div></div>
+      <div class="stat"><div class="stat-num">4.9B+</div><div class="stat-label">Likes Generated</div></div>
+      <div class="stat"><div class="stat-num">99.7%</div><div class="stat-label">Client Retention</div></div>
+      <div class="stat"><div class="stat-num">14min</div><div class="stat-label">Avg First Result</div></div>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section id="features">
+  <div class="container">
+    <div class="section-title">
+      <h2>Why Settle For Average?</h2>
+      <p>Our proprietary AI doesn't just boost numbers — it builds your digital empire.</p>
+    </div>
+    <div class="features">
+      <div class="feature-card">
+        <div class="feature-icon">⚡</div>
+        <h3>Lightning-Fast Delivery</h3>
+        <p>Engagement starts flowing within minutes. Our AI engine processes millions of interactions per second across every major platform.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🎯</div>
+        <h3>Laser-Targeted Growth</h3>
+        <p>Not just bots — we match your niche, demographics, and audience profile. Your followers actually LOOK real because they ARE real.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">📊</div>
+        <h3>Live Analytics Dashboard</h3>
+        <p>Watch your empire grow in real-time. Every like, follow, and comment tracked with enterprise-grade analytics.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🛡️</div>
+        <h3>Undetectable & Safe</h3>
+        <p>Our delivery patterns mimic organic growth. No bans, no flags, no suspicious spikes. Just smooth, natural-looking domination.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🌍</div>
+        <h3>All Platforms, One Dashboard</h3>
+        <p>Instagram, TikTok, YouTube, Twitter/X, Facebook, LinkedIn — manage your entire social empire from one place.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">🤖</div>
+        <h3>AI Auto-Pilot Mode</h3>
+        <p>Set your target follower count and let our AI handle everything. It adjusts delivery speed, engagement types, and timing automatically.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- DASHBOARD -->
+<section id="dashboard">
+  <div class="container">
+    <div class="section-title">
+      <h2>Your Command Center</h2>
+      <p>This is what total control looks like. Real metrics from real campaigns.</p>
+    </div>
+    <div class="dashboard-section">
+      <div class="dashboard-grid">
+        <div class="dash-card">
+          <div class="label">Total Followers</div>
+          <div class="value" style="color:var(--gold)">847,291</div>
+          <div class="change">↑ 12,443 today</div>
+        </div>
+        <div class="dash-card">
+          <div class="label">Engagement Rate</div>
+          <div class="value" style="color:var(--purple)">8.7%</div>
+          <div class="change">↑ 2.1% vs last week</div>
+        </div>
+        <div class="dash-card">
+          <div class="label">Posts This Month</div>
+          <div class="value" style="color:var(--pink)">1,247</div>
+          <div class="change">↑ 89 this week</div>
+        </div>
+        <div class="dash-card">
+          <div class="label">Impressions</div>
+          <div class="value" style="color:var(--green)">12.4M</div>
+          <div class="change">↑ 2.3M this month</div>
+        </div>
+      </div>
+      <div class="chart-grid">
+        <div class="chart-box"><h4>Follower Growth (30 Day)</h4><canvas id="chart1"></canvas></div>
+        <div class="chart-box"><h4>Engagement by Platform</h4><canvas id="chart2"></canvas></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- PRICING -->
+<section id="pricing">
+  <div class="container">
+    <div class="section-title">
+      <h2>Choose Your Dominance Level</h2>
+      <p>From side hustle to global influence — we've got a plan for every ambition.</p>
+    </div>
+    <div class="pricing-grid">
+      <div class="price-card">
+        <h3>🔥 Starter</h3>
+        <div class="price">$49<span>/mo</span></div>
+        <p style="color:var(--muted);">Perfect for getting your feet wet</p>
+        <ul>
+          <li>1,000 Followers/mo</li>
+          <li>5,000 Likes/mo</li>
+          <li>2 Social Accounts</li>
+          <li>Basic Analytics</li>
+          <li>Email Support</li>
+        </ul>
+        <a href="#" class="btn btn-outline" style="width:100%">Choose Starter</a>
+      </div>
+      <div class="price-card featured">
+        <h3>💎 Growth</h3>
+        <div class="price">$149<span>/mo</span></div>
+        <p style="color:var(--muted);">The sweet spot for serious creators</p>
+        <ul>
+          <li>10,000 Followers/mo</li>
+          <li>50,000 Likes/mo</li>
+          <li>10 Social Accounts</li>
+          <li>Advanced Analytics</li>
+          <li>AI Auto-Pilot Mode</li>
+          <li>Priority Support</li>
+        </ul>
+        <a href="#" class="btn btn-gold" style="width:100%">Choose Growth</a>
+      </div>
+      <div class="price-card">
+        <h3>👑 Empire</h3>
+        <div class="price">$499<span>/mo</span></div>
+        <p style="color:var(--muted);">For those who refuse to lose</p>
+        <ul>
+          <li>100,000 Followers/mo</li>
+          <li>Unlimited Likes</li>
+          <li>Unlimited Accounts</li>
+          <li>Custom AI Strategy</li>
+          <li>White-Label Dashboard</li>
+          <li>Dedicated Account Manager</li>
+        </ul>
+        <a href="#" class="btn btn-purple" style="width:100%">Choose Empire</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- GUARANTEE -->
+<section>
+  <div class="container">
+    <div class="guarantee-section">
+      <div class="guarantee-icon">🔒</div>
+      <h2>100% Results Guarantee</h2>
+      <p>If you don't see measurable growth within 7 days, we'll refund every penny — no questions asked. That's how confident we are.</p>
+      <a href="#pricing" class="btn btn-gold" style="font-size:1.1rem; padding:16px 40px;">Start Risk-Free →</a>
+    </div>
+  </div>
+</section>
+
+<!-- TESTIMONIALS -->
+<section id="testimonials">
+  <div class="container">
+    <div class="section-title">
+      <h2>What Our Clients Say</h2>
+      <p>Don't take our word for it. Hear from the thousands who've already ascended.</p>
+    </div>
+    <div class="testimonial-grid">
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"I went from 200 followers to 85K in 6 months. My brand deals went from $0 to $5K per post. This platform literally changed my life."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#f97316,#ef4444)">S</div>
+          <div><div class="author-name">Sarah Mitchell</div><div class="author-handle">@sarahcreates • 85K followers</div></div>
+        </div>
+      </div>
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"My e-commerce store was struggling. Launched SocialPulse and our Instagram traffic exploded. Sales up 340% in Q1 alone. Insane ROI."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6)">M</div>
+          <div><div class="author-name">Marcus Chen</div><div class="author-handle">@marcusbuilds • 120K followers</div></div>
+        </div>
+      </div>
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"I was skeptical. But 14 minutes after signing up, I had 500 new followers. 14 MINUTES. The AI auto-pilot is actual sorcery."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#ec4899,#f0c060)">J</div>
+          <div><div class="author-name">Jessica Torres</div><div class="author-handle">@jessicatravels • 210K followers</div></div>
+        </div>
+      </div>
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"We manage 47 client accounts through SocialPulse. The dashboard alone saves us 20 hours a week. Our agency would collapse without it."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#10b981,#06b6d4)">A</div>
+          <div><div class="author-name">Alex Rivera</div><div class="author-handle">@riveramedia • Agency Owner</div></div>
+        </div>
+      </div>
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"Not gonna lie — I bought the Empire plan just to flex. Now I have 500K followers across 3 platforms and brands are sliding into MY DMs. Best $499 I've ever spent."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#f0c060,#f97316)">D</div>
+          <div><div class="author-name">Derek Thompson</div><div class="author-handle">@derekvibes • 500K followers</div></div>
+        </div>
+      </div>
+      <div class="testimonial">
+        <div class="stars">★★★★★</div>
+        <div class="quote">"The analytics are next level. I can see EXACTLY which content resonates, which platforms convert, and where to double down. This isn't just growth — it's intelligence."</div>
+        <div class="author">
+          <div class="avatar" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">N</div>
+          <div><div class="author-name">Nina Patel</div><div class="author-handle">@ninaanalytics • 175K followers</div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- OPEN COMMENT BOARD -->
+<section>
+  <div class="container">
+    <div class="comment-board">
+      <h3>💬 The Testimony Wall</h3>
+      <p style="color:var(--muted); margin-bottom:20px;">Real clients. Real results. Leave your testimony below.</p>
+      <div class="comment-form">
+        <input type="text" id="cName" placeholder="Your Name" style="max-width:250px;">
+        <textarea id="cBody" placeholder="Share your SocialPulse success story..."></textarea>
+        <button class="btn btn-purple" onclick="postComment()" style="white-space:nowrap;">Post Testimony</button>
+      </div>
+      <div class="comment-list" id="commentList"></div>
+    </div>
+  </div>
+</section>
+
+<footer>
+  <div class="container">
+    <p>© 2026 SocialPulse Inc. All rights reserved. | Results may vary. | We don't actually guarantee anything legally but our track record speaks for itself.</p>
+  </div>
+</footer>
+
+<script>
+// CHARTS
+new Chart(document.getElementById('chart1'), {
+  type:'line', data:{
+    labels:Array.from({length:30},(_,i)=>`Day ${i+1}`),
+    datasets:[{label:'Followers',data:Array.from({length:30},(_,i)=>800000+Math.floor(i*1576+Math.random()*500)),borderColor:'#f0c060',backgroundColor:'rgba(240,192,96,0.1)',fill:true,tension:0.4,pointRadius:0}]
+  },
+  options:{responsive:true,plugins:{legend:{display:false}},scales:{x:{display:false},y:{grid:{color:'rgba(255,255,255,0.03)'},ticks:{color:'#94a3b8'}}}}
+});
+new Chart(document.getElementById('chart2'), {
+  type:'doughnut', data:{
+    labels:['Instagram','TikTok','YouTube','Twitter/X','Facebook','LinkedIn'],
+    datasets:[{data:[42,28,15,8,5,2],backgroundColor:['#f0c060','#ec4899','#8b5cf6','#3b82f6','#10b981','#f97316'],borderWidth:0}]
+  },
+  options:{responsive:true,plugins:{legend:{position:'bottom',labels:{color:'#94a3b8',padding:16}}}}
+});
+
+// COMMENT BOARD
+function loadComments(){
+  const comments = JSON.parse(localStorage.getItem('socialpulse_comments')||'[]');
+  const list = document.getElementById('commentList');
+  if(comments.length===0){
+    list.innerHTML = '<p style="color:var(--muted); text-align:center; padding:20px;">Be the first to testify! Your success story inspires others. ✨</p>';
+    return;
+  }
+  list.innerHTML = comments.map((c,i)=>`
+    <div class="comment">
+      <div class="c-header"><span class="c-name">${esc(c.name)}</span><span class="c-date">${esc(c.date)}</span></div>
+      <div class="c-body">${esc(c.body)}</div>
+    </div>
+  `).join('');
+}
+function postComment(){
+  const name=document.getElementById('cName').value.trim();
+  const body=document.getElementById('cBody').value.trim();
+  if(!name||!body) return alert('Please enter both name and testimony.');
+  const comments=JSON.parse(localStorage.getItem('socialpulse_comments')||'[]');
+  comments.unshift({name,body,date:new Date().toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})});
+  localStorage.setItem('socialpulse_comments',JSON.stringify(comments));
+  document.getElementById('cName').value='';
+  document.getElementById('cBody').value='';
+  loadComments();
+}
+function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}
+loadComments();
+
+// SMOOTH SCROLL
+document.querySelectorAll('a[href^="#"]').forEach(a=>a.addEventListener('click',e=>{
+  e.preventDefault();document.querySelector(a.getAttribute('href')).scrollIntoView({behavior:'smooth'});
+}));
+</script>
+</body>
+</html>