starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-11 22:40:32 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

try

Browse Source
This commit is contained in:
Kisuyo
2024-09-07 19:50:36 +02:00
parent f1390275b0
commit bf6a374beb
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ import { Autocomplete } from "./Autocomplete"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { raleway } from "@/app/fonts" import { raleway } from "@/app/fonts"
import TextBlurTransition from "@/components/custom/text-blur-transition"
let graph_data_promise = import("./graph-data.json").then(a => a.default) let graph_data_promise = import("./graph-data.json").then(a => a.default)
@@ -37,14 +38,25 @@ export function PublicHomeRoute() {
<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"> <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.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
<motion.h1 <motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 1 }}
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",
zIndex: 0
}}
></motion.div>
<TextBlurTransition
className={cn("mb-2 text-center text-5xl font-bold tracking-tight sm:mb-4 md:text-7xl", raleway.className)} 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 I want to learn
</motion.h1> </TextBlurTransition>
<Autocomplete topics={raw_graph_data} onSelect={handleTopicSelect} onInputChange={handleInputChange} /> <Autocomplete topics={raw_graph_data} onSelect={handleTopicSelect} onInputChange={handleInputChange} />
</motion.div> </motion.div>
</div> </div>