Merge pull request #26 from TEAM-WHEN-WILL-WE-MEET/develop

[DESIGN!] LandingPage UI/UX 리팩토링

package.json

@@ -18,8 +18,10 @@
     "crypto-browserify": "^3.12.1",
     "firebase": "^10.13.1",
     "https-browserify": "^1.0.0",
+    "lottie-react": "^2.4.1",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
+    "motion": "^12.0.6",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "react": "^18.3.1",

public/upArrow.json

@@ -0,0 +1 @@
+{"assets":[],"ddd":0,"fr":60,"h":500,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[71.013,-28.405]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[250,253.015],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0},"ti":[0,0],"to":[0,0]},{"t":48,"s":[250,213.015],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25},"ti":[0,0],"to":[0,0]},{"t":120,"s":[250,253.015],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":121,"st":0,"bm":0,"shapes":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0,0],[71.013,-56.811],[142.026,0]]}}},{"ty":"rd","hd":false,"r":{"a":0,"k":4}},{"ty":"st","hd":false,"bm":0,"c":{"a":1,"k":[{"t":0,"s":[0.302,0.671,0.992],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":48,"s":[0,0.529,0.988],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[0.302,0.671,0.992],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"lc":2,"lj":1,"ml":28.96,"o":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":48,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[100],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"w":{"a":0,"k":20}}]},{"ddd":0,"ind":2,"ty":4,"nm":"Path 2","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[71.013,-28.405]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[250,301.985],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0},"ti":[0,0],"to":[0,0]},{"t":52.2,"s":[250,260.985],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25},"ti":[0,0],"to":[0,0]},{"t":120,"s":[250,301.985],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":121,"st":0,"bm":0,"shapes":[{"ty":"sh","hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0,0],[71.013,-56.811],[142.026,0]]}}},{"ty":"rd","hd":false,"r":{"a":0,"k":4}},{"ty":"st","hd":false,"bm":0,"c":{"a":1,"k":[{"t":0,"s":[0.835,0.906,0.961],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":52.2,"s":[0.667,0.808,0.922],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[0.835,0.906,0.961],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"lc":2,"lj":1,"ml":28.96,"o":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":52.2,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[100],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"w":{"a":0,"k":20}}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":120,"v":"5.6.0","w":500}

src/App.js

@@ -9,7 +9,8 @@ import IndividualCalendar from './pages/individualCalendar';
 import MyPage from './pages/MyPage';
 import AccountManagement from './pages/AccountManagement';
 
-import LandingPage from "./pages/LandingPage";
+// import LandingPage from "./components/LandingPage";
+import LandingPage from "./components/LandingPage";
 
 function App() {
   return (

src/components/Button.tsx

@@ -157,7 +157,7 @@ export const ButtonVariants = cva(
           'font-pretendard',
           'whitespace-nowrap',
           '!transform-none',
-          '!hover:transform hover:transform-none',
+          '!hover:transform-none',
           !typographyVariants({ variant: 'b1-sb' }),
 
           //disabled
@@ -184,8 +184,8 @@ export const ButtonVariants = cva(
         'whitespace-nowrap',
         typographyVariants({ variant: 'b1-sb' }),
         `text-[var(--white)]`,
-        'transform hover:transform-none',
-
+        'hover:transform-none',
+        'hover:none'
         ]
       },
     },