Mamalizz
111 lines
4.8 KiB
Vue
111 lines
4.8 KiB
Vue
<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>
|