d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

proxio 初版

Browse Source
This commit is contained in:
tangly1024
2025-04-13 11:45:10 +08:00
parent 610550ed57
commit 4bdde35969
14 changed files with 468 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/CursorDot.js
View File

@@ -26,12 +26,12 @@ const CursorDot = () => {
dot.classList.remove('cursor-dot-hover'); // 移除放大样式
};
// 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听
const clickableElements = document.querySelectorAll(
'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"]'
'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
);
clickableElements.forEach((el) => {
clickableElements.forEach((el) => {
el.addEventListener('mouseenter', handleMouseEnter);
el.addEventListener('mouseleave', handleMouseLeave);
});

188
themes/proxio/components/About.js
View File

@@ -1,188 +0,0 @@
/* eslint-disable @next/next/no-img-element */
/* eslint-disable react/no-unescaped-entities */
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
/**
* 首页的关于模块
*/
export const About = () => {
return (
<>
{/* <!-- ====== About Section Start --> */}
<section
id='about'
className='bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]'>
<div className='container'>
<div className='wow fadeInUp' data-wow-delay='.2s'>
<div className='-mx-4 flex flex-wrap items-center'>
{/* 左侧的文字说明板块 */}
<div className='w-full px-4 lg:w-1/2'>
<div className='mb-12 max-w-[540px] lg:mb-0'>
<h2 className='mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]'>
{siteConfig('PROXIO_CAREER_TITLE')}
</h2>
<p
className='mb-10 text-base leading-relaxed text-body-color dark:text-dark-6'
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_CAREER_TEXT')
}}></p>
<Link
href={siteConfig('PROXIO_CAREER_BUTTON_URL', '')}
className='inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark'>
{siteConfig('PROXIO_CAREER_BUTTON_TEXT')}
</Link>
</div>
</div>
{/* 右侧的图片海报 */}
<div className='w-full px-4 lg:w-1/2'>
<div className='-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4'>
<div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
<div className='mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]'>
<img
src={siteConfig('PROXIO_CAREER_IMAGE_1')}
alt='about image'
className='h-full w-full object-cover object-center'
/>
</div>
</div>
<div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
<div className='mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]'>
<img
src={siteConfig('PROXIO_CAREER_IMAGE_2')}
alt='about image'
className='h-full w-full object-cover object-center'
/>
</div>
<div className='relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8'>
<div>
<span className='block text-5xl font-extrabold text-white'>
{siteConfig('PROXIO_CAREER_TIPS_1')}
</span>
<span className='block text-base font-semibold text-white'>
{siteConfig('PROXIO_CAREER_TIPS_2')}
</span>
<span className='block text-base font-medium text-white text-opacity-70'>
{siteConfig('PROXIO_CAREER_TIPS_3')}
</span>
</div>
<div>
<span className='absolute left-0 top-0 -z-10'>
<svg
width='106'
height='144'
viewBox='0 0 106 144'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<rect
opacity='0.1'
x='-67'
y='47.127'
width='113.378'
height='131.304'
transform='rotate(-42.8643 -67 47.127)'
fill='url(#paint0_linear_1416_214)'
/>
<defs>
<linearGradient
id='paint0_linear_1416_214'
x1='-10.3111'
y1='47.127'
x2='-10.3111'
y2='178.431'
gradientUnits='userSpaceOnUse'>
<stop stopColor='white' />
<stop
offset='1'
stopColor='white'
stopOpacity='0'
/>
</linearGradient>
</defs>
</svg>
</span>
<span className='absolute right-0 top-0 -z-10'>
<svg
width='130'
height='97'
viewBox='0 0 130 97'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<rect
opacity='0.1'
x='0.86792'
y='-6.67725'
width='155.563'
height='140.614'
transform='rotate(-42.8643 0.86792 -6.67725)'
fill='url(#paint0_linear_1416_215)'
/>
<defs>
<linearGradient
id='paint0_linear_1416_215'
x1='78.6495'
y1='-6.67725'
x2='78.6495'
y2='133.937'
gradientUnits='userSpaceOnUse'>
<stop stopColor='white' />
<stop
offset='1'
stopColor='white'
stopOpacity='0'
/>
</linearGradient>
</defs>
</svg>
</span>
<span className='absolute bottom-0 right-0 -z-10'>
<svg
width='175'
height='104'
viewBox='0 0 175 104'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<rect
opacity='0.1'
x='175.011'
y='108.611'
width='101.246'
height='148.179'
transform='rotate(137.136 175.011 108.611)'
fill='url(#paint0_linear_1416_216)'
/>
<defs>
<linearGradient
id='paint0_linear_1416_216'
x1='225.634'
y1='108.611'
x2='225.634'
y2='256.79'
gradientUnits='userSpaceOnUse'>
<stop stopColor='white' />
<stop
offset='1'
stopColor='white'
stopOpacity='0'
/>
</linearGradient>
</defs>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* <!-- ====== About Section End --> */}
</>
)
}

28
themes/proxio/components/Blog.js
View File

@@ -12,33 +12,34 @@ export const Blog = ({ posts }) => {
return (
<>
{/* <!-- ====== Blog Section Start --> */}
<section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
<section className='bg-white pt-20 dark:bg-dark lg:pt-[120px]'>
<div className='container mx-auto'>
{/* 区块标题文字 */}
<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'>
<div className='w-full px-4 py-4'>
<div className='mx-auto max-w-[485px] text-center space-y-4'>
<span className='px-3 py-0.5 rounded-2xl mb-2 dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_BLOG_TITLE')}
</span>
<h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
<h2 className='text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
{siteConfig('PROXIO_BLOG_TEXT_1')}
</h2>
</div>
</div>
</div>
{/* 博客列表 此处优先展示3片文章 */}
<div className='-mx-4 grid grid-cols-2'>
<div className='-mx-4 grid md:grid-cols-2 grid-cols-1'>
{posts?.map((item, index) => {
return (
<div key={index} className='w-full px-4'>
<div
className='wow fadeInUp group mb-10 relative overflow-hidden'
data-wow-delay='.1s'>
{/* 图片部分 */}
<div className='relative rounded-xl border overflow-hidden shadow-md dark:border-gray-700 dark:bg-gray-800'>
{item.pageCoverThumbnail && (
<Link href={item?.href} className='block'>
{/* 图片半透明 */}
<LazyImage
src={item.pageCoverThumbnail}
alt={item.title}
@@ -47,11 +48,16 @@ export const Blog = ({ posts }) => {
</Link>
)}
{/* 遮罩层，仅覆盖图片部分 */}
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-opacity duration-500 group-hover:opacity-0'></div>
<div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-all duration-500 group-hover:opacity-50 group-hover:bg-black' />
{/* 鼠标悬停时显示的文字内容 */}
<div className='absolute inset-0 flex items-center justify-center group-hover:scale-110 duration-200 group-hover:text-white'>
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6 flex items-center justify-center duration-200 group-hover:text-white '>
{item.summary}
</p></div>
</div>
{/* 内容部分 */}
<div className='relative z-10 p-4'>
<span className='mb-6 inline-block bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
<span className='inline-blocktext-center text-xs font-medium leading-loose text-white'>
{item.publishDay}
</span>
<h3>
@@ -61,9 +67,7 @@ export const Blog = ({ posts }) => {
{item.title}
</Link>
</h3>
<p className='max-w-[370px] text-base text-body-color dark:text-dark-6'>
{item.summary}
</p>
</div>
</div>
</div>

76
themes/proxio/components/Brand.js
View File

@@ -1,39 +1,71 @@
/* eslint-disable @next/next/no-img-element */
import { siteConfig } from '@/lib/config'
import { useEffect, useRef } from 'react'
/**
* 合作伙伴
* 合作伙伴滚动组件
* @returns
*/
export const Brand = () => {
const brands = siteConfig('PROXIO_BRANDS')
const brands = siteConfig('PROXIO_BRANDS', [])
const scrollContainerRef = useRef(null)
useEffect(() => {
const scrollContainer = scrollContainerRef.current
let scrollAmount = 0
const scrollSpeed = 1 // 滚动速度
const scroll = () => {
if (scrollContainer) {
scrollAmount += scrollSpeed
scrollContainer.scrollLeft = scrollAmount
// 如果滚动到内容的一半，立即重置滚动位置
if (scrollAmount >= scrollContainer.scrollWidth / 2) {
scrollAmount = 0
}
}
requestAnimationFrame(scroll)
}
scroll()
return () => cancelAnimationFrame(scroll)
}, [])
return (
<>
{/* <!-- ====== Brands Section Start --> */}
<section className='py-20 dark:bg-dark'>
<div className='container px-4'>
<div className='-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11'>
{brands?.map((item, index) => {
return (
<a key={index} href={item.URL}>
<img
src={item.IMAGE}
alt={item.TITLE}
className='dark:hidden'
/>
<img
src={item.IMAGE_WHITE}
alt={item.TITLE}
className='hidden dark:block'
/>
</a>
)
})}
<section id='brand' className='py-12 dark:bg-dark'>
<div
className='overflow-hidden whitespace-nowrap container mx-auto p-3 border rounded-2xl border-gray-200 dark:border-[#333333]'
ref={scrollContainerRef}
>
<div className='inline-block'>
{brands?.map((item, index) => (
<span
key={index}
className='mx-8 text-lg font-semibold text-gray-700 dark:text-gray-300'
>
{item}
</span>
))}
{/* 克隆一份内容，用于无缝滚动 */}
{brands.map((item, index) => (
<span
key={`clone-${index}`}
className='mx-8 text-lg font-semibold text-gray-700 dark:text-gray-300'
>
{item}
</span>
))}
</div>
</div>
</section>
{/* <!-- ====== Brands Section End --> */}
</>
)
}
}

74
themes/proxio/components/CTA.js
View File

@@ -13,14 +13,20 @@ export const CTA = () => {
return (
<>
{/* <!-- ====== CTA Section Start --> */}
<section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-dark-2 py-20 lg:py-[115px]'>
<section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-black 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 mb-2'>
<div className='mx-auto max-w-[570px] text-center'>
<div>
<span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_CTA_TITLE')}
</span>
</div>
<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>
@@ -42,69 +48,7 @@ export const CTA = () => {
</div>
</div>
</div>
<div>
<span className='absolute left-0 top-0'>
<svg
width='495'
height='470'
viewBox='0 0 495 470'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<circle
cx='55'
cy='442'
r='138'
stroke='white'
stroke-opacity='0.04'
stroke-width='50'
/>
<circle
cx='446'
r='39'
stroke='white'
stroke-opacity='0.04'
stroke-width='20'
/>
<path
d='M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z'
stroke='white'
stroke-opacity='0.08'
stroke-width='12'
/>
</svg>
</span>
<span className='absolute bottom-0 right-0'>
<svg
width='493'
height='470'
viewBox='0 0 493 470'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<circle
cx='462'
cy='5'
r='138'
stroke='white'
stroke-opacity='0.04'
stroke-width='50'
/>
<circle
cx='49'
cy='470'
r='39'
stroke='white'
stroke-opacity='0.04'
stroke-width='20'
/>
<path
d='M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z'
stroke='white'
stroke-opacity='0.06'
stroke-width='13'
/>
</svg>
</span>
</div>
</section>
{/* <!-- ====== CTA Section End --> */}
</>

62
themes/proxio/components/Career.js Normal file
View File

@@ -0,0 +1,62 @@
/* eslint-disable @next/next/no-img-element */
/* eslint-disable react/no-unescaped-entities */
import { siteConfig } from '@/lib/config'
import Link from 'next/link'
/**
* 首页的生涯模块
*/
export const Career = () => {
const Careers = siteConfig('PROXIO_CAREERS')
return (
<>
{/* <!-- ====== About Section Start --> */}
<section
id='about'
className='bg-gray-1 pb-8 pt-20 dark:bg-black lg:pb-[70px] lg:pt-[120px]'>
<div className='container'>
<div className='wow fadeInUp' data-wow-delay='.2s'>
{/* 左侧的文字说明板块 */}
<div className='w-full px-4 lg:w-1/2'>
<div className='mb-12 max-w-[540px] lg:mb-0'>
<span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_CAREER_TITLE')}
</span>
<h2
className='mb-10 text-3xl font-semibold leading-relaxed dark:text-dark-6'
>{siteConfig('PROXIO_CAREER_TEXT')}</h2>
</div>
</div>
<div className='-mx-4 flex flex-wrap items-center px-4'>
{Careers?.map((item, index) => {
return <CareerItem key={index} {...item} />
})}
</div>
</div>
</div>
</section>
{/* <!-- ====== About Section End --> */}
</>
)
}
// 生涯内容
const CareerItem = ({ title, bio, text }) => {
return <div className='w-full border-b mb-6 border-gray-200 dark:border-[#333333] px-4 flex justify-between wow fadeInUp'>
<div className='flex item-start flex-col items-start w-full' data-wow-delay='.1s'>
<h4 className='mb-3 text-xl text-dark dark:text-white'>
<span className='font-bold mr-4'>{title}</span>
<span className='text-sm'>{bio}</span>
</h4>
</div>
<div className='w-full'>
<p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
{text}
</p>
</div>
</div>
}

143
themes/proxio/components/FAQ.js
View File

@@ -1,115 +1,80 @@
import { siteConfig } from '@/lib/config'
import { useEffect } from 'react'
import { useState } from 'react'
import { SVGCircleBG } from './svg/SVGCircleBG'
import { SVGQuestion } from './svg/SVGQuestion'
/**
* 问答
* @returns
*/
export const FAQ = () => {
useEffect(() => {
// ===== Faq accordion
const faqs = document.querySelectorAll('.single-faq')
faqs.forEach(el => {
el.querySelector('.faq-btn').addEventListener('click', () => {
el.querySelector('.icon').classList.toggle('rotate-180')
el.querySelector('.faq-content').classList.toggle('hidden')
})
})
})
const FAQS = siteConfig('PROXIO_FAQS', [])
const [openIndex, setOpenIndex] = useState(null)
const toggleFAQ = (index) => {
setOpenIndex(openIndex === index ? null : index)
}
return (
<>
{/* <!-- ====== FAQ Section Start --> */}
<section className='relative overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]'>
<div className='container mx-auto'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4'>
<div className='mx-auto mb-[60px] max-w-[520px] text-center'>
<span className='mb-2 block text-lg font-semibold text-primary'>
{siteConfig('PROXIO_FAQ_TITLE')}
</span>
<h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
<section className="relative overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]">
<div className="max-w-2xl mx-auto">
<div className="-mx-4 flex flex-wrap">
<div className="w-full px-4">
<div className="mx-auto mb-[60px] max-w-[520px] text-center flex flex-col space-y-4">
<div>
<span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_FAQ_TITLE')}
</span>
</div>
<h2 className="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]">
{siteConfig('PROXIO_FAQ_TEXT_1')}
</h2>
<p className='mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6'>
<p className="mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6">
{siteConfig('PROXIO_FAQ_TEXT_2')}
</p>
</div>
</div>
</div>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 lg:w-1/2'>
<div className='mb-12 flex lg:mb-[70px]'>
<div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
<SVGQuestion />
</div>
<div className='w-full'>
<h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
{siteConfig('PROXIO_FAQ_1_QUESTION')}
</h3>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_FAQ_1_ANSWER')
}}
className='text-base text-body-color dark:text-dark-6'></p>
{/* FAQ 列表 */}
<div className="-mx-4 flex flex-wrap space-y-4">
{FAQS?.map((faq, index) => (
<div
key={index}
className="w-full px-4 cursor-pointer"
onClick={() => toggleFAQ(index)}
>
<div className="p-4 border rounded-lg dark:bg-[#0E0E0E] bg-white dark:bg-dark-1 border-gray-200 dark:border-[#333333]">
{/* 问题部分 */}
<div className="flex justify-between items-center">
<h3 className="text-lg font-semibold text-dark dark:text-white">
{faq.q}
</h3>
<i
className={`fas fa-chevron-down text-gray-500 dark:text-gray-300 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''
}`}
/>
</div>
{/* 答案部分 */}
<div
className={`mt-4 text-base text-body-color dark:text-dark-6 transition-all duration-300 overflow-hidden ${openIndex === index ? 'max-h-screen' : 'max-h-0'
}`}
dangerouslySetInnerHTML={{ __html: faq.a }}
></div>
</div>
</div>
<div className='mb-12 flex lg:mb-[70px]'>
<div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
<SVGQuestion />
</div>
<div className='w-full'>
<h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
{siteConfig('PROXIO_FAQ_2_QUESTION')}
</h3>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_FAQ_2_ANSWER')
}}
className='text-base text-body-color dark:text-dark-6'></p>
</div>
</div>
</div>
<div className='w-full px-4 lg:w-1/2'>
<div className='mb-12 flex lg:mb-[70px]'>
<div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
<SVGQuestion />
</div>
<div className='w-full'>
<h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
{siteConfig('PROXIO_FAQ_3_QUESTION')}
</h3>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_FAQ_3_ANSWER')
}}
className='text-base text-body-color dark:text-dark-6'></p>
</div>
</div>
<div className='mb-12 flex lg:mb-[70px]'>
<div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
<SVGQuestion />
</div>
<div className='w-full'>
<h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
{siteConfig('PROXIO_FAQ_4_QUESTION')}
</h3>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_FAQ_4_ANSWER')
}}
className='text-base text-body-color dark:text-dark-6'></p>
</div>
</div>
</div>
))}
</div>
</div>
{/* 背景图案 */}
<div>
<span className='absolute left-4 top-4 -z-[1]'>
<span className="absolute left-4 top-4 -z-[1]">
<SVGCircleBG />
</span>
<span className='absolute bottom-4 right-4 -z-[1]'>
<span className="absolute bottom-4 right-4 -z-[1]">
<SVGCircleBG />
</span>
</div>
@@ -117,4 +82,4 @@ export const FAQ = () => {
{/* <!-- ====== FAQ Section End --> */}
</>
)
}
}

92
themes/proxio/components/Features.js
View File

@@ -12,15 +12,16 @@ export const Features = () => {
return (
<>
{/* <!-- ====== Features Section Start --> */}
<section className='pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]'>
<section className='pb-8 pt-20 dark:bg-dark lg:pb-[40px] lg:pt-[120px]'>
<div className='container'>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4'>
<div className='mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]'>
<span className='mb-2 block text-lg font-semibold text-primary'>
<div className='mx-auto mb-12 lg:mb-[40px]'>
<span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_FEATURE_TITLE')}
</span>
<h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
<h2 className='my-5 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
{siteConfig('PROXIO_FEATURE_TEXT_1')}
</h2>
<p className='text-base text-body-color dark:text-dark-6'>
@@ -29,12 +30,15 @@ export const Features = () => {
</div>
</div>
</div>
<div className='-mx-4 flex flex-wrap'>
<div className='w-full px-4 md:w-1/2 lg:w-1/4'>
<div className='wow fadeInUp group mb-12' data-wow-delay='.1s'>
<div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
<span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
<SVGGifts />
{/* 支持三个特性 */}
<div className='-mx-4 flex flex-col md:flex-row gap-4 px-4'>
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
<div className='flex w-12 h-12'>
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
<i class={siteConfig('PROXIO_FEATURE_1_ICON_CLASS')}></i>
</div>
</div>
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
{siteConfig('PROXIO_FEATURE_1_TITLE_1')}
@@ -42,18 +46,15 @@ export const Features = () => {
<p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
{siteConfig('PROXIO_FEATURE_1_TEXT_1')}
</p>
<Link
href={siteConfig('PROXIO_FEATURE_1_BUTTON_URL', '')}
className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
{siteConfig('PROXIO_FEATURE_1_BUTTON_TEXT')}
</Link>
</div>
</div>
<div className='w-full px-4 md:w-1/2 lg:w-1/4'>
<div className='wow fadeInUp group mb-12' data-wow-delay='.15s'>
<div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
<span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
<SVGTemplate />
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
<div className='flex w-12 h-12'>
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
<i class={siteConfig('PROXIO_FEATURE_2_ICON_CLASS')}></i>
</div>
</div>
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
{siteConfig('PROXIO_FEATURE_2_TITLE_1')}
@@ -61,18 +62,15 @@ export const Features = () => {
<p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
{siteConfig('PROXIO_FEATURE_2_TEXT_1')}
</p>
<Link
href={siteConfig('PROXIO_FEATURE_2_BUTTON_URL', '')}
className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
{siteConfig('PROXIO_FEATURE_2_BUTTON_TEXT')}
</Link>
</div>
</div>
<div className='w-full px-4 md:w-1/2 lg:w-1/4'>
<div className='wow fadeInUp group mb-12' data-wow-delay='.2s'>
<div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
<span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
<SVGDesign />
<div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
<div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
<div className='flex w-12 h-12'>
<div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
<i class={siteConfig('PROXIO_FEATURE_3_ICON_CLASS')}></i>
</div>
</div>
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
{siteConfig('PROXIO_FEATURE_3_TITLE_1')}
@@ -80,32 +78,18 @@ export const Features = () => {
<p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
{siteConfig('PROXIO_FEATURE_3_TEXT_1')}
</p>
<Link
href={siteConfig('PROXIO_FEATURE_3_BUTTON_URL', '')}
className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
{siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')}
</Link>
</div>
</div>
<div className='w-full px-4 md:w-1/2 lg:w-1/4'>
<div className='wow fadeInUp group mb-12' data-wow-delay='.25s'>
<div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
<span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
<SVGEssential />
</div>
<h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
{siteConfig('PROXIO_FEATURE_4_TITLE_1')}
</h4>
<p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
{siteConfig('PROXIO_FEATURE_4_TEXT_1')}
</p>
<Link
href={siteConfig('PROXIO_FEATURE_4_BUTTON_URL', '')}
className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
{siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')}
</Link>
</div>
</div>
</div>
<div className='mt-8 w-full flex justify-center items-center'>
<Link
href={siteConfig('PROXIO_FEATURE_BUTTON_URL', '')}
className='px-4 py-2 rounded-3xl border dark:border-gray-200 border-[#333333] text-base font-medium text-dark hover:bg-gray-100 dark:text-white dark:hover:bg-white dark:hover:text-black duration-200'>
{siteConfig('PROXIO_FEATURE_BUTTON_TEXT')}
<i className="pl-4 fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
</section>

2
themes/proxio/components/Hero.js
View File

@@ -39,7 +39,7 @@ export const Hero = props => {
<div className='w-full px-4'>
<div
className='hero-content wow fadeInUp mx-auto max-w-[780px] text-center'
data-wow-delay='.2s'>
data-wow-delay='0.5s'>
{/* 主标题 */}
<h1 className='mb-6 text-3xl font-bold leading-snug sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]'>
{siteConfig('PROXIO_HERO_TITLE_1', null, config)}

65
themes/proxio/components/Team.js
View File

@@ -1,41 +1,64 @@
/* eslint-disable @next/next/no-img-element */
import { siteConfig } from '@/lib/config'
import { SVGAvatarBG } from './svg/SVGAvatarBG'
import LazyImage from '@/components/LazyImage'
/**
* 作者团队
* @returns
*/
export const Team = () => {
const PROXIO_TEAM_ITEMS = siteConfig('PROXIO_TEAM_ITEMS', [])
const PROXIO_ABOUT_PHOTO_URL = siteConfig('PROXIO_ABOUT_PHOTO_URL')
return (
<>
{/* <!-- ====== Team Section Start --> */}
<section
id='team'
className='overflow-hidden bg-gray-1 pb-12 pt-20 dark:bg-dark-2 lg:pb-[90px] lg:pt-[120px]'>
className='overflow-hidden pb-12 pt-20 lg:pb-[90px] lg:pt-[120px]'>
<div className='container mx-auto'>
<div className='flex -mx-4 '>
<div className='flex flex-col'>
<div className='mx-auto mb-[60px] max-w-[485px]'>
<span className='mb-2 block text-lg font-semibold text-primary'>
<div className='flex flex-col md:flex-row -mx-4 justify-between'>
{/* 左边肖像图 */}
<div className='mx-6 mb-6 max-w-96 border-gray-200 dark:border-[#333333] dark:bg-dark-1 border rounded-2xl overflow-hidden'>
<LazyImage src={PROXIO_ABOUT_PHOTO_URL} className='object-cover h-full' />
</div>
{/* 右侧文字说明 */}
<div className='flex flex-col px-4 space-y-4 mx-auto justify-between max-w-[485px]'>
<div>
<span className='px-3 py-0.5 mb-2 dark:bg-dark-1 rounded-2xl border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_ABOUT_TITLE')}
</span>
<h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
{siteConfig('PROXIO_ABOUT_TEXT_1')}
</h2>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_ABOUT_TEXT_2')
}}
className='text-base text-body-color dark:text-dark-6'></p>
</div>
<h2 className='mb-3 text-2xl leading-[1.2] dark:text-white md:text-[40px]'>
{siteConfig('PROXIO_ABOUT_TEXT_1')}
</h2>
<p
dangerouslySetInnerHTML={{
__html: siteConfig('PROXIO_ABOUT_TEXT_2')
}}
className='text-base text-body-color dark:text-dark-6'></p>
{/* 数值四宫格 */}
<div className='grid grid-cols-2 grid-rows-2 pt-6 gap-4'>
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_1')} v={siteConfig('PROXIO_ABOUT_VAL_1')} />
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_2')} v={siteConfig('PROXIO_ABOUT_VAL_2')} />
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_3')} v={siteConfig('PROXIO_ABOUT_VAL_3')} />
<KeyVal k={siteConfig('PROXIO_ABOUT_KEY_4')} v={siteConfig('PROXIO_ABOUT_VAL_4')} />
</div>
</div>
<div>
</div>
</div>
</div>
</section>
{/* <!-- ====== Team Section End --> */}
</>
)
}
// 显示一组键值对
const KeyVal = ({ k, v }) => {
if (!k) {
return null;
}
return (
<div className='space-y-2'>
<div className='dark:text-dark-6'>{k}</div>
<div className='dark:text-white text-2xl font-semibold'>{v}</div>
</div>
)
}

245
themes/proxio/components/Testimonials.js
View File

@@ -1,150 +1,149 @@
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable @next/next/no-img-element */
import { siteConfig } from '@/lib/config'
import { loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
import { SVGLeftArrow } from './svg/SVGLeftArrow'
import { SVGRightArrow } from './svg/SVGRightArrow'
import Link from 'next/link'
import { useEffect, useRef } from 'react'
/**
* 一些外部js
* 用户反馈
* @returns
*/
const loadExternal = async () => {
await loadExternalResource(
'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css',
'css'
)
await loadExternalResource(
'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js',
'js'
)
const Swiper = window.Swiper
if (!Swiper) {
return
}
// Testimonial
// eslint-disable-next-line no-unused-vars
const testimonialSwiper = new Swiper('.testimonial-carousel', {
slidesPerView: 1,
spaceBetween: 30,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 30
},
1024: {
slidesPerView: 3,
spaceBetween: 30
},
1280: {
slidesPerView: 3,
spaceBetween: 30
}
}
})
}
export const Testimonials = () => {
const PROXIO_TESTIMONIALS_ITEMS = siteConfig('PROXIO_TESTIMONIALS_ITEMS', [])
const scrollContainerRef = useRef(null)
useEffect(() => {
loadExternal()
const scrollContainer = scrollContainerRef.current
let scrollAmount = 0
const scrollSpeed = 1 // 滚动速度
const scroll = () => {
if (scrollContainer) {
scrollAmount += scrollSpeed
scrollContainer.scrollTop = scrollAmount
// 如果滚动到内容的一半，立即重置滚动位置
if (scrollAmount >= scrollContainer.scrollHeight / 2) {
scrollAmount = 0
}
}
requestAnimationFrame(scroll)
}
scroll()
return () => cancelAnimationFrame(scroll)
}, [])
// 用户评分
const ratings = [1, 2, 3, 4, 5]
const PROXIO_TESTIMONIALS_ITEMS = siteConfig('PROXIO_TESTIMONIALS_ITEMS')
return (
<>
{/* <!-- ====== Testimonial Section Start --> */}
<section
id='testimonials'
className='overflow-hidden bg-gray-1 py-20 dark:bg-dark-2 md:py-[120px]'>
<div className='container mx-auto'>
<div className='-mx-4 flex flex-wrap justify-center'>
<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'>
{siteConfig('PROXIO_TESTIMONIALS_TITLE')}
</span>
<h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
{siteConfig('PROXIO_TESTIMONIALS_TEXT_1')}
</h2>
<p className='text-base text-body-color dark:text-dark-6'>
{siteConfig('PROXIO_TESTIMONIALS_TEXT_2')}
</p>
</div>
id="testimonials"
className="overflow-hidden bg-gray-1 py-20 dark:bg-black md:py-[60px]"
>
<div className="container mx-auto flex flex-col md:flex-row items-start gap-10">
{/* 左侧标题和描述 */}
<div className="flex flex-col space-y-8 w-full md:w-1/2 text-center md:text-left">
<div>
<span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
{siteConfig('PROXIO_TESTIMONIALS_TITLE')}
</span>
</div>
<h2 className="text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]">
{siteConfig('PROXIO_TESTIMONIALS_TEXT_1')}
</h2>
<p className="text-base text-body-color dark:text-dark-6">
{siteConfig('PROXIO_TESTIMONIALS_TEXT_2')}
</p>
<div className='mt-8 w-full flex justify-start items-center'>
<Link
href={siteConfig('PROXIO_TESTIMONIALS_BUTTON_URL', '')}
className='px-4 py-2 rounded-3xl border dark:border-gray-200 border-[#333333] text-base font-medium text-dark hover:bg-gray-100 dark:text-white dark:hover:bg-white dark:hover:text-black duration-200'>
{siteConfig('PROXIO_TESTIMONIALS_BUTTON_TEXT')}
<i className="pl-4 fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
<div className='-m-5'>
<div className='swiper testimonial-carousel common-carousel p-5'>
<div className='swiper-wrapper'>
{/* 用户评价卡牌 */}
{PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => {
return (
<div key={index} className='swiper-slide'>
<div className='rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]'>
<div className='mb-[18px] flex items-center gap-[2px]'>
{ratings.map((rating, index) => (
<img
key={index}
alt='star icon' // 为每个图片设置唯一的 key 属性
src={siteConfig('PROXIO_TESTIMONIALS_STAR_ICON')}
/>
))}
</div>
<p className='mb-6 text-base text-body-color dark:text-dark-6'>
“{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
</p>
<a
href={item.PROXIO_TESTIMONIALS_ITEM_URL}
className='flex items-center gap-4'>
<div className='h-[50px] w-[50px] overflow-hidden rounded-full'>
<img
src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
alt='author'
className='h-[50px] w-[50px] overflow-hidden rounded-full object-cover'
/>
</div>
<div>
<h3 className='text-sm font-semibold text-dark dark:text-white'>
{item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
</h3>
<p className='text-xs text-body-secondary'>
{item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
</p>
</div>
</a>
</div>
{/* 右侧用户评价卡牌 */}
<div
className="w-full md:w-1/2 h-[600px] overflow-hidden relative"
ref={scrollContainerRef}
>
<div className="absolute top-0 left-0 w-full">
{PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => (
<div
key={index}
className="mb-6 rounded-xl bg-white px-4 py-[30px] shadow-testimonial border dark:bg-[#0E0E0E] sm:px-[30px] dark:border-[#333333] "
>
<p className="mb-6 text-base text-body-color dark:text-dark-6">
“{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
</p>
<a
href={item.PROXIO_TESTIMONIALS_ITEM_URL}
className="flex items-center gap-4"
>
<div className="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
alt="author"
className="h-[50px] w-[50px] overflow-hidden rounded-full object-cover"
/>
</div>
)
})}
</div>
{/* 切换按钮 */}
<div className='mt-[60px] flex items-center justify-center gap-1'>
<div className='swiper-button-prev'>
<SVGLeftArrow />
<div>
<h3 className="text-sm font-semibold text-dark dark:text-white">
{item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
</h3>
<p className="text-xs text-body-secondary">
{item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
</p>
</div>
</a>
</div>
<div className='swiper-button-next'>
<SVGRightArrow />
))}
{/* 克隆一份内容，用于无缝滚动 */}
{PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => (
<div
key={`clone-${index}`}
className="mb-6 rounded-xl bg-white px-4 py-[30px] shadow-testimonial border dark:bg-[#0E0E0E] sm:px-[30px] dark:border-[#333333] "
>
<p className="mb-6 text-base text-body-color dark:text-dark-6">
“{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
</p>
<a
href={item.PROXIO_TESTIMONIALS_ITEM_URL}
className="flex items-center gap-4"
>
<div className="h-[50px] w-[50px] overflow-hidden rounded-full">
<img
src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
alt="author"
className="h-[50px] w-[50px] overflow-hidden rounded-full object-cover"
/>
</div>
<div>
<h3 className="text-sm font-semibold text-dark dark:text-white">
{item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
</h3>
<p className="text-xs text-body-secondary">
{item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
</p>
</div>
</a>
</div>
</div>
))}
</div>
</div>
</div>
</section>
{/* <!-- ====== Testimonial Section End --> */}
</>
)
}
}

179
themes/proxio/config.js
View File

@@ -2,7 +2,8 @@
* 另一个落地页主题
*/
const CONFIG = {
PROXIO_WELCOME_TEXT:'欢迎来到此网站，点击任意位置进入', // 欢迎文字，留空则不启用
PROXIO_WELCOME_COVER_ENABLE: true, //是否显示页面进入的欢迎文字
PROXIO_WELCOME_TEXT: '欢迎来到此网站，点击任意位置进入', // 欢迎文字，留空则不启用
// 英雄区块导航
PROXIO_HERO_ENABLE: true, // 开启英雄区
@@ -24,89 +25,46 @@ const CONFIG = {
// 文章区块
PROXIO_BLOG_ENABLE: true, // 首页博文区块开关
PROXIO_BLOG_TITLE: '作品',
PROXIO_BLOG_COUNT: 4, // 首页博文区块默认展示前3篇文章
PROXIO_BLOG_COUNT: 4, // 首页博文区块展示前4篇文章
PROXIO_BLOG_TEXT_1: '我的最新动态',
PROXIO_ANNOUNCEMENT_ENABLE: true, //公告文字区块
// 特性区块
PROXIO_FEATURE_ENABLE: true, // 特性区块开关
PROXIO_FEATURE_TITLE: '特性', // 特性
PROXIO_FEATURE_TEXT_1: 'NotionNext的主要特性', // 特性
PROXIO_FEATURE_TITLE: '为什么选我',
PROXIO_FEATURE_TEXT_1: '我能让您的项目焕发光彩',
PROXIO_FEATURE_TEXT_2:
'NotionNext的愿景是帮助您简单、无感知地稳定地搭建自己的网站，放大品牌的价值。 ', // 特性
'丰富的案例经验，专业的技术服务，优质的沟通效率',
PROXIO_FEATURE_1_TITLE_1: '免费且开源', // 特性1
PROXIO_FEATURE_1_TEXT_1: '项目源码在Github上完全开放共享，遵循MIT协议', // 特性1
PROXIO_FEATURE_1_BUTTON_TEXT: '了解更多', // 特性1
PROXIO_FEATURE_1_BUTTON_URL: 'https://github.com/tangly1024/NotionNext', // 特性1
// 特性1
PROXIO_FEATURE_1_ICON_CLASS: 'fa-solid fa-stopwatch', // fas图标
PROXIO_FEATURE_1_TITLE_1: '高效工作流程',
PROXIO_FEATURE_1_TEXT_1: '精简的设计流程确保快速交付，在紧迫的工期下仍能保证品质与细节不打折扣。',
PROXIO_FEATURE_2_TITLE_1: '多种主题定制', // 特性2
PROXIO_FEATURE_2_TEXT_1: '数十种主题,适用于不同场景，总有一款适合你', // 特性2
PROXIO_FEATURE_2_BUTTON_TEXT: '了解更多', // 特性2
PROXIO_FEATURE_2_BUTTON_URL:
'https://docs.tangly1024.com/article/notion-next-themes', // 特性2
PROXIO_FEATURE_2_ICON_CLASS: 'fa-solid fa-comments',
PROXIO_FEATURE_2_TITLE_1: '协作式流程',
PROXIO_FEATURE_2_TEXT_1: '与你紧密合作，融合反馈意见，打造超越预期的设计',
PROXIO_FEATURE_3_TITLE_1: '优秀的性能', // 特性3
PROXIO_FEATURE_3_TEXT_1: '基于NextJS开发，更快的响应速度，更好的SEO', // 特性3
PROXIO_FEATURE_3_BUTTON_TEXT: '了解更多', // 特性3
PROXIO_FEATURE_3_BUTTON_URL: 'https://docs.tangly1024.com/article/next-js', // 特性3
PROXIO_FEATURE_3_ICON_CLASS: 'fa-solid fa-search',
PROXIO_FEATURE_3_TITLE_1: '细节把控',
PROXIO_FEATURE_3_TEXT_1: '精益求精雕琢每个元素，确保成品精致统一，令人过目难忘',
PROXIO_FEATURE_4_TITLE_1: '便捷的写作体验', // 特性4
PROXIO_FEATURE_4_TEXT_1: '只需在Notion笔记中编修，自动同步到网站', // 特性4
PROXIO_FEATURE_4_BUTTON_TEXT: '了解更多', // 特性4
PROXIO_FEATURE_4_BUTTON_URL: 'https://docs.tangly1024.com/about', // 特性4
PROXIO_FEATURE_BUTTON_TEXT: '了解更多', // 按钮文字
PROXIO_FEATURE_BUTTON_URL: 'https://github.com/tangly1024/NotionNext', // 按钮跳转
// 首页生涯区块
PROXIO_CAREER_ENABLE: true, // 区块开关
PROXIO_CAREER_TITLE: '一套轻量实用的建站解决方案',
PROXIO_CAREER_TITLE: '生涯',
PROXIO_CAREER_TEXT:
'NotionNext的愿景是帮助非技术人员的小白，最低成本、最快速地搭建自己的网站，帮助您将自己的产品与故事高效地传达给世界。 <br /> <br /> 功能强大的Notion笔记，简单快速的Vercel托管平台，组成一个简单的网站',
PROXIO_CAREER_BUTTON_TEXT: '了解更多',
PROXIO_CAREER_BUTTON_URL: 'https://docs.tangly1024.com/about',
PROXIO_CAREER_IMAGE_1: '/images/starter/about/about-image-01.jpg',
PROXIO_CAREER_IMAGE_2: '/images/starter/about/about-image-02.jpg',
PROXIO_CAREER_TIPS_1: '7000+',
PROXIO_CAREER_TIPS_2: '博客站点',
PROXIO_CAREER_TIPS_3: '正在线上运行',
'以下是我的职业生涯',
// 首页价格区块
PROXIO_PRICING_ENABLE: true, // 价格区块开关
PROXIO_PRICING_TITLE: '价格表',
PROXIO_PRICING_TEXT_1: '很棒的定价计划',
PROXIO_PRICING_TEXT_2:
'我们制定了灵活的付费模式，您可以按需选择。（NotionNext免费开源，这里仅演示产品订阅付费功能，请勿下单购买！）',
PROXIO_PRICING_1_TITLE: '入门版',
PROXIO_PRICING_1_PRICE: '19.9',
PROXIO_PRICING_1_PRICE_CURRENCY: '$',
PROXIO_PRICING_1_PRICE_PERIOD: '每月',
PROXIO_PRICING_1_HEADER: '功能点',
PROXIO_PRICING_1_FEATURES: '所有的主题,免费更新,帮助手册', // 英文逗号隔开
PROXIO_PRICING_1_BUTTON_TEXT: '立即购买',
PROXIO_PRICING_1_BUTTON_URL:
'https://tangly1024.lemonsqueezy.com/checkout/buy/c1a38a65-362e-44c5-8065-733fee39eb54',
PROXIO_PRICING_2_TAG: '推荐',
PROXIO_PRICING_2_TITLE: '基础版',
PROXIO_PRICING_2_PRICE: '39.9',
PROXIO_PRICING_2_PRICE_CURRENCY: '$',
PROXIO_PRICING_2_PRICE_PERIOD: '每月',
PROXIO_PRICING_2_HEADER: '功能点',
PROXIO_PRICING_2_FEATURES: '包含入门版,项目源码,内部社群,技术咨询,SEO优化', // 英文逗号隔开
PROXIO_PRICING_2_BUTTON_TEXT: '立即购买',
PROXIO_PRICING_2_BUTTON_URL:
'https://tangly1024.lemonsqueezy.com/checkout/buy/590ad70a-c3b7-4caf-94ec-9ca27bde06d4',
PROXIO_PRICING_3_TITLE: '高级版',
PROXIO_PRICING_3_PRICE: '59.9',
PROXIO_PRICING_3_PRICE_CURRENCY: '$',
PROXIO_PRICING_3_PRICE_PERIOD: '每月',
PROXIO_PRICING_3_HEADER: '功能点',
PROXIO_PRICING_3_FEATURES: '包含基础版,功能定制开发', // 英文逗号隔开
PROXIO_PRICING_3_BUTTON_TEXT: '立即购买',
PROXIO_PRICING_3_BUTTON_URL:
'https://tangly1024.lemonsqueezy.com/checkout/buy/df924d66-09dc-42a4-a632-a6b0c5cc4f28',
// 生涯内容卡牌 ，title是标题 ，bio是备注，text是详情
PROXIO_CAREERS: [
{ title: 'Freelance Architect', bio: '2016-2020', text: 'As a freelance architect, I worked on a range of residential and commercial projects, balancing form and function. I collaborated with clients and contractors to transform concepts into reality, ensuring each design was both aesthetically pleasing and structurally sound.' },
{ title: 'Product Designer at Spotify', bio: '2020-2022', text: 'At Spotify, I helped shape innovative features for millions of users globally. My focus was on creating seamless music discovery experiences, enhancing user interfaces, and optimizing cross-platform navigation, which led to an improved product flow and increased user satisfaction.' },
{ title: 'Freelance Product Designer', bio: '2022-Now', text: 'Now I design user-centric products that align with client visions. As a freelance product designer, I collaborate with startups and established companies, crafting solutions that elevate user experiences and increase engagement across both digital and physical interfaces.' }
],
// 首页用户测评区块
PROXIO_TESTIMONIALS_ENABLE: true, // 测评区块开关
@@ -114,7 +72,10 @@ const CONFIG = {
PROXIO_TESTIMONIALS_TEXT_1: '我们的用户怎么说',
PROXIO_TESTIMONIALS_TEXT_2:
'数千位站长选择用NotionNext搭建他们的网站,通过帮助手册、交流社群以及技术咨询，大家成功上线了自己的网站',
PROXIO_TESTIMONIALS_STAR_ICON: '/images/starter/testimonials/icon-star.svg', // 评分图标
// 用户测评处的跳转按钮
PROXIO_TESTIMONIALS_BUTTON_URL: '/about',
PROXIO_TESTIMONIALS_BUTTON_TEXT: '联系我',
// 这里不支持CONFIG和环境变量，需要一一修改此处代码。
PROXIO_TESTIMONIALS_ITEMS: [
@@ -178,30 +139,20 @@ const CONFIG = {
PROXIO_FAQ_TITLE: '常见问题解答',
PROXIO_FAQ_TEXT_1: '有任何问题吗？请看这里',
PROXIO_FAQ_TEXT_2: '我们收集了常见的用户疑问',
PROXIO_FAQS: [
{ q: 'NotionNext有帮助文档吗？', a: 'NotionNext提供了<a href="https://docs.tangly1024.com/about" className="underline">帮助文档</a>，操作<a href="https://www.bilibili.com/video/BV1fM4y1L7Qi/" className="underline">演示视频</a>，以及<a href="https://docs.tangly1024.com/article/chat-community" className="underline">交流社群</a>来协助您完成网站的搭建部署' },
{ q: '部署后要如何编写文章？', a: '您可以在Notion中之间添加或修改类型为Post的页面，内容将被实时同步在站点中，详情参考<a className="underline" href="https://docs.tangly1024.com/article/start-to-write">《帮助文档》</a>' },
{ q: '站点部署失败，更新失败？', a: '通常是配置修改错误导致，请检查配置或者重试操作步骤，或者通过Vercel后台的Deployments中找到错误日志，并向网友求助' },
{ q: '文章没有实时同步？', a: '先检查Notion_Page_ID是否正确配置，其次由于博客的每个页面都有独立缓存，刷新网页后即可解决' },
],
PROXIO_FAQ_1_QUESTION: 'NotionNext有帮助文档吗？',
PROXIO_FAQ_1_ANSWER:
'NotionNext提供了<a href="https://docs.tangly1024.com/about" className="underline">帮助文档</a>，操作<a href="https://www.bilibili.com/video/BV1fM4y1L7Qi/" className="underline">演示视频</a>，以及<a href="https://docs.tangly1024.com/article/chat-community" className="underline">交流社群</a>来协助您完成网站的搭建部署',
PROXIO_FAQ_2_QUESTION: '部署后要如何编写文章？',
PROXIO_FAQ_2_ANSWER:
'您可以在Notion中之间添加或修改类型为Post的页面，内容将被实时同步在站点中，详情参考<a className="underline" href="https://docs.tangly1024.com/article/start-to-write">《帮助文档》</a>',
PROXIO_FAQ_3_QUESTION: '站点部署失败，更新失败？',
PROXIO_FAQ_3_ANSWER:
'通常是配置修改错误导致，请检查配置或者重试操作步骤，或者通过Vercel后台的Deployments中找到错误日志，并向网友求助',
PROXIO_FAQ_4_QUESTION: '文章没有实时同步？',
PROXIO_FAQ_4_ANSWER:
'先检查Notion_Page_ID是否正确配置，其次由于博客的每个页面都有独立缓存，刷新网页后即可解决',
// 团队成员区块
PROXIO_ABOUT_ENABLE: true, // 团队成员区块开关
PROXIO_ABOUT_TITLE: '团队成员',
PROXIO_ABOUT_TEXT_1: '我们的开发者团队',
// 关于作者区块
PROXIO_ABOUT_ENABLE: true, // 关于作者区块区块开关
PROXIO_ABOUT_TITLE: '关于作者',
PROXIO_ABOUT_TEXT_1: 'I am an Architect Turned Into a Product Designer',
PROXIO_ABOUT_TEXT_2:
'NotionNext 由众多开源技术爱好者们共同合作完成，感谢每一位<a className="underline" href="https://github.com/tangly1024/NotionNext/graphs/contributors">贡献者</a>',
PROXIO_ABOUT_PHOTO_URL: '',
'With a background in architecture, I now apply my expertise to product design, blending aesthetics, functionality, and innovation. My goal is to create modern, user-focused designs that bring your vision to life.',
PROXIO_ABOUT_PHOTO_URL: '/avatar.png',
PROXIO_ABOUT_KEY_1: '经验年限',
PROXIO_ABOUT_VAL_1: '10年+',
PROXIO_ABOUT_KEY_2: '客户',
@@ -232,39 +183,13 @@ const CONFIG = {
// PROXIO_CONTACT_MSG_SEND: '发送消息',
// PROXIO_CONTACT_MSG_THANKS: '感谢您的留言',
// 合作伙伴的图标
PROXIO_BRANDS_ENABLE: true, // 合作伙伴开关
// 横向滚动文字
PROXIO_BRANDS_ENABLE: true, // 滚动文字
PROXIO_BRANDS: [
{
IMAGE: '/images/starter/brands/graygrids.svg',
IMAGE_WHITE: '/images/starter/brands/graygrids-white.svg',
URL: 'https://graygrids.com/',
TITLE: 'graygrids'
},
{
IMAGE: '/images/starter/brands/lineicons.svg',
IMAGE_WHITE: '/images/starter/brands/lineicons-white.svg',
URL: 'https://lineicons.com/',
TITLE: 'lineicons'
},
{
IMAGE: '/images/starter/brands/uideck.svg',
IMAGE_WHITE: '/images/starter/brands/uideck-white.svg',
URL: 'https://uideck.com/',
TITLE: 'uideck'
},
{
IMAGE: '/images/starter/brands/ayroui.svg',
IMAGE_WHITE: '/images/starter/brands/ayroui-white.svg',
URL: 'https://ayroui.com/',
TITLE: 'ayroui'
},
{
IMAGE: '/images/starter/brands/tailgrids.svg',
IMAGE_WHITE: '/images/starter/brands/tailgrids-white.svg',
URL: '"https://tailgrids.com/',
TITLE: 'tailgrids'
}
'Web Design',
'Logo Design',
'Mobile App Design',
'Product Design'
],
PROXIO_FOOTER_SLOGAN: '我们通过技术为品牌和公司创造数字体验。',
@@ -326,14 +251,14 @@ const CONFIG = {
// 页面底部的行动呼吁模块
PROXIO_CTA_ENABLE: true,
PROXIO_CTA_TITLE: '你还在等待什么呢？',
PROXIO_CTA_TITLE_2: '现在开始吧',
PROXIO_CTA_TITLE: '与我建立联系',
PROXIO_CTA_TITLE_2: '让我们开始链接并尽快启动您的项目',
PROXIO_CTA_DESCRIPTION:
'访问NotionNext的操作文档，我们提供了详细的教程，帮助你即刻搭建站点',
PROXIO_CTA_BUTTON: true, // 是否显示按钮
PROXIO_CTA_BUTTON_URL:
'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
PROXIO_CTA_BUTTON_TEXT: '开始体验',
'/about',
PROXIO_CTA_BUTTON_TEXT: '联系我',
PROXIO_POST_REDIRECT_ENABLE: true, // 默認開啟重定向
PROXIO_POST_REDIRECT_URL: 'https://blog.tangly1024.com', // 重定向域名

17
themes/proxio/index.js
View File

@@ -8,7 +8,7 @@ import { siteConfig } from '@/lib/config'
import { isBrowser } from '@/lib/utils'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { About } from './components/About'
import { Career } from './components/Career'
import { BackToTopButton } from './components/BackToTopButton'
import { Blog } from './components/Blog'
import { Brand } from './components/Brand'
@@ -115,14 +115,13 @@ const LayoutIndex = props => {
</>
)}
{/* 短留言公告 */}
{/* 公告 */}
{siteConfig('PROXIO_ANNOUNCEMENT_ENABLE', true, CONFIG) && <Announcement
post={props?.notice}
className={
'announncement text-center py-16'
} />
}
/>}
{/* 团队介绍 */}
{siteConfig('PROXIO_ABOUT_ENABLE', true, CONFIG) && <Team />}
@@ -130,12 +129,12 @@ const LayoutIndex = props => {
{/* 合作伙伴 */}
{siteConfig('PROXIO_BRANDS_ENABLE', true, CONFIG) && <Brand />}
{/* 生涯 */}
{siteConfig('PROXIO_CAREER_ENABLE', true, CONFIG) && <Career />}
{/* 产品特性 */}
{siteConfig('PROXIO_FEATURE_ENABLE', true, CONFIG) && <Features />}
{/* 生涯 */}
{siteConfig('PROXIO_CAREER_ENABLE', true, CONFIG) && <About />}
{/* 价格 */}
{/* {siteConfig('PROXIO_PRICING_ENABLE', true, CONFIG) && <Pricing />} */}
@@ -152,7 +151,7 @@ const LayoutIndex = props => {
{/* 行动呼吁 */}
{siteConfig('PROXIO_CTA_ENABLE', true, CONFIG) && <CTA />}
<LoadingCover/>
{siteConfig('PROXIO_WELCOME_COVER_ENABLE', false, CONFIG) && <LoadingCover />}
</>
)
}

5
themes/proxio/style.js
View File

@@ -8,6 +8,11 @@
const Style = () => {
return <style jsx global>{`
#theme-proxio .bg-primary {
--tw-bg-opacity: 1;
background-color: #121212;
}
@media (min-width: 540px) {
#theme-proxio .container {
max-width: 540px;