Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Commit

Permalink
chore: update docs link
Browse files Browse the repository at this point in the history
  • Loading branch information
Wangtaofeng committed Nov 2, 2023
1 parent dd88271 commit f127a92
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 75 deletions.
219 changes: 145 additions & 74 deletions src/components/home/Footer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,62 +32,104 @@ export const Footer = ({ whiteTheme = false, scrollStart, scrollEnd }) => {

const mergeFooterContent = [...content, ...footerContent]
const { scrollYProgress } = useViewportScroll()
const translateY = useTransform(scrollYProgress, [scrollStart, scrollEnd], [-150, 0])
const translateY = useTransform(
scrollYProgress,
[scrollStart, scrollEnd],
[-150, 0],
)
const router = useRouter()
const curLanguage = router.locale
const showWeChat = useMemo(() => {
return curLanguage === 'zh-CN'
}, [curLanguage])


return (
<motion.div ref={ref} className={clsx(style.footerContainer, style.mobileFooterContainer, whiteTheme ? 'bg-white-01' : 'bg-black')} style={{ translateY }}>
<motion.div
ref={ref}
className={clsx(
style.footerContainer,
style.mobileFooterContainer,
whiteTheme ? 'bg-white-01' : 'bg-black',
)}
style={{ translateY }}
>
<div className={style.footerContentContainer}>
{
mergeFooterContent.map(({ title, items }) => (
<div className='flex flex-col items-start gap-[16px]' key={title}>
<span className={clsx('font-[500] text-[18px] leading-[28px]', whiteTheme ? 'text-[#0B0C0F]' : 'text-white-01')}>{t(title)}</span>
<div className='flex flex-col items-start gap-[8px] w-[80px] w-full'>
{
items.length > 6 && <FooterItems items={items} whiteTheme={whiteTheme} />
}
{
items.length <= 6 && items.map(({ label, href = '', tagCategory, icon, downloadName, blackIcon }) => {
{mergeFooterContent.map(({ title, items }) => (
<div className="flex flex-col items-start gap-[16px]" key={title}>
<span
className={clsx(
'font-[500] text-[18px] leading-[28px]',
whiteTheme ? 'text-[#0B0C0F]' : 'text-white-01',
)}
>
{t(title)}
</span>
<div className="flex flex-col items-start gap-[8px] w-[80px] w-full">
{items.length > 6 && (
<FooterItems items={items} whiteTheme={whiteTheme} />
)}
{items.length <= 6 &&
items.map(
({
label,
href = '',
tagCategory,
icon,
downloadName,
blackIcon,
}) => {
if (downloadName) {
return <span
key={label}
className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}
onClick={() => {
sendTagEvent({
action: 'click',
category: tagCategory,
label: t(label),
value: href,
})
saveAs(href, downloadName)
}}
>{t(label)}</span>
return (
<span
key={label}
className={clsx(
style.footerItem,
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
onClick={() => {
sendTagEvent({
action: 'click',
category: tagCategory,
label: t(label),
value: href,
})
saveAs(href, downloadName)
}}
>
{t(label)}
</span>
)
} else {
return (
<Link key={label} href={href}>
{
icon ? (
<span className='flex flex-row items-center gap-[8px]'>
{whiteTheme ? blackIcon : icon}
<span
className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}
onClick={() => {
sendTagEvent({
action: 'click',
category: tagCategory,
label: t(label),
value: href,
})
}}
>{t(label)}</span>
{icon ? (
<span className="flex flex-row items-center gap-[8px]">
{whiteTheme ? blackIcon : icon}
<span
className={clsx(
style.footerItem,
whiteTheme
? 'text-[#1D2129]'
: 'text-white-02',
)}
onClick={() => {
sendTagEvent({
action: 'click',
category: tagCategory,
label: t(label),
value: href,
})
}}
>
{t(label)}
</span>
) : (<span
className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}
</span>
) : (
<span
className={clsx(
style.footerItem,
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
onClick={() => {
sendTagEvent({
action: 'click',
Expand All @@ -96,63 +138,92 @@ export const Footer = ({ whiteTheme = false, scrollStart, scrollEnd }) => {
value: href,
})
}}
>{t(label)}</span>)
}
>
{t(label)}
</span>
)}
</Link>
)
}
})
}
{
showWeChat && items.some(item => item.icon) && (
<div className='flex flex-col mt-[16px] gap-[8px] w-[70px] hidden xl:block'>
<img src='https://cdn.illacloud.com/official-website/img/home/wechat.png' className='w-full' alt='' />
<span className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}>加入微信群</span>
</div>
)
}
</div>
},
)}
{showWeChat && items.some((item) => item.icon) && (
<div className="flex flex-col mt-[16px] gap-[8px] w-[70px] hidden xl:block">
<img
src="https://cdn.illacloud.com/official-website/img/home/wechat.png"
className="w-full"
alt=""
/>
<span
className={clsx(
style.footerItem,
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
>
加入微信群
</span>
</div>
)}
</div>
))
}
</div>
))}
</div>
<div className={style.space} />
<div className={style.footerBottom}>
<div className='flex flex-row items-center gap-[16px]'>
<img src={whiteTheme ? WHITE_LOGO : ILLA_LOGO} alt='ILLA_LOGO' height='20' />
<span className={clsx('hidden xl:block', whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}>{t('slogan-1')}</span>
<div className="flex flex-row items-center gap-[16px]">
<img
src={whiteTheme ? WHITE_LOGO : ILLA_LOGO}
alt="ILLA_LOGO"
height="20"
/>
<span
className={clsx(
'hidden xl:block',
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
>
{t('slogan-1')}
</span>
</div>
<div>
<div className='flex flex-row justify-center items-center gap-[16px] xl:gap-[32px] '>
<div className='flex flex-row gap-[4px] xl:gap-[8px] px-[4px]'>
<img src={whiteTheme ? WhiteLanguage : Language} alt='language' />
<div className="flex flex-row justify-center items-center gap-[16px] xl:gap-[32px] ">
<div className="flex flex-row gap-[4px] xl:gap-[8px] px-[4px]">
<img src={whiteTheme ? WhiteLanguage : Language} alt="language" />
<LanguageSelect buttonColorChange={!whiteTheme} />
</div>
<Link href="/docs/privacy-policy">
<Link href="https://docs.illacloud.com/privacy-policy">
<span
className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}
className={clsx(
style.footerItem,
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
onClick={() => {
sendTagEvent({
action: 'click',
category: 'homepage_footer_privacy_policy_click',
label: t('footer.privacy-policy'),
})
}
}
>{t('footer.privacy-policy')}</span>
}}
>
{t('footer.privacy-policy')}
</span>
</Link>
<Link href="/docs/terms-of-serivce" >
<Link href="https://docs.illacloud.com/terms-of-service">
<span
className={clsx(style.footerItem, whiteTheme ? 'text-[#1D2129]' : 'text-white-02')}
className={clsx(
style.footerItem,
whiteTheme ? 'text-[#1D2129]' : 'text-white-02',
)}
onClick={() => {
sendTagEvent({
action: 'click',
category: 'homepage_footer_terms_of_service_click',
label: t('footer.terms-of-service'),
})
}
}
>{t('footer.terms-of-service')}</span>
}}
>
{t('footer.terms-of-service')}
</span>
</Link>
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ const Home = ({ starCounts, uri }) => {
onChangeShow={() => setIsBookShow(false)}
/>
</div>
<Campaign />
<Footer scrollStart={0.939} scrollEnd={1} />
</>
)
Expand Down

1 comment on commit f127a92

@vercel
Copy link

@vercel vercel bot commented on f127a92 Nov 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.