feat(fe): design icons for contest sub banner

skkuding · Feb 6, 2025 · d57ece8 · d57ece8
1 parent 805de33
commit d57ece8
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/apps/frontend/app/(client)/(main)/contest/_components/ContestSubBanner.tsx b/apps/frontend/app/(client)/(main)/contest/_components/ContestSubBanner.tsx
@@ -1,19 +1,19 @@
 import { Button } from '@/components/shadcn/button'
+import { cn } from '@/libs/utils'
 import Image from 'next/image'
 import React from 'react'
-import { FaArrowRight } from 'react-icons/fa6'
 
 export function ContestSubBanner() {
   return (
     <div className="w-full lg:w-[1440px]">
       <div
-        className="mt-[120px] flex h-[328px] w-full items-center justify-around"
+        className="relative mt-[120px] flex h-[328px] w-full items-center justify-around overflow-hidden"
         style={{
           background: 'linear-gradient(90deg, #0061FF 0%, #BACFFF 100%)'
         }}
       >
-        <div className="flex h-56 flex-col gap-5 pl-12 text-white">
-          <p className="text-[34px] font-semibold leading-[120%]">
+        <div className="z-10 flex h-56 flex-col gap-5 pl-12 text-white">
+          <p className="text-xl font-semibold leading-[120%] md:text-[34px]">
             Turn Your Ideas <br />
             into a Contest on CODEDANG!
           </p>
@@ -28,7 +28,7 @@ export function ContestSubBanner() {
             Read more
           </Button>
         </div>
-        <div>
+        <div className="z-10 pr-24">
           <Image
             src={'/banners/trophy-sub.png'}
             alt={'Trophy'}
@@ -37,7 +37,15 @@ export function ContestSubBanner() {
             priority
           />
         </div>
+
+        <BackgroundCircle className="-left-[16%] -top-2/3 h-[393px] w-[393px]" />
+        <BackgroundCircle className="right-[9%] h-[477px] w-[477px]" />
+        <BackgroundCircle className="bottom-0 right-0 h-[181px] w-[181px]" />
       </div>
     </div>
   )
 }
+
+function BackgroundCircle({ className }: { className: string }) {
+  return <div className={cn('absolute rounded-full bg-[#D4E5FF]', className)} />
+}