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

starter-FAQ

Browse Source
This commit is contained in:
tangly1024.com
2024-02-20 15:22:15 +08:00
parent b1e42b0868
commit ed415fab79
4 changed files with 361 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

707
themes/starter/components/FAQ.js
View File

@@ -1,4 +1,8 @@
import { siteConfig } from '@/lib/config';
import { useEffect } from 'react'
import CONFIG from '../config';
import { SVGQuestion } from './svg/SVGQuestion';
import { SVGCircleBG } from './svg/SVGCircleBG';
export const FAQ = () => {
useEffect(() => {
@@ -21,56 +25,39 @@ export const FAQ = () => {
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[520px] text-center">
<span class="mb-2 block text-lg font-semibold text-primary">
FAQ
{siteConfig('STARTER_FAQ_TITLE', null, CONFIG)}
</span>
<h2
class="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]"
>
Any Questions? Look Here
{siteConfig('STARTER_FAQ_TEXT_1', null, CONFIG)}
</h2>
<p
class="mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6"
>
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
{siteConfig('STARTER_FAQ_TEXT_2', null, CONFIG)}
</p>
</div>
</div>
</div>
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 lg:w-1/2">
<div class="mb-12 flex lg:mb-[70px]">
<div
class="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]"
>
<svg
width="32"
height="32"
viewBox="0 0 34 34"
class="fill-current"
>
<path
d="M17.0008 0.690674C7.96953 0.690674 0.691406 7.9688 0.691406 17C0.691406 26.0313 7.96953 33.3625 17.0008 33.3625C26.032 33.3625 33.3633 26.0313 33.3633 17C33.3633 7.9688 26.032 0.690674 17.0008 0.690674ZM17.0008 31.5032C9.03203 31.5032 2.55078 24.9688 2.55078 17C2.55078 9.0313 9.03203 2.55005 17.0008 2.55005C24.9695 2.55005 31.5039 9.0313 31.5039 17C31.5039 24.9688 24.9695 31.5032 17.0008 31.5032Z"
/>
<path
d="M17.9039 6.32194C16.3633 6.05631 14.8227 6.48131 13.707 7.43756C12.5383 8.39381 11.8477 9.82819 11.8477 11.3688C11.8477 11.9532 11.9539 12.5376 12.1664 13.0688C12.3258 13.5469 12.857 13.8126 13.3352 13.6532C13.8133 13.4938 14.0789 12.9626 13.9195 12.4844C13.8133 12.1126 13.707 11.7938 13.707 11.3688C13.707 10.4126 14.132 9.50944 14.8758 8.87194C15.6195 8.23444 16.5758 7.96881 17.5852 8.18131C18.9133 8.39381 19.9758 9.50944 20.1883 10.7844C20.4539 12.3251 19.657 13.8126 18.2227 14.3969C16.8945 14.9282 16.0445 16.2563 16.0445 17.7969V21.1969C16.0445 21.7282 16.4695 22.1532 17.0008 22.1532C17.532 22.1532 17.957 21.7282 17.957 21.1969V17.7969C17.957 17.0532 18.382 16.3626 18.9664 16.1501C21.1977 15.2469 22.4727 12.9094 22.0477 10.4657C21.6758 8.39381 19.9758 6.69381 17.9039 6.32194Z"
/>
<path
d="M17.0531 24.8625H16.8937C16.3625 24.8625 15.9375 25.2875 15.9375 25.8188C15.9375 26.35 16.3625 26.7751 16.8937 26.7751H17.0531C17.5844 26.7751 18.0094 26.35 18.0094 25.8188C18.0094 25.2875 17.5844 24.8625 17.0531 24.8625Z"
/>
</svg>
<SVGQuestion/>
</div>
<div class="w-full">
<h3
class="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
>
Is TailGrids Well-documented?
{siteConfig('STARTER_FAQ_1_QUESTION', null, CONFIG)}
</h3>
<p class="text-base text-body-color dark:text-dark-6">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content ui/ux strategy that we do writing your first blog
post.
<p dangerouslySetInnerHTML={
{ __html: siteConfig('STARTER_FAQ_1_ANSWER', null, CONFIG) }
} class="text-base text-body-color dark:text-dark-6">
</p>
</div>
</div>
@@ -78,71 +65,38 @@ export const FAQ = () => {
<div
class="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]"
>
<svg
width="32"
height="32"
viewBox="0 0 34 34"
class="fill-current"
>
<path
d="M17.0008 0.690674C7.96953 0.690674 0.691406 7.9688 0.691406 17C0.691406 26.0313 7.96953 33.3625 17.0008 33.3625C26.032 33.3625 33.3633 26.0313 33.3633 17C33.3633 7.9688 26.032 0.690674 17.0008 0.690674ZM17.0008 31.5032C9.03203 31.5032 2.55078 24.9688 2.55078 17C2.55078 9.0313 9.03203 2.55005 17.0008 2.55005C24.9695 2.55005 31.5039 9.0313 31.5039 17C31.5039 24.9688 24.9695 31.5032 17.0008 31.5032Z"
/>
<path
d="M17.9039 6.32194C16.3633 6.05631 14.8227 6.48131 13.707 7.43756C12.5383 8.39381 11.8477 9.82819 11.8477 11.3688C11.8477 11.9532 11.9539 12.5376 12.1664 13.0688C12.3258 13.5469 12.857 13.8126 13.3352 13.6532C13.8133 13.4938 14.0789 12.9626 13.9195 12.4844C13.8133 12.1126 13.707 11.7938 13.707 11.3688C13.707 10.4126 14.132 9.50944 14.8758 8.87194C15.6195 8.23444 16.5758 7.96881 17.5852 8.18131C18.9133 8.39381 19.9758 9.50944 20.1883 10.7844C20.4539 12.3251 19.657 13.8126 18.2227 14.3969C16.8945 14.9282 16.0445 16.2563 16.0445 17.7969V21.1969C16.0445 21.7282 16.4695 22.1532 17.0008 22.1532C17.532 22.1532 17.957 21.7282 17.957 21.1969V17.7969C17.957 17.0532 18.382 16.3626 18.9664 16.1501C21.1977 15.2469 22.4727 12.9094 22.0477 10.4657C21.6758 8.39381 19.9758 6.69381 17.9039 6.32194Z"
/>
<path
d="M17.0531 24.8625H16.8937C16.3625 24.8625 15.9375 25.2875 15.9375 25.8188C15.9375 26.35 16.3625 26.7751 16.8937 26.7751H17.0531C17.5844 26.7751 18.0094 26.35 18.0094 25.8188C18.0094 25.2875 17.5844 24.8625 17.0531 24.8625Z"
/>
</svg>
<SVGQuestion/>
</div>
<div class="w-full">
<h3
<h3
class="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
>
Is TailGrids Well-documented?
{siteConfig('STARTER_FAQ_2_QUESTION', null, CONFIG)}
</h3>
<p class="text-base text-body-color dark:text-dark-6">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content ui/ux strategy that we do writing your first blog
post.
<p dangerouslySetInnerHTML={
{ __html: siteConfig('STARTER_FAQ_2_ANSWER', null, CONFIG) }
} class="text-base text-body-color dark:text-dark-6">
</p>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2">
<div class="mb-12 flex lg:mb-[70px]">
<div
class="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]"
>
<svg
width="32"
height="32"
viewBox="0 0 34 34"
class="fill-current"
>
<path
d="M17.0008 0.690674C7.96953 0.690674 0.691406 7.9688 0.691406 17C0.691406 26.0313 7.96953 33.3625 17.0008 33.3625C26.032 33.3625 33.3633 26.0313 33.3633 17C33.3633 7.9688 26.032 0.690674 17.0008 0.690674ZM17.0008 31.5032C9.03203 31.5032 2.55078 24.9688 2.55078 17C2.55078 9.0313 9.03203 2.55005 17.0008 2.55005C24.9695 2.55005 31.5039 9.0313 31.5039 17C31.5039 24.9688 24.9695 31.5032 17.0008 31.5032Z"
/>
<path
d="M17.9039 6.32194C16.3633 6.05631 14.8227 6.48131 13.707 7.43756C12.5383 8.39381 11.8477 9.82819 11.8477 11.3688C11.8477 11.9532 11.9539 12.5376 12.1664 13.0688C12.3258 13.5469 12.857 13.8126 13.3352 13.6532C13.8133 13.4938 14.0789 12.9626 13.9195 12.4844C13.8133 12.1126 13.707 11.7938 13.707 11.3688C13.707 10.4126 14.132 9.50944 14.8758 8.87194C15.6195 8.23444 16.5758 7.96881 17.5852 8.18131C18.9133 8.39381 19.9758 9.50944 20.1883 10.7844C20.4539 12.3251 19.657 13.8126 18.2227 14.3969C16.8945 14.9282 16.0445 16.2563 16.0445 17.7969V21.1969C16.0445 21.7282 16.4695 22.1532 17.0008 22.1532C17.532 22.1532 17.957 21.7282 17.957 21.1969V17.7969C17.957 17.0532 18.382 16.3626 18.9664 16.1501C21.1977 15.2469 22.4727 12.9094 22.0477 10.4657C21.6758 8.39381 19.9758 6.69381 17.9039 6.32194Z"
/>
<path
d="M17.0531 24.8625H16.8937C16.3625 24.8625 15.9375 25.2875 15.9375 25.8188C15.9375 26.35 16.3625 26.7751 16.8937 26.7751H17.0531C17.5844 26.7751 18.0094 26.35 18.0094 25.8188C18.0094 25.2875 17.5844 24.8625 17.0531 24.8625Z"
/>
</svg>
<SVGQuestion/>
</div>
<div class="w-full">
<h3
<h3
class="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
>
Is TailGrids Well-documented?
{siteConfig('STARTER_FAQ_3_QUESTION', null, CONFIG)}
</h3>
<p class="text-base text-body-color dark:text-dark-6">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content ui/ux strategy that we do writing your first blog
post.
<p dangerouslySetInnerHTML={
{ __html: siteConfig('STARTER_FAQ_3_ANSWER', null, CONFIG) }
} class="text-base text-body-color dark:text-dark-6">
</p>
</div>
</div>
@@ -150,620 +104,31 @@ export const FAQ = () => {
<div
class="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]"
>
<svg
width="32"
height="32"
viewBox="0 0 34 34"
class="fill-current"
>
<path
d="M17.0008 0.690674C7.96953 0.690674 0.691406 7.9688 0.691406 17C0.691406 26.0313 7.96953 33.3625 17.0008 33.3625C26.032 33.3625 33.3633 26.0313 33.3633 17C33.3633 7.9688 26.032 0.690674 17.0008 0.690674ZM17.0008 31.5032C9.03203 31.5032 2.55078 24.9688 2.55078 17C2.55078 9.0313 9.03203 2.55005 17.0008 2.55005C24.9695 2.55005 31.5039 9.0313 31.5039 17C31.5039 24.9688 24.9695 31.5032 17.0008 31.5032Z"
/>
<path
d="M17.9039 6.32194C16.3633 6.05631 14.8227 6.48131 13.707 7.43756C12.5383 8.39381 11.8477 9.82819 11.8477 11.3688C11.8477 11.9532 11.9539 12.5376 12.1664 13.0688C12.3258 13.5469 12.857 13.8126 13.3352 13.6532C13.8133 13.4938 14.0789 12.9626 13.9195 12.4844C13.8133 12.1126 13.707 11.7938 13.707 11.3688C13.707 10.4126 14.132 9.50944 14.8758 8.87194C15.6195 8.23444 16.5758 7.96881 17.5852 8.18131C18.9133 8.39381 19.9758 9.50944 20.1883 10.7844C20.4539 12.3251 19.657 13.8126 18.2227 14.3969C16.8945 14.9282 16.0445 16.2563 16.0445 17.7969V21.1969C16.0445 21.7282 16.4695 22.1532 17.0008 22.1532C17.532 22.1532 17.957 21.7282 17.957 21.1969V17.7969C17.957 17.0532 18.382 16.3626 18.9664 16.1501C21.1977 15.2469 22.4727 12.9094 22.0477 10.4657C21.6758 8.39381 19.9758 6.69381 17.9039 6.32194Z"
/>
<path
d="M17.0531 24.8625H16.8937C16.3625 24.8625 15.9375 25.2875 15.9375 25.8188C15.9375 26.35 16.3625 26.7751 16.8937 26.7751H17.0531C17.5844 26.7751 18.0094 26.35 18.0094 25.8188C18.0094 25.2875 17.5844 24.8625 17.0531 24.8625Z"
/>
</svg>
<SVGQuestion/>
</div>
<div class="w-full">
<h3
<h3
class="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
>
Is TailGrids Well-documented?
{siteConfig('STARTER_FAQ_4_QUESTION', null, CONFIG)}
</h3>
<p class="text-base text-body-color dark:text-dark-6">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content ui/ux strategy that we do writing your first blog
post.
<p dangerouslySetInnerHTML={
{ __html: siteConfig('STARTER_FAQ_4_ANSWER', null, CONFIG) }
} class="text-base text-body-color dark:text-dark-6">
</p>
</div>
</div>
</div>
</div>
</div>
{/* 背景图案 */}
<div>
<span class="absolute left-4 top-4 -z-[1]">
<svg
width="48"
height="134"
viewBox="0 0 48 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="45.6673"
cy="132"
r="1.66667"
transform="rotate(180 45.6673 132)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="117.333"
r="1.66667"
transform="rotate(180 45.6673 117.333)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="102.667"
r="1.66667"
transform="rotate(180 45.6673 102.667)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="88.0001"
r="1.66667"
transform="rotate(180 45.6673 88.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="73.3335"
r="1.66667"
transform="rotate(180 45.6673 73.3335)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="45.0001"
r="1.66667"
transform="rotate(180 45.6673 45.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="16.0001"
r="1.66667"
transform="rotate(180 45.6673 16.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="59.0001"
r="1.66667"
transform="rotate(180 45.6673 59.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="30.6668"
r="1.66667"
transform="rotate(180 45.6673 30.6668)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="1.66683"
r="1.66667"
transform="rotate(180 45.6673 1.66683)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="132"
r="1.66667"
transform="rotate(180 31.0013 132)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="117.333"
r="1.66667"
transform="rotate(180 31.0013 117.333)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="102.667"
r="1.66667"
transform="rotate(180 31.0013 102.667)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="88.0001"
r="1.66667"
transform="rotate(180 31.0013 88.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="73.3335"
r="1.66667"
transform="rotate(180 31.0013 73.3335)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="45.0001"
r="1.66667"
transform="rotate(180 31.0013 45.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="16.0001"
r="1.66667"
transform="rotate(180 31.0013 16.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="59.0001"
r="1.66667"
transform="rotate(180 31.0013 59.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="30.6668"
r="1.66667"
transform="rotate(180 31.0013 30.6668)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="1.66683"
r="1.66667"
transform="rotate(180 31.0013 1.66683)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="132"
r="1.66667"
transform="rotate(180 16.3333 132)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="117.333"
r="1.66667"
transform="rotate(180 16.3333 117.333)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="102.667"
r="1.66667"
transform="rotate(180 16.3333 102.667)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="88.0001"
r="1.66667"
transform="rotate(180 16.3333 88.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="73.3335"
r="1.66667"
transform="rotate(180 16.3333 73.3335)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="45.0001"
r="1.66667"
transform="rotate(180 16.3333 45.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="16.0001"
r="1.66667"
transform="rotate(180 16.3333 16.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="59.0001"
r="1.66667"
transform="rotate(180 16.3333 59.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="30.6668"
r="1.66667"
transform="rotate(180 16.3333 30.6668)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="1.66683"
r="1.66667"
transform="rotate(180 16.3333 1.66683)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="132"
r="1.66667"
transform="rotate(180 1.66732 132)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="117.333"
r="1.66667"
transform="rotate(180 1.66732 117.333)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="102.667"
r="1.66667"
transform="rotate(180 1.66732 102.667)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="88.0001"
r="1.66667"
transform="rotate(180 1.66732 88.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="73.3335"
r="1.66667"
transform="rotate(180 1.66732 73.3335)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="45.0001"
r="1.66667"
transform="rotate(180 1.66732 45.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="16.0001"
r="1.66667"
transform="rotate(180 1.66732 16.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="59.0001"
r="1.66667"
transform="rotate(180 1.66732 59.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="30.6668"
r="1.66667"
transform="rotate(180 1.66732 30.6668)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="1.66683"
r="1.66667"
transform="rotate(180 1.66732 1.66683)"
fill="#13C296"
/>
</svg>
<SVGCircleBG/>
</span>
<span class="absolute bottom-4 right-4 -z-[1]">
<svg
width="48"
height="134"
viewBox="0 0 48 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="45.6673"
cy="132"
r="1.66667"
transform="rotate(180 45.6673 132)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="117.333"
r="1.66667"
transform="rotate(180 45.6673 117.333)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="102.667"
r="1.66667"
transform="rotate(180 45.6673 102.667)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="88.0001"
r="1.66667"
transform="rotate(180 45.6673 88.0001)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="73.3333"
r="1.66667"
transform="rotate(180 45.6673 73.3333)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="45.0001"
r="1.66667"
transform="rotate(180 45.6673 45.0001)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="16.0001"
r="1.66667"
transform="rotate(180 45.6673 16.0001)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="59.0001"
r="1.66667"
transform="rotate(180 45.6673 59.0001)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="30.6668"
r="1.66667"
transform="rotate(180 45.6673 30.6668)"
fill="#3758F9"
/>
<circle
cx="45.6673"
cy="1.66683"
r="1.66667"
transform="rotate(180 45.6673 1.66683)"
fill="#3758F9"
/>
<circle
cx="31.0006"
cy="132"
r="1.66667"
transform="rotate(180 31.0006 132)"
fill="#3758F9"
/>
<circle
cx="31.0006"
cy="117.333"
r="1.66667"
transform="rotate(180 31.0006 117.333)"
fill="#3758F9"
/>
<circle
cx="31.0006"
cy="102.667"
r="1.66667"
transform="rotate(180 31.0006 102.667)"
fill="#3758F9"
/>
<circle
cx="31.0006"
cy="88.0001"
r="1.66667"
transform="rotate(180 31.0006 88.0001)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="73.3333"
r="1.66667"
transform="rotate(180 31.0008 73.3333)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="45.0001"
r="1.66667"
transform="rotate(180 31.0008 45.0001)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="16.0001"
r="1.66667"
transform="rotate(180 31.0008 16.0001)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="59.0001"
r="1.66667"
transform="rotate(180 31.0008 59.0001)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="30.6668"
r="1.66667"
transform="rotate(180 31.0008 30.6668)"
fill="#3758F9"
/>
<circle
cx="31.0008"
cy="1.66683"
r="1.66667"
transform="rotate(180 31.0008 1.66683)"
fill="#3758F9"
/>
<circle
cx="16.3341"
cy="132"
r="1.66667"
transform="rotate(180 16.3341 132)"
fill="#3758F9"
/>
<circle
cx="16.3341"
cy="117.333"
r="1.66667"
transform="rotate(180 16.3341 117.333)"
fill="#3758F9"
/>
<circle
cx="16.3341"
cy="102.667"
r="1.66667"
transform="rotate(180 16.3341 102.667)"
fill="#3758F9"
/>
<circle
cx="16.3341"
cy="88.0001"
r="1.66667"
transform="rotate(180 16.3341 88.0001)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="73.3333"
r="1.66667"
transform="rotate(180 16.3338 73.3333)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="45.0001"
r="1.66667"
transform="rotate(180 16.3338 45.0001)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="16.0001"
r="1.66667"
transform="rotate(180 16.3338 16.0001)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="59.0001"
r="1.66667"
transform="rotate(180 16.3338 59.0001)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="30.6668"
r="1.66667"
transform="rotate(180 16.3338 30.6668)"
fill="#3758F9"
/>
<circle
cx="16.3338"
cy="1.66683"
r="1.66667"
transform="rotate(180 16.3338 1.66683)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="132"
r="1.66667"
transform="rotate(180 1.66732 132)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="117.333"
r="1.66667"
transform="rotate(180 1.66732 117.333)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="102.667"
r="1.66667"
transform="rotate(180 1.66732 102.667)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="88.0001"
r="1.66667"
transform="rotate(180 1.66732 88.0001)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="73.3333"
r="1.66667"
transform="rotate(180 1.66732 73.3333)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="45.0001"
r="1.66667"
transform="rotate(180 1.66732 45.0001)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="16.0001"
r="1.66667"
transform="rotate(180 1.66732 16.0001)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="59.0001"
r="1.66667"
transform="rotate(180 1.66732 59.0001)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="30.6668"
r="1.66667"
transform="rotate(180 1.66732 30.6668)"
fill="#3758F9"
/>
<circle
cx="1.66732"
cy="1.66683"
r="1.66667"
transform="rotate(180 1.66732 1.66683)"
fill="#3758F9"
/>
</svg>
<SVGCircleBG/>
</span>
</div>
</section>

290
themes/starter/components/svg/SVGCircleBG.js Normal file
View File

@@ -0,0 +1,290 @@
export const SVGCircleBG = () => {
return <svg
width="48"
height="134"
viewBox="0 0 48 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="45.6673"
cy="132"
r="1.66667"
transform="rotate(180 45.6673 132)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="117.333"
r="1.66667"
transform="rotate(180 45.6673 117.333)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="102.667"
r="1.66667"
transform="rotate(180 45.6673 102.667)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="88.0001"
r="1.66667"
transform="rotate(180 45.6673 88.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="73.3335"
r="1.66667"
transform="rotate(180 45.6673 73.3335)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="45.0001"
r="1.66667"
transform="rotate(180 45.6673 45.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="16.0001"
r="1.66667"
transform="rotate(180 45.6673 16.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="59.0001"
r="1.66667"
transform="rotate(180 45.6673 59.0001)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="30.6668"
r="1.66667"
transform="rotate(180 45.6673 30.6668)"
fill="#13C296"
/>
<circle
cx="45.6673"
cy="1.66683"
r="1.66667"
transform="rotate(180 45.6673 1.66683)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="132"
r="1.66667"
transform="rotate(180 31.0013 132)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="117.333"
r="1.66667"
transform="rotate(180 31.0013 117.333)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="102.667"
r="1.66667"
transform="rotate(180 31.0013 102.667)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="88.0001"
r="1.66667"
transform="rotate(180 31.0013 88.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="73.3335"
r="1.66667"
transform="rotate(180 31.0013 73.3335)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="45.0001"
r="1.66667"
transform="rotate(180 31.0013 45.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="16.0001"
r="1.66667"
transform="rotate(180 31.0013 16.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="59.0001"
r="1.66667"
transform="rotate(180 31.0013 59.0001)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="30.6668"
r="1.66667"
transform="rotate(180 31.0013 30.6668)"
fill="#13C296"
/>
<circle
cx="31.0013"
cy="1.66683"
r="1.66667"
transform="rotate(180 31.0013 1.66683)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="132"
r="1.66667"
transform="rotate(180 16.3333 132)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="117.333"
r="1.66667"
transform="rotate(180 16.3333 117.333)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="102.667"
r="1.66667"
transform="rotate(180 16.3333 102.667)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="88.0001"
r="1.66667"
transform="rotate(180 16.3333 88.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="73.3335"
r="1.66667"
transform="rotate(180 16.3333 73.3335)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="45.0001"
r="1.66667"
transform="rotate(180 16.3333 45.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="16.0001"
r="1.66667"
transform="rotate(180 16.3333 16.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="59.0001"
r="1.66667"
transform="rotate(180 16.3333 59.0001)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="30.6668"
r="1.66667"
transform="rotate(180 16.3333 30.6668)"
fill="#13C296"
/>
<circle
cx="16.3333"
cy="1.66683"
r="1.66667"
transform="rotate(180 16.3333 1.66683)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="132"
r="1.66667"
transform="rotate(180 1.66732 132)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="117.333"
r="1.66667"
transform="rotate(180 1.66732 117.333)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="102.667"
r="1.66667"
transform="rotate(180 1.66732 102.667)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="88.0001"
r="1.66667"
transform="rotate(180 1.66732 88.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="73.3335"
r="1.66667"
transform="rotate(180 1.66732 73.3335)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="45.0001"
r="1.66667"
transform="rotate(180 1.66732 45.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="16.0001"
r="1.66667"
transform="rotate(180 1.66732 16.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="59.0001"
r="1.66667"
transform="rotate(180 1.66732 59.0001)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="30.6668"
r="1.66667"
transform="rotate(180 1.66732 30.6668)"
fill="#13C296"
/>
<circle
cx="1.66732"
cy="1.66683"
r="1.66667"
transform="rotate(180 1.66732 1.66683)"
fill="#13C296"
/>
</svg>
}

18
themes/starter/components/svg/SVGQuestion.js Normal file
View File

@@ -0,0 +1,18 @@
export const SVGQuestion = () => {
return <svg
width="32"
height="32"
viewBox="0 0 34 34"
class="fill-current"
>
<path
d="M17.0008 0.690674C7.96953 0.690674 0.691406 7.9688 0.691406 17C0.691406 26.0313 7.96953 33.3625 17.0008 33.3625C26.032 33.3625 33.3633 26.0313 33.3633 17C33.3633 7.9688 26.032 0.690674 17.0008 0.690674ZM17.0008 31.5032C9.03203 31.5032 2.55078 24.9688 2.55078 17C2.55078 9.0313 9.03203 2.55005 17.0008 2.55005C24.9695 2.55005 31.5039 9.0313 31.5039 17C31.5039 24.9688 24.9695 31.5032 17.0008 31.5032Z"
/>
<path
d="M17.9039 6.32194C16.3633 6.05631 14.8227 6.48131 13.707 7.43756C12.5383 8.39381 11.8477 9.82819 11.8477 11.3688C11.8477 11.9532 11.9539 12.5376 12.1664 13.0688C12.3258 13.5469 12.857 13.8126 13.3352 13.6532C13.8133 13.4938 14.0789 12.9626 13.9195 12.4844C13.8133 12.1126 13.707 11.7938 13.707 11.3688C13.707 10.4126 14.132 9.50944 14.8758 8.87194C15.6195 8.23444 16.5758 7.96881 17.5852 8.18131C18.9133 8.39381 19.9758 9.50944 20.1883 10.7844C20.4539 12.3251 19.657 13.8126 18.2227 14.3969C16.8945 14.9282 16.0445 16.2563 16.0445 17.7969V21.1969C16.0445 21.7282 16.4695 22.1532 17.0008 22.1532C17.532 22.1532 17.957 21.7282 17.957 21.1969V17.7969C17.957 17.0532 18.382 16.3626 18.9664 16.1501C21.1977 15.2469 22.4727 12.9094 22.0477 10.4657C21.6758 8.39381 19.9758 6.69381 17.9039 6.32194Z"
/>
<path
d="M17.0531 24.8625H16.8937C16.3625 24.8625 15.9375 25.2875 15.9375 25.8188C15.9375 26.35 16.3625 26.7751 16.8937 26.7751H17.0531C17.5844 26.7751 18.0094 26.35 18.0094 25.8188C18.0094 25.2875 17.5844 24.8625 17.0531 24.8625Z"
/>
</svg>
}

17
themes/starter/config.js
View File

@@ -141,6 +141,23 @@ const CONFIG = {
}
],
// FAQ模块
STARTER_FAQ_TITLE: '常见问题解答',
STARTER_FAQ_TEXT_1: '有任何问题吗？请看这里',
STARTER_FAQ_TEXT_2: '我们收集了常见的用户疑问',
STARTER_FAQ_1_QUESTION: 'NotionNext有帮助文档吗？',
STARTER_FAQ_1_ANSWER: 'NotionNext提供了<a href="https://docs.tangly1024.com/about" class="underline">帮助文档</a>，操作<a href="https://www.bilibili.com/video/BV1fM4y1L7Qi/" class="underline">演示视频</a>，以及<a href="https://docs.tangly1024.com/article/chat-community" class="underline">交流社群</a>来协助您完成网站的搭建部署',
STARTER_FAQ_2_QUESTION: '部署后要如何编写文章？',
STARTER_FAQ_2_ANSWER: '您可以在Notion中之间添加或修改类型为Post的页面，内容将被实时同步在站点中，详情参考<a class="underline" href="https://docs.tangly1024.com/article/start-to-write">《帮助文档》</>',
STARTER_FAQ_3_QUESTION: '站点部署失败，更新失败？',
STARTER_FAQ_3_ANSWER: '通常是配置修改错误导致，请检查配置或者重试操作步骤，或者通过Vercel后台的Deployments中找到错误日志，并向网友求助',
STARTER_FAQ_4_QUESTION: '文章没有实时同步？',
STARTER_FAQ_4_ANSWER: '先检查Notion_Page_ID是否正确配置，其次由于博客的每个页面都有独立缓存，刷新网页后即可解决',
STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
}
export default CONFIG