Update home page message (#1447)

anuveyatsu · claude · web-flow · commit c2f65d8ad1f6 · 2025-09-24T17:07:25.000+05:00
* Update tagline and subtitle so that it is not just about open data. * Update subtitle to be more human-centered. * Update features section with actual framework features rather than cloud (managed) option features. * Add CTA and update message to be more generic. * Fix analytics tracking to ensure events are sent before navigation Update ButtonLink component to use gtag event_callback and fallback timeout to prevent analytics event loss during navigation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Respect modified/new-tab/download clicks in ButtonLink component Only intercept normal left clicks for analytics tracking, allowing Cmd/Ctrl+click, middle-click, target="_blank", and download behavior to work normally. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/site/components/ButtonLink.tsx b/site/components/ButtonLink.tsx
@@ -43,6 +43,48 @@ export default function ButtonLink({
 
     // Track conversion if enabled
     if (trackConversion && siteConfig.analytics && typeof window.gtag === 'function') {
+      // Don't intercept if event is already prevented, or if it's a modified/new-tab/download click
+      if (event.defaultPrevented || 
+          event.button !== 0 || // not left click
+          event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || // modifier keys
+          event.currentTarget.target === '_blank' || // new tab
+          event.currentTarget.hasAttribute('download')) { // download
+        // Just track the event without preventing navigation
+        try {
+          const eventData: any = {
+            action: 'get_started_click',
+            category: 'Conversion',
+            label: 'CTA Button',
+            value: 1,
+          };
+
+          // Only add acquisition_source if it exists (cold email visitors)
+          const acquisitionSource = typeof window !== 'undefined' 
+            ? sessionStorage.getItem('acquisition_source')
+            : null;
+          
+          if (acquisitionSource) {
+            eventData.acquisition_source = acquisitionSource;
+          }
+
+          // Add campaign person if it exists (LinkedIn connect campaigns)
+          const campaignPerson = typeof window !== 'undefined' 
+            ? sessionStorage.getItem('campaign_person')
+            : null;
+          
+          if (campaignPerson) {
+            eventData.campaign_person = campaignPerson;
+          }
+
+          gtag.event(eventData);
+        } catch (error) {
+          console.warn('Failed to track conversion event:', error);
+        }
+        return; // Let the browser handle navigation normally
+      }
+
+      event.preventDefault(); // Only prevent for normal left clicks
+      
       try {
         const eventData: any = {
           action: 'get_started_click',
@@ -69,9 +111,27 @@ export default function ButtonLink({
           eventData.campaign_person = campaignPerson;
         }
 
-        gtag.event(eventData);
+        // Use event_callback to ensure navigation happens after tracking
+        window.gtag('event', eventData.action, {
+          event_category: eventData.category,
+          event_label: eventData.label,
+          value: eventData.value,
+          acquisition_source: eventData.acquisition_source,
+          campaign_person: eventData.campaign_person,
+          event_callback: () => {
+            window.location.href = href || 'https://cloud.portaljs.com/';
+          }
+        });
+
+        // Fallback timeout in case gtag callback doesn't fire
+        setTimeout(() => {
+          window.location.href = href || 'https://cloud.portaljs.com/';
+        }, 200);
+
       } catch (error) {
         console.warn('Failed to track conversion event:', error);
+        // Navigate anyway if tracking fails
+        window.location.href = href || 'https://cloud.portaljs.com/';
       }
     }
   };
diff --git a/site/components/home/Hero.tsx b/site/components/home/Hero.tsx
@@ -74,14 +74,10 @@ export default function Hero() {
           <div className="py-10 dark:py-4">
             {' '}
             <H1 className="-ml-1 text-3xl sm:text-6xl xl:text-7xl bg-gradient-to-r from-blue-500 via-blue-400 to-blue-500 bg-clip-text text-transparent pb-3 font-semibold">
-              Managed <br />
-              Data Portal <br />
-              In the Cloud
+              The Data Portals Framework
             </H1>
             <H2 sub={true} className="mt-5 text-base  sm:text-lg xl:text-xl">
-              PortalJS Cloud is the simplest way to get started with open data.
-              Designed for governments, nonprofits, and academic institutions,
-              it lets you launch a modern, compliant portal in minutes.
+              Create data portals people love to use - for internal data management and sharing, research data repositories, and open data portals.
             </H2>
             <div className="mt-5 mt-10 flex justify-center dark:xl:justify-start">
               <div className="mt-3 mt-0 flex gap-4">
diff --git a/site/components/home/KeyFeatures.tsx b/site/components/home/KeyFeatures.tsx
@@ -6,40 +6,54 @@ export const KeyFeatures = () => {
   const { theme } = useTheme()
   const features = [
     {
-      title: 'Launch in Minutes',
+      title: 'Unified sites',
       description:
-        'Get your data portal up and running in minutes, not months. No technical expertise required.',
-      icon: `/static/icons/${theme}/clock.json`,
+        'Present data and content in one seamless site, pulling datasets from a DMS (eg, CKAN or OpenMetadata) and content from a CMS (eg, WordPress or other).',
+      icon: `/static/icons/${theme}/network.json`,
       style: 'dark:-rotate-[4deg]',
     },
     {
-      title: 'Secure & Compliant',
+      title: 'Developer friendly',
       description:
-        'Built with security and compliance in mind. GDPR compliant and follows best practices.',
-      icon: `/static/icons/${theme}/verified.json`,
+        'Built with familiar frontend tech (Next.js and Tailwind CSS) with great local dev tooling.',
+      icon: `/static/icons/${theme}/html.json`,
       style: 'dark:-rotate-[3deg]',
     },
     {
-      title: 'Data Management',
+      title: 'Batteries included',
       description:
-        'Easily upload, manage, and organize your data with our intuitive interface.',
-      icon: `/static/icons/${theme}/data-catalog.json`,
+        'Ready-made portal components out of the box: catalog search, dataset pages, previews (tables, charts, maps), blogs, and more.',
+      icon: `/static/icons/${theme}/layers.json`,
       style: 'dark:-rotate-[2deg]',
     },
     {
-      title: 'Powerful Search',
+      title: 'Easy to theme & customize',
       description:
-        'Help users find what they need with powerful search capabilities across all your datasets.',
-      icon: `/static/icons/${theme}/search.json`,
+        'Installable themes, standard CSS/React tooling, quick route creation, and support for custom branding.',
+      icon: `/static/icons/${theme}/paint-roller.json`,
       style: 'dark:-rotate-[4deg]',
     },
+    {
+      title: 'Extensible',
+      description:
+        'Extend with your own components, or import from the wider ecosystem.',
+      icon: `/static/icons/${theme}/expand.json`,
+      style: 'dark:-rotate-[3deg]',
+    },
+    {
+      title: 'Enterprise ready',
+      description:
+        'Optional modules for authentication/SSO, role-based access control, data quality, and API management.',
+      icon: `/static/icons/${theme}/padlock.json`,
+      style: 'dark:-rotate-[2deg]',
+    },
   ]
 
   return (
     <div className="py-24">
       <div className="">
-        <H2 className="text-center">Key Features</H2>
-        <div className="mt-16 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-12 lg:grid-cols-4 lg:gap-x-6">
+        <H2 className="text-center">Features</H2>
+        <div className="mt-16 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-12 lg:grid-cols-3 lg:gap-x-6">
           {features.map((feature) => (
             <div
               key={feature.title}
diff --git a/site/components/home/LaunchPortal.tsx b/site/components/home/LaunchPortal.tsx
@@ -1,5 +1,6 @@
 import { CheckIcon } from '@heroicons/react/24/solid'
 import { H2, H3 } from '../custom/header'
+import ButtonLink from '../ButtonLink'
 
 export default function LaunchPortal() {
   return (
@@ -8,14 +9,24 @@ export default function LaunchPortal() {
         <div className="flex flex-col lg:flex-row gap-32 lg:justify-between">
           <div className="!z-40">
             <H2 className=" mb-2 leading-[3rem]">
-              Imagine Launching Your Data Portal in Minutes
+              Launch your data portal in minutes
             </H2>
             <H3 className=" mb-4 max-w-2xl">
               Meet <b>PortalJS Cloud</b> — <b>the only solution on the market</b>{' '} 
-              that combines full public-sector compliance, CKAN compatibility,
+              that combines full public-sector compliance, metadata backend compatibility,
               AI-powered features, and instant deployment — all in a fully
               managed package.
             </H3>
+            <div className="mt-6">
+              <ButtonLink
+                href="https://cloud.portaljs.com/auth/signup"
+                title="Deploy your data portal with PortalJS Cloud"
+                className="text-sm"
+                trackConversion={true}
+              >
+                Deploy your data portal
+              </ButtonLink>
+            </div>
             {/* <ul className="list-none list-inside mb-4  flex flex-col gap-1">
               <li className="">
                 <div className="flex items-center gap-2">
