typography_increase_heading_subheading_card_font_sizes_by_30_percent
This commit is contained in:
kenilkb
parent
0ef06cf755
commit
8ae446eadc
@ -12,13 +12,13 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ title, subtitle, badge,
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-ink-200">
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<div className="flex items-center gap-2.5 flex-wrap">
|
||||
<h1 className="text-xl font-bold tracking-tight text-ink-900 truncate">
|
||||
<h1 className="text-xl page-title font-bold tracking-tight text-ink-900 truncate">
|
||||
{title}
|
||||
</h1>
|
||||
{badge && <div className="shrink-0">{badge}</div>}
|
||||
</div>
|
||||
{subtitle && (
|
||||
<p className="text-xs font-medium text-ink-500 truncate max-w-3xl">
|
||||
<p className="text-xs page-subtitle font-medium text-ink-500 truncate max-w-3xl">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -178,7 +178,7 @@ export const AssetCard: React.FC<AssetCardProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold text-ink-900 text-sm leading-snug line-clamp-2 group-hover:text-ink-950 transition-colors" title={asset.title}>
|
||||
<h3 className="font-bold text-ink-900 text-sm asset-card-title leading-snug line-clamp-2 group-hover:text-ink-950 transition-colors" title={asset.title}>
|
||||
{asset.title}
|
||||
</h3>
|
||||
<p className="text-[11px] font-medium text-ink-400 mt-1">
|
||||
|
||||
@ -101,8 +101,8 @@ export const AssetExplorer: React.FC = () => {
|
||||
<div className="space-y-6 text-ink-900">
|
||||
<div className="rounded-2xl bg-ink-0 p-6 md:p-8 border border-ink-200 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-bold text-ink-900 md:text-3xl">Tech4Biz Asset Explorer</h1>
|
||||
<p className="text-sm text-ink-700 max-w-xl">
|
||||
<h1 className="text-2xl explorer-title font-bold text-ink-900 md:text-3xl">Tech4Biz Asset Explorer</h1>
|
||||
<p className="text-sm explorer-desc text-ink-700 max-w-xl">
|
||||
Browse, preview, and download proprietary hardware IP, framework assemblies, and cloud-native building blocks licensed under your master agreements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -258,10 +258,10 @@ export const LoginForm: React.FC = () => {
|
||||
<OrbitingRing />
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight" style={{ color: 'var(--color-ink-800)' }}>
|
||||
<h1 className="text-2xl login-form-title font-extrabold tracking-tight" style={{ color: 'var(--color-ink-800)' }}>
|
||||
{mfaPendingEmail ? 'Verify Identity' : 'Tech4Biz Portal'}
|
||||
</h1>
|
||||
<p className="text-sm mt-1.5" style={{ color: 'var(--color-ink-600)' }}>
|
||||
<p className="text-sm login-form-subtitle mt-1.5" style={{ color: 'var(--color-ink-600)' }}>
|
||||
{mfaPendingEmail
|
||||
? `Code sent to ${mfaPendingEmail}`
|
||||
: 'Enterprise hardware & software asset distribution'}
|
||||
|
||||
@ -594,3 +594,71 @@ body {
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
animation: shimmer 1.5s linear infinite;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TYPOGRAPHY FINE-TUNING (+30% size increase)
|
||||
============================================================ */
|
||||
.page-title {
|
||||
/* text-xl fallback: 1.25rem (20px) * 1.3 = 1.625rem (26px) */
|
||||
font-size: 1.625rem !important;
|
||||
}
|
||||
.page-subtitle {
|
||||
/* text-xs fallback: 0.75rem (12px) * 1.3 = 0.975rem (15.6px) */
|
||||
font-size: 0.975rem !important;
|
||||
}
|
||||
.action-card-title {
|
||||
/* text-lg fallback: 1.125rem (18px) * 1.3 = 1.4625rem (23.4px) */
|
||||
font-size: 1.4625rem !important;
|
||||
}
|
||||
.action-card-desc {
|
||||
/* text-xs fallback: 0.75rem (12px) * 1.3 = 0.975rem (15.6px) */
|
||||
font-size: 0.975rem !important;
|
||||
}
|
||||
.asset-card-title {
|
||||
/* text-sm fallback: 0.875rem (14px) * 1.3 = 1.1375rem (18.2px) */
|
||||
font-size: 1.1375rem !important;
|
||||
}
|
||||
.explorer-title {
|
||||
/* text-2xl fallback: 1.5rem (24px) * 1.3 = 1.95rem (31.2px) */
|
||||
font-size: 1.95rem !important;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.explorer-title {
|
||||
/* md:text-3xl fallback: 1.875rem (30px) * 1.3 = 2.4375rem (39px) */
|
||||
font-size: 2.4375rem !important;
|
||||
}
|
||||
}
|
||||
.explorer-desc {
|
||||
/* text-sm fallback: 0.875rem (14px) * 1.3 = 1.1375rem (18.2px) */
|
||||
font-size: 1.1375rem !important;
|
||||
}
|
||||
.agreement-card-title {
|
||||
/* text-base fallback: 1.0rem (16px) * 1.3 = 1.3rem (20.8px) */
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
.agreement-card-desc {
|
||||
/* text-xs fallback: 0.75rem (12px) * 1.3 = 0.975rem (15.6px) */
|
||||
font-size: 0.975rem !important;
|
||||
}
|
||||
.login-title {
|
||||
/* text-3xl fallback: 1.875rem (30px) * 1.3 = 2.4375rem (39px) */
|
||||
font-size: 2.4375rem !important;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.login-title {
|
||||
/* lg:text-4xl fallback: 2.25rem (36px) * 1.3 = 2.925rem (46.8px) */
|
||||
font-size: 2.925rem !important;
|
||||
}
|
||||
}
|
||||
.login-desc {
|
||||
/* text-sm fallback: 0.875rem (14px) * 1.3 = 1.1375rem (18.2px) */
|
||||
font-size: 1.1375rem !important;
|
||||
}
|
||||
.login-form-title {
|
||||
/* text-2xl fallback: 1.5rem (24px) * 1.3 = 1.95rem (31.2px) */
|
||||
font-size: 1.95rem !important;
|
||||
}
|
||||
.login-form-subtitle {
|
||||
/* text-sm fallback: 0.875rem (14px) * 1.3 = 1.1375rem (18.2px) */
|
||||
font-size: 1.1375rem !important;
|
||||
}
|
||||
|
||||
@ -80,8 +80,8 @@ export const ClientAgreementsPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-extrabold text-ink-900">Mutual Non-Disclosure Agreement (NDA)</h3>
|
||||
<p className="text-xs text-ink-500 mt-1.5 leading-relaxed font-semibold">
|
||||
<h3 className="text-base agreement-card-title font-extrabold text-ink-900">Mutual Non-Disclosure Agreement (NDA)</h3>
|
||||
<p className="text-xs agreement-card-desc text-ink-500 mt-1.5 leading-relaxed font-semibold">
|
||||
Required to protect proprietary IP, silicon designs, and private data sharing during development.
|
||||
</p>
|
||||
|
||||
@ -155,8 +155,8 @@ export const ClientAgreementsPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-extrabold text-ink-900">Master Services Agreement (MSA)</h3>
|
||||
<p className="text-xs text-ink-500 mt-1.5 leading-relaxed font-semibold">
|
||||
<h3 className="text-base agreement-card-title font-extrabold text-ink-900">Master Services Agreement (MSA)</h3>
|
||||
<p className="text-xs agreement-card-desc text-ink-500 mt-1.5 leading-relaxed font-semibold">
|
||||
Defines the commercial framework, SLA guidelines, and consulting provisions for the partnership.
|
||||
</p>
|
||||
|
||||
|
||||
@ -119,10 +119,10 @@ export const DashboardPage = () => {
|
||||
<div className="inline-block px-2 py-0.5 rounded-md bg-ink-50 border border-ink-200 text-xs font-bold text-ink-500 mb-3 shadow-sm">
|
||||
{card.metrics}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-ink-900 mb-2 tracking-tight">
|
||||
<h3 className="text-lg action-card-title font-bold text-ink-900 mb-2 tracking-tight">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-ink-500 leading-normal text-xs font-medium">
|
||||
<p className="text-ink-500 action-card-desc leading-normal text-xs font-medium">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -89,9 +89,9 @@ export const InvitePage: React.FC = () => {
|
||||
<div className="w-16 h-16 bg-red-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertCircle className="w-8 h-8 text-red-600 dark:text-red-500" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-ink-900 mb-2">Invalid or Expired Link</h2>
|
||||
<p className="text-ink-500 text-sm mb-8">
|
||||
This invitation link is no longer valid. Please request a new invitation from your administrator.
|
||||
<h2 className="text-2xl login-form-title font-bold text-ink-900 mb-2">Invalid or Expired Link</h2>
|
||||
<p className="text-sm login-form-subtitle text-ink-500 max-w-md mx-auto mb-6">
|
||||
The onboarding invitation link is invalid, expired, or has already been used. Please request a new invitation from your administrator.
|
||||
</p>
|
||||
<button onClick={() => navigate('/login')} className="text-ink-900 font-extrabold hover:underline">
|
||||
Return to Login
|
||||
@ -107,14 +107,12 @@ export const InvitePage: React.FC = () => {
|
||||
<div className="fixed top-0 right-0 w-[500px] h-[500px] bg-ink-900/5 rounded-full blur-[120px] pointer-events-none" />
|
||||
|
||||
<div className="w-full max-w-md z-10">
|
||||
<div className="text-center mb-10">
|
||||
<div className="text-center mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-ink-900 to-ink-800 shadow-xl flex items-center justify-center mx-auto mb-6">
|
||||
<Shield className="w-6 h-6 text-ink-0" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-extrabold tracking-tight mb-2">Welcome to Tech4Biz</h1>
|
||||
<p className="text-sm font-medium text-ink-500">
|
||||
Set up your partner account for <span className="text-ink-900 font-bold">{email}</span>
|
||||
</p>
|
||||
<h1 className="text-3xl login-title font-extrabold tracking-tight mb-2">Welcome to Tech4Biz</h1>
|
||||
<p className="text-sm login-desc text-ink-500">Please set up your password to activate your channel partner account.</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
|
||||
@ -71,15 +71,14 @@ export const LoginPage = () => {
|
||||
>
|
||||
{/* Left Column - Partner Explanation */}
|
||||
<div className="md:col-span-6 lg:col-span-7 flex flex-col justify-center text-left">
|
||||
<h1 className="text-3xl lg:text-4xl font-extrabold text-ink-900 tracking-tight leading-tight">
|
||||
<span className="gradient-text">Tech4Biz Channel Partner</span>
|
||||
</h1>
|
||||
<p className="text-ink-500 text-sm mt-5 font-medium leading-relaxed max-w-lg">
|
||||
Expand your business by partnering with Tech4Biz and unlock new
|
||||
opportunities for growth through our innovative technology
|
||||
solutions. Join our partner network to access exclusive resources,
|
||||
dedicated support, and a platform designed to help you succeed.
|
||||
</p>
|
||||
<div className="space-y-4 max-w-xl">
|
||||
<h1 className="text-3xl login-title lg:text-4xl font-extrabold text-ink-900 tracking-tight leading-tight">
|
||||
Enterprise Scale, Secure Delivery
|
||||
</h1>
|
||||
<p className="text-ink-500 text-sm login-desc mt-5 font-medium leading-relaxed max-w-lg">
|
||||
Tech4Biz Channel Partner Portal facilitates authenticated, low-latency distribution of physical asset coordinates, design assets, and cryptographically verified legal agreements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Login Component */}
|
||||
@ -91,8 +90,8 @@ export const LoginPage = () => {
|
||||
<div className="relative flex items-center justify-center w-16 h-16 rounded-2xl bg-ink-0 border border-ink-200 shadow-sm mb-6 p-2">
|
||||
<img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-ink-900 tracking-tight">
|
||||
Channel Portal
|
||||
<h2 className="text-2xl login-form-title font-bold text-ink-900 tracking-tight">
|
||||
Partner Identity Gateway
|
||||
</h2>
|
||||
<p className="text-ink-500 text-[10px] mt-1.5 font-bold uppercase tracking-wider">
|
||||
Authorized Access Only
|
||||
|
||||
@ -401,9 +401,9 @@ export const OnboardingPage: React.FC = () => {
|
||||
<Lock className="w-3.5 h-3.5 text-ink-0" />
|
||||
<span className="text-[10px] font-bold text-ink-0 tracking-widest uppercase">Action Required</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight mb-2">Non-Disclosure Agreement</h2>
|
||||
<p className="text-sm font-medium text-ink-500">
|
||||
Please provide your signature or upload a signed copy of our standard NDA to proceed.
|
||||
<h2 className="text-3xl login-title font-extrabold tracking-tight mb-2">Non-Disclosure Agreement</h2>
|
||||
<p className="text-sm login-desc text-ink-500 mt-1.5 font-medium max-w-md">
|
||||
Please review the mutual NDA terms carefully before signing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -431,9 +431,9 @@ export const OnboardingPage: React.FC = () => {
|
||||
<FileText className="w-3.5 h-3.5 text-ink-600" />
|
||||
<span className="text-[10px] font-bold text-ink-700 tracking-widest uppercase">Final Agreement</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight mb-2">Master Services Agreement</h2>
|
||||
<p className="text-sm font-medium text-ink-500">
|
||||
Sign the MSA to finalize your compliance requirements and enter the approval queue.
|
||||
<h2 className="text-3xl login-title font-extrabold tracking-tight mb-2">Master Services Agreement</h2>
|
||||
<p className="text-sm login-desc text-ink-500 mt-1.5 font-medium max-w-md">
|
||||
Please review the master services partnership terms before signing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user