Skip to content

Commit c9a38f6

Browse files
abusufyan-netizenabusufyan-netizen
committed
Final stability and console fix:
- Add SVG favicon to resolve 404 error - Fix CookieConsent visibility delay and z-index - Use more reliable max-height transition for mobile menu - Ensure AdSense script and font loading are optimized
1 parent 166bd8a commit c9a38f6

4 files changed

Lines changed: 15 additions & 14 deletions

File tree

‎app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
4040
crossOrigin="anonymous"
4141
strategy="afterInteractive"
4242
/>
43+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
4344
</head>
4445
<body className="bg-white text-gray-900 antialiased">
4546
<div className="min-h-screen flex flex-col">

‎components/ui/CookieConsent.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ export default function CookieConsent() {
77
const [visible, setVisible] = useState(false)
88

99
useEffect(() => {
10+
// Check if consent was already given
1011
const consent = localStorage.getItem('cookie-consent')
1112
if (!consent) {
12-
// Delay showing for a better UX
13-
const timer = setTimeout(() => setVisible(true), 1500)
13+
// Small delay to ensure smooth hydration and visibility
14+
const timer = setTimeout(() => setVisible(true), 500)
1415
return () => clearTimeout(timer)
1516
}
1617
}, [])
@@ -29,10 +30,10 @@ export default function CookieConsent() {
2930

3031
return (
3132
<div
32-
className="fixed bottom-0 left-0 right-0 z-50 p-4 sm:p-6"
33-
style={{ animation: 'fadeInUp 0.4s ease-out' }}
33+
className="fixed bottom-0 left-0 right-0 z-[200] p-4 sm:p-6 transition-all duration-500 transform translate-y-0"
34+
style={{ animation: 'fadeIn 0.5s ease-out' }}
3435
>
35-
<div className="max-w-4xl mx-auto bg-white border border-gray-200 rounded-2xl shadow-2xl p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
36+
<div className="max-w-4xl mx-auto bg-white border border-gray-200 rounded-2xl shadow-2xl p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6 ring-1 ring-black/5">
3637
<div className="flex-1">
3738
<p className="text-sm text-gray-600 leading-relaxed">
3839
<span className="font-bold text-gray-900">🍪 Cookie Notice: </span>
@@ -45,18 +46,16 @@ export default function CookieConsent() {
4546
for more information.
4647
</p>
4748
</div>
48-
<div className="flex gap-3 shrink-0">
49+
<div className="flex gap-3 shrink-0 w-full sm:w-auto">
4950
<button
5051
onClick={decline}
51-
className="px-5 py-2.5 text-sm font-semibold text-gray-600 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors"
52-
id="cookie-decline-btn"
52+
className="flex-1 sm:flex-none px-6 py-3 text-sm font-bold text-gray-600 bg-gray-50 border border-gray-100 rounded-xl hover:bg-gray-100 transition-colors"
5353
>
5454
Decline
5555
</button>
5656
<button
5757
onClick={accept}
58-
className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition-colors shadow-sm"
59-
id="cookie-accept-btn"
58+
className="flex-1 sm:flex-none px-6 py-3 text-sm font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-100 active:scale-95"
6059
>
6160
Accept All
6261
</button>

‎components/ui/Header.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function Header() {
6262

6363
{/* Mobile Menu Button */}
6464
<button
65-
className="md:hidden p-2 text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors border border-gray-100"
65+
className="md:hidden p-2.5 text-gray-700 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors border border-gray-100"
6666
onClick={() => setIsOpen(!isOpen)}
6767
aria-label="Toggle menu"
6868
>
@@ -71,10 +71,10 @@ export default function Header() {
7171
</div>
7272
</div>
7373

74-
{/* Mobile Nav Overlay */}
74+
{/* Mobile Nav Overlay - Using max-h for more reliable transition */}
7575
<div
76-
className={`md:hidden absolute top-full left-0 w-full bg-white border-b border-gray-100 shadow-2xl transition-all duration-300 ease-in-out origin-top ${
77-
isOpen ? 'opacity-100 scale-y-100 visible' : 'opacity-0 scale-y-0 invisible'
76+
className={`md:hidden absolute top-full left-0 w-full bg-white border-b border-gray-100 shadow-2xl transition-all duration-300 ease-in-out overflow-hidden ${
77+
isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'
7878
}`}
7979
>
8080
<nav className="flex flex-col p-4 gap-2">

‎public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)