schon/storefront/components/home/hero.vue
Alexandr SaVBaD Waltz c9807bd6d4 Features: 1) Add product rating support in types, GraphQL fragments, and UI components; 2) Implement feedback management including GraphQL mutations, composables, and notification handling; 3) Enhance locale switching with improved reactivity, Apollo query clearing, and supported locale validation; 4) Introduce useOrderBuy composable for order purchasing workflow.
Fixes: 1) Correct mutation name from `setlanguage` to `setLanguage` for consistency; 2) Improve product listing reactivity by addressing missing initialization in `useStore`; 3) Replace generic product queries with parametrized `useProducts` for modularity; 4) Resolve minor typos, missing semicolons, and code formatting inconsistencies.

Extra: 1) Refactor feedback-related types, composables, and GraphQL utilities for modularity; 2) Update styles, Vue templates, and related scripts with enhanced formatting; 3) Remove unused methods like `getProducts`, standardizing query reactivity; 4) Cleanup and organize imports across multiple files.
2025-10-06 18:19:19 +03:00

47 lines
No EOL
978 B
Vue

<template>
<div class="hero" :style="backgroundStyles">
<div class="container">
<div class="hero__wrapper">
<nuxt-img format="webp" densities="x1" src="/images/evibes-big.png" alt="logo" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
const img = useImage();
const backgroundStyles = computed(() => {
const imgUrl = img('/images/homeBg.png', { format: 'webp', densities: 'x1 x2' });
return { backgroundImage: `url('${imgUrl}')` };
});
</script>
<style lang="scss" scoped>
.hero {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($black, 0.5);
backdrop-filter: blur(5px);
}
&__wrapper {
position: relative;
z-index: 1;
padding-block: 100px;
display: grid;
place-items: center;
}
}
</style>