From 19c53b5a5d751f0d6a6021cbf17a485066d9e986 Mon Sep 17 00:00:00 2001
From: GiovaniFZ <giovanifinazzi@gmail.com>
Date: Sun, 5 Jan 2025 21:00:03 -0300
Subject: [PATCH] style: header: align fontawesome icon with the name on
 responsive design

---
 app/components/Header.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 76e74e7..7cff268 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -6,11 +6,11 @@ export default function Header() {
   return (
     <header className="bg-gray-800">
       <nav className="container mx-auto px-4 py-6">
-        <ul className="flex space-x-6">
-          <li><Link href="/" className="text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faHouse} className="text-md mr-1" /> Home</Link></li>
-          <li><Link href="/about" className="text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faUser} className="text-md mr-1" /> About</Link></li>
-          <li><Link href="/contact" className="text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faPhone} className="text-md mr-1" /> Contact</Link></li>
-          <li><Link href="/domains" className="text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faLink} className="text-md mr-1" /> Domains</Link></li>
+        <ul className="flex space-x-12">
+          <li><Link href="/" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faHouse} className="text-md mr-2" /> Home</Link></li>
+          <li><Link href="/about" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faUser} className="text-md mr-2" /> About</Link></li>
+          <li><Link href="/contact" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faPhone} className="text-md mr-2" /> Contact</Link></li>
+          <li><Link href="/domains" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faLink} className="text-md mr-2" /> Domains</Link></li>
         </ul>
       </nav>
     </header>