From b3c9d887952770200649b5bfa79bfc696bd2d7a5 Mon Sep 17 00:00:00 2001
From: Naim Abubaker <nabubaker@Mac.attlocal.net>
Date: Sun, 27 Jul 2025 14:58:40 -0400
Subject: [PATCH] updating branding and styling

---
 README.md                       | 23 ++++++++----
 app/components/Navigation.tsx   | 66 +++++++++++++++++++--------------
 app/root.tsx                    |  9 ++++-
 app/routes/_index.tsx           |  4 +-
 app/routes/dashboard.tsx        |  2 +-
 app/routes/estimate-summary.tsx |  2 +-
 app/tailwind.css                | 23 +++++++++++-
 app/utils/EstimateDocument.tsx  |  2 +-
 app/utils/firebase.client.ts    |  6 +--
 package.json                    |  2 +-
 tailwind.config.ts              | 29 +++++++++++++++
 11 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 1ef4ec5..884b360 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# ScopeCraft
+# MyAppCostEstimator
 
-ScopeCraft is a comprehensive project estimation tool designed to help developers, agencies, and freelancers create accurate project estimates quickly and efficiently. Built with modern web technologies, ScopeCraft streamlines the estimation process from initial client requirements to professional PDF proposals.
+MyAppCostEstimator is a comprehensive project estimation tool designed to help developers, agencies, and freelancers create accurate project estimates quickly and efficiently. Built with modern web technologies, MyAppCostEstimator streamlines the estimation process from initial client requirements to professional PDF proposals.
 
 ## Features
 
@@ -17,15 +17,19 @@ ScopeCraft is a comprehensive project estimation tool designed to help developer
 ## Screenshots
 
 ### Generated Project Estimate PDF
+
 <img width="472" height="845" alt="Screenshot 2025-07-26 at 1 19 13 PM" src="https://github.com/user-attachments/assets/9d240617-edab-40a4-ad17-4f9a10f7f035">
 
 ### Estimate Summary Interface
+
 <img width="540" height="844" alt="Screenshot 2025-07-26 at 1 18 57 PM" src="https://github.com/user-attachments/assets/2ed00a9f-3852-496b-b451-7890600749c2">
 
 ### Feature Selection Interface
+
 <img width="596" height="884" alt="Screenshot 2025-07-26 at 1 17 46 PM" src="https://github.com/user-attachments/assets/a8eb5373-95af-4fc9-9fd5-239d2871be05">
 
 ### Dashboard with Project Estimates
+
 <img width="1328" height="838" alt="Screenshot 2025-07-26 at 1 16 32 PM" src="https://github.com/user-attachments/assets/ae4dab64-c6b3-49be-8312-fc1160f3c929">
 
 ## Tech Stack
@@ -42,18 +46,21 @@ ScopeCraft is a comprehensive project estimation tool designed to help developer
 ## Installation and Setup
 
 1. **Clone the repository**
+
    ```sh
-   git clone https://github.com/NaimTheDev/scopecraft.git
-   cd scopecraft
+   git clone https://github.com/NaimTheDev/MyAppCostEstimator.git
+   cd MyAppCostEstimator
    ```
 
 2. **Install dependencies**
+
    ```sh
    npm install
    ```
 
 3. **Environment Setup**
    Create a `.env` file in the root directory with your Firebase and OpenAI credentials:
+
    ```env
    VITE_FIREBASE_API_KEY=your_firebase_api_key
    VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
@@ -77,7 +84,7 @@ Run the development server:
 npm run dev
 ```
 
-This starts the ScopeCraft development server on `http://localhost:5173` with hot reloading enabled.
+This starts the MyAppCostEstimator development server on `http://localhost:5173` with hot reloading enabled.
 
 ### Available Scripts
 
@@ -116,12 +123,13 @@ npm start
 ```
 
 The built application includes:
+
 - `build/server` - Server-side code
 - `build/client` - Client-side assets
 
 ### Deployment Options
 
-ScopeCraft can be deployed to any Node.js hosting platform:
+MyAppCostEstimator can be deployed to any Node.js hosting platform:
 
 - **Vercel**: Zero-config deployment with automatic builds
 - **Netlify**: JAMstack deployment with serverless functions
@@ -133,7 +141,8 @@ Make sure to set your environment variables in your hosting platform's configura
 
 ## Firebase Configuration
 
-ScopeCraft requires Firebase for:
+MyAppCostEstimator requires Firebase for:
+
 - **Authentication**: User login and anonymous access
 - **Firestore**: Project data storage
 - **Security Rules**: Configure appropriate read/write permissions
diff --git a/app/components/Navigation.tsx b/app/components/Navigation.tsx
index 703f7a2..a049121 100644
--- a/app/components/Navigation.tsx
+++ b/app/components/Navigation.tsx
@@ -47,33 +47,45 @@ export function Navigation({ className = "" }: NavigationProps) {
   ];
 
   return (
-    <nav className={`flex space-x-4 ${className}`}>
-      {navItems.map((item) => (
-        <Link
-          key={item.href}
-          to={item.href}
-          className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
-            location.pathname === item.href
-              ? "bg-blue-600 text-white"
-              : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
-          }`}
-        >
-          <span>{item.icon}</span>
-          <span>{item.label}</span>
-        </Link>
-      ))}
-
-      {/* Sign Out Button */}
-      {user && (
-        <button
-          onClick={handleSignOut}
-          disabled={signingOut}
-          className="flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors text-red-600 hover:text-red-700 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <span>🚪</span>
-          <span>{signingOut ? "Signing out..." : "Sign Out"}</span>
-        </button>
-      )}
+    <nav
+      className={`glass-card flex items-center justify-between px-8 py-4 mb-8 shadow-glass ${className}`}
+      style={{ backdropFilter: "blur(6px)" }}
+    >
+      <div className="flex items-center space-x-3">
+        <img
+          src="/logo-light.png"
+          alt="MyAppCostEstimator Logo"
+          className="h-8 w-8 rounded-xl shadow-soft"
+        />
+        <span className="text-2xl font-extrabold tracking-tight text-primary drop-shadow">
+          MyAppCostEstimator
+        </span>
+      </div>
+      <div className="flex space-x-2">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            to={item.href}
+            className={`flex items-center space-x-2 px-4 py-2 rounded-xl font-medium transition-colors shadow-soft ${
+              location.pathname === item.href
+                ? "bg-primary text-white shadow-glass"
+                : "text-gray-700 dark:text-gray-200 hover:text-primary hover:bg-surface-light/80"
+            }`}
+          >
+            <span>{item.icon}</span>
+            <span>{item.label}</span>
+          </Link>
+        ))}
+        {user && (
+          <button
+            onClick={handleSignOut}
+            className="ml-4 btn-accent"
+            disabled={signingOut}
+          >
+            {signingOut ? "Signing out..." : "Sign Out"}
+          </button>
+        )}
+      </div>
     </nav>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
index 61c8b98..c1ae495 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -20,6 +20,10 @@ export const links: LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
+  {
+    rel: "icon",
+    href: "/favicon.ico",
+  },
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {
@@ -28,11 +32,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>MyAppCostEstimator</title>
         <Meta />
         <Links />
       </head>
-      <body>
-        {children}
+      <body className="min-h-screen bg-gradient-to-br from-surface-light via-surface to-surface-dark font-sans text-gray-900 dark:text-gray-100">
+        <div className="min-h-screen flex flex-col">{children}</div>
         <ScrollRestoration />
         <Scripts />
       </body>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index a31f221..6b81649 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -92,7 +92,9 @@ export default function Index() {
       <div className="max-w-md w-full space-y-8">
         {/* Logo or App Name */}
         <div className="text-center">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">ScopeCraft</h1>
+          <h1 className="text-4xl font-extrabold text-primary drop-shadow mb-2">
+            MyAppCostEstimator
+          </h1>
           <p className="text-gray-600">
             Welcome to your project scoping companion
           </p>
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index a559db5..61e06e7 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -122,7 +122,7 @@ export default function Dashboard() {
         {/* Header */}
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-surface-text mb-2">
-            ScopeCraft Dashboard 👋
+            MyAppCostEstimator Dashboard 👋
           </h1>
           <p className="text-gray-600">Manage all your project estimates</p>
         </div>
diff --git a/app/routes/estimate-summary.tsx b/app/routes/estimate-summary.tsx
index 2ecfa0c..a44ee1c 100644
--- a/app/routes/estimate-summary.tsx
+++ b/app/routes/estimate-summary.tsx
@@ -96,7 +96,7 @@ export default function EstimateSummaryPage() {
 
   const recalculateEstimate = (breakdown: EstimateBreakdown[]) => {
     if (!estimate) return { totalHours: 0, totalCost: 0 };
-    
+
     const totalHours = breakdown.reduce((sum, item) => sum + item.hours, 0);
     const totalCost = totalHours * estimate.hourlyRate;
     return { totalHours, totalCost };
diff --git a/app/tailwind.css b/app/tailwind.css
index 303fe15..bea7a07 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -4,9 +4,30 @@
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
+  @apply bg-gradient-to-br from-surface-light via-surface to-surface-dark min-h-screen font-sans text-gray-900 dark:text-gray-100;
+  background-attachment: fixed;
 
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
   }
 }
+
+/* Glassmorphism card style */
+.glass-card {
+  @apply bg-glass backdrop-blur-xs shadow-glass rounded-2xl border border-white/30;
+}
+
+/* Modern button style */
+.btn-primary {
+  @apply bg-primary text-white font-semibold px-6 py-2 rounded-xl shadow-soft hover:bg-primary-dark transition;
+}
+
+.btn-accent {
+  @apply bg-accent text-primary-dark font-semibold px-6 py-2 rounded-xl shadow-soft hover:bg-accent-dark transition;
+}
+
+input,
+textarea,
+select {
+  @apply rounded-xl border border-surface-dark bg-white/80 dark:bg-surface-dark/80 px-4 py-2 shadow-soft focus:ring-2 focus:ring-primary focus:outline-none transition;
+}
diff --git a/app/utils/EstimateDocument.tsx b/app/utils/EstimateDocument.tsx
index 0f41186..59ef9d0 100644
--- a/app/utils/EstimateDocument.tsx
+++ b/app/utils/EstimateDocument.tsx
@@ -174,7 +174,7 @@ export const EstimateDocument: React.FC<EstimateDocumentProps> = ({
       <View style={styles.footer}>
         <Text>
           This {isProposal ? "proposal" : "estimate"} was generated by
-          ScopeCraft
+          MyAppCostEstimator
         </Text>
         <Text>Generated on {new Date().toLocaleString()}</Text>
       </View>
diff --git a/app/utils/firebase.client.ts b/app/utils/firebase.client.ts
index 16670bf..65c071f 100644
--- a/app/utils/firebase.client.ts
+++ b/app/utils/firebase.client.ts
@@ -14,9 +14,9 @@ import {
 // Your web app's Firebase configuration
 const firebaseConfig = {
   apiKey: "AIzaSyA-M0AhG8V6Hm0rAGgw9yvJIZhSJhz3FOo",
-  authDomain: "scopecraft-864ad.firebaseapp.com",
-  projectId: "scopecraft-864ad",
-  storageBucket: "scopecraft-864ad.firebasestorage.app",
+  authDomain: "myappcostestimator-864ad.firebaseapp.com",
+  projectId: "myappcostestimator-864ad",
+  storageBucket: "myappcostestimator-864ad.firebasestorage.app",
   messagingSenderId: "559021360125",
   appId: "1:559021360125:web:edeb524ba4f2dcdf70cf94",
 };
diff --git a/package.json b/package.json
index 6d8dc55..65a4938 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "scopecraft",
+  "name": "myappcostestimator",
   "private": true,
   "sideEffects": false,
   "type": "module",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5f06ad4..92e002f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,6 +16,35 @@ export default {
           "Noto Color Emoji",
         ],
       },
+      colors: {
+        primary: {
+          light: "#7dd3fc",
+          DEFAULT: "#0ea5e9",
+          dark: "#0369a1",
+        },
+        accent: {
+          light: "#fef9c3",
+          DEFAULT: "#fde68a",
+          dark: "#f59e42",
+        },
+        surface: {
+          light: "#f8fafc",
+          DEFAULT: "#f1f5f9",
+          dark: "#1e293b",
+        },
+        glass: "rgba(255,255,255,0.6)",
+      },
+      boxShadow: {
+        soft: "0 4px 24px 0 rgba(30,41,59,0.08)",
+        glass: "0 8px 32px 0 rgba(31, 41, 55, 0.18)",
+      },
+      borderRadius: {
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+      },
+      backdropBlur: {
+        xs: "2px",
+      },
     },
   },
   plugins: [],