riddleandcode.com/index.html at main · RiddleAndCode/riddleandcode.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en" data-ga-id="G-6PKLPEVZNF">
<head>
  <meta charset="utf-8"/>
  <title>Riddle&Code — Energy Infrastructure for the Future</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta content="Transform energy assets into intelligent, coordinated power plants through secure connectivity and real-time optimization." name="description"/>

  <!-- Open Graph / Social -->
  <meta content="Riddle&Code — Energy Infrastructure for the Future" property="og:title"/>
  <meta content="Transform energy assets into intelligent, coordinated power plants through secure connectivity and real-time optimization." property="og:description"/>
  <meta content="images/6414afea39e2ec1d18d1ff32_open_graph.jpg" property="og:image"/>
  <meta content="website" property="og:type"/>

  <!-- Main Styles -->
  <link rel="stylesheet" href="styles/main.css">

  <!-- Main Application Script -->
  <script src="scripts/main.js" defer></script>
</head>
<body>

  <!-- Navigation -->
  <div id="nav-placeholder"></div>

  <!-- Hero Section -->
  <section class="hero">
    <h1 class="fade-in">
      <span class="highlight">Connect. See. Control.</span><br>
      Distributed Energy Assets
    </h1>
    <p class="hero-subtitle fade-in">
      Take control of your energy infrastructure with secure connectivity that reaches every asset, real-time visibility into every kilowatt, and intelligent control that optimizes every decision — turning fragmented resources into a unified, intelligent system.
    </p>
    <div class="hero-stats fade-in">
      <div class="stat">
        <span class="stat-value">1.5M</span>
        <span class="stat-label">Messages/Day per Node</span>
      </div>
      <div class="stat">
        <span class="stat-value">10km</span>
        <span class="stat-label">Coverage Range</span>
      </div>
      <div class="stat">
        <span class="stat-value">99.9%</span>
        <span class="stat-label">Uptime Reliability</span>
      </div>
    </div>
  </section>

  <!-- Solutions Section -->
  <div id="solutions-section-placeholder"></div>

  <!-- Capabilities Section -->
  <div id="capabilities-section-placeholder"></div>

  <!-- Technology Section -->
  <div id="technology-section-placeholder"></div>

  <!-- Products Section -->
  <div id="products-section-placeholder"></div>


  <div id="partners-section-placeholder"></div>

  <!-- CTA Section -->
  <section class="section">
    <div class="cta-section">
      <h2>Ready to Transform Your Energy Assets?</h2>
      <p style="font-size: 1.125rem; color: var(--text-secondary); margin-bottom: var(--spacing-md);">
        Whether you're managing a single building or an entire distribution network, we have the infrastructure and expertise to help you succeed.
      </p>
      <div class="cta-buttons">
        <a href="company/get-in-touch.html" class="btn btn-primary">Request a Demo</a>
        <a href="product/mypwr.html" class="btn btn-secondary">Explore MYPWR</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <div id="footer-modern-placeholder"></div>
</body>
</html>