proxio主题加入部分动画

This commit is contained in:
tangly1024
2025-04-12 22:58:46 +08:00
parent d43d1bce56
commit 2d3a3ac649
11 changed files with 450 additions and 264 deletions

View File

@@ -13,7 +13,7 @@ const Announcement = ({ post, className }) => {
<div className={className}>
<section
id='announcement-wrapper'
className='rounded-xl px-2'>
className='rounded-xl px-2 wow fadeInUp' data-wow-delay='.2s'>
{/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
{post && (
<div id='announcement-content'>

View File

@@ -15,7 +15,7 @@ export const Blog = ({ posts }) => {
<section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
<div className='container mx-auto'>
{/* 区块标题文字 */}
<div className='-mx-4 flex flex-wrap justify-center'>
<div className='-mx-4 flex flex-wrap justify-center wow fadeInUp' data-wow-delay='.2s'>
<div className='w-full px-4'>
<div className='mx-auto mb-[60px] max-w-[485px] text-center'>
<span className='mb-2 block text-lg font-semibold text-primary'>
@@ -33,21 +33,25 @@ export const Blog = ({ posts }) => {
return (
<div key={index} className='w-full px-4'>
<div
className='wow fadeInUp group mb-10'
className='wow fadeInUp group mb-10 relative overflow-hidden rounded-[10px]'
data-wow-delay='.1s'>
<div className='mb-8 overflow-hidden rounded-[5px]'>
{/* 图片部分 */}
<div className='relative'>
{item.pageCoverThumbnail && (
<Link href={item?.href} className='block'>
<LazyImage
src={item.pageCoverThumbnail}
alt={item.title}
className='w-full h-80 object-cover transition group-hover:rotate-6 group-hover:scale-125'
className='w-full h-80 object-cover transition-transform duration-500'
/>
</Link>
)}
{/* 遮罩层,仅覆盖图片部分 */}
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-opacity duration-500 group-hover:opacity-0'></div>
</div>
<div>
<span className='mb-6 inline-block rounded-[5px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
{/* 内容部分 */}
<div className='relative z-10 p-4'>
<span className='mb-6 inline-block rounded-[10px] bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
{item.publishDay}
</span>
<h3>
@@ -71,4 +75,4 @@ export const Blog = ({ posts }) => {
{/* <!-- ====== Blog Section End --> */}
</>
)
}
}

View File

@@ -13,26 +13,26 @@ export const CTA = () => {
return (
<>
{/* <!-- ====== CTA Section Start --> */}
<section className='relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]'>
<section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-dark-2 py-20 lg:py-[115px]'>
<div className='container mx-auto'>
<div className='relative overflow-hidden'>
<div className='-mx-4 flex flex-wrap items-stretch'>
<div className='w-full px-4'>
<div className='w-full px-4 mb-2'>
<div className='mx-auto max-w-[570px] text-center'>
<h2 className='mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]'>
<h2 className='mb-2.5 text-3xl font-bold dark:text-white md:text-[38px] md:leading-[1.44]'>
<span>{siteConfig('PROXIO_CTA_TITLE')}</span>
<span className='text-3xl font-normal md:text-[40px]'>
{siteConfig('PROXIO_CTA_TITLE_2')}
</span>
</h2>
<p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white'>
<p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] dark:text-white'>
{siteConfig('PROXIO_CTA_DESCRIPTION')}
</p>
{siteConfig('PROXIO_CTA_BUTTON') && (
<>
<Link
href={siteConfig('PROXIO_CTA_BUTTON_URL', '')}
className='inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]'>
className='inline-flex items-center justify-center rounded-2xl bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2'>
{siteConfig('PROXIO_CTA_BUTTON_TEXT')}
</Link>
</>

View File

@@ -1,168 +1,96 @@
import AnalyticsBusuanzi from '@/components/AnalyticsBusuanzi'
import { BeiAnGongAn } from '@/components/BeiAnGongAn'
import BeiAnSite from '@/components/BeiAnSite'
import CopyRightDate from '@/components/CopyRightDate'
import DarkModeButton from '@/components/DarkModeButton'
import LazyImage from '@/components/LazyImage'
import PoweredBy from '@/components/PoweredBy'
import { siteConfig } from '@/lib/config'
import SocialButton from '@/themes/fukasawa/components/SocialButton'
import { Logo } from './Logo'
import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import CONFIG from '../config'
import SocialButton from './SocialButton'
/**
* 网页底脚
*/
export const Footer = ({ title }) => {
const { siteInfo } = useGlobal()
const PROXIO_FOOTER_LINKS = siteConfig('PROXIO_FOOTER_LINKS', [], CONFIG)
/* eslint-disable @next/next/no-img-element */
export const Footer = props => {
const footerPostCount = siteConfig('PROXIO_FOOTER_POST_COUNT', 2)
const latestPosts = props?.latestPosts
? props?.latestPosts.slice(0, footerPostCount)
: []
const PROXIO_FOOTER_LINK_GROUP = siteConfig('PROXIO_FOOTER_LINK_GROUP', [])
return (
<>
{/* <!-- ====== Footer Section Start --> */}
<footer
className='wow fadeInUp relative z-10 bg-[#090E34] pt-20 lg:pt-[100px]'
data-wow-delay='.15s'>
<div className='container'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-3/12'>
<div className='mb-10 w-full'>
<a className='-mx-4 mb-6 inline-block max-w-[160px]'>
<Logo white={true} />
</a>
<p className='mb-8 max-w-[270px] text-base text-gray-7'>
{siteConfig('PROXIO_FOOTER_SLOGAN')}
</p>
<div className='-mx-3 flex items-center'>
<div className='mx-3'>
<SocialButton />
</div>
</div>
</div>
<footer
id='footer-bottom'
className='z-10 justify-center m-auto w-full p-6 relative container'>
<div className='max-w-screen-3xl w-full mx-auto '>
{/* 信息与链接区块 */}
<div className='w-full flex lg:flex-row flex-col justify-between py-16'>
<div className='gap-y-2 flex flex-col items-start dark:text-gray-200'>
<div className='flex gap-x-1'>
<LazyImage
src={siteInfo?.icon}
className='rounded-full'
width={24}
alt={siteConfig('AUTHOR')}
/>
<h1 className='text-lg'>{title}</h1>
<span
className='underline font-bold justify-start'>
{siteConfig('AUTHOR')}
</span>
</div>
<div className='px-1'>{siteConfig('DESCRIPTION')}</div>
<div className='px-1'>{siteConfig('CONTACT_EMAIL')}</div>
</div>
{/* 中间三列菜单组 */}
{PROXIO_FOOTER_LINK_GROUP?.map((item, index) => {
{/* 右侧链接区块 */}
<div className='flex gap-x-4'>
{PROXIO_FOOTER_LINKS?.map((group, index) => {
return (
<div
key={index}
className='w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12'>
<div className='mb-10 w-full'>
<h4 className='mb-9 text-lg font-semibold text-white'>
{item.TITLE}
</h4>
<ul>
{item?.LINK_GROUP?.map((l, i) => {
return (
<li key={i}>
<Link
href={l.URL}
className='mb-3 inline-block text-base text-gray-7 hover:text-primary'>
{l.TITLE}
</Link>
</li>
)
})}
</ul>
<div key={index}>
<div className='font-bold text-xl dark:text-white lg:pb-8 pb-4'>
{group.name}
</div>
<div className='flex flex-col gap-y-2'>
{group?.menus?.map((menu, index) => {
return (
<div key={index}>
<Link href={menu.href} className='hover:underline dark:text-gray-200'>
{menu.title}
</Link>
</div>
)
})}
</div>
</div>
)
})}
</div>
</div>
{/* 页脚右侧最新博文 */}
<div className='w-full px-4 md:w-2/3 lg:w-6/12 xl:w-3/12'>
<div className='mb-10 w-full'>
<h4 className='mb-9 text-lg font-semibold text-white'>
{siteConfig('PROXIO_FOOTER_BLOG_LATEST_TITLE')}
</h4>
{/* 展示两条最新博客文章 */}
<div className='flex flex-col gap-8'>
{latestPosts?.map((item, index) => {
return (
<Link
key={index}
href={item?.href}
className='group flex items-center gap-[22px]'>
{item.pageCoverThumbnail && (
<div className='overflow-hidden rounded w-20 h-12'>
<img
src={item.pageCoverThumbnail}
alt={item.title}
/>
</div>
)}
<span className='line-clamp-2 max-w-[180px] text-base text-gray-7 group-hover:text-white'>
{item.title}
</span>
</Link>
)
})}
</div>
</div>
{/* 页脚 */}
<div className='dark:text-gray-200 py-4 flex flex-col lg:flex-row justify-between items-center border-t border-gray-600'>
<div className='flex gap-x-2 flex-wrap justify-between items-center'>
<CopyRightDate />
<PoweredBy />
</div>
<DarkModeButton className='text-white' />
<div className='flex justify-between items-center gap-x-2'>
<div className='flex items-center gap-x-4'>
<AnalyticsBusuanzi />
<SocialButton />
</div>
</div>
</div>
{/* 底部版权信息相关 */}
<div className='mt-12 border-t border-[#8890A4] border-opacity-40 py-8 lg:mt-[60px]'>
<div className='container'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 md:w-2/3 lg:w-1/2'>
<div className='my-1'>
<div className='-mx-3 flex items-center justify-center md:justify-start'>
<Link
href={siteConfig('PROXIO_FOOTER_PRIVACY_POLICY_URL', '')}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig('PROXIO_FOOTER_PRIVACY_POLICY_TEXT')}
</Link>
<Link
href={siteConfig(
'PROXIO_FOOTER_PRIVACY_LEGAL_NOTICE_URL', ''
)}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig('PROXIO_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT')}
</Link>
<Link
href={siteConfig(
'PROXIO_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL', ''
)}
className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
{siteConfig(
'PROXIO_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT', ''
)}
</Link>
</div>
</div>
</div>
<div className='w-full px-4 md:w-1/3 lg:w-1/2'>
<div className='my-1 flex justify-center md:justify-end'>
<p className='text-base text-gray-7'>
Designed and Developed by
<a
href='https://github.com/tangly1024/NotionNext'
rel='nofollow noopner noreferrer'
target='_blank'
className='px-1 text-gray-1 hover:underline'>
NotionNext {siteConfig('VERSION')}
</a>
</p>
</div>
</div>
</div>
</div>
{/* 备案 */}
<div className='dark:text-gray-200 w-full text-center flex flex-wrap items-center justify-center gap-x-2'>
<BeiAnSite />
<BeiAnGongAn />
</div>
{/* Footer 背景 */}
<div>
<span className='absolute left-0 top-0 z-[-1]'>
<img src='/images/starter/footer/shape-1.svg' alt='' />
</span>
<span className='absolute bottom-0 right-0 z-[-1]'>
<img src='/images/starter/footer/shape-3.svg' alt='' />
</span>
<span className='absolute right-0 top-0 z-[-1]'>
<SVGFooterCircleBG />
</span>
</div>
</footer>
{/* <!-- ====== Footer Section End --> */}
</>
</div>
</footer>
)
}
}

View File

@@ -0,0 +1,168 @@
import { siteConfig } from '@/lib/config';
import { useEffect, useState } from 'react';
const LoadingCover = ({ onFinishLoading }) => {
const [isVisible, setIsVisible] = useState(true);
const welcomeText = siteConfig('PROXIO_WELCOME_TEXT', '欢迎来到我们的网站!');
// 定义颜色变量
const colors = {
backgroundStart: '#1a1a1a', // 深灰色
backgroundMiddle: '#4d4d4d', // 中灰色
backgroundEnd: '#e6e6e6', // 浅灰色
textColor: '#ffffff', // 白色
rippleColor: 'rgba(255, 255, 255, 0.6)', // 半透明白色
};
useEffect(() => {
const pageContainer = document.getElementById('pageContainer');
const handleClick = (e) => {
// 创建扩散光圈
const ripple = document.createElement('div');
ripple.classList.add('ripple');
ripple.style.left = `${e.clientX - 10}px`;
ripple.style.top = `${e.clientY - 10}px`;
document.body.appendChild(ripple);
// 添加页面缩放 + 模糊动画
pageContainer.classList.add('page-clicked');
// 模拟加载完成,调用回调函数
setTimeout(() => {
setIsVisible(false); // 淡出动画
setTimeout(() => {
if (onFinishLoading) {
onFinishLoading();
}
}, 600); // 等待淡出动画完成
}, 1200);
// 清理 ripple 元素
setTimeout(() => {
ripple.remove();
}, 1000);
};
document.body.addEventListener('click', handleClick);
return () => {
document.body.removeEventListener('click', handleClick);
};
}, [onFinishLoading]);
if (!isVisible) return null;
return (
<div className="welcome" id="pageContainer">
<div className="welcome-text" id="welcomeText">
{welcomeText}
</div>
<style jsx>
{`
body {
margin: 0;
background-color: ${colors.backgroundStart};
height: 100vh;
overflow: hidden;
cursor: pointer;
}
.welcome {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
pointer-events: auto;
background: linear-gradient(120deg, ${colors.backgroundStart}, ${colors.backgroundMiddle}, ${colors.backgroundEnd});
background-size: 300% 300%;
animation: gradientShift 6s ease infinite;
transition: opacity 0.6s ease; /* 淡出动画 */
}
.welcome.page-clicked {
opacity: 0;
pointer-events: none;
}
.welcome-text {
font-size: 2.5rem;
font-weight: bold;
color: ${colors.textColor};
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
user-select: none;
animation: textPulse 3s ease-in-out infinite, fadeInUp 1.5s ease-out forwards;
text-align: center;
z-index: 10000; /* 确保文字层级高于背景 */
position: relative;
}
.ripple {
position: absolute;
border-radius: 50%;
background: radial-gradient(${colors.rippleColor} 0%, transparent 70%);
pointer-events: none;
width: 20px;
height: 20px;
transform: scale(0);
opacity: 0.8;
z-index: 10;
animation: rippleExpand 1s ease-out forwards;
}
/* 动态背景动画 */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 文字呼吸动画 */
@keyframes textPulse {
0%, 100% {
transform: scale(1);
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
}
50% {
transform: scale(1.1);
text-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.8);
}
}
/* 文字淡入动画 */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 扩散光圈动画 */
@keyframes rippleExpand {
to {
transform: scale(40);
opacity: 0;
}
}
`}
</style>
</div>
);
};
export default LoadingCover;

View File

@@ -12,12 +12,10 @@ import { useEffect, useState } from 'react'
* @returns
*/
export const Logo = props => {
const { white, NOTION_CONFIG } = props
const { siteInfo, white } = props
const router = useRouter()
const logoWhite = siteConfig('PROXIO_LOGO_WHITE')
const logoNormal = siteConfig('PROXIO_LOGO')
const { isDarkMode } = useGlobal()
const [logo, setLogo] = useState(logoWhite)
const [logoTextColor, setLogoTextColor] = useState('text-white')
useEffect(() => {
@@ -29,10 +27,8 @@ export const Logo = props => {
const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
if (white || isDarkMode || homePageNavBar) {
setLogo(logoWhite)
setLogoTextColor('text-white')
} else {
setLogo(logoNormal)
setLogoTextColor('text-black')
}
}, throttleMs)
@@ -47,18 +43,14 @@ export const Logo = props => {
return (
<div className='w-60 max-w-full px-4'>
<div className='navbar-logo flex items-center w-full py-5 cursor-pointer'>
{/* eslint-disable-next-line @next/next/no-img-element */}
{logo && (
<LazyImage
priority
onClick={() => {
router.push('/')
}}
src={logo}
alt='logo'
className='header-logo mr-1 h-8'
/>
)}
<LazyImage
priority
src={siteInfo?.icon}
width={24}
height={20}
alt={siteConfig('AUTHOR')}
className='mr-2 hidden md:inline-block'
/>
{/* logo文字 */}
<span
onClick={() => {

View File

@@ -2,11 +2,7 @@
* 另一个落地页主题
*/
const CONFIG = {
// 默认只展示Logo文字如果设置了logo图片会在文字左侧显示图标
PROXIO_LOGO: '', // 普通logo图片 示例:/images/starter/logo/logo.svg
PROXIO_LOGO_WHITE: '', // 透明底浅色logo 示例: /images/starter/logo/logo-white.svg
// MENU 菜单部分不在此处配置请在Notion数据库中添加MENU
PROXIO_WELCOME_TEXT:'欢迎来到此网站,点击任意位置进入', // 欢迎文字,留空则不启用
// 英雄区块导航
PROXIO_HERO_ENABLE: true, // 开启英雄区
@@ -205,16 +201,16 @@ const CONFIG = {
PROXIO_ABOUT_TEXT_1: '我们的开发者团队',
PROXIO_ABOUT_TEXT_2:
'NotionNext 由众多开源技术爱好者们共同合作完成,感谢每一位<a className="underline" href="https://github.com/tangly1024/NotionNext/graphs/contributors">贡献者</a>',
PROXIO_ABOUT_PHOTO_URL:'',
PROXIO_ABOUT_KEY_1:'经验年限',
PROXIO_ABOUT_VAL_1:'10年+',
PROXIO_ABOUT_KEY_2:'客户',
PROXIO_ABOUT_VAL_2:'1000+',
PROXIO_ABOUT_KEY_3:'交付项目',
PROXIO_ABOUT_VAL_3:'5000+',
PROXIO_ABOUT_KEY_4:'累积创作时长(小时)',
PROXIO_ABOUT_VAL_4:'10000+',
PROXIO_ABOUT_PHOTO_URL: '',
PROXIO_ABOUT_KEY_1: '经验年限',
PROXIO_ABOUT_VAL_1: '10年+',
PROXIO_ABOUT_KEY_2: '客户',
PROXIO_ABOUT_VAL_2: '1000+',
PROXIO_ABOUT_KEY_3: '交付项目',
PROXIO_ABOUT_VAL_3: '5000+',
PROXIO_ABOUT_KEY_4: '累积创作时长(小时)',
PROXIO_ABOUT_VAL_4: '10000+',
// 联系模块
PROXIO_CONTACT_ENABLE: true, // 联系模块开关
@@ -274,54 +270,43 @@ const CONFIG = {
PROXIO_FOOTER_SLOGAN: '我们通过技术为品牌和公司创造数字体验。',
// 页脚三列菜单组
PROXIO_FOOTER_LINK_GROUP: [
// 页脚菜单
PROXIO_FOOTER_LINKS: [
{
TITLE: '关于我们',
LINK_GROUP: [
{ TITLE: '官方主页', URL: '/#home' },
{ TITLE: '操作文档', URL: 'https://docs.tangly1024.com/about' },
name: '友情链接',
menus: [
{
TITLE: '帮助支持',
URL: 'https://docs.tangly1024.com/article/how-to-question'
title: 'Tangly的学习笔记',
href: 'https://blog.tangly1024.com'
},
{
TITLE: '合作申请',
URL: 'https://docs.tangly1024.com/article/my-service'
title: 'NotionNext',
href: 'https://www.tangly1024.com'
}
]
},
{
TITLE: '功能特性',
LINK_GROUP: [
name: '开发者',
menus: [
{ title: 'Github', href: 'https://github.com/tangly1024/NotionNext' },
{
TITLE: '部署指南',
URL: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next'
title: '开发帮助',
href: 'https://docs.tangly1024.com/article/how-to-develop-with-notion-next'
},
{
TITLE: '升级指南',
URL: 'https://docs.tangly1024.com/article/how-to-update-notionnext'
},
{ TITLE: '最新版本', URL: 'https://docs.tangly1024.com/article/latest' }
]
},
{
TITLE: 'Notion写作',
LINK_GROUP: [
{
TITLE: 'Notion开始写作',
URL: 'https://docs.tangly1024.com/article/start-to-write'
title: '功能反馈',
href: 'https://github.com/tangly1024/NotionNext/issues/new/choose'
},
{
TITLE: '快捷键提升效率',
URL: 'https://docs.tangly1024.com/article/notion-short-key'
title: '技术讨论',
href: 'https://github.com/tangly1024/NotionNext/discussions'
},
{
TITLE: '中国大陆使用Notion',
URL: 'https://docs.tangly1024.com/article/notion-faster'
title: '关于作者',
href: 'https://blog.tangly1024.com/about'
}
]
}
],
}],
PROXIO_FOOTER_BLOG_LATEST_TITLE: '最新文章',

View File

@@ -42,6 +42,8 @@ import { SignUpForm } from './components/SignUpForm'
import { SVG404 } from './components/svg/SVG404'
import Lenis from '@/components/Lenis'
import Announcement from './components/Announcement'
import CursorDot from '@/components/CursorDot'
import LoadingCover from './components/LoadingCover'
/**
* 布局框架
@@ -77,9 +79,10 @@ const LayoutBase = props => {
{/* 悬浮按钮 */}
<BackToTopButton />
{/* 鼠标阻尼效果 */}
{/* 鼠标阻尼动画 */}
<Lenis />
{/* 鼠标跟随动画 */}
<CursorDot />
{/* <MadeWithButton/> */}
</div>
)
@@ -118,6 +121,7 @@ const LayoutIndex = props => {
className={
'announncement text-center py-16'
}
/>}
{/* 团队介绍 */}
@@ -128,6 +132,7 @@ const LayoutIndex = props => {
{/* 产品特性 */}
{siteConfig('PROXIO_FEATURE_ENABLE', true, CONFIG) && <Features />}
{/* 生涯 */}
{siteConfig('PROXIO_CAREER_ENABLE', true, CONFIG) && <About />}
@@ -136,7 +141,6 @@ const LayoutIndex = props => {
{/* {siteConfig('PROXIO_PRICING_ENABLE', true, CONFIG) && <Pricing />} */}
{/* 评价展示 */}
{siteConfig('PROXIO_TESTIMONIALS_ENABLE', true, CONFIG) && (
<Testimonials />
@@ -147,6 +151,8 @@ const LayoutIndex = props => {
{/* 行动呼吁 */}
{siteConfig('PROXIO_CTA_ENABLE', true, CONFIG) && <CTA />}
<LoadingCover/>
</>
)
}