update frontend ( tarpin bo )

apps/web/src/components/brand/Brand.tsx

@@ -1,6 +1,6 @@
-import { Gem } from "./Gem";
-import { cn } from "@/lib/utils";
 
+import { cn } from "@/lib/utils";
+import logo from "@/assets/logo.png";
 /**
  * Lockup horizontal : ◆ + "Rubis" (+ optionnel "sur l'ongle" en suffixe italique muted).
  * À utiliser dans les headers, le sidebar, les emails.
@@ -13,9 +13,10 @@ type BrandProps = {
   /** Taille du gem (le wordmark s'aligne dessus). */
   gemSize?: number;
   className?: string;
+  onlyImage?: boolean;
 };
 
-export function Brand({ withSuffix = false, gemSize = 22, className }: BrandProps) {
+export function Brand({ withSuffix = false, onlyImage = false, className }: BrandProps) {
   return (
     <span
       className={cn(
@@ -24,20 +25,26 @@ export function Brand({ withSuffix = false, gemSize = 22, className }: BrandProp
         className,
       )}
     >
-      <Gem size={gemSize} aria-label="Rubis Sur l'Ongle" />
-      <span className="leading-none">
-        Rubis
-        {withSuffix && (
-          <span
-            className={cn(
-              "ml-1 font-display italic font-medium text-ink-3",
-              "text-[12.5px] tracking-[-0.005em]",
+      {onlyImage ? (
+        <img src={logo} alt="Logo" className="w-10 h-10 border-2 border-rubis rounded-xl" />
+      ) : (
+        <>
+          <img src={logo} alt="Logo" className="w-8 h-8 border-2 border-rubis rounded-xl" />
+          <span className="leading-none">
+            Rubis
+            {withSuffix && (
+              <span
+                className={cn(
+                  "ml-1 font-display italic font-medium text-ink-3",
+                  "text-[12.5px] tracking-[-0.005em]",
+                )}
+              >
+                sur l&apos;ongle
+              </span>
             )}
-          >
-            sur l&apos;ongle
           </span>
-        )}
-      </span>
+        </>
+      )}
     </span>
   );
 }

apps/web/src/components/dashboard/RubisHero.tsx

@@ -1,7 +1,7 @@
-import { Gem } from "@/components/brand/Gem";
 import { Card } from "@/components/ui/Card";
 import { formatRubisToHours } from "@/lib/format";
 import { cn } from "@/lib/utils";
+import { Brand } from "../brand/Brand";
 
 /**
  * RubisHero — la pièce centrale du dashboard.
@@ -46,10 +46,7 @@ export function RubisHero({
 
       <div className="relative z-10 flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8">
         <div className="flex shrink-0 items-center gap-4 sm:flex-col sm:items-center sm:gap-1">
-          <Gem size={56} glow aria-label="Compteur de rubis" />
-          <p className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-ink-3 sm:mt-1">
-            Rubis
-          </p>
+          <Brand onlyImage={true} />
         </div>
 
         <div className="flex-1 min-w-0">