Skip to content

Commit 615ede5

Browse files
parbhatkapila4parbhatkapila4
committed
Rendering and UI components Improved
1 parent be86663 commit 615ede5

File tree

3 files changed

+148
-43
lines changed

3 files changed

+148
-43
lines changed

‎src/app/globals.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,34 @@ button {
434434
grid-template-columns: 1fr;
435435
gap: 1rem;
436436
}
437+
438+
/* Improve rendering quality on mobile */
439+
svg,
440+
[class*="lucide"],
441+
button,
442+
.glass-card,
443+
.glow-subtle {
444+
-webkit-font-smoothing: antialiased;
445+
-moz-osx-font-smoothing: grayscale;
446+
transform: translateZ(0);
447+
-webkit-transform: translateZ(0);
448+
backface-visibility: hidden;
449+
-webkit-backface-visibility: hidden;
450+
will-change: transform;
451+
}
452+
453+
/* Ensure SVG icons render smoothly and crisply */
454+
svg,
455+
[class*="lucide"] {
456+
shape-rendering: auto;
457+
}
458+
459+
/* Better text rendering on mobile */
460+
* {
461+
-webkit-font-smoothing: antialiased;
462+
-moz-osx-font-smoothing: grayscale;
463+
text-rendering: optimizeLegibility;
464+
}
437465

438466
/* Mobile sidebar improvements */
439467
.sidebar-mobile {

‎src/components/landing/DashboardPreview.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -21,48 +21,48 @@ export default function DashboardPreview() {
2121
<Card className="glass-card border-subtle shadow-2xl">
2222
<CardHeader>
2323
<CardTitle className="flex items-center text-white">
24-
<FileText className="w-5 h-5 mr-2" />
25-
Repository Analysis
24+
<FileText className="w-6 h-6 sm:w-5 sm:h-5 mr-2" />
25+
<span className="text-lg sm:text-xl">Repository Analysis</span>
2626
</CardTitle>
2727
</CardHeader>
2828
<CardContent>
2929
<div className="space-y-4">
30-
<div className="flex flex-col sm:flex-row sm:items-center justify-between p-3 glass-card rounded-lg border-subtle gap-3 sm:gap-0">
31-
<div className="flex items-center space-x-3">
32-
<div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center border border-subtle glow-subtle">
33-
<span className="text-white text-sm font-bold">R</span>
30+
<div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 sm:p-3 glass-card rounded-lg border-subtle gap-3 sm:gap-0">
31+
<div className="flex items-center space-x-3 sm:space-x-3">
32+
<div className="w-12 h-12 sm:w-8 sm:h-8 bg-white/10 rounded-full flex items-center justify-center border border-subtle glow-subtle flex-shrink-0">
33+
<span className="text-white text-base sm:text-sm font-bold">R</span>
3434
</div>
35-
<div>
36-
<p className="font-medium text-white">react-dashboard</p>
37-
<p className="text-sm text-white/60">Last updated 2 hours ago</p>
35+
<div className="min-w-0 flex-1">
36+
<p className="font-medium text-white text-base sm:text-base">react-dashboard</p>
37+
<p className="text-sm sm:text-sm text-white/60">Last updated 2 hours ago</p>
3838
</div>
3939
</div>
4040
<div className="flex space-x-2">
41-
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5">
42-
<ExternalLink className="w-4 h-4" />
41+
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-10 h-10 sm:w-auto sm:h-auto">
42+
<ExternalLink className="w-5 h-5 sm:w-4 sm:h-4" />
4343
</Button>
44-
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5">
45-
<Download className="w-4 h-4" />
44+
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-10 h-10 sm:w-auto sm:h-auto">
45+
<Download className="w-5 h-5 sm:w-4 sm:h-4" />
4646
</Button>
4747
</div>
4848
</div>
4949

50-
<div className="flex flex-col sm:flex-row sm:items-center justify-between p-3 glass-card rounded-lg border-subtle gap-3 sm:gap-0">
51-
<div className="flex items-center space-x-3">
52-
<div className="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center border border-subtle glow-subtle">
53-
<span className="text-white text-sm font-bold">A</span>
50+
<div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 sm:p-3 glass-card rounded-lg border-subtle gap-3 sm:gap-0">
51+
<div className="flex items-center space-x-3 sm:space-x-3">
52+
<div className="w-12 h-12 sm:w-8 sm:h-8 bg-white/10 rounded-full flex items-center justify-center border border-subtle glow-subtle flex-shrink-0">
53+
<span className="text-white text-base sm:text-sm font-bold">A</span>
5454
</div>
55-
<div>
56-
<p className="font-medium text-white">api-server</p>
57-
<p className="text-sm text-white/60">Last updated 1 day ago</p>
55+
<div className="min-w-0 flex-1">
56+
<p className="font-medium text-white text-base sm:text-base">api-server</p>
57+
<p className="text-sm sm:text-sm text-white/60">Last updated 1 day ago</p>
5858
</div>
5959
</div>
6060
<div className="flex space-x-2">
61-
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5">
62-
<ExternalLink className="w-4 h-4" />
61+
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-10 h-10 sm:w-auto sm:h-auto">
62+
<ExternalLink className="w-5 h-5 sm:w-4 sm:h-4" />
6363
</Button>
64-
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5">
65-
<Download className="w-4 h-4" />
64+
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-10 h-10 sm:w-auto sm:h-auto">
65+
<Download className="w-5 h-5 sm:w-4 sm:h-4" />
6666
</Button>
6767
</div>
6868
</div>
@@ -73,47 +73,47 @@ export default function DashboardPreview() {
7373
<Card className="glass-card border-subtle shadow-2xl">
7474
<CardHeader>
7575
<CardTitle className="flex items-center text-white">
76-
<Globe className="w-5 h-5 mr-2" />
77-
Public Documentation
76+
<Globe className="w-6 h-6 sm:w-5 sm:h-5 mr-2" />
77+
<span className="text-lg sm:text-xl">Public Documentation</span>
7878
</CardTitle>
7979
</CardHeader>
8080
<CardContent>
8181
<div className="space-y-4">
82-
<div className="p-4 glass-card border-subtle rounded-lg">
83-
<div className="flex items-center justify-between mb-2">
84-
<h4 className="font-medium text-white">react-dashboard docs</h4>
85-
<Badge variant="secondary" className="glass-card border-subtle text-white/80">Public</Badge>
82+
<div className="p-5 sm:p-4 glass-card border-subtle rounded-lg">
83+
<div className="flex items-center justify-between mb-3 sm:mb-2">
84+
<h4 className="font-medium text-white text-base sm:text-base">react-dashboard docs</h4>
85+
<Badge variant="secondary" className="glass-card border-subtle text-white/80 text-xs sm:text-xs px-2 py-1">Public</Badge>
8686
</div>
87-
<p className="text-sm text-white/60 mb-3">
87+
<p className="text-sm sm:text-sm text-white/60 mb-4 sm:mb-3">
8888
Comprehensive documentation for the React dashboard project
8989
</p>
9090
<div className="flex flex-col sm:flex-row gap-2">
9191
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-full sm:w-auto">
92-
<ExternalLink className="w-4 h-4 mr-1" />
92+
<ExternalLink className="w-5 h-5 sm:w-4 sm:h-4 mr-1" />
9393
View
9494
</Button>
9595
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-full sm:w-auto">
96-
<GitBranch className="w-4 h-4 mr-1" />
96+
<GitBranch className="w-5 h-5 sm:w-4 sm:h-4 mr-1" />
9797
Create PR
9898
</Button>
9999
</div>
100100
</div>
101101

102-
<div className="p-4 glass-card border-subtle rounded-lg">
103-
<div className="flex items-center justify-between mb-2">
104-
<h4 className="font-medium text-white">api-server docs</h4>
105-
<Badge variant="secondary" className="glass-card border-subtle text-white/80">Public</Badge>
102+
<div className="p-5 sm:p-4 glass-card border-subtle rounded-lg">
103+
<div className="flex items-center justify-between mb-3 sm:mb-2">
104+
<h4 className="font-medium text-white text-base sm:text-base">api-server docs</h4>
105+
<Badge variant="secondary" className="glass-card border-subtle text-white/80 text-xs sm:text-xs px-2 py-1">Public</Badge>
106106
</div>
107-
<p className="text-sm text-white/60 mb-3">
107+
<p className="text-sm sm:text-sm text-white/60 mb-4 sm:mb-3">
108108
API documentation and usage examples
109109
</p>
110110
<div className="flex flex-col sm:flex-row gap-2">
111111
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-full sm:w-auto">
112-
<ExternalLink className="w-4 h-4 mr-1" />
112+
<ExternalLink className="w-5 h-5 sm:w-4 sm:h-4 mr-1" />
113113
View
114114
</Button>
115115
<Button size="sm" variant="outline" className="glass-card border-subtle text-white/70 hover:text-white hover:bg-white/5 w-full sm:w-auto">
116-
<GitBranch className="w-4 h-4 mr-1" />
116+
<GitBranch className="w-5 h-5 sm:w-4 sm:h-4 mr-1" />
117117
Create PR
118118
</Button>
119119
</div>

‎src/components/landing/Navigation.tsx‎

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import {
99
DropdownMenuContent,
1010
DropdownMenuTrigger,
1111
} from "@/components/ui/dropdown-menu"
12+
import {
13+
Sheet,
14+
SheetContent,
15+
SheetHeader,
16+
SheetTitle,
17+
} from "@/components/ui/sheet"
1218
import { usePathname } from 'next/navigation'
1319

1420
export default function Navigation() {
@@ -87,11 +93,12 @@ export default function Navigation() {
8793
</button>
8894
</div>
8995

96+
{/* Desktop Menu - unchanged */}
9097
<div
91-
className={`items-center justify-between w-full md:flex md:w-auto md:order-1 md:-ml-[5rem] ${isMobileMenuOpen ? 'flex' : 'hidden'}`}
92-
id="navbar-user"
98+
className="items-center justify-between w-full hidden md:flex md:w-auto md:order-1 md:-ml-[5rem]"
99+
id="navbar-user-desktop"
93100
>
94-
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent">
101+
<ul className="flex flex-col font-medium md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-transparent dark:bg-transparent">
95102
<li>
96103
<Link
97104
href="/"
@@ -149,6 +156,76 @@ export default function Navigation() {
149156
)}
150157
</ul>
151158
</div>
159+
160+
{/* Mobile Menu - Sheet from right side */}
161+
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
162+
<SheetContent side="right" className="w-[280px] sm:w-[300px] bg-gray-900 border-white/10 md:hidden">
163+
<SheetHeader>
164+
<SheetTitle className="text-white text-left">Menu</SheetTitle>
165+
</SheetHeader>
166+
<ul className="flex flex-col font-medium mt-8 space-y-2">
167+
<li>
168+
<Link
169+
href="/"
170+
onClick={() => setIsMobileMenuOpen(false)}
171+
className={`block py-3 px-4 rounded-lg transition-colors ${
172+
pathname === "/"
173+
? "text-blue-400 bg-blue-700/20"
174+
: "text-white hover:bg-gray-800"
175+
}`}
176+
aria-current={pathname === "/" ? "page" : undefined}
177+
>
178+
Home
179+
</Link>
180+
</li>
181+
<li>
182+
<Link
183+
href="/about"
184+
onClick={() => setIsMobileMenuOpen(false)}
185+
className={`block py-3 px-4 rounded-lg transition-colors ${
186+
pathname === "/about"
187+
? "text-blue-400 bg-blue-700/20"
188+
: "text-white hover:bg-gray-800"
189+
}`}
190+
aria-current={pathname === "/about" ? "page" : undefined}
191+
>
192+
About
193+
</Link>
194+
</li>
195+
{isSignedIn ? (
196+
<li>
197+
<Link
198+
href="/dashboard"
199+
onClick={() => setIsMobileMenuOpen(false)}
200+
className={`block py-3 px-4 rounded-lg transition-colors ${
201+
pathname === "/dashboard"
202+
? "text-blue-400 bg-blue-700/20"
203+
: "text-white hover:bg-gray-800"
204+
}`}
205+
aria-current={pathname === "/dashboard" ? "page" : undefined}
206+
>
207+
Dashboard
208+
</Link>
209+
</li>
210+
) : (
211+
<li>
212+
<Link
213+
href="/contact"
214+
onClick={() => setIsMobileMenuOpen(false)}
215+
className={`block py-3 px-4 rounded-lg transition-colors ${
216+
pathname === "/contact"
217+
? "text-blue-400 bg-blue-700/20"
218+
: "text-white hover:bg-gray-800"
219+
}`}
220+
aria-current={pathname === "/contact" ? "page" : undefined}
221+
>
222+
Contact
223+
</Link>
224+
</li>
225+
)}
226+
</ul>
227+
</SheetContent>
228+
</Sheet>
152229
</div>
153230
</nav>
154231
)

0 commit comments

Comments
 (0)