feat: add headhero

feature-sh · Feb 24, 2023 · 8bf4592 · 8bf4592
1 parent 8ba228f
commit 8bf4592
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 76 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -30,14 +30,6 @@ const solutions = [
     href: 'https://docs.feature.sh',
     icon: BookOpenIcon,
   },
-  /*
-  {
-    name: 'Blog',
-    description: "Your customers' data will be safe and secure.",
-    href: '#',
-    icon: ChatIcon,
-  },
-  */
 ]
 const resources = [
   {
@@ -103,29 +95,23 @@ const Header: React.FC = () => {
         </div>
         <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
           <Popover.Group as="nav" className="flex space-x-10">
-            <Link
-              href="/features"
-              className="text-base font-medium text-neutral-200 hover:text-white"
-            >
-              {translate('navitem_features')}
-            </Link>
             <Link
               href="https://docs.feature.sh"
-              className="ml-8 text-base font-medium text-neutral-200 hover:text-white"
+              className="ml-8 text-base font-medium text-black hover:text-green-700"
             >
               {translate('navitem_docs')}
             </Link>
           </Popover.Group>
           <div className="flex items-center md:ml-12">
             <Link
               href="https://v1.dashboard.feature.sh"
-              className="ml-8 text-base font-medium text-neutral-200 hover:text-white"
+              className="ml-8 text-base font-medium text-black hover:text-red-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 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-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-red-700"
             >
               {translate('navitem_book')}
             </Link>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -47,6 +47,13 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
           })(window,document,'script','dataLayer','GTM-5QL9D3K');
         `}
       </Script>
+      <link
+        rel="preload"
+        href="Hubot-Sans.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="true"
+      ></link>
       {withLayout(<Component {...pageProps} />)}
     </>
   )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -31,62 +31,18 @@ const HeroSection: React.FC = () => {
   const { t: translate } = useTranslation('homepage')
 
   return (
-    <section className="relative min-h-[70vh] overflow-hidden pb-4">
-      <div className="absolute -right-14 -top-14 flex justify-center">
-        <Image
-          src="/logos/github.svg"
-          height={850}
-          width={850}
-          alt="Github logo"
-        />
-      </div>
-
-      <div className="relative z-10 flex min-h-[70vh] items-center pt-32 lg:px-4 lg:pt-8">
-        <div className="w-full lg:grid lg:grid-cols-5 lg:gap-8 lg:px-12">
-          <div className="px-2 sm:px-6 sm:text-center lg:col-span-3 lg:flex lg:items-center lg:px-0 lg:text-left">
-            <div className="lg:py-2 lg:pl-16">
-              <h1 className="mt-4 flex flex-col gap-y-2 text-center text-4xl font-extrabold tracking-tight text-white sm:mt-5 sm:text-5xl lg:mt-6 lg:text-left xl:text-6xl">
-                <span className="block whitespace-pre-line">
-                  {translate('hero_heading_part1')}
-                </span>
-                <span className="block text-indigo-400">
-                  {translate('hero_heading_part2')}
-                </span>
-              </h1>
-              <p className="mt-3 whitespace-pre-line text-center text-base text-gray-300 sm:mt-5 sm:text-xl lg:max-w-3xl lg:text-left lg:text-lg xl:text-xl">
-                {translate('hero_subheading')}
-              </p>
-              <div className="mx-auto mt-10 sm:mt-12">
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
-                  <a
-                    href={process.env.NEXT_PUBLIC_DAPP_BASE_URL || '#'}
-                    className="inline-flex flex-1 items-center justify-center rounded-md border border-transparent border-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
-                  >
-                    {translate('hero_try_free')}
-                  </a>
-                  <a
-                    href={
-                      process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'
-                    }
-                    className="inline-flex flex-1 items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
-                  >
-                    {translate('hero_button_book_demo')}
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center justify-center py-8 lg:col-span-2 lg:py-0">
-            <Image
-              src="/hero_snippet.png"
-              width={579}
-              height={377}
-              alt="Snippet code"
-            />
-          </div>
+    <>
+      <div className="px-6 py-24 sm:py-32 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="hubot-sans text-6xl font-black tracking-tight text-gray-900 sm:text-6xl">
+            WEB3 DEVTOOL
+          </h2>
+          <p className="mt-1 text-lg leading-8 text-gray-600">
+            🏁The Fatest Way to Fix Github Issues 🐙 for Open Source Project 🦄
+          </p>
         </div>
       </div>
-    </section>
+    </>
   )
 }
 

diff --git a/public/Hubot-Sans.woff b/public/Hubot-Sans.woff
diff --git a/public/Hubot-Sans.woff2 b/public/Hubot-Sans.woff2
diff --git a/public/locales/en-US/header.json b/public/locales/en-US/header.json
@@ -2,7 +2,7 @@
 	"navitem_product": "Product",
 	"navitem_features": "Product",
 	"navitem_blog": "Blog",
-	"navitem_docs": "Docs",
+	"navitem_docs": "Docs ↗",
 	"navitem_dashboard": "Sign In",
 	"navitem_book": "Book a Demo",
 	"navitem_pricing": "Pricing"

diff --git a/public/locales/fr/header.json b/public/locales/fr/header.json
@@ -2,7 +2,7 @@
 	"navitem_product": "Produit",
 	"navitem_features": "Produit",
 	"navitem_blog": "Blog",
-	"navitem_docs": "Docs",
+	"navitem_docs": "Docs ↗",
 	"navitem_dashboard": "Se Connecter",
 	"navitem_book": "Réserver une Démo",
 	"navitem_pricing": "Prix"

diff --git a/styles/globals.css b/styles/globals.css
@@ -2,8 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+    font-family: 'Hubot Sans';
+    src:
+      url('../public/Hubot-Sans.woff2') format('woff2 supports variations'),
+      url('../public/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
 html, body, #__next {
     height: 100%;
-    background: linear-gradient(90deg, #000 calc(100% - 1px), #fdcece 0);
-    background-size: calc((100% - 11px)/12 + 11px) 100%;
-}
+    background: linear-gradient(90deg, #fff calc(100% - 1px), #fdcece 0);
+    background-size: calc((100% - 11*11px)/12 + 11px) 100%;
+}
+
+.hubot-sans {
+    font-family: 'Hubot Sans', sans-serif;
+    font-weight: 900;
+    font-stretch: 125%;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        hubot: ['Hubot Sans', 'sans-serif'],
+      },
       keyframes: {
         growingFadeIn: {
           from: { opacity: '0', transform: 'scale(0.95)' },