mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-14 07:26:52 +00:00
theme-landing
This commit is contained in:
tangly1024
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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)',
|
||||
|
||||
// 特性介绍
|
||||
|
||||
Reference in New Issue
Block a user