updating branding and styling

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

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>
   );
 }

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>

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>

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>

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 };

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;
+}

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>

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",
 };

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "scopecraft",
+  "name": "myappcostestimator",
   "private": true,
   "sideEffects": false,
   "type": "module",

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: [],