Stage 4: Problem + Solution | Unit 26

UNIT 4 / 7

STEP 1

Problem + Solution: The Core Persuasive Arc

Every effective pitch follows the same arc: name the problem clearly, then present a credible solution. The two-column layout in this section puts both columns of text side by side — left column states the problem in the community's own voice, right column introduces the solution approach.

The pull quote (<blockquote> with a red left border) lifts one sentence from the community testimony and makes it visually dominant. This is a classic editorial technique for lending human weight to an argument.

STEP 2

Add Problem CSS and HTML

👉 Key CSS: #problem { background: var(--dark); padding: 72px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pull-quote { border-left: 3px solid var(--red); padding: 18px 0 18px 28px; margin: 28px 0; }
.pull-quote p { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; }

STEP 3

Add the Solution Cards

Three cards, each targeting one pillar of the solution: Device Access, Community Broadband, and Digital Skills Training. Each card has an emoji icon, a bold title, and a 2-sentence description. Use repeat(auto-fill, minmax(260px, 1fr)) for the grid.

Stage 4 Complete

The persuasive core of the site is in place: problem clearly stated, solution cards presenting each pillar.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wičhóni Digital Center</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&family=Open+Sans:wght@300;400;600;700&display=swap">
  <style>
    :root {
      --dark: #111318;
      --panel: #1d2131;
      --red: #c1392b;
      --gold: #e8a81a;
      --snow: #f7f3ee;
      --font-display: 'Raleway', sans-serif;
      --font-body: 'Open Sans', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--dark); color: var(--snow); font-family: var(--font-body); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
    #hero {
      min-height: 70vh;
      background: linear-gradient(135deg, #0d0f1a 0%, #1a0e0a 60%, #0d0f1a 100%);
      display: flex; align-items: center; padding: 80px 0;
    }
    .eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
    #hero h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; margin-bottom: 24px; }
    #hero h1 em { color: var(--red); font-style: normal; display: block; }
    #hero p.lead { font-size: 1.125rem; line-height: 1.75; color: rgba(247,243,238,0.7); max-width: 520px; margin-bottom: 36px; }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn-primary { display: inline-block; background: var(--red); color: white; padding: 14px 32px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background 0.2s; }
    .btn-primary:hover { background: #a32e1f; }
    .btn-outline { display: inline-block; background: transparent; color: var(--snow); border: 2px solid rgba(247,243,238,0.3); padding: 12px 30px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: border-color 0.2s; }
    .btn-outline:hover { border-color: var(--snow); }
    #stats { background: var(--panel); padding: 72px 0; }
    .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .section-heading { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--snow); margin-bottom: 36px; }
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
    .stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 32px 24px; text-align: center; }
    .stat-number { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 10px; }
    .stat-suffix { font-size: 2rem; }
    .stat-label { font-size: 0.9rem; color: rgba(247,243,238,0.6); line-height: 1.5; }
  </style>
</head>
<body>

<section id="hero">
    <div class="container">
      <p class="eyebrow">Standing Rock Sioux Nation • Digital Access Initiative</p>
      <h1>The gap is real.<em>We can close it.</em></h1>
      <p class="lead">73% of Tribal households on Standing Rock lack reliable broadband. The Wičhóni Digital Center will change that — providing technology access, digital skills training, and community ownership of the digital future.</p>
      <div class="hero-btns">
        <a href="#support" class="btn-primary">Get Involved</a>
        <a href="#solution" class="btn-outline">See the Plan</a>
      </div>
    </div>
  </section>

<section id="stats">
    <div class="container">
      <p class="section-label">The Problem, in Numbers</p>
      <h2 class="section-heading">Why This Can't Wait</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="73">0</span><span class="stat-suffix">%</span></p>
          <p class="stat-label">of Tribal households on Standing Rock lack reliable broadband access</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="4200">0</span></p>
          <p class="stat-label">students in the district who need digital access to complete homework</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="12">0</span><span class="stat-suffix">x</span></p>
          <p class="stat-label">more likely to earn a living wage with strong digital skills</p>
        </div>
        <div class="stat-card">
          <p class="stat-number"><span class="counter" data-target="0">0</span></p>
          <p class="stat-label">public computer labs within 40 miles of the community center</p>
        </div>
      </div>
    </div>
  </section>
  <script>
    document.querySelectorAll('.counter').forEach(function(el) {
      var target = parseInt(el.dataset.target);
      var current = 0;
      var duration = 1800;
      var steps = 60;
      var increment = target / steps;
      var interval = setInterval(function() {
        current += increment;
        if (current >= target) {
          el.textContent = target.toLocaleString();
          clearInterval(interval);
        } else {
          el.textContent = Math.ceil(current).toLocaleString();
        }
      }, duration / steps);
    });
  </script>
</body>
</html>

Live Preview