diff --git a/src/pages/homepage-mock.astro b/src/pages/homepage-mock.astro
new file mode 100644
index 0000000..510ec8d
--- /dev/null
+++ b/src/pages/homepage-mock.astro
@@ -0,0 +1,564 @@
+---
+/**
+ * High-fidelity homepage design mock — isolated from production.
+ * Open at: http://localhost:4321/homepage-mock
+ */
+import "../styles/homepage-mock.css";
+
+const linkedin = "https://www.linkedin.com/in/saharpak/";
+const techImmigrants = "https://www.youtube.com/@TechImmigrants";
+
+const badges = [
+ "Platform Products",
+ "APIs",
+ "Tech Community",
+ "Open Source",
+ "Product Experiments",
+ "Finland",
+];
+
+const pillars = [
+ {
+ label: "My foundation",
+ title: "Professional Platform Work",
+ text: "At RELEX, I worked on platform products, APIs, integrations, and technical collaboration in high-scale, ambiguous environments.",
+ nuance: null,
+ tags: ["Platform products", "APIs", "Integrations", "Scale", "Ambiguity"],
+ accent: "blue" as const,
+ icon: "layers",
+ },
+ {
+ label: "My discovery engine",
+ title: "Tech Community Insight",
+ text: "Through Tech Immigrants, I stay close to a tech community focused on career growth, immigration, interview preparation, and securing opportunities.",
+ nuance: "A broader tech community — many members are developers, but not only.",
+ tags: ["Career growth", "Immigration", "Interview prep", "Community signals"],
+ accent: "teal" as const,
+ icon: "signal",
+ },
+ {
+ label: "My way of working",
+ title: "Builder Mindset",
+ text: "I start from user pain points and feedback, then validate with small experiments before scaling into products, open-source projects, or platforms.",
+ nuance: null,
+ tags: ["User signals", "Validation", "MVPs", "Open source"],
+ accent: "violet" as const,
+ icon: "build",
+ },
+];
+
+const processSteps = [
+ { n: 1, label: "Community signals", accent: "teal", icon: "chat", highlight: false },
+ { n: 2, label: "Data & analysis", accent: "blue", icon: "chart", highlight: false },
+ { n: 3, label: "Patterns & opportunities", accent: "blue", icon: "grid", highlight: false },
+ { n: 4, label: "Start small", accent: "violet", icon: "seed", highlight: false },
+ { n: 5, label: "Validate with users", accent: "violet", icon: "check", highlight: false },
+ { n: 6, label: "Build what works", accent: "gold", icon: "rocket", highlight: true },
+];
+
+const projects = [
+ {
+ title: "Community Intelligence Dashboard",
+ signal: "recurring community questions",
+ text: "Analyzed community data to understand recurring pain points, needs, and patterns.",
+ status: "Demo",
+ statusBg: "bg-mock-violet-soft text-mock-violet",
+ accent: "violet" as const,
+ },
+ {
+ title: "CV → CV Builder",
+ signal: "CVs failing in real applications",
+ text: "Started by solving the CV problem manually, then turned it into an open-source project with contributors.",
+ status: "Open Source",
+ statusBg: "bg-mock-green-soft text-mock-green",
+ accent: "green" as const,
+ link: "https://cvroast.dev",
+ },
+ {
+ title: "Demo Day → ProductBuilders.app",
+ signal: "builders wanted feedback before a platform",
+ text: "Validated builder interest through Demo Days before building a full platform.",
+ status: "Pilot",
+ statusBg: "bg-mock-blue-soft text-mock-blue",
+ accent: "blue" as const,
+ },
+ {
+ title: "Tech Immigrants",
+ signal: "navigating tech careers across borders",
+ text: "A 53K+ tech community helping people navigate career growth, immigration, and tech opportunities.",
+ status: "Live",
+ statusBg: "bg-mock-teal-soft text-mock-teal",
+ accent: "teal" as const,
+ link: techImmigrants,
+ },
+ {
+ title: "Persian Clip Finder",
+ signal: "long videos, short attention",
+ text: "Repurposes long Persian tech videos into searchable short clips.",
+ status: "Internal Tool",
+ statusBg: "bg-mock-surface-soft text-mock-text-muted",
+ accent: "teal" as const,
+ },
+ {
+ title: "Trillion Operator Agent",
+ signal: "scattered projects and decisions",
+ text: "A local-first operator workspace for projects, content, and decision-making.",
+ status: "Internal Tool",
+ statusBg: "bg-mock-surface-soft text-mock-text-muted",
+ accent: "violet" as const,
+ },
+];
+
+const experienceCards = [
+ {
+ title: "Platform capabilities",
+ text: "APIs, integrations, internal/external developer workflows",
+ accent: "blue" as const,
+ icon: "plug",
+ },
+ {
+ title: "Technical collaboration",
+ text: "Working with engineering, architecture, QA, and customer-facing teams",
+ accent: "teal" as const,
+ icon: "people",
+ },
+ {
+ title: "Ambiguity at scale",
+ text: "Turning complex technical needs into product decisions",
+ accent: "violet" as const,
+ icon: "compass",
+ },
+];
+
+const stats = [
+ { value: "53K+", label: "Cross-platform reach", color: "text-mock-teal" },
+ { value: "190+", label: "Episodes", color: "text-mock-blue" },
+ { value: "400K+", label: "YouTube views", color: "text-mock-violet" },
+];
+
+const accentStyles = {
+ blue: {
+ border: "border-t-mock-blue",
+ label: "text-mock-blue",
+ iconBg: "bg-mock-blue-soft",
+ iconStroke: "#2563EB",
+ tagBg: "bg-mock-blue-soft text-mock-blue",
+ circleBorder: "border-mock-blue",
+ },
+ teal: {
+ border: "border-t-mock-teal",
+ label: "text-mock-teal",
+ iconBg: "bg-mock-teal-soft",
+ iconStroke: "#0F766E",
+ tagBg: "bg-mock-teal-soft text-mock-teal",
+ circleBorder: "border-mock-teal",
+ },
+ violet: {
+ border: "border-t-mock-violet",
+ label: "text-mock-violet",
+ iconBg: "bg-mock-violet-soft",
+ iconStroke: "#7C3AED",
+ tagBg: "bg-mock-violet-soft text-mock-violet",
+ circleBorder: "border-mock-violet",
+ },
+ green: {
+ border: "border-t-mock-green",
+ label: "text-mock-green",
+ iconBg: "bg-mock-green-soft",
+ iconStroke: "#4D7C0F",
+ tagBg: "bg-mock-green-soft text-mock-green",
+ circleBorder: "border-mock-green",
+ },
+ gold: {
+ border: "border-t-mock-gold",
+ label: "text-mock-gold",
+ iconBg: "bg-mock-gold/15",
+ iconStroke: "#D6A84F",
+ tagBg: "bg-mock-gold/15 text-mock-gold",
+ circleBorder: "border-mock-gold",
+ },
+};
+---
+
+
+
+
+
+
+
+ Homepage Mock — Sahar Pakseresht (Design Preview)
+
+
+
+
+
+
+
+
+ DESIGN MOCK — not production ·
View current homepage →
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Product Manager at Scale · Community Builder by Passion · Builder by Practice
+
+
+
+ I combine platform product experience, community insight, and a builder mindset to turn real signals into products.
+
+
+
+
+
+ {badges.map((badge) => (
+ {badge}
+ ))}
+
+
+
+
+
+
+
Building ProductBuilders.app
+
+
+
+
+
+
+
+
+
+
+
+
+ {pillars.map((pillar) => {
+ const s = accentStyles[pillar.accent];
+ return (
+
+
+ {pillar.icon === "layers" && (
+
+
+
+ )}
+ {pillar.icon === "signal" && (
+
+
+
+
+ )}
+ {pillar.icon === "build" && (
+
+
+
+ )}
+
+
+ {pillar.label}
+ {pillar.title}
+ {pillar.text}
+ {pillar.nuance && (
+ {pillar.nuance}
+ )}
+
+ {pillar.tags.map((tag) => (
+ {tag}
+ ))}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ How I turn signals into products
+
+
+
+ {processSteps.map((step) => {
+ const s = accentStyles[step.accent as keyof typeof accentStyles];
+ return (
+
+
+ {step.icon === "chat" && (
+
+
+
+ )}
+ {step.icon === "chart" && (
+
+
+
+ )}
+ {step.icon === "grid" && (
+
+
+
+ )}
+ {step.icon === "seed" && (
+
+
+
+ )}
+ {step.icon === "check" && (
+
+
+
+ )}
+ {step.icon === "rocket" && (
+
+
+
+ )}
+
+
0{step.n}
+
{step.label}
+
+ );
+ })}
+
+
+
+ I follow user signals first, then validate, and only then build.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ From signals to products
+
+
+ These are not random side projects. They are product responses shaped by real user signals and validation.
+
+
+
+
+ {projects.map((project) => {
+ const s = accentStyles[project.accent];
+ return (
+
+
+ Signal: {project.signal}
+
+ {project.title}
+ {project.text}
+
+
{project.status}
+ {project.link ? (
+
+ Visit →
+
+ ) : (
+
—
+ )}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
Experience
+
+ Professional product work at scale
+
+
+ My professional foundation comes from working on platform and integration-heavy products at RELEX, close to APIs, technical teams, enterprise customers, and ambiguous product problems.
+
+
+ I'm comfortable working on products that are not always visible to end users, but are critical for other teams, customers, partners, and developers to build on top of.
+
+
+
+
+ {experienceCards.map((card) => {
+ const s = accentStyles[card.accent];
+ return (
+
+
+ {card.icon === "plug" && (
+
+
+
+ )}
+ {card.icon === "people" && (
+
+
+
+ )}
+ {card.icon === "compass" && (
+
+
+
+ )}
+
+
+
{card.title}
+
{card.text}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Want to build, partner, or talk?
+
+
+ I'm open to collaborations around product strategy, tech communities, AI tools, immigrant tech talent, events, and community-led products.
+
+
+
+
+
+
+
+
+
+
+
+
Built by Sahar in Finland.
+
© {new Date().getFullYear()} Sahar Pakseresht · Design mock
+
+
+
+
+
+
+
diff --git a/src/styles/homepage-mock.css b/src/styles/homepage-mock.css
new file mode 100644
index 0000000..ac6cd49
--- /dev/null
+++ b/src/styles/homepage-mock.css
@@ -0,0 +1,337 @@
+/* homepage-mock.css — isolated design mock styles, not used by production */
+
+@import "tailwindcss";
+
+@theme {
+ --color-mock-bg: #F8F7F2;
+ --color-mock-surface: #FFFFFF;
+ --color-mock-surface-soft: #EEF7F4;
+ --color-mock-text: #102033;
+ --color-mock-text-muted: #5F6F7A;
+ --color-mock-teal: #0F766E;
+ --color-mock-teal-soft: #D9F0EA;
+ --color-mock-blue: #2563EB;
+ --color-mock-blue-soft: #DBEAFE;
+ --color-mock-green: #4D7C0F;
+ --color-mock-green-soft: #E7F3D4;
+ --color-mock-violet: #7C3AED;
+ --color-mock-violet-soft: #EDE9FE;
+ --color-mock-border: #D8E3E1;
+ --color-mock-gold: #D6A84F;
+
+ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --font-mono: "JetBrains Mono", "Fira Code", monospace;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body.mock-page {
+ background-color: var(--color-mock-bg);
+ color: var(--color-mock-text);
+ font-family: var(--font-sans);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.mock-page ::selection {
+ background-color: var(--color-mock-teal);
+ color: white;
+}
+
+/* ---- Nav ---- */
+.mock-nav {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background: color-mix(in srgb, var(--color-mock-bg) 82%, transparent);
+ border-bottom: 1px solid var(--color-mock-border);
+}
+
+/* ---- Blobs ---- */
+.mock-blob {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(80px);
+ pointer-events: none;
+ z-index: 0;
+}
+
+.mock-blob-teal {
+ background: color-mix(in srgb, var(--color-mock-teal) 18%, transparent);
+}
+
+.mock-blob-violet {
+ background: color-mix(in srgb, var(--color-mock-violet) 14%, transparent);
+}
+
+/* ---- Buttons ---- */
+.mock-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.625rem 1.25rem;
+ border-radius: 9999px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.25;
+ transition: all 0.2s ease;
+ text-decoration: none;
+ white-space: nowrap;
+}
+
+.mock-btn-primary {
+ background: var(--color-mock-teal);
+ color: white;
+}
+
+.mock-btn-primary:hover {
+ background: color-mix(in srgb, var(--color-mock-teal) 88%, black);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 14px color-mix(in srgb, var(--color-mock-teal) 25%, transparent);
+}
+
+.mock-btn-outline {
+ background: transparent;
+ color: var(--color-mock-text);
+ border: 1.5px solid var(--color-mock-text);
+}
+
+.mock-btn-outline:hover {
+ background: var(--color-mock-text);
+ color: white;
+}
+
+.mock-btn-ghost {
+ background: transparent;
+ color: var(--color-mock-blue);
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.mock-btn-ghost:hover {
+ color: var(--color-mock-teal);
+}
+
+.mock-btn-white {
+ background: white;
+ color: var(--color-mock-text);
+}
+
+.mock-btn-white:hover {
+ background: var(--color-mock-teal-soft);
+}
+
+.mock-btn-ghost-light {
+ background: transparent;
+ color: white;
+ border: 1.5px solid color-mix(in srgb, white 30%, transparent);
+}
+
+.mock-btn-ghost-light:hover {
+ border-color: var(--color-mock-teal-soft);
+ color: var(--color-mock-teal-soft);
+}
+
+/* ---- Badges / tags ---- */
+.mock-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.3rem 0.75rem;
+ border-radius: 9999px;
+ font-family: var(--font-mono);
+ font-size: 0.6875rem;
+ font-weight: 500;
+ letter-spacing: 0.01em;
+ background: var(--color-mock-surface);
+ border: 1px solid var(--color-mock-border);
+ color: var(--color-mock-text);
+}
+
+.mock-tag {
+ display: inline-flex;
+ padding: 0.2rem 0.625rem;
+ border-radius: 9999px;
+ font-size: 0.6875rem;
+ font-weight: 500;
+}
+
+/* ---- Cards ---- */
+.mock-card {
+ background: var(--color-mock-surface);
+ border: 1px solid var(--color-mock-border);
+ border-radius: 1rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.mock-card:hover {
+ transform: translateY(-2px);
+ box-shadow:
+ 0 8px 24px color-mix(in srgb, var(--color-mock-text) 6%, transparent),
+ 0 2px 6px color-mix(in srgb, var(--color-mock-text) 4%, transparent);
+}
+
+.mock-pillar {
+ border-top-width: 3px;
+ border-top-style: solid;
+ padding: 1.5rem;
+}
+
+.mock-icon-wrap {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 0.75rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+/* ---- Process ---- */
+.mock-process-track {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 0.5rem;
+}
+
+.mock-process-track::before {
+ content: "";
+ position: absolute;
+ top: 1.25rem;
+ left: 8%;
+ right: 8%;
+ height: 2px;
+ background: linear-gradient(
+ 90deg,
+ var(--color-mock-teal-soft),
+ var(--color-mock-blue-soft),
+ var(--color-mock-violet-soft),
+ var(--color-mock-gold)
+ );
+ z-index: 0;
+}
+
+.mock-process-step {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 0.5rem;
+}
+
+.mock-process-circle {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 50%;
+ background: var(--color-mock-surface);
+ border: 2px solid var(--color-mock-border);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px color-mix(in srgb, var(--color-mock-text) 5%, transparent);
+}
+
+.mock-process-circle.highlight {
+ border-color: var(--color-mock-gold);
+ box-shadow:
+ 0 0 0 3px color-mix(in srgb, var(--color-mock-gold) 25%, transparent),
+ 0 2px 8px color-mix(in srgb, var(--color-mock-gold) 15%, transparent);
+}
+
+/* ---- Project status ---- */
+.mock-status {
+ display: inline-flex;
+ padding: 0.15rem 0.5rem;
+ border-radius: 9999px;
+ font-family: var(--font-mono);
+ font-size: 0.625rem;
+ font-weight: 500;
+}
+
+/* ---- Stat cards ---- */
+.mock-stat-value {
+ font-size: clamp(1.75rem, 4vw, 2.25rem);
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ line-height: 1;
+}
+
+/* ---- Section labels ---- */
+.mock-label {
+ font-family: var(--font-mono);
+ font-size: 0.6875rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+
+/* ---- Portrait chip ---- */
+.mock-portrait-chip {
+ position: absolute;
+ bottom: -0.5rem;
+ left: -0.75rem;
+ padding: 0.375rem 0.75rem;
+ border-radius: 9999px;
+ font-family: var(--font-mono);
+ font-size: 0.6875rem;
+ font-weight: 500;
+ background: var(--color-mock-teal-soft);
+ color: var(--color-mock-teal);
+ border: 1px solid var(--color-mock-border);
+ box-shadow: 0 4px 12px color-mix(in srgb, var(--color-mock-teal) 12%, transparent);
+ white-space: nowrap;
+}
+
+.mock-portrait-chip::before {
+ content: "";
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--color-mock-teal);
+ margin-right: 0.375rem;
+ animation: mock-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mock-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+/* ---- Mobile process ---- */
+@media (max-width: 767px) {
+ .mock-process-track {
+ grid-template-columns: 1fr;
+ gap: 0;
+ padding-left: 1.25rem;
+ border-left: 2px solid var(--color-mock-border);
+ }
+
+ .mock-process-track::before {
+ display: none;
+ }
+
+ .mock-process-step {
+ flex-direction: row;
+ text-align: left;
+ align-items: flex-start;
+ gap: 0.875rem;
+ padding-bottom: 1.25rem;
+ }
+
+ .mock-process-step:last-child {
+ padding-bottom: 0;
+ }
+}
+
+@media (max-width: 639px) {
+ .mock-nav-links {
+ display: none;
+ }
+}