+
+ {t('feature_full_desc_line_1')}
+
+
+
diff --git a/docs/landing/src/components/FeatureComps/BlockBase.scss b/docs/landing/src/components/FeatureComps/BlockBase.scss
new file mode 100644
index 000000000..e57f15c7e
--- /dev/null
+++ b/docs/landing/src/components/FeatureComps/BlockBase.scss
@@ -0,0 +1,33 @@
+.feature-block {
+ min-height: 520px;
+ padding: 64px 76px;
+ border-radius: 32px;
+ background-color: #e8f0fe;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ & > .content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ main {
+ }
+
+ aside {
+ display: flex;
+ }
+ }
+
+ .feature-title {
+ display: flex;
+ align-items: center;
+ }
+
+ .feature-desc {
+ margin: 20px 0;
+ font-size: 22px;
+ line-height: 1.5;
+ }
+}
diff --git a/docs/landing/src/components/FeatureComps/BlockBase.tsx b/docs/landing/src/components/FeatureComps/BlockBase.tsx
new file mode 100644
index 000000000..d438dc6b6
--- /dev/null
+++ b/docs/landing/src/components/FeatureComps/BlockBase.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import './BlockBase.scss'
+import { useIsElementVisible } from '../../hooks/visible'
+
+interface FeatureBaseProps extends React.ComponentProps<'div'> {
+ onVisibleChange?: (visible: boolean) => void
+}
+
+export const BlockBase: React.FC = (props) => {
+ const { className, onVisibleChange, ...otherProps } = props
+
+ const refElem = useRef(null)
+ const isVisible = useIsElementVisible(refElem)
+
+ const classNames = ['feature-block', isVisible ? 'visible' : '', ...(className?.split(' ') || [])]
+
+ useEffect(() => {
+ onVisibleChange && onVisibleChange(isVisible)
+ }, [onVisibleChange, isVisible])
+
+ return (
+ = (props) => {
+ return (
+
+
+ )
+}
diff --git a/docs/landing/src/components/FeatureTitle.tsx b/docs/landing/src/components/FeatureTitle.tsx
deleted file mode 100644
index 157e2705c..000000000
--- a/docs/landing/src/components/FeatureTitle.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import './FeatureTitle.scss'
-import { Reveal } from './Reveal'
-
-interface FeatureTitleProps {
- text: string
- color: string
-}
-
-export const FeatureTitle: React.FC = (props) => {
- return (
-
-
- )
-}
diff --git a/docs/landing/src/components/Features/Frameworks.scss b/docs/landing/src/components/Features/Frameworks.scss
new file mode 100644
index 000000000..d6a8d4cba
--- /dev/null
+++ b/docs/landing/src/components/Features/Frameworks.scss
@@ -0,0 +1,45 @@
+.frameworks-feature {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ padding: 20px 0;
+ margin-bottom: 100px;
+
+ .title {
+ width: 300px;
+ font-size: 34px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 50px;
+ line-height: 1.8;
+
+ .text-row:first-child {
+ color: var(--color-font-secondary);
+ }
+ }
+
+ .methods {
+ padding: 0 50px;
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+
+ .icon {
+ height: 80px;
+ width: 80px;
+ background-position: center;
+ background-size: 50%;
+ background-repeat: no-repeat;
+ border-radius: 50%;
+ transition: all 0.2s ease-out;
+
+ &.active,
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+ box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.04);
+ }
+ }
+ }
+}
diff --git a/docs/landing/src/components/Features/Frameworks.tsx b/docs/landing/src/components/Features/Frameworks.tsx
new file mode 100644
index 000000000..ce441066b
--- /dev/null
+++ b/docs/landing/src/components/Features/Frameworks.tsx
@@ -0,0 +1,116 @@
+import './Frameworks.scss'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import VueIcon from '../../assets/techs/vue.svg'
+import ReactIcon from '../../assets/techs/react.svg'
+import SolidIcon from '../../assets/techs/solid.svg'
+import SvelteIcon from '../../assets/techs/svelte.svg'
+import HexoIcon from '../../assets/techs/hexo.svg'
+import VitepressIcon from '../../assets/techs/vitepress.svg'
+import WordpressIcon from '../../assets/techs/wordpress.svg'
+import GoIcon from '../../assets/techs/go.svg'
+
+const techs = [
+ {
+ name: 'Vue',
+ icon: VueIcon,
+ color: '#41b883',
+ link: 'https://artalk.js.org/develop/import-framework.html#vue',
+ },
+ {
+ name: 'React',
+ icon: ReactIcon,
+ color: '#116A92',
+ link: 'https://artalk.js.org/develop/import-framework.html#react',
+ },
+ {
+ name: 'SolidJS',
+ icon: SolidIcon,
+ color: '#27488B',
+ link: 'https://artalk.js.org/develop/import-framework.html#solidjs',
+ },
+ {
+ name: 'Svelte',
+ icon: SvelteIcon,
+ color: '#ff3e00',
+ link: 'https://artalk.js.org/develop/import-framework.html#svelte',
+ },
+ {
+ name: 'VitePress',
+ icon: VitepressIcon,
+ color: '#8F4CFF',
+ link: 'https://artalk.js.org/develop/import-blog.html#vitepress',
+ },
+ {
+ name: 'Hexo',
+ icon: HexoIcon,
+ color: '#136DC1',
+ link: 'https://artalk.js.org/develop/import-blog.html#hexo',
+ },
+ {
+ name: 'WordPress',
+ icon: WordpressIcon,
+ color: '#1C6189',
+ link: 'https://artalk.js.org/develop/import-blog.html#wordpress',
+ },
+ {
+ name: 'Go',
+ icon: GoIcon,
+ color: '#00acd7',
+ link: 'https://artalk.js.org/guide/deploy.html',
+ },
+]
+
+export const FrameworksFeature: React.FC = () => {
+ const { t } = useTranslation()
+ const [activeIndex, setActiveIndex] = useState(-1)
+ const [stop, setStop] = useState(false)
+
+ useEffect(() => {
+ if (stop) return
+ const timer = setInterval(() => {
+ setActiveIndex((i) => {
+ if (i + 1 == techs.length) return -1
+ return (i + 1) % techs.length
+ })
+ }, 2000)
+ return () => clearInterval(timer)
+ }, [stop])
+
+ const onMouseOver = (i: number) => {
+ setStop(true)
+ setActiveIndex(i)
+ }
+
+ const onMouseOut = () => {
+ setStop(false)
+ }
+
+ return (
+
-
- )
-}
diff --git a/docs/landing/src/components/Features/FullFeatureList.tsx b/docs/landing/src/components/Features/FullList.tsx
similarity index 87%
rename from docs/landing/src/components/Features/FullFeatureList.tsx
rename to docs/landing/src/components/Features/FullList.tsx
index 91ba15842..ea1285fe5 100644
--- a/docs/landing/src/components/Features/FullFeatureList.tsx
+++ b/docs/landing/src/components/Features/FullList.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { getFeatures, FeatureItem } from '../../features.ts'
-export const FullFeatureList: React.FC = () => {
+export const FullList: React.FC = () => {
const { t } = useTranslation()
// let func list item group by every two items
@@ -19,7 +19,9 @@ export const FullFeatureList: React.FC = () => {
{row.map((item, j) => (
+
+ )
+}
diff --git a/docs/landing/src/components/Features/QuickFeature.scss b/docs/landing/src/components/Features/Quick.scss
similarity index 62%
rename from docs/landing/src/components/Features/QuickFeature.scss
rename to docs/landing/src/components/Features/Quick.scss
index 1e52cfbba..5a4f55d10 100644
--- a/docs/landing/src/components/Features/QuickFeature.scss
+++ b/docs/landing/src/components/Features/Quick.scss
@@ -1,4 +1,6 @@
-.feature.quick {
+.quick-feature {
+ background-color: #f2f9ff;
+
.deploy-links {
margin: 80px 0;
display: flex;
@@ -10,7 +12,7 @@
flex-direction: row;
flex-wrap: wrap;
place-items: flex-end;
- font-size: 2rem;
+ font-size: 1.5rem;
color: var(--color-font);
&:not(:last-child) {
@@ -30,7 +32,7 @@
}
.bold {
- font-size: 3rem;
+ font-size: 2.4rem;
margin-right: 0.2em;
}
@@ -39,6 +41,7 @@
}
.arrow-icon {
+ font-size: 2rem;
margin-left: auto;
position: relative;
display: flex;
@@ -71,9 +74,12 @@
}
}
+ .feature-title {
+ margin-top: -20px;
+ }
+
.airplane-wrap {
- margin-top: 100px;
- margin: 0 80px;
+ margin-top: 40px;
}
.airplane {
@@ -93,52 +99,4 @@
animation: airplaneAnim 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
}
-
- .extra-desc {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: row;
- margin: 250px 100px;
-
- .golang-icon {
- margin-bottom: 100px;
- }
-
- .self-compile {
- margin-top: 1.5em;
- }
-
- .docker-url {
- overflow: hidden;
- border-radius: 5px;
- font-size: 1.5rem;
- display: inline-flex;
- align-items: center;
- flex-direction: row;
- margin-bottom: 1.5em;
- background: var(--color-bg-grey);
- color: #67757f;
- white-space: nowrap;
-
- .content {
- padding: 15px 30px;
- }
-
- .copy-btn {
- display: flex;
- flex-direction: row;
- place-items: center;
- padding: 15px 25px;
- height: 100%;
- background: #00acd7;
- color: #fff;
- cursor: pointer;
-
- &.copied {
- background: #50b88e;
- }
- }
- }
- }
}
diff --git a/docs/landing/src/components/Features/Quick.tsx b/docs/landing/src/components/Features/Quick.tsx
new file mode 100644
index 000000000..df5925e4e
--- /dev/null
+++ b/docs/landing/src/components/Features/Quick.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import './Quick.scss'
+import { useTranslation } from 'react-i18next'
+import { FiArrowUpRight } from 'react-icons/fi'
+import { BlockBase } from '../FeatureComps/BlockBase'
+
+export const QuickFeature: React.FC = () => {
+ const { t } = useTranslation()
+
+ const ArrowIcon = (
+
+
+ )
+}
diff --git a/docs/landing/src/components/Features/QuickFeature.tsx b/docs/landing/src/components/Features/QuickFeature.tsx
deleted file mode 100644
index 2e7cc305f..000000000
--- a/docs/landing/src/components/Features/QuickFeature.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react'
-import './QuickFeature.scss'
-import { useTranslation } from 'react-i18next'
-import { FiArrowUpRight } from 'react-icons/fi'
-import { FeatureTitle } from '../FeatureTitle'
-import { LearnMoreLink } from '../LearnMoreLink'
-import { FeatureDesc } from '../FeatureDesc'
-import { Reveal } from '../Reveal'
-import { FeatureBase } from './FeatureBase'
-
-export const QuickFeature: React.FC = () => {
- const { t } = useTranslation()
-
- const ArrowIcon = (
-
-
- )
-}
diff --git a/docs/landing/src/components/Features/SafeFeature.scss b/docs/landing/src/components/Features/Safe.scss
similarity index 58%
rename from docs/landing/src/components/Features/SafeFeature.scss
rename to docs/landing/src/components/Features/Safe.scss
index b53911dd7..72971940f 100644
--- a/docs/landing/src/components/Features/SafeFeature.scss
+++ b/docs/landing/src/components/Features/Safe.scss
@@ -1,11 +1,41 @@
-.safe.feature {
+.m1 {
+ background: #9fbef9;
+ color: #133995;
+}
+
+.m2 {
+}
+
+.safe-feature {
+ background: #fef5d8;
+
+ & > .content {
+ flex-direction: row;
+ justify-content: space-around;
+
+ & > main {
+ flex-basis: 50%;
+ }
+
+ .feature-desc {
+ margin-left: auto;
+ margin-top: 20px;
+ margin-bottom: 0;
+ font-size: 1.5rem;
+ }
+
+ .app-learn-more-link {
+ font-size: 1.5rem;
+ }
+ }
+
main {
- margin-top: 80px;
+ margin-top: 20px;
}
.data-icon {
- margin: 80px 0;
- margin-left: 80px;
+ margin-left: 40px;
+ margin-top: 35px;
}
&.visible {
@@ -45,6 +75,6 @@
}
.report-audit {
- margin-top: 1.5em;
+ margin-top: 2em;
}
}
diff --git a/docs/landing/src/components/Features/SafeFeature.tsx b/docs/landing/src/components/Features/Safe.tsx
similarity index 88%
rename from docs/landing/src/components/Features/SafeFeature.tsx
rename to docs/landing/src/components/Features/Safe.tsx
index 50fd8bd70..f7ebbef08 100644
--- a/docs/landing/src/components/Features/SafeFeature.tsx
+++ b/docs/landing/src/components/Features/Safe.tsx
@@ -1,25 +1,25 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
-import './SafeFeature.scss'
-import { FeatureTitle } from '../FeatureTitle'
-import { FeatureDesc } from '../FeatureDesc'
+import './Safe.scss'
+import { Title } from '../FeatureComps/Title'
+import { Desc } from '../FeatureComps/Desc'
import { Reveal } from '../Reveal'
import { LearnMoreLink } from '../LearnMoreLink'
-import { FeatureBase } from './FeatureBase'
+import { BlockBase } from '../FeatureComps/BlockBase'
export const SafeFeature: React.FC = () => {
const { t } = useTranslation()
return (
-
-
+
-
+
{t('feature_safe_desc_line_1')}
@@ -62,9 +62,9 @@ export const SafeFeature: React.FC = () => { linkText={t('feature_safe_report_audit_btn')} />
-
+
-
+
)
}
diff --git a/docs/landing/src/components/Features/SlightFeature.scss b/docs/landing/src/components/Features/Slight.scss
similarity index 65%
rename from docs/landing/src/components/Features/SlightFeature.scss
rename to docs/landing/src/components/Features/Slight.scss
index 0dd204521..122849fc2 100644
--- a/docs/landing/src/components/Features/SlightFeature.scss
+++ b/docs/landing/src/components/Features/Slight.scss
@@ -1,15 +1,25 @@
-.feature.slight {
+.slight-feature {
+ background-color: #f1f8e9;
+ overflow: hidden;
+
+ &:hover .screenshot {
+ transform: translateY(-20px) scale(1.02);
+ }
+
+ .content {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ }
+
.progress-wrap {
width: 100%;
- margin-top: 80px;
- margin-bottom: 50px;
.progress {
- margin-bottom: 15px;
position: relative;
- height: 24px;
+ height: 22px;
width: 100%;
- background: var(--color-bg-grey);
+ background: var(--color-bg-transparent);
border-radius: 80px;
overflow: hidden;
@@ -23,6 +33,8 @@
}
.text {
+ margin-top: 10px;
+ margin-bottom: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -32,7 +44,6 @@
.size {
color: #77b255;
- font-weight: bold;
}
.percent {
@@ -41,6 +52,19 @@
}
}
+ .screenshot {
+ display: flex;
+ justify-content: center;
+ margin-top: 65px;
+ margin-bottom: -200px;
+ transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+
+ img {
+ width: 100%;
+ max-width: 500px;
+ }
+ }
+
&.visible {
.leaf-wrap {
@keyframes windAnim {
diff --git a/docs/landing/src/components/Features/Slight.tsx b/docs/landing/src/components/Features/Slight.tsx
new file mode 100644
index 000000000..851c8c00d
--- /dev/null
+++ b/docs/landing/src/components/Features/Slight.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Desc } from '../FeatureComps/Desc'
+import { BlockBase } from '../FeatureComps/BlockBase'
+import './Slight.scss'
+
+export const SlightFeature: React.FC = () => {
+ const [percent, setPercent] = useState(0)
+ const [visible, setVisible] = useState(false)
+ const { t } = useTranslation()
+
+ const onVisibleChange = (visible: boolean) => {
+ setVisible(visible)
+ if (visible) {
+ const fn = setInterval(() => {
+ setPercent((prev) => {
+ const next = Math.round(prev + 0.5)
+ if (next <= 100) {
+ return next
+ } else {
+ clearInterval(fn)
+ return 100
+ }
+ })
+ }, 40)
+ } else {
+ setPercent(0)
+ }
+ }
+
+ return (
+
+ {props.children}
+
+ )
+}
diff --git a/docs/landing/src/components/FeatureDesc.scss b/docs/landing/src/components/FeatureComps/Desc.scss
similarity index 100%
rename from docs/landing/src/components/FeatureDesc.scss
rename to docs/landing/src/components/FeatureComps/Desc.scss
diff --git a/docs/landing/src/components/FeatureDesc.tsx b/docs/landing/src/components/FeatureComps/Desc.tsx
similarity index 63%
rename from docs/landing/src/components/FeatureDesc.tsx
rename to docs/landing/src/components/FeatureComps/Desc.tsx
index 4f9727228..557ccd558 100644
--- a/docs/landing/src/components/FeatureDesc.tsx
+++ b/docs/landing/src/components/FeatureComps/Desc.tsx
@@ -1,6 +1,6 @@
-import './FeatureDesc.scss'
+import './Desc.scss'
-export const FeatureDesc: React.FC<{
+export const Desc: React.FC<{
children: React.ReactNode
}> = ({ children }) => {
return {children}
diff --git a/docs/landing/src/components/Features/FullFeatureIcon.tsx b/docs/landing/src/components/FeatureComps/FolderIcon.tsx
similarity index 100%
rename from docs/landing/src/components/Features/FullFeatureIcon.tsx
rename to docs/landing/src/components/FeatureComps/FolderIcon.tsx
diff --git a/docs/landing/src/components/FeatureComps/Group.scss b/docs/landing/src/components/FeatureComps/Group.scss
new file mode 100644
index 000000000..837808137
--- /dev/null
+++ b/docs/landing/src/components/FeatureComps/Group.scss
@@ -0,0 +1,11 @@
+.feature-group {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ column-gap: 64px;
+ row-gap: 40px;
+
+ &:not(:last-child) {
+ margin-bottom: 64px;
+ }
+}
diff --git a/docs/landing/src/components/FeatureComps/Group.tsx b/docs/landing/src/components/FeatureComps/Group.tsx
new file mode 100644
index 000000000..370822c5f
--- /dev/null
+++ b/docs/landing/src/components/FeatureComps/Group.tsx
@@ -0,0 +1,7 @@
+import './Group.scss'
+
+export const Group: React.FC<{
+ children: React.ReactNode
+}> = ({ children }) => {
+ return {children}
+}
diff --git a/docs/landing/src/components/FeatureTitle.scss b/docs/landing/src/components/FeatureComps/Title.scss
similarity index 100%
rename from docs/landing/src/components/FeatureTitle.scss
rename to docs/landing/src/components/FeatureComps/Title.scss
diff --git a/docs/landing/src/components/FeatureComps/Title.tsx b/docs/landing/src/components/FeatureComps/Title.tsx
new file mode 100644
index 000000000..8447e25d0
--- /dev/null
+++ b/docs/landing/src/components/FeatureComps/Title.tsx
@@ -0,0 +1,18 @@
+import './Title.scss'
+import { Reveal } from '../Reveal'
+
+interface TitleProps {
+ text: string
+ color: string
+}
+
+export const Title: React.FC
+ {props.text.slice(0, 1)}
+ {props.text.slice(1, props.text.length)}
+
+
- {props.text.slice(0, 1)}
- {props.text.slice(1, props.text.length)}
-
-
+
+ )
+}
diff --git a/docs/landing/src/components/Features/FullFeature.scss b/docs/landing/src/components/Features/Full.scss
similarity index 77%
rename from docs/landing/src/components/Features/FullFeature.scss
rename to docs/landing/src/components/Features/Full.scss
index 0305ff538..dc68da601 100644
--- a/docs/landing/src/components/Features/FullFeature.scss
+++ b/docs/landing/src/components/Features/Full.scss
@@ -1,6 +1,11 @@
-.full.feature {
+.full-feature {
+ margin-top: 120px;
+ padding-top: 100px;
+ padding-bottom: 50px;
+ margin-bottom: 100px;
+
.func-list {
- margin: 100px 0;
+ margin-top: 30px;
.row {
display: flex;
@@ -20,7 +25,6 @@
margin: 0 15px;
flex: 1;
border-radius: 20px;
- border: 3px solid var(--color-border);
background: var(--color-bg);
padding: 40px 50px;
transition: transform 200ms cubic-bezier(0.75, 0.25, 0.25, 0.75);
@@ -35,11 +39,22 @@
place-items: center;
margin-bottom: 20px;
+ .icon-wrap {
+ display: flex;
+ place-items: center;
+ justify-content: center;
+ height: 50px;
+ width: 50px;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.04);
+ margin-right: 25px;
+ }
+
svg {
- margin-right: 0.5em;
}
.text {
+ flex: 1;
font-weight: bold;
}
}
diff --git a/docs/landing/src/components/Features/Full.tsx b/docs/landing/src/components/Features/Full.tsx
new file mode 100644
index 000000000..9acfe617f
--- /dev/null
+++ b/docs/landing/src/components/Features/Full.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import './Full.scss'
+import { Title } from '../FeatureComps/Title'
+import { Desc } from '../FeatureComps/Desc'
+import { Reveal } from '../Reveal'
+import { Base } from '../FeatureComps/Base'
+import { FolderIcon } from '../FeatureComps/FolderIcon'
+import { FullList } from './FullList'
+
+export const FullFeature: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+
+ {t('use_artalk_with')}
+
+ {activeIndex == -1 ? t('any_website_or_blog') : techs[activeIndex].name}
+
+
+ {techs.map((tech, i) => (
+ onMouseOver(i)}
+ onMouseOut={() => onMouseOut()}
+ >
+ ))}
+
+
+
+ )
+}
diff --git a/docs/landing/src/components/Features/FullFeature.tsx b/docs/landing/src/components/Features/FullFeature.tsx
deleted file mode 100644
index 17b29f51a..000000000
--- a/docs/landing/src/components/Features/FullFeature.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import './FullFeature.scss'
-import { FeatureTitle } from '../FeatureTitle'
-import { FeatureDesc } from '../FeatureDesc'
-import { Reveal } from '../Reveal'
-import { FeatureBase } from './FeatureBase'
-import { FolderIcon } from './FullFeatureIcon'
-import { FullFeatureList } from './FullFeatureList'
-
-export const FullFeature: React.FC = () => {
- const { t } = useTranslation()
-
- return (
-
+
+
+
+
+
+
-
-
-
-
-
-
-
- {t('feature_full_desc_line_1')}
-
-
-
-
+
{item.name}
diff --git a/docs/landing/src/components/Features/FuncFeature.scss b/docs/landing/src/components/Features/Funcs.scss
similarity index 98%
rename from docs/landing/src/components/Features/FuncFeature.scss
rename to docs/landing/src/components/Features/Funcs.scss
index 76e95d7aa..371ebeb9f 100644
--- a/docs/landing/src/components/Features/FuncFeature.scss
+++ b/docs/landing/src/components/Features/Funcs.scss
@@ -1,4 +1,4 @@
-.func.feature {
+.funcs-feature {
.content .ship-icon {
margin: 0 80px;
margin-top: -70px;
diff --git a/docs/landing/src/components/Features/FuncFeature.tsx b/docs/landing/src/components/Features/Funcs.tsx
similarity index 94%
rename from docs/landing/src/components/Features/FuncFeature.tsx
rename to docs/landing/src/components/Features/Funcs.tsx
index c7d989a45..61f85f26e 100644
--- a/docs/landing/src/components/Features/FuncFeature.tsx
+++ b/docs/landing/src/components/Features/Funcs.tsx
@@ -1,13 +1,13 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
-import './FuncFeature.scss'
+import './Funcs.scss'
import { FaArrowRight } from 'react-icons/fa'
-import { FeatureTitle } from '../FeatureTitle'
-import { FeatureDesc } from '../FeatureDesc'
+import { Title } from '../FeatureComps/Title'
+import { Desc } from '../FeatureComps/Desc'
import { Reveal } from '../Reveal'
-import { FeatureBase } from './FeatureBase'
+import { Base } from '../FeatureComps/Base'
-export const FuncFeature: React.FC = () => {
+export const FuncsFeature: React.FC = () => {
const { t } = useTranslation()
const FuncGrps: { name: string; items: string[]; link?: string }[] = [
@@ -122,13 +122,13 @@ export const FuncFeature: React.FC = () => {
]
return (
-
-
- {t('feature_func_desc_line_1')}
+ {t('feature_func_desc_line_1')}
))}
-
+
)
}
diff --git a/docs/landing/src/components/Features/GreyCards.scss b/docs/landing/src/components/Features/GreyCards.scss
new file mode 100644
index 000000000..fb963ac2b
--- /dev/null
+++ b/docs/landing/src/components/Features/GreyCards.scss
@@ -0,0 +1,173 @@
+.grey-cards-feature {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-bottom: 140px;
+
+ & > .section {
+ flex: 1;
+ height: 560px;
+ border-radius: 24px;
+ display: flex;
+ flex-direction: column;
+ background: var(--color-bg-grey-deep);
+ padding: 40px;
+ overflow: hidden;
+
+ .section-title {
+ font-size: 22px;
+ margin-bottom: 25px;
+ }
+
+ .section-desc {
+ font-size: 20px;
+ color: #919191;
+ margin-bottom: 40px;
+ }
+
+ .section-learn-more {
+ color: #0066cc;
+ display: inline-flex;
+ gap: 10px;
+ font-size: 20px;
+ align-items: center;
+ cursor: pointer;
+ width: max-content;
+ border-radius: 100px;
+ transition: all 0.3s;
+ padding: 10px 0;
+
+ &:hover {
+ padding: 10px 18px;
+ background: var(--color-primary);
+ color: #fff;
+ }
+
+ svg {
+ font-size: 1.2em;
+ margin-right: -8px;
+ }
+ }
+ }
+
+ .window {
+ position: relative;
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+ border: 1px solid var(--color-border-light);
+ background: var(--color-bg);
+ border-radius: 16px;
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ gap: 12px;
+ width: 100%;
+
+ &.text-window {
+ width: calc(100% + 70px);
+ }
+
+ &.terminal-window {
+ width: calc(100% + 70px);
+ margin-top: 25px;
+ }
+
+ .text-row {
+ overflow: hidden;
+ padding: 12px 24px;
+ white-space: nowrap;
+ border-radius: 8px;
+ background: #efefef;
+ color: var(--color-font);
+
+ &:nth-child(2) {
+ background: #ecf2ff;
+ color: #053dcc;
+ }
+
+ &:nth-child(3) {
+ background: #fff5ee;
+ color: #f97709;
+ }
+
+ &:nth-child(4) {
+ background: #e9fbfa;
+ color: #108163;
+ }
+
+ &:nth-child(5) {
+ background: #feecf8;
+ color: #ba006b;
+ }
+ }
+
+ .menubar {
+ display: flex;
+ gap: 10px;
+ margin: 0 5px;
+
+ & > div {
+ display: block;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: 1px solid transparent;
+
+ &:hover {
+ cursor: pointer;
+ opacity: 0.8;
+ }
+ }
+
+ .close {
+ background: #fb4646;
+ border-color: #ea383a;
+ }
+
+ .minimize {
+ background: #fdb125;
+ border-color: #e8a430;
+ }
+
+ .zoom {
+ background: #29c332;
+ border-color: #36b537;
+ }
+ }
+
+ .docker-icon {
+ position: absolute;
+ top: -70px;
+ right: 50px;
+ width: 120px;
+ height: 120px;
+
+ img {
+ user-select: none;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .window-body {
+ padding: 10px 10px;
+
+ .cmd-row {
+ display: flex;
+ gap: 10px;
+ padding: 10px 0;
+ font-size: 18px;
+
+ .prompt {
+ user-select: none;
+ color: #919191;
+ }
+ }
+ }
+ }
+
+ .screenshot {
+ width: calc(100% + 100px);
+ border-radius: 16px;
+ }
+}
diff --git a/docs/landing/src/components/Features/GreyCards.tsx b/docs/landing/src/components/Features/GreyCards.tsx
new file mode 100644
index 000000000..43f6d488d
--- /dev/null
+++ b/docs/landing/src/components/Features/GreyCards.tsx
@@ -0,0 +1,80 @@
+import { FiArrowUpRight } from 'react-icons/fi'
+import { useTranslation } from 'react-i18next'
+import './GreyCards.scss'
+import LazyImage from '../LazyImage'
+
+export const GreyCardsFeature: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+
+ )
+}
diff --git a/docs/landing/src/components/Features/Plugins.scss b/docs/landing/src/components/Features/Plugins.scss
new file mode 100644
index 000000000..a3cdffb54
--- /dev/null
+++ b/docs/landing/src/components/Features/Plugins.scss
@@ -0,0 +1,91 @@
+.plugins-feature {
+ background-color: #174ea6;
+ position: relative;
+ overflow: hidden;
+ background-image: url(/images/plugins-bg.jpg);
+ background-size: cover;
+
+ @keyframes plugin-icon-anim {
+ 0% {
+ opacity: 0;
+ transform: scale(0.5) translateZ(-100px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) rotate(0deg);
+ }
+ }
+
+ .feature-desc {
+ color: #fff;
+ }
+
+ &.visible .left-right {
+ .stamps svg {
+ animation: plugin-icon-anim 0.5s ease forwards;
+ }
+ }
+
+ .left-right {
+ gap: 50px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ main {
+ flex: 40%;
+ }
+
+ aside {
+ flex: 60%;
+ }
+
+ .stamps {
+ pointer-events: none;
+ margin-top: 40px;
+ display: flex;
+ flex-direction: column;
+
+ svg {
+ font-size: 36px;
+ color: #acccff;
+ opacity: 0;
+ transition:
+ opacity 0.5s ease,
+ transform 0.5s ease;
+
+ &:nth-child(1) {
+ animation-delay: 0.1s;
+ }
+
+ &:nth-child(2) {
+ animation-delay: 0.2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.3s;
+ }
+
+ &:nth-child(4) {
+ animation-delay: 0.4s;
+ }
+
+ &:not(:last-child) {
+ margin-right: 50px;
+ }
+ }
+
+ .row:not(:last-child) {
+ margin-bottom: 20px;
+ }
+
+ .row:nth-child(odd) {
+ margin-left: -50px;
+ }
+
+ .row:nth-child(even) {
+ margin-right: 50px;
+ }
+ }
+ }
+}
diff --git a/docs/landing/src/components/Features/Plugins.tsx b/docs/landing/src/components/Features/Plugins.tsx
new file mode 100644
index 000000000..0a5efbcbe
--- /dev/null
+++ b/docs/landing/src/components/Features/Plugins.tsx
@@ -0,0 +1,61 @@
+import { PiMoonFill, PiSmileyWinkBold } from 'react-icons/pi'
+import { useTranslation } from 'react-i18next'
+import './Plugins.scss'
+import {
+ TbCardsFilled,
+ TbLayoutSidebarRightExpandFilled,
+ TbMailFilled,
+ TbPlug,
+ TbSocial,
+ TbTerminal,
+ TbTransformFilled,
+} from 'react-icons/tb'
+import { BiSolidBadgeCheck } from 'react-icons/bi'
+import { LuNewspaper } from 'react-icons/lu'
+import { FaArrowTrendUp } from 'react-icons/fa6'
+import { FaMarkdown } from 'react-icons/fa'
+import { RiRobot2Fill } from 'react-icons/ri'
+import { BlockBase } from '../FeatureComps/BlockBase'
+
+export const Plugins: React.FC = () => {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+ {t('concept_section_locales_title')}
+ {t('concept_section_locales_desc')}
+
+
+
+ Artalk Self-hosted Comment System
+ Artalk 自托管评论系统
+ Artalk Auto-hébergé Commentaire Système
+ Artalk セルフホスティング コメント システム
+ Artalk 셀프 호스팅 댓글 시스템
+ Artalk Cамохостинг Комментарий Система
+
+
+
+ {t('concept_section_docker_title')}
+
+ {t('concept_section_docker_desc_line_1')}
+
+
+ {t('concept_section_docker_desc_line_2')} +
+
+ {t('learn_more')}
+ +
+ {t('concept_section_docker_desc_line_2')} +
+
+
+
+
+
+
+
+
+
+
+
+
+ $
+ docker pull artalk/artalk
+
+
+ $
+ docker run -d -p 8080:23366 artalk/artalk
+
+
+ {t('concept_section_open_source_title')}
+
+ {t('concept_section_open_source_desc_line_1')}
+
+
+ {t('concept_section_open_source_desc_line_2', { year: new Date().getFullYear() - 2018 })} +
+ +
+ {t('concept_section_open_source_desc_line_2', { year: new Date().getFullYear() - 2018 })} +
+ {t('feature_community_title')}
+
+
+
+
+
+
+
+ {t('feature_community_desc')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+ return (
+
+ {t('feature_swift_title')}
+
+
+
+
+
+
+
+
-
-
- )
-
- const [isCopied, setIsCopied] = React.useState(false)
-
- let copiedResetTimer: any
-
- const copyDockerURLHandler = (e: React.MouseEvent) => {
- e.preventDefault()
- clearTimeout(copiedResetTimer)
- setIsCopied(false)
-
- const dockerURL = 'docker pull artalk/artalk-go'
- if (!navigator.clipboard.writeText) {
- alert('Browser does not support clipboard API')
- return
- }
-
- navigator.clipboard.writeText(dockerURL)
- setIsCopied(true)
-
- copiedResetTimer = setTimeout(() => {
- setIsCopied(false)
- }, 2000)
- }
-
- return (
-
-
-
-
-
-
-
-
- {/* Golang Description */}
-
-
-
-
-
-
-
-
- {t('feature_swift_desc_line_1')}
-
- {t('feature_swift_desc_line_2')} -
-
-
-
-
- - {t('feature_swift_desc_line_2')} -
-
docker pull artalk/artalk-go
-
- {isCopied ? t('copied') : t('copy')}
-
-
-
-
-
-
-
- @@ -62,9 +62,9 @@ export const SafeFeature: React.FC = () => { linkText={t('feature_safe_report_audit_btn')} />
+ {t('feature_slight_title')}
+
+
+
+
+
+ {t('feature_slight_desc_line_1')}
+ {t('feature_slight_desc_line_2')}
+
+
+
-
+
+
+ )
+}
diff --git a/docs/landing/src/components/Features/SlightFeature.tsx b/docs/landing/src/components/Features/SlightFeature.tsx
deleted file mode 100644
index 5848ff841..000000000
--- a/docs/landing/src/components/Features/SlightFeature.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FeatureTitle } from '../FeatureTitle'
-import { Reveal } from '../Reveal'
-import { FeatureDesc } from '../FeatureDesc'
-import { FeatureBase } from './FeatureBase'
-import './SlightFeature.scss'
-
-export const SlightFeature: React.FC = () => {
- const [percent, setPercent] = useState(0)
- const [visible, setVisible] = useState(false)
- const { t } = useTranslation()
-
- const onVisibleChange = (visible: boolean) => {
- setVisible(visible)
- if (visible) {
- const fn = setInterval(() => {
- setPercent((prev) => {
- const next = Math.round(prev + 0.5)
- if (next <= 100) {
- return next
- } else {
- clearInterval(fn)
- return 100
- }
- })
- }, 40)
- } else {
- setPercent(0)
- }
- }
-
- return (
-
+
+ 40KB
+ {percent}%
+
+
+
+ = 100 || visible ? 100 : 0}%` }} />
+
+
+ 
+
+
+
-
-
+
+
+ )
+}
diff --git a/docs/landing/src/components/Features/StartCards.scss b/docs/landing/src/components/Features/StartCards.scss
new file mode 100644
index 000000000..b5f6baa99
--- /dev/null
+++ b/docs/landing/src/components/Features/StartCards.scss
@@ -0,0 +1,168 @@
+.start-feature {
+ @keyframes card-1-anim {
+ from {
+ }
+
+ to {
+ transform: rotate(20deg) translateX(-20px);
+ }
+ }
+
+ @keyframes card-2-anim {
+ from {
+ }
+
+ to {
+ transform: rotate(-2deg) translateY(-10px) translateX(20px);
+ }
+ }
+
+ @keyframes card-3-anim {
+ from {
+ }
+
+ to {
+ transform: rotate(7deg) translateX(-50px);
+ }
+ }
+
+ @keyframes card-4-anim {
+ from {
+ }
+
+ to {
+ transform: rotate(-5deg) translateX(40px);
+ }
+ }
+
+ &.visible {
+ .start-cards .card {
+ &:nth-child(1) {
+ animation: card-1-anim 0.8s ease-in-out forwards;
+ }
+
+ &:nth-child(2) {
+ animation: card-2-anim 0.8s ease-in-out forwards;
+ }
+
+ &:nth-child(3) {
+ animation: card-3-anim 0.8s ease-in-out forwards;
+ }
+
+ &:nth-child(4) {
+ animation: card-4-anim 0.8s ease-in-out forwards;
+ }
+ }
+ }
+}
+
+.start-cards {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+ .card {
+ background: var(--color-bg);
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+ border: 1px solid var(--color-border-light);
+ border-radius: 19px;
+ padding: 20px 30px;
+ width: 290px;
+ height: 175px;
+ font-size: 26px;
+
+ &:nth-child(1) {
+ transform: rotate(10deg) translateY(-20px);
+ z-index: 3;
+ }
+
+ &:nth-child(2) {
+ transform: rotate(-15deg) translateY(-10px) translateX(20px);
+ z-index: 2;
+ }
+
+ &:nth-child(3) {
+ z-index: 1;
+ transform: rotate(15deg) translateY(-40px);
+ }
+
+ &:nth-child(4) {
+ transform: rotate(2deg) translateX(-2px) translateY(20px);
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 16px;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ background: var(--color-border-light);
+ border-radius: 50%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+
+ &.loaded {
+ opacity: 1;
+ }
+ }
+ }
+
+ .username {
+ }
+ }
+
+ .content {
+ }
+
+ .placeholder {
+ padding: 10px 0;
+
+ .text-row {
+ width: 100%;
+ height: 20px;
+ background: rgba(217, 217, 217, 0.45);
+ border-radius: 100px;
+ margin-bottom: 20px;
+
+ &:nth-child(2) {
+ width: 80%;
+ }
+ }
+
+ .submit-button {
+ margin-left: auto;
+ padding: 5px 14px;
+ height: 30px;
+ width: 100px;
+ border-radius: 8px;
+ margin-top: 35px;
+ margin-right: -15px;
+ background: var(--color-primary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ .text {
+ border-radius: 100px;
+ opacity: 0.3;
+ background: var(--color-bg);
+ width: 100%;
+ height: 10px;
+ }
+ }
+ }
+ }
+}
diff --git a/docs/landing/src/components/Features/StartCards.tsx b/docs/landing/src/components/Features/StartCards.tsx
new file mode 100644
index 000000000..8cbf3a783
--- /dev/null
+++ b/docs/landing/src/components/Features/StartCards.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import LazyImage from '../LazyImage'
+import './StartCards.scss'
+
+interface ICard {
+ username: string
+ avatar: string
+ text: string
+}
+
+export const StartCards: React.FC = () => {
+ const { t } = useTranslation()
+ const [cards, setCards] = useState([])
+
+ useEffect(() => {
+ setCards([
+ {
+ username: t('intro_stack_card_1_name'),
+ avatar: '/images/avatar-1.webp',
+ text: t('intro_stack_card_1_text'),
+ },
+ {
+ username: t('intro_stack_card_2_name'),
+ avatar: '/images/avatar-2.webp',
+ text: t('intro_stack_card_2_text'),
+ },
+ {
+ username: t('intro_stack_card_3_name'),
+ avatar: '/images/avatar-3.webp',
+ text: t('intro_stack_card_3_text'),
+ },
+ {
+ username: '',
+ avatar: '',
+ text: '',
+ },
+ ])
+ }, [t, setCards])
+
+ return (
+ ([])
+ const [currentScreenshots, setCurrentScreenshots] = useState([])
+
+ const [dots, setDots] = useState<{ percent: number; active: boolean }[]>(
+ new Array(12).fill(0).map(() => ({ percent: 0, active: false })),
+ )
+ const [currentIndex, setCurrentIndex] = useState(0)
+ const [currentPercent, setCurrentPercent] = useState(0)
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setDots((prevDots) =>
+ prevDots.map((_, i) => ({
+ percent: i === currentIndex ? currentPercent : 0,
+ active: i === currentIndex,
+ })),
+ )
+
+ setCurrentPercent((p) => {
+ if (p < 100) return p + 1
+ setCurrentIndex((index) => (index + 1) % dots.length)
+ return 0
+ })
+ }, 80)
+
+ return () => clearInterval(interval)
+ }, [dots.length, currentIndex, currentPercent])
+
+ const perPage = 2
+
+ const refreshFeatures = useCallback(() => {
+ const newFeatures: IFeature[] = allFeatures
+ .slice(
+ (currentIndex * perPage) % allFeatures.length,
+ (currentIndex * perPage + 2) % allFeatures.length,
+ )
+ .map((feature, index) => ({
+ ...feature,
+ active: false,
+ bgColor: colors[(currentIndex * perPage + index) % colors.length].bgColor,
+ textColor: colors[(currentIndex * perPage + index) % colors.length].textColor,
+ }))
+
+ if (currentPercent < 50) {
+ if (newFeatures[0]) newFeatures[0].active = true
+ if (newFeatures[1]) newFeatures[1].active = false
+ } else {
+ if (newFeatures[0]) newFeatures[0].active = false
+ if (newFeatures[1]) newFeatures[1].active = true
+ }
+
+ setCurrentFeatures(newFeatures)
+ }, [currentIndex, currentPercent, allFeatures])
+
+ useEffect(() => {
+ const start = (currentIndex * perPage) % allScreenshots.length
+ let end = (currentIndex * perPage + 2) % allScreenshots.length
+ if (start > end) end = allScreenshots.length
+ const newScreenshots = allScreenshots.slice(start, end)
+ setCurrentScreenshots(newScreenshots)
+ }, [currentIndex])
+
+ useEffect(() => {
+ if (![0, 50].includes(currentPercent)) return
+ refreshFeatures()
+ }, [currentIndex, currentPercent, refreshFeatures])
+
+ useEffect(() => {
+ refreshFeatures()
+ }, [allFeatures, refreshFeatures])
+
+ const switchPage = useCallback(
+ (index: number) => {
+ setCurrentIndex(index)
+ setCurrentPercent(0)
+ },
+ [setCurrentIndex, setCurrentPercent],
+ )
+
+ return (
+
-
-
- {t('feature_slight_desc_line_1')}
-
- {t('feature_slight_desc_line_2')} -
-
-
-
-
-
-
- )
-}
diff --git a/docs/landing/src/components/Features/Start.scss b/docs/landing/src/components/Features/Start.scss
new file mode 100644
index 000000000..8b176c4ae
--- /dev/null
+++ b/docs/landing/src/components/Features/Start.scss
@@ -0,0 +1,13 @@
+.start-feature {
+ padding: 40px 0;
+ display: flex;
+ padding-bottom: 100px;
+
+ & > main {
+ flex: 70%;
+ }
+
+ & > aside {
+ flex: 30%;
+ }
+}
diff --git a/docs/landing/src/components/Features/Start.tsx b/docs/landing/src/components/Features/Start.tsx
new file mode 100644
index 000000000..3354053ea
--- /dev/null
+++ b/docs/landing/src/components/Features/Start.tsx
@@ -0,0 +1,18 @@
+import './Start.scss'
+import { Base } from '../FeatureComps/Base'
+import { StartCarousel } from './StartCarousel'
+import { StartCards } from './StartCards'
+
+export const StartFeature: React.FC = () => {
+ return (
+
-
-
- = 100 || visible ? 100 : 0}%` }} />
-
-
-
- 40KB
- {percent}%
- - {t('feature_slight_desc_line_2')} -
+ {cards.map((card, index) => (
+
+ )
+}
diff --git a/docs/landing/src/components/Features/StartCarousel.scss b/docs/landing/src/components/Features/StartCarousel.scss
new file mode 100644
index 000000000..c8782ae47
--- /dev/null
+++ b/docs/landing/src/components/Features/StartCarousel.scss
@@ -0,0 +1,147 @@
+.start-carousel {
+ $cardRadius: 24px;
+
+ .card {
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+ border: 1px solid var(--color-border-light);
+ background: var(--color-bg);
+ }
+
+ .feature-cards {
+ display: flex;
+ flex-direction: column;
+
+ .feature-item {
+ color: var(--color-font-primary);
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ margin-bottom: 20px;
+ border-radius: $cardRadius;
+ padding: 40px 50px;
+ cursor: pointer;
+ transition: box-shadow 0.3s ease;
+
+ &.active {
+ @extend .card;
+ }
+
+ &:hover {
+ .action .arrow-btn {
+ transform: rotate(0);
+ background: var(--color-primary);
+ color: #fff;
+ }
+ }
+
+ .icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 70px;
+ width: 70px;
+ border-radius: 50%;
+ background: #9fbef9;
+ color: #133995;
+ margin-right: 20px;
+ font-size: 32px;
+ }
+
+ .main {
+ flex: 1;
+
+ .title {
+ font-size: 32px;
+ font-weight: 500;
+ }
+
+ .desc {
+ margin-top: 10px;
+ font-size: 23px;
+ color: var(--color-font-secondary);
+ }
+ }
+
+ .action {
+ .arrow-btn {
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ background: #ebf5fe;
+ color: #007bff;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ }
+
+ .progress-indicator {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 10px;
+ margin-bottom: 30px;
+
+ .dots {
+ background: var(--color-bg-grey-deep);
+ padding: 10px 15px;
+ border-radius: 100px;
+ display: flex;
+ gap: 10px;
+
+ .dot {
+ overflow: hidden;
+ width: 10px;
+ height: 10px;
+ border-radius: 100px;
+ background: var(--color-border);
+ transition:
+ width 0.8s ease,
+ transform 0.3s ease;
+ cursor: pointer;
+
+ &.active {
+ width: 60px;
+ }
+
+ &:hover {
+ filter: opacity(0.8);
+ transform: scale(1.1);
+ }
+
+ .progress {
+ transition: all 0.2s ease;
+ height: 100%;
+ background: var(--color-font-secondary);
+ }
+ }
+ }
+ }
+
+ .screenshot-group {
+ @extend .card;
+ display: flex;
+ flex-direction: row;
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+ gap: 16px;
+ padding: 20px;
+ border-radius: $cardRadius;
+
+ .screenshot {
+ flex: 1;
+ min-height: 320px;
+
+ img {
+ border-radius: 11px;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ }
+}
diff --git a/docs/landing/src/components/Features/StartCarousel.tsx b/docs/landing/src/components/Features/StartCarousel.tsx
new file mode 100644
index 000000000..675fd9e95
--- /dev/null
+++ b/docs/landing/src/components/Features/StartCarousel.tsx
@@ -0,0 +1,227 @@
+import { useTranslation } from 'react-i18next'
+import { FiArrowUpRight } from 'react-icons/fi'
+import { useCallback, useEffect, useState } from 'react'
+import LazyImage from '../LazyImage'
+import { getFeatures } from '../../features'
+import './StartCarousel.scss'
+
+interface IFeature {
+ name: string
+ desc: string
+ icon: React.FC
+ link: string
+ active: boolean
+ bgColor: string
+ textColor: string
+}
+
+const allScreenshots = [
+ '/images/screenshots/1.webp',
+ '/images/screenshots/2.webp',
+ '/images/screenshots/3.webp',
+ '/images/screenshots/4.webp',
+ '/images/screenshots/5.webp',
+ '/images/screenshots/6.webp',
+ '/images/screenshots/7.webp',
+ '/images/screenshots/8.webp',
+]
+
+const colors = [
+ // Teal
+ {
+ bgColor: '#B2DFDB',
+ textColor: '#004D40',
+ },
+ // Blue
+ {
+ bgColor: '#BBDEFB',
+ textColor: '#0D47A1',
+ },
+ // Green
+ {
+ bgColor: '#C8E6C9',
+ textColor: '#388E3C',
+ },
+ // Cyan
+ {
+ bgColor: '#E0F7FA',
+ textColor: '#006064',
+ },
+ // Purple
+ {
+ bgColor: '#D1C4E9',
+ textColor: '#512DA8',
+ },
+ // Orange
+ {
+ bgColor: '#FFCCBC',
+ textColor: '#E64A19',
+ },
+ // Red
+ {
+ bgColor: '#FFC1C1',
+ textColor: '#C62828',
+ },
+ // Yellow
+ {
+ bgColor: '#FFF59D',
+ textColor: '#F57F17',
+ },
+ // Pink
+ {
+ bgColor: '#F8BBD0',
+ textColor: '#C2185B',
+ },
+ // Lime
+ {
+ bgColor: '#E6EE9C',
+ textColor: '#827717',
+ },
+]
+
+export const StartCarousel = () => {
+ const { t } = useTranslation()
+
+ const [allFeatures, setAllFeatures] = useState<
+ {
+ icon: React.FC
+ name: string
+ desc: string
+ link: string
+ }[]
+ >([])
+
+ useEffect(() => {
+ setAllFeatures(getFeatures(t))
+ }, [t])
+
+ const [currentFeatures, setCurrentFeatures] = useState
+ {card.username && (
+
+ ))}
+
+
+ )}
+ {card.text &&
+
+ {card.username}
+ {card.text}
}
+ {!card.username && (
+
+
+
+
+ )}
+
+
+
+
+
+ )
+}
diff --git a/docs/landing/src/components/Footer.scss b/docs/landing/src/components/Footer.scss
index a8c41f92e..31c5e761e 100644
--- a/docs/landing/src/components/Footer.scss
+++ b/docs/landing/src/components/Footer.scss
@@ -1,14 +1,15 @@
.app-footer {
- margin: 80px auto;
- padding-top: 50px;
+ margin: 0 auto;
+ margin-top: 80px;
+ padding-bottom: 80px;
+ padding-top: 100px;
text-align: center;
- border-top: 1px solid var(--color-border);
- font-size: 1.5rem;
+ font-size: 20px;
.brand {
- color: var(--color-primary);
+ color: var(--color-font);
font-weight: 700;
- font-size: 1.5em;
+ font-size: 24px;
}
.copyright {
@@ -19,3 +20,47 @@
}
}
}
+
+.footer-see-more-link {
+ border-top: 1px solid var(--color-border);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 100px;
+ padding-top: 80px;
+
+ .link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--color-font);
+ background: var(--color-bg-grey-deep);
+ padding: 12px;
+ border-radius: 100px;
+ font-size: 18px;
+
+ .text {
+ padding: 0 20px;
+ }
+
+ .icon {
+ height: 35px;
+ width: 35px;
+ background-color: var(--color-primary);
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ font-size: 20px;
+ }
+ }
+
+ .star-proposal {
+ margin-top: 25px;
+ text-align: center;
+ font-size: 14px;
+ line-height: 2;
+ }
+}
diff --git a/docs/landing/src/components/Footer.tsx b/docs/landing/src/components/Footer.tsx
index 2f5e8063e..853d9709f 100644
--- a/docs/landing/src/components/Footer.tsx
+++ b/docs/landing/src/components/Footer.tsx
@@ -1,13 +1,41 @@
import React from 'react'
import './Footer.scss'
+import { RiArrowRightSLine } from 'react-icons/ri'
+import { useTranslation } from 'react-i18next'
export const Footer: React.FC = () => {
+ const { t } = useTranslation()
+
return (
-
+ {currentFeatures.map((item) => (
+
+
+
+
+
+
+
+ {item.name}
+ {item.desc}
+
+
+
+ ))}
+
+
+
+
+
+
+ {dots.map((dot, index) => (
+
+ switchPage(index)}
+ >
+
+
+ ))}
+
+ {currentScreenshots.map((screenshot, i) => (
+
+
+
+ ))}
+
- > = ({
+ src,
+ alt,
+ className = '',
+ ...props
+}) => {
+ const imageRef = useRef(null)
+
+ useEffect(() => {
+ if (!lazyLoadInstance) {
+ lazyLoadInstance = new LazyLoad({
+ elements_selector: '.lazyload',
+ threshold: 0,
+ })
+ }
+ lazyLoadInstance.update()
+ }, [src])
+
+ return (
+ ![{alt}]()
+ )
+}
+
+export default LazyImage
diff --git a/docs/landing/src/components/Slogan.scss b/docs/landing/src/components/Slogan.scss
index c0054719f..fbc18c408 100644
--- a/docs/landing/src/components/Slogan.scss
+++ b/docs/landing/src/components/Slogan.scss
@@ -34,11 +34,12 @@
.text {
margin-top: 50px;
- line-height: 1.5;
- font-size: 4rem;
+ line-height: 1.7;
+ font-size: 2.6rem;
font-weight: 700;
.highlight {
+ font-size: 3.4rem;
overflow: hidden;
position: relative;
color: var(--color-primary);
@@ -80,22 +81,23 @@
place-items: center;
min-width: 140px;
padding: 0 25px;
- height: 55px;
+ height: 50px;
text-align: center;
border-radius: 100px;
border: 3px solid transparent;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
- color: var(--color-font);
+ background: #ebf5fe;
+ color: var(--color-primary);
&:not(:last-child) {
margin-right: 15px;
}
&.blue {
- border-color: var(--color-primary);
- color: var(--color-primary);
+ background: var(--color-primary);
+ color: #fff;
&:hover {
opacity: 0.9;
diff --git a/docs/landing/src/components/Slogan.tsx b/docs/landing/src/components/Slogan.tsx
index 1da8ac743..a17554940 100644
--- a/docs/landing/src/components/Slogan.tsx
+++ b/docs/landing/src/components/Slogan.tsx
@@ -54,7 +54,7 @@ export const Slogan: React.FC = () => {
{t('slogan_line_1')}
-
+ */}
diff --git a/docs/landing/src/darkmode.scss b/docs/landing/src/darkmode.scss
index 846a0bb43..21c10c9c8 100644
--- a/docs/landing/src/darkmode.scss
+++ b/docs/landing/src/darkmode.scss
@@ -5,6 +5,22 @@
--color-bg: #22272e;
--color-bg-transparent: rgba(34, 39, 46, 0.9);
--color-bg-grey: #2d333b;
+ --color-bg-grey-deep: #2d333b;
--color-bg-blue: #aabcd7;
--color-border: #444c56;
+ --color-border-light: #444c56;
+
+ .slogan .btns .btn {
+ background: var(--color-bg);
+ color: #fff;
+ }
+
+ .grey-cards-feature .window .text-row {
+ color: #000;
+ filter: invert(1);
+ }
+
+ .feature-block {
+ background-color: var(--color-bg-grey) !important;
+ }
}
diff --git a/docs/landing/src/i18n/en.ts b/docs/landing/src/i18n/en.ts
index e25217b5d..f728a10b8 100644
--- a/docs/landing/src/i18n/en.ts
+++ b/docs/landing/src/i18n/en.ts
@@ -143,4 +143,30 @@ export const en = {
feature_api_documentation_desc: 'Provides OpenAPI format documentation',
feature_program_upgrade_name: 'Program Upgrade',
feature_program_upgrade_desc: 'Version check, one-click upgrade',
+ intro_stack_card_1_name: 'Alice',
+ intro_stack_card_1_text: 'Hello, how are you',
+ intro_stack_card_2_name: 'Bob',
+ intro_stack_card_2_text: "Hi, what's up?",
+ intro_stack_card_3_name: 'Cook',
+ intro_stack_card_3_text: 'Good morning',
+ concept_section_locales_title: 'Localized Multiple languages',
+ concept_section_locales_desc: 'English, Chinese, French, Japanese, Korean, Russian, and more.',
+ concept_section_docker_title: 'Docker installation',
+ concept_section_docker_desc_line_1:
+ 'We provide a Docker Image for quick, one-click installation.',
+ concept_section_docker_desc_line_2:
+ 'Built in Golang, supports cross-platform deployment, making it easy to set up anywhere.',
+ concept_section_open_source_title: 'Open Source',
+ concept_section_open_source_desc_line_1:
+ 'Artalk is open-source, free software with a strong focus on privacy and data security.',
+ concept_section_open_source_desc_line_2:
+ 'Maintained continuously for {{year}} years, we consistently update and iterate to improve the experience and ensure stability.',
+ feature_community_title: 'Enhance your experience',
+ feature_community_desc:
+ 'In the plugin marketplace, you can find a wide variety of plugins to customize your own Artalk.',
+ use_artalk_with: 'Use Artalk with',
+ any_website_or_blog: 'any website or blog',
+ see_more_on_github: 'See more on GitHub',
+ star_proposal_line_1: 'If you like Artalk, please give it a STAR 🌟',
+ star_proposal_line_2: 'This would be very helpful to us!',
}
diff --git a/docs/landing/src/i18n/fr.ts b/docs/landing/src/i18n/fr.ts
index 313a50b2f..d718dd878 100644
--- a/docs/landing/src/i18n/fr.ts
+++ b/docs/landing/src/i18n/fr.ts
@@ -145,4 +145,31 @@ export const fr: MessageSchema = {
feature_api_documentation_desc: 'Documentation au format OpenAPI',
feature_program_upgrade_name: 'Mise à jour du programme',
feature_program_upgrade_desc: 'Vérification des versions et mise à jour en un clic',
+ intro_stack_card_1_name: 'Alice',
+ intro_stack_card_1_text: 'Salut, comment ça va ?',
+ intro_stack_card_2_name: 'Bob',
+ intro_stack_card_2_text: 'Comment se passent les choses récemment ?',
+ intro_stack_card_3_name: 'Cook',
+ intro_stack_card_3_text: 'Bonjour',
+ concept_section_locales_title: 'Localisation multilingue',
+ concept_section_locales_desc:
+ "Prise en charge de plusieurs langues, telles que l'anglais, le chinois, le français, le japonais, le coréen et le russe.",
+ concept_section_docker_title: 'Installation avec Docker',
+ concept_section_docker_desc_line_1:
+ 'Nous fournissons une image Docker pour une installation rapide en un seul clic.',
+ concept_section_docker_desc_line_2:
+ 'Construit avec Golang, il est compatible avec les déploiements multi-plateformes, vous permettant de le lancer où que vous soyez.',
+ concept_section_open_source_title: 'Open Source',
+ concept_section_open_source_desc_line_1:
+ 'Artalk est un logiciel libre et open source, axé sur la confidentialité et la sécurité des données.',
+ concept_section_open_source_desc_line_2:
+ "En maintenance continue depuis {{year}} ans, nous proposons des mises à jour régulières pour améliorer l'expérience utilisateur et garantir la stabilité.",
+ feature_community_title: 'Élargissez votre expérience',
+ feature_community_desc:
+ "Dans notre marketplace de plugins, vous trouverez une variété de plugins pour personnaliser votre propre version d'Artalk.",
+ use_artalk_with: 'Utilisez Artalk avec',
+ any_website_or_blog: "n'importe quel site web ou blog",
+ see_more_on_github: 'Voir plus sur GitHub',
+ star_proposal_line_1: "Si vous aimez Artalk, n'hésitez pas à lui donner une étoile 🌟",
+ star_proposal_line_2: 'Cela nous serait très utile !',
}
diff --git a/docs/landing/src/i18n/ja.ts b/docs/landing/src/i18n/ja.ts
index c5e312073..7531905be 100644
--- a/docs/landing/src/i18n/ja.ts
+++ b/docs/landing/src/i18n/ja.ts
@@ -142,4 +142,31 @@ export const ja: MessageSchema = {
feature_api_documentation_desc: 'OpenAPI 形式のドキュメントを提供',
feature_program_upgrade_name: 'プログラムのアップグレード',
feature_program_upgrade_desc: 'バージョンチェックとワンクリックアップグレード',
+ intro_stack_card_1_name: 'アリス',
+ intro_stack_card_1_text: 'こんにちは。',
+ intro_stack_card_2_name: 'ボブ',
+ intro_stack_card_2_text: '最近どう？',
+ intro_stack_card_3_name: 'クック',
+ intro_stack_card_3_text: 'おはよう',
+ concept_section_locales_title: 'マルチ言語ローカライズ',
+ concept_section_locales_desc:
+ '英語、中国語、フランス語、日本語、韓国語、ロシア語など、多言語をサポートしています。',
+ concept_section_docker_title: 'Docker インストール',
+ concept_section_docker_desc_line_1:
+ '私たちは Docker イメージを提供しており、ワンクリックで高速インストールを実現します。',
+ concept_section_docker_desc_line_2:
+ 'Golang を使用して構築されており、クロスプラットフォーム展開に対応。どこでも簡単に起動できます。',
+ concept_section_open_source_title: 'オープンソース',
+ concept_section_open_source_desc_line_1:
+ 'Artalk はオープンソースのフリーソフトウェアであり、プライバシーとデータの安全性に焦点を当てています。',
+ concept_section_open_source_desc_line_2:
+ '{{year}} 年間連続でメンテナンスされており、私たちは継続的にアップデートと改善を行い、ユーザー体験の向上と安定性を確保しています。',
+ feature_community_title: '体験を広げよう',
+ feature_community_desc:
+ 'プラグインマーケットでは、さまざまなプラグインを見つけて、あなた専用の Artalk にカスタマイズできます。',
+ use_artalk_with: 'Use Artalk with',
+ any_website_or_blog: '任意のウェブサイトやブログ',
+ see_more_on_github: 'GitHub で詳しく見る',
+ star_proposal_line_1: 'Artalk を気に入ったら、ぜひスターをつけてください 🌟',
+ star_proposal_line_2: 'これは私たちにとって非常に役立ちます！',
}
diff --git a/docs/landing/src/i18n/ko.ts b/docs/landing/src/i18n/ko.ts
index 19846d710..7ab63b580 100644
--- a/docs/landing/src/i18n/ko.ts
+++ b/docs/landing/src/i18n/ko.ts
@@ -142,4 +142,31 @@ export const ko: MessageSchema = {
feature_api_documentation_desc: 'OpenAPI 형식의 문서 제공',
feature_program_upgrade_name: '프로그램 업그레이드',
feature_program_upgrade_desc: '버전 확인 및 원클릭 업그레이드',
+ intro_stack_card_1_name: '앨리스',
+ intro_stack_card_1_text: '안녕하세요.',
+ intro_stack_card_2_name: '밥',
+ intro_stack_card_2_text: '요즘 어때요?',
+ intro_stack_card_3_name: '쿡',
+ intro_stack_card_3_text: '굿모닝.',
+ concept_section_locales_title: '다국어 현지화',
+ concept_section_locales_desc:
+ '영어, 중국어, 프랑스어, 일본어, 한국어, 러시아어 등 다양한 언어를 지원합니다.',
+ concept_section_docker_title: 'Docker 설치',
+ concept_section_docker_desc_line_1:
+ '저희는 Docker 이미지를 제공하여, 원클릭으로 빠른 설치를 지원합니다.',
+ concept_section_docker_desc_line_2:
+ 'Golang으로 개발되었으며, 크로스 플랫폼 배포를 지원합니다. 언제 어디서나 쉽게 시작할 수 있습니다.',
+ concept_section_open_source_title: '오픈 소스',
+ concept_section_open_source_desc_line_1:
+ 'Artalk는 오픈 소스 자유 소프트웨어로, 개인정보 보호와 데이터 보안을 중시합니다.',
+ concept_section_open_source_desc_line_2:
+ '{{year}}년 동안 꾸준히 유지 관리되고 있으며, 지속적인 업데이트와 개선을 통해 사용자 경험을 향상시키고 안정성을 보장합니다.',
+ feature_community_title: '당신의 경험을 확장하세요',
+ feature_community_desc:
+ '플러그인 마켓에서 다양한 플러그인을 찾아 자신의 Artalk를 맞춤설정할 수 있습니다.',
+ use_artalk_with: 'Use Artalk with',
+ any_website_or_blog: '모든 웹사이트 또는 블로그',
+ see_more_on_github: 'GitHub에서 더 보기',
+ star_proposal_line_1: 'Artalk을 좋아하신다면, 별을 주세요 🌟',
+ star_proposal_line_2: '감사합니다!',
}
diff --git a/docs/landing/src/i18n/ru.ts b/docs/landing/src/i18n/ru.ts
index ec2d01fa6..c3f1b60aa 100644
--- a/docs/landing/src/i18n/ru.ts
+++ b/docs/landing/src/i18n/ru.ts
@@ -145,4 +145,31 @@ export const ru: MessageSchema = {
feature_api_documentation_desc: 'Документация в формате OpenAPI',
feature_program_upgrade_name: 'Обновление программы',
feature_program_upgrade_desc: 'Проверка версий, одно нажатие для обновления',
+ intro_stack_card_1_name: 'Алиса',
+ intro_stack_card_1_text: 'Привет, как дела?',
+ intro_stack_card_2_name: 'Боб',
+ intro_stack_card_2_text: 'Как у тебя дела в последнее время?',
+ intro_stack_card_3_name: 'Кук',
+ intro_stack_card_3_text: 'Доброе утро',
+ concept_section_locales_title: 'Многоязычная локализация',
+ concept_section_locales_desc:
+ 'Поддержка нескольких языков, таких как английский, китайский, французский, японский, корейский, русский и другие.',
+ concept_section_docker_title: 'Установка с помощью Docker',
+ concept_section_docker_desc_line_1:
+ 'Мы предоставляем образ Docker, который позволяет выполнить быструю установку одним кликом.',
+ concept_section_docker_desc_line_2:
+ 'Построен с использованием Golang, поддерживает кроссплатформенное развертывание. Легко запустите его в любом месте.',
+ concept_section_open_source_title: 'Открытый исходный код',
+ concept_section_open_source_desc_line_1:
+ 'Artalk – это свободное и открытое программное обеспечение, ориентированное на конфиденциальность и безопасность данных.',
+ concept_section_open_source_desc_line_2:
+ 'Мы поддерживаем его уже {{year}} лет, регулярно обновляем и совершенствуем с целью улучшения пользовательского опыта и повышения стабильности.',
+ feature_community_title: 'Расширьте свои возможности',
+ feature_community_desc:
+ 'В маркетплейсе плагинов вы можете найти множество плагинов, чтобы настроить Artalk под свои нужды.',
+ use_artalk_with: 'Интеграция Artalk в',
+ any_website_or_blog: 'любой веб-сайт или блог',
+ see_more_on_github: 'Подробнее на GitHub',
+ star_proposal_line_1: 'Если вам нравится Artalk, пожалуйста, поставьте звезду 🌟',
+ star_proposal_line_2: 'Это поможет нам стать лучше.',
}
diff --git a/docs/landing/src/i18n/zh-CN.ts b/docs/landing/src/i18n/zh-CN.ts
index 6d8a2ec93..302702c2f 100644
--- a/docs/landing/src/i18n/zh-CN.ts
+++ b/docs/landing/src/i18n/zh-CN.ts
@@ -5,7 +5,7 @@ export const zhCN: MessageSchema = {
get_artalk: '获取 Artalk',
get_artalk_link: 'https://artalk.js.org/zh/guide/intro.html',
slogan_line_1: 'Artalk 评论系统',
- slogan_line_2: '重构互动极速体验',
+ slogan_line_2: '即时评论，即刻响应',
slogan_line_3: '',
nav_docs_link: 'https://artalk.js.org/zh/guide/intro.html',
nav_changelog_link: 'https://github.com/ArtalkJS/Artalk/blob/master/CHANGELOG.md',
@@ -140,4 +140,26 @@ export const zhCN: MessageSchema = {
feature_api_documentation_desc: '提供 OpenAPI 格式文档',
feature_program_upgrade_name: '程序升级',
feature_program_upgrade_desc: '版本检测，一键升级',
+ intro_stack_card_1_name: '爱丽丝',
+ intro_stack_card_1_text: '嗨，你好。',
+ intro_stack_card_2_name: '鲍勃',
+ intro_stack_card_2_text: '最近过得怎么样？',
+ intro_stack_card_3_name: '库克',
+ intro_stack_card_3_text: '早上好！',
+ concept_section_locales_title: '多语言本地化',
+ concept_section_locales_desc: '支持英语、中文、法语、日语、韩语、俄语等多种语言。',
+ concept_section_docker_title: 'Docker 安装',
+ concept_section_docker_desc_line_1: '我们提供 Docker 镜像，实现一键快速安装。',
+ concept_section_docker_desc_line_2: '使用 Golang 构建，支持跨平台部署，轻松在任何地方启动。',
+ concept_section_open_source_title: '开源',
+ concept_section_open_source_desc_line_1: 'Artalk 是开源的自由软件，专注于隐私和数据安全。',
+ concept_section_open_source_desc_line_2:
+ '连续维护 {{year}} 年，我们持续更新迭代，改进体验和确保稳定性。',
+ feature_community_title: '扩展您的体验',
+ feature_community_desc: '在插件市场，你可以找到各种各样的插件，定制属于你自己的 Artalk。',
+ use_artalk_with: '将 Artalk 集成至',
+ any_website_or_blog: '任何网站或博客',
+ see_more_on_github: '在 GitHub 上查看',
+ star_proposal_line_1: '开源不易，如果你喜欢 Artalk',
+ star_proposal_line_2: '请给它点一个 STAR 🌟 这会对我们很有帮助！',
}
diff --git a/docs/landing/src/i18n/zh-TW.ts b/docs/landing/src/i18n/zh-TW.ts
index ea3687d50..57b4b659a 100644
--- a/docs/landing/src/i18n/zh-TW.ts
+++ b/docs/landing/src/i18n/zh-TW.ts
@@ -5,7 +5,7 @@ export const zhTW: MessageSchema = {
get_artalk: '取得 Artalk',
get_artalk_link: 'https://artalk.js.org/guide/intro.html',
slogan_line_1: 'Artalk 評論系統',
- slogan_line_2: '重構互動極速體驗',
+ slogan_line_2: '即時評論，即時回應',
slogan_line_3: '',
nav_docs_link: 'https://artalk.js.org/guide/intro.html',
nav_changelog_link: 'https://github.com/ArtalkJS/Artalk/blob/master/CHANGELOG.md',
@@ -140,4 +140,26 @@ export const zhTW: MessageSchema = {
feature_api_documentation_desc: '提供 OpenAPI 格式文件',
feature_program_upgrade_name: '程式升級',
feature_program_upgrade_desc: '版本檢測，一鍵升級',
+ intro_stack_card_1_name: '愛麗絲',
+ intro_stack_card_1_text: '嗨，你好。',
+ intro_stack_card_2_name: '鮑勃',
+ intro_stack_card_2_text: '最近過得怎麼樣？',
+ intro_stack_card_3_name: '庫克',
+ intro_stack_card_3_text: '早安!',
+ concept_section_locales_title: '多語言在地化',
+ concept_section_locales_desc: '支援英文、中文、法文、日文、韓文、俄文等多種語言。',
+ concept_section_docker_title: 'Docker 安裝',
+ concept_section_docker_desc_line_1: '我們提供 Docker 映像檔，實現一鍵快速安裝。',
+ concept_section_docker_desc_line_2: '使用 Golang 開發，支援跨平台部署，輕鬆在任何地方啟動。',
+ concept_section_open_source_title: '開源',
+ concept_section_open_source_desc_line_1: 'Artalk 是開源的自由軟體，專注於隱私與數據安全。',
+ concept_section_open_source_desc_line_2:
+ '持續維護 {{year}} 年，我們不斷更新迭代，改善用戶體驗並確保穩定性。',
+ feature_community_title: '擴充您的體驗',
+ feature_community_desc: '在插件平台，您可以找到各式各樣的插件，客製化屬於您自己的 Artalk。',
+ use_artalk_with: '將 Artalk 集成至',
+ any_website_or_blog: '任何網站或部落格',
+ see_more_on_github: '在 GitHub 上查看',
+ star_proposal_line_1: '開源不易，如果您喜歡 Artalk',
+ star_proposal_line_2: '請給它點一個 STAR 🌟 這對我們很有幫助！',
}
diff --git a/docs/landing/src/responsive.scss b/docs/landing/src/responsive.scss
index 17e3a4087..e9a9dfe30 100644
--- a/docs/landing/src/responsive.scss
+++ b/docs/landing/src/responsive.scss
@@ -14,7 +14,7 @@ $breakpoints: (
padding: 0 40px;
}
- .content {
+ & > .content {
padding: 0 75px;
main {
@@ -45,6 +45,10 @@ $breakpoints: (
justify-content: space-around;
}
+ .link-item {
+ font-size: 14px;
+ }
+
.link-item:not(:last-child) {
margin-right: 0;
}
@@ -54,18 +58,26 @@ $breakpoints: (
}
}
+ .slogan {
+ text-align: center;
+ }
+
.slogan .slogan-inner {
padding: 0 40px;
}
.slogan .text {
- font-size: 3em;
+ font-size: 31px;
width: 100%;
}
- .slogan .text .highlight .line-wrap {
- bottom: -15px;
- zoom: 0.9;
+ .slogan .text .highlight {
+ font-size: 40px;
+
+ .line-wrap {
+ bottom: -15px;
+ zoom: 0.9;
+ }
}
.slogan .demos {
@@ -74,12 +86,20 @@ $breakpoints: (
.slogan .btns {
display: flex;
+ justify-content: center;
flex-direction: row;
.btn:not(:last-child) {
margin-right: 10px;
margin-bottom: 20px;
}
+
+ .btn {
+ height: 44px;
+ min-width: 100px;
+ font-size: 15px;
+ padding: 0 20px;
+ }
}
.feature {
@@ -90,7 +110,7 @@ $breakpoints: (
max-height: 300px;
}
- .content {
+ & > .content {
padding: 0;
flex-direction: column;
@@ -112,19 +132,126 @@ $breakpoints: (
}
}
- .full.feature .func-list .row {
- display: flex;
+ .feature-group {
flex-direction: column;
- transform: translateX(0) !important;
+ padding: 0 25px;
- .item {
+ .feature-block {
+ padding: 20px 30px;
+ }
+ }
+
+ .start-feature {
+ padding-bottom: 50px;
+ padding-left: 0;
+ padding-right: 0;
+
+ & > aside {
+ display: none;
+ }
+
+ & > main {
+ padding: 0 20px;
+ }
+ }
+
+ .start-carousel {
+ .feature-cards {
+ .feature-item {
+ padding: 35px 35px;
+
+ .icon {
+ height: 55px;
+ width: 55px;
+ margin-right: 0.4em;
+ }
+
+ .main .title {
+ font-size: 1.2rem;
+ }
+
+ .main .desc {
+ font-size: 1.1rem;
+ }
+
+ .action .arrow-btn {
+ display: none;
+ font-size: 15px;
+ height: 40px;
+ width: 40px;
+ }
+ }
+ }
+
+ .screenshot-group {
+ display: flex;
+ flex-direction: column;
+
+ .screenshot {
+ min-height: 200px;
+ }
+ }
+ }
+
+ .frameworks-feature {
+ flex-direction: column;
+
+ .title {
+ font-size: 24px;
+ margin-bottom: 50px;
+ margin-left: 0;
+ }
+
+ .methods {
width: 100%;
- padding: 30px 40px;
- margin: 0;
- font-size: 1.3rem;
+ place-items: center;
+ padding: 0 20px;
+ grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
+
+ .icon {
+ height: 65px;
+ width: 65px;
+ }
+ }
+ }
+
+ .grey-cards-feature {
+ padding: 0 20px;
+ flex-direction: column;
+ margin-bottom: 50px;
+ }
+
+ .full-feature {
+ padding-bottom: 50px;
+ }
+
+ .full-feature .func-list {
+ .row {
+ display: flex;
+ flex-direction: column;
+ transform: translateX(0) !important;
- &:not(:last-child) {
- margin-bottom: 40px;
+ .item {
+ width: 100%;
+ padding: 30px 40px;
+ margin: 0;
+ font-size: 1.3rem;
+
+ &:not(:last-child) {
+ margin-bottom: 40px;
+ }
+
+ .header {
+ font-size: 23px;
+
+ .icon-wrap {
+ margin-right: 24px;
+ }
+ }
+
+ .body {
+ font-size: 20px;
+ }
}
}
}
@@ -148,11 +275,11 @@ $breakpoints: (
font-size: 1rem;
}
- .full.feature .folder-icon {
+ .full-feature .folder-icon {
margin-top: 0;
}
- .func.feature .content .ship-icon {
+ .funcs-feature .content .ship-icon {
margin-top: 0;
}
@@ -166,39 +293,129 @@ $breakpoints: (
}
}
- .safe.feature .data-icon {
+ .safe-feature .data-icon {
zoom: 0.5;
margin-left: 0;
margin-bottom: 0;
}
- .safe.feature main {
+ .safe-feature main {
margin: 0;
}
- .func.feature .func-grps {
+ .funcs-feature .func-grps {
padding: 0;
column-count: 1;
}
- .feature.quick .deploy-links .item span {
- font-size: 1.6rem;
+ .feature-block {
+ min-height: 300px;
}
- .feature.quick .deploy-links .item .bold {
- font-size: 2rem;
+ .quick-feature .deploy-links {
+ margin: 20px 0;
+
+ .item {
+ span {
+ font-size: 20px;
+ }
+
+ .bold {
+ font-size: 28px;
+ }
+
+ .arrow-icon {
+ margin-left: 0;
+ height: 35px;
+ width: 70px;
+ font-size: 25px;
+
+ .block {
+ height: 1.5em;
+ width: 0.4em;
+ }
+
+ svg {
+ padding-left: 10px;
+ }
+ }
+ }
}
- .func.feature .func-grps .grp .name {
+ .funcs-feature .func-grps .grp .name {
font-size: 1.45rem;
}
.feature-title {
- font-size: 2.5em;
+ font-size: 28px;
+
+ svg {
+ zoom: 0.8;
+ }
+ }
+
+ .feature-block .feature-desc {
+ font-size: 20px;
+ }
+
+ .safe-feature {
+ text-align: center;
+
+ .data-icon {
+ width: 90px;
+ height: 90px;
+ margin-left: 0;
+ margin-top: 10px;
+ margin: 0 auto;
+ }
+
+ & > .content {
+ flex-direction: column;
+
+ .feature-desc {
+ font-size: 20px;
+ }
+
+ .app-learn-more-link {
+ font-size: 20px;
+ }
+ }
+
+ .report-audit {
+ text-align: center;
+
+ .app-learn-more-link {
+ margin-bottom: 15px;
+ }
+ }
+ }
+
+ .plugins-feature {
+ .left-right {
+ flex-direction: column;
+ }
+
+ .screenshot {
+ display: none;
+ }
+
+ .left-right .stamps {
+ svg {
+ height: 40px;
+ width: 40px;
+
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+ }
}
.feature-desc {
- text-align: left;
- font-size: 1.5rem;
+ font-size: 20px;
+ }
+
+ .app-footer {
+ font-size: 20px;
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86b338db8..f7b0b51c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,6 +185,9 @@ importers:
usehooks-ts:
specifier: ^3.1.0
version: 3.1.0(react@18.3.1)
+ vanilla-lazyload:
+ specifier: ^19.1.3
+ version: 19.1.3
docs/swagger:
devDependencies:
@@ -4808,6 +4811,9 @@ packages:
validate-html-nesting@1.2.2:
resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
+ vanilla-lazyload@19.1.3:
+ resolution: {integrity: sha512-bBMERPu2AFJc35krS+8BOhq++c6dRfL6q368lJPnkS5U92fRQagTR3FsNta69/GukfZzDwDEjD5M3U7VuSiCDw==}
+
vfile-message@4.0.2:
resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
@@ -10173,6 +10179,8 @@ snapshots:
validate-html-nesting@1.2.2: {}
+ vanilla-lazyload@19.1.3: {}
+
vfile-message@4.0.2:
dependencies:
'@types/unist': 3.0.3
diff --git a/ui/artalk/index.html b/ui/artalk/index.html
index 255d6e078..69a2a3020 100644
--- a/ui/artalk/index.html
+++ b/ui/artalk/index.html
@@ -11,6 +11,14 @@
Artalk
-
- The Artalk. Made with ♥️.
+ <>
+
+
)
}
diff --git a/docs/landing/src/components/Header.scss b/docs/landing/src/components/Header.scss
index 2b09039a1..c14ca851c 100644
--- a/docs/landing/src/components/Header.scss
+++ b/docs/landing/src/components/Header.scss
@@ -1,6 +1,7 @@
.app-header {
z-index: 999;
- position: sticky;
+ position: fixed;
+ width: 100%;
top: 0;
left: 0;
transition: background 0.2s ease;
@@ -14,6 +15,7 @@
}
&.fixed {
+ backdrop-filter: saturate(1.8) blur(20px);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-transparent);
}
diff --git a/docs/landing/src/components/LazyImage.scss b/docs/landing/src/components/LazyImage.scss
new file mode 100644
index 000000000..42e436157
--- /dev/null
+++ b/docs/landing/src/components/LazyImage.scss
@@ -0,0 +1,8 @@
+img.lazyload {
+ opacity: 0;
+ transition: opacity 300ms;
+
+ &.loaded {
+ opacity: 1;
+ }
+}
diff --git a/docs/landing/src/components/LazyImage.tsx b/docs/landing/src/components/LazyImage.tsx
new file mode 100644
index 000000000..ce7c0d361
--- /dev/null
+++ b/docs/landing/src/components/LazyImage.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react'
+import LazyLoad, { type ILazyLoadInstance } from 'vanilla-lazyload'
+import './LazyImage.scss'
+
+let lazyLoadInstance: ILazyLoadInstance
+
+const LazyImage: React.FC
+
+ {t('see_more_on_github')}
+
+
+ {t('star_proposal_line_2')} + +
+
+ + {t('star_proposal_line_2')} + +
+
-
+
Artalk
+
+ The Artalk. Made with ♥️.
+
+