admin/tgCrewLanding
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
CCTVcalc
2025-12-10 14:23:53 +03:00
parent c84b9788d9
commit 1e328b315c
15 changed files with 170 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
i18n-2-landing.xlsm Normal file
View File

Binary file not shown.

BIN
i18n-2.xlsm
View File

Binary file not shown.

35
src/components/FAQSection.vue
View File

@@ -4,36 +4,22 @@
class="q-pa-md w100 flex justify-center"
style="max-width: 800px"
>
<q-list separator>
<q-expansion-item
group="FAQgroup"
<q-list>
<faq-section-item
v-for="item in 8"
:key="item"
switch-toggle-side
header-class="text-h6"
expand-icon="mdi-plus"
expand-icon-class="text-brand2"
class="fix-icon-color"
>
<template #header="{ expanded }">
<div :class="expanded ? 'text-primary' : ''" class="w100">
{{ $t('faq__question_' + item) }}
</div>
</template>
<q-card>
<q-card-section class="text-grey-8">
{{ $t('faq__answer_' + item) }}
</q-card-section>
</q-card>
</q-expansion-item>
:question="'faq__question_' + item"
:answer="'faq__answer_' + item"
class="q-my-md"
/>
</q-list>
<div class="text-h6 text-primary q-py-md" align="center">
<div class="text-h6 text-primary q-py-md text-center">
{{ $t('faq__description') }}
<a
href="mailto:a-mart@ya.ru"
href="mailto:support@tgcrew.ru"
style="text-decoration: none; color: inherit"
>
a-mart@ya.ru
support@tgcrew.ru
</a>
</div>
</div>
@@ -41,7 +27,8 @@
</template>
<script setup lang="ts">
import SlideTemplate from 'components/SlideTemplate.vue';
import SlideTemplate from 'components/SlideTemplate.vue'
import FaqSectionItem from 'components/FAQSectionItem.vue'
</script>

53
src/components/FAQSectionItem.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="column bg-grey-4 rounded-card q-px-xl q-py-md">
<div class="row no-wrap items-center">
<div class="text-h6" style="flex-grow: 2;">
{{ $t(question) }}
</div>
<div class="q-pl-md">
<q-btn
@click="showAnswer=!showAnswer"
round unelevated color="white"
>
<q-icon
name="add"
:color="showAnswer ? 'primary' : 'grey'"
:class="showAnswer ? 'icon-rotated' : 'icon-rotated-back'"
/>
</q-btn>
</div>
</div>
<q-slide-transition>
<div v-show="showAnswer" class="text-body q-py-md text-grey-9">
{{ $t(answer) }}
</div>
</q-slide-transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineProps({
question: String,
answer: String
})
const showAnswer = ref(false)
</script>
<style scoped>
.icon-rotated {
transition: transform 0.3s ease;
transform: rotate(45deg);
}
.icon-rotated-back {
transition: transform 0.3s ease;
transform: rotate(0deg);
}
</style>

8
src/components/FooterSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="w100 flex justify-between bg-grey-11 text-caption q-pa-md q-gutter-y-md">
<div class="w100 flex justify-between text-caption q-pa-md q-gutter-y-md text-grey-9">
<div class="flex column col-12 col-sm">
<base-logo class="text-body1 q-pb-sm"/>
<div class="flex items-center">
@@ -8,15 +8,15 @@
</div>
<div class="flex items-center">
<q-icon name="mdi-phone-outline" color="brand" class="q-pr-sm" />
<span>+7 (926) 339-04-25</span>
<span>+7 (916) 439-04-25</span>
</div>
<div class="flex items-center">
<q-icon name="mdi-email-outline" color="brand" class="q-pr-sm"/>
<a
href="mailto:a-mart@ya.ru"
href="mailto:info@tgcrew.ru"
style="text-decoration: none; color: inherit"
>
a-mart@ya.ru
info@tgcrew.ru
</a>
</div>
</div>

80
src/components/HeroBanner.vue
View File

@@ -1,58 +1,54 @@
<template>
<div
class="flex w100 text-white relative-position vert-height"
:class="isAlignTop ? 'justify-center' : 'justify-end'"
style="background-image: url('/img/samolet.jpg'); background-size: cover; height: 100vh;"
class="flex w100 justify-center items-center"
style="
background-image: url('/img/samolet.jpg');
background-size: cover;
height: 100vh;
"
>
<div
ref="slogan"
class="flex items-center"
>
<div
class="flex bg-white column justify-center q-pa-lg q-ma-lg q-gutter-y-md no-wrap bg-transperant"
style="max-width: 400px; border-radius: 12px; opacity: 0.8"
:style="!isAlignTop ? 'text-align : center' : ''"
>
<div class="text-h5 text-grey">
class="column items-center"
style="max-width: 75%; height: 100%">
<div
class="column justify-end text-h4 text-grey-4 text-center edge-block"
>
{{ $t('banner__slogan_prepend') }} &mdash;
</div>
<div class="text-h4 text-brand">
<div
class="text-h2 text-white text-center q-py-lg center-block"
style="line-height: 4rem;"
>
{{ $t('banner__slogan_body') }}
<span class="text-no-wrap" color="primary">
<q-icon dense name="telegram"/>
<span>Telegram</span>
</span>
</div>
</div>
<div>
<div class="column items-center edge-block">
<div class="edge-block"/>
<q-btn
size="lg"
size="xl"
color="brand2"
class="q-mt-xl"
class="q-mt-lg"
rounded
>
<div class="flex items-center no-wrap">
<div>{{ $t('banner__main_btn')}}</div>
<div class="flex items-center no-wrap center-block">
<div class="q-pl-md text-h4">{{ $t('banner__main_btn')}}</div>
<q-icon name="keyboard_arrow_right"/>
</div>
</q-btn>
<div class="text-white q-pt-md edge-block justify-start">
{{ $t('banner__main_btn_description')}}
</div>
</div>
</div>
</div>
<q-resize-observer @resize="checkAlign"/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const slogan = ref(null)
const image = ref(null)
const isAlignTop = ref(false)
const checkAlign = () => {
if (slogan.value && image.value)
isAlignTop.value = (slogan.value.offsetTop === image.value.offsetTop)
}
</script>
<style scoped>
@@ -65,10 +61,18 @@
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
z-index:-1;
}
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
z-index:-1;
}
.center-block {
flex: 0 0 auto;
}
.edge-block {
flex: 1
}
</style>

71
src/components/PriceSection.vue
View File

@@ -1,54 +1,23 @@
<template>
<slide-template title="price__title">
<div ref="container" class="w100 flex no-wrap">
<q-resize-observer @resize="updateWidth" />
<div class="w100 flex justify-center" v-if="containerWidth > 800">
<q-card
v-for="(item, idx) in tariff"
:key="idx"
class="q-pa-md q-ma-sm flex items-center column"
style="width: 20%"
>
<price-section-item
:name="item.name"
:chats-qty="item.chatsQty"
:price="item.price"
/>
</q-card>
</div>
<q-carousel
v-else
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
navigation
padding
height="225px"
control-color="primary"
class="w100"
>
<q-carousel-slide
v-for="(item, idx) in tariff"
:key="idx"
:name="item.name"
class="flex justify-center q-pt-lmdq-pa-none q-ma-none"
>
<price-section-item
:name="item.name"
:chats-qty="item.chatsQty"
:price="item.price"
/>
</q-carousel-slide>
</q-carousel>
</div>
<div class="q-ma-md" align="center" style="max-width: 60%;">
{{ $t('price__tariff_description') }}
</div>
<div
class="fit row"
>
<div class="col-md-3 col-sm-6 col-xs-12 q-pa-lg"
v-for="(item, idx) in tariff"
:key="idx"
>
<price-section-item
:name="item.name"
:chats-qty="item.chatsQty"
:price="item.price"
/>
</div>
</div>
<q-card
flat
class="bg-grey-3"
@@ -76,7 +45,6 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import SlideTemplate from 'components/SlideTemplate.vue'
import PriceSectionItem from 'components/PriceSectionItem.vue'
import telegramStar from 'components/TelegramStar.vue'
@@ -88,17 +56,6 @@
{ id: 4, name: 'VIP', price: 12000, chatsQty: null }
]
const containerWidth = ref(0)
const cardWidth=ref(175)
const updateWidth = ({ width }) => {
containerWidth.value = width
cardWidth.value = width < 1200 ? 250 : 175
}
const slide = ref(tariff[0].name)
</script>
<style scoped>

2
src/components/PriceSectionItem.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex column items-center">
<div class="flex column items-center bg-white rounded-card q-pa-md">
<div class="text-h5 text-primary text-bold">
{{ name }}
</div>

81
src/components/ProblemSection.vue
View File

@@ -1,78 +1,33 @@
<template>
<slide-template>
<div ref="container" class="w100 flex no-wrap q-pt-lg">
<q-resize-observer @resize="updateWidth" />
<div class="w100 flex justify-center" v-if="containerWidth > 800">
<q-card
v-for="(item, idx) in problems"
:key="idx"
class="q-pa-md q-ma-sm"
>
<problem-section-item
:icon="item.icon"
:title="item.title"
:description="item.description"
style="overflow: hidden;"
:style="{ width: cardWidth + 'px' }"
/>
</q-card>
</div>
<q-carousel
v-else
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
navigation
padding
height="300px"
control-color="primary"
class="w100"
<slide-template title="problem__title">
<div
class="fit row"
>
<div class="col-sm-6 col-xs-12 q-pa-lg"
v-for="(item, idx) in problems"
:key="idx"
>
<q-carousel-slide
v-for="(item, idx) in problems"
:key="idx"
:name="item.title"
class="flex justify-center q-pa-none q-ma-none"
>
<problem-section-item
:icon="item.icon"
:title="item.title"
:description="item.description"
style="overflow: hidden; min-width: 100px; max-width: 200px;"
/>
</q-carousel-slide>
</q-carousel>
<problem-section-item
:icon="item.icon"
:title="item.title"
:description="item.description"
/>
</div>
</div>
</slide-template>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ProblemSectionItem from 'components/ProblemSectionItem.vue'
import SlideTemplate from 'components/SlideTemplate.vue'
import ProblemSectionItem from 'components/ProblemSectionItem.vue'
const problems = [
{ id: 1, icon: 'mdi-account-group-outline', title: 'problem__address_book', description: 'problem__address_book_description' },
{ id: 2, icon: 'mdi-clipboard-outline', title: 'problem__tasks', description: 'problem__tasks_description' },
{ id: 3, icon: 'mdi-calendar-month', title: 'problem__meeting', description: 'problem__meeting_description' },
{ id: 4, icon: 'mdi-folder-open-outline', title: 'problem__files', description: 'problem__files_description' },
{ id: 5, icon: 'mdi-lock-outline', title: 'problem__privacy', description: 'problem__privacy_description' }
{ id: 1, icon: 'mdi-folder-multiple-outline', title: 'problem__1', description: 'problem__1_description' },
{ id: 2, icon: 'mdi-account-group-outline', title: 'problem__2', description: 'problem__2_description' },
{ id: 3, icon: 'mdi-chat-processing-outline', title: 'problem__3', description: 'problem__3_description' },
{ id: 4, icon: 'mdi-lock-check-outline', title: 'problem__4', description: 'problem__4_description' },
]
const containerWidth = ref(0)
const cardWidth = ref(175)
const updateWidth = ({ width }) => {
containerWidth.value = width
cardWidth.value = width < 1200 ? 250 : 175
}
const slide = ref(problems[0].title)
</script>
<style scoped>

21
src/components/ProblemSectionItem.vue
View File

@@ -1,19 +1,14 @@
<template>
<div class="flex column items-center">
<div>
<q-avatar
color="brand"
text-color="white"
:icon
font-size="45px"
size="75px"
class="q-my-md"
/>
</div>
<div class="text-bold text-h5" align="center">
<div class="column items-start bg-white fit q-pa-lg rounded-card fit">
<q-icon
:name="icon"
size="xl"
color="primary"
/>
<div class="text-bold text-h5 q-pt-lg">
{{ $t(title) }}
</div>
<div class="text-grey-8 q-pt-sm" style="text-align: center;">
<div class="text-grey q-pt-sm text-wrap">
{{ $t(description) }}
</div>
</div>

7
src/css/app.scss
View File

@@ -31,8 +31,9 @@ body, html, #q-app {
}
:root {
--body-width: 1200px;
--body-width: 1440px;
--logo-color-bg-white: grey;
--base-radius: 24px;
}
.main-content {
@@ -40,6 +41,10 @@ body, html, #q-app {
margin: 0 auto;
}
.rounded-card {
border-radius: var(--base-radius);
}
@font-face {
font-family: 'myFont';
src: url(./fonts/Inter-Regular.woff2);

2
src/i18n/en-US/index.js
View File

File diff suppressed because one or more lines are too long

2
src/i18n/ru-RU/index.js
View File

File diff suppressed because one or more lines are too long

11
src/layouts/MainLayout.vue
View File

@@ -1,8 +1,13 @@
<template>
<q-layout view="lHr lpr lFr" class="bg-transparent relative-position">
<q-layout view="lHr lpr lFr" class="bg-grey-11 relative-position">
<q-header
class="main-content q-py-sm"
:class="isHeroScroll ? 'text-white bg-transparent' : 'text-grey glass'"
class="main-content q-py-sm q-px-md"
:class="isHeroScroll ? 'text-white bg-transparent' : 'text-grey glass shadow-6'"
style="
transition: background-color 0.5s ease, color 0.5s ease;
border-bottom-left-radius: var(--base-radius);
border-bottom-right-radius: var(--base-radius);
"
reveal
>
<div

4
src/pages/DocPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex justify-center bg-grey-11"
class="flex justify-center"
style="height: 100vh"
>
<q-layout container style="max-width: 800px !important">
@@ -8,7 +8,7 @@
<q-page class="flex w100 column">
<div >
<div
class="main-content flex items-center column w100 bg-white q-px-lg q-pb-xl"
class="main-content flex items-center column w100 q-px-lg q-pb-xl"
>
<base-logo
class="q-pa-md text-h4 cursor-pointer"