Skip to content

Commit

Permalink
Landing redesign (#6)
Browse files Browse the repository at this point in the history
* added cards, refactored header, added cards

* use cases cards

* added sections

* addaptive

* footer (no adaptive)

* design fixes

* design fixes

* design fixes

* footer && mobile footer (no design)

* footer && mobile footer (no design)

* footer && mobile footer (no design)

* mobile navbar

* splitted index page to few components

* choose element fix

* pagination swiper

* requested fixes

* requested fixes

* requested fixes

* mobile swiper pagination fix

* requested changes

* requested changes

* padding/margin fixes on mobile

* padding/margin fixes on mobile

* news swiper fix

* font fix

* requested changes

* design fixes

* image mobile fix

* requested changes

* changelog

* Update styles

* requested changes

* external links inside of components (req changes)

---------

Co-authored-by: ardier16 <ardier16@gmail.com>
  • Loading branch information
revomhere and ardier16 authored Jan 5, 2024
1 parent b05ed56 commit fcbeac0
Show file tree
Hide file tree
Showing 59 changed files with 2,045 additions and 467 deletions.
16 changes: 15 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added the Collab.Land integration doc;
- Added RariMe guide for issuers;
- Contribution guide to the README;
- Subscription form (w/o functionality)
- Mobile sliders

### Changed

- Design:
- Header
- Fonts and texts (where needed)
- All sections:
- Base Layer Section;
- Ecosystem Section;
- Use Cases Section;
- Build Section;
- Community (Links) Section;
- News Section;
- Footer
- Updated links from gitlab to github in the whole documentation;
- Updated the "Overview" doc;
- Transferred the project to GitHub;
Expand Down Expand Up @@ -207,7 +220,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `Not Found` page returning HTTP status `200`;
- Broken logo link in the footer;

[Unreleased]: https://github.com/rarimo/docs/compare/v1.5.1...HEAD
[Unreleased]: https://github.com/rarimo/docs/compare/v1.6.0...HEAD
[1.6.0]: https://github.com/rarimo/docs/releases/tag/v1.5.1...v1.6.0
[1.5.1]: https://github.com/rarimo/docs/releases/tag/v1.5.0...v1.5.1
[1.5.0]: https://github.com/rarimo/docs/releases/tag/v1.4.3...v1.5.0
[1.4.3]: https://github.com/rarimo/docs/releases/tag/v1.4.2...v1.4.3
Expand Down
88 changes: 46 additions & 42 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function isStaging() {
}

const metaDescription =
"Rarimo developer documentation. Learn to use cross-chain self-sovereign identity protocol, zero-knowledge proofs, RariMe Snap, token bridging, and more.";
"Learn to use cross-chain self-sovereign identity protocol, zero-knowledge proofs, RariMe Snap, token bridging, and more.";

/** @type {import('@docusaurus/types').Config} */
module.exports = {
Expand Down Expand Up @@ -57,7 +57,7 @@ module.exports = {
docLayoutComponent: "@theme/DocPage",
docItemComponent: "@theme/ApiItem",
remarkPlugins: [
[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
[require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
],
},
theme: {
Expand Down Expand Up @@ -85,34 +85,20 @@ module.exports = {
},
items: [
{
type: "doc",
docId: "overview",
position: "left",
label: "Overview",
},
{
type: "doc",
docId: "use-cases",
position: "left",
label: "Use Cases",
},
{
type: "doc",
docId: "tutorials",
position: "left",
label: "Tutorials",
},
{
type: "doc",
docId: "how-to-guides",
position: "left",
label: "How-To Guides",
href: "https://discord.gg/cfrH3Fe7ke",
html: `
<span class="header__social-link">
Discord <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="currentColor"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="currentColor"/></g></svg>
</span>`,
position: "right",
},
{
type: "doc",
href: "https://github.com/rarimo",
html: `
<span class="header__social-link">
GitHub <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="currentColor"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="currentColor"/></g></svg>
</span>`,
position: "right",
label: "Technical Reference",
docId: "reference",
},
],
},
Expand All @@ -123,12 +109,12 @@ module.exports = {
items: [
{
html: `
<img src="/img/logo-footer.svg" alt="Rarimo Logo"/>
<img src="img/logo-footer.svg" alt="Rarimo Logo"/>
`,
},
{
html: `
<span style="margin-left: 1rem; color: #8F8F8F">© ${new Date().getFullYear()}</span>
<span style="color: var(--primary-text-color)">© ${new Date().getFullYear()}</span>
`,
},
],
Expand All @@ -137,31 +123,49 @@ module.exports = {
items: [
{
html: `
<a href="https://github.com/rarimo" class="footer__social-link" target="_blank" rel="noreferrer noopener" aria-label="GitHub">
GitHub <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="#D9D9D9"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="#8F8F8F"/></g></svg>
</a>
`,
<span style="font-weight: 500">Navigation</span>`,
},
{
// TODO: dummy link
html: `
<a href="https://discord.gg/cfrH3Fe7ke" class="footer__social-link" target="_blank" rel="noreferrer noopener" aria-label="Discord" style="margin-top: 1rem">
Discord <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="#D9D9D9"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="#8F8F8F"/></g></svg>
</a>
`,
<a href="#" class="footer__social-link" target="_blank" rel="noreferrer noopener">Use cases</a>`,
},
{
// TODO: dummy link
html: `
<a href="https://twitter.com/Rarimo_protocol" class="footer__social-link" target="_blank" rel="noreferrer noopener" aria-label="Twitter" style="margin-top: 1rem">
Twitter <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="#D9D9D9"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="#8F8F8F"/></g></svg>
</a>`,
<a href="#" class="footer__social-link" target="_blank" rel="noreferrer noopener">Developers</a>`,
},
{
// TODO: dummy link
html: `
<a href="#" class="footer__social-link" target="_blank" rel="noreferrer noopener">Community</a>`,
},
{
// TODO: dummy link
html: `
<a href="mailto: support@rarimo.com" class="footer__social-link" target="_blank" rel="noreferrer noopener" style="margin-top: 1rem">
Contact
<a href="#" class="footer__social-link" target="_blank" rel="noreferrer noopener">Contact</a>`,
},
],
},
{
items: [
{
html: `
<span style="font-weight: 500">Follow Us</span>`,
},
{
html: `
<a href="https://discord.gg/cfrH3Fe7ke" class="footer__social-link" target="_blank" rel="noreferrer noopener" aria-label="Discord">
Discord <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="currentColor"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="currentColor"/></g></svg>
</a>
`,
},
{
html: `
<a href="https://twitter.com/Rarimo_protocol" class="footer__social-link" target="_blank" rel="noreferrer noopener" aria-label="Twitter">
Twitter <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0_1217_16813" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="currentColor"/></mask><g mask="url(#mask0_1217_16813)"><path d="M5.33329 15L4.16663 13.8333L12.1666 5.83329H4.99996V4.16663H15V14.1666H13.3333V6.99996L5.33329 15Z" fill="currentColor"/></g></svg>
</a>`,
},
],
},
],
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"redocusaurus": "^1.4.0"
"redocusaurus": "^1.4.0",
"swiper": "^11.0.5"
},
"devDependencies": {
"@docusaurus/eslint-plugin": "^2.2.0",
Expand Down
47 changes: 47 additions & 0 deletions src/components/Building/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import Link from "@docusaurus/Link";
import clsx from "clsx";
import React from "react";

import styles from "./styles.module.css";

export default function Building(): JSX.Element {
return (
<div className={clsx("building__wrp", styles.buildingWrp)}>
<div className={clsx("building container", styles.building)}>
<img
className={clsx("building__img", styles.buildingImg)}
src="img/building-image.png"
data-aos="fade-up"
/>
<div
className={clsx("building__description", styles.buildingDescription)}
>
<h2
className={clsx("building__title", styles.buildingTitle)}
data-aos="fade-up"
>
Build Fast With Developer Dashboard
</h2>
<p
className={clsx("building__text", styles.buildingText)}
data-aos="fade-up"
>
{
"Build no-code and low-code identity enabled dApps with \nRarimo Developer Dashboard"
}
</p>
<Link
className={clsx("heroButtonSecondary", styles.heroButtonSecondary)}
// TODO: dummy link
to="#"
data-aos="fade-up"
target="_blank"
rel="noreferrer noopener"
>
LAUNCH
</Link>
</div>
</div>
</div>
);
}
83 changes: 83 additions & 0 deletions src/components/Building/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
.buildingWrp {
background-color: #0F0F0F;
border-top: var(--primary-border);
border-bottom: var(--primary-border);
}

.building {
display: flex;
gap: 8rem;
align-items: center;
background: transparent;
padding: 5rem;
}

.buildingDescription {
display: flex;
flex-direction: column;
align-items: start;
}

.buildingTitle {
color: var(rgba(255, 255, 255, 0.90));
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
}

.buildingText {
color: rgba(255, 255, 255, 0.60);
line-height: 1.4;
font-size: 1.125rem;
white-space: pre-line;
margin-bottom: 1.5rem;
}

.buildingImg {
max-width: 26.25rem;
width: 100%;
}

@media screen and (max-width: 996px) {
.buildingWrp {
padding: 3.5rem 4rem;
}

.building {
flex-direction: column;
align-items: center;
padding: 2rem;
gap: 4rem;
}

.buildingDescription {
align-items: center;
text-align: center;
}
}

@media screen and (max-width: 625px) {
.buildingWrp {
padding: 3.5rem 1.75rem;
}

.building {
gap: 3.5rem;
padding: 1rem;
}

.buildingTitle {
font-size: 1.5rem;
}

.buildingText {
white-space: normal;
font-size: 0.875rem;
}

.buildingImg {
padding: 0 1rem;
object-fit: scale-down;
}
}
Loading

0 comments on commit fcbeac0

Please sign in to comment.