Merge pull request #2051 from Giveth/gitcoin-alpha-round-banner

gitcoin alpha round banner added

src/components/views/homepage/HomeGIVPowerSection.tsx

@@ -43,6 +43,7 @@ const Wrapper = styled(HomeContainer)`
 	position: relative;
 	cursor: pointer;
 	min-height: 550px;
+	max-width: 200px:
 	border-radius: 12px;
 	overflow: hidden;
 	box-shadow: ${Shadow.Neutral[400]};

src/components/views/homepage/HomeNiceSection.tsx

@@ -13,6 +13,25 @@ import { Col, Container } from '@/components/Grid';
 
 const HomePurpleSection = () => {
 	const { formatMessage } = useIntl();
+
+	// replacing this by the gitcoin alpha round for now
+	const gitcoinGrantAlpha =
+		'https://grant-explorer.gitcoin.co/#/round/1/0xd95a1969c41112cee9a2c931e849bcef36a16f4c/0xb746c0f648f9b930ea4568cf8741067a7fc7eb3928ac13cced8076212cf3cf37-0xd95a1969c41112cee9a2c931e849bcef36a16f4c';
+	return (
+		<GitcoinContainer>
+			<Link
+				href={gitcoinGrantAlpha}
+				target='_blank'
+				rel='noopener noreferrer'
+			>
+				<img
+					alt='gitcoin alpha is here'
+					src={'/images/banners/gitcoin-alpha-banner.png'}
+				/>
+			</Link>
+		</GitcoinContainer>
+	);
+
 	return (
 		<Wrapper>
 			<Arcs>
@@ -64,7 +83,7 @@ const Wrapper = styled(HomeContainer)`
 	top: -50px;
 	::after {
 		content: '';
-		background-image: url('/images/backgrounds/GIVGIVGIV.png');
+		background-image: url('/images/banners/gitcoin-alpha-bannerV.png');
 		opacity: 0.1;
 		top: 0;
 		left: 0;
@@ -75,6 +94,25 @@ const Wrapper = styled(HomeContainer)`
 	}
 `;
 
+const GitcoinContainer = styled.div`
+	display: none;
+	position: relative;
+	cursor: pointer;
+	border-radius: 12px;
+	flex-direction: column;
+	align-items: center;
+	margin: 64px 32px;
+
+	img {
+		max-width: 1080px;
+		border-radius: 12px;
+	}
+
+	${mediaQueries.laptopL} {
+		display: flex;
+	}
+`;
+
 const BigTitle = styled(D3)`
 	color: ${brandColors.giv[500]};
 	margin: 0 0 40px 0;

src/components/views/projects/ProjectsIndex.tsx

@@ -32,6 +32,7 @@ import ProjectsFiltersDesktop from '@/components/views/projects/ProjectsFiltersD
 import ProjectsFiltersTablet from '@/components/views/projects/ProjectsFiltersTablet';
 import ProjectsFiltersMobile from '@/components/views/projects/ProjectsFiltersMobile';
 import LottieControl from '@/components/animations/lottieControl';
+import GitcoinBanner from '@/components/views/homepage/HomeNiceSection';
 import LoadingAnimation from '@/animations/loading_giv.json';
 import useDetectDevice from '@/hooks/useDetectDevice';
 import { Flex, FlexCenter } from '@/components/styled-components/Flex';
@@ -251,6 +252,7 @@ const ProjectsIndex = (props: IProjectsView) => {
 			)}
 
 			<ProjectsBanner mainCategory={selectedMainCategory} />
+			<GitcoinBanner />
 			<Wrapper>
 				<FiltersContainer>
 					{isDesktop && <ProjectsFiltersDesktop />}