diff --git a/app/components/link-button.tsx b/app/components/link-button.tsx
new file mode 100644
index 0000000..37cac35
--- /dev/null
+++ b/app/components/link-button.tsx
@@ -0,0 +1,26 @@
+'use client';
+import { motion } from "framer-motion"
+import { useState } from "react";
+
+const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => {
+ const [buttonHovered, setButtonHovered] = useState( false );
+ const [buttonPressed, setButtonPressed] = useState( false );
+ return (
+
+ setButtonHovered(true)}
+ onMouseLeave={()=>setButtonHovered(false)}
+ onClick={()=>{setButtonPressed(true); onPress && onPress();}}
+ >
+ {text}
+
+
+
+ );
+}
+
+export default LinkButton;
\ No newline at end of file
diff --git a/app/components/logo.tsx b/app/components/logo.tsx
index a4e2930..a21e943 100644
--- a/app/components/logo.tsx
+++ b/app/components/logo.tsx
@@ -1,6 +1,8 @@
'use client';
import { Transition } from "@headlessui/react";
+import { motion } from "framer-motion";
import { useState } from "react";
+import LinkButton from "./link-button";
const Logo = () => {
@@ -18,20 +20,24 @@ const Logo = () => {
leave="transition-opacity duration-75"
leaveFrom={logoHovered ? "opacity-70" : "opacity-100"}
leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */}
- setLogoHovered(true)}
onMouseLeave={()=>setLogoHovered(false)}>
-
+
{/* */}
- setAboutButtonHovered(true)}
+ onMouseLeave={()=>setAboutButtonHovered(false)}
>
About us
-
+ */}
+
)
}
diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx
index 45cd13d..f5a7bcb 100644
--- a/app/components/question_component.tsx
+++ b/app/components/question_component.tsx
@@ -1,8 +1,10 @@
-import { ReactComponentElement, ReactNode } from "react";
+import { ReactComponentElement, ReactNode, useEffect } from "react";
import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
import { Button, Transition } from "@headlessui/react";
+import wait from "../lib/delay";
+import { motion } from "framer-motion";
const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {
@@ -16,6 +18,10 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
}))
}
+ useEffect( () => {
+ wait( 1000 );
+ }, [] );
+
const handleAnswerClick = (right: boolean) => {
setState( (prevState: SessionState) => ({
...prevState,
@@ -47,14 +53,16 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
{question.text}
-
+ leaveTo="opacity-0"> */}
+ {/* */}
+
{question.answer}
@@ -91,7 +99,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
-
+
-
diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx
index dfd79dc..23575cb 100644
--- a/app/components/topic_card.tsx
+++ b/app/components/topic_card.tsx
@@ -1,7 +1,13 @@
-import { PlayIcon } from '@heroicons/react/24/outline'
+'use client';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import LinkButton from './link-button';
const TopicCard = ({ title, children, link }: { title: string, children: any, link: string }) => {
- return(
-
+ const [clicked, setClicked] = useState( false );
+ const [hovered, setHovered] = useState( false );
+ return (
+
setHovered(true)} onMouseLeave={()=>setHovered(false)}>
-
+
)
}
diff --git a/app/lib/delay.ts b/app/lib/delay.ts
new file mode 100644
index 0000000..486d7df
--- /dev/null
+++ b/app/lib/delay.ts
@@ -0,0 +1,5 @@
+const wait = (time: number): Promise => {
+ return new Promise( res => setTimeout( res, time ) );
+}
+
+export default wait;
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 1e980fe..5ce2e55 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,12 +1,15 @@
-
-import { Fragment } from 'react'
+'use client';
+import { Fragment, useState } from 'react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import Logo from './components/logo';
+import { motion } from 'framer-motion';
+import LinkButton from './components/link-button';
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
+ const [buttonPressed, setButtonPressed] = useState( false );
return (
{/*Background visual elements*/}
@@ -33,10 +36,13 @@ export default function Example() {
+ enterTo="opacity-80"
+ leave="transition-opacity duration-150"
+ leaveFrom="opacity-80"
+ leaveTo="opacity-0">
diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx
index a1859da..a73894e 100644
--- a/app/sessionconfig/page.tsx
+++ b/app/sessionconfig/page.tsx
@@ -81,13 +81,6 @@ export default function Example() {
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
-
)
diff --git a/package-lock.json b/package-lock.json
index c37c1f6..9c0297d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.3",
+ "framer-motion": "^11.2.10",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
@@ -2245,6 +2246,30 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/framer-motion": {
+ "version": "11.2.10",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+ "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4ed312c..6c6a4ab 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.3",
+ "framer-motion": "^11.2.10",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",