home page metrics rework WIP (dfinity#1022)

* home page metrics rework WIP * updated post-hero section * live stats wip * live hero stats * ping workflow * Update index.tsx * update network stats & home page * change headline; fix css error * fix background panel anim * fix background panel fade in/out * update copy * fix occluded button in hero
rumenov · Feb 10, 2023 · 2624883 · 2624883
1 parent 1ab4603
commit 2624883
Show file tree

Hide file tree

Showing 23 changed files with 1,199 additions and 485 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -13,6 +13,7 @@ const simplePlantUML = require("@akebifiky/remark-simple-plantuml");
 const showcaseProjectsPlugin = require("./plugins/showcase-projects");
 const homeShowcaseProjectsPlugin = require("./plugins/home-showcase");
 const icpPricePlugin = require("./plugins/icp-price");
+const xdrPricePlugin = require("./plugins/xdr-price");
 const tailwindPlugin = require("./plugins/tailwind");
 const matomoPlugin = require("./plugins/matomo");
 const customWebpack = require("./plugins/custom-webpack");
@@ -60,6 +61,7 @@ const config = {
     customWebpack,
     tailwindPlugin,
     icpPricePlugin,
+    xdrPricePlugin,
     showcaseProjectsPlugin,
     homeShowcaseProjectsPlugin,
     liveSessionsPlugin,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "docusaurus-plugin-sass": "^0.2.2",
     "docusaurus2-dotenv": "^1.4.0",
     "dotenv": "^16.0.1",
-    "framer-motion": "^6.3.3",
+    "framer-motion": "^6.5.1",
     "hast-util-is-element": "^1.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.0.18",
@@ -47,6 +47,7 @@
     "react-dom": "^16.14.0",
     "react-intersection-observer": "^9.1.0",
     "react-lottie-player": "^1.4.3",
+    "react-query": "^3.39.3",
     "rehype-katex": "^5.0.0",
     "remark-math": "^3.0.1",
     "sass": "^1.53.0",

diff --git a/plugins/data/home-showcase-mock.json b/plugins/data/home-showcase-mock.json
@@ -54,12 +54,5 @@
     "website": "https://entrepot.app/",
     "stats": "1,000,000+ ICP volume",
     "logo": "//images.ctfassets.net/ywqk17d3hsnp/1WQuOFrpDWO0OIY2ZzCk09/611027edce39d99e9414a9eecd6452f5/Entrepot_2.png"
-  },
-  {
-    "name": "Infinity Swap",
-    "oneLiner": "A wallet to store and manage NFTs, Tokens, and connect to dApps on the Internet Computer.",
-    "website": "https://wallet.infinityswap.one/",
-    "stats": "",
-    "logo": "//images.ctfassets.net/ywqk17d3hsnp/6cuL0E5FyxdqF7DLzjMXnu/4e5898a86ecf8b05c35e623538c2ad14/InfinitySwap.jpeg"
   }
 ]
diff --git a/plugins/xdr-price.js b/plugins/xdr-price.js
@@ -0,0 +1,17 @@
+const fetch = require("node-fetch-retry");
+
+/** @type {import('@docusaurus/types').PluginModule} */
+const xdrPricePlugin = async function (context, options) {
+  return {
+    name: "xdr-price",
+    async loadContent() {
+      return 1.33875;
+    },
+    async contentLoaded({ content, actions }) {
+      const { setGlobalData } = actions;
+      setGlobalData(content);
+    },
+  };
+};
+
+module.exports = xdrPricePlugin;
diff --git a/src/components/Basics/ItsGreen/index.tsx b/src/components/Basics/ItsGreen/index.tsx
@@ -67,7 +67,7 @@ const ComparedProject: React.FC<{
   return (
     <motion.figure
       key={project.logo}
-      className="flex gap-6 items-center"
+      className="flex gap-6 items-center mx-0"
       variants={{
         hidden: { opacity: 0 },
         show: { opacity: 1 },
@@ -144,14 +144,15 @@ const ItsGreen: React.FC<{ id?: string }> = ({ id }) => {
           variants={transitions.item}
           className="tw-paragraph md:tw-lead mb-8"
         >
-          Thanks to the unique architecture and novel cryptography of the Internet
-          Computer blockchain, it can host smart contract software, data, and
-          computation, with levels of efficiency competitive with traditional
-          software that runs on Big Tech's cloud services. Meanwhile, it is
-          currently tens of thousands of times more efficient than the next most
-          efficient blockchain. Web3 projects that incorporate Internet Computer
-          smart contracts can consequently dramatically lower their carbon
-          footprint, and help reduce climate change.
+          Thanks to the unique architecture and novel cryptography of the
+          Internet Computer blockchain, it can host smart contract software,
+          data, and computation, with levels of efficiency competitive with
+          traditional software that runs on Big Tech's cloud services.
+          Meanwhile, it is currently tens of thousands of times more efficient
+          than the next most efficient blockchain. Web3 projects that
+          incorporate Internet Computer smart contracts can consequently
+          dramatically lower their carbon footprint, and help reduce climate
+          change.
         </motion.p>
         <motion.p
           variants={transitions.item}
@@ -176,14 +177,14 @@ const ItsGreen: React.FC<{ id?: string }> = ({ id }) => {
         <Icon3 aria-hidden></Icon3>
 
         <motion.figure
-          className="space-y-3"
+          className="space-y-3 mx-0"
           variants={{
             hidden: { opacity: 0 },
             show: {
               opacity: 1,
               transition: {
                 delayChildren: 0,
-                staggerChildren: 0.2,
+                staggerChildren: 0.1,
               },
             },
           }}

diff --git a/src/components/Common/Newsletter/Newsletter.tsx b/src/components/Common/Newsletter/Newsletter.tsx
@@ -40,6 +40,7 @@ const Newsletter: React.FC<{
             >
               {fields.map((field) => (
                 <input
+                  key={field.name}
                   placeholder={field.placeholder}
                   name={field.name}
                   type={field.type}

diff --git a/src/components/LandingPage/BackgroundPanel/index.tsx b/src/components/LandingPage/BackgroundPanel/index.tsx
@@ -8,14 +8,14 @@ export const BackgroundPanelContext = React.createContext(false);
 const BackgroundPanel: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [ref, inView] = useInView({ threshold: 0.1 });
+  const [ref, inView] = useInView({ threshold: 0.2 });
 
   return (
-    <div className="from-[#A4497F] via-[#A4497F] to-transparent bg-gradient-to-b">
+    <div>
       {inView && <DarkHeroStyles bgColor="transparent" />}
       <div
         className={clsx(
-          "fixed z-[10] inset-0 pointer-events-none bg-gradient-to-bl from-[#e07934] via-[#964680] to-[#4421a0] transition-opacity",
+          "fixed z-[10] inset-0 pointer-events-none bg-gradient-to-bl from-[#e07934] via-[#964680] to-[#4421a0] transition-opacity duration-500",
           inView ? "opacity-100" : "opacity-0"
         )}
       ></div>
@@ -24,7 +24,6 @@ const BackgroundPanel: React.FC<{ children: React.ReactNode }> = ({
           {children}
         </BackgroundPanelContext.Provider>
       </div>
-      {/* </> */}
     </div>
   );
 };