added footer

2024-12-13 23:46:04 +03:30
parent 54f2311918
commit 77c39c30d2
1 changed files with 110 additions and 0 deletions
@@ -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>