Reposition homepage for AI workflow consulting

src/assets/css/main.css

@@ -56,6 +56,7 @@
   --border: #213044;
   --border-strong: #314760;
   --system-border: rgba(190,208,230,0.12);
+  --background-grid-size: 42px;
   --grid-line: rgba(190,208,230,0.035);
   --grid-dot: rgba(190,208,230,0.13);
   --surface-soft: rgba(255,255,255,0.03);
@@ -130,6 +131,7 @@
   --border:        #d6dde6;
   --border-strong: #aebccc;
   --system-border: rgba(92,107,125,0.18);
+  --background-grid-size: 42px;
   --grid-line: rgba(92,107,125,0.055);
   --grid-dot: rgba(92,107,125,0.16);
   --surface-soft:  rgba(16,24,32,0.035);
@@ -195,7 +197,13 @@ body {
     radial-gradient(920px 620px at -8% 10%, rgba(36,105,216,0.055), transparent 56%),
     linear-gradient(180deg, rgba(255,254,250,0.86), transparent 17%),
     var(--bg);
-  background-size: 44px 44px, 44px 44px, auto, auto, auto, auto;
+  background-size:
+    var(--background-grid-size) var(--background-grid-size),
+    var(--background-grid-size) var(--background-grid-size),
+    auto,
+    auto,
+    auto,
+    auto;
 }
 a { color: inherit; text-decoration: none; }
 a:hover { color: var(--muted-strong); }

src/assets/css/market-pages.css

@@ -16,6 +16,63 @@
   background-size: 42px 42px, 42px 42px, auto, auto;
 }
 
+.market-page--home .page-hero__eyebrow {
+  margin-bottom: 22px;
+}
+
+.market-page--home .page-hero__title {
+  margin-bottom: 28px;
+}
+
+.market-page--home .page-hero__subtitle {
+  max-width: 900px;
+  line-height: 1.82;
+}
+
+.market-page--home .page-hero__actions {
+  margin-top: 36px;
+}
+
+.market-page--home .page-hero__extra {
+  margin-top: 34px;
+}
+
+.home-typewriter-title {
+  display: inline;
+}
+
+.home-typewriter-title__word {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.home-typewriter-title__word:not(:last-child) {
+  margin-right: 0.24em;
+}
+
+.home-typewriter-title__char {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(0.08em);
+  animation: home-typewriter-char 0.01s linear forwards;
+  animation-delay: calc(var(--char-index) * 0.032s + 0.18s);
+}
+
+.home-typewriter-title__char:nth-child(8n) {
+  animation-duration: 0.08s;
+}
+
+@keyframes home-typewriter-char {
+  from {
+    opacity: 0;
+    transform: translateY(0.08em);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .market-page__claim {
   max-width: 720px;
   margin: 0;
@@ -77,6 +134,115 @@
   margin-top: 2px;
 }
 
+.home-audit-section {
+  padding-top: 64px;
+}
+
+.home-audit-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
+  gap: 16px;
+}
+
+.home-audit-card {
+  --home-audit-accent: var(--accent-ai);
+  --home-audit-accent-soft: var(--accent-ai-soft);
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 13px;
+  align-content: start;
+  padding: 22px;
+  border: 1px solid var(--system-border);
+  border-radius: var(--radius);
+  background:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    radial-gradient(420px 190px at 100% 0, var(--home-audit-accent-soft), transparent 70%),
+    color-mix(in srgb, var(--panel) 90%, transparent);
+  background-size: 28px 28px, 28px 28px, auto, auto;
+  box-shadow: var(--shadow);
+}
+
+.home-audit-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: linear-gradient(180deg, var(--home-audit-accent), transparent);
+}
+
+.home-audit-card--primary,
+.home-audit-card--sprint {
+  border-color: color-mix(in srgb, var(--home-audit-accent) 38%, var(--border));
+}
+
+.home-audit-card--medtech {
+  --home-audit-accent: var(--accent-medtech);
+  --home-audit-accent-soft: var(--accent-medtech-soft);
+}
+
+.home-audit-card--fullstack {
+  --home-audit-accent: var(--accent-fullstack);
+  --home-audit-accent-soft: var(--accent-fullstack-soft);
+}
+
+.home-audit-card--included,
+.home-audit-card--outcome {
+  border-color: color-mix(in srgb, var(--home-audit-accent) 28%, var(--border));
+}
+
+.home-audit-card__label {
+  color: var(--home-audit-accent);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.home-audit-card h3 {
+  margin: 0;
+  color: var(--text);
+  font-size: 20px;
+  line-height: 1.2;
+}
+
+.home-audit-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.62;
+}
+
+.home-audit-card ul {
+  display: grid;
+  gap: 9px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--muted);
+}
+
+.home-audit-card li {
+  display: flex;
+  gap: 8px;
+  line-height: 1.48;
+}
+
+.home-audit-card li::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  margin-top: 8px;
+  border-radius: 999px;
+  background: var(--home-audit-accent);
+  box-shadow: 0 0 0 4px var(--home-audit-accent-soft);
+  flex: 0 0 auto;
+}
+
+.home-audit-card__deliverables {
+  grid-template-columns: 1fr;
+}
+
 .page-hero--ai .page-hero__content {
   max-width: none;
   display: grid;
@@ -1234,6 +1400,7 @@
   .fullstack-project-grid,
   .fullstack-secondary-grid,
   .fullstack-capability-grid,
+  .home-audit-grid,
   .home-system-visual {
     grid-template-columns: 1fr;
   }
@@ -1318,3 +1485,11 @@
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .home-typewriter-title__char {
+    opacity: 1;
+    animation: none;
+    transform: none;
+  }
+}

src/assets/css/navigation.css

@@ -145,7 +145,7 @@
   position: absolute;
   left: 8px;
   right: 8px;
-  bottom: -14px;
+  top: 4px;
   height: 2px;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--brand), var(--brand-2));

src/assets/css/page-hero.css

@@ -21,7 +21,12 @@
     radial-gradient(820px 480px at 22% 28%, var(--surface-glow), transparent 62%),
     radial-gradient(760px 440px at 92% 18%, var(--surface-cool), transparent 64%),
     linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%);
-  background-size: 42px 42px, 42px 42px, auto, auto, auto;
+  background-size:
+    var(--background-grid-size) var(--background-grid-size),
+    var(--background-grid-size) var(--background-grid-size),
+    auto,
+    auto,
+    auto;
   pointer-events: none;
 }
 

src/assets/css/visual-system.css

@@ -388,9 +388,9 @@
   align-items: center;
   min-height: 40px;
   padding: 9px 11px;
-  border: 1px dashed var(--system-border);
+  border: 1px dashed color-mix(in srgb, var(--system-accent, var(--brand)) 28%, var(--system-border));
   border-radius: 12px;
-  background: color-mix(in srgb, var(--panel) 86%, transparent);
+  background: color-mix(in srgb, var(--system-accent-soft, var(--surface-soft)) 34%, var(--panel));
   color: var(--muted-strong);
   font-size: 12px;
   font-weight: 760;

src/components/Contact.jsx

@@ -30,21 +30,21 @@ const Contact = () => {
         <div className="contact__paths contact__paths--stack reveal reveal--delay-1" aria-label="Contact paths">
           <a href="mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request" className="contact__path contact__path--ai">
             <CalendarCheck size={18} aria-hidden="true" />
-            <strong>I need AI workflow automation</strong>
-            <span>Workflow audit, automation sprint, SOP system, dashboard, or internal tool prototype.</span>
-            <em>Select AI path <ArrowRight size={14} aria-hidden="true" /></em>
+            <strong>Book an AI Workflow Audit</strong>
+            <span>Map one workflow, identify bottlenecks, score AI opportunities, assess risk, and define the first pilot.</span>
+            <em>Start audit path <ArrowRight size={14} aria-hidden="true" /></em>
           </a>
           <a href="mailto:romazuryk@proton.me?subject=MedTech%20Product%20%2F%20Project%20Role" className="contact__path contact__path--medtech">
             <BriefcaseBusiness size={18} aria-hidden="true" />
-            <strong>I am hiring for a MedTech / Product / Project role</strong>
-            <span>Product, project, implementation, product ops, or workflow ownership roles.</span>
-            <em>Select MedTech path <ArrowRight size={14} aria-hidden="true" /></em>
+            <strong>I need regulated-operations context</strong>
+            <span>MedTech, HealthTech, implementation, documentation, handover, or stakeholder-heavy workflow work.</span>
+            <em>Select trust-proof path <ArrowRight size={14} aria-hidden="true" /></em>
           </a>
           <a href="mailto:romazuryk@proton.me?subject=Full-Stack%20Prototype%20Discussion" className="contact__path contact__path--fullstack">
             <Code2 size={18} aria-hidden="true" />
-            <strong>I want to discuss a full-stack prototype or collaboration</strong>
-            <span>Product prototypes, dashboards, workflow tools, APIs, and AI-assisted build work.</span>
-            <em>Select Full-Stack path <ArrowRight size={14} aria-hidden="true" /></em>
+            <strong>I want to turn a workflow into a working system</strong>
+            <span>Prototype sprint, dashboard, internal assistant, workflow tool, API, or deployed custom application.</span>
+            <em>Select build path <ArrowRight size={14} aria-hidden="true" /></em>
           </a>
         </div>
 

src/components/ContactPage.jsx

@@ -1,28 +1,25 @@
 import { CalendarCheck, BriefcaseBusiness } from "lucide-react";
-import { useTranslation } from "../context/LangContext.jsx";
 import { ArtifactMap, FeaturePill, PageHero } from "./system/SystemVisuals.jsx";
 import Contact from "./Contact.jsx";
 
 const contactArtifact = {
   inputLabel: "Intent",
   outputLabel: "Next path",
-  inputs: ["AI workflow", "MedTech role", "Prototype idea"],
-  outputs: ["Focused email", "Proof route", "Working conversation"],
+  inputs: ["Workflow audit", "Automation pilot", "Prototype idea"],
+  outputs: ["Focused scope", "Proof route", "Implementation conversation"],
 };
 
-const contactPills = ["AI audit", "MedTech roles", "Product prototype", "Workflow discussion"];
+const contactPills = ["AI Workflow Audit", "One workflow to automate", "Prototype sprint", "Regulated operations"];
 
 export default function ContactPage() {
-  const { t } = useTranslation();
-
   return (
     <>
       <PageHero
         eyebrow="Contact"
-        title="Work With Me"
-        subtitle="Choose the path that fits: AI workflow automation, MedTech product/project roles, or full-stack prototype collaboration."
-        primaryCta={{ label: "Choose Contact Path", href: "#contact", icon: <BriefcaseBusiness size={15} className="icon ml-1" aria-hidden="true" /> }}
-        secondaryCta={{ label: t("site.cta.startAudit"), href: "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request", icon: <CalendarCheck size={15} className="icon ml-1" aria-hidden="true" /> }}
+        title="Discuss One Workflow to Automate"
+        subtitle="Use this page to start an AI Workflow Opportunity Audit, scope an automation pilot, or discuss a prototype that turns one fragmented process into a practical system."
+        primaryCta={{ label: "Book an AI Workflow Audit", href: "mailto:romazuryk@proton.me?subject=AI%20Workflow%20Audit%20Request", icon: <CalendarCheck size={15} className="icon ml-1" aria-hidden="true" /> }}
+        secondaryCta={{ label: "Choose Contact Path", href: "#contact", icon: <BriefcaseBusiness size={15} className="icon ml-1" aria-hidden="true" /> }}
         visualType="contact"
         scrollTargetId="contact"
       >
@@ -32,7 +29,7 @@ export default function ContactPage() {
           </div>
           <ArtifactMap
             accent="ai"
-            title="Contact intent becomes the right collaboration path"
+            title="Contact intent becomes audit scope, pilot path, or proof route"
             {...contactArtifact}
           />
         </div>

src/components/Footer.jsx

@@ -3,9 +3,9 @@ import { Linkedin, Github, Mail, ArrowUpRight } from "lucide-react";
 import { useTranslation } from "../context/LangContext.jsx";
 
 const NAV_LINKS = [
-  { label: "AI Solutions", href: "/ai" },
-  { label: "MedTech", href: "/medtech" },
-  { label: "Full-Stack", href: "/fullstack" },
+  { label: "AI Consulting", href: "/ai" },
+  { label: "Regulated Proof", href: "/medtech" },
+  { label: "Build Proof", href: "/fullstack" },
   { label: "About", href: "/about" },
   { label: "Contact", href: "/contact" },
 ];