Github icon changed

apps/web/components/gitHubIcon.tsx

@@ -0,0 +1,27 @@
+import { Github } from 'lucide-react'
+
+const GitHubIcon = () => {
+  return (
+    <div
+      className="relative h-0 w-0 -rotate-90 transform border-b-[100px] border-l-[100px] border-l-transparent"
+      style={{ borderBottomColor: '#3633A9' }}
+    >
+      <div
+        className="absolute inset-0 flex items-center justify-center"
+        style={{ top: '85px', left: '-27px' }}
+      >
+        <Icon />
+      </div>
+    </div>
+  )
+}
+
+const Icon = () => {
+  return (
+    <h2 className="absolute flex -translate-x-1/2 -translate-y-1/2 rotate-[135deg] transform items-center justify-center rounded-full bg-white p-2 transition-opacity hover:opacity-70">
+      <Github color="#3633A9" />
+    </h2>
+  )
+}
+
+export default GitHubIcon

apps/web/components/header.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Github } from 'lucide-react'
+import GitHubIcon from './gitHubIcon'
 
 export const Header = () => {
   return (
-    <nav className="container z-10 flex items-center justify-between p-5">
+    <nav className="container z-10 flex items-start justify-between p-5">
       <Link href="/">
         <Image
           src="/full-logo.png"
@@ -15,9 +15,7 @@ export const Header = () => {
         ></Image>
       </Link>
       <Link href="https://github.com/brunocroh/bolhadev.chat">
-        <h2 className="rounded-lg p-1 hover:bg-white hover:text-black">
-          <Github color="currentColor" />
-        </h2>
+        <GitHubIcon />
       </Link>
     </nav>
   )