From 77c39c30d23831035a60d97ccc99dfb0802f7f0e Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 13 Dec 2024 23:46:04 +0330
Subject: [PATCH] added footer

---
 frontend/components/global/Footer.vue | 110 ++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 frontend/components/global/Footer.vue

diff --git a/frontend/components/global/Footer.vue b/frontend/components/global/Footer.vue
new file mode 100644
index 0000000..a0d73b3
--- /dev/null
+++ b/frontend/components/global/Footer.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts"></script>
+
+<template>
+    <footer class="w-full bg-black flex-center">
+        <div class="size-full grid grid-cols-2 items-stretch container">
+            <div
+                class="h-full flex flex-col items-start justify-between pe-[5rem] py-[5rem]"
+            >
+                <div class="flex flex-col items-start gap-[1.5rem] w-full">
+                    <span class="text-white typo-sub-h-xl"
+                        >Subscribe to our newsletter
+                    </span>
+                    <div class="flex flex-col items-start gap-[.75rem] w-full">
+                        <div
+                            class="flex items-center justify-start gap-[.5rem] w-full"
+                        >
+                            <Input
+                                placeholder="Enter your email"
+                                class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
+                            />
+                            <Button
+                                class="invert rounded-100 size-[3.5rem] !**:stroke-black"
+                                end-icon="ci:arrow-right"
+                            />
+                        </div>
+                        <span class="text-slate-400 typo-p-sm">
+                            By subscribing, you agree to our responsible data
+                            use
+                        </span>
+                    </div>
+                </div>
+                <span class="text-white typo-label-sm">
+                    © 2024 Nova - Tech Store. Powered by Capricorn Engineering
+                </span>
+            </div>
+
+            <div
+                class="flex flex-col items-start ps-[5rem] py-[5rem] gap-[6.875rem]"
+            >
+                <div class="w-full flex items-start gap-[3rem]">
+                    <div class="flex flex-col gap-[.75rem] text-white w-full">
+                        <NuxtLink to="#" class="typo-h-5"> About </NuxtLink>
+                        <NuxtLink to="#" class="typo-h-5"> Journal </NuxtLink>
+                        <NuxtLink to="#" class="typo-h-5"> FAQs </NuxtLink>
+                        <NuxtLink to="#" class="typo-h-5">
+                            Contact us
+                        </NuxtLink>
+                    </div>
+                    <div
+                        class="flex flex-col gap-[.75rem] text-slate-400 w-full"
+                    >
+                        <NuxtLink to="#" class="typo-label-md">
+                            Headphones
+                        </NuxtLink>
+                        <NuxtLink to="#" class="typo-label-md">
+                            Speakers
+                        </NuxtLink>
+                        <NuxtLink to="#" class="typo-label-md">
+                            Charging stations
+                        </NuxtLink>
+                        <NuxtLink to="#" class="typo-label-md">
+                            Lanterns
+                        </NuxtLink>
+                        <NuxtLink to="#" class="typo-label-md">
+                            Portable charger
+                        </NuxtLink>
+                    </div>
+                </div>
+
+                <div
+                    class="flex items-center justify-between text-white w-full"
+                >
+                    <span class="typo-label-sm">Privacy Policy</span>
+                    <div class="flex items-center gap-[1rem]">
+                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
+                            <Icon
+                                name="ci:instagram"
+                                class="**:fill-white"
+                                size="24"
+                            />
+                        </NuxtLink>
+                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
+                            <Icon
+                                name="ci:facebook"
+                                class="**:fill-white **:stroke-white"
+                                size="20"
+                            />
+                        </NuxtLink>
+                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
+                            <Icon
+                                name="ci:tiktok"
+                                class="**:fill-white **:stroke-white"
+                                size="20"
+                            />
+                        </NuxtLink>
+                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
+                            <Icon
+                                name="ci:youtube"
+                                class="**:fill-white"
+                                size="24"
+                            />
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<style scoped></style>