npm - @utopia-studio-design/design-system-cli - Versions diffs - 0.7.1 → 0.8.0 - Mend

@utopia-studio-design/design-system-cli 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/data/docs/ux-source-evidence/marketing-blog.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/marketing/blog/page.tsx",
+  "sha256": "e4e62a939a96953f8e93efcb59c3d34bf5fe90701d15f801908099b33786222e",
+  "imports": [
+    "react",
+    "framer-motion",
+    "@/components/ui/badge",
+    "@/components/ui/button",
+    "@/components/ui/separator",
+    "@/components/ui/star-border",
+    "@/components/design-system/theme-toggle",
+    "next/link"
+  ],
+  "tokens": [
+    "--blue-500",
+    "--blue-600",
+    "--blue-700",
+    "--color-bg-brand",
+    "--color-bg-brand-muted",
+    "--color-bg-default",
+    "--color-bg-subtle",
+    "--color-border-brand",
+    "--color-border-default",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-on-brand",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--green-500",
+    "--green-700",
+    "--teal-400",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "CategoryBadge",
+      "line": 102,
+      "code": "function CategoryBadge({ category }: { category: string }) {\n  const style = categoryStyle[category] ?? {\n    border: \"var(--color-border-default)\",\n    color: \"var(--color-text-secondary)\",\n    bg: \"transparent\",\n  };\n  return (\n    <Badge\n      variant=\"outline\"\n      className=\"rounded-full px-3 py-0.5 text-xs font-medium\"\n      style={{ borderColor: style.border, color: style.color, background: style.bg }}\n    >\n      {category}\n    </Badge>\n  );\n}"
+    },
+    {
+      "id": "BlogPage",
+      "line": 119,
+      "code": "export default function BlogPage() {\n  const [activeCategory, setActiveCategory] = useState(\"All\");\n\n  const filtered =\n    activeCategory === \"All\" ? posts : posts.filter((p) => p.category === activeCategory);\n\n  const featured = filtered.find((p) => p.featured) ?? filtered[0];\n  const rest = filtered.filter((p) => p.id !== featured?.id);\n\n  return (\n    <div style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      {/* ── Nav ── */}\n      <motion.header\n        initial={{ opacity: 0, y: -12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: \"easeOut\" }}\n        className=\"sticky top-0 z-50 border-b\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <Link href=\"/marketing\" className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">Mentix</span>\n            </Link>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"/marketing#platform\" },\n                { label: \"Leadership\", href: \"/marketing#leadership\" },\n                { label: \"FAQ\", href: \"/marketing#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                <Link\n                  key={item.label}\n                  href={item.href}\n                  className=\"text-sm transition-opacity hover:opacity-60\"\n                  style={{\n                    color:\n                      item.href === \"/marketing/blog\"\n                        ? \"var(--color-text-primary)\"\n                        : \"var(--color-text-secondary)\",\n                    fontWeight: item.href === \"/marketing/blog\" ? 500 : 400,\n                  }}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\">\n              Sign in\n            </Button>\n            <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n              Get Early Access\n            </StarBorder>\n          </div>\n        </div>\n      </motion.header>\n\n      {/* ── Hero ── */}\n      <section\n        className=\"py-20 border-b\"\n        style={{ borderColor: \"var(--color-border-default)\" }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <motion.div\n            initial=\"hidden\"\n            animate=\"visible\"\n            className=\"max-w-2xl\"\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Mentix Blog\n            </motion.p>\n            <motion.h1\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[3.25rem] font-semibold leading-[1.05] mb-5\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.04em\" }}\n            >\n              Insights on surgical education and global training.\n            </motion.h1>\n            <motion.p\n              variants={fadeUp}\n              custom={0.16}\n              className=\"text-base leading-relaxed\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Telementoring, endoscopy, and the future of surgical mentorship — written by\n              clinicians, for clinicians.\n            </motion.p>\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── Category filter ── */}\n      <div\n        className=\"border-b sticky top-16 z-40\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <div className=\"flex items-center gap-1 py-3 overflow-x-auto\">\n            {categories.map((cat) => (\n              <button\n                key={cat}\n                onClick={() => setActiveCategory(cat)}\n                className=\"shrink-0 px-4 py-1.5 rounded-full text-sm font-medium transition-all\"\n                style={{\n                  background:\n                    activeCategory === cat\n                      ? \"var(--color-bg-brand)\"\n                      : \"transparent\",\n                  color:\n                    activeCategory === cat\n                      ? \"var(--color-text-on-brand)\"\n                      : \"var(--color-text-secondary)\",\n                  border:\n                    activeCategory === cat\n                      ? \"1px solid transparent\"\n                      : \"1px solid var(--color-border-default)\",\n                }}\n              >\n                {cat}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* ── Content ── */}\n      <div className=\"max-w-6xl mx-auto px-8 py-16\">\n\n        {/* Featured post */}\n        {featured && (\n          <motion.div\n            key={featured.id}\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.5 }}\n            className=\"mb-12\"\n          >\n            <div\n              className=\"rounded-3xl border overflow-hidden p-10 flex flex-col gap-6 md:flex-row md:items-end md:gap-12\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                background: \"var(--color-bg-brand-muted)\",\n              }}\n            >\n              <div className=\"flex-1\">\n                <div className=\"flex items-center gap-3 mb-5\">\n                  <CategoryBadge category={featured.category} />\n                  <Badge\n                    variant=\"outline\"\n                    className=\"rounded-full px-3 py-0.5 text-xs\"\n                    style={{\n                      borderColor: \"var(--color-border-brand)\",\n                      color: \"var(--color-text-brand)\",\n                      background: \"transparent\",\n                    }}\n                  >\n                    Featured\n                  </Badge>\n                </div>\n                <h2\n                  className=\"text-[2rem] font-semibold leading-[1.15] mb-4\"\n                  style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.03em\" }}\n                >\n                  {featured.title}\n                </h2>\n                <p\n                  className=\"text-base leading-relaxed mb-6 max-w-xl\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {featured.excerpt}\n                </p>\n                <div className=\"flex items-center gap-3\">\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {featured.date}\n                  </span>\n                  <span style={{ color: \"var(--color-border-default)\" }}>·</span>\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {featured.readTime}\n                  </span>\n                </div>\n              </div>\n              <div className=\"shrink-0\">\n                <Button\n                  style={{\n                    background: \"var(--color-bg-brand)\",\n                    color: \"var(--color-text-on-brand)\",\n                    border: \"none\",\n                  }}\n                >\n                  Read article →\n                </Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n\n        {/* Article grid */}\n        {rest.length > 0 && (\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-5 mb-16\">\n            {rest.map((post, i) => (\n              <motion.article\n                key={post.id}\n                initial={{ opacity: 0, y: 16 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.45, delay: i * 0.07 }}\n                className=\"rounded-2xl border p-7 flex flex-col gap-4 group cursor-pointer transition-all hover:border-[var(--color-border-brand)]\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                }}\n              >\n                <CategoryBadge category={post.category} />\n                <h3\n                  className=\"text-base font-semibold leading-snug\"\n                  style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.02em\" }}\n                >\n                  {post.title}\n                </h3>\n                <p\n                  className=\"text-sm leading-relaxed flex-1\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {post.excerpt}\n                </p>\n                <div className=\"flex items-center gap-2 pt-2\">\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {post.date}\n                  </span>\n                  <span style={{ color: \"var(--color-border-default)\" }}>·</span>\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {post.readTime}\n                  </span>\n                </div>\n              </motion.article>\n            ))}\n          </div>\n        )}\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Intersections section */}\n        <section className=\"py-16\">\n          <div className=\"mb-8\">\n            <p\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Intersections\n            </p>\n            <h2\n              className=\"text-xl font-semibold\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.025em\" }}\n            >\n              External perspectives on surgical education\n            </h2>\n          </div>\n          <div className=\"flex flex-col gap-4\">\n            {intersectionsPosts.map((p) => (\n              <div\n                key={p.title}\n                className=\"flex items-start justify-between gap-8 py-5 border-b cursor-pointer group\"\n                style={{ borderColor: \"var(--color-border-default)\" }}\n              >\n                <div>\n                  <h3\n                    className=\"text-base font-medium mb-1 group-hover:opacity-70 transition-opacity\"\n                    style={{ color: \"var(--color-text-primary)\" }}\n                  >\n                    {p.title}\n                  </h3>\n                  <p className=\"text-sm\" style={{ color: \"var(--color-text-muted)\" }}>\n                    {p.contributor}\n                  </p>\n                </div>\n                <span\n                  className=\"text-xs shrink-0 mt-1\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {p.date}\n                </span>\n              </div>\n            ))}\n          </div>\n        </section>\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Video library */}\n        <section className=\"py-16\">\n          <div className=\"mb-6\">\n            <p\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Video Library\n            </p>\n            <h2\n              className=\"text-xl font-semibold mb-2\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.025em\" }}\n            >\n              Recorded mentorship sessions\n            </h2>\n            <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Curated session recordings from live procedure mentoring — pending publication.\n            </p>\n          </div>\n          <div\n            className=\"rounded-2xl border p-8 text-center\"\n            style={{\n              borderColor: \"var(--color-border-default)\",\n              background: \"var(--color-bg-subtle)\",\n            }}\n          >\n            <p className=\"text-sm font-medium mb-1\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Coming soon\n            </p>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              Video cases are being reviewed and will be published with mentor consent.\n            </p>\n          </div>\n        </section>\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Newsletter */}\n        <section className=\"py-16 text-center\">\n          <motion.div\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-3\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Stay updated\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[2rem] font-semibold mb-3\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Get new articles in your inbox.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-sm mb-8 max-w-md mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              No noise. Just high-signal writing on surgical education and telementoring, a few times a month.\n            </motion.p>\n            <motion.div\n              variants={fadeUp}\n              custom={0.2}\n              className=\"flex items-center justify-center gap-3 max-w-sm mx-auto\"\n            >\n              <input\n                type=\"email\"\n                placeholder=\"your@email.com\"\n                className=\"flex-1 h-9 rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                  color: \"var(--color-text-primary)\",\n                }}\n              />\n              <Button\n                style={{\n                  background: \"var(--color-bg-brand)\",\n                  color: \"var(--color-text-on-brand)\",\n                  border: \"none\",\n                }}\n              >\n                Subscribe\n              </Button>\n            </motion.div>\n          </motion.div>\n        </section>\n      </div>\n\n      {/* ── Footer ── */}\n      <footer\n        className=\"overflow-hidden border-t\"\n        style={{\n          background: \"var(--color-bg-subtle)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 flex items-center justify-between pt-12 pb-12\">\n          <div className=\"flex flex-col gap-5\">\n            <div className=\"flex items-center gap-4\">\n              {[\n                {\n                  label: \"LinkedIn\",\n                  icon: (\n                    <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\" />\n                      <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\" />\n                      <circle cx=\"4\" cy=\"4\" r=\"2\" />\n                    </svg>\n                  ),\n                },\n                {\n                  label: \"X\",\n                  icon: (\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                    </svg>\n                  ),\n                },\n              ].map((s) => (\n                <a\n                  key={s.label}\n                  href=\"#\"\n                  aria-label={s.label}\n                  className=\"transition-opacity hover:opacity-40\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {s.icon}\n                </a>\n              ))}\n              <a\n                href=\"mailto:info@mentix.world\"\n                aria-label=\"Email\"\n                className=\"transition-opacity hover:opacity-40\"\n                style={{ color: \"var(--color-text-muted)\" }}\n              >\n                <svg\n                  width=\"17\"\n                  height=\"17\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.8}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n                  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\" />\n                </svg>\n              </a>\n            </div>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              © 2026 Mentix. All rights reserved.\n            </p>\n          </div>\n          <div\n            className=\"grid grid-cols-2 gap-x-16 gap-y-3 text-sm\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            {[\"Platform\", \"For Trainees\", \"For Experts\", \"For Industry\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n            {[\"Leadership\", \"Blog\", \"Privacy Policy\", \"Contact\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n          </div>\n        </div>\n        <div className=\"select-none text-center\" style={{ marginBottom: \"-0.1em\", lineHeight: 1 }}>\n          <span\n            className=\"font-bold block\"\n            style={{\n              fontSize: \"clamp(5rem, 22vw, 24rem)\",\n              letterSpacing: \"-0.045em\",\n              color: \"var(--color-border-default)\",\n              lineHeight: 1,\n            }}\n          >\n            Mentix\n          </span>\n        </div>\n      </footer>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { StarBorder } from \"@/components/ui/star-border\";\nimport { ThemeToggle } from \"@/components/design-system/theme-toggle\";\nimport Link from \"next/link\";\n\nconst fadeUp = {\n  hidden: { opacity: 0, y: 20 },\n  visible: (delay = 0) => ({\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], delay },\n  }),\n};\n\nconst categories = [\"All\", \"Education\", \"Surgical Training\", \"AI & Technology\", \"Global Health\"];\n\nconst categoryStyle: Record<string, { border: string; color: string; bg: string }> = {\n  Education: {\n    border: \"var(--color-border-brand)\",\n    color: \"var(--color-text-brand)\",\n    bg: \"var(--color-bg-brand-muted)\",\n  },\n  \"Surgical Training\": {\n    border: \"color-mix(in srgb, var(--blue-500) 40%, transparent)\",\n    color: \"var(--blue-600)\",\n    bg: \"color-mix(in srgb, var(--blue-500) 8%, transparent)\",\n  },\n  \"AI & Technology\": {\n    border: \"color-mix(in srgb, var(--blue-700) 40%, transparent)\",\n    color: \"var(--blue-700)\",\n    bg: \"color-mix(in srgb, var(--blue-700) 8%, transparent)\",\n  },\n  \"Global Health\": {\n    border: \"color-mix(in srgb, var(--green-500) 40%, transparent)\",\n    color: \"var(--green-700)\",\n    bg: \"color-mix(in srgb, var(--green-500) 8%, transparent)\",\n  },\n};\n\nconst posts = [\n  {\n    id: 1,\n    category: \"Education\",\n    title: \"The Surgical Training Gap No One Talks About\",\n    excerpt:\n      \"The Halstedian model of surgical training is failing modern trainees. Here's what the data shows — and what we can do about it.\",\n    date: \"Mar 23, 2025\",\n    readTime: \"14 min read\",\n    featured: true,\n  },\n  {\n    id: 2,\n    category: \"Surgical Training\",\n    title: \"Why Advanced Surgical Techniques Aren't Spreading Fast Enough\",\n    excerpt:\n      \"Learning curves and mentorship gaps are slowing the adoption of advanced endoscopic techniques beyond Japan. The bottleneck isn't skill — it's access.\",\n    date: \"Mar 20, 2025\",\n    readTime: \"7 min read\",\n    featured: false,\n  },\n  {\n    id: 3,\n    category: \"AI & Technology\",\n    title: \"AI in Endoscopy Is Promising. It Also Needs Surgeons Who Can Think Without It.\",\n    excerpt:\n      \"AI-assisted colonoscopy is raising detection rates. But there's a growing risk that it's also deskilling the endoscopists who depend on it.\",\n    date: \"Mar 18, 2025\",\n    readTime: \"8 min read\",\n    featured: false,\n  },\n  {\n    id: 4,\n    category: \"Global Health\",\n    title: \"Surgical Excellence Doesn't Scale. Here's What We Can Do About It.\",\n    excerpt:\n      \"The fellowship model has created pockets of excellence around the world. Remote proctoring could finally let us extend that mentorship beyond geography.\",\n    date: \"Mar 15, 2025\",\n    readTime: \"7 min read\",\n    featured: false,\n  },\n];\n\nconst intersectionsPosts = [\n  {\n    title: \"The Case for Structured Surgical Simulation at Scale\",\n    contributor: \"Dr. Oliver Pennington, Royal London Hospital\",\n    date: \"Mar 10, 2025\",\n  },\n  {\n    title: \"Redefining Competency: What 'Ready to Operate' Should Actually Mean\",\n    contributor: \"Prof. Marie-Claire Fontaine, CHU de Lyon\",\n    date: \"Mar 5, 2025\",\n  },\n];\n\nfunction CategoryBadge({ category }: { category: string }) {\n  const style = categoryStyle[category] ?? {\n    border: \"var(--color-border-default)\",\n    color: \"var(--color-text-secondary)\",\n    bg: \"transparent\",\n  };\n  return (\n    <Badge\n      variant=\"outline\"\n      className=\"rounded-full px-3 py-0.5 text-xs font-medium\"\n      style={{ borderColor: style.border, color: style.color, background: style.bg }}\n    >\n      {category}\n    </Badge>\n  );\n}\n\nexport default function BlogPage() {\n  const [activeCategory, setActiveCategory] = useState(\"All\");\n\n  const filtered =\n    activeCategory === \"All\" ? posts : posts.filter((p) => p.category === activeCategory);\n\n  const featured = filtered.find((p) => p.featured) ?? filtered[0];\n  const rest = filtered.filter((p) => p.id !== featured?.id);\n\n  return (\n    <div style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      {/* ── Nav ── */}\n      <motion.header\n        initial={{ opacity: 0, y: -12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: \"easeOut\" }}\n        className=\"sticky top-0 z-50 border-b\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <Link href=\"/marketing\" className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">Mentix</span>\n            </Link>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"/marketing#platform\" },\n                { label: \"Leadership\", href: \"/marketing#leadership\" },\n                { label: \"FAQ\", href: \"/marketing#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                <Link\n                  key={item.label}\n                  href={item.href}\n                  className=\"text-sm transition-opacity hover:opacity-60\"\n                  style={{\n                    color:\n                      item.href === \"/marketing/blog\"\n                        ? \"var(--color-text-primary)\"\n                        : \"var(--color-text-secondary)\",\n                    fontWeight: item.href === \"/marketing/blog\" ? 500 : 400,\n                  }}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\">\n              Sign in\n            </Button>\n            <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n              Get Early Access\n            </StarBorder>\n          </div>\n        </div>\n      </motion.header>\n\n      {/* ── Hero ── */}\n      <section\n        className=\"py-20 border-b\"\n        style={{ borderColor: \"var(--color-border-default)\" }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <motion.div\n            initial=\"hidden\"\n            animate=\"visible\"\n            className=\"max-w-2xl\"\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Mentix Blog\n            </motion.p>\n            <motion.h1\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[3.25rem] font-semibold leading-[1.05] mb-5\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.04em\" }}\n            >\n              Insights on surgical education and global training.\n            </motion.h1>\n            <motion.p\n              variants={fadeUp}\n              custom={0.16}\n              className=\"text-base leading-relaxed\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Telementoring, endoscopy, and the future of surgical mentorship — written by\n              clinicians, for clinicians.\n            </motion.p>\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── Category filter ── */}\n      <div\n        className=\"border-b sticky top-16 z-40\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <div className=\"flex items-center gap-1 py-3 overflow-x-auto\">\n            {categories.map((cat) => (\n              <button\n                key={cat}\n                onClick={() => setActiveCategory(cat)}\n                className=\"shrink-0 px-4 py-1.5 rounded-full text-sm font-medium transition-all\"\n                style={{\n                  background:\n                    activeCategory === cat\n                      ? \"var(--color-bg-brand)\"\n                      : \"transparent\",\n                  color:\n                    activeCategory === cat\n                      ? \"var(--color-text-on-brand)\"\n                      : \"var(--color-text-secondary)\",\n                  border:\n                    activeCategory === cat\n                      ? \"1px solid transparent\"\n                      : \"1px solid var(--color-border-default)\",\n                }}\n              >\n                {cat}\n              </button>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* ── Content ── */}\n      <div className=\"max-w-6xl mx-auto px-8 py-16\">\n\n        {/* Featured post */}\n        {featured && (\n          <motion.div\n            key={featured.id}\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.5 }}\n            className=\"mb-12\"\n          >\n            <div\n              className=\"rounded-3xl border overflow-hidden p-10 flex flex-col gap-6 md:flex-row md:items-end md:gap-12\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                background: \"var(--color-bg-brand-muted)\",\n              }}\n            >\n              <div className=\"flex-1\">\n                <div className=\"flex items-center gap-3 mb-5\">\n                  <CategoryBadge category={featured.category} />\n                  <Badge\n                    variant=\"outline\"\n                    className=\"rounded-full px-3 py-0.5 text-xs\"\n                    style={{\n                      borderColor: \"var(--color-border-brand)\",\n                      color: \"var(--color-text-brand)\",\n                      background: \"transparent\",\n                    }}\n                  >\n                    Featured\n                  </Badge>\n                </div>\n                <h2\n                  className=\"text-[2rem] font-semibold leading-[1.15] mb-4\"\n                  style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.03em\" }}\n                >\n                  {featured.title}\n                </h2>\n                <p\n                  className=\"text-base leading-relaxed mb-6 max-w-xl\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {featured.excerpt}\n                </p>\n                <div className=\"flex items-center gap-3\">\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {featured.date}\n                  </span>\n                  <span style={{ color: \"var(--color-border-default)\" }}>·</span>\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {featured.readTime}\n                  </span>\n                </div>\n              </div>\n              <div className=\"shrink-0\">\n                <Button\n                  style={{\n                    background: \"var(--color-bg-brand)\",\n                    color: \"var(--color-text-on-brand)\",\n                    border: \"none\",\n                  }}\n                >\n                  Read article →\n                </Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n\n        {/* Article grid */}\n        {rest.length > 0 && (\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-5 mb-16\">\n            {rest.map((post, i) => (\n              <motion.article\n                key={post.id}\n                initial={{ opacity: 0, y: 16 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.45, delay: i * 0.07 }}\n                className=\"rounded-2xl border p-7 flex flex-col gap-4 group cursor-pointer transition-all hover:border-[var(--color-border-brand)]\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                }}\n              >\n                <CategoryBadge category={post.category} />\n                <h3\n                  className=\"text-base font-semibold leading-snug\"\n                  style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.02em\" }}\n                >\n                  {post.title}\n                </h3>\n                <p\n                  className=\"text-sm leading-relaxed flex-1\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {post.excerpt}\n                </p>\n                <div className=\"flex items-center gap-2 pt-2\">\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {post.date}\n                  </span>\n                  <span style={{ color: \"var(--color-border-default)\" }}>·</span>\n                  <span\n                    className=\"text-xs\"\n                    style={{ color: \"var(--color-text-muted)\" }}\n                  >\n                    {post.readTime}\n                  </span>\n                </div>\n              </motion.article>\n            ))}\n          </div>\n        )}\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Intersections section */}\n        <section className=\"py-16\">\n          <div className=\"mb-8\">\n            <p\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Intersections\n            </p>\n            <h2\n              className=\"text-xl font-semibold\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.025em\" }}\n            >\n              External perspectives on surgical education\n            </h2>\n          </div>\n          <div className=\"flex flex-col gap-4\">\n            {intersectionsPosts.map((p) => (\n              <div\n                key={p.title}\n                className=\"flex items-start justify-between gap-8 py-5 border-b cursor-pointer group\"\n                style={{ borderColor: \"var(--color-border-default)\" }}\n              >\n                <div>\n                  <h3\n                    className=\"text-base font-medium mb-1 group-hover:opacity-70 transition-opacity\"\n                    style={{ color: \"var(--color-text-primary)\" }}\n                  >\n                    {p.title}\n                  </h3>\n                  <p className=\"text-sm\" style={{ color: \"var(--color-text-muted)\" }}>\n                    {p.contributor}\n                  </p>\n                </div>\n                <span\n                  className=\"text-xs shrink-0 mt-1\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {p.date}\n                </span>\n              </div>\n            ))}\n          </div>\n        </section>\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Video library */}\n        <section className=\"py-16\">\n          <div className=\"mb-6\">\n            <p\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Video Library\n            </p>\n            <h2\n              className=\"text-xl font-semibold mb-2\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.025em\" }}\n            >\n              Recorded mentorship sessions\n            </h2>\n            <p className=\"text-sm\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Curated session recordings from live procedure mentoring — pending publication.\n            </p>\n          </div>\n          <div\n            className=\"rounded-2xl border p-8 text-center\"\n            style={{\n              borderColor: \"var(--color-border-default)\",\n              background: \"var(--color-bg-subtle)\",\n            }}\n          >\n            <p className=\"text-sm font-medium mb-1\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Coming soon\n            </p>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              Video cases are being reviewed and will be published with mentor consent.\n            </p>\n          </div>\n        </section>\n\n        <Separator style={{ borderColor: \"var(--color-border-default)\" }} />\n\n        {/* Newsletter */}\n        <section className=\"py-16 text-center\">\n          <motion.div\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-3\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Stay updated\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[2rem] font-semibold mb-3\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Get new articles in your inbox.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-sm mb-8 max-w-md mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              No noise. Just high-signal writing on surgical education and telementoring, a few times a month.\n            </motion.p>\n            <motion.div\n              variants={fadeUp}\n              custom={0.2}\n              className=\"flex items-center justify-center gap-3 max-w-sm mx-auto\"\n            >\n              <input\n                type=\"email\"\n                placeholder=\"your@email.com\"\n                className=\"flex-1 h-9 rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                  color: \"var(--color-text-primary)\",\n                }}\n              />\n              <Button\n                style={{\n                  background: \"var(--color-bg-brand)\",\n                  color: \"var(--color-text-on-brand)\",\n                  border: \"none\",\n                }}\n              >\n                Subscribe\n              </Button>\n            </motion.div>\n          </motion.div>\n        </section>\n      </div>\n\n      {/* ── Footer ── */}\n      <footer\n        className=\"overflow-hidden border-t\"\n        style={{\n          background: \"var(--color-bg-subtle)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 flex items-center justify-between pt-12 pb-12\">\n          <div className=\"flex flex-col gap-5\">\n            <div className=\"flex items-center gap-4\">\n              {[\n                {\n                  label: \"LinkedIn\",\n                  icon: (\n                    <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\" />\n                      <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\" />\n                      <circle cx=\"4\" cy=\"4\" r=\"2\" />\n                    </svg>\n                  ),\n                },\n                {\n                  label: \"X\",\n                  icon: (\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                    </svg>\n                  ),\n                },\n              ].map((s) => (\n                <a\n                  key={s.label}\n                  href=\"#\"\n                  aria-label={s.label}\n                  className=\"transition-opacity hover:opacity-40\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {s.icon}\n                </a>\n              ))}\n              <a\n                href=\"mailto:info@mentix.world\"\n                aria-label=\"Email\"\n                className=\"transition-opacity hover:opacity-40\"\n                style={{ color: \"var(--color-text-muted)\" }}\n              >\n                <svg\n                  width=\"17\"\n                  height=\"17\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.8}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n                  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\" />\n                </svg>\n              </a>\n            </div>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              © 2026 Mentix. All rights reserved.\n            </p>\n          </div>\n          <div\n            className=\"grid grid-cols-2 gap-x-16 gap-y-3 text-sm\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            {[\"Platform\", \"For Trainees\", \"For Experts\", \"For Industry\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n            {[\"Leadership\", \"Blog\", \"Privacy Policy\", \"Contact\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n          </div>\n        </div>\n        <div className=\"select-none text-center\" style={{ marginBottom: \"-0.1em\", lineHeight: 1 }}>\n          <span\n            className=\"font-bold block\"\n            style={{\n              fontSize: \"clamp(5rem, 22vw, 24rem)\",\n              letterSpacing: \"-0.045em\",\n              color: \"var(--color-border-default)\",\n              lineHeight: 1,\n            }}\n          >\n            Mentix\n          </span>\n        </div>\n      </footer>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/marketing-contact.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/marketing/contact/page.tsx",
+  "sha256": "1d5478a968c5b5d8b5baa2aa15eada8b781d050c1a6e2f3dc0918997368af5f8",
+  "imports": [
+    "react",
+    "framer-motion",
+    "@/components/ui/button",
+    "@/components/ui/star-border",
+    "@/components/design-system/theme-toggle",
+    "next/link",
+    "lucide-react"
+  ],
+  "tokens": [
+    "--color-bg-brand",
+    "--color-bg-brand-muted",
+    "--color-bg-default",
+    "--color-bg-subtle",
+    "--color-border-default",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-on-brand",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--teal-400",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "ContactPage",
+      "line": 33,
+      "code": "export default function ContactPage() {\n  const [form, setForm] = useState({\n    website: \"\",\n    name: \"\",\n    email: \"\",\n    subject: \"\",\n    message: \"\",\n  });\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n  };\n\n  return (\n    <div style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      {/* ── Nav ── */}\n      <motion.header\n        initial={{ opacity: 0, y: -12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: \"easeOut\" }}\n        className=\"sticky top-0 z-50 border-b\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <Link href=\"/marketing\" className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">Mentix</span>\n            </Link>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"/marketing#platform\" },\n                { label: \"Leadership\", href: \"/marketing#leadership\" },\n                { label: \"FAQ\", href: \"/marketing#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                <Link\n                  key={item.label}\n                  href={item.href}\n                  className=\"text-sm transition-opacity hover:opacity-60\"\n                  style={{\n                    color:\n                      item.href === \"/marketing/contact\"\n                        ? \"var(--color-text-primary)\"\n                        : \"var(--color-text-secondary)\",\n                    fontWeight: item.href === \"/marketing/contact\" ? 500 : 400,\n                  }}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\">\n              Sign in\n            </Button>\n            <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n              Get Early Access\n            </StarBorder>\n          </div>\n        </div>\n      </motion.header>\n\n      <div className=\"max-w-6xl mx-auto px-8 py-20\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\n\n          {/* ── Left: copy + contact info ── */}\n          <motion.div initial=\"hidden\" animate=\"visible\">\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Get in touch\n            </motion.p>\n            <motion.h1\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[3rem] font-semibold leading-[1.05] mb-5\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.04em\" }}\n            >\n              Contact us.\n            </motion.h1>\n            <motion.p\n              variants={fadeUp}\n              custom={0.15}\n              className=\"text-base leading-relaxed mb-12\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Have a question, partnership idea, or feedback? Send us a message and we&apos;ll get\n              back to you within one business day.\n            </motion.p>\n\n            {/* Contact reasons */}\n            <motion.div\n              variants={fadeUp}\n              custom={0.22}\n              className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12\"\n            >\n              {contactReasons.map((r) => {\n                const Icon = r.icon;\n                return (\n                  <div\n                    key={r.title}\n                    className=\"rounded-xl border p-5\"\n                    style={{\n                      borderColor: \"var(--color-border-default)\",\n                      background: \"var(--color-bg-subtle)\",\n                    }}\n                  >\n                    <div className=\"mb-3\">\n                      <Icon\n                        size={18}\n                        style={{ color: \"var(--color-text-secondary)\" }}\n                        strokeWidth={1.5}\n                      />\n                    </div>\n                    <div\n                      className=\"text-sm font-semibold mb-1\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      {r.title}\n                    </div>\n                    <div className=\"text-xs leading-relaxed\" style={{ color: \"var(--color-text-muted)\" }}>\n                      {r.desc}\n                    </div>\n                  </div>\n                );\n              })}\n            </motion.div>\n\n            {/* Direct email */}\n            <motion.div variants={fadeUp} custom={0.28}>\n              <p className=\"text-sm mb-2\" style={{ color: \"var(--color-text-secondary)\" }}>\n                Or reach us directly:\n              </p>\n              <a\n                href=\"mailto:info@mentix.world\"\n                className=\"text-base font-medium transition-opacity hover:opacity-70\"\n                style={{ color: \"var(--color-text-brand)\" }}\n              >\n                info@mentix.world\n              </a>\n            </motion.div>\n          </motion.div>\n\n          {/* ── Right: form ── */}\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}\n          >\n            <div\n              className=\"rounded-3xl border p-8\"\n              style={{\n                borderColor: \"var(--color-border-default)\",\n                background: \"var(--color-bg-subtle)\",\n              }}\n            >\n              {submitted ? (\n                <div className=\"flex flex-col items-center justify-center py-16 text-center gap-4\">\n                  <div\n                    className=\"w-12 h-12 rounded-full flex items-center justify-center text-xl\"\n                    style={{ background: \"var(--color-bg-brand-muted)\" }}\n                  >\n                    ✓\n                  </div>\n                  <h2\n                    className=\"text-xl font-semibold\"\n                    style={{ color: \"var(--color-text-primary)\" }}\n                  >\n                    Message sent\n                  </h2>\n                  <p className=\"text-sm max-w-xs\" style={{ color: \"var(--color-text-secondary)\" }}>\n                    Thanks for reaching out. We&apos;ll get back to you within one business day.\n                  </p>\n                  <button\n                    onClick={() => { setSubmitted(false); setForm({ website: \"\", name: \"\", email: \"\", subject: \"\", message: \"\" }); }}\n                    className=\"text-sm underline underline-offset-2 mt-2 transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-brand)\" }}\n                  >\n                    Send another message\n                  </button>\n                </div>\n              ) : (\n                <form onSubmit={handleSubmit} className=\"flex flex-col gap-5\">\n                  {/* Bot protection honeypot */}\n                  <input\n                    type=\"text\"\n                    name=\"website\"\n                    value={form.website}\n                    onChange={(e) => setForm({ ...form, website: e.target.value })}\n                    className=\"hidden\"\n                    tabIndex={-1}\n                    autoComplete=\"off\"\n                  />\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Your name\n                    </label>\n                    <input\n                      type=\"text\"\n                      required\n                      placeholder=\"Prof. Jane Smith\"\n                      value={form.name}\n                      onChange={(e) => setForm({ ...form, name: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Email\n                    </label>\n                    <input\n                      type=\"email\"\n                      required\n                      placeholder=\"you@hospital.org\"\n                      value={form.email}\n                      onChange={(e) => setForm({ ...form, email: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Subject{\" \"}\n                      <span style={{ color: \"var(--color-text-muted)\" }}>(optional)</span>\n                    </label>\n                    <input\n                      type=\"text\"\n                      placeholder=\"Partnership enquiry\"\n                      value={form.subject}\n                      onChange={(e) => setForm({ ...form, subject: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Message <span style={{ color: \"var(--color-text-brand)\" }}>*</span>\n                    </label>\n                    <textarea\n                      required\n                      rows={5}\n                      placeholder=\"Tell us about your question or idea…\"\n                      value={form.message}\n                      onChange={(e) => setForm({ ...form, message: e.target.value })}\n                      className=\"w-full rounded-lg border px-3 py-2.5 text-sm outline-none resize-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex items-center justify-between pt-1\">\n                    <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n                      We use bot protection to prevent spam.\n                    </p>\n                    <Button\n                      type=\"submit\"\n                      style={{\n                        background: \"var(--color-bg-brand)\",\n                        color: \"var(--color-text-on-brand)\",\n                        border: \"none\",\n                      }}\n                    >\n                      Send message\n                    </Button>\n                  </div>\n                </form>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      </div>\n\n      {/* ── Footer ── */}\n      <footer\n        className=\"overflow-hidden border-t mt-8\"\n        style={{\n          background: \"var(--color-bg-subtle)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 flex items-center justify-between pt-12 pb-12\">\n          <div className=\"flex flex-col gap-5\">\n            <div className=\"flex items-center gap-4\">\n              {[\n                {\n                  label: \"LinkedIn\",\n                  icon: (\n                    <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\" />\n                      <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\" />\n                      <circle cx=\"4\" cy=\"4\" r=\"2\" />\n                    </svg>\n                  ),\n                },\n                {\n                  label: \"X\",\n                  icon: (\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                    </svg>\n                  ),\n                },\n              ].map((s) => (\n                <a\n                  key={s.label}\n                  href=\"#\"\n                  aria-label={s.label}\n                  className=\"transition-opacity hover:opacity-40\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {s.icon}\n                </a>\n              ))}\n              <a\n                href=\"mailto:info@mentix.world\"\n                aria-label=\"Email\"\n                className=\"transition-opacity hover:opacity-40\"\n                style={{ color: \"var(--color-text-muted)\" }}\n              >\n                <svg\n                  width=\"17\"\n                  height=\"17\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.8}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n                  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\" />\n                </svg>\n              </a>\n            </div>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              © 2026 Mentix. All rights reserved.\n            </p>\n          </div>\n          <div\n            className=\"grid grid-cols-2 gap-x-16 gap-y-3 text-sm\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            {[\"Platform\", \"For Trainees\", \"For Experts\", \"For Industry\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n            {[\"Leadership\", \"Blog\", \"Privacy Policy\", \"Contact\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n          </div>\n        </div>\n        <div className=\"select-none text-center\" style={{ marginBottom: \"-0.1em\", lineHeight: 1 }}>\n          <span\n            className=\"font-bold block\"\n            style={{\n              fontSize: \"clamp(5rem, 22vw, 24rem)\",\n              letterSpacing: \"-0.045em\",\n              color: \"var(--color-border-default)\",\n              lineHeight: 1,\n            }}\n          >\n            Mentix\n          </span>\n        </div>\n      </footer>\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Button } from \"@/components/ui/button\";\nimport { StarBorder } from \"@/components/ui/star-border\";\nimport { ThemeToggle } from \"@/components/design-system/theme-toggle\";\nimport Link from \"next/link\";\nimport { MessageCircle, Handshake, GraduationCap, Megaphone } from \"lucide-react\";\n\nconst fadeUp = {\n  hidden: { opacity: 0, y: 20 },\n  visible: (delay = 0) => ({\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], delay },\n  }),\n};\n\nconst fieldStyle = {\n  background: \"var(--color-bg-default)\",\n  borderColor: \"var(--color-border-default)\",\n  color: \"var(--color-text-primary)\",\n};\n\nconst contactReasons = [\n  { icon: MessageCircle, title: \"General enquiry\", desc: \"Questions about the platform or how Mentix works.\" },\n  { icon: Handshake, title: \"Partnership\", desc: \"Industry, institutional, or research collaboration opportunities.\" },\n  { icon: GraduationCap, title: \"Join as expert\", desc: \"Become a verified mentor and start earning from your expertise.\" },\n  { icon: Megaphone, title: \"Press & media\", desc: \"Interview requests, press materials, and media enquiries.\" },\n];\n\nexport default function ContactPage() {\n  const [form, setForm] = useState({\n    website: \"\",\n    name: \"\",\n    email: \"\",\n    subject: \"\",\n    message: \"\",\n  });\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n  };\n\n  return (\n    <div style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-primary)\" }}>\n      {/* ── Nav ── */}\n      <motion.header\n        initial={{ opacity: 0, y: -12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: \"easeOut\" }}\n        className=\"sticky top-0 z-50 border-b\"\n        style={{\n          background: \"var(--color-bg-default)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <Link href=\"/marketing\" className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">Mentix</span>\n            </Link>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"/marketing#platform\" },\n                { label: \"Leadership\", href: \"/marketing#leadership\" },\n                { label: \"FAQ\", href: \"/marketing#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                <Link\n                  key={item.label}\n                  href={item.href}\n                  className=\"text-sm transition-opacity hover:opacity-60\"\n                  style={{\n                    color:\n                      item.href === \"/marketing/contact\"\n                        ? \"var(--color-text-primary)\"\n                        : \"var(--color-text-secondary)\",\n                    fontWeight: item.href === \"/marketing/contact\" ? 500 : 400,\n                  }}\n                >\n                  {item.label}\n                </Link>\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\">\n              Sign in\n            </Button>\n            <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n              Get Early Access\n            </StarBorder>\n          </div>\n        </div>\n      </motion.header>\n\n      <div className=\"max-w-6xl mx-auto px-8 py-20\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-16\">\n\n          {/* ── Left: copy + contact info ── */}\n          <motion.div initial=\"hidden\" animate=\"visible\">\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Get in touch\n            </motion.p>\n            <motion.h1\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-[3rem] font-semibold leading-[1.05] mb-5\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.04em\" }}\n            >\n              Contact us.\n            </motion.h1>\n            <motion.p\n              variants={fadeUp}\n              custom={0.15}\n              className=\"text-base leading-relaxed mb-12\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Have a question, partnership idea, or feedback? Send us a message and we&apos;ll get\n              back to you within one business day.\n            </motion.p>\n\n            {/* Contact reasons */}\n            <motion.div\n              variants={fadeUp}\n              custom={0.22}\n              className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12\"\n            >\n              {contactReasons.map((r) => {\n                const Icon = r.icon;\n                return (\n                  <div\n                    key={r.title}\n                    className=\"rounded-xl border p-5\"\n                    style={{\n                      borderColor: \"var(--color-border-default)\",\n                      background: \"var(--color-bg-subtle)\",\n                    }}\n                  >\n                    <div className=\"mb-3\">\n                      <Icon\n                        size={18}\n                        style={{ color: \"var(--color-text-secondary)\" }}\n                        strokeWidth={1.5}\n                      />\n                    </div>\n                    <div\n                      className=\"text-sm font-semibold mb-1\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      {r.title}\n                    </div>\n                    <div className=\"text-xs leading-relaxed\" style={{ color: \"var(--color-text-muted)\" }}>\n                      {r.desc}\n                    </div>\n                  </div>\n                );\n              })}\n            </motion.div>\n\n            {/* Direct email */}\n            <motion.div variants={fadeUp} custom={0.28}>\n              <p className=\"text-sm mb-2\" style={{ color: \"var(--color-text-secondary)\" }}>\n                Or reach us directly:\n              </p>\n              <a\n                href=\"mailto:info@mentix.world\"\n                className=\"text-base font-medium transition-opacity hover:opacity-70\"\n                style={{ color: \"var(--color-text-brand)\" }}\n              >\n                info@mentix.world\n              </a>\n            </motion.div>\n          </motion.div>\n\n          {/* ── Right: form ── */}\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}\n          >\n            <div\n              className=\"rounded-3xl border p-8\"\n              style={{\n                borderColor: \"var(--color-border-default)\",\n                background: \"var(--color-bg-subtle)\",\n              }}\n            >\n              {submitted ? (\n                <div className=\"flex flex-col items-center justify-center py-16 text-center gap-4\">\n                  <div\n                    className=\"w-12 h-12 rounded-full flex items-center justify-center text-xl\"\n                    style={{ background: \"var(--color-bg-brand-muted)\" }}\n                  >\n                    ✓\n                  </div>\n                  <h2\n                    className=\"text-xl font-semibold\"\n                    style={{ color: \"var(--color-text-primary)\" }}\n                  >\n                    Message sent\n                  </h2>\n                  <p className=\"text-sm max-w-xs\" style={{ color: \"var(--color-text-secondary)\" }}>\n                    Thanks for reaching out. We&apos;ll get back to you within one business day.\n                  </p>\n                  <button\n                    onClick={() => { setSubmitted(false); setForm({ website: \"\", name: \"\", email: \"\", subject: \"\", message: \"\" }); }}\n                    className=\"text-sm underline underline-offset-2 mt-2 transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-brand)\" }}\n                  >\n                    Send another message\n                  </button>\n                </div>\n              ) : (\n                <form onSubmit={handleSubmit} className=\"flex flex-col gap-5\">\n                  {/* Bot protection honeypot */}\n                  <input\n                    type=\"text\"\n                    name=\"website\"\n                    value={form.website}\n                    onChange={(e) => setForm({ ...form, website: e.target.value })}\n                    className=\"hidden\"\n                    tabIndex={-1}\n                    autoComplete=\"off\"\n                  />\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Your name\n                    </label>\n                    <input\n                      type=\"text\"\n                      required\n                      placeholder=\"Prof. Jane Smith\"\n                      value={form.name}\n                      onChange={(e) => setForm({ ...form, name: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Email\n                    </label>\n                    <input\n                      type=\"email\"\n                      required\n                      placeholder=\"you@hospital.org\"\n                      value={form.email}\n                      onChange={(e) => setForm({ ...form, email: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Subject{\" \"}\n                      <span style={{ color: \"var(--color-text-muted)\" }}>(optional)</span>\n                    </label>\n                    <input\n                      type=\"text\"\n                      placeholder=\"Partnership enquiry\"\n                      value={form.subject}\n                      onChange={(e) => setForm({ ...form, subject: e.target.value })}\n                      className=\"h-10 w-full rounded-lg border px-3 text-sm outline-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex flex-col gap-1.5\">\n                    <label className=\"text-xs font-medium\" style={{ color: \"var(--color-text-secondary)\" }}>\n                      Message <span style={{ color: \"var(--color-text-brand)\" }}>*</span>\n                    </label>\n                    <textarea\n                      required\n                      rows={5}\n                      placeholder=\"Tell us about your question or idea…\"\n                      value={form.message}\n                      onChange={(e) => setForm({ ...form, message: e.target.value })}\n                      className=\"w-full rounded-lg border px-3 py-2.5 text-sm outline-none resize-none transition-colors focus:border-[var(--teal-500)]\"\n                      style={fieldStyle}\n                    />\n                  </div>\n\n                  <div className=\"flex items-center justify-between pt-1\">\n                    <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n                      We use bot protection to prevent spam.\n                    </p>\n                    <Button\n                      type=\"submit\"\n                      style={{\n                        background: \"var(--color-bg-brand)\",\n                        color: \"var(--color-text-on-brand)\",\n                        border: \"none\",\n                      }}\n                    >\n                      Send message\n                    </Button>\n                  </div>\n                </form>\n              )}\n            </div>\n          </motion.div>\n        </div>\n      </div>\n\n      {/* ── Footer ── */}\n      <footer\n        className=\"overflow-hidden border-t mt-8\"\n        style={{\n          background: \"var(--color-bg-subtle)\",\n          borderColor: \"var(--color-border-default)\",\n        }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8 flex items-center justify-between pt-12 pb-12\">\n          <div className=\"flex flex-col gap-5\">\n            <div className=\"flex items-center gap-4\">\n              {[\n                {\n                  label: \"LinkedIn\",\n                  icon: (\n                    <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\" />\n                      <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\" />\n                      <circle cx=\"4\" cy=\"4\" r=\"2\" />\n                    </svg>\n                  ),\n                },\n                {\n                  label: \"X\",\n                  icon: (\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                    </svg>\n                  ),\n                },\n              ].map((s) => (\n                <a\n                  key={s.label}\n                  href=\"#\"\n                  aria-label={s.label}\n                  className=\"transition-opacity hover:opacity-40\"\n                  style={{ color: \"var(--color-text-muted)\" }}\n                >\n                  {s.icon}\n                </a>\n              ))}\n              <a\n                href=\"mailto:info@mentix.world\"\n                aria-label=\"Email\"\n                className=\"transition-opacity hover:opacity-40\"\n                style={{ color: \"var(--color-text-muted)\" }}\n              >\n                <svg\n                  width=\"17\"\n                  height=\"17\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.8}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n                  <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\" />\n                </svg>\n              </a>\n            </div>\n            <p className=\"text-xs\" style={{ color: \"var(--color-text-muted)\" }}>\n              © 2026 Mentix. All rights reserved.\n            </p>\n          </div>\n          <div\n            className=\"grid grid-cols-2 gap-x-16 gap-y-3 text-sm\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            {[\"Platform\", \"For Trainees\", \"For Experts\", \"For Industry\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n            {[\"Leadership\", \"Blog\", \"Privacy Policy\", \"Contact\"].map((l) => (\n              <a key={l} href=\"#\" className=\"transition-opacity hover:opacity-40 whitespace-nowrap\">\n                {l}\n              </a>\n            ))}\n          </div>\n        </div>\n        <div className=\"select-none text-center\" style={{ marginBottom: \"-0.1em\", lineHeight: 1 }}>\n          <span\n            className=\"font-bold block\"\n            style={{\n              fontSize: \"clamp(5rem, 22vw, 24rem)\",\n              letterSpacing: \"-0.045em\",\n              color: \"var(--color-border-default)\",\n              lineHeight: 1,\n            }}\n          >\n            Mentix\n          </span>\n        </div>\n      </footer>\n    </div>\n  );\n}\n"
+}

package/data/docs/ux-source-evidence/marketing.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "revision": "6b4b2770d04e42cc2e5453c3d80e35c282b3438f",
+  "file": "app/marketing/page.tsx",
+  "sha256": "c3b7ec6af57d9331b3a0ac1b767327c7629109f939594f8c7b0166fab77022b1",
+  "imports": [
+    "react",
+    "framer-motion",
+    "next/link",
+    "lucide-react",
+    "@/components/ui/badge",
+    "@/components/ui/card",
+    "@/components/ui/button",
+    "@/components/ui/tabs",
+    "@/components/ui/separator",
+    "@/components/ui/star-border",
+    "@/components/ui/orb",
+    "@/components/ui/logo-loop",
+    "@/components/design-system/theme-toggle",
+    "@/components/marketing/marketing-nav",
+    "@/components/marketing/marketing-footer"
+  ],
+  "tokens": [
+    "--color-bg-brand-muted",
+    "--color-bg-default",
+    "--color-bg-subtle",
+    "--color-border-brand",
+    "--color-border-default",
+    "--color-status-error-text",
+    "--color-status-success-text",
+    "--color-status-warning-text",
+    "--color-text-brand",
+    "--color-text-muted",
+    "--color-text-primary",
+    "--color-text-secondary",
+    "--gray-950",
+    "--red-500",
+    "--shadow-glow",
+    "--teal-400",
+    "--teal-500"
+  ],
+  "fragments": [
+    {
+      "id": "FAQItem",
+      "line": 190,
+      "code": "function FAQItem({ q, a }: { q: string; a: string }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <div\n      className=\"border-b\"\n      style={{ borderColor: \"var(--color-border-default)\" }}\n    >\n      <button\n        onClick={() => setOpen(!open)}\n        className=\"w-full flex items-center justify-between py-5 text-left gap-8 transition-opacity hover:opacity-70\"\n      >\n        <span\n          className=\"text-base font-medium\"\n          style={{ color: \"var(--color-text-primary)\" }}\n        >\n          {q}\n        </span>\n        <span\n          className=\"shrink-0 text-xl font-light leading-none\"\n          style={{\n            color: \"var(--color-text-muted)\",\n            display: \"block\",\n            transform: open ? \"rotate(45deg)\" : \"rotate(0deg)\",\n            transition: \"transform 0.2s ease\",\n          }}\n        >\n          +\n        </span>\n      </button>\n      {open && (\n        <motion.p\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.25 }}\n          className=\"pb-5 text-sm leading-relaxed\"\n          style={{ color: \"var(--color-text-secondary)\" }}\n        >\n          {a}\n        </motion.p>\n      )}\n    </div>\n  );\n}"
+    },
+    {
+      "id": "PhotoCard",
+      "line": 234,
+      "code": "function PhotoCard({\n  src, tag, title, desc, delay,\n}: { src: string; tag: string; title: string; desc: string; delay: number }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: \"-60px\" }}\n      transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}\n      className=\"rounded-2xl overflow-hidden border flex flex-col\"\n      style={{\n        borderColor: \"var(--color-border-default)\",\n        background: \"var(--color-bg-default)\",\n      }}\n    >\n      <div className=\"relative aspect-[4/3] overflow-hidden\" style={{ background: \"var(--color-bg-subtle)\" }}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={src}\n          alt={title}\n          loading=\"lazy\"\n          className=\"absolute inset-0 w-full h-full object-cover\"\n        />\n      </div>\n      <div className=\"p-5 sm:p-6\">\n        <p className=\"text-[11px] font-medium uppercase tracking-widest mb-2\" style={{ color: \"var(--color-text-brand)\" }}>\n          {tag}\n        </p>\n        <h3 className=\"text-base font-semibold mb-1.5\" style={{ color: \"var(--color-text-primary)\" }}>\n          {title}\n        </h3>\n        <p className=\"text-sm leading-relaxed\" style={{ color: \"var(--color-text-secondary)\" }}>\n          {desc}\n        </p>\n      </div>\n    </motion.div>\n  );\n}"
+    },
+    {
+      "id": "FeatureCard",
+      "line": 273,
+      "code": "function FeatureCard({\n  title,\n  desc,\n  index,\n}: {\n  title: string;\n  desc: string;\n  index: number;\n}) {\n  return (\n    <motion.div\n      variants={fadeUp}\n      custom={index * 0.08}\n      className=\"p-6 rounded-2xl border\"\n      style={{\n        borderColor: \"var(--color-border-default)\",\n        background: \"var(--color-bg-default)\",\n      }}\n    >\n      <div\n        className=\"w-8 h-8 rounded-lg mb-4 flex items-center justify-center\"\n        style={{ background: \"var(--color-bg-brand-muted)\" }}\n      >\n        <div\n          className=\"w-3 h-3 rounded-sm\"\n          style={{ background: \"var(--teal-500)\" }}\n        />\n      </div>\n      <h3\n        className=\"text-base font-semibold mb-2\"\n        style={{ color: \"var(--color-text-primary)\" }}\n      >\n        {title}\n      </h3>\n      <p\n        className=\"text-sm leading-relaxed\"\n        style={{ color: \"var(--color-text-secondary)\" }}\n      >\n        {desc}\n      </p>\n    </motion.div>\n  );\n}"
+    },
+    {
+      "id": "MarketingPage",
+      "line": 319,
+      "code": "export default function MarketingPage() {\n  const [isDark, setIsDark] = useState(false);\n\n  useEffect(() => {\n    const check = () =>\n      setIsDark(document.documentElement.classList.contains(\"dark\"));\n    check();\n    const observer = new MutationObserver(check);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      style={{\n        background: \"var(--color-bg-default)\",\n        color: \"var(--color-text-primary)\",\n      }}\n    >\n      {/* ── Nav ── */}\n      <MarketingNav animate />\n      {false && (<motion.header className=\"hidden\">\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <div className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">\n                Mentix\n              </span>\n            </div>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"#platform\" },\n                { label: \"Leadership\", href: \"#leadership\" },\n                { label: \"FAQ\", href: \"#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                item.href.startsWith(\"#\") ? (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-sm transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-secondary)\" }}\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <Link\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-sm transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-secondary)\" }}\n                  >\n                    {item.label}\n                  </Link>\n                )\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\" render={<Link href=\"/login\" />}>\n              Sign in\n            </Button>\n            <Link href=\"/signup\">\n              <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n                Get Early Access\n              </StarBorder>\n            </Link>\n          </div>\n        </div>\n      </motion.header>)}\n\n      <main id=\"main-content\">\n\n      {/* ── Hero — product-first ── */}\n      <section className=\"relative pt-16 sm:pt-20 lg:pt-24 overflow-hidden\">\n        {/* Animated orb — behind hero text content */}\n        <div\n          aria-hidden\n          className=\"absolute inset-x-0 top-0 z-0 flex items-start justify-center pointer-events-none\"\n          style={{ height: \"min(110vh, 900px)\" }}\n        >\n          <div className=\"relative w-[min(700px,110%)] h-[min(700px,90vh)] -mt-4 sm:-mt-8\">\n            <Orb\n              hue={0}\n              hoverIntensity={2}\n              rotateOnHover={false}\n              forceHoverState={false}\n              backgroundColor={isDark ? \"#0d0d12\" : \"#ffffff\"}\n            />\n          </div>\n        </div>\n\n        {/* Text content — compact, centered, above the mockup */}\n        <div className=\"relative z-20 w-full max-w-3xl mx-auto px-6 sm:px-8 text-center\">\n          <motion.div\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0}\n            className=\"flex justify-center mb-5\"\n          >\n            <Badge\n              variant=\"outline\"\n              className=\"rounded-full px-3 py-0.5 text-[11px] font-medium inline-flex\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                color: \"var(--color-text-brand)\",\n                background: \"var(--color-bg-brand-muted)\",\n              }}\n            >\n              Early Access · ESD Focus · UK, EU &amp; APAC\n            </Badge>\n          </motion.div>\n\n          <motion.h1\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.06}\n            className=\"text-display mb-4\"\n            style={{ color: \"var(--color-text-primary)\" }}\n          >\n            The future of\n            <br />\n            surgical training.\n          </motion.h1>\n\n          <motion.p\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.14}\n            className=\"text-base sm:text-lg leading-relaxed mb-8 max-w-xl mx-auto\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            Connect trainee surgeons with world-class expert mentors for live\n            case guidance, structured feedback, and secure global training.\n          </motion.p>\n\n          <motion.div\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.22}\n            className=\"flex items-center justify-center gap-3 flex-wrap mb-12 sm:mb-16\"\n          >\n            <Link href=\"/signup\">\n              <StarBorder speed=\"4s\" color=\"var(--teal-400)\">\n                Get Early Access\n              </StarBorder>\n            </Link>\n            <Button variant=\"outline\" size=\"lg\" render={<Link href=\"#platform\" />}>\n              See how it works →\n            </Button>\n          </motion.div>\n        </div>\n\n        {/* Live product preview with bottom mask-fade */}\n        <motion.div\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: 0.3 }}\n          className=\"relative z-10 max-w-6xl mx-auto px-4 sm:px-8\"\n        >\n          <div\n            className=\"relative rounded-2xl overflow-hidden border shadow-2xl\"\n            style={{\n              borderColor: \"var(--color-border-default)\",\n              background: \"var(--color-bg-default)\",\n              WebkitMaskImage:\n                \"linear-gradient(to bottom, black 0%, black 62%, transparent 100%)\",\n              maskImage:\n                \"linear-gradient(to bottom, black 0%, black 62%, transparent 100%)\",\n            }}\n          >\n            {/* Faux browser chrome */}\n            <div\n              className=\"flex items-center gap-2 px-4 h-9 border-b\"\n              style={{\n                borderColor: \"var(--color-border-default)\",\n                background: \"var(--color-bg-subtle)\",\n              }}\n            >\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-error-text)\" }} />\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-warning-text)\" }} />\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-success-text)\" }} />\n              <div\n                className=\"ml-3 px-3 py-0.5 rounded-md text-[11px] font-mono\"\n                style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-muted)\" }}\n              >\n                app.mentix.world/portal/tv\n              </div>\n            </div>\n            {/* Live product — Mentix TV hub iframe */}\n            <div className=\"relative w-full\" style={{ aspectRatio: \"16 / 10\" }}>\n              <iframe\n                src=\"/portal/tv\"\n                title=\"Mentix TV preview\"\n                loading=\"lazy\"\n                className=\"absolute inset-0 w-full h-full border-0\"\n                style={{ background: \"var(--color-bg-default)\" }}\n              />\n              {/* Block iframe interaction so visitors can't navigate inside it */}\n              <div\n                aria-hidden\n                className=\"absolute inset-0\"\n                style={{ pointerEvents: \"none\" }}\n              />\n            </div>\n          </div>\n\n          {/* Extra fade layer to softly blend the masked image into bg */}\n          <div\n            aria-hidden\n            className=\"absolute -bottom-px inset-x-0 h-32 pointer-events-none\"\n            style={{\n              background:\n                \"linear-gradient(to top, var(--color-bg-default) 30%, transparent)\",\n            }}\n          />\n        </motion.div>\n      </section>\n\n      {/* ── Mission — surgeon imagery ── */}\n      <section className=\"py-20 sm:py-28\" style={{ background: \"var(--color-bg-default)\" }}>\n        <div className=\"max-w-6xl mx-auto px-6 sm:px-8 grid lg:grid-cols-2 gap-10 lg:gap-16 items-center\">\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n          >\n            <p className=\"text-xs font-medium uppercase tracking-widest mb-3\" style={{ color: \"var(--color-text-brand)\" }}>\n              Our mission\n            </p>\n            <h2 className=\"text-display mb-5\" style={{ color: \"var(--color-text-primary)\" }}>\n              Every complex procedure, mentored. Anywhere.\n            </h2>\n            <p className=\"text-base sm:text-lg leading-relaxed mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Built by the surgeon who defines the standard of care. Mentix gives trainee surgeons in any country\n              direct access to world-class expert mentorship — live, structured, and secure.\n            </p>\n            <div className=\"flex items-center gap-3 flex-wrap\">\n              <Button variant=\"brand\" size=\"lg\" render={<Link href=\"/signup\" />}>\n                Get early access\n              </Button>\n              <Button variant=\"ghost\" size=\"lg\" render={<Link href=\"#platform\" />}>\n                See how it works →\n              </Button>\n            </div>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, scale: 0.96 }}\n            whileInView={{ opacity: 1, scale: 1 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}\n            className=\"rounded-2xl overflow-hidden border shadow-xl\"\n            style={{ borderColor: \"var(--color-border-default)\" }}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src=\"/marketing/photos/surgeon-portrait.webp\"\n              alt=\"Surgeon in operating theatre — built by surgeons, for surgeons\"\n              className=\"block w-full h-auto\"\n              loading=\"lazy\"\n            />\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── What we do — 3-image collage ── */}\n      <section className=\"py-16 sm:py-20\" style={{ background: \"var(--color-bg-subtle)\" }}>\n        <div className=\"max-w-6xl mx-auto px-6 sm:px-8\">\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.6 }}\n            className=\"max-w-2xl mb-10\"\n          >\n            <p className=\"text-xs font-medium uppercase tracking-widest mb-2\" style={{ color: \"var(--color-text-brand)\" }}>\n              What we do\n            </p>\n            <h2 className=\"text-h1 mb-3\" style={{ color: \"var(--color-text-primary)\" }}>\n              Live mentorship, broadcast learning, global community.\n            </h2>\n            <p className=\"text-base\" style={{ color: \"var(--color-text-secondary)\" }}>\n              The same expertise that defines the King's College Hospital programme — now accessible to any\n              trainee surgeon, anywhere.\n            </p>\n          </motion.div>\n\n          <div className=\"grid md:grid-cols-3 gap-4 sm:gap-5\">\n            <PhotoCard\n              src=\"/marketing/photos/teaching.webp\"\n              tag=\"1:1 mentorship\"\n              title=\"Hands-on guidance\"\n              desc=\"Direct case mentorship from world-class experts during live procedures.\"\n              delay={0}\n            />\n            <PhotoCard\n              src=\"/marketing/photos/training-in-classroom.webp\"\n              tag=\"Mentix TV\"\n              title=\"Live broadcasts\"\n              desc=\"Watch leading surgeons perform complex procedures, with picture-in-picture analysis.\"\n              delay={0.08}\n            />\n            <PhotoCard\n              src=\"/marketing/photos/community.webp\"\n              tag=\"Community\"\n              title=\"A global faculty\"\n              desc=\"A growing network of expert mentors and trainees across the UK, EU, and APAC.\"\n              delay={0.16}\n            />\n          </div>\n        </div>\n      </section>\n\n      {/* ── Stats ── */}\n      <div\n        className=\"border-y\"\n        style={{\n          borderColor: \"var(--color-border-default)\",\n          background: \"var(--color-bg-subtle)\",\n        }}\n      >\n        <div className=\"max-w-4xl mx-auto px-8 py-10\">\n          <motion.div\n            className=\"grid grid-cols-2 md:grid-cols-4 gap-8\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {stats.map((s, i) => (\n              <motion.div\n                key={s.value}\n                variants={fadeUp}\n                custom={i * 0.07}\n                className=\"text-center\"\n              >\n                <div\n                  className=\"text-3xl font-semibold mb-1\"\n                  style={{\n                    color: \"var(--color-text-brand)\",\n                    letterSpacing: \"-0.025em\",\n                  }}\n                >\n                  {s.value}\n                </div>\n                <div\n                  className=\"text-sm\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {s.label}\n                </div>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </div>\n\n      {/* ── Trusted by ── */}\n      <div className=\"py-14\" style={{ background: \"var(--color-bg-default)\" }}>\n        <p\n          className=\"text-[10px] font-semibold uppercase tracking-[0.15em] text-center mb-8\"\n          style={{ color: \"var(--color-text-muted)\" }}\n        >\n          Our Team's Experience Across Leading Organizations\n        </p>\n        <LogoLoop\n          logos={institutionLogos}\n          speed={70}\n          direction=\"left\"\n          logoHeight={36}\n          gap={72}\n          pauseOnHover\n          fadeOut\n          fadeOutColor={isDark ? \"#0d0d12\" : \"#ffffff\"}\n          imgFilter={isDark ? \"invert(1) brightness(1.1)\" : undefined}\n          ariaLabel=\"Trusted institutions\"\n        />\n      </div>\n\n      <Separator />\n\n      {/* ── Mentix TV preview ── */}\n      <section\n        id=\"mentix-tv\"\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-10\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4 inline-flex items-center gap-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              <span className=\"w-1.5 h-1.5 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n              Mentix TV · Live now\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display mb-4\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.03em\", lineHeight: 1.1 }}\n            >\n              Expert masterclasses,<br />streamed live.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-base max-w-lg mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Watch leading endoscopists and surgeons perform live cases. Free for all platform users — no credits required.\n            </motion.p>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-60px\" }}\n            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n            className=\"relative rounded-2xl overflow-hidden mx-auto max-w-4xl\"\n            style={{\n              border: \"1px solid var(--color-border-default)\",\n              boxShadow: \"var(--shadow-glow)\",\n            }}\n          >\n            <div className=\"aspect-video relative\" style={{ background: \"var(--gray-950)\" }}>\n              <iframe\n                className=\"absolute inset-0 w-full h-full\"\n                src=\"https://www.youtube.com/embed/eDmlWAaDxVg?start=90&modestbranding=1&rel=0&controls=1\"\n                title=\"Mentix TV — ESD Masterclass Preview\"\n                allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n              />\n            </div>\n            <div className=\"px-6 py-5 flex items-center justify-between gap-4\" style={{ background: \"var(--color-bg-subtle)\" }}>\n              <div className=\"min-w-0\">\n                <div className=\"text-[10px] font-semibold uppercase tracking-[0.12em] mb-1 inline-flex items-center gap-1.5\" style={{ color: \"var(--red-500)\" }}>\n                  <span className=\"w-1.5 h-1.5 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n                  Live preview\n                </div>\n                <div className=\"text-[15px] font-semibold truncate\">Live ESD masterclass — caecal lesions</div>\n                <div className=\"text-[12px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>Prof. Amyn Haji · 142 watching</div>\n              </div>\n              <Link href=\"/signup\" className=\"shrink-0\">\n                <Button variant=\"brand\">\n                  Sign up to watch <ArrowRight size={13} />\n                </Button>\n              </Link>\n            </div>\n          </motion.div>\n        </div>\n      </section>\n\n      <Separator />\n\n      {/* ── Features ── */}\n      <section\n        id=\"platform\"\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Everything in one place\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              One platform.\n              <br />\n              Three user journeys.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-base max-w-md mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Seamless surgical mentorship connecting trainees, expert mentors,\n              and industry partners — from anywhere in the world.\n            </motion.p>\n          </motion.div>\n\n          <Tabs defaultValue=\"trainees\" className=\"w-full\">\n            <div className=\"flex justify-center mb-10\">\n              <TabsList>\n                <TabsTrigger value=\"trainees\">For Trainees</TabsTrigger>\n                <TabsTrigger value=\"experts\">For Experts</TabsTrigger>\n                <TabsTrigger value=\"industry\">For Industry</TabsTrigger>\n              </TabsList>\n            </div>\n\n            {[\n              { key: \"trainees\", features: traineeFeatures },\n              { key: \"experts\", features: expertFeatures },\n              { key: \"industry\", features: industryFeatures },\n            ].map(({ key, features }) => (\n              <TabsContent key={key} value={key}>\n                <motion.div\n                  className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                >\n                  {features.map((f, i) => (\n                    <FeatureCard\n                      key={f.title}\n                      title={f.title}\n                      desc={f.desc}\n                      index={i}\n                    />\n                  ))}\n                </motion.div>\n              </TabsContent>\n            ))}\n          </Tabs>\n        </div>\n      </section>\n\n      {/* ── Platform Features ── */}\n      <section\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-subtle)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Built for clinical environments.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-base\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Secure, compliant, and designed for real surgical workflows.\n            </motion.p>\n          </motion.div>\n          <motion.div\n            className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {platformFeatures.map((f, i) => (\n              <motion.div\n                key={f.title}\n                variants={fadeUp}\n                custom={i * 0.08}\n                className=\"p-7 rounded-2xl border\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                }}\n              >\n                <h3\n                  className=\"text-base font-semibold mb-2\"\n                  style={{ color: \"var(--color-text-primary)\" }}\n                >\n                  {f.title}\n                </h3>\n                <p\n                  className=\"text-sm leading-relaxed\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {f.desc}\n                </p>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── Leadership ── */}\n      <section\n        id=\"leadership\"\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-3xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Clinical Leadership\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Founded by a surgeon.\n            </motion.h2>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 30 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-60px\" }}\n            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }}\n          >\n            <Card\n              className=\"rounded-3xl overflow-hidden\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                boxShadow: \"var(--shadow-glow)\",\n              }}\n            >\n              <CardHeader className=\"p-8 pb-0\">\n                <div className=\"flex items-start gap-6\">\n                  <div\n                    className=\"w-16 h-16 rounded-2xl overflow-hidden shrink-0 border\"\n                    style={{ borderColor: \"var(--color-border-default)\", background: \"var(--color-bg-subtle)\" }}\n                  >\n                    {/* eslint-disable-next-line @next/next/no-img-element */}\n                    <img\n                      src=\"/marketing/photos/amyn-haji.webp\"\n                      alt=\"Professor Amyn Haji\"\n                      className=\"w-full h-full object-cover\"\n                    />\n                  </div>\n                  <div>\n                    <CardTitle\n                      className=\"text-xl font-semibold mb-0.5\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      Professor Amyn Haji\n                    </CardTitle>\n                    <CardDescription\n                      className=\"text-sm font-medium\"\n                      style={{ color: \"var(--color-text-brand)\" }}\n                    >\n                      MD (Res), FRCS · Founder &amp; CEO\n                    </CardDescription>\n                    <p\n                      className=\"text-xs mt-1\"\n                      style={{ color: \"var(--color-text-muted)\" }}\n                    >\n                      Consultant Colorectal &amp; Interventional Endoscopy\n                      Surgeon · King's College Hospital, London\n                    </p>\n                  </div>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-8\">\n                <p\n                  className=\"text-sm leading-relaxed mb-6\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  A world-leading interventional endoscopist who leads the UK's\n                  tertiary referral service for complex polyp resection and was\n                  the first UK surgeon to perform POEM for achalasia. With 100+\n                  peer-reviewed publications and decades of training experience,\n                  Professor Haji built Mentix to solve the mentorship gap he\n                  experienced firsthand.\n                </p>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                  {credentials.map((c) => (\n                    <div key={c} className=\"flex items-start gap-2.5\">\n                      <span\n                        className=\"mt-0.5 shrink-0 text-xs font-bold\"\n                        style={{ color: \"var(--color-text-brand)\" }}\n                      >\n                        ✓\n                      </span>\n                      <span\n                        className=\"text-xs leading-relaxed\"\n                        style={{ color: \"var(--color-text-secondary)\" }}\n                      >\n                        {c}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── FAQ ── */}\n      <section\n        id=\"faq\"\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-subtle)\" }}\n      >\n        <div className=\"max-w-2xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-12\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-3\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Frequently asked questions\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-sm\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Can't find the answer?{\" \"}\n              <a\n                href=\"mailto:info@mentix.world\"\n                className=\"underline underline-offset-2\"\n                style={{ color: \"var(--color-text-brand)\" }}\n              >\n                Get in touch.\n              </a>\n            </motion.p>\n          </motion.div>\n          <div>\n            {faqs.map((faq) => (\n              <FAQItem key={faq.q} q={faq.q} a={faq.a} />\n            ))}\n          </div>\n        </div>\n      </section>\n\n      {/* ── CTA ── */}\n      <section\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Ready to get started?\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-base max-w-lg mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Join the growing network of surgeons, trainees, and institutions\n              transforming surgical education worldwide.\n            </motion.p>\n          </motion.div>\n\n          <motion.div\n            className=\"grid grid-cols-1 md:grid-cols-3 gap-4\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {[\n              {\n                badge: \"For Experts\",\n                title: \"Expert Surgeons & Endoscopists\",\n                desc: \"Share your expertise with trainees worldwide. Set your own rates, build your profile, and make a global impact.\",\n                cta: \"Join as Expert\",\n                href: \"/signup?role=expert\",\n                featured: false,\n              },\n              {\n                badge: \"For Trainees\",\n                title: \"Trainee Surgeons & Endoscopists\",\n                desc: \"Get real-time mentorship from world-class surgeons. Accelerate your training with structured, expert feedback.\",\n                cta: \"Join as Trainee\",\n                href: \"/signup?role=trainee\",\n                featured: true,\n              },\n              {\n                badge: \"For Partners\",\n                title: \"Industry Partners & Hospitals\",\n                desc: \"Sponsor training programmes, drive device adoption, and engage directly with top-tier surgeons globally.\",\n                cta: \"Partner With Us\",\n                href: \"/signup?role=industry\",\n                featured: false,\n              },\n            ].map((card, i) => (\n              <motion.div key={card.title} variants={fadeUp} custom={i * 0.1}>\n                <Card\n                  className=\"rounded-3xl flex flex-col h-full\"\n                  style={{\n                    borderColor: card.featured\n                      ? \"var(--color-border-brand)\"\n                      : \"var(--color-border-default)\",\n                    background: card.featured\n                      ? \"var(--color-bg-brand-muted)\"\n                      : \"var(--color-bg-subtle)\",\n                    boxShadow: card.featured ? \"var(--shadow-glow)\" : \"none\",\n                  }}\n                >\n                  <CardHeader className=\"p-7 pb-4\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"w-fit mb-4 rounded-full text-xs font-medium\"\n                      style={{\n                        borderColor: card.featured\n                          ? \"var(--color-border-brand)\"\n                          : \"var(--color-border-default)\",\n                        color: card.featured\n                          ? \"var(--color-text-brand)\"\n                          : \"var(--color-text-muted)\",\n                        background: \"transparent\",\n                      }}\n                    >\n                      {card.badge}\n                    </Badge>\n                    <CardTitle\n                      className=\"text-base font-semibold leading-snug\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      {card.title}\n                    </CardTitle>\n                  </CardHeader>\n                  <CardContent className=\"px-7 pb-4 flex-1\">\n                    <p\n                      className=\"text-sm leading-relaxed\"\n                      style={{ color: \"var(--color-text-secondary)\" }}\n                    >\n                      {card.desc}\n                    </p>\n                  </CardContent>\n                  <CardFooter className=\"px-7 pb-7\">\n                    {card.featured ? (\n                      <Link href={card.href} className=\"w-full\">\n                        <StarBorder\n                          speed=\"5s\"\n                          color=\"var(--teal-400)\"\n                          className=\"w-full\"\n                          style={{ width: \"100%\" }}\n                        >\n                          {card.cta}\n                        </StarBorder>\n                      </Link>\n                    ) : (\n                      <Button variant=\"outline\" className=\"w-full\" render={<Link href={card.href} />}>\n                        {card.cta}\n                      </Button>\n                    )}\n                  </CardFooter>\n                </Card>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </section>\n\n      </main>\n\n      {/* ── Footer ── */}\n      <MarketingFooterFull />\n    </div>\n  );\n}"
+    }
+  ],
+  "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardFooter,\n} from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { StarBorder } from \"@/components/ui/star-border\";\nimport Orb from \"@/components/ui/orb\";\nimport LogoLoop from \"@/components/ui/logo-loop\";\nimport { ThemeToggle } from \"@/components/design-system/theme-toggle\";\nimport { MarketingNav } from \"@/components/marketing/marketing-nav\";\nimport { MarketingFooterFull } from \"@/components/marketing/marketing-footer\";\n\n// ─── Animation variants ──────────────────────────────────────────────────────\n\nconst fadeUp = {\n  hidden: { opacity: 0, y: 24 },\n  visible: (delay = 0) => ({\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], delay },\n  }),\n};\n\nconst fadeIn = {\n  hidden: { opacity: 0 },\n  visible: (delay = 0) => ({\n    opacity: 1,\n    transition: { duration: 0.5, ease: \"easeOut\", delay },\n  }),\n};\n\n// ─── Data ─────────────────────────────────────────────────────────────────────\n\nconst stats = [\n  { value: \"100K+\", label: \"GI Endoscopists Worldwide\" },\n  { value: \"15+\", label: \"Countries Engaged\" },\n  { value: \"$1B+\", label: \"Market Opportunity\" },\n  { value: \"24/7\", label: \"Global Mentorship Access\" },\n];\n\nconst institutionLogos = [\n  {\n    src: \"/logos/b088dcee-14de-403c-bb02-d29bdb7f1194.webp\",\n    alt: \"HCA Healthcare\",\n  },\n  { src: \"/logos/093a0eae-04bc-4ea4-9549-f7f090c83e72.webp\", alt: \"Accenture\" },\n  { src: \"/logos/643bc0a5-090e-40c1-8830-b69da9998e48.webp\", alt: \"Bupa\" },\n  { src: \"/logos/1f9acc79-f29d-49f7-b084-51189b3aacf6.webp\", alt: \"Doctify\" },\n  {\n    src: \"/logos/c06a86c5-f6aa-4925-970e-2e92335c1323.webp\",\n    alt: \"King's Private\",\n  },\n  { src: \"/logos/5b9be35a-7761-4e4d-b45e-c0d7c96593b9.webp\", alt: \"NHS\" },\n  { src: \"/logos/f935e393-d471-4a7b-a319-7f6692caf6ad.webp\", alt: \"UCL\" },\n  {\n    src: \"/logos/903b5599-5902-4005-b070-67cbb9dd630d.webp\",\n    alt: \"King Edward VII's Hospital\",\n  },\n  {\n    src: \"/logos/87af6c59-f69d-4441-a04d-cb883235ad7f.webp\",\n    alt: \"Endoscopy On Air\",\n  },\n];\n\nconst traineeFeatures = [\n  {\n    title: \"Real-time guidance\",\n    desc: \"Live case guidance from world-class mentors during your procedures, wherever you are.\",\n  },\n  {\n    title: \"Structured feedback\",\n    desc: \"Detailed, mentor-authored feedback on technique, decision-making, and clinical judgment.\",\n  },\n  {\n    title: \"24/7 global access\",\n    desc: \"Connect with expert mentors across time zones — no waiting for the right supervisor to be free.\",\n  },\n  {\n    title: \"Build confidence\",\n    desc: \"Supervised live procedures give you the repetitions you need to accelerate progression.\",\n  },\n];\n\nconst expertFeatures = [\n  {\n    title: \"Flexible scheduling\",\n    desc: \"Set your own rates, availability windows, and case preferences entirely on your terms.\",\n  },\n  {\n    title: \"Unified dashboard\",\n    desc: \"Manage every mentorship session, recording, and learner interaction from one place.\",\n  },\n  {\n    title: \"Global reputation\",\n    desc: \"Build a verified professional profile visible to trainees and institutions worldwide.\",\n  },\n  {\n    title: \"Meaningful income\",\n    desc: \"Generate flexible income from your expertise while making a lasting clinical impact.\",\n  },\n];\n\nconst industryFeatures = [\n  {\n    title: \"Sponsor live training\",\n    desc: \"Fund sessions directly tied to your devices — education where adoption decisions are made.\",\n  },\n  {\n    title: \"Real-world insights\",\n    desc: \"Gain adoption analytics and usage data from live procedure sessions at the point of care.\",\n  },\n  {\n    title: \"Surgeon engagement\",\n    desc: \"Direct, contextual engagement with top-tier surgeons in their clinical environment.\",\n  },\n  {\n    title: \"Embedded education\",\n    desc: \"Weave product education seamlessly into live surgical workflows for lasting impact.\",\n  },\n];\n\nconst platformFeatures = [\n  {\n    title: \"HIPAA-Compliant Security\",\n    desc: \"End-to-end encrypted video mentoring meets global healthcare compliance standards.\",\n  },\n  {\n    title: \"Session Recording & Review\",\n    desc: \"Automatic recording and structured case reviews create a permanent learning record.\",\n  },\n  {\n    title: \"Credential Verification\",\n    desc: \"Rigorous verification ensures every expert mentor is exactly who they claim to be.\",\n  },\n  {\n    title: \"Analytics Dashboard\",\n    desc: \"Track training progress, session metrics, and performance over time.\",\n  },\n];\n\nconst credentials = [\n  \"UK's tertiary referral service for complex polyp resection\",\n  \"First UK surgeon to perform POEM for achalasia\",\n  \"100+ peer-reviewed publications\",\n  \"Consultant at King's College Hospital, London\",\n];\n\nconst faqs = [\n  {\n    q: \"What is Mentix and how does it work?\",\n    a: \"Mentix connects trainee surgeons and gastroenterologists with world-class expert mentors for live case guidance. Trainees request sessions, mentors join remotely via secure video, and structured feedback is recorded for ongoing learning.\",\n  },\n  {\n    q: \"Who can use Mentix?\",\n    a: \"Mentix serves three groups: trainee surgeons and gastroenterologists seeking mentorship, expert surgeons and endoscopists willing to share their expertise, and industry partners and hospitals looking to sponsor training programmes.\",\n  },\n  {\n    q: \"What specialties does Mentix cover?\",\n    a: \"We are launching with a focus on Endoscopic Submucosal Dissection (ESD) across the UK, Europe, and APAC, with plans to expand across GI endoscopy and other surgical specialties.\",\n  },\n  {\n    q: \"How is patient data kept secure?\",\n    a: \"All sessions run over HIPAA-compliant, end-to-end encrypted video infrastructure. No identifiable patient data is stored beyond what training documentation requires, meeting UK GDPR and international healthcare standards.\",\n  },\n  {\n    q: \"How do expert mentors get verified?\",\n    a: \"Every expert undergoes rigorous credential verification: licence validation, institutional affiliation confirmation, and peer review. Only verified consultants and specialists are approved to mentor.\",\n  },\n  {\n    q: \"How can industry partners get involved?\",\n    a: \"Partners can sponsor training sessions, gain real-world adoption insights, and embed product education into live workflows. Contact us at info@mentix.world to discuss partnership opportunities.\",\n  },\n];\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nfunction FAQItem({ q, a }: { q: string; a: string }) {\n  const [open, setOpen] = useState(false);\n  return (\n    <div\n      className=\"border-b\"\n      style={{ borderColor: \"var(--color-border-default)\" }}\n    >\n      <button\n        onClick={() => setOpen(!open)}\n        className=\"w-full flex items-center justify-between py-5 text-left gap-8 transition-opacity hover:opacity-70\"\n      >\n        <span\n          className=\"text-base font-medium\"\n          style={{ color: \"var(--color-text-primary)\" }}\n        >\n          {q}\n        </span>\n        <span\n          className=\"shrink-0 text-xl font-light leading-none\"\n          style={{\n            color: \"var(--color-text-muted)\",\n            display: \"block\",\n            transform: open ? \"rotate(45deg)\" : \"rotate(0deg)\",\n            transition: \"transform 0.2s ease\",\n          }}\n        >\n          +\n        </span>\n      </button>\n      {open && (\n        <motion.p\n          initial={{ opacity: 0, y: -6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.25 }}\n          className=\"pb-5 text-sm leading-relaxed\"\n          style={{ color: \"var(--color-text-secondary)\" }}\n        >\n          {a}\n        </motion.p>\n      )}\n    </div>\n  );\n}\n\nfunction PhotoCard({\n  src, tag, title, desc, delay,\n}: { src: string; tag: string; title: string; desc: string; delay: number }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: \"-60px\" }}\n      transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}\n      className=\"rounded-2xl overflow-hidden border flex flex-col\"\n      style={{\n        borderColor: \"var(--color-border-default)\",\n        background: \"var(--color-bg-default)\",\n      }}\n    >\n      <div className=\"relative aspect-[4/3] overflow-hidden\" style={{ background: \"var(--color-bg-subtle)\" }}>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={src}\n          alt={title}\n          loading=\"lazy\"\n          className=\"absolute inset-0 w-full h-full object-cover\"\n        />\n      </div>\n      <div className=\"p-5 sm:p-6\">\n        <p className=\"text-[11px] font-medium uppercase tracking-widest mb-2\" style={{ color: \"var(--color-text-brand)\" }}>\n          {tag}\n        </p>\n        <h3 className=\"text-base font-semibold mb-1.5\" style={{ color: \"var(--color-text-primary)\" }}>\n          {title}\n        </h3>\n        <p className=\"text-sm leading-relaxed\" style={{ color: \"var(--color-text-secondary)\" }}>\n          {desc}\n        </p>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction FeatureCard({\n  title,\n  desc,\n  index,\n}: {\n  title: string;\n  desc: string;\n  index: number;\n}) {\n  return (\n    <motion.div\n      variants={fadeUp}\n      custom={index * 0.08}\n      className=\"p-6 rounded-2xl border\"\n      style={{\n        borderColor: \"var(--color-border-default)\",\n        background: \"var(--color-bg-default)\",\n      }}\n    >\n      <div\n        className=\"w-8 h-8 rounded-lg mb-4 flex items-center justify-center\"\n        style={{ background: \"var(--color-bg-brand-muted)\" }}\n      >\n        <div\n          className=\"w-3 h-3 rounded-sm\"\n          style={{ background: \"var(--teal-500)\" }}\n        />\n      </div>\n      <h3\n        className=\"text-base font-semibold mb-2\"\n        style={{ color: \"var(--color-text-primary)\" }}\n      >\n        {title}\n      </h3>\n      <p\n        className=\"text-sm leading-relaxed\"\n        style={{ color: \"var(--color-text-secondary)\" }}\n      >\n        {desc}\n      </p>\n    </motion.div>\n  );\n}\n\n// ─── Page ─────────────────────────────────────────────────────────────────────\n\nexport default function MarketingPage() {\n  const [isDark, setIsDark] = useState(false);\n\n  useEffect(() => {\n    const check = () =>\n      setIsDark(document.documentElement.classList.contains(\"dark\"));\n    check();\n    const observer = new MutationObserver(check);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      style={{\n        background: \"var(--color-bg-default)\",\n        color: \"var(--color-text-primary)\",\n      }}\n    >\n      {/* ── Nav ── */}\n      <MarketingNav animate />\n      {false && (<motion.header className=\"hidden\">\n        <div className=\"max-w-6xl mx-auto px-8 h-16 flex items-center justify-between\">\n          <div className=\"flex items-center gap-10\">\n            <div className=\"flex items-center gap-2.5\">\n              <img\n                src=\"/mentix-logo.png\"\n                alt=\"Mentix\"\n                style={{ height: 28, width: 28, objectFit: \"contain\" }}\n              />\n              <span className=\"text-base font-semibold tracking-tight\">\n                Mentix\n              </span>\n            </div>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              {[\n                { label: \"Platform\", href: \"#platform\" },\n                { label: \"Leadership\", href: \"#leadership\" },\n                { label: \"FAQ\", href: \"#faq\" },\n                { label: \"Blog\", href: \"/marketing/blog\" },\n                { label: \"Contact\", href: \"/marketing/contact\" },\n              ].map((item) => (\n                item.href.startsWith(\"#\") ? (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-sm transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-secondary)\" }}\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <Link\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-sm transition-opacity hover:opacity-60\"\n                    style={{ color: \"var(--color-text-secondary)\" }}\n                  >\n                    {item.label}\n                  </Link>\n                )\n              ))}\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"outline\" size=\"sm\" render={<Link href=\"/login\" />}>\n              Sign in\n            </Button>\n            <Link href=\"/signup\">\n              <StarBorder speed=\"5s\" color=\"var(--teal-400)\" size=\"sm\">\n                Get Early Access\n              </StarBorder>\n            </Link>\n          </div>\n        </div>\n      </motion.header>)}\n\n      <main id=\"main-content\">\n\n      {/* ── Hero — product-first ── */}\n      <section className=\"relative pt-16 sm:pt-20 lg:pt-24 overflow-hidden\">\n        {/* Animated orb — behind hero text content */}\n        <div\n          aria-hidden\n          className=\"absolute inset-x-0 top-0 z-0 flex items-start justify-center pointer-events-none\"\n          style={{ height: \"min(110vh, 900px)\" }}\n        >\n          <div className=\"relative w-[min(700px,110%)] h-[min(700px,90vh)] -mt-4 sm:-mt-8\">\n            <Orb\n              hue={0}\n              hoverIntensity={2}\n              rotateOnHover={false}\n              forceHoverState={false}\n              backgroundColor={isDark ? \"#0d0d12\" : \"#ffffff\"}\n            />\n          </div>\n        </div>\n\n        {/* Text content — compact, centered, above the mockup */}\n        <div className=\"relative z-20 w-full max-w-3xl mx-auto px-6 sm:px-8 text-center\">\n          <motion.div\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0}\n            className=\"flex justify-center mb-5\"\n          >\n            <Badge\n              variant=\"outline\"\n              className=\"rounded-full px-3 py-0.5 text-[11px] font-medium inline-flex\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                color: \"var(--color-text-brand)\",\n                background: \"var(--color-bg-brand-muted)\",\n              }}\n            >\n              Early Access · ESD Focus · UK, EU &amp; APAC\n            </Badge>\n          </motion.div>\n\n          <motion.h1\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.06}\n            className=\"text-display mb-4\"\n            style={{ color: \"var(--color-text-primary)\" }}\n          >\n            The future of\n            <br />\n            surgical training.\n          </motion.h1>\n\n          <motion.p\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.14}\n            className=\"text-base sm:text-lg leading-relaxed mb-8 max-w-xl mx-auto\"\n            style={{ color: \"var(--color-text-secondary)\" }}\n          >\n            Connect trainee surgeons with world-class expert mentors for live\n            case guidance, structured feedback, and secure global training.\n          </motion.p>\n\n          <motion.div\n            variants={fadeUp}\n            initial=\"hidden\"\n            animate=\"visible\"\n            custom={0.22}\n            className=\"flex items-center justify-center gap-3 flex-wrap mb-12 sm:mb-16\"\n          >\n            <Link href=\"/signup\">\n              <StarBorder speed=\"4s\" color=\"var(--teal-400)\">\n                Get Early Access\n              </StarBorder>\n            </Link>\n            <Button variant=\"outline\" size=\"lg\" render={<Link href=\"#platform\" />}>\n              See how it works →\n            </Button>\n          </motion.div>\n        </div>\n\n        {/* Live product preview with bottom mask-fade */}\n        <motion.div\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: 0.3 }}\n          className=\"relative z-10 max-w-6xl mx-auto px-4 sm:px-8\"\n        >\n          <div\n            className=\"relative rounded-2xl overflow-hidden border shadow-2xl\"\n            style={{\n              borderColor: \"var(--color-border-default)\",\n              background: \"var(--color-bg-default)\",\n              WebkitMaskImage:\n                \"linear-gradient(to bottom, black 0%, black 62%, transparent 100%)\",\n              maskImage:\n                \"linear-gradient(to bottom, black 0%, black 62%, transparent 100%)\",\n            }}\n          >\n            {/* Faux browser chrome */}\n            <div\n              className=\"flex items-center gap-2 px-4 h-9 border-b\"\n              style={{\n                borderColor: \"var(--color-border-default)\",\n                background: \"var(--color-bg-subtle)\",\n              }}\n            >\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-error-text)\" }} />\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-warning-text)\" }} />\n              <span className=\"w-2.5 h-2.5 rounded-full\" style={{ background: \"var(--color-status-success-text)\" }} />\n              <div\n                className=\"ml-3 px-3 py-0.5 rounded-md text-[11px] font-mono\"\n                style={{ background: \"var(--color-bg-default)\", color: \"var(--color-text-muted)\" }}\n              >\n                app.mentix.world/portal/tv\n              </div>\n            </div>\n            {/* Live product — Mentix TV hub iframe */}\n            <div className=\"relative w-full\" style={{ aspectRatio: \"16 / 10\" }}>\n              <iframe\n                src=\"/portal/tv\"\n                title=\"Mentix TV preview\"\n                loading=\"lazy\"\n                className=\"absolute inset-0 w-full h-full border-0\"\n                style={{ background: \"var(--color-bg-default)\" }}\n              />\n              {/* Block iframe interaction so visitors can't navigate inside it */}\n              <div\n                aria-hidden\n                className=\"absolute inset-0\"\n                style={{ pointerEvents: \"none\" }}\n              />\n            </div>\n          </div>\n\n          {/* Extra fade layer to softly blend the masked image into bg */}\n          <div\n            aria-hidden\n            className=\"absolute -bottom-px inset-x-0 h-32 pointer-events-none\"\n            style={{\n              background:\n                \"linear-gradient(to top, var(--color-bg-default) 30%, transparent)\",\n            }}\n          />\n        </motion.div>\n      </section>\n\n      {/* ── Mission — surgeon imagery ── */}\n      <section className=\"py-20 sm:py-28\" style={{ background: \"var(--color-bg-default)\" }}>\n        <div className=\"max-w-6xl mx-auto px-6 sm:px-8 grid lg:grid-cols-2 gap-10 lg:gap-16 items-center\">\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n          >\n            <p className=\"text-xs font-medium uppercase tracking-widest mb-3\" style={{ color: \"var(--color-text-brand)\" }}>\n              Our mission\n            </p>\n            <h2 className=\"text-display mb-5\" style={{ color: \"var(--color-text-primary)\" }}>\n              Every complex procedure, mentored. Anywhere.\n            </h2>\n            <p className=\"text-base sm:text-lg leading-relaxed mb-6\" style={{ color: \"var(--color-text-secondary)\" }}>\n              Built by the surgeon who defines the standard of care. Mentix gives trainee surgeons in any country\n              direct access to world-class expert mentorship — live, structured, and secure.\n            </p>\n            <div className=\"flex items-center gap-3 flex-wrap\">\n              <Button variant=\"brand\" size=\"lg\" render={<Link href=\"/signup\" />}>\n                Get early access\n              </Button>\n              <Button variant=\"ghost\" size=\"lg\" render={<Link href=\"#platform\" />}>\n                See how it works →\n              </Button>\n            </div>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, scale: 0.96 }}\n            whileInView={{ opacity: 1, scale: 1 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}\n            className=\"rounded-2xl overflow-hidden border shadow-xl\"\n            style={{ borderColor: \"var(--color-border-default)\" }}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src=\"/marketing/photos/surgeon-portrait.webp\"\n              alt=\"Surgeon in operating theatre — built by surgeons, for surgeons\"\n              className=\"block w-full h-auto\"\n              loading=\"lazy\"\n            />\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── What we do — 3-image collage ── */}\n      <section className=\"py-16 sm:py-20\" style={{ background: \"var(--color-bg-subtle)\" }}>\n        <div className=\"max-w-6xl mx-auto px-6 sm:px-8\">\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-80px\" }}\n            transition={{ duration: 0.6 }}\n            className=\"max-w-2xl mb-10\"\n          >\n            <p className=\"text-xs font-medium uppercase tracking-widest mb-2\" style={{ color: \"var(--color-text-brand)\" }}>\n              What we do\n            </p>\n            <h2 className=\"text-h1 mb-3\" style={{ color: \"var(--color-text-primary)\" }}>\n              Live mentorship, broadcast learning, global community.\n            </h2>\n            <p className=\"text-base\" style={{ color: \"var(--color-text-secondary)\" }}>\n              The same expertise that defines the King's College Hospital programme — now accessible to any\n              trainee surgeon, anywhere.\n            </p>\n          </motion.div>\n\n          <div className=\"grid md:grid-cols-3 gap-4 sm:gap-5\">\n            <PhotoCard\n              src=\"/marketing/photos/teaching.webp\"\n              tag=\"1:1 mentorship\"\n              title=\"Hands-on guidance\"\n              desc=\"Direct case mentorship from world-class experts during live procedures.\"\n              delay={0}\n            />\n            <PhotoCard\n              src=\"/marketing/photos/training-in-classroom.webp\"\n              tag=\"Mentix TV\"\n              title=\"Live broadcasts\"\n              desc=\"Watch leading surgeons perform complex procedures, with picture-in-picture analysis.\"\n              delay={0.08}\n            />\n            <PhotoCard\n              src=\"/marketing/photos/community.webp\"\n              tag=\"Community\"\n              title=\"A global faculty\"\n              desc=\"A growing network of expert mentors and trainees across the UK, EU, and APAC.\"\n              delay={0.16}\n            />\n          </div>\n        </div>\n      </section>\n\n      {/* ── Stats ── */}\n      <div\n        className=\"border-y\"\n        style={{\n          borderColor: \"var(--color-border-default)\",\n          background: \"var(--color-bg-subtle)\",\n        }}\n      >\n        <div className=\"max-w-4xl mx-auto px-8 py-10\">\n          <motion.div\n            className=\"grid grid-cols-2 md:grid-cols-4 gap-8\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {stats.map((s, i) => (\n              <motion.div\n                key={s.value}\n                variants={fadeUp}\n                custom={i * 0.07}\n                className=\"text-center\"\n              >\n                <div\n                  className=\"text-3xl font-semibold mb-1\"\n                  style={{\n                    color: \"var(--color-text-brand)\",\n                    letterSpacing: \"-0.025em\",\n                  }}\n                >\n                  {s.value}\n                </div>\n                <div\n                  className=\"text-sm\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {s.label}\n                </div>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </div>\n\n      {/* ── Trusted by ── */}\n      <div className=\"py-14\" style={{ background: \"var(--color-bg-default)\" }}>\n        <p\n          className=\"text-[10px] font-semibold uppercase tracking-[0.15em] text-center mb-8\"\n          style={{ color: \"var(--color-text-muted)\" }}\n        >\n          Our Team's Experience Across Leading Organizations\n        </p>\n        <LogoLoop\n          logos={institutionLogos}\n          speed={70}\n          direction=\"left\"\n          logoHeight={36}\n          gap={72}\n          pauseOnHover\n          fadeOut\n          fadeOutColor={isDark ? \"#0d0d12\" : \"#ffffff\"}\n          imgFilter={isDark ? \"invert(1) brightness(1.1)\" : undefined}\n          ariaLabel=\"Trusted institutions\"\n        />\n      </div>\n\n      <Separator />\n\n      {/* ── Mentix TV preview ── */}\n      <section\n        id=\"mentix-tv\"\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-6xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-10\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4 inline-flex items-center gap-2\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              <span className=\"w-1.5 h-1.5 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n              Mentix TV · Live now\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display mb-4\"\n              style={{ color: \"var(--color-text-primary)\", letterSpacing: \"-0.03em\", lineHeight: 1.1 }}\n            >\n              Expert masterclasses,<br />streamed live.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-base max-w-lg mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Watch leading endoscopists and surgeons perform live cases. Free for all platform users — no credits required.\n            </motion.p>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 24 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-60px\" }}\n            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n            className=\"relative rounded-2xl overflow-hidden mx-auto max-w-4xl\"\n            style={{\n              border: \"1px solid var(--color-border-default)\",\n              boxShadow: \"var(--shadow-glow)\",\n            }}\n          >\n            <div className=\"aspect-video relative\" style={{ background: \"var(--gray-950)\" }}>\n              <iframe\n                className=\"absolute inset-0 w-full h-full\"\n                src=\"https://www.youtube.com/embed/eDmlWAaDxVg?start=90&modestbranding=1&rel=0&controls=1\"\n                title=\"Mentix TV — ESD Masterclass Preview\"\n                allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                allowFullScreen\n              />\n            </div>\n            <div className=\"px-6 py-5 flex items-center justify-between gap-4\" style={{ background: \"var(--color-bg-subtle)\" }}>\n              <div className=\"min-w-0\">\n                <div className=\"text-[10px] font-semibold uppercase tracking-[0.12em] mb-1 inline-flex items-center gap-1.5\" style={{ color: \"var(--red-500)\" }}>\n                  <span className=\"w-1.5 h-1.5 rounded-full animate-pulse\" style={{ background: \"var(--red-500)\" }} />\n                  Live preview\n                </div>\n                <div className=\"text-[15px] font-semibold truncate\">Live ESD masterclass — caecal lesions</div>\n                <div className=\"text-[12px] mt-0.5\" style={{ color: \"var(--color-text-muted)\" }}>Prof. Amyn Haji · 142 watching</div>\n              </div>\n              <Link href=\"/signup\" className=\"shrink-0\">\n                <Button variant=\"brand\">\n                  Sign up to watch <ArrowRight size={13} />\n                </Button>\n              </Link>\n            </div>\n          </motion.div>\n        </div>\n      </section>\n\n      <Separator />\n\n      {/* ── Features ── */}\n      <section\n        id=\"platform\"\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Everything in one place\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              One platform.\n              <br />\n              Three user journeys.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.14}\n              className=\"text-base max-w-md mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Seamless surgical mentorship connecting trainees, expert mentors,\n              and industry partners — from anywhere in the world.\n            </motion.p>\n          </motion.div>\n\n          <Tabs defaultValue=\"trainees\" className=\"w-full\">\n            <div className=\"flex justify-center mb-10\">\n              <TabsList>\n                <TabsTrigger value=\"trainees\">For Trainees</TabsTrigger>\n                <TabsTrigger value=\"experts\">For Experts</TabsTrigger>\n                <TabsTrigger value=\"industry\">For Industry</TabsTrigger>\n              </TabsList>\n            </div>\n\n            {[\n              { key: \"trainees\", features: traineeFeatures },\n              { key: \"experts\", features: expertFeatures },\n              { key: \"industry\", features: industryFeatures },\n            ].map(({ key, features }) => (\n              <TabsContent key={key} value={key}>\n                <motion.div\n                  className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                >\n                  {features.map((f, i) => (\n                    <FeatureCard\n                      key={f.title}\n                      title={f.title}\n                      desc={f.desc}\n                      index={i}\n                    />\n                  ))}\n                </motion.div>\n              </TabsContent>\n            ))}\n          </Tabs>\n        </div>\n      </section>\n\n      {/* ── Platform Features ── */}\n      <section\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-subtle)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Built for clinical environments.\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-base\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Secure, compliant, and designed for real surgical workflows.\n            </motion.p>\n          </motion.div>\n          <motion.div\n            className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {platformFeatures.map((f, i) => (\n              <motion.div\n                key={f.title}\n                variants={fadeUp}\n                custom={i * 0.08}\n                className=\"p-7 rounded-2xl border\"\n                style={{\n                  borderColor: \"var(--color-border-default)\",\n                  background: \"var(--color-bg-default)\",\n                }}\n              >\n                <h3\n                  className=\"text-base font-semibold mb-2\"\n                  style={{ color: \"var(--color-text-primary)\" }}\n                >\n                  {f.title}\n                </h3>\n                <p\n                  className=\"text-sm leading-relaxed\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  {f.desc}\n                </p>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── Leadership ── */}\n      <section\n        id=\"leadership\"\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-3xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.p\n              variants={fadeUp}\n              custom={0}\n              className=\"text-[10px] font-semibold uppercase tracking-[0.15em] mb-4\"\n              style={{ color: \"var(--color-text-brand)\" }}\n            >\n              Clinical Leadership\n            </motion.p>\n            <motion.h2\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-display\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Founded by a surgeon.\n            </motion.h2>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 30 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, margin: \"-60px\" }}\n            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }}\n          >\n            <Card\n              className=\"rounded-3xl overflow-hidden\"\n              style={{\n                borderColor: \"var(--color-border-brand)\",\n                boxShadow: \"var(--shadow-glow)\",\n              }}\n            >\n              <CardHeader className=\"p-8 pb-0\">\n                <div className=\"flex items-start gap-6\">\n                  <div\n                    className=\"w-16 h-16 rounded-2xl overflow-hidden shrink-0 border\"\n                    style={{ borderColor: \"var(--color-border-default)\", background: \"var(--color-bg-subtle)\" }}\n                  >\n                    {/* eslint-disable-next-line @next/next/no-img-element */}\n                    <img\n                      src=\"/marketing/photos/amyn-haji.webp\"\n                      alt=\"Professor Amyn Haji\"\n                      className=\"w-full h-full object-cover\"\n                    />\n                  </div>\n                  <div>\n                    <CardTitle\n                      className=\"text-xl font-semibold mb-0.5\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      Professor Amyn Haji\n                    </CardTitle>\n                    <CardDescription\n                      className=\"text-sm font-medium\"\n                      style={{ color: \"var(--color-text-brand)\" }}\n                    >\n                      MD (Res), FRCS · Founder &amp; CEO\n                    </CardDescription>\n                    <p\n                      className=\"text-xs mt-1\"\n                      style={{ color: \"var(--color-text-muted)\" }}\n                    >\n                      Consultant Colorectal &amp; Interventional Endoscopy\n                      Surgeon · King's College Hospital, London\n                    </p>\n                  </div>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-8\">\n                <p\n                  className=\"text-sm leading-relaxed mb-6\"\n                  style={{ color: \"var(--color-text-secondary)\" }}\n                >\n                  A world-leading interventional endoscopist who leads the UK's\n                  tertiary referral service for complex polyp resection and was\n                  the first UK surgeon to perform POEM for achalasia. With 100+\n                  peer-reviewed publications and decades of training experience,\n                  Professor Haji built Mentix to solve the mentorship gap he\n                  experienced firsthand.\n                </p>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                  {credentials.map((c) => (\n                    <div key={c} className=\"flex items-start gap-2.5\">\n                      <span\n                        className=\"mt-0.5 shrink-0 text-xs font-bold\"\n                        style={{ color: \"var(--color-text-brand)\" }}\n                      >\n                        ✓\n                      </span>\n                      <span\n                        className=\"text-xs leading-relaxed\"\n                        style={{ color: \"var(--color-text-secondary)\" }}\n                      >\n                        {c}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n          </motion.div>\n        </div>\n      </section>\n\n      {/* ── FAQ ── */}\n      <section\n        id=\"faq\"\n        className=\"py-24\"\n        style={{ background: \"var(--color-bg-subtle)\" }}\n      >\n        <div className=\"max-w-2xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-12\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-3\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Frequently asked questions\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-sm\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Can't find the answer?{\" \"}\n              <a\n                href=\"mailto:info@mentix.world\"\n                className=\"underline underline-offset-2\"\n                style={{ color: \"var(--color-text-brand)\" }}\n              >\n                Get in touch.\n              </a>\n            </motion.p>\n          </motion.div>\n          <div>\n            {faqs.map((faq) => (\n              <FAQItem key={faq.q} q={faq.q} a={faq.a} />\n            ))}\n          </div>\n        </div>\n      </section>\n\n      {/* ── CTA ── */}\n      <section\n        className=\"py-28\"\n        style={{ background: \"var(--color-bg-default)\" }}\n      >\n        <div className=\"max-w-5xl mx-auto px-8\">\n          <motion.div\n            className=\"text-center mb-14\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            <motion.h2\n              variants={fadeUp}\n              custom={0}\n              className=\"text-display mb-4\"\n              style={{\n                color: \"var(--color-text-primary)\",\n                letterSpacing: \"-0.035em\",\n                lineHeight: 1.1,\n              }}\n            >\n              Ready to get started?\n            </motion.h2>\n            <motion.p\n              variants={fadeUp}\n              custom={0.08}\n              className=\"text-base max-w-lg mx-auto\"\n              style={{ color: \"var(--color-text-secondary)\" }}\n            >\n              Join the growing network of surgeons, trainees, and institutions\n              transforming surgical education worldwide.\n            </motion.p>\n          </motion.div>\n\n          <motion.div\n            className=\"grid grid-cols-1 md:grid-cols-3 gap-4\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, margin: \"-60px\" }}\n          >\n            {[\n              {\n                badge: \"For Experts\",\n                title: \"Expert Surgeons & Endoscopists\",\n                desc: \"Share your expertise with trainees worldwide. Set your own rates, build your profile, and make a global impact.\",\n                cta: \"Join as Expert\",\n                href: \"/signup?role=expert\",\n                featured: false,\n              },\n              {\n                badge: \"For Trainees\",\n                title: \"Trainee Surgeons & Endoscopists\",\n                desc: \"Get real-time mentorship from world-class surgeons. Accelerate your training with structured, expert feedback.\",\n                cta: \"Join as Trainee\",\n                href: \"/signup?role=trainee\",\n                featured: true,\n              },\n              {\n                badge: \"For Partners\",\n                title: \"Industry Partners & Hospitals\",\n                desc: \"Sponsor training programmes, drive device adoption, and engage directly with top-tier surgeons globally.\",\n                cta: \"Partner With Us\",\n                href: \"/signup?role=industry\",\n                featured: false,\n              },\n            ].map((card, i) => (\n              <motion.div key={card.title} variants={fadeUp} custom={i * 0.1}>\n                <Card\n                  className=\"rounded-3xl flex flex-col h-full\"\n                  style={{\n                    borderColor: card.featured\n                      ? \"var(--color-border-brand)\"\n                      : \"var(--color-border-default)\",\n                    background: card.featured\n                      ? \"var(--color-bg-brand-muted)\"\n                      : \"var(--color-bg-subtle)\",\n                    boxShadow: card.featured ? \"var(--shadow-glow)\" : \"none\",\n                  }}\n                >\n                  <CardHeader className=\"p-7 pb-4\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"w-fit mb-4 rounded-full text-xs font-medium\"\n                      style={{\n                        borderColor: card.featured\n                          ? \"var(--color-border-brand)\"\n                          : \"var(--color-border-default)\",\n                        color: card.featured\n                          ? \"var(--color-text-brand)\"\n                          : \"var(--color-text-muted)\",\n                        background: \"transparent\",\n                      }}\n                    >\n                      {card.badge}\n                    </Badge>\n                    <CardTitle\n                      className=\"text-base font-semibold leading-snug\"\n                      style={{ color: \"var(--color-text-primary)\" }}\n                    >\n                      {card.title}\n                    </CardTitle>\n                  </CardHeader>\n                  <CardContent className=\"px-7 pb-4 flex-1\">\n                    <p\n                      className=\"text-sm leading-relaxed\"\n                      style={{ color: \"var(--color-text-secondary)\" }}\n                    >\n                      {card.desc}\n                    </p>\n                  </CardContent>\n                  <CardFooter className=\"px-7 pb-7\">\n                    {card.featured ? (\n                      <Link href={card.href} className=\"w-full\">\n                        <StarBorder\n                          speed=\"5s\"\n                          color=\"var(--teal-400)\"\n                          className=\"w-full\"\n                          style={{ width: \"100%\" }}\n                        >\n                          {card.cta}\n                        </StarBorder>\n                      </Link>\n                    ) : (\n                      <Button variant=\"outline\" className=\"w-full\" render={<Link href={card.href} />}>\n                        {card.cta}\n                      </Button>\n                    )}\n                  </CardFooter>\n                </Card>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </section>\n\n      </main>\n\n      {/* ── Footer ── */}\n      <MarketingFooterFull />\n    </div>\n  );\n}\n"
+}