migrate on nuxt3
This commit is contained in:
16
pages/index/_ui/feedbackSection/_data/feedback.data.ts
Normal file
16
pages/index/_ui/feedbackSection/_data/feedback.data.ts
Normal file
@ -0,0 +1,16 @@
|
||||
const feedbackData = [
|
||||
{
|
||||
text: 'Классная книга! Понятная и увлекательная. По моему мнению, проблема только в том, что женщине самой (без поддержки), выполнить всё, что написано в книге чрезвычайно сложно.\nИдеи супер: \n – первый секс – козырный туз женщины и не надо отдавать его в начале :)\n – жизнь взяток не берет! Надо действовать.',
|
||||
},
|
||||
{
|
||||
text: 'Интересная книга, читаешь «не отрывая глаз», те рекомендации, которые я применяла – действительно рабочие!! Всем советую! По моему мнению видно, что автор действительно очень хорошо знает и понимаем женскую психологию.',
|
||||
},
|
||||
{
|
||||
text: 'Книга содержит знания, которыми жалко делиться ;) нигде ничего подобного не встречала. Очень много авторских формул и примеров, автор - опытный соблазнитель :) кое-что уже успешно применяла на практике',
|
||||
},
|
||||
{
|
||||
text: 'Книга для всех девушек, кто только начинают строить отношения. Это вакцина от девичьих ошибок, дает понимание, чего они хотят. Учит не наступать на их уловки. Благодаря ей я стала более уверена в себе.',
|
||||
},
|
||||
]
|
||||
|
||||
export default feedbackData
|
||||
129
pages/index/_ui/feedbackSection/feedbackSection.vue
Normal file
129
pages/index/_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 class="mt-10" variants="secondary">Написать отзыв</UiButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
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>
|
||||
54
pages/index/_ui/forYouSection/forYouSection.vue
Normal file
54
pages/index/_ui/forYouSection/forYouSection.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<section>
|
||||
<UiHeading tag="H2" size="300" class="text-three">
|
||||
Книги для тебя, если ты не знаешь...
|
||||
</UiHeading>
|
||||
<ul class="flex mt-20 flex-row items-center justify-between">
|
||||
<li
|
||||
class="flex flex-col-reverse justify-end w-38 gap-4 h-64 items-center transition-transform transform hover:scale-110"
|
||||
v-for="({ img, text }, index) in questions.data"
|
||||
:key="index"
|
||||
>
|
||||
<UiParagraph class="text-center" size="250">
|
||||
{{ text }}
|
||||
</UiParagraph>
|
||||
<img :src="`${img}`" alt="Вопрос" width="101" height="101" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiHeading from '@/components/Typography/UiHeading.vue'
|
||||
import UiParagraph from '@/components/Typography/UiParagraph.vue'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const questions = reactive({
|
||||
data: [
|
||||
{
|
||||
img: '/img/svg/ellipse1.svg',
|
||||
text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
|
||||
},
|
||||
{
|
||||
img: '/img/svg/ellipse2.svg',
|
||||
text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
|
||||
},
|
||||
{
|
||||
img: '/img/svg/ellipse3.svg',
|
||||
text: 'Как относиться к сексу и на сколько важна девичья невинность?',
|
||||
},
|
||||
{
|
||||
img: '/img/svg/ellipse4.svg',
|
||||
text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
|
||||
},
|
||||
{
|
||||
img: '/img/svg/ellipse5.svg',
|
||||
text: 'Как выработать стратегию долгосрочных отношений?',
|
||||
},
|
||||
{
|
||||
img: '/img/svg/ellipse6.svg',
|
||||
text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
35
pages/index/_ui/heroBanner/_ui/buyContent.vue
Normal file
35
pages/index/_ui/heroBanner/_ui/buyContent.vue
Normal 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 max-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>
|
||||
18
pages/index/_ui/heroBanner/heroBanner.vue
Normal file
18
pages/index/_ui/heroBanner/heroBanner.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="relative z-50">
|
||||
<img
|
||||
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>
|
||||
38
pages/index/_ui/youNotAloneSection/youNotAloneSection.vue
Normal file
38
pages/index/_ui/youNotAloneSection/youNotAloneSection.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<section class="flex flex-row">
|
||||
<div class="lg:w-5/12 pl-5 pr-5 shadow-md bg-[url('/assets/img/png/shadow.png')]">
|
||||
<UiHeading tag="H2" size="300" class="text-three mb-4 mt-5">
|
||||
💔 Ты не одна.
|
||||
<br />Я знаю, через что ты<br />
|
||||
проходишь.
|
||||
</UiHeading>
|
||||
<UiParagraph size="250" class="xl:max-w-[392px] mb-5"
|
||||
>Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это ранит. Я знаю это
|
||||
чувство. Я был по ту сторону: манипулировал, очаровывал, уходил.
|
||||
|
||||
<br /><br />Я — бывший Казанова. И однажды я понял: больше так нельзя.
|
||||
|
||||
<br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена мужская психология,
|
||||
чего на самом деле хочет мужчина, и как перестать теряться в отношениях.
|
||||
|
||||
<br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не прогибаясь, не
|
||||
умоляя, не теряя себя. Если ты устала «играть», если хочешь любви по-настоящему — начни с
|
||||
первой страницы. В этих книгах нет воды. Только правда.</UiParagraph
|
||||
>
|
||||
</div>
|
||||
<div class="lg:w-7/12">
|
||||
<NuxtImg
|
||||
src="/img/webp/meetingAlone.webp"
|
||||
alt="meeting"
|
||||
width="100%"
|
||||
height="100%"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import UiHeading from '@/components/Typography/UiHeading.vue'
|
||||
import UiParagraph from '@/components/Typography/UiParagraph.vue'
|
||||
</script>
|
||||
31
pages/index/index.vue
Normal file
31
pages/index/index.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="relative z-50">
|
||||
<HeroBanner
|
||||
class="pt-28 bg-[url('/assets/img/png/bg.png')] z-40 bg-no-repeat bg-[400px] rounded-[50px] relative after:absolute after:bg-[url('/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";
|
||||
|
||||
useHead({
|
||||
title: "Vino Galante",
|
||||
meta: [
|
||||
{ name: "description", content: "Онлайн магазин книг автора Vino Galante" },
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: "canonical",
|
||||
href: `https://ebook.miduway.space/`,
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user