fixed UI
This commit is contained in:
root
parent
8ab0cd3a86
commit
04468a2d47
@ -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`).*
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
{children}
|
||||
</div>
|
||||
<PageTransition className="p-4 md:p-8 overflow-y-auto custom-scrollbar flex-1 flex flex-col min-h-0" data-lenis-prevent>
|
||||
{children}
|
||||
</PageTransition>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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"
|
||||
}`}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user