Created Card Sections

components/button.tsx

@@ -1,30 +1,48 @@
 import clsx from 'clsx'
 
 interface buttonProps {
-  label: string
+  label?: string
   onClick?: () => void
-  variant?: 'primary' | 'secondary'
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline'
+  icon?: React.ReactNode
+  className?: string
+  disabled?: boolean
+  ref?: React.ForwardedRef<HTMLButtonElement>
 }
 
 export const Button = ({
   label,
   onClick,
   variant = 'primary',
+  icon,
+  className,
+  disabled,
+  ref,
+  ...props
 }: buttonProps) => {
-  const cls = {
-    primary: 'bg-primary text-white',
-    secondary: 'text-black hover:bg-zinc-100',
+  const variantCls = {
+    primary: 'text-white bg-primary hover:opacity-75',
+    secondary: 'text-black bg-zinc-100 hover:opacity-75',
+    ghost: 'text-black hover:bg-zinc-100 hover:opacity-75',
+    outline:
+      'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
   }[variant]
 
   return (
     <button
+      ref={ref}
       onClick={onClick}
+      disabled={disabled}
       className={clsx(
-        'h-12 px-5 flex items-center justify-center text-base font-medium text-nowrap rounded-full hover:opacity-75 transition-all duration-200',
-        cls
+        'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap rounded-full transition-all duration-200 disabled:opacity-50',
+        !disabled && 'group',
+        variantCls,
+        className
       )}
+      {...props}
     >
       {label}
+      {icon}
     </button>
   )
 }

components/card.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+interface cardProps {
+  link: string
+  imageUrl: string
+  title: string
+  description: string
+}
+
+export const Card = ({ link, imageUrl, title, description }: cardProps) => (
+  <Link
+    href={link}
+    className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 bg-white rounded-xl border border-gray-200 hover:shadow-card transition-all duration-200"
+  >
+    <Image
+      alt={title}
+      src={imageUrl}
+      width={64}
+      height={64}
+      className="w-10 xs:w-12 sm:w-16 h-10 xs:h-12 sm:h-16"
+    />
+
+    <div className="flex flex-col justify-start items-start gap-2 sm:gap-3">
+      <h2 className="text-black text-md xs:text-lg sm:text-xl font-bold">
+        {title}
+      </h2>
+      <p className="text-zinc-700 text-opacity-60 text-sm font-medium line-clamp-2">
+        {description}
+      </p>
+    </div>
+  </Link>
+)

components/carousel.tsx

@@ -0,0 +1,282 @@
+'use client'
+
+import * as React from 'react'
+import clsx from 'clsx'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+
+import { Button } from '@/components/button'
+
+import ArrowLeftIcon from '@/public/arrow-left.svg'
+import ArrowRightIcon from '@/public/arrow-right.svg'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+const useCarousel = () => {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
+
+      return () => {
+        api?.off('select', onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={clsx('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={clsx(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={clsx(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      icon = (
+        <ArrowLeftIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
+      ),
+      ...props
+    },
+    ref
+  ) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        className={clsx(
+          'absolute w-9 sm:w-11 h-9 sm:h-11 !p-0 rounded-full',
+          orientation === 'horizontal'
+            ? 'left-4 xs:hover:left-3 sm:-left-2 sm:hover:-left-3 md:-left-3 md:hover:-left-4 top-[90%] sm:top-[43%] -translate-y-[90%] sm:-translate-y-[43%]'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        icon={icon}
+        {...props}
+      />
+    )
+  }
+)
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      icon = (
+        <ArrowRightIcon className="stroke-zinc-400 sm:group-hover:stroke-primary" />
+      ),
+      ...props
+    },
+    ref
+  ) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        className={clsx(
+          'absolute w-9 sm:w-11 h-9 sm:h-11 !p-0 rounded-full',
+          orientation === 'horizontal'
+            ? 'right-4 xs:hover:right-3 sm:-right-2 sm:hover:-right-3 md:-right-3 md:hover:-right-4 top-[90%] sm:top-[43%] -translate-y-[90%] sm:-translate-y-[43%]'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        icon={icon}
+        {...props}
+      />
+    )
+  }
+)
+CarouselNext.displayName = 'CarouselNext'
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

components/footer.tsx

@@ -1,6 +1,6 @@
 export const Footer = () => (
   // TODO: remove dummy height min-h-[600px]
   <footer className="w-full min-h-[600px] bg-gray-100">
-    <div className="w-full max-w-7xl mx-auto">Footer</div>
+    <div className="w-full max-w-[1400px] mx-auto">Footer</div>
   </footer>
 )

components/header.tsx

@@ -4,11 +4,11 @@ import Image from 'next/image'
 import { Searchbar } from '@/components/search-bar'
 import { Button } from '@/components/button'
 import { Navbar } from '@/components/navbar'
-import { MobileNav } from '@/components/MobileNav'
+import { MobileNav } from '@/components/mobile-nav'
 
 export const Header = () => (
-  <header className="w-full h-36 fixed top-0 shadow-header px-4 pt-4 sm:pt-6 bg-white">
-    <div className="w-full max-w-7xl mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
+  <header className="w-full h-36 fixed top-0 shadow-header px-4 sm:px-6 pt-4 sm:pt-6 bg-white z-10">
+    <div className="w-full max-w-[1400px] mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
       <div className="w-full flex items-center justify-between">
         <Link href="/" className="overflow-hidden">
           <Image
@@ -23,7 +23,7 @@ export const Header = () => (
         <Searchbar className="hidden sm:flex" />
 
         <div className="flex items-center justify-center gap-2">
-          <Button label="Login" variant="secondary" />
+          <Button label="Login" variant="ghost" />
           <Button label="Sign up" />
         </div>
       </div>

components/section-wrapper.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/button'
+
+import AngleRightIcon from '@/public/angle-right.svg'
+
+interface sectionWraperProps {
+  title: string
+  showAllButton?: boolean
+  children: React.ReactNode
+  childrenClass?: string
+}
+
+export const SectionWrapper = ({
+  title,
+  showAllButton,
+  children,
+  childrenClass,
+}: sectionWraperProps) => (
+  <section className="w-full flex flex-col px-0 xs:px-2 sm:px-4 md:px-6 py-0 sm:py-2 md:py-4 bg-white rounded-3xl">
+    <div className="flex items-center justify-between px-4 py-4 sm:py-6 gap-2">
+      <h1 className={'text-black text-xl sm:text-3xl font-bold'}>{title}</h1>
+      {showAllButton && (
+        <Button
+          label="All"
+          variant="secondary"
+          icon={<AngleRightIcon />}
+          className="hidden sm:flex"
+        />
+      )}
+    </div>
+    <div className={childrenClass}>{children}</div>
+  </section>
+)