feat: new ui

components/AppFooter.js

@@ -0,0 +1,71 @@
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import Container from './Container'
+import GithubSvg from '../public/images/nav/github.svg'
+import HeartSvg from '../public/images/nav/heart.svg'
+
+const AppFooter = (props) => {
+  const { t } = useTranslation('common')
+  const router = useRouter()
+  const docsLocale = router.locale == 'zh-CN' ? '/zh/' : ''
+  return (
+    <footer className="py-20 md:py-40">
+      <Container>
+        <div className="m-auto md:w-10/12 lg:w-8/12 xl:w-6/12">
+          <div className="flex flex-wrap items-center justify-between md:flex-nowrap">
+            <div className="flex w-full justify-center space-x-12 text-gray-600 dark:text-gray-300 sm:w-7/12 md:justify-start">
+              <ul className="list-inside list-disc space-y-8">
+                <li>
+                  <Link href="/" className="transition hover:text-primary">
+                    {t('home')}
+                  </Link>
+                </li>
+                <li>
+                  <Link href={`https://docs.gopeed.com${docsLocale}`} className="transition hover:text-primary">
+                    {t('docs')}
+                  </Link>
+                </li>
+                <li>
+                  <a href="mailto:liwei8466-qq.com" className="transition hover:text-primary">
+                    {t('contact')}
+                  </a>
+                </li>
+              </ul>
+
+              <ul role="list" className="space-y-8">
+                <li>
+                  <Link href="https://github.com/GopeedLab/gopeed" className="flex items-center space-x-3 transition hover:text-primary">
+                    <GithubSvg className="w-5" />
+                    <span>Github</span>
+                  </Link>
+                </li>
+                <li>
+                  <a href="https://discord.gg/ZUJqJrwCGB" className="flex items-center space-x-3 transition hover:text-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="currentColor" className="w-5">
+                      <path d="M25.12 6.946c-2.424-1.948-6.257-2.278-6.419-2.292a.608.608 0 0 0-.604.357c-.004.008-.218.629-.425 1.228 2.817.493 4.731 1.587 4.833 1.647A.999.999 0 0 1 22 9.75a.99.99 0 0 1-.501-.135C21.471 9.598 18.663 8 15.002 8 11.34 8 8.531 9.599 8.503 9.615a1 1 0 0 1-1.006-1.729c.102-.06 2.023-1.158 4.848-1.65-.218-.606-.438-1.217-.442-1.225a.6.6 0 0 0-.604-.357c-.162.013-3.995.343-6.451 2.318C3.564 8.158 1 15.092 1 21.087a.6.6 0 0 0 .08.301c1.771 3.11 6.599 3.924 7.699 3.959a.61.61 0 0 0 .511-.249l1.19-1.612c-2.61-.629-3.99-1.618-4.073-1.679a1 1 0 0 1 1.181-1.614C7.625 20.217 10.172 22 15 22c4.847 0 7.387-1.79 7.412-1.808a1.001 1.001 0 0 1 1.183 1.613c-.083.061-1.456 1.048-4.06 1.677l1.175 1.615c.115.158.298.25.492.25l.019-.001c1.101-.035 5.929-.849 7.699-3.959a.6.6 0 0 0 .08-.301c0-5.994-2.564-12.928-3.88-14.14zM11 19c-1.105 0-2-1.119-2-2.5s.895-2.5 2-2.5 2 1.119 2 2.5-.895 2.5-2 2.5zm8 0c-1.105 0-2-1.119-2-2.5s.895-2.5 2-2.5 2 1.119 2 2.5-.895 2.5-2 2.5z"></path>
+                    </svg>
+                    <span>Discord</span>
+                  </a>
+                </li>
+                <Link
+                  href="https://github.com/GopeedLab/gopeed/blob/main/.donate/index.md#donate"
+                  className="flex items-center space-x-3 transition hover:text-primary"
+                >
+                  <HeartSvg className="w-5" />
+                  <span>{t('donate')}</span>
+                </Link>
+              </ul>
+            </div>
+            <div className="m-auto mt-16 w-10/12 space-y-6 text-center sm:mt-auto sm:w-5/12 sm:text-left">
+              <span className="block text-gray-500 dark:text-gray-400">Copyright &copy; {new Date().getFullYear()} - Gopeed</span>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </footer>
+  )
+}
+
+export default AppFooter

components/AppHeader.css

@@ -0,0 +1,7 @@
+#header:has(#toggle_nav:checked) #hamburger #line {
+  @apply rotate-45 translate-y-1.5
+}
+
+#header:has(#toggle_nav:checked) #hamburger #line2 {
+  @apply -rotate-45 -translate-y-1
+}

components/AppHeader.js

@@ -0,0 +1,83 @@
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import GithubSvg from '../public/images/nav/github.svg'
+import Container from './Container'
+import Translate from './Translate'
+
+const AppHeader = (props) => {
+  const { t } = useTranslation('common')
+  const router = useRouter()
+  const docsLocale = router.locale == 'zh-CN' ? '/zh/' : ''
+  return (
+    <header>
+      <nav className="z-10 w-full absolute">
+        <Container>
+          <div className="flex flex-wrap items-center justify-between py-2 gap-6 md:py-4 md:gap-0 relative" id="header">
+            <div className="relative z-20 flex w-full justify-between lg:w-max md:px-0">
+              <a href="#home" aria-label="logo" className="flex space-x-2 items-center">
+                <div aria-hidden="true" className="flex space-x-1">
+                  <Image src="/images/logo.png" alt="logo" width="32" height="32" />
+                </div>
+                <span className="text-2xl font-bold text-gray-900 dark:text-white">Gopeed</span>
+              </a>
+
+              <div className="relative flex items-center lg:hidden max-h-10">
+                <label role="button" htmlFor="toggle_nav" aria-label="humburger" id="hamburger" className="relative  p-6 -mr-6">
+                  <div aria-hidden="true" id="line" className="m-auto h-0.5 w-5 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"></div>
+                  <div aria-hidden="true" id="line2" className="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"></div>
+                </label>
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <input aria-hidden="true" type="checkbox" name="toggle_nav" id="toggle_nav" className="hidden peer" />
+              <div
+                aria-hidden="true"
+                className="fixed z-10 inset-0 h-screen w-screen bg-white/70 backdrop-blur-2xl origin-bottom scale-y-0 transition duration-500 peer-checked:origin-top peer-checked:scale-y-100 lg:hidden dark:bg-gray-900/70"
+              ></div>
+              <div
+                className="flex-col z-20 flex-wrap gap-6 p-8 rounded-3xl border border-gray-100 bg-white shadow-2xl shadow-gray-600/10 justify-end w-full invisible opacity-0 translate-y-1  absolute top-full left-0 transition-all duration-300 scale-95 origin-top 
+                            lg:relative lg:scale-100 lg:peer-checked:translate-y-0 lg:translate-y-0 lg:flex lg:flex-row lg:items-center lg:gap-0 lg:p-0 lg:bg-transparent lg:w-7/12 lg:visible lg:opacity-100 lg:border-none
+                            peer-checked:scale-100 peer-checked:opacity-100 peer-checked:visible lg:shadow-none 
+                            dark:shadow-none dark:border-gray-700"
+              >
+                <div className="text-gray-600 dark:text-gray-300 lg:pr-2 lg:w-auto w-full lg:pt-0">
+                  <ul className="tracking-wide font-medium lg:font-bold lg:text-sm flex-col flex lg:flex-row gap-6 lg:gap-0 lg:border-r dark:lg:border-white/30">
+                    <li>
+                      <Link href={`https://docs.gopeed.com${docsLocale}`} className="block md:px-4 transition hover:text-primary">
+                        <span>{t('docs')}</span>
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href="https://github.com/GopeedLab/gopeed/blob/main/.donate/index.md#donate"
+                        className="block md:px-4 transition hover:text-primary"
+                      >
+                        <span>{t('donate')}</span>
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="absolute z-30 right-[2rem] top-[0.7rem] gap-4 md:right-24 lg:relative lg:left-0 lg:top-0">
+                <div className="flex justify-between">
+                  <Translate />
+                  <a
+                    href="https://github.com/GopeedLab/gopeed"
+                    className="group relative flex h-9 w-9 rounded-full transition hover:bg-blue-950/5 dark:hover:bg-white/10"
+                  >
+                    <GithubSvg className="m-auto h-5 w-5 fill-gray-500 group-hover:fill-gray-950 dark:fill-white/70 dark:group-hover:fill-white" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  )
+}
+
+export default AppHeader

components/Container.js

@@ -0,0 +1,6 @@
+const Container = (props) => {
+  const { children } = props
+  return <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">{children}</div>
+}
+
+export default Container

components/HeroSection.js

@@ -0,0 +1,106 @@
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import Container from './Container'
+import Link from 'next/link'
+import UAParser from 'ua-parser-js'
+import androidSvg from '../public/images/platform/android.svg'
+import linuxSvg from '../public/images/platform/linux.svg'
+import macosSvg from '../public/images/platform/macos.svg'
+import windowsSvg from '../public/images/platform/windows.svg'
+import { useEffect, useState } from 'react'
+
+const HeroSection = ({ release }) => {
+  const [downloadUrl, setDownloadUrl] = useState('')
+  useEffect(() => {
+    const parser = new UAParser()
+    const os = parser.getOS().name
+    const ua = {
+      arch: parser.getCPU().architecture,
+    }
+    if (os.includes('Windows')) {
+      ua.os = 'windows'
+    }
+    if (os.includes('Mac')) {
+      ua.os = 'macos'
+    }
+    if (os.includes('Linux')) {
+      ua.os = 'linux'
+    }
+    if (os.includes('Android')) {
+      ua.os = 'android'
+    }
+
+    const osAssert = release.assert[ua.os]
+    // first match os and arch
+    if (osAssert?.[ua.arch]) {
+      setDownloadUrl(osAssert[ua.arch])
+      return
+    }
+    // second match os
+    if (osAssert) {
+      setDownloadUrl(osAssert[Object.keys(osAssert)[0]])
+      return
+    }
+    // no match, fallback to github latest release
+    setDownloadUrl('https://github.com/GopeedLab/gopeed/releases/latest')
+  }, [release.assert])
+
+  const { t } = useTranslation('common')
+  return (
+    <div className="relative" id="home">
+      <div className="absolute inset-x-0 top-32 lg:hidden">
+        <div aria-hidden="true" className="grid grid-cols-2 -space-x-52 opacity-50 dark:opacity-60 2xl:mx-auto 2xl:max-w-6xl">
+          <div className="h-60 bg-gradient-to-br from-primary to-purple-400 blur-3xl dark:from-blue-700"></div>
+          <div className="h-72 rounded-full bg-gradient-to-r from-cyan-400 to-sky-300 blur-3xl dark:from-transparent dark:to-indigo-600"></div>
+        </div>
+      </div>
+      <Container>
+        <div className="relative pt-36 ml-auto">
+          <div className="gap-12 md:flex md:items-center">
+            <div className="text-center sm:px-12 md:w-2/3 md:px-0 md:text-left lg:w-1/2">
+              <h1 className="text-3xl font-black dark:text-white lg:text-5xl">{t('home.title')}</h1>
+              <div>
+                <p className="mt-8 text-lg text-gray-700 dark:text-gray-100">{t('home.desc')}</p>
+                <div className="mt-12 flex justify-center gap-4 sm:gap-6 md:justify-start">
+                  <Link
+                    href={downloadUrl}
+                    className="relative flex h-12 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-lg before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
+                  >
+                    <span className="relative text-base font-semibold text-white normal-case">{t('download')}</span>
+                  </Link>
+                  <Link
+                    href="https://github.com/GopeedLab/gopeed/releases/latest"
+                    className="relative flex h-12 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent before:bg-primary/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-800 dark:before:bg-gray-900 sm:w-max"
+                  >
+                    <span className="relative text-base font-semibold text-primary dark:text-white">{t('downloadMore')}</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+            <div className="relative mt-20 md:mt-0 md:w-2/5 lg:w-3/5">
+              <div className="md:-mr-72 lg:mr-0">
+                <Image className="h-full object-cover" priority src="/images/ui.png" alt="screenshot" width="1628" height="1233" />
+              </div>
+            </div>
+          </div>
+          <div className="hidden py-8 mt-16 border-y border-gray-100 dark:border-gray-800 sm:flex justify-between">
+            <div className="text-left">
+              <h6 className="text-lg font-semibold text-gray-700 dark:text-white">{t('home.feat1.title')}</h6>
+              <p className="mt-2 text-gray-500">{t('home.feat1.desc')}</p>
+            </div>
+            <div className="text-left">
+              <h6 className="text-lg font-semibold text-gray-700 dark:text-white">{t('home.feat2.title')}</h6>
+              <p className="mt-2 text-gray-500">{t('home.feat2.desc')}</p>
+            </div>
+            <div className="text-left">
+              <h6 className="text-lg font-semibold text-gray-700 dark:text-white">{t('home.feat3.title')}</h6>
+              <p className="mt-2 text-gray-500">{t('home.feat3.desc')}</p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+export default HeroSection