feature(website): books page (#591)

shared/locales/en/website-books.json

@@ -0,0 +1,101 @@
+{
+	"section-1": {
+		"title": "Recommended Reading",
+		"subtitle-1": "A suggested reading list to provide a foundation for understanding Social Income, Basic Income, financial aid, and poverty",
+		"subtitle-2": "If you have any additional book recommendations, don't hesitate to ",
+		"subtitle-3": "let us know",
+		"lastUpdate": "Last Update: Oct 19, 2023"
+	},
+	"section-2": {
+		"book-1": {
+			"author": "Peter Singer",
+			"authorLink": "https://www.thelifeyoucansave.org/the-book/",
+			"title": "The Life You Can Save – How to Do Your Part to End World Poverty",
+			"description": "In The Life You Can Save, Peter Singer makes the convincing argument that giving will make a huge difference in the lives of others without diminishing the quality of our own. This book is an urgent call to action and a hopeful primer on how the power of compassion, mixed with rigorous investigation and careful reasoning, can lift others out of despair.",
+			"quote": "Singer contends that we need to change our views of what is involved in living an ethical life.",
+			"publisher": "Free Download",
+			"publisherLink": "https://www.thelifeyoucansave.org/the-book/",
+			"year": "2019"
+		},
+		"book-2": {
+			"author": "Jason Hickel",
+			"authorLink": "https://www.jasonhickel.org/the-divide",
+			"title": "The Divide – Global Inequality from Conquest to Free Marketsy",
+			"description": "Since 1960, the income gap between the North and South has roughly tripled in size. Today 4.3 billion people, 60 per cent of the world's population, live on less than $5 per day. The richest eight people now control the same amount of wealth as the poorest half of the world combined.",
+			"quote": "What is causing this growing divide? We are told that poverty is a natural phenomenon that can be fixed with aid. But in reality it is a political problem: poverty doesn’t just exist, it has been created.",
+			"publisher": "Bloomsbury Publishing",
+			"publisherLink": "https://wwnorton.com/books/The-Divide/",
+			"year": "2018"
+		},
+		"book-3": {
+			"author": "Rutger Bregman",
+			"authorLink": "https://www.rutgerbregman.com/",
+			"title": "Utopia For Realists – How We Can Build the Ideal World",
+			"description": "Utopia for Realists is one of those rare books that takes you by surprise and challenges what you thought was possible. From a Canadian city that once eradicated poverty to Richard Nixon's near implementation of basic income for millions of Americans, Bregman takes us on a journey through history and beyond the usual left-right divides to champion exciting ideas whose time has yet come.",
+			"quote": "\"A more politically radical Malcolm Gladwell.\" – New York Times",
+			"publisher": "W. W. Norton & Company Publishing",
+			"publisherLink": "https://crownpublishing.com/archives/feature/annie-lowrey-author-give-people-money",
+			"year": "2017"
+		},
+		"book-4": {
+			"author": "Abhijit Banerjee & Esther Duflo",
+			"authorLink": "http://economics.mit.edu/faculty/eduflo/",
+			"title": "Good Economics for Hard Times – Better Answers to Our Biggest Problems",
+			"description": "In this revolutionary book, prize-winning economists Abhijit V. Banerjee and Esther Duflo show how economics, when done right, can help us solve the thorniest social and political problems of our day. From immigration to inequality, slowing growth to accelerating climate change, we have the resources to address the challenges we face but we are so often blinded by ideology.",
+			"quote": "\"Wonderfully refreshing . . . A must read\" – Thomas Piketty",
+			"publisher": "Penguin Random House Publishing",
+			"publisherLink": "https://www.penguin.co.uk/books/305/305539/good-economics-for-hard-times/9780141986197.html",
+			"year": "2019"
+		},
+		"book-5": {
+			"author": "Phil Teer",
+			"authorLink": "https://twitter.com/pteer",
+			"title": "The Coming Age of Imagination",
+			"description": "Phil Teer draws insights from the creative and entrepreneurial effects of basic income experiments and weaves them into stories of how the Romantic poets invented consumerism; artists regenerated cities like New York, Glasgow and Berlin; and creative geniuses like David Bowie, Bob Dylan, Kurt Vonnegut, Haruki Murakami and many others liberated their creative spirits and transformed their lives.",
+			"quote": "The Coming Age of Imagination is a creative manifesto for universal basic income. When we no longer have to worry about money, we have the opportunity to be creative on a mass scale. Simply put, basic income changes everything.",
+			"publisher": "Unbound",
+			"publisherLink": "https://unbound.com/books/the-coming-age-of-imagination/",
+			"year": "2020"
+		},
+		"book-6": {
+			"author": "William MacAskill",
+			"authorLink": "https://www.williammacaskill.com/book",
+			"title": "Doing Good Better – How Effective Altruism Can Help You Make a Difference",
+			"description": "Most of us want to make a difference. We donate our time and money to charities and causes we deem worthy, choose careers we consider meaningful, and patronize businesses and buy products we believe make the world a better place. Unfortunately, we often base these decisions on assumptions and emotions rather than facts. As a result, even our best intentions often lead to ineffective—and sometimes downright harmful—outcomes. How can we do better?",
+			"quote": "\"Even for small givers, a more rational approach to philanthropy can focus attention on areas that make the biggest enduring contribution to human welfare.\" – New York Times",
+			"publisher": "Penguin Random House Publishing",
+			"publisherLink": "https://www.penguinrandomhouse.com/books/316786/doing-good-better-by-william-macaskill/",
+			"year": "2015"
+		},
+		"book-7": {
+			"author": "Amartya Sen",
+			"authorLink": "https://en.wikipedia.org/wiki/Amartya_Sen",
+			"title": "Development as Freedom",
+			"description": "In Development as Freedom Amartya Sen explains how in a world of unprecedented increase in overall opulence millions of people living in the Third World are still unfree. Even if they are not technically slaves, they are denied elementary freedoms and remain imprisoned in one way or another by economic poverty, social deprivation, political tyranny or cultural authoritarianism.",
+			"quote": "By the winner of the 1988 Nobel Prize in Economics, an essential and paradigm-altering framework for understanding economic development — for both rich and poor — in the twenty-first century.",
+			"publisher": "Oxford University Press",
+			"publisherLink": "https://global.oup.com/?cc=ch",
+			"year": "2001"
+		},
+		"book-8": {
+			"author": "Annie Lowrey",
+			"authorLink": "https://en.wikipedia.org/wiki/Annie_Lowrey",
+			"title": "Give People Money",
+			"description": "In this sparkling and provocative book, economics writer Annie Lowrey examines the UBI movement from many angles. She travels to Kenya to see how a UBI is lifting the poorest people on earth out of destitution, India to see how inefficient government programs are failing the poor, South Korea to interrogate UBI’s intellectual pedigree, and Silicon Valley to meet the tech titans financing UBI pilots in expectation of a world with advanced artificial intelligence and little need for human labor.",
+			"quote": "\"Like UBI, the book is ambitious, and it presents a strong case for cash aid.\" — Financial Times",
+			"publisher": "Crown Publishing",
+			"publisherLink": "https://crownpublishing.com/archives/feature/annie-lowrey-author-give-people-money",
+			"year": "2018"
+		},
+		"book-9": {
+			"author": "Abhijit V. Banerjee & Esther Duflo",
+			"authorLink": "https://en.wikipedia.org/wiki/Poor_Economics",
+			"title": "Poor Economics",
+			"description": "This eye-opening book overturns the myths about what it is like to live on very little, revealing the unexpected decisions that millions of people make every day. Looking at some of the most paradoxical aspects of life below the poverty line - why the poor need to borrow in order to save, why incentives that seem effective to us may not be for them, and why, despite being more risk-taking than high financiers, they start businesses but rarely grow them.",
+			"quote": "\"Refreshingly original, wonderfully insightful ... an entirely new perspective\" — Guardian",
+			"publisher": "Penguin Publishing",
+			"publisherLink": "https://www.penguin.co.uk/books/186/186390/poor-economics/9780718193669.html",
+			"year": "2012"
+		}
+	}
+}

website/src/app/[lang]/[country]/(website)/books/page.tsx

@@ -0,0 +1,12 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import Section1 from './section-1';
+import Section2 from './section-2';
+
+export default async function Page(props: DefaultPageProps) {
+	return (
+		<>
+			<Section1 {...props} />
+			<Section2 {...props} />
+		</>
+	);
+}

website/src/app/[lang]/[country]/(website)/books/section-1.tsx

@@ -0,0 +1,35 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import { ClockIcon } from '@heroicons/react/24/solid';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer, Typography } from '@socialincome/ui';
+import Link from 'next/link';
+
+export default async function Section1({ params }: DefaultPageProps) {
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-books'],
+	});
+
+	return (
+		<BaseContainer className="mt-12 flex flex-col items-center space-y-4">
+			<Typography as="h1" size="4xl" weight="bold" className="text-center">
+				{translator.t('section-1.title')}
+			</Typography>
+			<Typography as="h2" size="xl" className="max-w-2xl">
+				{translator.t('section-1.subtitle-1')}
+			</Typography>
+			<Typography as="h2" size="xl" className="max-w-2xl">
+				{translator.t('section-1.subtitle-2')}
+				<Link href="mailto: [email protected]" className="text-primary">
+					{translator.t('section-1.subtitle-3')}
+				</Link>
+			</Typography>
+			<div className=" flex items-center">
+				<ClockIcon className="mr-2 h-5 w-5" />
+				<Typography size="sm" color="muted-foreground">
+					{translator.t('section-1.lastUpdate')}
+				</Typography>
+			</div>
+		</BaseContainer>
+	);
+}

website/src/app/[lang]/[country]/(website)/books/section-2.tsx

@@ -0,0 +1,125 @@
+import { DefaultPageProps } from '@/app/[lang]/[country]';
+import Book from '@/components/book/book';
+import { Translator } from '@socialincome/shared/src/utils/i18n';
+import { BaseContainer } from '@socialincome/ui';
+import book6cover from './(assets)/better.jpg';
+import book5cover from './(assets)/coming.jpg';
+import book2cover from './(assets)/divide.jpg';
+import book7cover from './(assets)/freedom.jpg';
+import book4cover from './(assets)/hard.jpg';
+import book1cover from './(assets)/life.jpg';
+import book8cover from './(assets)/lowrey.jpg';
+import book9cover from './(assets)/poor-economics.jpg';
+import book3cover from './(assets)/utopia.jpg';
+
+export default async function Section2({ params }: DefaultPageProps) {
+	const translator = await Translator.getInstance({
+		language: params.lang,
+		namespaces: ['website-books'],
+	});
+
+	return (
+		<BaseContainer className="mx-auto flex w-full max-w-4xl flex-col space-y-8 py-8">
+			<Book
+				cover={book9cover}
+				author={translator.t('section-2.book-9.author')}
+				authorLink={translator.t('section-2.book-9.authorLink')}
+				title={translator.t('section-2.book-9.title')}
+				description={translator.t('section-2.book-9.description')}
+				quote={translator.t('section-2.book-9.quote')}
+				publisher={translator.t('section-2.book-9.publisher')}
+				publisherLink={translator.t('section-2.book-9.publisherLink')}
+				year={translator.t('section-2.book-9.year')}
+				currentlyReading
+			/>
+			<Book
+				cover={book8cover}
+				author={translator.t('section-2.book-8.author')}
+				authorLink={translator.t('section-2.book-8.authorLink')}
+				title={translator.t('section-2.book-8.title')}
+				description={translator.t('section-2.book-8.description')}
+				quote={translator.t('section-2.book-8.quote')}
+				publisher={translator.t('section-2.book-8.publisher')}
+				publisherLink={translator.t('section-2.book-8.publisherLink')}
+				year={translator.t('section-2.book-8.year')}
+			/>
+			<Book
+				cover={book7cover}
+				author={translator.t('section-2.book-7.author')}
+				authorLink={translator.t('section-2.book-7.authorLink')}
+				title={translator.t('section-2.book-7.title')}
+				description={translator.t('section-2.book-7.description')}
+				quote={translator.t('section-2.book-7.quote')}
+				publisher={translator.t('section-2.book-7.publisher')}
+				publisherLink={translator.t('section-2.book-7.publisherLink')}
+				year={translator.t('section-2.book-7.year')}
+			/>
+			<Book
+				cover={book6cover}
+				author={translator.t('section-2.book-6.author')}
+				authorLink={translator.t('section-2.book-6.authorLink')}
+				title={translator.t('section-2.book-6.title')}
+				description={translator.t('section-2.book-6.description')}
+				quote={translator.t('section-2.book-6.quote')}
+				publisher={translator.t('section-2.book-6.publisher')}
+				publisherLink={translator.t('section-2.book-6.publisherLink')}
+				year={translator.t('section-2.book-6.year')}
+			/>
+			<Book
+				cover={book5cover}
+				author={translator.t('section-2.book-5.author')}
+				authorLink={translator.t('section-2.book-5.authorLink')}
+				title={translator.t('section-2.book-5.title')}
+				description={translator.t('section-2.book-5.description')}
+				quote={translator.t('section-2.book-5.quote')}
+				publisher={translator.t('section-2.book-5.publisher')}
+				publisherLink={translator.t('section-2.book-5.publisherLink')}
+				year={translator.t('section-2.book-5.year')}
+			/>
+			<Book
+				cover={book4cover}
+				author={translator.t('section-2.book-4.author')}
+				authorLink={translator.t('section-2.book-4.authorLink')}
+				title={translator.t('section-2.book-4.title')}
+				description={translator.t('section-2.book-4.description')}
+				quote={translator.t('section-2.book-4.quote')}
+				publisher={translator.t('section-2.book-4.publisher')}
+				publisherLink={translator.t('section-2.book-4.publisherLink')}
+				year={translator.t('section-2.book-4.year')}
+			/>
+			<Book
+				cover={book3cover}
+				author={translator.t('section-2.book-3.author')}
+				authorLink={translator.t('section-2.book-3.authorLink')}
+				title={translator.t('section-2.book-3.title')}
+				description={translator.t('section-2.book-3.description')}
+				quote={translator.t('section-2.book-3.quote')}
+				publisher={translator.t('section-2.book-3.publisher')}
+				publisherLink={translator.t('section-2.book-3.publisherLink')}
+				year={translator.t('section-2.book-3.year')}
+			/>
+			<Book
+				cover={book2cover}
+				author={translator.t('section-2.book-2.author')}
+				authorLink={translator.t('section-2.book-2.authorLink')}
+				title={translator.t('section-2.book-2.title')}
+				description={translator.t('section-2.book-2.description')}
+				quote={translator.t('section-2.book-2.quote')}
+				publisher={translator.t('section-2.book-2.publisher')}
+				publisherLink={translator.t('section-2.book-2.publisherLink')}
+				year={translator.t('section-2.book-2.year')}
+			/>
+			<Book
+				cover={book1cover}
+				author={translator.t('section-2.book-1.author')}
+				authorLink={translator.t('section-2.book-1.authorLink')}
+				title={translator.t('section-2.book-1.title')}
+				description={translator.t('section-2.book-1.description')}
+				quote={translator.t('section-2.book-1.quote')}
+				publisher={translator.t('section-2.book-1.publisher')}
+				publisherLink={translator.t('section-2.book-1.publisherLink')}
+				year={translator.t('section-2.book-1.year')}
+			/>
+		</BaseContainer>
+	);
+}

website/src/components/book/book.tsx

@@ -0,0 +1,58 @@
+import { Badge, Card, Typography } from '@socialincome/ui';
+import Image, { StaticImageData } from 'next/image';
+import Link from 'next/link';
+
+type BookProps = {
+	cover: StaticImageData;
+	author: string;
+	authorLink: string;
+	title: string;
+	description: string;
+	quote: string;
+	publisher: string;
+	publisherLink: string;
+	year: string;
+	currentlyReading?: boolean;
+};
+
+export default async function Book({
+	cover,
+	author,
+	authorLink,
+	title,
+	description,
+	quote,
+	publisher,
+	publisherLink,
+	year,
+	currentlyReading,
+}: BookProps) {
+	return (
+		<Card className="flex flex-col sm:flex-row">
+			<div className="w-fit basis-2/5 self-center">
+				<Image src={cover} alt="Book cover" className="w-full rounded-sm" />
+			</div>
+			<div className="flex w-fit basis-3/5 flex-col px-8 py-6">
+				<div className="flex-inline mb-1 flex items-center">
+					<Typography as="h3" color="primary">
+						{author}
+					</Typography>
+					{currentlyReading && <Badge className="ml-2 rounded-md">Currently reading</Badge>}
+				</div>
+				<Link href={authorLink} target="_blank" rel="noreferrer" className="mb-2">
+					<Typography weight="bold" size="xl" lineHeight="relaxed" as="h2" className="hover:text-primary">
+						{title}
+					</Typography>
+				</Link>
+				<Typography>{description}</Typography>
+				<Typography className="my-5">{quote}</Typography>
+				<Link href={publisherLink} target="_blank" rel="noreferrer">
+					<Typography weight="bold" className="hover:text-primary">
+						{publisher}
+					</Typography>
+				</Link>
+				<Typography size="sm">Published {year}</Typography>
+			</div>
+		</Card>
+	);
+}