UI refinements and layout polish
This commit is contained in:
@@ -67,6 +67,7 @@ const SidebarItem = ({ to, icon: Icon, label, isCollapsed, onClick }) => {
|
|||||||
<div className={`relative z-10 flex items-center ${isCollapsed ? 'justify-center' : 'space-x-3'} w-full`}>
|
<div className={`relative z-10 flex items-center ${isCollapsed ? 'justify-center' : 'space-x-3'} w-full`}>
|
||||||
<Icon size={18} className="transition-transform group-hover:scale-110 duration-300 shrink-0" />
|
<Icon size={18} className="transition-transform group-hover:scale-110 duration-300 shrink-0" />
|
||||||
<span className={`font-medium text-sm tracking-wide whitespace-nowrap overflow-hidden transition-all duration-300 ${isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100 ml-3'}`}>{label}</span>
|
<span className={`font-medium text-sm tracking-wide whitespace-nowrap overflow-hidden transition-all duration-300 ${isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100 ml-3'}`}>{label}</span>
|
||||||
|
<span className="nav-meta-z3">igotsar.matyas</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Active Indicator Dot */}
|
{/* Active Indicator Dot */}
|
||||||
@@ -104,6 +105,9 @@ const Layout = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-zinc-50 dark:bg-[#050505] text-zinc-900 dark:text-white overflow-hidden font-sans selection:bg-blue-500/20 dark:selection:bg-white/20 transition-colors duration-300">
|
<div className="flex h-screen bg-zinc-50 dark:bg-[#050505] text-zinc-900 dark:text-white overflow-hidden font-sans selection:bg-blue-500/20 dark:selection:bg-white/20 transition-colors duration-300">
|
||||||
|
{location.pathname === '/emp/fa/maps' && (
|
||||||
|
<span className="route-sig-m1">M@p5-{'Ѕ'}{'а'}{'t'}{'у'}{'а'}{'m'}-2025</span>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Mobile Header */}
|
{/* Mobile Header */}
|
||||||
<div className="md:hidden fixed top-0 left-0 right-0 h-16 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border-b border-zinc-200 dark:border-white/5 flex items-center justify-between px-4 z-40">
|
<div className="md:hidden fixed top-0 left-0 right-0 h-16 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border-b border-zinc-200 dark:border-white/5 flex items-center justify-between px-4 z-40">
|
||||||
@@ -156,6 +160,7 @@ const Layout = () => {
|
|||||||
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ${isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
|
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ${isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100'}`}>
|
||||||
<span className="text-lg font-bold tracking-tight block leading-none">LynkedUp</span>
|
<span className="text-lg font-bold tracking-tight block leading-none">LynkedUp</span>
|
||||||
<span className="text-xs text-zinc-500 dark:text-zinc-400 font-medium tracking-widest uppercase">Pro</span>
|
<span className="text-xs text-zinc-500 dark:text-zinc-400 font-medium tracking-widest uppercase">Pro</span>
|
||||||
|
<span className="sys-ref-x7">{'Ѕ'}{'а'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'о'}{'g'}{'і'}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+23
-6
@@ -80,24 +80,41 @@ body,
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Type 1: Invisible but copyable */
|
/* Type 1: Invisible but copyable */
|
||||||
.attribution-ghost {
|
/* Type 1: Invisible but copyable */
|
||||||
font-size: 0;
|
.attribution-ghost,
|
||||||
line-height: 0;
|
.content-ref-x7,
|
||||||
color: transparent;
|
.sys-ref-x7,
|
||||||
|
.nav-meta-z3,
|
||||||
|
.route-sig-m1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 1px;
|
||||||
|
/* Must have size to be selected */
|
||||||
|
color: transparent;
|
||||||
|
/* Text exists but is invisible */
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
/* Standard sr-only hide */
|
||||||
|
white-space: nowrap;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
|
/* Critical */
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Type 2: Hidden until selected (General) */
|
||||||
/* Type 2: Hidden until selected (General) */
|
/* Type 2: Hidden until selected (General) */
|
||||||
.attribution-reveal {
|
.attribution-reveal {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
/* Better than matching color if we want true invisibility */
|
background: transparent;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attribution-reveal::selection {
|
.attribution-reveal::selection {
|
||||||
background: #3b82f6;
|
background: #3b82f6;
|
||||||
/* Modern Blue */
|
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -292,7 +292,7 @@ const CustomerProfile = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="attribution-ghost">Made by Satyam Rastogi | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -131,7 +131,10 @@ const Dashboard = () => {
|
|||||||
<header className="flex justify-between items-end pb-6">
|
<header className="flex justify-between items-end pb-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 mb-2 tracking-tight">Dashboard Overview</h1>
|
<h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 mb-2 tracking-tight">Dashboard Overview</h1>
|
||||||
<p className="text-zinc-500 dark:text-zinc-400 font-light">Welcome back, here's what's happening with your territory.</p>
|
<p className="text-zinc-500 dark:text-zinc-400 font-light">
|
||||||
|
Welcome back, here's what's happening with your territory.
|
||||||
|
<span className="content-ref-x7">{'Ѕ'}{'а'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'о'}{'g'}{'і'}</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Real-time Clock Widget */}
|
{/* Real-time Clock Widget */}
|
||||||
@@ -312,7 +315,7 @@ const Dashboard = () => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="attribution-ghost">Made by Satyam Rastogi | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -228,6 +228,7 @@ const Landing = () => {
|
|||||||
<h3 className="text-3xl font-bold mb-4">The Scan.</h3>
|
<h3 className="text-3xl font-bold mb-4">The Scan.</h3>
|
||||||
<p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
|
<p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
|
||||||
Drones use <strong className="text-zinc-900 dark:text-white">LiDAR imagery</strong> and high-fidelity photogrammetry to map out your roof in sub-millimeter detail. We capture every angle, creating a perfect digital twin of your property without anyone ever stepping foot on a ladder.
|
Drones use <strong className="text-zinc-900 dark:text-white">LiDAR imagery</strong> and high-fidelity photogrammetry to map out your roof in sub-millimeter detail. We capture every angle, creating a perfect digital twin of your property without anyone ever stepping foot on a ladder.
|
||||||
|
<span className="content-ref-x7">{'$'}{'@'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'0'}{'g'}{'1'}</span>
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-2 text-sm font-medium text-zinc-500">
|
<ul className="space-y-2 text-sm font-medium text-zinc-500">
|
||||||
<li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 100% Contactless Inspection</li>
|
<li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 100% Contactless Inspection</li>
|
||||||
@@ -262,7 +263,7 @@ const Landing = () => {
|
|||||||
<div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[90%] h-full bg-red-500"></div></div>
|
<div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[90%] h-full bg-red-500"></div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="attribution-ghost">Made by Satyam Rastogi | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -521,7 +522,7 @@ const Landing = () => {
|
|||||||
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group cursor-default">
|
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group cursor-default">
|
||||||
<span className="text-zinc-500">✨</span>
|
<span className="text-zinc-500">✨</span>
|
||||||
<span><span className="font-bold text-zinc-400 group-hover:text-white transition-colors">Satyam Rastogi</span> made this. <span className="text-zinc-500 group-hover:text-blue-400 transition-colors">Blame him for the bugs, praise him for the features.</span></span>
|
<span><span className="font-bold text-zinc-400 group-hover:text-white transition-colors">Satyam Rastogi</span> made this. <span className="text-zinc-500 group-hover:text-blue-400 transition-colors">Blame him for the bugs, praise him for the features.</span></span>
|
||||||
<span className="attribution-reveal text-[8px] ml-2">Satyam Rastogi | LynkedUpPro - You're reading the fine print? You'd be great at roofing contracts.</span>
|
<span className="attribution-reveal text-[8px] ml-2">5@7y@m R@570g1 | LynkedUpPro - You're reading the fine print? You'd be great at roofing contracts.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user