starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aslam H
2024-09-07 23:51:50 +07:00
parent 45c4a38173 8da0828e6a
commit dccb144792
3 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

26
web/components/custom/text-blur-transition.tsx Normal file
View File

@@ -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>
)
}

54
web/components/routes/public/PublicHomeRoute.tsx
View File

@@ -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">
<ForceGraphClient raw_nodes={raw_graph_data} onNodeClick={handleTopicSelect} filter_query={filterQuery} />
<div className="relative h-full w-screen overflow-hidden">
<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 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
<motion.h1
className={cn(
"mb-2 text-center text-5xl font-bold tracking-tight sm:mb-4 md:text-7xl",
raleway.className
)}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
I want to learn
</motion.h1>
<Autocomplete topics={raw_graph_data} onSelect={handleTopicSelect} onInputChange={handleInputChange} />
</motion.div>
</div>
<motion.div
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"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
style={{ x: "-50%", y: "-50%" }}
>
<div
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]"
style={{
background:
"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%)",
backgroundSize: "100% 100%",
backgroundPosition: "center",
backgroundRepeat: "no-repeat"
}}
></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>
</>
)