diff --git a/src/app/components/BuyMeACoffee/index.tsx b/src/app/components/BuyMeACoffee/index.tsx
new file mode 100644
index 0000000..943d7d4
--- /dev/null
+++ b/src/app/components/BuyMeACoffee/index.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next";
+import Typography from "../Typography";
+import styles from "./styles.module.css";
+import CoffeeSvg from "../../assets/icons/coffee.svg";
+import { BUY_ME_A_COFFEE_LINK } from "../../utils/contrants";
+
+export default function BuyMeACoffee() {
+ const { t } = useTranslation();
+
+ return (
+
+ {t("components.buyMeACoffee.label")}
+
+
+ );
+}
diff --git a/src/app/components/BuyMeACoffee/styles.module.css b/src/app/components/BuyMeACoffee/styles.module.css
new file mode 100644
index 0000000..c6fc716
--- /dev/null
+++ b/src/app/components/BuyMeACoffee/styles.module.css
@@ -0,0 +1,30 @@
+.buy_me_a_coffee-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.25rem;
+ transition: color 0.2s ease-in-out;
+}
+
+.buy_me_a_coffee-wrapper:hover {
+ color: var(--secondary);
+}
+
+.buy_me_a_coffee-wrapper:hover svg path {
+ fill: var(--secondary);
+}
+
+.buy_me_a_coffee-wrapper svg {
+ width: 2rem;
+ height: 2rem;
+
+ @media (min-width: 768px) {
+ width: 3rem;
+ height: 3rem;
+ }
+}
+
+.buy_me_a_coffee-wrapper svg path {
+ fill: var(--primary);
+ transition: fill 0.2s ease-in-out;
+}
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
index e220796..a169397 100644
--- a/src/app/components/Header/index.tsx
+++ b/src/app/components/Header/index.tsx
@@ -1,3 +1,4 @@
+import BuyMeACoffee from "../BuyMeACoffee";
import LanguageSwitch from "../LanguageSwitch";
import styles from "./styles.module.css";
import dynamic from "next/dynamic";
@@ -12,6 +13,9 @@ export default function Header() {
+ -
+
+
-
diff --git a/src/app/globals.css b/src/app/globals.css
index 11175bc..8a2d3f2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,3 +34,8 @@ body {
-webkit-font-smoothing: antialiased;
transition: all 0.2s ease-in-out;
}
+
+a {
+ color: var(--primary);
+ text-decoration: none;
+}
diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
index 62f2afb..d63f5c5 100644
--- a/src/app/i18n/locales/en.json
+++ b/src/app/i18n/locales/en.json
@@ -6,5 +6,14 @@
"pt": {
"label": "Portuguese"
}
+ },
+ "components": {
+ "buyMeACoffee": {
+ "label": "Buy me a coffee"
+ }
+ },
+ "pages": {
+ "home": {},
+ "projects": {}
}
-}
\ No newline at end of file
+}
diff --git a/src/app/i18n/locales/pt.json b/src/app/i18n/locales/pt.json
index a98c863..32680b8 100644
--- a/src/app/i18n/locales/pt.json
+++ b/src/app/i18n/locales/pt.json
@@ -6,5 +6,14 @@
"pt": {
"label": "Português"
}
+ },
+ "components": {
+ "buyMeACoffee": {
+ "label": "Buy me a coffee"
+ }
+ },
+ "pages": {
+ "home": {},
+ "projects": {}
}
-}
\ No newline at end of file
+}
diff --git a/src/app/utils/contrants.ts b/src/app/utils/contrants.ts
new file mode 100644
index 0000000..988a68f
--- /dev/null
+++ b/src/app/utils/contrants.ts
@@ -0,0 +1,6 @@
+export const BUY_ME_A_COFFEE_LINK =
+ "https://nubank.com.br/cobrar/p0bwm/66cddada-b67a-4a83-b8a6-ab2a9f585ce9";
+
+export const GITHUB_LINK = "https://github.com/LaercioSR/";
+
+export const LINKEDIN_LINK = "https://www.linkedin.com/in/laerciorios/";