feat: Website Improvements - Hero Animation - for #235 (#236)

FabioPinheiro · web-flow · commit f64b11dd563b · 2025-10-30T16:52:42.000Z
feat: Website Improvements - Hero - for #235 Reduce Hero Animation size. Add Future of Digital Identity descriptive Signed-off-by: FabioPinheiro <fabiomgpinheiro@gmail.com>
diff --git a/src/components/atala-graphic/index.module.css b/src/components/atala-graphic/index.module.css
@@ -5,6 +5,7 @@
 .hero__graphic__wrapper {
     position: relative;
     margin-left: auto;
+    margin-right: auto;
     z-index: 100;
     transform: translateX(-5%) translateY(-60%);
 }
@@ -13,8 +14,8 @@
     position: relative;
     left: 0;
     right: auto;
-    width: clamp(15.25rem, 100vw, 60.25rem);
-    height: clamp(15.6875rem, 100vw, 58.6875rem);
+    width: clamp(16.25rem, 40vw, 32rem);
+    height: clamp(16.25rem, 40vw, 32rem);
     overflow: hidden;
     margin-right: auto;
     mask-image: url("/static/img/graphics/identus-hero.svg");
@@ -35,4 +36,4 @@
     .hero__graphic__wrapper {
         transform: translateX(25%);
     }
-}
+}
diff --git a/src/components/features/index.js b/src/components/features/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import HomeResources from '../resources';
+import { FutureOfIdentity } from '../resources';
+
 
 const FeatureList = [
     {
@@ -21,13 +23,13 @@ const FeatureList = [
             <>
                 Build secure, private, and verifiable interactions between individuals, organizations, and devices using
                 open standards and protocols such as <a href="https://www.w3.org/TR/did-core/" target="_blank"
-                                                        rel="noreferrer">W3C DID spec</a>, <a
-                href="https://www.w3.org/TR/vc-data-model/" target="_blank" rel="noreferrer">W3C VC-JWT</a>, <a
-                href="https://hyperledger.github.io/anoncreds-spec/"
-                target="_blank"
-                rel="noreferrer">HL
-                Anoncreds</a> , and <a href="https://identity.foundation/didcomm-messaging/spec/" target="_blank"
-                                       rel="noreferrer">DIDComm V2</a> .
+                    rel="noreferrer">W3C DID spec</a>, <a
+                        href="https://www.w3.org/TR/vc-data-model/" target="_blank" rel="noreferrer">W3C VC-JWT</a>, <a
+                            href="https://hyperledger.github.io/anoncreds-spec/"
+                            target="_blank"
+                            rel="noreferrer">HL
+                    Anoncreds</a> , and <a href="https://identity.foundation/didcomm-messaging/spec/" target="_blank"
+                        rel="noreferrer">DIDComm V2</a> .
             </>
         ),
     },
@@ -43,11 +45,11 @@ const FeatureList = [
     },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
     return (
         <div className={clsx('col col--4')}>
             <div className="text--center">
-                <Svg className={styles.featureSvg} role="img"/>
+                <Svg className={styles.featureSvg} role="img" />
             </div>
             <div className="text--center padding-horiz--md">
                 <h3>{title}</h3>
@@ -61,13 +63,15 @@ export default function HomepageFeatures() {
     return (
         <section className={styles.features}>
             <div className="container">
+                <FutureOfIdentity />
                 <div className="row">
                     {FeatureList.map((props, idx) => (
                         <Feature key={idx} {...props} />
                     ))}
                 </div>
-                <HomeResources/>
+                <HomeResources />
             </div>
         </section>
     );
 }
+
diff --git a/src/components/features/styles.module.css b/src/components/features/styles.module.css
@@ -1,7 +1,6 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
   width: 100%;
 }
 
@@ -17,4 +16,4 @@
 .featureSvg {
   height: 97.5px;
   width: 100px;
-}
+}
diff --git a/src/components/resources/index.js b/src/components/resources/index.js
@@ -1,11 +1,11 @@
-import React, {useCallback, useRef, useState} from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import styles from './index.module.css';
 import Link from '@docusaurus/Link';
-import {useColorMode} from '@docusaurus/theme-common';
+import { useColorMode } from '@docusaurus/theme-common';
 import Button from '../button';
 
 const Graphics = {
-    apis({color = "#5559F2"}) {
+    apis({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -18,7 +18,7 @@ const Graphics = {
             </svg>
         )
     },
-    docs({color = "#5559F2"}) {
+    docs({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -31,7 +31,7 @@ const Graphics = {
             </svg>
         )
     },
-    getStarted({color = "#767AF5"}) {
+    getStarted({ color = "#767AF5" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={201} height={201} fill="none">
                 <path
@@ -44,7 +44,7 @@ const Graphics = {
             </svg>
         )
     },
-    resources({color = "#5559F2"}) {
+    resources({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -57,7 +57,7 @@ const Graphics = {
             </svg>
         )
     },
-    tutorials({color = "#5559F2"}) {
+    tutorials({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -77,7 +77,7 @@ const Graphics = {
             </svg>
         )
     },
-    walletSdkSwift({color = "#5559F2"}) {
+    walletSdkSwift({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -90,7 +90,7 @@ const Graphics = {
             </svg>
         )
     },
-    walletSdkKmm({color = "#5559F2"}) {
+    walletSdkKmm({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -103,7 +103,7 @@ const Graphics = {
             </svg>
         )
     },
-    walletSdkTS({color = "#5559F2"}) {
+    walletSdkTS({ color = "#5559F2" }) {
         return (
             <svg xmlns="http://www.w3.org/2000/svg" width={51} height={51} fill="none">
                 <path
@@ -161,8 +161,8 @@ function ResourceLink() {
     return (
         <div className={styles.resource__link}>
             <svg width={32} height={22} fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path className={styles.resource__link__svg__0} d="M3.33789 5.99976C5.06694 3.01075 8.29866 0.999756 12.0001 0.999756C17.5229 0.999756 22.0001 5.47691 22.0001 10.9998C22.0001 16.5226 17.5229 20.9998 12.0001 20.9998C8.29866 20.9998 5.06694 18.9888 3.33789 15.9998" stroke="#667085" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                <path className={styles.resource__link__svg__1} d="M11 14.9998L15 10.9998M15 10.9998L11 6.99976M15 10.9998H1" stroke="#667085" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path className={styles.resource__link__svg__0} d="M3.33789 5.99976C5.06694 3.01075 8.29866 0.999756 12.0001 0.999756C17.5229 0.999756 22.0001 5.47691 22.0001 10.9998C22.0001 16.5226 17.5229 20.9998 12.0001 20.9998C8.29866 20.9998 5.06694 18.9888 3.33789 15.9998" stroke="#667085" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path className={styles.resource__link__svg__1} d="M11 14.9998L15 10.9998M15 10.9998L11 6.99976M15 10.9998H1" stroke="#667085" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
         </div>
     )
@@ -172,10 +172,10 @@ function Resource(props) {
     const ref = useRef(null);
     const lightRef = useRef(null)
     const backgroundRef = useRef(null);
-    const {colorMode} = useColorMode();
+    const { colorMode } = useColorMode();
 
     const handleMouseMove = useCallback((event) => {
-        const {clientX, clientY, currentTarget} = event;
+        const { clientX, clientY, currentTarget } = event;
         const {
             height: targetHeight,
             width: targetWidth,
@@ -188,16 +188,16 @@ function Resource(props) {
         const mouseY = (clientY - offsetY);
         const x = ((mouseX - centerX) * .06);
         const y = ((mouseY - centerY) * .06);
-        ref.current.animate({transform: `rotateX(${x}deg) rotateY(${y}deg)`}, {fill: "forwards"})
+        ref.current.animate({ transform: `rotateX(${x}deg) rotateY(${y}deg)` }, { fill: "forwards" })
         lightRef.current.animate({
             top: `${mouseY}px`,
             left: `${mouseX}px`,
-        }, {fill: "forwards", duration: 500})
+        }, { fill: "forwards", duration: 500 })
     }, [ref, lightRef])
 
     const handleMouseLeave = useCallback((event) => {
         event.preventDefault()
-        ref.current.animate({transform: `rotateX(${0}deg) rotateY(${0}deg)`}, {fill: "forwards", duration: 1000})
+        ref.current.animate({ transform: `rotateX(${0}deg) rotateY(${0}deg)` }, { fill: "forwards", duration: 1000 })
 
     }, [backgroundRef])
 
@@ -209,16 +209,27 @@ function Resource(props) {
             onMouseMove={handleMouseMove}
         >
             <Link href={props.linkTo} className={`${styles.resource}`}>
-                <props.Svg color={colorMode === 'dark' ? "#767AF5" : "#5559F2"}/>
+                <props.Svg color={colorMode === 'dark' ? "#767AF5" : "#5559F2"} />
                 <h3>{props.title}</h3>
                 <p>{props.content}</p>
-                <ResourceLink linkTo={props.linkTo}/>
-                <div className={styles.resource__light} ref={lightRef}/>
+                <ResourceLink linkTo={props.linkTo} />
+                <div className={styles.resource__light} ref={lightRef} />
             </Link>
         </div>
     );
 }
 
+export function FutureOfIdentity() {
+    return (
+        <>
+            <div className={styles.project__description}>
+                <h5>Build the Future of Digital Identity</h5>
+                <p>Hyperledger Identus is an open-source platform for building secure, standards-based digital identity solutions. With complete DID and verifiable credential functionality, it gives developers everything they need to create and integrate self-sovereign identity into apps and workflows - bridging trust between users, organizations, and systems.</p>
+            </div>
+        </>
+    );
+}
+
 export default function HomeResources() {
     return (
         <>
@@ -232,10 +243,11 @@ export default function HomeResources() {
             <div className={styles.home__resources}>
                 {
                     RESOURCES.map((resource, index) => (
-                        <Resource {...resource} key={index}/>
+                        <Resource {...resource} key={index} />
                     ))
                 }
             </div>
         </>
     );
 }
+
diff --git a/src/components/resources/index.module.css b/src/components/resources/index.module.css
@@ -19,9 +19,11 @@
     margin-left: auto;
     align-self: flex-end;
 }
+
 .resource:hover .resource__link__svg__0 {
     transform: rotate(180deg);
 }
+
 .resource__link__svg__0 {
     transform-origin: 12px center;
     transition: transform 250ms;
@@ -30,9 +32,11 @@
 .resource:hover .resource__link__svg__1 {
     transform: translateX(15px);
 }
+
 .resource__link__svg__1 {
     transition: transform 250ms;
 }
+
 .resource p {
     font-size: 14px;
     margin-bottom: 0;
@@ -77,6 +81,7 @@
 .resource:hover .resource__light {
     opacity: 1;
 }
+
 .resource__light {
     top: 0;
     left: 0;
@@ -91,7 +96,8 @@
     z-index: 10;
 }
 
-.home__resources .resource h3, p {
+.home__resources .resource h3,
+p {
     /*color: var(--ifm-color-gray-600);*/
     color: inherit;
 }
@@ -126,4 +132,36 @@
     background: var(--ifm-color-primary);
     padding: .625rem 1.75rem;
     text-decoration: none;
+}
+
+.project__description {
+    max-width: 693px;
+    margin: clamp(1rem, 20vw, 3rem) auto 5rem;
+    height: auto;
+    text-align: center;
+}
+
+.project__description h5 {
+    font-size: 17px;
+    line-height: 28px;
+    color: var(--ifm-color-primary);
+}
+
+.project__description h2 {
+    font-size: clamp(1.5rem, 2vw, 1.875rem);
+    font-weight: 400;
+    line-height: 38px;
+    margin-bottom: 0;
+    color: var(--ifm-color-resources-intro);
+}
+
+.project__description a {
+    color: #ffffff;
+    border-radius: 25px;
+    font-size: 1rem;
+    display: inline-block;
+    margin-top: 3.125rem;
+    background: var(--ifm-color-primary);
+    padding: .625rem 1.75rem;
+    text-decoration: none;
 }
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -12,7 +12,7 @@
 
 .heroBanner {
   overflow: hidden;
-  height: 100vh;
+  height: 40vh;
 }
 
 .container {
@@ -34,7 +34,7 @@
 .hero__title {
   color: var(--ifm-hero-text-color);
   font-weight: 500;
-  font-size: clamp(2rem, 5vw,4rem);
+  font-size: clamp(2rem, 5vw, 4rem);
 }
 
 @media screen and (max-width: 996px) {
@@ -65,6 +65,7 @@
   .heroBanner {
     height: auto;
   }
+
   .hero__content {
     height: auto;
   }
@@ -73,6 +74,6 @@
 
 @media screen and (min-height: 667px) {
   .hero__content {
-    top: clamp(9.125rem, 100vw, 11.125rem);
+    top: clamp(5.125rem, 100vw, 9.125rem);
   }
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`
`13`	`13`	`.heroBanner {`
`14`	`14`	`overflow: hidden;`
`15`		`- height: 100vh;`
	`15`	`+ height: 40vh;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`.container {`
`@@ -34,7 +34,7 @@`
`34`	`34`	`.hero__title {`
`35`	`35`	`color: var(--ifm-hero-text-color);`
`36`	`36`	`font-weight: 500;`
`37`		`- font-size: clamp(2rem, 5vw,4rem);`
	`37`	`+ font-size: clamp(2rem, 5vw, 4rem);`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`@media screen and (max-width: 996px) {`
`@@ -65,6 +65,7 @@`
`65`	`65`	`.heroBanner {`
`66`	`66`	`height: auto;`
`67`	`67`	`}`
	`68`	`+`
`68`	`69`	`.hero__content {`
`69`	`70`	`height: auto;`
`70`	`71`	`}`
`@@ -73,6 +74,6 @@`
`73`	`74`
`74`	`75`	`@media screen and (min-height: 667px) {`
`75`	`76`	`.hero__content {`
`76`		`- top: clamp(9.125rem, 100vw, 11.125rem);`
	`77`	`+ top: clamp(5.125rem, 100vw, 9.125rem);`
`77`	`78`	`}`
`78`		`-}`
	`79`	`+}`