"use client";
import Link from "next/link";
import React from "react";
import { cn } from "@/lib/utils";
const Skiper40 = () => {
return (
<section className="h-full snap-y snap-mandatory overflow-y-scroll">
<div className="relative flex h-full w-full flex-col items-center justify-center gap-5">
<Link001 href="mailto:hi@skiper-ui.com">hi@skiper-ui.com</Link001>
<Link002 href="mailto:hi@skiper-ui.com">hi@skiper-ui.com</Link002>
<Link003 href="mailto:hi@skiper-ui.com">hi@skiper-ui.com</Link003>
<Link004 href="mailto:hi@skiper-ui.com">hi@skiper-ui.com</Link004>
<Link005 href="mailto:hi@skiper-ui.com">hi@skiper-ui.com</Link005>
</div>
</section>
);
};
export { Link000, Link001, Link002, Link003, Link004, Link005, Skiper40 };
const Link000 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<Link
href={href}
className={cn(
"group relative flex items-center",
className,
"before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:h-[0.05em] before:w-full before:bg-current before:content-['']",
"before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"hover:before:origin-left hover:before:scale-x-100",
)}
>
{children}
</Link>
);
};
const Link001 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<a
href={href}
target="_blank"
className={cn(
"group relative flex items-center",
"before:pointer-events-none before:absolute before:left-0 before:top-[1.5em] before:h-[0.05em] before:w-full before:bg-current before:content-['']",
"before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"hover:before:origin-left hover:before:scale-x-100",
className,
)}
>
{children}
<svg
className="ml-[0.3em] mt-[0em] size-[0.55em] translate-y-1 opacity-0 transition-all duration-300 [motion-reduce:transition-none] group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none"
fill="none"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</a>
);
};
const Link002 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<a
href={href}
className={cn(
"group relative flex items-center",
className,
"before:pointer-events-none before:absolute before:left-0 before:top-[1.5em] before:h-[0.05em] before:w-full before:bg-current before:content-['']",
"before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"before:origin-left",
"hover:before:origin-right hover:before:scale-x-100",
)}
>
{children}
<svg
className="ml-[0.3em] mt-[0em] size-[0.55em] translate-y-1 opacity-0 transition-all duration-300 [motion-reduce:transition-none] group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none"
fill="none"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</a>
);
};
const Link003 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<a
href={href}
className={cn(
"group relative flex items-center",
className,
"before:pointer-events-none before:absolute before:left-0 before:top-[1.5em] before:h-[0.05em] before:w-full before:bg-current before:content-['']",
"before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"before:origin-center",
"hover:before:scale-x-100",
)}
>
{children}
<svg
className="ml-[0.3em] mt-[0em] size-[0.55em] translate-y-1 opacity-0 transition-all duration-300 [motion-reduce:transition-none] group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none"
fill="none"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</a>
);
};
const Link004 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<a
href={href}
className={cn(
"group relative flex items-center",
className,
"before:pointer-events-none before:absolute before:left-0 before:w-full before:bg-white before:content-['']",
"before:origin-right before:scale-x-0 before:transition-all before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"before:origin-center md:before:bottom-0",
"before:z-1 px-2 before:h-0 before:scale-x-100 before:mix-blend-difference hover:before:h-[1.4em]",
)}
>
{children}
<svg
className="z-0 ml-[0.6em] mt-[0em] size-[0.55em] translate-y-1 opacity-0 transition-all duration-300 [motion-reduce:transition-none] group-hover:translate-y-0 group-hover:rotate-45 group-hover:opacity-100 motion-reduce:transition-none"
fill="none"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</a>
);
};
const Link005 = ({
children,
href,
className,
}: {
children: React.ReactNode;
href: string;
className?: string;
}) => {
return (
<a
href={href}
className={cn(
className,
"group relative flex items-center",
"before:pointer-events-none before:absolute before:left-0 before:w-full before:bg-white before:content-['']",
"before:scale-x-1 before:transition-all before:duration-300 before:ease-[cubic-bezier(0.4,0,0.2,1)]",
"before:origin-left md:before:top-0",
"before:z-1 px-2 before:h-full before:scale-x-0 before:mix-blend-difference hover:before:scale-x-100",
)}
>
{children}
<svg
className="z-0 ml-[0.6em] mt-[0em] size-[0.55em] -translate-x-1 rotate-45 opacity-0 transition-all duration-300 [motion-reduce:transition-none] group-hover:translate-x-0 group-hover:opacity-100 motion-reduce:transition-none"
fill="none"
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004"
stroke="currentColor"
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</a>
);
};
/**
* Skiper 40 Animated Link — React
* Inspired by and adapted from https://cursor.com/?from=home
* We respect the original creators. This is an inspired rebuild with our own taste and does not claim any ownership.
* These animations aren’t associated with the cursor.com . They’re independent recreations meant to study interaction design
*
* License & Usage:
* - Free to use and modify in both personal and commercial projects.
* - Attribution to Skiper UI is required when using the free version.
* - No attribution required with Skiper UI Pro.
*
* Feedback and contributions are welcome.
*
* Author: @gurvinder-singh02
* Website: https://gxuri.in
* Twitter: https://x.com/Gur__vi
*/