feat: modifying header and footer red

package.json

@@ -26,31 +26,32 @@
     "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"
   },
   "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",

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">

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;

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>
   );
 });

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}