From cf511786328ec3b524c9f794aa637a005cb3784c Mon Sep 17 00:00:00 2001
From: MelissaAyllon <mayllon@espol.edu.ec>
Date: Sun, 4 Aug 2024 22:41:34 -0500
Subject: [PATCH] footer

---
 package.json                     |  1 +
 pnpm-lock.yaml                   |  9 ++++++++
 src/lib/components/Footer.svelte | 39 ++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/lib/components/Footer.svelte

diff --git a/package.json b/package.json
index c7d42f9..89ab1cc 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
 		"date-fns": "^3.6.0",
 		"formsnap": "^1.0.1",
 		"lucide-svelte": "^0.418.0",
+		"simple-icons": "^13.4.0",
 		"svelte-sonner": "^0.3.27",
 		"tailwind-merge": "^2.4.0",
 		"valibot": "^0.37.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8a63a51..d86f288 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       lucide-svelte:
         specifier: ^0.418.0
         version: 0.418.0(svelte@5.0.0-next.205)
+      simple-icons:
+        specifier: ^13.4.0
+        version: 13.4.0
       svelte-sonner:
         specifier: ^0.3.27
         version: 0.3.27(svelte@5.0.0-next.205)
@@ -1938,6 +1941,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-icons@13.4.0:
+    resolution: {integrity: sha512-z9jQas7DhuNxSqb6EFNRuBnNQuV399XIhnu724Z4QX14L7Lt9y9XoQO2Iesx/Ym9c62MTGhr5bxQ5HQn2jBh8g==}
+    engines: {node: '>=0.12.18'}
+
   sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -3951,6 +3958,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-icons@13.4.0: {}
+
   sirv@2.0.4:
     dependencies:
       '@polka/url': 1.0.0-next.25
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..9b39d67
--- /dev/null
+++ b/src/lib/components/Footer.svelte
@@ -0,0 +1,39 @@
+<script>
+    import { siFacebook, siX, siInstagram, siGithub } from 'simple-icons';
+</script>
+
+<footer>
+    <div class="flex flex-col gap-6 justify-between px-6">
+
+        <div class="flex flex-row gap-96 justify-between">
+            <img src="/path/to/image.png" alt="Mascota"/>
+            <div class="flex flex-col gap-2 justify-between" >
+                <h2>SUBSCRIBE TO OUR NEWSLETTER</h2>
+                <p>The latest news, articles, and resources, sent to your inbox weekly.</p>
+                <div class="flex flex-row gap-2 justify-between ">
+                    <input class="w-3/4 text-black pr-4 pl-4 rounded" type="email" placeholder="Enter your email"/>
+                    <button class="text-white bg-green-600 rounded-lg p-3 m-2 w-1/4">Subscribe</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex lg:gap-96 justify-between border-t border-t-gray-400 p-4" >
+            <h6 class="text-gray-300 text-[0.5rem] md:text-md">© 2022 Kokoa, Inc. All rights reserved.</h6>
+            <div class="flex gap-6 text-gray-300">
+                <span class="icon-[mdi--facebook]"></span>
+                <a href="https://www.facebook.com/profile.php?id=100081089247661&locale=es_LA">
+                <img src={`data:image/svg+xml;base64,${btoa(siFacebook.svg)}`} alt="Facebook" class= "w-4 h-4"/>
+                </a>
+                <a href="https://x.com/kokoaespol" >
+                <img src={`data:image/svg+xml;base64,${btoa(siX.svg)}`} alt="X" class= "w-4 h-4"/>
+                </a>
+                <a href="https://www.instagram.com/kokoa_espol/?hl=es" >
+                <img src={`data:image/svg+xml;base64,${btoa(siInstagram.svg)}`} alt="Instagram" class= "w-4 h-4" />
+                </a>
+                <a href="https://github.com/kokoaespol" >
+                <img src={`data:image/svg+xml;base64,${btoa(siGithub.svg)}`} alt="Github" class= "w-4 h-4" />
+                </a>
+            </div>
+        </div>
+    </div>
+</footer>
\ No newline at end of file