feat: styles updates

apps/common/components/AppCard.tsx

@@ -16,12 +16,12 @@ export function AppCard(props: TAppCardProps): ReactElement {
 				href={props.app.appURI ?? ''}
 				target={(props.app.appURI || '').startsWith('/') ? '' : '_blank'}
 				className={
-					'bg-grey-900 group relative hidden border border-gray-500/50 p-6 hover:bg-gray-600/40 md:block'
+					'bg-grey-900 group relative hidden rounded-lg border border-gray-700/50 p-6 hover:bg-gray-600/40 md:block'
 				}>
 				<div className={'mb-10'}>
 					<div
 						className={
-							'absolute right-2 top-2 hidden size-10 items-center justify-center bg-gray-900 group-hover:flex'
+							'absolute right-2 top-2 hidden size-10 items-center justify-center rounded-lg bg-gray-900 group-hover:flex'
 						}>
 						<IconShare className={'size-[10px]'} />
 					</div>

apps/common/components/AppsCarousel.tsx

@@ -9,17 +9,17 @@ export const AppsCarousel = forwardRef((props: {apps: TApp[]}, ref: ForwardedRef
 		<section className={'absolute left-0 -mx-1 w-full'}>
 			<div
 				className={
-					'pointer-events-none absolute left-0 top-0 z-30 h-[376px] w-1/6 bg-gradient-to-r from-gray-900 to-transparent md:h-full'
+					'pointer-events-none absolute left-0 top-0 z-30 h-[272px] w-1/6 bg-gradient-to-r from-gray-900 to-transparent md:h-full'
 				}
 			/>
 			<div
 				className={
-					'pointer-events-none absolute right-0 top-0 z-30 h-[376px] w-1/5 bg-gradient-to-l from-gray-900 to-transparent md:h-full'
+					'pointer-events-none absolute right-0 top-0 z-30 h-[272px] w-1/5 bg-gradient-to-l from-gray-900 to-transparent md:h-full'
 				}
 			/>
 			<div
 				ref={ref}
-				className={'flex gap-x-6 overflow-x-auto pb-1 pl-7 pr-3 scrollbar-none md:pl-28 lg:pl-[148px]'}>
+				className={'flex gap-x-8 overflow-x-auto pb-1 pl-[38px] scrollbar-none max-sm:pr-6'}>
 				{props.apps.map((app, i) => (
 					<FeaturedApp
 						key={app.name + i}

apps/common/components/CategorySection.tsx

@@ -18,12 +18,12 @@ export function CategorySection(props: TAppSectionProps): ReactElement {
 				<div className={'text-lg font-bold text-white'}>{props.title}</div>
 				<button
 					onClick={props.onExpandClick}
-					className={'flex px-4 py-2 outline !outline-1 outline-white hover:!outline-[3px]'}>
+					className={'flex rounded-[4px] px-4 py-2 outline !outline-1 outline-white hover:!outline-[3px]'}>
 					<span className={'mr-1 text-white'}>{'View all'}</span>
 					<IconChevron className={'size-6 -rotate-90 text-white'} />
 				</button>
 			</div>
-			<div className={'flex grid-rows-1 flex-col gap-6 md:grid md:grid-cols-2 lg:grid-cols-4'}>
+			<div className={'flex grid-rows-1 flex-col gap-4 md:grid md:grid-cols-2 lg:grid-cols-4'}>
 				{props.apps.slice(0, 4).map((app, i) => (
 					<AppCard
 						key={app.name + i}

apps/common/components/Cutaway.tsx

@@ -15,12 +15,14 @@ export function Cutaway(props: TCutawayProps): ReactElement {
 		<Link
 			href={props.link}
 			target={'_blank'}
-			className={'relative flex items-center justify-between bg-gray-600/20 p-6 hover:bg-gray-600/40'}>
+			className={
+				'relative flex w-full items-center justify-between rounded-lg bg-gray-600/20 p-6 hover:bg-gray-600/40'
+			}>
 			<div className={'flex flex-col md:flex-row'}>
 				<div className={'flex size-20 items-center justify-center'}>{props.icon}</div>
 				<div className={'md:ml-6'}>
 					<p className={'mb-2 text-2xl font-bold text-gray-300'}>{props.title}</p>
-					<p className={'text-base text-gray-400'}>{props.description}</p>
+					<p className={'max-w-[240px] text-base text-gray-400'}>{props.description}</p>
 				</div>
 			</div>
 			<div className={'absolute right-7 top-7 md:static'}>

apps/common/components/FeaturedApp.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import {motion} from 'framer-motion';
 import {cl} from '@builtbymom/web3/utils';
-import {IconShare} from '@common/icons/IconShare';
 
 import type {ReactElement} from 'react';
 import type {TApp} from '@common/types/category';
@@ -12,26 +12,31 @@ export function FeaturedApp(props: {app: TApp}): ReactElement {
 			href={props.app.appURI}
 			target={'_blank'}
 			className={cl(
-				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end px-6 py-10 z-20 overflow-hidden outline outline-1 outline-gray-500/50 md:h-[520px] md:min-w-[384px]'
+				'group relative flex cursor-pointer flex-col justify-end px-6 py-10 rounded-lg z-20 overflow-hidden outline outline-1 outline-gray-700/50 h-[272px] min-w-[272px]'
 			)}>
-			<Image
-				src={props.app.logoURI}
-				alt={props.app.name}
-				width={1400}
-				height={2000}
+			<motion.div
+				className={'absolute inset-0 bottom-[120px] md:bottom-0'}
+				initial={{y: 0}}
+				whileHover={{y: -50}}
+				transition={{duration: 0.3}}>
+				<Image
+					src={props.app.logoURI}
+					alt={props.app.name}
+					priority={true}
+					width={1400}
+					height={2000}
+					className={'right-0 top-0 size-full bg-center object-cover transition-all duration-200'}
+				/>
+			</motion.div>
+
+			<motion.div
 				className={
-					'absolute right-0 top-0 size-full bg-center object-cover transition-all duration-200 group-hover:scale-105'
+					'pointer-events-none absolute bottom-[120px] left-0 z-20 h-[120px] w-full bg-gray-800 p-6 text-white transition-all md:bottom-0 md:group-hover:bottom-[120px]'
 				}
-			/>
-			<div
-				className={
-					'absolute right-2 top-2 hidden size-10 items-center justify-center bg-gray-900 transition-all group-hover:flex'
-				}>
-				<IconShare className={'size-[10px]'} />
-			</div>
-			<div className={'absolute left-0 top-0 size-full bg-gradient-to-b from-transparent to-gray-900'} />
-			<p className={'z-20 text-xl font-bold text-white'}>{props.app.name}</p>
-			<p className={'z-20 text-gray-400 group-hover:block md:hidden'}>{props.app.description}</p>
+				initial={{y: '100%'}}
+				transition={{duration: 0.2}}>
+				{props.app.description}
+			</motion.div>
 		</Link>
 	);
 }

apps/common/components/MobileNavbar.tsx

@@ -43,7 +43,7 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 				))}
 			</div>
 
-			<div className={'w-full border-t border-gray-500 p-6'}>
+			<div className={'w-full border-t border-gray-700 p-6'}>
 				<div className={'flex w-full justify-between'}>
 					{LANDING_SIDEBAR_LINKS.slice(0, 5).map(link => (
 						<Link

apps/common/components/MobileTopNav.tsx

@@ -2,17 +2,20 @@ import {type ReactElement, useCallback} from 'react';
 import {useRouter} from 'next/navigation';
 import {useSearch} from '@common/contexts/useSearch';
 import {IconBurger} from '@common/icons/IconBurger';
+import {IconCross} from '@common/icons/IconCross';
 import {IconSearch} from '@common/icons/IconSearch';
 import {LogoYearn} from '@common/icons/LogoYearn';
 
 import {SearchBar} from './SearchBar';
 
 export function MobileTopNav({
 	isSearchOpen,
+	isNavbarOpen,
 	set_isSearchOpen,
 	set_isNavbarOpen
 }: {
 	isSearchOpen: boolean;
+	isNavbarOpen: boolean;
 	set_isSearchOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	set_isNavbarOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }): ReactElement {
@@ -28,12 +31,12 @@ export function MobileTopNav({
 
 	return (
 		<div className={'z-50 bg-gray-900'}>
-			<div className={'flex w-full justify-between bg-gray-900 p-6'}>
+			<div className={'flex w-full items-center justify-between bg-gray-900 p-6'}>
 				<div className={'flex items-center'}>
 					<button
-						className={'mr-4'}
+						className={'mr-4 flex size-6 items-center justify-center'}
 						onClick={() => set_isNavbarOpen(prev => !prev)}>
-						<IconBurger />
+						{isNavbarOpen ? <IconCross /> : <IconBurger />}
 					</button>
 					<button
 						onClick={() => {
@@ -47,21 +50,21 @@ export function MobileTopNav({
 						/>
 					</button>
 				</div>
-				<div>
-					<button
-						onClick={() => {
-							set_isNavbarOpen(false);
-							set_isSearchOpen(prev => !prev);
-						}}>
-						<IconSearch />
-					</button>
-				</div>
+				<button
+					onClick={() => {
+						set_isNavbarOpen(false);
+						set_isSearchOpen(prev => !prev);
+					}}>
+					<IconSearch />
+				</button>
 			</div>
 
 			{isSearchOpen && (
-				<div className={'!w-full bg-gray-900 px-6 pb-6'}>
+				<div className={'!w-full bg-gray-900 pb-6 pl-8 pr-6'}>
 					<SearchBar
-						className={'!max-w-none !border-0 !border-white !bg-gray-500 text-white '}
+						className={
+							'!max-w-none !rounded-lg !border-0 !border-none !bg-gray-700 text-white !outline-none '
+						}
 						searchValue={configuration.searchValue}
 						onSearch={(value: string) => dispatch({searchValue: value})}
 						searchPlaceholder={'Search Apps'}

apps/common/components/Pagination.tsx

@@ -25,15 +25,15 @@ export function Pagination(props: TProps): ReactElement {
 					role={'button'}
 					href={'#'}
 					className={
-						'border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium'
+						'hover:bg-gray-50 relative inline-flex items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-500'
 					}>
 					{'Previous'}
 				</a>
 				<a
 					role={'button'}
 					href={'#'}
 					className={
-						'border-gray-300 text-gray-700 hover:bg-gray-50 relative ml-3 inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium'
+						'hover:bg-gray-50 relative ml-3 inline-flex items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-500'
 					}>
 					{'Next'}
 				</a>

apps/common/components/PromoPoster.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import {IconShare} from '@common/icons/IconShare';
+
+import type {ReactElement} from 'react';
+
+export function PromoPoster(): ReactElement {
+	return (
+		<Link
+			href={'/'}
+			className={
+				'border-1 relative flex flex-col rounded-lg border border-gray-600/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] p-6 hover:from-[#1A1A1A] hover:to-[#262626]'
+			}>
+			<div className={'mb-4 flex w-full justify-start text-[40px] font-bold uppercase leading-[40px] text-white'}>
+				{'stack'}
+				<br /> {'with yearn'}
+			</div>
+
+			<div className={'absolute right-2 top-2 flex size-10 items-center justify-center rounded-lg'}>
+				<IconShare className={'size-[10px]'} />
+			</div>
+
+			<div className={'max-w-[610px]'}>
+				<p className={'text-base text-gray-400'}>
+					{
+						'Yearn is a decentralized suite of products helping individuals, DAOs, and other protocols earn yield on their digital assets.'
+					}
+				</p>
+			</div>
+		</Link>
+	);
+}

apps/common/components/SearchBar.tsx

@@ -49,7 +49,7 @@ export function SearchBar(props: TSearchBar): ReactElement {
 						onClick={() => props.onSearchClick?.()}
 						className={cl(props.iconClassName, 'absolute right-0 text-neutral-400')}>
 						{props.shouldSearchByClick && props.searchValue ? (
-							<div className={'rounded-md border border-gray-700 p-[6px]'}>
+							<div className={'rounded-md border border-gray-500 p-[6px]'}>
 								<IconEnter className={'size-3'} />
 							</div>
 						) : (

apps/common/components/Sidebar.tsx

@@ -6,6 +6,7 @@ import {useSearch} from '@common/contexts/useSearch';
 import {LogoYearn} from '@common/icons/LogoYearn';
 import {LANDING_SIDEBAR_LINKS} from '@common/utils/constants';
 
+import {PromoPoster} from './PromoPoster';
 import {SearchBar} from './SearchBar';
 
 type TSidebarProps = {
@@ -29,20 +30,20 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 	return (
 		<div
 			className={
-				'flex h-full w-72 flex-col justify-between border border-gray-500/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] py-6 text-white'
+				'flex h-full w-72 flex-col justify-between rounded-lg border border-gray-700/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] py-6 text-white'
 			}>
 			<div>
 				<div className={'px-4'}>
 					<LogoYearn
-						className={'mb-10 size-10 pl-[10px]'}
+						className={'mb-6 size-10 pl-[10px]'}
 						back={'text-blue-500'}
 						front={'text-white'}
 					/>
+					<div className={'mb-6'}>
+						<PromoPoster />
+					</div>
 					<SearchBar
-						className={cl(
-							'!w-full !border-x-0 !border-t-0 !border-white !bg-gray-500 ',
-							configuration.searchValue ? '!border-b-2' : '!border-b-0'
-						)}
+						className={cl('!w-full !border-0 rounded-lg !border-white !bg-gray-700')}
 						searchPlaceholder={'Search Apps'}
 						searchValue={configuration.searchValue}
 						onSearch={(value: string) => {
@@ -52,11 +53,11 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 						onSearchClick={onSearchClick}
 					/>
 				</div>
-				<div className={'mt-8 flex flex-col'}>
+				<div className={'mt-6 flex flex-col'}>
 					{props.tabs.map(tab => (
 						<Link
 							className={cl(
-								'py-2 px-6 text-base hover:bg-gray-600/40',
+								'py-2 px-[28px] text-base hover:bg-gray-600/40',
 								currentTab === tab.route ? 'text-white font-bold' : 'text-gray-400'
 							)}
 							href={tab.route === '/' ? tab.route : `/home/${tab.route}`}

apps/common/icons/IconCross.tsx

@@ -0,0 +1,42 @@
+import type {ReactElement} from 'react';
+
+export function IconCross(props: React.SVGProps<SVGSVGElement>): ReactElement {
+	return (
+		<svg
+			{...props}
+			width={'14'}
+			height={'14'}
+			viewBox={'0 0 14 14'}
+			fill={'none'}
+			xmlns={'http://www.w3.org/2000/svg'}>
+			<path
+				d={'M1 1L13 13'}
+				stroke={'white'}
+				strokeWidth={'2'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+			<path
+				d={'M1 13L13 1'}
+				stroke={'white'}
+				strokeWidth={'2'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+			<path
+				d={'M1 1L13 13'}
+				stroke={'white'}
+				strokeWidth={'2'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+			<path
+				d={'M1 13L13 1'}
+				stroke={'white'}
+				strokeWidth={'2'}
+				strokeLinecap={'round'}
+				strokeLinejoin={'round'}
+			/>
+		</svg>
+	);
+}

apps/common/utils/constants.ts

@@ -143,13 +143,6 @@ export const INTEGRATIONS_APPS: TApp[] = [
 ];
 
 export const FEATURED_APPS = [
-	{
-		name: 'Juiced',
-		description: 'Product description example text product description example text',
-		logoURI: '/juiced-bg.png',
-		appURI: 'https://gimme.mom/'
-	},
-
 	{
 		name: 'Juiced',
 		description: 'Product description example text product description example text',

pages/_app.tsx

@@ -56,9 +56,10 @@ const WithLayout = memo(function WithLayout(
 				<div
 					id={'app'}
 					className={'mb-0 flex min-h-screen justify-center bg-gray-900 font-aeonik'}>
-					<div className={'flex w-full max-w-[1480px] justify-start'}>
+					<div className={'flex w-full max-w-[1230px] justify-start'}>
 						<motion.nav className={'fixed z-50 w-full md:hidden'}>
 							<MobileTopNav
+								isNavbarOpen={isNavbarOpen}
 								isSearchOpen={isSearchOpen}
 								set_isSearchOpen={set_isSearchOpen}
 								set_isNavbarOpen={set_isNavbarOpen}