Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events landing page design #141

Merged
merged 10 commits into from
Apr 5, 2023
+773 −281
Merged

Events landing page design #141

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f91a6aa
feat: Banner design
joypoddar Mar 28, 2023
6de8d5d
fix: past events box size in lg screen
joypoddar Mar 28, 2023
fb9d68b
refactor and design changes
joypoddar Apr 2, 2023
ef11291
chore: add Raleway font to project
joypoddar Apr 3, 2023
046f798
feat: text decoration
joypoddar Apr 3, 2023
c8b31c2
feat: footer
joypoddar Apr 3, 2023
d6c02e8
chore: cleanup
joypoddar Apr 3, 2023
5440074
fix: grammar and punctuation
joypoddar Apr 3, 2023
69992c2
fix: change description
joypoddar Apr 3, 2023
68ffb27
feat: twitter spaces
joypoddar Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 6 additions & 15 deletions components/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<section className='text-white flex items-center justify-center min-h-[50vh] text-center bg-indigo-500/50 mt-8 px-4 py-8'>
<div className=' flex flex-col gap-4 justify-center items-center md:w-3/4'>
<div className='md:w-96'>
<Image src={bannerLogo} />
</div>
<p className='font-body'>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.</p>
<button className='bg-slate-800 text-white uppercase px-20 py-3 rounded font-bold hover:bg-slate-700 transition-all font-body'>Get started</button>
</div>
</section>
);
return <Hero metainfo={Config} theHustleHomePage />;
};

export default Banner;
export default Banner;
146 changes: 107 additions & 39 deletions components/common/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
joypoddar marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -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 ? (
<section className="relative flex py-6 md:px-8 px-4 justify-center items-center overflow-clip">
<div className="absolute -left-12 md:top-36 top-80 md:w-40 md:h-40 w-24 h-24 z-0">
<Image
src={require(`/public/${metainfo.name}/GradientFlower.svg`)}
alt="Hero Gradient Flower"
layout="responsive"
/>
</div>
<div className="md:block hidden absolute md:right-36 md:top-96 top-44 md:w-24 md:h-24 w-12 h-12">
<Image src={Flower} alt="Small Flower" layout="responsive" />
</div>
<div className="md:block hidden absolute md:-right-14 md:top-96 md:w-44 md:h-44">
<Image
src={require(`public/${metainfo.name}/GradientAndSmallTriangle.svg`)}
alt="Gradient AndSmall Triangle"
layout="responsive"
/>
</div>
<div className="md:block hidden absolute md:left-44 md:-top-5 md:w-4/6 md:h-4/6">
<Image src={HeroLines} alt="Hero Lines" layout="responsive" />
</div>
<div className="absolute z-0 sm:top-32 w-[50rem] h-[50rem]">
<Image
src={RadialGradient}
alt="Radial Gradient"
layout="responsive"
/>
</div>

<div className="flex flex-col justify-center items-center mx-auto md:pt-16 pt-8 md:max-w-3xl z-10">
<div className="scale-110">
<Image
src={ReactPlayLogo}
alt="ReactPlay Logo"
layout="fixed"
/>
</div>

<div className="-mt-3 block md:w-1/2 md:h-1/2 w-11/12 h-11/12">
<Image
src={require(`/public/${metainfo.name}/BannerLogo.png`)}
alt="Banner Logo"
layout="responsive"
/>
</div>
<p className="text-center text-gray-300 font-body mt-7">
{metainfo.subtitle}
</p>
<div className="inline-flex md:flex-row flex-col justify-center items-center mt-8 z-10">
<div className="md:mr-4 mr-0">
{metainfo.completed ? (
<PrimaryButton
handleOnClick={() => router.push("#winners")}
>
Winners
<GiPartyPopper className="ml-2 -mt-1" size={25} />
</PrimaryButton>
) : null}
{metainfo.result_links ? (
<div className="flex">
{metainfo.result_links.map((link, link_i) => {
return (
<div className="p-4">
<SecondaryLink
link={link.link}
target={link.target}
>
{link.name}
</SecondaryLink>
</div>
);
})}
</div>
) : null}
</div>

{metainfo.started ? (
<div className="md:mt-0 mt-4">
<SecondaryOutlinedButton
handleOnClick={() => redirectToSubmissions()}
>
View Submissions
<BiRightArrowAlt
className="ml-2 my-auto text-[#00F2FE]"
size={25}
/>
</SecondaryOutlinedButton>
</div>
) : null}
</div>
<div className="z-0 md:w-4/5 md:h-4/5 w-full h-full-z-10">
<Image
src={require(`/public/${metainfo.name}/HeroCoders.svg`)}
alt="Hero Coders"
layout="responsive"
/>
</div>
</div>
</section>
) : null
) : // this portion executes when the Hero component is referenced from the Banner component of 'pages/index.js' component
metainfo.name ? (
<section className="relative flex py-6 md:px-8 px-4 justify-center items-center overflow-clip">
<div className="absolute -left-12 md:top-36 top-80 md:w-40 md:h-40 w-24 h-24 z-0">
<Image
Expand Down Expand Up @@ -58,7 +162,6 @@ const Hero = ({ metainfo }) => {
layout="responsive"
/>
</div>

<div className="flex flex-col justify-center items-center mx-auto md:pt-16 pt-8 md:max-w-3xl z-10">
<div className="scale-110">
<Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
Expand All @@ -74,49 +177,14 @@ const Hero = ({ metainfo }) => {
<p className="text-center text-gray-300 font-body mt-7">
{metainfo.subtitle}
</p>
<div className="inline-flex md:flex-row flex-col justify-center items-center mt-8 z-10">
<div className="md:mr-4 mr-0">
{metainfo.completed ? (
<PrimaryButton handleOnClick={() => router.push("#winners")}>
Winners
<GiPartyPopper className="ml-2 -mt-1" size={25} />
</PrimaryButton>
) : null}
{metainfo.result_links ? (
<div className="flex">
{metainfo.result_links.map((link, link_i) => {
return (
<div className="p-4">
<SecondaryLink link={link.link} target={link.target}>
{link.name}
</SecondaryLink>
</div>
);
})}
</div>
) : null}
</div>

{metainfo.started ? (
<div className="md:mt-0 mt-4">
<SecondaryOutlinedButton
handleOnClick={() => redirectToSubmissions()}
>
View Submissions
<BiRightArrowAlt
className="ml-2 my-auto text-[#00F2FE]"
size={25}
/>
</SecondaryOutlinedButton>
</div>
) : null}
</div>
<div className="z-0 md:w-4/5 md:h-4/5 w-full h-full-z-10">
<Image
src={require(`/public/${metainfo.name}/HeroCoders.svg`)}
alt="Hero Coders"
layout="responsive"
/>
{/* TODO: Insert button component */}
</div>
</div>
</section>
Expand Down
168 changes: 89 additions & 79 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<section id='events' className="text-white flex items-center justify-center my-28 md:w-[80%] w-full mx-auto px-4">
{/* wrapper */}
<div className="flex flex-col w-full">
<h1 className="md:text-2xl text-start mb-16 uppercase font-primary">Events</h1>
<div className="flex flex-col md:flex-row w-full mx-auto gap-6 px-3 md:px-0 flex-wrap items-center justify-center">
{/* past events */}
{pastEvents.map((event, i) => (
<Link href={event.link}>
<article
key={i}
className="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 hover:scale-105 transition-all"
>
<Image src={event.image} alt="Banner Logo" layout="responsive" />
<p>{event.description}</p>
</article>
</Link>
))}
</div>
</div>
</section>
);
};
const EventLayout = () => {
return (
<div className="w-full">
<Banner />
<PastInitiatives pastEvents={pastEvents} />
<MediaLayout videoLinks={videoLinks} title='ReactPlay Live' id='live'/>
<MediaLayout twitterLinks={twitterLinks} title='ReactPlay Twitter Spaces' id='spaces'/>
</div>
);
};
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 (
<section
id="events"
className="text-white flex flex-col items-center justify-center my-28 md:w-[80%] w-full mx-auto px-4"
>
{/* wrapper */}
<h1 className="self-start md:text-2xl text-start mb-16 uppercase font-primary">
Events
</h1>
<div className="flex flex-col sm:grid sm:grid-cols-2 justify-center items-center gap-10">
{/* past events */}
{pastEvents.map((event, i) => (
<Link href={event.link}>
<article
key={i}
className="w-full rounded text-sm text-gray-300 sm:h-[21rem] md:h-[20rem] flex flex-col gap-5 bg-cyan-800 max-w-[350px] px-6 py-8 cursor-pointer hover:scale-105 transition-all"
>
<Image
src={event.image}
alt="Banner Logo"
layout="responsive"
/>
<p className="">{event.description}</p>
</article>
</Link>
))}
</div>
</section>
);
};
const EventLayout = () => {
return (
<div className="w-full">
<Banner />
<PastInitiatives pastEvents={pastEvents} />
<MediaLayout videoLinks={videoLinks} title="ReactPlay Live" id="live" />
<MediaLayout
twitterLinks={twitterLinks}
title="ReactPlay Twitter Spaces"
id="spaces"
/>
</div>
);
};

return (
<Layout title="The Hustle Home page" metainfo={Config} links={Config.links}>
<EventLayout />
</Layout>
);
return (
<Layout title="The Hustle Home page" metainfo={Config} links={Config.links}>
<EventLayout />
</Layout>
);
}