Merge pull request #11 from rarimo/feature/new-sections

Added new sections
rarimo · Nov 13, 2024 · 8c5b0ab · 8c5b0ab
2 parents 566284d + 1abd2d1
commit 8c5b0ab
Show file tree

Hide file tree

Showing 30 changed files with 526 additions and 351 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
-    <title>Rarimo – Privacy First (ZK) Social Protocol</title>
+    <title>Rarimo – Permissionless (ZK) Registries</title>
     <noscript>
       <style>
         #noscript {
@@ -19,19 +19,25 @@
       name="viewport"
       content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
     />
-    <meta property="og:title" content="Rarimo – Privacy First (ZK) Social Protocol" />
-    <meta property="twitter:title" content="Rarimo – Privacy First (ZK) Social Protocol" />
+    <meta
+      property="og:title"
+      content="Rarimo – Permissionless (ZK) Registries"
+    />
+    <meta
+      property="twitter:title"
+      content="Rarimo – Permissionless (ZK) Registries"
+    />
     <meta
       name="description"
-      content="Rarimo unlocks a new generation of social apps, where users go incognito without losing historical actions, networks, and identities."
+      content="Unlocking a new generation of social apps, where users stay private without losing historical actions, networks, and identities"
     />
     <meta
       property="og:description"
-      content="Rarimo unlocks a new generation of social apps, where users go incognito without losing historical actions, networks, and identities."
+      content="Unlocking a new generation of social apps, where users stay private without losing historical actions, networks, and identities"
     />
     <meta
       property="twitter:description"
-      content="Rarimo unlocks a new generation of social apps, where users go incognito without losing historical actions, networks, and identities."
+      content="Unlocking a new generation of social apps, where users stay private without losing historical actions, networks, and identities"
     />
     <meta property="og:url" content="https://rarimo.com" />
     <meta

diff --git a/src/components/AppAccordion/AppAccordion.jsx b/src/components/AppAccordion/AppAccordion.jsx
@@ -0,0 +1,25 @@
+import './AppAccordion.scss';
+
+const AppAccordion = ({ title, content, isActive, onSelect, tabIndex }) => {
+  return (
+    <div className={`app-accordion ${isActive ? 'app-accordion--opened' : ''}`}>
+      <div
+        role="tab"
+        className="app-accordion__line"
+        tabIndex={tabIndex}
+        onClick={onSelect}
+        onKeyDown={event => {
+          if (event.code === 'Enter') onSelect();
+        }}
+      >
+        <h3 className="app-accordion__title">{title}</h3>
+        <svg width={20} height={20} className="app-accordion__icon">
+          <use href="/icons/sprite.svg#icon-arrow-down"></use>
+        </svg>
+      </div>
+      <div className="app-accordion__inner">{content}</div>
+    </div>
+  );
+};
+
+export default AppAccordion;
diff --git a/src/components/AppAccordion/AppAccordion.scss b/src/components/AppAccordion/AppAccordion.scss
@@ -0,0 +1,93 @@
+.app-accordion {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-bottom: to-rem(16);
+
+  --accordion-title-color: var(--col-white-text-alpha);
+  --accordion-line-color: var(--col-white-bg-alpha);
+  --accordion-icon-rotate: 0deg;
+  --accordion-content-color: var(--col-white-alpha);
+  --accordion-title-font-size: var(--h5-size);
+  --accordion-content-font-size: #{to-rem(14)};
+  --after-width: 0%;
+
+  @include respond-above(medium) {
+    margin-bottom: to-rem(37);
+    --accordion-title-font-size: #{to-rem(24)};
+    --accordion-content-font-size: #{to-rem(20)};
+  }
+
+  .app-accordion__title {
+    color: var(--accordion-title-color);
+    font-size: var(--accordion-title-font-size);
+  }
+
+  .app-accordion__line {
+    margin-left: 0;
+    border-bottom: to-rem(1) solid var(--accordion-line-color);
+    padding-bottom: to-rem(16);
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      height: to-rem(1);
+      width: var(--after-width);
+      background-color: var(--accordion-line-color);
+      transition: all var(--medium-transition-duration)
+        var(--slide-transition-timing-function);
+    }
+  }
+
+  .app-accordion__icon {
+    color: var(--accordion-title-color);
+    rotate: var(--accordion-icon-rotate);
+    transition: all var(--medium-transition-duration)
+      var(--slide-transition-timing-function);
+  }
+
+  .app-accordion__inner {
+    max-width: to-rem(526);
+    overflow-y: hidden;
+    max-height: 0;
+    padding: 0;
+    opacity: 0;
+    font-size: var(--accordion-content-font-size);
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: all 0.4s ease;
+
+    & p {
+      color: var(--accordion-content-color);
+      font-size: var(--accordion-content-font-size);
+    }
+  }
+
+  &--opened {
+    --accordion-title-color: var(--col-white-alpha);
+    --accordion-icon-rotate: 180deg;
+    --after-width: 50%;
+
+    .app-accordion__inner {
+      padding: to-rem(5) 0;
+      padding-top: to-rem(16);
+      padding-bottom: to-rem(16);
+      max-height: to-rem(300);
+      opacity: 1;
+      transform: scaleY(1);
+
+      @include respond-above(medium) {
+        max-height: to-rem(160);
+        padding-top: to-rem(24);
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/components/AppAccordion/index.js b/src/components/AppAccordion/index.js
@@ -0,0 +1 @@
+export { default } from './AppAccordion';
diff --git a/src/components/AppButton/AppButton.jsx b/src/components/AppButton/AppButton.jsx
@@ -18,11 +18,12 @@ const AppButton = ({
   scheme = APP_BUTTON_SCHEMES.primary,
   children,
   onClick,
+  disabled = false,
   ...rest
 }) => {
   const { t } = useTranslation();
 
-  if (routePath) {
+  if (routePath && !disabled) {
     return (
       <Link
         className={cn(['app-button', `app-button--${scheme}`, className])}
@@ -35,7 +36,7 @@ const AppButton = ({
     );
   }
 
-  if (href) {
+  if (href && !disabled) {
     return (
       <a
         className={cn(['app-button', `app-button--${scheme}`, className])}
@@ -52,6 +53,7 @@ const AppButton = ({
 
   return (
     <button
+      disabled={disabled}
       className={cn(['app-button', `app-button--${scheme}`, className])}
       type="button"
       onClick={onClick}

diff --git a/src/components/AppFooter/AppFooter.jsx b/src/components/AppFooter/AppFooter.jsx
@@ -30,7 +30,7 @@ const AppFooter = () => {
 
   return (
     <footer className="app-footer container">
-      <div className="app-footer__content" data-aos="fade">
+      <div className="app-footer__content" data-aos="fade-up">
         <div className="app-footer__logo-wrapper">
           <div>
             <Link className="app-footer__logo" to={ROUTES_PATHS.home}>

diff --git a/src/components/ConfidentialIdentitySection/ConfidentialIdentitySection.jsx b/src/components/ConfidentialIdentitySection/ConfidentialIdentitySection.jsx
diff --git a/src/components/ConfidentialIdentitySection/ConfidentialIdentitySection.scss b/src/components/ConfidentialIdentitySection/ConfidentialIdentitySection.scss
diff --git a/src/components/ConfidentialIdentitySection/index.js b/src/components/ConfidentialIdentitySection/index.js
diff --git a/src/components/HomeHeroSection/HomeHeroSection.scss b/src/components/HomeHeroSection/HomeHeroSection.scss
@@ -21,6 +21,9 @@
 
 .home-hero-section__hero-wrapper {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .home-hero-section__title {
@@ -37,7 +40,7 @@
   font-size: to-rem(16);
 
   @include respond-above(medium) {
-    max-width: to-rem(720);
+    max-width: to-rem(770);
     font-size: to-rem(20);
     letter-spacing: 0.02em;
   }