alex-sharoff-website/components/shared/AppBanner.vue
2023-11-11 10:34:31 +04:00

97 lines
1.8 KiB
Vue

<script>
import feather from "feather-icons";
export default {
data: () => {
return {};
},
mounted() {
feather.replace();
},
updated() {
feather.replace();
},
};
</script>
<template>
<section
class="
background
static
grayscale
min-h-screen
max-h-screen
md:pl-12
xl:pl-16
md:pt-20
lg:pt-28
pt-16
">
<div class="xl:w-3/4 mr-auto mx-4 my-20 text-left animate-slide-up">
<h1
class="
font-general-medium
text-5xl
sm:text-7xl
md:text-7xl
lg:text-8xl
text-left
mb-2
sm:mb-4
text-gray-300
"
>
Привет, это Саша.
</h1>
<p
class="
font-general-medium
mb-8
text-2xl
sm:text-3xl
md:text-3xl
xl:text-3xl
leading-none
text-gray-300
"
>
Интерьерный и репортажный фотограф
</p>
<NuxtLink :to="{path: '/', hash: '#contact'}">
<RoundButton class="text-xl px-6 sm:px-8">
Написать мне
</RoundButton>
</NuxtLink>
</div>
<!-- Banner right illustration -->
<!-- <div class="w-full md:w-3/5 text-right float-right">-->
<!-- <img src="/photographer.svg" alt="Photographer illustration"/>-->
<!-- </div>-->
</section>
</template>
<style lang="css" scoped>
.background {
/* TODO: grayscale the file itself to reduce file size */
/*background-image: url("/background.jpg");*/
background-image: url("/background-mirrored.jpg");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
</style>