feat: intro-text scroll animation & footer

aufacicenta · Jun 2, 2024 · 4657217 · 4657217
1 parent 033d1de
commit 4657217
Show file tree

Hide file tree

Showing 15 changed files with 322 additions and 121 deletions.
diff --git a/app/package.json b/app/package.json
@@ -34,6 +34,7 @@
     "ethers": "^6.12.0",
     "final-form": "^4.20.4",
     "final-form-arrays": "^3.0.2",
+    "gsap": "^3.12.5",
     "ipfs-http-client": "^60.0.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
@@ -52,6 +53,7 @@
     "react-transition-group": "^4.4.1",
     "rxjs": "^7.8.1",
     "siwe": "^2.1.4",
+    "split-type": "^0.3.4",
     "truncate-ethereum-address": "^0.3.0",
     "uuid": "^9.0.0",
     "viem": "^2.9.20",

diff --git a/app/src/pages/_document.tsx b/app/src/pages/_document.tsx
@@ -13,6 +13,8 @@ export default function Document() {
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:image" content="/svpervnder/og-image.png" />
 
+        <meta property="og:url" content="https://hellheadz.com/" />
+
         <style>{loader}</style>
       </Head>
       <body>

diff --git a/app/src/pages/artists/index.tsx b/app/src/pages/artists/index.tsx
@@ -16,7 +16,6 @@ const Index: NextPage = () => {
         <meta name="description" content={t("head.og.description")} />
         <meta property="og:title" content={t("head.og.title")} />
         <meta property="og:description" content={t("head.og.description")} />
-        <meta property="og:url" content="https://svpervnder.com/" />
       </Head>
 
       <Artists />

diff --git a/app/src/pages/artists/larskristo.tsx b/app/src/pages/artists/larskristo.tsx
@@ -16,7 +16,6 @@ const Index: NextPage = () => {
         <meta name="description" content={t("head.og.description")} />
         <meta property="og:title" content={t("head.og.title")} />
         <meta property="og:description" content={t("head.og.description")} />
-        <meta property="og:url" content="https://svpervnder.com/" />
       </Head>
 
       <Larskristo />

diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
@@ -16,7 +16,6 @@ const Index: NextPage = () => {
         <meta name="description" content={t("head.og.description")} />
         <meta property="og:title" content={t("head.og.title")} />
         <meta property="og:description" content={t("head.og.description")} />
-        <meta property="og:url" content="https://svpervnder.com/" />
       </Head>
 
       <Home />

diff --git a/app/src/pages/oauth/discord/lkhh.tsx b/app/src/pages/oauth/discord/lkhh.tsx
@@ -16,7 +16,6 @@ const Index: NextPage = () => {
         <meta name="description" content={t("head.og.description")} />
         <meta property="og:title" content={t("head.og.title")} />
         <meta property="og:description" content={t("head.og.description")} />
-        <meta property="og:url" content="https://svpervnder.com/" />
       </Head>
 
       <DiscordAuthWithWallet />

diff --git a/app/src/ui/button/Button.module.scss b/app/src/ui/button/Button.module.scss
@@ -19,6 +19,7 @@ $HALF_LOADER_SIZE: 15px;
   @extend .button-primary;
   display: inline-block;
   min-width: auto;
+  line-height: 0;
   white-space: nowrap;
   text-align: center;
   cursor: pointer;
@@ -110,7 +111,7 @@ $HALF_LOADER_SIZE: 15px;
 
   &--small {
     @include font-properties($typography-sm-button-label);
-    padding: 4px 20px;
+    padding: 5px 15px;
   }
 
   &--auto-size {

diff --git a/app/src/ui/footer/Footer.module.scss b/app/src/ui/footer/Footer.module.scss
@@ -11,6 +11,39 @@
   border-top: 1px solid var(--color-background-contrast);
   background-color: var(--color-background);
 
+  &__socials {
+    display: flex;
+
+    [class*="icon"] {
+      font-size: $font-size-headline-4;
+    }
+
+    &--etherscan-icon {
+      @include atLargeTablet {
+        width: 21px;
+      }
+      width: 16px;
+    }
+
+    &--links {
+      display: block;
+    }
+
+    &--link {
+      margin-right: $space-m;
+      vertical-align: middle;
+    }
+  }
+
+  &__logo {
+    @include atLargeTablet {
+      width: 128px;
+    }
+    width: 90px;
+    margin-right: -10px;
+    margin-bottom: -13px;
+  }
+
   &__left,
   &__right,
   &__center {
@@ -26,6 +59,14 @@
       justify-content: center;
       min-height: $footer-height-mobile;
       padding: $space-default 0;
+
+      &-flat {
+        min-height: auto;
+      }
+
+      &-flat-bottom {
+        padding-bottom: 0;
+      }
     }
   }
 
@@ -36,6 +77,16 @@
     text-align: left;
   }
 
+  &__left {
+    &--item {
+      margin-right: $space-ml;
+    }
+
+    a {
+      color: var(--color-typography-description);
+    }
+  }
+
   &__right {
     justify-content: flex-end;
     text-align: right;

diff --git a/app/src/ui/footer/Footer.module.scss.d.ts b/app/src/ui/footer/Footer.module.scss.d.ts
@@ -2,6 +2,8 @@ export type Styles = {
   footer: string;
   footer__center: string;
   "footer__center--item": string;
+  "footer__center--item-flat": string;
+  "footer__center--item-flat-bottom": string;
   footer__copyright: string;
   "footer__copyright--social": string;
   "footer__copyright--social-aufacicenta-icon": string;
@@ -16,9 +18,18 @@ export type Styles = {
   "footer__cta-banner--welcome": string;
   footer__left: string;
   "footer__left--item": string;
+  "footer__left--item-flat": string;
+  "footer__left--item-flat-bottom": string;
+  footer__logo: string;
   "footer__powered-by": string;
   footer__right: string;
   "footer__right--item": string;
+  "footer__right--item-flat": string;
+  "footer__right--item-flat-bottom": string;
+  footer__socials: string;
+  "footer__socials--etherscan-icon": string;
+  "footer__socials--link": string;
+  "footer__socials--links": string;
   "z-depth-0": string;
   "z-depth-1": string;
   "z-depth-1-half": string;

diff --git a/app/src/ui/footer/Footer.tsx b/app/src/ui/footer/Footer.tsx
@@ -3,39 +3,93 @@ import clsx from "clsx";
 import { Grid } from "ui/grid/Grid";
 import { Typography } from "ui/typography/Typography";
 import { HellheadzLogo } from "ui/icons/HellheadzLogo";
+import { useRoutes } from "hooks/useRoutes/useRoutes";
+import { EtherscanIcon } from "ui/icons/EtherscanIcon";
+import { Icon } from "ui/icon/Icon";
+import { Button } from "ui/button/Button";
+import evm from "providers/evm";
+import { ERC721Instance } from "providers/evm/ERC721Instance";
 
-import styles from "./Footer.module.scss";
 import { FooterProps } from "./Footer.types";
+import styles from "./Footer.module.scss";
+
+export const Footer: React.FC<FooterProps> = ({ className }) => {
+  const routes = useRoutes();
 
-export const Footer: React.FC<FooterProps> = ({ className }) => (
-  <footer className={clsx(styles.footer, className)}>
-    <Grid.Container>
-      <Grid.Row>
-        <Grid.Col lg={6} sm={6} xs={6}>
-          <div className={styles.footer__left}>
-            <div className={styles["footer__left--item"]}>
-              <HellheadzLogo />
-              <Typography.MiniDescription flat>
-                {new Date().getFullYear()}. All Rights Reserved
-              </Typography.MiniDescription>
+  return (
+    <footer className={clsx(styles.footer, className)}>
+      <Grid.Container>
+        <Grid.Row>
+          <Grid.Col lg={6} sm={6} xs={6}>
+            <div className={styles.footer__left}>
+              <div className={styles["footer__left--item"]}>
+                <Typography.Link flat href="#">
+                  Events
+                </Typography.Link>
+              </div>
+              <div className={styles["footer__left--item"]}>
+                <Typography.Link flat href={routes.artists.larskristo()}>
+                  About
+                </Typography.Link>
+              </div>
             </div>
-          </div>
-        </Grid.Col>
-        <Grid.Col lg={6} sm={6} xs={6}>
-          <div className={styles.footer__right}>
-            <div className={styles["footer__right--item"]}>
-              <Typography.Link flat href="#">
-                Events
-              </Typography.Link>
+          </Grid.Col>
+          <Grid.Col lg={6} sm={6} xs={6}>
+            <div className={styles.footer__right}>
+              <div className={clsx(styles["footer__right--item"], styles["footer__right--item-flat-bottom"])}>
+                <Typography.Link href={routes.home()}>
+                  <HellheadzLogo className={styles.footer__logo} />
+                </Typography.Link>
+              </div>
+            </div>
+          </Grid.Col>
+        </Grid.Row>
+      </Grid.Container>
+      <Grid.Container>
+        <Grid.Row>
+          <Grid.Col lg={6} sm={6} xs={6}>
+            <div className={clsx(styles.footer__left, styles.footer__socials)}>
+              <div className={styles["footer__socials--links"]}>
+                {/* <Typography.Link
+                  className={clsx(styles["footer__socials--link"])}
+                  href={`${evm.getBlockExplorerUrl()}/address/${ERC721Instance.defaultContractAddress}`}
+                  target="_blank"
+                >
+                  <EtherscanIcon className={styles["footer__socials--etherscan-icon"]} />
+                </Typography.Link> */}
+
+                <Typography.Link
+                  className={clsx(styles["footer__socials--link"])}
+                  href="https://discord.gg/uEngc5U5"
+                  target="_blank"
+                >
+                  <Icon name="icon-discord" />
+                </Typography.Link>
+                <Button
+                  variant="outlined"
+                  size="s"
+                  color="secondary"
+                  as="link"
+                  href={`${evm.getBlockExplorerUrl()}/address/${ERC721Instance.defaultContractAddress}`}
+                  target="_blank"
+                  leftIcon={<EtherscanIcon className={styles["footer__socials--etherscan-icon"]} />}
+                >
+                  LK💀💀
+                </Button>
+              </div>
             </div>
-            <div className={styles["footer__right--item"]}>
-              <Typography.Link flat href="#">
-                About
-              </Typography.Link>
+          </Grid.Col>
+          <Grid.Col lg={6} sm={6} xs={6}>
+            <div className={styles.footer__right}>
+              <div className={clsx(styles["footer__right--item"], styles["footer__right--item-flat"])}>
+                <Typography.MiniDescription flat>
+                  {new Date().getFullYear()}. All Rights Reserved
+                </Typography.MiniDescription>
+              </div>
             </div>
-          </div>
-        </Grid.Col>
-      </Grid.Row>
-    </Grid.Container>
-  </footer>
-);
+          </Grid.Col>
+        </Grid.Row>
+      </Grid.Container>
+    </footer>
+  );
+};
diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.module.scss b/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.module.scss
@@ -14,40 +14,66 @@
 
     &--logo {
       @include atLargeTablet {
-        min-height: 60vh;
+        min-height: 120vh;
       }
       min-height: 50vh;
+      background-image: url(/hellheadz/bg-desktop-left.png);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
     }
-  }
 
-  &__intro {
-    text-align: right;
+    &--intro-text {
+      @include atLargeTablet {
+        min-height: 100vh;
+      }
+      justify-content: flex-end;
+      min-height: 100vh;
+      will-change: transform;
 
-    &--artist-name {
-      color: var(--color-primary);
-    }
-  }
+      &-two {
+        justify-content: center;
+      }
 
-  &__socials {
-    display: flex;
+      &-highlight {
+        @include atLargeTablet {
+          font-size: $font-size-headline-1 !important;
+        }
+        font-size: $font-size-headline-2 !important;
+        color: var(--color-primary);
 
-    [class*="icon"] {
-      font-size: $font-size-headline-4;
-    }
+        &-top {
+          margin-top: $space-ml;
+        }
+      }
 
-    &--etherscan-icon {
-      @include atLargeTablet {
-        width: 21px;
+      h2 {
+        @include atLargeTablet {
+          font-size: $font-size-headline-2;
+          line-height: 1.7;
+        }
+        font-size: $font-size-headline-3;
+        line-height: 2;
+        text-align: center;
       }
-      width: 16px;
-    }
 
-    &--links {
-      margin-left: auto;
+      [class*="mask"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 115%;
+        background: #161616;
+        opacity: 0.8;
+      }
     }
+  }
 
-    &--link {
-      margin-left: $space-default;
+  &__intro {
+    text-align: right;
+
+    &--artist-name {
+      color: var(--color-primary);
     }
   }