AutoPred/direction.html at main · sloxen/AutoPred · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="assets/autopred.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AutoPred: product direction</title>
  <meta name="description" content="AutoPred product direction, upcoming capabilities, and use case gallery." />
  <link rel="stylesheet" href="style.css" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="sloths-page">
  <header class="site-header">
    <div class="container nav-container">
      <div class="logo">
        <a href="index.html" aria-label="AutoPred home">
          <img class="logo-img" src="assets/autopred.svg" alt="AutoPred logo" />
        </a>
        <span class="logo-text">Auto<span>Pred</span></span>
      </div>

      <nav class="main-nav">
        <a class="nav-link" href="index.html" rel="noopener">home</a>
        <a class="nav-link active" href="direction.html" rel="noopener">direction</a>
        <a class="nav-link" href="https://sloxen.com/contact.html" rel="noopener">contact</a>
      </nav>

      <button class="nav-toggle" type="button"
              aria-label="Open menu"
              aria-controls="mobile-nav"
              aria-expanded="false">
        <span></span><span></span><span></span>
      </button>

      <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
        <div class="mobile-nav__top">
          <div class="mobile-nav__brand">Auto<span>Pred</span></div>
          <button class="mobile-nav__close" type="button" aria-label="Close menu">✕</button>
        </div>

        <nav class="mobile-nav__menu" aria-label="Mobile navigation">
          <div class="mobile-nav__cta">
            <a class="mobile-btn mobile-btn--primary" href="index.html#demo">Try demo</a>
          </div>

          <a class="mobile-link" href="index.html" rel="noopener">home</a>
          <a class="mobile-link" href="direction.html" rel="noopener">direction</a>
          <a class="mobile-link" href="https://sloxen.com/contact.html" rel="noopener">Contact</a>

          <p class="mobile-nav__privacy-note">
            Static demo site. Add backend and accounts later.
          </p>

          <a class="mobile-link" href="privacy.html">Privacy</a>
          <a class="mobile-link" href="terms.html">Terms</a>
        </nav>
      </div>
    </div>
  </header>

  <main>
    <!-- UPCOMING CAPABILITIES -->
    <section id="capabilities" class="tab-section">
      <div class="container">
        <h1>Upcoming capabilities</h1>
        <div class="divider"></div>

        <div class="process-flow">

          <div class="step">
            <div class="step-number">1 ✓</div>
            <p>Simple scenario testing</p>
          </div>

          <div class="step">
            <div class="step-number">2</div>
            <p>Richer business inputs</p>
          </div>

          <div class="step">
            <div class="step-number">3</div>
            <p>Explainable predictions</p>
          </div>

          <div class="step">
            <div class="step-number">4</div>
            <p>Use your own data</p>
          </div>

          <div class="step">
            <div class="step-number">5</div>
            <p>Decision-ready outputs</p>
          </div>

        </div>
      </div>
    </section>

    <!-- USE CASE GALLERY -->
    <section id="usecase-gallery" class="tab-section">
      <div class="container">
        <h1>Use case gallery</h1>
        <div class="divider"></div>
        <p>Coming soon...</p>
      </div>
    </section>

    <!-- Footer injection -->
    <div id="site-footer"></div>

    <button id="backToTop" aria-label="Back to top">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
        <path d="M6 14l6-6 6 6"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"/>
      </svg>
    </button>

    <script src="main.js"></script>
    <script src="autopred.js"></script>
  </main>
</body>
</html>