The Hustle Page Revamp

README.md

@@ -1,37 +1,40 @@
 # Activities
+
 A `reactplay` hustle
 
 This is a [Next.js](https://nextjs.org/) project.
 
 ## Getting Started
 
 1. Install dependencies
-    ```bash
-    yarn
-    ```
-    **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file.
+   ```bash
+   yarn
+   ```
+   **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file.
 2. Create a `.env` file at the root of your project folder with the following content,
 
-    ```bash
-    NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
-    NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh
-    NEXT_PUBLIC_NHOST_REGION=ap-southeast-1
-    NEXT_PUBLIC_NHOST_PROTOCOL=https
-    NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run
-    NEXT_PUBLIC_NHOST_VERSION=v1
-    NEXT_PUBLIC_NHOST_ENDPOINT=graphql
-    NEXT_PUBLIC_DEV_PORT=3000
-    NEXT_PUBLIC_PROTOCOL=http
-    NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf
-    NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b
-    ```
+   ```bash
+   NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
+   NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh
+   NEXT_PUBLIC_NHOST_REGION=ap-southeast-1
+   NEXT_PUBLIC_NHOST_PROTOCOL=https
+   NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run
+   NEXT_PUBLIC_NHOST_VERSION=v1
+   NEXT_PUBLIC_NHOST_ENDPOINT=graphql
+   NEXT_PUBLIC_DEV_PORT=3000
+   NEXT_PUBLIC_PROTOCOL=http
+   NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf
+   NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b
+   NEXT_PUBLIC_YOUTUBE_API_KEY=DUMMY_API_KEY
+   ```
+
 3. Run the development server:
 
-    ```bash
-    npm run dev
-    # or
-    yarn dev
-    ```
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   ```
 
 4. See your application running
-    Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+   Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

components/Banner.js

@@ -0,0 +1,53 @@
+import Image from "next/image";
+
+// icons
+import { HiArrowNarrowRight } from "react-icons/hi";
+
+// image
+import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";
+
+const Banner = ({ events }) => {
+  console.log(events);
+  const currentEvent = events.filter((event) => event.isCurrent);
+
+  return (
+    <>
+      {currentEvent.length ? (
+        <section className="bg-slate-900">
+          <div className="flex max-w-7xl px-4 mx-auto py-20 justify-between">
+            {/* primary section */}
+            <div className="md:w-1/2 mt-10 px-4 md:px-2 text-gray-200">
+              <div className="w-72">
+                <Image
+                  src={require(`/public/${currentEvent[0].image}.png`)}
+                  alt="Logo"
+                />
+              </div>
+              <h3 className="text-5xl font-black tracking-wide leading-snug font-sans py-8">
+                {currentEvent[0].name}
+              </h3>
+              <p>{currentEvent[0].description}</p>
+              <a
+                href={currentEvent[0].link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 my-8 px-6 rounded-full bg-neutral-100 text-sky-900 py-3"
+              >
+                Join{" "}
+                <span className="inline-block text-base text-cyan-400">
+                  <HiArrowNarrowRight />
+                </span>
+              </a>
+            </div>
+            {/* image section*/}
+            <div className="hidden md:block">
+              <Image src={HeroCoders} width={350} />
+            </div>
+          </div>
+        </section>
+      ) : null}
+    </>
+  );
+};
+
+export default Banner;

components/ExtendedFooter.js

@@ -0,0 +1,205 @@
+import { IoAddSharp, IoLogoRss } from "react-icons/io5";
+import { MdManageSearch } from "react-icons/md";
+import { FaDiscord } from "react-icons/fa";
+import { BsTwitter, BsGithub } from "react-icons/bs";
+import Image from "next/image";
+import LogoLight from "../public/img-logo-light.svg";
+import { HiArrowNarrowRight } from "react-icons/hi";
+
+const ExtendedFooter = () => {
+  return (
+    <footer className="pt-12 pb-6 px-8 text-sm font-light text-zinc-500 border-t border-solid border-zinc-200">
+      <div className=" flex flex-wrap  lg:grid w-[85%] mt-0 mx-auto mb-4 lg:grid-cols-[1fr_1.2fr_0.8fr] gap-16">
+        {/* ReactPlay intro and social icons */}
+        <div className="w-full">
+          <h3>
+            <Image alt="Logo of ReactPlay" src={LogoLight} />
+          </h3>
+          <p className="text-lg lg:text-2xl">
+            An open-source project made with ❤️ by team ReactPlay.
+          </p>
+          <div className="mt-8">
+            <p>
+              <small className="text-xs">Connect with us</small>
+            </p>
+            <ul className="flex flex-wrap gap-4 mt-[0.6rem] mb-4">
+              <li>
+                <a
+                  className="flex justify-center items-center w-12 h-12 rounded-full bg-gray-300/70 hover:bg-cyan-400 focus:bg-cyan-400 group"
+                  href="https://twitter.com/reactplayio"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Twitter page"
+                >
+                  <BsTwitter className="w-6 h-6 text-gray-500 group-hover:text-gray-800" />
+                  <span className="sr-only">Twitter</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="flex justify-center items-center w-12 h-12 rounded-full bg-gray-300/70 hover:bg-cyan-400 focus:bg-cyan-400 group"
+                  href="https://github.com/reactplay"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="GitHub Page"
+                >
+                  <BsGithub className="w-6 h-6 text-gray-500 group-hover:text-gray-800" />
+                  <span className="sr-only">Github</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="flex justify-center items-center w-12 h-12 rounded-full bg-gray-300/70 hover:bg-cyan-400 focus:bg-cyan-400 group"
+                  href="https://discord.gg/vrTxWUP8Am"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Discord Channel"
+                >
+                  <FaDiscord className="w-6 h-6 text-gray-500 group-hover:text-gray-800" />
+                  <span className="sr-only">Discord</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="flex justify-center items-center w-12 h-12 rounded-full bg-gray-300/70 hover:bg-cyan-400 focus:bg-cyan-400 group"
+                  href="https://blog.reactplay.io/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  title="Blog Page"
+                >
+                  <IoLogoRss className="w-6 h-6 text-gray-500 group-hover:text-gray-800" />
+                  <span className="sr-only">BlogPost</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="mt-8">
+            <p>
+              <small className="text-xs">Email us</small>
+            </p>{" "}
+            <div>
+              <p>
+                <a
+                  className="underline text-gray-800 font-normal"
+                  href="mailto:[email protected]"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  [email protected]
+                </a>
+              </p>
+            </div>
+          </div>
+          <p className="mt-8">
+            <a href="https://www.netlify.com">
+              {" "}
+              <img
+                alt="Deploys by Netlify"
+                src="https://www.netlify.com/v3/img/components/netlify-light.svg"
+              />{" "}
+            </a>
+          </p>
+        </div>
+        {/* About */}
+        <div className="w-2/5 lg:w-full">
+          <h3 className="mb-3 text-xl font-medium text-slate-900 lg:text-3xl lg:font-semibold">
+            About
+          </h3>
+          <p className="mb-4 text-gray-600 lg:text-base">
+            ReactPlay is an open-source platform that helps you learn, create
+            and share ReactJS projects with the developer community.
+          </p>
+          <div className="flex flex-wrap gap-1">
+            <a
+              className="border-solid border-2 bg-cyan-400 font-semibold text-sm inline-flex items-center justify-center mr-2 gap-2 py-3 px-6 no-underline rounded-3xl w group border-transparent hover:bg-gray-100 text-slate-900 transition-all ease-in-out duration-100"
+              href="https://docs.reactplay.io/How-To-Guides/how-to-create-play"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <IoAddSharp className="w-6 h-6 text-slate-900 group-hover:text-cyan-400" />
+              <span>Create</span>
+            </a>
+            <a
+              className="border-solid border-2 bg-slate-900/10 font-semibold text-sm inline-flex items-center justify-center mr-2 gap-2 py-3 px-6 no-underline rounded-3xl w group border-transparent hover:bg-gray-100 text-slate-900 transition-all ease-in-out duration-100"
+              href="https://reactplay.io/plays"
+              target="_blank"
+            >
+              <MdManageSearch className="w-6 h-6 text-slate-900 group-hover:text-cyan-400" />
+              <span>Browse</span>
+            </a>
+          </div>
+          <div className="mt-10">
+            <p className="mb-4 text-gray-600 lg:text-base">
+              Not sure how to get started? <br />
+              We have a lot of ideas for you to get started.
+            </p>
+            <div className="mt-2">
+              <a
+                className="underline decoration-2 decoration-cyan-400 underline-offset-4"
+                href="https://docs.reactplay.io/"
+                target="_blank"
+              >
+                <span className="text-gray-700 inline-flex items-center gap-1 group">
+                  Get Started{" "}
+                  <HiArrowNarrowRight className="text-cyan-400 w-6 h-4 group-hover:translate-x-1 transition-all ease-in-out duration-100" />
+                </span>
+              </a>
+            </div>
+            <div className="mt-2">
+              <p>
+                <a
+                  className="underline decoration-2 decoration-cyan-400 underline-offset-4"
+                  href="https://blog.reactplay.io/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <span className="text-gray-700 inline-flex items-center gap-1 group">
+                    Read our blog posts{" "}
+                    <HiArrowNarrowRight className="text-cyan-400 w-6 h-4 group-hover:translate-x-1 transition-all ease-in-out duration-100" />
+                  </span>
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+        {/* Show love */}
+        <div className="w-2/5 lg:w-full">
+          <h3 className="mb-3 text-xl font-medium text-slate-900 lg:text-3xl lg:font-semibold">
+            Show love
+          </h3>
+          <p className="mb-4 text-gray-600 lg:text-base">
+            Enjoying ReactPlay? Please help us in spreading the word. You can
+            share about ReactPlay on any of your favorite social media
+            platforms.
+          </p>
+          <button
+            href="#"
+            className="underline decoration-2 decoration-cyan-400 underline-offset-4"
+          >
+            <span className="text-gray-700 text-base inline-flex items-center gap-1 group">
+              Share about ReactPlay{" "}
+              <HiArrowNarrowRight className="text-cyan-400 w-6 h-5 group-hover:translate-x-1 transition-all ease-in-out duration-100" />
+            </span>
+          </button>
+          <p className="mt-10 mb-2 text-gray-600 lg:text-base">
+            Your support means a lot to us. Want to be our Sponsor and support
+            us?
+          </p>
+          <a
+            className="underline decoration-2 decoration-cyan-400 underline-offset-4"
+            href="https://github.com/sponsors/reactplay"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <span className="text-gray-700 text-base inline-flex items-center gap-1 group">
+              Sponsor ReactPlay{" "}
+              <HiArrowNarrowRight className="text-cyan-400 w-6 h-5 group-hover:translate-x-1 transition-all ease-in-out duration-100" />
+            </span>
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default ExtendedFooter;