{"id":8,"date":"2026-08-13T21:10:14","date_gmt":"2026-08-13T21:10:14","guid":{"rendered":"https:\/\/wooguo.xyz\/?page_id=8"},"modified":"2026-08-13T22:06:55","modified_gmt":"2026-08-13T22:06:55","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/wooguo.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-158bdb8 e-flex e-con-boxed e-con e-parent\" data-id=\"158bdb8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/wooguo.xyz\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/HERO-WOOGUO.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-7f308f0 e-con-full e-flex e-con e-child\" data-id=\"7f308f0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d3baa9 elementor-widget elementor-widget-html\" data-id=\"1d3baa9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <!-- Google Fonts: Grandstander & Gaegu -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gaegu:wght@400;700&family=Grandstander:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background: transparent;\r\n      font-family: 'Gaegu', cursive;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1080px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      width: 100%;\r\n    }\r\n\r\n    \/* ==========================================\r\n       TRANSPARENT SLIM OUTLINE NAVIGATION BAR\r\n    ========================================== *\/\r\n    .navbar {\r\n      padding: 16px 0;\r\n      position: sticky;\r\n      top: 10px;\r\n      z-index: 99;\r\n    }\r\n\r\n    .nav-inner {\r\n      background: transparent; \/* Kartu Transparan *\/\r\n      border: 3px solid #000000; \/* Outline Hitam Slim *\/\r\n      box-shadow: 4px 4px 0px #000000; \/* Shadow Solid Ringkas *\/\r\n      border-radius: 50px;\r\n      padding: 8px 24px; \/* Dibuat lebih slim *\/\r\n      display: grid;\r\n      grid-template-columns: 1fr auto 1fr;\r\n      align-items: center;\r\n      position: relative;\r\n    }\r\n\r\n    \/* Menu Kiri & Kanan (Seimbang 2 Kiri, 2 Kanan) *\/\r\n    .nav-menu {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 24px;\r\n      list-style: none;\r\n    }\r\n\r\n    .nav-menu.left {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    .nav-menu.right {\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .nav-menu a {\r\n      text-decoration: none;\r\n      color: #000000;\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.3rem;\r\n      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n      display: inline-block;\r\n      padding: 2px 10px;\r\n      border-radius: 12px;\r\n    }\r\n\r\n    \/* Hover Interaktif Playful *\/\r\n    .nav-menu a:hover {\r\n      transform: translateY(-2px) rotate(-1.5deg);\r\n      color: #000000;\r\n      background: #FFB020; \/* Highlight Kuning Kartun *\/\r\n      box-shadow: 2.5px 2.5px 0px #000000;\r\n      border: 2px solid #000000;\r\n    }\r\n\r\n    \/* Logo Tengah Simpel *\/\r\n    .brand-logo {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 1.9rem;\r\n      color: #000000;\r\n      text-decoration: none;\r\n      text-transform: uppercase;\r\n      padding: 0 16px;\r\n      white-space: nowrap;\r\n      transition: transform 0.2s ease-in-out;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      letter-spacing: 1px;\r\n    }\r\n\r\n    .brand-logo:hover {\r\n      transform: scale(1.06) rotate(1.5deg);\r\n      color: #FF8800;\r\n    }\r\n\r\n    \/* Toggle Mobile Button *\/\r\n    .menu-toggle {\r\n      display: none;\r\n      background: none;\r\n      border: none;\r\n      color: #000000;\r\n      font-size: 2rem;\r\n      cursor: pointer;\r\n      font-family: 'Grandstander', cursive;\r\n      grid-column: 3;\r\n      justify-self: end;\r\n    }\r\n\r\n    .mobile-dropdown {\r\n      display: none;\r\n    }\r\n\r\n    \/* ==========================================\r\n       RESPONSIVE (MOBILE)\r\n    ========================================== *\/\r\n    @media (max-width: 768px) {\r\n      .nav-inner {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        padding: 8px 18px;\r\n      }\r\n\r\n      .nav-menu {\r\n        display: none;\r\n      }\r\n\r\n      .menu-toggle {\r\n        display: block;\r\n      }\r\n\r\n      .brand-logo {\r\n        font-size: 1.6rem;\r\n        padding: 0;\r\n      }\r\n\r\n      .mobile-dropdown {\r\n        display: none;\r\n        position: absolute;\r\n        top: 60px;\r\n        left: 0;\r\n        right: 0;\r\n        background: #FFFFFF; \/* Dropdown mobile memakai background solid agar teks terbaca jelas *\/\r\n        border: 3px solid #000000;\r\n        box-shadow: 4px 4px 0px #000000;\r\n        border-radius: 20px;\r\n        flex-direction: column;\r\n        padding: 16px;\r\n        gap: 12px;\r\n        text-align: center;\r\n      }\r\n\r\n      .mobile-dropdown.active {\r\n        display: flex;\r\n      }\r\n\r\n      .mobile-dropdown a {\r\n        text-decoration: none;\r\n        color: #000000;\r\n        font-family: 'Gaegu', cursive;\r\n        font-weight: 700;\r\n        font-size: 1.4rem;\r\n        padding: 6px;\r\n        border-radius: 10px;\r\n        transition: background 0.2s;\r\n      }\r\n\r\n      .mobile-dropdown a:hover {\r\n        background: #FFB020;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <header class=\"navbar\">\r\n    <div class=\"container\">\r\n      <nav class=\"nav-inner\">\r\n        <!-- Menu Kiri -->\r\n        <ul class=\"nav-menu left\">\r\n          <li><a href=\"#about\">About<\/a><\/li>\r\n          <li><a href=\"#vibe\">Vibe<\/a><\/li>\r\n        <\/ul>\r\n\r\n        <!-- Logo Tengah -->\r\n        <a href=\"#\" class=\"brand-logo\">\r\n          WOOGUO\r\n        <\/a>\r\n\r\n        <!-- Menu Kanan -->\r\n        <ul class=\"nav-menu right\">\r\n          <li><a href=\"#how-to\">How to Get<\/a><\/li>\r\n          <li><a href=\"#community\">Community<\/a><\/li>\r\n        <\/ul>\r\n\r\n        <!-- Mobile Toggle Button -->\r\n        <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"Toggle Menu\">\u2630<\/button>\r\n\r\n        <!-- Dropdown Menu Mobile -->\r\n        <div class=\"mobile-dropdown\" id=\"mobileDropdown\">\r\n          <a href=\"#about\">About<\/a>\r\n          <a href=\"#vibe\">Vibe<\/a>\r\n          <a href=\"#how-to\">How to Get<\/a>\r\n          <a href=\"#community\">Community<\/a>\r\n        <\/div>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <script>\r\n    const menuToggle = document.getElementById('menuToggle');\r\n    const mobileDropdown = document.getElementById('mobileDropdown');\r\n\r\n    menuToggle.addEventListener('click', () => {\r\n      mobileDropdown.classList.toggle('active');\r\n    });\r\n\r\n    document.querySelectorAll('.mobile-dropdown a').forEach(link => {\r\n      link.addEventListener('click', () => {\r\n        mobileDropdown.classList.remove('active');\r\n      });\r\n    });\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0366f31 e-con-full e-flex e-con e-child\" data-id=\"0366f31\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa88487 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"aa88487\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <!-- Google Fonts: Grandstander & Gaegu -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gaegu:wght@400;700&family=Grandstander:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background: transparent;\r\n      font-family: 'Gaegu', cursive;\r\n      color: #000000;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1080px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      width: 100%;\r\n    }\r\n\r\n    \/* ==========================================\r\n       HERO SECTION (SLIM & COMPACT)\r\n    ========================================== *\/\r\n    .hero-section {\r\n      padding: 24px 0 16px 0; \/* Padding vertikal dibuat lebih slim *\/\r\n      text-align: left;\r\n    }\r\n\r\n    .hero-wrapper {\r\n      max-width: 720px;\r\n    }\r\n\r\n    .hero-badge {\r\n      display: inline-block;\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.15rem;\r\n      color: #000000;\r\n      background: #FFB020;\r\n      border: 2.5px solid #000000;\r\n      box-shadow: 2.5px 2.5px 0px #000000;\r\n      padding: 3px 12px;\r\n      border-radius: 16px;\r\n      margin-bottom: 10px; \/* Spasi bawah lebih rapat *\/\r\n    }\r\n\r\n    .hero-title {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 3.2rem; \/* Ukuran font disesuaikan agar compact *\/\r\n      line-height: 1;\r\n      text-transform: uppercase;\r\n      color: #000000;\r\n      margin-bottom: 6px; \/* Spasi ke subtitle dirapatkan *\/\r\n    }\r\n\r\n    .hero-subtitle {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.5rem;\r\n      color: #000000;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .hero-desc {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 400;\r\n      font-size: 1.35rem;\r\n      line-height: 1.25;\r\n      color: #000000;\r\n      margin-bottom: 20px; \/* Jarak ke tombol lebih pas *\/\r\n    }\r\n\r\n    \/* Group Tombol Slim *\/\r\n    .hero-buttons {\r\n      display: flex;\r\n      gap: 12px;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n    }\r\n\r\n    .cartoon-btn {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.2rem;\r\n      color: #000000;\r\n      text-decoration: none;\r\n      background: #FFFFFF;\r\n      border: 2.5px solid #000000;\r\n      border-radius: 16px;\r\n      padding: 6px 20px; \/* Ukuran tombol lebih ringkas *\/\r\n      box-shadow: 3px 3px 0px #000000;\r\n      cursor: pointer;\r\n      transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n      display: inline-block;\r\n      text-align: center;\r\n    }\r\n\r\n    .cartoon-btn.primary {\r\n      background: #FFB020;\r\n    }\r\n\r\n    .cartoon-btn:hover {\r\n      transform: translate(-2px, -2px) rotate(-1deg);\r\n      box-shadow: 5px 5px 0px #000000;\r\n    }\r\n\r\n    .cartoon-btn.primary:hover {\r\n      background: #FF8800;\r\n    }\r\n\r\n    .cartoon-btn:active {\r\n      transform: translate(1px, 1px);\r\n      box-shadow: 1.5px 1.5px 0px #000000;\r\n    }\r\n\r\n    \/* ==========================================\r\n       RESPONSIVE (MOBILE)\r\n    ========================================== *\/\r\n    @media (max-width: 768px) {\r\n      .hero-section {\r\n        padding: 16px 0 10px 0;\r\n      }\r\n\r\n      .hero-title {\r\n        font-size: 2.4rem;\r\n      }\r\n\r\n      .hero-subtitle {\r\n        font-size: 1.25rem;\r\n      }\r\n\r\n      .hero-desc {\r\n        font-size: 1.2rem;\r\n        margin-bottom: 16px;\r\n      }\r\n\r\n      .hero-buttons {\r\n        flex-direction: column;\r\n        width: 100%;\r\n        gap: 10px;\r\n      }\r\n\r\n      .cartoon-btn {\r\n        width: 100%;\r\n        padding: 8px 16px;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- HERO SECTION SLIM -->\r\n  <section class=\"hero-section\">\r\n    <div class=\"container\">\r\n      <div class=\"hero-wrapper\">\r\n        <div class=\"hero-badge\">\r\n          A brown dog character with a calm and playful expression.\r\n        <\/div>\r\n        \r\n        <h1 class=\"hero-title\">Wooguo ($GUO)<\/h1>\r\n        \r\n        <div class=\"hero-subtitle\">\r\n          A simple, memorable name that instantly sticks.\r\n        <\/div>\r\n        \r\n        <p class=\"hero-desc\">\r\n          Built with a calm yet playful character, ready to navigate this space with a relaxed energy.\r\n        <\/p>\r\n\r\n        <div class=\"hero-buttons\">\r\n          <a href=\"YOUR-LINK\" target=\"_blank\" class=\"cartoon-btn primary\">Buy $GUO<\/a>\r\n          <a href=\"YOUR-LINK\" target=\"_blank\" class=\"cartoon-btn\">Join Telegram<\/a>\r\n          <a href=\"YOUR-LINK\" target=\"_blank\" class=\"cartoon-btn\">Follow X<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0644ec7 e-flex e-con-boxed e-con e-parent\" data-id=\"0644ec7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2567990 e-con-full e-flex e-con e-child\" data-id=\"2567990\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1605e42 elementor-widget elementor-widget-html\" data-id=\"1605e42\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <!-- Google Fonts: Grandstander & Gaegu -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gaegu:wght@400;700&family=Grandstander:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background: transparent;\r\n      font-family: 'Gaegu', cursive;\r\n      color: #000000;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1080px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      width: 100%;\r\n    }\r\n\r\n    \/* ==========================================\r\n       ABOUT SECTION (IMAGE LEFT, CONTENT RIGHT)\r\n    ========================================== *\/\r\n    .about-section {\r\n      padding: 24px 0;\r\n    }\r\n\r\n    .about-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1.2fr; \/* Kolom gambar & teks *\/\r\n      gap: 32px;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* Styling Gambar *\/\r\n    .about-image {\r\n      width: 100%;\r\n      text-align: center;\r\n    }\r\n\r\n    .about-image img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      display: block;\r\n      margin: 0 auto;\r\n      \/* Efek subtle hover kartun *\/\r\n      transition: transform 0.2s ease-in-out;\r\n    }\r\n\r\n    .about-image img:hover {\r\n      transform: scale(1.03) rotate(-1.5deg);\r\n    }\r\n\r\n    \/* Styling Konten Teks *\/\r\n    .about-content {\r\n      text-align: left;\r\n    }\r\n\r\n    .about-title {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 2.8rem;\r\n      line-height: 1.1;\r\n      text-transform: uppercase;\r\n      color: #000000;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .about-text {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 400;\r\n      font-size: 1.35rem;\r\n      line-height: 1.3;\r\n      color: #000000;\r\n      margin-bottom: 10px;\r\n    }\r\n\r\n    .about-text:last-child {\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    \/* ==========================================\r\n       RESPONSIVE (MOBILE)\r\n    ========================================== *\/\r\n    @media (max-width: 768px) {\r\n      .about-section {\r\n        padding: 16px 0;\r\n      }\r\n\r\n      .about-grid {\r\n        grid-template-columns: 1fr; \/* Tumpuk vertikal di mobile *\/\r\n        gap: 20px;\r\n      }\r\n\r\n      .about-title {\r\n        font-size: 2.2rem;\r\n      }\r\n\r\n      .about-text {\r\n        font-size: 1.25rem;\r\n      }\r\n\r\n      .about-image img {\r\n        max-width: 80%; \/* Gambar disesuaikan di mobile *\/\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- ABOUT SECTION -->\r\n  <section class=\"about-section\" id=\"about\">\r\n    <div class=\"container\">\r\n      <div class=\"about-grid\">\r\n        \r\n        <!-- Gambar Sebelah Kiri -->\r\n        <div class=\"about-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/wooguo.xyz\/wp-content\/uploads\/2026\/08\/ASET1.png\" alt=\"Wooguo Dog Character\">\r\n        <\/div>\r\n\r\n        <!-- Konten Sebelah Kanan -->\r\n        <div class=\"about-content\">\r\n          <h2 class=\"about-title\">The Spirit of Wooguo<\/h2>\r\n          <p class=\"about-text\">\r\n            Wooguo represents a brown dog character with a calm and playful expression. A simple name that captures a warm, curious, and easygoing spirit.\r\n          <\/p>\r\n          <p class=\"about-text\">\r\n            No noise, no unnecessary complexity. $GUO brings a positive, straightforward, and engaging approach to every step forward.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73e58f7 e-con-full e-flex e-con e-child\" data-id=\"73e58f7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13e394a elementor-widget elementor-widget-html\" data-id=\"13e394a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <!-- Google Fonts: Grandstander & Gaegu -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gaegu:wght@400;700&family=Grandstander:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background: transparent;\r\n      font-family: 'Gaegu', cursive;\r\n      color: #000000;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1080px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      width: 100%;\r\n    }\r\n\r\n    \/* ==========================================\r\n       DUAL SECTION LAYOUT (VIBE & HOW TO GET)\r\n    ========================================== *\/\r\n    .features-section {\r\n      padding: 24px 0;\r\n    }\r\n\r\n    \/* Grid 2 Kolom Seimbang (Kiri & Kanan) *\/\r\n    .dual-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 48px;\r\n      align-items: start;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 2.4rem;\r\n      line-height: 1.1;\r\n      text-transform: uppercase;\r\n      color: #000000;\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    \/* Column 1: Vibe List *\/\r\n    .vibe-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 14px;\r\n    }\r\n\r\n    .vibe-item h3 {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 1.45rem;\r\n      color: #000000;\r\n      margin-bottom: 2px;\r\n    }\r\n\r\n    .vibe-item p {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 400;\r\n      font-size: 1.25rem;\r\n      line-height: 1.25;\r\n      color: #000000;\r\n    }\r\n\r\n    \/* Column 2: How To Get Steps *\/\r\n    .steps-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 14px;\r\n    }\r\n\r\n    .step-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n    }\r\n\r\n    .step-number {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 1.15rem;\r\n      background: #FFB020;\r\n      color: #000000;\r\n      border: 2.5px solid #000000;\r\n      box-shadow: 2px 2px 0px #000000;\r\n      width: 32px;\r\n      height: 32px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n    }\r\n\r\n    .step-content h3 {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 1.45rem;\r\n      color: #000000;\r\n      margin-bottom: 2px;\r\n    }\r\n\r\n    .step-content p {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 400;\r\n      font-size: 1.25rem;\r\n      line-height: 1.25;\r\n      color: #000000;\r\n    }\r\n\r\n    \/* ==========================================\r\n       RESPONSIVE (MOBILE)\r\n    ========================================== *\/\r\n    @media (max-width: 768px) {\r\n      .features-section {\r\n        padding: 16px 0;\r\n      }\r\n\r\n      .dual-grid {\r\n        grid-template-columns: 1fr; \/* Tumpuk vertikal di layar HP *\/\r\n        gap: 32px;\r\n      }\r\n\r\n      .section-title {\r\n        font-size: 2rem;\r\n        margin-bottom: 12px;\r\n      }\r\n\r\n      .vibe-item h3, .step-content h3 {\r\n        font-size: 1.3rem;\r\n      }\r\n\r\n      .vibe-item p, .step-content p {\r\n        font-size: 1.15rem;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- DUAL SECTION: VIBE (LEFT) & HOW TO GET (RIGHT) -->\r\n  <section class=\"features-section\">\r\n    <div class=\"container\">\r\n      <div class=\"dual-grid\">\r\n        \r\n        <!-- KOLOM KIRI: THE VIBE -->\r\n        <div class=\"vibe-col\" id=\"vibe\">\r\n          <h2 class=\"section-title\">THE VIBE<\/h2>\r\n          <div class=\"vibe-list\">\r\n            <div class=\"vibe-item\">\r\n              <h3>Warm & Easygoing<\/h3>\r\n              <p>A welcoming, stress-free direction built for everyone.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"vibe-item\">\r\n              <h3>Curious Mind<\/h3>\r\n              <p>Driven by continuous curiosity to explore and grow in the market.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"vibe-item\">\r\n              <h3>Calm & Playful<\/h3>\r\n              <p>A steady approach combined with an enjoyable experience.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- KOLOM KANAN: HOW TO GET -->\r\n        <div class=\"how-to-col\" id=\"how-to\">\r\n          <h2 class=\"section-title\">HOW TO GET $GUO<\/h2>\r\n          <div class=\"steps-list\">\r\n            <div class=\"step-item\">\r\n              <div class=\"step-number\">1<\/div>\r\n              <div class=\"step-content\">\r\n                <h3>Set Up a Wallet<\/h3>\r\n                <p>Prepare a compatible wallet for the preferred network.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-item\">\r\n              <div class=\"step-number\">2<\/div>\r\n              <div class=\"step-content\">\r\n                <h3>Fund the Wallet<\/h3>\r\n                <p>Ensure sufficient balance to cover the transaction.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"step-item\">\r\n              <div class=\"step-number\">3<\/div>\r\n              <div class=\"step-content\">\r\n                <h3>Swap for $GUO<\/h3>\r\n                <p>Paste the official Contract Address (CA), set the amount, and confirm the trade.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d44f0a8 e-flex e-con-boxed e-con e-parent\" data-id=\"d44f0a8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-82dae08 e-con-full e-flex e-con e-child\" data-id=\"82dae08\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae86eb0 elementor-widget elementor-widget-html\" data-id=\"ae86eb0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \r\n  <!-- Google Fonts: Grandstander & Gaegu -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gaegu:wght@400;700&family=Grandstander:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background: transparent;\r\n      font-family: 'Gaegu', cursive;\r\n      color: #000000;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1080px;\r\n      margin: 0 auto;\r\n      padding: 0 20px;\r\n      width: 100%;\r\n    }\r\n\r\n    \/* ==========================================\r\n       COMMUNITY SECTION (CENTERED)\r\n    ========================================== *\/\r\n    .community-section {\r\n      padding: 24px 0 32px 0;\r\n      text-align: center;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 2.6rem;\r\n      line-height: 1.1;\r\n      text-transform: uppercase;\r\n      color: #000000;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .community-desc {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 400;\r\n      font-size: 1.35rem;\r\n      line-height: 1.25;\r\n      color: #000000;\r\n      max-width: 600px;\r\n      margin: 0 auto 20px auto;\r\n    }\r\n\r\n    \/* Contract Address Box *\/\r\n    .ca-wrapper {\r\n      margin: 0 auto 24px auto;\r\n      max-width: 650px;\r\n    }\r\n\r\n    .ca-label {\r\n      font-family: 'Grandstander', cursive;\r\n      font-weight: 600;\r\n      font-size: 1.25rem;\r\n      text-transform: uppercase;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .ca-box {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      background: #FFFFFF;\r\n      border: 2.5px solid #000000;\r\n      box-shadow: 3px 3px 0px #000000;\r\n      border-radius: 16px;\r\n      padding: 6px 16px;\r\n      word-break: break-all;\r\n    }\r\n\r\n    .ca-text {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.25rem;\r\n      color: #000000;\r\n      flex-grow: 1;\r\n      text-align: center;\r\n      user-select: all; \/* Memudahkan seleksi manual jika diperlukan *\/\r\n    }\r\n\r\n    .copy-btn {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.1rem;\r\n      color: #000000;\r\n      background: #FFB020;\r\n      border: 2px solid #000000;\r\n      border-radius: 12px;\r\n      padding: 4px 16px;\r\n      box-shadow: 2px 2px 0px #000000;\r\n      cursor: pointer;\r\n      white-space: nowrap;\r\n      transition: all 0.15s ease-in-out;\r\n    }\r\n\r\n    .copy-btn:hover {\r\n      transform: translate(-1px, -1px);\r\n      box-shadow: 3px 3px 0px #000000;\r\n      background: #FF8800;\r\n    }\r\n\r\n    .ca-note {\r\n      font-family: 'Gaegu', cursive;\r\n      font-size: 1.1rem;\r\n      color: #333333;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    \/* Social Links Buttons *\/\r\n    .social-links {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 14px;\r\n      flex-wrap: wrap;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .social-btn {\r\n      font-family: 'Gaegu', cursive;\r\n      font-weight: 700;\r\n      font-size: 1.25rem;\r\n      color: #000000;\r\n      text-decoration: none;\r\n      background: #FFFFFF;\r\n      border: 2.5px solid #000000;\r\n      border-radius: 16px;\r\n      padding: 6px 22px;\r\n      box-shadow: 3px 3px 0px #000000;\r\n      transition: all 0.15s ease-in-out;\r\n      display: inline-block;\r\n    }\r\n\r\n    .social-btn:hover {\r\n      transform: translate(-2px, -2px) rotate(-1deg);\r\n      box-shadow: 5px 5px 0px #000000;\r\n      background: #FFB020;\r\n    }\r\n\r\n    \/* ==========================================\r\n       RESPONSIVE (MOBILE)\r\n    ========================================== *\/\r\n    @media (max-width: 768px) {\r\n      .community-section {\r\n        padding: 16px 0 24px 0;\r\n      }\r\n\r\n      .section-title {\r\n        font-size: 2.1rem;\r\n      }\r\n\r\n      .community-desc {\r\n        font-size: 1.2rem;\r\n      }\r\n\r\n      .ca-box {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        padding: 10px;\r\n      }\r\n\r\n      .copy-btn {\r\n        width: 100%;\r\n      }\r\n\r\n      .social-links {\r\n        flex-direction: column;\r\n        gap: 10px;\r\n      }\r\n\r\n      .social-btn {\r\n        width: 100%;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- COMMUNITY SECTION -->\r\n  <section class=\"community-section\" id=\"community\">\r\n    <div class=\"container\">\r\n      \r\n      <h2 class=\"section-title\">JOIN THE COMMUNITY<\/h2>\r\n      \r\n      <p class=\"community-desc\">\r\n        Connect with us and stay updated with Wooguo. Relaxed vibes, positive energy, and easygoing growth for everyone.\r\n      <\/p>\r\n\r\n      <!-- Contract Address Bar -->\r\n      <div class=\"ca-wrapper\">\r\n        <div class=\"ca-label\">Contract Address<\/div>\r\n        <div class=\"ca-box\">\r\n          <span class=\"ca-text\" id=\"caText\">0x0000000000000000000000000000000000000000<\/span>\r\n          <button class=\"copy-btn\" id=\"copyBtn\">Copy CA<\/button>\r\n        <\/div>\r\n        <p class=\"ca-note\">(Always verify the contract address through official channels only)<\/p>\r\n      <\/div>\r\n\r\n      <!-- Social Links Buttons -->\r\n      <div class=\"social-links\">\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-btn\">X (Twitter)<\/a>\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-btn\">Telegram<\/a>\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-btn\">DEX<\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- JavaScript Copy Clipboard (Dual-Method Fallback) -->\r\n  <script>\r\n    const copyBtn = document.getElementById('copyBtn');\r\n    const caTextElement = document.getElementById('caText');\r\n\r\n    copyBtn.addEventListener('click', () => {\r\n      const textToCopy = caTextElement.innerText.trim();\r\n\r\n      \/\/ Fungsi untuk mengubah UI tombol saat sukses\r\n      const showSuccessUI = () => {\r\n        const originalText = copyBtn.innerText;\r\n        copyBtn.innerText = 'Copied!';\r\n        copyBtn.style.background = '#50C878';\r\n        \r\n        setTimeout(() => {\r\n          copyBtn.innerText = originalText;\r\n          copyBtn.style.background = '#FFB020';\r\n        }, 2000);\r\n      };\r\n\r\n      \/\/ Metode Modern (Navigator Clipboard API)\r\n      if (navigator.clipboard && window.isSecureContext) {\r\n        navigator.clipboard.writeText(textToCopy).then(() => {\r\n          showSuccessUI();\r\n        }).catch(err => {\r\n          fallbackCopyText(textToCopy, showSuccessUI);\r\n        });\r\n      } else {\r\n        \/\/ Metode Fallback untuk browser tua \/ non-HTTPS \/ WebView Mobile\r\n        fallbackCopyText(textToCopy, showSuccessUI);\r\n      }\r\n    });\r\n\r\n    \/\/ Fungsi Fallback menggunakan Textarea sementara\r\n    function fallbackCopyText(text, callback) {\r\n      const textArea = document.createElement(\"textarea\");\r\n      textArea.value = text;\r\n      textArea.style.top = \"0\";\r\n      textArea.style.left = \"0\";\r\n      textArea.style.position = \"fixed\";\r\n      textArea.style.opacity = \"0\";\r\n      document.body.appendChild(textArea);\r\n      textArea.focus();\r\n      textArea.select();\r\n\r\n      try {\r\n        const successful = document.execCommand('copy');\r\n        if (successful) {\r\n          callback();\r\n        }\r\n      } catch (err) {\r\n        console.error('Fallback copy failed: ', err);\r\n      }\r\n\r\n      document.body.removeChild(textArea);\r\n    }\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-464fef9 e-flex e-con-boxed e-con e-parent\" data-id=\"464fef9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/wooguo.xyz\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/HERO-WOOGUO1.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-e2d0d9c elementor-widget elementor-widget-spacer\" data-id=\"e2d0d9c\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About Vibe WOOGUO How to Get Community \u2630 About Vibe How to Get Community A brown dog character with a calm and playful expression. Wooguo ($GUO) A simple, memorable name that instantly sticks. Built with a calm yet playful character, ready to navigate this space with a relaxed energy. Buy $GUO Join Telegram Follow X [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wooguo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":13,"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/wooguo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/wooguo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}