[Design] 합불페이지에 makers 전용 디자인 추가 (#271)

* design: strongText에 makers color 배리 추가 * design: backgroundGradient에 makers 배리 추가 * design: 배경 로고 메이커스 추가 * feat: 최종결과페이지에도 반영 및 makers 임의 로고 삭제 * design: makers dark mode header logo 추가 * chore: 테스트용 코드 복원
sopt-makers · Jul 29, 2024 · 9541494 · 9541494
1 parent 7651acd
commit 9541494
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 41 deletions.
diff --git a/src/common/assets/MakersDarkLogo.tsx b/src/common/assets/MakersDarkLogo.tsx
@@ -0,0 +1,21 @@
+const MakersDarkLogo = () => {
+  return (
+    <svg width="87" height="31" viewBox="0 0 87 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_2501_966)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M63.4824 10.2185C63.4824 10.7164 63.8861 11.1199 64.3843 11.1199L64.3836 11.1193H66.1315C66.2382 11.1193 66.3243 11.2054 66.3243 11.312V12.4049C66.3243 12.5116 66.2382 12.5977 66.1315 12.5977H64.3836C63.0691 12.5977 62.0033 11.5324 62.0033 10.2185V6.4527H61.489C61.3823 6.4527 61.2962 6.36661 61.2962 6.25995V5.16704C61.2962 5.06038 61.3823 4.97429 61.489 4.97429H61.6896C61.9338 4.97429 62.1318 4.77639 62.1318 4.53224V3.08338C62.1318 2.97672 62.218 2.89062 62.3247 2.89062H63.2895C63.3963 2.89062 63.4824 2.97672 63.4824 3.08338V4.97429H66.118C66.2247 4.97429 66.3108 5.06038 66.3108 5.16704V6.25995C66.3108 6.36661 66.2247 6.4527 66.118 6.4527H63.4824V10.2185ZM-0.484375 25.5609C-0.484375 25.7164 -0.451605 25.8642 -0.392596 25.9979C-0.204643 26.4334 0.257363 26.6916 0.717655 26.6438H5.21526C5.81317 26.6438 6.29787 26.1589 6.29787 25.5609V22.2085L18.9488 11.6179C19.5338 11.1281 19.8718 10.4043 19.8717 9.6413L19.8717 3.99779C19.8717 3.0772 18.7962 2.57647 18.092 3.16924L0.437234 18.0312C-0.144506 18.5209 -0.480317 19.2426 -0.480317 20.0032V20.848C-0.483004 20.8791 -0.484375 20.9106 -0.484375 20.9424V25.5609ZM13.086 25.5644V20.0032C13.086 19.2426 13.4219 18.5209 14.0038 18.0312L31.6621 3.16924C32.3663 2.57647 33.4421 3.0772 33.4421 3.99779L33.4421 9.6413C33.4422 10.4043 33.1041 11.1281 32.519 11.6179L14.8638 26.3949C14.1589 26.9849 13.086 26.4837 13.086 25.5644ZM27.7405 26.6493C27.1424 26.6493 26.6574 26.1644 26.6574 25.5662V20.947C26.6574 20.3489 27.1424 19.8639 27.7405 19.8639H32.3597C32.9579 19.8639 33.4428 20.3489 33.4428 20.947V25.5662C33.4428 26.1644 32.9579 26.6493 32.3597 26.6493H27.7405ZM42.8877 12.5975H39.8874C38.945 12.5975 38.1806 11.8335 38.1806 10.8916V10.7676C38.1806 10.6995 38.2359 10.6442 38.3041 10.6442H39.5364C39.6046 10.6442 39.6599 10.6995 39.6599 10.7676C39.6599 10.9623 39.8174 11.1197 40.0122 11.1197H42.9604C43.2869 11.1197 43.5518 10.8549 43.5518 10.5285V10.0743C43.5518 9.8134 43.3403 9.60201 43.0793 9.60201H40.0912C38.9649 9.60201 38.0521 8.68961 38.0521 7.5639V7.08649C38.0521 5.90423 39.0112 4.94558 40.1941 4.94558H43.015C44.0564 4.94558 44.9012 5.78986 44.9012 6.83077C44.9012 6.89887 44.8459 6.95413 44.7778 6.95413H43.5055C43.4599 6.95413 43.4226 6.91687 43.4226 6.87125V6.81792C43.4226 6.6001 43.2458 6.4234 43.0279 6.4234H40.1105C39.7904 6.4234 39.5307 6.68298 39.5307 7.00297V7.47908C39.5307 7.83569 39.8199 8.12418 40.1761 8.12418H43.2317C44.2249 8.12418 45.0298 8.92864 45.0298 9.92135V10.4559C45.0298 11.6382 44.0706 12.5969 42.8877 12.5969V12.5975ZM81.8569 26.5588H84.8572L84.8579 26.5581C86.0407 26.5581 86.9999 25.5995 86.9999 24.4172V23.8826C86.9999 22.8899 86.195 22.0855 85.2018 22.0855H82.1462C81.7901 22.0855 81.5008 21.797 81.5008 21.4404V20.9642C81.5008 20.6443 81.7605 20.3847 82.0807 20.3847H84.998C85.2159 20.3847 85.3927 20.5614 85.3927 20.7792V20.8325C85.3927 20.8781 85.43 20.9154 85.4757 20.9154H86.7479C86.816 20.9154 86.8713 20.8602 86.8713 20.792C86.8713 19.7511 86.0266 18.9069 84.9851 18.9069H82.1642C80.9814 18.9069 80.0222 19.8655 80.0222 21.0478V21.5252C80.0222 22.6509 80.9351 23.5633 82.0614 23.5633H85.0488C85.3098 23.5633 85.5213 23.7747 85.5213 24.0356V24.4898C85.5213 24.8162 85.2564 25.081 84.9299 25.081H81.9817C81.7869 25.081 81.6294 24.9235 81.6294 24.7288C81.6294 24.6607 81.5741 24.6055 81.5059 24.6055H80.2736C80.2054 24.6055 80.1501 24.6607 80.1501 24.7288V24.8529C80.1501 25.7948 80.9145 26.5588 81.8569 26.5588ZM50.5744 6.45607C50.9541 6.45607 51.2624 6.76506 51.2624 7.14407V10.4569C51.2624 10.8365 50.9534 11.1449 50.5744 11.1449H47.9683C47.5886 11.1449 47.2803 10.8359 47.2803 10.4569V7.14407C47.2803 6.76442 47.5893 6.45607 47.9683 6.45607H50.5744ZM50.5744 4.97857H47.9683C46.7721 4.97857 45.8028 5.94794 45.8028 7.14407V10.4569C45.8028 11.653 46.7721 12.6224 47.9683 12.6224H50.5744C51.7705 12.6224 52.7399 11.653 52.7399 10.4569V7.14407C52.7399 5.94794 51.7705 4.97857 50.5744 4.97857ZM53.9715 4.97857H55.0526C55.1623 4.97857 55.2512 5.06747 55.2512 5.17713V5.67507C55.451 5.28091 55.8602 5.01056 56.3329 5.01056H58.705L58.7057 5.0112C59.7631 5.0112 60.6205 5.86794 60.6205 6.92457V10.7166C60.6205 11.7732 59.7631 12.63 58.7057 12.63H56.4937C55.9444 12.63 55.4706 12.3075 55.2512 11.8419V15.5756C55.2512 15.6852 55.1623 15.7741 55.0526 15.7741H53.9715C53.8618 15.7741 53.7728 15.6852 53.7728 15.5756V5.17713C53.7728 5.06747 53.8618 4.97857 53.9715 4.97857ZM55.2512 7.31984V10.3413C55.2772 10.789 55.6487 11.144 56.1033 11.144H58.4124C58.8324 11.144 59.1726 10.804 59.1726 10.3843V7.27678C59.1726 6.85708 58.8324 6.51709 58.4124 6.51709H56.1033C55.6487 6.51709 55.2772 6.87207 55.2512 7.31984ZM59.745 15.7874H58.6523C58.5458 15.7874 58.4594 15.8737 58.4594 15.9802V26.3901C58.4594 26.4966 58.5458 26.5829 58.6523 26.5829H59.745C59.8515 26.5829 59.9378 26.4966 59.9378 26.3901V23.1793H61.2754L63.8773 26.509C63.9461 26.5969 64.0514 26.6483 64.1625 26.6483H65.681C65.7754 26.6483 65.828 26.5398 65.7702 26.4653L62.7012 22.538H61.6109V22.5379H62.701L65.5096 18.9932C65.5687 18.9187 65.5154 18.8094 65.421 18.8094H63.904C63.7935 18.8094 63.6888 18.8595 63.6201 18.9463L61.4374 21.7009H59.9378V15.9802C59.9378 15.8737 59.8515 15.7874 59.745 15.7874ZM79.3668 18.9071C79.4736 18.9071 79.5597 18.9932 79.5597 19.0998L79.5591 19.0992V20.1918C79.5591 20.2984 79.4729 20.3845 79.3662 20.3845H76.7633C76.1771 20.3845 75.702 20.8592 75.702 21.445V26.3904C75.702 26.4971 75.6159 26.5831 75.5092 26.5831H74.4157C74.309 26.5831 74.2228 26.4971 74.2228 26.3904V19.0671C74.2228 18.9604 74.309 18.8744 74.4157 18.8744H75.5092C75.6159 18.8744 75.702 18.9604 75.702 19.0671V19.9028C75.8949 19.2604 76.2163 18.9071 76.9305 18.9071H79.3668ZM50.4498 20.1592V19.0664L50.4504 19.0671C50.4504 18.9604 50.5366 18.8744 50.6433 18.8744H55.593C56.4769 18.8744 57.2 19.5971 57.2 20.4804V26.3904C57.2 26.4971 57.1139 26.5831 57.0072 26.5831H55.9138C55.807 26.5831 55.7209 26.4971 55.7209 26.3904V25.5671C55.3848 26.1879 54.8115 26.5829 53.9395 26.5829H51.5165C50.6578 26.5829 49.9624 25.8873 49.9624 25.0299V23.7807C49.9624 22.9226 50.6585 22.2277 51.5165 22.2277L55.7209 21.8044V20.9692C55.7209 20.6281 55.4445 20.3519 55.1032 20.3519H50.6426C50.5359 20.3519 50.4498 20.2658 50.4498 20.1592ZM46.9673 18.7862H45.6581C45.0087 18.7862 44.43 19.0893 44.0558 19.5608C43.6995 19.09 43.135 18.7862 42.499 18.7862H41.2542C40.5302 18.7862 39.8942 19.1626 39.5316 19.7297V18.9789C39.5316 18.8722 39.4454 18.7862 39.3387 18.7862H38.245C38.1382 18.7862 38.0521 18.8722 38.0521 18.9789V26.3903C38.0521 26.4969 38.1382 26.583 38.245 26.583H39.3387C39.4454 26.583 39.5316 26.4969 39.5316 26.3903V21.0438C39.5316 20.6128 39.8814 20.2634 40.3128 20.2634H41.9364C42.3839 20.2634 42.7466 20.6257 42.7466 21.0727V26.3896C42.7466 26.4963 42.8328 26.5823 42.9395 26.5823H44.0107C44.1175 26.5823 44.2036 26.4963 44.2036 26.3896V21.0445C44.2036 20.6135 44.5534 20.2641 44.9849 20.2641H46.6085C47.056 20.2641 47.4186 20.6263 47.4186 21.0734V26.389C47.4186 26.4956 47.5048 26.5817 47.6115 26.5817H48.7278C48.8345 26.5817 48.9207 26.4956 48.9207 26.389V20.7342C48.9207 19.6578 48.0475 18.7855 46.9698 18.7855L46.9673 18.7862ZM54.4479 25.116C55.2243 25.116 55.7179 24.6156 55.7179 23.8398V23.2328L52.2138 23.5912C51.7871 23.5912 51.4407 23.809 51.4407 24.2354V24.4718C51.4407 24.8982 51.7871 25.116 52.2138 25.116H54.4479ZM65.9259 22.9198V23.2446V23.9162C65.9259 25.425 67.1489 26.6483 68.6573 26.6483H72.2884C72.3951 26.6483 72.4812 26.5621 72.4812 26.4554V25.362C72.4812 25.2552 72.3951 25.1691 72.2884 25.1691H68.9278C68.0866 25.1691 67.404 24.487 67.404 23.6449V23.2446H72.862C72.9705 23.2446 73.0579 23.1565 73.0579 23.0485V20.9981C73.0579 19.825 72.1076 18.8744 70.935 18.8744H68.0494C66.8768 18.8744 65.9265 19.825 65.9265 20.9981L65.9259 20.9974V22.9198ZM71.5795 21.7662V20.8779C71.5795 20.588 71.3443 20.3527 71.0545 20.3527H67.9286C67.6389 20.3527 67.4037 20.588 67.4037 20.8779V21.6286C67.4037 21.7045 67.4654 21.7662 67.5412 21.7662H71.5795Z"
+          fill="#FCFCFC"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2501_966">
+          <rect width="87" height="30" fill="white" transform="translate(0 0.890625)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default MakersDarkLogo;
diff --git a/src/common/components/Layout/components/Header/index.tsx b/src/common/components/Layout/components/Header/index.tsx
@@ -2,9 +2,11 @@ import { reset, track } from '@amplitude/analytics-browser';
 import { useContext } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import MakersDarkLogo from '@assets/MakersDarkLogo';
 import MakersLogo from '@assets/MakersLogo';
 import NowsoptLogo from '@assets/NowsoptLogo';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
+import { ThemeContext } from '@store/themeContext';
 
 import { MENU_ITEMS, MENU_ITEMS_MAKERS } from './contants';
 import MenuItem from './MenuItem';
@@ -18,6 +20,7 @@ const Header = () => {
   const {
     recruitingInfo: { name, isMakers },
   } = useContext(RecruitingInfoContext);
+  const { isLight } = useContext(ThemeContext);
 
   const menuItems = isMakers ? MENU_ITEMS_MAKERS : MENU_ITEMS;
 
@@ -37,7 +40,7 @@ const Header = () => {
       {isMakers != undefined && (
         <header className={container}>
           <button onClick={handleClickLogo} className={logo}>
-            {isMakers ? <MakersLogo /> : <NowsoptLogo />}
+            {isMakers ? isLight ? <MakersLogo /> : <MakersDarkLogo /> : <NowsoptLogo />}
           </button>
           <nav>
             <ul className={menuList}>

diff --git a/src/views/ResultPage/assets/IconMakersLogo.tsx b/src/views/ResultPage/assets/IconMakersLogo.tsx
@@ -0,0 +1,57 @@
+const IconMakersLogo = () => {
+  return (
+    <svg width="584" height="407" viewBox="0 0 584 407" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M233.598 388.069V292.793C233.598 279.763 239.379 267.399 249.395 259.009L553.359 4.39331C565.482 -5.76191 583.999 2.81651 584 18.5882L584.001 115.273C584.001 128.345 578.182 140.746 568.11 149.135L264.2 402.296C252.067 412.403 233.598 403.817 233.598 388.069Z"
+        fill="url(#paint0_linear_2493_8355)"
+        fillOpacity="0.1"
+      />
+      <path
+        d="M467.58 308.748C467.58 298.441 475.88 290.086 486.118 290.086H565.178C575.416 290.086 583.715 298.441 583.715 308.748L583.715 388.337C583.715 398.644 575.416 407 565.178 407H486.118C475.88 407 467.58 398.644 467.58 388.337L467.58 308.748Z"
+        fill="url(#paint1_linear_2493_8355)"
+        fillOpacity="0.1"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.57986 395.494C0.564083 393.204 3.54749e-06 390.671 3.34363e-06 388.007L0 308.883C-2.30315e-08 308.338 0.023606 307.799 0.0698558 307.266V292.793C0.0698558 279.763 5.85039 267.399 15.8642 259.009L319.767 4.39331C331.888 -5.76191 350.402 2.81651 350.402 18.5882L350.403 115.273C350.403 128.345 344.585 140.746 334.516 149.135L116.747 330.575V388.007C116.747 398.253 108.404 406.56 98.1115 406.56H20.6913C12.768 407.38 4.81521 402.955 1.57986 395.494Z"
+        fill="url(#paint2_linear_2493_8355)"
+        fillOpacity="0.1"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2493_8355"
+          x1="612.46"
+          y1="125.502"
+          x2="337.086"
+          y2="262.327"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#C7C7C7" />
+          <stop offset="1" stopColor="#242424" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2493_8355"
+          x1="593.148"
+          y1="326.168"
+          x2="507.461"
+          y2="375.249"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#C7C7C7" />
+          <stop offset="1" stopColor="#242424" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2493_8355"
+          x1="378.863"
+          y1="125.502"
+          x2="103.488"
+          y2="262.327"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#C7C7C7" />
+          <stop offset="1" stopColor="#242424" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconMakersLogo;
diff --git a/src/views/ResultPage/assets/imgMakersLogo.png b/src/views/ResultPage/assets/imgMakersLogo.png
diff --git a/src/views/ResultPage/assets/imgMakersLogo.webp b/src/views/ResultPage/assets/imgMakersLogo.webp
diff --git a/src/views/ResultPage/components/FinalResult.tsx b/src/views/ResultPage/components/FinalResult.tsx
@@ -4,9 +4,8 @@ import Title from '@components/Title';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import BigLoading from 'views/loadings/BigLoding';
 
-import { bottomAnimation, bottomImg, container, content, contentWrapper, strongText } from './style.css';
-import imgMakersLogo from '../assets/imgMakersLogo.png';
-import imgMakersLogoWebp from '../assets/imgMakersLogo.webp';
+import { bottomAnimation, bottomImg, bottomSvg, container, content, contentWrapper, strongText } from './style.css';
+import IconMakersLogo from '../assets/IconMakersLogo';
 import imgSoptLogo from '../assets/imgSoptLogo.png';
 import imgSoptLogoWebp from '../assets/imgSoptLogo.webp';
 import useGetFinalResult from '../hooks/useGetFinalResult';
@@ -23,7 +22,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
       {pass ? (
         <p className={content}>
           <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
-          <strong className={strongText}>{`축하드립니다!`}</strong>
+          <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
           <span>
             {`
               ${name}님은 ${season}기 ${soptName} ${!isMakers ? group : ''} 신입회원 모집에 최종 합격하셨습니다.
@@ -35,7 +34,10 @@ const Content = ({ pass }: { pass?: boolean }) => {
               오늘 중으로 카카오톡 단체 대화방에 초대해드릴 예정이니 참고 부탁드립니다.\n
             `}
           </span>
-          <strong className={strongText}>{`SOPT의 ${season}번째 열정이 되신 것을 축하드립니다!`}</strong>
+          <strong
+            className={
+              strongText[isMakers ? 'makers' : 'sopt']
+            }>{`SOPT의 ${season}번째 열정이 되신 것을 축하드립니다!`}</strong>
         </p>
       ) : (
         <p className={content}>
@@ -64,9 +66,6 @@ const FinalResult = () => {
 
   const { name, pass } = finalResult?.data || {};
 
-  const imgLogo = isMakers ? imgMakersLogo : imgSoptLogo;
-  const imgLogoWebp = isMakers ? imgMakersLogoWebp : imgSoptLogoWebp;
-
   useEffect(() => {
     handleSaveRecruitingInfo({
       name,
@@ -83,11 +82,17 @@ const FinalResult = () => {
       </div>
       {pass && (
         <>
-          <div className={bottomAnimation} />
-          <picture className={bottomImg}>
-            <source srcSet={imgLogoWebp} type="image/webp" />
-            <img src={imgLogo} alt="sopt-logo" />
-          </picture>
+          <div className={bottomAnimation[isMakers ? 'makers' : 'sopt']} />
+          {isMakers ? (
+            <i className={bottomSvg}>
+              <IconMakersLogo />
+            </i>
+          ) : (
+            <picture className={bottomImg}>
+              <source srcSet={imgSoptLogoWebp} type="image/webp" />
+              <img src={imgSoptLogo} alt="sopt-logo" />
+            </picture>
+          )}
         </>
       )}
     </section>

diff --git a/src/views/ResultPage/components/ScreeningResult.tsx b/src/views/ResultPage/components/ScreeningResult.tsx
@@ -6,9 +6,17 @@ import Title from '@components/Title';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 import BigLoading from 'views/loadings/BigLoding';
 
-import { bottomAnimation, bottomImg, container, content, contentWrapper, link, strongText } from './style.css';
-import imgMakersLogo from '../assets/imgMakersLogo.png';
-import imgMakersLogoWebp from '../assets/imgMakersLogo.webp';
+import {
+  bottomAnimation,
+  bottomImg,
+  bottomSvg,
+  container,
+  content,
+  contentWrapper,
+  link,
+  strongText,
+} from './style.css';
+import IconMakersLogo from '../assets/IconMakersLogo';
 import imgSoptLogo from '../assets/imgSoptLogo.png';
 import imgSoptLogoWebp from '../assets/imgSoptLogo.webp';
 import useGetScreeningResult from '../hooks/useGetScreeningResult';
@@ -47,7 +55,7 @@ const Content = ({ pass }: { pass?: boolean }) => {
       {pass ? (
         <p className={content}>
           <span>{`안녕하세요. ${season}기 ${soptName} 입니다.\n\n`}</span>
-          <strong className={strongText}>{`축하드립니다!`}</strong>
+          <strong className={strongText[isMakers ? 'makers' : 'sopt']}>{`축하드립니다!`}</strong>
           <span>
             {`
               서류 검토 결과, ${name}님은 면접 대상자로 선정되셨습니다.
@@ -107,9 +115,6 @@ const ScreeningResult = () => {
 
   if (screeningResultIsLoading) return <BigLoading />;
 
-  const imgLogo = isMakers ? imgMakersLogo : imgSoptLogo;
-  const imgLogoWebp = isMakers ? imgMakersLogoWebp : imgSoptLogoWebp;
-
   return (
     <section className={container}>
       <div className={contentWrapper}>
@@ -118,11 +123,17 @@ const ScreeningResult = () => {
       </div>
       {pass && (
         <>
-          <div className={bottomAnimation} />
-          <picture className={bottomImg}>
-            <source srcSet={imgLogoWebp} type="image/webp" />
-            <img src={imgLogo} alt="sopt-logo" />
-          </picture>
+          <div className={bottomAnimation[isMakers ? 'makers' : 'sopt']} />
+          {isMakers ? (
+            <i className={bottomSvg}>
+              <IconMakersLogo />
+            </i>
+          ) : (
+            <picture className={bottomImg}>
+              <source srcSet={imgSoptLogoWebp} type="image/webp" />
+              <img src={imgSoptLogo} alt="sopt-logo" />
+            </picture>
+          )}
         </>
       )}
     </section>

diff --git a/src/views/ResultPage/components/style.css.ts b/src/views/ResultPage/components/style.css.ts
@@ -1,4 +1,5 @@
-import { keyframes, style } from '@vanilla-extract/css';
+import { colors } from '@sopt-makers/colors';
+import { keyframes, style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
 import { Z_INDEX } from '@constants/zIndex';
@@ -33,32 +34,50 @@ export const content = style({
   zIndex: Z_INDEX.resultContent,
 });
 
-export const strongText = style({
-  color: theme.color.primary,
-});
-
-const animatedGradient = keyframes({
-  '0%': {
-    width: '40%',
-    boxShadow: `0px 100px 100px 70px ${theme.color.primary}`,
+export const strongText = styleVariants({
+  sopt: {
+    color: theme.color.primary,
   },
-
-  '100%': {
-    width: '80%',
-    boxShadow: `0px 100px 100px 100px ${theme.color.primary}`,
+  makers: {
+    color: colors.secondary,
   },
 });
 
-export const bottomAnimation = style({
+const bottomAnimationBase = style({
   position: 'absolute',
   bottom: '-100px',
   left: '50%',
   transform: 'translateX(-50%)',
   height: 100,
   borderRadius: '100%',
-  animation: `${animatedGradient} ease-in-out 3s alternate infinite`,
 });
 
+const animatedGradient = (bgColor: string) =>
+  keyframes({
+    '0%': {
+      width: '40%',
+      boxShadow: `0px 100px 100px 70px ${bgColor}`,
+    },
+
+    '100%': {
+      width: '80%',
+      boxShadow: `0px 100px 100px 100px ${bgColor}`,
+    },
+  });
+
+export const bottomAnimation = styleVariants(
+  {
+    sopt: theme.color.primary,
+    makers: '#d8d8d8',
+  },
+  (color) => [
+    bottomAnimationBase,
+    {
+      animation: `${animatedGradient(color)} ease-in-out 3s alternate infinite`,
+    },
+  ],
+);
+
 export const bottomImg = style({
   position: 'absolute',
   bottom: 0,
@@ -67,6 +86,14 @@ export const bottomImg = style({
   // height: 556,
 });
 
+export const bottomSvg = style({
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  margin: '0px 130px 140px 0px',
+  width: 584,
+});
+
 export const link = style({
   borderBottom: '1px solid currentColor',
 });