From bfb343beebe75cc1d4d7f2909fca7f1cd0ebd52f Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Fri, 7 Jul 2023 20:42:15 +0800
Subject: [PATCH] theme-landing

---
 themes/landing/components/Header.js     |   9 +-
 themes/landing/components/Hero.js       |   2 +-
 themes/landing/components/ModalVideo.js | 175 +++++++++++++-----------
 themes/landing/config.js                |  13 +-
 4 files changed, 109 insertions(+), 90 deletions(-)

diff --git a/themes/landing/components/Header.js b/themes/landing/components/Header.js
index 1af29455..ee6fe3ff 100644
--- a/themes/landing/components/Header.js
+++ b/themes/landing/components/Header.js
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import Logo from './Logo'
 import MobileMenu from './MobileMenu'
+import CONFIG from '../config'
 
 export default function Header() {
   const [top, setTop] = useState(true)
@@ -35,13 +36,13 @@ export default function Header() {
             {/* Desktop sign in links */}
             <ul className="flex grow justify-end flex-wrap items-center">
               <li>
-                <Link href="https://github.com/tangly1024/NotionNext" target='_blank' className="font-medium hover:font-bold text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">
-                    <i className='fab fa-github mr-1'></i><div>开源仓库</div>
+                <Link href={CONFIG.HEDEAR_BUTTON_1_URL} target='_blank' className="font-medium hover:font-bold text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">
+                   <div>{CONFIG.HEADER_BUTTON_1_TITLE}</div>
                 </Link>
               </li>
               <li>
-                <Link href="https://blog.tangly1024.com/" target='_blank' className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
-                  <span>我的博客</span>
+                <Link href={CONFIG.HEDEAR_BUTTON_2_URL} target='_blank' className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
+                  <span>{CONFIG.HEADER_BUTTON_2_TITLE}</span>
                   <svg className="w-3 h-3 fill-current text-gray-400 shrink-0 ml-2 -mr-1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                     <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />
                   </svg>
diff --git a/themes/landing/components/Hero.js b/themes/landing/components/Hero.js
index 5bc65cee..ff7527f6 100644
--- a/themes/landing/components/Hero.js
+++ b/themes/landing/components/Hero.js
@@ -30,7 +30,7 @@ export default function Hero() {
                     {/* Section header */}
                     <div className="text-center pb-12 md:pb-16">
                         <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
-                            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">{CONFIG.HERO_HEADER_1}</span>
+                            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">{CONFIG.HERO_TITLE_1}</span>
                         </h1>
                         <div className="max-w-3xl mx-auto">
                             <p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">{CONFIG.HERO_P_1}</p>
diff --git a/themes/landing/components/ModalVideo.js b/themes/landing/components/ModalVideo.js
index 43b14d73..502f3fa6 100644
--- a/themes/landing/components/ModalVideo.js
+++ b/themes/landing/components/ModalVideo.js
@@ -17,94 +17,105 @@ export default function ModalVideo({
   const videoRef = useRef(null)
 
   return (
-    <div>
+        <div>
 
-      {/* Video thumbnail */}
-      <div>
-        <div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
-          <div className="flex flex-col justify-center">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
-            <svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-              <defs>
-                <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
-                  <stop stopColor="#FFF" offset="0%" />
-                  <stop stopColor="#EAEAEA" offset="77.402%" />
-                  <stop stopColor="#DFDFDF" offset="100%" />
-                </linearGradient>
-                <linearGradient x1="50%" y1="0%" x2="50%" y2="99.24%" id="hero-ill-b">
-                  <stop stopColor="#FFF" offset="0%" />
-                  <stop stopColor="#EAEAEA" offset="48.57%" />
-                  <stop stopColor="#DFDFDF" stopOpacity="0" offset="100%" />
-                </linearGradient>
-                <radialGradient cx="21.152%" cy="86.063%" fx="21.152%" fy="86.063%" r="79.941%" id="hero-ill-e">
-                  <stop stopColor="#4FD1C5" offset="0%" />
-                  <stop stopColor="#81E6D9" offset="25.871%" />
-                  <stop stopColor="#338CF5" offset="100%" />
-                </radialGradient>
-                <circle id="hero-ill-d" cx="384" cy="216" r="64" />
-              </defs>
-              <g fill="none" fillRule="evenodd">
-                <circle fillOpacity=".04" fill="url(#hero-ill-a)" cx="384" cy="216" r="128" />
-                <circle fillOpacity=".16" fill="url(#hero-ill-b)" cx="384" cy="216" r="96" />
-                {/* <g fillRule="nonzero">
+            {/* Video thumbnail */}
+            <div>
+                <div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
+                    <div className="flex flex-col justify-center">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
+                        <svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                            <defs>
+                                <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
+                                    <stop stopColor="#FFF" offset="0%" />
+                                    <stop stopColor="#EAEAEA" offset="77.402%" />
+                                    <stop stopColor="#DFDFDF" offset="100%" />
+                                </linearGradient>
+                                <linearGradient x1="50%" y1="0%" x2="50%" y2="99.24%" id="hero-ill-b">
+                                    <stop stopColor="#FFF" offset="0%" />
+                                    <stop stopColor="#EAEAEA" offset="48.57%" />
+                                    <stop stopColor="#DFDFDF" stopOpacity="0" offset="100%" />
+                                </linearGradient>
+                                <radialGradient cx="21.152%" cy="86.063%" fx="21.152%" fy="86.063%" r="79.941%" id="hero-ill-e">
+                                    <stop stopColor="#4FD1C5" offset="0%" />
+                                    <stop stopColor="#81E6D9" offset="25.871%" />
+                                    <stop stopColor="#338CF5" offset="100%" />
+                                </radialGradient>
+                                <circle id="hero-ill-d" cx="384" cy="216" r="64" />
+                            </defs>
+                            <g fill="none" fillRule="evenodd">
+                                <circle fillOpacity=".04" fill="url(#hero-ill-a)" cx="384" cy="216" r="128" />
+                                <circle fillOpacity=".16" fill="url(#hero-ill-b)" cx="384" cy="216" r="96" />
+                                {/* <g fillRule="nonzero">
                   <use fill="#000" xlinkHref="#hero-ill-d" />
                   <use fill="url(#hero-ill-e)" xlinkHref="#hero-ill-d" />
                 </g> */}
-              </g>
-            </svg>
-          </div>
-          <button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={() => { setModalOpen(true) }}>
-            <svg className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
-              <path d="M10 17l6-5-6-5z" />
-            </svg>
-            <span className="ml-3">{CONFIG.HERO_VIDEO_TIPS}</span>
-          </button>
-        </div>
-      </div>
-      {/* End: Video thumbnail */}
-
-      <Transition show={modalOpen} as={Fragment} afterEnter={() => videoRef.current?.play()}>
-        <Dialog initialFocus={videoRef} onClose={() => setModalOpen(false)}>
-
-          {/* Modal backdrop */}
-          <Transition.Child
-            className="fixed inset-0 z-[99999] bg-black bg-opacity-75 transition-opacity"
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition ease-out duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-            aria-hidden="true"
-          />
-          {/* End: Modal backdrop */}
-
-          {/* Modal dialog */}
-          <Transition.Child
-            className="fixed inset-0 z-[99999] overflow-hidden flex items-center justify-center transform px-4 sm:px-6"
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ttransition ease-out duration-200"
-            leaveFrom="oopacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <div className="max-w-6xl mx-auto h-full flex items-center">
-              <Dialog.Panel className="w-full max-h-full aspect-video bg-black overflow-hidden">
-                <video ref={videoRef} width={videoWidth} height={videoHeight} loop controls>
-                  <source src={video} type="video/mp4" />
-                  Your browser does not support the video tag.
-                </video>
-              </Dialog.Panel>
+                            </g>
+                        </svg>
+                    </div>
+                    <button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={() => { setModalOpen(true) }}>
+                        <svg className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
+                            <path d="M10 17l6-5-6-5z" />
+                        </svg>
+                        <span className="ml-3">{CONFIG.HERO_VIDEO_TIPS}</span>
+                    </button>
+                </div>
             </div>
-          </Transition.Child>
-          {/* End: Modal dialog */}
+            {/* End: Video thumbnail */}
 
-        </Dialog>
-      </Transition>
+            <Transition show={modalOpen} as={Fragment} afterEnter={() => videoRef.current?.play()}>
+                <Dialog initialFocus={videoRef} onClose={() => setModalOpen(false)}>
 
-    </div>
+                    {/* Modal backdrop */}
+                    <Transition.Child
+                        className="fixed inset-0 z-[99999] bg-black bg-opacity-75 transition-opacity"
+                        enter="transition ease-out duration-200"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="transition ease-out duration-100"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                        aria-hidden="true"
+                    />
+                    {/* End: Modal backdrop */}
+
+                    {/* Modal dialog */}
+                    <Transition.Child
+                        className="fixed inset-0 z-[99999] overflow-hidden flex items-center justify-center transform px-4 sm:px-6"
+                        enter="transition ease-out duration-200"
+                        enterFrom="opacity-0 scale-95"
+                        enterTo="opacity-100 scale-100"
+                        leave="ttransition ease-out duration-200"
+                        leaveFrom="oopacity-100 scale-100"
+                        leaveTo="opacity-0 scale-95"
+                    >
+                        <div className="max-w-6xl mx-auto h-full flex items-center">
+                            <Dialog.Panel className="w-full max-h-full aspect-video bg-black overflow-hidden">
+                                {/* <video ref={videoRef} width={videoWidth} height={videoHeight} loop controls>
+                                <source src={video} type="video/mp4" />
+                                Your browser does not support the video tag.
+                                </video> */}
+                                <div>
+                                    <iframe
+                                        className="video-iframe aspect-video w-screen md:w-[800px] mx-auto"
+                                        src={CONFIG.HERO_VIDEO_IFRAME}
+                                        scrolling="no"
+                                        border="0"
+                                        frameBorder="no"
+                                        allowfullscreen="true"
+                                    ></iframe>
+                                </div>
+
+                            </Dialog.Panel>
+                        </div>
+                    </Transition.Child>
+                    {/* End: Modal dialog */}
+
+                </Dialog>
+            </Transition>
+
+        </div>
   )
 }
diff --git a/themes/landing/config.js b/themes/landing/config.js
index 50f5c444..6f090f91 100644
--- a/themes/landing/config.js
+++ b/themes/landing/config.js
@@ -1,14 +1,21 @@
 const CONFIG = {
 
+  HEADER_BUTTON_1_TITLE: 'Github开源',
+  HEDEAR_BUTTON_1_URL: 'https://github.com/tangly1024/NotionNext',
+
+  HEADER_BUTTON_2_TITLE: '作者博客',
+  HEDEAR_BUTTON_2_URL: 'https://blog.tangly1024.com/',
+
   // 首页大图英雄板块
-  HERO_HEADER_1: 'NotionNext',
-  HERO_P_1: '只需一个Notion笔记，建站竟然如此简单！',
+  HERO_TITLE_1: 'NotionNext',
+  HERO_P_1: '快速搭建网站、轻松塑造个人品牌！',
   HERO_BUTTON_1_TEXT: '开始体验',
   HERO_BUTTON_1_LINK: 'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
   HERO_BUTTON_2_TEXT: '了解更多',
   HERO_BUTTON_2_LINK: 'https://docs.tangly1024.com/about',
   HERO_VIDEO_IMAGE: '/images/home.png',
-  HERO_VIDEO_URL: '/videos/video.mp4',
+  //   HERO_VIDEO_URL: '/videos/video.mp4',
+  HERO_VIDEO_IFRAME: '//player.bilibili.com/player.html?aid=913088616&bvid=BV1fM4y1L7Qi&cid=1187218697&page=1&&high_quality=1',
   HERO_VIDEO_TIPS: 'Watch the full video (2 min)',
 
   // 特性介绍