Update page layouts

app/dashboard/layout.tsx

@@ -4,7 +4,7 @@ export default function DashboardLayout({
 	children: React.ReactNode
 }) {
 	return (
-		<section className='flex flex-col items-center justify-center gap-4'>
+		<section className='flex flex-col items-center justify-center gap-4 pt-10 sm:pt-16'>
 			{children}
 		</section>
 	)

app/layout.tsx

@@ -62,7 +62,7 @@ export default async function RootLayout({
 							user={user}
 							categories={bookmarkCategories}
 						/>
-						<main className='container mx-auto max-w-7xl flex-grow px-6 pt-16'>
+						<main className='container mx-auto max-w-7xl flex-grow px-6'>
 							{children}
 						</main>
 						<footer className='flex w-full items-center justify-center py-3'>

app/page.tsx

@@ -14,7 +14,7 @@ export default function Home() {
 	}
 
 	return (
-		<section className='flex flex-col items-center justify-center gap-4 py-8 md:py-10'>
+		<section className='md:py-26 flex flex-col items-center justify-center gap-4 py-24'>
 			<div className='inline-block max-w-lg justify-center text-center'>
 				<h1 className={title({ color: 'blue' })}>Beautiful&nbsp;</h1>
 				<h1 className={title()}>Dashboard&nbsp;</h1>
@@ -26,7 +26,7 @@ export default function Home() {
 			</div>
 
 			<div className='my-4'>
-				<Card className='w-96 grow select-none'>
+				<Card className='max-w-96 grow select-none'>
 					<CardHeader className='flex gap-3'>
 						<Image
 							alt='nextui logo'
@@ -34,6 +34,7 @@ export default function Home() {
 							radius='sm'
 							src='https://avatars.githubusercontent.com/u/86160567?s=200&v=4'
 							width={40}
+							removeWrapper
 						/>
 						<Link
 							isExternal

components/bookmarkCard.tsx

@@ -44,6 +44,7 @@ export const BookmarkCard = ({ data }: { data: Bookmark }) => {
 						radius='sm'
 						src='https://avatars.githubusercontent.com/u/86160567?s=200&v=4'
 						width={40}
+						removeWrapper
 					/>
 					<Link
 						isExternal

components/navbar.tsx

@@ -78,7 +78,7 @@ export const Navbar = ({
 						<p className='font-bold text-inherit'>Dashboard</p>
 					</NextLink>
 				</NavbarBrand>
-				<ul className='ml-2 hidden justify-start gap-4 sm:flex'>
+				<ul className='ml-2 hidden justify-start gap-4 md:flex'>
 					{siteConfig.navItems.map((item) => (
 						<NavbarItem key={item.href}>
 							<NextLink
@@ -98,20 +98,21 @@ export const Navbar = ({
 			<NavbarContent
 				className='flex basis-full'
 				justify='end'>
-				<NavbarItem className='hidden gap-2 sm:flex'>
+				<NavbarItem className='flex gap-2'>
 					{pathname.startsWith('/dashboard') && (
-						<div className='mr-4'>
+						<div className='mr-4 hidden min-[400px]:flex'>
 							<NewBookmarkForm categories={categories} />
 						</div>
 					)}
 					<Link
 						isExternal
 						href={siteConfig.links.github}
-						aria-label='Github'>
+						aria-label='Github'
+						className='hidden sm:flex'>
 						<GithubIcon className='text-default-500' />
 					</Link>
-					<ThemeSwitch />
+					<ThemeSwitch className='hidden sm:flex' />
-					<div className='ml-4 flex items-center gap-4'>
+					<div className='ml-2 flex items-center gap-4 sm:ml-4'>
 						<Dropdown placement='bottom-end'>
 							<DropdownTrigger>
 								<Avatar