From 736a4797ab08484325137c081ff8665997dd2488 Mon Sep 17 00:00:00 2001
From: Alpha Diop <alpha.diop@outlook.com>
Date: Tue, 19 May 2026 18:21:00 +0000
Subject: [PATCH] refactor(ui): remplacer FaktiirIcon par FaktiirLogo dans
 toute l'interface

---
 apps/web/app/page.tsx                     | 105 ++++++++++++----------
 apps/web/components/auth-split-layout.tsx |  14 +--
 apps/web/components/landing/navbar.tsx    |  14 +--
 3 files changed, 65 insertions(+), 68 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 9c961c4..6e5061d 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -9,7 +9,7 @@ import {
   UsersIcon,
 } from 'lucide-react';
 import Link from 'next/link';
-import FaktiirIcon from '@/components/icons/faktiir-icon';
+import FaktiirLogo from '@/components/icons/faktiir-logo';
 import { GithubIcon } from '@/components/icons/github-icon';
 import { AppPreview } from '@/components/landing/app-preview';
 import { Navbar } from '@/components/landing/navbar';
@@ -127,6 +127,7 @@ export default function Home() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <GithubIcon className="mr-1" />
                 Voir sur GitHub
               </a>
             </Button>
@@ -281,45 +282,62 @@ export default function Home() {
       <section className="px-4 py-16">
         <div className="mx-auto max-w-5xl">
           <Reveal>
-            <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-primary/5 px-8 py-10 text-center">
+            <div className="relative overflow-hidden rounded-2xl border border-border bg-muted/40 px-12 py-12">
+              {/* Logo filigrane pleine largeur */}
               <div
                 aria-hidden
-                className="absolute right-8 top-1/2 -translate-y-1/2 opacity-5"
+                className="pointer-events-none absolute bottom-8 right-6 w-[70%] opacity-[0.045] translate-y-4"
               >
-                <FaktiirIcon className="size-40 text-primary" />
+                <FaktiirLogo className="w-full h-auto text-foreground" />
               </div>
-              <p className="mb-2 text-xs font-medium uppercase tracking-widest text-primary">
-                Open Source
-              </p>
-              <h2 className="font-heading text-2xl font-semibold text-foreground md:text-3xl">
-                Transparent par nature.
-              </h2>
-              <p className="mx-auto mt-3 max-w-md text-sm text-muted-foreground">
-                Le code source est public. Inspectez, contribuez ou
-                auto-hébergez Faktiir sur votre propre infrastructure.
-              </p>
-              <div className="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
-                <Button variant="ghost" asChild className="gap-2">
-                  <a
-                    href="https://github.com/alphajoop/faktiir"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <GithubIcon className="size-4" />
-                    GitHub
-                  </a>
-                </Button>
-                <div className="flex flex-wrap items-center justify-center gap-3 text-xs text-muted-foreground">
-                  {[
-                    'MIT License',
-                    'Contributions bienvenues',
-                    'Auto-hébergeable',
-                  ].map((item) => (
-                    <span key={item} className="flex items-center gap-1">
-                      <CheckIcon className="size-3 text-primary" />
-                      {item}
-                    </span>
-                  ))}
+
+              <div className="relative z-10 max-w-md">
+                {/* Badge */}
+                <span className="mb-5 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-widest text-primary">
+                  <span className="size-1.5 rounded-full bg-primary" />
+                  Open source
+                </span>
+
+                <h2 className="font-heading text-3xl font-semibold leading-tight text-foreground md:text-4xl">
+                  Transparent
+                  <br />
+                  par nature.
+                </h2>
+
+                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                  Le code source est entièrement public. Inspectez, contribuez
+                  ou auto-hébergez Faktiir sur votre propre infrastructure.
+                </p>
+
+                <div className="mt-8 flex items-center gap-6">
+                  <Button variant="outline" asChild className="gap-2">
+                    <a
+                      href="https://github.com/alphajoop/faktiir"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <GithubIcon className="size-4" />
+                      Voir sur GitHub
+                    </a>
+                  </Button>
+
+                  <div className="h-14 w-px bg-border" aria-hidden />
+
+                  <div className="flex flex-col gap-2">
+                    {[
+                      'MIT License',
+                      'Contributions bienvenues',
+                      'Auto-hébergeable',
+                    ].map((item) => (
+                      <span
+                        key={item}
+                        className="flex items-center gap-2 text-xs text-muted-foreground"
+                      >
+                        <CheckIcon className="size-3 text-primary" />
+                        {item}
+                      </span>
+                    ))}
+                  </div>
                 </div>
               </div>
             </div>
@@ -353,9 +371,9 @@ export default function Home() {
               </Button>
               <Button
                 size="lg"
-                variant="ghost"
+                variant="outline"
                 asChild
-                className="h-11 px-6 text-base text-background/80 hover:bg-background/10 hover:text-background dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-muted"
+                className="h-11 px-6 text-base bg-transparent text-background dark:text-foreground dark:hover:text-background dark:hover:bg-primary"
               >
                 <Link href="/login">Se connecter</Link>
               </Button>
@@ -367,14 +385,9 @@ export default function Home() {
       {/* ── Footer ── */}
       <footer className="border-t border-border px-4 py-8">
         <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-4 text-xs text-muted-foreground sm:flex-row">
-          <div className="flex items-center gap-2">
-            <div className="flex size-5 items-center justify-center rounded bg-primary">
-              <FaktiirIcon className="size-3 text-primary-foreground" />
-            </div>
-            <span className="font-heading font-semibold text-foreground">
-              FAKTIIR
-            </span>
-            <span>·</span>
+          <div className="flex items-center gap-3">
+            <FaktiirLogo className="h-5 w-auto text-primary" />
+            <span className="text-muted-foreground/40">·</span>
             <span>Logiciel de facturation open source</span>
           </div>
           <div className="flex items-center gap-4">
diff --git a/apps/web/components/auth-split-layout.tsx b/apps/web/components/auth-split-layout.tsx
index 291c4cb..62278ac 100644
--- a/apps/web/components/auth-split-layout.tsx
+++ b/apps/web/components/auth-split-layout.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import FaktiirIcon from '@/components/icons/faktiir-icon';
 import { ModeToggle } from '@/components/mode-toggle';
+import FaktiirLogo from './icons/faktiir-logo';
 
 interface AuthSplitLayoutProps {
   children: React.ReactNode;
@@ -24,16 +24,8 @@ export function AuthSplitLayout({
       <div className="relative flex w-full flex-col lg:w-[48%] xl:w-[44%]">
         {/* Top bar */}
         <div className="flex items-center justify-between px-6 py-5 md:px-8">
-          <Link
-            href="/"
-            className="flex items-center gap-2.5 text-foreground transition-opacity hover:opacity-70"
-          >
-            <div className="flex size-7 items-center justify-center rounded-md bg-primary">
-              <FaktiirIcon className="size-4 text-primary-foreground" />
-            </div>
-            <span className="font-heading text-sm font-semibold tracking-tight">
-              FAKTIIR
-            </span>
+          <Link href="/" className="transition-opacity hover:opacity-80">
+            <FaktiirLogo className="h-5 w-auto text-primary" />
           </Link>
           <ModeToggle />
         </div>
diff --git a/apps/web/components/landing/navbar.tsx b/apps/web/components/landing/navbar.tsx
index c195940..d12decc 100644
--- a/apps/web/components/landing/navbar.tsx
+++ b/apps/web/components/landing/navbar.tsx
@@ -1,25 +1,17 @@
 'use client';
 
 import Link from 'next/link';
-import FaktiirIcon from '@/components/icons/faktiir-icon';
 import { ModeToggle } from '@/components/mode-toggle';
 import { Button } from '@/components/ui/button';
+import FaktiirLogo from '../icons/faktiir-logo';
 
 export function Navbar() {
   return (
     <header className="sticky top-0 z-50 border-b border-transparent bg-background/80 backdrop-blur-md">
       <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 md:px-6">
         {/* Logo */}
-        <Link
-          href="/"
-          className="flex items-center gap-2.5 text-foreground transition-opacity hover:opacity-70"
-        >
-          <div className="flex size-7 items-center justify-center rounded-md bg-primary">
-            <FaktiirIcon className="size-4 text-primary-foreground" />
-          </div>
-          <span className="font-heading text-sm font-semibold tracking-tight">
-            FAKTIIR
-          </span>
+        <Link href="/" className="transition-opacity hover:opacity-80">
+          <FaktiirLogo className="h-5 w-auto text-primary" />
         </Link>
 
         {/* Right actions */}