index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Site Verification -->
  <meta name="google-site-verification" content="MMFbFK3rG9vPRhkF3iYljWAdpAljgoBaJO0Q1QLopUU" />
  <meta name="google-site-verification" content="04p6oYERtvFSy1DhJs66Yk67ym0uBxeNBRjjVgTbWVU" />

  <title>Global Dream Connect</title>

  <meta name="description" content="Global Dream Connect is a professional education startup connecting students with leadership opportunities globally.">
  <meta name="keywords" content="internship, education, students, leadership, global, future leaders">
  <meta name="author" content="Global Dream Connect">
  <meta name="robots" content="index, follow">
  <link rel="me" href="https://www.linkedin.com/company/global-dream-connect-gdc">

  <meta property="og:title" content="Global Dream Connect">
  <meta property="og:description" content="Join the Dream Builders Fellowship and shape your leadership journey.">
  <meta property="og:image" content="https://yourdomain.com/og-image.jpg"> <!-- Replace with your actual image -->
  <meta property="og:url" content="https://yourdomain.com/">
  <meta property="og:type" content="website">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Global Dream Connect">
  <meta name="twitter:description" content="Empowering students through global leadership and mentoring opportunities.">
  <meta name="twitter:image" content="https://yourdomain.com/og-image.jpg"> <!-- Replace with your actual image -->

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Glacial+Indifference:wght@400&display=swap" rel="stylesheet"/>

  <style>
    :root { --brand: #070750; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: #fff;
      color: #000;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }

    .site-header {
      background: #fff;
      border-bottom: 1px solid #ccc;
      padding: 1rem 2rem;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-family: 'Glacial Indifference', sans-serif;
      font-size: 1.8rem;
      font-weight: 400;
      color: var(--brand);
    }
    nav ul.nav-list {
      list-style: none;
      display: flex;
      gap: 2rem;
    }
    nav ul.nav-list li a {
      font-weight: 500;
      color: var(--brand);
      transition: color .3s ease;
    }
    nav ul.nav-list li a:hover {
      text-decoration: underline;
    }
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      height: 20px;
      background: transparent;
      border: none;
      cursor: pointer;
      margin-left: auto;
    }
    .hamburger-line {
      height: 3px;
      background: #000;
      border-radius: 2px;
    }
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }
      .hamburger { display: flex; }
      nav.nav-menu { display: none; width: 100%; }
      nav.nav-menu.active { display: block; }
      nav ul.nav-list {
        flex-direction: column;
        gap: 1rem;
        padding-left: 0;
        margin-top: 1rem;
        width: 100%;
      }
      nav ul.nav-list li a {
        display: block;
        padding: 0.5rem 0;
        font-size: 1.1rem;
      }
    }
    .hero {
      padding: 5rem 2rem;
      text-align: center;
      background: #f0f4ff;
      color: var(--brand);
    }
    .hero h1 {
      font-size: 2.5rem;
      font-weight: 400;
      margin-bottom: 1rem;
    }
    .hero p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }
    .cta-button {
      padding: 0.8rem 2rem;
      font-size: 1rem;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    .cta-button:hover { background: #00003a; }

    .mission, .offers {
      padding: 4rem 2rem;
      text-align: center;
    }
    .mission h2, .offers h2 {
      font-size: 2rem;
      color: var(--brand);
      margin-bottom: 1rem;
    }
    .mission p {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .card {
      background: var(--brand);
      color: #FFF;
      border: none;
      border-radius: 12px;
      padding: 2rem;
      font-weight: 500;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.03);
    }

    footer {
      background: #f1f1f1;
      text-align: center;
      padding: 2rem;
      font-size: 0.9rem;
      color: #444;
    }
    footer a { color: var(--brand); margin: 0 0.5rem; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="container">
      <h1 class="logo">Global Dream Connect</h1>
      <button class="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-menu">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
      </button>
      <nav id="nav-menu" class="nav-menu">
        <ul class="nav-list">
          <li><a href="index.html">Home</a></li>
          <li><a href="how-it-works.html">How It Works</a></li>
          <li><a href="become-a-mentor.html">Become a Mentor</a></li>
          <li><a href="fellowship.html">Fellowship</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="hero">
    <h1>Dream Builders Fellowship</h1>
    <p>Global Dream Connect’s flagship internship program designed to empower high school students in marketing, design, operations, and client success. Join the movement shaping future-ready leaders.</p>
    <a class="cta-button" href="fellowship.html">Apply Now</a>
  </section>

  <section class="mission">
    <h2>Our Mission</h2>
    <p>Global Dream Connect is a student-first education startup. We connect students with global leadership and mentoring opportunities to shape the future of education access and equity.</p>
  </section>

  <section class="offers">
    <h2>What We Offer</h2>
    <div class="cards">
      <div class="card">Certificate Of Completion</div>
      <div class="card">Letter Of Recommendation</div>
      <div class="card">Higher Leadership Position</div>
      <div class="card">Access to Exclusive Alumni Network</div>
      <div class="card">Real-World Leadership Projects</div>
      <div class="card">Marketing & Branding Experience</div>
      <div class="card">Technology & Design Opportunities</div>
      <div class="card">Community Engagement Impact</div>
    </div>
  </section>

  <footer>
    <p>
      <a href="about.html">About</a> |
      <a href="faq.html">FAQs</a> |
      <a href="contact.html">Contact</a> |
      <a href="privacy.html">Privacy</a>
    </p>
    <p>
      Follow us:
      <a href="https://www.linkedin.com/company/global-dream-connect-gdc" target="_blank" aria-label="LinkedIn">LinkedIn</a> |
      Email: <a href="mailto:globaldreamconnect@gmail.com">globaldreamconnect@gmail.com</a>
    </p>
  </footer>

  <!-- Mobile menu toggle script -->
  <script>
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('#nav-menu');

    hamburger.addEventListener('click', () => {
      const expanded = hamburger.getAttribute('aria-expanded') === 'true';
      hamburger.setAttribute('aria-expanded', !expanded);
      navMenu.classList.toggle('active');
    });
  </script>
</body>
</html>