Consent and Privacy page updates, begin work on Services page

Author: webstackdev

src/components/Layout/SubHeader/index.astro

@@ -19,14 +19,6 @@ const { title, description, icon, subtitle } = Astro.props
     />
   </div>
   <h1 class="text-4xl md:text-5xl font-bold leading-tight text-page-inverse mb-4">{title}</h1>
-  {description && (
-    <p class="text-lg text-content-offset leading-relaxed mb-4">
-      {description}
-    </p>
-  )}
-  {subtitle && (
-    <p class="text-sm text-page-inverse italic">
-      {subtitle}
-    </p>
-  )}
+  {description && (<p class="text-lg text-content-offset leading-relaxed mb-4" set:html={description}></p>)}
+  {subtitle && (<p class="text-sm text-page-inverse italic" set:html={subtitle}></p>)}
 </header>

src/components/List/layouts/ColoredMarkerList.astro

@@ -19,7 +19,7 @@ const { items, classes, size = 2 }: Props = Astro.props
 
 const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul]
 const liClass = ["flex items-start", classes?.li]
-const emClass = ["mr-2 not-italic font-bold", classes?.em]
+const emClass = ["mr-0 sm:mr-2 not-italic font-bold", classes?.em]
 const markerSizeInRem = `${size * 0.25}rem`
 const markerStyle = `width: ${markerSizeInRem}; height: ${markerSizeInRem};`
 const iconClass = ["rounded-full mt-2 mr-3 shrink-0", classes?.icon]
@@ -31,8 +31,10 @@ const textClass = classes?.text ? [classes.text] : []
     items.map((item) => (
       <li class:list={liClass}>
         <span class:list={[iconClass, item.color]} style={markerStyle} />
-        {item.lead && <em class:list={emClass}>{item.lead}</em>}
-        <span class:list={textClass}>{item.text}</span>
+        <div class="flex flex-col sm:flex-row sm:items-start">
+          {item.lead && <em class:list={emClass}>{item.lead}</em>}
+          <span class:list={textClass}>{item.text}</span>
+        </div>
       </li>
     ))
   }

src/components/Pages/Consent/index.astro

@@ -91,7 +91,7 @@ const { content } = Astro.props
       <p id="consent-preferences__settings-desc" class="sr-only">
         Adjust your consent settings using the options below.
       </p>
-      <div class="px-6 pt-8 pb-2">
+      <div class="px-6 pb-2">
         <div class="mb-6">
           <h1
             id="consent-preferences__title"

src/components/Pages/Contact/index.astro

@@ -93,8 +93,12 @@ export type Props = {
       errorEmail: string
     }
   }
+  prefilledProjectType?: string
 }
-const { content } = Astro.props
+const { content, prefilledProjectType = '' } = Astro.props
+const hasPrefilledProjectType = content.form.project.typeOptions.some(
+  option => option.value !== '' && option.value === prefilledProjectType
+)
 ---
 
 <contact-form>
@@ -252,7 +256,12 @@ const { content } = Astro.props
                         class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
                       >
                         {content.form.project.typeOptions.map((item) => (
-                          <option value={item.value}>{item.text}</option>
+                          <option
+                            value={item.value}
+                            selected={hasPrefilledProjectType && item.value === prefilledProjectType}
+                          >
+                            {item.text}
+                          </option>
                         ))}
                       </select>
                     </div>

src/components/Pages/MyData/index.astro

@@ -41,7 +41,7 @@ const { content } = Astro.props
 ---
 
 <privacy-form class="block">
-  <div class="container mx-auto px-4 py-16 max-w-5xl space-y-10">
+  <div class="container mx-auto px-4 pb-16 max-w-5xl space-y-10">
     <div
       id="status-message"
       tabindex="-1"

src/components/Pages/Privacy/index.astro

@@ -158,20 +158,20 @@ for (const [index, item] of content.nav.items.entries()) {
 }
 ---
 
-<div class="mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4">
+<div class="mx-auto max-w-full px-4 py-2 sm:px-6 md:py-4 lg:px-8">
   <nav aria-label="Privacy policy sections" class="bg-content-active rounded-xl p-6 mb-8">
     <div class="mb-3 flex flex-col items-start gap-3 pl-2 md:flex-row md:items-center md:justify-between">
       <p class="text-md font-semibold text-content-inverse mb-0">{content.nav.title}</p>
-      <div class="flex w-full items-center justify-center gap-3 md:w-auto md:justify-end">
+      <div class="flex w-full flex-wrap items-center justify-center gap-3 md:w-auto md:flex-nowrap md:justify-end">
         <a
           href="/consent"
-          class="text-content-inverse underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-8"
+          class="text-content-inverse text-center underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-8"
         >
           {content.nav.links.consentPreferencesText}
         </a>
         <a
           href="/privacy/my-data"
-          class="text-content-inverse underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-16"
+          class="text-content-inverse text-center underline decoration-content-inverse decoration-dotted underline-offset-4 hover:text-content-offset hover:decoration-content-offset focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 md:mr-16"
         >
           {content.nav.links.myDataText}
         </a>
@@ -196,7 +196,7 @@ for (const [index, item] of content.nav.items.entries()) {
     </div>
   </nav>
 
-  <div class="prose prose-lg max-w-none text-content">
+  <div class="prose prose-lg w-full max-w-none min-w-0 wrap-break-word text-content">
     <section class="mb-12" aria-labelledby="privacy-information-we-collect-title">
       <h2 class="text-2xl md:text-3xl font-bold mb-6" id="privacy-information-we-collect-title">
         {content.collection.title}
@@ -443,7 +443,7 @@ for (const [index, item] of content.nav.items.entries()) {
             color: "bg-blue-600 dark:bg-blue-400",
           }))}
           classes={{
-            ul: "pl-9",
+            ul: "sm:pl-6",
           }}
         />
       </div>
@@ -484,44 +484,44 @@ for (const [index, item] of content.nav.items.entries()) {
         <p class="text-gray-600 dark:text-gray-300 mt-0 mb-6">
           {content.contact.description}
         </p>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:mx-12">
-          <div class="flex items-start">
+        <div class="grid grid-cols-1 gap-6 md:mx-12 md:grid-cols-2">
+          <div class="flex min-w-0 items-start">
             <div
-              class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center ml-6 mt-1 shrink-0"
+              class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center ml-3 mt-1 shrink-0 md:ml-6"
             >
               <Icon
                 icon={"email"}
                 color={"text-blue-600 dark:text-blue-400"}
                 size={8}
               />
             </div>
-            <div class="ml-6">
+            <div class="ml-4 min-w-0 md:ml-6">
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-0 mb-1">
                 {content.contact.card1.lead}
               </h3>
               <a
                 href={content.contact.card1.link}
-                class="text-blue-600 dark:text-blue-400 underline decoration-dotted decoration-current underline-offset-2 transition-colors hover:text-blue-500 dark:hover:text-blue-300 focus-visible:text-blue-500 dark:focus-visible:text-blue-300"
+                class="text-blue-600 dark:text-blue-400 underline decoration-dotted decoration-current underline-offset-2 transition-colors hover:text-blue-500 dark:hover:text-blue-300 focus-visible:text-blue-500 dark:focus-visible:text-blue-300 break-all"
               >
                 {content.contact.card1.text}
               </a>
             </div>
           </div>
-          <div class="flex items-start">
+          <div class="flex min-w-0 items-start">
             <div
-              class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center ml-6 mt-1 shrink-0"
+              class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center ml-3 mt-1 shrink-0 md:ml-6"
             >
               <Icon
                 icon={"location"}
                 color={"text-blue-600 dark:text-blue-400"}
                 size={8}
               />
             </div>
-            <div class="ml-6">
+            <div class="ml-4 min-w-0 md:ml-6">
               <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-0 mb-1">
                 {content.contact.card2.lead}
               </h3>
-              <p class="text-gray-600 dark:text-gray-300">
+              <p class="text-gray-600 dark:text-gray-300 wrap-break-word">
                 {content.contact.card2.text}
               </p>
             </div>
@@ -535,13 +535,13 @@ for (const [index, item] of content.nav.items.entries()) {
           <p class="text-gray-600 dark:text-gray-300 mb-4">
             {content.contact.card3.text}
           </p>
-          <div class="inline-block bg-white dark:bg-gray-800 rounded-lg px-8 py-4">
+          <div class="inline-block max-w-full bg-white dark:bg-gray-800 rounded-lg px-8 py-4">
             <p class="text-gray-900 dark:text-white font-medium mt-0 mb-0">
               {contactData.company.dataProtectionOfficer.name}
             </p>
             <a
               href={`mailto:${contactData.company.dataProtectionOfficer.email}`}
-              class="text-blue-600 dark:text-blue-400 underline decoration-dotted decoration-current underline-offset-2 transition-colors hover:text-blue-500 dark:hover:text-blue-300 focus-visible:text-blue-500 dark:focus-visible:text-blue-300"
+              class="text-blue-600 dark:text-blue-400 underline decoration-dotted decoration-current underline-offset-2 transition-colors hover:text-blue-500 dark:hover:text-blue-300 focus-visible:text-blue-500 dark:focus-visible:text-blue-300 break-all"
             >
               {contactData.company.dataProtectionOfficer.email}
             </a>

src/components/Pages/Services/client/index.ts

@@ -0,0 +1,144 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+type Props = {
+  services: CollectionEntry<'services'>[]
+}
+
+const { services }: Props = Astro.props
+
+/**
+ * Splits rendered markdown at each <h2> boundary so we can place
+ * sections in a two-column layout.
+ */
+const splitH2Sections = (html: string): string[] => {
+  if (!html.trim()) {
+    return []
+  }
+
+  return html
+    .split(/(?=<h2\b)/g)
+    .map(section => section.trim())
+    .filter(Boolean)
+}
+
+const supportedProjectTypes = new Set([
+  'full-workstream',
+  'continuous-workstream',
+  'solutions-services',
+  'on-call-support',
+])
+---
+
+<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+  {services.length > 0 && (
+    <div class="services-grid grid gap-8 md:grid-cols-2">
+      {services.map((service, i) => {
+        const sections = splitH2Sections(service.rendered?.html ?? '')
+        const leftSections = sections.slice(0, 2).join('')
+        const rightSections = sections.slice(2, 4).join('')
+        const projectType = supportedProjectTypes.has(service.id) ? service.id : ''
+        const contactHref = projectType
+          ? `/contact?type=${encodeURIComponent(projectType)}`
+          : '/contact'
+
+        return (
+          <article
+            data-service-card
+            data-default-card={i === 0 ? 'true' : undefined}
+            class="relative flex flex-col rounded-2xl border border-trim overflow-hidden transition-shadow hover:shadow-lg focus-within:shadow-lg"
+          >
+            <a
+              href={contactHref}
+              class="absolute inset-0 z-(--z-raised) no-underline hover:no-underline focus-visible:no-underline focus-visible:outline-none"
+              aria-label={`Contact us about ${service.data.title}`}
+            >
+              <span class="sr-only">Contact us about {service.data.title}</span>
+            </a>
+
+            <div
+              class:list={[
+                'service-card-header px-6 py-5 bg-page-offset text-page-inverse',
+                i === 0 ? 'service-card-header--default' : '',
+              ]}
+            >
+              {i === 0 && (
+                <span class="mb-2 inline-block rounded-full bg-spotlight px-3 py-0.5 text-xs font-bold uppercase tracking-wider text-primary">
+                  Most Popular
+                </span>
+              )}
+              <h3 class="text-xl font-bold">{service.data.title}</h3>
+              <p
+                class:list={[
+                  'service-card-description mt-2 text-sm leading-relaxed text-content-offset',
+                  i === 0 ? 'service-card-description--default' : '',
+                ]}
+              >
+                {service.data.description}
+              </p>
+            </div>
+
+            <div class="flex flex-1 flex-col bg-content-inverse px-6 py-6">
+              <div class="grid gap-6 md:grid-cols-2">
+                <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-sm [&_p]:leading-relaxed [&_ul]:space-y-1.5 [&_ul]:text-sm [&_ul]:text-content [&_ul]:list-none [&_ul]:pl-0 [&_li]:flex [&_li]:items-start [&_li]:gap-2 [&_li]:before:content-['✓'] [&_li]:before:text-success [&_li]:before:mt-0.5 [&_li]:before:shrink-0">
+                  <Fragment set:html={leftSections} />
+                </div>
+                <div class="space-y-6 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:uppercase [&_h2]:tracking-wider [&_h2]:text-page-inverse [&_h2]:mb-2 [&_h2]:mt-0 [&_p]:text-content [&_p]:text-sm [&_p]:leading-relaxed [&_strong]:text-page-inverse">
+                  <Fragment set:html={rightSections} />
+                </div>
+              </div>
+            </div>
+          </article>
+        )
+      })}
+    </div>
+  )}
+</section>
+
+<style>
+  .services-grid [data-service-card]:is(:hover, :focus-within) {
+    border-color: var(--color-spotlight);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-spotlight) 30%, transparent);
+  }
+
+  .services-grid [data-service-card]:is(:hover, :focus-within) .service-card-header {
+    background-color: var(--color-primary);
+    color: var(--color-primary-inverse);
+  }
+
+  .services-grid [data-service-card]:is(:hover, :focus-within) .service-card-description {
+    color: color-mix(in srgb, var(--color-primary-inverse) 70%, transparent);
+  }
+
+  .services-grid [data-default-card='true'] {
+    border-color: var(--color-spotlight);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-spotlight) 30%, transparent);
+  }
+
+  .services-grid [data-default-card='true'] .service-card-header {
+    background-color: var(--color-primary);
+    color: var(--color-primary-inverse);
+  }
+
+  .services-grid [data-default-card='true'] .service-card-description {
+    color: color-mix(in srgb, var(--color-primary-inverse) 70%, transparent);
+  }
+
+  .services-grid:has([data-service-card]:is(:hover, :focus-within)) [data-default-card='true'] {
+    border-color: var(--color-trim);
+    box-shadow: none;
+  }
+
+  .services-grid:has([data-service-card]:is(:hover, :focus-within))
+    [data-default-card='true']
+    .service-card-header {
+    background-color: var(--color-page-offset);
+    color: var(--color-page-inverse);
+  }
+
+  .services-grid:has([data-service-card]:is(:hover, :focus-within))
+    [data-default-card='true']
+    .service-card-description {
+    color: var(--color-content-offset);
+  }
+</style>

src/components/Pages/Services/index.astro

@@ -0,0 +1,45 @@
+.services-grid [data-service-card]:is(:hover, :focus-within) {
+  border-color: var(--color-spotlight);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-spotlight) 30%, transparent);
+}
+
+.services-grid [data-service-card]:is(:hover, :focus-within) .service-card-header {
+  background-color: var(--color-primary);
+  color: var(--color-primary-inverse);
+}
+
+.services-grid [data-service-card]:is(:hover, :focus-within) .service-card-description {
+  color: color-mix(in srgb, var(--color-primary-inverse) 70%, transparent);
+}
+
+.services-grid [data-default-card='true'] {
+  border-color: var(--color-spotlight);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-spotlight) 30%, transparent);
+}
+
+.services-grid [data-default-card='true'] .service-card-header {
+  background-color: var(--color-primary);
+  color: var(--color-primary-inverse);
+}
+
+.services-grid [data-default-card='true'] .service-card-description {
+  color: color-mix(in srgb, var(--color-primary-inverse) 70%, transparent);
+}
+
+.services-grid:has([data-service-card]:is(:hover, :focus-within)) [data-default-card='true'] {
+  border-color: var(--color-trim);
+  box-shadow: none;
+}
+
+.services-grid:has([data-service-card]:is(:hover, :focus-within))
+  [data-default-card='true']
+  .service-card-header {
+  background-color: var(--color-page-offset);
+  color: var(--color-page-inverse);
+}
+
+.services-grid:has([data-service-card]:is(:hover, :focus-within))
+  [data-default-card='true']
+  .service-card-description {
+  color: var(--color-content-offset);
+}