fixed UI

Documents/LOGO_SPEC.md

@@ -1,133 +0,0 @@
-# JUNOHUB Logo Specification
-
-Simple, minimalist logo spec aligned with product and existing site branding. Use this for asset production (PNG, SVG) and design handoff.
-
----
-
-## 1. Product context
-
-- **Product name:** JUNOHUB  
-- **Tagline:** “The Unified Supply Chain Hub” / “Modern Commerce Infrastructure”  
-- **Use:** Vendor and supplier portal, dropshipping, encrypted commerce (Gmail, Shopify, etc.).  
-- **Tone:** Modern, high-performance, trustworthy, minimal.
-
----
-
-## 2. Logo description (for designers / AI)
-
-**Overall:**  
-A minimal logo for a B2B supply-chain and commerce platform. Clean, geometric, no decorative detail. No tagline inside the logo.
-
-**Icon (mark) — product-based recommendation:**  
-- **Concept:** The icon should reflect **JUNOHUB as a hub** — the single place where vendors, suppliers, and stores connect. Prefer a **hub / connectivity** idea over a generic symbol.  
-- **Recommended direction:** A **central node with connections** — e.g. one central dot or shape with two or three short lines or smaller nodes linking to it (suggesting “unified” and “supply chain hub”). Keep it geometric and minimal: no literal boxes, trucks, or globes.  
-- **Alternative:** **Connected nodes** — e.g. three small circles or diamonds in a tight network (one central, two flanking), implying vendors and suppliers meeting at one platform.  
-- Simple, bold strokes; must read clearly at 24×24px.  
-- Placed inside a **rounded square** (soft corners, not a circle).  
-- Icon is the only graphic element; no extra decorative shapes.  
-
-*Note: The app currently uses a lightning bolt (Zap) as a placeholder; the above is the recommended product-aligned mark for the FYP / final branding.*
-
-**Wordmark:**  
-- The word **“JUNOHUB”** in all caps.  
-- Sans-serif, heavy weight (e.g. Black or Extra Bold).  
-- Tight letter-spacing (slightly negative tracking).  
-- No underline, no gradient on the wordmark in the primary lockup.
-
-**Lockup:**  
-- Icon and wordmark sit side by side with a small, fixed gap.  
-- Icon left, wordmark right.  
-- Can be used as icon-only (e.g. favicon, app icon) or icon + wordmark (navbar, footer, docs).
-
-**Style:**  
-- Flat, no 3D or skeuomorphism.  
-- No gradients in the icon for the primary version (solid fill).  
-- Optional: a secondary version with a subtle top-left to bottom-right indigo gradient for the icon only, to match the website’s gradient treatment.
-
----
-
-## 3. Color scheme (match the website)
-
-Use these exact values so the logo matches the app and marketing site.
-
-| Role            | Hex       | Usage                                      |
-|-----------------|-----------|--------------------------------------------|
-| **Primary**     | `#4F46E5`| Icon background (primary logo)             |
-| **Primary alt** | `#6366F1`| Optional gradient end (indigo-500)         |
-| **Lighter**     | `#818CF8`| Optional gradient end (indigo-400)         |
-| **Icon/on-dark**| `#FFFFFF`| Symbol and wordmark on dark UI             |
-| **On light**    | `#020617`| Wordmark on light backgrounds (light mode) |
-| **Background**  | `#0A0E1A`| App background (dark); use for contrast     |
-
-**Primary logo (dark backgrounds):**  
-- Icon: rounded square fill `#4F46E5`, symbol (hub mark) `#FFFFFF`.  
-- Wordmark: `#FFFFFF`.
-
-**Light / alternate (light backgrounds):**  
-- Icon: rounded square fill `#4F46E5` (or very light indigo `#EEF2FF` with symbol `#4F46E5`).  
-- Wordmark: `#020617`.
-
-Keep the logo color scheme limited to this indigo + white/dark set; no extra accent colors in the mark or wordmark.
-
----
-
-## 4. Dimensions and resolution
-
-### Icon (mark only)
-
-| Asset            | Size (px) | Format | Use case                          |
-|------------------|-----------|--------|-----------------------------------|
-| Favicon          | 32 × 32   | PNG/SVG| Browser tab, bookmarks             |
-| PWA icon         | 192 × 192 | PNG    | Android / PWA (manifest)          |
-| PWA icon         | 512 × 512 | PNG    | High-res PWA, splash               |
-| Apple touch      | 180 × 180 | PNG    | iOS home screen (manifest)        |
-| Navbar/sidebar   | 40 × 40   | —      | In-app (can be SVG or 2x PNG 80×80)|
-| Marketing        | 48 × 48+  | SVG/PNG| Landing, footer, social, docs      |
-
-**Recommended:**  
-- Export SVG for icon (scalable).  
-- Export PNG at **1x and 2x** for 32, 192, 512, and 180 where needed.  
-- Minimum clear space: ~1/4 of icon height on all sides.
-
-### Full logo (icon + wordmark)
-
-| Context   | Icon size | Notes                          |
-|-----------|-----------|---------------------------------|
-| Navbar    | 40 × 40   | Icon + “JUNOHUB” wordmark       |
-| Footer    | 40 × 40   | Same lockup                     |
-| Marketing | 48 × 48+  | Scale wordmark with icon ratio  |
-
-**Aspect ratio:**  
-- Icon: 1∶1.  
-- Lockup: define one preferred width (e.g. icon 40px) and keep proportion for “JUNOHUB” (e.g. ~20–24px cap height).
-
-### Resolution rules
-
-- **Raster (PNG):** 72 ppi for web; 144 ppi acceptable for 2x assets.  
-- **Minimum size:** Icon should read clearly down to 24×24px; avoid thin strokes below 2px.  
-- **Safe zone:** Do not crop into the rounded square; keep padding so the shape is fully visible.
-
----
-
-## 5. File naming (reference)
-
-- `icon.svg` — Icon only, scalable.  
-- `icon-192.png` — 192×192 PWA.  
-- `icon-512.png` — 512×512 PWA.  
-- `apple-icon.png` — 180×180 Apple touch.  
-- `logo.svg` — Full lockup (icon + wordmark).  
-- `logo-dark-bg.svg` / `logo-light-bg.svg` — Optional light/dark variants.
-
----
-
-## 6. Do not
-
-- Add gradients to the wordmark.  
-- Use more than one accent color in the mark.  
-- Use a generic symbol (e.g. lightning, star) that does not relate to hub / supply chain / connectivity.  
-- Use thin or script type for “JUNOHUB”.  
-- Stretch or alter the rounded-square proportion (keep 1∶1).
-
----
-
-*Aligned with JUNOHUB app and landing (navbar, sidebar, footer, manifest, `globals.css`).*

src/app/dashboard/layout.tsx

@@ -71,7 +71,7 @@ export default async function DashboardLayout({
                 </header>
 
                 <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-                    <PageTransition className="p-4 md:p-8 overflow-y-auto custom-scrollbar">
+                    <PageTransition className="p-4 md:p-8 overflow-y-auto custom-scrollbar" data-lenis-prevent>
                         <div className="flex-1 flex flex-col min-h-0">
                             {children}
                         </div>

src/app/supplier/layout.tsx

@@ -47,7 +47,7 @@ export default async function SupplierLayout({
             </div>
 
             <main className="md:pl-72 flex flex-col flex-1 h-full min-w-0">
-                <header className="h-16 px-4 md:px-8 border-b border-white/10 bg-slate-900/50 backdrop-blur-xl flex items-center justify-between flex-shrink-0 z-50">
+                <header className="h-16 px-4 md:px-8 border-b border-white/10 bg-slate-900/50 backdrop-blur-xl flex items-center justify-between flex-shrink-0 z-[100]">
                     <div className="flex items-center gap-2 md:gap-4 flex-1 min-w-0">
                         <MobileSupplierSidebar />
                         <h2 className="hidden sm:block text-xs md:text-sm font-semibold text-slate-400 uppercase tracking-wider">Supplier Portal</h2>
@@ -62,10 +62,8 @@ export default async function SupplierLayout({
                     </div>
                 </header>
                 <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-                    <PageTransition className="p-4 md:p-8 overflow-y-auto custom-scrollbar">
+                    <PageTransition className="p-4 md:p-8 overflow-y-auto custom-scrollbar flex-1 flex flex-col min-h-0" data-lenis-prevent>
-                        <div className="flex-1 flex flex-col min-h-0">
                         {children}
-                        </div>
                     </PageTransition>
                 </div>
             </main>

src/components/MobileSupplierSidebar.tsx

@@ -48,14 +48,14 @@ export function MobileSupplierSidebar() {
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
                             onClick={() => setIsOpen(false)}
-                            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[90] md:hidden"
+                            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[200] md:hidden"
                         />
                         <motion.div
                             initial={{ x: -288 }}
                             animate={{ x: 0 }}
                             exit={{ x: -288 }}
                             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-                            className="fixed left-0 top-0 bottom-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[100] md:hidden overflow-y-auto"
+                            className="fixed left-0 top-0 bottom-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[210] md:hidden overflow-y-auto"
                         >
                             <div className="p-4 flex items-center justify-between border-b border-white/10">
                                 <div className="flex items-center gap-2">

src/components/NotificationBell.tsx

@@ -147,7 +147,7 @@ export default function NotificationBell() {
                         animate={{ opacity: 1, scale: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.95, y: -4 }}
                         transition={{ duration: 0.15, ease: "easeOut" }}
-                        className={`absolute right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 sm:w-96 max-w-[calc(100vw-2rem)] flex-col rounded-xl border shadow-xl ${isLight
+                        className={`absolute right-[-3.5rem] sm:right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 sm:w-96 max-w-[calc(100vw-1.5rem)] flex-col rounded-xl border shadow-xl ${isLight
                             ? "bg-white border-slate-200"
                             : "bg-slate-800 border-white/10"
                             }`}