Merge pull request #18 from capy-on-caffeine/hero

Hero section created

src/components/Hero/HeroSection.js

@@ -0,0 +1,51 @@
+import React, {useState} from "react";
+import heroText from "../../../public/images/HeroText.svg";
+import linkArrow from "../../../public/images/LinkArrow.svg";
+import regButton from "../../../public/images/RegisterButton.svg";
+import regButtonHover from "../../../public/images/RegisterButtonHover.svg";
+
+function HeroSection() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="relative w-full h-[1972px] bg-cover overflow-y-auto"
+      style={{ backgroundImage: "url('/images/HeroSection.svg')" }}
+    >
+      <div className="flex flex-col justify-center items-center relative top-[6rem]">
+        <div className="flex relative py-8">
+          <img
+            src={heroText.src}
+            alt="#"
+            style={{ mixBlendMode: "hard-light" }}
+            className="w-[22rem] sm:w-[40rem] lg:w-[60rem]"
+          />
+        </div>
+        <div className="font-Minecraft text-2xl sm:text-4xl lg:text-6xl font-normal flex relative py-8 flex-col justify-center items-center">
+          <div className="flex relative">THINK OUTSIDE THE BOX</div>
+          <div className="flex relative">HACK INSIDE IT</div>
+        </div>
+        <div className="flex relative flex-col justify-center items-center">
+          <div className="flex relative text-2xl font-bold font-Space-Grotesk">
+            Dig deeper
+          </div>
+          <div className="flex relative pb-6">
+            <img src={linkArrow.src} alt="#" />
+          </div>
+          <div className="flex relative" 
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {isHovered ? (
+              <img src={regButtonHover.src} alt="#" />
+            ) : (
+              <img src={regButton.src} alt="#" />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeroSection;

src/pages/index.js

@@ -10,6 +10,7 @@ import FAQ from "../components/FAQ/FAQ";
 import PrizeSection from "../components/PrizeSection";
 import Track from "../components/track";
 import Footer from "../components/Footer";
+import HeroSection from "../components/Hero/HeroSection";
 
 
 
@@ -43,6 +44,7 @@ export default function Home() {
 </div>
 
 <NavBar/>
+<HeroSection />
 <PrizeSection />
       <Testimonies />
       <Rules />

src/styles/globals.css

@@ -14,6 +14,11 @@
 /* // tailwind.css or your custom CSS file */
 @import url('https://fonts.googleapis.com/css2?family=Caveat&family=VT323&display=swap');
 
+@font-face {
+  font-family: "Minecraft";
+  src: url("../../public/minecraft.ttf");
+}
+
 
 
 html,

tailwind.config.js

@@ -20,6 +20,8 @@ module.exports = {
         "Space-Grotesk": ["Space Grotesk", "sans-serif"],
         "Plus-Jakarta": ["Plus Jakarta Sans", "sans-serif"],
         "Red-Hat-Display": ["Red Hat Display", "sans-serif"],
+        "Minecrafter": ["Minecrafter", "sans-serif"],
+        "Minecraft": ["Minecraft", "Minecrafter", "sans-serif"],
       },
       boxShadow: {
         "2xl": "3px 3px black",