60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
function Hero() {
|
|
const [hovered, setHovered] = React.useState("");
|
|
|
|
const textHover =
|
|
"hover:text-primary hover:scale-105 transition-all duration-300";
|
|
return (
|
|
<>
|
|
<div className="text-5xl lg:text-7xl rounded-md group font-bold max-w-xs lg:max-w-md mx-auto text-right flex flex-col relative cursor-default ">
|
|
<span
|
|
className={cn(
|
|
`absolute left-4 lg:left-0 bottom-full z-50 ${textHover}`,
|
|
hovered === "text-2" && "text-background blur-sm"
|
|
)}
|
|
onMouseEnter={() => setHovered("text-1")}
|
|
onMouseLeave={() => setHovered("")}
|
|
>
|
|
Timeless
|
|
</span>
|
|
<div className="flex gap-4 justify-end items-center pr-4 lg:pr-0">
|
|
<div
|
|
className={cn(
|
|
`size-12 rounded-full bg-background origin-right
|
|
relative overflow-hidden transition-all duration-300 opacity-0 `,
|
|
hovered === "text-2" && "scale-[300%] bg-primary opacity-100"
|
|
)}
|
|
>
|
|
<Image src={"/hero.gif"} alt="herp-gif" fill />
|
|
</div>
|
|
<span
|
|
className={textHover}
|
|
onMouseEnter={() => setHovered("text-2")}
|
|
onMouseLeave={() => setHovered("")}
|
|
>
|
|
Creative
|
|
</span>
|
|
</div>
|
|
<span
|
|
onMouseEnter={() => setHovered("text-3")}
|
|
onMouseLeave={() => setHovered("")}
|
|
className={cn(
|
|
`absolute left-4 lg:left-0 top-full ${textHover}`,
|
|
hovered.length ? "text-foreground" : "text-primary",
|
|
hovered === "text-2" && "text-background blur-sm"
|
|
)}
|
|
>
|
|
Unique
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Hero;
|