Merge pull request #90 from ethersphere/swarm-2.0

Swarm 2.0

components/index.ts

@@ -20,6 +20,7 @@ import Post from "./sections/Post";
 import Roadmap from "./sections/Roadmap";
 import Odyssey from "./sections/Odyssey";
 import Disclaimer from "./sections/Disclaimer";
+import Swarm20 from "./sections/Swarm20";
 
 export {
   GeneralSection,
@@ -44,4 +45,5 @@ export {
   Section,
   Wikipedia,
   Navigation,
+  Swarm20,
 };

components/sections/Swarm20.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import {
+  ButtonGroup,
+  Container,
+  SectionContent,
+  Tagline,
+} from "@/components/common";
+import { CtaType } from "types";
+
+type Swarm20Props = {
+  title: string;
+  tagline?: string;
+  content?: string;
+  ctas?: Array<CtaType>;
+};
+
+const Swarm20: React.FC<Swarm20Props> = ({
+  title,
+  tagline,
+  content = "",
+  ctas,
+}) => {
+  return (
+    <section className="relative flex flex-col items-center justify-end overflow-hidden text-gray-100 bg-gray-800">
+      <Container className="relative flex flex-col h-full pt-20 pb-16 md:pb-44 md:pt-56">
+        <img
+          src="/assets/swarm20.png"
+          alt="Swarm 2.0 Graphic"
+          className="absolute bottom-0 right-0 xl:-right-12 2xl:right-0 hidden pointer-events-none md:block md:top-[56px] md:h-4/5 h-1/2"
+        />
+        {/* <Tagline copy={tagline} /> */}
+        {/* Same height as the tagline, show if there is no tagline */}
+        <div className="h-[60px] md:h-[76px]" />
+
+        <div className="z-20 mb-8 md:mb-12">
+          <h2
+            className="inline-flex flex-wrap font-bold text-4xl md:text-[64px] md:leading-[70px] tracking-[-0.01em] gap-3 items-center"
+            dangerouslySetInnerHTML={{ __html: title }}
+          />
+        </div>
+
+        <SectionContent
+          className="z-20 text-gray-100 mb-14"
+          content={content}
+        />
+
+        <ButtonGroup ctas={ctas} className="mb-4" />
+      </Container>
+
+      <img
+        src="/assets/swarm20.png"
+        alt="Swarm 2.0 Graphic"
+        className="object-contain object-right w-screen -mt-40 pointer-events-none max-h-96 md:hidden"
+      />
+    </section>
+  );
+};
+
+export default Swarm20;

data/pages/index.json

@@ -1,4 +1,18 @@
 {
+  "swarm20": {
+    "tagline": "Generate freedom",
+    "title": "Swarm 2.0<br />Dec. 21st",
+    "content": "Join the Swarm Foundation team members and community for a virtual event to commemorate the beginning of Swarm 2.0.",
+    "ctas": [
+      {
+        "href": "https://www.addevent.com/event/lf19253018",
+        "background": "orange-onDark",
+        "color": "black",
+        "arrow": true,
+        "title": "Add to calendar"
+      }
+    ]
+  },
   "hero": {
     "title": "Digital Freedom Now.",
     "background": {