Feat[THKV-148]: 랜딩페이지 작업

next.config.mjs

@@ -19,15 +19,6 @@ const nextConfig = {
       },
     ];
   },
-  redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/main',
-        permanent: true,
-      },
-    ];
-  },
 };
 
 export default nextConfig;

package.json

@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@hookform/resolvers": "^3.9.0",
     "@tanstack/react-query": "^5.54.1",
     "@tanstack/react-query-devtools": "^5.54.1",
@@ -26,6 +27,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "framer-motion": "^12.5.0",
     "next": "14.2.6",
     "nookies": "^2.5.2",
     "qrcode.react": "^4.2.0",
@@ -34,6 +36,7 @@
     "react-datepicker": "^7.4.0",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
+    "react-scroll": "^1.9.3",
     "tailwind-merge": "^2.5.2",
     "xlsx": "^0.18.5",
     "zod": "^3.23.8",
@@ -44,6 +47,7 @@
     "@types/react": "^18",
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18",
+    "@types/react-scroll": "^1.8.10",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8",

src/app/page.tsx

@@ -1,3 +1,25 @@
+import FloatingTopButton from '@/components/feature/Landing/_components/FloatingTopButton';
+import FifthContent from '@/components/feature/Landing/FifthContent';
+import FirstContent from '@/components/feature/Landing/FirstContent';
+import FourthContent from '@/components/feature/Landing/FourthContent';
+import LandingFooter from '@/components/feature/Landing/LandingFooter';
+import LandingHeader from '@/components/feature/Landing/LandingHeader';
+import SecondContent from '@/components/feature/Landing/SecondContent';
+import SixthContent from '@/components/feature/Landing/SixthContent';
+import ThirdContent from '@/components/feature/Landing/ThirdContent';
+
 export default function Home() {
-  return <></>;
+  return (
+    <div className='flex flex-col items-center'>
+      <FloatingTopButton />
+      <LandingHeader />
+      <FirstContent />
+      <SecondContent />
+      <ThirdContent />
+      <FourthContent />
+      <FifthContent />
+      <SixthContent />
+      <LandingFooter />
+    </div>
+  );
 }

src/components/common/Button/Button.variant.tsx

@@ -15,6 +15,12 @@ export const buttonVariants = cva(
         outline:
           'bg-white-100 text-black-100 border border-grey-100 hover:bg-grey-100 active:bg-grey-200 disabled:bg-white-100 disabled:text-grey-200 disabled:border-grey-100',
         soft: 'bg-green-50 text-black-100 hover:bg-green-100 active:bg-green-200',
+        landingPrimary:
+          'bg-green-600 text-white-100 hover:bg-green-700 active:bg-green-800 ',
+        landingOutline:
+          'bg-white-100 text-green-500 border border-green-500 hover:bg-green-500 hover:text-white-100 active:bg-green-600 active:text-white-100',
+        landingPrimaryCircle:
+          'bg-green-500 text-white-100 hover:bg-green-600 active:bg-green-700 disabled:bg-grey-200',
         pagination: '',
         default: '',
       },
@@ -29,6 +35,7 @@ export const buttonVariants = cva(
         sm: 'h-12',
         md: 'h-14',
         lg: 'h-16',
+        xl: 'h-[72px]',
       },
       width: {
         fit: 'w-fit px-4',

src/components/common/Icon/assets/ArrowRight.tsx

@@ -0,0 +1,31 @@
+import { SVGProps } from 'react';
+
+const ArrowRight = ({
+  width,
+  height,
+  color,
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 32 32'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      {...props}
+    >
+      <path
+        d='M18 6L28 16M28 16L18 26M28 16H4'
+        stroke={color}
+        strokeWidth='3'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default ArrowRight;

src/components/common/Icon/assets/ArrowUp.tsx

@@ -10,15 +10,15 @@ const Arrowup = ({
     <svg
       width={width}
       height={height}
-      viewBox='0 0 20 20'
+      viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
         fillRule='evenodd'
         clipRule='evenodd'
-        d='M9.46967 6.47431C9.76256 6.18142 10.2374 6.18142 10.5303 6.47431L14.7803 10.7243C15.0732 11.0172 15.0732 11.4921 14.7803 11.785C14.4874 12.0779 14.0126 12.0779 13.7197 11.785L10 8.0653L6.28033 11.785C5.98744 12.0779 5.51256 12.0779 5.21967 11.785C4.92678 11.4921 4.92678 11.0172 5.21967 10.7243L9.46967 6.47431Z'
+        d='M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z'
         fill={color}
       />
     </svg>

src/components/common/Icon/assets/ChartPie.tsx

@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+
+const ChartPie = ({
+  width,
+  height,
+  color,
+  ...props
+}: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 80 80'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M35 20C21.1929 20 10 31.1929 10 45C10 58.8071 21.1929 70 35 70C48.8071 70 60 58.8071 60 45H35V20Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M45 35H70C70 21.1929 58.8071 10 45 10V35Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default ChartPie;

src/components/common/Icon/assets/Squares2x2.tsx

@@ -0,0 +1,50 @@
+import { SVGProps } from 'react';
+
+const Squares2x2 = ({
+  width,
+  height,
+  color,
+  ...props
+}: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox='0 0 80 80'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M12.5 20C12.5 15.8579 15.8579 12.5 20 12.5H27.5C31.6421 12.5 35 15.8579 35 20V27.5C35 31.6421 31.6421 35 27.5 35H20C15.8579 35 12.5 31.6421 12.5 27.5V20Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M12.5 52.5C12.5 48.3579 15.8579 45 20 45H27.5C31.6421 45 35 48.3579 35 52.5V60C35 64.1421 31.6421 67.5 27.5 67.5H20C15.8579 67.5 12.5 64.1421 12.5 60V52.5Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M45 20C45 15.8579 48.3579 12.5 52.5 12.5H60C64.1421 12.5 67.5 15.8579 67.5 20V27.5C67.5 31.6421 64.1421 35 60 35H52.5C48.3579 35 45 31.6421 45 27.5V20Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M45 52.5C45 48.3579 48.3579 45 52.5 45H60C64.1421 45 67.5 48.3579 67.5 52.5V60C67.5 64.1421 64.1421 67.5 60 67.5H52.5C48.3579 67.5 45 64.1421 45 60V52.5Z'
+        stroke={color}
+        strokeWidth='6'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default Squares2x2;