add heroblock
All checks were successful
Deploy Application / deploy (push) Successful in 6s

This commit is contained in:
2025-06-13 11:35:23 +04:00
parent 8c2f2194d9
commit 1be8ebd16f
12 changed files with 74 additions and 20 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -16,7 +16,7 @@
'text-lg lg:text-[20px]': size === '300', 'text-lg lg:text-[20px]': size === '300',
}, // 16px }, // 16px
{ {
'text-sm': size === '200', 'text-[13px]': size === '200',
}, // 14px }, // 14px
]" ]"
> >

View File

@ -1,8 +1,8 @@
<template> <template>
<component <component
:is="tag" :is="tag"
class="px-24 py-4 rounded-[20px] text-[30px] cursor-pointer" class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer"
:class="{ baseStyle, size }" :class="[baseStyle, size]"
data-ui="ui-button" data-ui="ui-button"
> >
<slot /> <slot />
@ -31,7 +31,7 @@ const props = defineProps({
}, },
}) })
const { tag, variants } = toRefs(props) const { tag, variants, size } = toRefs(props)
const colorClasses: Record<'primary' | 'secondary', string[]> = { const colorClasses: Record<'primary' | 'secondary', string[]> = {
primary: colorVariants.primary, primary: colorVariants.primary,

View File

@ -1,7 +1,7 @@
<template> <template>
<footer class="mx-auto container"> <footer class="mx-auto container">
<div class="relative z-10"> <div class="relative z-10">
<div class="flex space-x-[51px] mb-5"> <div class="flex flex-wrap space-x-[51px] mb-5">
<UiNav :nav-content="footerNavigation" /> <UiNav :nav-content="footerNavigation" />
</div> </div>
<div class="xl:max-w-[1225px] pb-7 flex justify-between"> <div class="xl:max-w-[1225px] pb-7 flex justify-between">

View File

@ -8,7 +8,7 @@
<RouterLink to="/"> Vino Galante </RouterLink> <RouterLink to="/"> Vino Galante </RouterLink>
</UiParagraph> </UiParagraph>
</div> </div>
<div class="flex space-x-10"> <div class="flex flex-wrap space-x-10">
<UiNav :nav-content="headerNavigation" /> <UiNav :nav-content="headerNavigation" />
</div> </div>
</div> </div>

View File

@ -6,10 +6,13 @@
class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none" class="relative z-10 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[535px] after:bg-[url(/src/assets/img/webp/gradient.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-contain after:pointer-events-none"
/> />
<div <div
class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[820px] after:h-[1400px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover after:pointer-events-none" class="relative z-20 after:content-[''] after:absolute after:top-0 after:right-0 after:w-[1120px] after:h-[1800px] after:bg-[url(/src/assets/img/webp/group-flowers.webp)] after:bg-no-repeat after:bg-[right_top] after:bg-cover after:pointer-events-none"
/>
<div
class="relative z-40 before:content-[''] before:absolute before:top-0 before:left-0 before:w-[1120px] before:h-[1000px] before:bg-[url(/src/assets/img/webp/hero-flowers.webp)] before:bg-no-repeat before:bg-left before:bg-contain"
/> />
<UiHeader class="relative z-50" /> <UiHeader class="relative z-50" />
<UiMain class="!min-h-[1800px] text-primary relative z-50"> <UiMain class="!min-h-[1800px] text-primary relative">
<slot /> <slot />
</UiMain> </UiMain>
<UiFooter /> <UiFooter />

View File

@ -1,6 +1,6 @@
<template> <template>
<main class="pt-16 mt-10 px-6 min-h-screen h-full"> <main class="mt-10 px-6 min-h-screen h-full">
<div class="max-w-5xl mx-auto"> <div class="max-w-[1280px] mx-auto">
<Suspense> <Suspense>
<slot /> <slot />
</Suspense> </Suspense>

View File

@ -1,6 +0,0 @@
<template>
<section>
<img src="/src/assets/img/webp/hero-banner-content.webp" alt="Книги" />
</section>
</template>
<script setup lang="ts"></script>

View File

@ -0,0 +1,35 @@
import UiParagraph from '@/components/Typography/UiParagraph.vue';
<template>
<div
v-for="({ topContent, button, botContent }, index) in content.data"
:key="index"
class="flex flex-col items-center w-96"
>
<UiParagraph size="300" class="mb-12 h-32">{{ topContent }} </UiParagraph>
<UiButton variants="primary" class="mb-3 w-full">{{ button }} </UiButton>
<UiParagraph as="span" size="200"> {{ botContent }}</UiParagraph>
</div>
</template>
<script setup lang="ts">
import UiParagraph from '@/components/Typography/UiParagraph.vue'
import UiButton from '@/components/UiButton/UiButton.vue'
import { reactive } from 'vue'
const content = reactive({
data: [
{
topContent:
'💡 Узнай, как думает мужчина, что его действительно цепляет, и что делает женщину незабываемой.',
button: 'КУПИТЬ КНИГУ I',
botContent: 'PDF + EPUB сразу после оплаты',
},
{
topContent:
'💡 Продолжение для тех, кто готов перейти от флирта к глубокому контакту. Как строить притяжение, не теряя себя.',
button: 'КУПИТЬ КНИГУ II',
botContent: 'PDF + EPUB сразу после оплаты',
},
],
})
</script>

View File

@ -0,0 +1,18 @@
<template>
<section>
<div class="relative z-50">
<img
src="/src/assets/img/webp/hero-banner-content.webp"
alt="Книги"
width="100%"
height="100%"
/>
</div>
<div class="flex flex-row justify-between pl-16 pr-24">
<BuyContent />
</div>
</section>
</template>
<script setup lang="ts">
import BuyContent from './_ui/buyContent.vue'
</script>

View File

@ -1,8 +1,12 @@
<template> <template>
<section> <div
<HeroBanner /> class="bg-[url('/src/assets/img/png/bg.png')] z-50 bg-no-repeat bg-[400px] rounded-[50px] relative after:absolute after:bg-[url('/src/assets/img/webp/header-flowers-4.webp')] after:top-0 after:w-[418px] after:right-0 after:h-[230px] after:z-20 after:content-[''] after:bg-contain after:bg-no-repeat after:bg-right"
</section> >
<section class="pt-28 relative z-50">
<HeroBanner />
</section>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import HeroBanner from './_ui/heroBanner.vue' import HeroBanner from './_ui/heroBanner/heroBanner.vue'
</script> </script>