Initial draft for Sustain Africa 2024, pending design updates

Author: Princesso

package-lock.json

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { aboutus } from "./cloudImages";
+
+function About() {
+  return (
+    <section id="about" className="bg-white">
+      <div className="container px-5 lg:px-0 mx-auto my-10 lg:my-20">
+        <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-5 lg:mb-10">
+          <h3 className="font-humane font-medium text-[7rem] md:text-[10rem] lg:text-[20rem] w-[20%] lg:w-full lg:basis-1/4 leading-[0.8] mb-5 lg:mb-0 lg:ml-10 uppercase text-wrap lg:order-last">
+            About Us
+          </h3>
+          <figure className="lg:grow">
+            <img
+              alt="Osca Fest 2022 conference at Tech Zone Park"
+              src={aboutus.groupshot}
+              className="object-fit w-full h-full"
+            />
+          </figure>
+        </div>
+        <div className="lg:w-[800px]">
+          <blockquote className="font-clashDisplay text-black text-left tracking-tight text-sm md:text-lg lg:text-xl">
+            Open Source Community Africa is a community aimed at creating and supporting the open source movement within
+            Africa. As a community, we intend to help integrate the act of open source contribution to African
+            developers whilst strongly advocating the movement of free and open source software. <br />
+            <br />
+            Open Source Festival is a high profile event that would attract student delegates, developers, designers and
+            corporate organizations on a large scale with series of talks, workshops, and awareness of open-sourced
+            developer tools. The second edition is going to be a forum for networking, discussions and ideas proration
+            around latest happenings in technology as well as the growth of open source in Africa. <br />
+            <br />
+            Through this festival, we intend to open the eyes of Africans so they can be aware that FUTURE IS OPEN.
+          </blockquote>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default About;

src/components/2024/about.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function Breadcrumb(props) {
+  return (
+    <div>
+      <section
+        id={props.name}
+        className="relative h-[300px] lg:h-[600px] overflow-hidden flex items-center justify-center"
+      >
+        <div className="font-humane lg:mt-24 font-medium text-[8rem] md:text-[10rem] lg:text-[20rem] leading-none uppercase">
+          <h1 className="text-white text-[128px] lg:text-[400px] font-[500] text-center lg:-mb-16">{props.name}</h1>
+        </div>
+        <span
+          className="lg:block w-[400px] lg:w-[600px] h-[400px] lg:h-[600px] z-5 absolute blur-[54px] right-[-170px] top-[-76.95px] lg:top-[-181.36px]"
+          style={{
+            background:
+              "radial-gradient(34.85% 34.85% at 50% 50%, rgba(245, 185, 255, 0.5) 0%, rgba(121, 255, 191, 0.125) 50.52%, rgba(187, 251, 255, 0.02) 100%)"
+          }}
+        ></span>
+        <span
+          className="lg:block w-[400px] lg:w-[600px] h-[400px] lg:h-[600px] z-10 absolute blur-[100px] left-[-252.98px] lg:left-[-48px] top-[100px] lg:top-[477px]"
+          style={{
+            background:
+              "radial-gradient(50% 50% at 50% 50%, rgba(255, 0, 26, 0.41) 0%, rgba(255, 2, 230, 0.27) 50.52%, rgba(212, 0, 255, 0) 100%)"
+          }}
+        ></span>
+      </section>
+    </div>
+  );
+}
+
+Breadcrumb.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+export default Breadcrumb;

src/components/2024/breadcrumb.js

@@ -0,0 +1,90 @@
+const homeBackground = Object.freeze({
+  background: "https://res.cloudinary.com/osca/image/upload/v1690190185/osf/2023/bpfh7czlmrrggpwv1xrp.png",
+  logo: "https://res.cloudinary.com/osca/image/upload/q_auto,f_auto/v1576374332/osf/Logo/SVG/orange.svg",
+  title: "https://res.cloudinary.com/osca/image/upload/v1690190205/osf/2023/vtrenxfs0ba3hoa5strv.png",
+  titleLarge: "https://res.cloudinary.com/osca/image/upload/v1690190358/osf/2023/l2mwdazkcucaxwijq526.png",
+  northeastArrow: "https://res.cloudinary.com/osca/image/upload/v1690190353/osf/2023/nnf0gztyck3lgcebm9q3.svg"
+});
+
+const aboutus = Object.freeze({
+  groupshot: "https://res.cloudinary.com/osca/image/upload/v1690190463/osf/2023/exhrzc9ugtt4byofczpo.jpg"
+});
+
+const gallery = Object.freeze({
+  one: "https://res.cloudinary.com/osca/image/upload/v1690189685/osf/2023/gallery/so7vetrt5fjq2q1kvr1h.jpg",
+  two: "https://res.cloudinary.com/osca/image/upload/v1690197301/osf/2023/gallery/lxrxztohyosqcjm198iu.jpg",
+  three: "https://res.cloudinary.com/osca/image/upload/v1690197375/osf/2023/gallery/erjzlrsogcu0ephdvjfw.jpg"
+});
+
+const speakers = Object.freeze({
+  dummyImage: "https://res.cloudinary.com/osca/image/upload/v1645997775/osf/2022/Speakers/v0dcxtxhuhxs0iahjfgx.png",
+  angie: "https://res.cloudinary.com/osca/image/upload/v1690190733/osf/2023/speakers/kn6ss4lzaakkmqblq18i.jpg",
+  bdougie: "https://res.cloudinary.com/osca/image/upload/v1690190734/osf/2023/speakers/facmfok7k8duydqzpquu.jpg",
+  jan: "https://res.cloudinary.com/osca/image/upload/v1690190733/osf/2023/speakers/pcnn2bhk0uwlnzlsrnvj.jpg",
+  regina: "https://res.cloudinary.com/osca/image/upload/v1690190733/osf/2023/speakers/dsbdkuhijvp4ksct1f2p.jpg",
+  adora: "https://res.cloudinary.com/osca/image/upload/v1690190732/osf/2023/speakers/yqb5td4fqanynpn05xsg.jpg",
+  aniedi: "https://res.cloudinary.com/osca/image/upload/v1690190732/osf/2023/speakers/l2mt5hxz9siqwsnkuxuy.jpg",
+  chisom: "https://res.cloudinary.com/osca/image/upload/v1690190731/osf/2023/speakers/yn5xqa8oh1gg9n1zsedz.jpg",
+  edidiong: "https://res.cloudinary.com/osca/image/upload/v1690190731/osf/2023/speakers/iejjtlbek1rvb67a8g7y.jpg",
+  john: "https://res.cloudinary.com/osca/image/upload/v1690190731/osf/2023/speakers/y8kdezse5cb9j26h4zfq.jpg",
+  kelvin: "https://res.cloudinary.com/osca/image/upload/v1690190731/osf/2023/speakers/yit0dea6dnjg5hebjxf2.jpg",
+  njoku: "https://res.cloudinary.com/osca/image/upload/v1690190730/osf/2023/speakers/ujbq9tnm7eyaveeswf81.jpg",
+  oluebube: "https://res.cloudinary.com/osca/image/upload/v1690190729/osf/2023/speakers/vzjbizvbqc74eqp3bdjx.jpg",
+  prosper: "https://res.cloudinary.com/osca/image/upload/v1690190730/osf/2023/speakers/la0th3cgosh17yc8zgxw.jpg",
+  rachel: "https://res.cloudinary.com/osca/image/upload/v1690190729/osf/2023/speakers/iymtduock6cy33mb73og.jpg",
+  sodiq: "https://res.cloudinary.com/osca/image/upload/v1690190729/osf/2023/speakers/qg3dz370auadn1g1ievy.jpg",
+  sultan: "https://res.cloudinary.com/osca/image/upload/v1690190729/osf/2023/speakers/u1gtnoao1hf33fcc3idq.jpg"
+});
+
+const sponsors = Object.freeze({
+  google: "https://res.cloudinary.com/osca/image/upload/v1690190918/osf/2023/sponsors/black/l8axabiu2bkqepwh74vi.svg",
+  microsoft:
+    "https://res.cloudinary.com/osca/image/upload/v1690191124/osf/2023/sponsors/black/cerszefzqsirvlmehz3s.svg",
+  osc: "https://res.cloudinary.com/osca/image/upload/v1690191126/osf/2023/sponsors/black/tiwqzoi8jmvslu7h57tr.svg",
+  paystack: "https://res.cloudinary.com/osca/image/upload/v1690191125/osf/2023/sponsors/black/vkeyfaxfkgxapxdewcnr.svg",
+  cannonical:
+    "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/eyidgcayxwa9qi8dlhgi.svg",
+  orbit: "https://res.cloudinary.com/osca/image/upload/v1690191125/osf/2023/sponsors/black/mntfnlsqtfoscbnh39u5.svg",
+  payday: "https://res.cloudinary.com/osca/image/upload/v1690191128/osf/2023/sponsors/black/isuhzhd1juff8xzy0jp1.svg",
+  penpot: "https://res.cloudinary.com/osca/image/upload/v1690191125/osf/2023/sponsors/black/yhvtf7cizwydjqbywrsp.svg",
+  uvm: "https://res.cloudinary.com/osca/image/upload/v1690191125/osf/2023/sponsors/black/hyjgani4og6fzm3prkzx.svg",
+  axelar: "https://res.cloudinary.com/osca/image/upload/v1690191124/osf/2023/sponsors/black/msmlkhrl0ersqwashxmg.svg",
+  gnome: "https://res.cloudinary.com/osca/image/upload/v1690191125/osf/2023/sponsors/black/bstnshe4qynnmmccl8pq.svg",
+  outreachy:
+    "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/naihr2bu0nmpgkzqa57p.png",
+  celo: "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/por11hc97auinw6sd7q7.png",
+  cncf: "https://res.cloudinary.com/osca/image/upload/v1690191124/osf/2023/sponsors/black/c3nprzlwrugtqbzfaa0q.svg",
+  block: "https://res.cloudinary.com/osca/image/upload/v1690191129/osf/2023/sponsors/black/vnzmwny4jclqud3clejf.svg",
+  polytope: "https://res.cloudinary.com/osca/image/upload/v1690191127/osf/2023/sponsors/black/qv3zynylzhfu0go9zplq.svg",
+  kora: "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/bmc4klqnb6phx0imhhs7.svg",
+  eden: "https://res.cloudinary.com/osca/image/upload/v1690191126/osf/2023/sponsors/black/wpodowvmxhysetnfrsiq.svg",
+  africantalking:
+    "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/ks3rbn2v59dy7k0vet3n.png",
+  alt: "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/y6dwwioamdregdfaoves.svg",
+  etionary: "https://res.cloudinary.com/osca/image/upload/v1690191123/osf/2023/sponsors/black/optcrt9o98rnxuq8z9se.png"
+});
+
+const sponsorsColored = Object.freeze({
+  google: "https://res.cloudinary.com/osca/image/upload/v1690191567/osf/2023/sponsors/colored/qvmihr614247vcwcoaay.svg",
+  microsoft:
+    "https://res.cloudinary.com/osca/image/upload/v1690191567/osf/2023/sponsors/colored/d1dq0lgtcufn1py03r6y.svg",
+  osc: "https://res.cloudinary.com/osca/image/upload/v1690191567/osf/2023/sponsors/colored/dbktrtp6lei5yxrkalwm.svg",
+  paystack:
+    "https://res.cloudinary.com/osca/image/upload/v1690191567/osf/2023/sponsors/colored/nrvzehqjp41bx5eeimd6.svg",
+  cannonical:
+    "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/jsy2lxej5jiedzwrj9tb.svg",
+  orbit: "https://res.cloudinary.com/osca/image/upload/v1690191567/osf/2023/sponsors/colored/s8yzgqwpqt7hx5ngutms.svg",
+  uvm: "https://res.cloudinary.com/osca/image/upload/v1690191566/osf/2023/sponsors/colored/mldps2ogz9y33tsoxo3n.svg",
+  gnome: "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/tufjkzn5vfbwaltdpts9.svg",
+  outreachy:
+    "https://res.cloudinary.com/osca/image/upload/v1690191564/osf/2023/sponsors/colored/zv2j7oo6w3cw29ijirqp.png",
+  cncf: "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/tsm38rwo28y3ieiweftv.svg",
+  kora: "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/tufjkzn5vfbwaltdpts9.svg",
+  eden: "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/cehhta9hba3dsdalw5li.svg",
+  africantalking:
+    "https://res.cloudinary.com/osca/image/upload/v1690191564/osf/2023/sponsors/colored/hvjmtk65l92i2xgw4m33.png",
+  etionary:
+    "https://res.cloudinary.com/osca/image/upload/v1690191565/osf/2023/sponsors/colored/upvqd8z06hcchdgfornd.png"
+});
+
+export { homeBackground, aboutus, gallery, speakers, sponsors, sponsorsColored };

src/components/2024/cloudImages.js

@@ -0,0 +1,136 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+import { faDiscord, faFacebookSquare, faGithub, faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
+import { faCalendar, faEnvelope, faExternalLinkAlt, faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
+
+import Gallery from "./gallery";
+
+library.add(
+  faEnvelope,
+  faCalendar,
+  faMapMarkerAlt,
+  faExternalLinkAlt,
+  faTwitter,
+  faFacebookSquare,
+  faInstagram,
+  faGithub,
+  faDiscord
+);
+config.autoAddCss = false;
+
+function Footer(props) {
+  return (
+    <footer className="bg-white">
+      <div className="container mx-auto px-5 md:px-0 lg:px-0 py-10 lg:py-20 mt-20 lg:mt-16">
+        <div className="flex sm:flex-row flex-col z-15 justify-between text-sm mb-10 lg:mb-20 text-center md:text-left">
+          <h1 className="font-humane font-black h-20 lg:h-full text-sship2 md:text-[15rem] lg:text-[25rem] md:mt-24 lg:mt-[155px] uppercase tracking-wide">
+            Thank You<span className="text-[#F7931E]">.</span>
+          </h1>
+          <div className="lg:basis-1/4">
+            <h1 className="font-clashDisplay font-black p-1 text-xl lg:text-3xl uppercase">🧡 from the osca team</h1>
+            <div className="z-10 mt-8">
+              {[
+                {
+                  route: "https://docs.oscafrica.org/about/community-code-of-conduct",
+                  title: "Code of Conduct"
+                },
+                {
+                  route: "/gallery",
+                  title: "Gallery"
+                },
+                {
+                  route: "https://oscafrica.org/community",
+                  title: "Community"
+                },
+                {
+                  route: "https://opencollective.com/osca",
+                  title: "Open Collective"
+                },
+                {
+                  route: "https://blog.oscafrica.org",
+                  title: "Blog"
+                }
+              ].map((link) => (
+                <ul className="group m-0 p-0" key={link.title}>
+                  <li className="lg:pr-8 pb-2">
+                    <a
+                      className="group-hover:text-[#F7931E] font-clashDisplay no-underline text-black text-lg"
+                      href={link.route}
+                    >
+                      {link.title}
+                    </a>
+                  </li>
+                </ul>
+              ))}
+            </div>
+            <div className="z-10 mt-8">
+              {[
+                {
+                  key: 0,
+                  label: "Email",
+                  faIcon: ["fa", "envelope"],
+                  href: "mailto:[email protected]"
+                },
+                {
+                  key: 1,
+                  label: "Twitter",
+                  faIcon: ["fab", "twitter"],
+                  href: "https://twitter.com/oscafest"
+                },
+                {
+                  key: 2,
+                  label: "Facebook",
+                  faIcon: ["fab", "facebook-square"],
+                  href: "https://facebook.com/opensourcecommunityafrica"
+                },
+                {
+                  key: 3,
+                  label: "Instagram",
+                  faIcon: ["fab", "instagram"],
+                  href: "https://www.instagram.com/oscafrica"
+                },
+                {
+                  key: 4,
+                  label: "GitHub",
+                  faIcon: ["fab", "github"],
+                  href: "https://github.com/oscafrica"
+                },
+                {
+                  key: 5,
+                  label: "Discord",
+                  faIcon: ["fab", "discord"],
+                  href: "https://discord.gg/open-source-community-africa-676252299093475348"
+                }
+              ].map((icon) => (
+                <a
+                  key={icon.key}
+                  aria-label={icon.label}
+                  className="group p-2 no-underline text-black text-lg border mr-3"
+                  href={icon.href}
+                >
+                  <i>
+                    <FontAwesomeIcon icon={icon.faIcon} className="group-hover:text-[#F7931E]" />
+                  </i>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+        {props.showGallery ? <Gallery /> : null}
+      </div>
+    </footer>
+  );
+}
+
+Footer.propTypes = {
+  showGallery: PropTypes.bool
+};
+
+Footer.defaultProps = {
+  showGallery: true
+};
+
+export default Footer;

src/components/2024/footer.js

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { gallery } from "./cloudImages";
+
+function Gallery() {
+  return (
+    <section id="gallery" className="bg-white">
+      <div className="grid lg:grid-cols-2 gap-4 lg:gap-6 text-white">
+        {[
+          {
+            day: "Day 0",
+            tag: "Sustain Africa",
+            image: gallery.one,
+            href: "https://flic.kr/s/aHBqjAKNq2"
+          },
+          {
+            day: "Day 1",
+            tag: "Workshop + Conference",
+            image: gallery.two,
+            href: "https://flic.kr/s/aHBqjANqno"
+          },
+          {
+            day: "Day 2",
+            tag: "Conference",
+            image: gallery.three,
+            href: "https://flic.kr/s/aHBqjANxYi"
+          }
+        ].map((gallery) => (
+          <a
+            href={gallery.href}
+            key={gallery.day}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`group overflow-hidden p-3 ${gallery.day === "Day 0" ? "lg:col-start-1 lg:col-end-3" : ""}`}
+          >
+            <img
+              className="group-hover:scale-125 transition-all ease-in-out delay-0 mx-auto h-full w-full brightness-75"
+              src={gallery.image}
+              alt={`An amazing photograph from ${gallery.tag}.`}
+            />
+            <div className="z-0 -mt-20 px-6 w-auto h-20 text-white relative">
+              <p className="font-clashDisplay p-1 text-sm lg:text-xs mb-2 table uppercase">{gallery.day}</p>
+              <h1 className="font-clashDisplay font-bold p-1 text-xl lg:text-2xl table">{gallery.tag}</h1>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Gallery;