feat: add build faster section

feature-sh · Feb 24, 2023 · 4d396e3 · 4d396e3
1 parent ab0d8a6
commit 4d396e3
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 79 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -59,32 +59,14 @@ const resources = [
 
 const Header: React.FC = () => {
   const { t: translate } = useTranslation('header')
-  const [isOpaque, setIsOpaque] = useState(true)
-
-  const handleScroll = () => {
-    setIsOpaque(window.scrollY > 20)
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll)
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
 
   return (
     <Popover>
       <div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
         <div>
           <Link passHref={true} href="/" className="flex">
             <span className="sr-only">Feature</span>
-            <Image
-              src="/logo.svg"
-              width={40}
-              height={40}
-              alt="feature's logo"
-            />
+            <Image src="/logo.svg" width={40} height={40} alt="FEATURE logo" />
           </Link>
         </div>
         <div className="-my-2 -mr-2 md:hidden">
@@ -105,13 +87,13 @@ const Header: React.FC = () => {
           <div className="flex items-center md:ml-12">
             <Link
               href="https://v1.dashboard.feature.sh"
-              className="ml-8 text-base font-medium text-black hover:text-red-700"
+              className="ml-8 text-base font-medium text-black hover:text-green-700"
             >
               {translate('navitem_dashboard')}
             </Link>
             <Link
               href={process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'}
-              className="ml-8 inline-flex items-center justify-center border border-transparent bg-black px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700"
+              className="ml-8 inline-flex items-center justify-center border border-transparent bg-black px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-700"
             >
               {translate('navitem_book')}
             </Link>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -32,74 +32,43 @@ const HeroSection: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-screen-xl px-4 py-32 lg:-mt-[90px] lg:flex lg:h-screen lg:items-center">
+      <div className="mx-auto px-4 py-32 lg:-mt-[90px] lg:flex lg:h-screen lg:items-center">
         <div className="mx-auto -mt-12 max-w-xl text-center">
-          <h2 className="hubot-sans text-6xl font-black tracking-tight text-gray-900 sm:text-6xl">
+          <h1 className="hubot-sans text-6xl font-black tracking-tight text-gray-900 sm:text-6xl">
             WEB3 DEVTOOL
-          </h2>
-          <p className="mt-1 font-inter text-lg font-extralight leading-8 text-black">
+          </h1>
+          <h2 className="mt-1 font-inter text-lg font-extralight leading-8 text-black">
             🏁The Fatest Way to Fix Github Issues 🐙 for Open Source Project 🦄
-          </p>
+          </h2>
         </div>
       </div>
     </>
   )
 }
 
-const VideoDemoSection: React.FC = () => {
+const BuildFasterSection: React.FC = () => {
   const { t: translate } = useTranslation('homepage')
-  const [selectedDemo, setSelectedDemo] = useState<VideoDemo>(videoDemos[0])
-
-  const handleDemoChange = (demo: VideoDemo) => {
-    setSelectedDemo(demo)
-  }
 
   return (
-    <section className="flex flex-col justify-center bg-gray-100 p-8 py-16 text-center lg:py-24">
-      <h2 className="text-2xl font-normal font-bold uppercase sm:text-3xl xl:text-4xl">
-        {translate('video_demo_subheading')}
-      </h2>
-      <h3 className="mt-4 text-3xl font-bold sm:text-4xl xl:text-5xl">
-        {translate('video_demo_heading')}
-      </h3>
-      <p className="text-md mx-auto mt-6 max-w-7xl whitespace-pre-line text-gray-800 sm:text-lg lg:text-xl xl:text-2xl">
-        {translate('video_demo_description')}
-      </p>
-      <div className="start mt-8 flex flex-wrap items-start justify-center gap-y-4 gap-x-4 md:gap-x-8">
-        {videoDemos.map((demo) => (
-          <button
-            key={demo.label}
-            className={`${
-              selectedDemo === demo ? 'opacity-1' : 'opacity-80'
-            } sm:text-md  block rounded-md bg-indigo-600 px-4 py-3 font-medium text-white shadow hover:opacity-100 focus:outline-none lg:text-lg xl:text-xl`}
-            onClick={() => {
-              handleDemoChange(demo)
-            }}
-          >
-            {translate(demo.label)}
-          </button>
-        ))}
+    <section className="grid grid-cols-12">
+      <div className="hubot-sans2 col-span-4 col-start-3 row-span-3 border-[1px] border-r-0 border-black text-8xl font-extrabold">
+        BUILD FASTER
+      </div>
+      <div className="mona-sans col-span-4 border-[1px] border-b-0 border-black p-7 text-center text-3xl font-extrabold">
+        Give Economic 🤑
+        <br />
+        Incentives to Contribute
+      </div>
+      <div className="mona-sans col-span-4 border-[1px] border-black p-7 text-center text-3xl font-extrabold">
+        Give Economic 🤑
+        <br />
+        Incentives to Contribute
+      </div>
+      <div className="mona-sans col-span-4 border-[1px]  border-t-0 border-black p-7 text-center text-3xl font-extrabold">
+        Pay Contributors
+        <br />
+        Automatically 🤖
       </div>
-      <Fade key={selectedDemo.label}>
-        <div className="mt-8 flex justify-center">
-          <div className="aspect-video relative max-w-full rounded p-2 md:w-3/4 xl:w-2/4">
-            <div className="absolute inset-0 translate-x-4 translate-y-4 border-4 border-indigo-500" />
-            <video
-              title={
-                selectedDemo.videoUrl.includes('polygon')
-                  ? 'Demo video for how to create a deal on the Polygon (Matic) blockchain with Feature Bot on a GitHub issue'
-                  : 'Demo video for how to create a deal on the Gnosis (xDai) blockchain with Feature Bot on a GitHub issue'
-              }
-              controls
-              autoPlay
-              className="relative z-10 h-full w-full drop-shadow-md"
-              src={selectedDemo.videoUrl}
-            >
-              Sorry, look like your browser can&#39;t play videos :(
-            </video>
-          </div>
-        </div>
-      </Fade>
     </section>
   )
 }
@@ -487,7 +456,7 @@ const Home: NextPageWithLayout = () => {
 
       <main>
         <HeroSection />
-        <VideoDemoSection />
+        <BuildFasterSection />
         <FeaturesSection />
         <BlockchainAvailable />
         <TestimonialSection n={10} slideInterval={3} />

diff --git a/public/Hubot-Sans.woff b/public/Hubot-Sans.woff
diff --git a/public/Mona-Sans.woff2 b/public/Mona-Sans.woff2
diff --git a/styles/globals.css b/styles/globals.css
@@ -13,15 +13,35 @@
     font-stretch: 75% 125%;
 }
 
+@font-face {
+    font-family: 'Mona Sans';
+    src:
+      url('../public/Mona-Sans.woff2') format('woff2 supports variations'),
+      url('../public/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+  }
 
 html, body, #__next {
     height: 100%;
-    background: linear-gradient(90deg, #fff calc(100% - 1px), #fdcece 0);
-    background-size: calc((100% - 11*11px)/12 + 11px) 100%;
+    background: linear-gradient(90deg,  #fdcece, white 1px);
+    background-size: calc(100% / 12) 100%;
 }
 
 .hubot-sans {
     font-family: 'Hubot Sans', sans-serif;
     font-weight: 900;
     font-stretch: 125%;
 }
+
+.hubot-sans2 {
+    font-family: 'Hubot Sans', sans-serif;
+    font-weight: 800;
+    font-stretch: 125%;
+}
+
+.mona-sans {
+    font-family: 'Mona Sans', sans-serif;
+    font-weight: 900;
+    font-stretch: 125%;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,9 @@ module.exports = {
     extend: {
       fontFamily: {
         hubot: ['Hubot Sans', 'sans-serif'],
+        hubot2: ['Hubot Sans', 'sans-serif'],
         inter: ['Inter', 'sans-serif'],
+        montserrat: ['Montserrat', 'sans-serif'],
       },
       keyframes: {
         growingFadeIn: {