Polish user-app auth, nav, and product UI for Hedena Gold.

Gate profile/orders on login, autofocus OTP, stretch product sheet white, and refresh dialog illustrations to the brand palette.
This commit is contained in:
s.esmaeili
2026-10-15 18:14:14 +03:30
parent ea86636027
commit be2c2ddf21
16 changed files with 1026 additions and 292 deletions
@@ -0,0 +1,37 @@
<svg width="200" height="160" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Soft brand wash -->
<ellipse cx="100" cy="118" rx="78" ry="22" fill="#23493c" fill-opacity="0.06"/>
<circle cx="100" cy="78" r="58" fill="#23493c" fill-opacity="0.07"/>
<circle cx="148" cy="42" r="10" fill="#7A1B33" fill-opacity="0.12"/>
<circle cx="48" cy="52" r="6" fill="#8D6A46" fill-opacity="0.28"/>
<circle cx="162" cy="88" r="4" fill="#23493c" fill-opacity="0.18"/>
<!-- Back card -->
<g transform="translate(58 28) rotate(-8 42 52)">
<rect x="0" y="0" width="84" height="104" rx="14" fill="#FAFAFA" stroke="#ECEDEF" stroke-width="1.5"/>
<rect x="14" y="16" width="36" height="36" rx="18" fill="#FBF2F4"/>
<circle cx="32" cy="30" r="10" fill="#A33C55" fill-opacity="0.55"/>
<path d="M22 48c2.8-6 16.2-6 19 0" stroke="#A33C55" stroke-opacity="0.45" stroke-width="3" stroke-linecap="round"/>
<rect x="14" y="64" width="40" height="7" rx="3.5" fill="#7A1B33" fill-opacity="0.2"/>
<rect x="14" y="78" width="28" height="5" rx="2.5" fill="#ECEDEF"/>
</g>
<!-- Front card -->
<g transform="translate(78 36) rotate(6 42 52)">
<rect x="0" y="0" width="84" height="104" rx="14" fill="#FFFFFF" stroke="#23493c" stroke-opacity="0.14" stroke-width="1.5"/>
<rect x="0" y="0" width="84" height="104" rx="14" fill="#23493c" fill-opacity="0.03"/>
<rect x="14" y="16" width="36" height="36" rx="18" fill="#E8EFEC"/>
<circle cx="32" cy="30" r="10" fill="#23493c" fill-opacity="0.55"/>
<path d="M22 48c2.8-6 16.2-6 19 0" stroke="#23493c" stroke-opacity="0.4" stroke-width="3" stroke-linecap="round"/>
<rect x="14" y="64" width="44" height="7" rx="3.5" fill="#8D6A46"/>
<rect x="14" y="78" width="30" height="5" rx="2.5" fill="#ECEDEF"/>
</g>
<!-- Gold seal / coin accent -->
<g transform="translate(138 96)">
<circle cx="18" cy="18" r="18" fill="#8D6A46"/>
<circle cx="18" cy="18" r="13.5" fill="#F4C57A" fill-opacity="0.35"/>
<circle cx="18" cy="18" r="11" fill="none" stroke="#FAFAFA" stroke-opacity="0.55" stroke-width="1.25"/>
<path d="M18 10.5v15M12.5 18h11" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@@ -0,0 +1,42 @@
<svg width="200" height="150" viewBox="0 0 200 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Soft brand wash -->
<ellipse cx="100" cy="122" rx="72" ry="18" fill="#23493c" fill-opacity="0.06"/>
<circle cx="100" cy="72" r="54" fill="#23493c" fill-opacity="0.07"/>
<circle cx="44" cy="40" r="5" fill="#8D6A46" fill-opacity="0.3"/>
<circle cx="158" cy="48" r="7" fill="#7A1B33" fill-opacity="0.12"/>
<!-- Door frame -->
<rect x="62" y="28" width="76" height="92" rx="10" fill="#FFFFFF" stroke="#23493c" stroke-opacity="0.16" stroke-width="1.75"/>
<rect x="62" y="28" width="76" height="92" rx="10" fill="#23493c" fill-opacity="0.04"/>
<!-- Open door (hinged left, swung out) -->
<path
d="M72 36h28c1.1 0 2 .9 2 2v76c0 1.1-.9 2-2 2H72c-1.1 0-2-.9-2-2V38c0-1.1.9-2 2-2z"
fill="#E8EFEC"
/>
<path
d="M100 36l34 8v64l-34 8V36z"
fill="#23493c"
fill-opacity="0.12"
stroke="#23493c"
stroke-opacity="0.22"
stroke-width="1.25"
/>
<path d="M118 72h8" stroke="#8D6A46" stroke-width="3" stroke-linecap="round"/>
<!-- Exit arrow -->
<g transform="translate(128 58)">
<circle cx="22" cy="22" r="20" fill="#7A1B33"/>
<path
d="M12 22h16M22 14l8 8-8 8"
stroke="#FAFAFA"
stroke-width="2.4"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
</g>
<!-- Soft ground line -->
<path d="M48 128h104" stroke="#ECEDEF" stroke-width="2" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB