[Website] Polish

website-next/app/(content)/platform/page.tsx

@@ -34,15 +34,15 @@ export default function PlatformPage() {
             <Link
               key={section.href}
               href={section.href}
-              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 no-underline  transition-colors hover:border-fuchsia-400"
+              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 no-underline  transition-colors hover:border-cc-accent"
             >
-              <h2 className="text-xl font-semibold text-cc-ink group-hover:text-fuchsia-400">
+              <h2 className="text-xl font-semibold text-cc-ink group-hover:text-cc-accent">
                 {section.title}
               </h2>
               <p className="mt-3 text-sm text-cc-ink-dim">
                 {section.description}
               </p>
-              <span className="mt-6 text-sm font-medium text-fuchsia-400">
+              <span className="mt-6 text-sm font-medium text-cc-accent">
                 Learn more →
               </span>
             </Link>

website-next/app/(content)/resources/page.tsx

@@ -63,9 +63,9 @@ export default function ResourcesPage() {
               {...(link.external
                 ? { target: "_blank", rel: "noopener noreferrer" }
                 : {})}
-              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-6 no-underline  transition-colors hover:border-fuchsia-400"
+              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-6 no-underline  transition-colors hover:border-cc-accent"
             >
-              <h2 className="text-lg font-semibold text-cc-ink group-hover:text-fuchsia-400">
+              <h2 className="text-lg font-semibold text-cc-ink group-hover:text-cc-accent">
                 {link.title}
               </h2>
               <p className="mt-2 text-sm text-cc-ink-dim">{link.description}</p>

website-next/app/(content)/services/advisory/page.tsx

@@ -1,3 +1,4 @@
+import { Offering } from "@/src/components/Offering";
 import { PageHero } from "@/src/components/PageHero";
 
 interface InquiryPlan {
@@ -43,31 +44,14 @@ export default function AdvisoryPage() {
       <section className="py-8">
         <div className="grid gap-6 md:grid-cols-2">
           {PLANS.map((plan) => (
-            <div
+            <Offering
               key={plan.title}
-              className="flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 "
-            >
-              <h2 className="text-2xl font-semibold text-cc-ink">
-                {plan.title}
-              </h2>
-              <p className="mt-3 text-sm text-cc-ink-dim">{plan.description}</p>
-              <ul className="mt-6 flex flex-1 flex-col gap-2 text-sm text-cc-ink">
-                {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-start gap-2">
-                    <span aria-hidden className="mt-1 text-fuchsia-400">
-                      ✓
-                    </span>
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              <a
-                href={plan.ctaLink}
-                className="mt-8 inline-flex items-center justify-center rounded-md bg-cc-ink px-6 py-2.5 text-sm font-medium text-[#0c1322] no-underline transition-colors hover:bg-white"
-              >
-                {plan.ctaText}
-              </a>
-            </div>
+              headingLevel="h2"
+              title={plan.title}
+              description={plan.description}
+              perks={plan.features}
+              callToAction={{ title: plan.ctaText, link: plan.ctaLink }}
+            />
           ))}
         </div>
       </section>

website-next/app/(content)/services/page.tsx

@@ -34,15 +34,15 @@ export default function ServicesPage() {
             <Link
               key={section.href}
               href={section.href}
-              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 no-underline  transition-colors hover:border-fuchsia-400"
+              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 no-underline  transition-colors hover:border-cc-accent"
             >
-              <h2 className="text-xl font-semibold text-cc-ink group-hover:text-fuchsia-400">
+              <h2 className="text-xl font-semibold text-cc-ink group-hover:text-cc-accent">
                 {section.title}
               </h2>
               <p className="mt-3 text-sm text-cc-ink-dim">
                 {section.description}
               </p>
-              <span className="mt-6 text-sm font-medium text-fuchsia-400">
+              <span className="mt-6 text-sm font-medium text-cc-accent">
                 Learn more →
               </span>
             </Link>

website-next/app/(content)/services/support/contact/ContactForm.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import { useState, type FormEvent } from "react";
+import { SolidButton } from "@/src/design-system/Button";
+import { Dropdown, DropdownItem } from "@/src/design-system/Dropdown";
+import { Input } from "@/src/design-system/Input";
+import { TextArea } from "@/src/design-system/TextArea";
 
 const SUBJECTS = [
   "Schedule a Demo",
@@ -33,9 +37,6 @@ const INITIAL: FormData = {
   message: "",
 };
 
-const inputClasses =
-  "rounded-md border bg-white/5 px-3 py-2 text-sm text-cc-ink focus:outline-hidden focus:ring-2 focus:ring-fuchsia-500/30 disabled:opacity-60";
-
 export function ContactForm() {
   const [data, setData] = useState<FormData>(INITIAL);
   const [errors, setErrors] = useState<FormErrors>({});
@@ -112,118 +113,65 @@ export function ContactForm() {
       noValidate
       className="flex flex-col gap-5 rounded-xl border border-cc-card-border bg-cc-card-bg p-8 backdrop-blur-sm"
     >
-      <Field
+      <Input
         label="Name"
         name="name"
         type="text"
         required
         value={data.name}
         error={errors.name}
         disabled={isSubmitting}
-        onChange={(v) => update("name", v)}
+        onChange={(e) => update("name", e.target.value)}
       />
-      <Field
+      <Input
         label="Email"
         name="email"
         type="email"
         required
         value={data.email}
         error={errors.email}
         disabled={isSubmitting}
-        onChange={(v) => update("email", v)}
+        onChange={(e) => update("email", e.target.value)}
       />
-      <Field
+      <Input
         label="Company"
         name="company"
         type="text"
         required
         value={data.company}
         error={errors.company}
         disabled={isSubmitting}
-        onChange={(v) => update("company", v)}
+        onChange={(e) => update("company", e.target.value)}
       />
-      <div className="flex flex-col gap-1">
-        <label htmlFor="subject" className="text-sm font-medium text-cc-ink">
-          Subject
-        </label>
-        <select
-          id="subject"
-          name="subject"
-          value={data.subject}
-          disabled={isSubmitting}
-          onChange={(e) => update("subject", e.target.value)}
-          className={`${inputClasses} border-cc-card-border focus:border-fuchsia-500`}
-        >
+      <Dropdown
+        label="Subject"
+        className={isSubmitting ? "pointer-events-none opacity-60" : undefined}
+        panelClassName="p-1"
+        trigger={<span className="text-sm text-cc-ink">{data.subject}</span>}
+      >
+        <ul className="m-0 flex list-none flex-col p-0">
           {SUBJECTS.map((s) => (
-            <option key={s}>{s}</option>
+            <DropdownItem
+              key={s}
+              active={s === data.subject}
+              onClick={() => update("subject", s)}
+            >
+              {s}
+            </DropdownItem>
           ))}
-        </select>
-      </div>
-      <div className="flex flex-col gap-1">
-        <label htmlFor="message" className="text-sm font-medium text-cc-ink">
-          Message
-        </label>
-        <textarea
-          id="message"
-          name="message"
-          rows={5}
-          value={data.message}
-          disabled={isSubmitting}
-          onChange={(e) => update("message", e.target.value)}
-          className={`${inputClasses} border-cc-card-border focus:border-fuchsia-500`}
-        />
-      </div>
-      <button
-        type="submit"
+        </ul>
+      </Dropdown>
+      <TextArea
+        label="Message"
+        name="message"
+        rows={5}
+        value={data.message}
         disabled={isSubmitting}
-        className="inline-flex items-center self-start rounded-full bg-cc-ink px-7 py-3 text-sm font-medium text-[#0c1322] transition-colors hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
-      >
+        onChange={(e) => update("message", e.target.value)}
+      />
+      <SolidButton type="submit" disabled={isSubmitting} className="self-start">
         {isSubmitting ? "Sending..." : "Send"}
-      </button>
+      </SolidButton>
     </form>
   );
 }
-
-function Field({
-  label,
-  name,
-  type,
-  required,
-  value,
-  error,
-  disabled,
-  onChange,
-}: {
-  label: string;
-  name: string;
-  type: string;
-  required?: boolean;
-  value: string;
-  error?: string;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <div className="flex flex-col gap-1">
-      <label htmlFor={name} className="text-sm font-medium text-cc-ink">
-        {label}
-        {required && <span className="ml-1 text-fuchsia-400">*</span>}
-      </label>
-      <input
-        id={name}
-        name={name}
-        type={type}
-        value={value}
-        disabled={disabled}
-        aria-invalid={error ? true : undefined}
-        onChange={(e) => onChange(e.target.value)}
-        className={`${inputClasses} ${
-          error
-            ? "border-red-500 focus:border-red-500"
-            : "border-cc-card-border focus:border-fuchsia-500"
-        }`}
-      />
-      {error && <span className="text-sm text-red-500">{error}</span>}
-    </div>
-  );
-}

website-next/app/(content)/services/support/page.tsx

@@ -1,6 +1,15 @@
 import { type Plan, PlanGrid } from "@/src/components/PlanGrid";
 import { PageHero } from "@/src/components/PageHero";
 import { Section } from "@/src/components/Section";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@/src/design-system/Table";
+import { CheckIcon } from "@/src/components/CheckIcon";
 
 const SUPPORT_PLANS: Plan[] = [
   {
@@ -97,46 +106,38 @@ export default function SupportPage() {
       </Section>
 
       <Section title="Compare our Support Plans">
-        <div className="overflow-x-auto">
-          <table className="w-full border-collapse text-sm">
-            <thead>
-              <tr className="border-b border-cc-card-border">
-                <th className="px-4 py-3 text-left font-semibold text-cc-ink">
-                  Support
-                </th>
-                {PLAN_NAMES.map((name) => (
-                  <th
-                    key={name}
-                    className="px-4 py-3 text-center font-semibold text-cc-ink"
-                  >
-                    {name}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {COMPARISON.map((row) => (
-                <tr key={row.title} className="border-b border-cc-card-border">
-                  <td className="px-4 py-3 text-cc-ink">{row.title}</td>
-                  {row.values.map((v, i) => (
-                    <td
-                      key={i}
-                      className="px-4 py-3 text-center text-cc-ink"
-                    >
-                      {v === true ? (
-                        <span className="text-fuchsia-400">✓</span>
-                      ) : v === false ? (
-                        <span className="text-cc-ink-faint">—</span>
-                      ) : (
-                        v
-                      )}
-                    </td>
-                  ))}
-                </tr>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell>Support</TableHeaderCell>
+              {PLAN_NAMES.map((name) => (
+                <TableHeaderCell key={name} align="center">
+                  {name}
+                </TableHeaderCell>
               ))}
-            </tbody>
-          </table>
-        </div>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {COMPARISON.map((row) => (
+              <TableRow key={row.title}>
+                <TableCell>{row.title}</TableCell>
+                {row.values.map((v, i) => (
+                  <TableCell key={i} align="center">
+                    {v === true ? (
+                      <span className="inline-flex items-center justify-center text-cc-accent">
+                        <CheckIcon />
+                      </span>
+                    ) : v === false ? (
+                      <span className="text-cc-prose">—</span>
+                    ) : (
+                      v
+                    )}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </Section>
     </>
   );