Merge pull request #1419 from datopian/feat/improve-ui-of-a-casestudy-component

Datopian-Shreyas · web-flow · commit 86a8f6e85970 · 2025-07-08T13:42:31.000+05:30
Case studies features section ui and logic re-wamp
diff --git a/site/content/case-studies/a-global-transport-hub-building-a-shared-open-data-infrastructure-for-30-plus-transport-organizations.md b/site/content/case-studies/a-global-transport-hub-building-a-shared-open-data-infrastructure-for-30-plus-transport-organizations.md
@@ -32,26 +32,43 @@ solution:
   'Datopian delivered a unified open data platform using CKAN for the backend and PortalJS for the frontend. We replaced the default UI with a custom, fully decoupled interface tailored to non-technical users. The platform includes automated data ingestion pipelines, SDMX-compliant metadata, rich search and filter tools, onboarding flows, and role-based publishing workflows—making data management and access faster, simpler, and more reliable.'
 results:
   'TDC now operates a centralized, public data portal where 30+ organizations can contribute, manage, and explore datasets efficiently. The platform enables faster decision-making, reduces duplication, and supports international collaboration. Contributors follow structured publishing flows; users benefit from intuitive discovery tools. By standardizing data and simplifying workflows, the portal turns fragmented inputs into a shared, trusted resource.'
-features:
-  [
-    ' - **Built for multi-organization publishing** – PortalJS is ideal for coalitions like TDC — enabling role-based access, contributor dashboards, and streamlined publishing across 30+ organizations.',
-    'hexagonal',
-    ' - **Supports structured metadata like SDMX** – TDC needed metadata aligned with SDMX standards. PortalJS made it easy to surface, search, and display structured datasets clearly.',
-    'presentation-1',
-    ' - **Turned disconnected data into a unified platform** – From scattered PDFs to a live, searchable portal — PortalJS helped TDC centralize transport and sustainability data in one public space.',
-    'rocket',
-    ' - **Frontend flexibility without backend changes** – All workflows — including dataset approval, visibility toggling, and publishing flows — were built on the frontend with no backend rewrites.',
-    'repair-tools',
-    ' - **Visual exploration through filters and maps** - Users can search by region, sector, or keyword — or use an interactive map to explore country-specific datasets.',
-    'magnify',
-    ' - **Custom contributor onboarding flow** - We built a guided onboarding experience tailored to TDC: helping users follow topics, join organizations, and start contributing with confidence.',
-    'presentation-4',
+features: [
+    {
+      title: "Built for multi-organization publishing",
+      text: "PortalJS is ideal for coalitions like TDC — enabling role-based access, contributor dashboards, and streamlined publishing across 30+ organizations.",
+      icon: "hexagonal"
+    },
+    {
+      title: "Supports structured metadata like SDMX",
+      text: "TDC needed metadata aligned with SDMX standards. PortalJS made it easy to surface, search, and display structured datasets clearly.",
+      icon: "presentation-1"
+    },
+    {
+      title: "Turned disconnected data into a unified platform",
+      text: "From scattered PDFs to a live, searchable portal — PortalJS helped TDC centralize transport and sustainability data in one public space.",
+      icon: "rocket"
+    },
+    {
+      title: "Frontend flexibility without backend changes",
+      text: "All workflows — including dataset approval, visibility toggling, and publishing flows — were built on the frontend with no backend rewrites.",
+      icon: "repair-tools"
+    },
+    {
+      title: "Visual exploration through filters and maps",
+      text: "Users can search by region, sector, or keyword — or use an interactive map to explore country-specific datasets.",
+      icon: "magnify"
+    },
+    {
+      title: "Custom contributor onboarding flow",
+      text: "We built a guided onboarding experience tailored to TDC: helping users follow topics, join organizations, and start contributing with confidence.",
+      icon: "presentation-4"
+    }
   ]
 quote:
   [
     'This isn’t just a frontend — it’s a public infrastructure for collaboration on transport data.',
     '/static/img/showcases/2025-06-06-TDC/logo.png',
-    'Transport Data Commons',
+    'Transport Data Commons'
   ]
 portal:
   [
diff --git a/site/content/case-studies/eiti-fully-customizable-data-portal-in-minutes.md b/site/content/case-studies/eiti-fully-customizable-data-portal-in-minutes.md
@@ -32,16 +32,31 @@ solution:
 results: 'The new EITI open data portal became a **central hub** for stakeholders to access detailed reports, visualize extractive industry data, and explore global datasets effortlessly. The scalable infrastructure and rapid deployment empowered EITI to focus on their mission of transparency without being burdened by IT complexities.'
 features:
   [
-    ' - **Rapid Deployment with Zero Maintenance** – EITI launched their fully functional open data portal in less than a day using PortalJS Cloud. The platform eliminates the need for manual IT setup and ongoing maintenance, freeing up resources to focus on critical tasks.',
-    'rocket',
-    ' - **Comprehensive Data Repository** – The portal hosts a wide array of open datasets, including country-level reports, production figures, and revenue distributions. This makes it a one-stop shop for anyone seeking reliable extractive industry data.',
-    'database',
-    ' - **Full Customization & Developer-Friendly Access** – EITI leveraged the platform’s **public GitHub repository**, tailoring the portal to align with their branding and mission. They redesigned the UI/UX, integrated advanced data visualizations, and implemented features like **custom search filters** for better data discovery.',
-    'browser',
-    ' - **Scalable, Secure Infrastructure** – The portal’s infrastructure supports large data volumes and high user traffic without compromising on performance or data security, ensuring reliable access at all times.',
-    'api',
-    ' - **Continuous Improvement** - With access to the portal’s underlying source code, EITI continuously evolves their platform by responding to user feedback, adding new features, and refining the user experience.',
-    'verified',
+    {
+      title: "Rapid Deployment with Zero Maintenance",
+      text: "EITI launched their fully functional open data portal in less than a day using PortalJS Cloud. The platform eliminates the need for manual IT setup and ongoing maintenance, freeing up resources to focus on critical tasks.",
+      icon: "rocket"
+    },
+    {
+      title: "Comprehensive Data Repository",
+      text: "The portal hosts a wide array of open datasets, including country-level reports, production figures, and revenue distributions. This makes it a one-stop shop for anyone seeking reliable extractive industry data.",
+      icon: "database"
+    },
+    {
+      title: "Full Customization & Developer-Friendly Access",
+      text: "EITI leveraged the platform’s **public GitHub repository**, tailoring the portal to align with their branding and mission. They redesigned the UI/UX, integrated advanced data visualizations, and implemented features like **custom search filters** for better data discovery.",
+      icon: "browser"
+    },
+    {
+      title: "Scalable, Secure Infrastructure",
+      text: "The portal’s infrastructure supports large data volumes and high user traffic without compromising on performance or data security, ensuring reliable access at all times.",
+      icon: "api"
+    },
+    {
+      title: "Continuous Improvement",
+      text: "With access to the portal’s underlying source code, EITI continuously evolves their platform by responding to user feedback, adding new features, and refining the user experience.",
+      icon: "verified"
+    }
   ]
 quote:
   [
diff --git a/site/content/case-studies/london-borough-of-hounslow.md b/site/content/case-studies/london-borough-of-hounslow.md
@@ -28,7 +28,27 @@ solution: '### PortalJS Cloud: A Fully Managed, Cost-Effective Solution
 results: '### Results:
 
 Migrating to PortalJS Cloud allowed the Borough to eliminate infrastructure maintenance, cut costs, and allocate resources more effectively. The open data portal remains accessible, reliable, and cost-efficient without requiring ongoing technical oversight.'
-features: [' - **No Infrastructure Maintenance** – PortalJS Cloud manages updates, security, and hosting.', 'server', ' - **Cost Optimization** – Pay-as-you-go model reduces cloud and staffing expenses.', 'ewallet', ' - **Seamless Scaling** – Adapts automatically to increasing data demands.', 'expand',' - **Improved UI/UX** – Faster load times, modern design, and better navigation.' , 'browser'
+features: [
+  {
+    title: "No Infrastructure Maintenance",
+    text: "PortalJS Cloud manages updates, security, and hosting.",
+    icon: "server"
+  },
+  {
+    title: "Cost Optimization",
+    text: "Pay-as-you-go model reduces cloud and staffing expenses.",
+    icon: "ewallet"
+  },
+  {
+    title: "Seamless Scaling",
+    text: "Adapts automatically to increasing data demands.",
+    icon: "expand"
+  },
+  {
+    title: "Improved UI/UX",
+    text: "Faster load times, modern design, and better navigation.",
+    icon: "browser"
+  }
 ]
 quote: ['With PortalJS Cloud, we no longer worry about infrastructure. We’ve cut costs and improved our platform’s usability for citizens and researchers alike.', '/images/casestudies/hounslow-logo.webp', 'London Borough of Hounslow' ]
 portal:
diff --git a/site/content/case-studies/open-energy-data-how-ssen-tackled-massive-challenge-portaljs-ckan.md b/site/content/case-studies/open-energy-data-how-ssen-tackled-massive-challenge-portaljs-ckan.md
@@ -30,7 +30,28 @@ results: '### Making energy data work smarter, not harder
 - User satisfaction skyrocketed with faster queries and better access to critical insights.
 
 - The portal supports sustainability initiatives, paving the way for net-zero goals.'
-features: [' - **Lightning-Fast Frontend** – PortalJS delivers a sleek, intuitive interface that’s built for usability.','favorite',' - **Reliable Data Backbone** – [CKAN](https://www.datopian.com/solutions/ckan) ensures large datasets are stored, organized, and shared efficiently.','database',' - **Powerful Add-Ons** – Extensions like ckanext-dcat and ckanext-scheming boost interoperability and customization.','layers',' - **Scalable Infrastructure** – BigQuery and Prefect make processing and analyzing huge datasets (over 1TB of data) effortless.','cloud-network']
+features: [
+  {
+    title: "Lightning-Fast Frontend",
+    text: "PortalJS delivers a sleek, intuitive interface that’s built for usability.",
+    icon: "favorite"
+  },
+  {
+    title: "Reliable Data Backbone",
+    text: "[CKAN](https://www.datopian.com/solutions/ckan) ensures large datasets are stored, organized, and shared efficiently.",
+    icon: "database"
+  },
+  {
+    title: "Powerful Add-Ons",
+    text: "Extensions like ckanext-dcat and ckanext-scheming boost interoperability and customization.",
+    icon: "layers"
+  },
+  {
+    title: "Scalable Infrastructure",
+    text: "BigQuery and Prefect make processing and analyzing huge datasets (over 1TB of data) effortless.",
+    icon: "cloud-network"
+  }
+]
 quote: ['I would like to take this opportunity to extend my heartfelt gratitude for the outstanding support and collaboration your team has offered over the past year. The agility, technical prowess, and steadfast dedication you have demonstrated are truly commendable. Your efforts have been integral to our successes, and I am deeply appreciative. I am hopeful that there will be opportunities for me to engage with future projects and contribute. Thank you once again for your exemplary contribution and for the positive spirit you bring to our work.', '/images/casestudies/ssen-logo.png', 'Shailesh Kumar, Analytics and Data Architect - SSEN' ]
 portal:
   [
diff --git a/site/content/case-studies/simplifying-healthcare-metadata.md b/site/content/case-studies/simplifying-healthcare-metadata.md
@@ -48,21 +48,38 @@ results:
   - **Human-Centric UX**- Q&A threads and glossary terms reduce confusion and support tickets.
 
   - **Operational Boost**- Faster dataset provisioning, better data reuse, and less friction in onboarding new researchers.'
-features:
-  [
-    ' - **Api-first, backend-agnostic** – Build modern data portals on any backend — from CKAN to OpenMetadata — using a clean, decoupled, API-first architecture.',
-    'standards',
-    ' - **Modern web stack** – Built with Next.js, TailwindCSS, and React — PortalJS offers a lightweight, maintainable, developer-friendly foundation.',
-    'api',
-    ' - **Dockerized for speed** – Deploy fast with containerized builds that fit neatly into your DevOps pipelines — on cloud or on-prem.',
-    'rocket',
-    ' - **Designed for non-technical users** – Make data usable for everyone — researchers, citizens, analysts — with intuitive, clean UI tailored to real-world needs.',
-    'presentation-3',
-    ' - **Secure by design** - Integrates easily with identity providers like Microsoft Entra ID to ensure secure, role-based access control.',
-    'key',
-    ' - **Pluggable and extensible** - Adapt and grow your portal with reusable components, custom layouts, and rich integration options — all without vendor lock-in.',
-    'puzzle',
-  ]
+features: [
+  {
+    title: "Api-first, backend-agnostic",
+    text: "Build modern data portals on any backend — from CKAN to OpenMetadata — using a clean, decoupled, API-first architecture.",
+    icon: "standards"
+  },
+  {
+    title: "Modern web stack",
+    text: "Built with Next.js, TailwindCSS, and React — PortalJS offers a lightweight, maintainable, developer-friendly foundation.",
+    icon: "api"
+  },
+  {
+    title: "Dockerized for speed",
+    text: "Deploy fast with containerized builds that fit neatly into your DevOps pipelines — on cloud or on-prem.",
+    icon: "rocket"
+  },
+  {
+    title: "Designed for non-technical users",
+    text: "Make data usable for everyone — researchers, citizens, analysts — with intuitive, clean UI tailored to real-world needs.",
+    icon: "presentation-3"
+  },
+  {
+    title: "Secure by design",
+    text: "Integrates easily with identity providers like Microsoft Entra ID to ensure secure, role-based access control.",
+    icon: "key"
+  },
+  {
+    title: "Pluggable and extensible",
+    text: "Adapt and grow your portal with reusable components, custom layouts, and rich integration options — all without vendor lock-in.",
+    icon: "puzzle"
+  }
+]
 quote:
   [
     'We needed a simple way to bridge usability gaps without rebuilding infrastructure. PortalJS delivered exactly that.',
diff --git a/site/content/case-studies/uae-moei-scalable-platform-government-data-publishing.md b/site/content/case-studies/uae-moei-scalable-platform-government-data-publishing.md
@@ -15,7 +15,27 @@ solution: 'Datopian delivered a full-stack solution using **PortalJS** for the f
 
  MOEI’s non-technical staff manage content and datasets directly, without needing developers. The platform is fully hosted and maintained by Datopian, requiring zero operational effort from the Ministry. It’s a scalable, secure, and API-first solution that delivers on both transparency and usability.'
 results: 'The MOEI Open Data Portal now serves as a **trusted digital resource**, offering public access to clean, categorized, and searchable datasets. The platform simplifies data discovery, empowers developers through APIs, and enables non-technical staff to manage content effortlessly—while maintaining full security and performance at scale.'
-features: [' - **Zero maintenance burden for the MOEI team**', 'database', ' - **Managed hosting with ongoing updates and security patches**', 'menu', ' - **Scalable infrastructure, compatible with Azure**', 'expand',' - **Rapid delivery and branding alignment out of the box**' , 'verified'
+features: [
+  {
+    title: "Zero maintenance burden for the MOEI team",
+    text: "",
+    icon: "database"
+  },
+  {
+    title: "Managed hosting with ongoing updates and security patches",
+    text: "",
+    icon: "menu"
+  },
+  {
+    title: "Scalable infrastructure, compatible with Azure",
+    text: "",
+    icon: "expand"
+  },
+  {
+    title: "Rapid delivery and branding alignment out of the box",
+    text: "",
+    icon: "verified"
+  }
 ]
 quote: ['The platform gives us exactly what we needed—bilingual access, strong data infrastructure, and zero maintenance on our end. It’s been a reliable tool for sharing our datasets with the public.', '/static/img/social-proof/uae-logo.webp', 'MOEI' ]
 highlight: '- **CKAN** provides a battle-tested backend for structured data, metadata management, and API endpoints.
diff --git a/site/layouts/casestudy.tsx b/site/layouts/casestudy.tsx
@@ -102,16 +102,14 @@ export default function CaseStudyLayout({ children, ...frontMatter }) {
 
   const IconWrapper: React.FC<any> = ({ features }) => {
     return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-12 mt-9">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-12 mt-14 mb-20">
         {features.map((item, index) => {
-          if (index % 2 === 0) {
-            const text = item
-            const icon = features[index + 1]
+          if (item) {
             const IconComponent = ({ className }) => (
               <Player
                 autoplay
                 loop
-                src={`/static/icons/${theme}/${icon}.json`}
+                src={`/static/icons/${theme}/${item.icon}.json`}
                 style={{ height: '60px', width: '60px' }}
                 className={className}
               />
@@ -123,9 +121,13 @@ export default function CaseStudyLayout({ children, ...frontMatter }) {
                   <IconComponent className="mr-2 text-blue-400 min-w-4 min-h-4 dark:-rotate-[4deg] " />
                 </div>
 
-                <div className="">
-                  {' '}
-                  <ReactMarkdown>{text}</ReactMarkdown>
+                <div>
+                  <h5 className="text-lg font-bold">
+                    <ReactMarkdown>{item.title}</ReactMarkdown>
+                  </h5>
+                  <p className="text-gray-300 font-medium mt-[2px]">
+                    <ReactMarkdown>{item.text}</ReactMarkdown>
+                  </p>
                 </div>
               </div>
             ) : (
@@ -217,6 +219,7 @@ export default function CaseStudyLayout({ children, ...frontMatter }) {
                       href={portal[2]}
                       title="Get started with PortalJS Cloud"
                       className="text-sm"
+                      target="_blank"
                     >
                       See the portal
                     </ButtonLink>
@@ -293,21 +296,21 @@ export default function CaseStudyLayout({ children, ...frontMatter }) {
 
         <Journey />
 
-        <div className="text-2xl font-bold mt-16 ">Why PortalJS Cloud?</div>
+        <div className="text-2xl font-bold mt-20 max-w-5xl mx-auto">Why PortalJS Cloud?</div>
 
-        <div className="flex ">
+        <div className="flex max-w-5xl justify-self-center ">
           <IconWrapper features={features} />
         </div>
 
         {highlight && (
-          <>
+          <div className='max-w-5xl mx-auto'>
             <div className="text-2xl font-bold mt-8 ">
               Why PortalJS Cloud + CKAN is the perfect pair?
             </div>
             <ReactMarkdown className="prose prose-headings:font-headings dark:prose-invert prose-a:break-word mt-8">
               {highlight}
             </ReactMarkdown>
-          </>
+          </div>
         )}
         <div className="w-full flex flex-col items-center mt-32">
           <div className="max-w-4xl relative">
@@ -361,6 +364,7 @@ export default function CaseStudyLayout({ children, ...frontMatter }) {
                 title="Explore"
                 className="mt-6 text-sm"
                 style="secondary"
+                target="_blank"
               >
                 Explore
               </ButtonLink>}
