/* global React */ // ───────────────────────────────────────────────────────────────────────── // SECTION 1 — HERO (fullscreen video, copy bottom-left) // ───────────────────────────────────────────────────────────────────────── function Hero({ videoOn }) { return (
{/* video bg */} {videoOn && ( )} {/* gradient veil */}
{/* corner brackets */} {/* main copy bottom-left */}
Ayen — Operator's Portfolio / 2026

Attention
Means nothing
without action.

I design landing pages that help people look clearer, feel more trustworthy, and guide visitors toward action.

Landing Page Design · Conversion Flow · Funnel Strategy
{/* scroll hint */}
SCROLL
); } function Brackets() { const c = { color: 'var(--teal)', position: 'absolute', width: 28, height: 28, zIndex: 5 }; return (
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 2 — PROBLEM (vertical storytelling, drop-off vibe) // ───────────────────────────────────────────────────────────────────────── function Problem() { const steps = [ { l: 'People see your content', v: 1.0 }, { l: 'They click your link', v: 0.72 }, { l: 'They visit your page', v: 0.41 }, { l: 'They leave', v: 0.08 } ]; return (
02 — The Problem
{/* LEFT — setup → punchline → soft truth (whisper) */}

You may already have Attention.

But attention alone does not pay.
Not because your offer is bad.
But because the experience feels unclear.
{/* RIGHT — drop-off list with progress bars + percentages */}
    {steps.map((s, i) => (
  1. 0{i+1} {s.l}
    {(s.v * 100).toFixed(0)}%
    2. ))}
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 3 — THE LEAK (fullscreen funnel video, zero text) // ───────────────────────────────────────────────────────────────────────── function Leak() { const sectionRef = useRef(null); const [loadVideo, setLoadVideo] = useState(false); // lazy-load funnel video only when section is about to enter viewport useEffect(() => { if (!sectionRef.current) return; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { setLoadVideo(true); obs.disconnect(); } }); }, { rootMargin: '400px 0px' }); obs.observe(sectionRef.current); return () => obs.disconnect(); }, []); return (
{loadVideo && ( )} {/* top + bottom fade for smooth transition into/out of neighbouring sections */}
{/* funnel stage labels — track the video's color decay (teal → amber → red) */}
{[ { l: 'Interested', y: '39%', c: 'var(--teal)' }, { l: 'Confused', y: '59%', c: 'var(--teal)' }, { l: 'Hesitant', y: '75.5%', c: 'var(--amber)' }, { l: 'Gone', y: '87.5%', c: 'var(--red)' } ].map((s) => (
{s.l}
))}
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 4 — DIAGNOSIS (floating glass cards, asymmetric) // ───────────────────────────────────────────────────────────────────────── function Diagnosis() { const cards = [ { n: '01', t: 'Unclear message', d: 'Visitors leave within 5 seconds because they cannot decide what the page is about.', tx: '+ message → ambiguous', col: 1, row: 1, span: 1 }, { n: '02', t: 'Weak flow', d: 'Sections do not build on each other. Trust resets between every block.', tx: '+ flow → no narrative', col: 2, row: 1, span: 1 }, { n: '03', t: 'Generic copy', d: 'Copy could describe any business. Nothing belongs only to you.', tx: '+ copy → interchangeable', col: 3, row: 1, span: 1 }, { n: '04', t: 'Weak CTA', d: 'The action lacks weight, context, or a reason to choose now over later.', tx: '+ cta → unanchored', col: 1, row: 2, span: 2 }, { n: '05', t: 'No follow-up path', d: 'A page that ends is a page that forgets you. Nothing carries the relationship forward.', tx: '+ retention → none', col: 3, row: 2, span: 1 } ]; return (
04 — Diagnosis

The same five symptoms,
over And over.

When I audit a struggling page, the cause is rarely creative. It is structural. Below is the pattern I find inside ~80% of the work I review.

{cards.map((c, i) => (
))}
); } function DiagCard({ n, t, d, tx }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} className="glass" style={{ position: 'relative', height: '100%', padding: 28, display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden', borderColor: hover ? 'rgba(94,234,212,0.45)' : 'var(--glass-bd)', boxShadow: hover ? '0 0 40px -10px rgba(94,234,212,0.4), inset 0 0 30px -10px rgba(94,234,212,0.2)' : 'none', transition: 'all 360ms cubic-bezier(.2,.7,.1,1)', transform: hover ? 'translateY(-3px)' : 'translateY(0)' }} > {/* spotlight on hover */} {hover && (
)}
{n} FLAG
{t}

{d}

{tx}
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 5 — CORE BELIEF (poster, huge type, fullscreen feel) // ───────────────────────────────────────────────────────────────────────── function Belief() { return (
{/* faint glow halo */}
05 — Core Belief
{/* setup — single statement, dim */}
A landing page is not just design.
{/* hairline divider — leads the eye to the punchline */}
{/* punchline — huge horizontal banner, full container width */}

Sales Conversation.

{/* 2-col below: left = 4 questions, right = ending */}
{/* LEFT — 4 questions */}
// the four questions a page must answer
    {['Who are you?', 'Can you help me?', 'Why should I trust you?', 'What should I do next?'].map((q, i) => (
  • {String(i+1).padStart(2, '0')} “{q}”
    • ))}
{/* RIGHT — ending statement, framed as a pulled quote */}
{/* big teal opening quote — hangs above the statement */}
When things feel Clear,
people move Faster.
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 6 — WHAT I DO (holographic system map) // ───────────────────────────────────────────────────────────────────────── function System() { const nodes = [ { l: 'Traffic', d: 'social, ads, search', k: 'in' }, { l: 'Landing Page', d: 'first impression', k: 'core' }, { l: 'Trust', d: 'proof + transparency', k: 'mid' }, { l: 'Lead', d: 'qualified intent', k: 'mid' }, { l: 'Follow Up', d: 'sequence + nurture', k: 'mid' }, { l: 'Sale', d: 'value exchanged', k: 'out' } ]; return (
{/* blueprint grid */}
{/* eyebrow — centered */}
06 — What I Actually Do
{/* title — centered */}

I design The path from
Attention to Action

{/* TWO-COLUMN: system map (left) + stack (right) */}
{/* LEFT — vertical system map, Landing Page is the protagonist */}
{/* central vertical line connecting all nodes */}
{/* traveling pulse — attention flowing from top to bottom */}
{nodes.map((n, i) => )}
{/* RIGHT — stack list, items distribute to match system map height */}
// the stack
    {[ ['Messaging', 'positioning, hierarchy, hook'], ['Structure', 'sections, sequence, rhythm'], ['Trust', 'proof, signals, transparency'], ['Action', 'CTAs, friction, momentum'], ['Follow-up', 'email, retargeting, retention'] ].map(([k, v]) => (
  • {k} {v}
    • ))}
{/* centered closing paragraph */}

Not just how the page looks.
But what people understand,
what they trust, and what they do next.

); } // kept for rollback safety — no longer rendered function SystemNode({ l, d, k, i, total }) { const isCore = k === 'core'; const isOut = k === 'out'; return (
{String(i+1).padStart(2,'0')}
{l}
{d}
); } function SystemRow({ l, d, k, i, total }) { const isCore = k === 'core'; const isOut = k === 'out'; const ring = isOut ? 'var(--green)' : 'var(--teal)'; return (
{/* mono number */} {String(i+1).padStart(2, '0')} {/* circle node — Landing Page is BIG */}
{/* label + caption */}
{l} {isCore && ( // core )}
{d}
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 8 — ABOUT (editorial) // ───────────────────────────────────────────────────────────────────────── function About() { return (
08 — About
{/* portrait — labels & corners are baked into the image itself */}
Ayen — portrait {/* cinematic teal scan sweep — kept as subtle overlay */}
{/* body — flex column so photo can fill remaining space and bottom-align with left portrait */}

I design pages that help people Understand.

I study how businesses get attention, build trust, and guide people toward action.

That is how I approach landing pages.

Not just visually.{' '} Strategically.

{/* second portrait — fills remaining space, bottom-aligns with left portrait */}
Ayen — second portrait {/* subtle teal scan overlay (matches the main portrait) */}
); } // ───────────────────────────────────────────────────────────────────────── // SECTION 9 — CONTACT / FINAL CTA (ambient glow, huge negative space) // ───────────────────────────────────────────────────────────────────────── function Contact() { return (
{/* ambient glow */}
{/* dust particles */}
{Array.from({ length: 16 }).map((_, i) => { const x = (i * 53 + 17) % 100; const y = (i * 71 + 23) % 100; const d = 2 + ((i * 13) % 4); return ( ); })}
09 — From here, action

Clarity changes
how people Respond.

  • Clear Message.
  • Clear Trust.
  • Clear Direction.

That is what good pages do.

▌ From attention  →  to action
); }