startups.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Startups - i2i Amherst Venture Accelerator</title>
  <!-- Favicon -->
  <link rel="icon" href="images/logo-transparent.png">
  <!-- AOS CSS -->
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
  <!-- Hamburger menu (bars) on small screens -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Global styles -->
  <link rel="stylesheet" href="css/style.css">
  <!-- Icon Social Media-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>

  <header class="header">
    <nav class="navbar">
      <a href="/" class="logo">
        <img class="logo-img" src="images/i2iLogoTextOrange.png" alt="i2i Logo">
      </a>
      <a href="./our-team.html" class="nav-link line-hover">Our Team</a></li>
      <a href="./startups.html" class="nav-link line-hover">Startups</a></li>
      <a href="./events.html" class="nav-link line-hover">Events</a></li>
      <a href="./get-in-touch.html" class="nav-link line-hover">Get in Touch</a></li>
      <a href="./media.html" class="nav-link line-hover">Media</a></li>
      <a href="javascript:void(0);" class="icon" onclick="mobileNavbar()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  </header>

  <main id="vanta-bg" class="main-content">
    <section class="hero">
      <div class="hero-text" data-aos="fade-right">
        <h1 class="hero-title">Startups</h1>
        <p class="hero-description">Innovations nurtured at i2i</p>
      </div>
    </section>

    <section id="index-info" class="info-sections">
      <h2 class="section-title">Incubated Startups</h2>
      <p>
        Explore the startups and projects built by our team members. From AI platforms to sustainability solutions, our teams create impact through real-world applications.
      </p>

      <div id="startups-container"></div>
    </section>

    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <a href = "/" class="footer-logo">
            <img src="images/i2iLogoTextOrange.png" alt="i2i Logo">
          </a>

          <div class="social-links">
            <a href="https://linkedin.com/company/i2i-amherst" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://instagram.com/i2i.amherst" target="_blank"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
        
        <div class="footer-section">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="/our-team.html">Our Team</a></li>
            <li><a href="/startups.html">Startups</a></li>
            <li><a href="/events.html">Events</a></li>
            <li><a href="/get-in-touch.html">Contact</a></li>
            <li><a href="/media.html">Media</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>Contact</h4>
          <p>Amherst College</p>
          <p>Amherst, MA 01002</p>
          <p>Email: i2i@amherst.edu</p>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>© 2024 i2i Amherst Venture Accelerator. All rights reserved.</p>
        <a href="https://ac-i2i-engineering-github-io.vercel.app/login" class="staff-login-link">Staff Login</a>
      </div>
    </footer>   
  </main>

  <!-- AOS JS -->
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <!-- Vanta JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
  <!-- Supabase -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.112.3/dist/umd/supabase.js"></script>
  <script src="js/supabase-client.js"></script>
  <!-- Custom JS -->
  <script src="js/app.js"></script>
  <script src="js/initAOS.js"></script>
  <script>
    // Startups are managed in the admin panel and read live from Supabase --
    // this is the single source of truth, no local JSON fallback.
    supabaseClient
      .from('startups')
      .select('*')
      .eq('is_published', true)
      .order('sort_order', { ascending: true })
      .then(({ data: startups, error }) => {
        if (error) {
          console.warn("Failed to load startups", error);
          return;
        }
        const container = document.getElementById('startups-container');
        startups.forEach(startup => {
          const card = document.createElement('div');
          card.className = 'index-card';
          card.id = startup.slug;

          if (startup.image_url) {
            const img = document.createElement('img');
            img.src = startup.image_url;
            img.alt = startup.image_alt || startup.title;
            card.appendChild(img);
          }

          const infoDiv = document.createElement('div');

          const h2 = document.createElement('h2');
          h2.textContent = startup.title;
          h2.className = 'team-lead';
          infoDiv.appendChild(h2);

          const p = document.createElement('p');
          p.textContent = startup.description || "";
          infoDiv.appendChild(p);

          if (startup.github_url) {
            const a = document.createElement('a');
            a.href = startup.github_url;
            a.textContent = startup.github_text || "GitHub Project Repository→";
            infoDiv.appendChild(a);
          }

          card.appendChild(infoDiv);
          container.appendChild(card);
        });
      })
      .catch(err => console.warn("Unexpected error loading startups", err));

    VANTA.NET({
      el: "#vanta-bg",
      color: 0xff5722,
      backgroundColor: 0xfafafa,
      points: 10.00,
      maxDistance: 20.00,
      spacing: 15.00,
      waveHeight: 30.00,
      zoom: 0.50
    });
  </script>
</body>
</html>