How the World
Sees Indonesia

Seventeen thousand islands, a thousand vantage points. Step into the stories travelers, scientists, and storytellers carry home from the archipelago.
Scroll
CN Corporation — Globe Hero
All Stories
Testimoni Dunia
How the World Sees Indonesia

Globe sedang memuat — periksa koneksi internet jika tidak muncul.
Negeri zamrud khatulistiwa, tempat belasan ribu pulau merangkai harmoni, dan keanekaragaman budayanya memikat hati dunia. Keramahan tanpa batas serta pesona alamnya menjadikan Ibu Pertiwi selalu dirindukan oleh setiap pasang mata yang pernah singgah.
Explore the Stories →
				
					<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CN Corporation — Globe Hero</title>
<link rel="preconnect" href="https://fonts.googleapis.com">

<script src="https://unpkg.com/globe.gl@2.33.1/dist/globe.gl.min.js"></script>
<style>
  :root {
    --color-black: #0B0B0C;
    --color-white-warm: #FAF8F4;
    --color-gray-stone: #8A8782;
    --color-gold-accent: #C9A24B;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--color-black);
    color: var(--color-white-warm);
    font-family: var(--font-body);
  }

  /* ===== Hero shell ===== */
  .cn-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden; /* crops the globe bleed at the viewport edge */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "headline globe" "subtext globe";
    align-content: center;
    background:
      radial-gradient(ellipse 50% 45% at 88% 18%, rgba(201, 162, 75, 0.10), transparent 70%),
      var(--color-black);
    padding: 0 6vw;
    gap: 32px 2vw; /* more breathing room between headline and subtext on desktop */
  }

  /* ===== Starfield ===== */
  .cn-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .cn-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--color-white-warm);
    animation: cn-twinkle 4s ease-in-out infinite;
  }
  @keyframes cn-twinkle {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.9; }
  }

  /* ===== Corner brackets (camera-frame feel) ===== */
  .cn-corner { position: absolute; width: 26px; height: 26px; z-index: 3; opacity: 0.55; }
  .cn-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--color-white-warm); border-left: 1px solid var(--color-white-warm); }
  .cn-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--color-white-warm); border-right: 1px solid var(--color-white-warm); }
  .cn-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--color-white-warm); border-left: 1px solid var(--color-white-warm); }
  .cn-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--color-white-warm); border-right: 1px solid var(--color-white-warm); }

  /* ===== "All Stories" glass pill button, top-right ===== */
  .cn-nav-pill {
    position: absolute;
    top: 28px;
    right: 68px; /* clears the top-right corner bracket */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white-warm);
    text-decoration: none;
    border: 1px solid rgba(250, 248, 244, 0.22);
    border-radius: 999px;
    background: rgba(250, 248, 244, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.35s var(--ease-calm), border-color 0.35s var(--ease-calm), transform 0.35s var(--ease-calm);
  }
  .cn-nav-pill:hover { background: rgba(250, 248, 244, 0.12); border-color: rgba(250, 248, 244, 0.4); transform: translateY(-1px); }
  .cn-nav-pill:focus-visible { outline: 2px solid var(--color-gold-accent); outline-offset: 3px; }
  .cn-nav-pill svg { width: 13px; height: 13px; }

  /* ===== Text blocks ===== */
  .cn-hero__headline { grid-area: headline; position: relative; z-index: 1; align-self: end; max-width: 540px; }
  .cn-hero__subtext { grid-area: subtext; position: relative; z-index: 1; align-self: start; max-width: 460px; padding-bottom: 8vh; }

  .cn-hero__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold-accent);
    margin: 0 0 22px;
  }

  .cn-hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.16;
    margin: 0;
    color: var(--color-white-warm); /* "How the World Sees" stays white */
  }

  .cn-hero__title em {
    font-style: italic;
    color: var(--color-gold-accent); /* only "Indonesia" is gold */
  }

  .cn-hero__subtitle {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-gray-stone);
    margin: 0 0 28px;
  }

  .cn-btn {
    font-size: 0.92rem;
    font-weight: 500;
    padding: 13px 26px;
    border-radius: 2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 248, 244, 0.06);
    color: var(--color-white-warm);
    border: 1px solid rgba(250, 248, 244, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.35s var(--ease-calm), border-color 0.35s var(--ease-calm), transform 0.35s var(--ease-calm);
  }
  .cn-btn:hover { background: rgba(250, 248, 244, 0.12); border-color: var(--color-gold-accent); transform: translateY(-2px); }
  .cn-btn:focus-visible { outline: 2px solid var(--color-gold-accent); outline-offset: 3px; }

  /* ===== Globe container ===== */
  .cn-globe-wrap {
    grid-area: globe;
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 420px;
    padding-right: 8px; /* keeps the globe from touching/clipping at the edge */
  }
  .cn-globe-wrap canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%); /* shifted right, bleeding slightly off-frame */
  }
  .cn-globe-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-gray-stone);
    font-size: 0.85rem;
    padding: 0 24px;
  }

  /* ===== Tablet AND mobile: same stacked treatment ===== */
  @media (max-width: 1024px) {
    .cn-hero {
      grid-template-columns: 1fr;
      grid-template-areas: "headline" "globe" "subtext";
      padding: 14vh 6vw 8vh;
      gap: 28px 0;
      min-height: auto;
    }
    .cn-hero__headline, .cn-hero__subtext { max-width: 100%; align-self: auto; padding-bottom: 0; }
    .cn-globe-wrap { height: 280px; min-height: 0; padding-right: 0; } /* same size used for mobile and tablet */
    .cn-globe-wrap canvas { transform: translate(-50%, -50%); } /* contained, no bleed */
    .cn-corner { width: 18px; height: 18px; }
    .cn-corner--tl, .cn-corner--tr { top: 16px; }
    .cn-corner--bl, .cn-corner--br { bottom: 16px; }
    .cn-corner--tl, .cn-corner--bl { left: 16px; }
    .cn-corner--tr, .cn-corner--br { right: 16px; }
    .cn-nav-pill { top: 16px; right: 52px; padding: 8px 14px; font-size: 0.68rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cn-star { animation: none; opacity: 0.5; }
  }
</style>
</head>
<body>

<section class="cn-hero" aria-label="Pembuka — How the World Sees Indonesia">
  <div class="cn-stars" id="cn-stars" aria-hidden="true"></div>

  <div class="cn-corner cn-corner--tl" aria-hidden="true"></div>
  <div class="cn-corner cn-corner--tr" aria-hidden="true"></div>
  <div class="cn-corner cn-corner--bl" aria-hidden="true"></div>
  <div class="cn-corner cn-corner--br" aria-hidden="true"></div>

  <a href="#stories" class="cn-nav-pill">
    All Stories
    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </a>

  <div class="cn-hero__headline">
    <p class="cn-hero__eyebrow">Testimoni Dunia</p>
    <h1 class="cn-hero__title">How the World Sees <em>Indonesia</em></h1>
  </div>

  <div class="cn-globe-wrap" id="cn-globe-wrap">
    <div id="cn-globe" role="img" aria-label="Globe interaktif menampilkan koneksi dari berbagai negara menuju Indonesia" style="position:absolute; inset:0;"></div>
    <p class="cn-globe-fallback" id="cn-globe-fallback">Globe sedang memuat — periksa koneksi internet jika tidak muncul.</p>
  </div>

  <div class="cn-hero__subtext">
    <p class="cn-hero__subtitle">
      Negeri zamrud khatulistiwa, tempat belasan ribu pulau merangkai harmoni, dan
      keanekaragaman budayanya memikat hati dunia. Keramahan tanpa batas serta pesona
      alamnya menjadikan Ibu Pertiwi selalu dirindukan oleh setiap pasang mata yang
      pernah singgah.
    </p>
    <a href="#stories" class="cn-btn">Explore the Stories →</a>
  </div>
</section>

<script>
  // ===== Starfield =====
  (function buildStars() {
    var container = document.getElementById('cn-stars');
    for (var i = 0; i < 70; i++) {
      var star = document.createElement('div');
      star.className = 'cn-star';
      star.style.top = Math.random() * 100 + '%';
      star.style.left = Math.random() * 100 + '%';
      var size = (Math.random() * 1.6 + 1).toFixed(1);
      star.style.width = size + 'px';
      star.style.height = size + 'px';
      star.style.animationDelay = (Math.random() * 4).toFixed(2) + 's';
      star.style.opacity = (Math.random() * 0.6 + 0.2).toFixed(2);
      container.appendChild(star);
    }
  })();

  // ===== Photoreal globe (globe.gl) =====
  (function buildGlobe() {
    var fallback = document.getElementById('cn-globe-fallback');

    if (typeof Globe === 'undefined') {
      fallback.style.display = 'flex';
      return; // CDN script failed to load — fallback message shown instead of a silent blank space
    }

    var ORIGIN = { lat: -6.2, lng: 106.8 }; // Jakarta, Indonesia

    // 17 countries — arcs flow FROM each country TO Indonesia
    var countries = [
      { lat: 35.6, lng: 139.7, name: 'Japan' },
      { lat: 51.5, lng: -0.1, name: 'United Kingdom' },
      { lat: 38.9, lng: -77.0, name: 'United States' },
      { lat: -33.9, lng: 151.2, name: 'Australia' },
      { lat: 1.35, lng: 103.8, name: 'Singapore' },
      { lat: 25.2, lng: 55.3, name: 'UAE' },
      { lat: 48.85, lng: 2.35, name: 'France' },
      { lat: 52.5, lng: 13.4, name: 'Germany' },
      { lat: -15.8, lng: -47.9, name: 'Brazil' },
      { lat: -25.7, lng: 28.2, name: 'South Africa' },
      { lat: 28.6, lng: 77.2, name: 'India' },
      { lat: 39.9, lng: 116.4, name: 'China' },
      { lat: 37.5, lng: 127.0, name: 'South Korea' },
      { lat: 45.4, lng: -75.7, name: 'Canada' },
      { lat: 52.4, lng: 4.9, name: 'Netherlands' },
      { lat: 30.0, lng: 31.2, name: 'Egypt' },
      { lat: -41.3, lng: 174.8, name: 'New Zealand' }
    ];

    var arcsData = countries.map(function (c) {
      return {
        startLat: c.lat, startLng: c.lng,   // reversed: starts at the country
        endLat: ORIGIN.lat, endLng: ORIGIN.lng, // ends at Indonesia
        color: ['rgba(201,162,75,0.15)', 'rgba(201,162,75,0.9)']
      };
    });

    var pointsData = countries.concat([{ lat: ORIGIN.lat, lng: ORIGIN.lng, name: 'Indonesia', isOrigin: true }]);

    var wrap = document.getElementById('cn-globe-wrap');
    var globeEl = document.getElementById('cn-globe');

    var world = Globe()
      (globeEl)
      .backgroundColor('rgba(0,0,0,0)')
      .globeImageUrl('https://unpkg.com/three-globe@2.31.1/example/img/earth-blue-marble.jpg')
      .bumpImageUrl('https://unpkg.com/three-globe@2.31.1/example/img/earth-topology.png')
      .showAtmosphere(true)
      .atmosphereColor('#C9A24B')
      .atmosphereAltitude(0.18)

      .pointsData(pointsData)
      .pointLat('lat')
      .pointLng('lng')
      .pointColor(function (d) { return d.isOrigin ? '#C9A24B' : '#FAF8F4'; })
      .pointAltitude(0.001)
      .pointRadius(function (d) { return d.isOrigin ? 0.55 : 0.28; })

      .arcsData(arcsData)
      .arcColor('color')
      .arcDashLength(0.4)
      .arcDashGap(2)
      .arcDashAnimateTime(2500)
      .arcStroke(0.4)
      .arcAltitudeAutoScale(0.4);

    world.controls().autoRotate = true;
    world.controls().autoRotateSpeed = 0.35;
    world.controls().enableZoom = false;
    world.pointOfView({ lat: ORIGIN.lat, lng: ORIGIN.lng + 40, altitude: 2.1 }, 0);

    function resizeGlobe() {
      var isStacked = window.matchMedia('(max-width: 1024px)').matches;
      var scale = isStacked ? 1.0 : 1.45; // bleed effect only on the two-column desktop layout
      var w = (wrap.clientWidth || 600) * scale;
      var h = (wrap.clientHeight || 600) * scale;
      world.width(w).height(h);
    }
    resizeGlobe();
    window.addEventListener('resize', resizeGlobe);

    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) { world.controls().autoRotate = entry.isIntersecting; });
      }, { threshold: 0.05 }).observe(wrap);
    }
  })();
</script>

</body>
</html>
How the WorldSees Indonesia

How the World Sees Indonesia

How the World
Sees Indonesia
