Landing page

components/CurrentInitiatives.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const CurrentInitiatives = ({}) => {
+   return (
+      <section className='text-slate-800 px-1 md:px-0 flex items-center justify-center min-h-[50vh] text-center bg-cyan-200'>
+         <div className=' flex flex-col gap-4 justify-center items-center'>
+            <h1 className='md:text-5xl text-3xl font-bold'>#2PlaysAMonth</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, aspernatur!</p>
+            <button className='bg-slate-800 text-white uppercase md:px-20 px-14 py-3 rounded font-bold hover:bg-slate-700 transition-all'>Get started</button>
+         </div>
+      </section>
+   );
+};
+
+export default CurrentInitiatives;

components/Hack-R-Play/index.js

@@ -1,9 +1,9 @@
-import Hero from "./Hero";
-import About from "./About";
-import ChallengesAndPrizes from "./ChallengesAndPrizes";
-import Judges from "./Judges";
-import Partners from "./Partners";
-import CTA from "./CTA";
-import FAQs from "./FAQs";
+import Hero from "../common/Hero";
+import About from "../common/About";
+import ChallengesAndPrizes from "../common/ChallengesAndPrizes";
+import Judges from "../common/Judges";
+import Partners from "../common/Partners";
+import CTA from "../common/CTA";
+import FAQs from "../common/FAQs";
 
 export { Hero, About, ChallengesAndPrizes, Judges, Partners, CTA, FAQs };

components/Header.js

@@ -61,7 +61,7 @@ const Header = ({ links, secondary = false }) => {
 			) : (
 				<header className='pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-transparent font-primary text-white z-10'>
 					<div className='md:inline-flex hidden justify-center items-baseline mx-auto z-10'>
-						{links.map((link, index) => (
+						{links && links.map((link, index) => (
 							<Link
 								key={index}
 								href={`${link.href}`}

components/Layout.js

@@ -5,35 +5,17 @@ import Footer from "./Footer";
 import Header from "./Header";
 
 const Layout = ({ links, children, title, description }) => {
-  const home_links = [
-    {
-      name: "Winners",
-      href: "#winners",
-    },
-    {
-      name: "About",
-      href: "#about",
-    },
-    {
-      name: "Sponsors",
-      href: "#sponsors",
-    },
-    {
-      name: "Judges",
-      href: "#judges",
-    },
-    {
-      name: "Faqs",
-      href: "#faqs",
-    },
-  ];
   const currentPath = useRouter().pathname;
   const [secondaryNavbar, setSecondaryNavbar] = useState(false);
+  const [header, setHeader]=useState(true)
 
   useEffect(() => {
-    if (currentPath === "/hackrplay/2022/home") {
+    if (currentPath === "/hackrplay/2022/home" || currentPath === "/2playsamonth/2023/home") {
       setSecondaryNavbar(false);
-    } else {
+    }else if(currentPath === '/'){
+      setHeader(false)
+    }
+     else {
       setSecondaryNavbar(true);
     }
   }, []);
@@ -91,7 +73,7 @@ const Layout = ({ links, children, title, description }) => {
           src="https://analytics.reactplay.io/umami.js"
         />
       </Head>
-      <Header links={links || home_links} secondary={secondaryNavbar} />
+     { header && <Header links={links} secondary={secondaryNavbar} />}
       <main>{children}</main>
       <Footer />
     </div>

components/LayoutWrapper.js

@@ -1,7 +1,7 @@
 import Layout from '@/components/Layout';
-import Flower from '../public/Hack-R-Play/Flower.svg';
-import HeroLines from '../public/Hack-R-Play/HeroLines.svg';
-import DottedAndFilledTriangle from '../public/Hack-R-Play/DottedAndFilledTriangle.svg';
+import Flower from '../public/common/Flower.svg';
+import HeroLines from '../public/common/HeroLines.svg';
+import DottedAndFilledTriangle from '../public/common/DottedAndFilledTriangle.svg';
 import Image from 'next/image';
 
 const links = [
@@ -15,7 +15,7 @@ const links = [
 	},
 ];
 
-export default function LayoutWrapper({ title, description, children }) {
+export default function LayoutWrapper({ title, description, children}) {
 	return (
 		<Layout links={links} title={title} description={description}>
 			<div className='absolute left-9 -top-10 opacity-50'>

components/PastInitialives.js

@@ -0,0 +1,27 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+
+const PastInitialives = ({pastEvents}) => {
+
+	return (
+		<section className="text-white flex items-center justify-center my-28 w-full ">
+			{/* wrapper */}
+			<div className="flex flex-col w-full">
+				<h1 className="md:text-2xl  text-center mb-16 tracking-wild uppercase">Past Initiatives</h1>
+				<div className="flex flex-col md:flex-row w-full md:w-4/5 mx-auto justify-center items-center gap-6  px-3 md:px-0 flex-wrap">
+					{/* article */}
+					{pastEvents.map((event, i) => 
+						<Link href={event.link}><article key={i} className="md:basis-1/3 w-full rounded text-sm text-gray-300 min-h-52 flex flex-col gap-2 bg-cyan-800 max-w-[350px] px-6 py-8 cursor-pointer">
+						<Image src={event.image} alt="Banner Logo" layout="responsive" />
+						<p>{event.description}</p>
+					</article></Link>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default PastInitialives;

components/Hack-R-Play/About.js → components/common/About.js

@@ -1,7 +1,7 @@
 import Image from "next/image";
 
-import ReactPlayDotted from "../../public/Hack-R-Play/ReactPlayLogoDotted.svg";
-import Flower from "../../public/Hack-R-Play/Flower.svg";
+import ReactPlayDotted from "../../public/common/ReactPlayLogoDotted.svg";
+import Flower from "../../public/common/Flower.svg";
 import { FiExternalLink } from "react-icons/fi";
 
 const About = () => {

components/Hack-R-Play/CTA.js → components/common/CTA.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SecondaryButton } from '../Buttons';
 import Image from 'next/image';
-import CTAImage from '../../public/Hack-R-Play/CTAImage.svg';
+import CTAImage from '../../public/common/CTAImage.svg';
 import { useRouter } from 'next/router';
 import { FiPlus } from 'react-icons/fi';
 

components/Hack-R-Play/ChallengesAndPrizes.js → components/common/ChallengesAndPrizes.js

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-import GradientAndSmallTriangle from "../../public/Hack-R-Play/GradientAndSmallTriangle.svg";
+import GradientAndSmallTriangle from "../../public/common/GradientAndSmallTriangle.svg";
 
 const ChallengesAndPrizes = () => {
   return (

components/Hack-R-Play/Hero.js → components/common/Hero.js

@@ -4,12 +4,12 @@ import { PrimaryButton, SecondaryOutlinedButton } from "../Buttons";
 import { FiCheckCircle } from "react-icons/fi";
 import { BiRightArrowAlt } from "react-icons/bi";
 
-import GradientFlower from "../../public/Hack-R-Play/GradientFlower.svg";
-import Flower from "../../public/Hack-R-Play/Flower.svg";
-import GradientAndSmallTriangle from "../../public/Hack-R-Play/GradientAndSmallTriangle.svg";
+import GradientFlower from "../../public/common/GradientFlower.svg";
+import Flower from "../../public/common/Flower.svg";
+import GradientAndSmallTriangle from "../../public/common/GradientAndSmallTriangle.svg";
 import HeroCoders from "../../public/Hack-R-Play/HeroCoders.svg";
-import HeroLines from "../../public/Hack-R-Play/HeroLines.svg";
-import RadialGradient from "../../public/Hack-R-Play/RadialGradient.svg";
+import HeroLines from "../../public/common/HeroLines.svg";
+import RadialGradient from "../../public/common/RadialGradient.svg";
 import BannerLogo from "../../public/Hack-R-Play/BannerLogo.png";
 import ReactPlayLogo from "../../public/ReactPlayLogo.svg";
 import { GiPartyPopper } from "react-icons/gi";

components/Hack-R-Play/Judges.js → components/common/Judges.js

@@ -1,7 +1,7 @@
 import Image from "next/image";
 
-import DottedPattern from "../../public/Hack-R-Play/DottedPattern.svg";
-import Lines from "../../public/Hack-R-Play/Lines.svg";
+import DottedPattern from "../../public/common/DottedPattern.svg";
+import Lines from "../../public/common/Lines.svg";
 import { FaTwitter } from "react-icons/fa";
 
 const Judges = ({ judges }) => {

components/Hack-R-Play/Partners.js → components/common/Partners.js

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-import PartnersPolygon from "../../public/Hack-R-Play/PartnersPolygon.svg";
+import PartnersPolygon from "../../public/common/PartnersPolygon.svg";
 import NhostLogo from "../../public/Hack-R-Play/NhostLogo.svg";
 import Link from "next/link";
 

components/Hack-R-Play/Winners.js → components/common/Winners.js

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { useEffect, useRef, useCallback } from "react";
-import DottedPattern from "../../public/Hack-R-Play/DottedPattern.svg";
-import Lines from "../../public/Hack-R-Play/Lines.svg";
+import DottedPattern from "../../public/common/DottedPattern.svg";
+import Lines from "../../public/common/Lines.svg";
 import { FaRegFileCode, FaTwitter, FaGithub } from "react-icons/fa";
 import { MdOutlineSource, MdOutlineArticle } from "react-icons/md";
 import ConfettiGenerator from "confetti-js";

pages/2playsamonth/2023/home.js

@@ -0,0 +1,167 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import Layout from "@/components/Layout";
+import Image from "next/image";
+import {
+  Hero,
+  About,
+  Judges,
+  Partners,
+  CTA,
+  FAQs,
+} from "@/components/Hack-R-Play";
+
+import DottedAndFilledTriangle from "@/public/common/DottedAndFilledTriangle.svg";
+import Flower from "@/public/common/Flower.svg";
+// import Winners from "@/components/common/Winners";
+
+export default function Home() {
+  const router = useRouter();
+
+  const faqs = [
+    {
+      question: "Why should I participate in the #2PlaysAMonth event?",
+      answer:
+        "Do you like learning while building something? How about a platform that allows you to build a ReactJS application end-to-end, learn from the review comments, contribute to open source, showcase it to the world, and help build networking? #2PlaysAMonth aims precisely the same. Join the drive brought to you by ReactPlay and start building cool projects that we can't wait to see!",
+    },
+    {
+      question: "Do I need to Register for #2PlaysAMonth?",
+      answer:
+        "Nope. You can create the play by following the criteria mentioned in this page's About section.",
+    },
+    {
+      question: "Is it mandatory to create 2 plays?",
+      answer:
+        "Yes. That's one of the qualifying criteria. You must create and complete 2 plays.",
+    },
+    {
+      question: "What if my play review gets delayed?",
+      answer:
+        "You must ensure you give the reviewers enough time to review your code and provide comments. We're looking forward to 4-5 days(based on how actively you respond to the comments) to complete the review process of a play. Try submitting your plays at least 7-10 days before the end date to avoid messy situations. If your review gets delayed by reviewers, we will ensure you the extra time, but that will be a rare case!",
+    },
+    {
+      question: "Can we participate as a team?",
+      answer:
+        "Nope. It's an individual event.",
+    },
+    {
+      question: "Can I use anything other than React?",
+      answer:
+        "ReactPlay is a platform to help web developers learn ReactJs and build projects. For this initiative, RaectJs is a must.",
+    },
+    {
+      question: "Can I submit my old React project as a play?",
+      answer:
+        "You can. However, could you please mention the old project in the play description? Also, the play should be something other than a 1-1 matching your existing project. You must bring some changes/ideas into it.",
+    },
+    {
+      question: "Can I submit code/project of someone else?",
+      answer:
+        "You shouldn't. Be authentic and ethical. It's an event to learn, not alone to win.",
+    },
+    {
+      question: "Is creating an issue for my PR a must?",
+      answer:
+        "Yes. We will disqualify the play submission that doesn't have an associated issue.",
+    },
+    {
+      question: "Is sharing my journey on Twitter and LinkedIn of the #2PlaysAMonth a must?",
+      answer:
+        "Yes, we encourage you to build and learn publicly. Make sure you add the tag #2playsamonth and ReactPlay handle when you post them on social media.",
+    },
+    {
+      question: "When and How the #2PlaysAMonth result will be published?",
+      answer:
+        "The result will be published on 15th March. We will publish it on our website, blog, and Twitter handle(@reactplayio).",
+    },
+    {
+      question: "Do I get badges and prizes?",
+      answer:
+        "We will publish 3 winners and 3 special mentions based on our judging criteria. All winners, special mentions, and participants who completed the target will receive digital badges. We are working with our sponsors to decide the prizes for the winners.",
+    },
+    {
+      question: "I have questions, where can I ask them?",
+      answer:
+        "Got a question? Please join our Discord(the link is in the footer of this page). You can ask us anything in the hack-r-play channel.",
+    },
+  ];
+
+  const judges = [
+    {
+      name: "Harshit Jain",
+      twitter: "@jain_harshit",
+      title: "SDE3, Intuit",
+      avatar:
+        "https://pbs.twimg.com/profile_images/1523150875153567744/zpRDym_L_400x400.jpg",
+    },
+    {
+      name: "Kapeel Kokane",
+      twitter: "@kokaneka",
+      title: "SDE2, Microsoft",
+      avatar:
+        "https://pbs.twimg.com/profile_images/1372919009939652612/E9s309tH_400x400.jpg",
+    },
+    {
+      name: "Koustov Maitra",
+      twitter: "@koustov",
+      title: "Architect, ReactPlay",
+      avatar:
+        "https://pbs.twimg.com/profile_images/1443859238443360258/6_H-pDaM_400x400.jpg",
+    },
+    {
+      name: "Tapas Adhikary",
+      twitter: "@tapasAdhikary",
+      title: "Founder, ReactPlay",
+      avatar:
+        "https://pbs.twimg.com/profile_images/1495457010598309888/zPrTNF4F_400x400.jpg",
+    },
+  ];
+  const winners = [];
+  const mentions = [];
+
+  const home_links = [
+    {
+      name: "About",
+      href: "#about",
+    },
+    {
+      name: "Sponsors",
+      href: "#sponsors",
+    },
+    {
+      name: "Judges",
+      href: "#judges",
+    },
+    {
+      name: "Faqs",
+      href: "#faqs",
+    },
+  ];
+
+
+
+  return (
+    <Layout title="ReactPlay presents #2Plays-A-Month" links={home_links}>
+      <div className="absolute md:left-9 -top-10 left-5 z-0 md:w-32 md:h-32 w-24 h-24">
+        <Image
+          src={DottedAndFilledTriangle}
+          alt="Dotted And Filled Triangle"
+          layout="responsive"
+        />
+      </div>
+      <div className="absolute md:-right-60 md:-top-48 -right-24 -top-14 z-0 md:w-2/5 md:h-2/5 w-1/2 h-1/2">
+        <Image src={Flower} alt="Flower" layout="responsive" />
+      </div>
+      <Hero />
+      {/*<Winners winners={winners} mentions={mentions} />*/}
+      <About />
+      <Judges judges={judges} />
+      <Partners />
+      <CTA
+        title="Be a part of the best react event"
+        description="Learning is a journey than a destination. We, developers, need avenues, motivations, and opportunities to keep going. Join the #2PlayAMonth initiative to experience it. It will allow you to build a ReactJS app using and learning from code reviews. Why waiting? Get started today."
+      />
+      <FAQs faqs={faqs} />
+    </Layout>
+  );
+}