wiggleverse-ecomm-content/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-landing.jsx

// hf-landing.jsx — Landing (PUC-1), Direction A hi-fi. Desktop + mobile.
const { HFScreen: LScreen, HFWordmark: LWordmark, HFTopBar: LTopBar, HFFooter: LFooter,
  HFPrimary: LPrimary, HF_H: L, HF_DSC: LDS } = window;
const { Soul: LSoul, Eyebrow: LEyebrow } = LDS;

function NavLinks({ mobile = false }) {
  if (mobile) return <a className="lk" href="#" style={{ fontFamily: L.disp, fontWeight: 500, fontSize: 14, color: L.star }}>Log in</a>;
  return (
    <nav style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
      <a className="lk" href="#" style={{ fontFamily: L.body, fontSize: 14, color: L.soft }}>How it works</a>
      <a className="lk" href="#" style={{ fontFamily: L.body, fontSize: 14, color: L.soft }}>Open Core</a>
      <a className="lk" href="#" style={{ fontFamily: L.disp, fontWeight: 500, fontSize: 14, color: L.star }}>Log in</a>
    </nav>
  );
}

// trust row — three honest promises, hairline-separated (no icons-as-slop)
function Promises({ device }) {
  const items = [
    ['No trial clock', 'Your storefront never expires or locks.'],
    ['No plan wall', 'We take only what it takes to run.'],
    ['Your data, yours', "Nothing collected you didn't agree to give."],
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: device === 'desktop' ? 'repeat(3, 1fr)' : '1fr',
      gap: device === 'desktop' ? 0 : 14, marginTop: device === 'desktop' ? 44 : 28,
      borderTop: `1px solid ${L.hair}`, paddingTop: device === 'desktop' ? 24 : 20,
    }}>
      {items.map(([t, d], i) => (
        <div key={t} style={{
          padding: device === 'desktop' ? '0 22px' : 0,
          borderLeft: device === 'desktop' && i > 0 ? `1px solid ${L.hair}` : 'none',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
            <span aria-hidden="true" style={{ color: L.gold, fontSize: 10 }}>◆</span>
            <span style={{ fontFamily: L.disp, fontWeight: 500, fontSize: 14.5, color: L.star }}>{t}</span>
          </div>
          <p style={{ fontFamily: L.body, fontSize: 13, lineHeight: 1.5, color: L.mute, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  );
}

function HFLanding({ device = 'desktop' }) {
  const desktop = device === 'desktop';
  return (
    <LScreen horizon>
      <LTopBar pad={desktop ? '0 44px' : '0 22px'}
        left={<LWordmark size={desktop ? 26 : 22} />} right={<NavLinks mobile={!desktop} />} />
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center',
        padding: desktop ? '0 44px' : '0 24px',
      }}>
        <div style={{ maxWidth: desktop ? 680 : '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <LEyebrow style={{ margin: '0 0 20px' }}>One storefront, fully yours</LEyebrow>
          <h1 style={{
            fontFamily: L.disp, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.02,
            fontSize: desktop ? 62 : 36, color: L.star, margin: '0 0 22px',
          }}>
            Sell online,<br /><span style={{ color: L.gold }}>honestly.</span>
          </h1>
          <p style={{
            fontFamily: L.body, fontSize: desktop ? 18.5 : 15.5, lineHeight: 1.6, color: L.soft,
            maxWidth: 520, margin: '0 0 32px', textWrap: 'pretty',
          }}>
            Claim the one storefront that's yours on a platform that takes only what it takes
            to run — no trial countdown, no plan wall, no data you didn't agree to give.
          </p>
          <div style={{ display: 'flex', flexDirection: desktop ? 'row' : 'column', gap: 14, alignItems: 'center', width: desktop ? 'auto' : '100%' }}>
            <div style={{ width: desktop ? 'auto' : '100%' }}><LPrimary full={!desktop}>Create your storefront →</LPrimary></div>
            <a className="lk" href="#" style={{ fontFamily: L.body, fontSize: 14.5, color: L.mute }}>
              Already selling with us? <span style={{ color: L.lilac }}>Log in</span>
            </a>
          </div>
          <div style={{ width: '100%', marginTop: desktop ? 8 : 4 }}><Promises device={device} /></div>
        </div>
      </div>
      <LFooter pad={desktop ? '20px 44px' : '16px 22px'} />
    </LScreen>
  );
}

Object.assign(window, { HFLanding });