Skip to content

Commit 43dfa45

Browse files
amethystaniamethystani
committed
DESIGN IMPROVEMENTS
1 parent 68ac5cc commit 43dfa45

File tree

4 files changed

+169
-131
lines changed

4 files changed

+169
-131
lines changed

‎src/components/CookieConsent.tsx‎

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -363,11 +363,6 @@ export default function CookieConsent() {
363363
<div
364364
className={`fixed inset-0 z-[9999] flex items-end sm:items-center justify-center isolate pointer-events-none`}
365365
>
366-
{/* ─── BANNER BACKDROP (transparent) ─── */}
367-
{view === 'banner' && (
368-
<div className={`absolute inset-0 transition-opacity duration-500 ${animateIn ? 'opacity-100' : 'opacity-0'}`} />
369-
)}
370-
371366
{/* ─── PREFERENCES BACKDROP (Solid) ─── */}
372367
{view === 'preferences' && (
373368
<div
@@ -386,46 +381,47 @@ export default function CookieConsent() {
386381
${animateIn ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}
387382
`}
388383
>
389-
{/* Top Fade */}
390-
<div className="h-12 bg-gradient-to-t from-black/80 to-transparent pointer-events-none" />
391-
392-
<div className="bg-[rgb(10,10,10)] border-t border-neutral-800/80 shadow-[0_-10px_40px_rgba(0,0,0,0.5)]">
393-
<div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 sm:py-5">
394-
<div className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-8">
395-
{/* Text Content */}
396-
<div className="flex-1">
397-
<div className="flex items-center gap-2 mb-2 text-white font-medium">
398-
<Cookie className="w-4 h-4" />
399-
<span>{t('cookies.bannerTitle')}</span>
384+
<div className="px-3 pb-4 sm:px-6">
385+
<div className="relative mx-auto max-w-6xl rounded-2xl border border-white/10 bg-[linear-gradient(145deg,#141414_0%,#0C0C0C_100%)] shadow-[0_-20px_60px_rgba(0,0,0,0.55)] overflow-hidden">
386+
<div className="absolute inset-0 opacity-[0.06]" style={{ backgroundImage: 'url(/noise.webp)', backgroundSize: '35%' }} />
387+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black" />
388+
<div className="relative z-10 px-5 py-4 sm:px-6 sm:py-5">
389+
<div className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-8">
390+
{/* Text Content */}
391+
<div className="flex-1">
392+
<div className="flex items-center gap-2 mb-2 text-white/90 font-medium">
393+
<Cookie className="w-4 h-4 text-[#FFB286]" />
394+
<span>{t('cookies.bannerTitle')}</span>
395+
</div>
396+
<p className="text-white/60 text-sm leading-relaxed max-w-3xl">
397+
{t('cookies.bannerDesc')} {' '}
398+
<Link to="/privacy-policy" className="underline text-white hover:text-white/80 underline-offset-2">
399+
{t('cookies.privacyPolicy')}
400+
</Link>
401+
</p>
400402
</div>
401-
<p className="text-neutral-400 text-sm leading-relaxed max-w-3xl">
402-
{t('cookies.bannerDesc')} {' '}
403-
<Link to="/privacy-policy" className="underline text-white hover:text-white/80 underline-offset-2">
404-
{t('cookies.privacyPolicy')}
405-
</Link>
406-
</p>
407-
</div>
408403

409-
{/* Banner Actions */}
410-
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3 flex-shrink-0">
411-
<button
412-
onClick={() => setView('preferences')}
413-
className="order-2 sm:order-1 px-4 py-2.5 rounded-lg border border-neutral-700 hover:border-neutral-500 text-neutral-300 hover:text-white text-sm font-medium transition-colors"
414-
>
415-
{t('cookies.preferences')}
416-
</button>
417-
<button
418-
onClick={rejectAll}
419-
className="order-3 sm:order-2 px-4 py-2.5 rounded-lg hover:bg-neutral-800 text-neutral-400 hover:text-white text-sm font-medium transition-colors"
420-
>
421-
{t('cookies.rejectAll')}
422-
</button>
423-
<button
424-
onClick={acceptAll}
425-
className="order-1 sm:order-3 px-6 py-2.5 rounded-lg bg-white hover:bg-neutral-200 text-black text-sm font-medium transition-colors shadow-lg shadow-white/5"
426-
>
427-
{t('cookies.acceptAll')}
428-
</button>
404+
{/* Banner Actions */}
405+
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3 flex-shrink-0">
406+
<button
407+
onClick={() => setView('preferences')}
408+
className="order-2 sm:order-1 px-4 py-2.5 rounded-full border border-white/15 bg-white/5 text-white/70 hover:text-white hover:border-[#FF8A5B]/40 text-sm font-medium transition-colors"
409+
>
410+
{t('cookies.preferences')}
411+
</button>
412+
<button
413+
onClick={rejectAll}
414+
className="order-3 sm:order-2 px-4 py-2.5 rounded-full hover:bg-white/5 text-white/50 hover:text-white text-sm font-medium transition-colors"
415+
>
416+
{t('cookies.rejectAll')}
417+
</button>
418+
<button
419+
onClick={acceptAll}
420+
className="order-1 sm:order-3 px-6 py-2.5 rounded-full bg-gradient-to-r from-[#FF8A5B] via-[#FF9E6C] to-[#FFB286] text-white text-sm font-semibold transition-colors shadow-lg shadow-[#FF8A5B]/20"
421+
>
422+
{t('cookies.acceptAll')}
423+
</button>
424+
</div>
429425
</div>
430426
</div>
431427
</div>
@@ -440,35 +436,37 @@ export default function CookieConsent() {
440436
<div
441437
className={`
442438
pointer-events-auto relative w-full max-w-2xl mx-auto
443-
flex flex-col bg-[rgb(12,12,12)] border border-neutral-800/80 shadow-2xl shadow-black
439+
flex flex-col bg-[linear-gradient(145deg,#141414_0%,#0C0C0C_100%)] border border-white/10 shadow-2xl shadow-black
444440
rounded-t-2xl sm:rounded-2xl overflow-hidden
445441
max-h-[90vh] sm:max-h-[85vh] h-[90vh] sm:h-auto
446442
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] transform
447443
${animateIn ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-8 scale-95 opacity-0'}
448444
`}
449445
>
446+
<div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{ backgroundImage: 'url(/noise.webp)', backgroundSize: '35%' }} />
447+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black pointer-events-none" />
450448
{/* Modal Header */}
451-
<div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800 bg-[rgb(12,12,12)] z-10 shrink-0">
449+
<div className="relative z-10 flex items-center justify-between px-5 py-4 border-b border-white/10 bg-black/40 backdrop-blur-sm shrink-0">
452450
<div>
453451
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
454-
<Cookie className="w-5 h-5" />
452+
<Cookie className="w-5 h-5 text-[#FFB286]" />
455453
{t('cookies.bannerTitle')}
456454
</h2>
457455
</div>
458456
<button
459457
onClick={() => setView('banner')}
460-
className="p-2 -mr-2 text-neutral-400 hover:text-white hover:bg-neutral-800 rounded-full transition-colors"
458+
className="p-2 -mr-2 text-white/60 hover:text-white hover:bg-white/10 rounded-full transition-colors"
461459
aria-label="Close"
462460
>
463461
<X className="w-5 h-5" />
464462
</button>
465463
</div>
466464

467465
{/* Modal Body (Scrollable) */}
468-
<div className="flex-1 overflow-y-auto px-5 py-2 custom-scrollbar overscroll-contain">
466+
<div className="relative z-10 flex-1 overflow-y-auto px-5 py-2 custom-scrollbar overscroll-contain">
469467
<div className="py-4 space-y-6">
470-
<div className="bg-neutral-900/30 p-4 rounded-xl border border-neutral-800/50">
471-
<p className="text-sm text-neutral-400 leading-relaxed">
468+
<div className="bg-white/5 p-4 rounded-xl border border-white/10">
469+
<p className="text-sm text-white/60 leading-relaxed">
472470
{t('cookies.customiseDesc')}
473471
</p>
474472
<div className="mt-3 flex gap-4 text-xs">
@@ -502,24 +500,24 @@ export default function CookieConsent() {
502500
</div>
503501

504502
{/* Modal Footer (Fixed) */}
505-
<div className="p-4 sm:px-6 sm:py-5 border-t border-neutral-800 bg-[rgb(12,12,12)] shrink-0 pb-[max(1rem,env(safe-area-inset-bottom))]">
503+
<div className="relative z-10 p-4 sm:px-6 sm:py-5 border-t border-white/10 bg-black/40 backdrop-blur-sm shrink-0 pb-[max(1rem,env(safe-area-inset-bottom))]">
506504
<div className="flex flex-col sm:flex-row gap-3">
507505
<button
508506
onClick={rejectAll}
509-
className="w-full sm:w-auto px-5 py-2.5 rounded-lg border border-neutral-700 hover:border-neutral-500 text-neutral-400 hover:text-white font-medium transition-colors text-sm"
507+
className="w-full sm:w-auto px-5 py-2.5 rounded-full border border-white/15 hover:border-[#FF8A5B]/40 text-white/60 hover:text-white font-medium transition-colors text-sm"
510508
>
511509
{t('cookies.rejectAll')}
512510
</button>
513511
<div className="flex-1 hidden sm:block" />
514512
<button
515513
onClick={savePreferences}
516-
className="w-full sm:w-auto px-5 py-2.5 rounded-lg bg-neutral-800 hover:bg-neutral-700 text-white font-medium transition-colors text-sm"
514+
className="w-full sm:w-auto px-5 py-2.5 rounded-full bg-white/10 hover:bg-white/15 text-white font-medium transition-colors text-sm"
517515
>
518516
{t('cookies.savePreferences')}
519517
</button>
520518
<button
521519
onClick={acceptAll}
522-
className="w-full sm:w-auto px-6 py-2.5 rounded-lg bg-white hover:bg-neutral-200 text-black font-medium transition-colors shadow-lg shadow-white/10 text-sm"
520+
className="w-full sm:w-auto px-6 py-2.5 rounded-full bg-gradient-to-r from-[#FF8A5B] via-[#FF9E6C] to-[#FFB286] text-white font-semibold transition-colors shadow-lg shadow-[#FF8A5B]/20 text-sm"
523521
>
524522
{t('cookies.acceptAll')}
525523
</button>

‎src/pages/About.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function About() {
1919
canonical="https://clerktree.com/about"
2020
/>
2121
{/* Orange/warm theme background accents matching main landing page */}
22-
<div className="fixed inset-0 bg-[rgb(10,10,10)] -z-10">
22+
<div className="fixed inset-0 bg-[rgb(10,10,10)] z-0 pointer-events-none">
2323
{/* Core warm light source top-right */}
2424
<div
2525
className="absolute top-[-10%] right-[-10%] w-[80%] h-[100%] pointer-events-none"
@@ -45,17 +45,18 @@ export default function About() {
4545
/>
4646
{/* Grainy noise overlay */}
4747
<div
48-
className="absolute inset-0 opacity-[0.035] pointer-events-none"
49-
style={{
50-
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
51-
backgroundSize: '128px 128px',
52-
}}
48+
className="absolute inset-0 opacity-[0.06]"
49+
style={{ backgroundImage: 'url(/noise.webp)', backgroundSize: '35%' }}
5350
/>
51+
<div className="absolute inset-x-0 top-0 h-36 bg-gradient-to-b from-black/80 via-black/50 to-transparent" />
52+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black" />
5453
</div>
5554

56-
<SharedHeader />
55+
<div className="relative z-20">
56+
<SharedHeader />
57+
</div>
5758

58-
<div className="relative z-10 py-12 px-6 pt-32 md:pt-36">
59+
<div className="relative z-10 py-12 px-6 pt-36 md:pt-44">
5960
<div className="max-w-6xl mx-auto">
6061

6162
{/* Header */}

0 commit comments

Comments
 (0)