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

Jump to bottom

Events landing page design #141

Merged
merged 10 commits into from
Apr 5, 2023
Merged

Events landing page design #141

Show file tree
Hide file tree
Changes from all 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;
206 changes: 206 additions & 0 deletions components/ExtendedFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
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 folks dedicated to give back
to the developer community.
</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://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
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://reactplay.io/ideas"
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;
130 changes: 69 additions & 61 deletions components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,69 +5,77 @@ import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa";
import FooterTriangles from "../public/FooterTriangles.svg";
import ReactPlayLogo from "../public/ReactPlayLogo.svg";
import FooterReactLogo from "../public/FooterReactLogo.svg";
import ExtendedFooter from "./ExtendedFooter";

const Footer = () => {
const Footer = ({ currentPath }) => {
return (
<footer className="relative flex justify-center items-center pt-16 pb-9 px-8 bg-white bg-opacity-10 overflow-clip">
<div className="absolute -left-5">
<Image
src={FooterTriangles}
alt="Footer Triangles"
width={155}
height={155}
/>
</div>
<div className="flex flex-col justify-center items-center mx-auto ">
<span className="mb-3 text-gray-400 font-medium font-body">
Hosted By
</span>
<a href="https://reactplay.io" target="_blank" rel="noreferrer">
<Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
</a>
<p className="mt-2 font-medium font-body text-gray-400 text-center">
An open-source project made with ❤️ by folks dedicated to give back to the developer community.
</p>
<p className="mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200">
<Link href={`/tech-credit`}>
<a>Tech Stack and Credits</a>
</Link>
</p>
<div className="mt-6 inline-flex justify-center items-center">
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
href="https://discord.gg/HBheAs6UJp"
rel="noreferrer"
target="_blank"
>
<FaDiscord size={41} />
</a>
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
href="https://twitter.com/reactplayio"
rel="noreferrer"
target="_blank"
>
<FaTwitter size={40} />
</a>
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200"
href="https://blog.reactplay.io/"
rel="noreferrer"
target="_blank"
>
<FaRss size={40} />
</a>
</div>
</div>
<div className="absolute opacity-40 -right-24 -bottom-28">
<Image
src={FooterReactLogo}
alt="Footer React Logo"
width={300}
height={300}
/>
</div>
</footer>
<>
{currentPath == "/" ? (
<ExtendedFooter />
) : (
<footer className="relative flex justify-center items-center pt-16 pb-9 px-8 bg-white bg-opacity-10 overflow-clip">
<div className="absolute -left-5">
<Image
src={FooterTriangles}
alt="Footer Triangles"
width={155}
height={155}
/>
</div>
<div className="flex flex-col justify-center items-center mx-auto ">
<span className="mb-3 text-gray-400 font-medium font-body">
Hosted By
</span>
<a href="https://reactplay.io" target="_blank" rel="noreferrer">
<Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
</a>
<p className="mt-2 font-medium font-body text-gray-400 text-center">
An open-source project made with ❤️ by folks dedicated to give
back to the developer community.
</p>
<p className="mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200">
<Link href={`/tech-credit`}>
<a>Tech Stack and Credits</a>
</Link>
</p>
<div className="mt-6 inline-flex justify-center items-center">
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
href="https://discord.gg/HBheAs6UJp"
rel="noreferrer"
target="_blank"
>
<FaDiscord size={41} />
</a>
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
href="https://twitter.com/reactplayio"
rel="noreferrer"
target="_blank"
>
<FaTwitter size={40} />
</a>
<a
className="text-gray-500 hover:text-gray-300 transition-all duration-200"
href="https://blog.reactplay.io/"
rel="noreferrer"
target="_blank"
>
<FaRss size={40} />
</a>
</div>
</div>
<div className="absolute opacity-40 -right-24 -bottom-28">
<Image
src={FooterReactLogo}
alt="Footer React Logo"
width={300}
height={300}
/>
</div>
</footer>
)}
</>
);
};

Expand Down
3 changes: 1 addition & 2 deletions components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -59,7 +58,7 @@ const Header = ({ links, metainfo, secondary = false }) => {
</div>
</header>
) : (
<header className="pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-transparent font-primary text-white z-10">
<header className="pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-brand-bg font-primary text-white z-10">
<div className="md:inline-flex hidden justify-center items-baseline mx-auto z-10">
{links &&
links.map((link, index) => (
Expand Down
Loading