feat(land): 새로운 렌딩페이지 레이아웃 적용

apps/land/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@clab-platforms/design-system": "workspace:*",
-    "@clab-platforms/utils": "workspace:*",
     "@clab-platforms/icon": "workspace:*",
+    "@clab-platforms/utils": "workspace:*",
     "@tanstack/react-query": "^5.59.20",
     "next": "15.0.0-rc.1",
     "react": "19.0.0-rc-ed15d500-20241110",
@@ -22,9 +22,15 @@
     "@types/node": "^20",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.0-rc.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"

apps/land/src/app/PageLayout.tsx

@@ -18,7 +18,7 @@ export default function Page({
   return (
     <>
       {nav && <Nav />}
-      <div className={cn('m-auto pt-12', className)}>{children}</div>
+      <div className={cn('m-auto pt-6', className)}>{children}</div>
       {footer && <Footer />}
     </>
   );

apps/land/src/app/fonts.css

@@ -1,13 +1,13 @@
 @font-face {
   font-family: 'NanumSquare';
-  src: url('/font/NanumSquareR.ttf') format('truetype');
+  src: url('/fonts/NanumSquareR.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'NanumSquare';
-  src: url('/font/NanumSquareB.ttf') format('truetype');
+  src: url('/fonts/NanumSquareB.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
 }

apps/land/src/app/globals.css

@@ -21,6 +21,7 @@
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
+  overflow-x: hidden;
 }
 
 @media (min-width: 768px) {
@@ -79,3 +80,79 @@
     transform: translateX(var(--slide-end-offset, 0%));
   }
 }
+
+.scroll-fade-info {
+  opacity: 0;
+  transform: translateY(100px);
+  transition:
+    opacity 1s ease-out,
+    transform 1s ease-out;
+}
+
+.scroll-fade-info.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-fade-activity {
+  opacity: 0;
+  transform: translateY(100px);
+  transition:
+    opacity 1s ease-out,
+    transform 1s ease-out;
+}
+
+.scroll-fade-activity.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.flip-container {
+  perspective: 1000px;
+  overflow: hidden;
+  border-radius: 9999px;
+  width: 18rem;
+  height: 18rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  white-space: pre-wrap;
+  box-shadow: 0 0 20px 1px #5874ff;
+}
+
+.flip {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateY(0deg);
+  transition: transform 0.5s;
+  border-radius: 9999px;
+  display: flex;
+}
+
+.front,
+.back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+}
+
+.front {
+  background: none;
+}
+
+.back {
+  background: #5874ff;
+  transform: rotateY(180deg);
+}
+
+.flip-container:hover .flip {
+  transform: rotateY(-180deg);
+}
+

apps/land/src/app/home/components/ActivityCard.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@clab-platforms/utils';
+
+import Image from 'next/image';
+
+interface ActivityCardProps {
+  title: string;
+  image: string;
+  className?: string;
+}
+
+export default function ActivityCard({
+  title,
+  image,
+  className,
+}: ActivityCardProps) {
+  return (
+    <div
+      className={cn('lg:max-w-1/3 w-full space-y-2 overflow-hidden', className)}
+    >
+      <p className="text-3xl font-bold">{title}</p>
+      <Image
+        className="rounded-md object-cover"
+        width={560}
+        height={420}
+        src={image}
+        alt={title}
+      />
+    </div>
+  );
+}

apps/land/src/app/home/components/ValueCircle.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@clab-platforms/utils';
+
+interface ValueCircleProps {
+  keyword: string;
+  description: string;
+  className?: string;
+}
+
+export default function ValueCircle({
+  keyword,
+  description,
+  className,
+}: ValueCircleProps) {
+  return (
+    <div className={cn('flip-container', className)}>
+      <div className="flip">
+        <p className="text-clab-light-blue front text-3xl font-bold">
+          {keyword}
+        </p>
+        <p className="back flex flex-col p-6 text-xl">
+          <span className="mb-4 text-3xl font-extrabold">{keyword}</span>
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/land/src/app/home/components/index.ts

@@ -1 +1,3 @@
 export { default as TextSlider } from './TextSlider';
+export { default as ValueCircle } from './ValueCircle';
+export { default as ActivityCard } from './ActivityCard';

apps/land/src/app/home/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useScrollAnimation } from './useScrollAnimation';

apps/land/src/app/home/hooks/useScrollAnimation.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+export default function useScrollAnimation(targetClass: string) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const element = document.querySelector(`.${targetClass}`);
+      if (!element) return; // 요소가 없으면 반환
+      const direction = element.getBoundingClientRect();
+      const isInScreen =
+        direction.top < window.innerHeight - 300 && direction.bottom >= 0;
+
+      if (isInScreen) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [targetClass]);
+
+  return isVisible;
+}