Move app to apps/web-react in pnpm workspace layout

apps/web-react/app/components/layout/Footer.module.css

@@ -0,0 +1,133 @@
+.footer {
+	display: flex;
+	flex-direction: column;
+	padding: var(--s-3);
+	background-color: var(--color-bg-high);
+	gap: var(--s-6);
+	margin-block-start: auto;
+	padding-block-end: var(--s-32);
+}
+
+.linkList {
+	display: flex;
+	justify-content: space-evenly;
+	font-size: var(--font-2xs);
+
+	& > * {
+		flex: 1;
+		text-align: center;
+	}
+}
+
+.socials {
+	display: flex;
+	justify-content: center;
+	gap: var(--s-2);
+}
+
+.socialIcon {
+	height: 2.25rem;
+	transition: transform 0.25s ease-in-out;
+}
+
+.socialLink {
+	display: flex;
+	max-width: 10rem;
+	height: 12rem;
+	flex: 1 1 0;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--s-4);
+	border-radius: var(--radius-box);
+	background-color: var(--color-bg-higher);
+	cursor: pointer;
+	font-size: var(--font-lg);
+
+	&:hover > .socialIcon {
+		transform: translateY(-0.3rem);
+	}
+}
+
+.socialHeader {
+	text-align: center;
+
+	& > p {
+		font-size: var(--font-2xs);
+	}
+}
+
+.patronTitle {
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
+	gap: var(--s-2);
+}
+
+.patronList {
+	display: flex;
+	max-width: 75vw;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: 0;
+	margin: 0 auto;
+	font-size: var(--font-xs);
+	gap: var(--s-1);
+	list-style: none;
+	margin-block-start: var(--s-2);
+}
+
+.patron {
+	max-width: 250px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+}
+
+.copyrightNote {
+	display: flex;
+	flex-direction: column;
+	color: var(--color-text-high);
+	font-size: var(--font-2xs);
+	text-align: center;
+}
+
+.sourceLink {
+	margin-inline: auto;
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+	font-style: italic;
+}
+
+@media screen and (max-width: 640px) {
+	.socials {
+		flex-direction: column;
+	}
+
+	.socialLink {
+		max-width: initial;
+		flex-direction: row;
+
+		&:hover > .socialIcon {
+			transform: translateX(-0.3rem);
+		}
+	}
+
+	.socialHeader {
+		display: flex;
+		align-items: center;
+		gap: var(--s-2);
+		text-align: initial;
+
+		& > p {
+			margin-block-start: var(--s-1);
+		}
+	}
+
+	.socialIcon {
+		height: 1.75rem;
+	}
+}