Updates to Get BZZ & Added Fellowships page (#141)

* Fellowships, Get BZZ Update

* Removed note

* Move CTA to content CTA

* Content update

* Text centering

components/common/ContentBlock.tsx

@@ -5,13 +5,20 @@ type ContentBlockProps = {
   className?: string;
   title: string;
   content: string;
+  children?: React.ReactNode;
 };
 
-const ContentBlock = ({ title, content, className }: ContentBlockProps) => {
+const ContentBlock = ({
+  title,
+  content,
+  className,
+  children,
+}: ContentBlockProps) => {
   return (
-    <div className={cx(className, " md:pr-5")}>
+    <div className={cx(className, "md:pr-5")}>
       <h3 className="text-3xl font-semibold leading-[1.2]">{title}</h3>
       <SectionContent className={cx("mt-5 text-[17px]")} content={content} />
+      {children}
     </div>
   );
 };

components/common/FeatureBridges.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import Icons from "@/icons/components/index";
+import { cx } from "utils";
+
+type Props = {};
+
+const items = [
+  {
+    label: "Gnosis",
+    url: "https://bridge.gnosischain.com/",
+    icon: Icons.GnosisIcon,
+  },
+  {
+    label: "Juniper",
+    url: "https://jumper.exchange/exchange?fromChain=1&fromToken=0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48&toChain=100&toToken=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
+    icon: Icons.JuniperIcon,
+  },
+];
+
+const FeatureBridges: React.FC<Props> = () => {
+  return (
+    <div className="grid grid-cols-2 gap-5 mt-10 xl:grid-cols-3">
+      {items.map(({ label, url, icon }, index) => {
+        const IconTag: any = icon ?? false;
+        return (
+          <a
+            key={index}
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            className={cx(
+              "flex flex-col text-center items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-4 py-5 text-sm sm:text-[17px] font-bold duration-200 group"
+            )}
+          >
+            <IconTag className="flex-shrink-0 w-6 max-h-6" />
+
+            <span className="mt-4">{label}</span>
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FeatureBridges;

components/common/FeatureExchanges.tsx

@@ -7,20 +7,25 @@ type Props = {};
 
 const items = [
   {
-    label: "Uniswap ->",
+    label: "Uniswap (ETH)",
     url: "https://app.uniswap.org/#/swap?chain=ethereum&inputCurrency=ETH&outputCurrency=0x19062190B1925b5b6689D7073fDfC8c2976EF8Cb",
     icon: Icons.UniswapIcon,
   },
   {
-    label: "Honeyswap ->",
+    label: "SushiSwap (xDAI)",
+    url: "https://www.sushi.com/swap?chainId=100&token0=NATIVE&token1=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
+    icon: Icons.SushiSwapIcon,
+  },
+  {
+    label: "Honeyswap (xDAI)",
     url: "https://honeyswap.1hive.eth.limo/#/swap?chain=xdai&outputCurrency=0xdBF3Ea6F5beE45c02255B2c26a16F300502F68da",
     icon: Icons.HoneyswapIcon,
   },
 ];
 
 const FeatureExchanges: React.FC<Props> = () => {
   return (
-    <>
+    <div className="grid grid-cols-2 gap-5 mt-10 xl:grid-cols-3">
       {items.map(({ label, url, icon }, index) => {
         const IconTag: any = icon ?? false;
         return (
@@ -30,8 +35,7 @@ const FeatureExchanges: React.FC<Props> = () => {
             target="_blank"
             rel="noreferrer"
             className={cx(
-              " flex flex-col items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-4 py-5 text-[17px] font-bold duration-200 group col-span-6 md:col-span-2",
-              index === items.length - 1 ? "md:col-start-1" : ""
+              "flex flex-col text-center items-center border border-[#2D3843] rounded-xl overflow-hidden bg-[#1F2831]/70 px-4 py-5 text-sm sm:text-[17px] font-bold duration-200 group"
             )}
           >
             <IconTag className="flex-shrink-0 w-6 max-h-6" />
@@ -40,7 +44,7 @@ const FeatureExchanges: React.FC<Props> = () => {
           </a>
         );
       })}
-    </>
+    </div>
   );
 };
 

components/sections/ContentContainer.tsx

@@ -14,6 +14,7 @@ import { CtaType, FeatureListType, ImageType } from "types";
 import { cx } from "utils";
 import CodeBlock from "./Develop/CodeBlock";
 import GridContainer from "../common/GridContainer";
+import FeatureBridges from "../common/FeatureBridges";
 
 type ContentContainerProps = {
   title: string;
@@ -103,7 +104,10 @@ const ContentContainer: React.FC<ContentContainerProps> = ({
                     "col-span-12 md:col-span-6",
                     title && !content ? "mt-10 md:mt-20" : "md:mt-24"
                   )}
-                />
+                >
+                  {block.exchanges && <FeatureExchanges />}
+                  {block.bridges && <FeatureBridges />}
+                </ContentBlock>
               ))}
 
             {blocks.bzzPrice && (
@@ -112,7 +116,6 @@ const ContentContainer: React.FC<ContentContainerProps> = ({
             {blocks.bzzPot && (
               <FeatureBzzPot className="mt-5 md:mt-10 md:col-start-7 lg:col-start-7" />
             )}
-            {blocks.exchanges && <FeatureExchanges />}
           </>
         )}
 

content/pages/fellowships.md

@@ -0,0 +1,74 @@
+---
+meta:
+  title: Fellowships
+sections:
+  - type: Section
+    data:
+      hero:
+        title: Swarm Fellowships
+        id: impact
+        content: >-
+          “To be a Swarm fellow is to be a bird in the high canopy of the rainforest.” Anonymous, 2022
+        ctas:
+          - title: Apply ->
+            href: "http://my.ethswarm.org/fellowships"
+            arrow: true
+            background: orange
+            type: default
+            back: false
+            template: cta
+        background:
+          src: /assets/hero/transparent.png
+          alt: ""
+          position: ""
+        footnote: ""
+      items:
+        - tagline: ""
+          title: Purpose of Fellowships
+          content: >-
+            Swarm fellows work on items identified as needs for the Swarm network to evolve and grow, but not part of core Swarm development. Fellows are expected to pursue the goals supported by the fellowship in the long term as part of their path. A fellowship helps them achieve results to a certain degree, but afterwards, the project should be possible to sustain and continue on its own.
+
+
+            For example, fellows might develop an important product that is based on using the Swarm network and extends its usage. They support the network as well as promote its usage both directly and through the use of their product. They are ambassadors of Swarm.
+
+
+            Fellowships could fall under categories such as:
+             - a decentralised protocol tackling a concrete issue or challenge (e.g communication, personal data management, supply chain, etc.),
+             - tooling for developers,
+             - tools or applications for end users,
+             - developing tech infrastructure supporting the Swarm network,
+             - and others.
+
+            The work must be available as open source, for others to leverage and reuse.
+          image: ""
+          features:
+            columns: ""
+            type: default
+            features: []
+          contentCtas:
+            - title: Apply ->
+              href: "http://my.ethswarm.org/fellowships"
+              arrow: true
+              background: orange
+              type: default
+              back: false
+              template: cta
+          code: ""
+          template: section-item
+        - tagline: ""
+          title: Active Fellowships
+          content: >-
+            - Data availability
+             - Data provenance
+            - Video & Metaverse
+          image: ""
+          features:
+            columns: ""
+            type: default
+            features: []
+          ctas: []
+          code: ""
+          template: section-item
+      disclaimer: false
+    template: section
+---

content/pages/get-bzz.md

@@ -47,10 +47,10 @@ sections:
           blocks:
             type: large
             columns: two
-            exchanges: true
             features:
               - template: feature
                 title: Decentralised exchanges (DEXs)
+                exchanges: true
                 content: Make certain to check you are connected to the correct blockchain in your browser extension wallet (such as Metamask) when using any of these DEXes.
               - template: feature
                 title: Centralised exchanges (CEXs)
@@ -59,6 +59,10 @@ sections:
                   price-tracking websites such as [Coingecko](https://www.coingecko.com/en/coins/swarm#markets)
                   or [Coinmarketcap](https://coinmarketcap.com/currencies/ethereum-swarm/markets/)
                   under their ‘markets’ tab.
+              - template: feature
+                title: Bridges
+                bridges: true
+                content: For purchasing BZZ from one chain to another, you can use the following bridges
           title: How to get BZZ
           id: "how-to-get-bzz"
           content: |-
@@ -115,8 +119,7 @@ sections:
             features:
               - template: feature
                 title: Is the token supply deflationary like Bitcoin?
-                content:
-                  The token supply is fixed at 63,149,437. It is an standard ERC-20 token, the contract for which can be found [here](https://etherscan.io/token/0x19062190b1925b5b6689d7073fdfc8c2976ef8cb).
+                content: The token supply is fixed at 63,149,437. It is an standard ERC-20 token, the contract for which can be found [here](https://etherscan.io/token/0x19062190b1925b5b6689d7073fdfc8c2976ef8cb).
               - template: feature
                 title: What can I store with BZZ?
                 content: Almost anything you can imagine! You can store and retrieve many types of data—from webpages, NFT metadata, archives, to database backups, streaming audio and video, and much more. You can get started with uploading data by [purchasing your first batch of stamps](https://docs.ethswarm.org/docs/develop/access-the-swarm/buy-a-stamp-batch).

data/nav/main.json

@@ -81,6 +81,11 @@
           "title": "Grants",
           "subtitle": "Make an impact"
         },
+        {
+          "href": "/fellowships",
+          "title": "Fellowships",
+          "subtitle": "Swarm Fellwoship program"
+        },
         {
           "href": "https://app.dework.xyz/swarm-41421",
           "title": "Bounties",

icons/components/GnosisIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GnosisIcon(props: React.ComponentProps<'svg'>): JSX.Element;
+export default GnosisIcon;

icons/components/JuniperIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function JuniperIcon(props: React.ComponentProps<'svg'>): JSX.Element;
+export default JuniperIcon;

icons/components/SushiSwapIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function SushiSwapIcon(props: React.ComponentProps<'svg'>): JSX.Element;
+export default SushiSwapIcon;