NeuroscienceEngineeringSyndicate/index.html at main · SainsburyWellcomeCentre/NeuroscienceEngineeringSyndicate · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
    content="Neuroscience Engineering Syndicate — a collaborative platform for neuroscience institutes to share open-source engineering solutions.">
  <title>NES — Neuroscience Engineering Syndicate</title>
  <link rel="icon" type="image/png" href="assets/nes-logo.png">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- ===== Navbar ===== -->
  <nav class="navbar" id="navbar">
    <div class="container">
      <a href="index.html" class="nav-brand">
        <img src="assets/nes-logo.png" alt="NES Logo">
        <span><span class="brand-accent">NES</span></span>
      </a>
      <div class="nav-links" id="navLinks">
        <a href="index.html" class="active">Home</a>
        <a href="solutions.html">Solutions</a>
        <a href="guides.html">Guides</a>
        <a href="https://github.com/SainsburyWellcomeCentre/NeuroscienceEngineeringSyndicate" target="_blank"
          rel="noopener">GitHub</a>
      </div>
      <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <!-- ===== Hero ===== -->
  <section class="hero" id="hero">
    <div class="container">
      <div class="hero-content">
        <div class="hero-badge">
          <span class="dot"></span>
          Open-source &middot; Collaborative &middot; Neuroscience
        </div>
        <h1>Engineering Solutions,<br><span class="accent-text">Shared Across Neuroscience</span></h1>
        <p>
          The Neuroscience Engineering Syndicate brings together engineering teams
          from leading research institutes to openly share hardware designs, firmware,
          software tools, and technical guides.
        </p>
        <div class="hero-actions">
          <a href="solutions.html" class="btn btn-primary">
            &#x1F50D; Browse Solutions
          </a>
          <a href="guides.html" class="btn btn-secondary">
            &#x1F4D6; Contribution Guides
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== Stats ===== -->
  <section class="section">
    <div class="container">
      <div class="stats-bar">
        <div class="stat">
          <div class="stat-value" id="statSolutions">6</div>
          <div class="stat-label">Shared Solutions</div>
        </div>
        <div class="stat">
          <div class="stat-value">3</div>
          <div class="stat-label">Institutes</div>
        </div>
        <div class="stat">
          <div class="stat-value">100%</div>
          <div class="stat-label">Open Source</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== Participating Institutes ===== -->
  <section class="section" id="institutes">
    <div class="container">
      <div class="section-label">Founding Members</div>
      <h2 class="section-title">Participating Institutes</h2>
      <p class="section-subtitle">
        A growing coalition of world-class neuroscience research centres, pooling engineering expertise for the benefit
        of all.
      </p>
      <div class="institutes-grid">
        <div class="glass-card institute-card">
          <div class="icon">&#129504;</div>
          <h3>Sainsbury Wellcome Centre</h3>
          <p>UCL, London — neural circuits underlying behaviour in mammals.</p>
        </div>
        <div class="glass-card institute-card">
          <div class="icon">&#x1F52C;</div>
          <h3>Friedrich Miescher Institute</h3>
          <p>Basel — quantitative approaches for understanding neural circuit function.</p>
        </div>
        <div class="glass-card institute-card">
          <div class="icon">&#x2699;&#xFE0F;</div>
          <h3>Janelia Research Campus</h3>
          <p>HHMI, Virginia — breakthrough discoveries in neuroscience and imaging.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== How It Works ===== -->
  <section class="section" id="how-it-works">
    <div class="container">
      <div class="section-label">How It Works</div>
      <h2 class="section-title">Share, Discover, Build</h2>
      <p class="section-subtitle">
        A simple, Git-native workflow so every engineering team can share and adopt solutions effortlessly.
      </p>
      <div class="features-grid">
        <div class="glass-card feature-card">
          <div class="feature-icon cyan">&#x1F4E6;</div>
          <h3>Package Your Solution</h3>
          <p>Follow our standardised repository template — schematics, BOMs, firmware, docs — so others can reproduce
            your work without guesswork.</p>
        </div>
        <div class="glass-card feature-card">
          <div class="feature-icon purple">&#x1F310;</div>
          <h3>Submit via Pull Request</h3>
          <p>Add an entry to our solutions database through a simple PR. Reviewer guidelines ensure quality and
            consistency across all submissions.</p>
        </div>
        <div class="glass-card feature-card">
          <div class="feature-icon teal">&#x1F680;</div>
          <h3>Discover &amp; Adopt</h3>
          <p>Search and filter the solutions database by tag, institute, or keyword. Each entry links directly to the
            source repository.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== CTA ===== -->
  <section class="section cta-section">
    <div class="container">
      <div class="section-label">Get Involved</div>
      <h2 class="section-title">Ready to Join the Syndicate?</h2>
      <p class="section-subtitle">
        Whether you want to share your latest design or adopt a proven solution, getting started takes just a few
        minutes.
      </p>
      <div class="hero-actions" style="justify-content: center;">
        <a href="guides.html" class="btn btn-primary">&#x1F4D6; Read the Guides</a>
        <a href="solutions.html" class="btn btn-secondary">&#x1F50D; Explore Solutions</a>
      </div>
    </div>
  </section>

  <!-- ===== Footer ===== -->
  <footer class="footer">
    <div class="container">
      <span class="footer-text">&copy; 2026 Neuroscience Engineering Syndicate</span>
      <div class="footer-links">
        <a href="solutions.html">Solutions</a>
        <a href="guides.html">Guides</a>
        <a href="https://github.com/SainsburyWellcomeCentre/NeuroscienceEngineeringSyndicate" target="_blank"
          rel="noopener">GitHub</a>
      </div>
    </div>
  </footer>

  <script src="js/app.js"></script>
</body>

</html>