From f91a6aafb23f9fa1fa62d372003ed2efda858861 Mon Sep 17 00:00:00 2001 From: Joy Poddar Date: Tue, 28 Mar 2023 14:04:18 +0530 Subject: [PATCH 01/10] feat: Banner design --- components/Banner.js | 21 ++---- components/common/Hero.js | 146 ++++++++++++++++++++++++++++---------- 2 files changed, 113 insertions(+), 54 deletions(-) diff --git a/components/Banner.js b/components/Banner.js index 0a16f3bf..f77357cc 100644 --- a/components/Banner.js +++ b/components/Banner.js @@ -1,20 +1,11 @@ -import React from 'react'; -import Image from 'next/image'; +// components +import Hero from "@/components/common/Hero"; -import bannerLogo from '../public/twoplaysamonth/NavbarLogo.png' +// services +import { Config } from "@/services/metadata/twoplaysamonth"; const Banner = () => { - return ( -
-
-
- -
-

ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes.

- -
-
- ); + return ; }; -export default Banner; \ No newline at end of file +export default Banner; diff --git a/components/common/Hero.js b/components/common/Hero.js index 701d45ed..d11c4a1b 100644 --- a/components/common/Hero.js +++ b/components/common/Hero.js @@ -15,7 +15,7 @@ import HeroLines from "../../public/common/HeroLines.svg"; import RadialGradient from "../../public/common/RadialGradient.svg"; import ReactPlayLogo from "../../public/ReactPlayLogo.svg"; -const Hero = ({ metainfo }) => { +const Hero = ({ metainfo, theHustleHomePage }) => { const router = useRouter(); useEffect(() => {}, [metainfo]); @@ -29,7 +29,111 @@ const Hero = ({ metainfo }) => { return ( <> - {metainfo.name ? ( + {!theHustleHomePage ? ( + // this portion executes when the Hero component is referenced from the twoplaysamonth component + metainfo.name ? ( +
+
+ Hero Gradient Flower +
+
+ Small Flower +
+
+ Gradient AndSmall Triangle +
+
+ Hero Lines +
+
+ Radial Gradient +
+ +
+
+ ReactPlay Logo +
+ +
+ Banner Logo +
+

+ {metainfo.subtitle} +

+
+
+ {metainfo.completed ? ( + router.push("#winners")} + > + Winners + + + ) : null} + {metainfo.result_links ? ( +
+ {metainfo.result_links.map((link, link_i) => { + return ( +
+ + {link.name} + +
+ ); + })} +
+ ) : null} +
+ + {metainfo.started ? ( +
+ redirectToSubmissions()} + > + View Submissions + + +
+ ) : null} +
+
+ Hero Coders +
+
+
+ ) : null + ) : // this portion executes when the Hero component is referenced from the Banner component of 'pages/index.js' component + metainfo.name ? (
{ layout="responsive" />
-
ReactPlay Logo @@ -74,49 +177,14 @@ const Hero = ({ metainfo }) => {

{metainfo.subtitle}

-
-
- {metainfo.completed ? ( - router.push("#winners")}> - Winners - - - ) : null} - {metainfo.result_links ? ( -
- {metainfo.result_links.map((link, link_i) => { - return ( -
- - {link.name} - -
- ); - })} -
- ) : null} -
- {metainfo.started ? ( -
- redirectToSubmissions()} - > - View Submissions - - -
- ) : null} -
Hero Coders + {/* TODO: Insert button component */}
From 6de8d5d16d56f2c2c73ac20ee38fd213cee534a7 Mon Sep 17 00:00:00 2001 From: Joy Poddar Date: Tue, 28 Mar 2023 15:52:54 +0530 Subject: [PATCH 02/10] fix: past events box size in lg screen --- pages/index.js | 168 ++++++++++++++++++++++++++----------------------- 1 file changed, 89 insertions(+), 79 deletions(-) diff --git a/pages/index.js b/pages/index.js index a73e0a13..20c43b08 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,90 +3,100 @@ import Image from "next/image"; import Layout from "@/components/Layout"; import HackerPlayLogo from "../public/hackrplay/BannerLogo.png"; -import twoPlaysaMonthLogo from "../public/twoplaysamonth/NavbarLogo.png" +import twoPlaysaMonthLogo from "../public/twoplaysamonth/NavbarLogo.png"; import Banner from "@/components/Banner"; import { Config } from "../services/metadata/home"; import MediaLayout from "@/components/MediaLayout"; export default function Home() { - const pastEvents = [ - { - name: "Hack-R-Play", - description: - "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.", - image: HackerPlayLogo, - link: `/events/23/hackrplay/2022/home`, - }, - { - name: "2PlaysaMonth", - description: - "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes..", - image: twoPlaysaMonthLogo, - link: `/events/23/twoplaysamonth`, - }, - - ]; + const pastEvents = [ + { + name: "Hack-R-Play", + description: + "ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, build projects, and create content - there are also chances to win exciting prizes.", + image: HackerPlayLogo, + link: `/events/23/hackrplay/2022/home`, + }, + { + name: "2PlaysaMonth", + description: + "ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes..", + image: twoPlaysaMonthLogo, + link: `/events/23/twoplaysamonth`, + }, + ]; - const videoLinks=[ - { - src: 'https://www.youtube.com/embed/1qfDkmtuWqg' - }, - { - src: 'https://www.youtube.com/embed/b0eas9xxD-E' - }, - { - src: 'https://www.youtube.com/embed/w0nd4ASTDdg' - }, - ] - const twitterLinks=[ - { - name: 'twitterSpaces' - }, - { - name: 'twitterSpaces' - }, - { - name: 'twitterSpaces' - }, - ] - const PastInitiatives = ({ pastEvents }) => { - return ( -
- {/* wrapper */} -
-

Events

-
- {/* past events */} - {pastEvents.map((event, i) => ( - -
- Banner Logo -

{event.description}

-
- - ))} -
-
-
- ); - }; - const EventLayout = () => { - return ( -
- - - - -
- ); - }; + const videoLinks = [ + { + src: "https://www.youtube.com/embed/1qfDkmtuWqg", + }, + { + src: "https://www.youtube.com/embed/b0eas9xxD-E", + }, + { + src: "https://www.youtube.com/embed/w0nd4ASTDdg", + }, + ]; + const twitterLinks = [ + { + name: "twitterSpaces", + }, + { + name: "twitterSpaces", + }, + { + name: "twitterSpaces", + }, + ]; + const PastInitiatives = ({ pastEvents }) => { + return ( +
+ {/* wrapper */} +

+ Events +

+
+ {/* past events */} + {pastEvents.map((event, i) => ( + +
+ Banner Logo +

{event.description}

+
+ + ))} +
+
+ ); + }; + const EventLayout = () => { + return ( +
+ + + + +
+ ); + }; - return ( - - - - ); + return ( + + + + ); } From fb9d68b266f6ae4cb431af92b32e204f9b3c2ccc Mon Sep 17 00:00:00 2001 From: Joy Poddar Date: Sun, 2 Apr 2023 18:52:28 +0530 Subject: [PATCH 03/10] refactor and design changes --- components/Header.js | 3 +- components/Layout.js | 16 +++-- components/MediaLayout.js | 98 +++++++++++++++++++--------- components/common/Hero.js | 2 +- pages/index.js | 91 ++++---------------------- services/metadata/home.js | 132 +++++++++++++++++++++++++++++--------- 6 files changed, 196 insertions(+), 146 deletions(-) diff --git a/components/Header.js b/components/Header.js index 3d3538ee..1c369133 100644 --- a/components/Header.js +++ b/components/Header.js @@ -4,7 +4,6 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"; - const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => { return ( <> @@ -59,7 +58,7 @@ const Header = ({ links, metainfo, secondary = false }) => { ) : ( -
+
{links && links.map((link, index) => ( diff --git a/components/Layout.js b/components/Layout.js index 6aa6d527..9eb70573 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -4,6 +4,7 @@ import { useRouter } from "next/router"; import Footer from "./Footer"; import Header from "./Header"; +import Script from "next/script"; const Layout = ({ children, title, description, metainfo }) => { const currentPath = useRouter().pathname; @@ -12,8 +13,9 @@ const Layout = ({ children, title, description, metainfo }) => { useEffect(() => { if ( - currentPath === "/events/23/hackrplay/2022/home" || - currentPath === "/events/23/twoplaysamonth" + currentPath === "/events/22/hackrplay" || + currentPath === "/events/23/twoplaysamonth" || + currentPath === "/" ) { setSecondaryNavbar(false); } else { @@ -27,7 +29,11 @@ const Layout = ({ children, title, description, metainfo }) => { return ( <> {!loading ? ( -
+
{title} @@ -62,7 +68,7 @@ const Layout = ({ children, title, description, metainfo }) => { content={`https://hustles.reactplay.io/${metainfo.name}/og-image.png`} /> -