Add LinkButton component and update training resources

Introduces a new LinkButton component for external links. Updates Socio4Health training PDF and related links in the trainings page, and removes the Additional Resources section from Socio4HealthNonCoder. Also adds the funciones-social4health.pdf training document.

Author: dirreno

app/installation/components/Socio4HealthNonCoder.tsx

@@ -62,20 +62,6 @@ source venv/bin/activate`}</code></pre>
         </div>
       </details>
 
-      <details className="group mt-4 mb-4 border rounded">
-        <summary className="flex items-center justify-between cursor-pointer px-4 py-3 bg-gray-50 hover:bg-gray-100">
-          <h2 className="text-lg font-semibold">Additional Resources</h2>
-          <span className="text-gray-600">▸</span>
-        </summary>
-        <div className="p-4">
-          <ul className="list-disc pl-5 space-y-1 text-gray-800">
-            <li>Official documentation: check the socio library&apos;s official docs for API reference</li>
-            <li>GitHub repository: browse the project&apos;s code and issues</li>
-            <li>Community support: join relevant forums or Discord channels for help</li>
-          </ul>
-        </div>
-      </details>
-
       <p className="text-gray-700">You&apos;re now ready to try Socio4Health — contact the project maintainers if you need help deploying.</p>
     </article>
   );

app/trainings/page.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { useState } from 'react';
 import CircularButton from '../ui/components/circular-button';
 import DownloadButton from '../ui/components/download-button';
+import LinkButton from '../ui/components/link-button';
 
 const D4H_LOGO = '/cards/toolkits/data4health.svg';
 const C4H_LOGO = '/cards/toolkits/clim4health.svg';
@@ -30,8 +31,7 @@ function SubButtons({ section }: { section: Section }) {
     data4health: {
       pdf: '/training/data4health-training.pdf',
       related: [
-        //{ label: 'Quickstart (download)', href: '/cards/toolkits/data4health-quickstart.zip', isFile: true },
-        //{ label: 'Online docs', href: 'https://example.org/data4health' },
+        { label: 'Data drive', href: 'https://bit.ly/3WZp0dG', useButton: true, isFile: false },
       ],
     },
     clim4health: {
@@ -48,10 +48,9 @@ function SubButtons({ section }: { section: Section }) {
       ],
     },
     socio4health: {
-      pdf: '/cards/toolkits/socio4health-installation.pdf',
+      pdf: '/training/funciones-social4health.pdf',
       related: [
-        { label: 'Socio4Health notes (download)', href: '/cards/toolkits/socio4health-notes.pdf', isFile: true },
-        { label: 'Website', href: 'https://example.org/socio4health' },
+        { label: 'Data drive', href: 'https://bit.ly/3WZp0dG', useButton: true, isFile: false },
       ],
     },
     cube4health: {
@@ -89,8 +88,12 @@ function SubButtons({ section }: { section: Section }) {
           <div className="mt-3 space-y-3">
             {entry.related.map((r, i) => (
               <div key={i} className="my-0">
-                {r.useButton && r.isFile ? (
-                  <DownloadButton href={r.href} label={r.label} />
+                {r.useButton ? (
+                  r.isFile ? (
+                    <DownloadButton href={r.href} label={r.label} />
+                  ) : (
+                    <LinkButton href={r.href} label={r.label} />
+                  )
                 ) : (
                   <a
                     href={r.href}
@@ -119,7 +122,7 @@ export default function Page() {
     data4health: false,
     clim4health: false,
     land4health: false,
-    socio4health: true,
+    socio4health: false,
     cube4health: true,
   };
 

app/ui/components/link-button.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface LinkButtonProps {
+  href: string;
+  label?: string;
+  className?: string;
+}
+
+export default function LinkButton({ href, label = 'Open', className = '' }: LinkButtonProps) {
+  return (
+    <a
+      href={href}
+      className={`inline-flex items-center gap-2 rounded-md bg-white border border-purple-600 hover:bg-purple-50 focus:ring-2 focus:ring-purple-300 text-purple-700 px-4 py-2 text-sm font-medium shadow-sm transition-colors ${className}`}
+      aria-label={label}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M14 3h7v7m0 0L10 14m4-11L5 19" />
+      </svg>
+      <span>{label}</span>
+    </a>
+  );
+}