Skip to content

Commit

Permalink
moved content to homepage.js
Browse files Browse the repository at this point in the history
  • Loading branch information
radumojic committed Jul 29, 2024
1 parent 5e07ef1 commit 460d31d
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 139 deletions.
134 changes: 134 additions & 0 deletions homepage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import {
faDiscord,
faTelegram,
faStackOverflow,
} from "@fortawesome/free-brands-svg-icons";
import { faBook, faHammer, faServer } from "@fortawesome/free-solid-svg-icons";

const homepage = {
hero: {
title: "MultiversX Developer Docs",
subtitle: "Choose your path, you must.",
cards: [
{
title: "Learn about MultiversX",
text: "Meet the blockchain that can offer true internet-scale performance.",
link: "/welcome/welcome-to-multiversx",
icon: faBook,
},
{
title: "Start Building",
text: "Build your decentralized application in minutes.",
link: "/developers/overview",
icon: faHammer,
},
{
title: "Run a validator node",
text: "Validate transactions, secure the network, and earn rewards.",
link: "/validators/overview",
icon: faServer,
},
],
},
features: {
title: "Do more with MultiversX",
cards: [
{
title: "Create a Token",
text: "Issue your own ESDT token, MultiversX's improved equivalent of ERC-20.",
link: "/tokens/intro",
},
{
title: "Manage a Wallet",
text: "Create a wallet to send, receive and store MultiversX tokens.",
link: "/wallet/overview",
},
{
title: "Integrate MultiversX",
text: "Follow our guide to integrate exchanges, wallets, and other platforms.",
link: "/integrators/overview",
},
{
title: "Get the Architecture Overview",
text: "Explore MultiversX innovations.",
link: "/technology/architecture-overview",
},
{
title: "Discover SpaceVM",
text: "A fast and secure virtual machine to power growth.",
link: "/learn/space-vm",
},
{
title: "Get EGLD",
text: "You need EGLD or xEGLD in order to be able to interact with the MultiversX Network.",
link: "/learn/EGLD#getting-egld",
},
{
title: "Tools & Resources",
text: "You can access the best set of tools that you may need for running your project.",
link: "https://multiversx.com/builders/builder-tools-resources",
},
{
title: "Tutorials",
text: "A great start for anyone looking to learn.",
link: "https://multiversx.com/builders/build-your-first-multiversx-dapp-in-30-minutes",
},
],
},
promo: {
title: "Build and deploy custom L2s or Appchains",
tag: "Sovereign Chains",
subtitle:
"Enable new types of use cases made possible by scalable, efficient, secure and dedicated blockchains - powered by the Sovereign Chain SDK.",
link: "sovereign/overview",
button: "Sovereign Chains Documentation",
},
community: {
title: "Engage the developer community",
subtitle:
"Discover all places where the community gathers and the live community session happening.",
cards: [
{
title: "Developer Discord",
text: "Connect with other developers building on MultiversX",
link: "https://discord.com/invite/multiversxbuilders",
icon: faDiscord,
},
{
title: "Developer Telegram",
text: "Connect with other MultiversX Builders and developers",
link: "https://t.me/MultiversX",
icon: faTelegram,
},
{
title: "Stack Overflow",
text: "Get answers to technical questions from the community",
link: "https://stackoverflow.com/questions/tagged/multiversx",
icon: faStackOverflow,
},
],
},
resources: {
subtitle: "More resources:",
links: [
{
text: "Developer Podcasts",
link: "https://open.spotify.com/show/4I6Xr5Mmd10ywvb2aj7e6Z",
},
{
text: "Stack Overflow",
link: "https://stackoverflow.com/questions/tagged/multiversx",
},
{
text: "Tech Talks from xDay 2023",
link: "https://www.youtube.com/watch?v=WoIa4sQuNDo",
},
{
text: "@multiversx on X",
link: "https://twitter.com/MultiversX",
},
],
},
};

export default homepage;
38 changes: 6 additions & 32 deletions src/components/Community/index.jsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,16 @@
import React from "react";
import {
faDiscord,
faTelegram,
faStackOverflow,
} from "@fortawesome/free-brands-svg-icons";

import Section from "../Section";

const TITLE = "Engage the developer community";
const SUBTITLE =
"Discover all places where the community gathers and the live community session happening.";
const CARDS = [
{
title: "Developer Discord",
text: "Connect with other developers building on MultiversX",
link: "https://discord.com/invite/multiversxbuilders",
icon: faDiscord,
},
{
title: "Developer Telegram",
text: "Connect with other MultiversX Builders and developers",
link: "https://t.me/MultiversX",
icon: faTelegram,
},
{
title: "Stack Overflow",
text: "Get answers to technical questions from the community",
link: "https://stackoverflow.com/questions/tagged/multiversx",
icon: faStackOverflow,
},
];
import homepage from "../../../homepage";

const Community = () => {
const { community } = homepage;

return (
<Section
title={TITLE}
subtitle={SUBTITLE}
cards={CARDS}
title={community.title}
subtitle={community.subtitle}
cards={community.cards}
cardsClassname="community-card has-icon-gradient"
/>
);
Expand Down
51 changes: 5 additions & 46 deletions src/components/Features/index.jsx
Original file line number Diff line number Diff line change
@@ -1,56 +1,15 @@
import React from "react";

import Section from "../Section";

const TITLE = "Do more with MultiversX";
const CARDS = [
{
title: "Create a Token",
text: "Issue your own ESDT token, MultiversX's improved equivalent of ERC-20.",
link: "/tokens/intro",
},
{
title: "Manage a Wallet",
text: "Create a wallet to send, receive and store MultiversX tokens.",
link: "/wallet/overview",
},
{
title: "Integrate MultiversX",
text: "Follow our guide to integrate exchanges, wallets, and other platforms.",
link: "/integrators/overview",
},
{
title: "Get the Architecture Overview",
text: "Explore MultiversX innovations.",
link: "/technology/architecture-overview",
},
{
title: "Discover SpaceVM",
text: "A fast and secure virtual machine to power growth.",
link: "/learn/space-vm",
},
{
title: "Get EGLD",
text: "You need EGLD or xEGLD in order to be able to interact with the MultiversX Network.",
link: "/learn/EGLD#getting-egld",
},
{
title: "Tools & Resources",
text: "You can access the best set of tools that you may need for running your project.",
link: "https://multiversx.com/builders/builder-tools-resources",
},
{
title: "Tutorials",
text: "A great start for anyone looking to learn.",
link: "https://multiversx.com/builders/build-your-first-multiversx-dapp-in-30-minutes",
},
];
import homepage from "../../../homepage";

const Features = () => {
const { features } = homepage;

return (
<Section
title={TITLE}
cards={CARDS}
title={features.title}
cards={features.cards}
cardsClassname="feature-card"
hasSmallCards={true}
/>
Expand Down
33 changes: 6 additions & 27 deletions src/components/Hero/index.jsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,24 @@
import React from "react";
import { faBook, faHammer, faServer } from "@fortawesome/free-solid-svg-icons";

import Section from "../Section";

const TITLE = "MultiversX Developer Docs";
const SUBTITLE = "Choose your path, you must.";
const CARDS = [
{
title: "Learn about MultiversX",
text: "Meet the blockchain that can offer true internet-scale performance.",
link: "/welcome/welcome-to-multiversx",
icon: faBook,
},
{
title: "Start Building",
text: "Build your decentralized application in minutes.",
link: "/developers/overview",
icon: faHammer,
},
{
title: "Run a validator node",
text: "Validate transactions, secure the network, and earn rewards.",
link: "/validators/overview",
icon: faServer,
},
];
import homepage from "../../../homepage";

const Hero = () => {
const { hero } = homepage;

return (
<>
<section className="flex-col justify-start items-start gap-32 inline-flex">
<div className="self-stretch flex-col justify-center items-start gap-4 flex">
<h1 className="title-shadow text-neutral-1000 dark:text-neutral-50 mb-0 text-[42px] sm:text-[56px] font-medium leading-[42px] sm:leading-[56px]">
{TITLE}
{hero.title}
</h1>
<p className="text-neutral-500 text-[21px] font-normal leading-relaxed">
{SUBTITLE}
{hero.subtitle}
</p>
</div>
</section>
<Section cards={CARDS} cardsClassname="hero-card" />
<Section cards={hero.cards} cardsClassname="hero-card" />
</>
);
};
Expand Down
22 changes: 9 additions & 13 deletions src/components/Promo/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,12 @@ import clsx from "clsx";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import homepage from "../../../homepage";
import "./promo.css";

const TAG = "Sovereign Chains";
const TITLE = "Build and deploy custom L2s or Appchains";
const SUBTITLE =
"Enable new types of use cases made possible by scalable, efficient, secure and dedicated blockchains - powered by the Sovereign Chain SDK.";
const LINK = "sovereign/overview";
const BUTTON = "Sovereign Chains Documentation";

const Promo = () => {
const { promo } = homepage;

return (
<div className="promo relative h-[706px] rounded-[40px] flex-col justify-center items-center gap-32 inline-flex overflow-hidden">
<video
Expand All @@ -32,28 +28,28 @@ const Promo = () => {
<div className="h-7 px-[7px] bg-teal-400/10 rounded-[48px] border border-solid border-green-600/70 backdrop-blur-[36px] justify-center items-center inline-flex">
<div className="self-stretch px-1.5 justify-center items-center gap-2 flex">
<div className="text-center text-white dark:text-teal-200 dark:opacity-60 text-base font-normal leading-none">
{TAG}
{promo.tag}
</div>
</div>
</div>
<div className="lg:w-[686px] text-center text-neutral-200 font-medium text-[42px] leading-[46px] lg:text-[56px] lg:leading-[56px]">
{TITLE}
{promo.title}
</div>
<div className="lg:w-[700px] text-center text-neutral-500 lg:text-[21px] font-normal leading-snug">
{SUBTITLE}
{promo.subtitle}
</div>
</div>
{LINK && (
{promo.link && (
<div className="justify-center items-start gap-2 inline-flex px-5">
<Link
to={LINK}
to={promo.link}
className={clsx(
"btn-teal text-black dark:text-primary bg-white hover:bg-neutral-200 dark:bg-primary dark:hover:bg-teal-300 px-3 rounded-xl justify-center items-center flex hover:no-underline"
)}
>
<div className="px-4 py-3 rounded-lg justify-center items-center gap-2 flex">
<div className="text-center text-gray-950 text-lg font-semibold leading-normal">
{BUTTON}
{promo.button}
</div>
</div>
<div className="justify-center items-center flex">
Expand Down
31 changes: 10 additions & 21 deletions src/components/Resources/index.jsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
import React from "react";

import Section from "../Section";

const SUBTITLE = "More resources:";
const LINKS = [
{
text: "Developer Podcasts",
link: "https://open.spotify.com/show/4I6Xr5Mmd10ywvb2aj7e6Z",
},
{
text: "Stack Overflow",
link: "https://stackoverflow.com/questions/tagged/multiversx",
},
{
text: "Tech Talks from xDay 2023",
link: "https://www.youtube.com/watch?v=WoIa4sQuNDo",
},
{
text: "@multiversx on X",
link: "https://twitter.com/MultiversX",
},
];
import homepage from "../../../homepage";

const Resources = () => {
return <Section subtitle={SUBTITLE} links={LINKS} className="-mt-20" />;
const { resources } = homepage;

return (
<Section
subtitle={resources.subtitle}
links={resources.links}
className="-mt-20"
/>
);
};

export default Resources;

0 comments on commit 460d31d

Please sign in to comment.