diff --git a/README.md b/README.md index 50c3d82..84d6cd3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ -# 📬 InboxOS — The AI Inbox Operating System +

+ INBOXOS - The Inbox Operating System +

-**Not an email client. A decision + execution layer that reads your inbox, understands what matters, and acts on it automatically.** +

+ Not an email client. A decision + execution layer that reads your inbox, understands what matters, and acts on it automatically. +

Python Version diff --git a/frontend/index.html b/frontend/index.html index f70cfb7..a6fac85 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,10 +6,10 @@ InboxOS — AI Email Operating System - + - +

diff --git a/frontend/src/components/AuthLayout.tsx b/frontend/src/components/AuthLayout.tsx index 7fad408..3fae470 100644 --- a/frontend/src/components/AuthLayout.tsx +++ b/frontend/src/components/AuthLayout.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { - Sparkles, Inbox, Cpu, Zap, @@ -11,6 +10,7 @@ import { Sun, Moon, } from 'lucide-react'; +import { Logo } from './Logo'; interface Testimonial { text: string; @@ -143,19 +143,16 @@ export const AuthLayout: React.FC = ({ children }) => { className="absolute bottom-[20%] left-[6%] w-24 h-24 rounded-[22px] bg-white/30 dark:bg-white/5 border border-white/40 dark:border-white/10 backdrop-blur-md shadow-[0_4px_24px_rgba(0,0,0,0.01)] pointer-events-none" /> - {/* Branding */}
-
- -
+
-

+

InboxOS

- - AI Operating System -
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index a0a1fa1..daa853f 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -7,6 +7,7 @@ import { useTransform, } from 'framer-motion'; import { Avatar } from './Avatar'; +import { Logo } from './Logo'; import { Sparkles, Inbox, @@ -419,16 +420,14 @@ export const LandingPage: React.FC = () => { className="flex items-center gap-3 cursor-pointer select-none" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} > -
- -
+
-

+

InboxOS

- - AI Operating System -
@@ -2282,14 +2281,13 @@ export const LandingPage: React.FC = () => { className="flex items-center gap-3 cursor-pointer select-none" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} > -
- -
-

InboxOS

+ +

+ InboxOS +

{/* Company description */} diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx new file mode 100644 index 0000000..870df28 --- /dev/null +++ b/frontend/src/components/Logo.tsx @@ -0,0 +1,105 @@ +import React from 'react'; + +interface LogoProps { + /** Renders only the geometric envelope icon without typography */ + iconOnly?: boolean; + /** If false, renders with the dark background (#1E1E1E) and white typography, otherwise transparent */ + transparent?: boolean; + /** Custom class for styling the outer container */ + className?: string; + /** Width size override (e.g. "40px", 40) */ + size?: number | string; +} + +export const Logo: React.FC = ({ + iconOnly = false, + transparent = true, + className = '', + size, +}) => { + // If iconOnly, the viewBox wraps only the envelope geometry centered in the 1024x544 canvas. + // The envelope bounds are approximately min-x: 417, min-y: 138, width: 192, height: 148. + const viewBox = iconOnly ? '417 138 192 148' : '0 0 1024 450'; + + // Set dimensions based on size or fallback to defaults. + // Using width: size and height: auto ensures the browser computes the height dynamically + // and maintains the exact vector aspect ratio without letterboxing/squishing. + const style: React.CSSProperties = size !== undefined ? { + width: size, + height: 'auto', + } : {}; + + return ( +
+ + {/* Render dark background only if transparent is false and we are displaying the full logo */} + {!transparent && !iconOnly && ( + + )} + + {/* Exact Paths from the provided logo.svg */} + + {/* Chevron Path 1 */} + + {/* Base Path 2 */} + + {/* Base Path 3 */} + + {/* Base Path 4 */} + + {/* Chevron Path 5 */} + + {/* Chevron Path 6 */} + + + + {/* Typography (Hidden if iconOnly is true) */} + {!iconOnly && ( + + + INBOXOS + + + )} + +
+ ); +}; diff --git a/frontend/src/components/SidebarNav.tsx b/frontend/src/components/SidebarNav.tsx index 56ae343..c89c604 100644 --- a/frontend/src/components/SidebarNav.tsx +++ b/frontend/src/components/SidebarNav.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Link, useLocation } from 'react-router-dom'; -import { Inbox, Settings, Plus, X, Sparkles } from 'lucide-react'; +import { Inbox, Settings, Plus, X } from 'lucide-react'; import { useCompose } from '../context/ComposeContext'; +import { Logo } from './Logo'; export interface SidebarNavProps { onCloseMobileMenu?: () => void; @@ -75,19 +76,15 @@ export const SidebarNav: React.FC = ({ className={`flex items-center justify-between ${isMobile ? 'pb-4 mb-2' : 'px-5 py-5'}`} >
- {/* Logo mark: olive rounded */} -
- -
+ {/* Logo mark */} +

InboxOS diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..14d79b9 --- /dev/null +++ b/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index d3ed102..bb32bc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17560,22 +17560,6 @@ "dev": true, "license": "ISC" }, - "node_modules/yaml": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz", - "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==", - "extraneous": true, - "license": "ISC", - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/yargs": { "version": "17.7.3", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",