Hero section tweaks (#17)

packages/nextjs/.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

packages/nextjs/components/Footer.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
  */
 export const Footer = () => {
   return (
-    <div className="bg-[#182232] lg:p-12 p-8 flex items-center justify-center">
+    <div className="bg-[#182232] lg:p-12 p-8 flex items-center justify-center text-[16px]">
       <div className="grid grid-cols-12 lg:gap-8 gap-3 max-w-7xl">
         <div className="col-span-12 lg:col-span-6 flex flex-col">
           <div className="flex flex-col">

packages/nextjs/components/Header.tsx

@@ -8,15 +8,15 @@ import TrackedLink from "~~/components/TrackedLink";
  */
 export const Header = () => {
   return (
-    <div className="navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 py-4">
+    <div className="navbar min-h-0 flex-shrink-0 justify-between px-0 py-4 pb-8 md:pb-4 sm:px-2 bg-[#EFFBCA]">
       <div className="navbar-start w-auto lg:w-1/2">
         <Link href="/" passHref className="flex items-center gap-2 ml-4 mr-6">
           <div className="flex relative w-[130px] md:w-[150px] h-[36px]">
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
         </Link>
       </div>
-      <div className="navbar-end flex-grow mr-4 space-x-6">
+      <div className="navbar-end flex-grow mr-4 space-x-6 z-10">
         <TrackedLink
           id="buidlguidl:app"
           href="https://app.buidlguidl.com"

packages/nextjs/pages/index.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import type { GetStaticProps, NextPage } from "next";
 import { BuildCard } from "~~/components/BuildCard";
 import { Card } from "~~/components/ChallengeCard";
@@ -23,18 +24,32 @@ const Home: NextPage<{ stats: Stats }> = ({ stats }) => {
     <>
       <MetaHeader />
       {/* Hero section with header */}
-      <div className="bg-[url(/assets/hero.png)] min-h-screen bg-cover bg-center">
+      <div className="relative h-[70vh] md:min-h-screen flex flex-col">
+        <div className="absolute h-1/4 w-full top-0 left-0 hero-top-gradient"></div>
         <Header />
-        <div className="flex justify-center">
-          <h1 className="text-center text-3xl lg:text-5xl mt-6 lg:mt-8 max-w-md lg:max-w-2xl px-3">
-            Learn, build, and thrive on Ethereum
-          </h1>
+        <div className="bg-[url(/assets/hero.png)] bg-[#EFFBCA] bg-cover md:bg-center bg-[position:40%_0] flex-grow">
+          <div className="flex justify-center">
+            <h1 className="text-center z-10 text-2xl max-w-xs lg:text-5xl lg:mt-8 lg:max-w-2xl px-3">
+              Learn, build, and thrive on Ethereum
+            </h1>
+          </div>
+        </div>
+        <div className="absolute h-1/4 w-full bottom-0 left-0 hero-bottom-gradient flex items-end justify-center">
+          <Link href="#start-building-on-ethereum" className="hidden lg:block">
+            <Image
+              src="/assets/down-arrow.svg"
+              alt="diamon icon"
+              width={25}
+              height={25}
+              className="mb-3 cursor-pointer animate-bounce-interval"
+            />
+          </Link>
         </div>
       </div>
 
       {/* Star Building on Ethereum */}
-      <div className="bg-white">
-        <div className="container max-w-[90%] lg:max-w-6xl m-auto py-16 lg:py-20 lg:px-12 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
+      <div className="bg-white" id="start-building-on-ethereum">
+        <div className="container max-w-[90%] lg:max-w-6xl m-auto py-12 lg:py-20 lg:px-12 flex flex-col lg:flex-row items-center gap-5 lg:gap-0">
           <div className="space-y-6">
             <h2 className="text-3xl lg:text-5xl lg:w-3/4 text-center lg:text-left">Start Building on Ethereum</h2>
             <ul className="list-disc list-inside flex flex-col space-y-3 m-auto lg:mx-0 max-w-[300px] lg:max-w-none">

packages/nextjs/styles/globals.css

@@ -17,6 +17,7 @@
 
 html {
   font-size: 18px;
+  scroll-behavior: smooth !important;
 }
 
 :root,
@@ -54,3 +55,12 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+.hero-top-gradient {
+  background: linear-gradient(180deg, #c3dbff 0%, rgba(217, 235, 229, 0.51) 66.15%, rgba(239, 251, 202, 0) 100%);
+}
+
+.hero-bottom-gradient {
+  background: linear-gradient(0deg, rgba(24, 34, 50, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+  background-blend-mode: multiply;
+}

packages/nextjs/tailwind.config.js

@@ -71,6 +71,24 @@ module.exports = {
         "space-grotesk": ["Space Grotesk", "sans-serif"],
         "neue-machina": ["PPNeueMachina", "sans-serif"],
       },
+      keyframes: {
+        "bounce-interval": {
+          "0%, 12.5%, 25%, 37.5%, 50%": {
+            transform: "translateY(-25%)",
+            "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)",
+          },
+          "6.25%, 18.75%, 31.25%, 43.5%": {
+            transform: "translateY(0)",
+            "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)",
+          },
+          "100%": {
+            transform: "translateY(-25%)",
+          },
+        },
+      },
+      animation: {
+        "bounce-interval": "bounce-interval 10s infinite",
+      },
     },
   },
 };