[Draft] remove Subcribe Oma in Join Oma and About

app.config.ts

@@ -1,6 +1,9 @@
 export default defineAppConfig({
   ui: {
     primary: "neutral",
+    notification: {
+      background: 'bg-white dark:bg-black',
+    },
   },
   header: {
     menu: {

app.vue

@@ -1,7 +1,8 @@
 <template>
   <div :class="computedHeightClass" class="w-fit sm:w-full bg-golden/[0.2] dark:bg-[#19191a]"
     :style="{ fontFamily: main.font.type }">
-    <ShAnnouncement :class="['z-50', route.path !== '/' ? '' : 'sticky w-full top-0']" />
+    <!-- Hidden on the homepage: its first section is the top header there (#946) -->
+    <ShAnnouncement v-if="route.path.replace(/\/$/, '') !== '/home'" :class="['z-50', route.path !== '/' ? '' : 'sticky w-full top-0']" />
     <AppHeader v-if="route.path !== '/'" class="flex py-4" title="OMA">
       <template v-slot:logo>
         <img v-if="computedLogoSrc" src="/logo-dark.png" alt="logo-dark" class="shrink-0 grow-0 h-16 w-[265px] object-contain object-left" />
@@ -13,14 +14,21 @@
       <NuxtPage />
     </div>
     <AppFooter v-if="route.path !== '/' && route" />
-    <UNotifications />
+    <AppCookieConsent />
+    <UNotifications>
+      <template #description="{ description }">
+        <span v-html="description" />
+      </template>
+    </UNotifications>
   </div>
 </template>
 
 <script setup lang="ts">
 
 const main = useAppConfig().main;
 const route = useRoute();
+const toast = useToast();
+const { init: initCookieConsent } = useCookieConsent();
 
 const theme = useColorMode();
 
@@ -41,6 +49,9 @@ useHead(() => ({
 
 // Use onMounted to ensure the code runs only on the client side
 onMounted(() => {
+  // Initialize cookie consent — GTM stays disabled until user explicitly accepts
+  initCookieConsent();
+
   for (let i = 1; i <= 7; i++) {
     document.documentElement.style.setProperty(`--h${i}-font-type`, main[`h${i}`].font.type);
     document.documentElement.style.setProperty(`--h${i}-font-size`, main[`h${i}`].font.size);

components/app/cookie-consent.vue

@@ -0,0 +1,51 @@
+<template>
+  <Transition name="slide-up">
+    <div v-if="showBanner" class="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6">
+      <div
+        class="mx-auto max-w-2xl rounded-xl border border-primary/20 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-sm shadow-xl p-5 md:p-6"
+      >
+        <div class="flex items-start gap-3 mb-4">
+          <UIcon name="i-heroicons-shield-check" class="text-primary text-xl mt-0.5 shrink-0" />
+          <div>
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Cookie Consent</h3>
+            <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+              We use cookies for analytics and marketing to improve your experience.
+              No cookies are set until you make a choice.
+              Read our <NuxtLink to="/about/legal#cookie-policy" class="text-primary underline">Cookie Policy</NuxtLink>.
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-col sm:flex-row gap-2 sm:justify-end">
+          <UButton
+            label="Reject All"
+            variant="outline"
+            size="sm"
+            @click="reject"
+          />
+          <UButton
+            label="Accept All"
+            variant="outline"
+            size="sm"
+            @click="accept"
+          />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+const { showBanner, accept, reject } = useCookieConsent()
+</script>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

components/app/footer.vue

@@ -36,6 +36,7 @@
 import { useQueryCollection } from '~/composables/nuxt/query/useQueryCollection';
 
 const { data: data } = useQueryCollection('content', '/footer-content');
+const { openSettings } = useCookieConsent();
 
 const date = new Date();
 const year = date.getFullYear();

components/content/sh-form-contact-us.vue

@@ -1,24 +1,36 @@
 <!-- INTERNAL: single-page component, used only on the contact page. Not intended for general content authoring; no guideline. -->
 <template>
-  <div id="hubspot-form"></div>
+  <div>
+    <div id="hubspot-form"></div>
+    <p v-if="consentStatus !== 'accepted'" class="text-sm text-gray-500 dark:text-gray-400 py-4">
+      To use this form, please
+      <button class="text-primary underline" @click="openSettings">accept cookies</button>.
+    </p>
+  </div>
 </template>
 
 <script setup lang="ts">
+const { consentStatus, openSettings } = useCookieConsent()
+
+// HubSpot form name: Generic Contact Form (January 10, 2022 11:39:05 AM)
+const loadHubSpotForm = () => {
+  if (window.hbspt) {
+    window.hbspt.forms.create({
+      region: 'na1',
+      portalId: '21247113',
+      formId: 'c9bf8828-7520-4e8c-987b-70fe763e77eb',
+      target: '#hubspot-form',
+    });
+    return;
+  }
 
-onMounted(() => {
-  // Add HubSpot embed script
   const script = document.createElement('script');
   script.src = '//js.hsforms.net/forms/embed/v2.js';
   script.charset = 'utf-8';
   script.type = 'text/javascript';
-
-  // Append the script to the document head
   document.head.appendChild(script);
 
-  // Once the script is loaded, initialize the form
   script.onload = () => {
-    // Ensure hbspt exists after script is loaded
-    // HubSpot form name: Generic Contact Form (January 10, 2022 11:39:05 AM) 
     if (window.hbspt) {
       window.hbspt.forms.create({
         region: 'na1',
@@ -28,5 +40,17 @@ onMounted(() => {
       });
     }
   };
-});
+}
+
+onMounted(() => {
+  if (consentStatus.value === 'accepted') {
+    loadHubSpotForm();
+  }
+})
+
+watch(consentStatus, (status) => {
+  if (status === 'accepted') {
+    nextTick(() => loadHubSpotForm());
+  }
+})
 </script>

components/content/sh-form-newsletter.vue

@@ -1,29 +1,57 @@
 <!-- INTERNAL: single-page component, used only on the subscription page. Not intended for general content authoring; no guideline. -->
 <template>
-    <div id="contact-us-form">
-    </div>
-  </template>
-
-  <script setup lang="ts">
-  import { onMounted } from 'vue'
-
-  onMounted(() => {
-    const script = document.createElement('script')
-    script.src = "//js.hsforms.net/forms/embed/v2.js"
-    script.type = "text/javascript"
-    script.charset = "utf-8"
-
-    script.onload = () => {
-      // HubSpotform name: Join OMA Newsletter - 24-Sep-24
+  <div>
+    <div id="contact-us-form"></div>
+    <p v-if="consentStatus !== 'accepted'" class="text-sm text-gray-500 dark:text-gray-400 py-4">
+      To use this form, please
+      <button class="text-primary underline" @click="openSettings">accept cookies</button>.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { consentStatus, openSettings } = useCookieConsent()
+
+// HubSpot form name: Join OMA Newsletter - 24-Sep-24
+const loadHubSpotForm = () => {
+  if (window.hbspt) {
+    window.hbspt.forms.create({
+      region: "na1",
+      portalId: "21247113",
+      formId: "56969656-646b-423d-98af-133ab4c4e2dd",
+      target: "#contact-us-form"
+    });
+    return;
+  }
+
+  const script = document.createElement('script')
+  script.src = "//js.hsforms.net/forms/embed/v2.js"
+  script.type = "text/javascript"
+  script.charset = "utf-8"
+  document.body.appendChild(script)
+
+  script.onload = () => {
+    if (window.hbspt) {
       window.hbspt.forms.create({
         region: "na1",
         portalId: "21247113",
         formId: "56969656-646b-423d-98af-133ab4c4e2dd",
         target: "#contact-us-form"
       })
     }
-
-    document.body.appendChild(script)
-  })
-  </script>
+  }
+}
+
+onMounted(() => {
+  if (consentStatus.value === 'accepted') {
+    loadHubSpotForm()
+  }
+})
+
+watch(consentStatus, (status) => {
+  if (status === 'accepted') {
+    nextTick(() => loadHubSpotForm())
+  }
+})
+</script>
 

composables/useCookieConsent.ts

@@ -0,0 +1,40 @@
+export const useCookieConsent = () => {
+  const gtm = useGtm()
+  const consentStatus = useState<string | null>('cookie-consent-status', () => null)
+  const showBanner = useState<boolean>('cookie-consent-banner', () => false)
+
+  const enableGtm = () => {
+    gtm?.enable(true)
+  }
+
+  const init = () => {
+    if (import.meta.client) {
+      const stored = localStorage.getItem('cookie-consent')
+      consentStatus.value = stored
+      if (!stored) {
+        showBanner.value = true
+      } else if (stored === 'accepted') {
+        enableGtm()
+      }
+    }
+  }
+
+  const accept = () => {
+    consentStatus.value = 'accepted'
+    localStorage.setItem('cookie-consent', 'accepted')
+    showBanner.value = false
+    enableGtm()
+  }
+
+  const reject = () => {
+    consentStatus.value = 'rejected'
+    localStorage.setItem('cookie-consent', 'rejected')
+    showBanner.value = false
+  }
+
+  const openSettings = () => {
+    showBanner.value = true
+  }
+
+  return { consentStatus, showBanner, init, accept, reject, openSettings }
+}

content/60.media/6040.subscription/index.md

@@ -1,21 +1,34 @@
 ---
-title: OMA NEWS
-description: ""
+title: Subscription
+description:
 layout: web
+navigation: true
 ---
-::ShListCards
+
+# OMA NEWS
+## SUBSCRIBE TO OMA NEWS
+
+Stay connected and well-informed with the **Open Mobile Alliance (OMA)** by subscribing to our news. This essential resource delivers updates directly to your inbox, featuring the latest on new protocols, key developments in the mobile standards industry, upcoming OMA events, and noteworthy member activities. Whether you're deeply embedded in mobile technology or simply keeping pace with industry trends, the **OMA NEWS** ensures you receive all the relevant information to help your organization stay ahead.
+
+<!--- **Stay updated and read our latest**: <a href="https://myemail.constantcontact.com/Issue-1--Rise-Above-the-Protocol-Newsletter-by-OMA-SpecWorks.html?soid=1141945378926&aid=L3iKGcC53O8" target="_blank">Rise Above the Protocol News</a> -->
+- **How to Subscribe:** Fill out the form below to start receiving updates from OMA.
+- **Questions?** [Contact us](/about/contact) for more information or assistance.
+
+### JOIN OMA NEWS
+
+::ShAlert
+**Stay Informed!**—Subscribe to the **OMA News** for the latest updates on **standards, events, and industry insights**. Don’t miss out—**join our mailing list today**!
+::
+
+::ShFormNewsletter
+::
+
+</br>
+
+
+::ShAlert
 ---
-ui:
-    gap: gap-6
-description: This constructor is standalone
-title: |
-    Open Mobile Alliance OMA NEWS
-subtitle: |
-    Use the tags to filter the news
-text: |
-    Subscribe to receive the **latest news, events,** and **insights** from Open Mobile Alliance delivered **straight to your inbox**.  
-
-cols: 3
-cardID: []
+typeAlert: warning
 ---
-::
+By subscribing to our news, you agree to receive communication from us and confirm that you have read and understood our [Policy & Terms](/about/legal#privacy-policy). You can withdraw your consent or manage your preferences at any time by clicking the unsubscribe link in our news. We respect your privacy and will not share your information with third parties without your explicit consent. For more information on how we protect and use your data, please contact at [helpdesk@omaorg.org](mailto:helpdesk@omaorg.org).
+::

content/80.about/8070.legal/807010.index.md

@@ -50,13 +50,18 @@ OMA implements appropriate technical and organizational measures to ensure the s
 ## COOKIE POLICY
 
 ### INTRODUCTION
-OMA is committed to ensuring transparency in how we use cookies on our website. However, we currently do not collect or store cookies from users visiting our website, and we do not plan to implement cookie tracking.
+We use cookies to enhance your browsing experience, analyze website traffic, and support our marketing efforts.
+
+Cookies are small text files stored on your device when you visit our website. They help us understand how users interact with our site and enable certain functionalities.
 
 ### TYPE OF COOKIES
-Since OMA does not use cookies, there are no types of cookies collected or stored on this website.
+We use the following types of cookies:
+
+- **Analytics Cookies**: These cookies help us understand how visitors interact with our website by collecting and reporting information anonymously (e.g., via Google Analytics).
+- **Marketing Cookies**: These cookies are used to track visitors across websites and may be used to deliver relevant marketing content (e.g., via HubSpot).
 
 ### MANAGING COOKIE PREFERENCES
-Users do not need to manage cookie preferences as OMA does not collect or use cookies.
+By continuing to use our website, you consent to the use of cookies as described in this policy. You can manage or disable cookies through your browser settings at any time.
 
 ---