Fix Overflow Issue and Experiment GIF for Hero Animation on Webbsite (#…

…1580)

.gitignore

@@ -82,6 +82,7 @@ tmp
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/tailwind.json
 
 # Local Netlify folder
 .netlify

.vscode/settings.json

@@ -7,5 +7,10 @@
     ["twMerge\\(([^)]*)\\)", "'([^']*)'"]
   ],
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  // https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394
+  "css.customData": [".vscode/tailwind.json"],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

apps/webbsite/src/components/Header.tsx

@@ -57,9 +57,12 @@ export const Header = () => {
 
   return (
     <header
-      className={cx('sticky top-0 z-50 w-full bg-mono-0 min-h-[72px]', {
-        'webb-shadow-sm': scrolled,
-      })}
+      className={cx(
+        'sticky top-0 z-50 w-full bg-mono-0 h-[var(--header-height)]',
+        {
+          'webb-shadow-sm': scrolled,
+        }
+      )}
     >
       <div className="max-w-[1200px] mx-auto p-4 flex items-center justify-between">
         <Link href="/">

apps/webbsite/src/components/sections/HeroSection.tsx

@@ -1,35 +1,39 @@
 import { Button, Typography } from '@webb-tools/webb-ui-components';
+import { twMerge } from 'tailwind-merge';
 
 const manifestoUrl = 'https://docs.webb.tools/docs/overview/privacy-manifesto/';
 
 export const HeroSection = () => {
   return (
-    <section className="absolute w-full -translate-y-1/3 top-1/4">
-      <div className="max-w-[454px] md:max-w-[934px] space-y-2 p-4 mx-auto w-full lg:p-0 md:space-y-6">
-        <Typography
-          variant="mkt-h1"
-          className="text-center text-mono-200 font-black"
-        >
-          Privacy that Brings Blockchains Together{' '}
-        </Typography>
+    <section
+      className={twMerge(
+        'z-10 space-y-2 p-4 mx-auto w-full lg:p-0 md:space-y-6',
+        'max-w-[454px] md:max-w-[934px] relative -top-[var(--header-height)]'
+      )}
+    >
+      <Typography
+        variant="mkt-h1"
+        className="font-black text-center text-mono-200"
+      >
+        Privacy that Brings Blockchains Together{' '}
+      </Typography>
 
-        <Typography
-          variant="mkt-subheading"
-          className="text-center text-mono-140 font-medium !mt-[24px]"
-        >
-          Webb builds infrastructure for connecting zero-knowledge applications
-          empowering developers to unlock user privacy in the Web3 ecosystem.
-        </Typography>
+      <Typography
+        variant="mkt-subheading"
+        className="text-center text-mono-140 font-medium !mt-[24px]"
+      >
+        Webb builds infrastructure for connecting zero-knowledge applications
+        empowering developers to unlock user privacy in the Web3 ecosystem.
+      </Typography>
 
-        <Button
-          href={manifestoUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="block mx-auto button-base button-primary !mt-[24px]"
-        >
-          Read the Manifesto
-        </Button>
-      </div>
+      <Button
+        href={manifestoUrl}
+        target="_blank"
+        rel="noreferrer"
+        className="block mx-auto button-base button-primary !mt-[24px]"
+      >
+        Read the Manifesto
+      </Button>
     </section>
   );
 };

apps/webbsite/src/components/sections/PrivacyConnectedSection.tsx

@@ -37,19 +37,19 @@ export const PrivacyConnectedSection = () => {
   const [activeTab, setActiveTab] = useState<TabTypes>('ownership');
 
   return (
-    <section className="max-w-[932px] mx-auto md:py-[156px] flex flex-col justify-center w-full">
+    <section className="max-w-[932px] mx-auto pt-16 md:py-[156px] flex flex-col justify-center w-full">
       <ChainIcon name="webb" size="lg" className="mx-auto" />
 
       <Typography
         variant="mkt-h3"
-        className="px-4 mt-6 text-center text-mono-200 font-black"
+        className="px-4 mt-6 font-black text-center text-mono-200"
       >
         The Future of privacy is Connected
       </Typography>
 
       <Typography
         variant="mkt-body1"
-        className="px-4 mt-6 text-center md:mt-9 text-mono-140 font-medium"
+        className="px-4 mt-6 font-medium text-center md:mt-9 text-mono-140"
       >
         Connecting private applications across chains allows us to scale the
         size of privacy sets to encompass all the users and data possible in our

apps/webbsite/src/pages/index.tsx

@@ -1,6 +1,5 @@
 import { NextSeo } from 'next-seo';
-import Lottie from 'react-lottie-player';
-
+import { twMerge } from 'tailwind-merge';
 import {
   ApplicationsAndInfrastructureSection,
   HeroSection,
@@ -26,14 +25,30 @@ export function Index() {
         }}
       />
 
-      <div className="relative w-full">
-        <Lottie
+      <div
+        className={twMerge(
+          'flex items-center justify-center',
+          'w-screen h-[calc(100vh-var(--header-height))]',
+          'bg-[url(/animations/hero-loop.gif)] bg-cover bg-center bg-no-repeat)]'
+        )}
+      >
+        {/*         <Lottie
           path="/animations/hero-loop.json"
           play
           loop
-          className="w-full h-full"
+          className="absolute inset-0"
           rendererSettings={{ preserveAspectRatio: 'xMidYMax slice' }}
-        />
+        /> */}
+        {/* <Image
+          className="object-cover"
+          src={'/animations/hero-loop.gif'}
+          sizes="(max-width: 1024px) 100vw, 50vw"
+          fill
+          priority
+          alt={`Hero loop animation`}
+          unoptimized={true}
+        /> */}
+
         <HeroSection />
       </div>
 

apps/webbsite/src/styles/globals.css

@@ -1,3 +1,5 @@
+@import './variables.css';
+
 #__next {
   background-color: #fff;
 }

apps/webbsite/src/styles/variables.css

@@ -0,0 +1,3 @@
+:root {
+  --header-height: 79px;
+}