Update hero section

rarimo · Nov 21, 2024 · af11f9c · af11f9c
1 parent 4b43fc2
commit af11f9c
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@typeform/embed-react": "^2.10.0",
     "aos": "3.0.0-beta.6",
     "classnames": "^2.3.2",
+    "framer-motion": "^11.11.17",
     "i18next": "^22.4.11",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.12.1",

diff --git a/src/components/HomeHeroSection/HomeHeroSection.jsx b/src/components/HomeHeroSection/HomeHeroSection.jsx
@@ -1,6 +1,9 @@
 import './HomeHeroSection.scss';
 
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useInterval } from 'react-use';
 
 import AppButton from '@/components/AppButton';
 import SpotlightBg from '@/components/SpotlightBg';
@@ -11,13 +14,37 @@ import BackersSection from '../BackersSection';
 
 const HomeHeroSection = () => {
   const { t } = useTranslation();
+  const [currentHighlightIndex, setCurrentHighlightIndex] = useState(0);
+
+  const highlights = [
+    t('home-hero-section.title-highlight-1'),
+    t('home-hero-section.title-highlight-2'),
+    t('home-hero-section.title-highlight-3'),
+  ];
+
+  useInterval(() => {
+    setCurrentHighlightIndex(prev => (prev + 1) % highlights.length);
+  }, 3000);
 
   return (
     <section id={COMPONENT_NODE_IDS.heroSection} className="home-hero-section">
       <div className="home-hero-section__content container">
         <div className="home-hero-section__hero-wrapper">
           <h1 className="home-hero-section__title">
-            {t('home-hero-section.title')}
+            <span>{t('home-hero-section.title-main')}</span>
+            <div className="home-hero-section__title-highlight">
+              <AnimatePresence mode="popLayout">
+                <motion.span
+                  key={currentHighlightIndex}
+                  initial={{ translateY: '100%', opacity: 0 }}
+                  animate={{ translateY: 0, opacity: 1 }}
+                  exit={{ translateY: '-100%', opacity: 0 }}
+                  transition={{ duration: 0.5 }}
+                >
+                  {highlights[currentHighlightIndex]}
+                </motion.span>
+              </AnimatePresence>
+            </div>
           </h1>
           <p className="home-hero-section__description" data-aos="fade-up">
             {t('home-hero-section.description')}

diff --git a/src/components/HomeHeroSection/HomeHeroSection.scss b/src/components/HomeHeroSection/HomeHeroSection.scss
@@ -27,12 +27,30 @@
 }
 
 .home-hero-section__title {
-  margin-top: to-rem(16);
+  margin-top: to-rem(48);
   margin-bottom: to-rem(16);
+  max-width: to-rem(330);
   text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+
+  @include respond-above(medium) {
+    max-width: to-rem(920);
+    margin-top: to-rem(16);
+  }
+}
+
+.home-hero-section__title-highlight {
+  position: relative;
+  height: to-rem(40);
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: var(--col-primary-accent-main);
 
   @include respond-above(medium) {
-    max-width: to-rem(760);
+    height: to-rem(94);
   }
 }
 

diff --git a/src/components/ZkRegisterSection/ZkRegisterSection.jsx b/src/components/ZkRegisterSection/ZkRegisterSection.jsx
@@ -32,9 +32,7 @@ const ZkRegisterSection = () => {
             <p>{t('zk-register-section.accordion-description-1')}</p>
             <AppButton
               className="zk-register-section__link"
-              // TODO: uncomment when the link is ready
-              // href="https://docs.rarimo.com/zk-passport/"
-              href="https://docs.rarimo.com/"
+              href="https://docs.rarimo.com/zk-passport/"
             >
               <span>{t('zk-register-section.accordion-cta-1')}</span>
               <svg
@@ -64,9 +62,7 @@ const ZkRegisterSection = () => {
             </p>
             <AppButton
               className="zk-register-section__link"
-              // TODO: uncomment when the link is ready
-              // href="https://docs.rarimo.com/zk-reputation/"
-              href="https://docs.rarimo.com/"
+              href="https://docs.rarimo.com/zk-reputation/"
             >
               <span>{t('zk-register-section.accordion-cta-2')}</span>
               <svg

diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -31,7 +31,10 @@
     "community": "Community"
   },
   "home-hero-section": {
-    "title": "Permissionless (ZK) Registries",
+    "title-main": "Future of Identity is",
+    "title-highlight-1": "On-chain",
+    "title-highlight-2": "Permissionless",
+    "title-highlight-3": "Censorship free",
     "description": "Unlocking a new generation of social apps, where users stay private without losing historical actions, networks, and identities",
     "getting-started-link": "Getting Started",
     "blockchains-title": "Supported blockchains"

diff --git a/yarn.lock b/yarn.lock
@@ -1914,6 +1914,13 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+framer-motion@^11.11.17:
+  version "11.11.17"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.11.17.tgz#fff0fd26b9b5c16dc0cc7e450f9af7db13fb35d0"
+  integrity sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==
+  dependencies:
+    tslib "^2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -4583,6 +4590,11 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
+tslib@^2.4.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"