From 5bd9daf70d1f761159900297cae3bd4b2af8b2eb Mon Sep 17 00:00:00 2001
From: Rodrigo <230417@epvc.pt>
Date: Tue, 17 Mar 2026 10:03:47 +0000
Subject: [PATCH] feat: initialize web application with Tailwind CSS
 configuration, global styles, Header component, and Landing page.

---
 web/src/components/layout/Header.tsx | 12 ++++++------
 web/src/index.css                    |  8 ++++----
 web/src/pages/Landing.tsx            | 14 +++++++-------
 web/tailwind.config.cjs              |  3 +++
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 68b841e..054bd43 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -22,7 +22,7 @@ export const Header = () => {
           className="text-2xl font-black tracking-tighter text-slate-900 group flex items-center gap-2"
           onClick={() => setMobileMenuOpen(false)}
         >
-          <div className="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-indigo-400 shadow-lg shadow-slate-200">
+          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-200">
             <User size={18} fill="currentColor" />
           </div>
           <span className="group-hover:text-indigo-600 transition-colors uppercase italic font-black">Smart Agenda</span>
@@ -36,15 +36,15 @@ export const Header = () => {
                 to="/explorar"
                 className="text-sm font-bold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-2"
               >
-                <MapPin size={16} className="text-indigo-600" />
+                <MapPin size={16} className="text-indigo-500" />
                 <span>Descobrir Barbearias</span>
               </Link>
 
               <Link
                 to="/carrinho"
-                className="relative text-slate-600 hover:text-slate-900 transition-all p-2 rounded-xl hover:bg-slate-50"
+                className="relative text-slate-700 hover:text-slate-900 transition-all p-2 rounded-xl hover:bg-slate-50"
               >
-                <ShoppingCart size={20} />
+                <ShoppingCart size={20} className="text-slate-700" />
                 {cart.length > 0 && (
                   <span className="absolute -right-1 -top-1 rounded-full bg-slate-900 px-1.5 py-0.5 text-[10px] font-black text-indigo-400 shadow-md min-w-[18px] text-center">
                     {cart.length}
@@ -63,7 +63,7 @@ export const Header = () => {
                 className="flex items-center gap-3 bg-slate-50 hover:bg-slate-100 border border-slate-200/60 pl-3 pr-4 py-1.5 rounded-full transition-all group"
                 type="button"
               >
-                <div className="w-7 h-7 rounded-full bg-slate-900 flex items-center justify-center text-indigo-400 shadow-sm">
+                <div className="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center text-white shadow-sm">
                   <User size={14} fill="currentColor" />
                 </div>
                 <span className="text-sm font-bold text-slate-700 group-hover:text-slate-900 max-w-[120px] truncate">{user.name}</span>
@@ -88,7 +88,7 @@ export const Header = () => {
               </Link>
               <Link
                 to="/registo"
-                className="inline-flex items-center justify-center rounded-xl bg-slate-900 px-5 py-2 text-sm font-bold text-indigo-400 shadow-lg shadow-slate-200 hover:bg-slate-800 transition-all font-black uppercase italic tracking-widest"
+                className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2 text-sm font-bold text-white shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all font-black uppercase italic tracking-widest"
               >
                 Criar Conta
               </Link>
diff --git a/web/src/index.css b/web/src/index.css
index 1ad628e..9951d5d 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -4,9 +4,9 @@
 
 @layer base {
   :root {
-    --brand-primary: #4f46e5;
-    --brand-primary-light: #818cf8;
-    --brand-primary-dark: #3730a3;
+    --brand-primary: #6366f1; /* Indigo 500 mais vibrante */
+    --brand-primary-light: #a5b4fc;
+    --brand-primary-dark: #4338ca;
     --obsidian: #0f172a;
     --obsidian-light: #1e293b;
     --slate-950: #020617;
@@ -55,7 +55,7 @@
 
 
   .indigo-gradient {
-    @apply bg-gradient-to-br from-indigo-500 via-indigo-600 to-indigo-700;
+    @apply bg-gradient-to-br from-indigo-400 via-indigo-500 to-indigo-600;
   }
 
   .obsidian-gradient {
diff --git a/web/src/pages/Landing.tsx b/web/src/pages/Landing.tsx
index 1d0ba88..90bd838 100644
--- a/web/src/pages/Landing.tsx
+++ b/web/src/pages/Landing.tsx
@@ -39,7 +39,7 @@ export default function Landing() {
         <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-slate-500/10 rounded-full blur-[120px] translate-y-1/2 -translate-x-1/2"></div>
 
         <div className="relative z-10 space-y-10 max-w-5xl">
-          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 backdrop-blur-md rounded-full text-[10px] font-black uppercase tracking-[0.3em] w-fit border border-white/10 animate-fade-in text-indigo-400">
+          <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-500/10 backdrop-blur-md rounded-full text-[10px] font-black uppercase tracking-[0.3em] w-fit border border-indigo-500/30 animate-fade-in text-indigo-300">
             <Sparkles size={14} className="animate-pulse" />
             <span>A Solução Completa para a Sua Barbearia</span>
           </div>
@@ -58,7 +58,7 @@ export default function Landing() {
             <Button asChild size="lg" className="h-16 px-10 bg-white text-slate-950 hover:bg-indigo-600 hover:text-white font-black uppercase tracking-widest text-xs transition-all duration-300 rounded-2xl shadow-2xl">
               <Link to="/explorar" className="flex items-center gap-3">
                 Ver Barbearias
-                <ArrowRight size={18} />
+                <ArrowRight size={18} strokeWidth={3} />
               </Link>
             </Button>
             <Button asChild variant="outline" size="lg" className="h-16 px-10 bg-transparent text-white border-white/20 hover:bg-white/5 hover:border-white/40 font-black uppercase tracking-widest text-xs rounded-2xl backdrop-blur-sm">
@@ -117,7 +117,7 @@ export default function Landing() {
             },
           ].map((feature) => (
             <Card key={feature.title} className="p-10 space-y-6 rounded-[2.5rem] transition-all duration-500 hover:-translate-y-2 group bg-white border-2 border-slate-50 shadow-sm hover:shadow-xl">
-              <div className="w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-900 text-indigo-400 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
+              <div className="w-16 h-16 rounded-2xl flex items-center justify-center bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                 <feature.icon size={32} />
               </div>
               <div className="space-y-3">
@@ -134,10 +134,10 @@ export default function Landing() {
         <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-900 via-slate-950 to-slate-950 opacity-50" />
         <div className="max-w-6xl mx-auto px-6 relative z-10">
           <div className="text-center mb-20">
-            <h2 className="text-5xl md:text-6xl font-black text-white tracking-tighter uppercase italic mb-6">
-              Como <span className="indigo-gradient bg-clip-text text-transparent">Funciona</span>
-            </h2>
-            <div className="w-24 h-1 bg-indigo-600 mx-auto rounded-full" />
+              <h2 className="text-5xl md:text-6xl font-black text-white tracking-tighter uppercase italic mb-6">
+                Como <span className="text-indigo-400">Funciona</span>
+              </h2>
+              <div className="w-24 h-1 bg-indigo-500 mx-auto rounded-full shadow-[0_0_20px_rgba(99,102,241,0.5)]" />
           </div>
 
           <div className="grid md:grid-cols-3 gap-16 relative">
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 8d6d457..1c38f62 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -8,6 +8,9 @@ module.exports = {
       colors: {
         amber: colors.amber,
         slate: colors.slate,
+        indigo: colors.indigo,
+        violet: colors.violet,
+        emerald: colors.emerald,
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],