feat(PricingCard): enhance RWD layout

src/components/PricingCard/PricingCard.tsx

@@ -1,15 +1,20 @@
 import { Card, CardContent, CardFooter } from 'components/ui/Card'
 import Divider from 'components/ui/Divider'
-import type { ReactElement } from 'react'
+import { forwardRef, type HTMLAttributes } from 'react'
+import cn from 'utils/cn'
 import PricingCardFooterContent from './PricingCardFooterContent'
 import PricingCardPageViews from './PricingCardPageViews'
 import PricingCardPrice from './PricingCardPrice'
 import PriceCardSlider from './PricingCardSlider'
 import PricingCardSwitch from './PricingCardSwitch'
 
-export default function PricingCard(): ReactElement {
-	return (
-		<Card className='mx-auto max-w-[540px]'>
+const PricingCard = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<Card
+			ref={ref}
+			className={cn('mx-auto max-w-[327px] sm:max-w-[540px]', className)}
+			{...props}
+		>
 			<CardContent className='px-6 pb-[38px] pt-[35px] sm:p-12 sm:pb-10'>
 				<div className='flex flex-col items-center sm:flex-row sm:items-start sm:justify-between'>
 					<PricingCardPageViews className='sm:mt-3 sm:-translate-x-[3px]' />
@@ -25,4 +30,6 @@ export default function PricingCard(): ReactElement {
 			</CardFooter>
 		</Card>
 	)
-}
+)
+
+export default PricingCard

src/pages/HomePage.tsx

@@ -7,16 +7,14 @@ export default function HomePage(): ReactElement {
 	return (
 		<div
 			className={cn(
-				'min-h-screen px-6',
+				'min-h-screen',
 				'bg-background bg-[length:auto_400px] bg-no-repeat sm:bg-very-pale-blue sm:bg-auto',
 				'font-semibold text-grayish-blue'
 			)}
 		>
-			<div className='pt-[57px] sm:pt-[67px]'>
+			<div className='px-6 pb-20 pt-[57px] sm:pt-[67px]'>
 				<Header />
-			</div>
-			<div className='pt-8 sm:pt-[54px]'>
-				<PricingCard />
+				<PricingCard className='mt-8 sm:mt-[54px]' />
 			</div>
 		</div>
 	)