diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
index fdc8d22..7090f55 100644
--- a/src/app/landing/page.tsx
+++ b/src/app/landing/page.tsx
@@ -3,16 +3,31 @@
import arrow from "../../img/arrow.png";
import gradient from "../../img/gradient.png";
import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { Time } from "@/app/landing/time";
+import { motion } from "framer";
+import {useAnimate} from "framer-motion";
+const slides = [];
export default function Landing() {
const [clicked1, setClicked1] = useState(false);
+ const [scope, animate] = useAnimate();
+ const [animated, setAnimated] = useState(false);
- return clicked1 ? (
-
+ useEffect(() => {
+ if(!clicked1)
+ return;
+ animate(scope.current, {y:"100vh"});
+ setAnimated(true);
+ }, [animate, scope, clicked1]);
+
+ return clicked1 && animated ? (
+
) : (
- setClicked1(true)}
className="flex-grow flex flex-col"
>
@@ -40,6 +55,6 @@ export default function Landing() {
width={window.innerWidth}
src={gradient}
/>
-
+
);
}
diff --git a/src/app/landing/time.tsx b/src/app/landing/time.tsx
index 648d75a..47e544e 100644
--- a/src/app/landing/time.tsx
+++ b/src/app/landing/time.tsx
@@ -1,13 +1,17 @@
"use client"
import 'react-circular-progressbar/dist/styles.css';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import { motion } from 'framer';
// import { useState } from "react";
export function Time() {
// const [secondsLeft, _setSecondsLeft] = useState(100);
const percentage = 66;
- return
+ return
{
Math.trunc(100 / 60)
@@ -22,5 +26,5 @@ export function Time() {
strokeLinecap: "butt"
})} value={percentage} />
-
+
}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8815d66..1f36f0c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
return (