This commit is contained in:
@ -0,0 +1,16 @@
|
||||
const feedbackData = [
|
||||
{
|
||||
text: 'Классная книга! Понятная и увлекательная. По моему мнению, проблема только в том, что женщине самой (без поддержки), выполнить всё, что написано в книге чрезвычайно сложно.\nИдеи супер: \n – первый секс – козырный туз женщины и не надо отдавать его в начале :)\n – жизнь взяток не берет! Надо действовать.',
|
||||
},
|
||||
{
|
||||
text: 'Интересная книга, читаешь «не отрывая глаз», те рекомендации, которые я применяла – действительно рабочие!! Всем советую! По моему мнению видно, что автор действительно очень хорошо знает и понимаем женскую психологию.',
|
||||
},
|
||||
{
|
||||
text: 'Книга содержит знания, которыми жалко делиться ;) нигде ничего подобного не встречала. Очень много авторских формул и примеров, автор - опытный соблазнитель :) кое-что уже успешно применяла на практике',
|
||||
},
|
||||
{
|
||||
text: 'Книга для всех девушек, кто только начинают строить отношения. Это вакцина от девичьих ошибок, дает понимание, чего они хотят. Учит не наступать на их уловки. Благодаря ей я стала более уверена в себе.',
|
||||
},
|
||||
]
|
||||
|
||||
export default feedbackData
|
||||
129
src/pages/mainPage/_ui/feedbackSection/feedbackSection.vue
Normal file
129
src/pages/mainPage/_ui/feedbackSection/feedbackSection.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<section class="feedback-section">
|
||||
<UiHeading tag="H2" size="300" class="text-three mb-4 pl-16 pr-24">
|
||||
Что говорят читатели
|
||||
</UiHeading>
|
||||
|
||||
<!-- Slider main container -->
|
||||
|
||||
<div class="swiper feedback-swiper relative">
|
||||
<!-- If we need pagination -->
|
||||
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
<div
|
||||
v-for="(feedback, index) in feedbackData"
|
||||
:key="index"
|
||||
class="swiper-slide feedback-slide !w-[356px] !h-[325px]"
|
||||
>
|
||||
<div class="feedback-card !w-full !h-full">
|
||||
<UiParagraph size="250" class="card-text">{{ feedback.text }}</UiParagraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center flex-col">
|
||||
<UiParagraph size="250" class="text-center mt-20">
|
||||
Твое мнение важно!<br />
|
||||
Если книга была полезной или вызвала эмоции, оставь отзыв.<br />
|
||||
Это поможет другим и вдохновит на новые главы. <br />
|
||||
Спасибо!
|
||||
</UiParagraph>
|
||||
<UiButton @click="console.log(1)" class="mt-10" variants="secondary">Написать отзыв</UiButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue' // Добавляем onMounted
|
||||
import Swiper from 'swiper'
|
||||
import { Pagination, Autoplay } from 'swiper/modules'
|
||||
import UiHeading from '@/components/Typography/UiHeading.vue'
|
||||
import UiParagraph from '@/components/Typography/UiParagraph.vue'
|
||||
import feedbackData from './_data/feedback.data'
|
||||
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/pagination'
|
||||
import UiButton from '@/components/UiButton/UiButton.vue'
|
||||
|
||||
onMounted(() => {
|
||||
new Swiper('.feedback-swiper', {
|
||||
modules: [Pagination, Autoplay],
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 72,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: false,
|
||||
},
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.feedback-section {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feedback-swiper {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feedback-slide {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.feedback-card {
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
white-space: pre-line;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background-color: #fff;
|
||||
opacity: 0.4;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background-color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<section class="flex flex-row">
|
||||
<div class="lg:w-4/12 mr-20">
|
||||
<UiHeading tag="H2" size="300" class="text-three mb-4">
|
||||
💔 Ты не одна.
|
||||
<br />Я знаю, через что ты<br />
|
||||
проходишь.
|
||||
</UiHeading>
|
||||
<UiParagraph size="250" class="xl:max-w-[322px]"
|
||||
>Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это ранит. Я знаю это
|
||||
чувство. Я был по ту сторону: манипулировал, очаровывал, уходил.
|
||||
|
||||
<br /><br />Я — бывший Казанова. И однажды я понял: больше так нельзя.
|
||||
|
||||
<br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена мужская психология,
|
||||
чего на самом деле хочет мужчина, и как перестать теряться в отношениях.
|
||||
|
||||
<br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не прогибаясь, не
|
||||
умоляя, не теряя себя. Если ты устала «играть», если хочешь любви по-настоящему — начни с
|
||||
первой страницы. В этих книгах нет воды. Только правда.</UiParagraph
|
||||
>
|
||||
</div>
|
||||
<div class="lg:w-9/12">
|
||||
<img alt="meeting" width="100%" height="100%" src="/img/webp/meetingAlone.webp" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiHeading from '@/components/Typography/UiHeading.vue'
|
||||
import UiParagraph from '@/components/Typography/UiParagraph.vue'
|
||||
</script>
|
||||
@ -1,14 +1,25 @@
|
||||
<template>
|
||||
<div
|
||||
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 class="pt-28 relative z-50">
|
||||
<HeroBanner />
|
||||
<div>
|
||||
<section class="relative z-50">
|
||||
<HeroBanner
|
||||
class="pt-28 bg-[url('/src/assets/img/png/bg.png')] z-40 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"
|
||||
/>
|
||||
<ForYouSection class="mt-40 pl-16 pr-24" />
|
||||
<YouNotAloneSection class="mt-40 pl-16 pr-24 mb-40" />
|
||||
<FeedbackSection class="mt-40 mb-52" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import FeedbackSection from './_ui/feedbackSection/feedbackSection.vue'
|
||||
import ForYouSection from './_ui/forYouSection/forYouSection.vue'
|
||||
import HeroBanner from './_ui/heroBanner/heroBanner.vue'
|
||||
import YouNotAloneSection from './_ui/youNotAloneSection/youNotAloneSection.vue'
|
||||
|
||||
import { useHead } from '@vueuse/head'
|
||||
|
||||
useHead({
|
||||
title: 'Vino Galante',
|
||||
meta: [{ name: 'description', content: 'Онлайн магазин книг автора Vino Galante' }],
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user