Merge pull request #32 from allbertuu/feature/budget-contact

Feature/budget contact

src/components/BudgetContact/__tests__/BudgetContact.spec.tsx

@@ -0,0 +1,12 @@
+import budgetEmail from '@/data/budgetEmail.json';
+import { render, screen } from '@/utils/testUtils';
+import { BudgetContact } from '..';
+
+test('button have the budget email link to reach me out', async () => {
+  render(<BudgetContact />);
+
+  const button = screen.getByText(/obtenha um orçamento agora/i);
+  const emailLink = `mailto:${budgetEmail.recipient}?subject=${budgetEmail.subject}&body=${budgetEmail.body}`;
+
+  expect(button).toHaveAttribute('href', emailLink);
+});

src/components/BudgetContact/index.tsx

@@ -0,0 +1,20 @@
+import budgetEmail from '@/data/budgetEmail.json';
+import { EnvelopeSimple } from '@phosphor-icons/react';
+
+export const BudgetContact: React.FC = () => {
+  const emailLink = `mailto:${budgetEmail.recipient}?subject=${budgetEmail.subject}&body=${budgetEmail.body}`;
+
+  return (
+    <a
+      title="Contato"
+      className="originRightReveal btn btn-accent"
+      href={emailLink}
+    >
+      <EnvelopeSimple
+        weight="fill"
+        className="-mt-1 mr-2 inline-block text-xl text-white"
+      />
+      Obtenha um Orçamento Agora
+    </a>
+  );
+};

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import imgLogo from '@/assets/imgs/logo.svg';
-import { SendMeAnEmail } from '@/components/SendMeAnEmail';
+import { BudgetContact } from '@/components/BudgetContact';
 import { Folders, IdentificationCard } from '@phosphor-icons/react';
 
 type THeaderProps = React.HTMLAttributes<HTMLElement>;
@@ -46,7 +46,7 @@ export const Header: React.FC<THeaderProps> = ({ ...props }) => {
             Projetos
           </a>
 
-          <SendMeAnEmail />
+          <BudgetContact />
         </ul>
       </nav>
     </header>

src/components/MySocials/index.tsx

@@ -20,7 +20,7 @@ export const MySocials: React.FC<TMySocialsProps> = ({ ...props }) => {
       <ExternalLink
         href={links.linkedin.url}
         title="LinkedIn"
-        className="social-link no-underline bg-blue hover:bg-blue-light text-white mySocialsReveal load-hidden intervalReveal"
+        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-blue hover:bg-blue-light text-white mySocialsReveal load-hidden intervalReveal"
       >
         <LinkedinLogo weight="bold" />
         LinkedIn
@@ -29,7 +29,7 @@ export const MySocials: React.FC<TMySocialsProps> = ({ ...props }) => {
       <ExternalLink
         href={links.github.url}
         title="GitHub"
-        className="social-link no-underline bg-white/90 hover:bg-white/70 text-[#0c0b0b] mySocialsReveal load-hidden intervalReveal"
+        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-white/90 hover:bg-white/70 text-[#0c0b0b] mySocialsReveal load-hidden intervalReveal"
       >
         <GitHubLogo fill="#000" />
         GitHub
@@ -38,7 +38,7 @@ export const MySocials: React.FC<TMySocialsProps> = ({ ...props }) => {
       <ExternalLink
         href={links.cv.url}
         title="Currículo"
-        className="social-link no-underline bg-accent hover:bg-accent/80 text-white mySocialsReveal load-hidden intervalReveal"
+        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-accent hover:bg-accent/80 text-white mySocialsReveal load-hidden intervalReveal"
       >
         <FileText weight="bold" />
         Currículo

src/data/budgetEmail.json

@@ -0,0 +1,5 @@
+{
+  "subject": "Solicitação de Orçamento para Desenvolvimento de Website/E-commerce/Landing page",
+  "body": "Olá, Alberto! Espero que esteja tudo bem com você. Estou entrando em contato para discutir a possibilidade de agendar uma reunião ou uma chamada para discutir melhor as necessidades e os detalhes do meu projeto [Seu projeto]...",
+  "recipient": "[email protected]"
+}

src/styles/global.css

@@ -37,10 +37,6 @@
     @apply decoration-accent;
   }
 
-  button {
-    @apply rounded bg-accent px-2 py-[2px] hover:bg-accent/90 active:bg-accent/70;
-  }
-
   a {
     @apply underline hover:opacity-80;
   }
@@ -101,8 +97,13 @@
 }
 
 @layer components {
-  .social-link {
-    @apply flex items-center gap-1 rounded-md px-2 py-1 text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50;
+  button,
+  .btn {
+    @apply rounded px-2 py-1;
+  }
+
+  .btn-accent {
+    @apply bg-accent hover:bg-accent/90 active:bg-accent/70;
   }
 
   .section__title {