Merge pull request #133 from goodeats/130-landing-page-tweaks

130 landing page tweaks
goodeats · May 24, 2024 · 3d26aab · 3d26aab
2 parents c245369 + 7f3ccf8
commit 3d26aab
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/app/components/github-project-link.tsx b/app/components/github-project-link.tsx
@@ -0,0 +1,14 @@
+import { Icon } from './ui/icon'
+
+export const GithubProjectLink = () => {
+	return (
+		<a
+			href="https://github.com/goodeats/epic-pppaaattt.xyz"
+			className="flex h-8 w-8 cursor-pointer items-center justify-center"
+		>
+			<Icon name="github-logo">
+				<span className="sr-only">GitHub Project</span>
+			</Icon>
+		</a>
+	)
+}
diff --git a/app/components/layout/page-header.tsx b/app/components/layout/page-header.tsx
@@ -1,5 +1,6 @@
 import { Link } from '@remix-run/react'
 import { useOptionalUser } from '#app/utils/user'
+import { GithubProjectLink } from '../github-project-link'
 import Logo from '../logo'
 import { ThemeSwitch } from '../theme-switch'
 import { Button } from '../ui/button'
@@ -13,7 +14,14 @@ const PageHeader = () => {
 			<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
 				<Logo />
 				<div className="flex items-center gap-10">
-					{user ? <UserDropdown /> : <ThemeSwitch />}
+					{user ? (
+						<UserDropdown />
+					) : (
+						<div className="flex gap-4">
+							<GithubProjectLink />
+							<ThemeSwitch />
+						</div>
+					)}
 				</div>
 			</nav>
 		</header>

diff --git a/app/routes/_marketing+/components/content.tsx b/app/routes/_marketing+/components/content.tsx
@@ -5,11 +5,9 @@ import {
 } from '#app/components/layout/marketing'
 import { Icon } from '#app/components/ui/icon'
 
-export const ContentHeader = () => {
+export const ContentHeader = ({ username }: { username: string }) => {
 	return (
-		<MarketingHeader data-heading>
-			<a href="https://github.com/goodeats/epic-pppaaattt.xyz">PPPAAATTT</a>
-		</MarketingHeader>
+		<MarketingHeader data-heading>{username.toUpperCase()}</MarketingHeader>
 	)
 }
 

diff --git a/app/routes/_marketing+/components/user-details.tsx b/app/routes/_marketing+/components/user-details.tsx
@@ -1,7 +1,6 @@
 import {
 	MarketingDetailsSection,
 	MarketingLogoImage,
-	MarketingLogoLink,
 } from '#app/components/layout/marketing'
 import { getUserImgSrc } from '#app/utils/misc'
 import { type IUserMarketing } from '..'
@@ -10,17 +9,11 @@ import { ContentBody, ContentContact, ContentHeader } from './content'
 export const UserDetails = ({ user }: { user: IUserMarketing }) => {
 	return (
 		<MarketingDetailsSection className="xl:mt-0">
-			<MarketingLogoLink
-				href="https://github.com/goodeats/epic-pppaaattt.xyz"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<MarketingLogoImage
-					alt="Pat Needham"
-					src={getUserImgSrc(user.image?.id)}
-				/>
-			</MarketingLogoLink>
-			<ContentHeader />
+			<MarketingLogoImage
+				alt="Pat Needham"
+				src={getUserImgSrc(user.image?.id)}
+			/>
+			<ContentHeader username={user.username} />
 			<ContentBody bio={user.bio} />
 			<ContentContact ig={user.sm_url_instagram} gh={user.sm_url_github} />
 		</MarketingDetailsSection>