feat: component banner

src/components/banner.tsx

@@ -5,14 +5,20 @@ import banner from '../../public/images/banner.png'
 
 export function Banner() {
   return (
-    <div className="w-full h-[400px]">
-      <div />
-      <Image
-        src={banner}
-        className="absolute right-0"
-        alt="Banner"
-        unoptimized
-      />
+    <div className="w-full h-[400px] relative bg-green-900">
+      <div className="absolute right-0">
+        <div className="absolute h-[400px] w-full md:w-[400px] bg-gradient-to-r from-green-900 md:from-10% z-20" />
+        <h1 className="absolute z-20 font-bold text-2xl bottom-24 left-7 max-w-44 text-primary">
+          Transforme sua vida através do conhecimento
+        </h1>
+        <Image
+          src={banner}
+          alt="Banner"
+          className="h-[400px] object-cover"
+          unoptimized
+        />
+        <div className="absolute right-0 top-0 h-[400px] w-[200px] md:w-[600px] bg-gradient-to-l from-green-900 md:from-30% z-20" />
+      </div>
     </div>
   )
 }

src/components/footer.tsx

@@ -7,10 +7,10 @@ import { Button } from './ui/button'
 
 export function Footer() {
   return (
-    <footer className="px-6 py-10 bg-primary-main">
+    <footer className="px-6 py-10 bg-primary-main md:flex gap-3 flex-row-reverse justify-between items-center">
       <Image src={imgFooter} alt="Educação Adventista" />
       <nav className="py-8">
-        <ul>
+        <ul className="flex flex-col gap-4">
           <li>
             <Button asChild variant="link" className="p-0">
               <Link href="#">

tailwind.config.ts

@@ -23,6 +23,7 @@ const config = {
           400: '#26AAA7',
           700: '#007D77',
           800: '#036D67',
+          900: '#045149',
         },
         yellow: {
           500: 'var(--yellow-500)',