Various styling cleanups

socialincome-san · Oct 20, 2023 · f1451b3 · f1451b3
1 parent ffff677
commit f1451b3
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 158 deletions.
diff --git a/...ang]/[country]/(website)/books/better.jpg → ...ntry]/(website)/books/(assets)/better.jpg b/...ang]/[country]/(website)/books/better.jpg → ...ntry]/(website)/books/(assets)/better.jpg
diff --git a/...ang]/[country]/(website)/books/coming.jpg → ...ntry]/(website)/books/(assets)/coming.jpg b/...ang]/[country]/(website)/books/coming.jpg → ...ntry]/(website)/books/(assets)/coming.jpg
diff --git a/...ang]/[country]/(website)/books/divide.jpg → ...ntry]/(website)/books/(assets)/divide.jpg b/...ang]/[country]/(website)/books/divide.jpg → ...ntry]/(website)/books/(assets)/divide.jpg
diff --git a/...ng]/[country]/(website)/books/freedom.jpg → ...try]/(website)/books/(assets)/freedom.jpg b/...ng]/[country]/(website)/books/freedom.jpg → ...try]/(website)/books/(assets)/freedom.jpg
diff --git a/...[lang]/[country]/(website)/books/hard.jpg → ...ountry]/(website)/books/(assets)/hard.jpg b/...[lang]/[country]/(website)/books/hard.jpg → ...ountry]/(website)/books/(assets)/hard.jpg
diff --git a/...[lang]/[country]/(website)/books/life.jpg → ...ountry]/(website)/books/(assets)/life.jpg b/...[lang]/[country]/(website)/books/life.jpg → ...ountry]/(website)/books/(assets)/life.jpg
diff --git a/...ang]/[country]/(website)/books/lowrey.jpg → ...ntry]/(website)/books/(assets)/lowrey.jpg b/...ang]/[country]/(website)/books/lowrey.jpg → ...ntry]/(website)/books/(assets)/lowrey.jpg
diff --git a/...untry]/(website)/books/poor-economics.jpg → ...ebsite)/books/(assets)/poor-economics.jpg b/...untry]/(website)/books/poor-economics.jpg → ...ebsite)/books/(assets)/poor-economics.jpg
diff --git a/...ang]/[country]/(website)/books/utopia.jpg → ...ntry]/(website)/books/(assets)/utopia.jpg b/...ang]/[country]/(website)/books/utopia.jpg → ...ntry]/(website)/books/(assets)/utopia.jpg
diff --git a/website/src/app/[lang]/[country]/(website)/books/section-1.tsx b/website/src/app/[lang]/[country]/(website)/books/section-1.tsx
@@ -1,4 +1,5 @@
 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';
@@ -10,25 +11,24 @@ export default async function Section1({ params }: DefaultPageProps) {
 	});
 
 	return (
-		<BaseContainer className="mt-20 flex flex-col content-center justify-center text-center">
-			<Typography size="4xl" weight="bold" lineHeight="loose" className="m-3 w-auto pb-4">
+		<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="p" size="xl" weight="normal" lineHeight="relaxed" className="m-auto w-4/5 px-1 pb-3 sm:w-3/5">
+			<Typography as="h2" size="xl" className="max-w-2xl">
 				{translator.t('section-1.subtitle-1')}
 			</Typography>
-			<Typography as="p" size="xl" weight="normal" lineHeight="relaxed" className="m-auto w-4/5 pb-3 sm:w-3/5">
-				{translator.t('section-1.subtitle-2')} <br />
-				<Link href="mailto: [email protected]" className="text-blue-500 hover:text-blue-700">
+			<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 justify-center text-center align-middle ">
-				<svg xmlns="http://www.w3.org/2000/svg" height="0.8em" viewBox="0 0 512 512">
-					<path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" />
-				</svg>
-				<span className="px-2  text-xs text-zinc-400">{translator.t('section-1.lastUpdate')}</span>
+			<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>
 	);

diff --git a/website/src/app/[lang]/[country]/(website)/books/section-2.tsx b/website/src/app/[lang]/[country]/(website)/books/section-2.tsx
@@ -2,15 +2,15 @@ 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 './better.jpg';
-import book5cover from './coming.jpg';
-import book2cover from './divide.jpg';
-import book7cover from './freedom.jpg';
-import book4cover from './hard.jpg';
-import book1cover from './life.jpg';
-import book8cover from './lowrey.jpg';
-import book9cover from './poor-economics.jpg';
-import book3cover from './utopia.jpg';
+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({
@@ -19,109 +19,107 @@ export default async function Section2({ params }: DefaultPageProps) {
 	});
 
 	return (
-		<BaseContainer>
-			<div className="flex w-full flex-col-reverse items-center sm:items-start">
-				<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')}
-				/>
-				<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={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={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={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={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={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={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={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={true}
-				/>
-			</div>
+		<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>
 	);
 }
diff --git a/website/src/components/book/book.tsx b/website/src/components/book/book.tsx
@@ -1,5 +1,4 @@
-import { Badge, BaseContainer, Typography } from '@socialincome/ui';
-import classNames from 'classnames';
+import { Badge, Card, Typography } from '@socialincome/ui';
 import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
 
@@ -29,40 +28,31 @@ export default async function Book({
 	currentlyReading,
 }: BookProps) {
 	return (
-		<BaseContainer>
-			<div
-				className={classNames('flex h-fit flex-col flex-nowrap pb-5 shadow-md sm:flex-row ', {
-					'my-40': currentlyReading,
-					'my-8': !currentlyReading,
-				})}
-			>
-				<div className="w-fit basis-1/3">
-					<Image src={cover} height={4000} alt="book cover" />
-				</div>
-				<div className="mx-8 flex w-fit basis-5/12 flex-col">
-					<div className="flex flex-col items-baseline sm:flex-row">
-						<Typography className="mt-6 text-blue-500 sm:mb-2">{author}</Typography>
-						{currentlyReading && (
-							<Badge className="my-1 rounded-md bg-blue-500 px-2 py-0.5 text-white sm:mx-1">Currently reading</Badge>
-						)}
-					</div>
-					<Link href={authorLink}>
-						<Typography weight="bold" size="xl" lineHeight="relaxed" className="mb-1">
-							{title}
-						</Typography>
-					</Link>
-					<Typography as="p">{description}</Typography>
-					<Typography as="p" className="my-5">
-						{quote}
+		<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>
-					<Link href={publisherLink}>
-						<Typography weight="bold" className="hover:text-blue-800">
-							{publisher}
-						</Typography>
-					</Link>
-					<Typography size="sm">Published {year}</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>
-		</BaseContainer>
+		</Card>
 	);
 }