From e7df5120ac3751ceaa44f1c0c987e11ee086e94a Mon Sep 17 00:00:00 2001
From: GuiZeroUm <guilherme2004official@hotmail.com>
Date: Sun, 19 May 2024 00:15:11 -0500
Subject: [PATCH] feat: modifying header and footer red

---
 package-lock.json                             | 25 ++++++
 package.json                                  |  7 +-
 src/components/BurgerMenu/BurgerMenu.tsx      |  5 +-
 .../AnimatedHamburgerButton.tsx               | 85 +++++++++++++++++++
 src/components/Footer/Footer.tsx              | 47 +++++-----
 src/components/Header/Header.tsx              |  2 +-
 6 files changed, 143 insertions(+), 28 deletions(-)
 create mode 100644 src/components/BurgerMenu/components/BurguerMenuItem/AnimatedHamburgerButton.tsx

diff --git a/package-lock.json b/package-lock.json
index 33731021..2f4ec5a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "formik": "^2.4.6",
+        "framer-motion": "^11.2.4",
         "lucide-react": "^0.378.0",
         "qs": "^6.12.1",
         "react": "^18.2.0",
@@ -3792,6 +3793,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz",
+      "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 29dd3ef1..0aac4e1b 100644
--- a/package.json
+++ b/package.json
@@ -26,14 +26,15 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "formik": "^2.4.6",
+    "framer-motion": "^11.2.4",
     "lucide-react": "^0.378.0",
     "qs": "^6.12.1",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.23.0",
     "react-select": "^5.8.0",
-    "react": "^18.2.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"
@@ -41,16 +42,16 @@
   "devDependencies": {
     "@types/node": "^20.12.8",
     "@types/qs": "^6.9.15",
+    "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-input-mask": "^3.0.5",
-    "@types/react": "^18.2.66",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint": "^8.57.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
diff --git a/src/components/BurgerMenu/BurgerMenu.tsx b/src/components/BurgerMenu/BurgerMenu.tsx
index 2f823e5b..6d450436 100644
--- a/src/components/BurgerMenu/BurgerMenu.tsx
+++ b/src/components/BurgerMenu/BurgerMenu.tsx
@@ -35,7 +35,10 @@ const BurgerMenu = () => {
   return (
     <Sheet>
       <SheetTrigger>
-        <Menu color="white" className="ml-2 mr-2" />
+        <Menu
+          color="white"
+          className="ml-2 mr-2 inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground rounded-md disabled:bg-red-500 hover:bg-red-400"
+        />
       </SheetTrigger>
       <SheetContent side="left" className="pt-[96px] flex flex-col">
         <div className="flex flex-col gap-4">
diff --git a/src/components/BurgerMenu/components/BurguerMenuItem/AnimatedHamburgerButton.tsx b/src/components/BurgerMenu/components/BurguerMenuItem/AnimatedHamburgerButton.tsx
new file mode 100644
index 00000000..459e9354
--- /dev/null
+++ b/src/components/BurgerMenu/components/BurguerMenuItem/AnimatedHamburgerButton.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { MotionConfig, motion } from 'framer-motion';
+
+export const Example = () => {
+  return (
+    <div className="grid h-screen place-content-center bg-gradient-to-br from-violet-500 to-indigo-500">
+      <AnimatedHamburgerButton />
+    </div>
+  );
+};
+
+const AnimatedHamburgerButton = () => {
+  const [active, setActive] = useState(false);
+  return (
+    <MotionConfig
+      transition={{
+        duration: 0.5,
+        ease: 'easeInOut',
+      }}
+    >
+      <motion.button
+        initial={false}
+        animate={active ? 'open' : 'closed'}
+        onClick={() => setActive((pv) => !pv)}
+        className="relative h-10 w-10 rounded-full bg-white/0 transition-colors hover:bg-white/20"
+      >
+        <motion.span
+          variants={VARIANTS.top}
+          className="absolute h-1 w-10 bg-white"
+          style={{ y: '-50%', left: '50%', x: '-50%', top: '35%' }}
+        />
+        <motion.span
+          variants={VARIANTS.middle}
+          className="absolute h-1 w-10 bg-white"
+          style={{ left: '50%', x: '-50%', top: '50%', y: '-50%' }}
+        />
+        <motion.span
+          variants={VARIANTS.bottom}
+          className="absolute h-1 w-5 bg-white"
+          style={{
+            x: '-50%',
+            y: '50%',
+            bottom: '35%',
+            left: 'calc(50% + 10px)',
+          }}
+        />
+      </motion.button>
+    </MotionConfig>
+  );
+};
+
+const VARIANTS = {
+  top: {
+    open: {
+      rotate: ['0deg', '0deg', '45deg'],
+      top: ['35%', '50%', '50%'],
+    },
+    closed: {
+      rotate: ['45deg', '0deg', '0deg'],
+      top: ['50%', '50%', '35%'],
+    },
+  },
+  middle: {
+    open: {
+      rotate: ['0deg', '0deg', '-45deg'],
+    },
+    closed: {
+      rotate: ['-45deg', '0deg', '0deg'],
+    },
+  },
+  bottom: {
+    open: {
+      rotate: ['0deg', '0deg', '45deg'],
+      bottom: ['35%', '50%', '50%'],
+      left: '50%',
+    },
+    closed: {
+      rotate: ['45deg', '0deg', '0deg'],
+      bottom: ['50%', '50%', '35%'],
+      left: 'calc(50% + 10px)',
+    },
+  },
+};
+
+export default AnimatedHamburgerButton;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 58f6b67a..c606c7ff 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -13,32 +13,33 @@ const Footer = React.forwardRef<
       ref={ref}
       {...rest}
       className={cn(
-        'flex w-full flex-col md:flex-row py-8 md:py-4 px-2 md-p4 gap-3 justify-center flex-wrap items-center bg-red-600',
+        'flex w-full flex-col md:flex-row py-8 md:py-4 px-2 md-p4 gap-3 justify-center flex-wrap items-center bg-red-500',
         className
       )}
     >
-      <p className="text-white">
-        Para cadastrar novos abrigos clique{' '}
-        <a
-          href="https://forms.gle/2S7L2gR529Dc8P3T9"
-          className="underline hover:text-gray-300"
-          target="_blank"
-        >
-          aqui
-        </a>
-      </p>
-      <span className="text-white hidden md:block">•</span>
-      <span className="text-white flex flex-nowrap gap-2 items-center">
-        Projeto Open Source disponível em{' '}
-        <a
-          className="underline hover:text-gray-300 flex"
-          href="https://github.com/SOS-RS"
-          target="_blank"
-        >
-          Github
-        </a>
-        <Heart className="h-3 w-3 stroke-white fill-white" />
-      </span>
+      <div className="flex flex-col text-center">
+        <p className="text-white mb-2">
+          Para cadastrar novos abrigos clique{' '}
+          <a
+            href="https://forms.gle/2S7L2gR529Dc8P3T9"
+            className="underline hover:text-gray-300"
+            target="_blank"
+          >
+            aqui
+          </a>
+        </p>
+        <span className="text-white flex flex-nowrap gap-2 items-center">
+          Projeto Open Source disponível no{' '}
+          <a
+            className="underline hover:text-gray-300 flex"
+            href="https://github.com/SOS-RS"
+            target="_blank"
+          >
+            Github
+          </a>
+          <Heart className="h-3 w-3 stroke-white fill-white" />
+        </span>
+      </div>
     </div>
   );
 });
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 9dde1265..1a6ef41d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -17,7 +17,7 @@ const Header = React.forwardRef<HTMLDivElement, IHeader>((props, ref) => {
     <div
       ref={ref}
       className={cn(
-        'bg-red-600 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
+        'bg-red-500 flex h-[56px] justify-between items-center text-white p-3 gap-2 w-full z-[60]',
         className
       )}
       {...rest}