💄 feat: estilização de interface

SandroFernandesRosal · Jan 13, 2025 · 81bd1d9 · 81bd1d9
1 parent 01e5fb3
commit 81bd1d9
Showing 1 changed file with 36 additions and 2 deletions.
diff --git a/src/components/highlight.tsx b/src/components/highlight.tsx
@@ -28,13 +28,47 @@ export default function HighLight() {
             Sites modernos e personalizados para impulsionar seu negócio.
           </h1>
 
+          <div className="flex justify-center gap-3 mt-5">
+            <div className="flex items-center gap-1">
+              <span
+                className="text-5xl  font-bold text-primary"
+                style={{
+                  WebkitTextStroke: '2px',
+                  WebkitTextFillColor: 'transparent',
+                }}
+              >
+                +3
+              </span>{' '}
+              <div className="flex flex-col text-sm">
+                <span className="lg:text-lg">anos de</span>
+                <span className="lg:text-lg">experiência</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1">
+              <span
+                className="font-bold text-5xl  text-primary"
+                style={{
+                  WebkitTextStroke: '2px',
+                  WebkitTextFillColor: 'transparent',
+                }}
+              >
+                +15
+              </span>{' '}
+              <div className="flex flex-col text-sm">
+                <span className="lg:text-lg">projetos</span>
+                <span className="lg:text-lg">concluídos</span>
+              </div>
+            </div>
+          </div>
+
           <div className="flex mt-5 gap-3 justify-center w-ful flex-wrap">
             <Link
               href={'/sobre'}
               className="flex text-center gap-2 p-2 rounded-lg dark:bg-bgdark dark:border-zinc-700 bg-bglight border-[1px] border-zinc-400 hover:border-primary dark:hover:border-primary"
               aria-label="Saiba mais sobre mim"
             >
-              <span>Quem sou</span>{' '}
+              <span>Quem sou</span>
               <PiPersonArmsSpreadFill className="text-2xl text-primary" />
             </Link>
             <Link
@@ -44,7 +78,7 @@ export default function HighLight() {
               className="flex text-center gap-2 p-2 rounded-lg dark:bg-bgdark dark:border-zinc-700 bg-bglight border-[1px] border-zinc-400 hover:border-primary dark:hover:border-primary"
               aria-label="Entre em contato"
             >
-              <span>Contato</span>{' '}
+              <span>Contato</span>
               <FaWhatsapp className="text-2xl text-primary" />
             </Link>
           </div>