Fix/production landing page, part #2 (#68)

muqa-org · Sep 30, 2024 · db96ebb · db96ebb
1 parent 24af7c2
commit db96ebb
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 34 deletions.
diff --git a/apps/platform/messages/en.json b/apps/platform/messages/en.json
@@ -1,6 +1,6 @@
 {
   "home": {
-    "notification": "Now accepting project proposals until September 1st 2024",
+    "notification": "We are accepting project proposals until September 1, 2024. <guidelines>Submit proposal now</guidelines>.",
     "heroText": "Propose a project for a green space. Ideas with the most votes will get funding.",
     "exampleProjectSubtitle": "Example project",
     "exampleNeighborhood": "Neighborhoods",
@@ -122,5 +122,9 @@
     "checkout": "Checkout",
     "donationSuccess": "Your donation has been successfully received!",
     "resultAvailable": "Results will be available after tallying on"
+  },
+  "footer" : {
+    "documentation": "Documentation",
+    "forum": "Forum"
   }
 }
diff --git a/apps/platform/messages/hr.json b/apps/platform/messages/hr.json
@@ -1,6 +1,6 @@
 {
   "home": {
-    "notification": "Primamo prijedloge projekata do 1. rujna 2024.",
+    "notification": "Primamo prijedloge projekata do 1. rujna 2024. <guidelines>Pošalji prijedlog sada</guidelines>.",
     "heroText": "Predložite projekt uređenja zelene površine. Ideje s najviše glasova dobit će financiranje.",
     "exampleProjectSubtitle": "Primjer projekta",
     "exampleNeighborhood": "Kvartovi",
@@ -121,5 +121,9 @@
     "checkout": "Na plaćanje",
     "donationSuccess": "Tvoja donacija je uspješno zaprimljena!",
     "resultAvailable": "Rezultati će biti dostupni nakon zbrajanja"
+  },
+  "footer" : {
+    "documentation": "Dokumentacija",
+    "forum": "Forum"
   }
 }
diff --git a/apps/platform/public/images/icons/socials/icon-facebook.svg b/apps/platform/public/images/icons/socials/icon-facebook.svg
diff --git a/apps/platform/src/app/Header.tsx b/apps/platform/src/app/Header.tsx
@@ -11,7 +11,7 @@ import Container from '@/app/components/Container';
 import Navigation from '@/app/components/Navigation';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 
-import { CodaFormProjectLink } from '@/app/config/config';
+import { CodaFormProjectLink } from '@/app/config';
 import { MuqaConnectButton } from './components/MuqaConnectButton';
 import { useSession } from 'next-auth/react';
 

diff --git a/apps/platform/src/app/components/Banner.tsx b/apps/platform/src/app/components/Banner.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import images from '@/app/components/common/Images';
 
-import { CodaFormProjectLink } from '@/app/config/config';
+import { CodaFormProjectLink } from '@/app/config';
 
 const Banner = ({
 	message,

diff --git a/apps/platform/src/app/components/Navigation.tsx b/apps/platform/src/app/components/Navigation.tsx
@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation';
 
+import { DocumentationLink, ForumLink } from '@/app/config';
+
 export default function Navigation({ screen }: { screen: string }) {
 	const t = useTranslations('navigation');
 	const pathname = usePathname();
@@ -29,7 +31,7 @@ export default function Navigation({ screen }: { screen: string }) {
 				{t('home')}
 			</Link>
 			<Link
-				href={'https://docs.zazelenimo.com/'}
+				href={DocumentationLink}
 				className={`${linkClassName} ${
 					pathname === '/documentation'
 						? 'border-borderGreen text-primaryBlack'
@@ -40,7 +42,7 @@ export default function Navigation({ screen }: { screen: string }) {
 				{t('documentation')}
 			</Link>
 			<Link
-				href={'https://forum.zazelenimo.com/'}
+				href={ForumLink}
 				className={`${linkClassName} ${
 					pathname === '/documentation'
 						? 'border-borderGreen text-primaryBlack'

diff --git a/apps/platform/src/app/components/NotificationBar.tsx b/apps/platform/src/app/components/NotificationBar.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
@@ -7,6 +7,8 @@ import Container from '@/app/components/Container';
 import icons from '@/app/components/common/Icons';
 import { useState } from 'react';
 
+import { CodaFormProjectLink } from '@/app/config';
+
 const NotificationBar = ({ message }: { message: string }) => {
 	const t = useTranslations('home');
 
@@ -18,7 +20,9 @@ const NotificationBar = ({ message }: { message: string }) => {
 		<div className='bg-[#6AFCAD]'>
 			<Container className='mx-auto flex items-center justify-between px-5 py-5'>
 				<span className='font-normal leading-normal text-black'>
-					{t(message)}
+					{t.rich('notification', {
+						guidelines: chunks => <a href={CodaFormProjectLink} target='_blank'>{chunks}</a>,
+					})}
 				</span>
 				<button>
 					<Image
@@ -34,5 +38,4 @@ const NotificationBar = ({ message }: { message: string }) => {
 		</div>
 	);
 };
-
 export default NotificationBar;
diff --git a/apps/platform/src/app/components/common/Icons.tsx b/apps/platform/src/app/components/common/Icons.tsx
@@ -7,6 +7,7 @@ const icons = {
 	GithubLogoBlue: '/images/icons/socials/icon-github-blue.svg',
 	DiscordLogo: '/images/icons/socials/icon-discord.svg',
 	FacebookLogo: '/images/icons/socials/icon-facebook-white.svg',
+	FacebookLogoDark: '/images/icons/socials/icon-facebook.svg',
 
 	confirmedIcon: '/images/icons/icon-yes.svg',
 	confirmedIconWhite: '/images/icons/icon-yes-white.svg',

diff --git a/apps/platform/src/app/components/common/Socials.tsx b/apps/platform/src/app/components/common/Socials.tsx
@@ -1,36 +1,26 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import icons from './Icons';
+import icons from '@/app/components/common/Icons';
+import { GitHubLink, FacebookLink } from '@/app/config';
 
 export default function Socials() {
 	return (
 		<div className='mb-6 flex items-center gap-6 lg:mb-0'>
-			<Link href='/' className='hover:opacity-85'>
-				<Image width='20' height='20' alt='X logo' src={icons.XLogo} />
-			</Link>
-			<Link href='/' className='hover:opacity-85'>
-				<Image
-					width='22'
-					height='22'
-					alt='Telegram logo'
-					src={icons.TelegramLogo}
-				/>
-			</Link>
-			<Link href='/' className='hover:opacity-85'>
+			<Link href={GitHubLink} className='hover:opacity-85' target='_blank'>
 				<Image
 					width='23'
 					height='23'
 					alt='GitHub logo'
 					src={icons.GithubLogo}
 				/>
 			</Link>
-			<Link href='/' className='hover:opacity-85'>
+			<Link href={FacebookLink} className='hover:opacity-85' target='_blank'>
 				<Image
-					width='24'
-					height='24'
-					alt='Discord logo'
-					src={icons.DiscordLogo}
+					width='20'
+					height='20'
+					alt='Facebook logo'
+					src={icons.FacebookLogoDark}
 				/>
 			</Link>
 		</div>

diff --git a/apps/platform/src/app/components/footer/FooterLinks.tsx b/apps/platform/src/app/components/footer/FooterLinks.tsx
@@ -1,17 +1,22 @@
 'use client'
 import Image from 'next/image';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
 import icons from '../common/Icons';
+import { DocumentationLink, ForumLink } from '@/app/config';
 
 export default function FooterLinks() {
+	const t = useTranslations('footer');
+
 	return (
 		<div className='flex items-center gap-10'>
 			<Link
-				href='/'
+				href={DocumentationLink}
 				className='flex items-center gap-2 font-medium leading-6 text-primaryBlack hover:text-blue'
+				target='_blank'
 			>
-				Documentation
+				{t('documentation')}
 				<Image
 					width='20'
 					height='20'
@@ -20,10 +25,10 @@ export default function FooterLinks() {
 				/>
 			</Link>
 			<Link
-				href='/'
+				href={ForumLink}
 				className='flex items-center gap-2 font-medium leading-6 text-primaryBlack hover:text-blue'
 			>
-				About Quadratic Funding
+				{t('forum')}
 				<Image
 					width='18'
 					height='18'

diff --git a/apps/platform/src/app/components/homepage/HomepageIntro.tsx b/apps/platform/src/app/components/homepage/HomepageIntro.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import Container from '@/app/components/Container';
 import HomepageRoundBoxes from '@/app/components/homepage/HomepageRoundBoxes';
 
-import { CodaFormProjectLink } from '@/app/config/config';
+import { CodaFormProjectLink } from '@/app/config';
 
 type HomepageIntroProps = {
 	phases: RoundPhase[]

diff --git a/apps/platform/src/app/components/projects/ProjectsSidebar.tsx b/apps/platform/src/app/components/projects/ProjectsSidebar.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 
-import { neighborhoods } from '@/app/config/config';
+import { neighborhoods } from '@/app/config';
 import icons from '@/app/components/common/Icons';
 
 export default function ProjectsSidebar() {
@@ -19,7 +19,7 @@ export default function ProjectsSidebar() {
 		setSelectedNeighborhoods((prevSelected: string[]) =>
 			prevSelected.includes(neighborhood)
 				? prevSelected.filter((item: string) => item !== neighborhood)
-				: [...prevSelected, neighborhood], 
+				: [...prevSelected, neighborhood],
 		);
 	};
 

diff --git a/apps/platform/src/app/config/config.ts → apps/platform/src/app/config/index.ts b/apps/platform/src/app/config/config.ts → apps/platform/src/app/config/index.ts
@@ -2,6 +2,18 @@
 export const CodaFormProjectLink =
 	'https://forum.zazelenimo.com/t/uputa-za-podnosenje-prijedloga/15';
 
+// link to documentation
+export const DocumentationLink = 'https://docs.zazelenimo.com/';
+
+// link to forum
+export const ForumLink = 'https://forum.zazelenimo.com/';
+
+// link to GitHub
+export const GitHubLink = 'https://github.com/muqa-org/demo';
+
+// link to Facebook
+export const FacebookLink = 'https://www.facebook.com/parkovisplit';
+
 // List of Split city neighborhoods
 export const neighborhoods = [
 	'Bačvice',