From 8a201636624e9c2f6a763e042ffd3560c41513da Mon Sep 17 00:00:00 2001
From: Akos Olasz <olaszakos@gmail.com>
Date: Mon, 10 Jul 2023 12:07:17 +0200
Subject: [PATCH] hero update wip for preview

---
 .../LandingPage/PreHero/ParticleAnimation.tsx |   5 -
 src/components/LandingPage/PreHero/index.tsx  | 163 +++++++++++++-----
 src/pages/index.tsx                           |  18 +-
 tailwind.config.js                            |   2 +
 4 files changed, 128 insertions(+), 60 deletions(-)

diff --git a/src/components/LandingPage/PreHero/ParticleAnimation.tsx b/src/components/LandingPage/PreHero/ParticleAnimation.tsx
index 57f449f286..74bccc671a 100644
--- a/src/components/LandingPage/PreHero/ParticleAnimation.tsx
+++ b/src/components/LandingPage/PreHero/ParticleAnimation.tsx
@@ -38,13 +38,11 @@ const ParticleAnimation: React.FC<{
   debugColors?: boolean;
   paintParticles?: boolean;
   animate: boolean;
-  blur: MotionValue<string>;
 }> = ({
   debugForces = false,
   debugColors = false,
   paintParticles = true,
   animate,
-  blur,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [particles, setParticles] = useState<Particle[]>([]);
@@ -235,9 +233,6 @@ const ParticleAnimation: React.FC<{
     <motion.canvas
       className="w-full h-screen fixed inset-0 bg-[#1B025A]"
       ref={canvasRef}
-      style={{
-        filter: blur,
-      }}
     ></motion.canvas>
   );
 };
diff --git a/src/components/LandingPage/PreHero/index.tsx b/src/components/LandingPage/PreHero/index.tsx
index 398ddd23cf..945680c840 100644
--- a/src/components/LandingPage/PreHero/index.tsx
+++ b/src/components/LandingPage/PreHero/index.tsx
@@ -10,6 +10,7 @@ import {
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import AnimateSpawn from "../../Common/AnimateSpawn";
 import DarkHeroStyles from "../../Common/DarkHeroStyles";
+import LinkArrowRight from "../../Common/Icons/LinkArrowRight";
 import LinkArrowUpRight from "../../Common/Icons/LinkArrowUpRight";
 import { OnChainBadge } from "../../Common/OnChainBadge/OnChainBadge";
 import { Facts } from "./Facts";
@@ -38,15 +39,15 @@ const PreHero: React.FC<{
     offset: ["end end", "end start"],
   });
 
-  const blurSize = useTransform(scrollYProgress, [0.3, 0.66], [0, 50]);
+  // const blurSize = useTransform(scrollYProgress, [0.3, 0.66], [0, 50]);
   const blobOpacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
 
-  const blur = useMotionTemplate`blur(${blurSize}px)`;
+  // const blur = useMotionTemplate`blur(${blurSize}px)`;
 
   return (
     <section className=" bg-[#1B025A]" id="home" ref={darkRef}>
       {isDark && <DarkHeroStyles bgColor="transparent" />}
-      <ParticleAnimation animate={animate} blur={blur}></ParticleAnimation>
+      <ParticleAnimation animate={animate}></ParticleAnimation>
 
       <div
         className="overflow-hidden relative"
@@ -55,7 +56,7 @@ const PreHero: React.FC<{
         }}
       >
         <div
-          className="relative w-screen h-screen flex items-center"
+          className="relative w-screen md:h-screen pt-48 md:pt-0 flex items-center"
           ref={headlineRef}
         >
           <motion.img
@@ -66,33 +67,96 @@ const PreHero: React.FC<{
               opacity: blobOpacity,
             }}
           ></motion.img>
-          <div className="container-10 text-center">
+          <div className="container-12 text-center w-full">
             <motion.div
-              className="animate-scale-in"
+              className="animate-scale-in mb-20 md:mb-24"
               style={{
                 animationPlayState: start ? "running" : "paused",
-                opacity: blobOpacity,
               }}
             >
-              <h1 className="tw-heading-3 md:tw-heading-2 lg:tw-heading-1 text-white mb-4 lg:mb-6">
-                {headline}
-              </h1>
-              <p className="tw-heading-5 md:tw-heading-3 lg:tw-heading-60 text-white mb-0 grid">
+              <img
+                src="/img/IC_logo_horizontal_white.svg"
+                alt=""
+                className="w-[177px] md:w-[330px] lg:w-[440px] mb-3"
+              />
+              <h1 className="tw-heading-3 md:tw-heading-2 lg:tw-heading-1 text-white mb-6 md:mb-8 grid">
+                {/* {headline} */}
                 <RotatedHeadline lines={straps} interval={2000} />
-              </p>
+              </h1>
+
+              <div>
+                <Link
+                  className="button-outline-white"
+                  href="/docs/current/home"
+                >
+                  Start building
+                </Link>
+              </div>
             </motion.div>
 
             <motion.div
-              className="animate-fade-up relative"
+              className="animate-fade-in -mx-6 md:mx-0 md:rounded-[32px] px-6 py-10 md:p-10 text-white flex flex-col md:flex-row justify-between self-stretch"
               style={{
                 animationDelay: "1500ms",
                 animationPlayState: start ? "running" : "paused",
-                opacity: blobOpacity,
+                backdropFilter: "blur(50px)",
               }}
-            ></motion.div>
+            >
+              <div className="flex-1 text-white text-left md:text-center flex flex-row items-center">
+                <div className="flex-1">
+                  <div className="text-white/60 tw-button-sm md:tw-heading-7-caps mb-1">
+                    Internet Identity
+                  </div>
+                  <h2 className="tw-lead-lg lg:tw-title-sm mb-0 md:mb-8">
+                    Web3 world ID
+                  </h2>
+                </div>
+                <Link
+                  href="/internet-identity"
+                  className="rounded-full border-white/30 border-solid border-2 inline-flex items-center justify-center w-7 h-7 md:w-10 md:h-10 text-white hover:text-white hover:bg-infinite hover:no-underline hover:border-infinite transition-all duration-200"
+                >
+                  <LinkArrowRight className="w-4 md:w-auto" />
+                </Link>
+              </div>
+              <div className="w-full h-px bg-white/20 md:w-px md:h-auto my-6 md:my-0 md:mx-8"></div>
+              <div className="flex-1 text-white text-left md:text-center flex flex-row items-center">
+                <div className="flex-1">
+                  <div className="text-white/60 tw-button-sm md:tw-heading-7-caps mb-1">
+                    Open Internet Services
+                  </div>
+                  <h2 className="tw-lead-lg lg:tw-title-sm mb-0 md:mb-8">
+                    User-run Web3
+                  </h2>
+                </div>
+                <Link
+                  href="/openchat"
+                  className="rounded-full border-white/30 border-solid border-2 inline-flex items-center justify-center w-7 h-7 md:w-10 md:h-10 text-white hover:text-white hover:bg-infinite hover:no-underline hover:border-infinite transition-all duration-200"
+                >
+                  <LinkArrowRight className="w-4 md:w-auto" />
+                </Link>
+              </div>
+              <div className="w-full h-px bg-white/20 md:w-px md:h-auto my-6 md:my-0 md:mx-8"></div>
+
+              <div className="flex-1 text-white text-left md:text-center flex flex-row items-center">
+                <div className="flex-1">
+                  <div className="text-white/60 tw-button-sm md:tw-heading-7-caps mb-1">
+                    Internet Identity
+                  </div>
+                  <h2 className="tw-lead-lg lg:tw-title-sm mb-0 md:mb-8">
+                    Web3 world ID
+                  </h2>
+                </div>
+                <Link
+                  href="/enterprise"
+                  className="rounded-full border-white/30 border-solid border-2 inline-flex items-center justify-center w-7 h-7 md:w-10 md:h-10 text-white hover:text-white hover:bg-infinite hover:no-underline hover:border-infinite transition-all duration-200"
+                >
+                  <LinkArrowRight className="w-4 md:w-auto" />
+                </Link>
+              </div>
+            </motion.div>
           </div>
 
-          <div className="absolute bottom-6 right-6 md:bottom-20 md:right-20">
+          {/* <div className="absolute bottom-6 right-6 md:bottom-20 md:right-20">
             <motion.div
               className="animate-fade-in"
               style={{
@@ -103,9 +167,9 @@ const PreHero: React.FC<{
             >
               <OnChainBadge sizeClasses="w-20 h-20 md:w-32 md:h-32"></OnChainBadge>
             </motion.div>
-          </div>
+          </div> */}
 
-          <motion.button
+          {/* <motion.button
             className="bg-transparent appearance-none border-none p-0 m-0 animate-fade-in left-1/2 -translate-x-1/2 bottom-[10vh] md:bottom-[5vh] absolute w-12 h-12 md:w-[70px] md:h-[70px] rounded-xl backdrop-blur-xl flex items-center justify-center"
             onClick={() => {
               document.getElementById("stats").scrollIntoView();
@@ -143,40 +207,47 @@ const PreHero: React.FC<{
                 </linearGradient>
               </defs>
             </svg>
-          </motion.button>
+          </motion.button> */}
         </div>
         <div
-          className="tw-heading-5 text-white relative py-20 md:pt-40 pb-56 md:pb-80 container-12"
+          className="tw-heading-5 text-white relative md:pt-40 pb-56 md:pb-80 container-12"
           ref={heroRef}
           id="stats"
         >
-          <Facts />
-          <AnimateSpawn
-            variants={transitions.container}
-            className="container-10 bg-black-30 rounded-xl pb-30 pt-8 md:py-0 md:h-60 flex items-center relative overflow-hidden"
+          <div
+            className="-mx-6 md:mx-0 px-6 md:rounded-[32px] pt-20 md:pt-30"
+            style={{
+              backdropFilter: "blur(50px)",
+            }}
           >
-            <div className="md:mx-1/10 flex flex-col justify-center gap-8 items-start">
-              <Link
-                className="button-outline-white text-center sm:text-left"
-                href="https://dashboard.internetcomputer.org"
-              >
-                INTERNET COMPUTER DASHBOARD
-              </Link>
-              <Link
-                href="https://wiki.internetcomputer.org/wiki/L1_comparison"
-                className="link-primary-light link-with-icon"
-              >
-                Comparison of Layer-1 blockchains
-                <LinkArrowUpRight />
-              </Link>
-            </div>
-            <img
-              src="/img/home/dashboard.svg"
-              className="absolute right-0 bottom-0 pointer-events-none"
-              loading="lazy"
-              alt=""
-            ></img>
-          </AnimateSpawn>
+            <Facts />
+            <AnimateSpawn
+              variants={transitions.container}
+              className="container-10 bg-black-30 rounded-b-xl pb-30 pt-8 md:py-0 md:h-60 flex items-center relative overflow-hidden"
+            >
+              <div className="md:mx-1/10 flex flex-col justify-center gap-8 items-start">
+                <Link
+                  className="button-outline-white text-center sm:text-left"
+                  href="https://dashboard.internetcomputer.org"
+                >
+                  INTERNET COMPUTER DASHBOARD
+                </Link>
+                <Link
+                  href="https://wiki.internetcomputer.org/wiki/L1_comparison"
+                  className="link-primary-light link-with-icon"
+                >
+                  Comparison of Layer-1 blockchains
+                  <LinkArrowUpRight />
+                </Link>
+              </div>
+              <img
+                src="/img/home/dashboard.svg"
+                className="absolute right-0 bottom-0 pointer-events-none"
+                loading="lazy"
+                alt=""
+              ></img>
+            </AnimateSpawn>
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e2b9290281..56dbe2af75 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -28,16 +28,16 @@ export default function Home(): JSX.Element {
     >
       <QueryClientProvider client={queryClient}>
         <PreHero
-          headline="World Computer"
+          headline="build on the network"
           straps={[
-            "Build on the network",
-            "Autonomous code",
-            "Unstoppable code",
-            "Native multi-chain",
-            "Security by design",
-            "No firewalls needed",
-            "Privacy by design",
-            "Decentralize control",
+            "build on the network",
+            "autonomous code",
+            "unstoppable code",
+            "native multi-chain",
+            "security by design",
+            "no firewalls needed",
+            "privacy by design",
+            "decentralize control",
           ]}
         ></PreHero>
       </QueryClientProvider>
diff --git a/tailwind.config.js b/tailwind.config.js
index 49f07d1ffe..85f42cd535 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -180,6 +180,8 @@ module.exports = {
                 ".tw-heading-6": "@apply text-heading-6 font-bold",
                 ".tw-heading-7": "@apply text-heading-7 font-bold",
                 ".tw-heading-7-caps": "@apply text-heading-7-caps font-bold uppercase tracking-[1px]",
+                ".tw-button-sm": "@apply text-paragraph-sm font-bold tracking-[1px] uppercase",
+
 
                 //
                 ".tw-title-navigation": "@apply text-navigation font-medium",