landing-page

seongnoe · Jul 3, 2023 · 26f6b2d · 26f6b2d
1 parent cd5bd06
commit 26f6b2d
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 129 deletions.
diff --git a/public/images/feature-1.webp b/public/images/feature-1.webp
diff --git a/public/images/feature-2.webp b/public/images/feature-2.webp
diff --git a/public/images/feature-3.webp b/public/images/feature-3.webp
diff --git a/themes/gitbook/components/Footer.js b/themes/gitbook/components/Footer.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import BLOG from '@/blog.config'
-import DarkModeButton from '@/components/DarkModeButton'
 
 const Footer = ({ title }) => {
   const d = new Date()

diff --git a/themes/landing/components/Features.js b/themes/landing/components/Features.js
@@ -1,10 +1,9 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 
 import { useState, useRef, useEffect } from 'react'
 import { Transition } from '@headlessui/react'
-import Image from 'next/image'
-import FeaturesBg from '@/public/images/features-bg.png'
-import FeaturesElement from '@/public/images/features-element.png'
+// import FeaturesElement from '@/public/images/features-element.png'
 
 export default function Features() {
   const [tab, setTab] = useState(1)
@@ -31,8 +30,8 @@ export default function Features() {
 
           {/* Section header */}
           <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16">
-            <h1 className="h2 mb-4">Explore the solutions</h1>
-            <p className="text-xl text-gray-600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
+            <h1 className="h2 mb-4">探索解决方案</h1>
+            <p className="text-xl text-gray-600">个人或小企业有什么方法可以快速搭建自己的站点，塑造一个品牌展示中心？<br/>以前，它是<strong className='font-bold'>繁重</strong>的Wordpress，它是操作<strong className='font-bold'>复杂</strong>的Hexo，它是一个<strong className='font-bold'>昂贵</strong>的研发外包团队；但现在，您只要一个笔记软件、Notion就够了</p>
           </div>
 
           {/* Section content */}
@@ -41,8 +40,8 @@ export default function Features() {
             {/* Content */}
             <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6 md:mt-6" data-aos="fade-right">
               <div className="md:pr-4 lg:pr-12 xl:pr-16 mb-8">
-                <h3 className="h3 mb-3">Powerful suite of tools</h3>
-                <p className="text-xl text-gray-600">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
+                <h3 className="h3 mb-3">Notion+NextJs组合方案</h3>
+                <p className="text-xl text-gray-600">Notion作为CMS管理您的站点配置和网页数据，NextJs作为渲染博客的脚本，借助第三方的Vercel等托管平台提供网络服务。</p>
               </div>
               {/* Tabs buttons */}
               <div className="mb-8 md:mb-0">
@@ -52,8 +51,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(1) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">Building the Simple ecosystem</div>
-                    <div className="text-gray-600">Take collaboration to the next level with security and administrative features built for teams.</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">简单快速的系统</div>
+                    <div className="text-gray-600">在Notion中写下一篇文章，内容立刻在您的网站首页中呈现给互联网</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -67,8 +66,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(2) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">Building the Simple ecosystem</div>
-                    <div className="text-gray-600">Take collaboration to the next level with security and administrative features built for teams.</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">高效传播的媒介</div>
+                    <div className="text-gray-600">优质的SEO、快速的响应速度，让您的产品和宣传触达到更多的受众</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -82,8 +81,8 @@ export default function Features() {
                   onClick={(e) => { e.preventDefault(); setTab(3) }}
                 >
                   <div>
-                    <div className="font-bold leading-snug tracking-tight mb-1">Building the Simple ecosystem</div>
-                    <div className="text-gray-600">Take collaboration to the next level with security and administrative features built for teams.</div>
+                    <div className="font-bold leading-snug tracking-tight mb-1">人性化的定制工具</div>
+                    <div className="text-gray-600">多款主题供您挑选，可以搭建各种不同风格和作用的网站，未来还会有更多的主题加入。</div>
                   </div>
                   <div className="flex justify-center items-center w-8 h-8 bg-white rounded-full shadow flex-shrink-0 ml-3">
                     <svg className="w-3 h-3 fill-current" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
@@ -95,7 +94,7 @@ export default function Features() {
             </div>
 
             {/* Tabs items */}
-            <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1">
+            <div className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1 pt-24">
               <div className="transition-all">
                 <div className="relative flex flex-col text-center lg:text-right" data-aos="zoom-y-out" ref={tabs}>
                   {/* Item 1 */}
@@ -113,9 +112,11 @@ export default function Features() {
                     unmount={false}
                   >
                     <div className="relative inline-flex flex-col">
-                      <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
-                      <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} />
+                      {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" /> */}
+                      {/* <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
+                      <img src='/images/feature-1.webp'></img>
                     </div>
+
                   </Transition>
                   {/* Item 2 */}
                   <Transition
@@ -132,8 +133,9 @@ export default function Features() {
                     unmount={false}
                   >
                     <div className="relative inline-flex flex-col">
-                      <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
-                      <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} />
+                        {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
+                        <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
+                        <img src='/images/feature-2.webp'></img>
                     </div>
                   </Transition>
                   {/* Item 3 */}
@@ -151,8 +153,9 @@ export default function Features() {
                     unmount={false}
                   >
                     <div className="relative inline-flex flex-col">
-                      <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
-                      <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} />
+                      {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
+                      <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
+                        <img src='/images/feature-3.webp'></img>
                     </div>
                   </Transition>
                 </div>

diff --git a/themes/landing/components/FeaturesBlocks.js b/themes/landing/components/FeaturesBlocks.js
@@ -31,8 +31,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">用网站来展示品牌</h4>
+                <p className="text-gray-600 text-center">比起线下渠道、一个域名和网站更有说服力</p>
               </div>
 
               {/* 2nd item */}
@@ -47,8 +47,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">SEO带来更多流量</h4>
+                <p className="text-gray-600 text-center">通过搜索引擎，精准定位您的受众</p>
               </div>
 
               {/* 3rd item */}
@@ -64,8 +64,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">网站的性能很重要</h4>
+                <p className="text-gray-600 text-center">更快的响应，更好的用户体验</p>
               </div>
 
               {/* 4th item */}
@@ -81,8 +81,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">打造您的个人品牌</h4>
+                <p className="text-gray-600 text-center">继马斯克、乔布斯之后，您将是下一个传奇</p>
               </div>
 
               {/* 5th item */}
@@ -97,8 +97,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">写作能力是核心技能</h4>
+                <p className="text-gray-600 text-center">比起只输入知识，更重要的是反思和输出</p>
               </div>
 
               {/* 6th item */}
@@ -112,8 +112,8 @@ export default function FeaturesBlocks() {
                     </g>
                   </g>
                 </svg>
-                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">Headless CMS</h4>
-                <p className="text-gray-600 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h4 className="text-xl font-bold leading-snug tracking-tight mb-1">开始写博客吧</h4>
+                <p className="text-gray-600 text-center">NotionNext，助您轻松开始写作</p>
               </div>
 
             </div>

diff --git a/themes/landing/components/Footer.js b/themes/landing/components/Footer.js
@@ -139,7 +139,7 @@ export default function Footer() {
           </ul>
 
           {/* Copyrights note */}
-          <div className="text-sm text-gray-600 mr-4">&copy; Cruip.com. All rights reserved.</div>
+          <div className="text-sm text-gray-600 mr-4">&copy; NotionNext. All rights reserved.</div>
 
         </div>
 

diff --git a/themes/landing/components/Header.js b/themes/landing/components/Header.js
@@ -35,11 +35,13 @@ export default function Header() {
             {/* Desktop sign in links */}
             <ul className="flex grow justify-end flex-wrap items-center">
               <li>
-                <Link href="https://blog.tangly1024.com/" className="font-medium text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">我的博客</Link>
+                <Link href="https://github.com/tangly1024/NotionNext" 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>Github</div>
+                </Link>
               </li>
               <li>
-                <Link href="https://github.com/tangly1024/NotionNext" className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
-                  <span>Github</span>
+                <Link href="https://blog.tangly1024.com/" className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 ml-3">
+                  <span>我的博客</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
@@ -28,7 +28,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">Create a Website Using  <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">Notion</span></h1>
+            <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">NotionNext</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">只需一个Notion笔记就可以搭建各种网站，这也许是成本最低、最快的建站方案</p>
               <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">

diff --git a/themes/landing/components/Logo.js b/themes/landing/components/Logo.js
@@ -2,17 +2,20 @@ import Link from 'next/link'
 
 export default function Logo() {
   return (
-    <Link href="/" className="block" aria-label="Cruip">
-      <svg className="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <radialGradient cx="21.152%" cy="86.063%" fx="21.152%" fy="86.063%" r="79.941%" id="footer-logo">
-            <stop stopColor="#4FD1C5" offset="0%" />
-            <stop stopColor="#81E6D9" offset="25.871%" />
-            <stop stopColor="#338CF5" offset="100%" />
-          </radialGradient>
-        </defs>
-        <rect width="32" height="32" rx="16" fill="url(#footer-logo)" fillRule="nonzero" />
-      </svg>
-    </Link>
+        <Link href="/" className="block" aria-label="Cruip">
+            <svg className="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <radialGradient cx="21.152%" cy="86.063%" fx="21.152%" fy="86.063%" r="79.941%" id="footer-logo">
+                        <stop stopColor="#4FD1C5" offset="0%" />
+                        <stop stopColor="#81E6D9" offset="25.871%" />
+                        <stop stopColor="#338CF5" offset="100%" />
+                    </radialGradient>
+                </defs>
+                <rect width="32" height="32" rx="16" fill="url(#footer-logo)" fillRule="nonzero" />
+                <text x="42%" y="50%" textAnchor="middle" dominantBaseline="central" fontSize="24" fontFamily="'Century Gothic'" fontWeight="700" fontStyle="italic" fill="white">
+                    N
+                </text>
+            </svg>
+        </Link>
   )
 }
diff --git a/themes/landing/components/MobileMenu.js b/themes/landing/components/MobileMenu.js
@@ -65,11 +65,13 @@ export default function MobileMenu() {
         >
           <ul className="px-5 py-2">
             <li>
-              <Link href="/signin" className="flex font-medium w-full text-gray-600 hover:text-gray-900 py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Sign in</Link>
+              <Link href="https://github.com/tangly1024/NotionNext" className="flex font-medium w-full text-gray-600 hover:text-gray-900 py-2 justify-center" onClick={() => setMobileNavOpen(false)}>
+                <i className='fab fa-github mr-1'></i><div>Github</div>
+              </Link>
             </li>
             <li>
-              <Link href="/signup" className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 w-full my-2" onClick={() => setMobileNavOpen(false)}>
-                <span>Sign up</span>
+              <Link href="https://blog.tangly1024.com/" className="btn-sm text-gray-200 bg-gray-900 hover:bg-gray-800 w-full my-2" onClick={() => setMobileNavOpen(false)}>
+                <span>我的博客</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" fill="#999" fillRule="nonzero" />
                 </svg>

diff --git a/themes/landing/components/Newsletter.js b/themes/landing/components/Newsletter.js
@@ -37,8 +37,8 @@ export default function Newsletter() {
 
                 {/* CTA content */}
                 <div className="text-center lg:text-left lg:max-w-xl">
-                  <h3 className="h3 text-white mb-2">Want more tutorials & guides?</h3>
-                  <p className="text-gray-300 text-lg mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit nemo expedita voluptas culpa sapiente.</p>
+                  <h3 className="h3 text-white mb-2">需要更多的教程和帮助?</h3>
+                  <p className="text-gray-300 text-lg mb-6">请留下您的电子邮件，我会第一时间与您取得联系</p>
 
                   {/* CTA form */}
                   <form className="w-full lg:w-auto">
@@ -48,7 +48,7 @@ export default function Newsletter() {
                     </div>
                     {/* Success message */}
                     {/* <p className="text-sm text-gray-400 mt-3">Thanks for subscribing!</p> */}
-                    <p className="text-sm text-gray-400 mt-3">No spam. You can unsubscribe at any time.</p>
+                    <p className="text-sm text-gray-400 mt-3">没有垃圾邮件，您可以随时取消订阅</p>
                   </form>
                 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -139,7 +139,7 @@ export default function Footer() { @@
               </ul>
               {/* Copyrights note */}
-              <div className="text-sm text-gray-600 mr-4">&copy; Cruip.com. All rights reserved.</div>
+              <div className="text-sm text-gray-600 mr-4">&copy; NotionNext. All rights reserved.</div>
             </div>
@@ Expand Down @@