Merge pull request #1176 from Giveth/main-nice-banners

$nice banners for live version

src/components/views/donate/DonateIndex.tsx

@@ -12,6 +12,7 @@ import { formatTxLink } from '@/lib/helpers';
 import SuccessView from '@/components/views/donate/SuccessView';
 import ProjectCardSelector from '@/components/views/donate/ProjectCardSelector';
 import DonationTypes from '@/components/views/donate/DonationTypes';
+import NiceBanner from './NiceBanner';
 
 const DonateIndex = (props: IProjectBySlug) => {
 	const { project } = props;
@@ -26,6 +27,7 @@ const DonateIndex = (props: IProjectBySlug) => {
 		<>
 			<BigArc />
 			<Wrapper>
+				<NiceBanner project={project} />
 				<Sections>
 					<ProjectCardSelector project={project} />
 					<Right isMobile={isMobile}>

src/components/views/donate/NiceBanner.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+	brandColors,
+	GLink,
+	IconExternalLink,
+	H4,
+	Lead,
+	IconSpark,
+} from '@giveth/ui-design-system';
+import { mediaQueries } from '@/lib/constants/constants';
+import { IProjectBySlug } from '@/apollo/types/types';
+import links from '@/lib/constants/links';
+
+const NiceBanner = (props: IProjectBySlug) => {
+	const { project } = props;
+	// Only show this on the Giveth project}
+	if (project.id !== '1') return null;
+	return (
+		<>
+			<Container>
+				<Content>
+					<Title>
+						Get $nice{' '}
+						<IconSpark size={32} color={brandColors.giv[500]} />
+					</Title>
+					<Lead>
+						Donate DAI, xDAI or wxDAI to this project and receive
+						$nice tokens in addition to GIVbacks.{' '}
+						<InfoReadMore target='_blank' href={links.NICE_DOC}>
+							<span>Learn More </span>
+							<IconExternalLink
+								size={16}
+								color={brandColors.pinky[500]}
+							/>
+						</InfoReadMore>
+					</Lead>
+				</Content>
+				<BgImage />
+			</Container>
+		</>
+	);
+};
+
+const Title = styled(H4)`
+	color: ${brandColors.giv[500]};
+	font-weight: 700;
+`;
+
+const Container = styled.div`
+	display: flex;
+	height: 200px;
+	align-items: center;
+	background: white;
+	box-shadow: 0px 3px 20px rgba(212, 218, 238, 0.4);
+	border-radius: 16px;
+	margin: 0 40px 16px 40px;
+	${mediaQueries.tablet} {
+		height: 127px;
+	}
+`;
+
+const Content = styled.div`
+	position: absolute;
+	text-align: left;
+	z-index: 2;
+	padding: 24px 64px 24px 32px;
+	word-wrap: break-word;
+`;
+
+const BgImage = styled.div`
+	width: 100%;
+	height: 100%;
+	background-image: url('/images/backgrounds/GIVGIVGIV.png');
+	opacity: 0.1;
+`;
+
+const InfoReadMore = styled(GLink)`
+	padding: 0 0 0 10px;
+	color: ${brandColors.pinky[500]};
+`;
+
+export default NiceBanner;

src/components/views/homepage/HomeIndex.tsx

@@ -1,6 +1,7 @@
 import HomeHeader from './HomeHeader';
 import HomeExploreProjects from './HomeExploreProjects';
 import HomePurpleSection from './HomePurpleSection';
+import HomeNiceSection from './HomeNiceSection';
 import HomeFromBlog from './HomeFromBlog';
 import HomeGetUpdates from './HomeGetUpdates';
 import HomeChangeMakers from './HomeChangeMakers';
@@ -24,6 +25,7 @@ const HomeIndex = (props: IHomeView) => {
 				totalCount={totalCount}
 				projects={projects.slice(0, projectsSlice)}
 			/>
+			<HomeNiceSection />
 			<HomePurpleSection />
 			<HomeExploreProjects
 				projects={projects.slice(projectsSlice)}

src/components/views/homepage/HomeNiceSection.tsx

@@ -0,0 +1,152 @@
+import styled from 'styled-components';
+import Link from 'next/link';
+import { D3, GLink, Lead, brandColors } from '@giveth/ui-design-system';
+import { Arc } from '@/components/styled-components/Arc';
+import Routes from '@/lib/constants/Routes';
+import links from '@/lib/constants/links';
+
+import { HomeContainer } from '@/components/views/homepage/Home.sc';
+import { mediaQueries } from '@/lib/constants/constants';
+import { Shadow } from '@/components/styled-components/Shadow';
+import { Col, Container } from '@/components/Grid';
+
+const HomePurpleSection = () => {
+	return (
+		<Wrapper>
+			<Arcs>
+				<ArcPurple />
+				<ArcMustard />
+				<DotMustard />
+			</Arcs>
+			<Container>
+				<BigTitle>
+					Feeling $nice?{' '}
+					<NiceImg
+						src='/images/$nice.svg'
+						alt='nice icon'
+						width={101.71}
+						height={101.71}
+					/>
+				</BigTitle>
+				<Desc>
+					Donate eligible tokens to Giveth and receive $nice,
+					redeemable for swag and much more!
+				</Desc>
+				<Links xs={12} sm={7} md={8}>
+					<GLink href={links.NICE_DOC} target='_blank'>
+						<span>Learn about how $nice works</span>
+					</GLink>
+					<Link href={Routes.GivethProject} passHref>
+						Make a donation to Giveth
+					</Link>
+					<PurpleLink href={links.SWAG} target='_blank'>
+						<span>Check out the swag shop</span>
+					</PurpleLink>
+				</Links>
+			</Container>
+		</Wrapper>
+	);
+};
+
+const Wrapper = styled(HomeContainer)`
+	min-height: 600px;
+	margin: 0 32px;
+	border-radius: 12px;
+	background: white;
+	padding-top: 90px;
+	position: relative;
+	z-index: 2;
+	overflow: hidden;
+	box-shadow: ${Shadow.Neutral[400]};
+	top: -50px;
+	::after {
+		content: '';
+		background-image: url('/images/backgrounds/GIVGIVGIV.png');
+		opacity: 0.1;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		position: absolute;
+		z-index: -1;
+	}
+`;
+
+const BigTitle = styled(D3)`
+	color: ${brandColors.giv[500]};
+	margin: 0 0 40px 0;
+`;
+
+const NiceImg = styled.img`
+	display: none;
+	${mediaQueries.tablet} {
+		display: unset;
+	}
+`;
+
+const Desc = styled(Lead)`
+	font-size: 24px;
+	max-width: 788px;
+	color: ${brandColors.giv[500]};
+`;
+
+const ArcPurple = styled(Arc)`
+	border-width: 132px;
+	border-color: transparent transparent ${brandColors.giv[500]} transparent;
+	transform: rotate(222deg);
+	width: 675px;
+	height: 675px;
+	bottom: -360px;
+	left: -200px;
+	opacity: 0.1;
+`;
+
+const ArcMustard = styled(Arc)`
+	border-width: 132px;
+	border-color: transparent transparent ${brandColors.mustard[500]}
+		transparent;
+	top: -150px;
+	right: -300px;
+	width: 675px;
+	height: 675px;
+	transform: rotate(31deg);
+`;
+
+const DotMustard = styled(Arc)`
+	border-width: 71px;
+	border-color: ${brandColors.mustard[500]};
+	top: 60px;
+	right: 250px;
+	width: 142px;
+	height: 142px;
+`;
+
+const Arcs = styled.div`
+	display: none;
+
+	${mediaQueries.tablet} {
+		display: unset;
+	}
+`;
+
+const Links = styled(Col)`
+	display: flex;
+	flex-direction: column;
+	margin: 24px 0 0 0;
+	* {
+		font-size: 16px;
+		line-height: 21px;
+		font-weight: 400;
+		cursor: pointer;
+		color: ${brandColors.pinky[500]};
+		margin: 0 0 16px 0;
+	}
+`;
+
+const PurpleLink = styled(GLink)`
+	* {
+		color: ${brandColors.giv[300]};
+	}
+`;
+
+export default HomePurpleSection;

src/lib/constants/Routes.ts

@@ -25,6 +25,7 @@ const Routes = {
 	GIVstream_FlowRate: GIVstream + '#flowRate',
 	GIVbacks: '/givbacks',
 	Claim: '/claim',
+	GivethProject: '/project/the-giveth-community-of-makers',
 };
 
 export default Routes;

src/lib/constants/links.ts

@@ -28,12 +28,14 @@ const links = {
 	GIVBACK_DOC: DOCS + 'giveconomy/givbacks',
 	COVENANT_DOC: DOCS + 'whatisgiveth/covenant/',
 	GIVETH_DOCS: DOCS + 'whatisgiveth/',
+	NICE_DOC: DOCS + 'giveconomy/niceToken',
 	USER_DOCS: DOCS + 'dapps/',
 	DEVELOPER_DOCS: DOCS + 'dapps/givethioinstallation',
 	CAMPAIGN_DOCS: DOCS + 'dapps/entitiesAndRoles/#campaigns',
 	TRACES_DOCS: DOCS + 'dapps/entitiesAndRoles/#traces',
 	MAKE_TRACEABLE_DOCS: DOCS + 'dapps/makeTraceableProject',
 	TRACE: 'https://trace.giveth.io/',
+	SWAG: 'https://swag.giveth.io/',
 	COMMONS_STACK: 'https://commonsstack.org/',
 	RECRUITEE: 'https://giveth.recruitee.com/',
 	JOINGIVFRENS: TYPEFORM + 'regenfarms',