Merge pull request #10 from yun-cheng/feat/home-page-pricing-card-ui

feat(HomePage): add PricingCard UI

src/components/PricingCard/PricingCard.tsx

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardFooter } from 'components/ui/Card'
+import Divider from 'components/ui/Divider'
+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'
+
+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]' />
+					<PriceCardSlider className='mt-6 sm:hidden' />
+					<PricingCardPrice className='mt-[30px] sm:mt-0' />
+				</div>
+				<PriceCardSlider className='mt-2 hidden sm:block' />
+				<PricingCardSwitch className='-mr-[13px] mt-[22px] sm:mr-[17px] sm:mt-10' />
+			</CardContent>
+			<Divider />
+			<CardFooter className='px-0 pb-8 pt-6 sm:pb-[33px] sm:pl-[47px] sm:pr-[44px] sm:pt-8'>
+				<PricingCardFooterContent />
+			</CardFooter>
+		</Card>
+	)
+)
+
+export default PricingCard

src/components/PricingCard/PricingCardFooterContent.tsx

@@ -0,0 +1,41 @@
+import Button from 'components/ui/Button'
+import { forwardRef, type HTMLAttributes } from 'react'
+import cn from 'utils/cn'
+import CheckIcon from '../../icons/Check.svg?react'
+
+const PricingCardFooterContent = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			'w-full',
+			'-translate-x-0.5 sm:translate-x-0',
+			'flex flex-col items-center justify-between gap-[33px] sm:flex-row sm:gap-0',
+			className
+		)}
+		{...props}
+	>
+		<div className='flex flex-col items-center gap-[11px] sm:items-start'>
+			{['Unlimited websites', '100% data ownership', 'Email reports'].map(
+				text => (
+					<span
+						key={text}
+						className={cn('translate-y-px', 'flex items-center gap-[15px]')}
+					>
+						<CheckIcon />
+						{text}
+					</span>
+				)
+			)}
+		</div>
+		<Button>
+			<span className={cn('translate-y-px', 'flex justify-center')}>
+				Start my trial
+			</span>
+		</Button>
+	</div>
+))
+
+export default PricingCardFooterContent

src/components/PricingCard/PricingCardPageViews.tsx

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import cn from 'utils/cn'
+
+const PricingCardPageViews = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			'font-extrabold tracking-[1.7px] sm:text-[14px] sm:tracking-[2px]',
+			className
+		)}
+		{...props}
+	>
+		100K PAGEVIEWS
+	</div>
+))
+
+export default PricingCardPageViews

src/components/PricingCard/PricingCardPrice.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import cn from 'utils/cn'
+
+const PricingCardPrice = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={className} {...props}>
+		<div
+			className={cn('-translate-x-px', 'flex items-center gap-[10px] sm:gap-2')}
+		>
+			<span className='text-[32px] font-extrabold leading-none -tracking-[.8px] text-dark-desaturated-blue sm:text-[40px] sm:-tracking-[1px]'>
+				$16.00
+			</span>
+			<span
+				className={cn(
+					'translate-y-px sm:translate-y-0',
+					'text-[14px] sm:text-[16px]'
+				)}
+			>
+				/ month
+			</span>
+		</div>
+		<div
+			className={cn(
+				'mt-[2px] flex justify-end sm:mt-[7px]',
+				'whitespace-pre-wrap text-[10px] tracking-[.2px] sm:text-[14px] sm:-tracking-[.4px]'
+			)}
+		>
+			{`or ~32 CRO `}
+			<span className='-translate-x-px sm:translate-x-0'>/ month</span>
+		</div>
+	</div>
+))
+
+export default PricingCardPrice

src/components/PricingCard/PricingCardSlider.tsx

@@ -0,0 +1,14 @@
+import { Slider } from 'components/ui/Slider'
+import { forwardRef, type HTMLAttributes } from 'react'
+import cn from 'utils/cn'
+
+const PriceCardSlider = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn('w-full', className)} {...props}>
+		<Slider defaultValue={[2]} max={4} />
+	</div>
+))
+
+export default PriceCardSlider

src/components/PricingCard/PricingCardSwitch.tsx

@@ -0,0 +1,34 @@
+import { Switch } from 'components/ui/Switch'
+import { forwardRef, type HTMLAttributes } from 'react'
+import cn from 'utils/cn'
+
+const PricingCardSwitch = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn('flex items-center justify-end', className)}
+		{...props}
+	>
+		<div className='sm:-translate-y-px'>Monthly Billing</div>
+		<Switch className='ml-[13px] mr-3 sm:ml-[17px] sm:mr-4' />
+		<div className={cn('sm:-translate-y-px', 'mr-[5px] sm:mr-[9px]')}>
+			Yearly Billing
+		</div>
+		<div
+			className={cn(
+				'-translate-y-px',
+				'flex h-[19px] w-[42px] items-center justify-center rounded-lg bg-light-grayish-red sm:w-20',
+				'text-[10px] font-extrabold text-light-red'
+			)}
+		>
+			<div className='-translate-x-px'>
+				<span className='hidden sm:block'>25% discount</span>
+				<span className='block sm:hidden'>-25%</span>
+			</div>
+		</div>
+	</div>
+))
+
+export default PricingCardSwitch

src/pages/HomePage.tsx

@@ -1,18 +1,20 @@
 import Header from 'components/Header'
+import PricingCard from 'components/PricingCard/PricingCard'
 import type { ReactElement } from 'react'
 import cn from 'utils/cn'
 
 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 />
+				<PricingCard className='mt-8 sm:mt-[54px]' />
 			</div>
 		</div>
 	)