diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 99ef411..aa17574 100644 --- a/src/assets/css/main.css +++ b/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); } diff --git a/src/assets/css/market-pages.css b/src/assets/css/market-pages.css index 09752eb..997ed0e 100644 --- a/src/assets/css/market-pages.css +++ b/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; + } +} diff --git a/src/assets/css/navigation.css b/src/assets/css/navigation.css index fc7558f..c5f92d0 100644 --- a/src/assets/css/navigation.css +++ b/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)); diff --git a/src/assets/css/page-hero.css b/src/assets/css/page-hero.css index 57b0e26..4f6e7d1 100644 --- a/src/assets/css/page-hero.css +++ b/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; } diff --git a/src/assets/css/visual-system.css b/src/assets/css/visual-system.css index d6ceb8a..9bc16d9 100644 --- a/src/assets/css/visual-system.css +++ b/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; diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx index a669ce3..14ffb8d 100644 --- a/src/components/Contact.jsx +++ b/src/components/Contact.jsx @@ -30,21 +30,21 @@ const Contact = () => {
diff --git a/src/components/ContactPage.jsx b/src/components/ContactPage.jsx index 1844981..83b3c5d 100644 --- a/src/components/ContactPage.jsx +++ b/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 ( <>