Merge branch 'main' of github.com:learn-anything/learn-anything.xyz

web/components/custom/text-blur-transition.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+import { motion } from "framer-motion"
+
+export default function TextBlurTransition(props: { children: string; className?: string }) {
+	const words = props.children.split(" ")
+
+	return (
+		<motion.div className={cn("flex w-full flex-wrap justify-center gap-3 transition-all", props.className)}>
+			{words.map((word, index) => {
+				return (
+					<motion.div
+						key={index}
+						initial={{ filter: "blur(8px)", translateY: "18px", opacity: 0 }}
+						animate={{ filter: "blur(0px)", translateY: "0px", opacity: 1 }}
+						transition={{
+							duration: index * 0.4 + 0.7,
+							easings: "cubic-bezier(.77, 0, .175, 1)"
+						}}
+					>
+						{word}
+					</motion.div>
+				)
+			})}
+		</motion.div>
+	)
+}

web/components/routes/public/PublicHomeRoute.tsx

@@ -7,6 +7,8 @@ import { Autocomplete } from "./Autocomplete"
 import { useRouter } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { raleway } from "@/app/fonts"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import TextBlurTransition from "@/components/custom/text-blur-transition"
 
 let graph_data_promise = import("./graph-data.json").then(a => a.default)
 
@@ -33,25 +35,41 @@ export function PublicHomeRoute() {
 
 	return (
 		<>
-			<div className="relative h-full w-screen">
+			<div className="relative h-full w-screen overflow-hidden">
-				<ForceGraphClient raw_nodes={raw_graph_data} onNodeClick={handleTopicSelect} filter_query={filterQuery} />
+				<ForceGraphClient
+					raw_nodes={raw_graph_data}
+					onNodeClick={val => handleTopicSelect(val)}
+					filter_query={filterQuery}
+				/>
 
-				<div className="absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5">
+				<motion.div
-					<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
+					className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5"
-						<motion.h1
+					initial={{ opacity: 0, y: 20 }}
-							className={cn(
+					animate={{ opacity: 1, y: 0 }}
-								"mb-2 text-center text-5xl font-bold tracking-tight sm:mb-4 md:text-7xl",
+					transition={{ duration: 0.5 }}
-								raleway.className
+					style={{ x: "-50%", y: "-50%" }}
-							)}
+				>
-							initial={{ opacity: 0, y: -20 }}
+					<div
-							animate={{ opacity: 1, y: 0 }}
+						className="absolute left-1/2 top-1/2 h-[350px] w-[500px] -translate-x-1/2 -translate-y-1/2 transform md:h-[450px] md:w-[700px]"
-							transition={{ duration: 0.5, delay: 0.2 }}
+						style={{
-						>
+							background:
-							I want to learn
+								"radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 70%)",
-						</motion.h1>
+							backgroundSize: "100% 100%",
-						<Autocomplete topics={raw_graph_data} onSelect={handleTopicSelect} onInputChange={handleInputChange} />
+							backgroundPosition: "center",
-					</motion.div>
+							backgroundRepeat: "no-repeat"
-				</div>
+						}}
+					></div>
+					<TextBlurTransition
+						className={cn("mb-2 text-center text-5xl font-bold tracking-tight sm:mb-4 md:text-7xl", raleway.className)}
+					>
+						I want to learn
+					</TextBlurTransition>
+					<Autocomplete
+						topics={raw_graph_data}
+						onSelect={topic => handleTopicSelect(topic.name)}
+						onInputChange={handleInputChange}
+					/>
+				</motion.div>
 			</div>
 		</>
 	)